Crea un jQuery Plugin Poll avanzato

In questo tutorial stiamo andando a creare un plugin jQuery dall'inizio alla fine; questo plugin ci consentirà (o altri sviluppatori) di aggiungere facilmente un semplice widget di poll a una pagina web o un blog. Per widget sondaggio, intendo un'area in cui viene posta una domanda a cui i visitatori sono invitati a rispondere. Dopo aver risposto alla domanda, verranno visualizzati i risultati del sondaggio.


Prodotto finale

Il video sopra e sotto lo screenshot mostra a cosa stiamo lavorando:


Il plugin userà la qualità di jQuery per generare la struttura DOM del widget, oltre ad acquisire la risposta alla domanda e passarla al server per l'archiviazione. Useremo un po 'di PHP di base per aggiungere il voto più recente a un database MySQL e quindi restituire i nuovi risultati in un oggetto JSON. jQuery verrà quindi utilizzato per elaborare la risposta e visualizzare i risultati (come mostrato sopra) nel widget.

Sebbene l'installazione e la configurazione di un server web, PHP e MySQL vadano oltre lo scopo di questo tutorial, esamineremo tutti i passaggi necessari, inclusa la configurazione del database. Tutto sommato, lavoreremo con CSS, HTML, jQuery, PHP, MySQL e JSON nel corso di questo tutorial.


Prepara lavoro

Dovremmo creare la nostra area di sviluppo prima di tutto. Per eseguire questo esempio su un computer desktop (per sviluppo, test, ecc.) Sarà necessario eseguire i file di esempio da una directory dalla quale il nostro server web può fornire il contenuto. Io uso Apache e ho una configurazione di cartella sul mio disco C chiamato sito apache. Questa è la directory di content-serving per il mio localhost. All'interno di questa cartella (o della cartella equivalente sul tuo sistema) dovremmo creare una nuova cartella chiamata sondaggio. Questo è dove verranno memorizzati tutti i nostri file di esempio.

Per creare un plugin jQuery, avremo anche bisogno di una copia di jQuery stessa; l'ultima versione è 1.31.js e può essere trovata su http://jquery.com. Scaricalo al sondaggio directory che abbiamo appena creato. Finora la cartella dovrebbe apparire come questa in Explorer (o equivalente applicazione di esplorazione di file):


Successivamente possiamo impostare il database che verrà utilizzato per memorizzare i risultati del sondaggio; possiamo farlo abbastanza facilmente utilizzando la CLI (Command Line Interface) di MySQL abbastanza facilmente, sebbene sia possibile utilizzare anche GUI front-end del database. Apri la CLI MySQL e crea un nuovo database chiamato sondaggio usando il seguente comando:

 CREATE il sondaggio DATABASE;

Il CREA DATABASE comando fa esattamente quello che dice sul barattolo e crea un nuovo database con il nome specificato. Una volta che abbiamo un database, dovremo creare una nuova tabella in cui archiviare i risultati del sondaggio. Prima di poterlo fare, dobbiamo selezionare il nuovo database; il USO il comando lo farà:

 Sondaggio USE;

Per creare un nuovo tavolo usiamo il CREA TABELLA comando, specificando i nomi per le colonne all'interno della tabella:

 CREATE i risultati della TABELLA (scelte VARCHAR (20), voti INT);

Se stessimo distribuendo questo su un sito iniziamo con una tabella vuota, ma in modo che possiamo vedere alcuni risultati senza rispondere ripetutamente alla domanda, possiamo inserire alcuni dati fittizi nella tabella. Il modo più rapido e semplice per farlo per piccoli set di dati (solo 5 righe in questo esempio) è farlo manualmente, cosa che possiamo fare con la seguente serie di comandi:

 INSERISCI NEI VALORI dei risultati (?? choice0 ??, 100); INSERISCI NEI VALORI dei risultati (?? choice1 ??, 67); INSERISCI NEI VALORI dei risultati (?? choice2 ??, 11); INSERISCI NEI VALORI DEI RISULTATI (?? choice3 ??, 51); INSERISCI NEI VALORI dei risultati (?? choice4 ??, 38);

Il comando dovrebbe essere abbastanza diretto, ricorda di premere Invio dopo ogni riga. L'unico punto degno di nota è che la prima riga è choice0 invece di Choice1 che è fatto per rendere più facile il lavoro con l'oggetto JSON nel nostro script. A questo punto la tua CLI dovrebbe apparire come il seguente screenshot:


Abbiamo finito con la CLI ora, quindi possiamo uscire e passare al nostro prossimo compito ?? creando il plugin.


Costruire il plugin

Abbiamo un numero di compiti da completare con il codice del plugin; abbiamo bisogno di creare la struttura DOM per il widget, aggiungere un gestore che ascolti l'invio della selezione, passare i risultati al server ed elaborare la risposta, oltre a visualizzare i risultati una volta elaborati. Possiamo anche aggiungere dello zucchero sotto forma di messaggi di errore e risultati animati.

Prenderà sicuramente alcune righe di codice, ma ne varrà la pena, vedremo quanto è facile creare un plugin robusto, funzionale e avanzato che offra interattività e aggiunga valore al pagina. Facciamo un inizio; in un nuovo file nel tuo editor di testo aggiungi il seguente codice: