ZSP Świecie

Zajęcia specjalistyczne

– aplikacje internetowe

Prowadzący: Łukasz Jankowski

Formularze w HTML

W naszym życiu wypełniamy dziesiątki, jak nie tysiące formularzy praktycznie na każdym kroku.

Wynika to z faktu, że jest to najprostsza forma zdobywania ściśle określonych informacji. HTML

posiada zestaw znaczników odpowiedzialnych za generowanie elektronicznych formularzy. Formularz

elektroniczny jest używany w bardzo wielu przypadkach. Za jego pomocą zdobywamy informacje o

odwiedzających stronę, tworzymy ankiety, książki gości, a nawet zgłaszamy zapytanie do

internetowych serwisów katalogujących czy dokonujemy zakupów w sieciowych centrach

handlowych.

Ramy formularzy na stronie definiuje znacznik <form> </form> Zdążyliśmy poznać już budowę

znaczników HTML, więc możemy się spodziewać tego, że <form> posiada szereg atrybutów-

oczywiście się nie pomylimy. Pierwszym atrybutem znacznika jest action=" ", który określa rodzaj

akcji, jaka ma zostać wykonana po naciśnięciu przycisku OK. Jako wartość action deklarujemy

odpowiedni skrypt bądź polecenie, które zostanie wykonane po zatwierdzeniu formularza. Dalej

mamy atrybut method=" ", gdzie określamy metodę, która zostanie użyta do wykonania naszego

formularza. Do wyboru mamy dwie metody POST i GET. Pierwsza metoda post służy do zgłaszania

długich żądań do serwera natomiast GET zgłasza krótkie żądania. Jest to dość ogólnikowe wyja-

śnienie, ale uznałem, że zupełnie wystarczy do naszych potrzeb. Jeśli zajmiecie się pisaniem skryptów,

wtedy będziecie musieli poszerzyć ten zakres materiału.

Pora na przykład definicji ram formularza:

<FORM ACTION="mailto:[e-mail]" METH0D="P0ST"> </FORM>

Tak ustawiony formularz wyśle pod adres e-mail zawartość wszystkich pól, jakie wstawimy w dalszej

części.

Formularz elektroniczny, jak jego papierowy odpowiednik, składa się z odpowiednich pól służących

do różnych celów.

Pierwsza grupa pól formularza to INPUT - czyli formularze pozwalające wprowadzić jakieś dane. Oto

przykład definicji:

<INPUT TYPE="typ" NAME="nazwa" VALUE="wartość" SIZE=n MAXLENGTH=n>

Przyjrzyjmy się bliżej poszczególnym atrybutom znacznika <input>. type=" " określa rodzaj pola

formularza. Do wyboru mamy następujące typy pól:

Kolejny atrybut name="" określa nazwę dla danego pola. Pole jest dość przydatne przeanalizowaniu

przesłanych danych bądź przy konfiguracji skryptów CGI.

Value="" wstawia w dane pole zadeklarowaną wartość. Value można użyć do opisania pól formularza

bądź zadeklarowania jakiejś domyślnej wartości dla danego pola.

Size=n służy do określenia ilości znaków mieszczących się w polu tekstowym formularza. Podanie

dłuższego ciągu znaków spowoduje przewinięcie jego zawartości, a zawartość będzie pokazywana

szczątkowo.

MAXLENGTH=n ogranicza ilość znaków, jakie można wpisać do zwykłego pola tekstowego, dla

którego została zadeklarowana.

Kolejną grupą pól formularza jest select. Pole tego typu pozwala nam na wybranie jednej lub kilku

pozycji z listy. Konstrukcja takiego pola wygląda następująco:

pierw sza pozycja

Dla select, podobnie jak przy polach typu input, możemy określić jego nazwę - NAME="". Atrybut

<option> definiuje jedną pozycję z listy i nie wymaga zamknięcia. Taka definicja pola typu select

pozwala na wybranie tylko jednej pozycji z naszej listy. Aby dać możliwość wyboru kilku pozycji, naszą

definicję musimy uzupełnić o multiple:

druga pozycja

Definiując pole typu selegt, możemy sami zaproponować jakąś pozycję listy, a służy do tego atrybut

<selected> umieszczony bezpośrednio po <option>:

pierw sza pozycja

Taki przykład proponuje drugą pozycję listy jako domyślną.

Ostatnim atrybutem, używanym przy polach typu select, jest SIZE=n. Atrybut określa, ile pozycji z listy

ma być widocznych na ekranie. Podanie zmiennej n jako większej lub równej liczbie pozycji

zdefiniowanych w ramach pola pozwoli nam wyeliminować pasek przewijania pojawiający się z boku

pola.

Twórcy języka HTML do naszej dyspozycji oddali jeszcze jeden rodzaj pola, a mianowicie textarea.

Pole to służy do wprowadzania większej ilości danych. Wpis wygląda następująco:

<TEXTAREA NAME="Opinie" ROWS=10 COLS=50>Napisz coś do mnie...</TEXTAREA>

Umieszczając tekst pomiędzy znacznikami <textarea>, możemy zasugerować coś potencjalnemu

użytkownikowi formularza. Rozwiązanie to jest podobne w działaniu do atrybutu value="" w

poprzednich znacznikach typu input. Poprzez dodanie atrybutów ROWS=n i C0LS=n możemy

regulować wielkość naszego pola.

Znając działanie i wygląd wszystkich pól formularzy możemy zająć się kolejną kwestią, a mianowicie

przygotowaniem i sprawdzeniem działania formularza.

Po testach widać, że rozwiązanie z wysłaniem formularza, bezpośrednio na nasz adres e-mail nie jest

rozwiązaniem dobrym. Dane trafiają do nas w mało zrozumiałej formie, a ich przetworzenie wymaga

odpowiednich zewnętrznych programów. Dlatego do obsługi formularzy stosuje się odpowiednie

skrypty napisane w języku CGI bądź PHP, które potrafią przetworzyć zawartość pól i przesłać na nasz

adres w formie czytelnego e-maila. Konfiguracja takich skryptów ogranicza się do umieszczenia kilku

dodatkowych pól typu hidden w naszym formularzu. Pola zawierają adres e-mail odbiorcy, definiują

strony odpowiedzi po wysłaniu formularzy, sprawdzają poprawność wpisanych pól itd.

Zadanie w PHP

Włączamy więc nasz edytor do pisania dokumentów tekstowych i tworzymy dwa nowe pliki o nazwie

sklep.html oraz zamowienie.php. Naszym zadaniem będzie napisanie aplikacji, która liczy

sumę zamówienia składanego w sklepie internetowym, liczy podatek VAT 22% od tej kwoty, a

następnie prezentuje na ekranie cenę netto i brutto zamówionych przedmiotów.

Ceny netto wszystkich produktów będą przechowywane w formie stałych o nazwie szablonowej

NAZWA_PRODUKTU. Zmienne $ile_nazwa_produktu będą przechowywać informacje odnośnie ilości

sztuk danego produktu, zamówionych przez klienta. Wysokość podatku VAT również będzie

przechowywana w stałej - P_VAT. Takie rozwiązanie jest bardzo wygodne w przypadku późniejszych

zmian podatku. Jeżeli zaistnieje potrzeba zmiany wartości wystarczy to zrobić raz przy deklaracji

stałej, a w całym dalszym kodzie wartość zostanie zmieniona. Zrobimy prosty interfejs, zawierający

formularz POST. Na podstawie wpisanych w nim danych zostanie obliczone zamówienie. W celach

instruktażowych kolejne etapy obliczeń są przypisywane do nowych zmiennych. Nie jest to

rozwiązanie optymalne, ale na pewno bardziej przejrzyste.

Przegląd rozwiązania

„sklep.html”

<html>

<head>

<title>Sklep odzieżowy</title>

</head>

<body>

<form action="zamowienie.php" method="post">

Liczba zamawianych koszulek: <input type="text"

name="koszulki" size=3 maxsize=3 />

Liczba zamawianych spodni: <input type="text"

name="spodnie" size=3 maxsize=3 />

Liczba zamawianych czapek: <input type="text"

name="czapki" size=3 maxsize=3 />

<input type="submit" value="złóż zamówienie" />

</body>

</html>

Listing pliku

zamowienie.php:

<?php

define("KOSZULKA", 14.99); // cena koszulki jako stała

define("SPODNIE", 45.99); // cena spodni

define("CZAPKA", 9.63); // cena czapki

define("P_VAT", 0.22); // wysokość podatku VAT

$ile_koszulki = $_POST['koszulki']; // przypisanie zmiennych formularza

$ile_spodnie = $_POST['spodnie'];

$ile_czapki = $_POST['czapki'];

$kwota_koszulki_netto = $ile_koszulki*KOSZULKA; // wartość netto zamówionych koszulek

$kwota_spodnie_netto = $ile_spodnie*SPODNIE; // wartość netto spodni

$kwota_czapki_netto = $ile_czapki*CZAPKA; // wartość netto czapek

$kwota_zamowienia_netto = $kwota_koszulki_netto + $kwota_spodnie_netto +

$kwota_czapki_netto; // cena netto całego zamówienia

$kwota_koszulki_brutto = $kwota_koszulki_netto + $kwota_koszulki_netto*P_VAT; // wartość

brutto koszulek

$kwota_spodnie_brutto = $kwota_spodnie_netto + $kwota_spodnie_netto*P_VAT; // wartość

brutto spodni

$kwota_czapki_brutto = $kwota_czapki_netto + $kwota_czapki_netto*P_VAT; // wartość brutto

czapek

$kwota_zamowienia_brutto = $kwota_koszulki_brutto + $kwota_spodnie_brutto +

$kwota_czapki_brutto; // cena zamówienia brutto

?>

<html>

<head>

<title>Obsługa zamówienia</title>

</head>

<body>

<?php

echo "Cena netto zamówionych koszulek: ".$kwota_koszulki_netto."<br/>";

echo "Cena netto zamówionych spodni: ".$kwota_spodnie_netto."<br/>";

echo "Cena netto zamówionych czapek: ".$kwota_czapki_netto."<br/>";

echo "Wartość netto całego zamówienia: ".$kwota_zamowienia_netto."<br/>";

echo "Cena brutto zamówionych koszulek: ".$kwota_koszulki_brutto."<br/>";

echo "Cena brutto zamówionych spodni: ".$kwota_spodnie_brutto."<br/>";

echo "Cena brutto zamówionych czapek: ".$kwota_czapki_brutto."<br/>";

echo "Wartość brutto całego zamówienia: ".$kwota_zamowienia_brutto."<br/>";

?>

</body>

</html>

Omówienie skryptu

Plik sklep.php jest odpowiedzialny za wyświetlenie formularza z możliwością wpisania liczby

zamawianych przedmiotów. Nic wielkiego się tutaj nie dzieje, po prostu zwykły HTML. Po wpisaniu i

zgłoszeniu formularza dane zostają przesłane do pliku zamowienie.php. Tutaj na wstępie definiujemy

stałe z cenami przedmiotów oraz wysokością podatku VAT. Później tworzymy zmienne z pól

formularza, przesłanych ze sklepu. Kwoty netto obliczamy po prostu mnożąc ilość zamówionych

przedmiotów przez cenę netto przechowywaną w stałej. Następnie w celu obliczenia całości

sumujemy trzy kwoty netto. Z cenami brutto robi się podobnie, z tym że należy dodać wartość

podatku, czyli 0,23*kwota.

To zakańcza naszą część obliczeniową aplikacji, teraz czas to wszystko wyświetlić. Funkcję echo

pokazałem już na drugiej lekcji, lecz wyświetlała ona sam tekst. Teraz oprócz tekstu wpisanego przez

nas dodatkowo jako argument podajemy zmienną. Jedną i drugą część tekstu musimy jednak

połączyć operatorem " . ", żeby interpreter poprawnie zrozumiał nasze intencje. Działa to w ten

sposób, że przeglądarka wyświetli najpierw to, co jest w cudzysłowiu, później wyświetli wartość

zmiennej, a następnie to, co jest w kolejnym cudzysłowiu.

Czym się różnią metody POST i GET przy wysyłaniu danych do skryptu ?

Metody wysyłania formularzy POST i GET znacznie różnią się od siebie. Najczęściej używaną

metodą przesyłania danych jest POST, z uwagi na większe możliwości i wyższy stopień

bezpieczeństwa.

POST

Gdy wysyłasz dane metodą POST do skryptu PHP, zostaną one umieszczone w tablicy $_POST,

która jest tablicą superglobalną, czyli można się do niej odwołać w każdym miejscu kodu bez

dodatkowych zabiegów. W wersjach PHP starszych. niż 4.1.0 tablica ta nosi nazwę

$HTTP_POST_VARS. Metoda POST nie narzuca ograniczenia ilości przesyłanych danych, dla tego jest z

powodzeniem stosowana w ogromnej większości formularzy na stronach WWW. Dodatkowym jej

atutem jest fakt, że podczas wysyłania danych użytkownik nie może podejrzeć ich treści, jak to ma

miejsce przy stosowaniu metody GET. Ta właściwość POST czyni ją najlepszym rozwiązaniem także

przy przesyłaniu danych autoryzacyjnych. Metoda ta służy także do uploadowania plików.

GET

Dane uzyskane z formularza przy użyciu GET umieszczane są w tablicy $_GET, lub

$HTTP_GET_VARS w wersjach PHP starszych, niż 4.1.0. Tablica ta także jest superglobalem. Metoda

GET różni się od POST tym, że posiada ograniczenie ilości przesyłanych danych. Są one umieszczane w

adresie docelowego dokumentu. Jeśli więc wyślesz zmienną $imie i $nazwisko do skryptu

"skrypt.php" używając GET, to zawartość pola formularza zostanie przesłana w adresie:

"skrypt.php?imie=wartosc&nazwisko=wartosc". Adres dokumentu został oddzielony od parametrów

znakiem zapytania, a same parametry oddziela od siebie znak ampersand ("&"). Widać wyraźnie, że

ilość danych przekazywanych metodą GET jest ograniczona maksymalną długością odnośnika do

skryptu.

Ćwiczenia:

•

dodaj do naszego sklepu dodatkowy artykuł - buty, nadaj mu cenę netto i zmodyfikuj

wyświetlanie, by pokazywane były cztery przedmioty,

•

stwórz formularz HTML, w którym wstawisz trzy pola tekstowe, które po wypełnieniu wyślesz

do pliku .php; wyświetl wpisane teksty w różnych kombinacjach używając funkcji echo i

operatora " . ",

•

zmodyfikuj plik zamowienie.php, dodaj formularz, w którym będzie można podać kwotę, jaką

się płaci za zamówione towary; kwota, wraz z wartością brutto w polu typu hidden, zostanie

wysłana do kasa.php, w którym zostanie obliczona reszta, jaką należy wydać od zapłaconej

kwoty; wskazówka: wykorzystaj funkcję echo w atrybucie value pola typu hidden, by

przekazać wartość brutto zakupionych produktów.

•

Zmodyfikuj plik zamówienie.php i kasa.php tak aby można było uzyskać: 5,10 i 15

procentowy rabat wpisując kod promocyjny w formularzu znajdującym się w pliku

zamówienie.php, zdefiniuj 3 kody promocyjne: rab1, rab2, rab3, dla których po wpisaniu

uzyska się odpowiednio: 5,10, i 15 procent zniżki od ceny całkowitej brutto