Web-Formular Datenbank

—

by

admin
in

Aufgabenstellung: Erstelle ein HTML-Formular auf Basis php (Dateiname: schulfest.php) zur Anmeldung zum HAK-Schulabschlussfest am 04.07.2025.  Es findet am Vorplatz der HAK statt. Eintritt freiwillige Spenden. Ganz oben stehen ein Bild und eine passende Überschrift (mit deinem Namen als Festorganisator!) sowie eine kurze Beschreibung des Festes. Darunter kommt das Formular. Zu erfassen sind Vorname, Zuname, Klasse, Alter in Jahren (wegen Alkoholkonsum-Erlaubnis) und Email. Vielleicht schaffst du bei Alter und Email sogar eine Validierung, dh dass dort nur Zahlen bzw. gültige Mail-Adressen eingegeben werden können.

Dieses Formular wird mit POST versendet und geht am Server an die Datei anmeldungschulfest.php. Da erfolgt der Eintrag in die Datenbank – siehe unten. Weitere Datei teilnehmerliste.php: Hier sollen die eingegebenen Daten, dh die angemeldeten Teilnehmer, in Tabellenform aufgelistet werden. Achte auch auf eine schöne Formatierung. Bedanke dich auch für die Anmeldung.

Zusätzlich sollen die Daten in eine Datenbanktabelle namens “Schulfest” am HAK-Server eingetragen werden. 

Achte auch auf eine ansprechende Formatierung mit CSS.

Abgabe der zwei URLs (für das Anmeldeformular und für die Anmeldeliste) auf deinem HAK-Webspace.

Ich habe ein vollständiges Webformular mit PHP programmiert, das eine Anmeldung zum HAK-Schulabschlussfest am 04.07.2025 ermöglicht. Die Teilnehmerdaten (Name, Klasse, Alter, E-Mail) werden dabei direkt in eine MySQL-Datenbank gespeichert. Zusätzlich wird eine Teilnehmerliste angezeigt.

Technologien

  • HTML und CSS für das Anmeldeformular
  • PHP zur Datenverarbeitung und zum Speichern in die Datenbank
  • MySQL (phpMyAdmin) zur Verwaltung der Anmeldungen
  • XAMPP als lokaler Webserver

Schritt-für-Schritt Umsetzung

1. Vorbereitung

  • XAMPP installiert und gestartet (Apache + MySQL)
  • Im Browser http://localhost/phpmyadmin geöffnet
  • Datenbank mit dem Namen joomla6 erstellt
  • Tabelle anmeldungen in joomla6 mit folgendem SQL-Befehl erstellt:
sqlKopierenBearbeitenCREATE TABLE anmeldungen (
    id INT AUTO_INCREMENT PRIMARY KEY,
    vorname VARCHAR(100),
    zuname VARCHAR(100),
    klasse VARCHAR(50),
    alter INT,
    email VARCHAR(255),
    anmeldedatum TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. Anmeldeformular mit PHP (schulfest.php)

  • HTML-Formular erstellt mit folgenden Feldern:
    • Vorname
    • Zuname
    • Klasse
    • Alter (validiert als Zahl)
    • E-Mail (validiert)
  • Eingaben werden per POST an sich selbst gesendet
  • PHP-Skript speichert die Daten in die Datenbank

Datei: schulfest.php
Ort: htdocs/schulfest/ (XAMPP-Verzeichnis)

Wichtig: Bild (festbild.jpg) wurde im gleichen Ordner gespeichert.

3. Teilnehmeranzeige (teilnehmer.php)

  • PHP-Seite erstellt, die alle gespeicherten Anmeldungen aus der Tabelle anmeldungen ausliest und übersichtlich in einer HTML-Tabelle darstellt.
  • Teilnehmerdaten werden nach Anmeldedatum sortiert.

Datei: teilnehmer.php
Ort: htdocs/schulfest/

4. Test & Validierung

  • Webseite im Browser geöffnet:
    http://localhost/schulfest/schulfest.php
  • Formulareingaben getestet (auch ungültige E-Mails, falsches Alter)
  • Über http://localhost/schulfest/teilnehmer.php die gespeicherten Daten kontrolliert
  • Zusätzlich in phpMyAdmin die Tabelle anmeldungen geöffnet und überprüft

Ergebnis

Ich habe eine vollständige Mini-Webanwendung mit Formular, Datenverarbeitung und Datenanzeige umgesetzt. Besucher können sich damit selbstständig zum Schulabschlussfest anmelden, und die Daten werden sicher in der Datenbank gespeichert.

Gelernt / Kompetenzen

  • Verbindung zwischen PHP und MySQL herstellen
  • Formulardaten mit Validierung sicher verarbeiten
  • HTML + CSS zur Gestaltung verwenden
  • Datenbankabfragen (SELECT, INSERT)
  • phpMyAdmin nutzen zur Kontrolle und Verwaltung

Screenshot

  • Anmeldeformular (Browseransicht)
  • Teilnehmerliste (Browseransicht)
  • Tabelle in phpMyAdmin