LU00f - LB02 Inhalt

Bei der LB2 im Modul 307 wollen wir uns mit den CRUD-Operationen, die Sie im Unterricht kennen gelernt haben, beschäftigen. Dabei steht das Acronym CRUD für eine im Web gänige Operation.

• Crud = Create, Neuanlegen
• cRud = Read, Einzelansicht oder Listenansicht
• crUd = Update, Bearbeitung von einzelen Datensätzen
• crud = Delete, Löschen von Datensätzen

Diese Operationen sollen, gemäss Input aus dem Unterricht, via HTML, JavaScript under der Middleware Express (Server in JS) umgesetzt werden. Ihre Lehrperson wird Ihrem Team eine der nachfolgenden LB2-Fokusthemen zuordnen.

Sie erstellen eine einfache Webanwendung zur Verwaltung einer persönlichen Freundesliste. Die Anwendung besteht aus einer einzigen HTML-Seite mit eingebettetem JavaScript. Alle Daten werden in einer lokalen JSON-Datei (friends.json) gespeichert und von dort gelesen.

Erstellen Sie eine HTML-Seite index.html sowie eine Datendatei friends.json mit folgenden Funktionen:

1. Anzeigen (Read): Alle gespeicherten Freunde werden beim Laden der Seite als Liste angezeigt (Vorname, Nachname, Alter, Wohnort).
2. Hinzufügen (Create): Über ein Formular kann ein neuer Freund mit Vorname, Nachname, Alter und Wohnort erfasst und der Liste hinzugefügt werden.
3. Bearbeiten (Update): Ein bestehender Eintrag kann ausgewählt, im Formular bearbeitet und gespeichert werden.
4. Löschen (Delete): Jeder Listeneintrag kann über eine Schaltfläche entfernt werden.
5. Filtern: Es soll nach allen vier Kriterien gefiltert werden können.

• Die Datei friends.json enthält zu Beginn mindestens 3 Einträge als JSON-Array.
• Das Formular wird für die Auflistung, zur Eingabe und zur Bearbeitung verwendet (kein separates Formular).
• Pflichtfelder sind mit einer einfachen Validierung zu versehen (kein leerer Name).
• Die Anwendung soll ohne externe Frameworks auskommen (kein jQuery, kein Bootstrap).

Sie erstellen eine einfache Webanwendung zur Verwaltung einer persönlichen Musiktitel-Sammlung. Die Anwendung besteht aus einer einzigen HTML-Seite mit eingebettetem JavaScript. Alle Daten werden in einer lokalen JSON-Datei (songs.json) gespeichert und von dort gelesen.

1. Anzeigen (Read): Alle gespeicherten Musiktitel werden beim Laden der Seite als Liste angezeigt (Titel, Interpret, Album, Erscheinungsjahr).
2. Hinzufügen (Create): Über ein Formular kann ein neuer Musiktitel mit Titel, Interpret, Album und Erscheinungsjahr erfasst und der Liste hinzugefügt werden.
3. Bearbeiten (Update): Ein bestehender Eintrag kann ausgewählt, im Formular bearbeitet und gespeichert werden.
4. Löschen (Delete): Jeder Listeneintrag kann über eine Schaltfläche entfernt werden.
5. Filtern: Es soll nach allen vier Kriterien gefiltert werden können.

• Die Datei songs.json enthält zu Beginn mindestens 3 Einträge als JSON-Array.
• Das Formular wird zur Eingabe und zur Bearbeitung verwendet (kein separates Formular).
• Pflichtfelder (Titel und Interpret) sind mit einer einfachen Validierung zu versehen.
• Die Anwendung soll ohne externe Frameworks auskommen (kein jQuery, kein Bootstrap).

Streaming-Dienste und digitale Abonnements (z. B. Netflix, Spotify, Disney+) gehören heute zum Alltag. Sie erstellen eine Webanwendung zur übersichtlichen Verwaltung solcher Abonnements. Die Anwendung besteht aus einer einzigen HTML-Seite mit eingebettetem JavaScript. Alle Daten werden in einer lokalen JSON-Datei (subscriptions.json) gespeichert und von dort gelesen.

1. Anzeigen (Read): Alle gespeicherten Abonnements werden beim Laden der Seite als Liste angezeigt (Dienst, Kategorie, monatliche Kosten, Startdatum).
2. Hinzufügen (Create): Über ein Formular kann ein neues Abonnement mit Dienstname, Kategorie (z. B. Video, Musik, Software), monatlichen Kosten und Startdatum erfasst werden.
3. Bearbeiten (Update): Ein bestehender Eintrag kann ausgewählt, im Formular bearbeitet und gespeichert werden.
4. Löschen (Delete): Jeder Listeneintrag kann über eine Schaltfläche entfernt werden.

• Die Datei subscriptions.json enthält zu Beginn mindestens 3 Einträge als JSON-Array (z. B. Netflix, Spotify, Adobe Creative Cloud).
• Das Formular wird zur Eingabe und zur Bearbeitung verwendet (kein separates Formular).
• Pflichtfelder (Dienstname und Kosten) sind mit einer einfachen Validierung zu versehen; die Kosten dürfen keinen negativen Wert annehmen.
• Die Gesamtkosten aller aktiven Abonnements pro Monat werden unterhalb der Liste berechnet und angezeigt.
• Die Anwendung soll ohne externe Frameworks auskommen (kein jQuery, kein Bootstrap).

Unternehmen verwalten ihre Fahrzeuge häufig in einfachen Listen oder Tabellen. Sie erstellen eine Webanwendung zur digitalen Verwaltung eines Fuhrparks. Die Anwendung besteht aus einer einzigen HTML-Seite mit eingebettetem JavaScript. Alle Fahrzeugdaten werden in einer lokalen JSON-Datei (vehicles.json) gespeichert und von dort gelesen.

1. Anzeigen (Read): Alle Fahrzeuge des Fuhrparks werden beim Laden der Seite als Liste angezeigt (Kennzeichen, Marke, Modell, Baujahr, Status).
2. Hinzufügen (Create): Über ein Formular kann ein neues Fahrzeug mit Kennzeichen, Marke, Modell, Baujahr und Status (verfügbar / in Betrieb / in Wartung) erfasst und der Liste hinzugefügt werden.
3. Bearbeiten (Update): Ein bestehender Fahrzeugeintrag kann ausgewählt, im Formular bearbeitet und gespeichert werden.
4. Löschen (Delete): Jeder Fahrzeugeintrag kann über eine Schaltfläche aus der Liste entfernt werden.

• Die Datei vehicles.json enthält zu Beginn mindestens 3 Einträge als JSON-Array (z. B. Lieferwagen, Personenwagen, Transporter).
• Das Formular wird zur Eingabe und zur Bearbeitung verwendet (kein separates Formular).
• Pflichtfelder (Kennzeichen und Marke) sind mit einer einfachen Validierung zu versehen; das Kennzeichen darf nicht doppelt vorkommen.
• Die Anzahl der Fahrzeuge je Status (verfügbar / in Betrieb / in Wartung) wird unterhalb der Liste angezeigt.
• Die Anwendung soll ohne externe Frameworks auskommen (kein jQuery, kein Bootstrap).

• .

• .

• .

• .

• .

• .

• .

• .

• .

• .

Volkan Demir