Do tworzenia aktywnych formularzy



Pobieranie 380.04 Kb.
Strona3/3
Data29.04.2016
Rozmiar380.04 Kb.
1   2   3
zostanie zaprezentowane.

W formularzu Kandydaci, w grupie pól Dane osobowe graficznie wyróżnia się pole Data urodzenia (rys.5).



Rys.5 Wyróżniające się pole Data urodzenia formularza Kandydaci

Dzięki zastosowaniu elementu date został automatycznie wykreowany kalendarz wyboru. Umożliwia on szybkie wstawienie aktualnej daty po kliknięciu przycisku Today, zaś przy tworzeniu innej daty użytkownik zmuszony jest użyć odpowiednich pasków przewijania miesięcy i lat. Wszystkie dni miesiąca są wyeksponowane co ujmuje tym samym dość niewygodnego poszukiwania potrzebnego elementu daty. Poniżej został przedstawiony kod HTML5 z użyciem date wraz z graficzną jego interpretacją na stronie WWW(rys.6).





















Rys. 6 Pole Data urodzenia formularza Kandydaci z rozwiniętym kalendarzem wyboru daty

Do utworzenia pola służącego do wpisania i przekazania do bazy danych numeru telefonu użyty został element tel.:







a do przekazania adresu poczty elektronicznej typ email:







Ostatnim użytym polem naszego formularza wykorzystującym znacznik jest obszar pozwalający kandydatowi do szkoły średniej na określenie godziny w której miałby przejść rozmowę kwalifikacyjną. Określenie typu jako time skutkuje utworzeniem specjalnego graficznego formatu do określania godziny i minut, zaś atrybuty min i max pozwalają wyznaczyć minimalną i maksymalną godzinę do wpisania wg uznania (rys.7). Niżej prezentowany jest kod wykorzystujący type="time":















Rys.7 Graficzny format do określania czasu

Stworzone i udostępnione przez twórców HTML5 nowe typy odgrywają istotną rolę w procesie walidacji wpisanych danych. Dzięki nim wbudowany strukturę HTML walidator wie jakie dane mają być wprowadzone w dane pole. W przypadku popełnienia błędu użytkownik natychmiast zostanie o nim poinformowany. Szczegółowiej o procesie walidacji będzie mowa przy okazji omówienia właściwości nowych atrybutów.

    1. Nowe atrybuty elementów formularzy i walidacja danych

HTML5 wzbogacił formularze o nowe atrybuty co pozwoliło zwiększyć ich liczbę do 29: accept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, type, value, width. Z grupy nowych dwa min, max, zostały już zaprezentowane przy omówieniu typu time27.

Autofocus jest odpowiedzialny za podkreślenie pola, które chcielibyśmy, aby osoba wypełniająca formularz wypełniła. Natomiast atrybut required wskazuje na element, który jest obowiązkowy do wypełnienia. Gdy taki element nie zostanie wypełniony klient zostanie poinformowany, o konieczności uzupełnienia brakujących danych (rys 8). Dodatkowo znacznikowi można dodać atrybut placeholder, wstawiający dowolnej treści tekst. Opisane wyżej atrybuty zostały zastosowane w formularzu Kandydaci w następujący sposób, przy czym atrybut placeholder nie został zinterpretowany przez najnowszą Operę.















Rys.8 Brak danych w polu Imię ojca inicjuje powiadomienie o konieczności jego wypełnienia

Sam proces sprawdzania danych wpisanych w formalrzu HTML5 bez użycia skryptów możliwy jest do przeprowadzenia wg schematu jaki zastosowany został w stosunku do formularza (HTML4.01) Kandydat tzn.:

walidacja {

(czy pole jest uzupełnione?/folse/true/) → (czy pole jest uzupełnione?/folse/true/) →

(czy dane zostały poprawnie wprowadzone?folse/true/)→ (czy dane zostały poprawnie wprowadzone? folse/true/) →…

} koniec walidacji

W przypadku wpisania ciągu znaków w polu E-mail, ale bez użycia znaku @ wyświetlany zostaje komunikat o błędzie jak widać poniżej (rys.9):



Rys. 9 Źle wpisany adres internetowy i komunikat o błędzie

Podobnie w polu dotyczącego czasu, wprowadzenie godzin wykraczających poza przedział ustalonych tzn. między 8.00 a 19.00 zablokuje przesłanie danych na serwer (rys.10) do momentu gdy nowe cyfry spełnią wymagane kryterium wyznaczone przez atrybuty.



Rys. 10 Atrybut max z wartością liczbową 19.00 nie dopuszcza przesłanie do bazy danych większej wartości

  1. Mechanizm zapisywania danych z formularza w bazie danych

Dotąd uwagę poświęciliśmy sposobom tworzenia formularzy, które są platformami dla różnego rodzaju danych wpisywanych przez użytkowników. W momencie, gdy dane te pozytywnie przejdą test walidacji po stronie klienta, rozpoczyna się proces ich przesłania i gromadzenia w bazie danych czemu poświęcony jest niniejszy rozdział. W pierwszej kolejności przedstawiona

    1. Baza danych SQlite

Na potrzeby naszej pracy stworzona została w bazie SQlite testowa baza danych, która zawiera trzy tabele: Kandydaci dla formularza w HTML4.01, druga dla formularza XForms i trzecia dla HTML5.

Powód dla którego użyłem SQlite objawia się przede wszystkim w prostocie jego utrzymania. Cała baza mieści się w jednym pliku, który można łatwo skopiować lub przenieść. Dodatkowo SQlite daje możliwość używania bazy danych bez konieczności uruchamiana oddzielnego serwisu jak to jest np. w przypadku MySQL28.

Poniższy rysunek (rys.11) przedstawia przykładowy kod wymagany do utworzenia tabeli Kandydaci dla formularza Kandydat (HTML4.01):



Rys.11 Kod źródłowy tabeli Kandydaci

Baza danych zawiera klucz główny id integer primary key, gdzie każdemu wierszowi w kolumnie id przypisany będzie indywidualny numer w systemie rosnącym począwszy od 1. W pozostałych kolumnach (każda z określonym tytułem np. plec), w których gromadzone będą dane nadesłane z formularza Kandydat, wyznaczony został dopuszczalny limit znaków możliwych do zapisania w każdym rekordzie kolumny. I tak w kolumnie plec każdy rekord może zawierać jeden znak char(1) M (Mężczyzna) lub K(kobieta), podczas gdy kolumna pierwsze_imię dopuszcza w każdym wierszu dwadzieścia znaków varchar(20). W przypadku przekroczenia dopuszczalnej liczby znaków w danym wierszu, dane nie zostaną zapisane. Wyznaczanie limitów znaków w kolumnach bazy danych ma sens, ponieważ to one określają wielkość pliku bazodanowego.

Dla większości atrybutów w tabeli wprowadzono ograniczenie not null. Wartość ta oznacza, że w poszczególnych kolumnach rekordy nie mogą pozostawać puste. Aby spełnić wymaganie not null jakie stawia baza danych, w procesie walidacji danych po stronie klienta uwzględniono, które pola są obowiązkowe do wypełnienia a które nie. Walidacyjna synchronizacja dotyczy również poprawności wprowadzonych danych. Bazy danych mają bowiem możliwość precyzyjnego określania jaki rodzaj danych ma być wpisany np. czy to będzie tekst lub liczby, w takim czy innym graficznym układzie. Jako przykład podajmy naszą datę urodzenia, którą można zapisać zaczynając od roku lub dnia, gdzie miesiąc wyrażony będzie liczbą (01.) lub słownie (styczeń), a znakiem dzielącym dni, miesiące i lata będzie kropka lub ‘-‘.

Elementem łączącym formularze z bazami danych, dzięki którym dokonuje się zapis informacji są skrypty PHP.

    1. Skrypty PHP

Do tworzenia skryptów łączących formularze i bazy danych posłużył język programowania PHP.

Hypertext Preprocesor tak brzmi oficjalna nazwa tego języka i służy do tworzenia dynamicznych stron internetowych. W podrozdziale 3.1 Rodzaje skryptów wspomniane zostało, że PHP należą do grupy skryptów pracujących po stronie serwera WWW. Dlatego aby wykorzystać go na własnej stronie należy wpierw upewnić się czy nasz serwer go obsługuje. Współpraca serwera z PHP wygląda następująco: wpisany adres w przeglądarce internetowej, żądający wyświetlenia strony kierowany jest do serwera WWW. W sytuacji gdy żądany dokument zawiera kod PHP, serwer kieruje do swego interpretera rozkaz przetworzenia podanego pliku. Interpreter wyszukuje w jego treści tzw. wstawki PHP np. wplecione w kod HTML i zastępuje je wynikiem ich wykonywania. Utworzony kod HTML jest zwracany serwerowi, a ten wysyła go z powrotem do internauty. Do przeglądarki dociera kod HTML a nie PHP29. Za wyświetlanie danych umieszczonych w skrypcie odpowiedzialna jest instrukcja echo.

W celu uniknięcia błędu, w którym kod PHP uznany za HTML zostałby wysłany bezpośrednio do przeglądarki, należy stosować specjalne znaczniki otwierające i zamykające blok skryptu. Znaczniki początku i końca bloku PHP w wersji standardowej prezentują się następująco w wersji skróconej 30.

Poniżej (rys.12) zaprezentowany został skrypt odpowiedzialny za zapisanie danych z formularza w bazie danych. Drugi odczytuje wprowadzone dane z bazy danych.





Rys.12 Skrypt PHP odpowiadający za zapisanie danych w tabeli bazy danych SQlite

    1. Serwer

Aplikacja została uruchomiona na serwerze WWW NetworkActivWebServerV3.5 (rys.13). Jest to prosty serwer WWW z możliwością obsługi skryptów PHP. Dodatkową zaletą tego serwera jest brak konieczności jego instalacji. Serwer uruchamiamy jako normalną aplikację w Systemie Windows. Po uruchomieniu aplikacji uzyskujemy dostępu do serwera WWW na lokalnym komputerze na wyspecjalizowanym porcie nr 80.



Rys.13 Aktywny serwer NetworkActivWebServerV3.5

  1. Wnioski

Formularze są najbardziej rozpowszechnioną formą przekazywania informacji do baz danych. Łatwo się o tym przekonać wyświetlając dowolną stronę firmy, instytucji publicznej, forów internetowych, gdzie wymaga się z od klienta lub użytkownika przekazania określonych danych. Języki programowania stron WWW jak HTML nieustannie się rozwijają, a z nimi formularze jako ich integralna część. Dlatego niniejszej pracy pt. Prezentacja możliwości języka HTML5 do tworzenia aktywnych formularzy do współpracy z bazami danych postawiłem sobie zadania ukazania możliwości formularzy standardu HTML4.01 i XForms z jednoczesnym przedstawieniem kierunku ich rozwoju w nieskończonym jeszcze projekcie HTML5.

W związku z wyżej przedstawionym projektem w pierwszym rozdziale niniejszej pracy pt. Możliwości formularzy w HTML4.01 zaprezentowana została teoria projektowania formularzy w omawianym standardzie wzbogacona o rysunek formularza Kandydat utworzonego w celu ukazania jego praktycznych możliwości.

Do utworzenia formularza Kandydat użyłem programu Aptana Studio 2.0. dla systemu Windows XP Prof.

Nasz formularz w standardzie 4.01 cechuje się dużą różnorodnością sposobów gromadzenia danych wyrażającą się w zastosowaniu opcji i list wyboru, umożliwiających wybranie proponowanej wartości, pól, dostosowanych do gromadzenia wpisanych danych, pola tekstowego, w którym można umieścić większą liczbę znaków itd. Dodatkowo przy pomocy atrybutów z odpowiednimi wartościami utworzone zostały przyciski: Zapisz służący do wysłania danych i Zresetuj, naciśnięcie, którego skutkuje usunięciem wybranych i wpisanych wartości. Przyciski są w zasadzie jedynymi elementami formularza, wywołującymi logiczny proces. Poza tym cechują się statycznością. Nawet atrybuty zdarzeń zastosowane w naszym formularzu i opisane w paragrafie Funkcje zdarzeń w obsłudze formularzy, charakterystyczne dla HTML4.01 swoje działanie uzależniają od skryptów.

Kolejny rozdział pracy poświęcony jest możliwościom formularzy HTML4.01 w połączeniu z językiem skryptowym Java Script. Na początku rozdziału dokonałem podziału skryptów pod względem ich środowiska pracy na skrypty serwerowe (PHP) i klienckie (Java Script). Następnie opisałem sposoby dołączania skryptów do dokumentów HTML, po czym przedstawiłem zastosowaną w naszym formularzu Kandydat walidację danych po stronie klienta przy pomocy Java Script. Sam proces walidacyjny danych z naszego formularza przebiega w ten sposób, że skrypt sprawdza, czy pole zawiera wartość i czy jest ona poprawnie wpisana, a następnie dokonuje się walidacja kolejnych danych. Opisana w skrócie walidacja ma tę zaletę, że dane są sprawdzane zanim zostaną przesłane na serwer, co znacznie skraca czas całego procesu ich przesyłania. Serwer bowiem jest zwolniony z transmisji źle wpisanych danych w formularzu. Wadą jednak walidacji po stronie klienta jest jego możliwość ominięcia, czego klient nie może zrobić na serwerze, gdyż nie ma dostępu do plików serwerowych.

Formularz Kandydat ożywiony procesem walidacji wzbogacony został jeszcze o wymierzający dzień i godzinę dynamiczny zegar, komunikat informujący użytkownika o konieczności wyrażenia zgody na przetwarzanie jego danych osobowych przez szkołę, a także o efekt zmiany koloru czcionki po najechaniu kursorem na baner i komunikat wyświetlający się w polu Nazwisko po kliknięciu na niego kursorem myszy.

Rozdział trzeci pt. Możliwości formularzy XForms opisuje formularze – aplikacje standardu XML. Ich twórcy postawili sobie za cel uczynienie formularzy możliwie jak najbardziej niezależnych od skryptów zwłaszcza w procesie walidacji danych po stronie klienta. Uznano bowiem, że skrypty nadmiernie rozbudowywują texty źródłowowe formularzy czyniąc je mało czytelnymi. Opisane możliwości, zwłaszcza walidacyjne, zaprezentowane zostały w przykładowym formularzu Kandydat2. Przy pomocy modelu danych służących jako wzorzec dla danych wpisanych przez użytkownika możliwa jest ich walidacja – zarówno czy pole zostało wypełnione jak i poprawność wpisanych wartości. Formularz Kandydat2 do wpisania danych wykorzystuje podobnie jak Kandydat pola, opcje i listy wyboru, pola tekstowe.

Choć XForms jest aplikacją nie wdrożoną, jego istnienie z pewnością zaowocowało pojawieniem się formularzy standardu HTML5. Język ten jest jeszcze w wersji roboczej, ale powszechnie uznany został za standard przyszłości. Twórcy najpopularniejszych przeglądarek podejmują działania w celu coraz pełniejszej obsługi najnowszej wersji HTML.

Przedostatni rozdział pracy na początku w skrócie charakteryzuje język HTML5, podkreślając jego nowe możliwości, wśród których znajduje się walidacja formularzy. Następnie opisane zostały nowe typy znaczniaka i atrybuty umożliwiające proces sprawdzania danych co przedstawiają rysunki będące zrzutami ekranu formularza Kandydaci.

Nie obeszło się jednak bez użycia skryptów jak choćby walidującego przyciski opcji, i odpowiedzialnych za zdarzenia. Mimo to kod formularza stał się skromniejszy i bardziej czytelny.

Do zaprezentowania możliwości walidacyjnych formularza Kandydaci użyłem najnowszej przeglądarki Opera, gdyż na razie tylko ona interpretuje zawarte w obrębie znaczników nowe typy i atrybuty. Ale w chwili obecnej następuje szybki proces przyswajania przez poszczególne przeglądarki nowego standardu HTML.

Ostatni rozdział poświęcony został mechanizmom zapisywania danych z formularza w bazie danych. W celu ukazania tego procesu, ukrytego dla oka użytkownika utworzona została baza danych SQlite zawierająca trzy tabele dla opisanych wyżej formularzy. Do połączenia ich z bazą danych posłużyły skrypty PHP napisane w programie ConTEXT, a cała aplikacja uruchomiona została na serwerze NetworkActivWebServerV3.5. Serwer ten obsługuje PHP i nie wymaga konieczności instalowania. Stworzona aplikacja działa poprawnie. Wpisane dane w formularzach i walidowane są przesyłane na serwer i poprawnie wyświetlane na stronie WWW. Walidacja po stronie klienta na serwerze i bazie danych przebiega bez zakłóceń co świadczy o pełnej synchronizacji kodów. Wniosek jaki się nasuwa po pomyślnym teście stworzonej aplikacji, że formularze HTML5 podążyły ku pełniejszej samodzielności w procesie jego dynamizowania.

  1. Wykaz literatury

Steven M. Schafer: HTML, XHTML i CSS, Wydawnictwo "HELION", Gliwice 2009

Maria Sokół: ABC języka HTML, Wydawnictwo "HELION", Gliwice 2002

Dave Thau: Java Script, Podręcznik tworzenia interaktywnych stron internetowych, Wydawnictwo "HELION", Gliwice 2007

Julie C. Meloni: Intensywny Trening PHP,MYSQL I APACHE, Wydawnictwo "HELION", Gliwice 2009

Traczyk T. XForms, XIV Konferencja PLOUG, Szczyrk, Październik 2008, str. 35
Witryna: Co to jest PHP, 14.07.2008. http://www.php.rk.edu.pl/w/p/co-jest-php/

Witryna: Methot=get, 2002r.:

http://www.htmlcodetutorial.com/forms/_FORM_METHOD_GET.html

Witryna: Method GETand POST in HTML forms – what’s the difference?, 28.09.2003:

Witryna: http://www.cs.tut.fi/~jkorpela/forms/methods.html

Witryna: Włodzimierz Gajda,Kontrolki formularzy,2000 http://gajdaw.pl/html/kontrolki-formularzy/p2.html

Witryna: Formularze, przycisk:http://www.kurshtml.boo.pl/html/przycisk,formularze.html

Witryna: W3C HTML4.01 Specyfication 24.09.1999: http://www.w3.org/TR/html401/

Witryna: W3C, XForms1.1, 20.10.2009: http://www.w3.org/TR/xforms11/

Witryna: W3C, HTML5, http://dev.w3.org/html5/spec/Overview.html#attr-input-type

Witryna: HTML5, Forms:

http://www.w3.org/TR/2010/WD-html520100304/forms.html#forms

Witryna: The imput element, 24.06.2010: http://dev.w3.org/html5/spec/Overview.html#attr-input-type

Witryna: SQLite, 31.03.2010r., http://pl.wikipedia.org/wiki/SQLite

Witryna: M.Majchrzycki, Safari 5 najlepiej obsługuje HTML5, 10.06.2010r. http://www.dobreprogramy.pl/Safari-najlepiej-obsluguje-HTML,Aktualnosc,18684.html


1 Steven M. Schafer: HTML, XHTML i CSS, Wydawnictwo "HELION", Gliwice 2009, s. 22.

2 http://pl.wikipedia.org/wiki/HTML

3 Ang. Cascading Style Sheets

4 Maria Sokół: ABC języka HTML, Wydawnictwo "HELION", Gliwice 2002, s. 9

5 GUI – skrót od ang. Graphical User Interface)

6 Methot=get , 2002r.:http://www.htmlcodetutorial.com/forms/_FORM_METHOD_GET.html

7Method GETand POST in HTML forms – what’s the difference?, 28.09.2003:

http://www.cs.tut.fi/~jkorpela/forms/methods.html

8Włodzimierz Gajda,Kontrolki formularzy,2000 http://gajdaw.pl/html/kontrolki-formularzy/p2.html

9 Steven M. Schafer: HTML, XHTML i CSS, Wydawnictwo "HELION", Gliwice 2009, s. 171

10 Tamże: str. 170

11 Formularze, przycisk:http://www.kurshtml.boo.pl/html/przycisk,formularze.html

12 Formularze, przycisk:http://www.kurshtml.boo.pl/html/przycisk,formularze.html

13 Obecne tutaj nawiasy kwadratowe służą poinformowaniu skryptu obsługującego formularz, że dane pole może zawierać kilka wartości. Przykładem takiego języka programowania wymagającego opisywane oznaczenia jest PHP. Steven M. Schafer: HTML, XHTML i CSS, Wydawnictwo "HELION", Gliwice 2009, s. 175

14 Wszystkie opisane atrybuty można znaleźć na stronie W3C dotyczącej specyfikacji HTML 4.01: W3C HTML4.01 Specyfication 24.09.1999: http://www.w3.org/TR/html401/

15 Dave Thau: Java Script, Podręcznik tworzenia interaktywnych stron internetowych, Wydawnictwo "HELION", Gliwice 2007, s. 35

16 W3C, XForms1.1, 20.10.2009: http://www.w3.org/TR/xforms11/

17 T.Traczyk , XForms, XIV Konferencja PLOUG, Szczyrk, Październik 2008, str. 35

18 Tamże, str 37

19 XForms and XPath. http://www.w3schools.com/xforms/xforms_xpath.asp

20 W3Schools XForms Tutorial. http://www.w3schools.com/xforms/default.asp

21 XForms 1.1, W3C. http://www.w3.org/TR/xforms11/

22 XForms - czyli o co chodzi w tym wszystkim, 2006 r. http://riddle.jogger.pl/2006/05/16/xforms czyli o co chodzi w tym wszystkim/

23 XForms,28.01.2010r. http://pl.wikipedia.org/wiki/XForms

24 Przeglądarka zainstalowana w systemie Microsoftu zdobywa 165 pkt. W tych samych testach uczestniczyły inne popularne przeglądarki. Chrome5 zakończył test zdobywając 204 pkt. Słabiej wypadły Firefox 3.6.3 z wynikiem 143 pkt. i Opera 130 pkt. W testach nie brano pod uwagę Internet Explorera 9. M.Majchrzycki , Safari 5 najlepiej obsługuje HTML5, 10.06.2010r. http://www.dobreprogramy.pl/Safari-najlepiej-obsluguje-HTML,Aktualnosc,18684.html

25W3C, HTML5, 24.06.2010: http://dev.w3.org/html5/spec/Overview.html#attr-input-type

26 HTML5, Forms, 24.06.2010 : http://www.w3.org/TR/2010/WD-html5-20100304/forms.html#forms

27 The imput element, 24.06.2010: http://dev.w3.org/html5/spec/Overview.html#attr-input-type

28 SQLite, 31.03.2010r., http://pl.wikipedia.org/wiki/SQLite

29 Co to jest PHP, 14.07.2008. http://www.php.rk.edu.pl/w/p/co-jest-php/

30 Pozostałe dwa rodzaje znaczników otwierających i zamykających: dla ASP <% …%>, i skryptowych , muszą być uaktywnione w pliku php.ini. Julie C. Meloni: Intensywny Trening PHP,MYSQL I APACHE, Wydawnictwo "HELION", Gliwice 2009, str. 98

<legend>Dane osobowelegend>
<label>Data urodzenia
<input type=”date” name=”birth” id=”birth”
<input type=”tel” name=”telephone” id=”telephone”
<input type=”email” name=”email” id=”email”


Pobieranie 380.04 Kb.

1   2   3




©absta.pl 2020
wyślij wiadomość

    Strona główna