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
//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
//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
//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
//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
//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
//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
