Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen

Ähnliche Dokumente
PHP MySQL - myphpadmin Formulardaten in eine Datenbank speichern

3 Query Language (QL) Einfachste Abfrage Ordnen Gruppieren... 7

DATENBANKEN SQL UND SQLITE VON MELANIE SCHLIEBENER

Folien php/mysql Kurs der Informatikdienste

Grundlagen der Informatik 2

Es geht also im die SQL Data Manipulation Language.

php Hier soll ein Überblick über das Erstellen von php Programmen gegeben werden. Inhaltsverzeichnis 1.Überblick Parameterübergabe...

Projektirung und Erstellen eines Zeitplaner für Leistungsnachweise

Grundlagen der Informatik 2

Datenbank und Tabelle mit SQL erstellen

Abbildung 6-8: Abfolge beim doppelten Abschicken von Formularen

Grundkurs MySQL und PHP

Datenbanken für Online Untersuchungen

Datenbanksysteme SS 2007

Datenbanken. Ein DBS besteht aus zwei Teilen:

Datenbanken SQL Einführung Datenbank in MySQL einrichten mit PhpMyAdmin

1)Einfache Ausgabe und Abfragen in PHP durchführen

Relationale Datenbanken in der Praxis

Grundlagen von SQL. Informatik 2, FS18. Dr. Hermann Lehner (Material von Dr. Markus Dahinden) Departement Informatik, ETH Zürich

PHP und MySQL. Integration von MySQL in PHP. Zellescher Weg 12 Willers-Bau A109 Tel Michael Kluge (michael.kluge@tu-dresden.

JSP Usereingabe. Inhalt. 1 Zielsetzung. SEW(3.Jg) Unterlagen zu Java Server-Pages Teil 2

Kapitel 4: PHP-Grundlagen Kapitel 5: PHP-Bausteine für Programme

Management of Information Systems. Tutorat: Session 3 Einführung in SQL

SQL für Trolle. mag.e. Dienstag, Qt-Seminar

1. Übung IT-Management HTML, CSS und JavaScript Teil 2. Einführung, , PC Pool

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 6: Datenbankabfragen mit SQL und PHP. Stand: Übung WS 2014/2015

Erste Schritte in etab

MySQL-Befehle. In diesem Tutorial möchte ich eine kurze Übersicht der wichtigsten Befehle von MySQL geben.

Carl-Engler-Schule Karlsruhe Datenbank 1 (5)

Multimedia im Netz Wintersemester 2013/14. Übung 02 (Hauptfach)

PHP + MySQL. Die MySQL-Datenbank. Hochschule Karlsruhe Technik & Wirtschaft Internet-Technologien T3B250 SS2014 Prof. Dipl.-Ing.

Konzept eines Datenbankprototypen Folie 1 Daniel Gander / Gerhard Schrotter

DB-Datenbanksysteme. DB SQL-DML 1 Mario Neugebauer

Web-basierte Anwendungssysteme PHP Teil 2

Internet-Technologien

"Die HTML-PHP-Schnittstelle -- Ein- und Ausgabe der Daten"

Begleitskript. zum PHP/MySQL. Kurs

PHP Schulung Beginner. Newthinking Store GmbH Manuel Blechschmidt

Python CGI-Skripte erstellen

MySQL, phpmyadmin & SQL. Kurzübersicht

Query-Manager Kurzanleitung Inhalt. Query-Manager. Kurzanleitung

insert, update, delete Definition des Datenbankschemas select, from, where Rechteverwaltung, Transaktionskontrolle

MySQL, Java und einiges mehr

MySql und PHP. Apache2: Konfigurieren für php4. ...\apache2\conf\httpd.conf aufrufen. Folgende Zeilen einfügen:

Übersicht der wichtigsten MySQL-Befehle

Datenbanktechnologie mit praktischen Übungen in MySQL und PHP

SQL Data Manipulation Language (DML) und Query Language (QL)

Folien php/mysql Kurs der Informatikdienste

Formular mit Radio-Buttons

PHP Kurs Online Kurs Analysten Programmierer Web PHP

Kapitel 9. Embedded SQL. Prof. Dr. Wolfgang Weber Vorlesung Datenbanken 1

Projekt Online-Shop:

Anwendungsentwicklung Datenbanken SQL. Stefan Goebel


Dateneingabe über ein HTML-Formular in eine Datenbank:

SQL-Injection. Seite 1 / 16

Dynamische Webseiten mit PHP. Oder: LAMP - The open way

Microsoft Access 2010 SQL nutzen


Mengenvergleiche: Alle Konten außer das, mit dem größten Saldo.

Die SQL-Schnittstelle

Funktionen in JavaScript

Trainingsmanagement Gutschein Management. Beschreibung

PostgreSQL unter Debian Linux

IV. Datenbankmanagement

105.3 SQL-Datenverwaltung

Report Builder 6.1 Einsteiger

DB1. DB SQL-DQL 1 Mario Neugebauer

Gregor Kuhlmann Friedrich Müllmerstadt. MySQL. Der Schlüssel zu Datenbanken-Design und -Programmierung. c 3 E. i- O Rowohlt Taschenbuch Verlag

2. Interaktive Web Seiten. action in Formularen. Formular. Superglobale Variablen $ POST, $ GET und $ REQUEST. GET und POST

Übung 1: Ein Website News-System mit MySQL

2. WWW-Protokolle und -Formate

Grundlagen der EDV 3. Vorlesung mit Übungen. Dipl. Ing. Martin Ney

SQL-Befehlsliste. Vereinbarung über die Schreibweise

Datenbanken Benutzerschnittstelle Seite 1 von 26

Funktionen in JavaScript

Proseminar: Website-Management-Systeme

Die Datenbank und der Strukturentwurf wurden vorher mit phpmyadmin erzeugt.

Inhaltsverzeichnis. 1 Hallo 13

Datenbankprogrammierung mit MySQL 5 und PHP 5 Spona

Microsoft Access Abfragen: Informationen anzeigen und sortieren

Übungen. DI (FH) Levent Öztürk

HowTo: Abfrage von Werten des CMC III per SNMP und MIB-Browser

SQL structured query language

Datenbanken. Seminararbeit. Einführung in das wissenschaftliche Arbeiten

PRG2 Folien Zicari Teil 5. Einführung in Datenbanken SS 2007

PHP- Umgang mit Datenbanken (1)

7. Datenbank-Zugriff. Vorlesung und Übung Dr. Peter Pfahler Institut für Informatik Universität Paderborn. Zum Beispiel aus PHP-Skripten: Client 7-2

SQL. SQL = Structured Query Language, ist eine standardisierte Sprache zum Gebrauch im Zusammenhang mit Datenbanken.

jetzt lerne ich PHP 5 & MySQL 4.1 Der schnelle Einstieg in die objektorientierte

Anwendersoftware. Thema 7 Dialoggestaltung mit HTML-Formularen. Sommersemester Dr. Henry Herper

Datenbank - Teil 3. Ziele: Eine Datenbank anlegen mit SQL. Daten eingeben mit SQL. Abfragen stellen mit SQL und PHP.

HTML Scripting. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 06. Dezember 2017

Arbeiten mit einem lokalen PostgreSQL-Server

e-bag Kurzanleitung e-bag Grundfunktionen

[Arbeiten mit dem Nvu Composer]

SQL, MySQL und FileMaker

Transkript:

Staatliche Fachschule für Mechatronik- und Elektrotechnik Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen von Voit Alexander, Wagemann Andreas, List Simon 3. Januar 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 (S. List)... 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 Abbildungsverzeichnis... 22 Tabellenverzeichnis... 23 A. Voit, A. Wagemann, S. List 2

1 Einleitung (S. List) 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

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 A. Voit, A. Wagemann, S. List 22

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 23