11BMG12 I Lernfeld 6 : Digitale Medienprodukte erstellen I Grass
Arbeitsauftrag: Rezeptverwaltung mit PHP, MySQL und JavaScript
Ihr Auftrag ist es, innerhalb von vier Stunden ein funktionales Rezeptverwaltungssystem zu
entwickeln. Das System soll in der Lage sein, Rezepte zu anzeigen, hinzuzufügen, zu ändern
und zu löschen. Zusätzlich sollen die Rezepte Informationen zu Zutaten, einer Anleitung und
einem Bild enthalten.
Aufgabenbeschreibung
1. Planung und Vorbereitung (ca. 30 Minuten)
1. Entwickelt in Kleingruppen (max. 2-3 Personen) einen kurzen Plan für die Umsetzung.
- Welche Funktionen benötigt eure Seite? (z. B. Anzeige, Hinzufügen, Löschen, Ändern von
Rezepten)
- Welche Daten müssen in der Datenbank gespeichert werden? (z. B. Rezeptname, Zutaten,
Kochanleitung, Bild)
- Welche Seiten und Formulare müssen erstellt werden? (z. B. Rezeptübersicht,
Eingabeformular)
2. Datenbankentwurf:
- Erstellt ein Datenbankmodell (kann handschriftlich skizziert werden), das mindestens
eine Tabelle für die Rezepte enthält.
- Vorschlag für die Tabelle:
- `id` (INT, AUTO_INCREMENT, PRIMARY KEY)
- `name` (VARCHAR(255)): Name des Rezepts
- `zutaten` (VARCHAR): Zutatenliste
- `anleitung` (VARCHAR): Kochanleitung
- `bild` (VARCHAR(255)): Dateiname des Bildes
3. Erstellt die Datenbank und die Tabelle in phpMyAdmin oder einem ähnlichen Tool.
2. Umsetzung (ca. 3,5 Stunden)
1. Startseite erstellen (Übersicht aller Rezepte):
- Zeigt alle gespeicherten Rezepte in einer Tabelle an.
- Nutzt PHP, um die Daten aus der Datenbank auszulesen und anzuzeigen.
2. Rezept hinzufügen:
- Erstellt ein Formular, das es ermöglicht, ein neues Rezept mit Name, Zutaten, Anleitung
und einem Bild hochzuladen.
- Fügt eine PHP-Funktion hinzu, die die eingegebenen Daten in die Datenbank speichert.
- Hinweis: Speichert nur den Dateinamen des Bildes in der Datenbank, nicht die Datei selbst.
3. Rezept löschen:
- Erstellt eine Funktion, mit der Rezepte aus der Datenbank gelöscht werden können.
- Nutzt entweder Buttons oder Links, um die Löschung eines bestimmten Rezepts zu
ermöglichen.
4. Rezept bearbeiten/aktualisieren:
- Erstellt ein Formular, das es ermöglicht, ein bestehendes Rezept zu ändern.
- Bindet PHP ein, um die aktualisierten Daten in der Datenbank zu speichern.
5. Optional: Bild-Upload validieren:
- Validiert den Bild-Upload (nur Dateien im Format JPG, PNG oder GIF sind erlaubt).
- Speichert die Bilder in einem separaten Ordner auf dem Server.
Zusatzaufgabe: Integration von JavaScript
Integriert mindestens zwei Funktionen mit JavaScript in euer Projekt. Hier einige Beispiele,
die ihr umsetzen könnt:
- Ein kleines Fenster (Dialogbox), das beim Löschen eines Rezepts eine Bestätigung
einfordert.
- Validierung der E-Mail-Adresse (z. B. sicherstellen, dass sie ein '@'-Zeichen enthält).
- Dynamische Anzeige von Fehlern, wenn Pflichtfelder nicht ausgefüllt werden.
Lasst eurer Kreativität freien Lauf und denkt euch weitere sinnvolle JavaScript-Funktionen
aus, die das Projekt verbessern oder benutzerfreundlicher machen.
3. Dokumentation und Abgabe (ca. 30 Minuten)
1. Code-Kommentare:
- Kommentiert euren Code sinnvoll, sodass nachvollziehbar ist, was jede Funktion macht.
Codes, Skriptsprachen, Tools und Programme, die zu nutzen sind:
HTML, CSS, PHP, JavaSkript, FireFly, Photoshop, XAMPP, phpMyAdmin, MySQL, ChatGPT