CRUD Dengan Menggunakan AJaX (Part I)

Saad Abdurrazaq Sat, August 1, 2015 3 Comments 6,064 views
CRUD-Dengan-Menggunakan-AJaX-(Part-I)

Jika pada artikel sebelumnya kita telah membahas tips, cara dan langkah-langkah yang harus dilakukan sebelum memulai tutorial cara membuat CRUD dengan menggunakan AJaX dan jQuery, maka pada artikel kali ini kita akan coba mengimplementasikan apa yang telah kita bicarakan sebelumnya. Kita tidak perlu menggunakan PHP framework terlebih dahulu untuk mengimplementasikannya, kita masih menggunakan PHP native, tanpa framework agar dapat dipahami oleh yang masih belum paham OOP PHP sekalipun.

Sedikit akan Saya ulas terlebih dahulu perbedaan yang paling mencolok pembuatan CRUD tanpa teknik AJaX dengan tutorial pembuatan CRUD menggunakan teknik AJaX dengan jQuery. Pada pembuatan CRUD pure dengan menggunakan PHP, refresh page atau pindah page ke halaman yang lain masih kita dapati, terutama ketika kita melakukan update data. Problem ini yang dirasa kurang nyaman, kurang nikmat, kurang interaktif dan kurang responsif. Namun tidak dengan AJaX, pada tutorial cara membuat CRUD dengan menggunakan AJAX diciptakan untuk memecahkan masalah tersebut. Dengan sentuhan AJaX, website akan terasa responsif, interaktif, dan pastinya memiliki kecepatan dalam memproses request ke server, sehingga tidak lagi diperlukan refresh page atau pindah page ke halaman lain, AJaX hanya akan meload elemen-elemen yang dibutuhkan saja, tanpa meload semua elemen website atau satu halaman penuh. Dengan kelebihan yang dimilikinya, maka tak jarang banyak dari para web designer dan web programmer yang menggunakannya untuk membuat halaman website menjadi lebih responsif dan lebih interaktif.  AJaX sendiri untuk saat ini sudah menjadi pembeda antara web tradisional dan web-web modern saat ini. Penggunaan AJaX dalam membuat website kini sudah menjadi kewajiban dan tuntutan di zaman modern seperti sekarang ini.

Kurang lebih seminggu yang lalu Saya membuat CRUD dengan teknik AJaX menggunakan jQuery. Hanya karena penggunaan query SQLnya yang berbeda dengan query SQL pada umumnya (SELECT * FROM tabel;), maka pembuatan CRUD ini terbilang sistemnya agak sedikit berbeda, dan logika serta algoritma di dalamnya terbilang lebih sedikit rumit.

CRUD yang Saya buat ini adalah pengambilan nilai tertentu dari kumpulan nilai yang ada dalam satu tabel berdasarkan nilai yang dipilih dari select box disertai dengan fitur insert, delete dan input tanpa adanya pagination maupun fitur pencarian data. CRUD yang saya buat ini merupakan proyek sistem informasi penilaian tahfidz al-quran, di mana setiap siswa diwajibkan untuk menghafal 1 juz dalam satu semester. Sehingga pada setiap pertemuan siswa dituntut untuk menghafal setidaknya minimal 1 halaman. Seperti yang kita ketahui, 1 juz terdiri dari 20 halaman, maka penilaian berdasarkan jumlah halaman tersebut. Untuk lebih jelasnya silahkan ikuti langkah-langkah CRUD dengan menggunakan AJAX dibawah ini, lalu jalankan scriptnya di localhost.

Langkah-langkah CRUD dengan menggunakan AJAX

STEP 1: Pada langkah pertama CRUD dengan menggunakan AJAX yaitu, Buat database dan tabelnya terlebih dahulu, supaya tidak buang-buang waktu, saya akan sertakan tabel-tabelnya dalam suatu file yang berekstensikan .sql, tinggal import saja. Kemudian buatlah file dengan nama koneksi.php lalu ketikkan script di bawah ini, untuk menghubungkan data-data yang tersimpan di database ke halaman yang kita tuju.

<?php define('host', 'localhost'); define('user', 'root'); define('password', 'qwertyuiop123'); define('dbname', 'crud'); function bukakoneksi() { mysql_select_db(dbname, mysql_connect(host, user, password)); } function tutupkoneksi() { mysql_close(mysql_connect(host, user, password)); } ?>

silahkan sesuaikan host, user, password dan databasenya dengan host, user, password dan database yang Anda buat.

 

STEP 2: Buatlah file index.php. File ini merupakan file induk untuk menampilkan, menghapus, dan menginput data. Inilah scriptnya:

<?php require 'koneksi.php'; bukakoneksi(); ?>
<!DOCTYPE html>
<html>
<head>
<title>CRUD with AJAX</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="operation.js"></script>
</head>
<body>


<div class="navbar navbar-static-top">


<div class="navbar-inner">


<div class="container">
<a href="#" class="brand">CRUD with AJAX</a>
</div>


</div>


</div>



<div class="modal hide fade" id="kotakdialog">


<div class="modal-header">


<div class="close" type="button" data-dismiss="modal"><span>&times;</span></div>



<h3 id="judulheader"></h3>


</div>



<div class="modal-body">
</div>



<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="savedata"><span id="sve"></span></button>
</div>


</div>



<div class="container">


<h3>
Data Mahasiswa
</h3>



<h4>
Pilih Halaman
<?php $query = "select * from grade"; $hasil = mysql_query($query); ?>
<select class="input-medium" name="nilai" id="nilai">
<option value="0" selected="selected">Pilih Halaman</option>
<?php
while ($qtabel = mysql_fetch_assoc($hasil))
{
echo '<option>'.$qtabel['grade'].'</option>';

}
?>
</select>
<button class="btn btn-primary atur" id="show">Show</button> Or <a class="btn tambah atur" type="button" href="#kotakdialog" data-toggle="modal"><i class="icon-plus"></i> Tambah Data</a>
</h4>



<div id="tampildata">
</div>



<div id="msg"></div>


</div>


<?php tutupkoneksi(); ?>

</body>
</html>

dikarenakan kita menggunakan jQuery dan bootstrap CSS framework, maka sesuaikanlah letak file jQuery dan file bootstrap CSS framework pada kode yang tertulis di atas.

 

STEP 3: Pada langkah ketiga kita akan membuat file yang berekstensikan .js. Kita beri nama filenya operation.js. File ini yang akan mengatur semua file PHP yang kita buat. Inilah scriptnya:

$(document).ready(function()
{
var nis = 0;

$('#show').live("click", function()
{
var loadpage = "tampil-data.php";
var nilai = $('select[name=nilai]').val();
$.post(loadpage, {nilai: nilai}, function(data)
{
$('#tampildata').html(data).show();
});

});

$('.hapus').live("click", function()
{
var url = "action.php";
nis = this.id;
var loadpage = "tampil-data.php";
var nilai = $('select[name=nilai]').val();
var answer = confirm("Apakah Anda ingin menghapus data ini?");
if(answer)
{
$.post(url, {hapus: nis}, function()
{
$.post(loadpage, {nilai: nilai}, function(data)
{
$('#tampildata').html(data).show();
$("#msg").show();
$("#msg").fadeOut(2500);
$('#msg').html("Succesfully deleted");
});
});
}
});

$('.tambah, .ubah').live("click", function()
{
var url = "form-data.php";
var nilai = $('select[name=nilai]').val();
nis = this.id;
if(nis == 0)
{
$('#judulheader').html("Tambah Data Nilai");
$('#sve').html("Input");
$('#msg').html("Succesfully added");
}
else
{
$('#judulheader').html("Ubah Data Nilai");
$('#sve').html("Update");
$('#msg').html("Succesfully updated");
}

$.post(url, {nilai: nilai, id: nis}, function(data)
{
$('.modal-body').html(data).show();
});
});

$('#savedata').bind("click", function(event)
{
var url = "action.php";
var loadpage = "tampil-data.php";
var getnis = $('input:text[name=unis]').val();
var getnama = $('input:text[name=unama]').val();
var getnilai = $('input:text[name=unilai]').val();
var takenis = $('select[name=tnis]').val();
var takenama = $('input:text[name=tnama]').val();
var takehal = $('select[name=thalaman]').val();
var takenilai = $('input:text[name=tnilai]').val();
var nilai = $('select[name=nilai]').val();

$.post(url, {unis: getnis, unama: getnama, unilai: getnilai, tnis: takenis, tnama: takenama, thalaman: takehal, tnilai: takenilai, id: nis, nilai: nilai}, function()
{
$("#kotakdialog").modal("hide");
$.post(loadpage, {nilai: nilai}, function(data)
{
$('#tampildata').html(data).show();
$("#msg").show();
$("#msg").fadeOut(2500);
});

});
});
});

 

STEP 4: Pada langkah yang ke empat kita akan membuat file dan kita beri nama tampil-data.php. File ini yang akan menampilkan data-data yang tersimpan dalam database. Inilah scriptnya:



<table class="table table-condensed table-bordered table-hover">
<?php require 'koneksi.php'; bukakoneksi(); ?>


<tr>


<th>NIS</th>



<th>Nama</th>



<th>Nilai</th>



<th>Action</th>


</tr>


<?php
$nilai = $_POST['nilai'];
$query= "select nis, $nilai, nama from nilaiharian";
$konversi = mysql_query($query);
echo "


<div id='deskripsi'>Data untuk nilai $nilai</div>


";
while($hasil = mysql_fetch_array($konversi))
{

$nis = $hasil['nis'];
$nil = $hasil[1];
$nama = $hasil['nama'];

?>


<tr>


<td><?php echo $nis; ?></td>



<td><?php echo $nama; ?></td>



<td><?php echo $nil; ?></td>



<td>
<a href="#kotakdialog" data-toggle="modal" class="ubah" id="<?php echo $nis; ?>"><i class="icon-pencil"></i></a>
<a href="#" class="hapus" id="<?php echo $nis; ?>"><i class="icon-trash"></i></a>
</td>


</tr>


<?php } tutupkoneksi(); ?>
</table>


 

STEP 5: Selanjutnya kita akan buat file dengan nama form-data.php. File ini diciptakan agar dapat menampilkan form dan datanya pada modal box yang telah kita buat di file index.php. Inilah scriptnya:

<?php require 'koneksi.php'; bukakoneksi(); $ambilnilai = $_POST['nilai']; $niss = $_POST['id']; $result = mysql_fetch_array(mysql_query("SELECT nama, $ambilnilai from nilaiharian where nis = '$niss'")); if($niss > 0)
{
$resnilai = $result[1];
$resnama = $result['nama'];
?>


<div class="form-horizontal">


<div class="control-group">
<label class="control-label">NIS</label>


<div class="controls">
<input type="text" class="input-medium" name="unis" readonly="true" value="<?php echo $niss; ?>">
</div>


</div>



<div class="control-group">
<label class="control-label">Nama</label>


<div class="controls">
<input type="text" class="input-medium" name="unama" readonly="true" value="<?php echo $resnama; ?>">
</div>


</div>



<div class="control-group">
<label class="control-label">Nilai</label>


<div class="controls">
<input type="text" class="input-small" name="unilai" value="<?php echo $resnilai; ?>">
</div>


</div>


</div>


<?php } else { $resnilai = ""; $resnama = ""; ?>


<div class="form-horizontal">


<div class="control-group">
<label class="control-label">NIS</label>


<div class="controls">
<?php
$hasil = mysql_query("select * from login where level='2'");
$jsArray = "var namauser = new Array();\n";
echo '<select name="tnis" class="input-medium" onchange="document.getElementById(\'result\').value = namauser[this.value]">';
echo '<option value="0" selected="selected">Pilih NIS</option>';

while ($row = mysql_fetch_assoc($hasil))
{
echo '<option value="' . $row['nis'] . '">' . $row['nis'] . '</option>';
$jsArray .= "namauser['" . $row['nis'] . "'] = '" . addslashes($row['nama']) . "';\n";
}

echo '</select>';
?>
</div>


</div>



<div class="control-group">
<label class="control-label">Nama</label>


<div class="controls">
<input type="text" name="tnama" id="result" readonly="true" class="inputnama"/><script type="text/javascript"> <?php echo $jsArray; ?> </script>
</div>


</div>



<div class="control-group">
<label class="control-label">Halaman</label>


<div class="controls">
<select class="input-medium" name="thalaman" id="grade">
<option value="0" selected="selected">Pilih Halaman</option>
<?php
$query = "select * from grade";
$hasil = mysql_query($query);
while ($qtabel = mysql_fetch_assoc($hasil))
{
echo '<option>'.$qtabel['grade'].'</option>';

}
?>
</select>
</div>


</div>



<div class="control-group">
<label class="control-label">Nilai</label>


<div class="controls">
<input type="text" class="input-small" name="tnilai" class="inputnilai"/>
</div>


</div>


</div>


<?php } tutupkoneksi(); ?>

 

STEP 6: Kita buat file yang di dalamnya berisikan query SQL dan script PHP untuk menghapus, menginput dan mengupdate data. file ini kita beri nama action.php. Inilah scriptnya:

<?php require 'koneksi.php'; bukakoneksi(); $buang = $_POST['hapus']; if(isset($_POST['hapus'])) { mysql_query("DELETE from nilaiharian where nis='$buang'"); } else { $vnis = $_POST['unis']; $vnama = $_POST['unama']; $vnilai = $_POST['unilai']; $varnis = $_POST['tnis']; $varnama = $_POST['tnama']; $varnilai = $_POST['tnilai']; $varhal = $_POST['thalaman']; $ambilnis = $_POST['id']; $nilai = $_POST['nilai']; if($varnama!="" && $varnilai!="" || $vnilai!="") { if($ambilnis == 0) { $hasil = mysql_query("INSERT into nilaiharian(nis, nama, $varhal) values('$varnis', '$varnama', '$varnilai')"); } else { mysql_query("UPDATE nilaiharian set nama='$vnama', $nilai='$vnilai' where nis='$ambilnis'"); } } } tutupkoneksi(); ?>

 

STEP 7: Pada langkah terakhir dalam membuat CRUD dengan menggunakan AJAX yaitu, kita buat file untuk menambahkan sedikit style pada semua halaman yang telah kita buat sebelumnya. Filenya kita namakan style.css. Inilah scriptnya:

#msg {
display: none;
margin: 0 0 13px;
padding: 10px;
border: solid 1px #bd8;}
.atur{margin-top: -10px;}

Simpan ketujuh file yang tadi dibuat lalu jalankan di localhost. Silahkan otak-atik sesukanya agar lebih paham.
Bila Anda tidak ingin repot-repot copy paste scriptnya silahkan download filenya di bawah ini.

  CRUD Dengan Menggunakan AJAX (229.8 KiB, 1,285 hits)

Lalu untuk demonya bisa Anda lihat pada video ini.

Sekian semoga bermanfaat!

Is a web enthusiast from Indonesia. kafeinkode was created and written by Saad Abdurrazaq, it is built on WordPress. Love working with WordPress, programming, blogging, internet marketing, and all about computer soft skills.

3 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. adepadanx@gmail.com'

    gan coba buat tutorial CRUD modal form data input dong gan, kalo yg diatas kan isinya udah ditentuin. .heheh btw makasih untuk tutornya bermanfaat buat ane 😀

    Reply
  2. baihaqimuhamad79@gmail.com'

    Isi table grade apaan gan ?

    Reply