Aktywne i dynamiczne strony WWW Elementy projektowania stron WWW Część 3 dr inŝ. Tomasz Traczyk Formularze HTML Aktywne strony WWW Dynamiczne strony WWW 2 Formularze HTML Formularze HTML przykład Do czego to słuŝą Do tworzenia interaktywnych stron WWW bez konieczności wykonywania kodu na kliencie Sposób działania Przeglądarka wysyła URL strony zawierającej formularz Serwer WWW wysyła stronę z formularzem (statyczną lub dynamiczną) UŜytkownik wypełnia pola formularza Atrybut action formularza określa URL pod jaki ma zostać odesłany wynik wypełniania formularza Po wciśnięciu przycisku submit dane z formularza są wysyłane za pomocą metody post dane w treści Ŝądania HTTP (metoda zalecana) get dane w URL Ŝądania HTTP (jako parametry) Serwer odpowiada na przesłane dane z formularza, odsyłając odpowiednią (dynamiczną) stronę WWW MoŜliwości Rodzaje pól tekstowe jedno- i wieloliniowe listy rozwijane i grupy radiowe pola wyboru (checkboxes) przyciski standardowe (submit i reset) niestandardowe kod JavaScript Formatowanie formularza wszelkie moŝliwości HTML pola w formularzu są dowolnie wplecione w tekst HTML Oprogramowanie w JavaScript na kliencie na serwerze (wymaga wysłania) <body> <form action="mailto:ttraczyk@ia.pw.edu.pl?pytanie" method="post"> Wybierz przedmiot z listy <select name="przedmiot"> <option selected>www</option> <option>pob</option> </select><p> Wpisz pytanie <textarea name="pytanie" rows="2" cols="50"></textarea><p> Dotyczy <input name="dotyczy" type="radio" value="w" checked>wykładu</input> <input name="dotyczy" type="radio" value="c" >ćwiczeń</input> <p> Pilne? <input name="status" type="checkbox" value="pilne"/><p> Wpisz swój adres e-mail <input name="nadawca" type="text"/><p> <input type="submit" value="wyślij"/> <input type="reset" value="skasuj"/> </form> </body> 3 4
Aktywne strony WWW JavaScript wprowadzenie Strony WWW statyczne lub dynamiczne zawierające kody programów wykonywanych na kliencie Technologie JavaScript (ECMAScritp) Aplety Flash VBScript, ActiveX itp. Do czego to powinno słuŝyć? Do wykonywania operacji, które nie powinny wymagać odwołania do serwera, np. podstawowa walidacja wprowadzanych danych reakcje na przyciśnięcie przycisków Do tworzenie niezbędnych rozszerzeń funkcjonalnych HTML, np. przetwarzanie wysp danych podpowiedzi Do czego to nie powinno słuŝyć? Do realizacji funkcjonalności osiągalnych za pomocą samego HTML Do zaśmiecania stron bajerami Język przeznaczony do wykonywania w przeglądarkach WWW interpretowany przez przeglądarki Składniowo przypominający język Java, ale znacznie prostszy Oparty na obiektach (predefiniowanych) Działanie Skrypty zagnieŝdŝane w kodzie HTML zwyczajowo skrypty umieszcza się w komentarzu dla zmylenia archaicznych przeglądarek Skrypty składają się z kodu wykonywanego bezpośrednio funkcji Zdarzenia predefiniowane przypisywane przez specjalne atrybuty elementów HTML do kodu skryptów do bezpośredniego wykonania wywołań funkcji Obiekty w JavaScript Cechy predefiniowane ograniczone moŝliwości tworzenia własnych klas (bez dziedziczenia) moŝna tworzyć nowe wystąpienia niektórych predefiniowanych klas niektóre obiekty są tworzone automatycznie mają atrybuty i metody, do których moŝna odwołać się w skryptach Rodzaje obiektów (wybór) związane z elementami dokumentu HTML związane ze środowiskiem przeglądarki, np. navigator, window, history, document pełniące rolę swoistych bibliotek, np. Date, Math związane z modelami DOM i SAX this obiekt bieŝący 5 6 JavaScript przykład Aplety wprowadzenie <head> <script language="javascript"> function przycisk() { window.alert('wciśnięty'); function sprawdz(pole) { if (isnan(pole.value)) { window.alert('błąd'); pole.focus(); return false ; return true </script> </head> <body> <form onsubmit="return sprawdz(this.pole)"> Wpisz liczbę <input name="pole" type="text"><p> <input type="button" value="przycisk" onmouseover="window.status='moŝna to wcisnąć'" onmouseout="window.status=''" onclick="if (sprawdz(form.pole)) {przycisk()"/> </form> </body> Co to takiego? Mini-aplikacje w Javie Działające po stronie klienta maszyna wirtualna Javy wbudowana w przeglądarkę Zalety Bardzo duŝe moŝliwości (silny język programowania) Przenośność Niezłe bezpieczeństwo zwykłe aplety nie mają praw grzebania na komputerze klienta Wady Umiarkowana wydajność ObciąŜenie sieci konieczność przesłania kodu apletu Spore obciąŝenie komputera klienta Technologia Na serwerze umieszcza się skompilowany program apletu (kod przenośny) Na stronie HTML umieszcza się element APPLET lub OBJECT, np: <APPLET code="aplet.class" codebase="url" width="300" height="200" alt="tekst zastępczy"> <PARAM name="nazwa" value="wartość">... </APPLET> 7 8
Dynamiczne strony WWW Dynamiczne strony WWW, c.d. Strony tworzone dynamicznie przez serwer na podstawie parametrów i/lub zawartości Ŝądania Zawartość zwykle tworzona na bieŝąco często na podstawie informacji z bazy danych Nie przechowywane w całości w postaci plików tworzone w 100% dynamicznie lub tworzone przez dynamiczne wypełnianie wzorca Do czego to słuŝy? Do prezentacji zawsze aktualnej wersji szybko zmiennych informacji, np. raportowanie aktualnego stanu zasobów, finansów itp. prezentacja aktualnych analiz handlowych prezentacja aktualnej oferty z uwzględnieniem bieŝących zapasów magazynowych Do prowadzenia dynamicznego dialogu z uŝytkownikiem (odpowiedzi na formularze, rozgałęzienia itp.), np. wyszukiwarki personalizacja dostępu składanie zamówień ankietowanie on-line Do realizacji duŝych często zmiennych zbiorów informacji, np. portale bazy wiedzy, CMS (Content Management Systems) itp. Technologie CGI Moduły serwerowe Serwlety Server pages Zasady Separacja logiki od prezentacji kod programów reprezentujący logikę strony powinien być oddzielony od definicji wyglądu strony odmienne kwalifikacje projektantów inna dynamika zmian Single sign-on jednorazowa autoryzacja przy dostępie do wielu zasobów o róŝnym pochodzeniu wymaga pośrednictwa serwera autoryzacyjnego SSO Trudności Częste interakcje z serwerem Konieczność odświeŝania całej strony po kaŝdej interakcji z serwerem Nienaturalne sposoby utrzymania sesji potrzebne ze względu na wymogi bezpieczeństwa przetwarzania transakcyjnego trudne z powodu bezstanowości protokołu HTTP stosowane sztuczki: przesyłanie generowanych na bieŝąco numerów sesji w cookies w kolejnych URL Ostatnio mocno naduŝywane (PHP...) 9 10 CGI i moduły serwerowe Serwlety CGI (Common Gateway Interface) Sposób wywoływania programów na serwerze ze stron WWW programy w dowolnym języku programowania lub skryptowym (C, C++, shell, Perl, itp.) Działanie bramki CGI bramka CGI jest dostępna z URL przez odpowiednią ścieŝkę wirtualną (zwyczajowo /cgi-bin/) parametry wywołania umieszczane są przez bramkę w zmiennych środowiskowych program CGI wypisuje swój wynik na standardowe wyjście Zalety moŝliwość uŝycia dowolnego języka prostota interfejsu Wady problemy z wydajnością osobny proces dla kaŝdego Ŝądania ograniczona przenośność programów Moduły serwerowe Przystawki do serwera WWW pozwalające wykonywać programy typu CGI ale bez wad związanych z wydajnością klasycznego CGI Przykłady (Apache) mod_perl moduł umoŝliwiający pisanie programów typu CGI w języku Perl mod_php dynamiczne tworzenie stron WWW w języku PHP Program w języku Java klasa potomna klasy HttpServlet definiująca metodę doget lub dopost Przechowywany w postaci skompilowanej na serwerze aplikacyjnym Wykonywany na serwerze aplikacyjnym przez specjalny aparat (motor), np. Tomcat Interakcja wywołanie przez Ŝądanie HTTP odpowiedź HTTP, np. w postaci dokumentu HTML lub XML Cechy Zalety przenośność (takŝe w formie skompilowanej) porządny język programowania Wady brak oddzielenia prezentacji od logiki problemy z wydajnością Połączenie z bazą danych JDBC biblioteka Javy umoŝliwia połączenie z bazą danych wysyłanie zapytań SQL odbieranie wyników 11 12
Serwlety przykład Server Pages import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class Serwlet extends HttpServlet { public void doget(httpservletrequest zadanie, HttpServletResponse odpowiedz) throws ServletException, IOException { odpowiedz.setcontenttype("text/html"); PrintWriter wyjscie = odpowiedz.getwriter(); wyjscie.println("<title>pokaz</title>"); wyjscie.println("<h1>pokaz serwleta</h1>");... Co to takiego? Strony w HTML lub XML zawierające szablon statycznych części strony wstawki w języku programowania zmienne w dynamicznie generowanych miejscach dokumentu Interpretowane przez serwer wstawki w języku programowania są wykonywana zmienne są zastępowane wynikami przetwarzania wypełniony szablon jest wysyłany do przeglądarki Dlaczego warto to stosować? Stosunkowo łatwe w uŝyciu Pozwalają w pewnym stopniu oddzielić logikę od prezentacji Technologie (przykłady) JSP Java Server Pages ASP Application Server Pages (Microsoft, język Basic) 13 14 JSP wprowadzenie JSP przykłady Java Server Pages Zanurzone w kodzie HTML wstawki w Javie Kod jest wykonywany przed przesłaniem strony Realizacja: serwlet przy pierwszym wywołaniu aparat JSP tworzy serwlet na podstawie strony JSP i kompiluje go kolejne wywołania od razu uruchamiają serwlet Elementy JSP Dyrektywy (np. określające Ŝe to jest JSP) Deklaracje zmiennych i metod Scriptlety kod wykonywalny w Javie WyraŜenia umoŝliwiają wstawianie wyników przetwarzania do wynikowego dokumentu HTML Obiekt request słuŝący do odczytywania parametrów wywołania Separacja kodu od prezentacji W prostym uŝyciu JSP nie ma dostatecznej separacji Lepszą separację umoŝliwia zastosowanie komponentów JavaBeans kod Java w osobnych plikach na stronach JSP tylko odwołania do atrybutów JavaBeans Klasy Javy Mające prywatne atrybuty klasy dostępu do atrybutów (takŝe wirtualnych) o nazwach getatrybut i setatrybut Przeznaczone do wielokrotnego wykorzystania w róŝnych aplikacjach Biblioteki znaczników (taglib) Pozwalają definiować i oprogramować znaczniki realizujące jakieś typowe akcje np. typowe działania dostępu do bazy danych <HTML> <HEAD> <TITLE>Pokaz JSP</TITLE> </HEAD> <BODY> <%@ page language="java" %> <%! String parametr; %> <% wynik = request.getparameter("parametr"); %> <H1> Oto strona o tytule "<%= wynik %>" </H1> </BODY> </HTML> <HTML> <HEAD> <TITLE>Pokaz JSP</TITLE> </HEAD> <BODY> <%@ page language="java" %> <jsp:usebean id="jb class="wezparametr"/> <jsp:setproperty name="jb" property="parametr /> <H1> Oto strona o tytule <jsp:getproperty name="jb" property="wynik"/> </H1> </BODY> </HTML> 15 16
AJAX Wada klasycznych stron dynamicznych Częste interakcje z serwerem są niezbędne np. do walidacji informacji bardziej złoŝonych reakcji na działania uŝytkownika Po kaŝdej interakcji z serwerem przeładowanie całej strony wyświetlenie od nowa całej strony Ogranicza to moŝliwości interakcji Jak działa AJAX? Działanie uŝytkownika powoduje wysłanie Ŝądania do serwera odpowiedź serwera w XML Otrzymanie odpowiedzi z serwera powoduje przyrostową aktualizację strony przez program na kliencie manipulujący drzewem DOM na podstawie przesłanego XML bez przeładowywania całej strony Asynchronous JavaScript and XML Sposób wykorzystania istniejących technologii XML technologie stron aktywnych, np. JavaScript Model DOM obiektowy model wyświetlanego dokumentu (X)HTML/XML moŝliwość programowego manipulowania dokumentem Zalety Znacznie szybsze reakcje na działania uŝytkownika MoŜliwość tworzenia bardziej złoŝonych interakcji Wady Dość pokrętna technologia Nieprzejrzysty kod stron Złe działanie przycisku Wstecz przeglądarki 17