Are you looking for Ajax CRUD with Laravel 6 then I hope you are land in a perfect place. Here i give you a very simple easy way to explain how to create a ajax crud with laravel 6 tutorial with a CRUD example. I will show you (Create, Read, Update, Delete) Step by step for any beginners. Here i use laravel version 6 and ajax crud operation with also showing all validations errors, search sort and also pagination and bootstrap modal popup for create, edit and delete the data. Now this example i have create posts with title and description without page refresh or reload. So let’s start Ajax CRUD operations in laravel 6 app step by step.
1. Install Laravel 6
Now at first install a new laravel app by just running the below command.
composer create-project --prefer-dist laravel/laravel laravelajax
2. Configure .env file
Database Configuration
So now in this step, we require to make database configuration, you have to add following details on your .env file.
1.Database Username
2.Database Password
3.Database Name
In .env file also available host and port details, you can configure all details as in your system, So you can put like as bellow:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your database name here
DB_USERNAME=database username here
DB_PASSWORD=database password here3. Create Model and Migration
For creating a new model and a migration file. We need to run just the below command.
php artisan make:model Post -m
After successfully running this command we will get one model file as Post.php and also one migration file.
In Migration file
In we will migration file update the table columns just like below.
database\migrations\2021_03_13_082159_create_images_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateImagesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name')->nullable();
$table->string('path')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
}After that run the below command.
php artisan migrate
In Model
In our model app\Model\Post.php add fallible property same as like below.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title', 'description'
];
}4. Update Route
Now in this step we need to update the laravel 8 crud with ajax routes same like below.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
Route::resource('posts', PostController::class);
Route::get('/', function () {
return view('welcome');
});5. Create Controller
So now need to create a new resource controller as PostController just running below command.
php artisan make:controller PostController --resource
So after the successfully created our controller add below methods on it.
app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use App\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$posts = Post::all();
return view('posts', ['posts' => $posts]);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'title' => 'required|max:255',
'description' => 'required',
]);
$post = Post::updateOrCreate(['id' => $request->id], [
'title' => $request->title,
'description' => $request->description
]);
return response()->json(['code'=>200, 'message'=>'Post Created successfully','data' => $post], 200);
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$post = Post::find($id);
return response()->json($post);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$post = Post::find($id)->delete();
return response()->json(['success'=>'Post Deleted successfully']);
}
}Read Also : Laravel 8 Socialite Login with Facebook Account Example
6. Create Blade File
Now in this step we will create a posts.blade.php blade file and put below code on this file.
resources\views\posts.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
</head>
<style>
.alert-message {
color: red;
}
</style>
<body>
<div class="container">
<h2 style="margin-top: 12px;" class="alert alert-success">Ajax CRUD with Laravel App -
<a href="https://www.codingspoint.com" target="_blank" >codingspoint</a>
</h2><br>
<div class="row">
<div class="col-12 text-right">
<a href="javascript:void(0)" class="btn btn-success mb-3" id="create-new-post" onclick="addPost()">Add Post</a>
</div>
</div>
<div class="row" style="clear: both;margin-top: 18px;">
<div class="col-12">
<table id="laravel_crud" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
@foreach($posts as $post)
<tr id="row_{{$post->id}}">
<td>{{ $post->id }}</td>
<td>{{ $post->title }}</td>
<td>{{ $post->description }}</td>
<td><a href="javascript:void(0)" data-id="{{ $post->id }}" onclick="editPost(event.target)" class="btn btn-info">Edit</a></td>
<td>
<a href="javascript:void(0)" data-id="{{ $post->id }}" class="btn btn-danger" onclick="deletePost(event.target)">Delete</a></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>7. Add Model
After the adding posts blade file now we need to add a model after last closing div. If you have any problem you can ask below commend.
<div class="modal fade" id="post-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form name="userForm" class="form-horizontal">
<input type="hidden" name="post_id" id="post_id">
<div class="form-group">
<label for="name" class="col-sm-2">title</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="title" name="title" placeholder="Enter title">
<span id="titleError" class="alert-message"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Description</label>
<div class="col-sm-12">
<textarea class="form-control" id="description" name="description" placeholder="Enter description" rows="4" cols="50">
</textarea>
<span id="descriptionError" class="alert-message"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="createPost()">Save</button>
</div>
</div>
</div>
</div>8. Add JS & Ajax Request
Now we need to add jquery and ajax code after closing in body tag for our laravel 8 ajax crud.
<script>
$('#laravel_crud').DataTable();
function addPost() {
$("#post_id").val('');
$('#post-modal').modal('show');
}
function editPost(event) {
var id = $(event).data("id");
let _url = `/posts/${id}`;
$('#titleError').text('');
$('#descriptionError').text('');
$.ajax({
url: _url,
type: "GET",
success: function(response) {
if(response) {
$("#post_id").val(response.id);
$("#title").val(response.title);
$("#description").val(response.description);
$('#post-modal').modal('show');
}
}
});
}
function createPost() {
var title = $('#title').val();
var description = $('#description').val();
var id = $('#post_id').val();
let _url = `/posts`;
let _token = $('meta[name="csrf-token"]').attr('content');
$.ajax({
url: _url,
type: "POST",
data: {
id: id,
title: title,
description: description,
_token: _token
},
success: function(response) {
if(response.code == 200) {
if(id != ""){
$("#row_"+id+" td:nth-child(2)").html(response.data.title);
$("#row_"+id+" td:nth-child(3)").html(response.data.description);
} else {
$('table tbody').prepend('<tr id="row_'+response.data.id+'"><td>'+response.data.id+'</td><td>'+response.data.title+'</td><td>'+response.data.description+'</td><td><a href="javascript:void(0)" data-id="'+response.data.id+'" onclick="editPost(event.target)" class="btn btn-info">Edit</a></td><td><a href="javascript:void(0)" data-id="'+response.data.id+'" class="btn btn-danger" onclick="deletePost(event.target)">Delete</a></td></tr>');
}
$('#title').val('');
$('#description').val('');
$('#post-modal').modal('hide');
}
},
error: function(response) {
$('#titleError').text(response.responseJSON.errors.title);
$('#descriptionError').text(response.responseJSON.errors.description);
}
});
}
function deletePost(event) {
var id = $(event).data("id");
let _url = `/posts/${id}`;
let _token = $('meta[name="csrf-token"]').attr('content');
$.ajax({
url: _url,
type: 'DELETE',
data: {
_token: _token
},
success: function(response) {
$("#row_"+id).remove();
}
});
}
</script>Now everything is ready for run. To check laravel ajax crud with validation tutorial for beginners , just run below command and then check the following url.
Read Also: Laravel 8 Mobile Number Verification Tutorial
php artisan serveVisit this url
http://127.0.0.1:8000/company
Thank you read.Hope it will help you. Also follow on facebook
