Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Dinamikus szavazás készítése jQuery és PHP használatával.

by
Difficulty:IntermediateLength:LongLanguages:

Hungarian (Magyar) translation by Dávid Szigecsán (you can also view the original English article)

Amikor kombinálsz néhány egyszerű PHP-s megoldást a jQuery okosságával, akkor igazán remek eredményt kaphatsz. Ebben a bemutatóban készíteni fogunk egy szavazást PHP és XHTML használatával, majd használunk pár jQuery Ajax technológiát, hogy elkerüljük az oldal újratöltés szükségességét és egy barátságos kis animációt adjunk neki.

  1. HTML
  2. PHP
    1. Bevezetés
    2. poll_default()
    3. poll_submit()
    4. poll_return_results()
    5. poll_ajax()
  3. CSS
  4. JavaScript
    1. Bevezetés
    2. formProcess()
    3. loadResults()
    4. animateResults()

HTML

Kezdjük a <head> beállításával:

  • style.css fogja tartalmazza a CSS stílusokat.
  • jquery.js az alap jQuery függvénykönyvtár.
  • jquery.cookie.js egy plugin amit Klaus Hartl készített, hogy a jQuery képes legyen módosítani a sütiket.
  • poll.js fogja tartalmazni a Javascript-et ami dinamikussá teszi a szavazást.

Ezután készítsünk egy egyszerű szavazó űrlapot:

Poll

Átmenetileg ezt az űrlapot a PHP fogja feldolgozni, aztán miután elkészül a JavaScript, a jQuery fogja feldolgozni. A PHP és a JavaScript úgy lesz tervezve, hogy megkapja az opció azonosítóját a value attribútumból. A &nbsp; csak egy elkódólt szóközt, ami megjelenik a HTML-ben, az &rarr; meg egy nyíl →


PHP

Bevezetés

Ha a Javascript le van tiltva, a PHP az alábbiakat fogja csinálni:

  1. Megkapja a GET/POST kéréseket a form-tól.
  2. Beállítja/ellenőrzi a sütit
  3. Megbizonyosodik róla, hogy a kérés egy egyedi IP-ről érkezett
  4. Tárolja a szavazatot egy egyszerű DB fájlba
  5. Visszaadja az eredményeket egy HTML fájl tartalmával

Ha a Javascript engedélyezve van, a PHP az alábbiakat fogja csinálni:

  1. Megkapja a GET/POST kéréseket a Javascript-től
  2. Megbizonyosodik róla, hogy a kérés egy egyedi IP-ről érkezett
  3. Tárolja a szavazatot egy egyszerű DB fájlba
  4. Visszaadja az eredményt JSON formátumban

A DB fájl kezeléséhez egy csomagot fogunk használni, amit Luke Plant készített.

Először szükségünk lesz egy tömbre a szavazás neveivel és azonosítóival:

A flatfile csomag számokat használ az oszlopok azonosítására, úgyhogy állítsunk be néhány konstanst hogy beszédes nevekké alakítsuk őket:

Amikor az űrlapot elküldjük, a PHP-nak tudnia kell, melyik fájl kell betöltenie az eredményhez, úgyhogy még egy konstanst kell beállítanunk:

Be kell töltenünk a flatfile.php-t és létrehozni az adatbázis objektumot:

A flat fájlok csak szöveges fájlok, amiket a data könyvtárba tárolunk:

Ha olyan kérést kapunk, amiben szerepel a poll paraméter, akkor az a form-tól érkezik, úgyhogy feldolgozzuk. Ha a kérés tartalmaz egy vote paramétert, akkor az AJAX kérés. Minden más esetben csak visszaadjuk a HTML_FILE-t.

poll_default()

poll_default() feldolgozza a nem érvényes GET/POST kéréseket.

A global sor teszi elérhetővé a $db objektumot a függvény számára.

A script nyomon követi az egyedi IP-ket, hogy biztosan csak egyszer lehessen szavazni, úgyhogy lekérdezzük, hogy benne van-e a DB-ben:

Ha nincs süti és az IP lekérdezése üres eredményel tért vissza, akkor a felhasználó még nem szavazott, szóval csak kiírjuk a HTML fájlt, ami tartalmazza az űrlapot. Egyébként csak visszaküldjük az eredményeket:

poll_submit()

poll_submit() megkapja az űrlapadatokat, ellenőrzi, ha a felhasználó már szavazott és ha kell, akkor frissíti a DB-t a szavazással.

Ezek a sorok megkapják a kiválasztott opció azonosítót és beállítják az $id változó értékének:

Meg kell vizsgálnunk, hogy az opció a DB-ben van-e már:

Ha a DB-ben van (az eredmény nem üres), le kell futtatnunk az updateSetWhere() metódust. Ha nincs, akkor le kell futtatnunk az insert() metódust:

Minden esetben, be kell szúrnunk az IP-t a DB-be és be kell állítanunk egy sütit (egy év múlva jár le):

poll_return_results()

poll_return_results() generálja a szavazás eredményét, veszi a HTML-fájlt, lecseréli az űrlap eredményeit, és visszatér a fájlal a felhasználóhoz.

Először is töltsük be a HTML fájlt és a tartalmát álítsuk be a $html változóba:

Majd kezdjük el összeállítani az eredmény HTML struktúráját:

Az eredmény HTML elkészítéséhez szükségünk van a sorokra (opciók) a DB-ből a szavazatok száma alapján rendezve:

Továbbá szükségünk van az összes szavazatra a százalékok kiszámításához:

Majd kiszámítjuk a szavazatok százalékos értékeit:

Az eredmény HTML egy definíciós lista (<dl>) ami CSS-el formázva van a grafikonos megjelenéshez:

Azt is le kell ellenőriznünk, hogy az aktuális opció az-e amire a felhasználó szavazott és ennek megfelelően beállítani a színét:

Végül hozzáadjuk a szavazatok számát és lezárjuk a html tag-eket:

Ez egy regex (reguláris kifejezés) ami megtalálja a poll-container <div>-et:

Az utolsó lépés ebben a metódusban, hogy kicseréljük a szavazó űrlapot az eredménnyel, felhasználva a regex-et, majd visszatérni az eredménnyel:

poll_ajax()

poll_ajax() megkapja a kérést a JavaScript-től, hozzáadja a szavazást a DB-hez, és visszaküldi az eredményt JSON formátumban.

Van néhány sornyi kódot, ami eltér a poll_submit()-től. Az első ellenőrzési feltételnél, ha a JavaScript csak az eredményt akarja tudni és nem kell a szavazással törődni:

A másik két sor lekéri az egész DB-t, majd visszaadja JSON formátumban:


CSS

Poll Results

Ez a CSS megformázza a PHP vagy JavaScript által visszaadott eredményt.

  • .graph megformázza a hasábok tárolóját a címek és százalékokhoz. A width minden oldalon különböző lehet.
  • .bar-title megformázza a hasábok címeit.
  • .bar-container megformázza az egyéni oszlop és százalék tárolókat
  • .bar-container div megformázza a hasábot jelentő div-et. A hasáb létrehozásához szükséges százalékos width érték a PHP vagy a JavaScript által kerül beálításra.
  • .bar-container strong megformázza a százalékot.
  • #poll-results p megformázza az összesített szavazatokat.

JavaScript

Bevezetés

A JavaScript megállítja az űrlap elküldésének folyamatát a gombra kattintáskor és Ajax-al küldi el a szavazatot, majd az eredményt animálja.

Először is, néhány globális változó. Az első három ismerős kell, hogy legyen a PHP-ból. A votedID tárolja az azonosítótamire a felhasználó szavazott.

Most szükségünk van egy jQuery ready metódusta, ami akkor fut le amikor az oldal betöltődött:

A függvény belsejében regisztráljuk a szavazás gomb kezelőjét, ami futtatni fogja a formProcess metódust amikor a gombra kattintottunk:

Le kell ellenőriznünk, hogy létezik-e az eredmény <div>, ha igen, akkor animálni kell az eredményt:

Ha van süti beállítva, egyből az eredmény generálásához ugorhatunk, mert a felhasználó már szavazott. Hogy ezt megtehessük törölnünk kell a szavazó űrlapot, elkérni az azonosítót a sütiből, megszerezni az eredményt a PHP-tól és átadni a loadResults() metódusnak.

formProcess()

A formProcess() metódus a küldéskor hívódik meg és megkapja az esemény objektumot. Ez megakadályozza, hogy az űrlap hagyományosan legyen elküldve, ellenőrizzük/beállítjuk a sütiket, futtatjuk az Ajax kérést, majd meghívja a loadResults() metódust, hogy átalakítsa az eredményt HTML formátumra.

Először is meg kell, hogy akadályozzuk az alapértelmezett működést (az űrlap elküldését):

Utánna elkérjük az aktuálisan kiválasztott opció azonosítóját:

Az input[@name='poll']:checked egy jQuery szelektor, amely kiválaszt egy <input>-ot, aminek van name='poll' attribútuma és ki van pipálva. Az attr("value") visszaadja az objektum értékét, ami a mi esetünkben egy optn, ahol n az opció azonosítójának értéke.

Most, hogy megszereztük az azonosítót, lehet feldolgozni. Hogy elkezdjük, elrejtjük a szavazás úrlapot és beállítunk egy névtelen függvényt callback-ként, ami akkor fut le, amikor az elrejtés befejeződött. Az animációk nem szüneteltetheti a script futását, így furcsa dolgok történnek, ha nem így csinálod.

Miután eltűnt az űrlap, kitörölhetjük a DOM-ból az empty() segítségével:

Ebben az esetben a $(this) egy jQuery rövidítés a DOM elemre, amire az eltüntetést alkalmaztuk.

A jQuery tartalmaz némely más rövidített metódust, beleértve a $.getJSON(), amely csinál egy GET kérést, hogy megkapja a JSON objektumot. Amikor megvan az objektum, meghívjuk vele a loadResults() metódust:

Az utolsó dolog, amit csinálunk, a süti beállítása:

loadResults()

A loadResults() a $.getJSON() által hívódik meg, és kap egy JSON objektumot, ami a DB eredményeit tartalmazza. Ez szinte ugyanaz mint a PHP-s megfelelője poll_return_results() néhány kivételtől eltekintve. Az első különbség az, hogy az összes hasáb width értékét 0 %-ra álítjuk, mert majd animálni fogjuk őket. A másik különbség az, hogy a jQuery append() metódust használjuk a regex helyett az eredmény megjelenítéséhez. Miután az eredmény megjelent, a függvény meghívja az animateResults() metódust.

animateResults()

Az animateResults() végiglépeget egyenként, a hasábokon és animálja a width tulajdonságot a százalék alapján.

Az each() egy jQuery funkció, ami végiglépeget minden elemen, ami ki van választva:

Először, beállítjuk a percentage értékét a hasáb melletti szövegre ami a <strong>-ban van és a százalékot tartalmazza.

Ezután meggyőződünk róla, hogy a width 0%-ra van állítva és animáljuk azt:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.