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.
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 ##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>
Selesai. :)Penutup
Tutorial di atas masih belum selesai dan hanya bisa melakukan penyimpanan ke database saja. Untuk fitur edit dan hapus, mohon bersabar menunggu update dari saya di lain waktu. Hehehe... Saya ada aktifitas lain. Tapi setidaknya saya sudah berbagi sedikit tutorial membuat CRUD menggunakan jQuery dan PHP.Tag
how create crud with jquery ajax and php
Membuat CRUD Menggunakan jQuery dan PHP
Reviewed by Anan Bahrul Khoir
on
00.21
Rating:
Reviewed by Anan Bahrul Khoir
on
00.21
Rating:
Anan Bahrul Khoir
Kim Fransiskus mencoba mengasah kemampuan menulisnya melalui blog dengan membagikan tutorial seputar web design dan bahasa pemrograman lainnya yang dikuasai. Diharapkan blog ini dapat bermanfaat dan membantu programmer dan kawan-kawan yang berhubungan dengan tema blog ini. Terima kasih .
Tidak ada komentar: