====== Webserver & Website ======

Slides: {{ :ef_informatik:efif_websites.pdf |Slides EFIF Websites}}

===== Übersicht =====



==== Auftrag in Kürze ====

Erstelle mit HTML, CSS und JavaScript eine eigene Website. Setze einen Raspberry Pi als Server auf und hoste auf diesem deine Website.

Nur TALITS: Die Website muss ein Backend (z.B. Flask) beinhalten. Für Nicht-TALITs ist dies rein optional (und nur Empfohlen für Personen mit viel Vorwissen in diesem Bereich).

Diese wird abgegeben und mittels mündlicher Prüfung benotet. Sämtlicher Code, den die Website beinhaltet, muss man zu 100% verstanden haben (wird an mündl. Prüfung überprüft).

==== Hauptlernziele ====

   * Verstehen, was ein **(Web)Server** ist ...
   * ... und wie man mit einem solchen eine **Website** betreiben kann.
   * Mit **Linux** auf einem **Raspberry Pi** arbeiten.
   * Mit der **Kommandozeile** arbeiten.
   * Die Programmiersprache **JavaScript** lernen.
   * Eine **Website** mit HTML, CSS und JavaScript erstellen.
   * TALITs: Backend programmieren
   * **Mündliche Prüfung** absolvieren.

==== Benotung/Bewertung ====

Gesamtprojekt: 1 Note

davon je 50%:

   * Abgegebene Website
   * mündliche Prüfung

=== Kriterien Website ===

   * Funktionalität
   * Schwierigkeitsgrad (abhängig von Anz. Lektionen, die zur Verfügung stehen, z.B. falls 4M weniger Zeit als 3M)
   * Code
   * Design & Layout
   * (Inhalt/Sprache)

Bonuspunkte:

   * Mobile Layout

=== mündliche Prüfung ===

Zeit: Ca. 15' pro Person

Themen:

   * Grundlagen Webseite (HTML, CSS, JavaScript, Backend (TALITs))
   * Fragen zu deiner Seite
   * Grundlagen Netzwerke (Big Picture, keine Details)


==== Abgabebedingungen ====

   * **Deadline:** (folgt noch)
   * **Schritte Abgabe:**
     * 1. (Falls noch nicht gemacht.) Erstelle **GitHub-Repo** für Projekt und lade alle relevanten Dateien dort hoch.
     * 2. **Kontrolliere** auf GitHub, dass auch alles korrekt hochgeladen wird. Typischer Fehler: Vergessen, File(s) zu adden.
     * 3. **Teile Repo** mit *beiden* Lehrpersonen: *anschae* und *mspeissegger*
     * 4. Sende **Teams-Nachricht** in 3er-Chat (du und beide Lehrpersonen)
   * **Verspätete Abgabe:** -0.25 Note pro angebrochene 24h Verspätung, fehlende Files zählen auch als verspätete Abgabe


==== Nützliche Links ====

   * Netzwerke & Internet:
     * GF IF: [[gf_informatik:web_sca:netzwerke_internet]] (siehe Slides)
     * [[https://oinf.ch/kurs/vernetzung-und-systeme/kommunikation-in-netzwerken/|Netzwerke einfach erklärt]]
     * [[https://oinf.ch/interactive/tcp-ip-visualisierung/|Visualisierung TCP/IP]]
   * HTML & CSS:
     * GF IF: [[gf_informatik:web_sca:websites]]
   * JavaScript:
     * [[informatik:javascript_cheat_sheet|]]
     * [[informatik:website_with_js|]]


===== Lektionen & Termine =====

==== Plan FS 2025 ====

   * **Lektion 1: 4.3.25**
     * **Ziele:**
       * Raspi selbst aufsetzen
       * Linux kennenlernen
       * Raspi mit Terminalbefehlen steuern
     * Raspberry Pi aufsetzen (Betriebssystem *mit* GUI)
     * Programme installieren (z.B. LibreOffice)
     * Input Terminalbefehle
     * Auftrag zu Terminalbefehlen
   * **Lektion 2: 11.3.25**
     * Raspi wieder platt machen und neu aufsetzen mit Betriebssystem *ohne* GUI
     * Input DHCP
     * Feste IP pro Raspi festlegen
     * SSH Verbindung auf Raspberry Pi einrichten
     * Raspberry Pi per Kommandozeile steuern
   * **Lektion 3: 18.3.25**
     * Erinnerung: [[https://sca.ksr.ch/doku.php?id=gf_informatik:web_sca:websites|HTML & CSS]]
     * [[https://sca.ksr.ch/doku.php?id=gf_informatik:web_sca:websites#flexbox |Flexbox]]
     * [[https://sca.ksr.ch/doku.php?id=gf_informatik:web_sca:websites#grid_layout|Grid]]
   * **Lektion 4: 25.3.25**
     * Slides JavaScript
     * Auftrag I: Schnaps-Bier-Sirup
     * Auftrag II: [[https://sca.ksr.ch/doku.php?id=gf_informatik:web_sca:websites#auftragdies_und_das|Auftrag Dies und das (inkl. Tipps)]]
     * Ideen für Projekt finden & mit LP besprechen
   * **Lektion 5: 1.4.25**
     * Projektstart

^ **Lektion** ^ **3M** ^ **4M** ^
| Di. 29.04.2025 | an Website arbeiten | an Website arbeiten |
| Di. 06.05.2025 | **Arduino Boxen zurück, sortieren**||
| ::: | an Website arbeiten ||
| ::: |  | **Vorstellung 8-Bit-CPU** |
|  | an Website arbeiten | **Abgabe 4M TALITs: Fr. 09.05.2025 @23.59** |
| Di. 13.05.2025 | an Website arbeiten | mündl. Prüfung 4M TALITs |
|  | | 4M TALITs: Server aufsetzen (siehe Details unten)
|  | | **Abgabe 4M RegEFs: Fr. 16.05.2025 @23.59** |
| Di. 20.05.2025 | an Website arbeiten | mündl. Prüfung 4M RegEFs |
|                | | Notenabgabe 4M: Mo. 26.05.2025 |
| Di. 27.05.2025 | TBD (nicht an Website arbeiten) | TBD |
| **PFINGSFERIEN** |||
| | **Abgabe 3M: Di. 03.06.2025 @23.59** | |
| Di. 10.06.2025 | mündl. Prüfungen | abwesend |
| Di. 17.06.2025 | mündl. Prüfungen falls nötig / TBD | abwesend |
|                | Notenabgabe 3M: Fr. 20.06.2025 | abwesend |
| Di. 24.06.2025 | Unterrichtsfrei am NM | abwesend |
| Di. 01.07.2025 | Semesterschlusswoche | abwesend |

=== Auftrag 4M RegEF 20. Mai 2025 ===

**Teil I: Arduino Boxen kontrollieren**

Gehe die Komponentenlisten beider Boxen sorgfälltig durch und stelle sicher, dass die richtige Anzahl der richtigen Komponenten vorhanden ist. Falls etwas fehlt (z.B. LED), rüste die Box wenn möglich nach.

   1. **Beschrifte** deine Komponentenliste mit deinem Name und Nummer.
   2. Fülle die **Spalten** der Komponentenlisten entsprechend aus: Gib von jeder Komponente an, wie viele Elemente vorhanden sind resp. fehlen.
   3. **Unterzeichne** das Dokument am Schluss. 

^ Nummer ^ Name	^ Klasse ^
| 1 |	Bajramoska	Rejda	| 4Mdz |
| 2 |	Capizzi	Mirea	| 3Ma |
| 3 |	Copellini	William	| 3Mc |
| 4 |	Keskin	Zeynep	| 4Ma |
| 5 |	Oberthaler	Rian	| 4Ma |
| 6 |	Osti	Luca	| 4Ma |
| 7 |	Skenderi	Hamza	| 4Ma |
| 8 |	Subramaniam	Darvin	| 3Mdz |
| 9 |	Testolin	Davide	| 4Mc |
| 10 |	Wirth	Aaron	| 4Ma |
| 11 |	Zendeli	Luan-Nebi	| 4Mb |


**Teil II: Server für Website**

Hoste deine Website auf deinem Raspi. Die Seite soll über die (lokale) IP-Adresse deines Arduinos zugänglich sein, wenn man sich im gleichen WLAN befindet.

*Bei Problemen und Unklarheiten nicht verzagen, einfach Andrii, Dimitri, Jona oder Laurin fragen!*

**Teil III: Homeserver**

Richte auf deinem Raspi einen weiteren Serverdienst ein, der auf einem Homeserver nützlich sein könnte. Wähle selbst einen solchen aus, hier einige Ideen:

   1. Media-Server (Plex, Kodi,...)
   1. File-Share/File-Sync (Samba, Nextcloud, Syncthing, ...)
   1. Wiki (DokuWiki,...)
   1. VPN
   1. ...

*Bei Problemen und Unklarheiten nicht verzagen, einfach Andrii, Dimitri, Jona oder Laurin fragen!*

=== Auftrag 4M TALITs 20. Mai 2025 ===

   * Adventure Game Online stellen
   * weiter am Auftrag von letzter Woche (Server, DNS)

=== Auftrag 4M TALITs 13.05.2025 ===

In Kürze: Zusammen einen Raspi als Server mit DNS-Server und diversen weitere Diensten aufsetzen und am Schluss kurz präsentieren. Der DNS-Server wird dann später benötigt für Websites alles EF-SuS.

Im Detail:

   1. Plan festlegen: Recherchiert kurz und entscheidet euch, welche Dienste ihr auf eurem Raspi haben wollt und wer welche aufsetzt. Hier eine mögliche Auswahl:
     1. DNS-Server (Dieser *muss* umgesetzt werden!) mit Beispielzonen ksr.ch und google.com.
     1. Media-Server (Plex, Kodi,...)
     1. File-Share/File-Sync (Samba, Nextcloud, Syncthing, ...)
     1. Wiki (DokuWiki,...)
     1. VPN
     1. ...
   1. Raspi aufsetzen falls nötig, SSH-Zugang für alle.
   1. Jedes Gruppenmitglied richtet mind. einen der gewählten Dienste ein. Falls Zeit, weitere installieren.
   1. Präsentation: Jedes Gruppenmitglied präsentiert der Klasse kurz einen Dienst, ca. 3' pro Person.

=== Termine: ===

   * Abgabe 4M:
     * Fr 9.5.25 4M TALITs
     * Fr 16.5.25 4M RegEFs
   * Mündl. Prüfungen 4M:
     * Di 13.5.25 4M TALITs
     * Di 20.5.25 4M RefEFs
   * Notenabgabe 4M Mo 26.5.25

   * Notenabgabe 3M Fr 20.6.25



<nodisp 2>

++++Plan FS 2025 grob|

   * Raspi & Linux kennenlernen, zuerst mit, dann ohne GUI
   * Wichtigste Protokolle: DHCP, TCP/IP, ...
   * Website:
     * HTML & CSS Repetition
     * JavaScript lernen, einige Übungen dazu
   * Virtualisierung: Docker und co.
   * Datenbank Basics, wichtigste Befehle, ev. eigenen DB-Server mit Raspi, z.B. mit Dbeaver verwalten oder direkt mit Docker installieren
   * Website-Projekt:
     * RegEF: einfach mit JS
     * TALIT: mit Flask und Datenbank

++++

</nodisp>

<nodisp 2>

++++Plan 2023|

   * Lektion 1: 18.4.2023
     * Raspberry Pi aufsetzen (Betriebssystem "Raspberry Pi OS Lite", also Server-Version ohne grafisches UI)
     * Linux kennenlernen
     * Input DHCP
     * Feste IP pro Raspi festlegen
     * SSH Verbindung auf Raspberry Pi einrichten
     * Raspberry Pi per Kommandozeile steuern
     * HA: Thema für eigene Website überlegen, bis SO-Abend per Teamsnachricht an sps & sca (gemeinsamer Chat à 3)
   * Lektion 2: 25.4.2023
     * Apache aufsetzen: [[https://tutorials-raspberrypi.de/webserver-installation-apache2/]]
     * Routing Game
     * Input HTML und CSS
     * Seite bauen
   * Lektion 3: 2.5.2023
     * Input TCP/IP
     * JavaScript lernen
     * Seite bauen
   * Lektion 4: 9.5.2023
     * Name der Site festlegen
     * Input DNS
     * Seite bauen

   * Lektion 5: 16.5.2023
     * Seite bauen
   * Lektion 6: 23.5.2023
     * Seite bauen
     * Input Client vs. Server
   * Lektion 7: 30.5.2023
     * Seite bauen
     * **Abgabe 4M bis Freitag, 2.6.2023**
   * Lektion 8: 6.6.2023 (letztes Mal mit 4M)
     * **Mündliche Prüfungen 4M** (Notenabgabe 7.6.2023)
     * **Abgabe 3M bis Freitag, 9.6.2023**
   * Lektion 9: 13.6.2023 (nur 3M)
     * **Mündliche Prüfungen 3M**
   * Lektion 10: 20.6.2023 (nur 3M)
     * Hacking
   * Lektion 11: 27.6.2023 (nur 3M)
     * **SPORTTAG oder FERNUNTERRICHT**

++++

</nodisp>