Tutorial CRUD Laravel Menggunakan Ajax

Delete atau Remove Data pada Laravel dengan Ajax

Tutorial Sebelumnya:

Tutorial Laravel #16Update atau Edit Data pada Laravel
Tutorial Laravel #17Update atau Edit Data pada Laravel (Menggunakan Ajax)

Pada Tutorial CRUD Laravel Menggunakan Ajax sebelumnya kita sudah belajar Insert atau Add Data, kemudian Menampilkan Data, lalu Update atau Edit Data.

Di bagian keempat ini kita akan belajar Delete atau Remove Data pada Laravel Menggunakan Ajax.

Baca Juga:
Tutorial Laravel #18: Delete atau Remove Data pada Laravel (Tanpa Ajax)

Delete Data pada Laravel Menggunakan Ajax

Pada tutorial sebelumnya kita sudah berhasil menampilkan data santri dari database ke view Laravel menggunakan Ajax. Pada view tersebut kita menyediakan tombol hapus data ditunjukkan bagian kode program berikut:

<a href="/santri/hapus/{{$s->id_santri}}" onclick="return confirm('Apakah Anda Yakin Menghapus Data?');" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>

Pada saat tombol hapus ini di klik, maka akan diarahkan ke route hapussantri sambil mengirimkan data id santri yang ingin di hapus.

Namun sebelum melakukan eksekusi hapus data dari database, akan muncul pertanyaan konfirmasi apakah yakin akan menghapus data, pertanyaan konfirmasi ini ditunjukkan pada bagian kode program berikut:

onclick="return confirm('Apakah Anda Yakin Menghapus Data?');"
Delete Data Laravel
Delete Data Laravel Menggunakan Ajax

Sekarang pada project ANISA kita sebelumnya akan dilanjutkan untuk membuat Delete Data Santri dari Database dengan Laravel.

1. Tabel yang digunakan adalah tabel santri.

Input Data ke Database dengan Laravel
Delete Data dengan Laravel

2. Model untuk tabel User dengan nama SantriModel.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Santri extends Model
{
    use HasFactory;

    protected $table = 'santri';
    protected $primaryKey = 'id_santri';
    protected $fillable = ['nm_santri', 'tmp_lahir', 'tgl_lahir', 'alamat', 'no_hp'];
}

3. Kita butuhkan route seperti berikut:

Route::get('santri/hapus/{id_santri}', [SantriController::class, 'hapussantri'])->name('hapussantri')->middleware('auth');

Perhatikan kode route di atas, sama seperti route edit sebelumnya, pada route hapus ini kita juga menangkap id data santri yang akan dihapus.

Jika sebelumnya pada route edit kita menangkap data id santri dan mengirimkannya ke function ubahsantri, maka pada route hapus ini kita menangkap data id santri dan kita kirimkan ke function hapussantri.

Sehingga kode full route kita menjadi seperti berikut ini:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\LoginController;
use App\Http\Controllers\HomeController;
use App\Http\Controllers\SantriController;

/*
|--------------------------------------------------------------------------
| 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('/', [LoginController::class, 'login'])->name('login');
Route::post('actionlogin', [LoginController::class, 'actionlogin'])->name('actionlogin');
Route::get('actionlogout', [LoginController::class, 'actionlogout'])->name('actionlogout');

Route::get('home', [HomeController::class, 'index'])->name('home')->middleware('auth');

Route::get('santri/tampil', [SantriController::class, 'tampilsantri'])->name('tampilsantri')->middleware('auth');
Route::get('santri/tambah', [SantriController::class, 'tambahsantri'])->name('tambahsantri')->middleware('auth');
Route::post('santri/simpan', [SantriController::class, 'simpansantri'])->name('simpansantri')->middleware('auth');
Route::get('santri/ubah/{id_santri}', [SantriController::class, 'ubahsantri'])->name('ubahsantri')->middleware('auth');
Route::post('santri/update', [SantriController::class, 'updatesantri'])->name('updatesantri')->middleware('auth');
Route::get('santri/hapus/{id_santri}', [SantriController::class, 'hapussantri'])->name('hapussantri')->middleware('auth');

4. Selanjutnya pada controller SantriController.php kita buat function hapussantri untuk melakukan proses penghapusan data santri berdasarkan id santri yang di terima menggunakan query builder Laravel.

Tutorial Selanjutnya:

Tutorial Laravel #20:

Web Programmer. Flutter Developer. Content Creator. Founder Ayongoding.com. Penyuka minuman sachet. Menulis pakai tangan kanan. Masih main mobilan remot. Dan pernah kuliah Sistem Informasi sampai lulus.

Leave a Reply

Your email address will not be published. Required fields are marked *