Untuk contoh studi kasusnya, saya akan menampilkan daftar pengguna/user dan anda mengedit nama dan emailnya menggunakan x-editable js.
Peninjau :
Langkah 1 : Install Laravel
Pertama-tama kita perlu untuk menginstall Laravel terlebih dadulu, menggunakan perintah dibawah ini :
composer create-project --prefer-dist laravel/laravel blog
Langkah 2 : Tambahkan Pengguna Dummy
Pada langkah ini, kita akan menambahkan beberapa pengguna dummy menggunakan factory.
php artisan tinker
User::factory()->count(10)->create()
Langkah 3 : Buat Route
Kita perlu membuat beberapa rute untuk fungsi.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('users', [UserController::class, 'index'])->name('users.index');
Route::post('users', [UserController::class, 'update'])->name('users.update');
Langkah 4 : Buat Controller
Pada langkah ini, kita perlu untuk membuat UserController dan menambahkan kode seperti dibawah ini :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
$users = User::paginate(10);
return view('users', compact('users'));
}
/**
* Write code on Method
*
* @return response()
*/
public function update(Request $request)
{
if ($request->ajax()) {
User::find($request->pk)
->update([
$request->name => $request->value
]);
return response()->json(['success' => true]);
}
}
}
Langkah 5 : Buat File Blade
Pada langkah ini kita akan membuat tampilan untuk menampilkan data users.
resource/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Edit InLine Table Laravel - SarjanaIT.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" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="//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="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel Table Inline Editing Example - ItSolutionStuff.com</h1>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>
<a href="" class="update" data-name="name" data-type="text" data-pk="{{ $user->id }}" data-title="Enter name">{{ $user->name }}</a>
</td>
<td>
<a href="" class="update" data-name="email" data-type="text" data-pk="{{ $user->id }}" data-title="Enter email">{{ $user->email }}</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$.fn.editable.defaults.mode = 'inline';
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
}
});
$('.update').editable({
url: "{{ route('users.update') }}",
type: 'text',
pk: 1,
name: 'name',
title: 'Enter name'
});
</script>
</html>
Selesai, sekarang anda bisa menjalankan perintah dibawah ini untuk menjalankan contoh yang sudah kita buat :
php artisan serve
Jika sudah jalankan, anda dapat membuka URL dibawah ini pada browser Anda :
localhost:8000/user
Sekian untuk tutorial kali ini, jika anda masih bingung atau mengalami error silahkan bertanya pada kolom komentar dibawah ini.
Social Media