Photobucket
Home » , » BELAJAR AJAX, MEMBUAT POLLING DENGAN AJAX

BELAJAR AJAX, MEMBUAT POLLING DENGAN AJAX

Written By celoteh alvin on Sabtu, 14 Mei 2011 | 8:28 PM

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


Share this article :

Posting Komentar

 
Copyright © 2011-2012. alvin perez - All Rights Reserved [ Mobile Version | Web Version]
Template : Creating Website | Mas Template | Johny Template
Proudly powered by Blogger