Menampilkan Data dari Database MySQL Tanpa Loading Dengan jQuery

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:

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'

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:

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

</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:

<?php mysql_connect("localhost", "root", "root"); mysql_select_db("tutorialweb"); ?>

<?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:

<?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)); ?>

<?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:

$(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 />");   });  }); }

$(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

Menu Melayang

Menampilkan Data dari Database MySQL Tanpa Loading Dengan jQuery

Blog Post

Related Post

Back to Top

Cari Artikel

Popular Post

Script Silsilah Keluarga Berbasis Web dengan Mysqli, Bootstrap dan PHP

Cara membuat script captcha dengan php GD

Ebook Tutorial VB.NET ( Daging semua )

Cara memasukkan code php ke dalam webpage .html

Daftar Link

Label

Arsip Blog

Link Setting

Copyright