Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
How to install laravel 9
https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel9
DB_USERNAME=root
DB_PASSWORD=
Creating Controller
php artisan make:controller MemberController
C:\xampp\htdocs\laravel9\blog>php artisan make:controller MemberController
controller created file located at : youproject/app/Http/Controller
blog\app\Http\Controllers\MemberController.php
change it with the following codes:
blog\app\Http\Controllers\MemberController.php
//blog\app\Http\Controllers\MemberController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Member;
class MemberController extends Controller
{
public function index(){
return view('show');
}
public function getMembers(){
$members = Member::all();
return view('memberlist', compact('members'));
}
public function save(Request $request){
if ($request->ajax()){
// Create New Member
$member = new Member;
$member->firstname = $request->input('firstname');
$member->lastname = $request->input('lastname');
// Save Member
$member->save();
return response($member);
}
}
public function delete(Request $request){
if ($request->ajax()){
Member::destroy($request->id);
}
}
public function update(Request $request){
if ($request->ajax()){
$member = Member::find($request->id);
$member->firstname = $request->input('firstname');
$member->lastname = $request->input('lastname');
$member->update();
return response($member);
}
}
}
Create Modelphp artisan make:model Member -m
C:\xampp\htdocs\laravel9\blog>php artisan make:model Member -m
This will create our model in the form of Member.php file located : blog\app\Models\Member.php
we put -m when we create our model.
this will automatically make the migration for our model and you will see that in yourproject/database/migrations
blog\database\migrations\create_members_table.php
edit code blog\database\migrations\create_members_table.php
////blog\database\migrations\create_members_table.php
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateMembersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('members', function (Blueprint $table) {
$table->increments('id');
$table->string('firstname');
$table->string('lastname');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('members');
}
}
Database Migration php artisan migrate
C:\xampp\htdocs\laravel9\blog>php artisan migrate
Migration table created successfully.
check database table created table created member
Creating Routes
blog\routes\web.php
//blog\routes\web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', 'MemberController@index');
Route::get('/show', 'MemberController@getMembers');
Route::post('/save', 'MemberController@save');
Route::post('/delete', 'MemberController@delete');
Route::post('/update', 'MemberController@update');
Creating Views blog\resources\views\app.blade.php
//blog\resources\views\app.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel Jquery Ajax CRUD (Create, Read, Update and Delete) | Laravel 9</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
@yield('content')
</div>
@include('modal')
@yield('script')
</body>
</html>
blog\resources\views\memberlist.blade.php
//blog\resources\views\memberlist.blade.php
@foreach($members as $member)
<tr>
<td>{{ $member->firstname }}</td>
<td>{{ $member->lastname }}</td>
<td><a href='#' class='btn btn-success edit' data-id='{{ $member->id }}' data-first='{{ $member->firstname }}' data-last='{{ $member->lastname }}'> Edit</a>
<a href='#' class='btn btn-danger delete' data-id='{{ $member->id }}'> Delete</a>
</td>
</tr>
@endforeach
blog\resources\views\show.blade.php
//blog\resources\views\show.blade.php
@extends('app')
@section('content')
<h1 class="page-header text-center">Laravel Jquery Ajax CRUD (Create, Read, Update and Delete) Bootstrap 5 Modal | Laravel 9</h1>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h2>Members Table
<button type="button" id="add" data-bs-toggle="modal" data-bs-target="#addnew" class="btn btn-primary pull-right"> Member</button>
</h2>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table class="table table-bordered table-responsive table-striped">
<thead>
<th>Fisrtname</th>
<th>Lastname</th>
<th>Action</th>
</thead>
<tbody id="memberBody">
</tbody>
</table>
</div>
</div>
@endsection
@section('script')
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
showMember();
$('#addForm').on('submit', function(e){
e.preventDefault();
var form = $(this).serialize();
var url = $(this).attr('action');
$.ajax({
type: 'POST',
url: url,
data: form,
dataType: 'json',
success: function(){
$('#addnew').modal('hide');
$('#addForm')[0].reset();
showMember();
}
});
});
$(document).on('click', '.edit', function(event){
event.preventDefault();
var id = $(this).data('id');
var firstname = $(this).data('first');
var lastname = $(this).data('last');
$('#editmodal').modal('show');
$('#firstname').val(firstname);
$('#lastname').val(lastname);
$('#memid').val(id);
});
$(document).on('click', '.delete', function(event){
event.preventDefault();
var id = $(this).data('id');
$('#deletemodal').modal('show');
$('#deletemember').val(id);
});
$('#editForm').on('submit', function(e){
e.preventDefault();
var form = $(this).serialize();
var url = $(this).attr('action');
$.post(url,form,function(data){
$('#editmodal').modal('hide');
showMember();
})
});
$('#deletemember').click(function(){
var id = $(this).val();
$.post("{{ URL::to('delete') }}",{id:id}, function(){
$('#deletemodal').modal('hide');
showMember();
})
});
});
function showMember(){
$.get("{{ URL::to('show') }}", function(data){
$('#memberBody').empty().html(data);
})
}
</script>
@endsection
blog\resources\views\modal.blade.php
//blog\resources\views\modal.blade.php
<!-- Add Modal -->
<div class="modal fade" id="addnew" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Add New Member</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="{{ URL::to('save') }}" id="addForm">
<div class="mb-3">
<label for="firstname">Firstname</label>
<input type="text" name="firstname" class="form-control" placeholder="Input Firstname" required>
</div>
<div class="mb-3">
<label for="lastname">Lastname</label>
<input type="text" name="lastname" class="form-control" placeholder="Input Lastname" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
</div>
<!-- Edit Modal -->
<div class="modal fade" id="editmodal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Edit Member</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="{{ URL::to('update') }}" id="editForm">
<input type="hidden" id="memid" name="id">
<div class="mb-3">
<label for="firstname">Firstname</label>
<input type="text" name="firstname" id="firstname" class="form-control">
</div>
<div class="mb-3">
<label for="lastname">Lastname</label>
<input type="text" name="lastname" id="lastname" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Update</button>
</form>
</div>
</div>
</div>
</div>
<!-- Delete Modal -->
<div class="modal fade" id="deletemodal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Delete Member</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4 class="text-center">Are you sure you want to delete Member?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="deletemember" class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</div>
</div>
Edit RouteServiceProvider.php blog\app\Providers\RouteServiceProvider.php
uncomment protected $namespace = 'App\\Http\\Controllers';
Run C:\xampp\htdocs\laravel9\blog>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
