Laravel 8 ajax crud tutorial. In this post, i will share with you step by step on how to build ajax crud operation app in laravel 8.
In this example post, i will implement ajax book crud (create , read, update and delete) operation app in laravel with modals & pagination.
Using this laravel 8 ajax book crud, you can easily perform insert update delete operation using ajax in laravel from database.
Laravel 8 Ajax CRUD Operation Example Tutorial
- Step 1 – Install Laravel 8 Application
- Step 2 – Configuring Database using Env File
- Step 3 – Create Book Model & Migration
- Step 4 – Create Routes
- Step 5 – Creating Ajax Book CRUD Controller
- Step 6 – Create Ajax Book CRUD Blade View
- Step 7 – Start Development Server
- Step 8 – Run Laravel 8 AJAX BOOK CRUD App On Browser
Step 1 – Install Laravel 8 Application
In step 1, open your terminal and navigate to your local web server directory using the following command:
//for windows user
cd xampp/htdocs
//for ubuntu user
cd var/www/html
Then install laravel 8 latest application using the following command:
composer create-project --prefer-dist laravel/laravel LaravelAjaxBookCrud
Step 2 – Configuring Database using Env File
In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Step 3 – Create Book Model & Migration
In step 3, open command prompt and navigate to your project by using the following command:
cd / LaravelAjaxBookCrud
Then create model and migration file by using the following command:
php artisan make:model Book -m
The above command will create two files into your laravel 8 ajax crud with modal app, which is located inside the following locations:
- LaravelAjaxBookCrud/app/Models/Book.php
- LaravelAjaxBookCrud/database/migrations/create_books_table.php
Now, open Book.php model file inside LaravelAjaxBookCrud/app/Models directory. And open it then add the fillable property code into Book.php file, like following:
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Book extends Model { use HasFactory; protected $fillable = [ 'title', 'code', 'author' ]; }
Then, find create_books_table.php file inside Laravel8Crud/database/migrations/ directory. Then open this file and add the following code into function up() on this file:
public function up() { Schema::create('books', function (Blueprint $table) { $table->id(); $table->string('title'); $table->string('code'); $table->string('author'); $table->timestamps(); }); }
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
php artisan migrate
Step 4 – Create Routes
In step 4, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:
use App\Http\Controllers\AjaxBOOKCRUDController; Route::get('ajax-book-crud', [AjaxBOOKCRUDController::class, 'index']); Route::post('add-update-book', [AjaxBOOKCRUDController::class, 'store']); Route::post('edit-book', [AjaxBOOKCRUDController::class, 'edit']); Route::post('delete-book', [AjaxBOOKCRUDController::class, 'destroy']);
Step 5 – Creating Ajax Book CRUD Controller
In step 5, create ajax book crud controller by using the following command:
php artisan make:controller AjaxBOOKCRUDController
The above command will create AjaxBOOKCRUDController.php file, which is located inside LaravelAjaxBookCrud/app/Http/Controllers/ directory.
And add the following code into AjaxBOOKCRUDController.php file:
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Book; class AjaxBOOKCRUDController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { $data['books'] = Book::orderBy('id','desc')->paginate(5); return view('ajax-book-crud',$data); } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { $book = Book::updateOrCreate( [ 'id' => $request->id ], [ 'title' => $request->title, 'code' => $request->code, 'author' => $request->author, ]); return response()->json(['success' => true]); } /** * Show the form for editing the specified resource. * * @param \App\Product $product * @return \Illuminate\Http\Response */ public function edit(Request $request) { $where = array('id' => $request->id); $book = Book::where($where)->first(); return response()->json($book); } /** * Remove the specified resource from storage. * * @param \App\Product $product * @return \Illuminate\Http\Response */ public function destroy(Request $request) { $book = Book::where('id',$request->id)->delete(); return response()->json(['success' => true]); } }
Step 6 – Create Ajax Book CRUD Blade View
In step 6, create one blade view file name ajax-book-crud.blade.php inside resource/views directory. Then add the following php and html code into ajax-book-crud.blade.php:
ajax-book-crud.blade.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Laravel 8 Ajax CRUD Tutorial</title> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" > <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-2"> <div class="row"> <div class="col-md-12 card-header text-center font-weight-bold"> <h2>Laravel 8 Ajax Book CRUD Tutorial</h2> </div> <div class="col-md-12 mt-1 mb-2"><button type="button" id="addNewBook" class="btn btn-success">Add</button></div> <div class="col-md-12"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Book Title</th> <th scope="col">Book Code</th> <th scope="col">Book Author</th> <th scope="col">Action</th> </tr> </thead> <tbody> @foreach ($books as $book) <tr> <td>{{ $book->id }}</td> <td>{{ $book->title }}</td> <td>{{ $book->code }}</td> <td>{{ $book->author }}</td> <td> <a href="javascript:void(0)" class="btn btn-primary edit" data-id="{{ $book->id }}">Edit</a> <a href="javascript:void(0)" class="btn btn-primary delete" data-id="{{ $book->id }}">Delete</a> </td> </tr> @endforeach </tbody> </table> {!! $books->links() !!} </div> </div> </div> <!-- boostrap model --> <div class="modal fade" id="ajax-book-model" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="ajaxBookModel"></h4> </div> <div class="modal-body"> <form action="javascript:void(0)" id="addEditBookForm" name="addEditBookForm" class="form-horizontal" method="POST"> <input type="hidden" name="id" id="id"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Book Name</label> <div class="col-sm-12"> <input type="text" class="form-control" id="title" name="title" placeholder="Enter Book Name" value="" maxlength="50" required=""> </div> </div> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Book Code</label> <div class="col-sm-12"> <input type="text" class="form-control" id="code" name="code" placeholder="Enter Book Code" value="" maxlength="50" required=""> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Book Author</label> <div class="col-sm-12"> <input type="text" class="form-control" id="author" name="author" placeholder="Enter author Name" value="" required=""> </div> </div> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary" id="btn-save" value="addNewBook">Save changes </button> </div> </form> </div> <div class="modal-footer"> </div> </div> </div> </div> <!-- end bootstrap model --> <script type="text/javascript"> $(document).ready(function($){ $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $('#addNewBook').click(function () { $('#addEditBookForm').trigger("reset"); $('#ajaxBookModel').html("Add Book"); $('#ajax-book-model').modal('show'); }); $('body').on('click', '.edit', function () { var id = $(this).data('id'); // ajax $.ajax({ type:"POST", url: "{{ url('edit-book') }}", data: { id: id }, dataType: 'json', success: function(res){ $('#ajaxBookModel').html("Edit Book"); $('#ajax-book-model').modal('show'); $('#id').val(res.id); $('#title').val(res.title); $('#code').val(res.code); $('#author').val(res.author); } }); }); $('body').on('click', '.delete', function () { if (confirm("Delete Record?") == true) { var id = $(this).data('id'); // ajax $.ajax({ type:"POST", url: "{{ url('delete-book') }}", data: { id: id }, dataType: 'json', success: function(res){ window.location.reload(); } }); } }); $('body').on('click', '#btn-save', function (event) { var id = $("#id").val(); var title = $("#title").val(); var code = $("#code").val(); var author = $("#author").val(); $("#btn-save").html('Please Wait...'); $("#btn-save"). attr("disabled", true); // ajax $.ajax({ type:"POST", url: "{{ url('add-update-book') }}", data: { id:id, title:title, code:code, author:author, }, dataType: 'json', success: function(res){ window.location.reload(); $("#btn-save").html('Submit'); $("#btn-save"). attr("disabled", false); } }); }); }); </script> </body> </html>
Step 7 – Start Development Server
Finally, open your command prompt again and run the following command to start development server for your simple laravel 8 ajax book crud app:
php artisan serve
Step 8 – Run Laravel 8 AJAX BOOK CRUD App On Browser
In step 8, open your browser and fire the following url into your browser:
http://127.0.0.1:8000/ajax-book-crud
Laravel 8 ajax crud operation app will look like in the following images:



