PHP-Loginformular-Tutorial

PHP Login-Skript Tutorial – Einfaches Loginformular in PHP7

Du benutzt es jeden Tag im Internet: Den Benutzer-Login.

Wenn du auf deine persönlichen Inhalte zugreifen willst, musst du dich bei den meisten Diensten im Internet zunächst auf der jeweiligen Webseiten anmelden. Dazu gehören bspw. dein Chat mit Freunden.

In diesem PHP-Tutorial lernst Du, wie Du einen sehr einfachen Passwortschutz mit Hilfe in PHP7 entwickelst.

Was Du brauchst (Voraussetzungen für dieses Tutorial)

Um den Zugangsschutz wie hier zu entwickeln, benötigst Du:

  • einen Webserver, bspw. Apache, mit bereits installiertem PHP-Modul (oder du lädst dir XAMPP kostenlos auf deinen Computer herunter)
  • ein Verzeichnis auf dem Webserver namens lerneprogrammieren, in dem alle hier vorgestellten PHP-Skripte abgelegt werden. Unter Linux verwende ich hier das Verzeichnis /var/www/html/lerneprogrammieren
  • einen einfachen Texteditor zum Schreiben der beiden PHP-Skripte namens anmeldung.php und auswertung.php
  • Optional: Die absoluten Grundlagen zu PHP sowie ein bisschen Geduld 😉

PHP-Programm oder -Skript?

Hier programmieren wir, d.h. Du erstellst eine Abfolge von Anweisungen, die der Computer für Dich dann ausführt. Damit er deine Anweisungen auch versteht, werden die Anweisungen in mehreren Stufen in Befehle für den Prozessor übersetzt. Die Übersetzung findet automatisch im Hintergrund statt.

Unser kleines Programm wird zunächst auf Fehler überprüft, dann vom PHP-Interpreter in Maschinensprache ("Prozessorbefehle") übersetzt und dann ausgeführt. Da Du die Übersetzung in Maschinensprache nicht selbst machst, wird ein solches Programm Skript genannt.

Was das Skript machen wird

Du baust eine Anmeldeseite für eine Webseite, die nur mit einem Passwort zugänglich ist. Wie ein Pförtner, der den Zugang überprüft. Du erstellst dazu zwei kleine Skripte -- genannt anmeldung.php und auswertung.php.

Anmeldung.php

anmeldung.php ist eine Seite mit einem Eingabefeld für das Passwort, darin tippst Du dieses später ein. Dazu gibt es noch zwei Knöpfe, die mit "Zurücksetzen" und "Anmelden" beschriftet werden. Ein Mausklick auf den Knopf "Zurücksetzen" setzt deine Eingabe in dem Feld zurück, und ein Mausklick auf "Anmelden" übernimmt deine Eingabe aus dem Feld, und sendet es an das zweite Skript zur Auswertung.

Auswertung.php

auswertung.php überprüft die empfangene Eingabe auf Korrektheit, und falls das empfangene Passwort stimmt, sagt es ok. Falls nicht, beschwert es sich bei Dir und leitet Dich zur Anmeldung zurück.

Hier lernst Du zunächst einen sehr einfachen, aber unsicheren Weg. Das Passwort wird nur im Klartext im Skript auswertung.php hinterlegt. Später baust Du mehr Sicherheit ein -- aber es wird dann auch ein klein wenig komplizierter.

Ablauf

  1. Zur Entwicklung gehst Du schrittweise vor. In jedem Schritt fügst Du ein weiteres Stück Programmcode hinzu. Wie bereits oben genannt, heißen die beiden Skriptdateien am Ende anmeldung.php bzw. auswertung.php. Um den Programmcode zu testen, heißt die erste Datei in Schritt 1 anmeldung-1.php, in Schritt 2 dann anmeldung-2.php usw.
  2. In deinem Webbrowser schaust Du dir die Ausgabe des Zwischenschrittes an. Lade die Datei auf deinen Webserver hoch und gib danach im Webbrowser die Adresse (URL) http://localhost/lerneprogrammieren/anmeldung-1.php für den ersten Schritt an.
  3. Das http:// am Anfang ist wichtig, damit das PHP-Skript vom PHP-Modul interpretiert wird und dann das Ergebnis der Interpretation vom Webbrowser dargestellt werden kann.

Schritt 1: Grundlagen (anmeldung.php)

Du erstellst zuerst den Rahmen der Anwendung, genannt Dokumentenkopf. Dieser besteht aus der Dokumentenangabe, dem Beginn und Ende des HTML-Dokuments, dem Seitenkopf und dem Seiteninhalt.

In der Dokumentenangabe ist HyperText Markup Language (HTML) festgelegt. Im Seitenkopf stehen die Metadaten zum Inhalt (HTML) und die im Dokument verwendete Zeichenkodierung (UTF-8). Darunter steht der Titel der Seite -- hier einfach "Anmeldung" genannt. Der Seiteninhalt besteht derzeit
nur aus einer Überschrift in großer Schrift.

Zur besseren Lesbarkeit benutze beim Programmieren die Einrückung mit vier Leerzeichen. Damit siehst Du leichter, was in welchen Abschnitt gehört. Speichere den Programmcode als Datei anmeldung-1.php im Verzeichnis des Webservers ab.

In der Dokumentenangabe ist HyperText Markup Language (HTML) festgelegt. Im Seitenkopf stehen die Metadaten zum Inhalt (HTML) und die im Dokument verwendete Zeichenkodierung (UTF-8). Darunter steht der Titel der Seite -- hier einfach "Anmeldung" genannt. Der Seiteninhalt besteht derzeit nur aus einer Überschrift in großer Schrift.

Zur besseren Lesbarkeit benutze beim Programmieren die Einrückung mit vier Leerzeichen. Damit siehst Du leichter, was in welchen Abschnitt gehört. Speichere den Programmcode als Datei anmeldung-1.php im Verzeichnis des Webservers ab.

Code - anmeldung-1.php

<!DOCTYPE html>
<html>
    <head>
    <title>Anmeldung</title>
    </head>

    <body>
        <h1>Bitte melde dich hier zunächst an.</h1>
    </body>
</html>

 

Führst Du das PHP-Skript aus, erscheint die folgende Darstellung im Webbrowser:

php login skript anmeldung 1

Schritt 2: PHP-Angabe ergänzen

Nun ergänzt Du den Dokumenteninhalt um die PHP-Angabe -- Beginn und Ende sind mit <?php und ?> gekennzeichnet. Alle Zeilen, die zwischen diesen beiden Markierungen stehen, werden vom PHP-Interpreter als Programmcode erkannt.

Als nächstes definierst du eine Variable namens $seiteninhalt, die noch leer ist und schrittweise mit Inhalt gefüllt wird. Gib deren Inhalt mit echo aus.

Code - anmeldung-2.php

    <body>
        <h1>Bitte melde dich hier zunächst an.</h1>
        <?php
            // definiere einen leeren Seiteninhalt
            $seiteninhalt = "";
            
            // Seiteninhalt ausgeben
            echo $seiteninhalt;
        ?>
    </body>

 

Speichere den Programmcode als Datei anmeldung-2.php im Verzeichnis des Webservers ab. Wenn Du nun das Skript aufrufst, ist die Ausgabe genau so wie in Abbildung 1. Im nächsten Schritt kommen weitere Inhalte dazu.

Schritt 3: Ergänze das Eingabefeld und die beiden Knöpfe

Vor dem Eingabefeld für das Passwort kommt ein bisschen Text. Du möchtest schließlich auch wissen, wofür das Eingabefeld ist. Diesen definierst Du in einem Absatz als "Passwort:" (eingeschlossen in den Markierungen <p> und </p> für Beginn und Ende des Absatzes). Das komische Zeichen \n fügt einen Zeilenumbruch im Programmcode hinzu. Damit wird dieser leichter lesbar. Der Operator .= klebt zwei Zeichenketten zusammen (hängt den Inhalt rechts neben dem Operator an den Inhalt links neben dem Operator an).

Nun definierst Du ein Eingabefeld vom Typ password und mit dem Namen passwort. Wenn Du später dein Passwort eingibst, erscheinen im Eingabefeld nur Punkte -- ein Punkt pro eingegebenes Zeichen. Somit kann Dir niemand dein Passwort mopsen, wenn er neben Dir sitzt und auch auf den Bildschirm schaut.

Jetzt definierst Du noch zwei Knöpfe -- ein Eingabefeld vom Typ submit mit der Beschriftung "Anmelden" und ein weiteres vom Typ reset mit der Beschriftung "Zurücksetzen". Damit wird die Webseite interaktiv. Als nächstes füge das Eingabefeld und die beiden Knöpfe zum Seiteninhalt hinzu.

Code - anmeldung-2.php

<?php
	// definiere einen leeren Seiteninhalt
	$seiteninhalt = "";

	// Eingabefeld mit Text
	$eingabeFeld = "<p>Passwort:</p>\n";
	$eingabeFeld .= "<p>\n";
	$eingabeFeld .= "<input type=\"password\" name=\"passwort\">\n";
	$eingabeFeld .= "</p>\n";

	// zwei Knöpfe
	$knopfAnmelden = "<input type=\"submit\" value=\"Anmelden\">\n";
	$knopfReset = "<input type=\"reset\" value=\"Zurücksetzen\">\n";
	
	// Eingabeinhalt und Knöpfe zum Seiteninhalt hinzufügen
	$seiteninhalt .= $eingabeFeld . $knopfAnmelden . $knopfReset;

	// Seiteninhalt ausgeben
	echo $seiteninhalt;
?>

Führst Du das Skript nun aus, sieht die Ausgabe im Webbrowser wie im folgenden Bild aus:

php login skript anmeldung 2

Schritt 4: Ergänze das Skript um ein Formular

Jetzt kannst Du bereits Eingaben vornehmen, aber noch nicht auswerten. Das kommt jetzt hinzu. Damit das Skript auswertung.php das eingegebene Passwort zur Auswertung bekommen kann, muss ihm anmeldung.php dieses senden. Dazu ergänzt Du das bestehende Anmeldeformular noch um Formularmarkierungen wie folgt:

Code - anmeldung-2.php

	// definiere Eingabeformular
	$formularAnfang = "<form action=\"auswertung.php\" method=\"post\" id=\"passwort\">\n";
	$formularEnde = "</form>\n";

	// Seiteninhalt ergänzen
	$seiteninhalt = $formularAnfang . $seiteninhalt . $formularEnde;

 

Diese Zeilen legen fest, dass zur Auswertung der Eingabe das Skript auswertung.php aufgerufen wird, das Passwort unsichtbar dahin übertragen wird (Methode "post"), nur das Passwort-Formular übertragen wird (Id "passwort") und der bestehende Seiteninhalt um die HTML-Tags für Formulare (<form> und </form>) ergänzt wird.

Rufst Du nun das Skript auf, sieht die Ausgabe genauso wie in Schritt 3 aus. Gibst du bereits einen Text im Eingabefeld ein und drückst den Knopf "Zurücksetzen", wird das Eingabefeld geleert. Drückst Du hingegen auf den Knopf "Anmelden", erfolgt eine Weiterleitung zum Skript auswertung.php.

Das Skript existiert noch nicht -- daher siehst Du nach dem Aufruf nur eine Fehlermeldung im Webbrowser. Im nächsten Schritt programmieren wir das Skript für die Auswertung -- dann wird alles funktionieren.

Schritt 5: Auswertung der Eingabe (auswertung.php)

Nun erstellst Du das Skript auswertung.php. Es beginnt ebenfalls wieder mit dem HTML-Header und den Kopfzeilen. Als Titel legst Du nun "Auswertung" und als Überschrift "Auswertung der Anmeldung" fest.

Code - auswertung.php

<!DOCTYPE html>
<html>
    <head>
        <title>Auswertung</title>
    </head>

    <body>
        <h1>Auswertung der Anmeldung</h1>
    </body>
</html>

Nun ergänzt Du den PHP-Kopf und das Auslesen der übermittelten Parameter vom Skript anmeldung.php. Das übermittelte Eingabefeld befindet sich in der PHP-Variable $_POST. Über den Namen des Eingabefeldes greifst Du auf den Eintrag zu.

Nun gilt es auch das eigentliche Passwort zu hinterlegen. Hier ist es der Wert "superGeheim". Der Einfachheit halber speichern wir es in der lokalen Variable $passwort ab.

Danach vergleichst Du, ob das hinterlegte mit dem übermittelten Passwort übereinstmmt. Dazu benutzt Du einen Vergleich mit Hilfe des doppelten Gleichheitszeichens und das if-else-Konstrukt. Sind beide Werte identisch, wir der Zweig unter if ausgeführt -- eine positive Ausgabe erscheint. Falls nicht, bekommst Du eine Fehlermeldung und einen Link zurück zum Anmeldeformular. Der jeweilige Ausgabetext wird danach zum Seiteninhalt ergänzt und dieser wird dann am Ende mit 'echo' ausgegeben.

Code - anmeldung.php

<?php
	// definiere einen leeren Seiteninhalt
	$seiteninhalt = "";

	// lese übermitteltes Passwort
	$eingabefeld = $_POST["passwort"];

	// definiere Passwort
	$passwort = "superGeheim";
	
	// vergleiche beide Werte
	if ($passwort == $eingabefeld) {
		// eingegebenes Passwort ist korrekt
		$ausgabe = "<p>Das eingegebene Passwort ist richtig. Der Zugang ist nun freigeschaltet.</p>\n";
	} else {
		// eingegebenes Passwort ist falsch
		$ausgabe = "<p>Das eingegebene Passwort ist leider falsch. Bitte wiederhole die Anmeldung.</p>\n";
		// Link zur Anmeldung
		$link = "<a href=\"anmeldung.php\">Zurück zur Anmeldung</a>";
		$ausgabe .= $link;
	}
	
	// ergänze den Seiteninhalt um die Ausgabe
	$seiteninhalt .= $ausgabe;

	// Seiteninhalt ausgeben
	echo $seiteninhalt;
?>

Nachdem Du das Skript auswertung.php auf den Webserver hochgeladen hast, kannst Du testen, ob beide Skripte miteinander funktionieren. Gibst Du das richtige Passwort im Eingabefeld ein und klickst auf den Knopf "Anmelden", erscheint eine Ausgabe mit der Erfolgsmeldung. Falls Du dich vertippt hast oder das Passwort nicht weißt, meckert Dich das Skript an und zeigt Dir einen Link zur Anmeldeseite an.

php login skript auswertung

Das fertige PHP-Skript nach dem Login!

Fazit zum Tutorial

Hier hast Du gelernt, wie Du ein einfaches Skript mit Interaktion erstellst. Es zeigt die Verwendung von Formularen zur Eingabe, deren Weiterleitung und Auswertung.

  • 30. Mai 2020
Click Here to Leave a Comment Below 0 comments

Leave a Reply: