Laravel 8.x Ajax CRUD Example With Sweet Alert

Hello Artisan

CRUD operation is a basic and commone thing in every application whether it is big or small of familiarity with basic create, read, update and delete functionality of the Database. In this following tutorial i will help to create simple CRUD (Create Read Update Delete) Operation using Laravel and Ajax.

In this tutorial i am going to show you step by step laravel ajax crud example from scratch. In this laravel 8 ajax crud example, i will also show you the validation. I will show you from scratch.

If you don't know how to use ajax request and how to submit or delete or making crud with laravel using ajax, then you are a right place. In this tutorial i am using one modal. this one modal i will use for create and update also.

I will create Company model for laravel ajax crud tutorial along with name and address field. So let's start our laravel ajax crud tutorial in laravel 8.

i will also use swet alert to show awesome messages after creating updating or deleting our company table data. you can use toastr for showing message. But i am using sweet alert.

You can also check the github repository of this tutorial. Just check this below link

Laravel Ajax Crud Github

Now you can see the preview of this tutorial that what we are going to create right now. So see the below image to check laravel ajax 8 crud tutorial preview.

Preview: company list

Preview: create company modal form

Preview: edit company modal form

So now let's start our example tutorial.

Step 1: Download laravel

To create laravel ajax crud, download laravel fresh app using this below command.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Migration

For this laravel ajax crud tutorial we have to create our company model. so run below command.

php artisan make:model Company -m

In this step i will use Company model and companies table to create ajax laravel crud application. So paste this below code to your companies table.

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateCompaniesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('companies', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('address');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('companies');
    }
}

After create "companies" table you should setup Company model for ajax crud with laravel, paste this following code to Company model.

app/Company.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Company extends Model
{
    protected $fillable = [
        'name',
        'address'
    ];
}

Now run migration command after setup your database. 

Step 3: Define routes

Now, we need to define the routes inside the routes >> web.php file.

routes/web.php

Route::get('/company', 'CompanyController@view')->name('company.index');
Route::get('/companies', 'CompanyController@get_company_data')->name('data');
Route::get('/addcompany', 'CompanyController@view')->name('company.view');
Route::post('/addcompany', 'CompanyController@Store')->name('company.store');
Route::delete('/addcompany/{id}', 'CompanyController@destroy')->name('company.destroy');
Route::get('/addcompany/{id}/edit', 'CompanyController@update')->name('company.update');

Step 4: Create Controller

Now we need a controller. So create companyController for laravel ajax crud.

php artisan make:controller CompanyController

Now open company controller and paste this below code

app/Http/Controllers/CompanyController.php

namespace App\Http\Controllers;

use App\Company;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class CompanyController extends Controller
{
  public function view()
  {
      return view('company.index');
  }

  public function get_company_data(Request $request)
  {
      $companies = Company::latest()->paginate(5);

      return Request::ajax() ? 
                   response()->json($companies,Response::HTTP_OK) 
                   : abort(404);
  }

  public function Store(Request $request)
  {
    Company::updateOrCreate(
      [
        'id' => $request->id
      ],
      [
        'name' => $request->name,
        'address' => $request->address
      ]
    );

    return response()->json(
      [
        'success' => true,
        'message' => 'Data inserted successfully'
      ]
    );
  }

  public function update($id)
  {
    $comapny  = Company::find($id);

    return response()->json([
      'data' => $comapny
    ]);
  }
  
  public function destroy($id)
  {
    $company = Company::find($id);

    $company->delete();

    return response()->json([
      'message' => 'Data deleted successfully!'
    ]);
  }

}

Step 5: Create View File

Now everything is ok. we have to just create our view file. so create view inside the following directory

resources/views/layouts/app.blade.php

resources/views/company/index.blade.php

resources/views/company/modal.blade.php

Now just we have to include our javascript file. Then we can run our laravel ajax crud tutorial. So create a ajax.js file inside the following directory.

public/js/ajax.js

Now everything is done. to check laravel ajax crud with validation tutorial, just run below command and check the following url.

php artisan serve

and visit

Read also : Laravel Vue JS CRUD Example With File Upload and Pagination

Hope this laravel ajax crud tutorial will help you. If you get any error in your code then you can check github repository to get original code.