Step 1: Install the laravel project using the command line.
composer create-project --prefer-dist laravel/laravel laravel9ajaxStep 2: Install Yajra Datatable
We going to install yajra datatable composer package for datatable.
composer require yajra/laravel-datatables-oracleAfter that you need to set providers and alias.
config/app.php
…..
'providers' => [
….
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
….
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]Open project in code and use vs code terminal.
code .Step 3: find .env file in root directory than setup database configuration.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_username
DB_PASSWORD=database_passwordStep 4: run Migration command
php artisan make:migration create_books_tableNow go to app/datatabase/migrations and open books migration file and put code within migration file app/database/timestamp_create_books_table.php the below code here :
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateBooksTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('books', function (Blueprint $table) {
$table->id();
$table->string('title')->nullable();
$table->string('author')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('books');
}
}
Step 5: Next migrate the table using the below command :
php artisan migrateStep 6: Now create a model and controller within the same command
php artisan make:controller BooksController --resourceStep 7: Now open model input below code.
Path: app/Models/Book.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Book extends Model
{
protected $fillable = [
'title', 'author'
];
}Step 8: Now open BookController and put below code for all crud operation.
<?php
namespace App\Http\Controllers;
use App\Models\Book;
use Illuminate\Http\Request;
use DataTables;
class BooksController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
$books = Book::latest()->get();
if ($request->ajax()) {
$data = Book::latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '<a href="javascript:void(0)" data-toggle="tooltip" data-id="'.$row->id.'" data-original-title="Edit" class="edit btn btn-primary btn-sm editBook">Edit</a>';
$btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip" data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteBook">Delete</a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('book',compact('books'));
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
Book::updateOrCreate(['id' => $request->book_id],
['title' => $request->title, 'author' => $request->author]);
return response()->json(['success'=>'Book saved successfully.']);
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Book $book
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$book = Book::find($id);
return response()->json($book);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Book $book
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
Book::find($id)->delete();
return response()->json(['success'=>'Book deleted successfully.']);
}
}Step 9: Create a view within the resources/views folder.
Now we will create a blade file with the name of book.blade.php. here we will implement books list with data tables. bootstrap modal form and edit books details.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Crud operation using ajax(Real Programmer)</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Laravel 9 Crud with Ajax</h1>
<a class="btn btn-success" href="javascript:void(0)" id="createNewBook"> Create New Book</a>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Author</th>
<th width="300px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal fade" id="ajaxModel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modelHeading"></h4>
</div>
<div class="modal-body">
<form id="bookForm" name="bookForm" class="form-horizontal">
<input type="hidden" name="book_id" id="book_id">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Title</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="title" name="title" placeholder="Enter Title" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Details</label>
<div class="col-sm-12">
<textarea id="author" name="author" required="" placeholder="Enter Author" class="form-control"></textarea>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="saveBtn" value="create">Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('books.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'title', name: 'title'},
{data: 'author', name: 'author'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$('#createNewBook').click(function () {
$('#saveBtn').val("create-book");
$('#book_id').val('');
$('#bookForm').trigger("reset");
$('#modelHeading').html("Create New Book");
$('#ajaxModel').modal('show');
});
$('body').on('click', '.editBook', function () {
var book_id = $(this).data('id');
$.get("{{ route('books.index') }}" +'/' + book_id +'/edit', function (data) {
$('#modelHeading').html("Edit Book");
$('#saveBtn').val("edit-book");
$('#ajaxModel').modal('show');
$('#book_id').val(data.id);
$('#title').val(data.title);
$('#author').val(data.author);
})
});
$('#saveBtn').click(function (e) {
e.preventDefault();
$(this).html('Save');
$.ajax({
data: $('#bookForm').serialize(),
url: "{{ route('books.store') }}",
type: "POST",
dataType: 'json',
success: function (data) {
$('#bookForm').trigger("reset");
$('#ajaxModel').modal('hide');
table.draw();
},
error: function (data) {
console.log('Error:', data);
$('#saveBtn').html('Save Changes');
}
});
});
$('body').on('click', '.deleteBook', function () {
var book_id = $(this).data("id");
confirm("Are You sure want to delete !");
$.ajax({
type: "DELETE",
url: "{{ route('books.store') }}"+'/'+book_id,
success: function (data) {
table.draw();
},
error: function (data) {
console.log('Error:', data);
}
});
});
});
</script>
</body>
</html>Step 10: Create route and route will contain multiple methods like create update delete using resource.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
use App\Http\Controllers\BooksController;
Route::get('/', function () {
return view('welcome');
});
Route::resource('books', BooksController::class);
Step 11: Start Development Server
we will use the php artisan serve command. than it will start your server.
php artisan serve
php artisan serve --port=8080
http://127.0.0.1:8000/books
if you want to run a server in a different port than you can run below command.
php artisan serve --port=8080
http://127.0.0.1:8000/books
Git: https://github.com/siddharth018/Laravel-8-CRUD-using-ajax
