{"id":1297,"date":"2024-08-22T11:03:19","date_gmt":"2024-08-22T11:03:19","guid":{"rendered":"https:\/\/www.appfinz.com\/blogs\/?p=1297"},"modified":"2024-08-22T11:03:20","modified_gmt":"2024-08-22T11:03:20","slug":"ajax-crud-operations-in-laravel","status":"publish","type":"post","link":"https:\/\/www.appfinz.com\/blogs\/ajax-crud-operations-in-laravel\/","title":{"rendered":"Building a Simple AJAX CRUD Application in Laravel: Add, Edit, Delete, and List"},"content":{"rendered":"\n

In modern web applications, CRUD operations CRUD operations<\/strong>\u2014Create, Read, Update, and Delete\u2014are fundamental features. With Laravel, developing these functionalities is straightforward, In this blog we walk through the manner of building a simple AJAX-based totally CRUD software in Laravel<\/strong>. We will cover everything from putting in database to the Laravel challenge to writing the code for AJAX-primarily based operations.<\/p>\n\n\n\n

Ajax Methods with Laravel Crud<\/h2>\n\n\n\n

AJAX (Asynchronous JavaScript and XML)<\/strong> allows you to send and receive data from a server asynchronously, without refreshing the page. This leads to a smoother user experience, as users can interact with the application while data is being processed in the background. In this tutorial, we’ll demonstrate how to implement AJAX-based CRUD operations in a Laravel application<\/strong>.<\/p>\n\n\n\n

Setting Up the Laravel Project<\/h2>\n\n\n\n

First, ensure you have Composer<\/strong><\/a> installed on your system<\/strong>. Then, create a new Laravel project using the following command<\/a>:<\/p>\n\n\n\n

composer create-project --prefer-dist laravel\/laravel ajax-crud-app<\/pre><\/div>\n\n\n\n
Navigate to the project directory:<\/p>\n\n\n\n
cd ajax-crud-app<\/pre><\/div>\n\n\n\n
Database Configuration<\/h2>\n\n\n\n
Open the .env<\/code> file and configure your database connection settings:<\/p>\n\n\n\n
DB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=ajax_crud_db\nDB_USERNAME=root\nDB_PASSWORD=your_password<\/pre><\/div>\n\n\n\n
After setting up the database, create it in your MySQL <\/a><\/strong><\/p>\n\n\n\n
Creating the Model and Migration<\/h2>\n\n\n\n
Next, create a model along with a migration for the entity we will manage. For this example, let’s create a model called Post<\/code>:<\/p>\n\n\n\n
php artisan make:model Post -m<\/pre><\/div>\n\n\n\n
This command creates a Post<\/code> model and a migration file. Open the migration file located at database\/migrations<\/code> and define the schema for the posts<\/code> table:<\/p>\n\n\n\n
public function up()\n{\n    Schema::create('posts', function (Blueprint $table) {\n        $table->id();\n        $table->string('title');\n        $table->text('body');\n        $table->timestamps();\n    });\n}<\/pre><\/div>\n\n\n\n
Run the migration to create the posts<\/code> table in the database:<\/p>\n\n\n\n
php artisan migrate<\/pre><\/div>\n\n\n\n
Setting Up Routes<\/h2>\n\n\n\n
Open the routes\/web.php<\/code> file and define the necessary routes for your CRUD operations<\/strong>:<\/p>\n\n\n\n
use App\\Http\\Controllers\\PostController;\n\nRoute::get('\/', [PostController::class, 'index'])->name('posts.index');\nRoute::get('\/posts', [PostController::class, 'getPosts'])->name('posts.get');\nRoute::post('\/posts', [PostController::class, 'store'])->name('posts.store');\nRoute::get('\/posts\/{id}', [PostController::class, 'edit'])->name('posts.edit');\nRoute::put('\/posts\/{id}', [PostController::class, 'update'])->name('posts.update');\nRoute::delete('\/posts\/{id}', [PostController::class, 'destroy'])->name('posts.destroy');\n<\/pre><\/div>\n\n\n\n
Creating the Controller<\/h2>\n\n\n\n
Next, create a PostController<\/code> to handle the logic for our CRUD operations:<\/strong><\/p>\n\n\n\n
php artisan make:controller PostController<\/pre><\/div>\n\n\n\n
In the PostController<\/code>, add the following methods to handle the CRUD operations<\/strong>:<\/p>\n\n\n\n
namespace App\\Http\\Controllers;\n\nuse App\\Models\\Post;\nuse Illuminate\\Http\\Request;\nuse Response;\n\nclass PostController extends Controller\n{\n    public function index()\n    {\n        return view('posts.index');\n    }\n\n    public function getPosts()\n    {\n        $posts = Post::all();\n        return response()->json($posts);\n    }\n\n    public function store(Request $request)\n    {\n        $post = Post::create([\n            'title' => $request->title,\n            'body' => $request->body,\n        ]);\n        \n        return response()->json($post);\n    }\n\n    public function edit($id)\n    {\n        $post = Post::find($id);\n        return response()->json($post);\n    }\n\n    public function update(Request $request, $id)\n    {\n        $post = Post::find($id);\n        $post->update([\n            'title' => $request->title,\n            'body' => $request->body,\n        ]);\n\n        return response()->json($post);\n    }\n\n    public function destroy($id)\n    {\n        Post::destroy($id);\n        return response()->json(['success' => 'Post deleted successfully.']);\n    }\n}<\/pre><\/div>\n\n\n\n
Building the Blade View<\/h2>\n\n\n\n
Create a Blade template to serve as the frontend for the CRUD operations<\/strong>. In the resources\/views<\/code> directory, create a file named index.blade.php<\/code>:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <meta name="csrf-token" content="{{ csrf_token() }}">\n    <title>Laravel AJAX CRUD<\/title>\n    <link rel="stylesheet" href="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css">\n    <script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js"><\/script>\n<\/head>\n<body>\n\n<div class="container mt-5">\n    <h2 class="text-center">Laravel AJAX CRUD<\/h2>\n    <div class="row">\n        <div class="col-md-6">\n            <form id="postForm">\n                <div class="form-group">\n                    <label for="title">Title:<\/label>\n                    <input type="text" class="form-control" id="title" name="title" required>\n                <\/div>\n                <div class="form-group">\n                    <label for="body">Body:<\/label>\n                    <textarea class="form-control" id="body" name="body" required><\/textarea>\n                <\/div>\n                <button type="submit" id="saveBtn" class="btn btn-success">Save<\/button>\n            <\/form>\n        <\/div>\n        <div class="col-md-6">\n            <table class="table table-bordered">\n                <thead>\n                    <tr>\n                        <th>ID<\/th>\n                        <th>Title<\/th>\n                        <th>Body<\/th>\n                        <th>Action<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody id="postList">\n                    <!-- Data will be loaded here via AJAX -->\n                <\/tbody>\n            <\/table>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    $(document).ready(function() {\n        \/\/ Fetch posts\n        fetchPosts();\n\n        \/\/ Save post\n        $('#postForm').on('submit', function(e) {\n            e.preventDefault();\n            let id = $('#post_id').val();\n            let url = id ? `\/posts\/${id}` : '\/posts';\n            let type = id ? 'PUT' : 'POST';\n            let formData = {\n                title: $('#title').val(),\n                body: $('#body').val(),\n            };\n\n            $.ajax({\n                type: type,\n                url: url,\n                data: formData,\n                dataType: 'json',\n                success: function(response) {\n                    $('#postForm').trigger("reset");\n                    $('#saveBtn').text('Save');\n                    fetchPosts();\n                },\n                error: function(error) {\n                    console.log(error);\n                }\n            });\n        });\n\n        \/\/ Edit post\n        $(document).on('click', '.edit-post', function() {\n            let id = $(this).data('id');\n            $.get(`\/posts\/${id}`, function(data) {\n                $('#title').val(data.title);\n                $('#body').val(data.body);\n                $('#post_id').val(data.id);\n                $('#saveBtn').text('Update');\n            });\n        });\n\n        \/\/ Delete post\n        $(document).on('click', '.delete-post', function() {\n            let id = $(this).data('id');\n            if(confirm("Are you sure want to delete this post?")) {\n                $.ajax({\n                    type: "DELETE",\n                    url: `\/posts\/${id}`,\n                    success: function(response) {\n                        fetchPosts();\n                    },\n                    error: function(error) {\n                        console.log(error);\n                    }\n                });\n            }\n        });\n\n        \/\/ Fetch posts\n        function fetchPosts() {\n            $.ajax({\n                type: "GET",\n                url: "\/posts",\n                success: function(data) {\n                    let rows = '';\n                    $.each(data, function(key, post) {\n                        rows += `\n                            <tr>\n                                <td>${post.id}<\/td>\n                                <td>${post.title}<\/td>\n                                <td>${post.body}<\/td>\n                                <td>\n                                    <button data-id="${post.id}" class="btn btn-primary btn-sm edit-post">Edit<\/button>\n                                    <button data-id="${post.id}" class="btn btn-danger btn-sm delete-post">Delete<\/button>\n                                <\/td>\n                            <\/tr>\n                        `;\n                    });\n                    $('#postList').html(rows);\n                },\n                error: function(error) {\n                    console.log(error);\n                }\n            });\n        }\n    });\n<\/script>\n\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
Implementing AJAX CRUD Operations<\/h2>\n\n\n\n
AJAX for Adding Data<\/h3>\n\n\n\n
When the user submits the form, the #postForm<\/code>‘s submit<\/code> event triggers an AJAX request to either store or update the post. This is determined by whether there is an ID present:<\/p>\n\n\n\n
$('#postForm').on('submit', function(e) {\n    e.preventDefault();\n    let id = $('#post_id').val();\n    let url = id ? `\/posts\/${id}` : '\/posts';\n    let type = id ? 'PUT' : 'POST';\n    let formData = {\n        title: $('#title').val(),\n        body: $('#body').val(),\n    };\n\n    $.ajax({\n        type: type,\n        url: url,\n        data: formData,\n        dataType: 'json',\n        success: function(response) {\n            $('#postForm').trigger("reset");\n            $('#saveBtn').text('Save');\n            fetchPosts();\n        },\n        error: function(error) {\n            console.log(error);\n        }\n    });\n});\n<\/pre><\/div>\n\n\n\n
AJAX for Editing Data<\/h3>\n\n\n\n
When a user clicks the “Edit” button, an AJAX request is sent to fetch the post data, which is then populated into the form fields:<\/p>\n\n\n\n
$(document).on('click', '.edit-post', function() {\n    let id = $(this).data('id');\n    $.get(`\/posts\/${id}`, function(data) {\n        $('#title').val(data.title);\n        $('#body').val(data.body);\n        $('#post_id').val(data.id);\n        $('#saveBtn').text('Update');\n    });\n});\n<\/pre><\/div>\n\n\n\n
AJAX for Deleting Data<\/h3>\n\n\n\n
When a user clicks the “Delete<\/strong>” button, an AJAX request is sent to delete the post, followed by refreshing the list of posts:<\/p>\n\n\n\n
$(document).on('click', '.delete-post', function() {\n    let id = $(this).data('id');\n    if(confirm("Are you sure want to delete this post?")) {\n        $.ajax({\n            type: "DELETE",\n            url: `\/posts\/${id}`,\n            success: function(response) {\n                fetchPosts();\n            },\n            error: function(error) {\n                console.log(error);\n            }\n        });\n    }\n});\n<\/pre><\/div>\n\n\n\n
AJAX for Listing Data<\/strong><\/h3>\n\n\n\n
The fetchPosts<\/code> function sends a GET request to retrieve and display all posts:<\/p>\n\n\n\n
function fetchPosts() {\n    $.ajax({\n        type: "GET",\n        url: "\/posts",\n        success: function(data) {\n            let rows = '';\n            $.each(data, function(key, post) {\n                rows += `\n                    <tr>\n                        <td>${post.id}<\/td>\n                        <td>${post.title}<\/td>\n                        <td>${post.body}<\/td>\n                        <td>\n                            <button data-id="${post.id}" class="btn btn-primary btn-sm edit-post">Edit<\/button>\n                            <button data-id="${post.id}" class="btn btn-danger btn-sm delete-post">Delete<\/button>\n                        <\/td>\n                    <\/tr>\n                `;\n            });\n            $('#postList').html(rows);\n        },\n        error: function(error) {\n            console.log(error);\n        }\n    });\n}\n<\/pre><\/div>\n\n\n\n
Testing the Application<\/strong><\/h2>\n\n\n\n
To test your application, start the Laravel development server<\/strong>:<\/p>\n\n\n\n
php artisan serve<\/pre><\/div>\n\n\n\n
Visit http:\/\/localhost:8000<\/code> to view your application. You should be able to add, edit, and delete posts without refreshing the page.<\/p>\n\n\n\n
In this article, we\u2019ve built a simple CRUD application in Laravel<\/strong> enhanced with AJAX. By using AJAX, we\u2019ve improved the user experience by making our application more responsive and eliminating the need for page reloads.<\/p>\n","protected":false},"excerpt":{"rendered":"
In modern web applications, CRUD operations CRUD operations\u2014Create, Read, Update, and Delete\u2014are fundamental features. With<\/p>\n","protected":false},"author":1,"featured_media":1298,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1],"tags":[210,209,208,207],"class_list":["post-1297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-php","tag-ajax-methods-with-laravel-crud","tag-crud-operations-crud-operations","tag-crud-software-in-laravel","tag-laravel-crud"],"_links":{"self":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/1297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/comments?post=1297"}],"version-history":[{"count":1,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/1297\/revisions"}],"predecessor-version":[{"id":1299,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/1297\/revisions\/1299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media\/1298"}],"wp:attachment":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media?parent=1297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/categories?post=1297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/tags?post=1297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}