article

Sunday, November 6, 2022

Laravel 9 inline row editing

Laravel 9 inline row editing

Download Laravel App

composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel>composer create-project --prefer-dist laravel/laravel my-app

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=

Create Controller
php artisan make:controller ProductsController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller ProductsController
app/Http/Controllers/ProductsController.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//app/Http/Controllers/ProductsController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Product;
 
class ProductsController extends Controller
{
    public function index()
    {
        $products = Product::all();
        return view('products', compact('products'));
    }
 
    public function update(Request $request)
    {
        if ($request->ajax()) {
            Product::find($request->pk)->update([
                $request->name => $request->value
            ]);
            return response()->json(['success' => true]);
        }
    }
}
Database Migration
php artisan make:model Product -m
C:\xampp\htdocs\laravel\my-app>php artisan make:model Product -m
database/migrations/create_products_table.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//database/migrations/create_products_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('product_name');
            $table->text('product_description');
            $table->string('photo');
            $table->decimal("price", 6, 2);
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('products');
    }
};
run this migration
C:\xampp\htdocs\laravel\my-app>php artisan migrate

Model
app/Models/Product.php
?
1
2
3
4
5
6
7
8
9
10
11
12
//app/Models/Product.php
<?php
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Product extends Model
{
    use HasFactory;
    protected $fillable = ['product_name', 'photo', 'price', 'product_description'];
}
View Blade
Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

X-editable
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery.
https://github.com/vitalets/x-editable

resources/views/layout.blade.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//resources/views/layout.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 inline row editing</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
 
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/>
    <script>$.fn.poshytip={defaults:null}</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>
</head>
<body>
<div class="container">
    @yield('content')
</div>
   
@yield('scripts')
</body>
</html>
resources/views/products.blade.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//resources/views/products.blade.php
@extends('layout')
    
@section('content')
<div class="row">
    <h1>Laravel 9 inline row editing </h1>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>No</th>
                <th>Product Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            @foreach($products as $product)
                <tr>
                    <td>{{ $product->id }}</td>
                    <td>
                        <a href="" class="update_record" data-name="product_name" data-type="text" data-pk="{{ $product->id }}" data-title="Enter Product Name">{{ $product->product_name }}</a>
                    </td>
                    <td>
                        <a href="" class="update_record" data-name="price" data-type="text" data-pk="{{ $product->id }}" data-title="Enter Price">{{ $product->price }}</a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection
 
@section('scripts')
<script type="text/javascript">
   
  $.fn.editable.defaults.mode = 'inline';
     
    $.ajaxSetup({
        headers: {
        'X-CSRF-TOKEN': '{{csrf_token()}}'
        }
    });
 
    $('.update_record').editable({
        url: "{{ route('update') }}",
        type: 'text',
        name: 'product_name',
        pk: 1,
        title: 'Enter Field'
    });
</script>
@endsection
Routes
routes/web.php
?
1
2
3
4
5
6
7
8
9
10
11
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductsController;
 
//Route::get('/', function () {
//    return view('welcome');
//});
 
Route::get('/', [ProductsController::class, 'index']);
Route::post('/update', [ProductsController::class, 'update'])->name('update');
Run C:\xampp\htdocs\laravel\my-app>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
Posted by ednalan at 3:01 AM . Under .

Related Post