Abou Chleih

{the magic lies between the brackets}

Menü Schließen

Kategorie: PHP

Beiträge zur objektorientierten Programmiersprache PHP, welche verwendet wird, um Websiten dynamisch zu gestalten.

[PHP] Nutzung eines CAPTCHA Bildes

Wir erstellten ein CAPTCHA Bild im vorigen Beitrag.
Nun wollen wir dieses natürlich auch nutzen.
Zuerst benötigen wir die PHP-Datei (im folgenden Beitrag generatecaptcha.php).

Diese binden wir nun ein.
Wir erstellen eine simple HTML-Datei (hier jetzt: index.html).
Da die php-Datei eine Bilddatei ausgibt, können wir das Bild einfach per HTML einbinden.
Dazu benutzen wir den HTML Image-tag:

<img id="captcha" title="Captcha-Code" alt="" src="generatecaptcha.php" /> 

Dem Image weisen wir nun noch eine ID zu. Wieso? Dazu kommen wir noch.
Ein Feld, in welches wir das CAPTCHA eintragen können und einen Button, welcher die Daten absendet, benötigen wir nun noch:


CAPTCHA Abfrage

 <img id="captcha" title="Captcha-Code" alt="" src="generatecaptcha.php" />

<form action="checkcaptcha.php" method="POST"><input type="text" name="captcha_solve" />
 <input type="submit" /></form>

Nun gehen wir noch einmal in die generatecaptcha.php:

Denn wie soll der Server wissen, welches CAPTCHA wir generiert haben bzw. welcher Text der richtige ist?
Wir benötigen sogenannten Session-Variablen.
Diese sehen wie folgt aus:

 $_SESSION['mySessionVar'] 

Es ist zu beachten, dass diese Session-Variablen immer global zugänglich sind. Sie müssen also nicht per Schlüsselwort global definiert werden.
Bevor man solche Variablen jedoch nutzt, muss man eine Session auf dem Server starten, dazu folgende Funktion aufrufen:

session_start();
unset($_SESSION['captcha_spam']);

Hier resette ich gleich die Session-Variable captcha_spam, um sicher zu gehen, dass diese nicht mehr gefüllt ist (unnötig, aber sicher ist sicher.)

Nun erstelle ich das Bild in der generatecaptcha.php und schreibe den Text in die Sessionvar:

 $_SESSION['captcha_spam'] = $text; 

Die generatecaptcha.php ist nun fertig, zurück zur index.html.
Hier verweisen wir im form-Tag auf die checkcaptcha.php.
Diese erstellen wir nun:
Da wir in der HTML-Datei die Daten per POST übergeben und der Name des Feldes captcha_solve lautet, holen wir die wie folgt aus dem HTTP-Paket:

 $_POST['captcha_solve'] 

Die Sessionvar holen wir, wie oben beschrieben, per

 $_SESSION['captcha_spam'] 

Sollten der Text in der $_POST-Var und der in der $_SESSION-Var identisch sein, so hat der User den richtigen CAPTCHA-Text eingegeben:

session_start();
if($_SESSION['captcha_spam'] == $_POST['captcha_solve']){
	echo 'RIGHT';
        //TODO HERE
}else{
	echo 'WRONG';
       //FALSCHER CAPTCHA EINGEBEN
}

Jetzt nochmal zu der vorhin genannten ID des Image-Tags.
Will man jetzt noch, dass das CAPTCHA erneuerbar ist, falls es nicht lesbar sein sollte, so sollte dieser Code genügen. Er erneuert das Bild und gibt es aus (ein simpler refresh):

 <img style="cursor: pointer;" onclick="document.getElementById(&quot;captcha&quot;).src = &quot;generatecaptcha.php?r=&quot;+Math.random();" alt="" src="refresh.png" />

Das Math.Random() war nötig, da der Internet Explorer nur Links aufruft/aktualisert, welche sich ändern.

Den vollständigen Sourcecode findet ihr auf GitHub

[PHP] Erstellen eines CAPTCHA Bildes

Um Spam zu vermeiden, gibt es viele Möglichkeiten.
Eine der bekanntesten ist das Captcha Bild, in welchem ein Text zu finden ist. Diesen muss man dann einfach in ein Textfeld eintragen.
Aber wie erstellt man ein einfaches Captcha Bild? PHP bietet dafür einige Funktionen, die sogenannten Image-Funktionen.

Als erstes braucht man für ein Bild natürlich eine Größe, bestehend aus der vertikalen Höhe und horizontalen Breite des Bilds:

$width = 150;
$height = 60; 

Da ein Captcha eher in die Breite als in die Höhe geht, wird das Bild natürlich breiter als hoch.

Nun müssen wir erstmal ein (leeres) Bild erstellen, bzw. den Speicher dafür bereitstellen.
Dazu bietet PHP die Funktion:

 $image = imagecreatetruecolor ($width, $height);
$colorbg = imagecolorallocate ( $image, 243, 243, 243 );

Diese nimmt die Höhe und Breite des Bildes als Parameter.
Danach setzen wir die Hintergrundfarbe des Bildes (hier ein Grauton).

Nun zeichnen wir einfach mal einen Text in das bestehende Bild:

$color = imagecolorallocate ( $image, 10, 36, 106 );
imagestring ($image, 5,30, 70, 'This is my text', $color);
//$image = Referenz auf das Bild
//5 (zweiter Parameter) = Der Font
//30 (dritter Parameter) = horizontaler Abstand
//70 (vierter Parameter) = vertikaler Abstand 

Das Ergebnis sieht in etwa so aus:
captcha_mytext_easy

Nun müssen wir es den Bots etwas schwerer machen:
Einen einfach String zu zeichnen und diesen auszugeben ist zwar einfach, aber jedes halbwegs gute AntiCaptcha Programm würde das sofort auslesen können, zumal ständig der gleiche dastehen würde.

Deshalb fügen wir dem Bild noch einige Verzerrungen hinzu.
Lasst uns zuerst mit dem Hintergrund anfangen. Diesen zeichne ich jetzt völlig random Pixel für Pixel.
Dazu durchlaufen wir das Bild einfach Pixel für Pixel (ein Bild ist ja nichts weiter als ein zweidimensionales Pixelarray).
Setzen einen Pixel in einer random ausgewählten Farbe und laufen zum nächstenPixel

 for($y = 1; $y <= $height; $y++) {
    for($x= 1; $x <= $width; $x++) {
        $r = mt_rand(0,255);
        $g = mt_rand(0,255);
        $b = mt_rand(0,255);
        $color = imagecolorallocate ($image, $r , $g , $b);
        imagesetpixel($image,$x - 1 , $y - 1, $color);
    }
}

Das Ergebnis könnte dann so aussehen:
captcha_randombg

Nun machen wir es nochmals schwerer:
Wir zeichnen einfach noch ein paar Striche durch’s Bild.

 for($ctr = 1; $ctr <= 4; $ctr++){
	imagesetthickness($Image, rand(0,10));
	imageline($image, rand(0,$width),rand(0,$height),rand(0,$width), rand(0,$height),imagecolorallocate ( $image, rand(0,255), rand(0,255), rand(0,255) ));
}

Hier werden 4 Striche gezeichnet, welche irgendwo durch das Bild verlaufen und eine Dicke von 0 – 10 haben.
Die Farbe ist auch wieder random.
Die Funktion dafür lautet:

imageline($image, $startposx, $startposy, $endposx, $endposy , $farbe);

Ergebnis:
captcha_bgstripes

Nun zum wohl wichtigsten Part des Bildes, dem Text:

 function generateRandomString($length) {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $randomString = "";
    for ($i = 0; $i < $length; $i++) {
        $randomString .= $characters[rand(0, strlen($characters) - 1)];
    }
    return $randomString;
}

Hier generieren wir einen String mit der Länge x (als Parameter).
Dazu erstellen wir solange einen String aus den oben gelisteten chars, bis wir die Länge erreicht haben.
Auch ist es wichtig zu wissen, dass wir einfach auf den einzelnen char im string zugreifen können, da ein string ein Array von chars ist (char[]).
Nun weisen wir diesen Text einer Variable (für die Übersichtlichkeit) und erstellen die Farbe des Strings auf dem Bild:

$text = generateRandomString(5); //Random String mit der Länge 5 erstellen
$color = ImageColorAllocate($image, rand(64,255),  rand(128,255) , rand(128,255)); //Farbe des Strings 

Nun nutzen wir, anders als vorhin, eine andere Funktion, um den Text auf das Bild zu schreiben:

 imagettftext($im, $ttfsize, $angle, $x, $y, $color, $ttf, $text); 

Diese bietet einige Vorteile gegenüber

imagestring ($image, $font, $x , $y , $color);

Zum einen kann man einen Winkel definieren, den Text als schräg stellen, zum anderen kann man einen eigenen Font einbinden.
Der Text wird also noch etwas verzerrter dargstellt, bspw.:
captcha_imagestringttf

Fügt man nun all die Funktionen zusammen, die wir in diesem Post behandelt haben, bekommt man ca. folgenden Code (+ einige Anpassungen).
Das Ergebnis sieht wie folgt aus:
captcha_fullcaptcha

Vollständiger Code

 

Wie man dieses CAPTCHA Bild nun nutzt, steht im nächsten Beitrag.

[WordPress] Integrieren des WordPress-Blog in die eigene Homepage #2 Suchfunktion

Integrierung des eigentlichen Blogs findet hier in Part1.

Nun haben wir den Blog mit all seinen Posts eingefügt. Es fehlen allerdings noch ein paar essentielle Features eines jeden Blogs.
Beispielsweise die Suchfunktion, um welche es in diesem Post gehen wird.

Um eine Suche starten zu können benötigen wir natürlich zuerst einmal ein Suchfeld.
In HTML werden Eingabefelder (Textboxen, …) mit <input …>-Tags erstellt.
In unserem Fall einem Textfeld sieht dies folgendermaßen aus:

 <input name="s" type="text" size="20" maxlength="20"> 

Der Bezeichner des Parameters ist hier „s“ (ist bei WordPress Pflicht!!), der Typ ist „text“ also Textfelder und die maximale Eingabelänge beträgt 20 Zeichen.
Nun benötigen wir noch einen Button, welcher eine Aktion (hier: die Suche) auslösen soll.
Dafür gibt es in HTML den Typ „submit“:

 <input type="submit"> 

Sobald man nun auf den Knopf drückt, passiert … nichts.
Wieso? … Man muss dem Browser noch sagen, was beim Drücken des Knopfes passieren soll, welche Aktion also ausgeführt werden soll.
In meinem Beispiel soll die search.php-Seite aufgerufen werden.

 <form action="search.php"> input tags here </form>

Nun wird beim Drücken des Buttons die search.php aufgerufen und der Parameter (hier: s), als Post-Parameter (also in der Browserleiste) übergeben.
Das Ergebnis sieht so aus:

http://www.meineDomainHier.de/search.php?s=MeinSuchtext

Nun zum eigentlichen Part, der Such-Page search.php.
Der Aufbau ähnelt sehr stark dem eigentlich Blog. Auch hier wird die Loop verwendet.

  <?php if (have_posts()) : ?>
         <p class="info">Deine Suchergebnisse f&uuml;r '<strong><?php echo $s ?></strong>'</p> <-- Deine Suchergebnisse fuer XYZ --!>
		 <br/>
         <?php while (have_posts()) : the_post(); //The Loop ?> 

In dieser Loop kann man dann wieder, wie im Blog, die einzelnen Daten, welche man benötigt abrufen.
Ich beschränke mich jetzt hier mal auf den Titel und den Inhalt bzw. eine Vorschau dessen.
Die Ausgabe erfolgt hier per PHP wie folgt:

 <?php the_title();
<?php the_excerpt(); // Vorschautext oder the_content(); ?>

Nun schließt man die while-Schleife noch:

 <? endwhile; ?> 

Sollte kein Ergebnis gefunden worden sein, so wird der else-Zweig der if-have-post-Abfrage ausgeführt:

  <?php else : ?>
         <p class="info">Leider wurde f&uuml;r den Suchbegriff '<strong><?php echo $s ?></strong>' nichts gefunden</p>
      <?php endif; ?> 

Damit ist die Suchfunktion fertig.

[WordPress] Integrieren des WordPress-Blog in die eigene Homepage #1 Einstieg + Blog-Hauptseite

Eigentlich wollte ich einen eigenen WordPress-Blog aufziehen, ähnlich diesem hier.
Doch hatte ich schon eine Homepage mit komplettem Template fertig.
So stellte sich mir die Frage, ob ich

  • einen eigenen WordPress-Theme bauen
    oder
  • WordPress in die eigene Homepage integrieren soll.

Ich entschied mich für letzteres.
Wie fängt man, aber an ein fertiges Backend in eine eigene Homepage zu integrieren?
Wie frage ich alles ab?
Man benötigt dazu die Datei wp-blog-header.php, welche sich im Stammverzeichnis des WordPress-Ordners befindet.
Die Datei lädt die ganze Umgebung, d.h. alle benötigten Funktionen, also genau das, was wir wollen.

/**
* Loads the WordPress environment and template.
*
* @package WordPress
*/

Nun lädt man die Datei via php in die eigene Seite:

 <!?php include ('meinPfad/wp-blog-header.php'); ?> 

Dies tut man am besten, der Übersichtlichkeit wegen, vor dem HTML-Tag des Dokuments:

<?php include ('wordpress/wp-blog-header.php'); ?>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>Blog</title>...

Nun zum eigentlichen Thema, dem Anzeigen von Posts.
In WordPress gibt es die sogenannte Loop.
Diese wird genutzt, um alle Posts mit einer Loop (while-Schleife) zu bekommen. Sie ist ganz einfach und sieht wie folgt aus:

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php //TO DO HERE ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, keine Posts gefunden'); ?></p>
<?php endif; ?> 

In dieser while-Schleife können nun alle Objekte der Funktion the_post(); ausgelesen werden.
Hier sind folgende für meine Belange wichtig gewesen:

  • Die Post-ID:  the_ID();
  • Der Titel des Posts: the_title();
  • Die Kategorien mit Namen und Category-ID (später)
  • Die Tags: the_tags(…);
  • Das Datum: the_date();
  • Der Autor: the_author();
  • Der Inhalt: the_content();

Diese Funktion ruft man einfach innerhalb der Loop auf. So wird automatisch der Autor, das Datum, … des entsprechenden Post ausgelesen:

 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_ID(); ?>
<?php the_title(); ?>
<?php the_tags(__('Tags: '), ', ', ' — '); //Die Tags werden mit Komma getrennt ?>
<? the_date();?>
<?php the_author(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<?php _e('Sorry, bisher wurden keine Beiträge geschrieben. Nichts gefunden.'); ?>
<?php endif; ?>

Das einzige, kleine Problem, welches ich noch hatte, war das Auslesen der Kategorien mit Name.
Dies war aber im Endeffekt relativ einfach gelöst, indem man die Funktion get_the_category(); in einer foreach-Schleife ausführte und die Rückgaben ausliest und ausgibt.
Es sollte grob so aussehen (Achtung, etwas buggy mit dem Komma):

<?php _e("Kategorien: "); ?> <?php //the_category(',')
foreach((get_the_category()) as $category) {
    echo $category->cat_name . ', ';
}?>

Im Endeffekt sieht der ganze Code in etwa so aus, wenn man ein paar eigene divs mit einfließen lässt, um die Ausgabe etwas zu designen:

 <div  style="width:450px;min-height:749px;">

<?php if (have_posts()) : while (have_posts()) : the_post(); _e("<br>");?>
<div class="post" id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<div class="meta"><?php _e("Kategorien: "); ?> <?php //the_category(',')
foreach((get_the_category()) as $category) {
    echo $category->cat_name . ', ';
}?> <br/>
<?php the_tags(__('Tags: '), ', ', ' — '); ?>
<?php _e("Geschrieben am: "); ?> <? the_date(); _e("<br>");?>
<?php _e("Geschrieben von: "); ?><?php the_author(); ?>
<?php edit_post_link(__('edit')); ?>
<?php _e("<hr/>"); ?>
</div>
<div class="storycontent">
<?php the_content(__('(weiterlesen...)')); ?>
</div>
</div>

<?php endwhile; else: ?>
<p><?php _e('Sorry, bisher wurden keine Beiträge geschrieben. Nichts gefunden.'); ?></p>
<?php endif; ?>
</div> 

Der Blog ist eingebunden.
Part 2 mit Suche, Part 3 mit Archiv für Kategorien, … folgen.

© 2018 Abou Chleih. Alle Rechte vorbehalten.

Thema von Anders Norén.