Hogyan készítsünk egy captcha a php

Üdvözlöm, kedves barátaim!

Ma megnézzük, és megteremti az alapoktól kezdve az eredeti és yuzabilnuyu ( „barátságos”, hogy a felhasználó) captcha PHP. Vagyis minden találkozott CAPTCHA. ahol egyenes, hogy úgy mondjam, meg kell dekódolni a leveleket. Tehát én személy szerint nem szeretem az ilyen CAPTCHA, és ez úgy döntött, hogy létrehoz egy yuzabilnuyu és egyszerű captcha. Nos, kezdjük ...

Kezdésként nézzük foglalkozik a fájlok szervezése. Erre a munkára van szükség helyi szerverre (pl Denwer). Hozzunk létre egy könyvtárat a projekt (például captcha.loc), amely a következő könyvtárak és fájlok:

css könyvtár -> style.css - a stíluslap;

könyvtár Képek -> apple.png. apricot.png. kiwi.png. lemon.png. orange.png - a képek CAPTCHA;

.htaccess fájlt -> Ebben az esetben, akkor tovább kell adnia az UTF-8 kódolást;

index.php -> ott fognak írni minden kódot.

És így - indul.

1. lépés - Készítsen HTML-kódban:

Itt van egy egyszerű HTML-jelölést. Az egyetlen pont, amely megőriz, hogy miért egy rejtett mező (33. sor) értéket attribútum nem lakott? Az attribútum értéke kerül be, és összehasonlítja azt az értéket, a felhasználó által kiválasztott, és a létrehozott értéket, amelyet tárolni az ülésen.

.htaccess fájlt - a fájl további konfigurációs Apache webszerver. Mivel csak egy sor kód, amely meghatározza a kódolását a dokumentumnak. Míg a HTML-dokumentumban, akkor a kódolást, de van olyan helyzet, amikor a böngésző kell a Windows-1251 (Cirill), és a dokumentumban - UTF-8 - egyértelmű, hogy a dokumentum jelenik meg a Windows-1251 kódolás (a böngésző prioritás fent), és annak biztosítása érdekében, hogy a dokumentumok jelennek meg a kódolást, hogy szükségünk van - a .htaccess fájlt. Ebben a fájlt, adjuk hozzá a következő sort: AddDefaultCharset utf-8

2. lépés - hozzáadása stílusok:

Általában fontos (line 14) - lehetővé teszi, hogy nagyobb prioritást a stílus, azaz a Ez a szabály azért fontos számunkra. Ennek eredményeként, amikor kattintson a képre, a keret marad.

A fő munkája ez a szkript követni rákattint a képre, és bizonyos műveleteket.

És így, ha a felhasználó rákattint a képre, vesszük a képeket, és az egyes hurok végig a képeket, és ha rákattint a képre script hozzá egy osztályt az aktív (azaz, akkor csak meg egy zöld keret), és megszerezni az értéke alt attribútum.

Ha a felhasználó rákattint egy képet, akkor egyszerűen hozzá kell adni az osztály aktív. és a többi kép osztály aktív - törölt!

Ezután térjünk vissza az elem, amelyre egy kattintás, és vonzó az alt attribútumot. aztán ő értéke a változó gyümölcs. fellebbezni a rejtett mező id = »gyümölcs» annak ugyanaz az érték van írva, hogy van egy változó a gyümölcs - meg kell összehasonlítani az értékeket!

A 4. sorban, mi csak fogja tisztítani az érték a rejtett mező, úgyhogy azt nem menti.

4. lépés - írása a szerver (PHP) kód:

Ezt a PHP kódot kell beilleszteni a dokumentum elejére, azaz írni PHP kódot az első sorban.

És így hoztunk létre egy sor gyümölcsöt. Következő lépésként egy random tömböt gyümölcsök és a nyilvántartási érték az ülésen. Ezután ellenőrizze nem jön, ha alkotunk adatok, azaz a táplálkozási adatokat olyan formában POST módszer nem jön, akkor fogjuk írni, hogy az ülés a véletlenszerű elemet (gyümölcs), de egyébként vesszük az adatokat a forma PHP eszközöket, és hasonlítsa össze azokkal hogy van egy rejtett mező.

Akkor megkapjuk az adatokat a űrlapmezőket és ellenőrizze, hogy a felhasználó lépett valamit a területen, ha nem írt semmit, csak be, mint „vendég”.

Akkor meg kell összehasonlítani azzal, amit megvan a munkamenet, és hogy ebbe a rejtett mező. És ha a globális tömb SESSION, gyümölcs elem megegyezik az a tény, hogy van egy változó gyümölcs. Ezután megjelenik egy üzenet, például: „Te már tesztelték, stb”, és egyébként, hogy van, gyümölcs elem nem lesz egyenlő, mi van a változó gyümölcs, amit megjelenít egy üzenetet, mint például: „Te még nem tesztelték, stb .. " Akkor ne átirányítás alaphelyzetbe POST-adatokat.

5. lépés - az üzenet boxban:

Ez a kis PHP kódot kell beszúrni az űrlapot.

Köszönöm mindenkinek a figyelmet!

Kapcsolódó cikkek