Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
| de:modul:m307:learningunits:lu00:07 [2026/06/02 15:03] – vdemir | de:modul:m307:learningunits:lu00:07 [2026/06/02 15:40] (aktuell) – [13.3 Technische Anforderungen] vdemir | ||
|---|---|---|---|
| Zeile 180: | Zeile 180: | ||
| * Pflichtfelder sind mit einer einfachen Validierung zu versehen (kein leerer Name, kein leeres Land, Amtsantritt muss eine gültige vierstellige Jahreszahl sein). | * Pflichtfelder sind mit einer einfachen Validierung zu versehen (kein leerer Name, kein leeres Land, Amtsantritt muss eine gültige vierstellige Jahreszahl sein). | ||
| * Die Anwendung soll ohne externe Frameworks auskommen (kein jQuery, kein Bootstrap). | * Die Anwendung soll ohne externe Frameworks auskommen (kein jQuery, kein Bootstrap). | ||
| + | |||
| + | ===== 10. Gebäudeverwaltung ===== | ||
| + | ==== 10.1 Ausgangslage ==== | ||
| + | Sie erstellen eine einfache Webanwendung zur Verwaltung der Gebäude und Schulstandorte einer Schule. Die Anwendung besteht aus einer einzigen HTML-Seite mit eingebettetem JavaScript. Alle Daten werden in einer lokalen JSON-Datei (gebaeude.json) gespeichert und von dort gelesen. | ||
| + | |||
| + | ==== 10.2 Aufgabenstellung ==== | ||
| + | Erstellen Sie eine HTML-Seite index.html sowie eine Datendatei gebaeude.json mit folgenden Funktionen: | ||
| + | - Anzeigen (Read): Alle gespeicherten Gebäude werden beim Laden der Seite als Liste angezeigt (Bezeichnung, | ||
| + | - Hinzufügen (Create): Über ein Formular kann ein neues Gebäude mit Bezeichnung, | ||
| + | - Bearbeiten (Update): Ein bestehender Eintrag kann ausgewählt, | ||
| + | - Löschen (Delete): Jeder Listeneintrag kann über eine Schaltfläche entfernt werden. | ||
| + | - **Bonus: | ||
| + | - Filtern: Es soll nach allen Kriterien gefiltert werden können. | ||
| + | |||
| + | ==== 10.3 Technische Anforderungen ==== | ||
| + | * Die Datei gebaeude.json enthält zu Beginn mindestens 3 Einträge als JSON-Array. | ||
| + | * Jeder Eintrag enthält mindestens: bezeichnung, | ||
| + | * Das Formular wird zur Eingabe und zur Bearbeitung verwendet (kein separates Formular). | ||
| + | * Pflichtfelder sind mit einer einfachen Validierung zu versehen (keine leere Bezeichnung, | ||
| + | * Die Anwendung soll ohne externe Frameworks auskommen (kein jQuery, kein Bootstrap). | ||
| + | |||
| + | ===== 11. Ferienverwaltung | ||
| + | ==== 11.1 Ausgangslage ==== | ||
| + | Sie erstellen eine einfache Webanwendung zur Verwaltung persönlicher Ferienreisen. Die Anwendung ermöglicht es, vergangene und geplante Reisen festzuhalten – wohin man gereist ist, wann, wie lange und wie viel die Reise gekostet hat. Die Anwendung besteht aus einer einzigen HTML-Seite mit eingebettetem JavaScript. Alle Daten werden in einer lokalen JSON-Datei (reisen.json) gespeichert und von dort gelesen. | ||
| + | |||
| + | ==== 11.2 Aufgabenstellung ==== | ||
| + | Erstellen Sie eine HTML-Seite index.html sowie eine Datendatei reisen.json mit folgenden Funktionen: | ||
| + | - Anzeigen (Read): Alle gespeicherten Reisen werden beim Laden der Seite als Liste angezeigt (Reiseziel, Land, Abreisedatum, | ||
| + | - Hinzufügen (Create): Über ein Formular kann eine neue Reise mit Reiseziel, Land, Abreisedatum, | ||
| + | - Bearbeiten (Update): Ein bestehender Eintrag kann ausgewählt, | ||
| + | - Löschen (Delete): Jeder Listeneintrag kann über eine Schaltfläche entfernt werden. | ||
| + | - **Bonus** Reisedauer berechnen: Die Reisedauer in Tagen wird automatisch aus Abreise- und Rückreisedatum berechnet und in der Liste angezeigt. | ||
| + | - **Bonus** Gesamtkosten anzeigen: Unterhalb der Liste wird die Summe aller Reisekosten in CHF automatisch berechnet und angezeigt. | ||
| + | - Filtern: Es soll nach allen Kriterien gefiltert werden können. | ||
| + | |||
| + | ==== 11.3 Technische Anforderungen ==== | ||
| + | Technische Anforderungen | ||
| + | * Die Datei reisen.json enthält zu Beginn mindestens 3 Einträge als JSON-Array. | ||
| + | * Jeder Eintrag enthält mindestens: reiseziel, land, abreise (YYYY-MM-DD), | ||
| + | * Das Formular wird zur Eingabe und zur Bearbeitung verwendet (kein separates Formular). | ||
| + | * Pflichtfelder sind mit einer einfachen Validierung zu versehen (kein leeres Reiseziel, kein leeres Land, Rückreisedatum darf nicht vor dem Abreisedatum liegen). | ||
| + | * Die Anwendung soll ohne externe Frameworks auskommen (kein jQuery, kein Bootstrap). | ||
| + | |||
| + | |||
| + | ===== 12. Strafzettel-Management | ||
| + | ==== 12.1 Ausgangslage ==== | ||
| + | Sie entwickeln eine einfache Webanwendung zur Verwaltung von Strafzetteln (Verkehrsbussen). Die Anwendung ermöglicht es, ausgestellte Strafzettel zu erfassen, einzusehen, zu bearbeiten und zu löschen. | ||
| + | |||
| + | Zu jedem Strafzettel werden Angaben zum Fahrzeughalter, | ||
| + | |||
| + | ==== 12.2 Aufgabenstellung ==== | ||
| + | Erstellen Sie eine HTML-Seite index.html sowie eine Datendatei strafzettel.json mit folgenden Funktionen: | ||
| + | - Anzeigen (Read): Alle gespeicherten Strafzettel werden beim Laden der Seite als Liste angezeigt (Name des Halters, Kennzeichen, | ||
| + | - Hinzufügen (Create): Über ein Formular kann ein neuer Strafzettel mit Name des Fahrzeughalters, | ||
| + | - Bearbeiten (Update): Ein bestehender Eintrag kann ausgewählt, | ||
| + | - Löschen (Delete): Jeder Listeneintrag kann über eine Schaltfläche entfernt werden. | ||
| + | - **Bonus** Bussenkategorie anzeigen: Anhand des Bussbetrags wird automatisch eine Kategorie berechnet und angezeigt: «Gering» (unter 100 CHF), «Mittel» (100–299 CHF), «Hoch» (ab 300 CHF). | ||
| + | - **Bonus** Gesamtbussen anzeigen: Unterhalb der Liste wird die Summe aller Bussbeträge in CHF automatisch berechnet und angezeigt. | ||
| + | - Filtern: Es soll nach allen Kriterien gefiltert werden können. | ||
| + | |||
| + | |||
| + | ==== 12.3 Technische Anforderungen ==== | ||
| + | * Die Datei strafzettel.json enthält zu Beginn mindestens 3 Einträge als JSON-Array. | ||
| + | * Jeder Eintrag enthält mindestens: name, kennzeichen, | ||
| + | * Das Formular wird zur Eingabe und zur Bearbeitung verwendet (kein separates Formular). | ||
| + | * Pflichtfelder sind mit einer einfachen Validierung zu versehen: kein leeres Namensfeld, kein leeres Kennzeichen, | ||
| + | * Die Anwendung soll ohne externe Frameworks auskommen (kein jQuery, kein Bootstrap). | ||
| + | |||
| + | ===== 13. Equipment-Verwaltung | ||
| + | ==== 13.1 Ausgangslage ==== | ||
| + | Sie entwickeln eine einfache Webanwendung zur Verwaltung von Equipment (z. B. Kameras, Stative, Blitzgeräte, | ||
| + | |||
| + | Zu jedem Gerät werden Angaben zur Bezeichnung, | ||
| + | |||
| + | |||
| + | ==== 13.2 Aufgabenstellung ==== | ||
| + | Erstellen Sie eine HTML-Seite index.html sowie eine Datendatei equipment.json mit folgenden Funktionen: | ||
| + | - Anzeigen (Read): Alle gespeicherten Geräte werden beim Laden der Seite als Liste angezeigt (Bezeichnung, | ||
| + | - Hinzufügen (Create): Über ein Formular kann ein neues Gerät mit Bezeichnung, | ||
| + | - Bearbeiten (Update): Ein bestehender Eintrag kann ausgewählt, | ||
| + | - Löschen (Delete): Jeder Listeneintrag kann über eine Schaltfläche entfernt werden. | ||
| + | - **Bonus** Alter des Geräts berechnen: Das Alter des Geräts in Jahren wird automatisch aus dem Anschaffungsdatum berechnet und in der Liste angezeigt. | ||
| + | - **Bonus** Gesamtwert anzeigen: Unterhalb der Liste wird die Summe aller Gerätewerte in CHF automatisch berechnet und angezeigt. | ||
| + | - Filtern nach Kategorie: Über ein Dropdown kann die Liste nach Kategorie gefiltert werden, sodass nur Geräte der gewählten Kategorie angezeigt werden. | ||
| + | |||
| + | |||
| + | ==== 13.3 Technische Anforderungen ==== | ||
| + | * Die Datei equipment.json enthält zu Beginn mindestens 3 Einträge als JSON-Array. | ||
| + | * Jeder Eintrag enthält mindestens: bezeichnung, | ||
| + | * Das Formular wird zur Eingabe und zur Bearbeitung verwendet (kein separates Formular). | ||
| + | * Pflichtfelder sind mit einer einfachen Validierung zu versehen: keine leere Bezeichnung, | ||
| + | * Die Anwendung soll ohne externe Frameworks auskommen (kein jQuery, kein Bootstrap). | ||
| + | |||
| + | |||
| ---- | ---- | ||