Membuat CRUD menggunakan jQuery dan Ajax membuat halaman tidak perlu di-refresh sehingga tampak lebih efisien untuk beberapa proyek aplikasi web. Pada kesempatan kali ini, saya ingin berbagi tutorial membuat CRUD menggunakan jQuery dan PHP.
Tutorial ini bukanlah kelanjutan dari artikel-artikel saya sebelumnya. Kali ini, saya ingin memberikan tutorial membuat CRUD (create, read, update, and delete) menggunakan jQuery dan PHP.
Updated
Tutorial Membuat CRUD Menggunakan jQuery dan PHP, saya pecah menjadi beberapa bagian. Bagian pertama adalah pengenalan dan fitur menampilkan serta menyimpan data ke database; bagian kedua adalah mengubah data; dan bagian ketiga adalah menghapus data dengan menggunakan jQuery dan PHP. Hal ini untuk menghindari panjangnya konten untuk setiap tutorial.
Updated
Tutorial Membuat CRUD Menggunakan jQuery dan PHP, saya pecah menjadi beberapa bagian. Bagian pertama adalah pengenalan dan fitur menampilkan serta menyimpan data ke database; bagian kedua adalah mengubah data; dan bagian ketiga adalah menghapus data dengan menggunakan jQuery dan PHP. Hal ini untuk menghindari panjangnya konten untuk setiap tutorial.
Persyaratan
Untuk tutorial saya selanjutnya, akan disertakan bagian persyaratan untuk memeriksa alat tempur sebelum peperangan dimulai. Hal ini untuk meminimalisir hasil yang berbeda dengan tutorial yang saya berikan melalui blog ini.
Well, persyaratan yang dibutuhkan untuk tutorial kali ini adalah:
- File library jQuery. Versi yang saya gunakan dalam tutorial ini adalah versi 2.2.3
- Engine database yang digunakan adalah MySQLi, bukan MySQL (tanpa huruf "i" di akhirnya)
- Tabel yang berhubungan dengan tutorial ini adalah tabel mahasiswa
Saya tidak menggunakan bahasa CSS atau Framework CSS dalam tutorial ini untuk menghindari kompleksitas bagi programmer pemula. :)
File yang terlibat dalam tutorial kali ini:
File yang terlibat dalam tutorial kali ini:
- index.php
- koneksi.php
- aksi.php
Membuat Tabel Mahasiswa
Langkah pertama ini mungkin bukan benar-benar langkah pertama. Langkah pertama bisa kamu mulai dari membuat database dan lain-lain. Untuk membuat database, saya anggap kawan-kawan sudah bisa. Jadi, saya mulai tutorial ini dari membuat tabel mahasiswa.
Untuk menyamakan langkah antara tutorial dengan latihan kawan-kawan, silakan unduh file sql tabel mahasiswa ini dan unduh di sini: Download .
Saya menggunakan aplikasi Navicat untuk database editor-nya. Tapi tidak ada masalah jika kamu menggunakan phpMyAdmin. File di atas memiliki data mahasiswa satu, yaitu saya sendiri. ;)
Oh, iya. Jangan lupa beri nama database untuk latihan kali ini dengan nama db_latihan. Ingat, DB_LATIHAN (dengan huruf kecil)!
Membuat File Index
Setelah berhasil membuat database dan menambahkan tabel mahasiswa dengan menggunakan file sql yang saya bagikan, langkah selanjutnya adalah membuat file index sebagai tampilan depan kita nanti.
Buat sebuah file index dengan nama index.php dengan skrip sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Membuat CRUD Menggunakan jQuery dan PHP - Anan Bahrul Khoir</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
<div id="form-tambah-mahasiswa">
<form class="form-tambah-mahasiswa" method="POST">
<table>
<tr>
<td width="100">NIM</td>
<td>: <input type="text" name="nim" id="nim"></td>
</tr>
<tr>
<td>Nama</td>
<td>: <input type="text" name="nama" id="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>: <input type="text" name="email" id="email"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="submit" value="Simpan">
</td>
</tr>
</table>
</form>
</div>
<h2>Data Mahasiswa</h2>
<button id="tambah-data-mahasiswa">Tambah Data Mahasiswa</button>
<br /><br />
<div id="data-mahasiswa"></div>
</body>
</html>
Membuat File Koneksi
Setelah membuat file index, langkah selanjutnya adalah membuat file koneksi untuk berhubungan dengan database yang kita tuju. Silakan buat file baru dengan nama koneksi.php dan masukkan skrip berikut:<?php
$hostname = "localhost";
$dbusername = "root";
$dbpassword = "";
$dbname = "db_latihan";
$koneksi = mysqli_connect($hostname, $dbusername, $dbpassword, $dbname);
if(!$koneksi){
echo "Koneksi ke database gagal!";
}
?>
Membuat File Aksi
Setelah membuat file koneksi untuk terhubung dengan database, selanjutnya adalah membuat file aksi. File ini akan menampung seluruh aksi di tampilan awal mulai dari tampil, simpan, edit, dan hapus data mahasiswa.Silakan buat file dengan nama aksi.php dan masukkan skrip berikut:
<?php
require_once('koneksi.php');
$aksi = $_POST['aksi'];
switch ($aksi) {
default:
case 'tampilData':
?>
<table border="1" cellpadding="5">
<tr>
<th>No.</th>
<th>NIM</th>
<th>Nama</th>
<th>Email</th>
<th>Aksi</th>
</tr>
<?php
$qryMahasiswa = mysqli_query($koneksi, "SELECT * FROM tbl_mahasiswa");
$no = 1;
while($data = mysqli_fetch_array($qryMahasiswa)){
echo "<tr>";
echo "
<td align=center>$no</td>
<td>$data[nim]</td>
<td>$data[nama]</td>
<td>$data[email]</td>
<td>
<button id=edit data-id=$data[id_mahasiswa]>Edit</button>
<button id=hapus data-id=$data[id_mahasiswa]>Hapus</button>
</td>
";
echo "</tr>";
$no++;
}
?>
</table>
<?php
break;
case 'simpanData':
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$email = $_POST['email'];
$sqlMahasiswa = "INSERT INTO tbl_mahasiswa VALUES (NULL, '" . $nim . "', '" . $nama . "', '" . $email . "')";
$qryMahasiswa = mysqli_query($koneksi, $sqlMahasiswa);
break;
}
?>
Tambahkan Fungsi-fungsi jQuery di Halaman Index
Halaman index yang kita buat di awal adalah halaman index kotor atau dengan kata lain masih suci dari jQuery dan operasi CRUD. Setelah semuanya telah siap, langkah selanjutnya adalah melengkapi fungsi-fungsi jQuery untuk melakukan operasi CRUD. Karena menggunakan jQuery maka halaman tidak memerlukan refresh saat operasi dijalankan.Silakan buka kembali file index.php yang telah dibuat lalu ubahlah menjadi seperti berikut:
<?php
require_once('koneksi.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Membuat CRUD Menggunakan jQuery dan PHP - Anan Bahrul Khoir</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
<div id="form-tambah-mahasiswa">
<form class="form-tambah-mahasiswa" method="POST">
<table>
<tr>
<td width="100">NIM</td>
<td>: <input type="text" name="nim" id="nim"></td>
</tr>
<tr>
<td>Nama</td>
<td>: <input type="text" name="nama" id="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>: <input type="text" name="email" id="email"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="submit" value="Simpan">
</td>
</tr>
</table>
</form>
</div>
<h2>Data Mahasiswa</h2>
<button id="tambah-data-mahasiswa">Tambah Data Mahasiswa</button>
<br /><br />
<div id="data-mahasiswa"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#form-tambah-mahasiswa').hide();
tampilData();
function sembunyikanForm(){
$('#form-tambah-mahasiswa').toggle('slow');
}
function tampilData(){
$.ajax({
type: 'POST',
url: 'aksi.php',
data: 'aksi=tampilData',
success: function(data){
$('#data-mahasiswa').html(data);
}
});
}
function kosongkanForm(){
$('#nim').val('');
$('#nama').val('');
$('#email').val('');
}
$('.form-tambah-mahasiswa').on('submit', function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
type: 'POST',
url: 'aksi.php',
data: 'aksi=simpanData&' + data,
success: function(data){
alert('Berhasil Menyimpan Data Mahasiswa!');
kosongkanForm();
sembunyikanForm();
tampilData();
}
});
});
$('#tambah-data-mahasiswa').on('click', function(){
if($(this).text() == 'Tambah Data Mahasiswa'){
$(this).text('Batal Tambah Data Mahasiswa');
} else {
$(this).text('Tambah Data Mahasiswa');
}
$('#form-tambah-mahasiswa').toggle('slow');
});
});
</script>
</body>
</html>
COMMENTS