Share
În acest tutorial vom crea un plugin jQuery de la început până la sfârșit; acest plugin ne va permite (sau altor dezvoltatori) să adăugați cu ușurință un simplu widget de sondaj la o pagină web sau la un blog. Prin widget-ul de sondaj, vreau să spun o zonă în care se pune o întrebare pe care vizitatorii sunt încurajați să o răspundă. După ce au răspuns la întrebare, vor fi afișate rezultatele sondajului.
Videoclipul de mai sus și captura de ecran de mai jos arată ce vom lucra pentru:
Pluginul va folosi jQuery goodness pentru a genera structura DOM a widget-ului, precum și pentru a capta răspunsul la întrebare și a-l transmite serverului pentru stocare. Vom folosi un pic de bază PHP pentru a adăuga cel mai nou vot la o bază de date MySQL și apoi echo înapoi cu noi rezultate într-un obiect JSON. jQuery va fi apoi folosit pentru procesarea răspunsului și afișarea rezultatelor (după cum se arată mai sus) în widget.
Deși instalarea și configurarea unui server web, PHP și MySQL sunt dincolo de scopul acestui tutorial, vom examina toți pașii necesari, inclusiv crearea bazei de date. În general, vom lucra cu CSS, HTML, jQuery, PHP, MySQL și JSON pe parcursul acestui tutorial.
Ar trebui să ne înființăm în primul rând zona noastră de dezvoltare. Pentru a rula acest exemplu pe un computer desktop (pentru dezvoltare, testare etc.), trebuie să rulați fișierele de exemplu dintr-un director pe care serverul nostru de web îl poate difuza. Eu folosesc Apache și am instalat un folder pe unitatea mea C numită site-ul apache. Acesta este directorul de difuzare a conținutului pentru mine gazdă locală. În acest dosar (sau în folderul echivalent din sistemul dvs.) trebuie să creați un nou dosar numit sondaj. Aici se vor păstra toate fișierele noastre de exemplu.
Pentru a crea un plugin jQuery, vom avea, de asemenea, nevoie de o copie a jQuery în sine; ultima versiune este 1.31.js și poate fi găsită la http://jquery.com. Descărcați-l la sondaj directorul pe care l-am creat. Până în prezent, directorul ar trebui să arate așa în Explorer (sau în aplicația de explorare a fișierelor echivalente):
Apoi putem configura baza de date care va fi utilizată pentru stocarea rezultatelor sondajului; putem face acest lucru cu ușurință utilizând interfața de linie de comandă MySQL (CLI) cu ușurință, deși pot fi utilizate și interfețe GUI de bază de date. Deschideți CLI-ul MySQL și creați o nouă bază de date numită sondaj folosind următoarea comandă:
CREATE DATABASE sondaj;
CREAȚI DATABASE comandă exact ceea ce se spune în tabel și creează o nouă bază de date cu numele specificat. Odată ce avem o bază de date, trebuie să creați un nou tabel în care să stocați rezultatele sondajului. Înainte de a putea face acest lucru trebuie să selectăm noua bază de date; UTILIZARE comanda va face acest lucru:
USE sondaj;
Pentru a crea o tabelă nouă, folosim CREATE TABLE comandă, specificând numele coloanelor din tabel:
CREAȚI rezultatele tabelului (opțiunile VARCHAR (20), voturile INT);
Dacă am fi implementat acest lucru pe un site pe care l-am lansat cu o tabelă goală, dar pentru a vedea unele rezultate fără a răspunde la întrebarea în mod repetat, putem introduce niște date fictive în tabel. Cea mai rapidă și mai ușoară modalitate de a face acest lucru pentru seturi mici de date (doar 5 rânduri în acest exemplu) este de a face acest lucru manual, ceea ce putem face cu următoarea serie de comenzi:
INSCRIEȚI ÎN VALORI de rezultate (alegere0, 100); INTRODUCEȚI ÎN VALORILE DE REZULTATE (?? alege1, 67); INSCRIEȚI ÎN VALORILE rezultatelor (alegere2, 11); INSCRIEȚI ÎN VALORILE rezultatelor (alegere3, 51); INSCRIEȚI ÎN VALORILE rezultatelor (?? choice4 ??, 38);
Comanda ar trebui să fie suficient de dreaptă, nu uitați să apăsați Enter după fiecare linie. Singurul punct demn de remarcat este că primul rând este choice0 in loc de choice1 care este făcut pentru a face lucrul cu obiectul JSON în scriptul nostru mai ușor. În acest moment CLI-ul dvs. ar trebui să apară ceva asemănător capturii de ecran următoare:
Noi am facut-o acum cu CLI pentru ca sa o putem iesi si sa ne mutam la urmatoarea sarcina? crearea pluginului.
Avem o serie de sarcini care trebuie completate cu codul pluginului; trebuie să creăm structura DOM pentru widget, să adăugăm un handler care ascultă pentru trimiterea selecției, să transmită rezultatele serverului și să proceseze răspunsul, precum și să afișeze rezultatele după procesare. Putem adăuga, de asemenea, niște zahăr sub formă de mesaje de eroare și rezultate animate.
Va fi nevoie de cateva linii de cod pentru siguranta, dar ar trebui sa merite, deoarece vom ajunge sa vedem cat de usor este sa faci un plug robust, functional si avansat, care ofera interactivitate si adauga valoare pagină. Să începem; într-un fișier nou în editorul dvs. de text adăugați următorul cod:
Accentsconagua