Halo pengunjung blog yang budiman. Post saya berikut ini akan
membahas bagaimana cara memanggil data dari file php lain dengan metode
ajax.
Bahan-bahan yang diperlukan :
·
Xampp
·
Dreamweaver atau aplikasi sejenis
·
Browser bisa menggunakan mozilla, chrome, atau
yang lainnya.
Jika belum punya, silahkan search di google, download dan
install dulu :p .
·
Nah, jika sudah kita menuju ke langkah
selanjutnya. Langkah-langkahnya sebagai berikut :
·
Pertama, buka xampp yang telah di install.
Kemudian klik start pada module Apache dan MySQL.
·
Berikutnya buka dreamweaver anda. Create new dan
pilih html, maka akan terbukan lembar kerja html baru.
·
Setelah itu, kita buat coding untuk membuat
tampilan pada web browser . berikut ini ini adalah contoh codingnya :
<html>
<head>
<title>COBA
AJAX</title>
</head>
<body >
MENCOBA AJAX
<br>
<input type="button"
value="coba ajax" onClick="getbajax1()">
<br>
<div
id="aku"></div>
</body>
</html>
<script>
function getajax1()
{
var
xmlhttp;
if
(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera,
Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
if
(!xmlhttp)
{
alert("object
xlmhttp gagal dibuat");
}
else
{
xmlhttp.open("GET","
ajax1.php?data=a",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&
xmlhttp.status==200)
{
document.getElementById("aku").innerHTML=xmlhttp.responseText;
}
if (xmlhttp.readyState!=4)
{
document.getElementById("aku").innerHTML='wait.......';
}
}
}
}
</script>
Save dengan nama ajax.php
·
Selanjutnya, buat lembar kerja baru. Nah di
lembar kerja baru ini kita tuliskan coding untuk data yang akan dipanggil dan
ditampilkan nanti di web browser. Berikut ini adalah contoh codingnya :
<?php
if (isset($_GET['profil'])
&& $_GET['profil']='a')
echo
"Nama : Adhi Huda P" . "<br>". "Nim : 13010003"
. "<br>" . "Semester : 3";
else
echo " ";
?>
Save dengan nama ajax1.php
·
Setelah itu kita cek coding yang kita buat pada
web browser (bisa menggunakan Mozilla, chrome, atau web browser lainnya).
·
Buka web browser kalian dan pada kolom url
ketikan “localhost/nama_folder/ajax.php” tanpa tanda petik (“ “).
·
Lalu klik pada button profil. Taaa da, pada
kolom di sebelah kanan akan muncul profil kita :D
Selain memanggil data dari file php lain, kita juga bias
memamnggil data dari sebuah database. Berikut ini adalah langkah-langkahnya.
·
Pertama buat databasenya dulu. Disini saya
menggunakan data dari table mahasiswa yang berada pada database bimbingan.
Jangan lupa isikan kedalam tabel
beberapa data.
·
Lalu pada dreamweaver kita buat coding untuk
tampilan di web browsernya.
<html>
<head>
<title>COBA AJAX</title>
</head>
<body >
MENCOBA AJAX
<br>
<input type="button"
value="coba ajax" onClick="getbelajar_ajax1()">
<br>
<div id="aku"></div>
</body>
</html>
<script>
function getbelajar_ajax1()
{
var
xmlhttp;
if
(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera,
Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
if
(!xmlhttp)
{
alert("object
xlmhttp gagal dibuat");
}
else
{
xmlhttp.open("GET","belajar_ajax1.php?data=a",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&
xmlhttp.status==200)
{
document.getElementById("aku").innerHTML=xmlhttp.responseText;
}
if (xmlhttp.readyState!=4)
{
document.getElementById("aku").innerHTML='wait.......';
}
}
}
}
</script>
Save dengan nama belajar_ajax.php
·
Kemudian buat lembar baru untuk coding yang
digunakan memanggil data dari database yang nanti akan dipanggil di
belajar_ajax.php dan akan ditampilkan di web browser. Berikut ini codingnya :
<?php
if (isset($_GET['data']) &&
$_GET['data']='a')
echo "Data diterima";
else
echo "Data diterima tanpa isi";
//untuk mengambil data dari database
$host="localhost";
$user="root";
$pass="";
$db="bimbingan";
mysql_connect($host,$user,$pass);
mysql_select_db($db);
$query=mysql_query("select * from
mahasiswa");
echo "<table border=1>
<tr><td>nim</td><td>nama</td></tr>";
while($data=mysql_fetch_array($query))
{
echo
"<tr><td>$data[nim]</td><td>$data[nama]</td></tr>";
}
echo "</table>";
?>
Save dengan nama
belajae_ajax1.php
·
Berikutnya buka web browser, dan pada kolom url
ketikan “localhost/nama_folder/belajar_ajax.php” tanpa tanda petik (“ “).
·
Lalu klik pada button coba ajax. Maka data yang
berada pada table mahasiswa di db bimbingan akan ditampilkan di web browser
anda.
Sekian dulu tutorial dari saya, mohon maaf jika ada
kata-kata yang salah dan tidak berkenan bagi, semoga tulisan ini bermanfaat
bagi pembaca sekalian dan terima kasih telah mengunjungi blog ini.
