ZSEiO w Krośnie
|
TECHNIK INFORMATYK
|
|||
|
|
||||
Lekcja nr:
|
5
|
Nazwa
przedmiotu:
|
||
Temat:
Formularze HTML, przesyłanie danych do skryptu PHP
|
Czas trwanie 45 min |
|||
|
Autor materiałów:
dr Marcin Skuba |
||||
1.
Treści programowe:
Język PHP, formularze
HTML, przesyłanie danych do skryptu php z formularza,
metoda GET ora POST
2.
Cel zajęć:
Celem zajęć jest
opanowanie umiejętności programowania formularzy pobierających dane do skryptu
PHP.
3.
Materiały dydaktyczne
Formularze HTML i ich przesyłanie do PHP
Formularze to podstawowy element stron
internetowych, który umożliwia użytkownikom wprowadzanie danych, a następnie
przesyłanie ich na serwer do dalszego przetworzenia. Po stronie klienta (w
przeglądarce) tworzymy je w HTML, a po stronie serwera (w PHP) odbieramy
i przetwarzamy te dane.
1. Budowa formularza HTML
Formularz definiujemy za pomocą znacznika
<form>. To w nim umieszczamy wszystkie pola do wprowadzania danych, takie
jak pola tekstowe, przyciski, pola wyboru itp.
Najważniejsze atrybuty znacznika <form>:
- action: Określa adres URL (zazwyczaj plik .php), do którego dane z formularza mają zostać
wysłane.
- method: Określa metodę HTTP, za pomocą której dane
zostaną przesłane. Najczęściej używane metody to POST i GET.
Przykład
-
Oto prosty przykład, który pokazuje, jak przesłać dane z formularza HTML i
przetworzyć je po stronie skryptu PHP. Całość składa się z dwóch oddzielnych
plików, co jest standardową praktyką.
Formularz
HTML (formularz.html). Ten plik zawiera
prosty formularz, w którym użytkownik może wpisać swoje imię. Dane zostaną
wysłane do skryptu PHP za pomocą atrybutów action i method.
action="przetworz.php":
Określa, do którego pliku zostaną wysłane dane. method="POST":
Informuje przeglądarkę, że dane mają być wysłane w "ciele" żądania,
co jest bezpieczniejsze i nie ujawnia danych w adresie URL. name="imie": Nadaje nazwę danym. Ta nazwa jest kluczem, pod
którym dane będą dostępne w skrypcie PHP.
-
Skrypt PHP (przetworz.php). Ten plik odbiera dane z
formularza, przetwarza je, a następnie wyświetla wynik.
-------------------------------------------------------------------------------------------------------------------------
2. Przesyłanie danych do PHP (Metody GET i POST)
Dane z formularza są automatycznie przekazywane do
skryptu PHP za pomocą jednej z dwóch superglobalnych
tablic.
Metoda GET
- Dane są dołączane do adresu URL jako ciąg
zapytania (?klucz=wartość&klucz2=wartość2).
- Zalety: Można łatwo
udostępniać i zapamiętywać linki.
- Wady: Dane są
widoczne dla każdego (np. w historii przeglądarki). Metoda nie nadaje się
do przesyłania wrażliwych danych, takich jak hasła. Ma ograniczenie co do
ilości przesyłanych danych.
- W PHP dane odbieramy za pomocą tablicy $_GET.
Przykład: Jeśli formularz wysłany metodą GET ma pole name="imie", w PHP
odbierzemy je tak:
Metoda POST
- Dane są przesyłane w "niewidoczny"
sposób, w treści żądania HTTP.
- Zalety:
Bezpieczniejsza do przesyłania wrażliwych danych. Brak ograniczenia co do
ilości przesyłanych danych. Dane nie są widoczne w pasku adresu.
- Wady: Nie można
łatwo udostępnić linku z przesłanymi danymi.
- W PHP dane odbieramy za pomocą tablicy $_POST.
Przykład: Jeśli formularz wysłany metodą POST ma pole name="haslo", w PHP
odbierzemy je tak:
Każde pole wejściowe, z którego dane mają zostać
wysłane do PHP, musi mieć atrybut name. To on
będzie kluczem, pod którym dane będą dostępne w PHP.
-------------------------------------------------------------------------------------------------------------------------
3. Najważniejsze pola formularza:
ü <input
type="text">: Pole
do wprowadzania pojedynczej linii tekstu.
ü <input
type="password">: Pole
do wprowadzania hasła (znaki są maskowane).
ü <input
type="submit">:
Przycisk do wysyłania formularza.
Lub
ü <input
type="radio">:
Pojedyncze pole wyboru. Używane w grupach, gdzie użytkownik może wybrać tylko
jedną opcję. Atrybut name musi być taki sam dla
wszystkich opcji w grupie.
Przykładowy skrypt do obsługi danych przesłanych z obiektu typu radio:
ü <input
type="checkbox">: Pole
wyboru wielokrotnego. Używane, gdy użytkownik może zaznaczyć wiele opcji.
Atrybut name powinien mieć na końcu [] (np. name="hobby[]") w celu prawidłowego przesłania
wielu wartości do PHP jako tablicy.
Przykład skryptu odbierającego tablice z zaznaczonymi opcjami checkbox:
ü <textarea>: Wielolinijkowe
pole tekstowe, idealne na komentarze lub dłuższe wiadomości.
ü <select>: Lista
rozwijana, z której użytkownik może wybrać jedną opcję. Elementy listy
definiuje się za pomocą znacznika <option>
Przykładowy skrypt do obsługi danych przesłanych z listy rozwijanej:
- Pole wymagane (required):
ü <label> w HTML
służy do opisania elementu formularza (np. pola tekstowego, przycisku, checkboxa).
Kliknięcie w etykietę aktywuje powiązany element
formularza (np. ustawia kursor w polu tekstowym lub zaznacza checkbox).
Zwiększa czytelność i dostępność formularza,
szczególnie dla osób korzystających z czytników ekranu.
Atrybut for wskazuje identyfikator (id) pola,
które etykieta opisuje.
Inne typy formularzy:
-----------------------------------------------------------------------------------------------------------------------
4. Walidacja danych
Zanim użyjesz danych z formularza, zawsze musisz je zweryfikować
i oczyścić. To kluczowy krok, który zapobiega atakom (np. XSS, SQL injection).
- Sprawdź, czy dane w ogóle zostały przesłane (isset()).
- Sprawdź, czy są w odpowiednim formacie (np. is_numeric()).
- Oczyść dane z potencjalnie niebezpiecznych
znaków (np. za pomocą htmlspecialchars() lub filtrów
PHP).
· Funkcja
isset() w PHP sprawdza, czy dana zmienna została zadeklarowana i czy nie
ma wartości null.
Zawsze zwraca wartość logiczną:
true —
jeśli zmienna istnieje i ma jakąkolwiek wartość inną niż null.
false — jeśli
zmienna nie istnieje lub jej wartość została jawnie ustawiona na null.
Jest bardzo często używana do bezpiecznego
sprawdzania, czy dane z formularza ($_POST, $_GET) lub sesji ($_SESSION)
zostały przesłane.
· Funkcja
empty() służy do sprawdzania, czy zmienna jest pusta w
sensie logicznym. Jest bardziej liberalna w tym, co uznaje za
"puste".
· Funkcja
htmlspecialchars() w PHP
konwertuje specjalne znaki HTML na ich encje HTML.
Jej głównym zadaniem jest zapobieganie błędom w kodzie HTML oraz – co
ważniejsze – ochrona przed atakami XSS (Cross-Site Scripting),
szczególnie gdy wyświetlasz na stronie dane wprowadzone przez użytkownika.
Gdy użytkownik wprowadzi tekst, który zawiera znaki specjalne, htmlspecialchars() zamienia je na bezpieczne, nienadające
się do wykonania odpowiedniki. Dzięki temu przeglądarka interpretuje je jako
zwykły tekst, a nie jako kod HTML.
Oto najważniejsze konwersje, jakie wykonuje ta funkcja:
|
Oryginalny Znak |
Encja HTML (Zamiennik) |
Opis |
|
< |
< |
Zastępuje znak otwierający tag
HTML. |
|
> |
> |
Zastępuje znak zamykający tag
HTML. |
|
& |
& |
Zastępuje znak ampersand
(używany do rozpoczęcia encji). |
|
" |
" |
Zastępuje podwójny cudzysłów. |
|
‘ |
' lub ' |
Zastępuje pojedynczy cudzysłów (zależnie od
ustawień). |
-----------------------------------------------------------------------------------------------------------------------
5.
Zmienne sesyjne
$_SESSION to tablica
superglobalna w PHP, służąca do przechowywania
danych między różnymi stronami (żądaniami) użytkownika.
Dane zapisane w $_SESSION są przechowywane na
serwerze,
PHP identyfikuje użytkownika za pomocą
identyfikatora sesji (session ID) — zwykle zapisanego
w ciasteczku.
Aby używać $_SESSION:
Na początku każdego skryptu, w którym korzystasz z sesji, trzeba wywołać:
Przykład użycia:
Zakończenie sesji: Aby usunąć dane sesji:
$_SESSION pozwala zapamiętać dane użytkownika między różnymi
stronami, jest bezpieczniejsza niż cookies, bo dane są przechowywane na serwerze.
Przykładowe
zastosowanie:
- logowanie
użytkowników,
- zapamiętywanie
koszyka w sklepie,
- przechowywanie
ustawień użytkownika między stronami.
-----------------------------------------------------------------------------------------------------------------------
6.
Ciasteczka
Ciasteczka (cookies) to małe
pliki tekstowe przechowywane w przeglądarce użytkownika, które pozwalają
zapamiętywać dane między wizytami na stronie.
Do czego służą:
- zapamiętywanie
zalogowanego użytkownika,
- przechowywanie
ustawień (np. języka, motywu),
- śledzenie
aktywności użytkownika (np. ostatnio oglądane produkty).
Tworzenie ciasteczka:
Ciasteczka ustawia się funkcją setcookie() zanim
zostanie wysłany jakikolwiek HTML do przeglądarki.
Parametry:
o
"nazwa" – nazwa ciasteczka,
o
"wartość" – jego zawartość,
o
time() +
3600 – data wygaśnięcia (czas w sekundach od teraz).
Odczyt
ciasteczka:
Po ustawieniu, ciasteczko jest dostępne w tablicy
$_COOKIE:
Usuwanie ciasteczka:
Aby usunąć, ustaw je z czasem ważności w przeszłości:
Ciasteczka są
przechowywane po stronie przeglądarki użytkownika oraz
wysyłane do serwera przy każdym żądaniu strony i są dostępne w PHP przez
tablicę $_COOKIE.
Różnica względem $_SESSION:
- $_SESSION
– dane trzymane na serwerze,
- $_COOKIE
– dane trzymane na komputerze użytkownika.
4.
Zadania
Zadanie 1:
Prosta walidacja loginu i hasła (GET)
Stwórz formularz login.html z polami login i haslo. Użyj metody GET do przesłania danych do pliku sprawdz_get.php. W pliku PHP odbierz dane, a następnie
wyświetl je na ekranie. Użyj atrybutu name dla
każdego pola.
Zadanie 2:
Obliczanie pola prostokąta (POST)
Utwórz formularz pole_prostokata.html z dwoma polami
tekstowymi: dlugosc i szerokosc.
Użyj metody POST do wysłania danych do skryptu oblicz.php.
W skrypcie oblicz.php odbierz dane, oblicz pole
prostokąta i wyświetl wynik w czytelnej formie. Dodaj walidację, która
sprawdzi, czy przesłane wartości są liczbami i czy są większe od zera.
Zadanie 3:
Rejestracja użytkownika (POST)
Stwórz formularz rejestracja.html zawierający pola: imie, email oraz haslo. Użyj
metody POST. W osobnym pliku zapisz_rejestracje.php
odbierz przesłane dane i wyświetl je, upewniając się, że nie zawierają
niebezpiecznych znaków (np. za pomocą htmlspecialchars()).
Dodaj warunek, który sprawdzi, czy wszystkie pola formularza zostały
wypełnione. Jeśli nie, wyświetl komunikat błędu.
Zadanie 4:
Ankieta z wyborem (POST i Checkbox)
Utwórz formularz ankieta.html, który zawiera pytanie
"Jakie masz zainteresowania?" oraz co najmniej trzy pola wyboru
wielokrotnego (checkbox) z nazwami hobby (np. sport,
muzyka, gry). Pamiętaj o użyciu tablicy (name="hobby[]")
w nazwach pól wyboru. Wyślij dane metodą POST do pliku przetworz_ankiete.eta.php.
W tym pliku odbierz dane, zlicz, ile opcji zaznaczył użytkownik i wyświetl
wszystkie wybrane hobby w formie listy.
Zadanie 5:
Proste powitanie z imienia
Napisz program powitanie.php,
który zawiera formularz z wymaganym polem na imię. Kiedy użytkownik wpisze
swoje imię i naciśnie przycisk, strona przeładuje się, a skrypt PHP, który
znajduje się w tym samym pliku, wyświetli powitanie, np. "Witaj,
Jan!". Wskazówka: Użyj instrukcji if z
funkcją isset($_POST['imie']),
aby sprawdzić, czy formularz został przesłany.
Zadanie 6:
Sprawdzanie parzystości liczby
Napisz program parzystosc.php,
który zawiera formularz z wymaganym polem na liczbę. Po wysłaniu formularza,
skrypt PHP ma sprawdzić, czy podana liczba jest parzysta czy nieparzysta, a
następnie wyświetlić odpowiedni komunikat. Użyj operatora modulo (%) do
sprawdzenia parzystości.
Zadanie 7:
Kalkulator BMI
Napisz program bmi.php,
który zawiera formularz z polami waga i wzrost. Po wysłaniu danych, skrypt ma
obliczyć BMI i wyświetlić wynik oraz jego interpretację (niedowaga, prawidłowa
waga, nadwaga). Wskazówka: Użyj walidacji, aby upewnić się, że przesłane
wartości są liczbami i nie są ujemne. Formularz powinien znajdować się na
górze, a wynik poniżej.
Zadanie 8:
Dynamiczny licznik kliknięć
Napisz program licznik.php.
Na stronie wyświetl przycisk "Kliknij mnie". Z każdą kolejną wizytą
na stronie (czyli po każdym kliknięciu w przycisk), skrypt ma zwiększyć licznik
o jeden i wyświetlić "Liczba kliknięć: [aktualna liczba]". Wskazówka:
Przechowaj stan licznika w zmiennej sesji (np. $_SESSION['klikniecia']).
Pamiętaj o rozpoczęciu sesji na początku skryptu za pomocą funkcji session_start(). Dopóki sesja nie została
zainicjalizowana, wyświetl komunikat o braku kliknięć.
Zadanie 9:
Kalkulator BMI (POST i walidacja)
Stwórz formularz bmi.html z polami waga (w kg) i
wzrost (w metrach). Użyj metody POST do przesłania danych do skryptu oblicz_bmi.php. W skrypcie PHP:
- Sprawdź, czy dane zostały przesłane i są
liczbami większymi od zera.
- Oblicz BMI, używając wzoru: BMI = waga /
(wzrost * wzrost).
- Wyświetl wynik oraz odpowiedni komunikat
interpretujący BMI, np.:
- BMI < 18.5: "Niedowaga"
- 18.5 <= BMI < 25: "Waga
prawidłowa"
- BMI >= 25: "Nadwaga"
Zadanie 10: Generator haseł (POST i Select)
Stwórz formularz haslo.html z polami:
- Pole tekstowe dlugosc_hasla
do podania długości hasła.
- Lista rozwijana (<select>)
poziom_trudnosci z opcjami "Łatwy"
(tylko małe litery), "Średni" (małe i wielkie litery) oraz
"Trudny" (małe, wielkie litery i cyfry). Wyślij dane metodą POST
do pliku generuj_haslo.php. W pliku PHP:
- Odbierz wybrane opcje.
- Na podstawie wybranego poziomu trudności,
utwórz odpowiedni ciąg znaków do losowania.
- Za pomocą pętli, wylosuj i sklej odpowiednią
liczbę znaków.
- Wyświetl wygenerowane hasło.