diff --git a/web/04/demos/basic_get.html b/web/04/demos/basic_get.html new file mode 100644 index 0000000..375da29 --- /dev/null +++ b/web/04/demos/basic_get.html @@ -0,0 +1,18 @@ + + + + + Formular + + +
+ +

+ + +

+ + +
+ + diff --git a/web/04/demos/basic_post.html b/web/04/demos/basic_post.html new file mode 100644 index 0000000..45b2d3d --- /dev/null +++ b/web/04/demos/basic_post.html @@ -0,0 +1,18 @@ + + + + + Formular + + +
+ +

+ + +

+ + +
+ + \ No newline at end of file diff --git a/web/04/demos/basic_search.html b/web/04/demos/basic_search.html new file mode 100644 index 0000000..daf981c --- /dev/null +++ b/web/04/demos/basic_search.html @@ -0,0 +1,17 @@ + + + + + + + Einfache Suche + + + +
+ + +
+ + + \ No newline at end of file diff --git a/web/04/demos/gastbestellung.html b/web/04/demos/gastbestellung.html new file mode 100644 index 0000000..ac24150 --- /dev/null +++ b/web/04/demos/gastbestellung.html @@ -0,0 +1,61 @@ + + + + + + Gastbestellung + + + +
+
+ Persönliche Angaben: +
+
+
+
+
+
+
+

+
+ +
+ Artikelbeschreibung: +
+

+ +
+
+
+ +
+ Optionen: + +
+ +
+ +
+
+ +
+ Versand: + Versandart wählen:
+ +
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/web/04/labor/04_aufgaben.md b/web/04/labor/04_aufgaben.md new file mode 100644 index 0000000..ea1dfc4 --- /dev/null +++ b/web/04/labor/04_aufgaben.md @@ -0,0 +1,115 @@ +# Übungsblatt 04 + +## Nginx-Übung: Eigene Website + +_Keine Abgabe erforderlich_ + +**Aufgabenstellung**: Nginx installieren und testen: + +- MacOS: [Installationsanweisungen MacOS](installation/installation_macos.md) +- Windows: [Installationsanweisungen Windos](installation/installation_win.md) +- Linux: [Installationsanweisungen Linux](installation/installation_linux.md) + +## Apache-Übung: Eigene Website + +_Keine Abgabe erforderlich_ + +**Aufgabenstellung**: Apache installieren und testen: + +- MacOS: [Installationsanweisungen MacOS](installation/installation_macos.md) +- Windows: [Installationsanweisungen Windows](installation/installation_win.md) +- Linux: [Installationsanweisungen Linux](installation/installation_linux.md) + +## 1. HTML-Übung: GET - Login + +**Aufgabenstellung**: +Erstellen Sie eine Webseite mit einem Formular zur Eingabe von E-Mail-Adresse und Passwort. + +#### Arbeitsschritte + +1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und beliebigem Titel. + +2. Setzen Sie als Überschrift (Ebene 1) "Kundenkonto". + +3. Setzen Sie als Überschrift (Ebene 2) "Melden Sie sich bitte an:". + +4. Erstellen Sie ein Formular-Gerüst für die HTTP-Methode `GET`. Die Daten des Formulars sollen an die aktuelle Seite gesendet werden (`action=""`). + +5. Fügen Sie 2 Pflicht-Eingabefelder ein und versehen Sie diese mit jeweils einem Label. + + a. Eingabefeld vom Typ `email` + + b. Eingabefeld vom Typ `password` + +7. Benennen Sie den Submit-Button geeignet. + +8. Testen Sie Ihre Webseite: + + a. Geben Sie eine valide E-Mail-Adresse und ein beliebiges Passwort ein. Klicken Sie den Submit-Button. Prüfen Sie in der Adresszeile, ob Ihre Eingaben als Query-Parameter übernommen wurden. (*Zusatzfrage: Warum ist das problematisch?*) + + b. Geben Sie eine nicht-valide E-Mail-Adresse ein. Klicken Sie den Submit-Button. Prüfen Sie, ob Sie eine browser-interne Validierungsnachricht zum E-Mail-Feld erhalten. + + c. Geben Sie eine valide E-Mail-Adresse ein. Klicken Sie den Submit-Button. Prüfen Sie, ob Sie eine browser-interne Validierungsnachricht zur fehlenden Passwort-Eingabe erhalten. + +## 2. HTML-Übung: GET - Obstbestellung + +**Aufgabenstellung**: +Erstellen Sie eine Webseite mit einem Formular zur Bestellung eines Obstkorbs. + +#### Arbeitsschritte + +1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und beliebigem Titel. + +2. Setzen Sie als Überschrift (Ebene 1) "Bestellen Sie sich Ihr Obst direkt nach Hause!". + +3. Erstellen Sie ein Formular-Gerüst für die HTTP-Methode `GET`. Die Daten des Formulars sollen an die aktuelle Seite gesendet werden (`action=""`). + +4. Fügen Sie 3 Eingabefelder ein und versehen Sie diese mit jeweils einem passenden Label. + + a. *Obst*: Eingabefeld mit Vorschlagsliste mit 5-10 Obstvorschlägen Ihrer Wahl. _(Tipp: `list`-Attribut, welches auf ein ``-Element verweist)_ + + b. *Stückzahl*: Eingabefeld vom Typ `number`. Es soll mindestens 1 Stück, höchstens 10 Stücke bestellt werden können. + + c. *Boxfarbe*: Eingabefeld vom Typ `color`. + +7. Benennen Sie den Submit-Button geeignet. + +8. Testen Sie Ihre Webseite: + + a. Wählen Sie ein Obst aus der Liste aus, geben Sie eine Stückzahl zwischen 1-10 ein und wählen Sie eine Farbe aus. Klicken Sie den Submit-Button. Prüfen Sie in der Adresszeile, ob Ihre Eingaben als Query-Parameter übernommen wurden. + + b. Tippen Sie die ersten Buchstaben eines Obst ein und prüfen Sie, ob sie automatisch einen Vorschlag erhalten. + + c. Tippen Sie ein Obst ein, dass nicht in der Liste enthalten ist, geben Sie eine Stückzahl zwischen 1-10 ein und wählen Sie eine Farbe aus. Klicken Sie den Submit-Button. Prüfen Sie in der Adresszeile, ob Ihre Eingaben als Query-Parameter übernommen wurden. + + d. Wählen Sie ein Obst aus der Liste aus, geben Sie eine Stückzahl zwischen 11-20 ein und wählen Sie eine Farbe aus. Klicken Sie den Submit-Button. Prüfen Sie, ob Sie eine browser-interne Validierungsnachricht zur fehlerhaften Stückzahl-Eingabe erhalten. + +## 3. HTML-Übung: POST - Workshopanmeldung + +**Aufgabenstellung**: +Erstellen Sie eine Webseite mit einem Formular und einem Absende-Button. + +#### Arbeitsschritte + +1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und Titel. + +2. Erstellen Sie ein Formular-Gerüst für die HTTP-Methode `POST`. Die Ziel-Url soll `https://web-637691723779.europe-west2.run.app/registrierung` sein. + +3. Das Formular soll folgende Bereiche und Eingabefelder haben: + +![Workshop-Anmeldung](workshop-registrierung.png) + +4. Testen Sie Ihr Formular + 1. Geben Sie sinnvolle Eingaben ein senden Sie das Formular ab. + 2. Prüfen Sie, ob eine Auflistung Ihrer Eingaben als Antwort erscheint. + +**Hinweis**: *Damit die Server-Antwort korrekt ist, sollten Ihre Eingabefelder genau folgende Schlüssel (`name`-Attribut) verwenden:* +- vorname +- nachname +- email +- telefon +- sessions +- agb +- newsletter +- equipment +- format \ No newline at end of file diff --git a/web/04/labor/installation/deinstallation.md b/web/04/labor/installation/deinstallation.md new file mode 100644 index 0000000..fa08b40 --- /dev/null +++ b/web/04/labor/installation/deinstallation.md @@ -0,0 +1,102 @@ +## Ergänzung für macOS: Vollständige Deinstallation von Nginx und Apache + +### Nginx vollständig entfernen + +1. Dienst stoppen: +```bash +brew services stop nginx +``` + +2. Nginx deinstallieren: +```bash +brew uninstall nginx +``` + +3. Konfigurationsdateien und Logs löschen: + +Je nach Mac-Chip: + +- Intel-Mac: + ```bash + sudo rm -rf /usr/local/etc/nginx /usr/local/var/log/nginx + ``` + +- Apple Silicon: + ```bash + sudo rm -rf /opt/homebrew/etc/nginx /opt/homebrew/var/log/nginx + ``` + +4. Benutzerverzeichnis löschen (falls verwendet): +```bash +rm -rf ~/meine-website +``` + +--- + +### Apache vollständig entfernen + +1. Dienst stoppen: +```bash +brew services stop httpd +``` + +2. Apache deinstallieren: +```bash +brew uninstall httpd +``` + +3. Konfigurationsdateien und Logs löschen: + +- Intel-Mac: + ```bash + sudo rm -rf /usr/local/etc/httpd /usr/local/var/log/httpd + ``` + +- Apple Silicon: + ```bash + sudo rm -rf /opt/homebrew/etc/httpd /opt/homebrew/var/log/httpd + ``` + +4. Benutzerverzeichnis löschen: +```bash +rm -rf ~/meine-website +``` + +--- + +## Ergänzung für Windows: Vollständige Deinstallation von Nginx und Apache + +### Nginx vollständig entfernen + +1. Dienst stoppen (falls aktiv): + Öffnen Sie die Eingabeaufforderung als Administrator: +```cmd +nginx -s stop +``` + +2. Nginx-Verzeichnis löschen: +```cmd +rmdir /S /Q C:\nginx +``` + +3. Temporäre Dateien und Logs entfernen (falls vorhanden): +- Prüfen Sie z. B. `C:\nginx\logs` oder andere benutzerdefinierte Pfade. + +--- + +### Apache vollständig entfernen + +1. Dienst stoppen (falls aktiv): +```cmd +httpd -k stop +``` + +2. Apache-Verzeichnis löschen: +```cmd +rmdir /S /Q C:\Apache24 +``` + +3. Benutzerverzeichnis löschen: +```cmd +rmdir /S /Q C:\Apache24\htdocs\meine-website +``` \ No newline at end of file diff --git a/web/04/labor/installation/homebrew.md b/web/04/labor/installation/homebrew.md new file mode 100644 index 0000000..3bcc9de --- /dev/null +++ b/web/04/labor/installation/homebrew.md @@ -0,0 +1,34 @@ +## Homebrew installieren (macOS) + +1. **Terminal öffnen** + Öffnen Sie das Programm „Terminal“. Sie finden es über Spotlight (⌘ + Leertaste → „Terminal“ eingeben). + +2. **Installationsbefehl ausführen** + Kopieren Sie den folgenden Befehl und fügen Sie ihn ins Terminal ein: + + ```bash + /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" + ``` + +3. **Anweisungen im Terminal folgen** + Während der Installation werden Sie möglicherweise nach Ihrem macOS-Passwort gefragt. Geben Sie es ein und bestätigen Sie mit Enter. Die Installation kann einige Minuten dauern. + +4. **Pfad konfigurieren (nur bei Apple Silicon Macs)** + Wenn Sie einen Mac mit M1/M2/M3-Chip verwenden, fügen Sie Homebrew zum Pfad hinzu: + + ```bash + echo >> /Users/{IhrUser}/.zprofile + echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/{IhrUser}/.zprofile + eval "$(/opt/homebrew/bin/brew shellenv)" + ``` + + Bei Intel-Macs ist dieser Schritt nicht erforderlich. + +5. **Installation testen** + Prüfen Sie, ob Homebrew korrekt installiert wurde: + + ```bash + brew --version + ``` + + Sie sollten eine Versionsnummer sehen, z. B. `Homebrew 4.x.x`. \ No newline at end of file diff --git a/web/04/labor/installation/installation_linux.md b/web/04/labor/installation/installation_linux.md new file mode 100644 index 0000000..4fa2281 --- /dev/null +++ b/web/04/labor/installation/installation_linux.md @@ -0,0 +1,161 @@ +# Anleitung: Eigene Website mit Nginx oder Apache + +## Version für Linux + +### Voraussetzungen +- Linux-Distribution mit `apt`-Paketverwaltung (z. B. Ubuntu, Debian) +- Terminalzugriff +- Dev-Container schließen (!) + +--- + +### Eigene Website mit Nginx unter Linux + +1. Installieren Sie Nginx: + ```bash + sudo apt update + sudo apt install nginx + ``` + +2. Erstellen Sie Ihren Projektordner: + ```bash + mkdir -p /home/{IhrVerzeichnis}/meine-website + echo "

Willkommen bei {IhrName}

" > /home/{IhrVerzeichnis}/meine-website/index.html + ``` + +3. Erstellen Sie eine neue Nginx-Konfiguration: + ```bash + sudo nano /etc/nginx/sites-available/{IhrName} + ``` + + Inhalt der Datei: + ```nginx + server { + listen 80; + server_name localhost; + + root /home/{IhrVerzeichnis}/meine-website; + index index.html; + + location / { + try_files $uri $uri/ =404; + } + } + ``` + +4. Aktivieren Sie die Konfiguration und deaktivieren Sie die Standardseite: + ```bash + sudo rm /etc/nginx/sites-enabled/default + sudo ln -s /etc/nginx/sites-available/{IhrName} /etc/nginx/sites-enabled/ + ``` + +5. Zugriffsrechte prüfen: + ```bash + sudo chmod o+x /home/{IhrVerzeichnis} + sudo chmod -R o+r /home/{IhrVerzeichnis}/meine-website + ``` + +6. Nginx neu laden: + ```bash + sudo nginx -t + sudo systemctl reload nginx + ``` + +7. Testen Sie Ihre Website: + + Öffnen Sie im Browser: + ``` + http://localhost + ``` + +8. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +9. Nginx stoppen: + ```bash + sudo systemctl stop nginx + ``` + +10. Nginx vollständig entfernen: + ```bash + sudo apt remove nginx nginx-common + sudo apt purge nginx nginx-common + sudo apt autoremove + rm -r /home/{IhrVerzeichnis}/meine-website + sudo rm -r /etc/nginx /var/log/nginx + ``` + +--- + +### Eigene Website mit Apache unter Linux + +1. Installieren Sie Apache: + ```bash + sudo apt update + sudo apt install apache2 + ``` + +2. Erstellen Sie Ihren Projektordner: + ```bash + mkdir -p /home/{IhrVerzeichnis}/meine-website + echo "

Willkommen bei {IhrName}

" > /home/{IhrVerzeichnis}/meine-website/index.html + ``` + +3. Erstellen Sie eine neue Apache-Konfiguration: + ```bash + sudo nano /etc/apache2/sites-available/{IhrName}.conf + ``` + + Inhalt der Datei: + ```apache + + ServerName localhost + DocumentRoot /home/{IhrVerzeichnis}/meine-website + + + Options Indexes FollowSymLinks + AllowOverride None + Require all granted + + + ``` + +4. Aktivieren Sie die Konfiguration und deaktivieren Sie die Standardseite: + ```bash + sudo a2dissite 000-default.conf + sudo a2ensite {IhrName}.conf + ``` + +5. Zugriffsrechte prüfen: + ```bash + sudo chmod o+x /home/{IhrVerzeichnis} + sudo chmod -R o+r /home/{IhrVerzeichnis}/meine-website + ``` + +6. Apache neu laden: + ```bash + sudo apache2ctl configtest + sudo systemctl reload apache2 + ``` + +7. Testen Sie Ihre Website: + + Öffnen Sie im Browser: + ``` + http://localhost + ``` + +8. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +9. Apache stoppen: + ```bash + sudo systemctl stop apache2 + ``` + +10. Apache vollständig entfernen: + ```bash + sudo apt remove apache2 apache2-utils apache2-bin apache2-data + sudo apt purge apache2 apache2-utils apache2-bin apache2-data + sudo apt autoremove + rm -r /home/{IhrVerzeichnis}/meine-website + sudo rm -r /etc/apache2 /var/log/apache2 + ``` \ No newline at end of file diff --git a/web/04/labor/installation/installation_macos.md b/web/04/labor/installation/installation_macos.md new file mode 100644 index 0000000..ce7d423 --- /dev/null +++ b/web/04/labor/installation/installation_macos.md @@ -0,0 +1,135 @@ +# Anleitung: Eigene Website mit Nginx oder Apache + +## Version für macOS + +### Voraussetzungen +- macOS mit installiertem Homebrew +- Terminalzugriff +- Dev-Container schließen (!) + +--- + +### Eigene Website mit Nginx unter macOS + +1. Installieren Sie Nginx: + ```bash + brew install nginx + ``` + +2. Erstellen Sie Ihren Projektordner: + ```bash + mkdir -p ~/meine-website + echo "

Willkommen bei {IhrName}

" > ~/meine-website/index.html + ``` + +3. Passen Sie die Nginx-Konfiguration an: + + Der Pfad zur Konfigurationsdatei hängt vom verwendeten Mac-Chip ab: + + - Intel-Mac: + ```bash + nano /usr/local/etc/nginx/nginx.conf + ``` + - Apple Silicon (M1/M2/M3): + ```bash + nano /opt/homebrew/etc/nginx/nginx.conf + ``` + + Fügen Sie am Ende der Datei folgenden Server-Block hinzu oder passen Sie den bestehenden an: + ```nginx + server { + listen 8080; + server_name localhost; + + location / { + root /Users/{IhrUser}/meine-website; + index index.html index.htm; + try_files $uri $uri/ =404; + } + } + ``` + +4. Starten Sie Nginx: + ```bash + brew services start nginx + ``` + +5. Testen Sie Ihre Website: + + Öffnen Sie im Browser: + ``` + http://localhost:8080 + ``` + +6. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +7. Nginx stoppen +```cmd +brew services stop nginx +```` + +8. Nginx vollständig entfernen: +Siehe [Deinstallations-Anweisungen](deinstallation.md). + +--- + +### Eigene Website mit Apache unter macOS + +1. Installieren Sie Apache: + ```bash + brew install httpd + ``` + +2. Erstellen Sie Ihren Projektordner: + ```bash + mkdir -p ~/meine-website + echo "

Willkommen bei {IhrUser}

" > ~/meine-website/index.html + ``` + +3. Passen Sie die Apache-Konfiguration an: + + Der Pfad zur Konfigurationsdatei hängt ebenfalls vom Mac-Chip ab: + + - Intel-Mac: + ```bash + nano /usr/local/etc/httpd/httpd.conf + ``` + - Apple Silicon: + ```bash + nano /opt/homebrew/etc/httpd/httpd.conf + ``` + + Fügen Sie am Ende der Datei folgenden VirtualHost hinzu: + ```apache + + DocumentRoot "/Users/{IhrUser}/meine-website" + ServerName localhost + + + Options Indexes FollowSymLinks + AllowOverride None + Require all granted + + + ``` + +4. Starten Sie Apache: + ```bash + brew services start httpd + ``` + +5. Testen Sie Ihre Website: + Öffnen Sie im Browser: + ``` + http://localhost:8080 + ``` + +6. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +7. Apache stoppen: + ```bash + brew services stop httpd + ``` + +8. Apache vollständig entfernen +Siehe [Deinstallations-Anweisungen](deinstallation.md). \ No newline at end of file diff --git a/web/04/labor/installation/installation_win.md b/web/04/labor/installation/installation_win.md new file mode 100644 index 0000000..38dedf7 --- /dev/null +++ b/web/04/labor/installation/installation_win.md @@ -0,0 +1,111 @@ +# Anleitung: Eigene Website mit Nginx oder Apache + +## Version für Windows (ohne WSL) + +### Voraussetzungen +- Windows 10 oder 11 +- Administratorrechte +- Dev-Container schließen (!) +- Nginx oder Apache für Windows installiert + +--- + +### Eigene Website mit Nginx unter Windows + +1. Laden Sie Nginx für Windows herunter: + - Website: https://nginx.org/en/download.html + - Entpacken Sie die ZIP-Datei z. B. nach `C:\nginx` + +2. Erstellen Sie Ihren Projektordner: + - Pfad: `C:\nginx\html\meine-website` + - Datei: `index.html` mit folgendem Inhalt: + ```html +

Willkommen bei {IhrName}

+ ``` + +3. Passen Sie die Konfiguration an: + - Datei: `C:\nginx\conf\nginx.conf` + ```nginx + server { + listen 8080; + server_name localhost; + + location / { + root html/meine-website; + index index.html index.htm; + try_files $uri $uri/ =404; + } + } + ``` + +4. Starten Sie Nginx: + Öffnen Sie die Eingabeaufforderung als Administrator: + ```cmd + cd C:\nginx + start nginx + ``` + +5. Testen Sie Ihre Website: + + Öffnen Sie im Browser: + ``` + http://localhost:8080 + ``` + +6. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +7. Nginx stoppen +```cmd + nginx -s stop +```` + +8. Nginx vollständig entfernen: +Siehe [Deinstallations-Anweisungen](deinstallation.md). + +--- + +### Eigene Website mit Apache unter Windows + +1. Laden Sie Apache für Windows herunter: + - Website: https://www.apachelounge.com/download/ + - Installieren Sie Apache z. B. nach `C:\Apache24` + +2. Erstellen Sie Ihren Projektordner: + - Pfad: `C:\Apache24\htdocs\meine-website` + - Datei: `index.html` mit folgendem Inhalt: + ```html +

Willkommen bei {IhrName}

+ ``` + +3. Passen Sie die Konfiguration an: + - Datei: `C:\Apache24\conf\httpd.conf` + ```apache + DocumentRoot "C:/Apache24/htdocs/meine-website" + + Options Indexes FollowSymLinks + AllowOverride None + Require all granted + + ``` + +4. Starten Sie Apache: + Öffnen Sie die Eingabeaufforderung als Administrator: + ```cmd + httpd + ``` + +5. Testen Sie Ihre Website: + Öffnen Sie im Browser: + ``` + http://localhost + ``` + +6. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +7. Apache stoppen: + ```bash + httpd -k stop + ``` + +8. Apache vollständig entfernen +Siehe [Deinstallations-Anweisungen](deinstallation.md). \ No newline at end of file diff --git a/web/04/labor/workshop-registrierung.png b/web/04/labor/workshop-registrierung.png new file mode 100644 index 0000000..2c43a5b Binary files /dev/null and b/web/04/labor/workshop-registrierung.png differ