Diese Lektion nimmt dich bei der Hand und zeigt, welche clientseitigen und serverseitigen Komponenten Du benötigst und welche Möglichkeiten es gibt, um eine datenbankgestützte Webanwendung erfolgreich zu erstellen. Wir werden auch darauf hinweisen, was WordPress bereits anspricht und wie der Inhalt dieser Lektion Ihnen helfen kann, Probleme mit Ihrem Blog zu lösen.
Die allgemeine Architektur
Schauen wir uns zunächst die Gesamtarchitektur an, mit der wir uns bei der Entwicklung befassen:
Unser Kunde stellt uns einen Webbrowser zur Verfügung, der HTML- und bei Bedarf JavaScript-Skripte interpretieren kann. All dies erfolgt auf der Clientseite ohne Serverinteraktion nach dem ersten Empfang der betreffenden Dateien.
Dann haben wir noch auf unserem Client entweder einen Editor zum lokalen Erstellen unserer Dateien oder eine Terminalanwendung, mit der wir Code aus der Ferne entwickeln können. Ich werde dies gleich behandeln.
Wir haben bereits die Dateien erwähnt, die lokal erstellt werden können oder müssen, z. HTML-Markup, PHP-Code, JavaScript-Code oder Bilder (JPG, PNG usw.). Alle Dateien, die wir lokal (auf der Clientseite) erstellen, müssen auf den Server übertragen werden, wo sie in den Webbrowsern anderer Personen bereitgestellt werden können.
Diese Übertragung von unserem Entwickler-Client auf den Server erfolgt mithilfe von Client-Tools für die Dateiübertragung wie WinSCP (Windows) oder Cyberduck (OSX). Sie unterstützen verschiedene Protokolle wie FTP oder SSH, abhängig von Ihrer bevorzugten Kommunikationsmethode und den Fähigkeiten Ihres Servers.
Lass uns nun einen Blick darauf werfen, wie deine Entwicklung stattfinden kann.
Der Client-zentrierte Entwicklungsansatz
Es gibt verschiedene Möglichkeiten, sich zu entwickeln. Ein Weg ist zugunsten des Kunden. Du kannst eine lokale Editoranwendung auf deinem Desktop verwenden, um alle Arten von Code zu erstellen, zum Beispiel Textpad. Du musst deinen Quellcode dann mit deinem Dateiübertragungsclient auf den Server übertragen, zum Beispiel mit WinSCP.
Diese Anwendung kontaktiert dann den Dateidienst auf dem Server, an den Du Dateien senden möchtest. Dort wird möglicherweise ein ProFTPd ausgeführt (das Gegenstück zu deinem Dateiübertragungsclient, das für dich nicht interessant ist, es sei denn, Du möchtest deinen eigenen Dateiserver einrichten).
Dieser Dateiserver legt dann alle empfangenen Dateien auf der Hardware des Servers ab, auf die beispielsweise der Webserver zugreifen kann – was wir wollen, nicht wahr 🙂
Der Server-zentrierte Entwicklungsansatz
Eine andere Entwicklungsmethode ist zugunsten des Servers. Du kannst eine clientseitige Anwendung wie Putty (Windows) oder Terminal (OSX) verwenden, um über SSH eine Verbindung zu deinem Server herzustellen. Sobald die Verbindung hergestellt ist, kannst Du serverseitige Bearbeitungstools wie VI verwenden. Wir werden die VI-Behandlung in einer späteren Lektion erläutern.
Der Vorteil hierbei ist, dass Du keinen Code auf den Server übertragen musst, da Du Dateien direkt auf die Festplatte des Servers schreibst.
Der Nachteil ist, dass Du ständig eine stabile Internetverbindung aufrechterhalten musst, was in überfüllten WLAN-Umgebungen schwierig sein kann.
Der Client-Server-Roundtrip
Nun wollen wir sehen, was passiert, wenn Du oder ein anderer Benutzer versucht, auf von dir erstellte Dateien zuzugreifen. Der Browser sendet eine Anfrage für eine bestimmte Datei. Dies ist auch der Fall, wenn auf die Adresse, auf die zugegriffen wird, nur “www.domain.com” lautet, da der Webserver, der diese Anfrage empfängt, nach einer Datei mit dem Namen index.php oder index.html sucht . Sobald diese Datei gefunden wurde, hängt das nächste Vorgehen von der Art der Datei ab, auf die zugegriffen wird.
HTML-Bereitstellung
Wenn es sich bei der fraglichen Datei um reines HTML oder einfaches JavaScript handelt, sendet der Server das Markup einfach an den Browser zurück, wo es interpretiert werden kann.
Server-seitige Skript-Interpretation
Wenn die Datei PHP oder eine andere serverseitige Skriptsprache enthält, müssen auf dem Webserver Interpreter-Module installiert sein, mit denen das Skript weiter verarbeitet werden kann. Jede Skriptverarbeitung führt zu einer weiteren Markup-Ausgabe (z. B. HTML), die nach der Übertragung vom Browser des Clients interpretiert werden kann. Die Art und Weise, wie dieses Markup erstellt wurde, ist jedoch für die Außenwelt nicht sichtbar.
Server-seitige Skript- und Datenbank-Interaktion
Mit einem PHP oder einem anderen serverseitigen Skript kann eine Datenbank auch eine Rolle beim Zugriff auf strukturierte Daten spielen, z. B. beim Verarbeiten von Anmeldeinformationen. Der Webserver benötigt dann weitere Komponenten, um DBS-Verbindungen zu interpretieren. Wenn das betreffende Skript PHP und das Datenbanksystem MySQL ist, benötigt das PHP-Skript sowohl korrekte Datenbankverbindungsparameter als auch eine genau definierte SQL-Anweisung. Beides kann gegen die MySQL-Serverinstanz geworfen werden, die sich dann mit der Abfrage befasst und die Ergebnismenge an den Webserver zurücksendet. Der Webserver macht dann das Gleiche wie immer, erstellt ein Markup und sendet es an den Browser des Clients zurück.
Das wäre eine vollständige Rundreise, und es ist wichtig, diese Interaktion zu verstehen, um eine eigenständige Webanwendung erfolgreich zu erstellen – und das ist unser Ziel.
Der WordPress-Ansatz
Alle oben genannten Komponenten sind bei einer WordPress-Installation noch auf bestimmte Weise vorhanden. Dennoch gibt es wichtige Unterschiede:
- Ein Content-Management-System wie WordPress dient dazu, Layout und Inhalt zu trennen.
- Du kannst Texte, Bilder und Videos hinzufügen, indem Du sie mit WordPress “Media Library” (über HTTPS anstelle von FTP/SSH) in WordPress hochlädst.
- Du kannst Theme-Dateien (PHP, JS, CSS) mit dem VI (oder auch mit manuellen Uploads) bearbeiten, kannst aber auch den WordPress-eigenen “Theme Editor” (unter “Darstellung”) verwenden.
- Du musst dir keine Gedanken darüber machen, wie PHP zum Generieren von HTML-Inhalten mithilfe der im CMS vorhandenen Inhalts- und Theme-Layout-Funktionen und Stildefinitionen verwenden wird.
Das folgende Schema zeigt die Architekturunterschiede von WordPress in Bezug auf eine eigenständige Website.
Bitte denke daran: Du musst die Grundprinzipien eines CMS oder zumindest eines WordPress-Themes verstehen, um fehlerhafte Dateien reparieren und dir bei deinem Blog-Projekt selbst helfen zu können. Aus diesem Grund führen dich die folgenden Kapitel durch alles, was Du mindestens über die Interaktion zwischen HTML, PHP und Datenbanken wissen musst.
Die nächsten Lektionen:
- Lektion 2: Grundlagen Relationaler Datenbank-Management-Systeme
- Lektion 3: Datenbank-Modellierung und -Strukturierung
- Lektion 4: VI-Editor in Unix
- Lektion 5: HTML-Grundlagen
- Lektion 6: HTML-Formular-Elemente
- Lektion 7: Ich lerne PHP: Grundlagen für Ausgabe, Kalkulation und Nutzung von Variablen
- Lektion 8: PHP-Schleifen und -Bedingungen
- Lektion 9: PHP-Funktionen richtig verwenden
- Lektion 10: PHP GET- und POST-Parameter
- Lektion 11: Wie baue ich eine Webseite — PHP-Navigationsskelett Schritt für Schritt
- Lektion 12: Verbindung von PHP zu MySQL herstellen
- Lektion 13: PHP Login-Skript-Tutorial
- Lektion 14: Dynamisches PHP-basiertes MySQL-Datenmanagement mit HTML-Output