Membuat CRUD dengan Bootstrap Modal (form popup) PHP mysqli mudah hanya 5 menit selesai tanpa ajax.
Pernahkah kalian melihat saat mengedit data muncul form popup, jika pernah maka itu disebut dengan modal didalam bootstrap. jadi jika anda ingin membuat tambah data atau edit data atau delete data dengan menggunakan popup lebih baik kalian pelajari cara membuat modal di bootstrap supaya lebih cepat dalam pengerjaannya.
contoh dari tampilan yang akan anda buat adalah seperti dibawah ini
Apa itu CRUD?
crud singkatan dari Create, Read, Update dan Delete. setiap aplikasi yang dibuat dengan menggunakan pemrograman PHP pasti ada yang namanya CRUD, karena inti dari sebuah aplikasi adalah dapat melakukan CRUD.
berikut adalah penjelasan rinci dari sebuah crud.
- Create : membuat data baru, contonya ketika anda registrasi atau mendaftar akun ke sosialmedia apapun itu berarti anda sedang membuat data baru yaitu melakukan proses create pada kata CRUD. melakukan registrasi berarti anda sedang membuat dan menyimpan data anda ke database. sehingga ketika anda login maka sosial media tersebut mengenali siapa anda.
- Read : membaca atau menampilkan data dari database ke tampilan. contohnya adalah ketika anda melihat artikel ini artinya anda telah melakukan proses read dari CRUD, melihat data yang saya simpan didalam database yang ditampilkan ketampilan website.
- Update : merubah data yang sudah ada. contohnya ketika anda ingin mengganti password sosial media anda, itu berarti anda sedang melakukan proses Update dari CRUD yaitu mengganti password lama anda dengan password baru.
- Delete : menghapus data yang sudah ada. pernahkah anda menghapus pesan whatsapp? jika pernah maka saat itu anda sedang melakukan proses hapus data didatabase whatsapp yaitu melakukan proses Delete pada CRUD.
Demikian penjelasan mengenai CRUD. sekarang mari kita lanjutkan pembuatan CRUD dengan menggunakan modal bootstrap. untuk langkah-langkahnya adalah sebagai berikut ini.
Apa yang dibutuhkan dalam membuat seperti diatas?
- Xampp sudah terinstall.
- Internet harus menyala. karena kita akan menggunakan cdn bootstrap dan untuk bisa mengakesesnya maka insternetnya harus menyala
Kemudian setelah kebutuhan diatas ada maka langkah selanjutnya adalah membuat kebutuhan untuk databasenya. langkah-langkah yang harus dilakukan yaitu:
- membuat database dengan nama db_latihan
- membuat tabel dengan nama tabel_siswa
- membuat file dengan nama index.php
- membuat file dengan nama koneksi.php
- membuat file dengan nama tambah.php
- membuat file dengan nama edit.php
- membuat file dengan nama delete.php
untuk lebih jelasnya silahkan ikuti langkah-langkah dibawah ini secara berurutan. tidak boleh diloncat-loncat karena bisa menyebabkan kesalahan coding.
langkah-langkah Membuat CRUD dengan Bootstrap Modal (form popup) PHP mysqli mudah hanya 5 menit selesai tanpa ajax
1. Buat Database dengan nama db_latihan. adapun cara untuk membuat database dapat dilihat pada artikel sebelumnya yaitu membuat database dengan xampp
create database db_latihan;
2. Setelah database berhasil dibuat, langkah selanjutnya adalah membuat tabel siswa dengan nama tabel_siswa dengan isi seperti terlihat pada query dibawah ini.
CREATE TABLE 'tabel_siswa' (
'id' int(11) NOT NULL AUTO_INCREMENT,
'nama' varchar(55) DEFAULT NULL,
'alamat' varchar(55) DEFAULT NULL,
'email' varchar(55) DEFAULT NULL,
PRIMARY KEY ('id')
) ENGINE=InnoDB;
3. Membuat file koneksi.php
Koneksi.php digunakan untuk mengkoneksikan atau menghubungkan database yang kita buat dengan coding yang akan digunakan untuk memanipulasi tabel atau melakukan proses CRUD pada tabel_siswa yang telah dibuat.
<?php
$host="localhost";
$nama_database="db_latihan";
$username_database="root";
$password_database="";
$koneksi = mysqli_connect($host,$username_database,$password_database,$nama_database);
if (mysqli_connect_errno()){
echo "Koneksi database gagal : " . mysqli_connect_error();
}
?>
Keterangan:
perhatikan coding diatas.
- $host digunakan untuk menunjukan server kita berada dimana. jika serverkita menggunakan xampp yang ada dikomputer kita maka dapat diisi dengan localhost.
- $nama_database sesuaikan dengan database yang pertama kita dibuat dilangkah pertama.
- $usernama_database isi saja root.
- $password_database kosongkan saja.
4. membuat file index.php
index.php digunakan untuk tampilan utama CRUD. nanti disini akan berisi modal dan menampilkan isi dari database yang ditampilkan didalam tabel.
<!DOCTYPE html>
<html>
<head>
<title>Elemen Pada HTML</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<section class="container">
<br/><br/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#tambah">Tambah Data</button><br/><br/>
<!-- Batas modal awal tambah data-->
<div class="modal fade" id="tambah" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Edit Data </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="tambah.php" method="post">
<div class="modal-body">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Nama</label>
<div class="col-sm-10">
<input class="form-control" name="nama" type="text" placeholder="Isikan Nama lengkap anda">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Alamat</label>
<div class="col-sm-10">
<input class="form-control" name="alamat" type="text" placeholder="Isikan Alamat Anda">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input class="form-control" name="email" type="email" placeholder="Isikan Alamat Anda">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" name="tambah-siswa" class="btn btn-success">Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- Batas modal akhir tambah data-->
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Alamat</th>
<th scope="col">Email</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
include_once "koneksi.php";
$no = 1;
$queryview = mysqli_query($koneksi, "SELECT * FROM tabel_siswa");
while ($row = mysqli_fetch_assoc($queryview)) {
?>
<tr>
<td><?php echo $no++;?></td>
<td><?php echo $row['nama'];?></td>
<td><?php echo $row['alamat'];?></td>
<td><?php echo $row['email'];?></td>
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#edit<?php echo $row['id']?>">Edit</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete<?php echo $row['id']?>">Delete</button>
</td>
</tr>
<!-- Batas Awal Modal Edit -->
<div class="modal fade" id="edit<?php echo $row['id']?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Edit Data </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="edit.php" method="POST">
<div class="modal-body">
<div class="form-group row " hidden>
<label class="col-sm-2 col-form-label">ID</label>
<div class="col-sm-10">
<input class="form-control" name="id" type="number" value="<?php echo $row['id'];?>">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Nama</label>
<div class="col-sm-10">
<input class="form-control" name="nama" type="text" value="<?php echo $row['nama'];?>">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Alamat</label>
<div class="col-sm-10">
<input class="form-control" name="alamat" type="text" value="<?php echo $row['alamat'];?>">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input class="form-control" name="email" type="email" value="<?php echo $row['email'];?>">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" name="edit-siswa" class="btn btn-success">Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- Batas Akhir modal edit -->
<!-- Batas Awal Modal delete -->
<div class="modal fade" id="delete<?php echo $row['id']?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<form action="delete.php" method="get">
<div class="modal-body">
<label>Apakah data ini akan dihapus?</label>
<div class="form-group row" hidden>
<label class="col-sm-2 col-form-label">ID</label>
<div class="col-sm-10">
<input class="form-control" name="id" type="number" value="<?php echo $row['id'];?>">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" name="delete-siswa" class="btn btn-danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
<!-- Batas Akhir Modal Delete -->
<?php
}
?>
</tbody>
</table>
</section>
</body>
</html>
Keterangan:
5. membuat file edit.php
edit.php digunakan untuk menampung nilai yang dikirim dari modal untuk melakukan proses update data didalam tabel siswa.
<?php
include('koneksi.php');
if(isset($_POST['edit-siswa'])) {
$id = $_POST['id'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$email = $_POST['email'];
$result = mysqli_query($koneksi, "UPDATE tabel_siswa SET nama='$nama',alamat='$alamat',email='$email' WHERE id='$id'");
//query update
if ($result) {
# credirect ke page index
header("location:index.php");
}
else{
echo "ERROR, data gagal diupdate". mysqli_error();
}
}
6. membuat file tambah.php
file tambah.php digunakan untuk menambahkan data kedalam tabel siswa.
<?php
include_once "koneksi.php";
if(isset($_POST['tambah-siswa'])){
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$email = $_POST['email'];
//query
$querytambah = mysqli_query($koneksi, "INSERT INTO tabel_siswa(nama,alamat,email) VALUES('$nama' , '$alamat' , '$email')");
if ($querytambah) {
# code redicet setelah insert ke index
header("location:index.php");
}
else{
echo "ERROR, tidak berhasil". mysqli_error($koneksi);
}
}
?>
7. membuat file delete.php
file delete.php digunakan untuk menghapus data dari tabel siswa.
<?php
include_once "koneksi.php";
if(isset($_GET['delete-siswa'])){
$id = $_GET['id'];
//query
$querytambah = mysqli_query($koneksi, "DELETE FROM tabel_siswa WHERE id = '$id'");
if ($querytambah) {
# code redicet setelah insert ke index
header("location:index.php");
}
else{
echo "ERROR, tidak berhasil". mysqli_error($koneksi);
}
}
?>
demikian catatan hari ini semoga bermanfaat bagi yang membaca. jika ada pertanyaan jangan sungkan tanyakan dikolom komentar.
0 Komentar