Fi-24So-FIA-1P-A3
Der Skiclub hat im letzten Jahr nur zwei Kurse angeboten: „Skifahren für Anfänger“ und „Snowboard für Fortgeschrittene“.
Auf dieser Basis wurde ein einfaches Formular (Abbildung 2) erstellt, um die teilnehmenden Mitglieder zu erfassen (HTML hierzu siehe Anlage 1).
Für die kommende Saison soll dieses Formular angepasst und erweitert werden.
3.1 In der ersten Variante wurde nicht erfasst, ob die / der Teilnehmende bereits eine Skilehrerausbildung hat. Erweitern Sie das HTML-Formular in Anlage 1 um diese Eingabemöglichkeit wie in Abbildung 2 dargestelt.
Die Werte des Formularelements „Skilehrerausbildung“ sind wie folgt festgelegt:
- Teilnehmer ist Skilehrer: Wert = ja“,
- Teilnehmer ist kein Skilehrer: Wert = ,nein
3.2 Damit diese neue Eingabemöglichkeit vom Benutzer auch beachtet wird, soll das HTML Element farblich hervorgehoben werden.
Erweitern Sie den CSS-Bereich in Anlage 1 um eine Klasse „skilehrer“ die folgende Formatierungsanweisungen enthält:
- Hintergrundfarbe: rot
- Breite:300 pX
Wenden Sie diese Klasse auf das Eingabeelement an.
3.3 Die Attribute des Tags in Anlage 1 sind noch unvollständig. Vervollständigen Sie die beiden Attritbute, so dass das Formular an die URL htps://www.brettelhausen.de/kursanmeldung gesendet wird.
3.4 Begründen Sie Ihre Wahl des Attributs „method“.
3.5 Aus Sicherheitsgründen sollen die Personendaten an den Webserver des Vereins nur per HTTPS übertragen.
Beschreiben Sie das Funktionsprinzip von HTTPS.
Erklären Sie, weshalb ein Webzugriff mit HTTPS sicherer im Vergleich zu HTTP ist.
3.6 Die Formulardaten aus Aufgabe 3.1 werden an den Server als Key-Value-Paare übermittelt.
Notieren Sie in JSON-Notation die von obigem Formular übermittelten Daten, wenn Max Müller das Formular für den Kurs ,Snowboard“ als Skilehrer ausfüllt.
3.7 Sie planen die serverseitige Verarbeitung der Formulardaten. Diese sollen als Datensatz in der Tabelle Kursbelegung eingefügt werden. Beschreiben Sie die einzelnen Schritte zur Erstellung des erforderlichen SQL-Insert-Statements.
Gehen Sie davon aus, dass das Mitglied und der Kurs bereits erfasst wurden und im Datenbestand eindeutig anhand des Mitgliedsnamens und des Kurstitels identifizierbar sind.
Anlage 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body(font- family : Verdana, Arial, sans-serif; }
input{ display: block; width: 300px;}
label{ display: block; padding-top: 12px; }
select{ width: 200px; }
.my SendBut{ margin-top:30px; width: 100px; }
...
</style>
</head>
<body>
<form action=" ? " method=" ? ">
<fieldset>
<legend>Personendaten hier eingeben</legend>
<label for="vName">Vorname</label>
<input type ="Text" name ="vName" placeholder="Name">
<label for="nName">Nachname</label>
<input type ="Text" name ="nName" placeholder="Vorname":
<label for="kurs">Kurs</label>
...
<input type=" submit" name="send" value="absenden" class="mySendBut">
</fieldset>
</form>
</body>
</html>Lösungsvorschlag HTML
Man könnte die Übertragungsmethode GET vewenden. Diese hängt aber die Formulardaten an die URL an, die unter dem Action-Attribut angegeben ist. Die Daten wären somit in der Browserhistory sowie in den Logdateien auf dem Webserver sichtbar. Da es sich um personenbezogene Daten handelt, ist dies sicherlich nicht wünschenswert. Daher wurde die http-Übertragungsmethode POST verwendet. Diese übermittelt die Daten „versteckt“ in der http-Anfrage und sind somit nur sichtbar für den Client und den Webserver, der die Anfrage verarbeitet.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Personendaten Formular</title>
<style>
body{font-family: Verdana,Arial,sans-serif;}
input{display: block; width: 300px;}
label{display: block; padding-top: 12px;}
select{width: 200px;}
.mySendBut{margin-top: 30px; width: 100px;}
#skilehrer{ /* 3.2 4 Punkte id statt class */
background-color: red;
width: 300px;
}
</style>
</head>
<body>
<form action="https://www.brettelhausen.de/kursanmeldung" method="post"> <!--3.2 3 Punkte -->
<fieldset>
<legend>Personendaten hier eingeben</legend>
<label for="vName">Vorname</label>
<input type="text" name="vName" placeholder="Vorname" id="vName">
<label for="nName">Nachname</label>
<input type="text" name="nName" placeholder="Name" id="nName">
<label for="kurs">Kurs</label>
<select name="kurs" id="kurs" size="1"> <!--id ist nötig, size nicht unbedingt nötig, Default 1 -->
<option value="">Option wählen</option>
<option value="ski">Skifahren für Anfänger</option>
<option value="board">Snowboard für Fortgeschrittene</option>
</select>
<label for="skilehrer">Skilehrerausbildung</label> <!-- 3.1 5 Punkte -->
<select name="skilehrer" id="skilehrer"> <!-- id statt class -->
<option value="nein">nein</option>
<option value="ja">ja</option>
</select>
<input type="submit" name="send" value="absenden" class="mySendBut">
</fieldset>
</form>
</body>
</html>3.4 Lösung
Bei der Wahl von GET würden die Eingabedaten an die URL angehängt und damit die Personendaten sichtbar. Besser für diesen Anwendungsfall ist die Verwendung der POST-Methode, dabei werden die Daten nicht einfach sichtbar zum Server übertragen.
3.5 Lösung
HTTPS (Hypertext Transfer Protocol Secure) ist eine Erweiterung des HTTP-Protokolls, das sich durch die Verwendung von Transport Layer Security (TLS) oder früher Secure Sockets Layer (SSL) auszeichnet. Hier sind die Hauptmerkmale und das Funktionsprinzip von HTTPS:
Funktionsprinzip von HTTPS
- Verschlüsselung: Bei der Verwendung von HTTPS werden die Daten, die zwischen dem Client (z. B. einem Webbrowser) und dem Server übertragen werden, verschlüsselt. Dies bedeutet, dass die Informationen in ein Format umgewandelt werden, das für Dritte unlesbar ist.
- Authentifizierung: HTTPS verwendet digitale Zertifikate, um die Identität des Servers zu überprüfen. Bei der Verbindung zu einem HTTPS-Server sendet der Server sein Zertifikat an den Client. Der Client prüft dann, ob das Zertifikat von einer vertrauenswürdigen Zertifizierungsstelle (CA) ausgestellt wurde und ob es gültig ist.
- Integrität: HTTPS stellt sicher, dass die Daten während der Übertragung nicht verändert werden. Wenn jemand versucht, die Daten zu manipulieren, wird die Verbindung als unsicher angesehen, und der Client wird gewarnt.
Warum ist HTTPS sicherer als HTTP?
- Datenverschlüsselung: Bei HTTP werden die Daten im Klartext übertragen, was bedeutet, dass jeder, der die Datenübertragung abfängt (z. B. über ein unsicheres WLAN-Netzwerk), die Informationen leicht lesen kann. HTTPS schützt die Daten durch Verschlüsselung, was es für Angreifer nahezu unmöglich macht, die übertragenen Informationen zu entschlüsseln.
- Schutz vor Man-in-the-Middle-Angriffen: Bei HTTP kann ein Angreifer die Kommunikation zwischen dem Client und dem Server abfangen und möglicherweise manipulieren. HTTPS schützt vor solchen Angriffen, da die Daten verschlüsselt sind und der Server seine Identität durch das digitale Zertifikat nachweisen muss.
- Vertrauen und Glaubwürdigkeit: Webseiten, die HTTPS verwenden, zeigen oft ein Schlosssymbol in der Adressleiste des Browsers. Dies signalisiert den Benutzern, dass die Verbindung sicher ist und dass sie dem Server vertrauen können. HTTP-Seiten hingegen haben oft kein solches Vertrauen.
- Datenschutz: HTTPS schützt die Privatsphäre der Benutzer, da die übertragenen Daten, einschließlich persönlicher Informationen, Passwörter und Zahlungsdetails, vor neugierigen Blicken geschützt sind.
Zusammenfassend lässt sich sagen, dass HTTPS eine sichere Übertragung von Daten im Internet gewährleistet, indem es Verschlüsselung, Authentifizierung und Integrität bietet, während HTTP anfällig für verschiedene Sicherheitsrisiken ist.
3.6 Lösung
{
"vName" : "Max",
"nName" : "Müller",
"kurs" : "Snowboard",
"skilehrer" : "ja",
"send" : "absenden"
}Browser liefern das Attribut „send“ automatisch mit. Eine Lösung ohne dieses Attribut wäre dennoch akzeptabel, da je nach Verwendung eines Web-Frameworks dies serverseitig nicht offensichtlich zur Verfügung gestellt wird.
3.7 Lösung
- Suche in Tabelle Mitglied das Mitglied mit dem Namen „Müller und dem Vornamen „Max.
- Lese den Primary-Key aus dem gefunden Datensatz aus in die Variable mld.
- Suche in Tabelle Kurs den Kurs mit dem Namen ,Snowboard.
- Lese den Primary-Key aus dem gefunden Datensatz aus in die Variable kld.
- Erstelle ein Insert-Statement für die Tabelle Kursbelegung mit mld und kld.
- Führe Insert-Statement aus.