Creazione di un sondaggio dinamico con jQuery e PHP

Quando unisci alcune funzionalità nette, fornite da PHP con l'intelligenza di jQuery, puoi ottenere risultati davvero interessanti. In questo tutorial creeremo un sondaggio usando PHP e XHTML, quindi useremo alcuni effetti Ajax di jQuery per eliminare la necessità di un aggiornamento della pagina e per dargli un bel po 'di animazione.

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

HTML

Prendiamo il nostro impostare:

• style.css manterrà il codice CSS.
• jquery.js è la libreria jQuery di base.
• jquery.cookie.js è un plugin di Klaus Hartl per aggiungere la manipolazione dei cookie a jQuery.
• poll.js avrà il Javascript che rende dinamico il sondaggio.

Successivamente, creeremo un semplice modulo di sondaggio:

 
Sondaggio
 
 
Scegli il tuo framework Javascript preferito:
 
 jQuery
  Ext JS
  dojo
  Prototipo
  YUI
  MooTools

 
 
 

Questo modulo verrà elaborato dal PHP per ora, e quando avremo il Javascript in esecuzione, da jQuery. PHP e Javascript sono progettati per estrarre l'ID opzione dal tag value. è solo uno spazio con codifica di entità HTML, e → è una freccia: →.

PHP

introduzione

Se Javascript è disabilitato, il PHP:

1. Prendi richieste GET / POST dal modulo
2. Imposta / controlla un cookie
3. Assicurati che la richiesta provenga da un IP univoco
4. Memorizza il voto in un file DB flat
5. Restituisci i risultati inclusi con un file HTML

Se Javascript è abilitato, il PHP:

1. Prendi richieste GET / POST dal Javascript
2. Assicurati che la richiesta provenga da un IP univoco
3. Memorizza il voto in un file DB flat
4. Restituisci i risultati come JSON

Per il file flat DB utilizzeremo un pacchetto scritto da Luke Plant.

Innanzitutto, abbiamo bisogno di un array con i nomi e gli ID delle opzioni di sondaggio:

 
Il pacchetto flatfile utilizza numeri per gli identificatori di colonna, quindi consente di impostare alcune costanti per convertirle in nomi:
 
define ('OPT_ID', 0); define ('OPT_TITLE', 1); define ('OPT_VOTES', 2);
 
Quando il modulo viene inviato, PHP deve sapere quale file inserire e restituire i risultati, quindi impostiamo un'altra costante:
 
define ('HTML_FILE', 'index.html');
 
Dobbiamo includere flatfile.php e inizializzare un oggetto di database:
 
require_once ( 'flatfile.php'); $ db = new Flatfile ();
 
I file flat sono solo file di testo memorizzati nella directory dei dati:
 
$ db-> datadir = 'data /'; define ('VOTE_DB', 'votes.txt'); define ('IP_DB', 'ips.txt');
 
Se otteniamo una richiesta con il parametro del sondaggio, è la forma statica, quindi la elaboriamo. Se la richiesta ha un parametro di voto, è una richiesta Ajax. Altrimenti, restituiamo semplicemente il HTML_FILE.
 
if ($ _GET ['poll'] || $ _POST ['poll']) poll_submit ();  else if ($ _GET ['vote'] || $ _POST ['vote']) poll_ajax ();  else poll_default (); 
 
poll_default ()
 
function poll_default () global $ db; $ ip_result = $ db-> selectUnique (IP_DB, 0, $ _SERVER ['REMOTE_ADDR']); if (! isset ($ _ COOKIE ['vote_id']) && empty ($ ip_result)) stampa file_get_contents (HTML_FILE);  else poll_return_results ($ _ COOKIE ['vote_id']); 
 
poll_default () elabora le richieste direttamente allo script senza richieste GET / POST valide.
 
Il globale linea rende il $ db oggetto disponibile nell'ambito della funzione.
 
Lo script tiene traccia degli IP univoci per assicurarsi di poter votare solo una volta, quindi eseguiamo una query per verificare se si trova nel DB:
 
$ ip_result = $ db-> selectUnique (IP_DB, 0, $ _SERVER ['REMOTE_ADDR']);
 
Se non abbiamo un cookie e la query IP risulta vuota, il client non ha ancora votato, quindi possiamo semplicemente inviare il file HTML che contiene il modulo. Altrimenti, inviamo semplicemente i risultati:
 
if (! isset ($ _ COOKIE ['vote_id']) && empty ($ ip_result)) stampa file_get_contents (HTML_FILE);  else poll_return_results ($ _ COOKIE ['vote_id']); 
 
poll_submit ()
 
function poll_submit () global $ db; opzioni globali $; $ 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), nuovo 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] = $ opzioni [$ id] ; $ new_row [OPT_VOTES] = 1; $ db-> insert (VOTE_DB, $ new_row); poll_return_results ($ id); else poll_return_results ($ id);
 
poll_submit () prende la forma di sottomissione, controlla se il cliente ha già votato, e quindi aggiorna il DB con il voto.
 
Queste linee ottengono l'ID dell'opzione selezionata e impostate $ id ad esso:
 
$ id = $ _GET ['poll'] || $ _POST [ 'poll']; $ id = str_replace ("opt", ", $ id);
 
Dobbiamo verificare se l'opzione è ancora nel DB:
 
$ row = $ db-> selectUnique (VOTE_DB, OPT_ID, $ id);
 
Se è nel DB (risultato non vuoto), dobbiamo eseguire un updateSetWhere (). Se non lo è, dobbiamo fare un inserire():
 
if (! empty ($ row)) $ new_votes = $ row [OPT_VOTES] +1; $ db-> updateSetWhere (VOTE_DB, array (OPT_VOTES => $ new_votes), nuovo SimpleWhereClause (OPT_ID, '=', $ id)); poll_return_results ($ id);  else if ($ options [$ id]) $ new_row [OPT_ID] = $ id; $ new_row [OPT_TITLE] = $ opzioni [$ id]; $ new_row [OPT_VOTES] = 1; $ db-> insert (VOTE_DB, $ new_row); poll_return_results ($ id); 
 
In ogni caso, dobbiamo inserire l'IP nel DB e impostare un cookie (scade tra un anno):
 
$ ip [0] = $ _SERVER ['REMOTE_ADDR']; $ db-> insert (IP_DB, $ ip); setcookie ("vote_id", $ id, time () + 31556926);
 
poll_return_results ()
 
function poll_return_results ($ id = NULL) global $ db; $ html = file_get_contents (HTML_FILE); $ results_html = "
Risultati del sondaggio
\ n
\ n "; $ rows = $ db-> selectWhere (VOTE_DB, nuovo SimpleWhereClause (OPT_ID,"! = ", 0), -1, nuovo OrderBy (OPT_VOTES, DECENDING, INTEGER_COMPARISON)); foreach ($ rows as $ row) $ total_votes = $ row [OPT_VOTES] + $ total_votes; foreach ($ rows as $ row) $ percent = round (($ row [OPT_VOTES] / $ total_votes) * 100); if (! $ row [OPT_ID] == $ id) $ results_html. = "
". $ row [OPT_TITLE]."
 
$% Per cento\ n "; else $ results_html. ="
". $ row [OPT_TITLE]."
 
$% Per cento\ n "; $ results_html. ="
Voti totali: ". $ Total_votes".