Dynamische Webseiten. Theoretische Grundlagen und praktische Umsetzung einer HTML-5 basierten Webseite mit CSS3-Elementen

Erstellen einer Homepage mit Login-Bereich und Inhalten aus MySQL-Datenbanken

Term Paper , 2019 , 80 Pages , Grade: 2,0

Computer Science - Internet, New Technologies

In der Hausarbeit wird eine dynamische Webseite erstellt, welche einen Login-Bereich besitzt und Daten aus MySQL-Datenbanken abruft. Internetseiten und der technische Aufbau werden in der Arbeit zuerst allgemein betrachtet und erläutert. Auf verwendete Skriptsprachen und Tools wird ebenfalls eingegangen. Mit diesen erarbeiteten Grundlagen wird eine eigene dynamische Webseite beispielhaft erstellt, welche einen Login-Bereich besitzt und Daten aus MySQL-Datenbanken bezieht.

Die Hausarbeit soll sich im theoretischen Teil damit befassen, wie eine dynamische Webseite normalerweise aufgebaut ist bzw. welche Komponenten erforderlich sind. Dabei soll insbesondere auch auf die Verarbeitung einer Besucheranfrage eingegangen und die gängigsten Kombinationen von Serversoftware und Programmiersprachen genannt werden.

Im praktischen Teil der Hausarbeit soll genau das gerade genannte Beispiel in etwa nachgebildet werden. Zielsetzung ist es, eine HTML-5 basierte Webseite mit CSS3-Elementen nach aktuellem Stand der Technik zu programmieren. Der Inhalt der Seite soll aus einer MySQL-Datenbank geladen und auf mindestens zwei Unterseiten hinsichtlich des Layouts her identisch bleiben.

Inhaltsverzeichnis

EHRENWÖRTLICHE ERKLÄRUNG

INHALTSVERZEICHNIS

ABBILDUNGSVERZEICHNIS

EINLEITUNG

1 DYNAMISCHE WEBSEITEN IN DER THEORIE
1.1 Begriffsbestimmung und Grundprinzipien
1.2 Ablauf
1.3 Serversoftware und Programmiersprache
1.3.1 Verbreitete Serversoftware
1.3.2 Gängige Skriptsprachen und Tools
1.3.2.1 HTML
1.3.2.2 CSS
1.3.2.3 PHP
1.3.2.4 MySQL
1.3.3 Grober technischer Aufbau

2 ERSTELLUNG EINER DYNAMISCHEN WEBSEITE
2.1 Aufbau und Ablaufplanung
2.2 Technische Voraussetzungen
2.3 Durchführung
2.3.1 Vorwort
2.3.2 Vorbereitung und Seitenaufbau
2.3.3 Seiteninhalt
2.3.4 Datenbankeinbindung
2.3.4.1 Newsanzeige
2.3.4.2 Produktinformationen
2.3.4.3 Login und verbundene Funktionen

3 ZUSAMMENFASSUNG UND SCHLUSSWORT

QUELLENVERZEICHNIS
Internetquellen
Literaturquellen
Abbildungsquellen

ANHANG I: SCRIPTE

ANHANG II: DATENBANKEN

ANHANG III: SEITENAUSZÜGE

Ehrenwörtliche Erklärung

Hiermit versichere ich, ehrenwörtlich, dass ich die vorliegende Studienarbeit selbstständig und ohne fremde Hilfe verfasst und keine anderen als die ange­gebenen Hilfsmittel benutzt habe. Die Stellen der Arbeit, die dem Wortlaut oder dem Sinn nach anderen Werken entnommen wurden, sind in jedem Fall unter Angabe der Quelle kenntlich gemacht. Die Arbeit ist noch nicht veröffentlicht oder in anderer Form als Prüfungsleistung vorgelegt worden.

Abbildungsverzeichnis

Abbildung 1: Prinzip einer statischen Webseite

Abbildung 2: Prinzip einer dynamischen Webseite

Abbildung 3: Ablauf einer dynamischen Webseite am Beispiel „dyn.php"

Abbildung 4: Aufbau einer Webservers in Server-Schränken

Abbildung 5: XAMPP mit den gestarteten Modulen

Abbildung 6: Erster Seitenaufbau mit Header

Abbildung 7: MySQL-Datenbank „news" xlix

Abbildung 8: MySQL-Datenbank „Produkte"

Abbildung 9: MySQL-Datenbank „Users"

Abbildung 10: Startseite

Abbildung 11: Startseite

Abbildung 12: Produkte

Abbildung 13: Produkte

Abbildung 14: Seite eines Kalenders

Abbildung 15: Seiten eines Kalenders

Abbildung 16: Bestellablauf

Abbildung 17: FAQ

Abbildung 18: Übers uns

Abbildung 19: Kontakt

Abbildung 20: Impressum

Abbildung 21: Login-Feld

Abbildung 22: erfolgreicher Login

Abbildung 23: News Schreiben

Abbildung 24: News bearbeiten

Abbildung 25: News bearbeiten

Einleitung

Von Bankgeschäften über Einkäufe, Informationsgewinnung oder Freizeitgestal­tung - ein Großteil unseres Alltags wird über das Internet und meist über Web­seiten durchgeführt oder abgewickelt. Das World Wide Web (WWW) ist aus unserem Leben schon lange nicht mehr wegzudenken und stellt nach Auffas­sung des Bundesgerichtshofs (BGH) ein Grundrecht für Menschen dar, dessen Wegfall extreme Auswirkungen auf das Leben hätte¹. Heute sind für ein Un­ternehmen nicht mehr alleine die reinen Verkaufszahlen entscheidend, sondern die Reichweite und Aufrufe der eigenen Online-Präsenz. Etwa 95% der Unter- nehmen in Deutschland besaßen 2018 einen Internetanschluss und - eine ei- gene Website, Tendenz höchstwahrscheinlich steigend². Auf diesem Weg las­sen sich am einfachsten und in kurzer Zeit eine relativ große Anzahl an Men­schen erreichen, ohne dafür unzählige Messen besuchen zu müssen oder in allen verfügbaren Print- und Fernsehmedien Werbung zu schalten. Alles was hierfür benötigt wird ist eine eigene und ansprechende Webseite, auf der sich die potenziellen Kunden über das Unternehmen, Produkte und Abläufe infor­mieren können und dadurch einen ersten Eindruck bekommen oder gar schon eine Kaufentscheidung treffen. Die Erstellung einer Webseite wird einem durch verschiedenste Anbieter oder Online-Tutorials so leicht wie noch nie gemacht und kann schon an einem Tag größtenteils abgeschlossen werden. Da jedoch mittlerweile die Mehrheit der Unternehmen eine Webseite besitzt, ist es wichtig, sich von den anderen abzuheben und seine Angebote so attraktiv und passend wie möglich zu gestalten, um Kunden und Umsatz zu generieren. Im Wesentli­chen geht es neben der eigentlichen Produkt- oder Leistungspalette auch da­rum, zeitnah bzw. so schnell wie nur möglich auf eine geänderte Nachfrage der Kunden mit entsprechenden Angeboten oder Informationen zu reagieren, bevor andere es tun.

Auf den Servern der Webseiten werden Anwendungen für den Benutzer zur Verfügung gestellt, deren Umfang und Komplexität immer weiter steigt. Sollen Kunden oder Nutzer angesprochen werden, ist es erforderlich geworden, nicht nur auf die Nachfrage der Kunden zu reagieren, sondern auch auf deren Wünsche und Vorstellungen einzugehen, die Homepage also entsprechend zu gestalten. Diese gerade genannten Punkte sind für einen Webseitenbetreiber nur äußerst aufwändig umzusetzen, da dieser die Informationen und Designs immer händisch in einzelne HTML-Dateien schreiben muss.

Abhilfe schaffen sog. dynamische Webseiten, deren Grundgerüst in Dateien fixiert ist, einzelne Inhalte oder Daten jedoch aus einer externen Datenbank ge­laden werden. Ein Beispiel hierfür wäre ein Shop, der seine Homepage durch einen Fachmann erstellen lässt und die Produkte oder deren Preise über eine Datenbank einbringt. Würde sich der Preis ändern oder sollten sonstige Ände­rungen an der Seite vorgenommen werden, könnten die Shopbetreiber in einer Datenbank die Änderungen vornehmen und die Homepage lädt diese von dort nach. Dadurch könnte die Arbeit zum einen selbst und ohne Fachmann durch­geführt werden und zum anderen bestände kein Risiko, dass aus Unwissen falsche Einträge gemacht werden, die zu Fehlern im Homepage-Code führen könnten.

Die vorliegende Hausarbeit soll sich im theoretischen Teil damit befassen, wie eine dynamische Webseite, wie oben beschrieben, normalerweise aufgebaut ist bzw. welche Komponenten erforderlich sind. Dabei soll insbesondere auch auf die Verarbeitung einer Besucheranfrage eingegangen und die gängigsten Kom­binationen von Serversoftware und Programmiersprachen genannt werden.

Im praktischen Teil der Hausarbeit soll genau das gerade genannte Beispiel in etwa nachgebildet werden. Zielsetzung ist es, eine HTML-5 basierte Webseite mit CSS3-Elementen nach aktuellem Stand der Technik zu programmieren. Der Inhalt der Seite soll aus einer MySQL-Datenbank geladen und auf mindestens zwei Unterseiten hinsichtlich des Layout her identisch bleiben.³

1 Dynamische Webseiten in der Theorie

1.1 Begriffsbestimmung und Grundprinzipien

Dynamische Webseiten setzen sich begrifflich aus dem Adjektiv „dynamisch“ und dem Substantiv „Webseite“ zusammen. Dynamisch kommt aus dem Grie­chischen und bedeutet so viel wie schwungvoll, antriebsstark oder lebendig. Webseite setzt sich wiederum aus „Web“ wie im letzten W des World Wide Web (kurz WWW) und „Seite“ zusammen.⁴

Anhand der Begriffsbestimmung ist eine dynamische Webseite also eine leben­dige Seite als Bestandteil des Angebots im Internet oder WWW. Das Gegenteil hiervon wäre eine statische, also eine unbewegte Seite⁵.

Mit lebendig oder schwungvoll sind hier bei dynamischen Webseiten jedoch nicht effektvolle Animationen oder Grafiken gemeint, sondern Datenbewegun­gen. Es geht darum, dass Informationen und Daten nicht fest auf einer Seite verankert sind, sondern erst bei dem tatsächlichen Aufruf einer Seite von einer externen Quelle, meist einem Server oder einer Datenbank, geladen werden. So ist das Erscheinungsbild und der Inhalt einer Seite nicht in einer Datei fixiert und sieht bei jedem Aufruf gleich aus, sondern das Erscheinungsbild und die enthaltenen Informationen können besucherspezifisch angepasst werden und so den jeweiligen Anforderungen und Wünschen gerecht werden.

„Die Darstellung einer dynamischen Website, bzw. eines dynami­schen Inhalts, funktioniert also nicht direkt. Der Besucher der Website fordert durch seinen Zugriff das gewünschte Dokument an, das Dokument fordert vom Server die dynamischen Inhalte an und erst nachdem diese zur Verfügung gestellt wurden, wird das Dokument angezeigt“⁶.

Dieser grundlegende Unterschied wird von den beiden nachfolgenden Grafiken verdeutlicht:

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1: Prinzip einer statischen Webseite

In Abbildung 1 ist das Prinzip einer statischen Webseite ersichtlich. In der ei­gentlichen Datei befinden sich alle Daten wie Seitenaufbau und Design, aber auch die Inhaltsdaten, welche bei Aufruf an den jeweiligen Client ausgeliefert werden.

Abbildung in dieser Leseprobe nicht enthalten

DATENBANK

Abbildung 2: Prinzip einer dynamischen Webseite

Hier ist wiederum aufgezeigt, wie eine dynamische Internetseite funktioniert. In der Datei befindet sich lediglich der Seitenaufbau, an welcher Stelle welche Felder sind.

Die Textinformationen werden, wie bereits erwähnt, bei Anforderung aus einer Datenbank geladen und bei der Auslieferung an der jeweiligen Stelle, die vorher in der Datei festgelegt ist, eingebettet.

„Im Unterschied zu statischen Internetseiten kann sich der Inhalt aufgrund von Aktionen des Benutzers oder neuer Basisinformatio­nen, die zum Beispiel aus Datenbanken stammen, jederzeit än­dern“ 7

1.2 Ablauf

Im Groben wurde bereits erläutert, wie dynamisch Seiteninformationen in die Webseite aus Datenbanken geladen werden. Auf den genauen Ablauf wird im Folgenden nochmals tiefer eingegangen:

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 3: Ablauf einer dynamischen Webseite am Beispiel „dyn.php“.

Eine dynamische Webseite wird nur generiert bzw. aufgerufen, wenn sie von einem Client aufgerufen wird. Dieser schickt durch Eingabe der URL eine An­frage an den Server, der hinter dieser Adresse bzw. der entsprechenden IP­Adresse steckt. Auf die genaue Datenverbindung wird hier nicht eingegangen.

Diese Anfrage erreicht den Webserver und wird darauf analysiert, welche Daten vom Client genau übergeben wurden oder welche genaue Seite aufgerufen werden soll. Ist beispielsweise die Startseite vom Client gewünscht, werden andere Informationen an den Server übergeben, als bei Aufruf der Impressum­Seite.

Die Anfrage mit den enthaltenen Informationen wird vom Server verarbeitet und überprüft, ob die angefragten Daten vorhanden sind. Hieraus, meist aus einer PHP-Datei und anderen verbundenen Quellen auf dem Server, wird die zu er­stellende Seite generiert und für die Übergabe an den Client vorbereitet.

Dabei finden die Auswertung und Erstellung der Seite beim Server statt. 8 Dieser besitzt einen sog. „Parser“, welcher mittels PHP-Struktur die einzelnen

Codezeilen zum Seitenaufbau analysiert und daraus anhand der jeweiligen Nutzeranfrage eine statische Seite aus HTML-Code erstellt, welche wieder an den Client zurückgegeben werden kann.

Der Nutzer erhält also nur eine eigens für ihn erstellte statische Seite, bekommt jedoch nicht den eigentlichen Programmcode der dynamischen Seite, die für die übertragene Datei sorgt, zu Gesicht. Dies ist neben den o.g. Vorteilen einer dy­namischen Seite auch ein wichtiger Sicherheitsaspekt, da so nicht der Code der Seite direkt analysiert werden kann und mögliche Schwachstellen oder „Schlupflöcher“ gefunden werden können.

Auf der Clientseite wird die erhaltene Datei abschließend analysiert und ange­zeigt, bis dann die nächste Anfrage zum Aufruf einer anderen Seite gestellt wird. Bei der nächsten Anfrage können vom Client beispielsweise auch zusätz­liche Daten wie Cookies, „POST“ Formular-Daten oder Variablen in der URL übergeben werden. Diese können dann vom Server verarbeitet und daraufhin die dynamische Seite generiert werden.

1.3 Serversoftware und Programmiersprache

1.3.1 Verbreitete Serversoftware

Die gängigste Software für Webserver ist das „Apache HTTP Server Project“, das 1995 das erste Mal in den USA veröffentlicht und stetig weiterentwickelt wurde. Die Software ist ein freies Open Source-Produkt das mehrere Betriebs­systeme wie Unix, Windows und Mac OS, jedoch auch weniger verbreitete Sys­teme wie Netware, unterstützt. Der Webserver kann dabei modular aufgebaut werden und zahlreiche, bereits vorgefertigte Module wie Proxy oder Verschlüs­selungsmodule betreiben. Ferner werden unterschiedliche Programmier- und Skriptsprachen wie Python, JavaScript oder PHP unterstützt.⁷

Server können dabei auf ganz verschiedenste Weise betrieben werden. So gibt es im Allgemeinen beispielsweise die gängigen und bereits beschriebenen Webserver, aber auch File-Server, Mail-Server oder Proxy-Server.

1.3.2 Gängige Skriptsprachen und Tools

1.3.2.1 HTML

HTML (H yper T ext M arkup L anguage) ist selbstverständlich keine Programmier­sprache, jedoch eine sog. textbasierte Auszeichnungssprache. Diese dient der Erstellung von Webseiten und wird von Webbrowsern „verstanden“. Der Begriff „Auszeichnungssprache“ bedeutet, dass verschiedene Objekte oder Textstellen mit sog. Tags markiert bzw. umschlossen werden. Der Hauptteil einer Seite ist in HTML beispielsweise im sog. Body-Tag geschrieben, welcher mit dem Kommando <Body> öffnet und mit </Body> schließt. So sind die gängigsten Tags in HTML aufgebaut. Den Nachfolger von HTML stellt XHTML dar (E xtensible H yper T ext M arkup L anguage), welches eine bessere Verarbeitung von externen Inhalten aus anderen Medien, wie beispielsweise Content­Management-Systeme aus Datenbanken, bietet.⁸

„HTML [und XHTML definieren] [...] ganz allgemein gesehen die Struktur eines Dokumentes. Es beschreibt so z.B., an welcher Stelle ein Bild zu finden sein soll, wo Text ist und wie eine Tabelle strukturiert ist“⁹.

So können in HTML verschiedene Formen und Farben verwendet und diese nach Wunsch auf der Seite platziert werden. Durch Unterteilungen in Kopf, Kör­per und Fuß entsteht eine geordnete Struktur, in der die einzelnen Elemente getrennt voneinander bearbeitet werden können. So kann in den Kopf bei­spielsweise ein Titelbild oder das Menü einer Seite eingebettet werden, welches getrennt vom eigentlichen Textteil oder verschiedenen Links in der Fußzeile ist. Der eigentliche Text im Hauptteil lässt sich mit Absätzen oder Tabellen nach Wunsch strukturieren und über Schriftarten gestalten. Verweise zu anderen Webseiten oder zu Unterpunkten der eigenen Homepage sind mittels Hyper­links problemlos möglich und auch Formularfelder oder dergleichen können ein­fach gestaltet und für weitere Prozesse verarbeitet werden.

1.3.2.2 CSS

CSS oder auch C ascading S tyle s heet beschreibt das Aussehen einer Seite als sog. Markup Language. Es können verschiedene Stilformen für unterschiedli­che Seiten oder für einzelne Kategorien wie Überschriften oder Listen vergeben werden. Beispielsweise ist es möglich, anzupassen, wie alle Überschriften einer Webseite aussehen sollen, egal auf welcher Unterseite man sich gerade befin­det. Zielrichtung von CSS ist es, die Darstellung einer Seite so gut wie möglich vom eigentlichen Inhalt zu trennen. Dafür werden für gängige Webseiten ein­zelne Dateien mit der Endung .css angelegt, in denen die Designs zentral abge­legt sind und welche in die HTML-Datei eingebunden werden. Eine Anwendung innerhalb der HTML-Datei selbst ist jedoch auch möglich, jedoch unübersichtli­cher.

„Als Cascading Stylesheet bezeichnet man also die Summe aller Style-Regeln, gleichgültig, ob diese nun in externen Dateien fest­gelegt oder direkt in der HTML-Datei definiert sind“¹⁰.

1.3.2.3 PHP

PHP (P HP: H ypertext P reprocessor) ist eine frei zugängliche Skriptsprache, die hauptsächlich zur Erstellung dynamischer Webseiten verwendet wird. Dabei wird durch PHP vor allem die einfache Auswertung von Formulardaten und Kommunikation mit verschiedenen Datenbanksystemen, wie auch MySQL, er­möglicht. Die Vorteile der Skriptsprache liegen dabei in der kostenlosen Verfüg­barkeit, einer einfachen Struktur und Sprache sowie dem unkomplizierten Zu­sammenspiel mit externen Daten und gängigen Apache-Webservern. Es wird bei Internetanwendungen immer zwischen Serverprogrammen, welche auf dem Sever selbst ausgeführt werden, und Clientprogrammen, welche der Betrachter der Internetseite ausführt, unterschieden. PHP-Skripte sind immer Serverpro­gramme und müssen von dem Server wie oben beschrieben interpretiert wer­den. Der Client bekommt danach lediglich die Ausgabe des Programms zur Darstellung übermittelt. Dadurch können, wie bereits beschrieben, keine Rück­schlüsse auf den eigentlichen Programmcode geschlossen werden und ein An­griff oder eine Kopie der Seite ist schwieriger möglich.¹¹

PHP wird, grundsätzlich wie auch bereits CSS, in ein HTML-Dokument inte­griert. Jedoch erhält eine HTML-Datei nach Verwendung von PHP-Befehlen in ihr die Dateiendung .php . Die Passagen in einem PHP-Dokument, die tatsäch­lich auch mittels PHP interpretiert werden sollen müssen hierfür mit <?php ge­öffnet und mittels ?> geschlossen werden. Innerhalb dieser Tags sind normale Datentypen wie Arrays oder Strings möglich und Variablen oder Konstanten können definiert werden. Skriptabläufe können auch mittels Schleifen oder Be­dingungen durchgeführt werden.¹²

1.3.2.4 MySQL

MySQL ist die mit am weitesten verbreitete Open-Source-Datenbank und wird aufgrund des guten Zusammenspiels häufig mit PHP zusammen verwendet. Die MySQL-Datenbanken bestehen aus SQL-basierten Datenbankservern, eine der meistverwendete Datenbanksprachen der Welt. So sind Anweisungen zur Erstellung von Datensätzen vorhanden und um solche zu bearbeiten. Komfor­tabel können Datenbanken in der Bedienoberfläche von phpMyAdmin erstellt werden, welche auch bei Installationen wie XAMPP oder EasyPHP schon ent­halten ist. 15

In der Handhabung bietet MySQL in Verbindung mit phpMyAdmin zahlreiche verständliche Möglichkeiten und ist ohne große Lernprozesse leicht und intuitiv zu handhaben. Es wird zuerst eine „Datenbank“ erstellt und ein Name für diese vergeben. In einer Datenbank können dann verschiedene „Tabellen“ angelegt werden mit verschiedensten „Zeilen“ und „Spalten“. Eine Zeile beschreibt dabei einen Datensatz und jede Spalte pro Zeile einen Wert darin. Den einzelnen Ta­bellenfeldern können dabei noch Eigenschaften wie Datentypen oder maximale Länge zugewiesen werden. Nach Erstellung der eigentlichen Tabelle kann die­se mit Werten befüllt und anschließend verwendet werden.

Mittels phpMyAdmin können die eingegebenen Daten visualisiert und in Relati­on zueinander gesetzt, aber auch Server-Konfigurationen oder -Auslastungen angezeigt werden. Verschiedenste Daten wie Texte und Grafiken können dort für die spätere Webseite zur Verfügung gestellt werden, im Idealfall der Inhalt der ganzen Seite. Auf einem realen Server kann der Nutzer die Anwendung einfach im Browser aufrufen und die Datenbank/en ohne weitere Kenntnisse bearbeiten, was sich letztendlich auf die angezeigten Inhalte der Webseite auswirkt.

1.3.3 Grober technischer Aufbau

Aus technischer Sicht lässt sich ein Webserver am einfachsten als eine große Festplatte mit Internetanschluss vorstellen. In der Realität sind solche Geräte jedoch weitaus komplexer aufgebaut und füllen je nach Webseite, die darauf gehostet wird, ganze Räume oder Hallen.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 4: Aufbau einer Webservers in Server-Schränken

Einzelne Server-Module mit einer gewissen Speicherkapazität werden überei­nander in zahlreiche Serverschränke verbaut und bilden in sich den eigentli­chen Server. Hierauf werden die o.g. Software und die Strukturen verwaltet so­wie die Daten der gewünschten Webseite abgelegt. Über einen Internetan­schluss wird der Server für das WWW zur Verfügung stehen und kann so mit der ganzen Welt kommunizieren.

Nach Zuweisung einer Domain und einer IP-Adresse können verschiedene Clients die Webseite abrufen, indem sie die Zieladresse aufrufen und die dafür nötigen Daten vom Webserver abrufen.

2 Erstellung einer dynamischen Webseite

2.1 Aufbau und Ablaufplanung

Wie in der Einleitung erwähnt bestand die Aufgabenstellung des praktischen Teils darin, eine eigene Webseite auf HTML5-Grundlage zu erstellen, die Infor­mationen dynamisch aus einer Datenbank lädt. Die Grundprinzipien dynami­scher Webseiten und die dabei verwendeten Komponenten wurden bereits im theoretischen Teil umfassend erörtert. Hierauf aufbauend sollte nun nach aktu­ellem Stand der Technik genannte Webseite erstellt werden.

Thematisch wurde der Seitenaufbau an die aktuelle Jahreszeit angepasst. Es ist gerade Mitte November und der Dezember rückt immer näher. In den Ge­schäften stehen schon seit geraumer Zeit die ersten Weihnachtsartikel und es wird bereits jetzt geplant, wie der Heiligabend verbracht wird. Der Weg bis da­hin, bis zum 24. Dezember wird im Großteil der Bevölkerung von einem Ad­ventskalender begleitet, unabhängig davon, ob dieser nun ganz klassisch mit Schokolade gefüllt ist oder, wie immer häufiger vorkommend, mit ausgefallenen Artikeln wie Fitness-Produkten, Beauty-Artikeln, Wurst oder Schnaps. Jeder findet mittlerweile eine Thematik, mit der er sich auf dem Weg mit den 24 Tür­chen begleiten lassen kann.

Gedankengang war daher, als Webseite den Internetauftritt eines Shops zu er­stellen, der Adventskalender in verschiedenster Ausführung verkauft - nennen wir Ihn einmal „Adventskalender24“.

Ein potentieller Kunde sollte beim Seitenaufruf auf eine Startseite gelangen, auf der er begrüßt wird und auf der ihm aktuelle Neuigkeiten angezeigt werden wie Rabattaktionen oder neue Produkte im Sortiment. Von dort gibt es die Möglich­keit, verschiedenste Menüpunkte aufzurufen, die einen zu Seiten wie dem Impressum, einem Kontaktformular oder einer Informationsseite leiten. Aus Sichtweise der Datenbankthematik, wie in der Aufgabenstellung genannt, sollen gewisse Informationen wie einzelne Produktpreise und o.g. News hierher bezo­gen werden. Auch ist geplant, einen Login-Bereich anzulegen, der beim Anmel­deversuch die persönlichen Daten mit der Datenbank dahingehend abgleicht, ob sich der Nutzer anmelden darf.

Es wird aufgrund des Umfangs der hier vorliegenden Hausarbeit darauf verzich­tet, die Inhalte sämtlicher Seiten aus einer Datenbank zu laden. Bei einer reel­len Internetseite eines Shops wäre dies jedoch in den meisten Fällen so.

2.2 Technische Voraussetzungen

Wie oben bereits beschrieben ist zur Erstellung einer dynamischen Webseite zum einen eine Datenbank auf MySQL-Basis nötig und zum anderen ein Webserver mit einer Serversoftware wie Apache. Da mir ein solcher Webserver nicht zur Verfügung steht wurde für den praktischen Teil der Hausarbeit auf Software zurückgegriffen, die einen solchen Server simuliert. Dies ist nötig um PHP-Dateien, die für das geplante Projekt nötig erscheinen, serverseitig zu ver­arbeiten. Wie unter Punkt 1.3.2.4 bereits beschrieben sind solche Komponenten in der frei erhältlichen Software XAMPP vorhanden. Nach einer Installation des Programms können die einzelnen Module „Apache“ und „MySQL“ aktiviert und verbunden werden.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 5: XAMPP mit den gestarteten Modulen

Nach Start der einzelnen Module können die gewünschten PHP-Dateien im Browser mit der URL Localhost und der entsprechenden Datei, wie bei­spielsweise Localhost/index.php, aufgerufen werden. Eine Ablage der Da­teien im Installationsverzeichnis von XAMPP ist hierfür erforderlich.

2.3 Durchführung

2.3.1 Vorwort

Vorab wird darauf hingewiesen, dass die Kenntnisse der PHP-, HTML und CSS-Programmierung teilweise bereits vorhanden waren oder größtenteils mit­tels Studienbriefen, Internetanleitungen oder Handbüchern erlernt bzw. ange­wandt wurden. Vorrangig können hier jedoch die beiden Bücher von Thomas Theis¹³ und Elisabeht Wetsch¹⁴ genannt werden. Es ist jedoch nicht möglich, die einzelnen Quellen für jeden Skriptcode aufzuführen. Bei herausragenden Dingen wie zum Beispiel ein verwendeter CSS-Style in der Kopfzeile der Seiten wird dies kenntlich gemacht.

Die geplante Webseite soll teilweise nur Demoinhalte beinhalten und ist nicht abschließend funktionsfähig. Einzelne Funktionen wie beispielsweise ein Be­stellvorgang sollen angedeutet, jedoch ohne tatsächliche Funktionalität sein.

2.3.2 Vorbereitung und Seitenaufbau

Begonnen wurde das Projekt ganz simpel damit, in einer HTML-Datei einen Header einzurichten und zu positionieren, du definieren wo der Inhaltsbereich ist und den Footer zu befüllen. Ferner wurde ein schmaler Streifen unterhalb des Headers eingerichtet, der später das Menü beinhalten soll.

Hierfür wurde eine style.css-Datei angelegt und in das HTML-Dokument einge­bunden. Zuerst wurden die einzelnen Bereiche in Größe und Ausrichtung defi­niert.

Für die Überschrift zog ich einen CSS-Effekt aus dem Internet heran und passte ihn an die Homepage an, um dem Erscheinungsbild der Webseite eine weih­nachtliche Stimmung zu verleihen.

Der Textteil im Header (Überschrift) wurde mittels eines Effekts hinterlegt, der drei einzelne aber sich wiederholende Bilder von Schneeflocken im Text fallen lässt. Dabei ist der Text als solcher vorhanden und der Effekt überblendet die Schrift.¹⁵

So entstand zuerst der Seitenaufbau mit Header und Inhaltsteil:

Abbildung in dieser Leseprobe nicht enthalten

Danach erstellte ich einzelne Unterseiten, die per <a href> Links im Menü (grüner Streifen) verlinkt wurden und zum Aufruf zur Verfügung standen, so wie sie in der finalen Seite auch angezeigt werden.

Weiter wurden zur Vorbereitung drei Datenbanken namens „news“, „produk­te“ und „users“ angelegt. In der Datenbank „news“ sind Einträge vorhanden, die auf der Startseite als News angezeigt werden sollen samt Überschrift, Gül­tigkeitsdatum und eines Rabattcodes. In der Datenbank „produkte“ befinden sich die einzelnen zu verkaufenden Kalender samt Namen und Preisen. In der Datenbank „users“ sind drei Nutzer eingetragen, die sich mittels E-Mail und Passwort (mittels SHA1-Hash in der Datenbank) anmelden können sowie die dazugehörigen Klarnamen.

Die Benutzer sind in zwei Gruppen angelegt, die es ermöglichen würden, in Admins und Gäste zu unterscheiden. Diese Funktion mit verbundenen Gästeak­tionen würde jedoch den Umfang der vorliegenden Arbeit übersteigen und wird daher ausgelassen.

2.3.3 Seiteninhalt

Die im Menü eingetragenen Seiten wurden als nächster Schritt angelegt. Hier wurde der Umstieg von reinem HTML + CSS durchgeführt, indem mittels des PHP-Kommandos include die immer gleichbleibenden Inhalte wie Header und Footer in die index.php-Datei eingefügt wurden und der Inhalt im Body aus einer seiten.php geladen wird. Diese seiten.php besagt lediglich, falls die URL im Bereich der Section den Namen einer Unterseite trägt, dass diese Seite als PHP-Datei dann in den Body eingefügt werden soll. Dadurch ist gewährleistet, dass das Design der eigentlichen Seiten immer gleichbleibt, jedoch sich der Inhalt in den einzelnen Menüpunkten ändert.

Ein Großteil des Inhalts der einzelnen Unterseiten wurden aufgrund des Um­fangs der hier vorliegenden Arbeit statisch mittels HTML in der PHP-Datei ein­gefügt. Wie beschrieben sollte sich auf die Funktionen der Newsanzeige, der Informationen wie Name und Preis der einzelnen Kalender und einer Login- Funktion zur Erstellung neuer News beschränkt werden, welche dynamisch umgesetzt werden sollten.

Daher wurden als nächstes die Unterseiten mit Inhalt befüllt. So wurden bei­spielsweise ein Impressum angelegt, Informationsseiten zum Bestellablauf ge­schrieben oder ein Kontaktformular zur Eingabe von Abfragen eingebaut. Nachdem die grundlegenden Funktionen und Seiten, auch Unterseiten für die einzelnen Produkte, vorhanden waren begann der Hauptteil der Aufgabe, die Einbindung der angelegten Datenbank.

2.3.4 Datenbankeinbindung

Eigens zur Einbindung der Datenbanken wurde eine mysql.php-Datei erstellt, welche Funktionen beinhaltet, die Zugriff auf die einzelnen Parameter der Da­tenbank bieten sollen. Diese wurden in eine Klasse $db geschrieben, welche die Zugangsdaten zur Datenbank wie Name, Passwort und Host-Adresse ent­hält. Diese Funktion wird bei jedem Abruf oder Eintrag der Datenbanken immer verwendet, um die Verbindung zum richtigen Zielort aufzubauen.

2.3.4.1 Newsanzeige

In der mysql.php wurde eine Funktion namens alle_einträge angelegt, wel­che sich alle Werte aus der Datenbank „news“ mit den Feldern „news_ID“ (=eindeutige Nummer der jeweiligen Nachricht), „ueberschrift“ (=Titel der Nachricht), „datum“ ^Gültigkeitsdatum), „eintrag“ (=eigentlicher Eintrag selbst) und „code“ (=Rabattcode) holen soll. Hierfür wird bei PHP in Verbin­dung mit mySQL der Befehl self::$ db->prepare("SELECT news.news ID, news.ueberschrift, news.datum, news.eintrag, news.code FROM news ORDER BY news_ID " . $sort); verwendet. Dies heißt übersetzt: hol dir die Einträge news_ID, ueber- schrift, datum, eintrag und code aus der Datenbank news mit den vorher erwähnten Zugangsdaten (zur MySQL-Datenbank) und sortiere diese nach der eindeutigen news_ID.

Dieser Befehl wird in der Funktion ausgeführt und das Ergebnis innerhalb der Funktion ausgegeben.

Zur Ausgabe der News auf der Startseite musste nun nur noch in der index.php die mysql.php und die darin enthaltene $db Variable integriert sowie in der startseite.php dann die Funktion alle_einträge in einer Foreach-Anweisung ausgeführt werden. Diese einzelnen Einträge wurden in ein article-Tag ge­schrieben, eingefügt und schon befanden sich die News der Datenbank auf der Startseite.

2.3.4.2 Produktinformationen

Für die Produktinformationen wurde eine ähnliche Funktion verwendet wie alle_einträge. Jedoch sollte aus der Datenbank mit den einzelnen Produk­ten (zuordenbar über eindeutige produkt_ID) nur der Eintrag geholt werden, wo die produkt_ID mit der tatsächlichen Kalendernummer übereinstimmt.

In der mysql.php wurde der Befehl self::$ db->query("SELECT produkte.produkt ID, produkte.name, produkte.preis FROM produkte WHERE produkt ID = '1'"); in verschiedene Funktionen kalender_1, kalender_2, usw. integriert und das Ergebnis wieder innerhalb der Funktion ausgeführt. Der Unterschied zur Funktion alle_einträge ist hier der WHERE-Parameter, welcher einer for- Bedingung ähnlich ist. Es sollen also nur die Einträge aus der Datenbank geholt werden, bei denen die eindeutige Produktnummer 1 beträgt, bzw. die Nummer des jeweiligen Kalenders. Hier wäre auch eine Funktion möglich gewesen, die all diese möglichen Produktnummern in einer Funktion auffängt. Dies ist jedoch aufwändiger und wurde hier nicht angegangen.

Die jeweilige Funktion wurde dann in der jeweiligen Seite aufgerufen, also bei­spielsweise die Funktion kalender_7 in der Seite /Produkte/kalender7.php. Hier wurde an der Stelle, an der der Preis angezeigt werden sollte, der Daten­satz <?php echo $entry['preis'] ?>€ übergeben und in der Überschrift das entsprechende Kommando für den Datenbankeintrag name. In der Produktübersichtsseite wurden hier ebenfalls die Preise aus der Datenbank be­zogen und die Kalendernummer aus der produkt_ID. So wurden die Produk­tinformationen aus der Datenbank in die Webseite integriert.

2.3.4.3 Login und verbundene Funktionen

Der aufwändigste Teil der Datenbankverarbeitung ist die Login-Funktion. Der Gedankengang dahinter ist, dass, entsprechend eines Cookies, eine Sitzung angelegt wird, anhand derer der vorhandene Nutzer identifiziert werden kann. Hierfür bietet PHP den Befehl session_start, welcher einfach zu Beginn der index.php ausgeführt wurde. Dadurch wird beim Aufruf einer Seite eine session-ID erstellt, die von Benutzer zu Benutzer unterschiedlich ist. Für die Login-Funktion wurde eine Funktion erstellt, die mittels self::$ db->prepare("SELECT User ID FROM users WHERE Email=:usermail AND Passwort=:pw"); die in ein Formularfeld eingegebenen E-Mail und Passwortdaten mit der Daten­bank abgleicht und eine 1 für vorhanden zurückgibt, wenn die Anmeldedaten in der Datenbank eingetragen sind. In diesem Fall wird mit einer if-Bedingung und self::$ db->prepare("Update users SET Session=:sid WHERE Email=:usermail AND Passwort=:pw"); die vorher erstellte session-ID in die „users“-Datenbank eingetragen und der Benutzer ist eingeloggt. Mit einer weiteren Funktion benutzer_eingeloggt kann nun abgefragt werden, ob in der Spalte session_ID der Datenbank „users“ ein Eintrag vorhanden ist. Wird hier ein True zurückgegeben, ist der Benutzer bereits eingeloggt, ansonsten nicht. Mit dieser Funktion benut- zer_eingeloggt können nun weitere Funktionen eingeführt werden, die nur erscheinen oder durchführbar sind, sobald sich der Benutzer mit den passen­den Zugangsdaten angemeldet hat. Das Gegenstück wurde natürlich auch ein­gefügt, eine Funktion, mit der sich der Nutzer auch wieder ausloggen kann. Diese funktioniert gleich wie die Login-Funktion und ändert die session_ID in der Datenbank einfach durch einen Leerwert.

So kann auf der Login-Seite in Verbindung mit der benutzer_eingeloggt Funktion beispielsweise nicht mehr das Anmeldeformular, sondern ein Logout­Button angezeigt werden.

Als nächstes wurde nach erfolgreichem Login eine Verknüpfung zu einer „News Schreiben“-Seite erstellt, welche es mit einem Formularfeld ermöglicht, neue Einträge für die Startseite zu verfassen. Diese sollen nach Eingabe in die Da­tenbank eingetragen werden. Dies funktioniert mit einer Funktion namens news_schreiben mit folgendem Befehl: self::$ db->prepare("INSERT INTO news VALUES :ueberschrift, :datum, :eintrag, :code, :autor)"); Der erste Wert wurde freigehalten, da die news_ID automatisch und eindeutig in der Datenbank generiert wird anhand einer dort vorgenommenen Einstellung. Über eine extra Seite wurde die Funktion ausgeführt und die in einem Formular­feld eingetragenen Daten als neuer Eintrag in die Datenbank geschrieben, wo sie von der Funktion auf der Startseite wieder geladen werden konnten. Das Feld autor wurde dabei mit einer extra Funktion automatisch mit dem Namen befüllt, der in der user-Datenbank gerade angemeldet ist (Zusammensetzung und Übergabe von Vorname + Nachname) dort wo die aktuelle Session dem Feld session_ID entspricht.

Als letzte Nutzerfunktion nach erfolgreichem Login wurde eine Seite erstellt, auf der die bisherigen News angezeigt werden und es einen Button zum Löschen des Eintrags gibt. Hierfür stellt PHP den Befehl self::$ db->prepare("DELETE FROM news WHERE news ID=:id"); zur Verfügung, welcher in eine Funktion news-loeschen eingebunden wurde. Diese wird auf einer extra Seite aufgerufen, welche die Eintragsnummer des ausgewählten Eintrags mitgegeben bekommt und an die Funktion news_loeschen übergibt. Dadurch wird der entsprechende Eintrag anhand der news_ID nach einer kurzen Bestätigung gelöscht.

Neben der Löschfunktion wurde auf der Seite, auf der die einzelnen Einträge in Kurzansicht angezeigt werden, auch ein Button zum Bearbeiten erstellt. Dieser übergibt erneut die Nummer des ausgewählten Eintrags an eine weitere Seite, von welcher die Funktion news_bearbeiten aufgerufen wird und die entspre­chende Nummer mitgegeben bekommt. Auf der Seite wird vorher das Gleiche Formularfeld wie auf der „News erstellen“-Seite angezeigt. Mittels einer Funkti­on news_mit_ID wird zuerst der bisherige Inhalt des entsprechenden Eintrags als value in die einzelnen Felder eingefügt und kann dann bearbeitet werden. Bei abschließender Betätigung eines Knopfes werden die nun eingetragenen Werte mittels der genannten Funktion news_bearbeiten und u.A. dem Befehl self::$ db->prepare("UPDATE news SET autor=:autor; datum=:datum, ueberschrift=:ueberschrift, code=:code; eintrag=:eintrag; WHERE news ID=:id"); im entsprechenden Eintrag überschrieben. Die Seiten „News Bearbeiten“ und „News Löschen“ wurden nun noch auf der Startseite neben den eigentlichen Einträgen angezeigt, sofern der Benutzer eingeloggt ist, und können von dort auch direkt aufgerufen werden, statt über die Anzeigefunktion im Login-Bereich.

Mittels Java-Script wurde auf der Startseite abschließend noch ein Countdown bis zum 24.12.2019, also bis Weihnachten, eingerichtet, welcher aus dem In­ternet übernommen wurde.¹⁶

3 Zusammenfassung und Schlusswort

Nach Abschluss der hier vorliegenden Arbeit wurde sich, dem Rahmen einer Hausarbeit entsprechend, umfassend mit dem Thema dynamische Webseiten befasst. Diese sind im Internet absolut nicht mehr wegzudenken. Ein World Wide Web ohne dynamische Webseiten wäre unsicher, aufwändig und keineswegs an die Bedürfnisse der Benutzer angepasst - und genau darauf kommt es an. Unternehmen müssen von anderen herausstechen, um Kunden für sich zu gewinnen und ihre Daten zeitnah anpassen zu können. Genau hier­für sind dynamische Webseiten mit PHP und einer Datenbank gemacht und prädestiniert. Datenbanken bieten den Unternehmen die Möglichkeit, Nutzerda­ten zu speichern und Login-Bereiche einzurichten sowie benutzerfreundlich oh­ne Programmierkenntnisse die entsprechenden Daten zu ändern, die sich auf allen Seiten, auf denen sie benötigt werden, aktualisieren.

Die Voraussetzungen für eine solche dynamische Webseite sind neben einem Webserversystem überschaubar. Nach einer einmaligen Einrichtung profitieren Webseitenbesitzer von dynamischen Webseiten und ersparen sich längerfristig gesehen Arbeit und mögliche Probleme.

Wie am praktischen Teil der vorliegenden Arbeit ersichtlich, können dynami­sche Webseiten schon in kurzer Zeit ohne Expertenwissen selbst erstellt wer­den und mit praktischen Funktionen ausgestattet werden. Es ist dabei ange­nehm, die Inhalte einer jeden Unterseite über einzelne PHP-Dateien zu bearbei­ten, während das Grundlayout in der Index-Datei und somit für jede Seite gleichbleibt. Die verwendete Datenbank wurde dabei sinnvoll in die Webseite integriert und bietet hilfreiche Funktionen sowie eine leichte Änderung der Prei­se oder Produkte. Auch können den Kunden wichtige News automatisch direkt auf der Startseite angezeigt werden.

Dies war nur ein kleiner Ansatz, wie dynamische Webseiten eingerichtet sein können, um deren Funktionsweise aufzuzeigen. Die Wichtigkeit von dynami­schen Webseiten hat der Großteil alle Webseitenbetreiber im WWW bereits erkannt. Diese bieten somit perfekte Beispiele dafür, welches Ausmaß und Per­fektion dynamische Webseiten annehmen können.

[...]

---

¹ Pressestelle des Bundesgerichtshofs (2013), o.S. (Internetquelle).

² Rabe (2018), o.S. (Onlinequelle).

³ Aufgabenstellung der Hochschule Albstadt-Sigmaringen - Hausarbeit M103 SoSe 2019 - Thema 9.

⁴ Dr. Zentner (2006), Seite 175.

⁵ Dr. Zentner (2006), Seite 680.

⁶ Graack (2011), o.S. (Internetquelle).

⁷ Apache Software Software Foundation (2019)

⁸ Wetsch (2010), Seiten 26-27.

⁹ Wienströr (o.D.), o.S. (Internetquelle).

¹⁰ Wetsch (2010), Seite 28.

¹¹ Theis (2014), Seiten 18-19.

¹² The PHP-Group (o.D.), o.S. (Internetquelle).

¹³ Theis (2014).

¹⁴ Wetsch (2010).

¹⁵ Mächler (2014), o.S. (Internetquelle).

¹⁶ W3Schools (o.D.), o.S. (Internetquelle).

• College: Albstadt-Sigmaringen University
• Grade: 2,0
• Author: Janik Rebell (Author)
• Publication Year: 2019
• Pages: 80
• Catalog Number: V915965
• ISBN (eBook): 9783346236630
• Language: German
• Tags: digitale Forensik, informatik, homepage, website, webseite, digital, Internet, Forensik, modern, adventskalender, datenbank, html, css, mysql, php