Erstellen einer Webseite zur Verwaltung von Informationen

Transkript

1 Staatliche Technikerschule für Mechatronik- und Elektrotechnik Erstellen einer Webseite zur Verwaltung von Informationen Munker Thomas, Süß Michael, Schmid Georg Betreuer: Herr Friedl

2 Thema: Betreff: Name: Erstellen einer Webseite zur Verwaltung von Informationen 18 FSMT2 IT Projekt Munker, Süß, Schmid Vorname: Thomas, Michael, Georg An: Von: Firma: BSZAM Datum: , Schule: BSZAM, FS,IT Lehrer FRD 1 T. Munker, M. Süß, G. Schmid

3 Inhaltsverzeichnis 1. Auftrag und Ziel (Süß M.) Netzwerkplan (Munker T.) Realisieren des Datenbankzugriffs, Datenbank (Schmid G.) PhpMyAdmin Erstellen einer Datenbank SQL Abfragen (Süß M.) Datensätze aus einer Datenbank lesen Schreiben in eine Datenbank Löschen eines Datensatz aus einer Datenbank Datensätze aktualisieren Datensätze filtern Layout der Webseite/Design (Munker T.) PHP Quellcode (Schmid G.) Was ist PHP Verbindungsaufbau zur Datenbank Eine Datenbank beschreiben Daten aus der Datenbank löschen Daten aus der Datenbank auswählen Auslesen der Datenbank Beenden der Verbindung Anleitung/Bedienung (Munker T.) Benutzte Software (Süß M.) Abbildungsverzeichnis (Munker T.) T. Munker, M. Süß, G. Schmid

4 1. Auftrag und Ziel (Süß M.) Staatliche Fachschule für Mechatronik- und Elektrotechnik An der staatlichen Fachschule für Mechatronik und Elektrotechnik Amberg wird jedes Jahr, von den Schülern, im Unterricht Datenbank bzw. Netzwerktechnik ein Projekt ausgearbeite. In diesem Jahr beschäftigte sich die FSMT2 mit dem Thema Terminplaner. Unser Team bestehend aus Georg Schmid, Thomas Munker und Michael Süß, beschäftigten sich mit dem Ziel, eine Website zu schaffen, auf welcher man anstehende Schulaufgaben, Termine oder Sonstiges anzeigen kann. Die Website soll auf einem TV im Gang präsentiert werden, um den Schülern eine bessere Information ermöglichen zu können. Es sollen die aktuellen Termine ganz oben angezeigt werden und die bereits abgeschlossen ausgeblendet werden. In der Übersicht sollen die Termine mit Datum, Klasse, Fach, Prüfungsart, Unterrichtsstunde, Lehrer und eine Bemerkung angezeigt werden Desweitern die Website am Ende im Adminmodus mit Passwort bearbeitet werden können, also Termine eingegeben, bearbeitet bzw. gelöscht werden. Die Projekte sollen den Schülern den Umgang mit HTML, PHP und SQL Skripten verdeutlichen und zum Verständnis beitragen. Ziel: Funktionierende Website 3 T. Munker, M. Süß, G. Schmid

5 2. Netzwerkplan (Munker T.) Staatliche Fachschule für Mechatronik- und Elektrotechnik Zu aller Erst wurde das Netzwerk mit Cisco Packet Tracer erstellt bei diesem wir einen Bediener als Laptop, einen Router und einen Server der unsere Datenbank wiederspiegeln soll. D.h. hier haben wir 2 Netze aus 3 Komponenten. Die IP Adressen für den Laptop und dem Server wurden über das Cisco Config Menü manuell eingestellt, die Gateway Adressen wird automatisch hinzugefügt. Ports eingestellt: Router Einstellungen Überprüft: 4 T. Munker, M. Süß, G. Schmid

6 Nachdem alles funktionsgemäß erledigt wurde sieht der Netzplan folgendermaßen aus: Abbildung 1 Netzplan 5 T. Munker, M. Süß, G. Schmid

7 3. Realisieren des Datenbankzugriffs, Datenbank (Schmid G.) 3.1 PhpMyAdmin phpmyadmin ist eine Standardsoftware für das Verwalten von MySQL-Datenbanken. XAMPP ist eine Zusammenstellung von freier Software. XAMPP ermöglicht uns das Erstellen eines Webservers und einer Datenbank, die lokal auf unserem PC läuft und Zugriffe von außen über die IP-Adresse des PCs zulässt. 3.2 Erstellen einer Datenbank Als Erstes ist das Programm XAMPP zu starten. Danach müssen die zwei Module Apache und MySQL gestartet werden. Danach ist unter dem Modul MySQL unter der Aktion Admin der Datenbankmanager zu starten. Anschließend öffnet sich im Browser ein Fenster indem man unter dem Raster Neu eine neue Datenbank anlegen kann. Hierzu muss man den Datenbanknamen und optional einen Zeichensatz auswählen. Der Name sollte aussagekräftig sein. Als Nächstes sind die Namen der einzelnen Relationen einzugeben. Dies kann man entweder zu Fuß machen oder über einen SQL-Befehl eintragen. Wir haben uns für den SQL-Befehl entschieden. 6 T. Munker, M. Süß, G. Schmid

8 4. SQL Abfragen (Süß M.) Staatliche Fachschule für Mechatronik- und Elektrotechnik Die Datenbanksprache SQL bedeutet Structured Query Language mit welcher Datenbanken bearbeitet werden können. SQL wird für Abfragen verwendet und ist eine der am häufigsten verwendeten Sprachen. Zu den Befehlen 4.1 Datensätze aus einer Datenbank lesen Der Befehl SELECT wird zum Datenauslesen aus einer Datenbank verwendet und ist einer der meist genutzten Befehle. Der Befehl wird in der PHP-Datei angelegt und gibt die ausgewählten Datensätze aus, falls es zu einem Fehler kommt wird eine Fehlermeldung angezeigt. 4.2 Schreiben in eine Datenbank Der INSERT-INTO-Befehlt dient, um neue Daten in eine MySQL-Datenbank einfügen zu können. Es muss angegeben werden in welcher Relation der Datensatz eingefügt werden soll. VALUES gibt an, welche Daten in die Datenbank geschrieben werden und die jeweiligen Attribute der Tabelle müssen genannt werden. 7 T. Munker, M. Süß, G. Schmid

9 4.3 Löschen eines Datensatz aus einer Datenbank Hierzu wird der Befehl DELETE verwendet. Um Datensätze aus einer MySQL-Tabelle löschen zu können muss angegeben werden, welcher Datensatz aus welcher Datenbank gelöscht werden soll DELETE ( Befehl zum Löschen) From (Tabelle angeben) in unserem Fall tzeitplan 4.4 Datensätze aktualisieren Der SQL Befehl UPDATE ermöglich es, bereits eingefügte Daten ändern zu können. Es werden allerdings nur die Datensätze des jeweilig ausgewählten Primärschlüssels geändert. UPDATE (Befehl zum Ändern) Relation ( tzeitplan ) SET(Auswahl der zu bearbeitenden Attribute) 4.5 Datensätze filtern Hierbei werden die Datensätze, welche ähnlich wie der im Eingabefeld geschriebene Begriff sind ausgegeben. Der Befehl lautet SELECT * FROM (Tabelle) WHERE (Tabelle).id LIKE 8 T. Munker, M. Süß, G. Schmid

10 5. Layout der Webseite/Design (Munker T.) Das Design wird im HTML (Hypertext Markup Language) gestaltet und bestimmt den strukturellen Aufbau einer Internetseite. Hier gibt es verschiedene Funktionen für die Dokumentenstruktur, z.b. <html>, <head> und <body>. Die Kopfdaten werden durch den <title> bestimmt. Bei den Funktionen ist es wichtig diese wieder mit einem Slash zu schließen. Für die Eingabe der Daten wurde eine Tabelle mit <table> ohne Rahmen erstellt. Hier kann man die Länge der Felder bestimmen, den Namen und den Typ der Felder, z.b. text oder date. Mit fügt man Leerzeichen ein. Mit <input type> kann man verschiedene Button einfügen wie hier OK oder Eingabe löschen. Hier wurden auch die Umlaute wie bei ü mit ü umschrieben damit kein? auf der Webseite angezeigt wird. 9 T. Munker, M. Süß, G. Schmid

11 Um die eingegeben Daten anzuzeigen wurde mit <table border> eine Tabelle mit dem Rand 2 erzeugt und verschieden breiten Spalten. Darüber eine Überschrift mit <h1> eingefügt, die Zahl in der Überschrift legt lediglich die Größe fest. Darüber befinden sich Lediglich die Eingabefelder für den Filter und das Passwort die mit verschiedenen Button bestätigt oder nach der Filtereingabe durch Reset die ursprüngliche Tabelle angezeigt wird. 10 T. Munker, M. Süß, G. Schmid

12 6. PHP Quellcode (Schmid G.) Staatliche Fachschule für Mechatronik- und Elektrotechnik 6.1 Was ist 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. 6.2 Verbindungsaufbau zur Datenbank Um Datenbanken beschreiben zu können, müssen sie zuerst ähnlich einem Buch geöffnet werden. Dazu wird der Befehl dbopen() angelegt. Nun legt man den Servernamen, Benutzernamen, das Passwort des Benutzers und den Datenbanknamen fest. Diese Werte müssen die gleichen sein wie sie beim Installieren des XAMPP Servers festgelegt wurden. Danach muss eine Verbindung vom Client zum Server aufgebaut werden. Dies geschieht mit dem Befehl new mysqli() in dessen Klammern man die Zugangsparameter angibt. Anschließend wird überprüft eine Verbindung zu Stande gekommen ist. 11 T. Munker, M. Süß, G. Schmid

13 6.3 Eine Datenbank beschreiben Zunächst definiert man den SQL-Befehl zum Beschreiben der Datenbank, dazu wird der Befehl INSERT INTO verwendet, dem man den Tabellenname und deren Attribute, gefolgt von den einzufügenden Variablen anhängt. Diese Maske muss nun nur noch in die Datenbank eingetragen werden. 6.4 Daten aus der Datenbank löschen Um Daten aus der Datenbank zu löschen verwendet man DELETE FROM _ WHERE. Die Datenbank wird durchsucht und löscht den gewünschten Einträge. 6.5 Daten aus der Datenbank auswählen Um Daten aus der Datenbank auszuwählen benötigt man den SELECT Befehl 12 T. Munker, M. Süß, G. Schmid

14 6.6 Auslesen der Datenbank Mit der Funktion lesen können alle Tupel angezeigt werden. 6.7 Beenden der Verbindung Zu guter Letzt muss die Verbindung zum Server wieder geschlossen werden, was mit dem Befehl mysqli_close() durchgeführt wird. 13 T. Munker, M. Süß, G. Schmid

15 7. Anleitung/Bedienung (Munker T.) Man hat mehrere Möglichkeiten die Webseite zu öffnen, einerseits mit andererseits mit also das Verzeichnis in dem sich die Datei befindet. Man könnte die Datei aber auch in html umschreiben und per Doppelklick auf die Datei weitergeleitet werden. Im folgenden Bild wird die ursprüngliche Seite gezeigt ohne eingegeben Daten: Im oberen Bereich Prüfungsübersicht Eingabe kann man nun die Daten eintragen. Sollte alles passen kann man nun auf den OK-Button klicken, ansonsten auf Eingabe löschen um alle Felder zu bereinigen. Abbildung 2 Startseite Abbildung 3 Eingabe 14 T. Munker, M. Süß, G. Schmid

16 Nachdem man auf den OK-Button geklickt hat wird die Eingabe in der unteren Tabelle ausgegeben. Abbildung 4 Eingabe bestätigen Wenn später mehrere Prüfungen eingetragen worden sind, werden diese mit dem Datum sortiert, die neueste Spalte ganz oben. Abbildung 5 Sortierung nach Datum 15 T. Munker, M. Süß, G. Schmid

17 Außerdem kann man die verschiedenen Datensätze nach einem Wort filtern indem man das zu findende Wort in die Filter Zeile schreibt und auf den Suchen Button drückt. Auf Reset kann der alte Datensatz wieder geladen werden Abbildung 6 Filter Eine weitere wichtige Funktion stellt das ändern und löschen der Zeilen da. Zu aller Erst muss man das richtige Passwort admin in die Zeile eingeben und auf Bestätigen drücken, danach erscheinen zwei neue Button mit Ändern und Löschen. Hier kann man entsprechend auswählen ob man die Zeile löschen oder ändern will. Abbildung 7 Ändern und Löschen 16 T. Munker, M. Süß, G. Schmid

18 8. Benutzte Software (Süß M.) Staatliche Fachschule für Mechatronik- und Elektrotechnik Es wurde XAMPP eine kostenlose Software, welche ein einfaches Installieren und Konfigurieren eines Webservers Apache in Verbindung mit SQL und PHP ermöglicht. Ein großer Vorteil ist, dass man es ohne Internet Zugang im eigenen Netz und auf zahlreichen Betriebssystemen verwenden kann. Um XAMPP verwenden zu können muss man die Module Apache und MySQL starten (Bild Mitte), wenn man den Server schließen möchte geht man rechts unten auf Beenden. Abbildung 8 Startbildschirm XAMPP Abbildung 9 Benutzeroberfläche Phase 5 Zum Erstellen des HTML-Dokuments wurde der kostenlose Editor phase 5, ein für Windows basierender Editor verwendet. Er unterstützt mehrere Sprachen wie z.b. PHP, ASP oder SQL. 17 T. Munker, M. Süß, G. Schmid

19 9. Abbildungsverzeichnis (Munker T.) Abbildung 1 Netzplan... 5 Abbildung 2 Startseite Abbildung 3 Eingabe Abbildung 4 Eingabe bestätigen Abbildung 5 Sortierung nach Datum Abbildung 6 Filter Abbildung 7 Ändern und Löschen Abbildung 8 Startbildschirm XAMPP Abbildung 9 Benutzeroberfläche Phase T. Munker, M. Süß, G. Schmid