jQuery Ajax CRUD operations in Laravel 5.7 – Technology

Leave a Comment / php / By

jQuery Ajax CRUD operations in Laravel 5.7 – Technology

In this post we will give you information about jQuery Ajax CRUD operations in Laravel 5.7 – Technology. Hear we will give you detail about jQuery Ajax CRUD operations in Laravel 5.7 – TechnologyAnd how to use it also give you demo for it if it is necessary.

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,

Another must read:  PHP Laravel Limit String Length (Truncate string) Example

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 IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
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

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

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

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 AppHttpControllers;
use AppModelProduct;
use IlluminateHttpRequest;
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

Another must read:  jQuery Ajax Get JSON in Laravel Example

Layout.blade.php

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

Index.blade.php

@extends('product.layout')
@section('content')
<div >
  <div >
    <div >
      <h2>Welcome
      </h2>
    </div>
    <div >
      <a  href="{{ route('products.create') }}"> Create New product
      </a>
    </div>
  </div>
</div>
@if ($message = Session::get('success'))
<div >
  <p>{{ $message }}
  </p>
</div>
@endif
<table >
  <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  href="{{ route('products.show',$product->id) }}">Show
        </a>
        <a  href="{{ route('products.edit',$product->id) }}">Edit
        </a>
        @csrf
        @method('DELETE')
        <button type="submit" >Delete
        </button>
      </form>
    </td>
  </tr>
  @endforeach
</table>
{!! $products->links() !!}
@endsection

Create.blade.php

@extends('products.layout')
@section('content')
<div >
  <div >
    <div >
      <h2>Add New product
      </h2>
    </div>
    <div >
      <a  href="{{ route('products.index') }}"> Back
      </a>
    </div>
  </div>
</div>
@if ($errors->any())
<div >
  <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 >
    <div >
      <div >
        <strong>Name:
        </strong>
        <input type="text" name="name"  placeholder="Name">
      </div>
    </div>
    <div >
      <div >
        <strong>Detail:
        </strong>
        <input type="text" name="description"  placeholder="description">
      </div>
    </div>
    <div >
      <button type="submit" >Submit
      </button>
    </div>
  </div>
</form>
@endsection

Edit.blade.php

@extends('products.layout')
@section('content')
<div >
  <div >
    <div >
      <h2>Edit product
      </h2>
    </div>
    <div >
      <a  href="{{ route('products.index') }}"> Back
      </a>
    </div>
  </div>
</div>
@if ($errors->any())
<div >
  <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 >
    <div >
      <div >
        <strong>Name:
        </strong>
        <input type="text" name="name" value="{{ $product->name }}"  placeholder="Name">
      </div>
    </div>
    <div >
      <div >
        <strong>Detail:
        </strong>
        <input type="text" name="description" value="{{ $product->description }}"  placeholder="description">
      </div>
    </div>
    <div >
      <button type="submit" >Submit
      </button>
    </div>
  </div>
</form>
@endsection

Show.blade.php

@extends('products.layout')
@section('content')
<div >
  <div >
    <div >
      <h2> Show product
      </h2>
    </div>
    <div >
      <a  href="{{ route('products.index') }}"> Back
      </a>
    </div>
  </div>
</div>
<div >
  <div >
    <div >
      <strong>Name:
      </strong>
      {{ $product->name }}
    </div>
  </div>
  <div >
    <div >
      <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

Another must read:  Check if row exists using Laravel

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 onlinecode 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.

Hope this code and post will helped you for implement jQuery Ajax CRUD operations in Laravel 5.7 – Technology. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  47  =  57

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US