forked from WEB-IB-SS26/development-ib
04: Demos und Labor
parent
c53b337c3b
commit
b1fe4d07f4
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Formular</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form action="http://localhost:8080/submit" method="GET">
|
||||||
|
<label for="vorname">Vorname:</label>
|
||||||
|
<input type="text" id="vorname" name="vorname"><br><br>
|
||||||
|
|
||||||
|
<label for="name">Name:</label>
|
||||||
|
<input type="text" id="name" name="name"><br><br>
|
||||||
|
|
||||||
|
<button type="submit">Absenden</button>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Formular</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form action="http://localhost:8080/submit" method="POST">
|
||||||
|
<label for="vorname">Vorname:</label>
|
||||||
|
<input type="text" id="vorname" name="vorname"><br><br>
|
||||||
|
|
||||||
|
<label for="name">Name:</label>
|
||||||
|
<input type="text" id="name" name="name"><br><br>
|
||||||
|
|
||||||
|
<button type="submit">Absenden</button>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Einfache Suche</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<form action="/search" method="get">
|
||||||
|
<input type="text" name="q">
|
||||||
|
<input type="submit" value="Suchen">
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Gastbestellung</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<form action="http://localhost:8080/gast" method="post" target="_blank">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Persönliche Angaben:</legend>
|
||||||
|
<label for="vorname">Vorname:</label><br>
|
||||||
|
<input type="text" name="vorname" id="vorname" placeholder="Vorname" maxlength="15" required><br>
|
||||||
|
<label for="nachname">Nachname:</label><br>
|
||||||
|
<input type="text" name="name" id="nachname" value="Muster"><br>
|
||||||
|
<label for="email">Email:</label><br>
|
||||||
|
<input type="text" name="email" id="email" autocomplete="email"><br>
|
||||||
|
<label for="plz">PLZ:</label><br>
|
||||||
|
<input type="text" name="plz" id="plz" pattern="[0-9]{5}"><br><br>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Artikelbeschreibung:</legend>
|
||||||
|
<label for="artikel">Artikel:</label><br>
|
||||||
|
<input type="text" name="artikel" id="artikel" value="Blauer Kugelschreiber" readonly disabled><br><br>
|
||||||
|
|
||||||
|
<label for="language">Wähle die Farbe deines Artikels:</label><br>
|
||||||
|
<select id="language" name="language" multiple size="2">
|
||||||
|
<option value="rot">Rot</option>
|
||||||
|
<option value="schwarz">Schwarz</option>
|
||||||
|
<option value="blau">Blau</option>
|
||||||
|
<option value="gelb">Gelb</option>
|
||||||
|
</select><br>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Optionen:</legend>
|
||||||
|
<input type="checkbox" id="agb" name="agb" required>
|
||||||
|
<label for="agb">Ich habe die Allgemeinen Geschäftsbedingungen gelesen und akzeptiere sie.</label><br>
|
||||||
|
<input type="checkbox" id="newsletter" name="newsletter" value="ja">
|
||||||
|
<label for="newsletter">Ich möchte den kostenlosen Newsletter abonnieren und regelmäßig informiert
|
||||||
|
werden.</label><br>
|
||||||
|
<input type="checkbox" id="geschenk" name="geschenk" value="ja">
|
||||||
|
<label for="geschenk">Bitte als Geschenk verpacken (zzgl. 5 € Verpackungspauschale).</label><br>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Versand:</legend>
|
||||||
|
Versandart wählen:<br>
|
||||||
|
<input type="radio" id="versand" name="lieferoption" value="versand" required>
|
||||||
|
<label for="versand">Lieferung nach Hause (Standardversand)</label><br>
|
||||||
|
<input type="radio" id="filiale" name="lieferoption" value="filiale">
|
||||||
|
<label for="filiale">Abholung in einer Filiale Ihrer Wahl</label><br>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<input type="submit" value="Bestellung abschicken">
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -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 `<datalist>`-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:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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
|
||||||
|
|
@ -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
|
||||||
|
```
|
||||||
|
|
@ -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`.
|
||||||
|
|
@ -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 "<h1>Willkommen bei {IhrName}</h1>" > /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 "<h1>Willkommen bei {IhrName}</h1>" > /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
|
||||||
|
<VirtualHost *:80>
|
||||||
|
ServerName localhost
|
||||||
|
DocumentRoot /home/{IhrVerzeichnis}/meine-website
|
||||||
|
|
||||||
|
<Directory /home/{IhrVerzeichnis}/meine-website">
|
||||||
|
Options Indexes FollowSymLinks
|
||||||
|
AllowOverride None
|
||||||
|
Require all granted
|
||||||
|
</Directory>
|
||||||
|
</VirtualHost>
|
||||||
|
```
|
||||||
|
|
||||||
|
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
|
||||||
|
```
|
||||||
|
|
@ -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 "<h1>Willkommen bei {IhrName}</h1>" > ~/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 "<h1>Willkommen bei {IhrUser}</h1>" > ~/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
|
||||||
|
<VirtualHost *:8080>
|
||||||
|
DocumentRoot "/Users/{IhrUser}/meine-website"
|
||||||
|
ServerName localhost
|
||||||
|
|
||||||
|
<Directory "/Users/{IhrUser}/meine-website">
|
||||||
|
Options Indexes FollowSymLinks
|
||||||
|
AllowOverride None
|
||||||
|
Require all granted
|
||||||
|
</Directory>
|
||||||
|
</VirtualHost>
|
||||||
|
```
|
||||||
|
|
||||||
|
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).
|
||||||
|
|
@ -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
|
||||||
|
<h1>Willkommen bei {IhrName}</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
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
|
||||||
|
<h1>Willkommen bei {IhrName}</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Passen Sie die Konfiguration an:
|
||||||
|
- Datei: `C:\Apache24\conf\httpd.conf`
|
||||||
|
```apache
|
||||||
|
DocumentRoot "C:/Apache24/htdocs/meine-website"
|
||||||
|
<Directory "C:/Apache24/htdocs/meine-website">
|
||||||
|
Options Indexes FollowSymLinks
|
||||||
|
AllowOverride None
|
||||||
|
Require all granted
|
||||||
|
</Directory>
|
||||||
|
```
|
||||||
|
|
||||||
|
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).
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Loading…
Reference in New Issue