Vote AJAX avec PHP

Vote AJAX

Dans cet exemple AJAX, nous allons démontrer un programme de vote où le site web peut obtenir des résultats sans recharger la page.

Jusqu'à présent, aimez-vous PHP et AJAX ?

Oui:
Non:

Ce cas inclut quatre éléments :

  • Formulaire HTML
  • JavaScript
  • Page PHP
  • Fichier texte pour stocker les résultats

Formulaire HTML

Ceci est une page HTML. Elle contient un simple formulaire HTML et une connexion à un fichier JavaScript :

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Vous aimez PHP et AJAX jusqu'à présent ?</h2>
<form>
Oui: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
Non: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

Exemple d'explication - Formulaire HTML

Comme vous pouvez le voir, la page HTML supérieure contient un simple formulaire HTML, avec des éléments <div> comportant deux boutons radio.

Voici comment fonctionne le formulaire :

  • Lorsque l'utilisateur choisit "oui" ou "non", un événement est déclenché
  • Lorsque l'événement est déclenché, la fonction getVote() est exécutée
  • Entourant ce formulaire se trouve un <div> nommé "poll" Lorsque les données sont retournées par la fonction getVote(), les données retournées remplacent ce formulaire.

Fichier texte

Le fichier texte (poll_result.txt) stocke les données provenant du programme de vote.

Il ressemble à cela :

0||0

Le premier chiffre représente le vote "Oui", le deuxième chiffre représente le vote "Non".

Remarque :N'oubliez pas d'autoriser uniquement votre serveur web à éditer ce fichier texte. Ne permettez pas à d'autres personnes d'obtenir l'accès, sauf au serveur web (PHP).

JavaScript

Le code JavaScript est stocké dans "poll.js" et est lié au document HTML :

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Le navigateur ne prend pas en charge les requêtes HTTP")
 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
}

Explication de l'exemple :

Les fonctions stateChanged() et GetXmlHttpObject sont similaires à Requêtes AJAX avec PHP Les exemples dans cette section sont identiques.

Fonction getVote()

Cette fonction est exécutée lorsque l'utilisateur choisit "oui" ou "non" dans le formulaire HTML.

  1. Définir l'URL à envoyer au serveur (nom de fichier)
  2. Ajouter des paramètres à l'URL (vote) contenant le contenu du champ d'entrée
  3. Ajouter un nombre aléatoire pour empêcher le serveur d'utiliser un fichier en cache
  4. Appeler la fonction GetXmlHttpObject pour créer un objet XMLHTTP et indiquer à l'objet d'exécuter la fonction stateChanged lors d'un changement
  5. Ouvrir un objet XMLHTTP avec l'URL donné
  6. Envoyer une requête HTTP au serveur

Page PHP

La page serveur appelée par le code JavaScript est un fichier PHP simple nommé "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;
 }
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Résultat:</h2>
<table>
<tr>
<td>Oui:</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>

Explication de l'exemple :

La valeur sélectionnée est transmise par JavaScript, puis ce qui suit se produira :

  1. Obtenir le contenu du fichier "poll_result.txt"
  2. Mettre le contenu du fichier dans une variable et ajouter 1 au variable sélectionné
  3. Écrire les résultats dans le fichier "poll_result.txt"
  4. Afficher les résultats des votes sous forme graphique