Cara membuat crud php ajax
CRUD PHP Ajax Sederhana
Utorial kali ini kita akan belajar membuat sebuah aplikasi net untuk menyimpan, mengedit, menghapus serta menampilkan statistics 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 statistics antara purchaser dan server di belakang layar, sehingga halaman net tidak harus dibaca ulang atau reload halaman setiap kali melakukan perubahan. Dalam academic ini kita akan belajar bagaimana cara mengkombinasikan antara PHP dan Ajax untuk membangun sebuah aplikasi internet site yang lebih interaktif tanpa reload halaman.
Pertama-tama kita siapkan database terlebih dahulu. Dalam tutorial kali ini kita Akan menggunakan database akademik dengan 1 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)
);
Download library jquery untuk menggunakan fungsi ajax nya. Kemudian buatlah file index.php
<?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();
}
?>
<!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 "config.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>
Buat form-edit.php, Form edit ini berbeda dengan form add diatas, karena inputan pada form akan terisi dan ter check benar otomatis sesuai dengan database .
<?php
include "config.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 "config.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
- index.php
- config.php
- data-mahasiswa.php
- form-add.php
- form-edit.php
- service.php
- jquery-3.4.1.min.js
Posting Komentar