Pada tutorials ini akan dijelaskan cara untuk menampilkan data sebuah tabel dari database MySql menggunakan AJAX dan PHP.
Misalkan anda memiliki seebuah tabel dengan nama “customer_tb” dalam sebuah database dengan nama “customer_db”. Struktur tabel tersebut seperti di bawah ini :
Nama Field | Tipe Data |
varchar(50) * | |
name | varchar(100) |
address | text |
dan tabel tersebut berisi data misalkan seperti di bawah :
name | address | |
---|---|---|
elyxc@yahoo.com | Ellyx | Legian Kuta |
ellyxking@yahoo.com | Christian | Jalan Padma |
info@dewata-production | Dewata production | Jalan Padma Timur |
untuk menampilkan data tersebut menggunakan AJAX ikuti langkah – langkah berikut :
Buat sebuah folder baru dalam folder htdocs anda dan beri nama “ajax”. Kemudian buat sebuah file di dalam folder “ajax” dengan nama get_data.php, dan ketik script di bawah pada file get_data.php :
<?php //file get_data.php //-- melakukan koneksi ke database -- $conn=mysql_connect("localhost", "root" ,"root"); // dbhost, dbuser, dbpsw mysql_select_db("customer_db"); //--- membaca data ---- $sql="select * from customer_tb"; $hs=mysql_query($sql); echo ' <div style=" background-color:#eeeeee;"> <table width="100%" border="0" cellpadding="0"> <tr> <td bgcolor="#0099CC">email</td> <td bgcolor="#0099CC">name</td> <td bgcolor="#0099CC">address</td> <td bgcolor="#0099CC">Action</td> </tr> '; while($rs=mysql_fetch_array($hs)){ echo' <tr> <td bgcolor="white">'.$rs['email'].'</td> <td bgcolor="white">'.$rs['name'].'</td> <td bgcolor="white">'.$rs['address'].'</td> <td bgcolor="white"><button>Edit</button></td> </tr> '; } echo'</table> </div> '; ?>
Saya yakin jika anda sudah memilki dasar PHP anda pasti mengerti script di atas, jadi saya tidak akan menjelakannya.
Buatlah file baru di dalam folder “ajax” dan beri nama ajax.js. Kemudian ketik script di bawah pada file ajax.js :
// file ajax.js var recReq = getXmlHttpRequestObject(); var _documentid='content'; //-- membentuk instant XMLHttpRequest --- function getXmlHttpRequestObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if(window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else { alert('Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.'); } } function LoadData(){ document.getElementById(_documentid).innerHTML = 'Loading.... Please wait'; if (recReq.readyState == 4 || recReq.readyState == 0) { recReq.open("GET", 'get_data.php', true); recReq.onreadystatechange = function() { if (recReq.readyState == 4 && recReq.status == 200) { document.getElementById(_documentid).innerHTML = recReq.responseText; } } recReq.send(null); } }
Buatlah sebuah file di dalam folder “ajax” dan beri nama “index.php”. Kemudian ketik script di bawah pada file “index.php” :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Data Customer</title> </head> <body> <script type="text/javascript" src="ajax.js"></script> <div> <button >Langkah IV
Buka browser anda dan browsing ke “http://localhost/ajax/”, ingat anda harus mengenablekan javascript pada browser anda. Jika tidak terjadi kesalahan maka hasilnya akan tampil seperti dibawah ini:
jika tombol Load Data diklik maka akan tampil hasilnya seperti di bawah ini :
Sampai di sini adan sudah berhasil menampilkan data menggunakan AJAX. Keuntungan yang bisa diperoleh dengan menggunakan AJAX adalah untuk menghindari reload halaman yang sama berulang-ulang. Pada tutorial berikutnya saya akan menjelaskan cara untuk mengedit data yang ada dalam tabel tanpa melakukan reload halaman dan tentunya menggunakan ajax pula. Tutorial berikutnya merupakan kelanjutan dari tutorial ini.
Sebelum saya menyudahi tutorial ini tak lupa saya memohon maaf jika ada sesuatu yang salah.
sumber : mytutorialphp
Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
dalam dunia medispun telah menggunakan system komputasi, berupa aplikasi berbasis desktop maupun under web. kali…
Aplikasi web merupakan salah satu media yang tepat untuk memberikan informasi kepada warga atau masyarakat…
Aplikasi Sistem Informasi Akedemik Sekolah menggunkan PHP MySQl atau berbasis web ini merupakan sebuah sebuah…
Pada kesempatan ini saya kembali membagikan buat anda pencinta aplikasi berbasis web yaitu source kode…
Buat sobat semua yang lagi membutuhkan sedikit pencerahan tentang membuat website sistem pendaftaran online, pada…
Aplikasi Penjualan Sepeda Motor berbasis web ini adalah merupakan aplikasi untuk memberikan kemudahan dalam proses…