Formularze#
Oskryptowanie#
Kontrolki formularza są elementami (x)HTML, które w szczególności nastawione są na współpracę z językami skryptowymi (zarówno po stronie serwera jak i po stronie przeglądarki internetowej). Bez znajomości dodatkowych języków z formularza "wyciśniemy" niewiele. Dla początkujących wystarczy znajomość elementów oraz testowanie formularza e-mailowego. Osoby obyte z językami znacznikowymi powinny poszerzyć horyzonty i sięgnąć po bardziej zaawansowane technologie.
Skrypty obsługujące formularze mogą wykonywać dowolne zadania (w zależności od możliwości stosowanego języka programowania). W tym miejscu wspomnę tylko o najprostszych i najpopularniejszych zastosowaniach.
Walidacja formularza#
Termin walidacja pochodzi od angielskiego słowa validate i oznacza — w kontekście informatycznym — sprawdzanie poprawności i zgodności z zadanymi kryteriami. Jest on stosowany w odniesieniu do danych pochodzących od użytkownika jak również w stosunku do zmiennych, obiektów, typów i klas w różnych językach programowania.
Wprowadzając dane, użytkownik może — świadomie lub nie — popełnić pomyłkę. Jeśli dane odebrane od użytkownika poddamy przetwarzaniu bez weryfikacji, wówczas, w zależności od odporności aplikacji, możemy mieć do czynienia z różnymi rodzajami błędów, od drukowania w przeglądarce klienta komunikatów diagnostycznych PHP czy MySQL, poprzez utratę spójności bazy danych, aż po ujawnienie niepowołanym użytkownikom informacji poufnych. Z tego powodu, nie wolno ignorować wagi problemu.
Wydajne sprawdzanie poprawności danych powinno odbywać się w dwóch etapach:
- po stronie użytkownika (opcjonalnie, np. za pomocą JavaScript)
- po stronie serwera (obowiązkowo, zarówno dla danych odbieranych jak i wysyłanych, np. za pomocą PHP)
Zanim dane trafią do skryptu umieszczonego na serwerze można poddać je przedwstępnej weryfikacji. Przeglądarka może w pewnym, ograniczonym stopniu stwierdzić czy dane wysyłane do skryptu są poprawne czy nie. W przypadku błędnego wypełnienia, formularz w ogóle nie jest wysyłany. Przeglądarka wyświetla komunikat diagnostyczny i oczekuje na ponowne wypełnienie. Ponieważ kod sprawdzający poprawność danych jest w tym przypadku wykonywany przez przeglądarkę (czyli na komputerze użytkownika), znaczna cześć mocy serwera zostanie zaoszczędzona.
Walidacja danych przez przeglądarkę jest realizowana zazwyczaj w języku JavaScript. Zaletą stosowania tej metody jest wygoda użytkownika: informacje o ewentualnych błędach są wyświetlane natychmiast. Przeglądarka nie komunikuje się z serwerem, dzięki czemu unikniemy sytuacji, w której użytkownik, wypełnia formularz, przesyła go na serwer i czeka pewien odcinek czasu tylko po to, by zobaczyć komunikat informujący o błędach.
Walidacja formularza po stronie klienta ma na celu jedynie wygodę użytkownika. Zabezpieczenia takie łatwo ominąć. Nie wolno ich traktować jako środka gwarantującego bezpieczeństwo serwisu!
Kolejnym momentem, w którym powinniśmy się przyjrzeć danym pochodzącym z formularza, jest początek wykonania skryptu przetwarzającego dane. Zanim rozpoczniemy proces przetwarzania (np. wykonywanie transakcji bazodanowych), należy zweryfikować poprawność otrzymanych wartości. Tym razem kod analizujący poprawność danych jest wykonywany przez serwer.
Wszelkie dane pochodzące od użytkownika, a zatem także dane przekazane za pomocą formularzy, należy w skrypcie po stronie serwera traktować jako potencjalnie niebezpieczne. Pierwszym etapem działania skryptu powinna być walidacja wszystkich zmiennych.
Spośród dwóch wspomnianych metod walidacji, sprawdzanie po stronie serwera jest ważniejsze (obowiązkowe). Zabezpieczenia po stronie klienta należy traktować jako dodatek, który wprawdzie sprawia, że serwis jest nieco bardziej przyjazny w stosunku do użytkownika, jednak nie daje gwarancji poprawności danych. Zabezpieczenia wykonane w JavaScript są w istocie opcjonalnym gadżetem. Natomiast walidacja zmiennych po stronie serwera jest kluczowym fragmentem, który musi być zawarty w kodzie każdego serwisu. Jedynie sprawdzenie faktycznie odebranych danych w skrypcie serwerowym możemy traktować jako pewne zabezpieczenie serwisu.
Zwróćmy uwagę, że weryfikacja po stronie klienta odbywa się bez dostępu do bazy danych czy systemu plików. Zatem sprawdzenie takie, nie może być pełne. Nie możemy sprawdzić, czy podana wartość jest poprawnym identyfikatorem zawartym w bazie danych bądź poprawną nazwą pliku z wybranego folderu. Jedyne, co możemy sprawdzić, to to, czy wprowadzona wartość ma odpowiednią długość, czy zawiera wyłącznie dozwolone znaki oraz czy ma odpowiednią strukturę.
Metody weryfikacji zależą od rodzaju danych, które należy sprawdzić. Może to być np. adres e-mail, cena/nazwa towaru czy login i hasło użytkownika. Techniki nie są skomplikowane i dla osób piszących rozbudowane projekty nie powinny stanowić problemu. Ważne jest, by bardzo dokładnie sprawdzić działanie całości w praktyce. Przemycenie złośliwego kodu przez słaby system weryfikacyjny może przynieść dotkliwy skutek.
W kursie (x)HTML zajmujemy się podstawami, dlatego przykład będzie banalny. Powiedzmy, że oczekujemy od użytkownika wprowadzenia hasła o długości 5-20 znaków. Dla danych nie spełniających wymagania czytelnik ma otrzymać stosowny komunikat z jednoczesnym wstrzymaniem wysłania formularza. Przykład kodu weryfikującego z wykorzystaniem JavaScript:
<form action="" onsubmit="if (this.example.value.length < 5 || this.example.value.length > 20)
{alert('Błędna ilość znaków (akceptowany zakres 5-20).\nWprowadź poprawne dane i spróbuj ponownie.'); return false}">
<fieldset>
<legend>Wypełnij i wyślij</legend>
<input type="password" size="25" name="example" />
<input type="submit" value="Wyślij dane" />
</fieldset>
</form>Efekt (widoczny przy włączonej obsłudze języka JavaScript):
Dowolne zastosowanie#
Weryfikowanie danych wprowadzanych w formularzach to niewielki aspekt, który oferują języki skryptowe. W praktyce możemy wykonać bardziej złożone zadania. Przykładem może być kalkulator do gry internetowej, w całości napisany za pomocą czystego JavaScriptu.
Kontrolki formularza to po prostu kolejne elementy (x)HTML-a, które w odróżnieniu od całej reszty pozwalają na wprowadzanie danych przez użytkownika. Przetworzenie danych zależy tylko i wyłącznie od naszych umiejętności i wyobraźni. Mam tu na myśli w szczególności HTML5, który udostępnia bogatsze API dla JavaScriptu niż miało to miejsce dla HTML 4.01 czy XHTML 1.x. Obecnie możemy budować ciekawe aplikacje działające wprost w przeglądarce internetowej (np. prosty edytor grafiki), gry internetowe (bez konieczności stosowania Flasha) itd. Poniżej prezentuje kilka prostych przykładów, gdzie dynamicznie manipulujemy polami formularza za pomocą JS.
Zaznaczenie określonej opcji wyboru powoduje odblokowanie kolejnej kontrolki (przydatne, np. kiedy w formularzu umieszczona jest grupa pól wyboru, z których jedno nosi nazwę "Inne", a obok znajduje się pole tekstowe do wpisania innej możliwości):
<form action="">
<div>
<input type="checkbox" name="pole1" value="wartość" onclick="this.form.elements['pole2'].disabled = !this.checked" />
<input type="text" name="pole2" disabled="disabled" />
</div>
</form>Efekt (widoczny przy włączonej obsłudze języka JavaScript):
Oczywiście możliwa jest sytuacja odwrotna, czyli po zaznaczeniu pola wyboru pewna kontrolka powinna zostać zablokowana (np. nie ma sensu pytać użytkownika o dalsze szczegóły auta, kiedy zaznaczył opcję, że wcale nie posiada samochodu):
<form action="">
<div>
<input type="checkbox" name="pole1" value="wartość" onclick="this.form.elements['pole2'].disabled = this.checked" />
<input type="text" name="pole2" />
</div>
</form>Efekt (widoczny przy włączonej obsłudze języka JavaScript):
Prosty kalkulator dodający dwie liczby:
<form action="">
<fieldset>
<legend>Sumowanie dwóch liczb - wprowadź dane</legend>
<p>Liczba1:<input type="text" name="liczba1" /></p>
<p>Liczba2:<input type="text" name="liczba2" /></p>
<p>Wynik: <input type="text" name="wynik" readonly="readonly" /></p>
<button onclick="this.form.elements['wynik'].value = this.form.elements['liczba1'].value + this.form.elements['liczba2'].value; return false">Oblicz</button>
</fieldset>
</form>Efekt (widoczny przy włączonej obsłudze języka JavaScript):
Oczywiście w powyższym kalkulatorze należałoby zadbać o poprawność wprowadzanych danych.
Takich przykładów można podawać nieskończenie wiele. Po prostu jest pewne zadanie do wykonania, które dodatkowo rozwiązać można na wiele sposobów. W zasobach WWW udostępniono sporo darmowych skryptów - wystarczy podpiąć pod własny projekt i problem rozwiązany. W zależności od zaawansowania programisty znajdziemy lepsze i gorsze kody. Najlepiej jednak poświecić nieco czasu na naukę języków skryptowych. Z doświadczenia wiem, że umiejętne wykorzystanie takiej wiedzy procentuje w przyszłości.