Przeczytaj
Pobierz archiwum ZIP z plikami niezbędnymi do wykonania zadań przedstawionych w tym e‑materiale:
Rozważmy bazę danych obsługującą internetowy dziennik elektroniczny. W skład bazy o nazwie dziennik wchodzą trzy tabele:
klasa, o atrybutach:
id
(INT),nazwa
(TINYTEXT),uczen, o atrybutach:
id
(INT),Nazwisko
(TINYTEXT),Imie
(TINYTEXT),id_klasy
(INT),wychowawca, o atrybutach:
id
(INT),imie
(TINYTEXT),nazwisko
(TINYTEXT),id_klasy
(INT).
Możemy wyróżnić następujące powiązania (relacje) istniejące między atrybutami:
atrybut
klasa.id
(klucz główny) pozostaje w relacji do polauczen.id_klasy
(klucz obcy),atrybut
klasa.id
(klucz główny) pozostaje w relacji do polawychowawca.id_klasy
(klucz obcy).
Strukturę tabel składowych, powiązań pomiędzy atrybutami oraz opis plików źródłowych wchodzących w skład projektu pokazano w filmie:
Formularze w języku HTML
Formularze służą użytkownikom do wprowadzania danych wejściowych do bazy danych (za pośrednictwem interfejsu witryny) w celu ich przetworzenia. Przykładem może być formularz rejestracji, który pozwala wprowadzić nowego użytkownika do bazy albo formularz logowania, dzięki któremu sprawdzana jest zgodność identyfikatora (loginu) i hasła ze wzorcami umieszczonymi w bazie danych.
Cały opis formularza zamykamy w parze znaczników <form></form>
, zaś pomiędzy nimi umieszczamy dowolny zestaw predefiniowanych w języku HTML kontrolek formularza. Są one różne; mogą to być: pola tekstowe, przyciski, pola do zaznaczenia, listy wyboru itd.
Atrybut action
określa jednoznacznie, który plik zajmie się przetwarzaniem danych otrzymanych z formularza. Jako wartość podajemy ścieżkę względną do przygotowanego skryptu PHP. Przeznaczenie atrybutu method
omówiono niżej.
Metody przesyłania informacji z formularza na serwer
Atrybut method
w znaczniku <form>
określa sposób dostarczenia informacji z formularza na serwer. Istnieją dwie klasyczne metody komunikacji z serwerem:
method="get"
– dane zostaną wysłane w postaci jawnej – wartości podane w formularzu zostaną dołączone („doklejone”) do adresu witryny pokazywanego w pasku adresu przeglądarki;method="post"
– dane zostaną wysłane w postaci niejawnej – wartości podane w formularzu nie zmieniają adresu witryny w przeglądarce.
W przypadku braku deklaracji atrybutu method
wewnątrz znacznika <form>
wykorzystana zostanie metoda get
, ponieważ jest to wartość domyślna w standardzie HTML.
Pole tekstowe, etykieta pola
Wiele kontrolek formularzy określamy za pomocą znacznika <input>
(ang. „wejście”). Rodzaj elementu, którego chcemy użyć, deklarujemy, używając atrybutu type
(typ definiowanej kontrolki). Klasyczne pole tekstowe, znane z systemu Windows albo ze stron internetowych, wstawimy do formularza w następujący sposób:
Ważnym elementem standardu HTML, o którym nie należy zapominać w formularzu, jest etykieta pola – do jej zdefiniowania służą znaczniki <label> </label>
. Jest to nie tylko słowny opis przeznaczenia pola – etykieta reaguje na kliknięcie użytkownika – powiązana z nią kontrolka formularza zyska aktywność. W przypadku pola tekstowego kliknięcie etykiety spowoduje pokazanie klawiatury na ekranie urządzenia mobilnego oraz ustawienie kursora wewnątrz pola. A zatem prawidłowo powiązany z kontrolką znacznik <label>
sprzyja tzw. dostępnościdostępności formularza.
Istnieją dwa sposoby przypisania etykiety do kontrolki formularza:
Wewnątrz etykiety znajduje się zarówno opis pola, jak i sam znacznik
<input>
:
Etykieta zamknięta jest przed polem tekstowym, ale pojawia się dodatkowo atrybut
for
(ang. „dla”), określający, dla którego elementu jest to etykieta. Wartością atrybutufor
jest identyfikator, podany także w atrybucieid
wewnątrz znacznika<input>
. Obydwa identyfikatory oczywiście muszą być identyczne: właśnie na ich podstawie dochodzi do logicznego powiązania pomiędzy kontrolką formularza i jego etykietą:
Przyciski podsumowujące formularz
Istnieją trzy podstawowe sposoby definiowania przycisków w języku HTML. Jednak tylko dwa umożliwiają podsumowanie formularza:
Klasyczny przycisk dokonujący operacji submit, czyli podsumowania całego formularza – dane zostaną wysłane na serwer. Napis na przycisku określamy atrybutem
value
(ang. „wartosć”):<input type="submit" value="Wyślij">
Podwójny znacznik
<button></button>
zamiast pojedynczego znacznika<input>
. Również nastąpi podsumowanie formularza. W tej wersji napis na przycisku umieszczamy po prostu pomiędzy tagami:<button>Wyślij</button>
Dlaczego dano nam możliwość zapisywania przycisku w takiej uwspółcześnionej wersji, skoro zdarzenie submit
i tak następuje dla klasycznego przycisku? Wynika to z faktu, że znacznik <button>
jest podwójny – ma tag otwierający oraz zamykający, w przeciwieństwie do pojedynczego <input>
. To z kolei sprawia, że pomiędzy znacznikami <button></button>
można w języku HTML wskazać dodatkowy element (na przykład grafikę – <img>
).
Znacznik definiujący „zwykły”, „niegorący” przycisk: jego kliknięcie nie podsumowuje formularza, tak jak to miało miejsce dla dwóch wcześniejszych kontrolek:
Nie każdy przycisk powinien podsumować formularz – zdarzają się sytuacje, w których kliknięcie powinno być obsłużone jedynie po stronie klienta (w języku JavaScript) – na przykład przycisk przywołujący w animowany sposób menu główne witryny na ekran.
Wykonanie przykładowego formularza
Pora wykorzystać w praktyce zdobyte informacje. W filmie‑samouczku zrealizujemy podstronę dziennika elektronicznego, umożliwiającą wypisanie listy uczniów wskazanej w formularzu klasy:
Tuż pod tabelą zawierającą wypisanie imion i nazwisk uczniów należących do wybranej klasy powinna się pojawić także informacja (odczytana z bazy danych) o tym, kto jest wychowawcą tej grupy uczniów.
Odczytywanie w skrypcie PHP wartości przysłanej z formularza
Wartość podaną przez użytkownika w formularzu można odebrać w skrypcie PHP w specjalnej, globalnie widocznej tablicy, w której indeks jest taki sam, jak wartość atrybutu name
danej kontrolki formularza**. W zależności od wybranego w atrybucie method
sposobu przesyłania informacji, operacja odczytu wygląda następująco:
Zwróć uwagę, że atrybut name
kontrolki formularza służy właśnie do przesłania wartości wyjętej z formularza do skryptu PHP na serwerze. Atrybut id
najczęściej przydaje się z kolei w przypadku chęci uchwycenia kontrolki w języku JavaScript (lub ewentualnie do ustanowienia logicznego powiązania elementu z etykietą). Stąd niejednokrotnie spotkamy w formularzach HTML kontrolki mające obydwa wspomniane atrybuty.
Odebranie wartości z globalnej tablicy $POST
lub $GET
powinno nastąpić po uprzednim upewnieniu się, że użytkownik przesłał formularz – potrzebna jest do tego dodatkowa instrukcja warunkowa. W przeciwnym razie pierwsze wejście użytkownika do dokumentu spowoduje pokazanie następującego ostrzeżenia:
Nie mieliśmy jeszcze możliwości wpisania czegokolwiek do pola tekstowego, stąd nie ma sensu dokonywać odczytu wartości, ani tym bardziej łączenia się z bazą danych, aby nieistniejącej wartości użyć w kwerendzie! Przyjrzymy się zatem możliwości sprawdzenia instrukcją warunkową sensu dokonywania aktu odczytu.
Sprawdzenie, czy formularz został wysłany
Do zrealizowania testu podsumowania formularza przez użytkownika, możemy wykorzystać dwa rodzaje instrukcji warunkowych:
Sprawdzenie funkcją PHP o nazwie
isset()
(ang. „istnieje, jest ustawione”), czy podany indeks w tablicy globalnej został zarezerwowany w pamięci RAM serwera:
Metody PHP isset()
nie można zastąpić popularną funkcją empty()
, ponieważ indeks w tablicy musi istnieć, ale może zawierać pustą wartość. Z tego powodu funkcja empty()
doskonale nada się do sprawdzenia, czy użytkownik nie zapomniał w ogóle wpisać do pola wartości.
Weryfikacja wartości indeksu
REQUEST_METHOD
w globalnej tablicy$_SERVER
. Ta metoda jest niezależna od ewentualnych pomyłek programisty w wartościach atrybutuname
, ponieważ atrybuty te nie zostają w ogóle użyte wewnątrz warunku:
Druga metoda zachowa się poprawnie tylko dla metody POST. Zastosowanie jej z wykorzystaniem żądania GET spełni warunek zapisany w instrukcji nawet wtedy, gdy nie przesłano formularza. Dzieje się tak dlatego, iż nawet zwykłe wejście na stronę internetową bez wypełnienia formularza stanowi żądanie GET w protokole HTTP.
Słownik
(ang. accessibility) ogół zasad projektowania interfejsów komunikacji człowieka z komputerem, których nadrzędnym celem jest zapewnienie komfortowego dostępu do funkcji serwisów internetowych jak największemu gronu osób (w tym także ludziom narażonym na wykluczenie cyfrowe z powodu niepełnosprawności, wieku, braku wykształcenia lub wskutek ograniczeń technologicznych)
proces mający doprowadzić do wyeliminowania z danych wejściowych możliwie największej liczby znaków sterujących i operatorów, które mogą mieć wpływ na zmianę sposobu działania aplikacji
(ang. SQL injection) metoda ataku na witrynę internetową komunikującą się z bazą danych, polegająca na przemyceniu fragmentu zapytania SQL poprzez odpowiednio spreparowaną wartość wprowadzaną w formularzu