Crearea unui sistem de vot dinamic pe jQuery și php

Puteți obține un rezultat super-cool, atunci când se combină elementele de bază ale PHP și funcționalitatea jQuery! In acest tutorial vom crea un sondaj în PHP și XHTML, aplica unele efecte jQuery Ajax, pentru a simula reîncărcarea paginii, și, desigur, adăuga unele animație.

Planul de implementare a proiectului:

Pentru a începe, completați secțiunea :

style.css - va conține toate stilurile necesare
jquery.js - biblioteca jQuery în sine
jquery.cookie.js - plugin creat de Klaus Hartley, Cookie-urile de control prin intermediul jQuery
poll.js - atunci script-ul va fi disponibil, oferind vot dinamic

Următorul pas este de a crea un formular pentru votul nostru:

intrare

Primește GET / POST solicitare din matriță;
Seturi / exceptează valoare Cookie;
Acesta produce verificare de IP pentru a elimina votul multiplu;
Salvează FlatFile voce dB;
Se întoarce rezultatul care este inclus în fișierul HTML;

În primul rând avem nevoie pentru a crea o matrice care va conține numele și ID-ul, opțiunile de vot:

Pachetul FlatFile utilizează numere pentru a identifica difuzoarele, așa că trebuie să definim unele constante la valoarea de numere pentru a obține nume:

Atunci când formularul este completat și trimis la prelucrarea, PHP trebuie să știe ce fișier pentru a înregistra rezultate și, respectiv, a reveni. Prin urmare, avem nevoie pentru a crea o constantă mai mult.

În continuare, trebuie să atașați flatfile.php și inițializa un obiect bază de date:

FlatFile este un document text simplu, localizat în directorul de date:

poll_default ()

poll_default () procesează în mod direct cererea, în cazul în care cererile GET / POST sunt valide.

cuvinte cheie Global face un obiect db $ disponibile în domeniul de aplicare al funcției.

Script-ul ar trebui să verifice unicitatea IP pentru a preveni votul multiplu. Pentru a face acest lucru, avem nevoie pentru a face o cerere la dosarul nostru de text pentru a afla dacă IP este prezentă în listă.

Dacă Cookie otsutsvuyut și ca răspuns la cererea de anchetă are un gol, aceasta înseamnă că utilizatorul nu a votat pentru el, astfel încât să afișeze un fișier HTML cu forma. În caz contrar, îl va arăta rezultatul:

poll_submit ()

poll_submit () primește datele din formularele, verifică dacă utilizatorul a votat, și apoi actualizarea bazei de date prin adăugarea de o voce.

Această bucată de cod elimină valoarea opțiunii de vot opțiunea ID-ul și îl convertește în valoare pură fără text:

Deci, nu avem nevoie pentru a verifica dacă există o astfel de opțiune în baza de date (opțiunea id) nostru

Dacă această opțiune este prezentă în baza de date (răspunsul nu este gol), avem nevoie pentru a începe funcția updateSetWhere (). Dacă nu, trebuie să-l lipiți - introduceți ():

În același fel trebuie să fie introdus în cadrul IP a utilizatorului și setați cookie timp de 1 an:

poll_return_results ()

poll_return_results () generează rezultate sondajului, înregistrarea lor în fișierul HTML și returnează forma, în locul utilizatorului.

În primul rând, să atribuie HTML variabila $ HTML:

Următoarea structură de fișier naklipaem html inițial:

Pentru a crea rezultatele sondajului trebuie să selecteze toate rândurile (variante) ale bazei de date sortate dupa numarul de voturi.

De asemenea, avem nevoie de numărul total de voturi pentru calculul dobânzii:

Pasul următor vom calcula norma procentuală fiecare opțiune de vot:

HTML care va scrie rezultatul constă într-o listă (dl), stil de CSS pentru a crea diagramă.

Doar atunci când iterarea avem nevoie pentru a schimba culoarea opțiunii pentru care utilizatorul a votat:

Aici vom afișa numărul total de voturi și închide nostru HTML:

Dar aceasta este o expresie regulată care găsește

cu id-poll-container:

În această funcție, rămâne să înlocuiască codul HTML al rezultatelor sondajului în HTML folosind expresii regulate:

poll_ajax ()

Următoarea linie de cod este extras din baza de date toate vechi și se întoarce în format JSON:

intrare

În primul rând, de a crea unele variabile globale. Primele trei sunt aceleași pe care am avut-o în PHP. În votedID fi stocate id opțiunea utilizatorului selectat.

Acum aveți nevoie pentru a face codul pe termen atunci când pagina încarcă:

În interiorul acestei funcții ne-am stabilit handler pentru butonul pe care utilizatorii vor face clic pentru a vota. Când butonul este apăsat în luptă vin funcția formProcess:

Deci, nu avem nevoie pentru a verifica ce date se afișează acum pe pagina. În cazul în care acest lucru nu este forma de vot, avem nevoie pentru a anima rezultatele:

Cookie Dacă există, atunci avem nevoie pentru a afișa rezultatele, deoarece utilizatorul a votat deja. Pentru a face acest lucru, avem nevoie pentru a extrage valoarea Cookie și rezultatele sredsva PHP. Următorul pas este de a trimite datele extrase din loadResults () Funcția:

formProcess ()

În primul rând avem nevoie pentru a preveni trimiterea formularului implicit: event.preventDefault ();

În continuare, vom elimina ID-ul de opțiunea selectată:

intrare [@ name = 'sondaj']: verificat este un selector care selectează jQuery care are un nume de atribut egal cu „sondaj“ valoare, iar acest element ar trebui să fie selectat. attr ( „valoare“) preia valoarea obiectului, care în acest caz este OPTN, unde n este opțiunea ID.

Acum, că avem un ID de activitate, putem descurca. Pentru a face acest lucru, vom ascunde formularul de vot, și personaliza funcția de anonim pentru a returna un răspuns, care începe atunci când forma de vot va dispărea complet.

Odată ce forma dispare, îl vom elimina din DOM folosind gol ():

În acest caz, $ (aceasta) este o variabilă specială care reprezintă obiectul care dispare din pagina (în acest caz, formularul).

În jQuery prezenta, de asemenea, mai multe funcții speciale, cum ar, de exemplu, ca $ .getJSON (), care primește cererea GET de la obiect JSON. Când avem un obiect îl numim loadResults () Funcția:

Scriem doar valoarea din Cookie:

loadResults ()

loadResults () este numit de la $ .getJSON () și se întoarce JSON un obiect care conține, în datele din baza de date. Această funcție funcționează aproape la fel de bine ca și poll_return_results (). Prima diferență este că am stabilit lățimea dreptunghiurile la 0%, deoarece acestea vor anima. O altă diferență este că vom folosi funcția jQuery append () în loc de expresii regulate pentru a transmite rezultatul. După rezultatele apar pe pagina de noi numim animateResults) funcția (.

animateResults () secvențial trece prin toate dreptunghiurile și animă variație lățime (lățime).
fiecare () este o funcție jQuery care trece succesiv prin toate elementele care se încadrează sub selector:

Pentru a începe cu noi definim valorile textului, care se încheie după eticheta de dreptunghi , care conține interes.

Apoi vom expune valoarea 0% pentru lățime și rula animația:

5 lecții coloana ultima „jQuery“

Astăzi am dori să vă spun despre TypeIt bibliotecă - gratuit jQuery plugin. Puteți să-l utilizați pentru a simula tastare. Dacă totul este configurat corect, acesta este un efect foarte realist poate fi atins.

jQuery plug-in pentru a crea o cronologie.

jQuery plugin pentru a crea o diagramă Gantt.

Un exemplu despre cum să pună în aplicare fișierul de descărcare prin intermediul PHP și jQuery ajax.

truehazard

truehazard

ajuta la cine stie de ce unele site-uri atunci când vă conectați script script-uri de scriere / ajax.js 1966 și de ce așa cum se vede pe stilul Tipo - stilul / css.css 4354 ?.

Un detaliu! De asemenea, mă întreb!

medved.php? preved si $ _GET, un preved gol ($ _GET [ 'preved']). Deși cel mai probabil, se face pentru a dezactiva cache.

Cel mai probabil în sursa după cum urmează: a făcut stiluri fișierul JavaScript sau modernizate, browser-ul nu este târât fișierul vechi din cache. filemtime returnează unix-time fișier ultimei modificări imediat ce fișierul este actualizat și timpul actualizat, respectiv, pentru browser-ul va fi un fișier nou. Cu toate acestea pot trece pur și simplu argumentul. Js / CSS poate fi, de asemenea rula php-cod;)

truehazard

Multumesc pentru raspuns)

Am încercat diferite moduri de a afișa șabloanele. și este în prezent lucrează ca web-master trebuie să servească o varietate, inclusiv motoare „samopisnye“. și pot spune sincer că este mult mai ușor să se separe complet muștele de chiftele, și de a face toate un șablon. mai aproape de standard, și apoi când vezi „genii“, apoi codul HTML de PHP trebuie să se retragă și alege. și utilizarea sistemelor lor de lucru complică sarcina faptul că fiecare nou membru al echipei trebuie să fie instruiți. Personal, eu sunt în acest moment preferă să utilizeze Smarty, acestea sunt accesate prin clasa statică.

Nu Gusturile! Pentru fiecare propriul său. Prin modul în care puteți încerca versiunea mea! Poate că va place cel mai mult. Dacă aș putea scrie un exemplu pentru tine :)

Va multumesc :), dar va trebui să renunțe până când lucrarea în această firmă, este necesar să se facă totul în același mod. și în alte companii - alte reguli :)

spune-mi unde există exact același scenariu, dar cu baza de date.

În esență, se poate scrie în sine!

Am introdus codul de pe site-ul dvs. (testat pe lokalke prin Denver) (site-ul bazat pe php - prin includ - în partea stângă) și faceți clic pe butonul „vot“, scrie că pagina nu este găsit. Ie există o referire la poll.php, dar acest fișier nu este găsit, chiar dacă într-adevăr este. Sursele nu sa atins. Mod de a poll.php credincioși - precum și în sursa - este la radacina. Cineva mi-a spus?

bossboss1 27 mai scris: Avem nevoie pentru a deschide fișierul flatfile.php în Dreamweaver. Apoi, în meniul Modificare (schimbare) -> proprietăți Page (Pagina Proprietăți) -> Titlu / Encoding (Codificare). Pe de codificare linie selectați chirilic (Windows) și faceți clic pe Aplicare. Gata! Nu se obține acest lucru. problema cu codificare din Rusia a rămas. Am deschis dosarul și el era deja în alfabetul chirilic. Overstore în ANSI-a dat nimic - dosarele erau deja în ANSI care a decis problema cu codificarea Rusă - share instrucțiuni detaliate.

Cu toate acestea, am o întrebare: trebuie să dezactivați temporar scanarea over IP. Trebuie sa fie cumva verificată pentru prezența PĂSĂREASCĂ românesc, și eu odată votat! Mai permite. Curățirea ips.txt fișiere și nici votes.txt fără nici un rezultat. IP pentru a schimba de fiecare dată când există posibilitatea - nu un IP dinamic.

Victor Tretyak

A apărut o problemă! În codul sursă, după alegerea varinta și apăsarea tastei „vot“ opțiuni dispar, iar rezultatele nu sunt afișate! Care ar putea fi problema? Are cineva cu care se confruntă similare?

Ne pare rau dar script-ul este plin de „G“. Am vrut să voteze „Ce browser“ pentru a schimba tot ceea ce este necesar. Am schimbat la doar pentru a schimba toate valorile. ALL cum să creați unul. Dar acest scenariu prost Ne pare rău, la toate nu mai funcționează. Și acum o atenție! A făcut totul așa cum a fost, toate valorile returnate, cum ar fi în sursa. script-ul încă nu pornește. Și acum, concluzia: Script-ul poate fi utilizat. dar numai în cazul în care nu NEOM schimba, în caz contrar cifra va rula :( Deci, dacă doriți să-l pună pe site-ul dvs., ar fi grozav, dar vă costă cel puțin ceva pentru a schimba și (sau) fișiere și figura îl porniți.

Dacă nu se poate înțelege cu adevărat, atunci nu vina pe nimeni. script-ul de lucru.

Sergei Vaskov

Mă alătur lui Victor. Tot ce a făcut după cum este scris. Dar atunci când apăsați „vot“ nu este apare rezultatul (spațiu gol). Te rog spune-mi cum să rezolv problema?

spiderone1

Nimic nu se schimbă, chiar dacă perdelat necesare pentru ASP.NET)), dar chiar nu este rulat pe php. o jumătate de oră meșterire nu a funcționat.

nikolayzaigrin

Ecranul gol este afișat în fișierul deoarece eroare flatfile.php în linia 181, când deschideți fișierul de flux $ fp = fopen ($ this-> datadir $ tabelanume, „W“ .. „blocare.“); $ This-> datadir - calea către fișierul de rezultate. (Această cale nu include fișierul în sine) $ tabelanume - este numele fișierului care înregistrează rezultatele (votes.txt) „Lock.“ -. Este anexată la .lock extensia de fișier. Funcția fopen, se pare, încercând să deschidă fișierul votes.txt.lock care nu există. Pentru a remedia acest lucru trebuie să eliminați această extensie, mai degrabă. „Lock“ (cu un punct). w - cei care sunt interesați, acest lucru înseamnă că fluxul de fișier, trebuie doar să fie înregistrate. P.S. Această eroare este detectată prin utilizarea instrumentelor pentru dezvoltatori în crom. (Există un astfel de lucru în toate browserele, mozaic Firebug)> Rețea> XHR> și sunt înregistrate toate cererile ajax către server. Rezultatul fișier poll.php a arătat exact această greșeală. Rectificat, a funcționat.

nikolayzaigrin

Există un plugin pentru întreaga Jquery această afacere? Înțeles fișier poll.js, toate lucrările este descris sondajul, dar ar dori să aibă un plugin. O matriță de acest plug-in, deoarece nu funcționează am mai multe interviuri pe aceeași pagină în diferite părți. Plug-in internet găsit nimic potrivit, cu excepția faptului că

SellerHelp

Cine ecran gol, și este imposibil de a face ceva. Scrie prețul de emisiune [email protected] de 5 $ (vă oferă acces pentru testare la FTP, vom configura tine)

Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!

Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!

Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.

Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!