Crea il tuo captcha e modulo di contatto

Sei mai stato colpito dallo spam attraverso il modulo di contatto sul tuo sito personale? Bene, ecco un breve tutorial su come costruire un captcha personalizzato per tenere fuori i cattivi.

Passaggio 1: captcha.php e la sessione

Per prima cosa dobbiamo creare una nuova pagina PHP e salvarla come captcha.php. Quindi, in un nuovo script, aprire una sessione del server usando il comando session_start (). Inoltre, codifica una variabile vuota denominata "stringa". Utilizzeremo questa variabile in seguito per contenere il nostro testo captcha generato a caso.

Passaggio 2: Stringa casuale

Successivamente, abbiamo bisogno di scrivere un ciclo for che genererà una stringa casuale. Prenderemo quindi questa stringa casuale e la imposteremo in una variabile di sessione chiamata "random_code".

  
Questo ciclo for, noterete, aggiunge un carattere ascii in minuscolo, usando la funzione chr (), alla nostra variabile $ string su ogni passaggio. Il mio esempio genera 5 caratteri, ma puoi modificare quel numero modificando "$ i < 5" in the loop statement to something more custom, like "$i < 7". Once your loop is complete, make sure you define your session variable.
 
Passaggio 3: cartella e colori di archiviazione
 
Questo è dove il tutorial diventa un po 'più complicato. Quindi dobbiamo definire una cartella di archiviazione per il font che useremo, creare l'immagine captcha di base e definire i colori che useremo per riempire la nostra immagine. Questo è tutto codice semplice, ma sono funzioni che non vengono utilizzate spesso dagli sviluppatori.
 
 $ dir = 'fonts /'; $ image = imagecreatetruecolor (170, 60); $ black = imagecolorallocate ($ image, 0, 0, 0); $ color = imagecolorallocate ($ image, 200, 100, 90); // red $ white = imagecolorallocate ($ image, 255, 255, 255);
 
Inizialmente, sto solo definendo la cartella in cui i miei font sono memorizzati nella variabile $ dir. La variabile $ image, dove usiamo la funzione imagecreatetruecolor () è il punto soldi. Questo è dove l'immagine captcha di base è costruita usando PHP. La funzione imagecreatetruecolor () restituisce un identificatore di immagine che rappresenta un'immagine nera della dimensione specificata. Come puoi vedere, sto facendo ingrandire la mia immagine di 170 px di 60 px di altezza.
 
Infine, in questo passaggio, definisco alcuni colori che possiamo usare nella nostra immagine finale. I numeri passati alla funzione imagecolorallocate () sono valori RGB.
 
Step 4: Costruire l'immagine
 
Quindi, riempiremo la nostra immagine con un rettangolo bianco, che fungerà da sfondo dell'immagine, e quindi aggiungeremo la nostra stringa di testo casuale all'immagine.
 
 imagefilledrectangle ($ immagine, 0,0,200,100, $ bianca); imagettftext ($ image, 30, 0, 10, 40, $ alt, $ dir. "arial.ttf", $ _SESSION ['rand_code']);
 
La funzione imagefilledrectangle () disegna un rettangolo nell'immagine specificata. I quattro numeri passati nella funzione rappresentano le coordinate per gli angoli del rettangolo. Assicurati che il rettangolo che disegni qui sia più grande dell'immagine di base. Noterai che il mio rettangolo è largo 200 px e alto 100 px.
 
L'imagettftext () ci consente di aggiungere del testo a un'immagine usando i font True Type. E vedrai che questa funzione può gestire parecchi parametri. Mi piacerebbe evidenziare tutti i diversi parametri in questa funzione, ma dovrai ricordarne solo alcuni.
 
 imagettftext ($ image, $ font_size, $ angle, $ x, $ y, $ color, $ font_file, $ text);
 
Dopo aver confrontato il mio esempio con il codice immediatamente sopra, vedrai che i valori passati alla funzione imagettftext () sono facili da capire. La prima è l'immagine, quindi la dimensione del carattere, l'angolo del testo, le coordinate xey del testo (a partire dall'angolo in alto a sinistra), il colore del testo, la posizione del file del font e infine il testo (la nostra stringa casuale).
 
Passaggio 5: Immagine finale
 
Successivamente, con il nostro script, dobbiamo dire al nostro browser quale tipo di immagine stiamo usando, con una funzione header (), e costruire l'immagine finale. Queste funzioni sono così semplici, non si può spiegare molto su di esse. Inoltre, non dimenticare di chiudere lo script PHP.
 
 intestazione ("Content-type: image / png"); imagepng ($ image); ?>
 
Una volta visualizzata l'anteprima in un browser, lo script dovrebbe generare un'immagine png contenente del testo. Se ricevi errori, assicurati che lo script possa collegarsi al tuo file di font .ttf e che tu abbia creato la variabile $ stringa vuota da prima nel tutorial.
  
Ecco come dovrebbe apparire il codice finale per la tua pagina captcha.php:
 
 
 
Passaggio 6: contact.php
 
Costruisci una nuova pagina di contatto PHP e salvala come contact.php. Questa pagina conterrà il nostro modulo di contatto che verrà convalidato utilizzando il nostro captcha.
  
Passaggio 7: HTML e CSS
 
Aggiungiamo un modulo HTML alla nostra pagina contact.php. Presta particolare attenzione alla fonte di immagini che usiamo per il testo casuale.
 
 
 
 
 
  
 
 
 
Puoi anche aggiungere il seguente bit di CSS alla tua pagina per renderlo migliore di quello predefinito.
 
 
  
Passaggio 8: convalida con PHP
 
Ora che il nostro modulo è stato creato e abbiamo mostrato l'immagine captcha, tutto ciò che dobbiamo fare ora è convalidare il nostro modulo, assicurandoci di includere alcune regole di validazione per il captcha.
 
Di seguito è come dovrebbe essere la validazione finale di PHP. Le due caratteristiche importanti richieste per questo processo di convalida sono session_start (); e il if ($ _ POST ['code'] == $ _SESSION ['rand_code'])) elementi. Questi ci permettono di accedere alla variabile di sessione e controllarla dal testo che qualcuno scrive nel campo codice del nostro modulo. Senza questi, il nostro captcha sarebbe inutile.
 
 
 
Se conosci molte cose su PHP, il resto di questa convalida dovrebbe essere facile da capire. Stiamo essenzialmente cercando di assicurarci che nessuno dei nostri campi modulo sia vuoto. Se sono vuoti, vengono lanciati degli errori per assicurarsi che i nostri utenti inseriscano le informazioni. Noterai inoltre che non sto convalidando se l'email è ben formata, il che dovrebbe essere inclusa nel tuo caso. La convalida della posta elettronica viene eseguita utilizzando le espressioni regolari.
   
Ecco come dovrebbe apparire il tuo file contact.php finale. Sto includendo il CSS, che potreste voler inserire nel proprio file CSS.
 
          '$ Error.'