Wykład 2, 23.02

Wykład 2:
Obsługa formularzy w PHP
Praca z formularzem (cz. 1)
Działający przykład:
formularz1.html (dokument statyczny) - naciśnięcie "Wyślij" wysyła dane formularza
do serwera
przetworz1.php (dokument dynamiczny) - w tym pliku są przetwarzane dane
formularza. Generowany jest kod HTML z odczytanymi danymi formularza i odsyłany do
przeglądarki
Wyjaśnienia
1. Utworzenie przycisku do wysłanie danych formularza na serwer:
<input type="submit" value="Wyślij">
Atrybut value - jaki napis będzie na przycisku
Przypomnienie z poprzedniego semestru: type="button" - utworzenie zwykłego
przycisku
2. Atrybut action elementu form.
Tu podajemy nazwę pliku, który będzie przetwarzał dane formularza na serwerze.
3. Atrybut method elementu form.
Tu podajemy jaką metodą mają być wysłane dane formularza: GET lub POST (zobacz
następny slajd - wyjaśnienie czym się różnią te metody).
GET jest domyślna (czyli nie musimy jej podawać jeśli chcemy z tej metody skorzystać).
Praca z formularzem (cz. 2)
4. Jak odczytać dane formularza
• Dane formularza są zapisane w zmiennych superglobalnych będących tablicami
asocjacyjnymi: $_GET lub $_POST w zależności czy były wysłane metodą GET czy POST
• Indeksy (klucze) tej tablicy są takie jak wartości atrybutów name poszczególnych pól
formularza.
• Elementami tej tablicy są wartości atrybutów value poszczególnych pól formularza.
W przypadku pól tekstowych elementem tej tablicy będzie napis wprowadzony w polu
tekstowym.
Czyli:
• Tekst jaki wpisał użytkownik w polu tekstowym jest zapisany w $_GET['imie']
• Jeśli użytkownik wybrał grupę 16-30 z pól radio to $_GET['wiek'] ma wartość "od 16 do
30".
• Jeśli użytkownik wybrał zainteresowania: Sport i Film to $_GET['zainteresowania'] jest
tablicą dwuelementową (indeksowaną liczbami) o wartościach sport i muzyka.
Czyli $_GET['zainteresowania'][0] ma wartość "sport" zaś $_GET['zainteresowania'][1]
ma wartość "film"
Dłuższy przykład:
formularz2.html
przetworz2.php
Metody żądania: GET i POST
GET
• Dane formularza są wysyłane poprzez dołączenie do adresu URL po znaku zapytania.
Czyli w naszym przykładzie, jeśli użytkownik wpisał imię ala, wybrał 0-15, zaznaczył
tylko sport to do adresu będzie dołączony ciąg znaków zaznaczony na czerwono:
http://localhost/.../przetworz1.php?imie=ala&wiek=do+15&zainteresowania[]=sport
POST
• Dane formularza są wysyłane w ciele żądania. Jeśli połączenie jest szyfrowane (https)
dane są dodatkowo szyfrowane
POST /mg/pwi/1516/0102/przetworz1.php HTTP/1.1 Host: localhost
...
Content-Type: application/x-www-form-urlencoded
Content-Length: 47
imie=ala&wiek=do+15&zainteresowania%5B%5D=sport -
ciało żądania, przesłane dane formularza
Metody żądania: GET i POST (porównanie)
GET
• Stosujemy, gdy formularz służy do wyszukiwania (odczytu) danych na serwerze.
Ze względu na to, że dane są dołączane do adresu URL wynik wyszukiwania można
zapisać jako "ulubione".
• Można wysłać ograniczoną ilości danych (W zależności od przeglądarki długość adresu
URL jest ograniczona np. do 256 znaków)
POST
• Stosujemy, gdy formularz służy do zapisania danych na serwerze, np. formularz
rejestracji
• Stosujemy, gdy formularz służy do zalogowania (gdy trzeba przesłać hasło). Połączenie
między klientem a serwerem może być szyfrowane wtedy będzie jeszcze większe
bezpieczeństwo.
Jeśli hasło zostało by wysłane metodą GET to byłoby jawnie przesłane jako część
adresu URL.
• Nie ma ograniczeń co do ilości wysyłanych danych.
Obejrzenie żądania i odpowiedzi HTTP
Za pomocą np. programu Fiddler możemy obejrzeć jak wyglądają żądania
wysyłane przez przeglądarkę i jak wyglądają odpowiedzi otrzymywane z
serwera.
http://www.telerik.com/download/fiddler
Po uruchomieniu programu po lewej stronie mamy listę wszystkich żądań.
Po wybraniu żądania, po prawej stronie u góry możemy obejrzeć szczegóły
żądanie a u dołu odpowiedź (nacisnąć zakładkę "Raw" dla żądania i
odpowiedzi)
Można również obejrzeć w Firebug-u: zakładka "Sieć". Żądania i odpowiedzi
pojawią się poniżej. "+" rozwijamy szczegóły. "Pokaż źródło" - odpowiednik
"Raw" Fiddlera
Formularz i przetwarzanie danych w jednym pliku
Przykład:
− dwa pliki: zamowienie.html i przetworzzamowienie.php
− w jednym pliku formularz i przetwarzanie: zamowienie.php
Wyjaśnienie do przykładu zamowienie.php:
1. Atrybut action - odwołanie do samego siebie. Ten sam plik w którym jest formularz
przetwarza też i dane formularza
2. Sprawdzamy czy był naciśnięty przycisk "Zamów".
Jeśli był, to zmienna $_GET['wyslij] jest ustawiona i funkcja isset() zwraca true.
Jeśli nie był, to ta zmienna nie jest ustawiona i funkcja isset() zwraca false.
Dlaczego to sprawdzać?
Przy pierwszym otwarciu strony trzeba tylko wyświetlić formularz i nie przetwarzać
danych formularza, bo takich jeszcze nie ma.
Dane należy przetwarzać wtedy, gdy był naciśnięty przycisk "Zamów".
Sprawdzenie formularza przed wysłaniem danych - JavaScript
Przykład: zamowienieSpr.php
Wyjaśnienie:
1.
zdarzenie onsubmit ma miejsce, gdy naciśnięty jest przycisk submit. Jeśli wartość submit
jest true to dane formularza zostaną wysłane na serwer, jeśli jest false to nie zostaną
2.
funkcja sprawdz() zwraca true jeśli formularz jest dobrze wypełniony, zwraca false jeśli
źle. Przypomnij sprawdzanie pól formularza: wykład 6 Podstawy programowania w
internecie slajdy 6-7
Uwaga:
To jest przykład sprawdzania po stronie przeglądarki, żeby nie wysyłać złych danych na
serwer.
Ale należy też robić sprawdzanie po stronie serwera, bo przecież użytkownik może
wysłać złe dane nie poprzez naciśnięcie przycisku submit, ale np. wpisując odpowiedni
adres URL, albo wysyłając żądanie POST za pomocą programu Fiddler. (Do tematu
sprawdzania po stronie serwera jeszcze wrócimy).