Projekt: Aplikacja webowa z wykorzystaniem HTML, JavaScript, PHP i MySQL

Ogólne założenia

  • Praca z projektem będzie weryfikowana na lekcjach.
  • Część MySQL musi być udokumentowana screenami całego ekranu po wykonaniu komendy które mają być dodane jako linki na stronie.

  • Projekt ma zawierać formularz z (1):

    • polem tekstowym (imię),
    • polem email,
    • polem wiek,
    • polem select (lista wyboru),
    • polami checkbox.

Część JavaScript (18)

1. Alert (1)

  • Wyświetlenie powiązanego z inną funkcjonalnością komunikatu w okienku alert().

2. Prosty kalkulator (4 operacje) (2)

  • Dodawanie, odejmowanie, mnożenie i dzielenie dwóch liczb wprowadzonych przez użytkownika po kliknieciu na przycisk z odpowiednim działaniem + walidacja.

3. Losowanie liczb (prawie jak totolotek) (3)

  • Użytkownik wpisuje 3 liczby.
  • Komputer losuje 3 liczby.
  • Program wyswietla liczby gracza i wylosowane.

4. Galeria obrazków (3)

  • Po kliknięciu na obrazek – zmienia się na inny.
  • 5 przycisków umożliwia wybór konkretnych zdjęć (mile widziane jamniki).
  • Jeden przycisk wybiera losowy obrazek.

5. Czyszczenie formularza (1)

  • Przycisk w JS, który czyści wszystkie pola formularza.

6. Przycisk wypełniający przykładowymi danymi (1)

  • Po kliknięciu wypełnia formularz przykładowymi danymi.

7. Zmiana koloru tła strony (2)

  • Przycisk i colorpicker, który zmienia kolor tła strony.

8. Presety kolorów strony (2)

  • 3 gotowe zestawy kolorów zmieniające:

    • tło strony,
    • kolor tekstu,
    • kolor przycisków.
  • Po wybraniu konkretnego koloru pojawia się dodatkowe zdjęcie.

9. Timer (3)

  • Odliczanie czasu, po którym strona zostaje wyczyszczona.

Część PHP (13) + (1) HTML

1. Walidacja danych (3)

  • Sprawdzenie poprawności adresu email i wieku (sprawdzenie zakresu i czy jest liczbą) za pomocą filter_var().

2. Pobieranie danych z formularza (2)

  • Odbiór danych przesłanych metodą POST lub GET.
  • Wyświetlenie danych lub komunikatu o błędzie, jeśli są puste.

3. Obsługa plików (3)

  • Pole typu input type="file".
  • Sprawdzenie w PHP, czy plik został przesłany.
  • Sprawdzenie, czy przesłany plik jest graficzny (np. jpg, png, gif).

4. Podpięcie do bazy danych (1)

  • Połączenie PHP z bazą MySQL.

5. Rejestracja i logowanie (4)

  • Formularz rejestracyjny i logowania.
  • Dane zapisywane i weryfikowane w bazie MySQL.

Część MySQL (15)

1. Utworzenie bazy danych (1)

  • Utwórz bazę danych o nazwie projekt_web.
  • Połącz się z tą bazą.

2. Utworzenie tabeli (2)

  • Utwórz tabelę uzytkownicy zawierającą pola:

    • identyfikator użytkownika (klucz główny),
    • imię,
    • adres email,
    • wiek,
    • status (np. aktywny / nieaktywny).

3. Wstawienie danych (2)

  • Wstaw co najmniej 5 różnych rekordów do tabeli uzytkownicy.
  • Dane powinny różnić się imieniem, adresem email, wiekiem i statusem.

4. Wybieranie danych z warunkiem (2)

  • Wyświetl użytkowników, którzy mają status „aktywny”.
  • Wyświetl użytkowników, którzy mają wiek większy niż 25 lat.

5. Aktualizacja danych (2)

  • Zmień status użytkownika o wybranym identyfikatorze.
  • Zwiększ wiek wszystkich użytkowników o 1 rok.

6. Zmiana nazwy tabeli (1)

  • Zmień nazwę tabeli uzytkownicy na klienci.

7. Funkcje agregujące (3)

  • Oblicz średni wiek wszystkich użytkowników.
  • Policz, ilu użytkowników ma status „aktywny”.

8. Grupowanie danych (2)

  • Pogrupuj użytkowników według statusu i wyświetl, ile osób znajduje się w każdej grupie.

Podsumowanie (3)

Projekt powinien łączyć elementy:

  • HTML (formularze, elementy interfejsu)
  • JavaScript (interaktywność, dynamiczne operacje)
  • PHP (obsługa danych, walidacja, integracja z bazą)
  • MySQL (przechowywanie danych, operacje na tabelach)