Bayangkan kamu baru lulus dari bootcamp atau semester akhir kuliah, terus HRD nanya: "Bisa tunjukkin portfolio project Laravel kamu?" — kamu jawab apa? Kalau jawabannya cuma "bisa bikin Hello World", artikel ini wajib kamu baca sampai habis. Inilah studi kasus crud datatables laravel yang akan menutup seri 50 artikel belajar Laravel kita dengan cara paling epik: membangun aplikasi manajemen data siswa yang fungsional, profesional, dan siap dipamerkan ke rekruiter.
Di artikel terakhir dari seri Belajar Laravel Lengkap ini, kita tidak hanya bicara teori — kamu akan ikuti langkah nyata, baris per baris, dari setup project sampai tampilan akhir yang sudah bisa di-filter, di-sort, dan di-export. Siap? 🚀
"Studi Kasus CRUD + DataTables di Laravel adalah pendekatan pembelajaran berbasis proyek nyata — membangun fitur Create, Read, Update, Delete dengan antarmuka tabel interaktif yang mendukung pencarian, paginasi, dan pengurutan data secara real-time."
Proyek yang kita bangun: Sistem Manajemen Data Siswa — fitur lengkap, antarmuka modern.
🏗️ Arsitektur Proyek: Fondasi Sebelum Membangun
Coba bayangkan kamu mau bangun rumah. Kamu tidak langsung tancap bata — kamu perlu denah dulu. Begitu juga aplikasi. Sebelum nulis kode, kita tentukan dulu apa yang mau dibangun, tabel apa yang dibutuhkan, dan alur kerja aplikasinya.
Proyek kita adalah Sistem Manajemen Data Siswa dengan fitur: tambah siswa, lihat daftar siswa di DataTables, edit data, dan hapus data — semua tanpa reload halaman berlebihan.
Untuk data lebih dari 1.000 baris, selalu gunakan server-side processing di DataTables. Ini artinya data di-query langsung dari database per request — bukan semua data sekaligus. Performa aplikasi kamu akan jauh lebih baik!
⚙️ Implementasi Studi Kasus CRUD DataTables Laravel: Step-by-Step
Oke, sekarang kita masuk ke bagian yang paling ditunggu-tunggu. Ikuti setiap langkah dengan teliti — jangan skip karena merasa "kayaknya udah paham". Detail kecil sering jadi penyebab error besar. 😅
Setup Project & Install Dependensi
Buat project Laravel baru dan install package Yajra DataTables yang akan menjadi tulang punggung tabel interaktif kita.
composer create-project laravel/laravel siswa-app
cd siswa-app
# Install Yajra DataTables
composer require yajra/laravel-datatables-oracle
# Publish config (opsional)
php artisan vendor:publish --tag=datatables
Buat Migration & Model Siswa
Definisikan struktur tabel database untuk menyimpan data siswa. Ingat prinsip: database yang baik = aplikasi yang kuat.
php artisan make:model Siswa -m
// database/migrations/xxxx_create_siswas_table.php
public function up()
{
Schema::create('siswas', function (Blueprint $table) {
$table->id();
$table->string('nama');
$table->string('nis')->unique();
$table->string('kelas');
$table->string('jurusan');
$table->string('email')->nullable();
$table->timestamps();
});
}
Buat Controller dengan Semua Method CRUD
Controller adalah "otak" aplikasi. Di sinilah semua logika CRUD dan DataTables diproses. Gunakan Resource Controller agar lebih rapi.
// app/Http/Controllers/SiswaController.php
use Yajra\DataTables\DataTables;
use App\Models\Siswa;
public function index(Request $request)
{
if ($request->ajax()) {
$data = Siswa::latest()->get();
return DataTables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '<button class="btn btn-warning btn-sm" data-id="'.$row->id.'">Edit</button> ';
$btn .= '<button class="btn btn-danger btn-sm" data-id="'.$row->id.'">Hapus</button>';
return $btn;
})->rawColumns(['action'])
->make(true);
}
return view('siswa.index');
}
Konfigurasi Routes & View Blade
Daftarkan resource route dan buat tampilan Blade dengan DataTables terintegrasi — termasuk modal untuk form Create/Edit.
Route::resource('siswa', SiswaController::class);
// resources/views/siswa/index.blade.php (snippet)
<table id="tabel-siswa" class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>NIS</th>
<th>Kelas</th>
<th>Aksi</th>
</tr>
</thead>
</table>
Inisialisasi DataTables di JavaScript
Ini adalah "sihir" yang membuat tabel biasa menjadi tabel interaktif. Script ini menghubungkan frontend ke endpoint Laravel kita.
$(document).ready(function() {
var table = $('#tabel-siswa').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('siswa.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false},
{data: 'nama', name: 'nama'},
{data: 'nis', name: 'nis'},
{data: 'kelas', name: 'kelas'},
{data: 'action', name: 'action', orderable: false},
]
});
});
</script>
serverSide: false cocok untuk data kecil (<500 baris) karena semua data dimuat sekaligus. serverSide: true wajib digunakan untuk data besar karena query dilakukan per request — halaman tidak pernah overload.
🔧 Fitur CRUD Lengkap: Store, Update, dan Destroy
Kalau tadi kita sudah bisa membaca data (Read), sekarang waktunya bikin fitur yang bisa mengubah data. Analoginya seperti buku catatan: kamu tidak hanya bisa baca catatannya, tapi juga tambah halaman baru, hapus halaman lama, dan edit tulisan yang salah.
📥 Method store() — Simpan Data Baru
{
$request->validate([
'nama' => 'required|string|max:100',
'nis' => 'required|unique:siswas',
'kelas' => 'required',
'jurusan' => 'required',
]);
Siswa::create($request->all());
return response()->json(['success' => 'Data siswa berhasil disimpan!']);
}
✏️ Method update() — Perbarui Data
{
$request->validate([
'nama' => 'required|string|max:100',
'nis' => 'required|unique:siswas,nis,'.$siswa->id,
'kelas' => 'required',
]);
$siswa->update($request->all());
return response()->json(['success' => 'Data berhasil diperbarui!']);
}
🗑️ Method destroy() — Hapus Data
{
$siswa->delete();
return response()->json(['success' => 'Data berhasil dihapus!']);
}
Jika kamu menggunakan create() atau update() tanpa mendefinisikan protected $fillable di model, Laravel akan melempar error MassAssignmentException. Pastikan model Siswa kamu punya: protected $fillable = ['nama', 'nis', 'kelas', 'jurusan', 'email'];
🧠 Analisis Mendalam: Kenapa Studi Kasus Ini Penting untuk Portfolio?
Proyek ini membuktikan kamu bisa handle backend (Laravel), database (MySQL), dan frontend (DataTables + JS) sekaligus — inilah yang dicari rekruiter.
Dengan server-side DataTables, aplikasi ini tidak akan melambat meski datanya bertambah jadi 100.000 baris. Ini adalah pola desain yang digunakan di aplikasi enterprise.
Menggunakan Laravel Form Request dan CSRF token secara bawaan — menunjukkan kamu peduli pada keamanan aplikasi, bukan sekadar "asal jalan".
Menurut data npm dan CDN stats, jQuery DataTables digunakan oleh lebih dari 2,5 juta website aktif di seluruh dunia — termasuk di banyak aplikasi pemerintahan dan enterprise di Indonesia. Menguasai DataTables berarti kamu punya skill yang relevan secara industri!
Kamu Telah Menyelesaikan 50 Artikel Belajar Laravel! 🎉
Selamat! Kamu baru saja menyelesaikan studi kasus crud datatables laravel yang menjadi puncak dari perjalanan 50 artikel ini. Kita telah berhasil membangun aplikasi CRUD lengkap dengan fitur:
Ini bukan akhir dari perjalanan belajar kamu — ini justru awal dari karir sebagai web developer profesional. Terus berlatih, terus membangun, dan jangan lupa: setiap developer hebat pernah jadi pemula.
No comments:
Post a Comment