Hello Artisan
Do you know Laravel was released two days ago. So now with the latest version of Laravel i am going to show you Laravel 8 Ajax crud example from step by step. I will create this Laravel Ajax crud from scratch so that you can easily understand. I will also share my github repository of this Laravel ajax crud tutorial.
In this ajax laravel crud with popup modal i will use modal to edit and create our data. I don't create new page. From a single page i will complete this crud tutorial of Laravel and Ajax. So in this ajax tutorial in Laravel you will also know how to setup ajax in laravel 8.
Using Ajax request i will create update delete and read system in Laravel. So you will also learn how to setup Ajax and work with Ajax request in Laravel 8. So let's start our Laravel 8 Ajax crud tutorial. I will use sweet alert to show success message.
You can also check the github repository of this tutorial. Just check this below link
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.
#laravel #crud #laravel-8 #laravel-x #laravel-7x #example #tutorial #source-code