Webentwicklung I (Forms und Actions)

In dieser Stunde ging es weiter mit dem Thema Webentwicklung. Um die gesamte Thematik rund um HTML, PHP und SQL noch weiter zu vertiefen, wurde in dieser Stunde der Grundstock für ein eigenes Loginsystem gelegt, welches nach korrekter Eingabe eines Benutzernamens und eines Passworts auf eine geschützte Seite weiterleitet. Dazu wurde zu Beginn eine neue HTML5-Seite konzipiert, welche neben dem typischen HTML-Aufbau ein Formular zur Interaktion aufweist. Innerhalb dieses Formulars wurden diverse Eingabefelder platziert, wobei hier ganz genau auf die zu vergebenden Feldtypen (z.B. text, password, email usw.) geachtet wurde. Außerdem wurden noch zwei Buttons zum Absenden und Zurücksetzen des Formulars sowie eine Checkbox zum Merken der Benutzereingaben innerhalb der Anmeldemaske implementiert. Im Anschluss daran wurde noch eine Action in das Formular integriert, welche beim Absenden des Formulars mittels der POST-Methode aufgerufen wird. Abschließend musste noch ein eigener Stylesheet für das Layout der Anmeldeseite gestaltet werden, indem diverse spezifische Selektoren für die Eingabefelder programmiert wurden.


Kompetenzen

  1. Ich verstehe für was man die Programmiersprachen HTML, CSS, PHP und SQL innerhalb der Webentwicklung verwendet.
  2. Ich kenne den Unterschied zwischen HTML und CSS und kann beide Dateitypen miteinander verbinden.
  3. Ich kenne diverse CSS-Befehle und kann diese mit unterschiedlichen Selectors innerhalb einer Datei anwenden.
  4. Ich verstehe wie ich neue Klassenelemente bzw. ID-Elemente erzeugen kann und wie diese in CSS aufzurufen sind.
  5. Ich kenne den Unterschied zwischen HTML und PHP und weiß wie PHP in Webseiten eingreifen kann.
  6. Ich verstehe wie HTML Formulare in Bezug auf deren Aktionen (Skriptaufruf) und Methoden (POST) arbeiten.
  7. Ich weiß wofür Visual Studio Code verwendet wird und wie man mit diesem erweiterbaren Code-Editor umgeht.
  8. Ich kenne virtuelle Webserver (z.B. XAMPP) und verstehe wie man damit umgehen muss.


Unterrichtsmaterialien