Login-Bereich
Wichtig ist neben dem Einloggen, dass wir speichern können, dass sich jemand erfolgreich eingeloggt hat. Daher ist es wichtig, dass wir ganz am Anfang (extrem wichtig: vor jeglicher Ausgabe) eine SESSION starten.
<?php
session_start();
?>
<!DOCTYPE html>
Und nun können wir eine Seite mit der ID „login“ integrieren, die über ein Formular verfügt:
<!-- Hier kommt die Login-Seite -->
<div data-role="page" id="login" data-theme="b">
<?php anzeige_kopfbereich(); ?>
<div data-role="main" class="ui-content">
<h1>Login</h1>
<form data-ajax="false" id="loginformular" method="post"
action="index.php#login">
<div data-role="fieldcontain">
<fieldset>
<label for="benutzername">Benutzername</label>
<input type="text" name="benutzername" id="benutzername" focus>
<label for="kennwort">Kennwort</label>
<input type="password" name="kennwort" id="kennwort">
<input type="submit" value="einloggen">
</fieldset>
</div>
</form>
</div>
<?php anzeige_fussbereich('login'); ?>
</div>
EXTREM wichtig ist das deaktivieren der Standard-Ajax-Funktion von jQuery mobile. Sonst hat man mit heftigen Probleme zu kämpfen und wundert sich, warum manche Dinge einfach nicht funktionieren wollen. Daher muss bei dem HTML-Befehl <form unbedingt das Attribut data-ajax="false" dabei sein.
Weiterhin muss jedes Formular auf allen Bereichen jeweils einen eindeutigen und nur einmal vorkommenden ID bekommen. Ansonsten mach jQuery mobile auch Probleme. Zur Erinnerung. Alle Seiten und Unterseiten werden ja auch einen Schlag geladen und nur ausgeblendet.
Unser Formular-Einstieg sieht also so aus:
<form data-ajax="false" id="loginformular" method="post" action="index.php#login">
Damit die Eingabefelder besser in unserem Design sichtbar werden, ergänzen wir unser CSS-Design über:
#einlogformular input {
border: #999 solid 1px;
}
Und somit haben wir folgendes Aussehen – bisher ohne direkte Funktion. Diese hauchen wir nun dem Formular ein.
Wir lassen das Formular absenden an „index.php#login“.
Wie können also vor der Ausgabe des Formulars auswerten, ob Formularwerter abgesendet worden sind und darauf reagieren. Lassen wir uns einfach einmal anzeigen, was nach dem Ausfüllen des Formulars über das Array $_POST übertragen wird.
<!-- Hier kommt die Login-Seite -->
<div data-role="page" id="login" data-theme="b">
<?php anzeige_kopfbereich(); ?>
<div data-role="main" class="ui-content">
<h1>Login</h1>
<?php
echo '<pre>';
print_r($_POST);
echo '</pre>';
?>
<form data-ajax="false" id="loginformular" method="post"
action="index.php#login">
Diese können wir nun über $_POST anfragen und über IF vergleichen:
if ( isset($_POST['benutzername'])
and isset($_POST['kennwort'])
and $_POST['benutzername'] == 'admin'
and $_POST['kennwort'] == '1234'
)
{
$_SESSION['eingeloggt'] = date("H:i:s");
}
Der Zugangsdaten sind im folgenden Beispiel fest im Programmcode hinterlegt. Hier könnte man noch umfangreich über eine weitere MySQL-Tabelle diese hinterlegen und abfragen – wichtig ist hier das Prinzip zu verstehen und das Prinzip versteht man am einfachen Code.
Daher werden im Folgenden der durch das Formular erfasste Benutzername und das Kennwort über eine IF-Anweisung mit dem hinterlegten Werten „admin“ für den korrekten Benutzernamen und dem Kennwort „1234“ verglichen.
Ist beides korrekt eingetragen wird die $_SESSION[eingeloggt] mit der aktuellen Uhrzeit gesetzt.
Hat sich jetzt nun der Besucher korrekt eingeloggt, benötigen wir kein Formular mehr, sondern nur noch die Möglichkeit, sich wieder ausloggen zu können.
<?php
if ( isset($_SESSION['eingeloggt']) )
{
// eingeloggt, daher Möglichkeit zum Ausloggen geben
echo '<p><a data-ajax="false" href="index.php?aktion=ausloggen">ausloggen</a>
</p>';
}
else
{
?>
<form data-ajax="false" id="loginformular" method="post"
action="index.php#login">
<div data-role="fieldcontain">
<fieldset>
<label for="benutzername">Benutzername</label>
<input type="text" name="benutzername" id="benutzername" autofocus>
<label for="kennwort">Kennwort</label>
<input type="password" name="kennwort" id="kennwort">
<input type="submit" value="einloggen">
</fieldset>
</div>
</form>
<?php
}
?>
Sind die Einloggdaten nicht korrekt, wird die SESSION-Variable $_SESSION[eingeloggt] gelöscht über die PHP-Anweisung „unset“. Dies passiert ganz am Anfang unseres PHP-Programmes sofort nach starten der SESSION:
<?php
session_start();
if ( isset($_GET['aktion']) and $_GET['aktion'] == "ausloggen")
{
unset($_SESSION['eingeloggt']);
}
?>
<!DOCTYPE html>
Soweit, so gut – im nächsten Kapitel kommt das Einbinden der Datenbank.
Download Zwischenstand
Hier unser bisher entstandener Code komplett in einer ZIP-Datei zum Download:
https://www.php-kurs.com/webapp/webapp-stand-1-mit-design.zip
Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).
Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button: