Zadanie 1: Formularz kontaktowy z walidacją danych
Opis sytuacji:
Wyobraź sobie prostą stronę internetową, na której potrzebny jest formularz kontaktowy. Użytkownik powinien móc wpisać swoje imię, adres e-mail oraz treść wiadomości, a następnie wysłać tę wiadomość do właściciela strony. Należy upewnić się, że dane wpisane przez użytkownika są poprawne – np. adres e-mail ma prawidłowy format – zanim przetworzymy (np. wyświetlimy lub wyślemy) tę wiadomość.
Wymagania funkcjonalne:
- Pole Imię i nazwisko – wymagane pole tekstowe (nie może być puste).
- Pole Adres e-mail – wymagane pole tekstowe (najlepiej typu „email”); powinno zawierać poprawnie sformatowany adres e-mail.
- Pole Wiadomość – wymagane pole typu textarea; minimalna długość np. 10 znaków (aby wiadomość nie była za krótka).
- Opcja Zapisz do newslettera – opcjonalny checkbox (pole wyboru); jeśli zaznaczone, użytkownik wyraża chęć zapisu do newslettera.
- Walidacja: Formularz powinien zostać przetworzony tylko, jeśli wszystkie wymagane pola zostały wypełnione poprawnie. W przeciwnym razie należy wyświetlić komunikaty o błędach i nie „wysyłać” wiadomości.
- Po pomyślnej walidacji wyświetlane jest podziękowanie lub podsumowanie wysłanej wiadomości.
Kroki rozwiązania:
- Stworzenie formularza HTML: Utwórz formularz HTML metodą POST, zawierający pola: tekstowe dla imienia, tekstowe (typu email) dla adresu e-mail, pole tekstowe wielowierszowe <textarea> dla wiadomości oraz checkbox dla newslettera. Dodaj przycisk typu submit do wysłania formularza.
- Sprawdzenie przesłania formularza: Po stronie PHP sprawdź, czy formularz został przesłany. Można to zrobić np. przez sprawdzenie $_SERVER[„REQUEST_METHOD”] == „POST” lub obecności konkretnego pola (np. isset($_POST[’email’])).
- Pobranie i walidacja danych: Pobierz dane z pól formularza z tablicy $_POST. Następnie zweryfikuj:
- Czy imię nie jest puste (ewentualnie czy ma określoną minimalną długość).
- Czy adres e-mail nie jest pusty oraz czy ma poprawny format. Do sprawdzenia formatu można użyć wbudowanej funkcji PHP filter_var($email, FILTER_VALIDATE_EMAIL) – jest to najprostszy i bezpieczny sposób weryfikacji poprawności adresu e-mail
- Ponowne wyświetlenie formularza z błędami (jeśli wystąpiły): Jeśli lista błędów nie jest pusta, wyświetl ponownie formularz HTML wraz z komunikatami. Dobrą praktyką jest zachowanie wcześniej wprowadzonych przez użytkownika danych w polach (tzw. sticky form), aby nie musiał wpisywać wszystkiego od nowa. Można to osiągnąć poprzez ustawienie atrybutu value (dla <input>) lub zawartości <textarea> na poprzednie wartości z $_POST.
- Przetworzenie danych po poprawnej walidacji: Jeżeli wszystkie wymagane pola są poprawnie wypełnione, wykonaj odpowiednią akcję. W tym przypadku zamiast faktycznego wysyłania e-maila (co wykracza poza zakres zadania), możesz po prostu wyświetlić podsumowanie lub komunikat potwierdzający, np. „Dziękujemy [imię], Twoja wiadomość została wysłana.”. Pamiętaj, aby wyświetlane dane użytkownika odpowiednio oczyszczać (np. funkcją htmlspecialchars), żeby uniknąć wstrzyknięcia niepożądanego kodu.
Dane wejściowe:
$name = $email = $message = "";
$subscribe = false;
$errors = [];
Zadanie 2: Formularz zamówienia produktu z kalkulacją ceny
Opis sytuacji:
Napisz formularz zamówienia produktu (np. koszulki), w którym użytkownik może wybrać różne opcje zamawianego towaru. Na podstawie wyborów użytkownika obliczana jest cena zamówienia. Przykładowo, koszulka może mieć różne rozmiary (wplywające na cenę), użytkownik może wybrać rodzaj dostawy (np. standardowa lub ekspresowa) oraz określić ilość sztuk. Dodatkowo może zaznaczyć opcję dodatkową, taką jak pakowanie na prezent. Po wysłaniu formularza powinniśmy podsumować zamówienie: wypisać wybrane opcje oraz obliczyć łączny koszt.
Wymagania funkcjonalne:
- Pole Rozmiar koszulki – wybór z listy rozwijanej (select) spośród np. S, M, L. Każdy rozmiar ma ustaloną cenę bazową (np. S – 20 zł, M – 25 zł, L – 30 zł).
- Pole Ilość – pole numeryczne (typ number); określa liczbę sztuk. Wymagane, musi być co najmniej 1 (i np. maksymalnie 10).
- Pole Dostawa – wybór jednej z opcji dostawy (radio). Dostępne opcje: „Standardowa” (np. 0 zł) lub „Ekspresowa” (np. +10 zł dopłaty). Jedna z nich musi być wybrana (domyślnie można zaznaczyć Standardową).
- Pole Pakowanie na prezent – opcjonalny checkbox; jeśli zaznaczony, doliczana jest opłata (np. +5 zł).
- (Opcjonalnie) Uwagi do zamówienia – pole tekstowe (textarea) na dodatkowe informacje od klienta dotyczące zamówienia (nieobowiązkowe, bez specjalnej walidacji poza ewentualnym limitem długości).
- Walidacja: Sprawdź, czy wymagane pola zostały wypełnione/poprawnie wybrane:
- Rozmiar – czy został wybrany (lista rozwijana może mieć domyślną opcję typu „Wybierz…”, wtedy trzeba sprawdzić, czy użytkownik zmienił wartość).
- Ilość – czy jest podana i czy jest liczbą z dozwolonego zakresu (>=1, <=10).
- Dostawa – czy jedna z opcji została wybrana (jeśli nie ustawimy domyślnej w HTML).
- Po wysłaniu i poprawnej walidacji wyświetl podsumowanie: wybrany rozmiar, ilość, typ dostawy, informacja o pakowaniu na prezent oraz oblicz łączną cenę zamówienia według podanych zasad cenowych.
Kroki rozwiązania:
- Stworzenie formularza HTML: Utwórz formularz (method=”post”). Dodaj pole <select name=”size”> z opcjami dla rozmiaru (np. „S”, „M”, „L” – pierwszą opcją może być domyślne „Wybierz rozmiar…” z pustą wartością). Dodaj pole <input type=”number” name=”quantity”> dla ilości (możesz ustawić min=”1″, max=”10″ dla podpowiedzi zakresu). Utwórz grupę przycisków <input type=”radio” name=”shipping”> dla dostawy (np. value=”standard” i „express”). Dodaj checkbox <input type=”checkbox” name=”gift”> dla opcji prezent. Na koniec dodaj przycisk submit.
- Sprawdzenie przesłania i pobranie danych: W skrypcie PHP sprawdź $_SERVER[„REQUEST_METHOD”]. Jeśli to POST, pobierz wartości z $_POST: rozmiar, ilość (pamiętając, że będzie jako string – można rzutować na int lub użyć filter_var), rodzaj dostawy, status checkboxa prezent.
- Walidacja danych wejściowych:
- Sprawdź wymagane pola: rozmiar (czy nie jest pusty lub domyślny), ilość (czy nie pusta i czy jest liczbą w wymaganym przedziale), dostawa (czy jest ustawiona).
- Jeśli quantity ma być liczbą całkowitą, można użyć filter_var($_POST[’quantity’], FILTER_VALIDATE_INT) z opcjami min/max lub funkcji ctype_digit/is_numeric i rzutowania, by upewnić się, że to poprawna liczba.
- W razie błędów (np. brak wyboru rozmiaru, zbyt duża/mała ilość, brak wyboru dostawy) dodaj odpowiednie komunikaty do listy błędów.
- Obsługa błędów: Jeśli lista błędów nie jest pusta, wyświetl formularz ponownie z komunikatami. Podobnie jak w zadaniu 1, wypełnij pola uprzednio podanymi wartościami (value, checked, selected) – np. poprzez porównanie pobranej wartości z wartością pola w kodzie HTML.
- Obliczenie ceny i wyświetlenie podsumowania: Jeśli nie ma błędów, oblicz cenę:
- Ustal cenę bazową na podstawie rozmiaru (np. za pomocą tablicy asocjacyjnej: [’S’=>20, 'M’=>25, 'L’=>30]).
- Pomnóż cenę bazową przez ilość sztuk.
- Dodaj koszt dostawy (0 lub 10 w zależności od wybranej opcji).
- Jeśli zaznaczono pakowanie na prezent, dodaj np. 5 zł.
- Wynik zapisz jako łączną kwotę. Następnie wyświetl czytelne podsumowanie, np.: „Zamówiłeś X koszulek w rozmiarze Y. Dostawa: Z. Pakowanie na prezent: tak/nie. Razem do zapłaty: N zł.„.
Dane wejściowe:
$size = $shipping = "";
$quantity = 1;
$gift = false;
$errors = [];
// Cennik dla rozmiarów
$prices = [
"S" => 20,
"M" => 25,
"L" => 30
];
Zadanie 3: Formularz wyboru wielu opcji (checkboxy)
Opis sytuacji:
Stwórz formularz, w którym użytkownik może zaznaczyć wiele opcji jednocześnie, a aplikacja prawidłowo je odbierze i przetworzy. Przykładowo, załóżmy, że użytkownik wypełnia ankietę zainteresowań i może wybrać dowolną liczbę kategorii, które go interesują (np. Technologia, Sport, Muzyka, Podróże, itd.). Po wysłaniu formularza wybrane kategorie zostaną wypisane. Ważne jest pokazanie, jak obsłużyć w PHP dane z grupy checkboxów (w postaci tablicy).
Wymagania funkcjonalne:
- Lista kategorii (np. zainteresowań) przedstawiona jako zestaw pól checkbox (wielokrotny wybór). Przykładowe opcje: Technologia, Sport, Muzyka, Podróże, Film.
- Użytkownik może zaznaczyć dowolną liczbę opcji (od zera do wszystkich).
- (Opcjonalnie) Możesz wymagać, by co najmniej jedna opcja była zaznaczona, jeśli ma to sens w danym scenariuszu. W naszym przypadku załóżmy, że przynajmniej jedna kategoria musi zostać wybrana (bo np. użytkownik ma wybrać zainteresowania do subskrypcji treści).
- Po wysłaniu formularza aplikacja powinna wyświetlić podsumowanie: listę wybranych przez użytkownika kategorii. Jeśli nie zaznaczono żadnej (i to dozwolone), wyświetl komunikat, że nic nie wybrano lub komunikat błędu (jeśli wymagane było zaznaczenie).
Kroki rozwiązania:
- Przygotowanie formularza HTML: Utwórz formularz z kilkoma polami typu checkbox. Ważne: wszystkie checkboxy dotyczące tej listy muszą mieć taką samą nazwę zakończoną [], co sygnalizuje PHP, że ma utworzyć tablicę wartości. Np. <input type=”checkbox” name=”interests[]” value=”Technologia”> Technologia i analogicznie dla innych opcji
- Odbiór danych w PHP: Po wysłaniu formularza (method POST) sprawdź w PHP, czy tablica $_POST[’interests’] istnieje. Jeżeli użytkownik nie zaznaczył żadnego checkboxa, to PHP nie utworzy tego klucza w $_POST w ogóle. Można to sprawdzić używając empty($_POST[’interests’]) lub !isset($_POST[’interests’]).
- Walidacja wyboru (jeśli wymagane): Jeśli zakładamy, że co najmniej jedna opcja musi być wybrana, a tablica nie istnieje lub jest pusta, dodaj komunikat błędu typu „Wybierz przynajmniej jedną kategorię”. W przeciwnym razie, pobierz tablicę zaznaczonych opcji.
- Przetworzenie zaznaczonych opcji: Załóżmy, że w zmiennej $selected mamy tablicę zaznaczonych kategorii (np. [„Technologia”, „Muzyka”]). Możemy teraz np. wyświetlić je w formie listy lub pojedynczego komunikatu. Można iterować po tablicy za pomocą foreach i wypisywać kolejne elementy, albo połączyć je w jeden string (np. implode(„, „, $selected)).
- Wyświetlenie podsumowania: Jeśli wszystko jest OK, pokaż użytkownikowi komunikat zawierający wybrane przez niego opcje. Jeśli wystąpił błąd (np. nic nie zaznaczono, a było wymagane), wyświetl ten błąd i ewentualnie ponownie formularz do wyboru.
Dane wejściowe:
$selected = []; // tablica na wybrane opcje
$error = "";
Zadanie 4: Formularz przesyłania pliku (upload pliku)
Opis sytuacji:
W aplikacji internetowej chcemy umożliwić użytkownikowi przesłanie pliku na serwer – na przykład zdjęcia profilowego lub dokumentu PDF. Twoim zadaniem jest przygotowanie formularza oraz obsługi w PHP, która pozwoli na wgranie pliku, z weryfikacją podstawowych kryteriów (typ i rozmiar pliku) oraz z zapisaniem go w określonym miejscu na serwerze. Uprościmy założenie: nie zapisujemy informacji o pliku w bazie danych, chodzi tylko o samo przesyłanie i zapis w katalogu.
Wymagania funkcjonalne:
- Formularz HTML z polem Plik do wysłania (typ file) oraz przyciskiem submit. Formularz musi mieć ustawiony atrybut enctype=”multipart/form-data” oraz method POST, aby przesyłanie pliku zadziałało.
- Po stronie PHP należy obsłużyć superglobalną tablicę $_FILES. W szczególności:
- Sprawdzić, czy plik w ogóle został wybrany i przesłany (np. $_FILES[’nazwa’][’error’] czy nie wskazuje błędu UPLOAD_ERR_NO_FILE).
- Zawęzić dozwolone typy plików – np. przyjmujemy tylko obrazki (JPEG, PNG, GIF) albo tylko pliki PDF, w zależności od scenariusza. Można sprawdzić rozszerzenie pliku lub typ MIME.
- Ograniczyć maksymalny rozmiar pliku (np. do 2 MB). Warto pamiętać, że w ustawieniach PHP istnieją limity upload_max_filesize i post_max_size, ale dodatkowo możemy własnoręcznie zweryfikować $_FILES[’nazwa’][’size’].
- W razie niespełnienia wymagań (brak pliku, zły format, za duży rozmiar) – wyświetlić komunikat błędu i nie zapisywać pliku.
- Jeśli wszystko jest OK – zapisać plik na serwerze (np. do katalogu uploads/). Użyć do tego funkcji move_uploaded_file($_FILES[’nazwa’][’tmp_name’], $sciezka_docelowa). Upewnić się, że katalog docelowy istnieje i ma prawa zapisu dla skryptu.
- Dla bezpieczeństwa dobrze jest zmienić nazwę pliku (np. dodać unikalny prefix lub ID) aby uniknąć nadpisania istniejących plików o tej samej nazwie oraz potencjalnych problemów z nietypowymi nazwami.
- Po zapisaniu pliku wyświetl użytkownikowi komunikat potwierdzający, np. „Plik XYZ został przesłany pomyślnie.” Ewentualnie można wypisać pewne informacje o pliku (nazwę, rozmiar) lub zaoferować podgląd (np. wyświetlić obrazek, jeśli to zdjęcie).
Kroki rozwiązania:
- Formularz HTML do uploadu: Utwórz formularz z enctype=”multipart/form-data” i metodą POST. Umieść w nim pole <input type=”file” name=”userfile”> (np. o nazwie „userfile” lub innej) oraz przycisk submit. Możesz dodać również pola tekstowe, np. opis pliku, ale nie jest to konieczne do demonstracji mechanizmu.
- Sprawdzenie przesłania pliku: W skrypcie PHP użyj $_FILES. Najpierw sprawdź $_FILES[’userfile’][’error’]. Jeśli równe UPLOAD_ERR_NO_FILE (wartość 4) lub tablica $_FILES w ogóle nie istnieje, to znaczy, że użytkownik nie wybrał pliku – zwróć błąd „Nie wybrano pliku.”.
- Walidacja typu i rozmiaru: Jeśli plik jest przesłany, sprawdź jego typ/rozszerzenie. Możesz np. pobrać nazwę pliku $_FILES[’userfile’][’name’] i za pomocą pathinfo($nazwa, PATHINFO_EXTENSION) wyciągnąć rozszerzenie, a następnie sprawdzić, czy znajduje się ono na liście dozwolonych (np. [’jpg’,’png’,’gif’,’pdf’]). Innym podejściem jest sprawdzenie typu MIME $_FILES[’userfile’][’type’] lub użycie funkcji mime_content_type na pliku tymczasowym. Sprawdź też rozmiar w bajtach $_FILES[’userfile’][’size’] – np. czy nie przekracza 2 000 000 bajtów (~2MB). W razie wykrycia nieprawidłowego typu lub zbyt dużego pliku, przygotuj komunikat błędu (np. „Niedozwolony typ pliku” lub „Plik jest zbyt duży”).
- Przygotowanie nazwy i ścieżki docelowej: Ustal nazwę, pod jaką plik zostanie zapisany na serwerze. Można użyć oryginalnej nazwy (ale lepiej dodać do niej prefiks/sufiks). Np. $filename = time() . „_” . basename($_FILES[’userfile’][’name’]); – to dołącza znacznik czasu, co zwiększa unikalność. Katalog docelowy ustaw np. $uploadDir = „uploads/”; (upewnij się, że istnieje). Pełna ścieżka: $targetPath = $uploadDir . $filename;.
- Zapis pliku na serwerze: Użyj move_uploaded_file($_FILES[’userfile’][’tmp_name’], $targetPath). Ta funkcja przeniesie plik z katalogu tymczasowego (gdzie trafia podczas uploadu) do wskazanej lokalizacji. Zwraca true/false w zależności od powodzenia operacji.
- Wyświetlenie wyniku: Jeśli zapis się powiódł, wyświetl komunikat sukcesu. Możesz np. podać nazwę pliku lub nawet wyświetlić link do niego (jeśli to bezpieczne) albo osadzić obraz (jeśli to obrazek, <img src=’uploads/nazwa.jpg’>). Jeśli wystąpił błąd (np. funkcja zwróci false lub nie przeszedł walidacji), wyświetl komunikat błędu i (opcjonalnie) ponownie formularz.
Dane wejściowe:
$uploadDir = __DIR__ . "/uploads/"; // katalog docelowy na serwerze (ścieżka fizyczna)
$allowedExt = ['jpg','jpeg','png','gif']; // dozwolone rozszerzenia plików obrazów
$maxSize = 2 * 1024 * 1024; // 2 MB w bajtach
$message = "";
Zadanie 5: Prosty quiz z oceną wyniku
Opis sytuacji:
Przygotuj prosty quiz jednokrotnego wyboru składający się z kilku pytań. Użytkownik udziela odpowiedzi poprzez zaznaczenie jednej z opcji przy każdym pytaniu (radio button). Po wysłaniu formularza skrypt powinien sprawdzić odpowiedzi z wcześniej zdefiniowanymi prawidłowymi odpowiedziami i wyświetlić podsumowanie – np. ile odpowiedzi było poprawnych, ewentualnie które. Taki mechanizm łączy w sobie obsługę wielu pól formularza oraz prostą logikę porównywania i zliczania wyniku.
Wymagania funkcjonalne:
- Formularz zawiera 3 pytania (dla przykładu) z dziedziny ogólnej wiedzy. Każde pytanie ma jedną prawidłową odpowiedź spośród kilku dostępnych (np. 3 opcji oznaczonych A, B, C).
- Każde pytanie jest przedstawione jako tekst pytania oraz poniżej zestaw opcji do wyboru (radio). Użytkownik musi wybrać dokładnie jedną odpowiedź do każdego pytania.
- Po wysłaniu formularza następuje walidacja, czy na wszystkie pytania udzielono odpowiedzi. Jeśli brakuje odpowiedzi na któreś pytanie, zwracany jest komunikat błędu proszący o udzielenie brakujących odpowiedzi (i ponowne wyświetlenie formularza).
- Jeśli na wszystkie pytania są odpowiedzi, skrypt porównuje je z kluczem poprawnych odpowiedzi i oblicza liczbę poprawnych odpowiedzi.
- Wynik quizu jest prezentowany użytkownikowi, np. w formie: „Twój wynik: 2/3 poprawnych odpowiedzi.” Można też opcjonalnie wskazać prawidłowe odpowiedzi dla pytań, ale podstawowo chodzi o samą punktację.
Kroki rozwiązania:
- Przygotowanie pytań i formularza HTML: Określ treść 3 pytań i po 3 opcje odpowiedzi do każdego (A, B, C). Dla każdego pytania użyj pola typu radio z taką samą nazwą (np. name=”q1″, name=”q2″, name=”q3″), aby grupy były rozłączne. Każda opcja powinna mieć unikalną wartość (np. „A”, „B”, „C”) oraz etykietę z treścią odpowiedzi. Możesz dopisać literę przy każdej opcji lub zawrzeć ją w etykiecie.
- Definicja prawidłowych odpowiedzi: W kodzie PHP zdefiniuj strukturę (np. tablicę asocjacyjną), która będzie przechowywała poprawne odpowiedzi dla poszczególnych pytań. Np. $correctAnswers = [’q1’=>’B’, 'q2’=>’B’, 'q3’=>’A’]; oznacza, że dla pytania 1 poprawna jest opcja B, dla pytania 2 opcja B, dla pytania 3 opcja A.
- Sprawdzenie kompletności odpowiedzi: Po wysłaniu formularza (metodą POST) sprawdź, czy w $_POST istnieją klucze dla wszystkich pytań. Jeśli któregoś brakuje (co oznacza, że użytkownik nie zaznaczył żadnej odpowiedzi w danej grupie), dodaj komunikat błędu, np. „Nie udzielono odpowiedzi na pytanie 2.” Można te komunikaty przygotować dynamicznie, iterując po tablicy pytań.
- Ocena odpowiedzi: Jeżeli wszystkie pytania mają zaznaczone odpowiedzi, porównaj je z kluczem. Iteruj po tablicy z poprawnymi odpowiedziami i sprawdzaj, czy $_POST[’qi’] (gdzie i to numer pytania) jest równe odpowiedzi w kluczu. Zliczaj poprawne trafienia w zmiennej licznikowej (np. $score).
- Wyświetlenie wyniku: Jeżeli były braki, wyświetl ponownie formularz z komunikatami o błędach (i zachowaniem zaznaczonych wcześniej odpowiedzi). Jeśli wszystko wypełnione, wyświetl rezultat quizu, np. „Uzyskałeś 2 z 3 punktów.” Ewentualnie możesz podać procent lub krótki komentarz (np. „dobry wynik” itp. według uznania).
Dane wejściowe:
$correctAnswers = [
"q1" => "B",
"q2" => "B",
"q3" => "A"
];
$userAnswers = []; // tablica na odpowiedzi użytkownika
$errors = [];
// Pytania i opcje (do ułatwienia generowania formularza i komunikatów)
$questions = [
"q1" => "Stolica Francji to:",
"q2" => "2 + 2 = ?",
"q3" => "PHP to język:"
];
$options = [
"q1" => ["A" => "Londyn", "B" => "Paryż", "C" => "Rzym"],
"q2" => ["A" => "3", "B" => "4", "C" => "5"],
"q3" => ["A" => "skryptowy", "B" => "styli (CSS)", "C" => "znaczników (HTML)"]
];