Pemungutan Suara AJAX dan PHP

Pemungutan suara AJAX

Dalam contoh AJAX ini, kami akan menunjukkan program pemungutan suara yang dapat memperoleh hasil tanpa mengeload ulang halaman web.

Sampai saat ini, apakah Anda menyukai PHP dan AJAX?

Ya:
Tidak:

Contoh ini termasuk empat elemen:

  • Formulir HTML
  • JavaScript
  • Halaman PHP
  • Berkas teks tempat penempatan hasil

Formulir HTML

Ini adalah halaman HTML. Ini mengandung formulir HTML sederhana serta koneksi ke berkas JavaScript:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Apakah anda menyukai PHP dan AJAX sejauh ini?</h2>
<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>
</body>
</html>

Pengertian - Formulir HTML

Seperti yang anda lihat, halaman HTML atas mengandung formulir HTML sederhana yang memiliki elemen <div> dengan tombol pilihan dua.

Kerja formulir seperti ini:

  • Sebuah peristiwa akan di trigger saat pengguna memilih "ya" atau "tidak"
  • Fungsi getVote() akan dieksekusi saat peristiwa di trigger
  • Isi formulir yang di lingkungi adalah <div> dengan nama "poll" saat data dari fungsi getVote() kembali, data yang kembali akan menggantikan formulir ini.

Berkas teks

Berkas teks (poll_result.txt) menyimpan data dari program pemungutan suara.

Hal ini mirip seperti ini:

0||0

Angka pertama menunjukkan pemungutan suara "Ya", angka kedua menunjukkan pemungutan suara "Tidak".

Keterangan:ingatkan hanya web server anda yang diizinkan untuk mengedit berkas teks ini. Jangan berikan akses ke orang lain kecuali web server (PHP).

JavaScript

JavaScript 代码存储在 "poll.js" 中，并于 HTML 文档相连接：

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged()} 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

Contoh penjelasan:

Fungsi stateChanged() dan GetXmlHttpObject sama dengan Permintaan AJAX dan PHP Contoh di bagian ini sama.

Fungsi getVote()

Fungsi ini akan dijalankan saat pengguna memilih "yes" atau "no" di formulir HTML

  1. Definisi URL yang dikirim ke server (nama berkas)
  2. Tambahkan parameter (vote) ke URL, parameter ini berisi konten input field
  3. Tambahkan angka acak untuk mencegah server menggunakan berkas yang dipecahkan
  4. Panggil fungsi GetXmlHttpObject untuk membuat objek XMLHTTP dan beritahu objek ini untuk melaksanakan fungsi stateChanged saat terjadi perubahan
  5. Membuka objek XMLHTTP menggunakan URL yang diberikan
  6. Mengirim permintaan HTTP ke server

Halaman PHP

Halaman server yang dipanggil oleh kode JavaScript adalah berkas PHP sederhana dengan nama "poll_vote.php".

<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
 {
 $yes = $yes + 1;
 }
if ($vote == 1)
 {
 $no = $no + 1;
 }
//masukkan suara ke berkas txt
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Hasil:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

Contoh penjelasan:

Nilai yang dipilih datang dari JavaScript, kemudian terjadi:

  1. Ambil konten berkas "poll_result.txt"
  2. Masukkan konten berkas ke variabel, dan tambahkan 1 ke variabel yang dipilih
  3. Tulis hasil ke berkas "poll_result.txt"
  4. Output hasil voting yang digambar