Kursus Membuat Web

iklan

Database Ajax

AJAX dapat digunakan untuk komunikasi interaktif dengan database. Contoh berikut akan menunjukkan bagaimana sebuah halaman web dapat mengambil informasi dari database dengan AJAX :

Script HTML : ajaxdatabase.html
<!DOCTYPE html>
<html>
	<head>
		<title>Contoh Ajax</title>
		<meta  charset="UTF-8">
			<script>
			function showCustomer(str){
			var xmlhttp; 
			if (str=="")
			{
			document.getElementById("txtHint").innerHTML="";
			return;
			}
			if (window.XMLHttpRequest)
			{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
			}
			else
			{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function()
			{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
			document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
			}
			}
			xmlhttp.open("GET","getcustomer.php?q="+str,true);
			xmlhttp.send();
			}
			</script>
</head>
<body>
	<form action="#"> 
		<select name="customers" onChange="showCustomer(this.value)">
			<option value="">Select a customer ID:</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
		</select>
	</form>
	<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
Script PHP : koneksi.inc.php
<?php
//variable koneksi database
	$dbhost = "localhost";
	$dbuser = "root";
	$dbpass = "";
	$dbname = "databaseajax";
//fungsi mysql_connect()
	$dbconnect = @mysql_connect("$dbhost","$dbuser","$dbpass")or die("gagal koneksi");
	@mysql_select_db("$dbname")or die ("gagal koneksi ke data base");
?>
Script PHP : getcustomer.php
<?php
	include "koneksi.inc.php";
	$customerid=$_GET["q"];
	$query="select * from customer where CS_ID='$customerid'";
	$hasil=mysql_query($query);
	$row=mysql_fetch_row($hasil);
		echo "<table border='1' width='360'>";
		do {
		list($no,$namadepan,$namabelakang)=$row;
		if ($no==""){
			echo "<tr>";
			echo "<td>";
			echo "Tidak Ada Customer Dengan ID ini ........</a>";
			echo "</td>";
			echo "</tr>";
		}
		else
		{
			echo "<tr>";
			echo "<td>";
			echo "Nama Depan";
			echo "</td>";
			echo "<td>";
			echo "$namadepan";
			echo "</td>";
			echo "</tr>";
			echo "<tr>";
			echo "<td>";
			echo "Nama Belakang";
			echo "</td>";
			echo "<td>";
			echo "$namabelakang";
			echo "</td>";
			echo "</tr>";
			echo "<tr>";
		}
		}
		while ($row=mysql_fetch_row($hasil));
		echo "</table>";
?>
Data Base
-- phpMyAdmin SQL Dump
-- version 2.11.7
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jan 15, 2013 at 09:51 AM
-- Server version: 5.0.51
-- PHP Version: 5.2.6
   SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Database: `databaseajax`
--
-- --------------------------------------------------------
--
     -- Table structure for table `customer`
     --
		CREATE TABLE IF NOT EXISTS `customer` (
		`CS_ID` int(10) NOT NULL auto_increment,
		`Nama Depan` varchar(100) NOT NULL,
		`Nama Belakang` varchar(100) NOT NULL,
		PRIMARY KEY  (`CS_ID`)
		) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
	 --
	 -- Dumping data for table `customer`
	 --
		INSERT INTO `customer` (`CS_ID`, `Nama Depan`, `Nama Belakang`) VALUES
		(1, 'Joko', 'Santoso'),
		(2, 'Muhammad', 'Falah'),
		(3, 'Maulana', 'Habib'),
		(4, 'Luqmanul', 'Hakim');
Lihat ...

Penjelasan Fungsi showCustomer()

Ketika pengguna memilih pelanggan dalam dropdown list di atas, sebuah fungsi yang disebut "showCustomer ()" dijalankan. Fungsi ini dipicu oleh event "onchange" :

fungsi showCustomer () melakukan hal berikut :

  • Memeriksa apakah pelanggan dipilih
  • Membuat objek XMLHttpRequest
  • Memuat fungsi untuk dieksekusi ketika respon server sudah siap
  • Mengirim permintaan ke sebuah file di server

Perhatikan bahwa sebuah parameter (q) ditambahkan ke URL (dengan isi dari dropdown list)

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015