BELAJAR AJAX, MEMBUAT POLLING DENGAN AJAX

Kita akan membuat form polling, ketika pilihan di klik maka otomatis akan menampilkan hasil polling.



HASIL :

Tampilan Form Polling

Tampilan Hasil Polling

LOGIKA PEMBUATAN

1. Membuat tampilan form polling (html)


2. Membuat tampilan hasil polling (php)


3. Membuat file text untuk menyimpan hasil polling (txt)

KETENTUAN

-          Buat folder latihan di c:xampp/htdocs/

-          Simpan hasil coding kita di folder tersebut

-          Jangan lupa jalankan xampp

-          Gambar hasil polling bisa diambil dari gambar ini

 <-- gambar yang digunakan untuk hasil polling

-          Simpan atau taruh gambar tersebut di c:xampp/htdocs/latihan

PRAKTEK

1. Membuat tampilan form polling (html)

• Buka notepad


• Ketik

<html>

<head>

<script type="text/javascript">

function getVote(int)

{

if (window.XMLHttpRequest)

{// kode untuk IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// kode untuk IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("poll").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","hasil_vote.php?vote="+int,true);

xmlhttp.send();

}

</script>

</head>

<body>



<br>

<div id="poll">

<font color="Blue"><b>Apakah alvinperez.com<br>cukup memberi tambahan ilmu?</b>

<form>

Ya:

<input type="radio" name="vote" value="0" onclick="getVote(this.value)" />

<br />Tidak:

<input type="radio" name="vote" value="1" onclick="getVote(this.value)" />

</form>

</div></font>



</body>

</html>

• Simpan dengan nama ajax_poll.html di c:xampp/htdocs/latihan

2. Membuat tampilan hasil polling (php)

• Buka notepad


• Ketik :

<?php

$vote = $_REQUEST['vote'];



//mengambil nilai dari textfile

$filename = "vote_simpan.txt";

$content = file($filename);



//memasukkan nilai tersebut ke array

$array = explode("||", $content[0]);

$ya = $array[0];

$tidak = $array[1];



if ($vote == 0)

{

$ya = $ya + 1;

}

if ($vote == 1)

{

$tidak = $tidak + 1;

}



//menyimpan hasil vote ke txt file

$insertvote = $ya."||".$tidak;

$fp = fopen($filename,"w");

fputs($fp,$insertvote);

fclose($fp);

?>



<h3>HASIL POLLING:</h3>

<table>

<tr>

<td>YA:</td>

<td>

<img src="gambar_polling.gif"

width='<?php echo(100*round($ya/($tidak+$ya),2)); ?>'

height='20'>

<?php echo(100*round($ya/($tidak+$ya),2)); ?>%

</td>

</tr>

<tr>

<td>TIDAK:</td>

<td>

<img src="gambar_polling.gif"

width='<?php echo(100*round($tidak/($tidak+$ya),2)); ?>'

height='20'>

<?php echo(100*round($tidak/($tidak+$ya),2)); ?>%

</td>

</tr>

</table>

• Simpan dengan nama hasil_vote.php di c:xampp/htdocs/latihan

3.  Membuat file text untuk menyimpan hasil polling (txt)

• Buka notepad


• Ketik

0||0

• Simpan dengan nama vote_simpan dengan ekstensi txt (default,  di c:xampp/htdocs/latihan

SELESAIIII…

Silakan liat hasilnya dengan cara buka browser ketikkan pada addres bar : localhost/latihan/ajax_poll.html



Selamat mencoba, salam cah sinus solo.. :p

BELAJAR SENDIRI AJAX, APA ITU AJAX?

Ajax = Asynchronous JavaScript and XML

Ajax adalah cara atau tehnik pembuatan web dinamis yang cepat. Kenapa dikatakan cepat, karena AJAX ini dalam mengupdate data tidak memerlukan reload satu halaman web penuh melainkan hanya pada bagian yang di update saja.

Sebagai contoh yang sering bisa kita temui adalah posting comment pada facebook. Kalau kita perhatikan ketika kita memposting komentar di facebook, maka facebook tidak me-reload satu halaman penuh facebook, tapi hanya bagian komen itu saja.

Atau contoh lainnya ketika kita akan menge-tag/menandai seseorang dalam foto kita, maka nama-nama teman otomatis akan keluar sendiri. Itu juga menggunakan tehnik ajax.



Mari kita praktek… :D

Kali ini kita akan membuat sebuah form input nama kota menggunakan tehnik ajax sehingga form lebih komunikatif.

HASIL AKHIR

Tampilan Form Default :

Tampilan Form ketika kita input data :

Keterangan : saran nama kota Bogor, Bandung di atas akan muncul sendiri ketika kita mengetik huruf b di form input yang ada.  Lantas dari mana saran nama kota Bandung, Bogor itu berasal / diambil? Nama tersebut diambil dari “sumbernamakota.php” yang telah kita buat.

LOGIKA PEMBUATANNYA

1. Membuat form input kota


2. Membuat file “sumbernamakota.php”

KETENTUAN

-          Buat folder dengan nama latihan di c:xampp/htdocs/

-          Simpan hasil coding kita di folder tersebut

-          Jangan lupa jalankan xampp



1. Membuat form input kota

-          Buka notepad

-          Ketik :

<html>

<head>

<script type="text/javascript">

function showHint(str)

{

if (str.length==0)

{

document.getElementById("txtHint").innerHTML="";

return;

}

if (window.XMLHttpRequest)

{// kode untuk IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// kode untuk 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","sumbernamakota.php?b="+str,true);

xmlhttp.send();

}

</script>

</head

<body>



<p><b>Ketikkan huruf depan nama kota kamu </b></p>

<form>

Kota : <input type="text" onkeyup="showHint(this.value)" size="20" />

</form>

<p><b>Saran : [ <font color="blue"> <span id="txtHint"></span></font> ]</b></p>

</body>

</html>

-          Simpan dengan nama ajax1.html di c:xampp/htdocs/latihan

-          hasilnya adalah seperti tampilan form default di atas

2. Membuat file “sumbernamakota.php”

-          Buka notepad

-          Ketik :

<?php

//daftar nama kota yg telah kita punya

$a[]="Aceh";

$a[]="Bandung";

$a[]="Cirebon";

$a[]="Depok";

$a[]="E (tidak ada saran)";

$a[]="F (tidak ada saran)";

$a[]="Gorontalo";

$a[]="H (tidak ada saran)";

$a[]="Irian";

$a[]="Jember";

$a[]="Kendal";

$a[]="Lunto";

$a[]="Ngawi";

$a[]="O (tidak ada saran)";

$a[]="Pati";

$a[]="Q (tidak ada saran)";

$a[]="Rembang";

$a[]="Semarang";

$a[]="Tegal";

$a[]="Ungaran";

$a[]="V (tidak ada saran)";

$a[]="W (tidak ada saran)";

$a[]="X (tidak ada saran)";

$a[]="Y (tidak ada saran)";

$a[]="Z (tidak ada saran)";

$a[]="Bogor";

$a[]="Cikampek";

$a[]="Jakarta";

$a[]="Kutai";

$a[]="Madiun";





$b=$_GET["b"];

if (strlen($b) > 0)

{

$hint="";

for($i=0; $i<count($a); $i++)

{

if (strtolower($b)==strtolower(substr($a[$i],0,strlen($b))))

{

if ($hint=="")

{

$hint=$a[$i];

}

else

{

$hint=$hint." , ".$a[$i];

}

}

}

}

if ($hint == "")

{

$respon="tidak ada saran";

}

else

{

$respon=$hint;

}

echo $respon;

?>

-          Simpan dengan nama sumbernamakota.php di c:xampp/htdocs/latihan



Selesaiiii…

Untuk melihat hasilnya silakan buka browser, ketikkan pada addres bar :

Localhost.latihan/ajax1.html

Selamat belajar..

Salam dari cah sinus solo.. :p