Projektirung und Erstellen eines Zeitplaner für Leistungsnachweise

Transkript

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

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

3 Inhaltsverzeichnis Projekt Zeitplaner für Leistungsnachweise Auftrag Netzwerktopologie (A.Scherl) Erstellen Netzplan Netzkonfiguration XAMPP (A.Scherl) Erklärung XAMPP Funktionsweise XAMPP PHP (A.Scherl) Erklärung PHP Erstellung der Datenbank mithilfe von PHP Anleitung zur Erstellung eine Tabelle (A.Scherl) Erstellen einer Datenbank Erklärung SQL Datensätze hinzufügen Datensätze löschen Datensätze updaten Datensätze filtern Realisierung des Datenbankzugriffs (T.Sorgenfrei) Ziele unseres Projektes Phase Phase 5 Benutzeroberfläche Ausführung (Ansicht php) Ausführung (Schule php) Software Daten Quellen von 24 Freitag, 12. Januar 2018

4 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 ( ), die Subnetzmaske ( ) und das Gateway ( ) 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

5 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 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 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 von 24 Freitag, 12. Januar 2018

6 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

7 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

8 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 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 Byte darzustellen, das heißt wenn man die UTF-8 Kodierung für Unicode-Zeichen verwendet, kann man bis zu 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

9 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

10 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

11 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 Phase 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

12 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 In den Zeilen 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

13 Zeile In den Zeilen 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 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 In den Zeilen 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

14 Zeile In den Zeilen 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 In den Zeilen 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

15 Zeile In den Zeilen 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

16 Zeile In den Zeilen wird ein Button erzeugt, mit dem man in die Anzeigeansicht springen kann. Abbildung 28: Button erstellen Zeile In den Zeilen wird einen Methode erstellt, die in das php Schule Filter springen soll. In Zeile 18 wird eine Überschrift ausgegeben. In den Zeilen wird das Eingabefeld und der dazugehörige Button erstellt. Abbildung 29: Filter erstellen Zeile 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

17 Zeile 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 In den Zeilen 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

18 Zeile In den Zeilen 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 werden die Buttons an jede einzelne Zeile gefügt, um die entsprechenden Befehle ausführen zu können Abbildung 33: Tabelle erstellen Zeile In den Zeilen wird die Funktion dbinsert erstellt, um Variablen übergeben zu können. Abbildung 34: dbinsert 18 von 24 Freitag, 12. Januar 2018

19 Zeile In den Zeilen wird die Funktion sqlinsert erstellt, diese dient dazu etwas in die Datenbank zu schreiben, mittels einer SQL Abfrage Insert INTO. Abbildung 35: sqlinsert Zeile In den Zeilen 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 In den Zeilen wird eine Funktion mit dem Namen dbupdate erstellt. Mit dieser Funktion wird alles in die Datenbank übertragen. Abbildung 37: dbupdate Zeile In den Zeilen 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 In den Zeilen 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

20 Zeile In den Zeilen 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 In den Zeilen 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

21 Zeile In den Zeilen werden die Variablen übergeben. Abbildung 42: Variablen Übergabe Zeile In den Zeilen 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

22 Zeile In den Zeilen 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 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

23 6.5.1 Software Daten XAMPP Control Panel v3.2.2 Microsoft Word 2013 Microsoft Paint Quellen Internet: Literatur: Taschenbuch Rechnernetze und Internet (3., neu bearbeitete Auflage) 23 von 24 Freitag, 12. Januar 2018

24 Abbildungsverzeichnis Abbildung 1 Netzplan Abbildung 2 Netzplan Abbildung 3 Xampp Appache und MySQL Modul starten Schritt 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 von 24 Freitag, 12. Januar 2018