Laravel Redirect To Another URL / Web Page - HTTP Laravel Redirects

Laravel 6.2 jQuery AJAX CRUD Tutorial

Today, We want to share with you Laravel 6.2 jQuery AJAX CRUD Tutorial.In this post we will show you Laravel 6.2 Ajax CRUD Tutorial For Beginners, hear for Laravel 6.2 Ajax CRUD (Operation) Application Example we will give you demo and example for implement.In this post, we will learn about Laravel 6.2 Ajax CRUD example for web application without page refresh with an example.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Laravel 6.2 jQuery AJAX CRUD Tutorial

There are the Following The simple About Laravel 6.2 Ajax CRUD with Pagination example and demo from scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel 6.2 Create First Ajax CRUD Application, so the Step by Step CRUD Operation in Laravel 6.2 with File Upload is used for this example is following below.

Phase 1 : Install Laravel 6.2 and Basic Configurations

Install Laravel 6.2 and Basic some IMP. Configurations

composer create-project --prefer-dist laravel/laravel adminpanel-api-project

Phase 2 : Laravel 6.2 Install Yajra Datatables

display all movies in datatable, we’ll use the Laravel 6.2 Yajra Datatables package

composer require yajra/laravel-datatables-oracle

Phase 3 : Create Movie Model, Migration & Controller

create the movie model, migration and controller using Laravel 6.2

php artisan make:model Movie -mcr

database/migration/timestamp_create_movies_table.php

public function up()
{
    Schema::create('movies', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('name');
        $table->string('author');
        $table->timestamps();
    });
}

migrate the migration using Laravel 6.2

php artisan migrate

Laravel 6.2 : open Movie model and add a $fillable array

app/Movie.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;

class Movie extends Model
{
    protected $fillable = [
        'name', 'author'
    ];
}

app\Http\Controllers\API\MovieController.php

<?php

namespace App\Http\Controllers;

use App\Movie;
use Illuminate\Http\Request;
use DataTables;

class MovieController extends Controller
{
    public function index(Request $request)
    {
        $movies = Movie::latest()->get();

        if ($request->ajax()) {
            return Datatables::of($movies)
                ->addIndexColumn()
                ->addColumn('action', function ($row) {

                    $btn = 'Edit';
                    $btn = $btn . ' Delete';
                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('movies', compact('movies'));
    }

    public function store(Request $request)
    {
        Movie::updateOrCreate([
            'id' => $request->movie_id
        ],[
            'name' => $request->name,
            'author' => $request->author
        ]);

        // return response
        $response = [
            'success' => true,
            'message' => 'Movie saved successfully.',
        ];
        return response()->json($response, 200);
    }

    public function edit($id)
    {
        $movie = Movie::find($id);
        return response()->json($movie);
    }

    public function destroy(Movie $movie)
    {
        $movie->delete();

        // return response
        $response = [
            'success' => true,
            'message' => 'Movie deleted successfully.',
        ];
        return response()->json($response, 200);
    }
}

Phase 4 : Laravel 6.2 Register Route

routes/web.php

Route::resource('movies','MovieController');

Phase 5 : Create Laravel 6.2 Blade File

resources/views/movies.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 6.2 Ajax CRUD with DataTables Tutorial For Beginners - www.pakainfo.com</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.20/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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>
</head>
<body>
<div class="container">
    <div class="text-center" style="margin: 20px 0px 20px 0px;">
        <a href="https://beta.mynotepaper.com/" target="_blank" rel="noopener noreferrer"><img src="https://i.imgur.com/pakainfo.png"></a><br>
        <span class="text-secondary">Laravel 6.2 Ajax CRUD with DataTables Tutorial For Beginners</span>
    </div>
    <div class="container-fluid">
        <div class="row">
            <h4 class="one">Movies</h4>
            <button class="btn btn-info ml-auto" id="createNewMovie">Create Movie</button>
        </div>
    </div>
    <br>
    <h3>Laravel 6.2 Ajax CRUD with Pagination example and demo from scratch</h3>
    <table id="dataTable" class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Author</th>
            <th width="280px">Action</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

{{-- create/update movie modal--}}
<div class="modal fade" id="basic_ajax_model" 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="movieForm" name="movieForm" class="form-horizontal">
                    <input type="hidden" name="movie_id" id="movie_id">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">Name</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Enter name"
                                   value="" maxlength="50" required="" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Author</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="author" name="author"
                                   placeholder="Enter author name"
                                   value="" maxlength="50" required="" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary" id="saveBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript">
    $(function () {
        //ajax setup
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        //Laravel 6.2 datatable
        var table = $('#dataTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url('movies') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'name', name: 'name'},
                {data: 'author', name: 'author'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });

        // create new movie
        $('#createNewMovie').click(function () {
            $('#saveBtn').html("Create");
            $('#movie_id').val('');
            $('#movieForm').trigger("reset");
            $('#modelHeading').html("Create New Movie");
            $('#basic_ajax_model').modal('show');
        });

        // create or update movie
        $('#saveBtn').click(function (e) {
            e.preventDefault();
            $(this).html('Saving..');

            $.ajax({
                data: $('#movieForm').serialize(),
                url: "{{ url('movies') }}",
                type: "POST",
                dataType: 'json',
                success: function (data) {
                    $('#movieForm').trigger("reset");
                    $('#basic_ajax_model').modal('hide');
                    table.draw();
                    $('#saveBtn').html('Save');
                },
                error: function (data) {
                    console.log('Error:', data);
                    $('#saveBtn').html('Save');
                }
            });
        });

        // edit movie
        $('body').on('click', '.editMovie', function () {
            var movie_id = $(this).data('id');
            $.get("{{ url('movies') }}" + '/' + movie_id + '/edit', function (data) {
                $('#modelHeading').html("Edit Movie");
                $('#saveBtn').html('Update');
                $('#basic_ajax_model').modal('show');
                $('#movie_id').val(data.id);
                $('#name').val(data.name);
                $('#author').val(data.author);
            })
        });

        // delete movie
        $('body').on('click', '.deleteMovie', function () {
            var movie_id = $(this).data("id");
            confirm("Are You sure want to delete !");

            $.ajax({
                type: "DELETE",
                url: "{{ url('movies') }}" + '/' + movie_id,
                success: function (data) {
                    table.draw();
                },
                error: function (data) {
                    console.log('Error:', data);
                }
            });
        });

    });
</script>
</html>

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about AJAX CRUD Tutorial Using jQuery, JSON and PHP Laravel 6.2.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   PHP Jquery Ajax CRUD Example Tutorial From Scratch
  2.   Get last inserted ID laravel 5.7 Examples
  3.   how to call helper function in codeigniter view
  4.   WooCommerce Get Product Downloads
  5.   Date Filter Using Angular Example with Demo
  6.   Codeigniter Session set and Retrieve multidimensional array
  7.   jQuery Hierarchy Selectors List Example
  8.   Laravel 6 JQuery Ajax Post Request Example
  9.   PHP Laravel Middleware Route Groups
  10.   PHP laravel open new tab Example Tutorial