CRUD PHP - Selamat datang di website CopypasteKode, pada tutorial kali ini kita akan belajar bagaimana membuat crud (Create, Read, Update, & Delete) pada bahasa program php serta menambahkan beberapa plugins seperti Jquery Datatables, sweet alert versi 2, dan integrasi template AdminLTE versi 3.
Karena tutorial ini merupakan tutorial berpart-part atau bersambung, maka dari itu saya sarankan teman-teman untuk mengikuti seri tutorial ini dari awal, berikut adalah list tutorial sebelumnya :
Berikut adalah seri tutorial sebelumnya :
- #1 Membuat Database & Table
- #2 Membuat Folder Project dan Koneksi Database
- #3 Integrasi Template AdminLTE versi 3
Disini saya mengasumsikan teman-teman sudah mengikuti seri tutorial part sebelumnya pada link diatas.
Sebelum kita masuk pada tutorial, penting untuk mengetahui prosedur atau langkah-langkah yang akan kita lakukan pada tutorial kali ini, dengan tujuan tutorial-nya lebih mudah dipahami, berikut langkah-langkah-nya :
- Membuat Tombol Aksi Tambah Data, Edit Data & Hapus Data
- Membuat Form Tambah Data & Edit Data Dengan Modal Bootstrap
- Membuat Proses Tambah Data, Edit Data, Hapus Data
- Integrasi DataTables & Sweet Alert 2
- Testing fitur CRUD
Membuat Tombol Aksi Tambah Data, Edit Data & Hapus Data
Buka file index.php pada file index.php kita akan menambahkan tombol serta modal untuk melakukan proses tambah data, edit data serta hapus data.
Tambahkan Tombol tambah data dengan cara menuliskan script berikut :
<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#tambahModal">
Tambah Data
</button>Letakkan script diatas berikut seperti contoh gambar berikut :
Tambahkan Tombol Edit & Hapus dengan menuliskan script berikut pada kolom Aksi :
<td>
<button type="button" class="btn btn-sm btn-danger text-white" data-toggle="modal" data-target="#hapusModal<?= $nim; ?>"><i class="fas fa-trash"></i></button>
<button type="button" class="btn btn-sm btn-success text-white mx-2" data-toggle="modal" data-target="#editModal<?= $nim; ?>"><i class="fas fa-edit"></i></button>
</td>Letakkan script diatas seperti petunjuk gambar berikut :
Jika teman-teman sudah mengikuti semua langkah-langkah diatas seharusnya akan tampil seperti berikut :
Terlihat pada gambar diatas kita telah berhasil menambahkan tombol Tambah, Edit & Hapus tapi jika tombolnya teman-teman klik tidak akan terjadi apa-apa karena kita belum menambahkan script modal bootstrap.
Apa itu Modal Bootstrap.
Modal atau pop up pada bootstrap adalah kotak dialog yang biasa digunakan untuk melakukan konfirmasi dan juga sebagai form aksi lainnya seperti insert, edit, delete dan lain-lain. Berikut adalah contoh Modal Bootstrap :
Membuat Form Tambah Data & Edit Data Dengan Modal Bootstrap
Setelah berhasil menambahkan tombol, sekarang kita buat pop up modalnya agar ketika tombol tambah, edit & hapus ditekan akan menampilkan form modal untuk proses tambah data , edit data serta modal konfirmasi saat melakukan hapus data.
Script Modal Tambah :
<!-- Modal Tambah -->
<div class="modal fade" id="tambahModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tambah Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="tambah_data.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label><b>Nim : </b></label>
<input type="text" name="nim" class="form-control" style="border-color: blue;" placeholder="Masukan Nim" required oninvalid="this.setCustomValidity('Field Tidak Boleh Kosong!')" oninput="setCustomValidity('')">
</div>
<div class="form-group">
<label><b>Nama : </b></label>
<input type="text" name="nama" class="form-control" style="border-color: blue;" placeholder="Masukan Nama" required oninvalid="this.setCustomValidity('Field Tidak Boleh Kosong!')" oninput="setCustomValidity('')">
</div>
<div class="form-group">
<label><b>Tempat Lahir : </b><input type="text" name="tempat_lahir" style="border-color: blue;" class="form-control col-md-12" placeholder="Masukan Tempat Lahir" required oninvalid="this.setCustomValidity('Field Tidak Boleh Kosong!')" oninput="setCustomValidity('')"></label>
 
<label>
<b>Tanggal Lahir : </b>
<input type="date" name="tanggal_lahir" style="border-color: blue;" class="form-control col-md-12" required oninvalid="this.setCustomValidity('Field Tidak Boleh Kosong!')" oninput="setCustomValidity('')">
</label>
</div>
<div class="form-group">
<label><b>Jenis kelamin : </b></label>
<label><input type="radio" name="jenis_kelamin" value="Laki-laki" required> Laki-laki  </label>
<label><input type="radio" name="jenis_kelamin" value="Perempuan" required> Perempuan</label>
</div>
<div class="form-group">
<label><b>Program Studi</b></label>
<label class="text-danger "></label>
<select name="prodi" style="border-color: blue;" class="form-control custom-select" required oninvalid="this.setCustomValidity('Field Tidak Boleh Kosong!')" oninput="setCustomValidity('')">
<option value="">-- Pilih Program Studi --</option>
<option value="Matematika">Matematika</option>
<option value="Sistem Informasi">Sistem Informasi</option>
<option value="Statistika">Statistika</option>
</select>
</div>
<div class="form-group">
<label><b>Alamat : </b></label>
<textarea name="alamat" class="form-control" style="border-color: blue;" rows="5" placeholder="Masukan Alamat" required oninvalid="this.setCustomValidity('Field Tidak Boleh Kosong!')" oninput="setCustomValidity('')"></textarea>
</div>
<div class="form-group">
<label><b>Email : </b></label>
<input type="email" name="email" class="form-control" style="border-color: blue;" placeholder="Masukan Email" required oninvalid="this.setCustomValidity('Field Tidak Boleh Kosong!')" oninput="setCustomValidity('')">
</div>
<div class="form-group">
<label><b>No HP : </b></label>
<input type="text" name="no_hp" class="form-control" style="border-color: blue;" placeholder="Masukan No HP" required oninvalid="this.setCustomValidity('Field Tidak Boleh Kosong!')" oninput="setCustomValidity('')">
</div>
<div class="form-group">
<label><b>Foto : </b></label>
<input type="file" name="foto" class="form-control-file" style="border-color: blue;" required oninvalid="this.setCustomValidity('Field Tidak Boleh Kosong!')" oninput="setCustomValidity('')">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Tambah</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal Tambah -->
Tambahkan script diatas tepat diatas tag </section>
Script Modal Edit :
<!-- Modal Edit -->
<?php
$sql = "select * from tbl_mahasiswa order by nim desc";
$hasil = mysqli_query($kon, $sql);
while ($data = mysqli_fetch_array($hasil)) {
$nim = $data['nim'];
$nama = $data['nama'];
$tempat_lahir = $data['tempat_lahir'];
$tanggal_lahir = $data['tanggal_lahir'];
$jenis_kelamin = $data['jenis_kelamin'];
$prodi = $data['prodi'];
$alamat = $data['alamat'];
$email = $data['email'];
$no_hp = $data['no_hp'];
?>
<!-- Modal Update--->
<div class="modal fade" id="editModal<?= $nim; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="edit_data.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label><b>Nim : </b></label>
<input type="text" name="nim" class="form-control" value="<?= $data['nim']; ?>" style="border-color: blue;" placeholder="Masukan Nim" required />
</div>
<div class="form-group">
<label><b>Nama : </b></label>
<input type="text" name="nama" class="form-control" value="<?= $data['nama']; ?>" style="border-color: blue;" placeholder="Masukan Nama" required />
</div>
<div class="form-group">
<label>Tempat Lahir<input type="text" name="tempat_lahir" class="form-control col-md-12" style="border-color: blue;" placeholder="Masukan Tempat Lahir" value="<?= $data['tempat_lahir']; ?>" placeholder="Masukan Tempat Lahir" required></label>
 
<label>Tanggal Lahir
<input type="date" name="tanggal_lahir" class="form-control col-md-12" style="border-color: blue;" value="<?= $data['tanggal_lahir']; ?>" placeholder="Masukan Tanggal Lahir" required>
</label>
</div>
<div class="form-group">
<label><b>Jenis kelamin : </b></label>
<?php
if ($data['jenis_kelamin'] == "Laki-laki") {
echo "<input type='radio' name='jenis_kelamin' value='Laki-laki' checked='checked'> Laki-laki  ";
echo "<input type='radio' name='jenis_kelamin' value='Perempuan'> Perempuan ";
} else {
echo "<input type='radio' name='jenis_kelamin' value='Laki-laki'> Laki-laki  ";
echo "<input type='radio' name='jenis_kelamin' value='Perempuan' checked='checked'> Perempuan";
}?>
</div>
<div class="form-group">
<label><b>Program Studi : </b></label>
<select class="form-control" name="prodi" style="border-color: blue;">
<option <?php if ($data['prodi'] == "Matematika") {
echo "selected";
} ?> value="Matematika">Matematika</option>
<option <?php if ($data['prodi'] == "Sistem Informasi") {
echo "selected";
} ?> value="Sistem Informasi">Sistem Informasi</option>
<option <?php if ($data['prodi'] == "Statistika") {
echo "selected";
} ?> value="Statistika">Statistika</option>
</select>
</div>
<div class="form-group">
<label><b>Alamat : </b></label>
<textarea name="alamat" class="form-control" rows="5" placeholder="Masukan Alamat" style="border-color: blue;" required><?= $data['alamat']; ?></textarea>
</div>
<div class="form-group">
<label><b>Email : </b></label>
<input type="email" name="email" class="form-control" value="<?= $data['email']; ?>" style="border-color: blue;" placeholder="Masukan Email" required>
</div>
<div class="form-group">
<label><b>No HP : </b></label>
<input type="text" name="no_hp" class="form-control" value="<?= $data['no_hp']; ?>" style="border-color: blue;" placeholder="Masukan No HP" required />
</div>
<div class="form-group">
<label><b>Gambar : </b></label>
<input type="file" name="foto" class="form-control-file" style="border-color: blue;">
</div>
</div>
<div class="modal-footer" style="font-family:sans-serif">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancle</button>
<button type="submit" name="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<?php }; ?>
Tambahkan script diatas tepat dibawah setelah Script Modal Tambah
Script Modal Konfirmasi Hapus :
<!-- Modal Delete-->
<div class="modal fade" id="hapusModal<?= $nim; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Hapus Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Yakin ingin menghapus data <span class="text-primary">nim</span> <strong>: <?= $data['nim'] ?></strong>
<span class="text-primary"> nama </span> <strong>: <?= $data['nama'] ?></strong>
</div>
<div class="modal-footer text-gray-900">
<a type="button" class="btn btn-danger" data-dismiss="modal">Batal</a>
<a type="button" class="btn btn-primary" href="hapus_data.php?nim=<?= $nim; ?>">Hapus</a>
</div>
</div>
</div>
</div>
Letakkan script diatas setelah <?php }; ?> tepat dibawah Script Modal Edit
Sekarang coba teman-teman klik tombol Tambah data, seharusnya akan tampil seperti berikut :
klik tombol Edit, dengan icon pencil berwarna hijau tepat disebelah tombol hapus, seharusnya akan tampil seperti berikut :
klik tombol Hapus, dengan icon tempat sampah berwarna merah tepat disebelah tombol hapus, seharusnya akan tampil seperti berikut :
Sampai disini kita telah berhasil membuat tombol Tambah Data, Edit, & hapus. Tapi fitur ini belum bisa kita jalankan karena belum membuat proses tambah Data, edit data & hapus data.
Membuat Proses Tambah Data, Edit Data, Hapus Data
Tambahkan beberapa file berikut pada Folder project crud :- tambah.data.php
- edit_data.php
- hapus_data.php
Tambahkan script berikut pada file tambah_data.php :
<?php
session_start();
//Include file koneksi, untuk koneksikan ke database
include "koneksi.php";
//Fungsi untuk mencegah inputan karakter yang tidak sesuai
function input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = addslashes($data);
$data = htmlspecialchars($data);
return $data;
}
//Cek apakah ada kiriman form dari method post
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$nim = input($_POST["nim"]);
$nama = input($_POST["nama"]);
$tempat_lahir = input($_POST["tempat_lahir"]);
$tanggal_lahir = input($_POST["tanggal_lahir"]);
$jenis_kelamin = input($_POST["jenis_kelamin"]);
$prodi = input($_POST["prodi"]);
$alamat = input($_POST["alamat"]);
$email = input($_POST["email"]);
$no_hp = input($_POST["no_hp"]);
$filename = $_FILES['foto']['name'];
$ukuran = $_FILES['foto']['size'];
$rand = rand();
$ekstensi = array('png', 'jpg', 'jpeg', 'gif');
$ext = pathinfo($filename, PATHINFO_EXTENSION);
$ext = strtolower($ext);
if (!in_array($ext, $ekstensi)) {
$_SESSION["error"] = 'Extensi foto Tidak Diperbolehkan';
header("Location:index.php");
} else {
if ($ukuran < 1044070) {
$xx = $rand . '_' . $filename;
move_uploaded_file($_FILES['foto']['tmp_name'], 'uploads/' . $rand . '_' . $filename);
} else {
$_SESSION["error"] = 'Ukuran foto Terlalu Besar!';
header("Location:index.php");
}
}
//Query input menginput data kedalam tabel tbl_mahasiswa
$sql = "insert into tbl_mahasiswa (nim,nama,tempat_lahir,tanggal_lahir,jenis_kelamin,prodi,alamat,email,no_hp,foto) values
('$nim','$nama','$tempat_lahir','$tanggal_lahir','$jenis_kelamin','$prodi','$alamat','$email','$no_hp','$xx')";
//Mengeksekusi/menjalankan query diatas
$hasil = mysqli_query($kon, $sql);
//Kondisi apakah berhasil atau tidak dalam mengeksekusi query diatas
if ($hasil) {
$_SESSION["success"] = 'Data Berhasil ditambahkan';
header("Location:index.php");
} else {
$_SESSION["error"] = 'Data Gagal ditambahkan!';
header("Location:index.php");
}
}
Tambahkan script berikut pada file edit_data.php :
<?php
session_start();
//Include file koneksi, untuk koneksikan ke database
include "koneksi.php";
//Fungsi untuk mencegah inputan karakter yang tidak sesuai
function input($data)
{
$data = trim($data);
$data = addslashes($data);
$data = htmlspecialchars($data);
return $data;
}
//Cek apakah ada nilai yang dikirim menggunakan methos GET dengan nama nim
if (isset($_GET['nim'])) {
$nim = input($_GET["nim"]);
$sql = "select * from anggota where nim=$nim";
$hasil = mysqli_query($kon, $sql);
$data = mysqli_fetch_assoc($hasil);
}
//Cek apakah ada kiriman form dari method post
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$nim = htmlspecialchars($_POST["nim"]);
$nama = input($_POST["nama"]);
$tempat_lahir = input($_POST["tempat_lahir"]);
$tanggal_lahir = input($_POST["tanggal_lahir"]);
$jenis_kelamin = input($_POST["jenis_kelamin"]);
$prodi = input($_POST["prodi"]);
$alamat = input($_POST["alamat"]);
$email = input($_POST["email"]);
$no_hp = input($_POST["no_hp"]);
$filename = $_FILES['foto']['name'];
if (!$filename) {
//Query update data pada tabel anggota
$sql = "update tbl_mahasiswa set
nim='$nim',
nama='$nama',
tempat_lahir='$tempat_lahir',
tanggal_lahir='$tanggal_lahir',
jenis_kelamin='$jenis_kelamin',
prodi='$prodi',
alamat='$alamat',
email='$email',
no_hp='$no_hp'
where nim=$nim";
//Mengeksekusi atau menjalankan query diatas
$hasil = mysqli_query($kon, $sql);
//Kondisi apakah berhasil atau tidak dalam mengeksekusi query diatas
if ($hasil) {
$_SESSION["success"] = 'Data Berhasil diupdate';
header("Location:index.php");
} else {
echo "<div class='alert alert-danger'> Data Gagal disimpan.</div>";
}
} else {
$ukuran = $_FILES['foto']['size'];
$rand = rand();
$ekstensi = array('png', 'jpg', 'jpeg', 'gif');
$ext = pathinfo($filename, PATHINFO_EXTENSION);
$ext = strtolower($ext);
if (!in_array($ext, $ekstensi)) {
header("location:index.php?alert=gagal_ekstensi");
} else {
if ($ukuran < 1044070) {
$xx = $rand . '_' . $filename;
$sql = "select * from tbl_mahasiswa where nim='$nim'";
$hasil = mysqli_query($kon, $sql);
$data = mysqli_fetch_assoc($hasil);
$foto = $data['foto'];
if (file_exists("uploads/$foto")) {
unlink("uploads/$foto");
}
move_uploaded_file($_FILES['foto']['tmp_name'], 'uploads/' . $rand . '_' . $filename);
$sql = "update tbl_mahasiswa set
nim='$nim',
nama='$nama',
tempat_lahir='$tempat_lahir',
tanggal_lahir='$tanggal_lahir',
jenis_kelamin='$jenis_kelamin',
prodi='$prodi',
alamat='$alamat',
email='$email',
no_hp='$no_hp',
foto='$xx'
where nim=$nim";
$hasil = mysqli_query($kon, $sql);
//Kondisi apakah berhasil atau tidak dalam mengeksekusi query diatas
if ($hasil) {
$_SESSION["success"] = 'Data Berhasil diupdate';
header("Location:index.php");
} else {
$_SESSION["error"] = 'Data Gagal diupdate!';
header("Location:index.php");
}
} else {
$_SESSION["error"] = 'Ukuran foto Terlalu Besar!';
header("Location:index.php");
}
}
}
}
Tambahkan script berikut pada file hapus_data.php :
<?php
session_start();
include "koneksi.php";//Cek apakah ada kiriman form dari method post
if (isset($_GET['nim'])) {
$nim = htmlspecialchars($_GET["nim"]);
$sql = "select * from tbl_mahasiswa where nim='$nim'";
$hasil = mysqli_query($kon, $sql);
$data = mysqli_fetch_assoc($hasil);
$foto = $data['foto'];
if (file_exists("uploads/$foto")) {
unlink("uploads/$foto");
}
$sql = "delete from tbl_mahasiswa where nim='$nim' ";
$hasil = mysqli_query($kon, $sql);
//Kondisi apakah berhasil atau tidak
if ($hasil) {
$_SESSION["success"] = 'Data Berhasil Dihapus!';
header("Location:index.php");
} else {
$_SESSION["error"] = 'Data Gagal Dihapus!';
header("Location:index.php");
}
}
?>
Setelah itu tambahkan folder dengan nama uploads pada folder project crud untuk menampung file foto yang akan kita input nantinya, seperti contoh berikut :
Integrasi DataTables & Sweet Alert 2
Buka folder template , temukan file footer.php lalu tambahkan script berikut :
<!-- datatables -->
<script src="public/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="public/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="public/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="public/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<!-- sweet alert -->
<script src="public/plugins/sweetalert2/sweetalert2.all.min.js"></script>
<?php if (@$_SESSION['success']) { ?>
<script>
$(function() {
var Toast = Swal.mixin({
toast: true,
position: 'top',
showConfirmButton: false,
timer: 3000
});
Toast.fire("<?php echo $_SESSION['success']; ?>", "", "success");
});
</script>
<!-- jangan lupa untuk menambahkan unset agar sweet alert tidak muncul lagi saat di refresh -->
<?php unset($_SESSION['success']); } ?>
<?php if (@$_SESSION['error']) { ?>
<script>
$(function() {
var Toast = Swal.mixin({
toast: true,
position: 'top',
showConfirmButton: false,
timer: 3000
});
Toast.fire("<?php echo $_SESSION['error']; ?>", "", "error");
});
</script>
<!-- jangan lupa untuk menambahkan unset agar sweet alert tidak muncul lagi saat di refresh -->
<?php unset($_SESSION['error']); } ?>
<script>
$(function() {
$("#dataTable").DataTable({
"responsive": true,
"lengthChange": true,
"autoWidth": false,
});
});
</script>
Letakkan script diatas seperti contoh berikut :
kemudian temukan file header.php lalu tambahkan script berikut :
<!-- Datatables -->
<link rel="stylesheet" href="public/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="public/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">Letakkan script diatas tag </head>, seperti contoh berikut :
Testing Fitur CRUD
Testing Tambah Data :
Untuk testing Edit Data dan Hapus Data silahkan teman-teman lakukan sendiri, jika teman-teman menambahkan data, edit ataupun hapus akan muncul notif atau alert sweet alert seperti contoh berikut :
alert ketika proses berhasil dijalankan :
alert ketika proses gagal dijalankan :
Sampai disini kita telah berhasil membuat fitur CRUD dengan Jquery DataTables dan Sweet Alert 2. Gimana teman-teman mudah bukan...? bukan....!!😂
Saya rasa cukup sampai disini tutorial kita kali ini, jika ada yang ingin teman-teman tanyakan / sampaikan jangan ragu untuk berkunjung pada kolom komentar dibawah dan sampai jumpa pada tutorial-tutorial selanjutnya semoga bermanfaat byee.byeee 🙌
Tags
PHP