Edit Table adalah tabel yang data-data di dalamnya bisa langsung kita edit. Jadi tidak perlu membuat halaman baru khusus untuk mengedit data. Fitur ini lebih praktis dan memudahkan user tentunya. Jika kalian sedang mencari tutorial edit table, tutorial ini adalah tutorial yang sangat tepat.
Kita akan menggunakan library jquery editable dan menggunakan teknik ajax untuk berkomunikasi dengan database. Jadi di tutorial ini sangat lengkap mulai dari tampilan hingga proses editnya sendiri.
Jadi pada tutorial kali ini saya akan menggunakan framework laravel versi 8. Tapi jangan kahwatir, kalian tetap dapat menggunakan laravel versi 7 atau 6, karena semua scriptnya sama dan dapat diterapkan. Untuk melihat hasil akhirnya, silahkan scroll ke bagian paling bawah artikel ini. Disana terdapat gambar gif preview hasil akhir tutorial ini.
Jadi pada tutorial kali ini saya akan menggunakan framework laravel versi 8. Tapi jangan kahwatir, kalian tetap dapat menggunakan laravel versi 7 atau 6, karena semua scriptnya sama dan dapat diterapkan. Untuk melihat hasil akhirnya, silahkan scroll ke bagian paling bawah artikel ini. Disana terdapat gambar gif preview hasil akhir tutorial ini.
Cara Membuat Edit Table di Laravel
Sebelum kita mulai tutorial kali ini, saya asumsikan kalian semua sudah menginstall laravel terlebih dahulu. Tapi jika belum, silahkan ikuti tutorialnya di link berikut ini. https://www.duniailkom.com/tutorial-belajar-laravel-cara-menginstall-laravel/1. Buatlah sebuah database baru dengan nama laravel di dalam phpmyadmin. Selanjutnya setting dan koneksikan database yang kita buat dengan project laravel. Silahkan buka file .env. Silahkan samakan setting database kalian masing-masing
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
2. Selanjutnya jalankan perintah di bawah ini untuk membuat tabel baru secara otomatis ke dalam database laravel.
php artisan migrate
Jika perintah di atas berhasil dijalankan, maka tabel user di dalam database laravel akan otomatis dibuat seperti gambar di bawah ini.
 |
| Tabel User |
3. Jalankan perintah di bawah ini secara bergantian, perintah di bawah ini digunakan untuk membuat data dummy ke dalam tabel user secara otomatis.
php artisan tinker
User::factory()->count(10)->create()
Jika perintah di atas berhasil dijalankan, maka 10 data baru di dalam tabel user akan dibuat(created) seperti gambar di bawah ini
 |
| Data Dummy |
4. Buka routes/web.php lalu tambah script di bawah ini.
Route::get('users', 'App\Http\Controllers\UserController@index')->name('users.index');
Route::post('users', 'App\Http\Controllers\UserController@update')->name('users.update'); 5. Buat controller baru di dalam folder app/Http/Controllers dengan nama UserController.php. Lalu copy script di bawah ini dan paste ke dalam file controller tersebut.
<?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::all();
return view('users', compact('users'));
}
public function update(Request $request)
{
if ($request->ajax()) {
User::find($request->pk)
->update([
$request->name => $request->value
]);
return response()->json(['success' => true]);
}
}
} 6. Buatlah sebuah view baru didalam folder resources/views dengan nama users.blade.php. Copy dan paste script di bawah ini ke dalam file tersebut.
<!DOCTYPE html>
<html>
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"
/>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/>
</head>
<body>
<div class="container mt-4">
<table id="example" class="table table-borderless table-striped">
<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 src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>
<script>$.fn.poshytip={defaults:null}</script>
<script type="text/javascript">
//datatable
$(document).ready(function () {
$("#example").DataTable({});
});
</script>
<script type="text/javascript">
$.fn.editable.defaults.mode = 'inline';
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
}
});
$('.update').editable({
url: "{{ route('users.update') }}",
type: 'text',
});
</script>
</html> Ok, semua step sudah kita kerjakan seluruhnya silahkan jalankan perintah php artisan serve. Lalu buka browser dan masukan url berikut ini http://127.0.0.1:8000/users. Jika berhasil maka tampilannya akan tampak seperti gambar gif di bawah ini.
 |
| Hasil Akhir |
Gimana susah atau mudah guys?, ok sekian tutorial kali ini tentang cara membuat edit data langsung di tabel pada laravel. Semoga tutorial ini bermanfaat, jika ada pertanyaan, silahkan ajukan langsung di bawah ini atau tanya langsung di fasnpage tulisan saya. Sekian dan sampai jumpa di tutorial keren dan menarik lainnya :D
Posting Komentar