CMYK
NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML/PHP
JAK DZIAAAJ
JAK DZIAAAJ
FORMULARZE?
Formularze HTML stanowią mechanizm komunikacji użytkownika odwiedzającego stronę
WWW z aplikacją internetową. Za poSrednictwem kontrolek formularza użytkownik
przekazuje dane do skryptu działającego na serwerze. W artykule omówimy, co się dzieje,
gdy internauta wypełnia formularz, jak są zakodowane i jaką drogę odbywają wprowadzone
informacje, oraz metody dostępu do danych pochodzących z formularza w języku PHP.
Włodzimierz Gajda
Formularz HTML Skrypt przetwarzający formularz zawarty w pliku jakis-skrypt.php
Formularz HTML definiujemy stosując element FORM. Wewnątrz po- może być napisany w dowolnym języku programowania dynamicz-
między znacznikami
umieszczamy zawartoSć nych stron WWW. Może to być PHP, Perl, ASP, JavaServerPages,
formularza, na którą składają się kontrolki (np. INPUT) oraz elementy for- skrypty CGI w bashu, C czy nawet Pascalu. Jednak nie ma możliwoSci
matujące (np. TABLE). Typowy formularz składa się z elementu FORM przetworzenia formularza w języku HTML. Do przetwarzania for-
zawierającego tabelę, wewnątrz której umieszczono kilka kontrolek. mularza musimy użyć jednego z języków skryptowych, które służą
do programowania dynamicznych stron WWW.
LISTING 1: PRZYKŁADOWY FORMULARZ
Kodowanie application/x-www-form-urlencoded
Listing 1 tworzy formularz, który zawiera dwa pola do wprowadza- Formularz jest przedstawiany w oknie przeglądarki w postaci szeregu
nia danych (pola te nazwano Imię i Nazwisko) oraz przycisk WySlij. kontrolek. Układ graficzny kontrolek nie wpływa na sposób zakodo-
Osoba odwiedzająca witrynę może umieScić kursor wewnątrz pól for- wania danych. Dane wprowadzone do formularza są kodowane przez
mularza, wypełnić je, po czym przesłać formularz naciskając przycisk przeglądarkę. O sposobie kodowania decyduje atrybut enctype elemen-
WySlij. TreSć wprowadzona przez użytkownika zostanie przesłana do tu FORM. DomySlnym kodowaniem formularzy jest application/x-
skryptu o nazwie jakis-skrypt.php. Nazwę skryptu przetwarzającego -www-form-urlencoded. Kodowanie to polega na utworzeniu par:
formularz podajemy jako wartoSć atrybutu action elementu FORM. nazwakontrolki=wartosc
i połączeniu ich separatorem &. Wszystkie znaki specjalne występujące
w nazwach lub wartoSciach kontrolek zostają przedstawione w postaci
kodu szesnastkowego poprzedzonego znakiem procentu. Na przykład
spacja jest zamieniana na napis %20 (kod ASCII znaku spacja w syste-
mie dziesiętnym jest równy 32; liczba 32 w systemie szesnastkowym
Rys. 1. Formularz z listingu 1 przed i po wprowadzeniu danych
wynosi 20).
Po naciSnięciu przycisku WySlij wizyta zostanie przeniesiona pod Nazwy zmiennych są pobierane z kodu HTML formularza. Każda
adres jakis-skrypt.php. W skrypcie tym będą dostępne dane wprowa- kontrolka posiada atrybut name. Atrybut ten ustala nazwę zmiennej.
dzone przez użytkownika w formularzu. W formularzu z listingu 1 występują dwie kontrolki o nazwach imie
Uwaga: wszystkie listingi z tego artykułu,
jak również przykłady i program ieHTTPHeaders są
102 INTERNET.kwiecień.2005
na płycie CD dołączonej do numeru, w katalogu
Warsztat_formularze.
FORMULARZE?
CMYK
WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML/PHP
oraz nazwisko. Po wprowadzeniu do formularza danych Aleksander larza) i przekaże jej zapytanie HTTP. Maszyna PHP przetworzy otrzy-
Macedoński otrzymamy zakodowany napis: mane zapytanie, uruchomi skrypt i przeSle do skryptu dane otrzymane
imie=Aleksander&nazwisko=Macedo%F1ski od serwera Apache w postaci wygodnych tablic asocjacyjnych.
Litera ń została zamieniona na kod szesnastkowy %F1. Pierwszy Dalsze rozważania dotyczą wyłącznie języka PHP.
krok interakcji użytkownika z aplikacją internetową polega na wpro- Tablice $_GET, $_POST oraz $_REQUEST zawierające przetwo-
wadzeniu danych do formularza. Następnie, po naciSnięciu przycisku rzone dane pochodzące z formularza i dostępne wewnątrz skryptu PHP
WySlij, przeglądarka koduje wprowadzone przez użytkownika dane, po są zmiennymi superglobalnymi. Oznacza to, że są one widoczne we-
czym wysyła odpowiednie zapytanie. wnątrz wszystkich funkcji i metod bez koniecznoSci stosowania słowa
kluczowego global. Tablica $_GET zawiera dane przekazane do skryptu
Przesyłanie danych pochodzących metodą GET. Tablica $_POST zawiera dane przekazane do skryptu me-
z formularza protokołem HTTP todą POST. Natomiast tablica $_REQUEST zawiera dane pochodzące
Wszystkie transakcje WWW a zatem także wysyłanie zawartoSci z ciasteczek, sesji oraz przekazane metodami POST lub GET.
formularza są realizowane przy użyciu protokołu HTTP. Protokół
Dane pochodzące z formularzy przekazywanych metodą GET są dostępne
ten definiuje cztery metody przekazywania danych. Metodami tymi są
w skrypcie PHP w tablicy $_GET. Jeśli formularz jest przekazany metodą
POST, GET HEAD oraz PUT. W stosunku do formularzy zastosowa-
POST, to należy użyć tablicy $_POST.
nie znajdują dwie spoSród nich: GET oraz POST.
W metodzie GET dane są dołączone do adresu URL i przyjmują postać:
http://gdzies.w.sieci/kat/strona.php?imie=Jan& Wszystkie trzy wymienione tablice są tablicami asocjacyjnymi.
nazwisko=Nowak&plec=M&wiek=35 Indeksem w powyższych tablicach może być napis. Jakiego indek-
Natomiast w metodzie POST dane z formularza są dołączone na su powinniSmy użyć w celu odczytania imienia i nazwiska pocho-
końcu zapytania HTTP (za wszystkimi nagłówkami). dzących z formularza widocznego na listingu 1? Napis wprowadzo-
Metodę przekazywania danych formularza ustalamy atrybutem ny w polu zatytułowanym Imię jest dostępny pod indeksem imie,
method elementu FORM. Ponieważ wartoScią domySlną jest GET, za- zaS nazwisko pod indeksem nazwisko. Indeksy te są wartoSciami
tem formularz: atrybutu name kontrolek INPUT. JeSli użyto metody $_GET, wów-
$_GET[ imie ]
jest równoważny formularzowi: $_GET[ nazwisko ]
$_POST[ nazwisko ]
Formularz przekazywany metodą POST wygląda następująco:
Indeksami w tablicach $_POST i $_GET są nazwy kontrolek formularza.
wówczas tablice $_POST I $_GET posiadają element o indeksie owoc.
W zależnoSci od użytej metody, dane pochodzące z formularza od-
Po wprowadzeniu przez użytkownika w polu INPUT napisu gruszka,
bieramy na różne sposoby wewnątrz skryptu przetwarzającego formu-
otrzymamy:
larz. Wpływ metody na sposób przekazywania danych formularza mo-
$_GET[ owoc ] == gruszka
żemy przeanalizować stosując wtyczkę programu Internet Explorer
lub
o nazwie ieHTTPHeaders. Oprogramowanie to znajdziemy pod adresem
$_POST[ owoc ] == gruszka
http://www.blunck.info/iehttpheaders.html (i na płycie CD dołączonej do numeru).
(w zależności od użytej metody).
Rys. 2. Okno Internet
Zatem wybór metody przekazywania danych z formularza do
Explorera po uwidocznieniu
skryptu PHP wpływa na wybór tablicy superglobalnej, z której skrypt
wtyczki ieHTTPHeaders
będzie pobierał dane. JeSli stosujemy metodę POST, to należy korzy-
Po zainstalowaniu wtyczki stać z tablicy $_POST. Korzystając z metody GET dane pobieramy
należy z menu głównego In- z tablicy $_GET.
ternet Explorera wybrać opcję W starszych wersjach PHP rolę tablic $_GET oraz $_POST
Widok | Pasek Exploratora | odgrywały tablice $HTTP_GET_VARS i $HTTP_POST_VARS
ieHTTPHeaders v 1.6. Wów- (nie były to zmienne superglobalne; ich użycie wymagało stosowa-
czas w oknie przedstawionym nia słowa global, przez co były nieco mniej wygodne). Istnieje
na rysunku 2 ujrzymy szcze- także możliwoSć przekazywania danych z formularzy w postaci
góły dotyczące każdego wy- zmiennych globalnych. O dostępnoSci zmiennych globalnych
syłanego zapytania HTTP. decyduje dyrektywa konfiguracyjna register_globals. Zmienne
globalne są powszechnie uznawane za niebezpieczne i odradza się
Odbieranie danych pochodzących z formularza ich stosowanie. Współczesne wersje PHP posiadają w pliku konfi-
w skrypcie PHP guracyjnym wpis:
Zapytanie HTTP zawierające informacje wprowadzone w formularzu register_globals = Off
pokonało całą drogę i dotarło do serwera. Jest ono przekazane przez wyłączający dostępnoSć zmiennych globalnych. Ze względów bezpie-
oprogramowanie stosu protokołów TCP/IP do procesu serwera Apa- czeństwa zmiennych globalnych nie należy stosować!
che. Serwer Apache na podstawie rozszerzenia skryptu uruchomi ma- Dodajmy jeszcze, że w związku z pojawieniem się ataków typu
szynę PHP (lub interpretator Perla czy ASP zależy to od konfiguracji XSS (ang. Cross-Site Scripting) również metoda GET jest uznawana
serwera oraz rozszerzenia skryptu podanego jako atrybut action formu- za niebezpieczną.
INTERNET.kwiecień.2005 103
CMYK
NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML/PHP
Pierwszy z przykładów składa się z dwóch plików: formularz.html
Do przekazywania i przetwarzania danych pochodzących z formularza na-
oraz jakis-skrypt.php. Plik formularz.html zawiera formularz z listingu
leży stosować wyłącznie metodę POST oraz tablicę $_POST. Zarówno
1, zaS skrypt jakis-skrypt.php zawiera wywołanie funkcji phpinfo().
zmienne globalne, jak i metoda GET stwarzają pewne ułatwienia, które
Drugim sposobem sprawdzenia danych przekazanych do skryptu jest
w połączeniu z niefrasobliwością programisty piszącego skrypt mogą
użycie jednej z funkcji var_dump(), var_export() oraz print_r(). Kod:
być wykorzystane przez niepowołane osoby do uzyskania nieautoryzowa-
nego dostępu lub zakłócenia pracy serwisu.
var_dump($_GET);
?>
Przetwarzanie danych przez maszynę PHP spowoduje wySwietlenie w oknie przeglądarki następujących informacji:
Maszyna PHP po odebraniu od serwera Apache zapytania HTTP wy- array(2) {
konuje pewne przekształcenia. DostępnoScią danych w skrypcie oraz [ imie ]=>
wykonanymi przekształceniami sterują dyrektywy konfiguracyjne za- string(10) Aleksander
pisane w pliku php.ini. W kontekScie formularzy należy zwrócić uwa- [ nazwisko ]=>
gę na następujące wpisy pliku konfiguracyjnego: string(10) Macedoński
register_globals = Off }
magic_quotes_gpc = On Możemy również, stosując funkcję array_keys(), odczytać wszyst-
variables_order = GPCS kie indeksy tablicy $_GET, po czym w pętli foreach wydrukować ko-
post_max_size = 8M lejno wszystkie elementy tablicy:
Dyrektywa register_globals wyłącza dostępnoSć zmiennych $keys = array_keys($_GET);
globalnych. PodkreSlmy jeszcze raz, że ze względów bezpieczeństwa foreach ($keys as $key) {
nie należy jej włączać (tj. powinna ona mieć wartoSć Off). Dyrektywa echo \$_GET[ $key ] == {$_GET[$key]}
;
magic_quotes_gpc powoduje automatyczne wykonanie operacji }
addslashes() na danych odebranych metodami GET, POST oraz po- Drugi przykład, podobnie jak i pierwszy składa się z dwóch plików.
chodzących z ciasteczek. KolejnoScią tworzenia tablic $_GET, Plik formularz.html jest identyczny jak w pierwszym przykładzie.
$_POST, $_COOKIE, $_SERVER steruje dyrektywa variables_order. Natomiast skrypt jakis-skrypt.php z przykładu drugiego wywołuje
Jej wartoSć GPCS mówi, że najpierw jest tworzona tablica $_GET, na- funkcję var_dump() oraz przetwarza w tablicę $_GET pętlą foreach.
stępnie $_POST itd. Wreszcie wpis post_max_size ogranicza rozmiar W analogiczny sposób możemy oczywiScie użyć powyższych roz-
danych, które mogą być przekazane metodą POST. wiązań do wySwietlenia zawartoSci tablicy $_POST:
Możemy również zmienić listę znaków traktowanych jako separa- tory zmiennych w odebranym zapytaniu. DomySlnie separatorem jest var_dump($_POST);
znak &. Ustalając: ?>
arg_separator.input = ;& Dodajmy jeszcze, że oprócz tablic $_GET, $_POST, $_REQUEST
dodajemy do listy separatorów znak ;. Jest to raczej ciekawostka nie w skrypcie jest dostępna również tablica $_SERVER, która zawiera
znajdująca praktycznych zastosowań. szczegółowe informacje na temat zapytania HTTP. Zmienne:
Dodajmy, że serwer Apache, przed przekazaniem zapytania do ma- $_SERVER[ REQUEST_METHOD ]
szyny PHP, również może wykonać pewne transformacje danych. Mo- $_SERVER[ REQUEST_URI ]
gą one m.in. polegać na przekształceniu adresów URL przez moduł zawierają informacje na temat metody zapytania HTTP oraz żądanego
mod_rewrite. Więcej szczegółów na ten temat znajdziemy w artykule dokumentu.
Pawła Grzesiaka pt. Przyjazne adresy URL (MI 10/2004).
Nagłówki transakcji HTTP
Jakie dane zostały przesłane do skryptu? Droga danych wprowadzanych do formularza:
Wszystkie informacje na temat danych pochodzących z formularza i do-
stępnych wewnątrz skryptu zwraca funkcja phpinfo(). JeSli w skrypcie ja- użytkownik wypełnia formularz, po czym naciska przycisk WySlij,
kis-skrypt.php przetwarzającym formularz z listingu 1 umieScimy kod: przeglądarka koduje informacje zawarte w formularzu, a następ-
phpinfo(); oprogramowanie działające na serwerze odbiera zapytanie HTTP,
?> zapytanie jest przekazywane przez kolejne warstwy oprogramo-
wówczas funkcja phpinfo() wySwietli listę wszystkich zmiennych wania: stos protokołów TCP/IP przekazuje zapytanie do procesu
przekazanych z formularza do skryptu. Na rys. 3 przedstawiono frag- Apache, Apache uruchamia maszynę PHP i przekazuje jej zapy-
ment wyniku funkcji phpinfo() zawierający elementy tablic $_GET tanie, zaS maszyna PHP przetwarza zapytanie, uruchamia skrypt
oraz $_REQUEST. i przekazuje do skryptu tablice $_GET, $_POST itd.
skrypt przetwarza dane, produkuje wynikowy kod HTML,
kod zostaje wysłany w odpowiedzi HTTP do przeglądarki.
Zajrzyjmy teraz w głąb zapytania i odpowiedzi HTTP. Do analizy
samej transakcji HTTP możemy użyć wspomnianej wtyczki ieHTT-
PHeaders przeglądarki Internet Explorer oraz dwóch funkcji PHP:
apache_request_headers() i apache_response_headers().
Trzeci z przykładów zawiera dwa formularze, takie jak formularz
z listingu 1, różniące się jedynie wartoScią atrybutu method (czyli
metodą przekazywania danych). Skrypt jakis-skrypt.php wywołuje
funkcje apache_request_headers() i apache_response_headers()
Rys. 3. Informacje wySwietlane przez funkcję phpinfo()
oraz wykorzystuje zmienne predefiniowane REQUEST_METHOD,
104 INTERNET.kwiecień.2005
CMYK
WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML/PHP
REQUEST_URI i SERVER_PROTOCOL (zawarte w tablicy Dwie kontrolki formularza przeznaczone na liczby nazywają się
$_SERVER jako $_SERVER[ REQUEST_METHOD ], liczba1 oraz liczba2 (spójrzmy na atrybuty name kontrolek
$_SERVER[ REQUEST_URI ] i $_SERVER[ SERVER_PROTO- INPUT). Liczby wprowadzone przez użytkownika w formularzu
COL ]) i wySwietla szczegółowe informacje na temat odebranego będą w skrypcie dostępne jako $_POST[ liczba1 ] oraz
zapytania HTTP i wysłanej odpowiedzi. $_POST[ liczba1 ].
Natomiast po zainstalowaniu wtyczki ieHTTPHeaders możemy Funkcja isset() zwraca informację logiczną o tym, czy zmienna
całą transakcję Sledzić na bieżąco w oknie przeglądarki. Po odwie- podana jako parametr jest dostępna. Innymi słowy: czy wizyta na
dzeniu formularza z pliku get.html, wpisaniu danych i naciSnięciu stronie odbyła się za poSrednictwem formularza, czy użytkownik
przycisku WySlij w oknie wtyczki ieHTTPHeaders ujrzymy szczegó- bezpoSrednio odwiedził plik kalkulator-skrypt.php. JeSli użyt-
ły zapytania: kownik pozostawił puste pola i nacisnął przycisk WySlij, wów-
GET /1/jakis-skrypt.php?imie=Aleksander& czas zmienne tablicy $_POST są okreSlone, lecz puste (tzn. funk-
nazwisko=Macedo%F1ski HTTP/1.1 cja isset($_POST[ liczba1 ]) zwraca logiczną prawdę oraz zacho-
Accept: image/gif, image/x-xbitmap, image/jpeg, dzi równoSć $_POST[ liczba1 ] === ).
..., */*
Referer: http://localhost/1/formularz.html Ponieważ użytkownik może wprowadzić w formularzu dowolne da-
Accept-Language: pl ne, niekoniecznie liczby, ale także napisy czy jak już wspomnieliSmy
Accept-Encoding: gzip, deflate pozostawić pola formularza niewypełnione, zatem stosując funkcję
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; is_numeric() sprawdzamy poprawnoSć danych z tablicy $_POST.
Windows NT 5.1)
Host: localhost LISTING 2: FORMULARZ KALKULATORA
Connection: Keep-Alive
jakis-skrypt.php?imie=Aleksander&nazwisko=Macedo%F1ski
adres wySwietlany przez przeglądarkę, zawiera informacje LISTING 3: SKRYPT PRZETWARZAJĄCY FORMULARZ
o przekazanych zmiennych; KALKULATORA
stronę możemy odSwieżyć przyciskiem OdSwież. w przypadku metody POST: if (isset($_POST[ liczba1 ]) && isset($_POST
dane zapytania są dołączone za nagłówkami; [ liczba2 ])) {
dane nie są widoczne w polu adres przeglądarki; if (is_numeric($_POST[ liczba1 ]) &&
odSwieżanie strony powoduje wySwietlenie komunikatu. is_numeric($_POST[ liczba2 ])) {
echo W formularzu podano liczby {$_POST
Pamiętając o tym, by ze względów bezpieczeństwa stosować [ liczba1 ]} oraz {$_POST[ liczba2 ]}.
;
wyłącznie metodę POST, przejdxmy do omówienia przykładowego echo Wyniki działań:
;
formularza i przetwarzającego go skryptu. echo {$_POST[ liczba1 ]} + {$_POST[ liczba2 ]} = ;
echo $_POST[ liczba1 ] + $_POST[ liczba2 ];
Przykład formularza kalkulator echo
;
Przygotujmy kalkulator, który dodaje, odejmuje oraz mnoży dwie licz- } else {
by wprowadzone przez użytkownika. Formularz kalkulatora zawiera echo Błędne dane! Jedna lub obie liczby są
dwie kontrolki INPUT umożliwiające wprowadzanie liczb oraz przy- niepoprawne!
;
cisk do wysyłania formularza. }
Pierwsze rozwiązanie składa się z dwóch plików. Formularz jest } else {
zapisany w pliku kalkulator-formularz.html, zaS skrypt przetwarza- echo Brak danych! Jedna lub obie liczby nie
jący w pliku kalkulator-skrypt.php. Listingi 2 oraz 3 przedstawiają zostały podane!
;
oba pliki. Uwagę należy zwrócić na następujące zagadnienia: }
?>
WartoScią atrybutu action jest kalkulator-skrypt.php, więc formu- W celu ułatwienia powrotu po wykonaniu obliczeń do strony za-
larz jest przetwarzany przez skrypt kalkulator-skrypt.php. wierającej formularz dodajmy poniżej skryptu PHP wykonującego ob-
Formularz jest przekazywany metodą POST, zatem danych z for- liczenia hiperłącze:
mularza będziemy szukali w tablicy $_POST.
PowrótINTERNET.kwiecień.2005 105
CMYK
NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML/PHP
Umieszczanie formularza i skryptu w jednym pliku LISTING 5: FORMULARZ DO WYSZUKIWANIA W GOOGLE
Przedstawiony kalkulator możemy wykonać zapisując w jednym pliku
let jest przedstawiony na listingu 4. W miejscu wielokropków Formularze korzystające z serwisów walidujących W3C zo-
należy umieScić bez żadnych modyfikacji kod z listingów 2 stały przedstawione na listingach 6 oraz 7. Walidator HTML jest
oraz 3. dostępny pod adresem http://validator.w3.org/check, zaS walidator CSS
http://jigsaw.w3.org/css-validator/validator. Oba formularze są przekazy-
LISTING 4: KALKULATOR: FORMULARZ I SKRYPT SĄ ZAPISANE wane metodą GET, zaS adres strony do sprawdzenia jest zawarty
W JEDNYM PLIKU KALKULATOR.PHP w jedynym polu tekstowym o nazwie uri. Gdyby serwisy walida-
cyjne były napisane w PHP (są napisane w Perlu), wówczas do
LISTING 6: FORMULARZ DO WALIDACJI KODU HTML
if (isset($_POST[ liczba1 ]) && isset($_POST
możemy dowolnie zmieniać nazwę pliku, bez koniecznoSci modyfika- LISTING 7: FORMULARZ DO WALIDACJI KODU CSS
cji atrybutu action. SERWISEM PROWADZONYM PRZEZ W3C
jest adres URL. Wynika z tego, że formularz i skrypt przetwarza-
jący mogą znajdować się w innych folderach, a nawet na innych Podsumowanie
serwerach. Po drugie jako wartoSć atrybutu action możemy podać Wprawdzie formularze zawarte na witrynach internetowych
adres URL skryptu, napisanego przez kogoS innego. przygotowujemy w języku HTML, jednak umiejętnoSć faktycz-
Jako przykład wykonajmy formularze umożliwiające wyszuki- nego ich wykorzystania daleko wykracza poza znajomoSć znacz-
wanie informacji w Google oraz walidację kodu HTML i CSS ników. Poznawszy wzajemną relację pomiędzy formularzem
skryptami znajdującym się na witrynie W3C. i przetwarzającym go skryptem, sposób kodowania oraz przesy-
Formularz umożliwiający wyszukiwanie informacji w Go- łania informacji wprowadzonych w formularzu oraz metodę udo-
ogle został przedstawiony na listingu 5. Skrypt o adresie stępniania danych pochodzących z formularza przez maszynę
http://www.google.com/search wyszukuje informacje w bazie danych. PHP wewnątrz skryptu zyskujemy nieco szersze spojrzenie na
Jedyną kontrolką formularza, która umożliwia wprowadzanie zagadnienia dotyczące komunikacji użytkownika z aplikacją
danych, jest pole INPUT o nazwie q. Zatem, mówiąc w języku internetową. n
PHP, powiedzielibySmy, że tekst wpisany w formularzu zostaje
przekazany do wyszukiwarki Google w zmiennej $_GET[ q ]
Ćwiczenia przedstawione w artykule są dostępne na stronie domowej
(formularz nie zawiera atrybutu method, zatem stosowana jest
autora pod adresem http://www.gajdaw.pl
metoda domySlna GET).
106 INTERNET.kwiecień.2005
CMYK
WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
WAP
STATYSTYKI PRZEZ
WAP
czyli jak połączyć PHP z językiem WML
Zadaniem tego artykułu jest zaprezentowanie przydatnoSci protokołu WAP oraz połączenie
języka WML z dynamicznym PHP. Zdobyta tutaj wiedza posłuży do stworzenia systemu
pobierającego statystyki z dowolnego serwisu internetowego.
Tomasz Gębarowski
Apache oraz język WML
Apache jest najpopularniejszym serwerem stron internetowych.
DomySlnie został zaprojektowany do obsługi języka HTML oraz
wszystkich jego rozszerzeń. Dlatego też ustawienia Apache muszą być
zmodyfikowane, aby móc w pełni korzystać z języka WML.
JeSli mamy uprawnienia administratora, wystarczy do pliku
httpd.conf dodać poniższy fragment kodu:
# MIME Types for WAP
# For PHP 4.x, use this:
AddType application/x-httpd-php .wml
# For PHP 3.x, use this:
AddType application/x-httpd-php3 .wml
# For normal WML pages.
AddType text/vnd.wap.wml .wml
# For WML embedded graphics.
AddType image/vnd.wap.wbmp .wbmp
Schemat komunikacji pomiędzy telefonem komórkowym,
# End MIME Types for WAP
operatorem telefonii komórkowej oraz serwerem WWW
JeSli nie posiadamy takich uprawnień, musimy utworzyć plik .htac-
cess w katalogu naszego projektu WML, a następnie zapisać do niego Sników. To, co widzimy na wySwietlaczu telefonu komórkowego,
zawartoSć ramki. W każdym katalogu, który ma być widziany przez to pojedyncza karta.
przeglądarkę WAP, musi znajdować się niezależny plik .htaccess. W odróżnieniu od języka HTML, w jednym dokumencie może znajdo-
wać się kilka kart. W czasie odczytywania strony WAP przez telefon ko-
Specyfikacja języka WML mórkowy wszystkie karty znajdujące się na stronie zostają pobrane. Nawi-
Tworzenie stron w języku WML nie jest zajęciem trudnym, przypomi- gacja pomiędzy poszczególnymi kartami odbywa się wyłącznie za poSred-
na budowę serwisów za pomocą języka HTML. Istnieje jednak spora nictwem telefonu, bez potrzeby połączenia z Internetem. Teoretycznie więc
różnica polegająca na tym, że składnia WML jest SciSle zdefiniowana w jednym pliku można zmieScić całą witrynę WAP. Rozwiązanie to może
i bazuje na standardzie XML 1.0. Podobnie jak w języku HTML, stro- okazać się błędne w przypadku sporych serwisów, gdyż pamięć telefonu ko-
ny napisane w WML posiadają odrębne rozszerzenie .wml . mórkowego może nie pomieScić tak dużej iloSci danych. Dlatego też lepiej
Formatowanie strony WAP odbywa się za pomocą odpowiednich dzielić stronę na kilka plików połączonych za pomocą odnoSników.
tagów. Dotyczą one przede wszystkim rozmieszczenia tekstu, pól for- Standardowa struktura strony WML. Wszystkie istotne fragmenty
mularzy oraz odnoSników. Zastosowanie innych znaczników, które kodu zostały skomentowane.
mogą spowolnić komunikację, jest ograniczone. Z tego też powodu
stosowanie dużych obrazków oraz tabel powinno być omijane. LISTING 1. (STRUKTURA.TXT)
Ponieważ język WML jest tylko aplikacją standardu XML, skład- #1. Fragment ten odpowiedzialny jest za przesłanie
nia znaczników jest SciSle zdefiniowana. Rozróżniana jest wielkoSć odpowiedniego nagłówka do przeglądarki WAP. Strona
znaków (np.
oraz to dwa różne tagi), a wszystkie została zdefiniowana jako XML. Sekcja DOCTYPE
znaczniki muszą być poprawnie zamknięte. ustala typ dokumentu na WML. Od tego momentu
Struktura strony WAP oparta jest o talie (ang. Decks) oraz karty wszystkie umieszczone dane muszą być zgodne z tym
(ang. Cards). Talia to zbiór kart połączonych ze sobą za pomocą odno- standardem.
INTERNET.kwiecień.2005 107
CMYK
NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
WAP
http://www.wapforum.org/DTD/wml_1.1.xml >
#2. Każdy dokument WML rozpoczyna się od znacznika
. Dopiero poniżej tego znacznika można
definiować karty.
#3. Definicja pierwszej karty za pomocą znaczników
. Przekazane parametry informują
o identyfikatorze (id) oraz tytule karty (title).
Wewnątrz znaczników umieszczono standardowy
paragraf , znany także z języka HTML.
Tutaj jest wlasciwa tresc karty 1
#4. Definicja drugiej karty w sposób analogiczny
do karty pierwszej.
Tutaj jest wlasciwa tresc karty 1
#5. Zakończenie dokumentu WML.
WiększoSć stron WAP, które zostaną stworzone w tym artykule,
będzie opierać się na powyższym schemacie. Podobnie jak w języku
HTML jest on powszechnie stosowany przez twórców stron WAP.
W tej częSci rozdziału zaprezentowane zostaną znaczniki WML, które
Menu wyboru skryptu Pobieranie wyników statystyk
pozwalają dostosować oraz uatrakcyjnić wygląd strony.
Statystyki WAP zakończone sukcesem
Formatowanie tekstu Zadania prev oraz refresh są odpowiedzialne za powrót do poprzed-
Podobnie jak HTML, język WML dysponuje pokaxnym zbiorem niej strony oraz odSwieżenie zmiennych przypisanych do karty. Metoda
znaczników odpowiedzialnych za formatowanie tekstu. WiększoSć stosowania znacznika zostanie omówiona w listingu 2.
z nich znana jest dobrze wszystkim piszącym tradycyjne strony inter-
netowe. Do poznanego w poprzednim przykładzie znacznika mo- Obrazki
żemy dołączyć także inne: Strona WAP może zawierać proste obrazki i grafiki. Muszą one jednak
. Ich działanie jest oczywiste, a przykładowe zastosowanie zostać wczeSniej przygotowane i zapisane w formacie WBMP. Inny
znaczników można znalexć w kolejnym przykładzie (listing 2). rodzaj grafiki nie jest obsługiwany. Wstawienie obrazka na stronę
sprowadza się do wykorzystania znacznika . Jako parametr
Tabelki src należy podać adres pliku graficznego. Opcjonalnie można użyć
Projektując jakiekolwiek tabelki należy zastanowić się czy ich wyko- także alt , odpowiedzialnego za tekst alternatywny, który pojawi się
rzystanie będzie słuszne i niezależne od platformy sprzętowej. Różno- w przypadku, gdy obrazek nie zostanie poprawnie wySwietlony.
rodnoSć telefonów dostępnych na rynku może spowodować, że strona Po tym wstępie teoretycznym przejdxmy do stworzenia prostej
zostanie wySwietlona w inny sposób niż zamierzał autor. W przypadku strony WAP wykorzystującej poznane właSciwoSci języka WML.
tabelek jest to bardzo prawdopodobne. Wystarczy, że rozmiar ekranu Strona będzie się składać z trzech kart. Na pierwszej umieszczone zo-
telefonu będzie mniejszy od wczeSniej założonego. stanie menu z możliwoScią wyboru jednej z dwóch kart. Jedna z nich
Podobnie jak w języku HTML tabelkę definiujemy znacznikiem wySwietli prostą tabelkę, druga pokaże metody formatowania tekstu.