Projekty INF.03 – jak tworzyć aplikację webową od A do Z

Od pomysłu do projektu – plan działania

1. Wybierz temat projektu (np. katalog książek, lista obecności, panel wydarzeń, sklep internetowy, quiz online)
2. Przygotuj szkic interfejsu – kartka, Figma, wireframe
3. Rozpisz strukturę bazy danych (tabele: użytkownicy, produkty, zamówienia...)
4. Podziel projekt na etapy – np. tworzenie rejestracji, panel admina, generowanie raportów

Przykład: Prosta aplikacja “Rezerwacja sali”

• Baza danych: tabele sale, rezerwacje, uzytkownicy
• Strona główna: lista dostępnych sal
• Funkcje: rejestracja, logowanie, dodawanie rezerwacji, podgląd historii

Etap 1 — Tworzenie bazy danych (MySQL)

CREATE TABLE sale (
  id INT PRIMARY KEY AUTO_INCREMENT,
  nazwa VARCHAR(40),
  pojemnosc INT
);
CREATE TABLE rezerwacje (
  id INT PRIMARY KEY AUTO_INCREMENT,
  salaID INT,
  uzytkownikID INT,
  data DATE
);
        

Etap 2 — Kodowanie backendu (PHP + SQL)

• Załóż połączenie z bazą, stwórz formularz rezerwacji
• Obsłuż logikę logowania z walidacją danych
• Korzystaj z prepared statements do wszystkich operacji

$stmt = $mysqli->prepare("INSERT INTO rezerwacje (salaID, uzytkownikID, data) VALUES (?,?,?)");
$stmt->bind_param("iis", $salaID, $userID, $data);
$stmt->execute();
        

Etap 3 — Frontend (HTML, CSS, JavaScript)

1. Stwórz formularze: logowania, dodawania, wyszukiwania rezerwacji
2. Dodaj walidację JS po stronie przeglądarki
3. Popraw wygląd strony (kolory, layout, responsywność)

Etap 4 — Testowanie i poprawki

• Sprawdź wszystkie funkcje (rejestracja, logowanie, rezerwacja, wylogowanie)
• Symuluj typowe błędy użytkownika, sprawdź zabezpieczenia
• Poproś inną osobę o przetestowanie aplikacji

Projekty na egzamin i do CV — inspiracje

• Quiz z oceną wyników
• Baza danych uczniów (CRUD, raport PDF, eksport CSV)
• Blog lub portfolio z własnym CMS
• Mini-skrypt sklepu lub katalogu produktów
• Panel nauczyciela/ucznia do zarządzania zadaniami

Każdy ukończony projekt zwiększa Twoje szanse na egzaminie i pokazuje realne umiejętności przyszłemu pracodawcy!