Membuat CRUD Form pendaftaran siswa menggunakan PHP dan Bootstrap part 3 ( Menambahkan Edit dan Delete )

Setelah kita membuat form view dalam form tersebut tidak terdapat tombol edit dan deletnya maka dari itu kita buat tombolnya sekarang

Berikut adalah cara menambahkan tombol Bootstrap untuk mengedit dan menghapus data di tabel yang telah kita buat. Kita akan memperbarui file view_data.php untuk menambahkan tombol tersebut dan menyiapkan tautan untuk mengarahkan ke halaman edit dan delete.

Langkah 1: Perbarui view_data.php dengan Tombol Edit dan Delete

Tambahkan kolom untuk tombol Edit dan Delete di tabel HTML:

Langkah 2: Buat File edit.php untuk Mengedit Data

Buat file edit.php yang akan menampilkan formulir edit data siswa dan memproses perubahan.

Langkah 3: Buat File delete.php untuk Menghapus Data

Buat file delete.php yang akan memproses penghapusan data siswa.

Menjalankan Aplikasi

1. Setup Koneksi Database: Pastikan db_connection.php memiliki informasi koneksi yang benar.
2. Upload File ke Server: Letakkan view_data.php, edit.php, delete.php, dan db_connection.php di direktori root server lokal Anda (misalnya, htdocs untuk XAMPP).
3. Akses Halaman: Buka browser dan akses http://localhost/view_data.php untuk melihat data siswa dengan tombol Edit dan Delete.

Dengan menambahkan kode ini, Anda sekarang memiliki tabel dengan data siswa yang menampilkan tombol Edit dan Delete di setiap baris. Tombol Edit akan membuka halaman edit untuk memperbarui data, sedangkan tombol Delete akan menghapus data siswa setelah konfirmasi.

PENJELASAN FORM EDIT DAN DELETE

Penjelasan Rinci Tombol Edit

view_data.php

php
<td>

 <a href='edit.php?id=" . $row["id"] . "' class='btn btn-warning btn-sm'>Edit</a>
</td>

• Edit Button: Tombol Edit ini mengarahkan pengguna ke halaman edit.php dengan parameter id siswa yang akan diedit. Parameter id ditambahkan ke URL sebagai query string (edit.php?id=1, misalnya).

edit.php

Halaman ini menampilkan formulir untuk mengedit data siswa yang sudah ada. Berikut adalah langkah-langkahnya:

1. Mengambil Data untuk Diedit:

   • GET Request: Ketika pengguna mengunjungi edit.php, id siswa diambil dari query string ($_GET['id']).
   • Prepare Statement: Query SELECT disiapkan untuk mengambil data siswa dari database berdasarkan id.
   • Bind and Execute: id dibind ke statement, lalu statement dieksekusi.
   • Fetch Data: Data hasil query diambil dan ditampilkan dalam formulir untuk diedit.

2. Menampilkan Formulir:

   php
   <form action="edit.php?id=<?php echo $id; ?>" method="POST">
   
   <input type="hidden" name="id" value="<?php echo $id; ?>">
   
   </form>
   

   • Data yang diambil dari database diisi ke dalam input form, sehingga pengguna bisa melihat dan mengedit informasi yang sudah ada.

3. Memproses Formulir:

• POST Request: Ketika formulir disubmit, data dikirim ke edit.php sebagai POST request.
• Prepare Statement: Query UPDATE disiapkan untuk memperbarui data siswa di database.
• Bind and Execute: Data yang diinput pengguna dibind ke statement, lalu statement dieksekusi.
• Redirect: Setelah data diperbarui, pengguna diarahkan kembali ke view_data.php.

Penjelasan Rinci Tombol Delete

view_data.php

php
<td>
    <a href='delete.php?id=" . $row["id"] . "' class='btn btn-danger btn-sm' onclick='return confirm(\"Apakah Anda yakin ingin menghapus data ini?\")'>Delete</a>
</td>

• Delete Button: Tombol Delete ini mengarahkan pengguna ke halaman delete.php dengan parameter id siswa yang akan dihapus. Sebelum menghapus, ada konfirmasi untuk memastikan tindakan ini.

delete.php

Halaman ini menghapus data siswa dari database berdasarkan id yang diterima. Berikut adalah langkah-langkahnya:

1. Mengambil id:

   • GET Request: Ketika pengguna mengunjungi delete.php, id siswa diambil dari query string ($_GET['id']).

2. Menghapus Data:

• Prepare Statement: Query DELETE disiapkan untuk menghapus data siswa dari database berdasarkan id.
• Bind and Execute: id dibind ke statement, lalu statement dieksekusi.
• Redirect: Setelah data dihapus, pengguna diarahkan kembali ke view_data.php

Ringkasan

• Edit:

  • Tombol Edit di view_data.php mengarahkan pengguna ke edit.php dengan id siswa.
  • edit.php menampilkan formulir dengan data siswa yang bisa diedit.
  • Setelah formulir disubmit, data diperbarui di database dan pengguna diarahkan kembali ke view_data.php.

• Delete:

  • Tombol Delete di view_data.php mengarahkan pengguna ke delete.php dengan id siswa.
  • delete.php menghapus data siswa dari database dan mengarahkan pengguna kembali ke view_data.php.

Dengan penjelasan ini, Anda sekarang memahami detail bagaimana fungsi Edit dan Delete diimplementasikan dalam sistem CRUD menggunakan PHP dan Bootstrap