Projektirung und Erstellen eines Zeitplaner für Leistungsnachweise

Projektirung und Erstellen eines Zeitplaner für Leistungsnachweise von Scherl Alexander, Sorgenfrei Thomas 11. Januar 2018 1 von 24 Freitag, 12. Januar 2018

Thema: Projektirung und Erstellen eines Zeitplaner für Leistungsnachweise Betreff: Name: Email: Ausarbeitung Zeitplan Sorgenfrei Thomas, Scherl Alexander An: Maximilian.Friedl@bszam.de Firma: BSZAM Datum: 11 Schule: BSZAM, FS, IT, Lehrer FRD 2 von 24 Freitag, 12. Januar 2018

Inhaltsverzeichnis Projekt Zeitplaner für Leistungsnachweise... 4 1 Auftrag... 4 2 Netzwerktopologie (A.Scherl)... 4 2.1 Erstellen Netzplan... 4 2.2 Netzkonfiguration... 4 3 XAMPP (A.Scherl)... 6 3.1 Erklärung XAMPP... 6 3.2 Funktionsweise XAMPP... 6 4 PHP (A.Scherl)... 7 4.1 Erklärung PHP... 7 4.2 Erstellung der Datenbank mithilfe von PHP... 7 5 Anleitung zur Erstellung eine Tabelle (A.Scherl)... 7 5.1 Erstellen einer Datenbank... 7 5.2 Erklärung SQL...10 5.3 Datensätze hinzufügen...10 5.4 Datensätze löschen...10 5.5 Datensätze updaten...11 5.6 Datensätze filtern...11 6 Realisierung des Datenbankzugriffs (T.Sorgenfrei)...11 6.1 Ziele unseres Projektes...11 6.2 Phase 5...11 6.3 Phase 5 Benutzeroberfläche...11 6.4 Ausführung (Ansicht php)...12 6.5 Ausführung (Schule php)...15 6.5.1 Software Daten...23 6.5.2 Quellen...23 3 von 24 Freitag, 12. Januar 2018

Projekt Zeitplaner für Leistungsnachweise 1 Auftrag Ziel der Aufgabe besteht darin, eine Webseite zu erstellen, bei dem ein Administrator Termine für Leistungsnachweise in die Datenbank schreibt. Diese werden auf einen Monitor angezeigt. Teilziele: Verbindung mit Xampp herstellen Teilziele: Abfrage der Datenbank Teilziele: Darstellung der Daten in einer Tabelle Teilziel: Löschen einzelner Einträge mithilfe eines Buttons Teilziel: Neue Einträge hinzufügen Teilziel: Einträge ändern Teilziel: Einträge filtern Ziel: Funktionierende Webseite 2 Netzwerktopologie (A.Scherl) 2.1 Erstellen Netzplan Abbildung 1 Netzplan 1.0 Der PC wurde mittels Patchkabel an den Router angeschlossen. Der Server hingegen wird mit einem Cross-Over-Kabel mit dem Router verbunden. 2.2 Netzkonfiguration Als erstes wurde der PC konfiguriert, in den Einstellungen legen wir die IP Adresse (192.168.1.2), die Subnetzmaske (255.255.255.0) und das Gateway (192.168.2.254) fest, mit der Gateway Adresse können Datenpakete in ein anderes Netz weitergeleitet werden. Mit der Gateway Adresse wird speziell der Router angesprochen. Im nächsten Schritt haben wir den Server konfiguriert. Die Vorgehensweise ist dabei dieselbe wie die Konfiguration eines Laptops. Beim Gateway wird die IP-Adresse des Anschluss Fa0/0 vom Router1 eingegeben, welche vorher festgelegt wurde. Um den Router0 zu programmieren, wird der PC1 an seinen RS232 Anschluss mit den Konsolen Anschlusses des Router0 verbunden, nun kann man den PC1 einschalten und das Terminal starten. 4 von 24 Freitag, 12. Januar 2018

Press RETURN to get started! Router> Router>enable Router#configure terminal Enter configuration commands, one per line. End with CNTL/Z. Router(config)#interface FastEthernet0/0 Router(config-if)#ip address 192.168.1.1 255.255.255.0 Router(config-if)#no shutdown Router(config-if)# %LINK-5-CHANGED: Interface FastEthernet0/0, changed state to up %LINEPROTO-5-UPDOWN: Line protocol on Interface FastEthernet0/0, changed state to up Router(config-if)#exit Router(config)#interface FastEthernet0/1 Router(config-if)#ip address 192.168.2.1 255.255.255.0 Router(config-if)#no shutdown Router(config-if)# %LINK-5-CHANGED: Interface FastEthernet0/1, changed state to up %LINEPROTO-5-UPDOWN: Line protocol on Interface FastEthernet0/1, changed state to up Router(config-if)# Router(config-if)#exit Router(config)#exit Router# %SYS-5-CONFIG_I: Configured from console by console Router#copy running-config startup-config Destination filename [startup-config]? Building configuration... [OK] Router# Das Netzwerk ist nun konfiguriert. Abbildung 2 Netzplan 2.0 5 von 24 Freitag, 12. Januar 2018

3 XAMPP (A.Scherl) 3.1 Erklärung XAMPP XAMPP ist eine Software die man kostenlos herunterladen kann. XAMPP ermöglicht das einfache Installieren und Konfigurieren eines Webservers Apache in Verbindung mit SQL und PHP. Das X bei XAMPP steht hierbei für die verschiedenen Betriebssysteme auf denen man es ohne Probleme verwenden kann. Da große Vorteil hierbei liegt darin, dass das Ganze im eigenen Netzwerk stattfindet und man keinen Internet Zugang benötigt. 3.2 Funktionsweise XAMPP Nach der erfolgreichen Installation von XAMMP muss man zuerst eine Verbindung zum Apache Modul und MySQL herstellen. Dies passiert indem auf die beiden Buttons Starten geklickt wird siehe Abbildung 1 und Abbildung 2 Abbildung 3 Xampp Appache und MySQL Modul starten Schritt 1 Abbildung 4 Xampp erfolgreiche Verbindung mit dem Appache und MySQL Modul 6 von 24 Freitag, 12. Januar 2018

4 PHP (A.Scherl) 4.1 Erklärung PHP PHP ist eine Skriptsprache, diese wird hauptsächlich zur Erstellung von dynamischen Webseiten oder Webanwendungen verwendet. PHP wird auch wie Xampp als Freeware im Internet zur Verfügung gestellt. Die Besonderheit an PHP ist die breitgefächerte Unterstützung durch die Datenbank, zudem können Funktionsbibliotheken und Internetprotokolle eingebunden werden. 4.2 Erstellung der Datenbank mithilfe von PHP Um Überhaupt eine Verbindung mit einer Datenbank herstellen zu können muss, diese zuerst im Modul MySQL erstellt werden. Hier gibt man die Tabellenstruktur der Datenbank vor die man später abfragen bzw. bearbeiten möchte. Abbildung 5 Übersicht phpmyadmin 5 Anleitung zur Erstellung eine Tabelle (A.Scherl) 5.1 Erstellen einer Datenbank Beim Erstellen einer neuen Datenbank betätigt man die Schaltfläche Neu 7 von 24 Freitag, 12. Januar 2018

Dadurch erscheint folgendes Fenster Abbildung 6 Datentyp auswählen In diese gibt man die gewünschten Tabellennamen ein und die Spaltenbezeichnungen. Nun ist es wichtig darauf zu achten den richtigen Datentypen für die Spalte auszuwählen. Bei der ID und Stunden werden nur Zahlenwerte benötigt, deswegen wählt man INT, welches bedeutet Integer, dadurch hat man Zahlen von 0 bis 4294967295 darstellen. Bei den Attributen Klasse, Lehrer, Fach, Leistungsnachweis und Bemerkung sind nicht Zahlen, sondern Texte erwünscht, deswegen wählt man VARCHAR, mit diesen Typ ist es möglich bis zu 65.535 Byte darzustellen, das heißt wenn man die UTF-8 Kodierung für Unicode-Zeichen verwendet, kann man bis zu 21.844 Buchstaben darstellen. Zuletzt wird die Spalte Datum mit dem Datentyp DATETIME definiert. Hierbei wird das automatisch das aktuelle Datum beim Erstellen einer neuen Zeile hinzugefügt. 8 von 24 Freitag, 12. Januar 2018

Nun ist es wichtig bei der Spalte ID den Hacken bei A_I zu setzen, dieser bedeutet auto_increment, dadurch werden die Datensätze automatisch nummeriert. Es erscheint folgendes Fenster Abbildung 7 Vergabe Primärschlüssel Beim setzen des Hacken, wird automatisch auch die Spalte ID als Primärschlüssel gesetzt, dadurch legt man fest das dieser Wert nur einmal in der Spalte vorkommen kann. Mit Betätigung der Schaltfläche OK, schließt man das Fenster. Bevor man nun unten rechts auf Speichern klickt, ist es noch nötig in den Spalten mit dem Typ VARCHAR einer gültigen Länge einzugeben, also wie viel Zeichen man abspeichern muss. Abbildung 8 Datensatzgröße definieren 9 von 24 Freitag, 12. Januar 2018

Nach Betätigung der Schaltfläche speichern, gelangt man in folgende Ansicht BSZAM Fachschule Abbildung 9 Übersicht Attribute 5.2 Erklärung SQL SQL ist eine Datenbanksprache, man benötigt sie zur Definition von Datenstrukturen, zum Bearbeiten und Abfragen erstellen. Die Abkürzung steht für Structured Query Language. 5.3 Datensätze hinzufügen Um neue Datensätze hinzuzufügen ist folgender SQL-Befehl nötig Abbildung 10 SQL-Befehl Datensatz hinzufügen In der ersten Zeile wird als erstes der notwendige Befehl eingegeben um einen neuen Datensatz einzufügen und zwar INSERT INTO, danach gibt man den Tabellennamen ein, Darauffolgen die Spaltenbezeichnungen. In der zweiten Zeile gibt man die Werte ein, hierfür ist der Befehl VALUES zuständig, dann werden die gewünschten Werte in der gleichen Reihenfolge wie die dazugehörigen Spaltennamen eingegeben und mit einen ; beendet man den Befehl 5.4 Datensätze löschen Um Datensätze zu löschen ist folgender SQL-Befehl nötig Abbildung 11 SQL-Befehl Datensatz löschen Der Befehl hierfür lautet DELETE FROM, danach kommt der Tabellenname, mit WHERE wählt man die Daten aus die gelöscht werden sollen, darauf der Tabellenname und eine Spalte nach welcher man Auswählen kann, in diesen Fall ID, darauf folgt ein = und der gewünschte Wert der Zeile die gelöscht werden soll. 10 von 24 Freitag, 12. Januar 2018

5.5 Datensätze updaten Um Datensätze zu updaten ist folgender SQL-Befehl nötig Abbildung 12 SQL-Befehl Datensatz update Der Befehl hierfür lautet Update, danach kommt der Tabellenname, mit SET wählt man die Attribute die man Updaten will. 5.6 Datensätze filtern Um Datensätze zu updaten ist folgender SQL-Befehl nötig Abbildung 13 SQL-Befehl Datensatz filtern Zuerst wird mit Select die Zeilen ausgewählt, danach kommt wieder der Tabellenname. Mit WHERE werden die Felder ausgewählt in der der Filter filtern soll. Mit dem LIKE kann man dann den gewünschten Suchbegriff eingeben. 6 Realisierung des Datenbankzugriffs (T. Sorgenfrei) 6.1 Ziele unseres Projektes Es sollte eine Oberfläche mit HMTL geschaffen werden, die es dem Benutzer erlaubt durch reine Texteingabe die Datenbank zu manipulieren. 6.2 Phase 5 HTML Editor Phase5 5.6.2.3 ist ein umfangreicher Editor mit viel Komfort. Die deutsche Freeware bietet neben den gängigen Funktionen eines Editors eine Umlaut- Konvertierung und Verschlüsselungs-Funktionen. Mit den Assistenten für Fußnoten und Einrückungen erleichtert HTML Editor Phase 5 die Arbeit weiter. Sie können auch mehrere Dateien gleichzeitig bearbeiten. Die Suchen- und Ersetzen-Funktion kann der Phase-Editor auf ein ganzes Projekt anwenden. Da das Programm ohne WYSIWYG arbeitet, zeigt es Ihre Webseiten zur Kontrolle auf Wunsch sehr flott im integrierten Browser an. Der ebenfalls integrierte Bildbetrachter hilft bei der Auswahl der Grafiken. 6.3 Phase 5 Benutzeroberfläche Abbildung 14 Benutzeroberfläche Phase 5 Editor 11 von 24 Freitag, 12. Januar 2018

6.4 Ausführung (Ansicht php) Zeile 1-6 In den Zeilen 1-6 wird der sogenannte Header definiert. Dieser definiert den Grundaufbau einer Seite. In Zeile 5 wird hierbei der Titel definiert den man später im Browserfenster angezeigt bekommt. Abbildung 15:Header Zeile 8-10 In diesen Abschnitt wird die Seite geöffnet. In Zeile 9 steht die Überschrift der Webseite. In Zeile 10 wird ein Zeilenumbruch realisiert. Abbildung 16: Body Zeile 12-14 In den Zeilen 12-14 wird ein Button erzeugt, mit dem man in die Editieransicht springen kann. Abbildung 17: Button Zeile 16 In der Zeile 16 wird die Überschrift erzeugt. Abbildung 18: Überschrift 12 von 24 Freitag, 12. Januar 2018

Zeile 18-22 In den Zeilen 11-15 beginnt der PHP Code mit dem Befehl <?php und endet mit dem Befehl?>. Der PHP Code ist dabei für den Anwender nicht sichtbar, da dieser nur vom Server ausgeführt wird. Zeile 12 wird die Funktion sqlcreate declariert. Es werden alle Spalten ausgewählt, deren ID größer Null ist. Abbildung 19: sqlcreate Zeile 28-33 In diesem Abschnitt werden alle Variablen deklariert, die nötig sind um die Datenbank bearbeiten zu können. Hierbei muss man darauf achten, dass man dieselben Variablen wie in der in MySQL Datenbank verwendet. Abbildung 20: dbopen Zeile 35-45 In den Zeilen 35-48 wird die Verbindung mit der Datenbank hergestellt. Der Auslöser hierfür ist der Befehl new mysqli, zudem werden die nötigen Variablen übergeben. Falls eine Verbindung mit der Datenbank nicht möglich ist wird der Text FAIL DN 0 results Zeile 39 ausgegeben. Ist die Verbindung erfolgreich wird Verbindung ok ausgegeben. Abbildung 21: Verbindung zur Datenbank 13 von 24 Freitag, 12. Januar 2018

Zeile 50-81 In den Zeilen 50-81 wird alles, was in der Datenbank steht ausgelesen und am Bildschirm in einer Tabelle ausgegeben. Wird kein Tupel gefunden, so wird 0 results ausgegeben. Abbildung 22: Tabelle erstellen Zeile 88-93 In den Zeilen 88 93 wird die Funktion dbclose erstellt, diese dient dazu die Verbindung zur Datenbank zu schließen, um die Datenbank für andere Prozesse freizugeben. Abbildung 23: dbclose 14 von 24 Freitag, 12. Januar 2018

Zeile 102-110 In den Zeilen 102-110 werden die Funktionen aufgerufen, das php Protokoll geschlossen, sowie der Body und das html Skript beendet werden. Abbildung 24: Protokolle schließen 6.5 Ausführung (Schule php) Abbildung 25: Tabelle Zeile 1-6 In den Zeilen 1-6 wird der sogenannte Header definiert. Dieser definiert den Grundaufbau einer Seite. In Zeile 5 wird hierbei der Titel definiert den man später im Browserfenster angezeigt bekommt. Abbildung 26: Header Zeile 8-10 In diesen Abschnitt wird die Seite geöffnet. In Zeile 9 steht die Überschrift der Webseite. In Zeile 10 wird ein Zeilenumbruch realisiert. Abbildung 27: Body 15 von 24 Freitag, 12. Januar 2018

Zeile 12-14 In den Zeilen 12-14 wird ein Button erzeugt, mit dem man in die Anzeigeansicht springen kann. Abbildung 28: Button erstellen Zeile 16-21 In den Zeilen 16-17 wird einen Methode erstellt, die in das php Schule Filter springen soll. In Zeile 18 wird eine Überschrift ausgegeben. In den Zeilen 20-21 wird das Eingabefeld und der dazugehörige Button erstellt. Abbildung 29: Filter erstellen Zeile 23-28 In der Zeile 23 beginnt der PHP Code. Der PHP Code ist dabei für den Anwender nicht sichtbar, da dieser nur vom Server ausgeführt wird. Zeile 12 wird die Funktion sqlcreate declariert. Es werden alle Spalten ausgewählt, deren ID größer Null ist. Abbildung 30: sqlcreate 16 von 24 Freitag, 12. Januar 2018

Zeile 35-40 In diesem Abschnitt werden alle Variablen deklariert, die nötig sind um die Datenbank bearbeiten zu können. Hierbei muss man darauf achten, dass man dieselben Variablen wie in der in MySQL Datenbank verwendet. Abbildung 31: Verbindungsparameter Zeile 42-52 In den Zeilen 42-52 wird die Verbindung mit der Datenbank hergestellt. Der Auslöser hierfür ist der Befehl new mysqli, zudem werden die nötigen Variablen übergeben. Falls eine Verbindung mit der Datenbank nicht möglich ist wird der Text FAIL DN 0 results Zeile 46 ausgegeben. Ist die Verbindung erfolgreich wird Verbindung ok ausgegeben. Abbildung 32: Verbindungsaufbau 17 von 24 Freitag, 12. Januar 2018

Zeile 65-94 In den Zeilen 65-94 wird alles, was in der Datenbank steht ausgelesen und am Bildschirm in einer Tabelle ausgegeben. Wird kein Tupel gefunden, so wird 0 results ausgegeben. In Zeile 85 87 werden die Buttons an jede einzelne Zeile gefügt, um die entsprechenden Befehle ausführen zu können Abbildung 33: Tabelle erstellen Zeile 104-114 In den Zeilen 104 114 wird die Funktion dbinsert erstellt, um Variablen übergeben zu können. Abbildung 34: dbinsert 18 von 24 Freitag, 12. Januar 2018

Zeile 118-122 In den Zeilen 118 122 wird die Funktion sqlinsert erstellt, diese dient dazu etwas in die Datenbank zu schreiben, mittels einer SQL Abfrage Insert INTO. Abbildung 35: sqlinsert Zeile 126-132 In den Zeilen 126-132 wird eine Funktion mit dem Namen sqlupdate erstellt. Diese Funktion ist dafür notwendig, um einen vorhandenen Datensatz ändern zu können. Dies geschieht mit der SQL Operation UPDATE. Abbildung 36: sqlupdate Zeile 137-141 In den Zeilen 137-141 wird eine Funktion mit dem Namen dbupdate erstellt. Mit dieser Funktion wird alles in die Datenbank übertragen. Abbildung 37: dbupdate Zeile 145-149 In den Zeilen 145-149 wird eine Funktion mit dem Namen sqlfilter erstellt. Mit dieser Funktion kann die Tabelle gefiltert werden. Hier wurde die SQL Anweisung WHERE verwendet. Abbildung 38: sqlfilter Zeile 151-154 In den Zeilen 151-154 wird eine Funktion mit dem Namen dbfilter erstellt. Mit dieser Funktion wird das gefilterte in der Datenbank angezeigt. Abbildung 39: dbfilter 19 von 24 Freitag, 12. Januar 2018

Zeile 156-176 In den Zeilen 156-176 wird eine Funktion mit dem Namen dbdelete erstellt. Mit dieser Funktion kann ein Datensatz gelöscht werden. Mit dieser Funktion kann auch überprüft werden ob derjenige zum Löschen eines Datensatzes berechtigt ist, mithilfe eines Passwortes. Diese Funktion wird aber hier nicht benutzt. Abbildung 40: dbdelete Zeile 181-186 In den Zeilen 181-186 wird eine Funktion mit dem Namen dbclose erstellt. Mit dieser Funktion wird die Verbindung mit der Datenbank wieder geschlossen und somit für eine andere Anwendung wieder freigegeben. Abbildung 41: dbclose 20 von 24 Freitag, 12. Januar 2018

Zeile 190-214 In den Zeilen 190-214 werden die Variablen übergeben. Abbildung 42: Variablen Übergabe Zeile 217-222 In den Zeilen 217-222 wird die Funktion sqlinsert aufgerufen und mit den benötigten Variablen versorgt. Sowie die Funktion sqlupdate und sqlfilter mit den benötigten versorgt wird. Abbildung 43: Datenversorgung 21 von 24 Freitag, 12. Januar 2018

Zeile 229-248 In den Zeilen 229-248 wird die Funktion dbdelete ausgeführt, sobald der Button dbdelete gedrückt wurde. Gleiches gilt für die Funktion dbinsert, dbfilter und dbupdate. Abbildung 44: Aufruf Zeile 249-258 In der Zeile 249 wird die Funktion dbopen aufgerufen, um sich mit der Datenbank verbinden zu können. In Zeile 250 wird die Funktion sqlcreate aufgerufen. In Zeile 253 wird der Funktion leseninput Daten übergeben. In Zeile 254 wird das php Skript geschlossen und in den Zeilen 257 wird der Body der HTML Seite geschlossen und zum Ende wird auch der html Code beendet. Abbildung 45: Aufruf- Skript abschließen 22 von 24 Freitag, 12. Januar 2018

6.5.1 Software Daten XAMPP Control Panel v3.2.2 Microsoft Word 2013 Microsoft Paint 6.5.2 Quellen Internet: https://www.wikipedia.de http://dev.mysql.com/doc/refman/5.7/en/data-types.html http://www.w3schools.com Literatur: Taschenbuch Rechnernetze und Internet (3., neu bearbeitete Auflage) 23 von 24 Freitag, 12. Januar 2018

Abbildungsverzeichnis Abbildung 1 Netzplan 1.0... 4 Abbildung 2 Netzplan 2.0... 5 Abbildung 3 Xampp Appache und MySQL Modul starten Schritt 1... 6 Abbildung 4 Xampp erfolgreiche Verbindung mit dem Appache und MySQL Modul... 6 Abbildung 5 Übersicht phpmyadmin... 7 Abbildung 6 Datentyp auswählen... 8 Abbildung 7 Vergabe Primärschlüssel... 9 Abbildung 8 Datensatzgröße definieren... 9 Abbildung 9 Übersicht Attribute...10 Abbildung 10 SQL-Befehl Datensatz hinzufügen...10 Abbildung 11 SQL-Befehl Datensatz löschen...10 Abbildung 12 SQL-Befehl Datensatz update...11 Abbildung 13 SQL-Befehl Datensatz filtern...11 Abbildung 14 Benutzeroberfläche Phase 5 Editor...11 Abbildung 15:Header...12 Abbildung 16: Body...12 Abbildung 17: Button...12 Abbildung 18: Überschrift...12 Abbildung 19: sqlcreate...13 Abbildung 20: dbopen...13 Abbildung 21: Verbindung zur Datenbank...13 Abbildung 22: Tabelle erstellen...14 Abbildung 23: dbclose...14 Abbildung 24: Protokolle schließen...15 Abbildung 25: Tabelle...15 Abbildung 26: Header...15 Abbildung 27: Body...15 Abbildung 28: Button erstellen...16 Abbildung 29: Filter erstellen...16 Abbildung 30: sqlcreate...16 Abbildung 31: Verbindungsparameter...17 Abbildung 32: Verbindungsaufbau...17 Abbildung 33: Tabelle erstellen...18 Abbildung 34: dbinsert...18 Abbildung 35: sqlinsert...19 Abbildung 36: sqlupdate...19 Abbildung 37: dbupdate...19 Abbildung 38: sqlfilter...19 Abbildung 39: dbfilter...19 Abbildung 40: dbdelete...20 Abbildung 41: dbclose...20 Abbildung 42: Variablen Übergabe...21 Abbildung 43: Datenversorgung...21 Abbildung 44: Aufruf...22 Abbildung 45: Aufruf- Skript abschließen...22 24 von 24 Freitag, 12. Januar 2018