Bouw je eigen Captcha en contactformulier

Ooit geraakt door spam via het contactformulier op uw persoonlijke site? Nou, hier is een korte tutorial over hoe je een aangepaste captcha kunt maken om de slechteriken buiten te houden.

Stap 1: captcha.php en de sessie

Eerst moeten we een nieuwe PHP-pagina bouwen en opslaan als captcha.php. Open vervolgens in een nieuw script een serversessie met de opdracht session_start (). Codeer ook een lege variabele met de naam "string". We zullen deze variabele later gebruiken om onze willekeurig gegenereerde captcha-tekst te bewaren.

Stap 2: Random String

Vervolgens moeten we een for-lus schrijven die een willekeurige reeks zal genereren. We nemen deze willekeurige reeks en zetten deze in een sessievariabele met de naam "random_code".

  
Deze for-lus zal, zoals je zult opmerken, een ascii-karakter in kleine letters toevoegen, gebruikmakend van de chr () functie, naar onze $ string variabele op elke pass. Mijn voorbeeld genereert 5 tekens, maar u kunt dat aantal aanpassen door "$ i te veranderen < 5" in the loop statement to something more custom, like "$i < 7". Once your loop is complete, make sure you define your session variable.
 
Stap 3: Opslagmap en kleuren
 
Dit is waar de tutorial een beetje ingewikkelder wordt. Vervolgens moeten we een opslagmap definiëren voor het lettertype dat we gaan gebruiken, de basis captcha-afbeelding bouwen en de kleuren definiëren die we zullen gebruiken om onze afbeelding te vullen. Dit is allemaal eenvoudige code, maar het zijn functies die niet vaak door ontwikkelaars worden gebruikt.
 
 $ dir = 'fonts /'; $ image = imagecreatetruecolor (170, 60); $ black = imagecolorallocate ($ image, 0, 0, 0); $ color = imagecolorallocate ($ image, 200, 100, 90); // rood $ wit = imagecolorallocate ($ afbeelding, 255, 255, 255);
 
In eerste instantie definieer ik alleen de map waarin mijn lettertypen zijn opgeslagen in de variabele $ dir. De variabele $ image, waarin we de functie imagecreatetruecolor () gebruiken, is de geldspot. Dit is waar de basis captcha-afbeelding is gebouwd met behulp van PHP. De functie imagecreatetruecolor () retourneert een afbeelding-ID die een zwarte afbeelding van de opgegeven grootte vertegenwoordigt. Zoals je kunt zien, maak ik mijn afbeelding 170px breed en 60px hoog.
 
Ten slotte definieer ik in deze stap enkele kleuren die we kunnen gebruiken in onze uiteindelijke afbeelding. De cijfers die worden doorgegeven aan de functie imagecolorallocate () zijn RGB-waarden.
 
Stap 4: De afbeelding bouwen
 
Vervolgens vullen we onze afbeelding met een witte rechthoek, die als de achtergrond van de afbeelding zal fungeren en vervolgens onze willekeurige tekenreeks aan de afbeelding toevoegen.
 
 imagefilledrectangle ($ image, 0,0,200,100, $ wit); imagettftext ($ image, 30, 0, 10, 40, $ alt, $ dir. "arial.ttf", $ _SESSION ['rand_code']);
 
De functie imagefilled rectangle () tekent een rechthoek in de opgegeven afbeelding. De vier getallen die worden doorgegeven in de functie vertegenwoordigen coördinaten voor de hoeken van de rechthoek. Zorg ervoor dat de rechthoek die u hier tekent groter is dan de basisafbeelding. Je zult zien dat mijn rechthoek 200px breed en 100px groot is.
 
Met de imagettftext () kunnen we tekst aan een afbeelding toevoegen met True Type-lettertypen. En je zult zien dat deze functie behoorlijk wat parameters aankan. Ik wil graag alle andere parameters in deze functie benadrukken, maar je hoeft er maar een paar te onthouden.
 
 imagettftext ($ image, $ font_size, $ angle, $ x, $ y, $ color, $ font_file, $ text);
 
Zodra u mijn voorbeeld vergelijkt met de code direct hierboven, ziet u dat de waarden die zijn doorgegeven aan de functie imagettftext () eenvoudig te begrijpen zijn. De eerste is de afbeelding, dan de tekengrootte, de hoek van de tekst, de x- en y-coördinaten van de tekst (beginnend met de linkerbovenhoek), de tekstkleur, de locatie van het lettertypebestand en als laatste de tekst (onze willekeurige tekenreeks).
 
Stap 5: Image Final
 
Vervolgens moeten we, met ons script, onze browser vertellen welk type afbeelding we gebruiken, een header () -functie hebben en de uiteindelijke afbeelding maken. Deze functies zijn zo eenvoudig dat er niet veel over kan worden uitgelegd. Vergeet ook niet je PHP-script te sluiten.
 
 header ("Inhoudstype: afbeelding / png"); imagepng (afbeelding $); ?>
 
Nadat een voorbeeld in een browser is bekeken, zou u in het script een png-afbeelding moeten genereren die wat tekst bevat. Als u fouten ontvangt, zorg er dan voor dat uw script kan linken naar uw .ttf-lettertypebestand en dat u de lege $ stringvariabele eerder in de zelfstudie hebt gemaakt.
  
Dit is wat de uiteindelijke code voor uw captcha.php pagina eruit zou moeten zien:
 
 
 
Stap 6: contact.php
 
Bouw een nieuwe PHP-contactpagina en sla deze op als contact.php. Deze pagina bevat ons contactformulier dat wordt gevalideerd met behulp van onze captcha.
  
Stap 7: HTML & CSS
 
Laten we een HTML-formulier toevoegen aan onze contact.php-pagina. Besteed bijzondere aandacht aan de beeldbron die we gebruiken voor de willekeurige tekst.
 
 
 
 
 
  
 
 
 
U kunt ook het volgende stukje CSS aan uw pagina toevoegen om het er beter uit te laten zien dan de standaard.
 
 
  
Stap 8: Valideer met PHP
 
Nu onze formulieren zijn gebouwd en we captcha-afbeeldingen kunnen weergeven, hoeven we alleen nog maar ons formulier te valideren, en zeker een aantal validatieregels voor captcha op te nemen.
 
Hieronder ziet u hoe de uiteindelijke validatie PHP eruit zou moeten zien. Twee belangrijke functies vereist voor dit validatieproces zijn session_start (); en de if ($ _ POST ['code'] == $ _SESSION ['rand_code']) elementen. Deze stellen ons in staat de sessievariabele te openen en deze te vergelijken met de tekst die iemand schrijft in het codeveld van ons formulier. Zonder deze zou onze captcha nutteloos zijn.
 
 
 
Als u veel over PHP weet, moet de rest van deze validatie gemakkelijk te begrijpen zijn. We willen er in essentie voor zorgen dat geen van onze formuliervelden leeg is. Als ze leeg zijn, worden er fouten gegenereerd om ervoor te zorgen dat onze gebruiker informatie invoert. U zult ook merken dat ik niet valideer of de e-mail goed is gevormd, en dat is iets wat u zou moeten opnemen. E-mailvalidatie wordt gedaan met behulp van reguliere expressies.
   
Hier is hoe uw uiteindelijke contact.php-bestand eruit zou moeten zien. Ik voeg de CSS toe, die je misschien in zijn eigen CSS-bestand wilt laten vallen.
 
          '$ Error.'