Selamat datang di blog Mari belajar coding. Tutorial kali ini kita akan belajar membuat sebuah aplikasi web untuk menyimpan, mengedit, menghapus serta menampilkan data dari database atau yang lebih sering di kenal dengan istilah aplikasi crud menggunakan PHP dan Ajax jquery. Teknologi Ajax merupakan suatu teknik untuk melakukan pertukaran data antara client dan server di belakang layar, sehingga halaman web tidak harus dibaca ulang atau reload halaman setiap kali melakukan perubahan. Dalam tutorial ini kita akan belajar bagaimana cara mengkombinasikan antara PHP dan Ajax untuk membangun sebuah aplikasi website yang lebih interaktif tanpa reload halaman.
CRUD PHP Ajax Sederhana
Pertama-tama kita siapkan database nya terlebih dahulu. Dalam tutorial ini kita akan menggunakan database akademik dengan satu tabel bernama mahasiswa.
CREATE DATABASE `akademik`;
USE `akademik`;
CREATE TABLE `mahasiswa` (
`IdMhsw` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`Nama` varchar(150),
`JenisKelamin` varchar(20),
`Alamat` text,
`Agama` varchar(30),
`NoHp` varchar(15),
`Email` varchar(150)
);
Setelah database dibuat, selanjutnya buat file koneksi.php untuk menghubungkan aplikasi dengan database akademik.
<?php
//koneksi ke database akademik
$server = "localhost";
$user = "root";
$pass = "";
$dbname = "akademik";
$koneksi = mysqli_connect($server,$user,$pass,$dbname);
if(mysqli_connect_errno()){
echo "Koneksi database gagal".mysqli_connect_error();
}
?>
Download library jquery untuk menggunakan fungsi ajax nya. Kemudian buat file index.php
<!DOCTYPE html>
<html>
<head>
<title>Simple Crud Ajax</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//load data mahasiswa saat aplikasi dijalankan
loadData();
//Load form add
$("#contentData").on("click", "#addButton", function() {
$.ajax({
url: 'form-add.php',
type: 'get',
success: function(data) {
$('#contentData').html(data);
}
});
});
//Load form edit dengan parameter IdMhsw
$("#contentData").on("click", "#EditButton", function() {
var IdMhsw = $(this).attr("value");
$.ajax({
url: 'form-edit.php',
type: 'get',
data: {
IdMhsw: IdMhsw
},
success: function(data) {
$('#contentData').html(data);
}
});
});
//button batal
$("#contentData").on("click", "#cancelButton", function() {
loadData();
});
//simpan data mahasiswa
$("#contentData").on("submit", "#formAdd", function(e) {
e.preventDefault();
$.ajax({
url: 'service.php?action=save',
type: 'post',
data: $(this).serialize(),
success: function(data) {
alert(data);
loadData();
}
});
});
//edit data mahasiswa
$("#contentData").on("submit", "#formEdit", function(e) {
e.preventDefault();
$.ajax({
url: 'service.php?action=edit',
type: 'post',
data: $(this).serialize(),
success: function(data) {
alert(data);
loadData();
}
});
});
//hapus data mahasiswa berdasarkan IdMhsw
$("#contentData").on("click", "#DeleteButton", function() {
var IdMhsw = $(this).attr("value");
$.ajax({
url: 'service.php?action=delete',
type: 'post',
data: {
IdMhsw: IdMhsw
},
success: function(data) {
alert(data);
loadData();
}
});
});
})
function loadData() {
$.ajax({
url: 'data-mahasiswa.php',
type: 'get',
success: function(data) {
$('#contentData').html(data);
}
});
}
</script>
</head>
<body>
<div align="center">
<h2>Simple Crud Ajax dan PHP</h2>
<div id="contentData"></div>
</div>
</body>
</html>
Letakkan file index.php dan jquery dalam satu folder. Fungsi load data untuk menangani proses request data mahasiswa yang akan di tampilkan pada div contentData. Buat file data-mahasiwa.php seperti dibawah ini.
<button id="addButton" class="btn btn-primary">Tambah Data</button>
<br>
<br>
<table border="1">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>Agama</th>
<th>No. HP</th>
<th>Email</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
include "koneksi.php";
$no=1;
$query=mysqli_query($koneksi, "SELECT * FROM Mahasiswa ORDER BY IdMhsw DESC") or die(mysqli_error($koneksi));
while ($result=mysqli_fetch_array($query)) {
?>
<tr>
<td>
<?php echo $no++; ?>
</td>
<td>
<?php echo $result['Nama']; ?>
</td>
<td>
<?php echo $result['JenisKelamin']; ?>
</td>
<td>
<?php echo $result['Alamat']; ?>
</td>
<td>
<?php echo $result['Agama']; ?>
</td>
<td>
<?php echo $result['NoHp']; ?>
</td>
<td>
<?php echo $result['Email']; ?>
</td>
<td>
<button id="EditButton" value="<?php echo $result['IdMhsw']; ?>">Edit</button>
<button id="DeleteButton" value="<?php echo $result['IdMhsw']; ?>">Delete</button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
Buat form-add.php untuk menampilkan form tambah data.
<form method="POST" id="formAdd">
<table>
<tr>
<td>Nama</td>
<td>
<input type="text" name="Nama" id="Nama" required="" />
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<label>
<input type="radio" name="JenisKelamin" id="JenisKelamin" value="Laki-laki" required="" />Laki-laki</label>
<label>
<input type="radio" name="JenisKelamin" id="JenisKelamin" value="Perempuan" required="" />Perempuan</label>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>
<textarea name="Alamat" id="Alamat" required=""></textarea>
</td>
</tr>
<tr>
<td>Agama</td>
<td>
<select name="Agama" id="Agama" required="">
<option disabled="" selected="">-Pilih-</option>
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katholik">Katholik</option>
<option value="Budha">Budha</option>
<option value="Hindhu">Hindhu</option>
<option value="Konghucu">Konghucu</option>
<option value="Lain-lain">Lain-lain</option>
</select>
</td>
</tr>
<tr>
<td>No. HP</td>
<td>
<input type="text" name="NoHP" id="NoHP" required="" />
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="email" name="Email" id="Email" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="simpan" id="simpan" value="Simpan" />
<button id="cancelButton" type="button">Batal</button>
</td>
</tr>
</table>
</form>
Baca juga Membuat Validasi Form dengan JQuery Form Validator
Buat form-edit.php, Form edit ini berbeda dengan form add diatas, karena inputan pada form akan terisi dan ter check otomatis sesuai data dari database.
Buat form-edit.php, Form edit ini berbeda dengan form add diatas, karena inputan pada form akan terisi dan ter check otomatis sesuai data dari database.
<?php
include "koneksi.php";
$IdMhsw=$_GET['IdMhsw'];
$query=mysqli_query($koneksi, "SELECT * FROM Mahasiswa WHERE IdMhsw='$IdMhsw'") or die(mysqli_error($koneksi));
$result=mysqli_fetch_array($query);
?>
<form method="POST" id="formEdit">
<table>
<tr>
<td>Nama</td>
<td>
<input type="hidden" name="IdMhsw" id="IdMhsw" required="" value="<?php echo $result['IdMhsw']; ?>" />
<input type="text" name="Nama" id="Nama" required="" value="<?php echo $result['Nama']; ?>" />
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<label>
<input type="radio" name="JenisKelamin" id="JenisKelamin" value="Laki-laki" required="" <?php if($result[ 'JenisKelamin']=="Laki-laki" ) echo "checked"; ?> />Laki-laki</label>
<label>
<input type="radio" name="JenisKelamin" id="JenisKelamin" value="Perempuan" required="" <?php if($result[ 'JenisKelamin']=="Perempuan" ) echo "checked"; ?> />Perempuan</label>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>
<textarea name="Alamat" id="Alamat" required="">
<?php echo $result['Alamat']; ?>
</textarea>
</td>
</tr>
<tr>
<td>Agama</td>
<td>
<select name="Agama" id="Agama" required="">
<option disabled="" selected="">-Pilih-</option>
<option value="Islam" <?php if($result[ 'Agama']=="Islam" ) echo "selected"; ?>>Islam</option>
<option value="Kristen" <?php if($result[ 'Agama']=="Kristen" ) echo "selected"; ?>>Kristen</option>
<option value="Katholik" <?php if($result[ 'Agama']=="Katholik" ) echo "selected"; ?>>Katholik</option>
<option value="Budha" <?php if($result[ 'Agama']=="Budha" ) echo "selected"; ?>>Budha</option>
<option value="Hindhu" <?php if($result[ 'Agama']=="Hindhu" ) echo "selected"; ?>>Hindhu</option>
<option value="Konghucu" <?php if($result[ 'Agama']=="Konghucu" ) echo "selected"; ?>>Konghucu</option>
<option value="Lain-lain" <?php if($result[ 'Agama']=="Lain-lain" ) echo "selected"; ?>>Lain-lain</option>
</select>
</td>
</tr>
<tr>
<td>No. HP</td>
<td>
<input type="text" name="NoHP" id="NoHP" required="" value="<?php echo $result['NoHp']; ?>" />
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="email" name="Email" id="Email" required="" value="<?php echo $result['Email']; ?>" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="simpan" id="simpan" value="Simpan" />
<button type="button" id="cancelButton">Batal</button>
</td>
</tr>
</table>
</form>
Terakhir buat service.php untuk menangani proses simpan, edit dan hapus data oleh pengguna. Dalam service.php ini, terdapat kondisi sesuai aksi yang di lakukan.
<?php
include "koneksi.php";
switch ($_GET['action'])
{
case 'save':
$Nama = $_POST['Nama'];
$JenisKelamin = $_POST['JenisKelamin'];
$Alamat = $_POST['Alamat'];
$Agama = $_POST['Agama'];
$NoHP = $_POST['NoHP'];
$Email = $_POST['Email'];
$query = mysqli_query($koneksi, "INSERT INTO Mahasiswa(Nama, JenisKelamin, Alamat, Agama, NoHp, Email) VALUES('$Nama', '$JenisKelamin', '$Alamat', '$Agama', '$NoHP', '$Email')");
if ($query)
{
echo "Simpan Data Berhasil";
}
else
{
echo "Simpan Data Gagal :" . mysqli_error($koneksi);
}
break;
case 'edit':
$IdMhsw = $_POST['IdMhsw'];
$Nama = $_POST['Nama'];
$JenisKelamin = $_POST['JenisKelamin'];
$Alamat = $_POST['Alamat'];
$Agama = $_POST['Agama'];
$NoHP = $_POST['NoHP'];
$Email = $_POST['Email'];
$query = mysqli_query($koneksi, "UPDATE Mahasiswa SET Nama='$Nama', JenisKelamin='$JenisKelamin', Alamat='$Alamat', Agama='$Agama', NoHp='$NoHP', Email='$Email' WHERE IdMhsw='$IdMhsw'");
if ($query)
{
echo "Edit Data Berhasil";
}
else
{
echo "Edit Data Gagal :" . mysqli_error($koneksi);
}
break;
case 'delete':
$IdMhsw = $_POST['IdMhsw'];
$query = mysqli_query($koneksi, "DELETE FROM Mahasiswa WHERE IdMhsw='$IdMhsw'");
if ($query)
{
echo "Hapus Data Berhasil";
}
else
{
echo "Hapus Data Gagal :" . mysqli_error($koneksi);
}
break;
}
?>
Letakkan file index.php, jquery-3.4.1.min.js, dan file-file lainnya dalam satu folder seperti gambar dibawah ini.
Baca juga Upload Gambar dengan AJAX PHP dan MySQL
Tutorial membuat aplikasi web crud PHP dengan Ajax sederhana telah selesai, sekian.
Baca juga Upload Gambar dengan AJAX PHP dan MySQL
Tutorial membuat aplikasi web crud PHP dengan Ajax sederhana telah selesai, sekian.