🎯 Laravel ⚡ DataTables 📘 Tutorial 🔥 Artikel 47/50

Seri Belajar Laravel Lengkap

Menambahkan Kolom Aksi
(Edit & Hapus) di DataTables

Pelajari cara menambahkan tombol Edit dan Hapus yang fungsional di kolom aksi DataTables Laravel — lengkap dengan route, Blade, dan konfirmasi hapus yang elegan.

⏱️

Estimasi Baca

10–12 Menit

🎓

Level

Intermediate

📅

Tahun

2025

📦

Framework

Laravel 10/11

Pernah nggak kamu bikin tabel data yang keren di Laravel, tapi pas ada yang nanya "di mana tombol edit-nya?" — kamu cuma bisa nyengir canggung? 😅 Kalau kamu lagi belajar cara menambahkan kolom aksi DataTables Laravel yang berisi tombol Edit dan Hapus, kamu ada di artikel yang tepat!

Di seri ke-47 dari 50 Artikel Belajar Laravel ini, kita bakal bedah tuntas bagaimana caranya menyisipkan tombol aksi yang fungsional ke dalam DataTables — bukan sekadar tombol pajangan, tapi yang beneran konek ke route, bisa navigasi ke halaman edit, dan bisa menghapus data dengan konfirmasi yang proper. Siap? Gas! 🚀

🧩 Konsep Utama

"Kolom Aksi" di DataTables adalah kolom khusus yang tidak berasal dari database, melainkan di-generate secara dinamis berisi tombol interaktif per baris data.

Dengan Yajra DataTables, kita menggunakan method addColumn() untuk menyisipkan kolom virtual ini — lengkap dengan link ke route yang membawa ID data tersebut.

🏗️ Memahami Konsep Kolom Aksi di DataTables Laravel

Bayangkan kamu punya daftar belanjaan di tabel. Setiap item punya nama, harga, dan stok — tapi kamu juga butuh tombol "coret" dan "edit" di setiap baris. Nah, tombol-tombol itulah yang dimaksud dengan kolom aksi.

Dalam konteks kolom aksi DataTables Laravel, konsepnya sama persis. Kita punya data dari database (nama, email, dll), dan di ujung tabel kita tambahkan kolom "Aksi" yang isinya tombol-tombol interaktif. Kolom ini tidak tersimpan di database — dia hanya eksis di tampilan saja.

Yang bikin menarik: dengan library Yajra DataTables, kita bisa mendefinisikan kolom ini langsung di controller menggunakan method addColumn() dengan Blade template sebagai isinya. Jadi konten tombol bisa kita tulis seperti HTML Blade biasa — termasuk menggunakan route() helper untuk link yang dinamis.

💡

Tips

Pastikan kamu sudah menginstall package yajra/laravel-datatables-oracle dan menggunakan DataTables Ajax. Kolom aksi paling optimal diimplementasikan dalam mode Ajax, bukan mode HTML biasa.

📊 Perbandingan Pendekatan Kolom Aksi di DataTables:

Pendekatan	Keuntungan	Kekurangan	Rekomendasi
addColumn() di Controller	Bersih, logika terpusat, bisa pakai route()	HTML campur PHP di controller	✅ Direkomendasikan
Render di JavaScript	Fleksibel, bisa manipulasi DOM	Susah akses route PHP, rentan XSS	⚠️ Hati-hati
HTML biasa (non-Ajax)	Sederhana untuk data kecil	Tidak scalable, lambat untuk data besar	❌ Hindari

🛠️ Langkah-Langkah Menambahkan Kolom Aksi DataTables Laravel

Oke, sekarang kita masuk ke bagian yang paling seru — implementasi nyata! Kita akan pakai contoh tabel Mahasiswa yang sudah ada dari artikel sebelumnya. Ikuti langkah-langkah berikut secara urutan ya, jangan di-skip!

Siapkan Route untuk Edit dan Hapus

Buka file routes/web.php dan pastikan route resource untuk mahasiswa sudah ada. Route resource secara otomatis menggenerate route edit, update, destroy, dll.

📄 routes/web.php PHP

use App\Http\Controllers\MahasiswaController;

Route::resource('mahasiswa', MahasiswaController::class);

✅ Route resource sudah cukup — ini menggenerate mahasiswa.edit, mahasiswa.destroy, dll secara otomatis.

Tambahkan addColumn() di Controller

Di method DataTables kamu (biasanya di MahasiswaController.php), tambahkan addColumn('aksi') sebelum make(true). Inilah inti dari keseluruhan proses.

📄 app/Http/Controllers/MahasiswaController.php PHP

public function getData()
{
    $data = Mahasiswa::query();

    return DataTables::of($data)
        ->addColumn('aksi', function ($row) {
            $editUrl  = route('mahasiswa.edit', $row->id);
            $deleteUrl = route('mahasiswa.destroy', $row->id);

            return '<a href="' . $editUrl . '"
                class="btn btn-sm btn-warning">
                <i class="fas fa-edit"></i> Edit
            </a>
            <form action="' . $deleteUrl . '" method="POST"
                style="display:inline;"
                onsubmit="return confirmDelete()">
                ' . csrf_field() . '
                ' . method_field('DELETE') . '
                <button type="submit" class="btn btn-sm btn-danger">
                    <i class="fas fa-trash"></i> Hapus
                </button>
            </form>';
        })
        ->rawColumns(['aksi'])
        ->make(true);
}

⚡

Insight Penting

Jangan lupa method rawColumns(['aksi'])! Tanpa ini, DataTables akan meng-escape HTML kamu — tombol Edit dan Hapus akan muncul sebagai teks mentah <a href=...>, bukan tombol yang bisa diklik.

Daftarkan Kolom 'aksi' di Tampilan JavaScript

Di file Blade view kamu, pastikan kolom 'aksi' didaftarkan dalam konfigurasi DataTables JavaScript agar dia tahu kolom ini ada.

📄 resources/views/mahasiswa/index.blade.php JavaScript + Blade

// Di dalam tag <script> Blade view kamu
$('#tableMahasiswa').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{{ route("mahasiswa.data") }}',
    columns: [
        { data: 'id',    name: 'id' },
        { data: 'nama',  name: 'nama' },
        { data: 'nim',   name: 'nim' },
        { data: 'email', name: 'email' },
        {
            data: 'aksi',
            name: 'aksi',
            orderable: false,    // Kolom aksi tidak bisa di-sort
            searchable: false   // Kolom aksi tidak bisa di-search
        }
    ]
});

Tambahkan Header Kolom di Tabel HTML

Pastikan di bagian <thead> tabel HTML-mu ada kolom "Aksi":

📄 Blade HTML HTML

<!-- Thead tabel DataTables -->
<table id="tableMahasiswa" class="table table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nama</th>
            <th>NIM</th>
            <th>Email</th>
            <th>Aksi</th> <!-- Kolom aksi -->
        </tr>
    </thead>
    <tbody></tbody> <!-- Diisi DataTables secara otomatis -->
</table>

⚠️

Perhatian

Jumlah <th> di thead harus sama persis dengan jumlah kolom yang didefinisikan di columns pada JavaScript DataTables. Kalau jumlahnya beda, DataTables akan error atau kolomnya misaligned!

💎 Menambahkan Konfirmasi Hapus yang Elegan

Tombol hapus tanpa konfirmasi itu ibarat lift tanpa tombol tutup pintu — bahaya! 😬 Kita perlu pasang dialog konfirmasi agar user tidak sengaja menghapus data penting.

Ada dua pendekatan yang umum dipakai: native confirm() dari browser, atau library seperti SweetAlert2 untuk tampilan yang lebih premium. Mari kita implementasikan keduanya!

🔍 Analisis: Native vs SweetAlert2

⬜ Native confirm()

Zero dependency
Tampilannya "jadul"
Tidak bisa dikustomisasi
Cocok untuk proyek sederhana

✅ SweetAlert2

Tampilan modern & animasi keren
Sangat bisa dikustomisasi
UX jauh lebih baik
Perlu CDN/npm tambahan

Konfirmasi Native (Cara Simpel)

Tambahkan fungsi JavaScript ini di bagian bawah view Blade kamu:

📄 JavaScript (di Blade) JS

function confirmDelete() {
    return confirm('Yakin ingin menghapus data ini? Aksi ini tidak bisa dibatalkan!');
}

Konfirmasi SweetAlert2 (Cara Keren 🔥)

Untuk pendekatan yang lebih profesional dan meningkatkan UX, gunakan SweetAlert2. Pertama, include CDN-nya, lalu modifikasi event klik tombol hapus:

📄 JavaScript + SweetAlert2 JS

// Sertakan CDN SweetAlert2 di bagian <head> atau sebelum </body>
// <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

$('#tableMahasiswa').on('click', '.btn-hapus', function(e) {
    e.preventDefault();
    const form = $(this).closest('form');

    Swal.fire({
        title: 'Yakin hapus data ini?',
        text: "Data yang dihapus tidak bisa dikembalikan!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#6366f1',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Ya, Hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            form.submit();
        }
    });
});

⚡ Jangan lupa ubah button hapus kamu dengan class btn-hapus dan type button (bukan submit) agar SweetAlert sempat muncul.

🔥

Fakta Menarik

Menurut studi UX oleh Nielsen Norman Group, pengguna cenderung 35% lebih percaya diri menggunakan fitur hapus ketika ada dialog konfirmasi yang jelas. Ini artinya: dialog konfirmasi bukan sekedar "pengaman" — tapi juga meningkatkan trust pengguna terhadap aplikasimu!

🎨 Tips Styling Kolom Aksi DataTables yang Profesional

Tombol yang fungsional itu penting, tapi tombol yang kelihatan bagus itu lebih penting lagi kalau kamu ingin aplikasimu terlihat profesional. Berikut beberapa tips styling yang bisa langsung kamu terapkan:

Tambahkan min-width pada Kolom Aksi

Agar tombol tidak "gepeng" karena tabel terlalu kecil, set lebar minimum kolom aksi di konfigurasi DataTables JavaScript:

📄 Konfigurasi Column Width JS

{
    data: 'aksi',
    name: 'aksi',
    orderable: false,
    searchable: false,
    width: '150px',       // Lebar tetap 150px
    className: 'text-center'  // Tombol di tengah
}

💡

Tips Styling Bonus

Untuk tampilan lebih modern, ganti class Bootstrap default dengan icon-only button yang punya tooltip. Contoh: <a title="Edit Data" class="btn btn-sm btn-warning rounded-circle"><i class="fas fa-edit"></i></a>. Butuh FontAwesome yang sudah terpasang di layout-mu!

🎯

Kesimpulan

Selamat! Kamu sudah berhasil memahami cara menambahkan kolom aksi DataTables Laravel yang fungsional dan profesional. Mari rekap poin-poin pentingnya:

Gunakan addColumn() di DataTables controller untuk menambahkan kolom virtual yang berisi HTML tombol.
Selalu sertakan rawColumns() agar HTML kamu tidak di-escape oleh DataTables.
Gunakan route() helper untuk link Edit dan form dengan @csrf + @method('DELETE') untuk Hapus.
Set orderable: false dan searchable: false untuk kolom aksi di konfigurasi JavaScript.
Tingkatkan UX dengan konfirmasi hapus menggunakan SweetAlert2 untuk tampilan yang lebih profesional.

Artikel ini adalah bagian dari seri 50 Artikel Belajar Laravel — pastikan kamu tidak melewatkan artikel sebelum dan sesudahnya!

💬 Tinggalkan Komentar 📤 Share Artikel

🏷️ Tags:

#Laravel #PHP #DataTables #WebDevelopment #Tutorial #KolomAksi #Yajra #SweetAlert2

📚 Navigasi Seri Belajar Laravel

← Artikel Sebelumnya

Artikel 46

DataTables Server-Side: Performa Optimal untuk Data Besar

Artikel Selanjutnya →

Artikel 48

Pencarian dan Filter Kustom di DataTables Server-Side

laravel datatables add action column

Menambahkan Kolom Aksi
(Edit & Hapus) di DataTables

🏗️ Memahami Konsep Kolom Aksi di DataTables Laravel

🛠️ Langkah-Langkah Menambahkan Kolom Aksi DataTables Laravel

Siapkan Route untuk Edit dan Hapus

Tambahkan addColumn() di Controller

Daftarkan Kolom 'aksi' di Tampilan JavaScript

Tambahkan Header Kolom di Tabel HTML

💎 Menambahkan Konfirmasi Hapus yang Elegan

Konfirmasi Native (Cara Simpel)

Konfirmasi SweetAlert2 (Cara Keren 🔥)

🎨 Tips Styling Kolom Aksi DataTables yang Profesional

Tambahkan min-width pada Kolom Aksi

Kesimpulan

No comments:

Post a Comment

java php laravel linux mysql sql bootstrap html css query

laravel datatables add action column

Menambahkan Kolom Aksi(Edit & Hapus) di DataTables

🏗️ Memahami Konsep Kolom Aksi di DataTables Laravel

🛠️ Langkah-Langkah Menambahkan Kolom Aksi DataTables Laravel

Siapkan Route untuk Edit dan Hapus

Tambahkan addColumn() di Controller

Daftarkan Kolom 'aksi' di Tampilan JavaScript

Tambahkan Header Kolom di Tabel HTML

💎 Menambahkan Konfirmasi Hapus yang Elegan

Konfirmasi Native (Cara Simpel)

Konfirmasi SweetAlert2 (Cara Keren 🔥)

🎨 Tips Styling Kolom Aksi DataTables yang Profesional

Tambahkan min-width pada Kolom Aksi

Kesimpulan

Related Posts on belajar laravel, laravel, laravel datatables, php, web development

No comments:

Post a Comment

java php laravel linux mysql sql bootstrap html css query

Menambahkan Kolom Aksi
(Edit & Hapus) di DataTables