hari ini untuk memenuhi Tugas UTS mata
kuliah Pemrograman Web II, saya akan membagikan informasi tentang contoh Asynchronous Javascript and XML atau biasa disebut dengan AJAX dengan menggunakan Dreamweaver.
ini seperti tabel yang di hidden (sembunyikan) lalu jika di klik maka akan muncul tabel, dan ketika di refresh maka tabel tersebut akan hilang lagi atau tidak muncul lagi.
Peralatan yang harus di siapkan adalah
Komputer atau laptop, aplikasi dreamweaver, xampp dan web browser (misal :
Mozilla Firefox).
Langkah-langkahnya :
1. Hidupkan komputer atau laptop
anda
2. Buka aplikasi xampp lalu
aktifkan server apache dan mysql. Seperti gambar dibawah
3. Lalu buka aplikasi dreamweaver.
4. Lalu buat file baru, dan ketikkan coding seperti dibawah ini, dan simpan dengan nama aq.css
.body {
background-color:#0033FF;
}
.header {
background-color:#6699FF;
height:80px;
width:1000px;
color:#FFFF00;
}
.headerbawah {
background-color:#666666;
height:7px;
width:1000px;
}
.menukiri {
background-color:#CC6699;
float:left;
height:400px;
min-width:200px;
}
.tekskanan {
background-color:#3333FF;
width:1000px;
height:400px;
}
.footer {
background-color:#6699FF;
width:1000px;
height:40px;
}
//akhir coding
//akhir coding
5. Lalu buat file baru, dan
ketikkan coding seperti dibawah ini dan simpan dengan nama index.php
<html>
<title>UTS</title>
<link
href="aq.css" rel="stylesheet" type="text/css"
/>
<head>
</head>
<body>
<div
class="header"><center>SELAMAT DATANG</center>
</div>
<div class="headerbawah"></div>
<div
class="menukiri">
<br>
<center>
<b><u>MENU</u></b>
<br>
<br>
<br>
<br>
</center>
</div>
<div
class="tekskanan">
<div
id="teks"></div>
</div>
<div
class="headerbawah"></div>
<div
class="footer"></div>
</body>
</html>
//akhir coding
//akhir coding
6. Lalu buat file baru, dan
ketikkan coding seperti dibawah ini dan simpan dengan nama kontak.php
Kontak Saya
<br />
<table width="270" border="1" bgcolor="#009999">
<tr>
<td>Nama</td>
<td>:</td>
<td >Mochammad Habib Aminudin</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td >Jombang</td>
</tr>
<tr>
<td>No.HP</td>
<td>:</td>
<td >085232851934</td>
</tr>
</table>
<br />
<table width="270" border="1" bgcolor="#009999">
<tr>
<td>Nama</td>
<td>:</td>
<td >Mochammad Habib Aminudin</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td >Jombang</td>
</tr>
<tr>
<td>No.HP</td>
<td>:</td>
<td >085232851934</td>
</tr>
</table>
//akhir coding
coding di atas berisi tabel kontak yang nantinya di panggil pada script ajax yang ditambahkan pada file index.php
7. Lalu tambahkan coding ajax pada file index.php, letakkan pada antara <head></head>
coding di atas berisi tabel kontak yang nantinya di panggil pada script ajax yang ditambahkan pada file index.php
7. Lalu tambahkan coding ajax pada file index.php, letakkan pada antara <head></head>
<script>
function kontak() //function disimpan dengan nama kontak
{
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","kontak.php",true); //memanggil file kontak.php
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("teks").innerHTML=xmlhttp.responseText;
}
}
}
}
</script>
//akhir coding
function kontak() //function disimpan dengan nama kontak
{
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","kontak.php",true); //memanggil file kontak.php
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("teks").innerHTML=xmlhttp.responseText;
}
}
}
}
</script>
//akhir coding
8. Lalu tambahkan coding <input name="kontak" type="button" value="KONTAK" onClick="kontak()"> pada file index.php fungsinya untuk memanggil script atau ajax yang telah dibuat sebelumnya. coding tersebut diletakkan dibawah <div
class="menukiri"> , ket : ini berfungsi sebagai tombol yang apabila di klik maka otomatis memanggil fungsi kontak yang telah dibuat sebelumnya, yang didalam fungsi kontak tersebut memanggil file kontak.php
9. Lalu buka aplikasi web browser (Mozilla Firefox) lalu ketikkan localhost/quiz pada bagian address di mozilla firefox. seperti contoh gambar :
11. Selesai Dah :D
nb : simpan semua file index.php, kontak.php dan aq.css pada /xampp/htdocs/ dan buat folder baru dengan nama quiz
