Seitenschutz
Tutorial

Secured Seitenschutz mit MySQL Benutzerverwaltung
von Werner-Zenk.de
Flagge You may translate that page with the Google translator in the footer at the bottom of this page
Do not use translated codes

Tutorial


Zum Einbau dieser Skripte werden gewisse Kenntnisse in CSS, HTML und PHP vorausgesetzt. Ihr solltet Euch mit relativen Pfadangaben zu Dateien bereits sehr gut auskennen, denn diese müssen hier in jedem Skript händisch angepasst werden. Der Einbau ist somit etwas zeitaufwendig und man muss jedes Skript sehr genau auf alle Pfadangaben überprüfen.

Wie man Bilder auf der sicheren Seite zusätzlich vor dem Zugriff von außen schützt, habe ich als Tutorial auf meine "Sichere Seite" geschrieben.

Bitte ladet Euch die Skripte von meiner Download-Seite herunter. Ihr findet die Skripte in diesem ZIP-Archiv:

2021-12-27-mysql_webseitenschutz.zip

Leider hat Werner-Zenk.de seine Webseite am 10.07.2022 eingestellt.

Entpackt die herunter geladene ZIP-Datei "2021-12-27-mysql_webseitenschutz.zip" mittels Doppelklick.

Am 27.11.2022 hat Werner seine Domain Werner-Zenk.de wieder online gestellt.

Hier geht es zum aktuellsten Skript MySQL-Webseitenschutz auf der Seite von Werner-Zenk.de.

Ich verwende und beschreibe hier die Version vom 03.05.2021, die eine MySQL-Datenbank benötigt und PHP 7.3 oder höher am Server. Lest auch die Datei "lies_mich.txt", die dem Download beiliegt.

Das Skript verwendet zum Versand der Mails den "PHPMailer v6.4.1", der kompatibel mit PHP Versionen 5.5 bis 8.0 ist.

Erstellt im Kundenmenü von Eurem Provider eine neue MySQL-Datenbank und notiert Euch die Zugangsdaten.

Öffnet nun mit einem Text-Editor wie "Notepad++" , damit die Kodierung kontrolliert auf "UTF-8" bestehen bleibt, die sich im Ordner "admin" befindende Konfigurationsdatei:

einstellungen.php


Tragt gleich oben die
Zugangsdaten zu der MySQL-Datenbank ein, was dann ungefähr so aussieht:


// Verbindungsdaten zur Datenbank 
// Nur korrekte Angaben führen zu einer erfolgreichen Verbindung! 
$DB_HOST = "db1000123456.hosting-data.io"; // Host-Adresse 
$DB_NAME = "dbs123456"; // Datenbankname 
$DB_USER = "dbu123456"; // Benutzername 
$DB_PASSWORD = "ich123456"; // Passwort


Tragt etwas tiefer den Namen und das Passwort des Administrators ein:


// Administrator Name
// Der Admin. Name wird in der DB-Tabelle gespeichert. 
// Der Admin. Name wird in der E-Mail zum Benutzer (Registrierung) angezeigt! 
$ADMIN_NAME = "Mein-Name"; // user 

// Administrator Passwort (max. 70 Zeichen) 
// Das Admin. Passwort wird bei der Installation verschlüsselt in der DB-Tabelle gespeichert. 
$ADMIN_PASSWORT = "ich123456"; // 0000


Es folgen jede Menge möglicher Einstellungen, die alle sehr gut kommentiert und somit selbsterklärend sind. Geht diese genau und einzeln durch und probiert diese aus und testet es.

Tragt dort Eure e-Mail-Adresse, Euren Domain-Namen oder Seitenbeschreibung und z.B. ein, ob neue Benutzer sich selbst über einen Link via e-Mail freischalten können oder ob das nur dem Administrator vorbehalten bleibt, der mit jedem neuen Eintrag immer mittels einer e-Mail benachrichtigt wird.


Kopiert nun sämtliche Dateien auf Euren Server. Ruft als allererstes die Datei:

installation.php

auf. Dadurch wird die Tabelle der MySQL-Datenbank automatisch mit allen Feldern angelegt. Nach erfolgreicher Installation, könnt Ihr die Datei "installation.php" am Server löschen.

Da Mobirise sämtliche Seiten in das Stammverzeichnis eines Projekts auf den Server publiziert, habe ich hier alle Seiten aus dem Ordner "register" ein Verzeichnis höher, in das Stammverzeichnis meines Projektes, kopiert, Das sind dann die Seiten, die ich in Mobirise mit gleichem Namen erstellt habe. So müssen nicht sämtliche Pfade und Dateinamen in den Skripten geändert werden. Ich habe also auf das Verzeichnis "register" verzichtet.

Ebenso habe ich aus dem Verzeichnis "benutzer" die geschützte Seite "hauptseite.php" ein Verzeichnis höher in das Stammverzeichnis kopiert.

Auf die sich dort ebenfalls befindende Beispielseite "mike.php" habe ich ganz verzichtet. Dies ist nur eine Beispielseite für eine ganz persönliche Seite, die eben hier nur als Beispiel für einen Benutzer "Mike" erstellt wurde. Ich habe also dann ebenfalls ganz auf das Verzeichnis "benutzer" verzichtet. 

Ihr legt Euch nun alle Seiten der Anwendung, außer der Startseite "index.php", nach und nach in Mobirise an. Alle PHP-Seiten müssen dann entsprechend den Namen der Skripte vom Werner erhalten und in den Seiteneinstellungen mit der Dateierweiterung .php eingetragen werden. Ihr könntet auch eigene Seitennamen verwenden, hättet dann aber sehr viel mehr Arbeit, weil Ihr alle Seitennamen in den Skripten anpassen müsstet.

Das sind folgende Seiten, die dann beim Publizieren mittels Mobirise, mit den von Euch geänderten Mobirise-Seiten, überschrieben werden:

anmeldung.php
hauptseite.php
passwort_aendern.php
passwort_vergessen.php
register.php


Auf die Beispielseite "nutzungsbedingungen.htm" wird im Skript "register.php" verlinkt. Dort habe ich den Link auf meine Impressum- und Datenschutzseite geändert.

Ich beschreibe hier beispielhaft die Änderungen an der Seite "anmeldung.php". Ändert alle anderen Seiten später in entsprechender Art,

Natürlich benötigt Ihr für einen Einbau der Skripte die kostenpflichtige Erweiterung "Code Editor" von Mobirise, damit die hier beschrieben Einstellungen überhaupt möglich sind.

Der obere PHP-Teil eines jeden Skriptes gehört immer in Mobirise in den Bereich der Seiteneinstellungen:

"Before <!DOCTYPE>, <html> and <head> tags:"

... achtet bitte zwingend darauf, dass keine Leerzeile am Beginn stehen bleibt. Der PHP-Teil ist der Bereich, der zwischen dem einleitenden und schließenden PHP-Tag steht (inklusive dieser Tags):


<?php
    PHP Inhalt
?>


Gleich oben im Skript, wird die Browser-Sitzung ("session") gestartet und die Datei "einstellungen.php" aus dem Verzeichnis "admin" eingelesen, das aber nun im gleichen Stammverzeichnis (./) wie unsere Seiten liegt und nicht ein Verzeichnis höher (../).


session_start();
include "../admin/einstellungen.php"; 
$fehler = false;

Ändert also diese relative Pfadangabe in allen Skripten entsprechend auf das gleiche Verzeichnis mit einem Punkt davor (./).

session_start();
include "./admin/einstellungen.php"; 
$fehler = false;

Das gilt auch für viele andere Pfadangaben zu Seiten, die Ihr alle überprüfen und anpassen müsst, wie z.B.:

header("Location: ../benutzer/hauptseite.php");

Das Verzeichnis "benutzer" haben wir entfernt und die Seite "hauptseite.php" hat Mobirise dann in das Stammverzeichnis, also das gleiche Verzeichnis wie unsere Seite "anmeldung.php",  publiziert. Es muss dann also wieder heißen:

header("Location: ./hauptseite.php");

Bitte prüft jede Seite einzeln nach dem Publizieren, ob alle diese Pfadangaben auch richtig geändert wurden und nichts vergessen wurde.

Zieht Euch einen möglichst einfachen Textblock auf, ich habe hier das Standard-Thema "Mobirise 4" verwendet und einen einfachen Textblock aus der Gruppe "Article" verwendet. Hier tragt Ihr den Body-Code in den Bereich "HTML Editor" vom "Code Editor" ein.  In dem Beispiel der Seite "anmeldung.php" wäre das dieser Bereich also das Formular zur Anmeldung sowie ein PHP-Teil mit Hinweisen an den Benutzer, der bei mir dann so aussieht:

<!-- Beginn Anmeldung Seitenschutz -->
<form action="anmeldung.php" method="post" accept-charset="UTF-8"> 

<p> 
 <label for="benutzername"><u>B</u>enutzername:</label> <span class="pflichtfeld">✲</span> <br> 
 <input type="text" name="benutzername" id="benutzername" size="25" maxlength="25" <?= isset($_GET["abmeldung_ok"]) ? '' : '';?> required="required" accesskey="b"><br> 
 <span class="hilfetext">Geben Sie hier Ihren Benutzernamen ein.</span> 
</p> 

<p>
 <label for="passwort"><u>P</u>asswort:</label> <span class="pflichtfeld">✲</span> <br> 
 <input type="password" name="passwort" id="passwort" size="25" required="required" accesskey="p">  
 <a href="passwort_vergessen.php"><small>Passwort vergessen</small></a><br> 
 <span class="hilfetext">Geben Sie hier Ihr Passwort ein.</span> 
</p> 

<p>
  <input type="hidden" name="token" value="<?=$_SESSION["token"];?>"> 
  <input type="submit" class="btn btn-primary" value="Anmelden"> 
</p> 

</form>

<?php
if (isset($_GET["abmeldung_ok"])) { 
 echo '<p class="ok">&#10004; Sie wurden erfolgreich abgemeldet.</p>'; 

if (isset($fehler, $_SESSION["versuche"]) && 
    $_SESSION["versuche"] < $ANMELDEVERSUCHE) { 
 echo '<p class="ko">&#10008; Der Benutzername oder das Passwort ist falsch!<br> 
         Anmeldeversuch ' . $_SESSION["versuche"] . ' von ' . $ANMELDEVERSUCHE . '.</p>'; 

if (isset($_SESSION["versuche"])) { 
 if ($_SESSION["versuche"] >= $ANMELDEVERSUCHE) { 
  echo '<p class="ko">&#10008; Es stehen Ihnen keine weiteren Anmeldeversuche zur Verfügung!</p>'; 
 } 

?> 
<!-- Ende Anmeldung Seitenschutz -->


Bei allen geschützten Seiten, wie hier der Seite "hauptseite.php", gehört dann diese Überprüfung (wie unten), ob der Benutzer angemeldet ist, wieder ganz oben vor den "<!DOCTYPE>" in die Seiteneinstellungen in den Bereich:

"Before <!DOCTYPE>, <html> and <head> tags:"

Ist der Benutzer nicht angemeldet, wird wieder automatisch zu Seite "anmeldung.php" weitergeleitet:


<?php
/* 
 * Webseitenschutz 
 * Diesen PHP-Code für alle Seiten benutzen 
 * die geschützt werden sollen. 
 */ 
session_start(); 
if (!isset($_SESSION["login"])) { 
 header("Location: ./anmeldung.php"); 
 exit; 

?>


Ich habe auf meinen Seiten auch noch die CSS für den Formular-Bereich aus der CSS Datei "style.css" vom Werner, in den "Code Editor" in den Bereich  "CSS Editor" kopiert. Natürlich kann diese CSS beliebig angepasst werden.

Die Passwörter werden in der Datenbank verschlüsselt gespeichert, sodass auch der Administrator diese nicht lesen kann.

Alle einzelnen Änderungen hier aufzuführen, würde den Rahmen meines Tutorials sprengen, daher möchte ich Euch bitten, eventuelle Fragen bei uns im 
Forum zu stellen.

Unten ein Screenshot vom Einbau in den "Code Editor":

Code