Een dynamische peiling maken met jQuery en PHP

Wanneer je een aantal handige functies combineert met PHP met de slimheid van jQuery, kun je een aantal behoorlijk coole resultaten produceren. In deze tutorial maken we een peiling met PHP en XHTML, maken dan gebruik van sommige jQuery Ajax-effecten om de noodzaak voor een paginavernieuwing te elimineren, en om het een leuk beetje animatie te geven.

1. HTML
2. PHP
   1. Invoering
   2. poll_default ()
   3. poll_submit ()
   4. poll_return_results ()
   5. poll_ajax ()
3. CSS
4. Javascript
   1. Invoering
   2. formProcess ()
   3. loadResults ()
   4. animateResults ()

HTML

Laten we onze halen opgericht:

• style.css houdt de CSS-markup vast.
• jquery.js is de base jQuery-bibliotheek.
• jquery.cookie.js is een plug-in van Klaus Hartl om cookiemanipulatie toe te voegen aan jQuery.
• poll.js zal het Javascript hebben dat de poll dynamisch maakt.

Vervolgens maken we een eenvoudig pollformulier:

 
poll
 
 
Kies uw favoriete Javascript-framework:
 
 jQuery
  Ext JS
  dojo
  Prototype
  YUI
  mootools

 
 
 

Dit formulier wordt nu door de PHP verwerkt en wanneer JavaScript wordt uitgevoerd, door jQuery. De PHP en Javascript zijn ontworpen om de optie-ID uit het waardetag te trekken. is gewoon een gecodeerde HTML-entiteit, en → is een pijl: →.

PHP

Invoering

Als Javascript is uitgeschakeld, zal de PHP:

1. Neem GET / POST-verzoeken van het formulier
2. Een cookie instellen / controleren
3. Zorg ervoor dat het verzoek afkomstig is van een uniek IP-adres
4. Sla de stemming op in een platte DB
5. Lever de resultaten in een HTML-bestand in

Als Javascript is ingeschakeld, zal de PHP:

1. Neem GET / POST-verzoeken van het Javascript
2. Zorg ervoor dat het verzoek afkomstig is van een uniek IP-adres
3. Sla de stemming op in een platte DB
4. Retourneer de resultaten als JSON

Voor de platte file DB gebruiken we een pakket geschreven door Luke Plant.

Ten eerste hebben we een array nodig met de namen en ID's van de poll-opties:

 
Het flatfile-pakket gebruikt nummers voor de kolom-ID's, dus laten we enkele constanten instellen om die naar namen te converteren:
 
define ('OPT_ID', 0); define ('OPT_TITLE', 1); define ('OPT_VOTES', 2);
 
Wanneer het formulier wordt ingediend, moet PHP weten in welk bestand de resultaten moeten worden ingevoegd en moeten worden geretourneerd, dus we stellen een andere constante in:
 
define ('HTML_FILE', 'index.html');
 
We moeten opnemen flatfile.php en initialiseer een databaseobject:
 
require_once (flatfile.php); $ db = nieuw Flatbestand ();
 
De platte bestanden zijn alleen tekstbestanden die zijn opgeslagen in de gegevensdirectory:
 
$ db-> datadir = 'data /'; define ('VOTE_DB', 'votes.txt'); define ('IP_DB', 'ips.txt');
 
Als we een verzoek krijgen met de poll-parameter, is dit de statische vorm, dus verwerken we deze. Als het verzoek een stemparameter bevat, is dit een verzoek van Ajax. Anders geven we alleen het HTML_FILE.
 
if ($ _GET ['poll'] || $ _POST ['poll']) poll_submit ();  else if ($ _GET ['vote'] || $ _POST ['vote']) poll_ajax ();  else poll_default (); 
 
poll_default ()
 
functie poll_default () global $ db; $ ip_result = $ db-> selectUnique (IP_DB, 0, $ _SERVER ['REMOTE_ADDR']); if (! isset ($ _ COOKIE ['vote_id']) && empty ($ ip_result)) print file_get_contents (HTML_FILE);  else poll_return_results ($ _ COOKIE ['vote_id']); 
 
poll_default () verwerkt aanvragen rechtstreeks in het script zonder geldige GET / POST-aanvragen.
 
De globaal lijn maakt het $ db object beschikbaar in het bereik van de functie.
 
Het script traceert unieke IP's om ervoor te zorgen dat u maar één keer kunt stemmen, dus we doen een vraag om te controleren of het in de database zit:
 
$ ip_result = $ db-> selectUnique (IP_DB, 0, $ _SERVER ['REMOTE_ADDR']);
 
Als we geen cookie hebben en de IP-vraag leeg verschijnt, heeft de klant nog niet gestemd, dus we kunnen gewoon het HTML-bestand verzenden dat het formulier bevat. Anders sturen we alleen de resultaten:
 
if (! isset ($ _ COOKIE ['vote_id']) && empty ($ ip_result)) print file_get_contents (HTML_FILE);  else poll_return_results ($ _ COOKIE ['vote_id']); 
 
poll_submit ()
 
function poll_submit () global $ db; globale $ opties; $ id = $ _GET ['poll'] || $ _POST [ 'poll']; $ id = str_replace ("opt", ", $ id); $ ip_result = $ db-> selectUnique (IP_DB, 0, $ _SERVER ['REMOTE_ADDR']); if (! isset ($ _ COOKIE ['vote_id']) && empty ($ ip_result)) $ row = $ db-> selectUnique (VOTE_DB, OPT_ID, $ id); if (! empty ($ row)) $ ip [0] = $ _SERVER ['REMOTE_ADDR']; $ db-> insert (IP_DB, $ ip); setcookie ("vote_id", $ id, time () + 31556926); $ new_votes = $ row [OPT_VOTES] +1; $ db-> updateSetWhere (VOTE_DB, array (OPT_VOTES = > $ new_votes), nieuwe SimpleWhereClause (OPT_ID, '=', $ id)); poll_return_results ($ id); else if ($ options [$ id]) $ ip [0] = $ _SERVER ['REMOTE_ADDR'] ; $ db-> insert (IP_DB, $ ip); setcookie ("vote_id", $ id, time () + 31556926); $ new_row [OPT_ID] = $ id; $ new_row [OPT_TITLE] = $ opties [$ id] ; $ new_row [OPT_VOTES] = 1; $ db-> insert (VOTE_DB, $ new_row); poll_return_results ($ id); else poll_return_results ($ id);
 
poll_submit () neemt de formulierinzending aan, controleert of de klant al heeft gestemd en werkt de database vervolgens bij met de stemming.
 
Deze regels krijgen de ID van de geselecteerde optie en worden ingesteld $ id ernaar toe:
 
$ id = $ _GET ['poll'] || $ _POST [ 'poll']; $ id = str_replace ("opt", ", $ id);
 
We moeten controleren of de optie al in de DB zit:
 
$ row = $ db-> selectUnique (VOTE_DB, OPT_ID, $ id);
 
Als dit in de DB staat (resultaat niet leeg), moeten we een updateSetWhere (). Als dat niet het geval is, moeten we een voegen ():
 
if (! empty ($ row)) $ new_votes = $ row [OPT_VOTES] +1; $ db-> updateSetWhere (VOTE_DB, array (OPT_VOTES => $ new_votes), nieuwe SimpleWhereClause (OPT_ID, '=', $ id)); poll_return_results ($ id);  else if ($ options [$ id]) $ new_row [OPT_ID] = $ id; $ new_row [OPT_TITLE] = $ opties [$ id]; $ new_row [OPT_VOTES] = 1; $ db-> insert (VOTE_DB, $ new_row); poll_return_results ($ id); 
 
Hoe dan ook, we moeten het IP in de database plaatsen en een cookie instellen (verloopt over één jaar):
 
$ ip [0] = $ _SERVER ['REMOTE_ADDR']; $ db-> insert (IP_DB, $ ip); setcookie ("vote_id", $ id, time () + 31556926);
 
poll_return_results ()
 
functie poll_return_results ($ id = NULL) global $ db; $ html = file_get_contents (HTML_FILE); $ results_html = "
Resultaten enquêteren
\ n
\ n "; $ rijen = $ db-> selectWaar (VOTE_DB, nieuwe SimpleWhereClause (OPT_ID,"! = ", 0), -1, nieuwe OrderBy (OPT_VOTES, DESCENDING, INTEGER_COMPARISON)) foreach ($ rijen als $ rij) $ total_votes = $ rij [OPT_VOTES] + $ total_votes; foreach ($ rijen als $ rij) $ percent = round (($ rij [OPT_VOTES] / $ total_votes) * 100); if (! $ rij [OPT_ID] == $ id) $ results_html. = "
". $ rij [OPT_TITLE]."
 
$ Procent%\ n "; else $ results_html. ="
". $ rij [OPT_TITLE]."
 
$ Procent%\ n "; $ results_html. ="
Totaal aantal stemmen: ". $ Total_votes."