18 Exkurs : HTML, PHP
Wir werden im folgenden eine datenbank-gestützte Webanwendung in Betrieb nehmen. Die Inhalte aus diesem Exkurs (dieses und die folgenden Kapitel) gehen weit über die geforderten Inhalte aus dem Modul 104 hinaus. Ziel soll es sein, Ihnen eine konkrete Anwendung der Inhalte aus dem Modul zu zeigen. Gleichzeitig sollen Sie auch eine Einführung in SQL erhalten.
Wir arbeiten in diesem Exkurs mit einer Linux-VM, auf welcher die folgenden Dinge bereits vorinstalliert sind:
- Apache2-Webserver
- Programmiersprache php
- Die Datenbanksoftware MySQL
- Die Software PhpMyAdmin
18.1 Zugriffe
Die Passwörter für die VM lauten:
- VM:
- bztadmin / admin -> sudo-Passwort: admin
- Datenbank-Root:
- root / PASSWORD
18.2 Wie arbeiten
Linux ist ein echtes Mehrbenutzer-Betriebssystem, was zur Folge hat das Datei- und Ordnerberechtigungen ganz genau umgesetzt werden. Wir werden mit dem Texteditor Atom Dateien und Ordner für den Webserver erstellen und bearbeiten. Damit das funktioniert, müssen Sie den Editor Atom als root laufen lassen:
sudo atom
18.3 HTML und CSS und PHP?
Ein paar Begriffserklärungen vorne weg - was ist (nach Wikipedia):
- HTML:
- HTML ist eine Abkürzung für Hypertext Markup Language. Auf Deutsch bedeutet dies so viel wie „Auszeichnungssprache für verknüpften Text“. HTML ist heute der wichtigste Auszeichnungsstandard im Internet. Er ist Voraussetzung für die Programmierung und das Design von Webinhalten. Andere Standards wie PHP bauen in erheblichem Maße auf HTML auf.
- CSS:
- Cascading Style Sheets, kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide Webs. Sie ist ein sogenannter „living standard“ (lebendiger Standard) und wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit den Auszeichnungssprachen HTML und XML (zum Beispiel bei SVG) eingesetzt werden.
- PHP:
- PHP (rekursives Akronym und Backronym für „PHP: Hypertext Preprocessor“, ursprünglich „Personal Home Page Tools“) ist eine Skriptsprache mit einer an C und Perl angelehnten Syntax, die hauptsächlich zur Erstellung dynamischer Webseiten oder Webanwendungen verwendet wird. PHP wird als freie Software unter der PHP-Lizenz verbreitet. PHP zeichnet sich durch breite Datenbankunterstützung und Internet-Protokolleinbindung sowie die Verfügbarkeit zahlreicher Funktionsbibliotheken aus.
18.4 Action : GUI bauen
Wir gehen im folgenden, ohne grosse Erklärungen, durch die GUI-Erstellung durch. Öffnen Sie dazu den Atom-Editor (wie beschrieben) und arbeiten Sie im Verzeichnis /var/www/html.
18.4.1 Schritt 1 : Startseite erstellen
Wir benötigen eine Startseite - erstellen Sie eine Datei /var/www/html/index.php mit folgendem Inhalt:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Database App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Simple Database App</h1>
<ul>
<li><a href="create.php"><strong>Create</strong></a> - add a user</li>
<li><a href="read.php"><strong>Read</strong></a> - find a user</li>
</ul>
</body>
</html>- Testen:
- Öffnen Sie im Browser die URL _http://localhost/index.php_ - Sie sollten Ihre Seite sehen
18.4.2 Schritt 2 : Benutzer erstellen können
Wir benötigen eine neue Seite create.php, damit wir für unsere Applikation Benutzer erfassen können - erstellen Sie eine Datei /var/www/html/create.php mit folgendem Inhalt:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Database App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Simple Database App</h1>
<form method="post">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="email">Email Address</label>
<input type="text" name="email" id="email">
<label for="age">Age</label>
<input type="text" name="age" id="age">
<label for="location">Location</label>
<input type="text" name="location" id="location">
<input type="submit" name="submit" value="Submit">
</form>
<a href="index.php">Back to home</a>
</body>
</html>- Testen:
- Öffnen Sie im Browser die URL _http://localhost/create.php_ - Sie sollten Ihre Seite sehen. Ebenfalls sollte der Link unten funktionieren.
18.5 Schritt 3 : Wir benötigen Style…
Wir sind uns einig: Die Webseite sieht noch sehr unschön aus. Versuchen wir das zu verbessern.
Wir benötigen eine Style-Sheet-Datei style.css - erstellen Sie eine Datei /var/www/html/css/style.css mit folgendem Inhalt:
- Testen:
- Rufen Sie die Ihre Webseiten index.php und create.php nochmals auf…sie sollten jetzt ein bisschen besser aussehen.
18.5.1 Schritt 4 : Benutzer auslesen können
Wir benötigen eine neue Seite read.php, damit wir für unsere Applikation Benutzer lesen/darstellen können - erstellen Sie eine Datei /var/www/html/read.php mit folgendem Inhalt:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Database App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Simple Database App</h1>
<h2>Find user based on location</h2>
<form method="post">
<label for="location">Location</label>
<input type="text" id="location" name="location">
<input type="submit" name="submit" value="View Results">
</form>
<a href="index.php">Back to home</a>
</body>
</html>18.6 Abschluss erste Schritte
Sie sollten bis hier hin eine funktioniernde Webseite haben, bei der alle Links funktionsfähig sind. Die nächsten Schritte beinhalten dann die Bereitstellung der Datenbank.
18.7 Erklärung zu den Server-Diensten
Damit eine datenbankgestützte Webapplikation funktioniert, müssen viele Dinge gemeinsam funktionieren. Die folgende Abbildung stellt das dar:

- Bemerkung:
- In unserem Beispiel ist es einfach so, dass die Datenbank auf der selben VM läuft, wie der Webserver. Das ist in der Praxis eher selten der Fall.
- Wichtig ist:
- PHP ist eine Programmiersprache, die vom Webserver ausgeführt wird. Die Aufgabe von PHP ist es, eine HTML-Datei so zu erstellen, das sie sinnvolle Informationen enthält. Die HTML-Datei wiederum wird dann in Ihrem Webbrowser dargestellt.