Sesuai dengan judulnya, pada kesempatan kali ini kita akan mempelajari tentang bagaimana cara menampilkan data dari database ke dalam halaman website tanpa harus reload atau refresh seluruh halaman website itu sendiri. Hal ini sangat penting
untuk diketahui, mengapa?
Seorang pemilik website atau blog tentu mengharapkan website atau blog yang dimiliki dikunjungi oleh banyak pengguna internet di seluruh belahan dunia. Untuk mencapai hal tersebut, website atau blog dibangun dengan tampilan yang menarik untuk memikat hati pengunjung. Selain itu, informasi yang disampaikan disajikan dengan baik untuk memberikan kenyamanan bagi pencari informasi tersebut. Namun, apa jadinya apabila pengunjung website atau blog itu sendiri akan mengeksekusi suatu halaman yang menampilkan data berbeda untuk setiap eksekusi pada satu halaman yang sama mereka harus menunggu reload seluruh halaman website atau blog?
Hal di atas tentu sangat mengganggu, terlebih akses internet yang dipakai pengunjung website atau blog mereka bisa dikatakan lambat. Sehingga, hal tersebut sangat berpengaruh terhadap hati serta emosional pengunjung yang akhirnya pengunjung terpaksa berpindah tempat lain untuk mencari informasi serupa.
Oleh karena alasan tersebut di atas, ulasan ini menurut penulis sangatlah penting untuk diketahui, khususnya para pecinta website developer, khususnya lagi developer pemula.
Bagi sahabat yang ingin mempraktekkan secara langsung ulasan ini, kami sarankan pada kompter saudara sudah terinstal web server. Dalam ulasan ini, kami menggunakan AppServ versi 2.5.10. Selajutnya, ikuti langkah-langkah di bawah ini.
Pertama, siapkan database bernama 'LATIHAN' kemudian buatlah tabel 't_siswa' dengan mengeksekusi kode berikut dalam SQL:
CREATE TABLE `t_siswa` ( `id` int(11) NOT NULL auto_increment, `nama` varchar(50) NOT NULL, `alamat` varchar(100) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8
INSERT INTO `t_siswa` VALUES (1, 'Srikandi Mawasdiri', 'Jl. HOS Cokroaminoto No.12 Ungaran');INSERT INTO `t_siswa` VALUES (2, 'Stevania Selamanya', 'Jl. Panjaitan No.53 Semarang');
Kemudian, buatlah folder dalam folder WWW di AppServ (HTDOCS untuk XAMPP), misalkan sahabat beri nama 'NORELOAD'.
password terletak di bawah artikel
Buatlah 2 (dua) file dengan nama 'index.php' dan 'get_siswa.php'.
Tambahkan jQuery (jquery-latest.js) pada folder tersebut, untuk file jQuery dapat diunduh DI SINI.
Buka file 'index.php' kemudian ketik dan simpan kode berikut:
<html>
<?php
mysql_connect('localhost','root','admin') or die("Koneksi gagal");
mysql_select_db('latihan') or die("Database tidak bisa dibuka");
?>
<head>
<title>SURUHBELAJAR.BLOGSPOT.COM</title>
<script src="jquery-latest.js" type="text/javascript"></script>
</head>
<body>
<h1>MENAMPILKAN DATA TANPA RELOAD HALAMAN</h1><br>
<form name="frmrange" method="post">
<label for="siswa" style="font-size:20px">Nama Siswa :</label>
<select name="siswa" style="font-size:20px" id="siswa">
<option value=''>--Pilih--</option>
<?php
$q = mysql_query("select*from t_siswa order by nama");
while($hasil=mysql_fetch_array($q)){
echo "<option value='$hasil[id]'>$hasil[nama]</option>";
}
?>
</select>
<br /><br />
<div id="tabel_range"></div>
</form>
<script>
$('select[id=siswa]').change(function(){
get_siswa();
});
function get_siswa(){
var a = $('#siswa').val();
$.ajax({
type: 'POST',
url: "get_siswa.php",
data: "siswa="+a,
success: function(info) {
$("#tabel_range").html(info); }
});
return false;
}
</script>
</body>
</html>
Selanjutnya, buka file 'get_siswa.php' kemudian ketik dan simpan kode berikut:
<?php
mysql_connect('localhost','root','admin') or die("Koneksi gagal");
mysql_select_db('latihan') or die("Database tidak bisa dibuka");
$id = $_POST['siswa'];
$data = "";
if(!empty($id)){
$q = mysql_query("select*from t_siswa where id='$id'");
while($hasile=mysql_fetch_array($q)){
$data .= "<table><tr><td>ID</td><td>: $hasile[id]</td></tr><tr><td>NAMA</td><td>: $hasile[nama]</td></tr><tr><td>ALAMAT</td><td>: $hasile[alamat]</td></tr></table>";
}
echo $data;
}else{
echo "";
}
?>
Terakhir, buka browser dan ketikan 'localhost/reload' pada address bar. Setelah muncul combo nama siswa, pilih nama siswa dan lihat efeknya. Sahabat akan melihat hasilnya di bawah combo tanpa harus merefresh atau mereload kembali seluruh halaman.
Demikian ulasan pada kesempatan ini dan semoga bermanfaat untuk kita semua. Kritik, kesan, saran, dan pertanyaan dapat dikirimkan melalui komentar. Contoh project dapat diunduh melalui link yang terletak di tengah artikel.
Terima kasih
Password: suruhbelajar.blogspot.com
terima kasih
ReplyDelete