Welcomes Telegram group ! Link Button

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)
);
Setelah database sudah dibuat, selanjutnya buat file config.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 buatlah 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 "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
Sekian dari saya semoga artikel saya membantu
post section Don't remove this section, otherwise theme will crash.

Rate this article

Getting Info...

About Post Author

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Plus UI, you agreed to use cookies in agreement with the Plus UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.