Entwicklung einer Serverumgebung und einer Webseite zur Verwaltung von Prüfungsterminen

Staatliche Fachschule für Mechatronik- und Elektrotechnik Entwicklung einer Serverumgebung und einer Webseite zur Verwaltung von Prüfungsterminen von Voit Alexander, Wagemann Andreas, List Simon 26. April 2018 Entwicklungsarbeit Staatliche Fachschule für Mechatronik- und Elektrotechnik Betreuer: Maximilian Friedl

Thema: Betreff: Name: Email: Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen 18 FSMT2 IT Projekt Voit Alexander Wagemann Andreas List Simon An: Maximilian.Friedl@bszam.de Von: / Firma: BSZAM Telefon: / Datum, Unterschrift: 03.01.2018 Schule: BSZAM, FS, IT, Lehrer FRD

Inhaltsverzeichnis Inhaltsverzeichnis... 1 1 Einleitung Projekt 1... 3 1.1 Aufgabenstellung... 3 1.2 Ablauf der Arbeiten... 3 2 Netzwerktopologie (S. List)... 4 2.1 Erstellung des Netzplanes mittels Cisco Packet Tracer... 4 2.2 Zuweisung der IP-Adressen und Anpassung der Ports... 4 3 Datenbank (A. Wagemann)... 6 3.1 MySQL... 6 3.1.1 Grundlegendes... 6 3.1.2 Aufruf einer Web- bzw. Online-Datenbank... 6 3.2 Aufbau der Datenbank schule... 7 3.2.1 Relation zeitplan... 7 3.2.2 Relation benutzer... 7 3.2.3 Primärschlüssel... 8 3.2.4 Verwendete Datentypen... 8 4 SQL Abfragen (A. Wagemann)... 9 4.1 Grundlegendes... 9 4.2 SQL Befehle... 9 4.2.1 Select... 9 4.2.2 INSERT... 10 4.2.3 DELETE... 11 4.2.4 UPDATE... 11 5 Entwicklung der Webseite... 13 5.1 Das Frontend (A. Voit, S. List)... 13 5.2 Das Backend (A. Voit, A. Wagemann)... 16 A. Voit, A. Wagemann, S. List 1

6 Bedienungsanleitung (S. List)... 20 7 Einleitung Projekt 2... 22 7.1 Aufgabenstellung... 22 7.2 Ablauf der Arbeiten... 22 8 Einrichten der Serverumgebung... 23 8.1 Installation von Microsoft Windows 10 Enterprise (A. Voit)... 23 8.2 Deaktivierung der Microsoft Internet Information Services (A. Wagemann) 23 8.3 Installation von XAMPP (A. Voit)... 24 9 Aufbau der Netzwerkumgebung... 25 9.1 Einrichten eines E-Mail-Kontos (A. Wagemann)... 25 9.2 Einrichten eines Dynamischen DNS (A. Wagemann)... 25 9.3 Einrichten des Routers (A. Voit)... 26 Abbildungsverzeichnis... 28 Tabellenverzeichnis... 29 A. Voit, A. Wagemann, S. List 2

1 Einleitung Projekt 1 1.1 Aufgabenstellung Entwickeln Sie einen Terminkalender für Prüfungstermine am Beruflichen Schulzentrum Amberg. Der Terminkalender soll folgende Funktionen bieten: Lauffähig auf Webserver und Online über Webbrowser zugänglich Verwaltung der Prüfungstermine Darstellung der Termine mit Datum, Klasse, Fach, Prüfungsart, Unterrichtsstunde, Lehrer, Notiz Automatische Aktualisierung der Termine (vgl. Anzeigetafel Bahnhof) Nachträglich sollen folgende Funktionen implementierbar sein: Benutzer- und Login Verwaltung über Sessions Das Projekt soll der praktischen Anwendung von HTML, PHP, SQL und Kenntnissen der Netzwerk- und Datenbanktechnik dienen. 1.2 Ablauf der Arbeiten 1. Definition der Aufgabenstellung 2. Zuteilung der einzelnen Themengebiete 3. Struktur des Netzwerkes geplant und ausgearbeitet 4. Relationale Datenbank in MySQL erstellt 5. Backend mit Hilfe von PHP entwickelt 6. Frontend der Webseite mit HTML und CSS designt 7. Fehleranalyse und Behebung 8. Dokumentation des Projektes erstellt A. Voit, A. Wagemann, S. List 3

2 Netzwerktopologie (S. List) 2.1 Erstellung des Netzplanes mittels Cisco Packet Tracer Zu Beginn wurde in der Gruppe Besprochen wie der Netzplan aufgebaut wird und wie, dieser funktionieren soll. Da unser Netzwerk aus Datenbank, Router und Eingabe sowie Anzeige Computer besteht war es ausreichend dieses aus 3 Komponenten zusammenzustellen die in der Unteren Abbildung zu sehen sind. Abbildung 1: Vorläufiger Netzplan 2.2 Zuweisung der IP-Adressen und Anpassung der Ports Als IP-Adressen wurden 192.168 Adressen zugewiesen und das Netzwerk in 2 Netze unterteilt. Die Gateway Adressen für den Computer und den Server wurden auf das jeweilige Netz Angepasst. Die IP und Gateway Adressen wurde am PC und am Server über das Cisco Config Menü der einzelnen Verbraucher eingestellt und die Einstellungsänderungen des Routers wurde über das CLI Eingabefeld durchgeführt. Am Router wurde der Hostname, die Router Ports und die Abschließende Überprüfung durchgeführt und mit folgenden CLI Befehlen Realisiert. Hostname Ändern: A. Voit, A. Wagemann, S. List 4

Port Zuweißen: Überprüfung der Einstellungen: Nachdem diese Einstellungen und Änderungen durchgeführt wurden ergab sich folgender Netzplan: Abbildung 2: Endgültiger Netzplan A. Voit, A. Wagemann, S. List 5

3 Datenbank (A. Wagemann) 3.1 MySQL 3.1.1 Grundlegendes Bei MySQL handelt es sich um das am meisten verbreitete Open Source Datenbankverwaltungssystem für relationale Datenbanken. Es wird in diesem Fall in Verbindung mit dem Webserver Apache und der Skriptsprache PHP eingesetzt. Sowohl das Verwaltungssystem als auch der Webserver sind in dem kostenlosen Programmpaket XAMPP enthalten. 3.1.2 Aufruf einer Web- bzw. Online-Datenbank Die Anfrage eines Clients geht an den Server, der diese an den Internen Webserver, in unserem Fall dem Apache, weiter leitet. Dieser lässt Sie vom PHP-Interpreter übersetzen. Die enthaltenen PHP-Befehle und damit auch die Datenbankanfrage werden an das MySQL Datenbankverwaltungssystem übergeben. Hier werden die SQL Befehle ausgeführt und das Ergebnis der Anfrage an den PHP-Interpreter zurückgegeben. Die Angeforderten Daten werden dort Verarbeitet und über den Internen Webserver an den Client zurückgesendet. Anfrage Apache Webserver Client Antwort PHP- Interpreter MySQL Datenbank Server Abbildung 3: Ablauf einer Datenbankabfrage A. Voit, A. Wagemann, S. List 6

3.2 Aufbau der Datenbank schule 3.2.1 Relation zeitplan Diese Tabelle enthält folgende Attribute: Attribut Datentyp Exta Bedeutung pk_id integer AUTO_INCREMENT Primär Schlüssel datum date Datum der Prüfung klasse mediumtext Betroffene Klasse fach mediumtext Betroffenes Fach pruefung mediumtext Art der Note stunde integer Betroffene Unterrichtsstunde lehrer mediumtext Betroffener Lehrer notiz mediumtext Zusätzliche Informationen user integer Fremdschlüssel (optional) Tabelle 1: Aufbau der Relation zeitplan 3.2.2 Relation benutzer Diese Tabelle enthält folgende Attribute: Attribut Datentyp Exta Bedeutung pk_id integer AUTO_INCREMENT Primärschlüssel klasse mediumtext Klasse des Benutzers name mediumtext Name des Benutzers passwort mediumtext Passwort des Benutzers Tabelle 2: Aufbau der Relation benutzer" A. Voit, A. Wagemann, S. List 7

3.2.3 Primärschlüssel Der Primärschlüssel pk_id identifiziert die Datensätze der Relationen eindeutig. Diese Spalte, vom Typ Ganzzahl, verfügt über folgende zusätzliche Eigenschaften: NOT NULL: o Die bedeutet das IMMER etwas in das jeweilige Feld geschrieben wird. Da der Typ eine Ganzzahl ist, wäre das also mindesten eine Null (0). AUTO_INCREMENT o MySQL hält nach dem höchsten bereits existierenden Wert dieser Spalte Ausschau, addiert Eins dazu und schreibt den Wert dann in das entsprechende Feld des neuen Datensatzes, der dadurch eindeutig zu identifizieren ist. 3.2.4 Verwendete Datentypen Datentyp Bedeutung Bereich Speicherbedarf integer Ganzzahl Signed: -2147283648 bis 2147283647 4 Byte (Standard) Unsigned: 0 bis 4294967295 date Datum 1.1.1000 bis 31.12.9999 8 Byte Format: YYYY-MM-DD mediumtext Mittelgroße Zeichenkette max. 16777215 Zeichen 2E24-1 Byte Tabelle 3: Datentypen A. Voit, A. Wagemann, S. List 8

4 SQL Abfragen (A. Wagemann) 4.1 Grundlegendes Die Abkürzung SQL steht für Structured Query Language und ist eine Datenbanksprache mit der relationale Datenbanken Strukturiert und Bearbeitet werden können. SQL ist heute der gängige Standard, um Abfragen auf relationalen Datenbanken auszuführen. 4.2 SQL Befehle 4.2.1 Select Der SQL SELECT Befehl ist der Grundstein für zahlreiche SQL-Abfragen, die auf eine Datenbank ausgeführt werden können. Er ermöglicht es Daten aus einer oder mehreren Tabellen abzufragen. Beispiel: Es sollen aus der Relation zeitplan die 30 nächsten Prüfungstermine abgefragt werden. Bereits vergangene Termine sollen nicht mir ausgelesen werden. Auswahl der gewünschten Attribute welche abgefragt werden sollen: o SELECT pk_id, datum, klasse, fach, pruefung, stunde, lehrer, notiz SELECT: SQL Befehl für Datenabfrage Die gewünschten Attribute werden durch Kommas [,] getrennt. Festlegung aus welcher Relation diese Attribute stammen: o FROM zeitplan FROM: verweist auf die Relation/-en in der die Abfrage durchgeführt werden soll Ausschließung bereits vergangener Termine: o WHERE zeitplan.datum>=date(now()) WHERE: Bedingungs Ausdruck; nur die Datensätze welche die folgende Bedingung erfüllen werden ausgegeben zeitplan.datum: die Bedigung bezieht sich auf das Attribut datum in der Relation zeitplan >=: logischer Operator größer gleich date(): legt das Format fest (YYYY-MM-DD) NOW(): gibt das aktuelle Datum und die Uhrzeit im Format YYYY-MM-DD HH-MM-SS aus. Sortierung der Abgefragten Datensätze: o ORDER BY zeitplan.datum, zeitplan.stunde ORDER BY: Befehl für die Sortieren-Funktion A. Voit, A. Wagemann, S. List 9

4.2.2 INSERT zeitplan.datum: Sortiert nach der Größe des Attributs datum in der Relation zeitplan zeitplan.stunde: Sortiert die bereits nach Datum sortierten Werte nochmal nach der Größe des Attributs stunde in der Relation zeitplan Begrenzung der ausgegebenen Datensätze o LIMIT 0,30 LIMIT: Befehl für Begrenzung der Anzahl an ausgegebenen Datensätzen 0,30: bestimmt die Anzahl der ausgegebenen Datensätze. In Diesem Fall werden 30 Datensätze, beginnend beim 0ten Datensatz ausgegeben. Zusammengefasst: SELECT pk_id, datum, klasse, fach, pruefung, stunde, lehrer, notiz FROM zeitplan WHERE zeitplan.datum>=date(now()) ORDER BY zeitplan.datum, zeitplan.stunde LIMIT 0,30 Mit dem SQL-Befehl INSERT können Datensätze in die Datenbank hinzugefügt werden. Beispiel: In die Relation Zeitplan soll ein Datensatz eingefügt werden. Auswahl in welche Relation der Datensatz eingefügt werden soll: o INSERT INTO `zeitplan` INSERT INTO: SQL Befehl für das Einfügen von Daten `zeitplan`: Angabe der Relation in die der Datensatz eingefügt werden soll. Festlegung für welche Attribute Werte eingefügt werden sollen o (`pk_id`, `datum`, `klasse`, `fach`, `pruefung`, `stunde`, `lehrer`, `notiz`, `user`) Die Attribute werden durch Kommas [,] getrennt angegeben Angabe welche Werte für die einzelnen Attribute eingetragen werden sollen o VALUES (NULL,?,?,?,?,?,?,?,?) VALUES: gibt an das es sich bei den folgenden Zahlen oder Strings um die einzutragenden Werte handelt NULL: Gibt an das in dieses Attribut kein Wert (auch nicht 0) eingetragen wird. In diesem Fall gilt dies für den Primärschlüssel pk_id. Dieser Wert wird von der Datenbank selbst festgelegt.?,?,?,?,?,?,?,?: Es handelt sich hier um 8 Variablen. Die? nehmen die Werte der einzutragenden Attributwerte an. Die Reihenfolge in der die Variablen angegeben sind muss hier die selbe wie bei der Festlegung der Attribute sein. A. Voit, A. Wagemann, S. List 10

Zusammengefasst: INSERT INTO `zeitplan` (`pk_id`, `datum`, `klasse`, `fach`, `pruefung`, `stunde`, `lehrer`, `notiz`, `user`) VALUES (NULL,?,?,?,?,?,?,?,?) 4.2.3 DELETE SQL-DELETE ermöglicht es einen oder mehrere Datensätze aus der Datenbank zu löschen. Beispiel: Es soll ein bestimmter Termin aus der Relation zeitplan gelöscht werden Auswahl in Welcher Relation sich der zu löschende Datensatz befindet o DELETE FROM `zeitplan` DELTE: SQL Befehl zum Löschen von Datensätzen FROM `zeitplan`: definiert die Relation in der sich der Datensatz befindet Auswahl welcher Datensatz der Relation gelöscht werden soll o WHERE zeitplan.pk_id=$frm_id WHERE: Bedingungs Ausdruck zeitplan.pk_id: Bezieht sich auf die Größe von pk_id in der Relation zeitplan =: logischer Operator gleich $frm_id: Wert des Parameters frm_id. Dabei handelt es sich um den Wert des Primärschlüssels des zu löschenden Datensatzes Zusammengefasst: DELETE FROM `zeitplan` WHERE zeitplan.pk_id=$frm_id; 4.2.4 UPDATE Der SQL-UPDATE Befehl erlaub es dem Benutzer bereits vorhandene Datensätze zu ändern. Beispiel: Es soll ermöglicht werden die Werte aller Attribute, zu ändern. Die einzige Ausnahme bildet in diesem Fall der Primärschlüssel pk_id. Festlegung in welcher Relation sich der zu bearbeitende Datensatz befindet: o UPDATE `zeitplan` UPDATE: SQL-Befehl zum Bearbeiten von Datensätzen `zeitplan`: Relation in der sich der Datensatz befindet Ersetzten der Werte in den gewünschten Attributen: o SET `datum` =?, `klasse` =?, `fach` =?, `pruefung` =?, `stunde` =?, `lehrer` =?, `notiz` =? SET: Befehl zum Ändern der folgenden Attribute A. Voit, A. Wagemann, S. List 11

`datum` =?: Das Attribut datum erhält den Wert der Variable?. Die Variable enthält die bestehenden Werte, bzw. bei Änderungen den neuen Wert. Auswahl des betroffenen Datensatzes: o WHERE `zeitplan`.`pk_id` =? WHERE: Bedingungs Ausdruck `zeitplan`.`pk_id`: bezieht sich auf das Attribut pk_id in der Relation zeitplan =: logischer Operator gleich?: Variable die den Primärschlüssel des zu ändernden Datensatzes enthält Zusammengefasst: UPDATE `zeitplan` SET `datum` =?, `klasse` =?, `fach` =?, `pruefung` =?, `stunde` =?, `lehrer` =?, `notiz` =? WHERE `zeitplan`.`pk_id` =? A. Voit, A. Wagemann, S. List 12

5 Entwicklung der Webseite Als Frontend ist im Allgemeinen der Bereich einer Anwendung definiert, der für den einfachen Benutzer sichtbar ist. Es dient hauptsächlich der optisch ansprechenden Darstellung von Daten. Im Hintergrund des Frontend befindet sich das Backend. Im Backend findet die Aufbereitung der Daten statt. Es stellt so zusagend das Gehirn einer Anwendung dar. Theoretisch könnte auch die Hardware, welche im Hintergrund notwendig ist, zum Backend gezählt werden. In diesem Fall jedoch, werden nur die Softwaremaßnahmen aufgeführt. 5.1 Das Frontend (A. Voit, S. List) Um dem Nutzer den einfachen Umgang mit Daten zur ermöglichen, wird eine übersichtliche Benutzeroberfläche benötigt. Diese wird mit Hilfe von HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets) gestaltet. Mit HTML kann der einfache Aufbau einer Webseite definiert werden (siehe Abbildung 4). Für weiterführende Designarbeiten ist CSS notwendig. Der Aufbau eines HTML Dokumentes folgt immer dem gleichen grundlegenden Schema. <html> <head> <title>startseite</title> <link rel="stylesheet" type="text/css" href="../style.css"> </head> <body> </html> </body> Mit <html> und </html> wird der Beginn und das Ende eines HTML Dokumentes definiert. Mit <head> und </head> wird der Beginn und das Ende des Head definiert. Dort befinden sich wesentliche Informationen zum Rest des Dokumentes. Zwischen <title> und </title> wird der angezeigte Name der Webseite im Browser festgelegt. Anschließend wird noch die CSS Datei eingebunden, welche später genauer erläutert wird. A. Voit, A. Wagemann, S. List 13

Mit <body> und </body> wird der Beginn und das Ende des eigentlichen Inhaltes der Webseite definiert. Dort werden später die Positionen und Inhalte von Überschrift, Menüband, Seitenleisten und Hauptbereich festgelegt. Abbildung 4: Aufbau der Webseite Mit Hilfe der bereits erwähnten CSS Datei kann das Aussehen der gesamten Webseite sehr einfach beeinflusst werden. Dazu stehen zwei Möglichkeiten bereit. Erstens, das Festlegen der Optik für jede Unterseite einzeln. Zweitens, das Festlegen des gesamten Designs der Webseite an einer zentralen Stelle. Dies bietet den Vorteil, dass die gesamte Webseite immer ein einheitliches Design aufweist. Letztere Variante wurde favorisiert und ausgewählt. In der CSS Datei sind folgende Designvorgaben definiert: Optik der Überschrift Optik und Funktion des Menübandes A. Voit, A. Wagemann, S. List 14

Größe und Aussehen der Seitenleisten Größe des Inhaltbereiches Design von Tabellen Die vorab definierten Designeinstellungen werden später durch folgende Befehle aufgerufen. <div class="header"> Überschrift </div> <div class="topnav"> Menüband </div> <div class="row"> </div> <div class="column side"> Linke Spalte </div> <div class="column middle"> Inhalt </div> <div class="column side"> Rechte Spalte </div> Die Inhalte des Menübands sind ausgelagert und werden mit Hilfe eines INCLUDE PHP Befehles eingebunden. Dies hat den Hintergrund, dass das Menü auf jeder Unterseite dieselben Inhalte hat. Die Inhalte der Rechten Spalten, welche als Werbespalte dient, ist ebenfalls aus den selben Gründen ausgelagert. A. Voit, A. Wagemann, S. List 15

5.2 Das Backend (A. Voit, A. Wagemann) Der gesamte Aufbau der PHP Dokumente wurde vorab einheitlich festgelegt (siehe Abbildung 5). Abbildung 5: Aufbau eines PHP Dokumentes Die Übergabe von Daten, welche in der Webseite eingegeben werden, an den Webserver kann mit zwei Varianten ausgeführt werden. GET: Die eingegebenen Parameter werden am Ende der URL angehängt, und somit an den Webserver geschickt. Die maximale Länge ist dabei begrenzt. POST: Die Parameter werden im Head der HTML beziehungsweise PHP Datei an den Webserver übermittelt. Bei dieser Variante gibt es keine Begrenzung der Länge. Zudem kann der Benutzer die Daten nicht ohne Weiteres einsehen oder verfälschen. A. Voit, A. Wagemann, S. List 16

Die Eingaben des Benutzers werden mit Hilfe von HTML Formularen entgegengenommen. <form name="frm_eingabe" method="post" action="verwaltung.php"> <input type="date" name="txt_datum"> <input type="text" name="txt_klasse"> <input type="submit" name="b_einfuegen" value="einfügen"> </form> Der Form Container legt fest, welche Eingabeelemente zusammengehören. Der gesamte Container sowie die einzelnen Elemente erhalten einen eindeutigen Namen. Für den gesamten Container wird die Methode POST festgelegt. Unter Action wird der Unterseite festgelegt, mit welcher die Daten übermittelt werden. Der Webserver und der PHP Interpreter können die gewünschten Operationen nur ausführen, wenn die Daten zu der richtigen Seite zugeordnet sind. Für die einzelnen Eingabefelder stehen verschiedene Typen zur Auswahl. Als Beispiel wurden hier Datum, Text und ein Senden Button angeführt. Sobald der Nutzer den Senden Button betätigt, werden alle Eingaben des Containers mittels POST übermittelt. Mit den übermittelten Parametern werden vom PHP Interpreter die Aufgaben ausgeführt. In diesem Fall handelt es sich um das Einlesen von Daten in die Datenbank. Die Eingaben des Benutzers haben immer eine jeweilige SQL Abfrage zur Folge. Die SQL Abfragen werden immer nach dem gleichen Schema bearbeitet. //SQL Query vorbereiten if (!($stmt = $mysqli->prepare("insert INTO `zeitplan` (`datum`) VALUES (?);"))) { echo "Prepare failed: (". $mysqli->errno. ") ". $mysqli->error; } //POST Paramter an Variablen binden (? werden ersetzt) if (!$stmt->bind_param("s", $_POST["txt_datum"])) { echo "Binding parameters failed: (". $stmt->errno. ") ". $stmt->error; } //SQL Query ausführen if (!$stmt->execute()) { echo "Execute failed: (". $stmt->errno. ") ". $stmt->error; } A. Voit, A. Wagemann, S. List 17

Die Ausgabe der Daten erfolgt auf ähnliche Weise. // SQL SELECT Query vorbereiten if (!($stmt = $mysqli->prepare("select datum FROM zeitplan"))) { echo "Prepare failed: (". $mysqli->errno. ") ". $mysqli->error; } //SQL Query ausführen if (!$stmt->execute()) { echo "Execute failed: (". $stmt->errno. ") ". $stmt->error; } //SQL Ausgabe an Variablen binden if (!$stmt->bind_result($dbv_datum)) { echo "Binding output parameters failed: (". $stmt->errno. ") ". $stmt- >error; } Die Variablen werden anschließend zeilenweise in einer Tabelle ausgegeben. echo "<table>\n"; while ($stmt->fetch()) { echo "<tr>\n"; echo "<td>". htmlspecialchars($dbv_datum). "</td>\n"; echo "</tr>\n"; echo "</table>\n"; Zusammenfassend sieht der gesamte Ablauf wie folgt aus (siehe Abbildung 6). Der Benutzer ruft die Webseite vom Webserver ab (Schritt 1). Der Webserver erkennt das PHP Quelltext in der Webseite vorhanden ist und übergibt diese an den PHP Interpreter. Da beim ersten Aufruf keine Parameter übermittelt wurden, kann der PHP Interpreter nur die SQL Abfragen für die Anzeige der Daten ausführen. Nach dem Ausführen der Abfrage wird das Ergebnis in HTML Quelltext übersetzt und vom Webserver an den Browser des Benutzers geschickt (Schritt 2). In Schritt 3 gibt der Benutzer Daten auf der Webseite ein. Die Daten werden beim Drücken des Senden Buttons als POST Parameter zusammen mit dem erneuten Aufruf der Webseite übermittelt. Der Webserver übergibt die POST Parameter und die angefragte PHP Grunddatei an den PHP Interpreter (Schritt 4). Dieser führt zuerst die SQL Abfragen zur Eingabe der Daten aus und anschließend die SQL Abfragen zum Auslesen der Daten. Das Ergebnis wird wieder in HTML Quelltext übersetzt und über den Webserver an den Webbrowser des Benutzers geschickt (Schritt 5). Durch den vorher definierten Aufbau der PHP Datei ist gewährleistet, dass zuerst alle Eingaben in die Datenbank und anschließend die Ausgaben der Datenbank abgearbeitet A. Voit, A. Wagemann, S. List 18

werden. Somit hat der Benutzer sofort nach Betätigung des Senden Buttons den aktuellen Stand der Daten auf dem Bildschirm. Abbildung 6: Ablauf im Detail A. Voit, A. Wagemann, S. List 19

6 Bedienungsanleitung (S. List) Nach aufrufen der Website gelangt man auf die Startseite diese gibt einen Überblick über alle Anstehenden Leistungserhebungen. Schulaufgaben und Kurzarbeiten die heute anstehen werden Rot hervorgehoben um diese besser zu erkennen. Abbildung 7: Startbildschirm Im Verwaltungsmenü kann zum einen im obersten Eingabefeld ein neuer Termin eingefügt als auch im mittleren Feld alte Termine gelöscht und im Untersten Feld aktuelle Termine Bearbeitet sowie gelöscht werden. Abbildung 8: Übersicht Terminverwaltung A. Voit, A. Wagemann, S. List 20

Im Administrationsmenü können neue Benutzer Hinzugefügt oder gelöscht werden. Abbildung 9: Administraionsmenü Zudem wurde ein Download Bereich eingerichtet in dem man Links und Nützliche Dateien hinterlegen kann um diese dem Schüler bereitzustellen. Abbildung 10: Download Bereich A. Voit, A. Wagemann, S. List 21

7 Einleitung Projekt 2 7.1 Aufgabenstellung Aktualisieren Sie die Serverumgebung im Netzwerktechnik-Labor des Beruflichen Schulzentrums Amberg. Sever in Betrieb nehmen Software aktualisieren Netzwerkumgebung planen und ausführen Das Projekt soll der praktischen Anwendung von theoretisch erworbenen Fähigkeiten dienen. 7.2 Ablauf der Arbeiten 1. Deaktivierten Server erneut in Betrieb nehmen 2. Aktualisierung des Servers auf Microsoft Windows 10 Enterprise 3. Deaktivierung der Microsoft Internet Information Services (IIS) 4. Installation des Softwarepaketes XAMPP als Serverumgebung 5. Anlegen eines Dynamischen DNS 6. Aufbau eines Netzwerks für den externen Serverzugriff A. Voit, A. Wagemann, S. List 22

8 Einrichten der Serverumgebung Im Netzwerktechnik-Labor ist bereits ein funktionsfähiger Server vorhanden. Dieser wurde vor einigen Wochen vorrübergehend außer Betrieb gesetzt. Nach dem Anschließen und Hochfahren des Servers wird das aktuelle Betriebssystem Microsoft Windows 7 Enterprise aktualisiert und die bestehenden Daten gesichert. 8.1 Installation von Microsoft Windows 10 Enterprise (A. Voit) Auf der offiziellen Internetseite von Microsoft kann die ISO-Datei von Windows 10 Enterprise heruntergeladen werden. Nach dem Download wird die Datei auf einen USB-Speicherstick mit mindestens 16 GB freien Speicher kopiert. Anschließend wird die autosetup.exe aufgerufen und ausgeführt. Während der Installation sind die Anweisungen am Bildschirm zu befolgen. Nach der erfolgreichen Installation wird das System nach Benutzerwünschen konfiguriert. 8.2 Deaktivierung der Microsoft Internet Information Services (A. Wagemann) Die IIS sind eine Dienstplattform des Unternehmens Microsoft. Sie sind bereits im Betriebssystem integriert. Mit ihnen können Dokumente und Dateien in einem Netzwerk zugänglich gemacht werden. Um Konflikte mit der späteren Serverumgebung XAMPP zu vermeiden, werden die Dienste deaktiviert. Zur Deaktivierung ist folgendes Vorgehen notwendig: 1. Aufrufen der Systemsteuerung 2. Auswählen von Programme und Features 3. An der linken Seitenleiste die Option Windows-Features aktivieren oder deaktivieren auswählen 4. Im Scroll Menü nach Internetinformationsdienste suchen und den Hacken entfernen A. Voit, A. Wagemann, S. List 23

8.3 Installation von XAMPP (A. Voit) Auf der Internetseite des Entwicklers Apache Friends kann das Softwarepaket XAMPP heruntergeladen werden. Nach dem Download, wird die Software installiert und ausgeführt. Während dem Betrieb der Software, kann auf die freigegebenen Ordner des Servers über dessen IP-Adresse zugegriffen werden. A. Voit, A. Wagemann, S. List 24

9 Aufbau der Netzwerkumgebung Auf den Server soll von einer externen IP-Adresse aus zugegriffen werden. Um dies zu gewährleisten und die Eingabe einer wechselnden IP-Adresse zu umgehen, wird ein dynamisches DNS (Domain Name System) benötigt. Für die Sicherheit des internen Netzwerkes, wird zudem eine Portweiterleitung aktiviert. Alle eingehenden Anfragen werden somit automatisch an den Server geleitet. 9.1 Einrichten eines E-Mail-Kontos (A. Wagemann) Für das Einrichten eines Dyn DNS und um den ordnungsgemäßen Betrieb einer Fritz! Box zu gewährleisten, wird eine E-Mail-Adresse benötigt. Diese wird bei dem deutschen Free-Mail Anbieter web.de eingerichtet. E-Mail-Adresse: 18.FSMT2.BSZAM@web.de Zugangsdaten/Kennwort: 12345678 Sicherheitsfrage: Sicherheitsantwort: Stadt in der Sie geboren wurden? Amberg 9.2 Einrichten eines Dynamischen DNS (A. Wagemann) Die Einrichtung eines Dynamischen DNS erfolgt bei dem kostenlosen Anbieter www.dyndnss.net. Diese wird benötigt, da sich die IP-Adresse eines DSL-Anschlusses in der Regel alle 24 Stunden dynamisch ändert. Mit Hilfe des Service wird an Stelle einer dynamischen IP-Adresse ein festgelegter statischer Name aufgerufen (vgl. mit der Domain einer Webseite). Vorname: FSMT Nachname: BSZAM E-Mail: Login Name: Passwort: 18.FSMT2.BSZAM@web.de FSMT2 cisco01 A. Voit, A. Wagemann, S. List 25

Nach dem Einrichten des Accounts, wird eine neue Dyn-DNS-URL angelegt. Dafür wird eine Sub-Domain benötigt. Über diese Domain sind unser Router und unser Server ab jetzt erreichbar. URL: http://fsmt2vpn.dyndnss.net Abbildung 11: Dyn-DNS-URL Daten 9.3 Einrichten des Routers (A. Voit) Als Router dient eine Fritz! Box. Diese wird vorübergehend direkt an den Server angeschlossen. Später wird das Netzwerk noch erweitert und umstrukturiert. Die Fritz! Box wird nach dem starten mit den Standardeinstellungen konfiguriert. In den Einstellungen unter Internet > Zugangsdaten werden die DSL-Zugangsdaten eingegeben. Unter dem Menüpunkt System > Benutzer wird ein neuer Fritz! Box Nutzer mit Hilfe der web.de E-Mail-Adresse angelegt. Dieser Benutzer wird bei dem MyFritz! Diensten registriert. Dadurch lässt sich auch alternativ zu einem Dyn-DNS der MyFritz! Nutzername als Domain-URL nutzten. Im Menüpunkt Internet > Freigaben > DNS lässt sich anschließend der Zugang per Dyn-DNS anlegen. Die Portweiterleitung wird durch Einstellungen in Internet > Freigaben > Portfreigaben realisiert. Sobald die Einstellungen abgeschlossen sind, kann über die Eingabe der Dyn-DNS oder alternativ der MyFritz! Adresse der Router aufgerufen werden. Durch die Portweiterleitung werden alle eingehenden Anfragen an den Server geleitet. Dieser gibt anschließend A. Voit, A. Wagemann, S. List 26

die Dateien beziehungsweise Webseiten, welche im XAMPP Verzeichnis hinterlegt sind, frei. A. Voit, A. Wagemann, S. List 27

Abbildungsverzeichnis Abbildung 1: Vorläufiger Netzplan... 4 Abbildung 2: Endgültiger Netzplan... 5 Abbildung 3: Ablauf einer Datenbankabfrage... 6 Abbildung 4: Aufbau der Webseite... 14 Abbildung 5: Aufbau eines PHP Dokumentes... 16 Abbildung 6: Ablauf im Detail... 19 Abbildung 7: Startbildschirm... 20 Abbildung 8: Übersicht Terminverwaltung... 20 Abbildung 9: Administraionsmenü... 21 Abbildung 10: Download Bereich... 21 Abbildung 11: Dyn-DNS-URL Daten... 26 A. Voit, A. Wagemann, S. List 28

Tabellenverzeichnis Tabelle 1: Aufbau der Relation zeitplan... 7 Tabelle 2: Aufbau der Relation benutzer"... 7 Tabelle 3: Datentypen... 8 A. Voit, A. Wagemann, S. List 29