Apa itu datatables?
Datatables adalah salah satu plugin jQuery yang populer digunakan untuk mengelola data pada tabel secara interaktif dan efisien. Pada artikel ini, kita akan belajar cara mengimplementasikan Datatables menggunakan Laravel 10 dan paket Yajra, langkah demi langkah. Berikut adalah panduan lengkap memulai dengan Datatables untuk memunculkan data mahasiswa pada projek Laravel.
1. Instalasi Projek Laravel
Langkah pertama adalah membuat proyek Laravel baru dengan perintah berikut:
composer create-project laravel/laravel mahasiswa_datatables --prefer-distSetelah itu, buka proyek mahasiswa_datatables menggunakan Visual Studio Code atau editor kode pilihan Anda.
2. Instalasi Paket Datatable dari Yajra
Selanjutnya, instal paket Datatable dari Yajra dengan menjalankan perintah berikut:
composer require yajra/laravel-datatables-oracle3. Konfigurasi file config/app.php
Tambahkan provider dan alias untuk paket Yajra Datatables pada file config/app.php:
'providers' => ServiceProvider::defaultProviders()->merge([
// ...,
// ...,
// ...,
Yajra\DataTables\DataTablesServiceProvider::class,
])->toArray(),
'aliases' => Facade::defaultAliases()->merge([
// ...,
// ...,
// ...,
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
])->toArray(),4. Publish Vendor
Untuk menerapkan konfigurasi baru, gunakan perintah:
php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"5. Atur Database
Sekarang, buat sebuah database dengan nama “mahasiswa_datatables” di phpmyadmin dan atur file .env yang ada di dalam projek laravel seperti ini:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mahasiswa_datatables
DB_USERNAME=root
DB_PASSWORD=6. Membuat Migration dan Melakukan Migrasi
Buat migration untuk entitas “mahasiswa” dengan field yang diinginkan:
php artisan make:migration create_mahasiswas_table --create=mahasiswasSetelah perintah di atas dijalankan, akan terbuat sebuah file migration di direktori database/migrations. Buka file tersebut dan tambahkan field yang diperlukan pada fungsi up():
public function up()
{
Schema::create('mahasiswas', function (Blueprint $table) {
$table->id();
$table->string('nama');
$table->string('nim')->unique();
$table->string('jurusan');
// Tambahkan field lain yang Anda inginkan di sini
$table->timestamps();
});
}Setelah selesai menambahkan field, lakukan migrasi database dengan perintah berikut:
php artisan migrateSekarang, tabel “mahasiswas” dengan field yang telah Anda tambahkan sudah siap digunakan.
7. Membuat Model
Buat model Mahasiswa untuk merepresentasikan tabel “mahasiswas”:
php artisan make:model MahasiswaKemudian isi dari model ini adalah:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Mahasiswa extends Model
{
use HasFactory;
protected $fillable = [
'nama',
'nim',
'jurusan'
// Tambahkan field lain yang Anda inginkan di sini
];
}8. Membuat Dummy Data Mahasiswa menggunakan Fitur Seed
Isi tabel “mahasiswas” dengan data dummy menggunakan fitur Seed. Kita akan buat seed untuk tabel “mahasiswas” dan tambahkan 1000 data dummy:
php artisan make:seed MahasiswaSeederSetelah perintah di atas dijalankan, akan terbuat sebuah file seeder di direktori database/seeders. Buka file tersebut dan tambahkan kode untuk menambahkan 1000 data dummy ke dalam tabel “mahasiswas”:
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use Faker\Factory as Faker;
use App\Models\Mahasiswa;
class MahasiswaSeeder extends Seeder
{
/**
* Run the database seeds.
*/
public function run()
{
$faker = Faker::create('id_ID');
for ($i = 1; $i <= 1000; $i++) {
Mahasiswa::create([
'nama' => $faker->name,
'nim' => $faker->unique()->numerify('#######'),
'jurusan' => $faker->randomElement(['Teknik Informatika', 'Sistem Informasi', 'Teknik Elektro', 'Manajemen']),
// Tambahkan field lain yang Anda inginkan di sini
]);
}
}
}
Setelah kode di atas ditambahkan, jalankan perintah untuk melakukan seeding:
php artisan db:seed --class=MahasiswaSeederSekarang, tabel “mahasiswas” akan berisi 1000 data dummy yang telah ditambahkan.
9. Membuat Routes
Buat rute untuk mengakses data mahasiswa pada routes/web.php:
use App\Http\Controllers\MahasiswaController;
Route::get('/', [MahasiswaController::class, 'index'])->name('mahasiswa.index');10. Membuat Controller
Buat MahasiswaController untuk mengatur data mahasiswa:
php artisan make:controller MahasiswaControllerImplementasikan logika untuk mengambil data mahasiswa dari database pada MahasiswaController:
<?php
namespace App\Http\Controllers;
use App\Models\Mahasiswa;
use Yajra\DataTables\DataTables;
use Illuminate\Http\Request;
class MahasiswaController extends Controller
{
public function index(Request $request)
{
if ($request->ajax()) {
$data = Mahasiswa::select('*');
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function ($row) {
$actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
return $actionBtn;
})
->rawColumns(['action'])
->make(true);
}
return view('mahasiswa.index'); // Ubah "ke alamat view yang anda buat" menjadi nama view yang sesuai
}
}11. Membuat View
Buat view mahasiswa/index.blade.php dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Datatables Laravel</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
<div class="container">
<h1>Datatables Laravel 10 Yajra Tutorial Pemula - Chippiko</h1>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>NIM</th>
<th>Jurusan</th>
<th width="140px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(function () {
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('mahasiswa.index') }}", // Ubah route ke route yang sesuai dengan data mahasiswa
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
{data: 'nama', name: 'nama'},
{data: 'nim', name: 'nim'},
{data: 'jurusan', name: 'jurusan'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
</script>
</html>
Baca juga: Belajar CRUD Laravel
12. Menjalankan Aplikasi
Terakhir, jalankan aplikasi menggunakan perintah:
php artisan serveSekarang Anda telah berhasil mengimplementasikan Yajra Datatables pada proyek Laravel 10. Dengan menggunakan fitur ini, Anda dapat dengan mudah mengelola data pada tabel dengan cara yang lebih interaktif dan efisien. Selamat mencoba!
Sumber: codeanddeploy.com
