Podczas tworzenia nawet najprostszego formularza należy zaprojektować ogólny wygląd, wygenerować kod odpowiedni HTML oraz stworzyć skrypt obsługujący odpowiednie pola. Co jednak, jeśli chcemy zweryfikować poprawność wprowadzonych danych? I gdy oprócz tradycyjnych filtrów użyte zostaną złożone reguły? Artykuł ten omawia metodę tworzenia formularzy w oparciu o pakiet QuickForm.

Czym jest PEAR?

PHP Extension and Application Repository to projekt zajmujący się katalogowaniem i udostępnianiem gotowych rozwiązań komponentów oraz modułów przeznaczonych dla PHP. Zamysłem twórców było stworzenie systemu wzorowanego na CPAN (Comprehensive Perl Archive Network), który już od wielu lat cieszy się ogromną popularnością programistów.

Główne założenia projektu PEAR to:

• stworzenie biblioteki łatwego w użytkowaniu kodu PHP o wysokiej jakości oraz możliwości implementowania dodatkowych rozszerzeń,
• opracowanie dokumentacji oraz usprawnienie kodowania,
• pomoc w opracowaniu komponentów i skryptów o stałym API,
• stworzenie środowiska do pakietowania, dystrybucji i instalacji wszystkich komponentów,
• popularyzacja języka PHP.

Instalacja PEAR

Większość dystrybucji i najnowszych wersji PHP została domyślnie wyposażona w podstawową wersję pakietu PEAR. Niestety, nie gwarantuje ona dostępu do wszystkich modułów oraz bibliotek. Z pomocą przychodzi program PEAR Package Manager, umożliwiający pobieranie i instalacje dodatkowych komponentów. Posiadacze PHP w wersji poniżej 4.3.0 zmuszeni są do ręcznej instalacji programu. Pozostali mogą pominąć ten etap, gdyż wszystkie nowsze dystrybucje PHP są w ten program wyposażone.

Użytkownicy Linuksa lub UNIXa, mogą zainstalować PEAR Package Manager poprzez wykonanie następującego polecenia:

1

$ lynx -source http://go-pear.org/ | php

Wszystkie osoby pracujące pod systemem Windows powinny wejść za pomocą przeglądarki na stronę http://go-pear.org, a następnie ręcznie zapisać zawartość strony do pliku go-pear.php. Na koniec należy wykonać w konsoli systemowej następujące polecenie (znajdując się w katalogu z utworzonym plikiem):

1

php go-pear.php

Zaawansowane techniki tworzenia formularzy

Ten wstęp teoretyczny miał na celu zapoznanie z tematyką PEAR oraz wykorzystywania gotowych komponentów oraz bibliotek kodu PHP. W tym podrozdziale technika ta zostanie omówiona na przykładzie dwóch prostych skryptów obsługujących formularze. Podczas budowy aplikacji wykorzystamy rozszerzenie QuickForm, przeznaczone do generowania i zarządzania formularzami. Kody źródłowe opisanego tu pakietu oraz wszystkie potrzebne pliki bibliotek oraz modułów znajdują się na stronie projektu PEAR (http://pear.php.net).

Kod programu został podzielony na fragmenty ułatwiające szczegółową analizę.

W przypadku prostych formularzy stosowanie rozszerzenia QuickForm może wydawać się bezsensowne. Jednak gdy projekt składa się z dziesiątek lub nawet kilkunastu elementów, warto rozważyć zastosowanie opisanej tutaj metody.

Celem kolejnego ćwiczenia jest stworzenie formularza zawierającego kilka pól rożnego typu oraz zaprezentowanie sposobów weryfikacji danych. Pakiet QuickForm oferuje dwie metody sprawdzania poprawności informacji. Pierwsza z nich odbywa się po stronie użytkownika, czyli za pomocą odpowiednich skryptów JavaScript. Za drugą odpowiedzialny jest serwer oraz język PHP.

Zadaniem programisty jest wybór odpowiedniej metody oraz dobór filtrów oraz reguł sterujących procesem weryfikacji. W tym przypadku do każdego pola przypisany jest zespół właściwości, za pomocą których można sprawdzać poprawność danych. Z tego prostego powodu weryfikacja pola zawierającego adres email przebiega inaczej niż pola zawierającego login lub hasło użytkownika. W przypadku braku filtrów spełniających dane wymagania, istnieje możliwość stworzenia własnych za pomocą wyrażeń regularnych.

Kolejny skrypt opisany w artykule jest znakomitym przykładem połączenia rożnych typów pól oraz rożnego rodzaju danych wejściowych. Weryfikacja formularza bez użycia filtrów i reguł QuickForm byłaby nie lada wyzwaniem dla początkującego, a także średniozaawansowanego programisty. Dzięki QuickForm wszystko jest łatwe, przejrzyste, a także przyjemne.

#4

Formularz składa się z trzech pól. Pierwsze z nich to nagłówek poprawiający wygląd formularza i zwięźle opisujący przeznaczenie danego skryptu. Wartość null oznacza, że pole nie ma nazwy, gdyż nie jest ona do niczego potrzebna.

Drugi obiekt to zwykłe pole tekstowe, w które zostanie wpisana domyślna wartość zdefiniowana w poprzednim punkcie. Ponadto pole to ma szerokość 50 znaków i maksymalną długość tekstu, jaką można wpisać, ograniczoną do 255 znaków. Ostatni element to przycisk zatwierdzający wszystkie informacje i rozpoczynający proces weryfikacji i przetwarzania danych.

Analizując poniższy kod, można zauważyć, że wszystkie pola formularza są dodawane za pomocą funkcji {stala}addElement{/stala}, która odwołuje się do wcześniej utworzonego obiektu typu {stala}HTML_QuickForm{/stala}. Trudno jest jednoznacznie zdefiniować parametry, które należy przekazać do funkcji. Zależą one bowiem od typu tworzonego pola. Dzieje się tak dlatego, ze metoda {stala}addElement{/stala} rozpoznając typ tworzonego obiektu przekazuje go dalej do konstruktora danego elementu. Jak już wcześniej zauważyliśmy, większość niestandardowych wartości pól przekazywana jest za pomocą definicji tablicy.

1
2
3
4
5

<?php
$form->addElement(\'header\', null, \'QuickForm Szybki Kurs\');
$form->addElement(\'text\', \'name\', \'Podaj imie:\', array(\'size\' => 50, \'maxlength\' => 255));
$form->addElement(\'submit\', null, \'Wyslij\');
?>

#5

Pola zostały już dodane, teraz nadszedł czas na sprawdzenie poprawności danych i ustalenie filtrów. Najlepiej posłużyć się metodą {stala}applyFilter{/stala}, która jako parametry przyjmuje nazwę pola oraz funkcji filtrującej. Warto dodać, że reguły filtracji zostają zastosowane dopiero po zaakceptowaniu całego formularza poprzez przycisk submit. W poniższym przypadku zdefiniowano filtr dotyczący pola {stala}name{/stala}, który usunie wszystkie niepotrzebne spacje.

1
2
3

<?php
$form->applyFilter(\'name\', \'trim\');
?>

#6

Kolejny etap to ustalenie reguł dla pola {stala}name{/stala}, czyli wskazanie pól, które bezwzględnie muszą zostać wypełnione. Oznacza to, że QuickForm wyświetli komunikat o błędzie w przypadku niekompletnego formularza. Wszystkie reguły definiuje się za pomocą funkcji {stala}addRule{/stala}.

Oprócz standardowych parametrów, takich jak nazwa pola oraz rodzaj wyświetlanego komunikatu błędu, pojawiły się też inne. Najważniejszym z nich jest modyfikator {stala}client{/stala}, który ustala walidacje na poziomie jeżyka JavaScript. W praktyce oznacza to, że jeśli użytkownik nie wypełni pola, zostanie o tym poinformowany poprzez wyskakujące okienko pop-up. Proces ten odbywa się bez wykorzystania serwera na poziomie przeglądarki internetowej. Jeśli w skrypcie nie będzie modyfikatora {stala}client{/stala}, weryfikacja zostanie dokonana po stronie serwera, a użytkownik otrzyma komunikat w postaci sparsowanego dokumentu HTML.

Ostatnią wartością, na którą warto zwrócić uwagę jest {stala}required{/stala}, która informuje QuickForm o tym, że pole jest niezbędne do dalszego funkcjonowania skryptu i musi zostać koniecznie wypełnione. Podczas działania skryptu pola oznaczone jako {stala}required{/stala} mają gwiazdkę umieszczoną po lewej stronie oraz w przypisie informującym o konieczności wypełnienia danego obiektu.

1
2
3

<?php
$form->addRule(\'name\', \'Please enter your name\', \'required\', null, \'client\');
?>

#7

Wszystkie niezbędne elementy zostały już zdefiniowane. Teraz przyszedł czas na właściwe obsłużenie pól formularza. W tym etapie zadecydujemy, czy pola mają zostać wyświetlone czy przetworzone.

Metoda {stala}validate(){/stala} zwróci TRUE kiedy dane zostały wpisane, zatwierdzone poprzez przycisk submit, a wszystkie wcześniej zdefiniowane filtry i reguły są spełnione. W naszym przypadku oznacza to, że element {stala}name{/stala} nie jest pusty. Wykorzystując metodę {stala}vailidate(){/stala} w instrukcji warunkowej IF można stworzyć listę operacji przeprowadzonych po wysłaniu formularza. Warto zauważyć, że w przykładzie posłużono się metodą {stala}exportValue{/stala}, która zwraca wartość wpisaną do pola {stala}name{/stala}.

1
2
3
4
5
6

<?
if ($form->validate()) {
   echo \'<h1>Witaj, \' . $form->exportValue(\'name\') . \'!</h1>\';
   exit;
}
?>

#8

W przypadku gdy formularz nie jest gotowy (jest pusty lub pola zawierają błedy), metoda {stala}display(){/stala} rozpocznie jego wyświetlanie. Nie trzeba chyba dodawać, że ten fragment kodu jest wyświetlany zawsze na początku skryptu.

1
2
3

<?php
$form->display();
?>

Listing 2: form.php

#1

Każdy skrypt wykorzystujący pakiet QuickForm powinien zaczynać się podobnie. W tym przypadku powielono fragment kodu z poprzedniego skryptu. W ten sposób dodano nazwę katalogu zawierającego pakiet QuickForm do zmiennej {stala}include_path{/stala}. Dzięki temu rozwiązaniu podczas pracy skryptu można dowolnie dołączać pliki biblioteki bez podawania bezwzględnej ścieżki dostępu. Jest to spore ułatwienie i w pewien sposób zapewnia ono przenośność skryptu.

1
2
3

$ENV[\'ROOT\']= dirname($_SERVER[\'SCRIPT_FILENAME\']);
ini_set(\'include_path\', $ENV[\'ROOT\'] . \':\' . $ENV[\'ROOT\'] . \'/lib/\');
require_once \'HTML/QuickForm.php\';

#2

Utworzenie nowego obiektu QuickForm o nazwie Formularz, na który wskazuje zmienna {stala}$form{/stala}.

1

$form = new HTML_QuickForm(\'Formularz\');

#3

Ustawienie domyślnych wartości pól za pomocą funkcji {stala}setDefaults(){/stala} i argumentów przekazanych przez tablice. W tym przypadku tylko jedno pole ma wartość domyślną. Jest nim pole login wraz z wartością test1. Dla przypomnienia dodam, że użytkownik może dowolnie modyfikować jego zawartość, ponieważ traktowana jest ona jako zmienna, a nie stała. Do ustawienia stałej służy bowiem funkcja {stala}setConstants(){/stala}.

1
2
3

$form->setDefaults(
   array(\'login\' => \'test1\')
   );

#4

Kolejny etap to utworzenie pól oraz dodanie do nich odpowiednich własności. Nie trudno się domyślić, że posłuży do tego funkcja {stala}addElement(){/stala}. Ze względu na spore różnice w argumentach, które przekazywane są do pól, każdy element zostanie skomentowany oddzielnie.

#4a

Utworzenie pseudopola typu {stala}header{/stala} zawierającego nagłówek formularza. Jako jedyny parametr przekazywany jest tytuł, słowo null, które oznacza, że do pola nie przypisano żadnej nazwy.

1

$form->addElement(\'header\', null, \'Zgloszenie nowego uzytkownika\');

#4b

Utworzenie pola tekstowego (typu {stala}text{/stala}) o nazwie login z tekstem Login znajdującym się przed polem. Słowo null umieszczone jako końcowy parametr informuje o tym, że w skrypcie nie zdefiniowano dodatkowych własności pola.

1

$form->addElement(\'text\', \'login\', \'Login:\', null);

#4c

Dodanie pola typu {stala}password{/stala} o nazwie password z tekstem Haslo (5-10 znaków) umieszczonym przed polem. Dodatkowy parametr przekazany do funkcji {stala}addElement(){/stala} to definicja rozmiaru pola (size=12) oraz maksymalnej długości tekstu (maxlength=10).

1

$form->addElement(\'password\', \'password\', \'Haslo (5-10 znaków):\', array(\'size\' => 12, \'maxlength\' => 10));

O czym warto wiedzieć?

Dwa przykłady zaprezentowane w artykule powinny dać solidną podstawę potrzebną do dalszego tworzenia skryptów i formularzy w oparciu o QuickForm.

Warto wspomnieć o dwóch ciekawych i bardzo przydatnych rozwiązaniach zawartych w pakiecie. Pierwszym z nich jest mechanizm tworzenia grup. Umożliwia on połączenie kilku niezależnych elementów w jedną grupę traktowaną jako pojedynczy element. W ten sposób operacje wykonane na grupie zostaną przeprowadzone na wszystkich subelementach. Za przykład może posłużyć połączenie pól typu Checkbox w jedną grupę i sprawdzenie, które z danych pól jest zaznaczone.

Drugą bardzo przydatną cechą jest możliwość tworzenia schematów i templejtów graficznych. W ten sposób nie jesteśmy uzależnieni od standardowego wyglądu formularzy.

Ze wzgledu na ograniczony rozmiar artykułu trudno jest opisać wszystkie możliwości pakietu QuickForm. Zainteresowanych odsyłam na stronę Listing 1: simple.php

#1

1
2
3
4
5

<?php
$ENV[\'ROOT\']= dirname($_SERVER[\'SCRIPT_FILENAME\']);
ini_set(\'include_path\', $ENV[\'ROOT\'] . \':\' . $ENV[\'ROOT\'] . \'/lib/\');
require_once \'HTML/QuickForm.php\';
?>

1
2
3

<?php
$form = new HTML_QuickForm(\'firstForm\');
?>

1
2
3
4
5

<?php
$form->setDefaults(array(
   \'name\' => \'Tomek\'
));
?>

1

$form->addRule(\'login\', \'Wypelnij pole.\',\'required\');

1
2

$form->addRule(\'password\', \'Podaj haslo.\', \'required\');
$form->addRule(\'password\', \'Haslo musi miec 5-10 znakow.\', \'rangelength\', array(5,10));

1
2

$form->addRule(\'repeat\', \'Powtorz podane haslo.\', \'required\');
$form->addRule(array(\'password\', \'repeat\'), \'Powtorzone haslo musi byc takie samo.\', \'compare\');

#5e

Utworzenie zbioru reguł dla pola {stala}mail{/stala}. Pierwsza z nich ustawia pole jako obowiązkowe do wypełnienia. Różnica polega na tym, że komunikat o błędzie pojawi się już po stronie użytkownika. Jest to rozwiązanie nie obciążające serwera, jednak nie działa ono poprawnie w przeglądarkach nie obsługujących języka JavaScript.

Druga reguła przypisuje polu {stala}mail{/stala} regułę charakterystyczną dla tego typu pól (email). Oznacza to, że zawartość tego pola traktowana jest jako ciąg znaków zawierających @ i kropki. Mówiąc ogólnie adres musi mieć postać {stala}user@domain.pl{/stala}. W przeciwnym razie operacja zakończy się wyświetleniem komunikatu o błędzie.

1
2

$form->addRule(\'mail\', \'Podaj adres e-mail\', \'required\', null, \'client\');
$form->addRule(\'mail\', \'Niepoprawny format pola adresu e-mail.\', \'email\');

#5f

Dodanie analogicznych reguł do pola {stala}name{/stala} oraz {stala}age{/stala}, wyświetlających komunikat po stronie klienta.

1
2

$form->addRule(\'name\', \'Prosze podac imie i nazwisko\', \'required\', null, \'client\');
$form->addRule(\'age\', \'Podaj wiek.\', \'required\', null, \'client\');

#5g

Ustawienie pól {stala}age{/stala} oraz {stala}phone{/stala} jako numeric, czyli zawierających tylko wartości liczbowe. W przeciwnym razie zostanie wyświetlony komunikat o błędzie.

1
2

$form->addRule(\'age\', \'To nie moze byc twoj wiek.\', \'numeric\');
$form->addRule(\'phone\', \'Niepoprawny format\', \'numeric\');

#4d

Utworzenie pola zawierającego kopię poprzedniego hasła. Pole rożni się od poprzedniego tylko nazwą.

1

$form->addElement(\'password\', \'repeat\', \'Haslo (powtorz):\', array(\'size\' => 12, \'maxlength\' => 10));

#4e

Dodanie pól zawierających imię i nazwisko, adres e-mail, wiek oraz telefon. Pola są tego samego typu, a ich deklaracja odbywa się w sposób analogiczny.

1
2
3
4

$form->addElement(\'text\', \'name\', \'Imie i nazwisko:\', null);
$form->addElement(\'text\', \'mail\', \'E-mail:\', null);
$form->addElement(\'text\', \'age\', \'Wiek:\', null);
$form->addElement(\'text\', \'phone\', \'Telefon:\', null);

#4f

Utworzenie pola typu {stala}select{/stala} o nazwie prenumerata oraz etykiecie „Czy prenumerujesz Magazyn Internet”. Jako dodatkowe parametry przekazywane są opcje wyboru. Warto dodać, że tak jak w poprzednich przypadkach posłużono się tutaj tablicą.

1

$form->addElement(\'select\', \'prenumerata\', \'Czy prenumerujesz<br /> Magazyn INTERNET?:\', array(\'Tak\' => \'Tak\', \'Nie\' => \'Nie\'));

#4g

Dodanie ostatniego elementu, którym jest przycisk typu submit, akceptujący i wysyłający formularz. Podobnie jak wcześniej nie przypisano mu żadnej nazwy.

1

$form->addElement(\'submit\', null, \'Wyslij\');

#5

Wszystkie pola formularza są już gotowe do wyświetlenia. Możliwości pakietu QuickForm są na tyle duże, że umożliwiają dodatkową weryfikację każdego z pól. Dzięki temu dodamy kilka reguł korygujących dane wprowadzone przez użytkownika. Ze względu na różnice w deklaracji każdy element zostanie osobno opisany. We wszystkich przypadkach wykorzystana jest funkcja {stala}addRule(){/stala}, której składnia może wyglądać w następujący sposób:

1

addRule($name, $msg, $options)

gdzie:

{stala}$name{/stala} – nazwa pola do którego odnosi się reguła,

{stala}$msg{/stala} – treść komunikatu o błędzie,
{stala}$options{/stala} – dodatkowe opcje zależne od typu pola.

#5a

Dodanie pierwszej reguły do pola login, wyświetlającej komunikat w przypadku błędu. Reguła ta to doskonały przykład wykorzystania wyrażeń regularnych. W tym przypadku zawartość pola login może składać się tylko z małych liter, cyfr oraz znaku podkreślnika. W celu dokładnego poznania zagadnienia wyrażeń regularnych odsyłam do lektury manuala.

1

$form->addRule(\'login\', \'Niepoprawny format pola Login.\', \'regex\', \'/^[-_a-z0-9]+$/i\');

#6

Jeśli formularz został wypełniony, nadaje się do walidacji, a wszystkie reguły zostały spełnione, to skrypt zostaje wykonany dalej. Wszystkie wartości pól zostają odebrane tak jak w poprzednim skrypcie za pomocą funkcji {stala}exportValue(){/stala}. Dodatkowo wykorzystano funkcję {stala}htmlspecialchars(){/stala} konwertującą nietypowe znaki (& < > „” ”) na odpowiednie kody HTML. Oczywiście w tym miejscu skrypt może wykonywać zupełnie inne operacje związane bezpośrednio z jego przeznaczeniem.

1
2
3
4
5
6
7
8
9
10
11

if ($form->validate()) {
   echo \'<h1> Formularz </h1>\';
      echo \'<b>Imie i nazwisko:</b>\' . htmlspecialchars($form->exportValue(\'name\')). \'<br />\';
      echo \'<b>Haslo:</b>\' . htmlspecialchars($form->exportValue(\'password\')). \'<br />\';
      echo \'<b>Login:</b>\' . htmlspecialchars($form->exportValue(\'login\')). \'<br />\';
      echo \'<b>E-mail:</b>\' . htmlspecialchars($form->exportValue(\'mail\')). \'<br />\';
      echo \'<b>Wiek:</b>\' . htmlspecialchars($form->exportValue(\'age\')). \'<br />\';
      echo \'<b>Czy prenumerujesz MI?:</b>\' . htmlspecialchars($form->exportValue(\'prenumerata\')). \'<br />\';
      echo \'<b>Tlefon:</b>\' . htmlspecialchars($form->exportValue(\'phone\')). \'<br />\';
exit;
   }

#7

Wyświetla formularz, jeśli nie został wypełniony lub zawiera błędy.

1
2
3

<?
$form->display();
?>

Elementy, które można dodać do formularza za pomocą funkcji addElement()

Standardowe elementy HTML:

• button – zwykły przycisk,
• checkbox – pole wielokrotnego zaznaczania, tzw. checkbox,
• file – pole do przesyłania plików,
• hidden – ukryte pole,
• image – pole zawierające obrazek,
• password – pole z hasłem,
• radio – pole jednokrotnego zaznaczania, tzw. radiobutton,
• reset – pole reset czyszczące formularz,
• select – lista kombinowana,
• submit – przycisk akceptujący formularz,
• text – zwykłe pole edycji,
• textarea – pole tekstowe.

Pseudoelementy dostępne tylko w QuickForm:

• advcheckbox – zaawansowany typ pól typu checkbox, pola mogą przekazywać kilka wartości,
• autocomplete – zwykłe pole tekstowe wyposażone w możliwość autouzupełnienia; wykorzystano tutaj język JavaScript (podczas wprowadzenia tekstu przeszukiwana jest tablica opcji, a pole dopełniane jest według znajdujących się w niej wartości),
• date – pole do przechowywania daty,
• group – utworzenie grupy z kilku elementów,
• header – nagłówek formularza,
• hiddenselect – tworzy ukryte pole kombinowane; zamiast tworzenia znaczników {html}
  {/html} tworzy ukryte elementy dla wartości zaznaczonych za pomocą funkcji {stala}setDefaults(){/stala} lub {stala}setConstants(){/stala},
  hierselect – tworzenie pól kombinowanych typu łańcuchowego; zaznaczenie danego elementu powoduje dostęp do nowych opcji pola kombinowanego,
  html – pseudoelement przydatny podczas dodawania czystego kodu HTML do formularza,
  link – dodanie odnośnika do formularza,
  static – przeznaczone dla wartości stałych.

  Może Cię zainteresować:

  1. Aplikacje internetowe – Obsługa formularzy
  2. Bazy danych. PEAR DB – interfejs API dostępu do bazy danych
  3. Okiełznać style. Formatowanie tabel i formularzy
  
  
  

  O autorze

  

  Tomasz Galanciak

  
  

  •  

  Więcej artykułów autorstwa Tomasz Galanciak »

  
  
  
  
  0 komentarzy »
  
  
   

  Nowy numer

   

  
  

  

  Ponad 30 stron – tyle zajął nam temat numeru, którym w tym miesiącu jest przedstawienie 100 najgorętszych gadżetów tego roku: tych które już są dostępne i tych, które dopiero zawitają na rynek. W obszernym artykule prezentujemy również nowego iPada oraz aplikacje, od których warto rozpocząć z nim przygodę. Po tym niemałym wydatku proponujemy porównanie sześciu budżetowych smartfonów i testujemy pierwsze dziecko rozwodu między Sony a Ericssonem, czyli Xperię S.

   

  Partnerzy

   

  
  

  

  
  

  

  
  

  0 komentarzy

  
  

  Skomentuj pierwszy!

  
  

  Zostaw odpowiedź Anuluj pisanie odpowiedzi

  Twój adres nie zostanie opublikowany. Wymagane pola są oznaczone *

  Imię *

  E-mail *

  WWW

  Komentarz

  Możesz używać tych tagów i atrybutów HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">