Textformate:

Kennenlernen HTML

Materialien:

• Handreichung HTML.pdf
• https://wiki.selfhtml.org/wiki/HTML
• https://www.w3schools.com/html/

1. Benutzt jetzt Notepad++, um das gleiche Dokument in reinem HTML nachzubauen. Ihr braucht dafür:

   • Das HTML-Grundgerüst (siehe "Handreichung HTML")
   • das <h1>-Tag
   • die <ul>- und <li>-Tags
   • das <strong>- und <em>-Tag

   Das Dokument kann im Webbrowser angezeigt werden

2. Fügt in dieses HTML-Dokument außerdem einen Hyperlink auf die Wikipedia-Seite zu HTML ein

3. Benutzt im Webbrower den Webinspector / Dev-Tools um neben der gerenderten Seite auch den Quellcode anzuzeigen.

   Der Inspector lässt sich idR. über die F12-Taste erreichen und steht in allen großen Browsern zur Verfügung. Die Dev-Tools von Chromium, Firefox und Edge unterscheiden sich dabei kaum voneinander.

   Schickt mir einen Screenshot des gerenderten Dokuments mit dem Quellcode im Webinspector. Zeigt dabei unbeding die Rohansicht des Quellcodes, nicht die aufklappbare Elementen-Ansicht.

4. Recherchiert in den Element-Referenzen bei Selfhtml, oder w3schools:

   • Was ist der Unterschied zwischen <b> und <strong>
   • Was ist der Unterschied zwischen <i> und <em>

   Schreibt mir als Antwort eine kurze Vermutung im Privatchat

Aufgabe (Webserver)

Installiert per wsl ein Debian GNU Linux in eurem Windows.

:> wsl --install -d debian
:> wsl
 -> Huch, da ist ein bash

Installiert via wsl einen Apache-Webserver

~$ apt-get install apache2

Lasst die HTML-Seite via apache ausliefern. → Recherche ;-)

Aufgabe Webserver-Config / HTTP

• Macht das Webserver-Verzeichnis über den Windows-Explorer schreibbar

  • ~# chmod a+w /var/www/html/
• legt eine HTML-Datei unter einem anderen Namen im Verzeichnis mit ab (z.B. die html-Datei aus MS-Office)

• greift auf die URL im Webbrowser zu

  • http://IPADRESSE/Dateiname.html
• versucht die HTML-Seite via telnet abzurufen (siehe Linux-Kurs)

~$ ncat -C localhost 80
GET / HTTP/1.1
Host: schnabbeldiwauwau
(leerzeile)
-> Antwort vom Server
STRG + d

~$ ncat -C localhost 80
GET /Text.txt HTTP/1.1
Host: isegal
(leerzeile)
-> Antwort vom Server
STRG + d

Aufgaben HTTP

1. Beobachtet im Webinspector / Dev-Tools das Tab "Netzwerk". Zu jedem Request lassen sich dort Request- und Response-Header einsehen.

   • vergleicht mit den Requests, bzw. der Ausgabe in ncat

2. betrachtet die Dateien in /var/log/apache2/, nutzt tail -f ... um die Dateien zu sehen während im Browser Seiten abgerufen werden

   • versucht auch eine Seite aufzurufen, die es nicht gibt, z.B. http://IPADRESSE/gibtsnicht.pdf

3. Vergleicht die Log-Einträge, die entstehen, wenn ihr mit verschiedenen Browsern (Chromium, Edge, Firefox) auf die selbe Seite zugreift.

   • wenn ihr via "localhost" oder über die IP-Adresse zugreift

4. Vergleicht auch, wie sich die Request-Header unterscheiden, die nicht im Log eingetragen werden.

   • Hierbei helfen die jeweiligen Dev-Tools.

   • Alternativ: ~# ncat -Cl 1024

     Zugriff via http://IPADRESSE:1024/

   • Schafft ihr es, von Hand eine Antwort an den Browser zu senden?

Weiterer Lese-Stoff: https://coveryourtracks.eff.org/learn

Aufgaben CGI

CGI = Common Gateway Interface

CGI ist eine Spezifikation, nach der ein Webserver mit beliebigen Backend-Programmen kommunizieren kann.

1. Aktiviert das CGI-Modul in apache: ~# a2enmod cgi

2. Schaut in die Config-Datei /etc/apache2/sites-enabled/000-default.conf.

   Fügt innerhalb des VirtualHost folgenden Absatz ein, um die Ausführung von CGI-Scripten zu aktivieren:

   <Directory /var/www/html/>
    Options       +ExecCGI
    AddHandler    cgi-script      .sh
   </Directory>

3. Legt im Webserver-Root folgendes Script an:

   #!/bin/sh
   
   echo "Content-Type: text/plain; charset=utf-8"
   echo ""
   
   date

   Ruft das Script im Browser auf. Was fehlt noch, um die Ausführung möglich zu machen?

4. Lasst über das Kommando env die Umgebungsvariablen des Scripts ausgeben. Was unterscheidet sich, wenn das Script auf der Kommandozeile ausgeführt wird.

5. Modifiziert das Script, um einen unterschiedlichen Text auszugeben, je nachdem, ob der Browser via localhost oder die 172.-er IP-Adresse auf das Script zugreift.

6. Lasst als Dokumenteninhalt vom Script einen HTML-Text ausgeben

   • Für mehrzeilige Ausgabe könnt ihr mehrere echo-Befehle nutzen
   • oder bequemer, ein echo mit mehrzeiligem Parameter
   • oder noch besser: ein "heredoc"

   cat <<-SCHNABBELDIWAUWAU
   <html><head>
    <title></title>
   </head><body>
    Foobar
   </body></html>
   SCHNABBELDIWAUWAU

   • warum wird im Browser der HTML-Text angezeigt, statt das gerenderte Dokument?

7. Im Shellscript kann man die Ausgabe eines Kommandos in einen String einfügen: z.B. via echo "foo $(date) bar", das geht auch in Heredocs.

   • fügt die Ausgabe von env in den HTML-Text ein
   • findet eine Möglichkeit, die Umgebungsvariablen im HTML-Dokument auch mehrzeilig darstellen zu lassen.

Aufgabe Formulare

1. Entwerft eine HTML-Datei mit einem Formular bestehend aus:

   • einem Texteingabefeld für "Benutzername"
   • einem "Absenden"-Button

   Das Formular soll per GET-Request an den Server gesendet werden.

2. Wie verändert sich die URL im Browser, wenn das Formular abgeschickt wird?

3. Lasst den HTML-Code durch ein Shell-Script ausgeben.

4. Wie kann das Shell-Script die Eingaben lesen, um sie zu verarbeiten?

   • Denkt daran, wie ein Programm in der CGI-Spezifikation Daten vom Server erhält

5. Gebt den eingegebenen Namen im HTML-Code in einer Begrüßung zurück: z.B. "Sei gegrüßt Schnabbeldiwauwau82"

   • der Name muss dafür als Variable aus den Request-Parametern herausgepopelt werden. Hierbei hilft z.B. das grep-Programm, oder cut, oder expr substr

     # Variable "un" setzen (für username)
     un="$( echo "${QUERY_STRING}" |cut -d= -f2)"

6. Teilt das Namensfeld in Vor- und Nachname auf

   • Passt die Grußzeile entsprechend an, hierfür müssen jetzt zwei Parameter verarbeitet werden

     # 2-Stufiges rauspopeln
     vn="$(echo "${QUERY_STRING}" | grep -oE "vn=[^&]+")"
     vn="$(echo "${vn}" |cut -d= -f2)"
     
     # 1-Stufiges rauspopeln mit 2-Stufiger Pipelinie
     nn="$(echo "${QUERY_STRING}" | grep -oE "nn=[^&]+" |cut -d= -f2)"

   • Was passiert wenn ein Name Umlaute, kyrillische Buchstaben oder sonstige Sonderzeichen enthält?

   Beachtet in der Praxis auch: https://www.w3.org/International/questions/qa-personal-names

Begriffe

Begriffe und übergänge sind ein bisschen unscharf

(Software-)Schnittstelle / Software-Interface

ein wie auch immer gearteter Übergang zwischen zwei Software-Systemen

Beispiel:

• HTTP-Protokoll: Webserver ↔ Webbrowser (wird aber häufiger als Netzwerkprotokoll bezeichnet)
• CGI (Common Gateway Interface): Verfahren um Dynamische Webseiten aufzurufen
• STDIN / STDOUT / Pipelines Programmaufrufe aus dem Betriebssystem
• Funktionsaufruf in einer Programmiersprache im weitesten Sinne, vgl. "Calling Conventions" wenn das sogar zwischen verschiedenen Programmiersprachen funktioniert

API

Application Program Interface

Beispiel:

• JSON / XML - APIs in Web-Netzwerk-Applikationen (eigentlich auch irgendwie Netzwerkprotokolle)
• Java-API (eigentlich eine Softwarebibliothek)

Softwarebibliothek

• stellt Funktionen / Methoden / Klassen bereit
• kann in eigenen Projekten eingebunden werden
• keine ganzen Programme
• Beispiel: Java Standard-Bibliothek (von Oracle als Java-API bezeichnet)
• libJPEG, etc... in C, Python, usw. (externe Softwarebibliotheken)
• Software muss sich an einige Konventionen aus der Bibliothek halten (Datenstrukturen, Objekt-Typen, z.B. RGB-Farb-Array für Bildverarbeitung)
• main()-Funktion ist selbst geschrieben, ruft Funktionen aus der Bibliothek auf

Framework

• ähnlich einer Softwarebibliothek
• strengere Konventionen bei der Benutzung

• Eigener Code enthält idR. keine main()-Funktionen, sondern definiert Module / Klassen / Funktionen, die vom Framework eingebettet werden

  • eigener Code beginnt idR. mit einer Einstiegsfunktion, die vom Framework aufgerufen wird (z.B. doGet() in Java WebApps)
• Stellt Funktionen, Properties, etc. bereit, die genutzt werden können

• Beispiele:

  • Plugin-Framework

    • Nextcloud-App
    • Wordpress-Plugin
    • Code-Highlighter in Notepad++
    • Videocodecs

Aufgabe CGI-Framework

1. ~# git clone https://git.plutz.net/git/cgilite /opt/cgilite

   cgilite ist ein relativ unaufdringliches Framework was in vielen Fällen wie eine Funktionsbibliothek genutzt werden kann.

2. im CGI-Script einbetten

   . /opt/cgilite/cgilite.sh

   (. im Shellscript entspricht dem include/import in anderen Sprachen)

3. Danach stehen einige Funktionen für das Programm zur Verfügung, Anwendungsbeispiele.

   • $(GET vn), $(GET nn)
   • $(POST ...)
   • $(HTML "${text}"), $(URL "${text}")

4. Benutzt cgilite in dem formular-Script

   • ändert die Formular-übertragung auf method="POST"

     • wie verhält sich die URL-Zeile beim Absenden des Formulars?
     • was passiert, wenn im Browser nach dem Absenden F5 gedrückt wird (in Firefox, Chromium)

     • was passiert wenn als Vorname "<input name=chaos>" ins Formularfeld eingegeben wird.

       • nutzt die oben Erwähnte HTML-Funktion um die Benutzereingabe zu bereinigen

Aufgabe GET / POST

Das Shellscript soll den übermittelten Namen in die Datei /tmp/webname schreiben (echo ... >datei ... wissenschon).

1. Auf den POST-Request wird nach speichern des Namens, ein Redirect ausgelöst. Z.B. REDIRECT /formular.sh. Die Redirect Instruktion muss gesendet werden, bevor das Script irgendeine andere Ausgabe erzeugt.

   Hinweis: durch die Umgebungsvariable ${REQUEST_METHOD} kann unterschieden werden, ob das Script mit einem GET oder POST-Request arbeitet.

2. Wird die Seite via GET abgerufen, soll sie immer den Namen anzeigen, der zuletzt in die Datei geschrieben wurde.

   • get_post_2.sh

3. Schreibt ein "Gästebuch", in dem Einfach immer kleine Nachrichten abgelegt werden. Immer beim besuchen der Seite, sollen alle Nachrichten angezeigt werden, die dort hinterlassen wurden.

   • book.sh

Aufgabe:

Baut eine HTML Seite mit dem Titel "William Howard Taft", und einem Bild von eben diesem! (siehe auch The Website Obesity Crisis)

• a. Die HTML-Seite zeigt nur das Bild an.
• b. Der Seiteninhalt soll horizontal zentriert sein
• c. Der Seiteninhalt soll auch vertikal zentriert sein.

Schickt mir den HTML-Code und einen Screenshot.

Lösung: Taft.html

Aufgabe Java (Auffrischung / Wiederholung)

1. Schreibt ein "Hallo Welt!"-Programm in Java.

   • ohne nachgucken
   • in Notepad++
   • :> javac Klassenname.java

   :> java Klassenname

Aufgabe Java

Schreibe ein Java-Programm, eine einzelne Klasse, die das amerikanische Sauflied "99 Bottles of Beer" ausgibt. Das Lied beginnt mit der Strophe:

99 bottles of beer on the wall 99 bottles of beer Take one down, pass it around 98 bottles of beer on the wall.

Die letzte Strophe lautet

1 bottle of beer on the wall 1 bottle of beer Take one down, pass it around 0 bottles of beer on the wall.

Go to the Store, buy some more!

Optimiere schrittweise:

• a. das Programm soll erst einmal irgendwie laufen
• b. Programmgröße < 1kB
• c. beachtet das Singular ("bottle", nicht bottles) in der letzten Strophe
• d. Programmgröße < 512B

Schickt mir den Quellcode per Privatchat (bitte als Code, nicht als Screenshot).

• Bottles.java (etwas größer, weil mit CLI-Argument)

Java Web Application Server

• installiert in wsl die Pakete tomcat10, tomcat10-admin, tomcat10-docs und tomcat10-examples
• besucht im Webbrowser die Seite: http://IPADRESSE:8080/

• Besucht die Management-Seite, die dort verlinkt ist

  • Für den Zugang zum Management-UI muss ein Passwort konfiguriert sein, hierzu gibt der Tomcat freundlicherweise ein paar Hinweise
• Deployed auf der Management-Seite die Beispiel-Applikation von der Tomcat-Webseite: https://tomcat.apache.org/tomcat-10.1-doc/appdev/sample/sample.war

Servlet erstellen in IntelliJ

• IntelliJ Ultimate
• Dokumentation für IntelliJ Community / Plain Maven: Servlet_Maven.html (Danke Lars!)

• Neues Projekt erstellen
• Wichtig: Template für Web Application

• In Tomcat10: jdk-Version nicht über 17, u. Jakarta EE Version nicht über 10

  • Alternativ: aktuellen Tomcat benutzen

• Quellcode-Dateien im Projekt sind:

  • webapp/index.jsp... kann auch durch index.html ersetzt werden
  • zusätzlich können hier weitere statische Dateien abgelegt (z.B. .css, .js)

  • src/main/java/.../*.java → Servlet Klassen mit dynamischem Code

    • Greeter.java (Datei muss ggf umbenannt werden)

• Im Maven-Menü eine .war-Datei erstellen

  • .war-Archiv erscheint im target/-Verzeichnis des Projekts
  • ggf. auch explizit einen Rebuild des Projekts auslösen

• .war-Datei kann im Manager-UI von Tomcat deployed werden

  • vorherige Versionen vorher explizit undeployen

Aufgabe Java-Servlet

Die Grußzeile in der Greeter-Applikation wird auch dann ausgegeben, wenn kein Name in der Form eingegeben wurde.

1. Die gesamte Grußformel soll nur auf der Seite stehen, wenn mindestens Vor- oder Nachname angegeben wurden.

2. Teste dabei die Fälle:

   • Seite ohne Parameter aufgerufen
   • Leere Felder abgeschickt
   • einzelner Namensteil eingetragen
   • vollständiger Name eingetragen

   Greeter.java (Datei muss ggf umbenannt werden)

Servlet GET / POST

Im aktuellen Zustand sehen wir die übertragenen Informationen wieder in der Adresszeile des Browsers.

1. Übertragt die Informationen als POST-Request

   • d.h. das Servlet muss natürlich auch einen POST-Request verarbeiten

2. Das Servlet soll auf den POST-Request mit einem Redirect antworten

   • lest dazu die Dokumentation zu HttpServletResponse

3. Anders die Shellscripte sind unsere Servlet-Objekte im Server persistent.

   • Legt Variablen für Vor- und Nachname im Servlet-Objekt als Properties an.

   • Der POST Request soll die Properties aus den Request-Parametern setzen

   • Auf der "normalen" GET-Seite soll die Grußformel mit den eingesetzten Properties angezeigt werden.

   • → Greeter3.java

4. Was passiert mit den gespeicherten Properties, wenn man im Tomcat-Manager hinter der Greeter-Applikation auf den Reload-Button drückt?

Aufgabe: Gästebuch

1. Schreibt eine Gästebuchapplikation

   • auf der GET-Seite soll eine <textarea>-Eingabeform angezeigt werden und darunter alle vorherigen Posts
   • Der Name des Posters ist optional
   • Wird in der Eingabeform <html>-Code eingegeben, soll dieser bei der Wiedergabe nur angezeigt, nicht vom Browser interpretiert werden (→ Escaping / Sanitizing)
   • Die ArrayList-Klasse eignet sich zur Speicherung der Einträge in der Applikation

   → Gaestebuch1.java

2. Wird die Applikation neu gestartet, sollen die Einträge erhalten bleiben.

   • → Die Datenstrukturen sollten nicht nur in einer Property, sondern in einer datei gespeichert werden
   • Dateien können irgendwo im Linux-Dateisystem abgelegt werden, sofern der Tomcat-Server dort Schreibrechte hat. Nutzt z.B. den Ordner /srv/webapp/ (siehe Chat) aus der vorherigen Übung, oder legt einen Eigenen an
   • Mit dem ObjectWriter ObjectOutputStream kann eine ArrayList in eine Datei geschrieben werden. Das Vorgehen hierbei ist etwas ... Java'esque.

   → Gaestebuch2.java

~# cp /lib/systemd/system/tomcat10.service /etc/systemd/system/
~# sudo nano /etc/systemd/system/tomcat10.service
-> bei den ReadWritePaths mit eintragen:
ReadWritePaths=/srv/webapp/

~# systemctl daemon-reload
~# systemctl restart tomcat10

~# mkdir /srv/webapp/tomcat
~# chown tomcat:tomcat /srv/webapp/tomcat

Erklärung: Interfaces in Java

• Verhält sich ein Bisschen wie eine abstrakte Klasse (wird nicht Klasse genannt!)
• Kann nicht als eigenes Objekt angelegt werden
• Enthält Definitionen von Methoden, aber nicht die Methoden selbst

• Eine neue Klasse kann ein Interface implementieren (man sagt nicht erben/extenden!)

  • Die implementierende Klasse ist dann gezwungen die vordefinierten Methoden anzulegen
• Vorteil gegenüber der abstrakten Klasse: Eine neue Klasse kann mehrere Interfaces implementieren (Vorteil gegenüber Vererbung in Java)
• Nachteil gegenüber der Abstrakten Klasse: Methoden dürfen im Interface selbst nicht implementiert sein! (Die abstrakte Klasse erlaubt dagegen abstrakte und nicht-abstrakte Methoden)

• Einige Methoden aus der Java-Standard-Bibliothek (Java-API) benötigen Argumente, die ein bestimmtes Interface implementieren

  • → dadurch erhält die Methode, die Garantie, in dem übergebenen Objekt bestimmte Methoden aufrufen zu können (nämlich die Methoden, die das Interface vorschreibt)

https://docs.oracle.com/en/java/javase/17/docs/api/allclasses-index.html
IHK-Prüfungsrelevant eigentlich nur bei Klassendiagrammen: https://de.wikipedia.org/wiki/Klassendiagramm

Beispiel für die Praxis: ObjectOutputStream und das Serializable-Interface

Aufgabe User-Accounts

Legt eine Applikation mit folgenden Funktionen an.

1. Auf einer Seite können Benutzer ein Benutzerkonto anlegen. Zu einem Benutzerkonto gehören Benutzername, ein Passwort und optional eine Email-Adresse.

   • Das Passwort muss bei der Account-Erstellung zweimal angegeben werden

   • Stimmen die zwei Passwortangaben nicht überein, gibt es eine Fehlermeldung und der Account wird nicht angelegt

   • Existiert schon ein Konto mit gleichem Benutzernamen, gibt es eine Fehlermeldung und der Account wird nicht angelegt

   • Die Email-Adresse wird in diesem Beispiel nicht auf Funktion überprüft, wird nicht mit anderen Accounts korreliert und ist vollkommen Optional

   • Zusatz:

     • POST-Eingaben sollen immer einen Redirect auslösen. Fehlerseiten dürfen nicht als Content einer POST-Seite ausgeliefert werden.
     • Die selben Informationen sollen im Fehlerfall nicht mehrmals abgefragt werden. Z.B. soll das Feld mit der Email-Adresse vorausgefüllt sein, wenn der Passwortvergleich fehlgeschlagen ist.
     • Passworte sollen in der Applikation verschlüsselt abgelegt werden. Hierzu kommt ein kryptografisches Prüfsummenverfahren (auch Hash-Verfahren) zum Einsatz. Gespeichert werden ein "Salt" und der HMAC von Salt und Passwort.
     • Benutzerkonten sollen auf der Platte gespeichert werden

2. Auf einer weiteren Seite (der Startseite) gibt es ein Login-Feld, das Benutzername und Passwort entgegennimmt.

   • Logt sich der Benuzter ein, wird der Benutzer auf eine User-Seite (siehe Teil 3) weitergeleitet
   • Ist das Passwort falsch, gibt es eine Fehlermeldung, der Benuzter fällt wieder auf die Login-Seite zurück

3. Die Benutzerseite zeigt Benutzernamen, Email-Adresse und eine <textarea> mit persönlichen Notizen an.

   • Die Benutzerseite ist nur zugänglich wenn ein User eingeloggt ist

   • Wird eine Benutzerseite aufgerufen, ohne dass eine Session besteht, soll der Server den Statuscode 403 und eine entsprechende Fehlerseite liefern

   • Zusatz:

     • Die Notizen sollen persistent gespeichert werden

4. Auf der Benutzerseite soll sich ein Logout-Button befinden.

   • Nach einem Klick auf den Logout-Button soll die Benutzerseite nicht mehr zugreifbar sein.

5. Neben der Benutzerseite soll eine Account-Seite existieren

   • dort soll das Passwort geändert werden können
   • Das Benutzerkonto mit allen angehängten Informationen kann dort gelöscht werden

6. Legt eine CSS-Datei an, die von allen Seiten eingebunden wird.

   • Eingabefelder sollen auf allen Seiten zentriert sein
   • Account-Name und Logout-Button sollen optisch abgesetzt am oberen Rand angezeigt werden.

Zusatz:

1. Neben dem Login wird auf eine Passwort-Recovery-Seite verlinkt

   • Hat ein Benutzer sein Passwort vergessen, kann er dort rauf klicken.
   • Auf der Recovery-Seite wird nur der Benutzername abgefragt
   • Hat der Benutzer keine Email-Adresse hinterlegt, erfolgt keine Aktion
   • gibt es eine Email-Adresse, wird im Dateisystem eine Datei mit dem Namen der Email-Adresse abgelegt (wir haben keinen Mail-Server konfiguriert)

   • in der Datei soll als Text ein Hyperlink stehen, der direkt zu einer Passwort-änderungs-Seite führt

     • oder im einfachsten Fall einfach zu der Account-Seite
   • Der Zustand Email hinterlegt / nicht Hinterlegt soll auf der Recovery-Seite nicht unterscheidbar sein, so dass für Dritte nicht einsehbar ist, ob ein bestimmter Account existiert oder nicht.