Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen

Größe: px

Ab Seite anzeigen:

Download "Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen"

Stefanie Solberg
vor 5 Jahren
Abrufe

1 Staatliche Fachschule für Mechatronik- und Elektrotechnik Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen von Voit Alexander 3. Januar 2018 Entwicklungsarbeit Staatliche Fachschule für Mechatronik- und Elektrotechnik Betreuer: Maximilian Friedl

2 Thema: Betreff: Name: Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen 18 FSMT2 IT Projekt Voit Alexander An: Von: / Firma: BSZAM Telefon: / Datum, Unterschrift: Schule: BSZAM, FS, IT, Lehrer FRD

3 Inhaltsverzeichnis Inhaltsverzeichnis Entwicklung der Webseite Das Frontend (A. Voit, S. List) Das Backend (A. Voit, A. Wagemann)... 5 Abbildungsverzeichnis... 9 Alexander Voit 1

4 1 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. 1.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 1). 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. Alexander Voit 2

5 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 1: 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 Alexander Voit 3

6 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 class="topnav"> Menüband <div class="row"> <div class="column side"> Linke Spalte <div class="column middle"> Inhalt <div class="column side"> Rechte Spalte 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. Alexander Voit 4

7 1.2 Das Backend (A. Voit, A. Wagemann) Der gesamte Aufbau der PHP Dokumente wurde vorab einheitlich festgelegt (siehe Abbildung 2). Abbildung 2: 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. Alexander Voit 5

8 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; Alexander Voit 6

9 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 3). 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 Alexander Voit 7

10 werden. Somit hat der Benutzer sofort nach Betätigung des Senden Buttons den aktuellen Stand der Daten auf dem Bildschirm. Abbildung 3: Ablauf im Detail Alexander Voit 8

11 Abbildungsverzeichnis Abbildung 1: Aufbau der Webseite... 3 Abbildung 2: Aufbau eines PHP Dokumentes... 5 Abbildung 3: Ablauf im Detail... 8 Alexander Voit 9

Ähnliche Dokumente

Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen

Staatliche Fachschule für Mechatronik- und Elektrotechnik Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen von Wagemann Andreas 3. Januar 2018 Entwicklungsarbeit Staatliche Fachschule für