Menampilkan Data dari Database MySQL Tanpa Loading Dengan jQuery. Kali ini tutorial tentang jQuery yaitu bagaimana cara menampilkan data di database MySQL tanpa loading dengan PHP dan jQuery. Pada tutorial sebelumnya juga sudah saya buat tentang Cara Insert Data ke Database MySQL tanpa loading dengan PHP dan jQuery.
Beberapa hal di butuhkan adalah tentu saja sebuah Database dan Table di phpMyAdmin. Dan juga file jQuery yang bisa Anda download diwebsite resminya disini. Dan untuk file apa saja nanti yang akan dibuat, silahkan lihat struktur folder di bawah ini:
Nah, seperti pada gambar di atas, setelah Anda mendownload jQuery silahkan tempatkan file tersebut di dalam folder scripts.
Oke, langsung dimulai saja. Pertama buat sebuah Database di phpMyAdmin Anda dan dalam hal ini saya membuat Database dengan nama tutorialweb, kemudian import/dumping Script SQL di bawah ini:
|
1 2 3 4 5 6 7 8 9 |
CREATE TABLE `siswa` ( `nama` varchar(32) NOT NULL, `kelas` varchar(3) NOT NULL, `jurusan` varchar(20) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8; INSERT INTO `siswa` VALUES ('Toni', 'X', 'Akuntansi'); INSERT INTO `siswa` VALUES ('Tutorialweb', 'X', 'TKJ'); INSERT INTO `siswa` VALUES ('Pino', 'X', 'TKJ'); |
Dari Script SQL di atas Anda akan mendapatkan satu buah Table dengan Nama siswa, dan sudah ter-Insert Tiga data di dalamnya.
Selanjutnya buat file PHP baru dan beri nama index.php, kemudian tuliskan Kode di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Untitled Document</title> </head> <body> <ul></ul> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/tampil.js"></script> </body> </html> |
Perhatikan pada baris ke-7, terdapat tag <ul></ul> yang masih kosong (tidak terdapat list-nya), nah dengan Script jQuery nanti akan mengisi list tersebut.
Kita buat lagi file PHP dan beri nama connect.php, dan kode seperti di bawah ini:
|
1 2 3 4 |
<?php mysql_connect("localhost", "root", "root"); mysql_select_db("tutorialweb"); ?> |
Pastikan untuk username dan password database sudah sesuai dengan server Anda.
Selanjutnya buat lagi file PHP dan kali ini beri nama tampil.php, dan kode seperti di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 |
<?php include("connect.php"); $sql = mysql_query("SELECT * FROM siswa ORDER BY nama ASC"); $result = array(); while($row = mysql_fetch_array($sql)){ array_push($result, array('nama' => $row[0], 'kelas' => $row[1], 'jurusan' => $row[2])); } echo json_encode(array("result" => $result)); ?> |
Jangan lupa disimpan 🙂
Sekarang kita buat file javascript yang akan menghandle cara menampilkan data yang sudah di fetch di file tampil.php, dan berikut ini kode nya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function() { selesai(); }); function selesai() { setTimeout(function() { update(); selesai(); }, 200); } function update() { $.getJSON("tampil.php", function(data) { $("ul").empty(); $.each(data.result, function() { $("ul").append("<li>Nama : "+this['nama']+"</li><li>Kelas : "+this['kelas']+"</li><li>Jurusan : "+this['jurusan']+"</li><br />"); }); }); } |
Silahkan simpan dengan nama tampil.js dan simpan di dalam folder scripts sejajar dengan file jQuery Anda tadi.
Nah, sudah jadi. silahkan coba.
Oh ya, karena ini cuma menampilkan data saja tidak ada Insertnya ke database, maka untuk mencobanya silahkan buka 2 (dua) browser, misalkan Firefox dan Chrome. Kemudian untuk Firefox buka Database nya dan di Chrome buka Hasil Script index.php yang di atas tadi. Dan jadikan tampilan kedua browser seperti gambar di bawah ini:
Insert-kan data di phpMyAdmin, dan secara otomatis (tanpa loading) data bisa ditampilkan.
Silahkan coba untuk delete dan edit datanya. Dan lihat hasilnya 🙂
keren nih teknologi web praktek dulu
mas mau tanya kalau edit form di popup / dialog itu pakek apa
pakek jQuery, thickbox kalo gag salah.
terima kasih tutorialnya.
sama2 gan..
Gan, di script database yang “ENGINE=MyISAM DEFAULT CHARSET=utf8;” fungsinya untuk apa ya ?
engine nya pakek MyISAM, caracter pakek utf8.
sebenarnya gag terlalu penting, itu ada karena export dari phpmyadmin
misi gan, punya ane kok error ni ya
Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\scriptsku\tampil.php on line 6
{“result”:[]}
makasih gan,, mohon bantuannya….
saya membuatnya menggunakan AppServ gak pakek xampp, coba pakek appserv 🙂
om kira2 klo pake xampp gimana nanganin masalah diatas yak? soalnya maksaain dipelajaran mesti pake xampp. terima kasih bantuannya :bingung
coba gini
Knp yg punya sy gk tampil ya? Scripnya sdh sama smua dan pake jquery-1.10.1
apa sudah di cek database dan yang lainnya..
web server saya pakai appserv, tidak xampp.
Mas itu jquery pake dowload yang mana
download di jquery.com
mas , saya buat tampilan tabel (dari gabungan 3 tabel ) dengan menggunakan db sql server … yang jadi permasalahan ketika loading awalnya lama ….dengan record hampir 13.000
saya minta arahannya mas supaya bisa cepat seperti di program desktop , cepat untuk menampilkan datanya dari server …
terima kasih…
Bisa pakek jtable, data table
Sore mas, mau tanya cara menampilkan hasil pencarian dari input 1 ke db kemudian ditampilkan di fomr input satunya tanpa proses loading?, jadi kayak model tranlate kalimat gitu mas, di form satu saya ketik saya suka maka di form satunya langusng muncul otomatis terjemahannya i like gitu
chained za.. bisa lihat dulu demo dari web jquery di sini -> http://www.appelsiini.net/projects/chained/demo.html
kalau di tutor nya nampilin data dalam bentul
kalau saya robah jadigak mau tampil data nya om…kalau di tutor nya nampilin data dalam bentul -li- kalau saya robah jadi -td- gak mau tampil data nya om…
thx gan tutorialnya sanggat membantu
mas ini yang di tampil.js saya ubah seperti dibawah kok gak mau muncul ya,, padahal json yang di tampil.php bisa.. ini kok gak bisa. bisa tolong jelasin yang di append itu baca database apa gmana.. karena saya pake csv. terimakasih
function update() {
$.getJSON(“baca.php”, function(data) {
$(“ul”).empty();
$.each(data.result, function() {
$(“ul”).append(“Nama : “+this[‘$row[0]’]+”Kelas : “+this[‘$row[1]’]+”Jurusan : “+this[‘$row[2]’]+””);
});
});
}
master mau tanya nih, misalkan kita tambah data pada php dan masuk database mysql akan tetapi data tersebut berupa “kategori” dan memiliki link. saat link tersebut di klik, kita bisa nambah data didalamnya berupa sub kategori. begitu seterusnya, mohon pencerahannya. 🙂
bermain2 dg ID gan.
misal kategori ID 1, diberi link id=1, dan ketika di klik akan muncul form untuk memasukkan sub kategori.
nah pada menyimpan sub kategori ini yang di masukkan adalah nama kategori dan id dari kategori yg tadi.
mas tolong dibantu,, kalau tiap ada data baru disertain bunyi suara notif penempatannyya gimana ya.? saya bingung
$(document).ready(function() {
$(”).appendTo(‘body’);
$(‘#chatAudio’)[0].play();
selesai();
});
function selesai() {
setTimeout(function() {
update();
selesai();
}, 200);
}
function update() {
$.getJSON(“tampil.php”, function(data) {
$(“ul”).empty();
$.each(data.result, function() {
$(“ul”).append(“Nama : “+this[‘username’]+”Kelas : “+this[’email’]+”Jurusan : “+this[‘name’]+””);
});
});
}
kodenya berantakan. pesan aja di fangape
Master, kalau menampilkannya menggunakan sebuah table gimana?
saya udah coba mengubah nya menjadi sebuah tabel, tapi gak bisa.
:sorry
bisa dikirim kodenya.
gan ini ngaruh ke performance page gak? pagenya jadi lag/ hang gak? thx
kalau data yg banyak, ribuan ya agak lemot nampilinnya
Mantap nih gan..!! thanks..