Menampilkan Data Acak Dari Database ke Halaman Web

19 02 2011

Dear visitors, semoga saja tidak bosan membaca tulisan-tulisan di blog ini yang kemungkinan besar sudah atau pernah kawan temui di beberapa blog maupun forum-forum diskusi lainnya. Pada kesempatan kali ini saya akan mencoba share sedikit tips dan trik pemrograman website yang bertujuan untuk menampilkan data yang tersimpan pada sebuah basis data (database) ke halaman website secara acak dengan teknik AJAX. Mungkin di hati kecil pembaca akan muncul pertanyaan, buat apa sih menampilkan data acak ? bukankah lebih enak ditampilkan secara urut dan runut ? Pada beberapa aplikasi, data acak dapat digunakan sesuai dengan kebutuhan. Contohnya seperti aplikasi atau program multimedia pembelajaran, program test online, dlsb. Dimana soal-soal akan disajikan secara acak dari sebuah basis data. Pada tulisan ini akan disertakan pula contoh kasus dan source code untuk memperlengkap penjelasan.

OK, Let’s Start………

Seperti biasa, sebelum memulainya silahkan mempersiapkan beberapa perlengkapan penunjang :

  • Laptop / Personal Komputer.
  • Apache Web Server.
  • PHP.
  • MySQL.
  • atau XAMPP (Apache, PHP, MySQL).
  • Text Editor (Notepad / Notepad++ )
  • Camilan (Optional).

Setelah perlengkapan siap, selanjutnya kita tentukan tema dari studi kasus kali ini. Pada kesempatan kali ini saya ingin menampilkan data dari database yang berupa tulisan atau text kutipan-kutipan / peribahasa yang ditampilkan ke halaman website dengan selang waktu pergantian tiap kalimat 2 sekon.

Gambar 1. Desain Database.

Source Code Koneksi Database (db.php) :

<?php
// -- Host, Username dan Password Database
$host = "localhost";
$username = "root";
$password = "123";
$db = "acak";
// Melakukan koneksi ke database
mysql_connect($host,$username,$password) or die("Koneksi gagal");
mysql_select_db($db) or die ("Database tidak bisa dibuka");
?>

Source Code index.php :

<html>
<head>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("data.php");
var refreshId = setInterval(function()       {
$("#responsecontainer").load('data.php');      }, 2000);
});</script>
</head>
<body>
<center><br /><br /><br />
<table border="1" bgcolor="yellow"><tr>
<td><div id="responsecontainer"></div>
</td></tr></table>
</center>
</body></html>

Source Code data.php

<?php
include "db.php";
echo"<table>";
$tampil=mysql_query("SELECT * FROM data ORDER BY RAND() LIMIT 1");   while ($r=mysql_fetch_array($tampil)) {
echo "<tr><td>$r[data]</td></tr>";
}echo "
</table>";
?>

Terlihat dari source code diatas bahwa data akan ditampilkan secara acak ditunjukkan oleh query sql : “SELECT * FROM data ORDER BY RAND() LIMIT 1”

ORDER BY RAND() berfungsi untuk mengacak data yang ada di database, sedangkan LIMIT 1 berfungsi untuk menampilkan hanya 1 data saja ke halaman website.

Sekian tulisan edisi 20 februari 2011, semoga bermanfaat bagi perkembangan ilmu pengetahuan dan berguna bagi nusa dan bangsa. hehehehe….

 

Refference :

http://www.google.com

 

Regards,


Actions

Information

13 responses

4 03 2011
zonabelajar

Makasih Infonyaaaaaaaaaaaa

22 04 2011
heruwidakdo

sama-sama

7 04 2011
alfin89

byuh………..byuh………keren pak artikelnya…….thanks pak ya……

22 04 2011
heruwidakdo

Oke thong…

21 04 2011
fitriansyah ahmad

sebaik-baiknya manusia adalah yang paling bermanfaat bagi orang lain. Anda memberi manfaat inspiratif bagi orang lain…

22 04 2011
heruwidakdo

Thanks jg udah mampir d blog ini….

7 05 2011
Ariks

Thanks for pencerahanya

9 05 2011
heru widakdo

Thanks jg udah mampir d blog ini….

9 09 2011
mencobasukses8

btw kalo mau berhentiin gimana ya??

26 07 2012
raisa oktaviani

Maksih Banyak infonya, sangat berguna bagi saya.🙂

19 12 2012
Faris Arifiansyah

Coba dulu ah

28 09 2014
munajat

kalu agar tampil sesuai yang di sajikan gemana ya..bsa bantu??

11 02 2016
dedi ananto

gak muncul gan…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: