jQuery Ajax CRUD operations in Laravel 5.7

Technology, JavaScript, jQuery, Laravel, Mysql, Programming Leave a comment

Today, We want to share with you jQuery Ajax CRUD operations in Laravel 5.7.In this post we will show you ajax crud operations in laravel 5.7 with modal & pagination, hear for Laravel 5.7 Ajax CRUD with Pagination example and demo from scratch we will give you demo and example for implement.In this post, we will learn about Laravel 5.7 Ajax CRUD example for web application without page refresh with an example.

jQuery Ajax CRUD operations in Laravel 5.7

There are the Following The simple About jQuery Ajax CRUD operations in Laravel 5.7 Full Information With Example and source code.

As I will cover this Post with live Working example to develop Ajax CRUD example in Laravel 5.7 application, so the laravel 5.7 ajax update database for this example is following below.

Step 1: Install Laravel 5.7

Run the below Laravel command to install laravel Latest version Like Laravel 5.7,

Composer create-project --prefer-dist laravel/laravel crud

Step 2: Setup MySQL Database Configuration

We can do all the database setup step by step configuration on .env file.

Step 3: Create Table

Comment to create table,

php artisan make:migration create_products_table --create=product

Now, Go to path “database/migrations” and here We can simple change the migration file of product table,

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateproductsTable extends Migration
{
    public function up()
    {
        Schema::create('products', function(Blueprint $table)
        {
            $table->increments('id');
            $table->string('name');
            $table->string('description');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

After that we can Use the below PHP artisan command to migrate.

php artisan migrate

Step 4: Creating Laravel 5.7 Controller

Run the below simple command to create a Laravel controller as well as Laravel model,

php artisan make:controller ProductController --resource --model=Model/Product

We can display the created Laravel controller Path on “app/Http/Controllers/”

Step 5: Define a Laravel Routes

And then, We simple Run the following PHP artisan command to include the routes inside the file name web.php file of routes folder.

Also Read This 👉   How to remove undefined value from Laravel PHP array?

Route::resource('product','ProductController');

Step 6: Make a Laravel Default Methods In Product Controller

  • Index()
  • Create()
  • Store()
  • Show()
  • Edit()
  • Update()
  • Destroy()

Above All the Laravel methods are the default methods in ProductController

Step 7: Write The source Code For Laravel 5.7 CRUD Operation

And then We can display the All step by step process of CRUD operation in Laravel 5.7,

<?php
namespace App\Http\Controllers;
use App\Model\Product;
use Illuminate\Http\Request;
class ProductController extends Controller {
    public function index() {
        $products = Product::latest()->paginate(5);
        return view('products.index', compact('products'))->with('i', (request()->input('page', 1) - 1) * 5);
    }
    public function create() {
        return view('products.create');
    }
    public function store(Request $request) {
        $request->validate(['name' => 'required', 'description' => 'required', ]);
        Product::create($request->all());
        return redirect()->route('products.index')->with('success', 'product created successfully.');
    }
    public function show(Product $Product) {
        return view('products.show', compact('product'));
    }
    public function edit(Product $Product) {
        return view('products.edit', compact('product'));
    }
    public function update(Request $request, Product $Product) {
        $Product->validate(['name' => 'required', 'description' => 'required', ]);
        $product->update($request->all());
        return redirect()->route('products.index')->with('success', 'product updated successfully');
    }
    public function destroy(Product $Product) {
        $Product->delete();
        return redirect()->route('products.index')->with('success', 'product deleted successfully');
    }
}

Step 8: making a blade files In Laravel 5.7

We have Total 5 blade files,

  • Layout.blade.php
  • Index.blade.php
  • Create.blade.php
  • Edit.blade.php
  • Show.blade.php

Layout.blade.php

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome To Pakainfo.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      @yield('content')
    </div>
  </body>
</html>

Index.blade.php

@extends('product.layout')
@section('content')
<div class="row">
  <div class="col-lg-12 margin-tb">
    <div class="pull-left">
      <h2>Welcome
      </h2>
    </div>
    <div class="pull-right">
      <a class="btn btn-success" href="{{ route('products.create') }}"> Create New product
      </a>
    </div>
  </div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
  <p>{{ $message }}
  </p>
</div>
@endif
<table class="table table-bordered">
  <tr>
    <th>Slno
    </th>
    <th>Name
    </th>
    <th>description
    </th>
    <th width="280px">Action
    </th>
  </tr>
  @foreach ($products as $product)
  <tr>
    <td>{{ ++$i }}
    </td>
    <td>{{ $product->name }}
    </td>
    <td>{{ $product->description }}
    </td>
    <td>
      <form action="{{ route('products.destroy',$product->id) }}" method="POST">
        <a class="btn btn-info" href="{{ route('products.show',$product->id) }}">Show
        </a>
        <a class="btn btn-success" href="{{ route('products.edit',$product->id) }}">Edit
        </a>
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-danger">Delete
        </button>
      </form>
    </td>
  </tr>
  @endforeach
</table>
{!! $products->links() !!}
@endsection

Create.blade.php

@extends('products.layout')
@section('content')
<div class="row">
  <div class="col-lg-12 margin-tb">
    <div class="pull-left">
      <h2>Add New product
      </h2>
    </div>
    <div class="pull-right">
      <a class="btn btn-success" href="{{ route('products.index') }}"> Back
      </a>
    </div>
  </div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
  <strong>Whoops!
  </strong> There were some problems with your input.
  <br>
  <br>
  <ul>
    @foreach ($errors->all() as $error)
    <li>{{ $error }}
    </li>
    @endforeach
  </ul>
</div>
@endif
<form action="{{ route('products.store') }}" method="POST">
  @csrf
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
      <div class="form-group">
        <strong>Name:
        </strong>
        <input type="text" name="name" class="form-control" placeholder="Name">
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
      <div class="form-group">
        <strong>Detail:
        </strong>
        <input type="text" name="description" class="form-control" placeholder="description">
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
      <button type="submit" class="btn btn-success">Submit
      </button>
    </div>
  </div>
</form>
@endsection

Edit.blade.php

@extends('products.layout')
@section('content')
<div class="row">
  <div class="col-lg-12 margin-tb">
    <div class="pull-left pakainfo">
      <h2>Edit product
      </h2>
    </div>
    <div class="pull-right pakainfo">
      <a class="btn btn-success" href="{{ route('products.index') }}"> Back
      </a>
    </div>
  </div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
  <strong>Whoops!
  </strong> There were some More problems with your input.
  <br>
  <br>
  <ul>
    @foreach ($errors->all() as $error)
    <li>{{ $error }}
    </li>
    @endforeach
  </ul>
</div>
@endif
<form action="{{ route('products.update',$product->id) }}" method="POST">
  @csrf
  @method('PUT')
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
      <div class="form-group pakainfo">
        <strong>Name:
        </strong>
        <input type="text" name="name" value="{{ $product->name }}" class="form-control" placeholder="Name">
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
      <div class="form-group pakainfo">
        <strong>Detail:
        </strong>
        <input type="text" name="description" value="{{ $product->description }}" class="form-control" placeholder="description">
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
      <button type="submit" class="btn btn-success">Submit
      </button>
    </div>
  </div>
</form>
@endsection

Show.blade.php

@extends('products.layout')
@section('content')
<div class="row pakainfo">
  <div class="col-lg-12 margin-tb">
    <div class="pull-left">
      <h2> Show product
      </h2>
    </div>
    <div class="pull-right pakainfo">
      <a class="btn btn-success" href="{{ route('products.index') }}"> Back
      </a>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12">
    <div class="form-group pakainfo">
      <strong>Name:
      </strong>
      {{ $product->name }}
    </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-12">
    <div class="form-group pakainfo">
      <strong>Details:
      </strong>
      {{ $product->description }}
    </div>
  </div>
</div>
@endsection

Last step You can Run the below php artisan command to run this project the local server

Also Read This 👉   Laravel 6 Ajax post data Example

php artisan serve

Now We can display my local browsers server successfully running here http://localhost:8000/products

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

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

I hope you get an idea about jQuery Ajax CRUD operations in Laravel 5.7.
I would like to have feedback on my Pakainfo.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 posts:

  1. laravel 6 Update Data in AJAX CRUD Operations
  2. CRUD Operations in Laravel 7 PHP Framework
  3. jQuery AJAX PHP Laravel Crud Example
  4. Laravel 6.2 jQuery AJAX CRUD Tutorial
  5. Laravel Simple CRUD Application Script
  6. Laravel 5.6 Like Dislike rating system with jQuery, Ajax and PHP
  7. Laravel 6 crud Insert Update Delete operations Example