Aplikacje WWW - laboratorium JavaServer Pages Celem ćwiczenia jest zbudowanie kilku prostych stron internetowych z uŝyciem technologii JSP. Podczas ćwiczenia wykorzystany zostanie algorytm sortowania bąbelkowego (opis sortowania bąbelkowego moŝna znaleźć na stronie http://en.wikipedia.org/wiki/bubble_sort). Do wykonania ćwiczenia potrzebne jest zintegrowane środowisko programistyczne NetBeans IDE 5.5 (do pobrania z http://www.netbeans.org) oraz środowisko J2SE 1.4.2 (lub wyŝsze). 1. Uruchom narzędzie NetBeans IDE 5.5 2. Z menu głównego wybierz File New Project. W otwartym okienku kreatora projektu wybierz kategorię Web i typ projektu Web Application. Kliknij przycisk Next >.
3. Podaj nazwę projektu, Aplikacje internetowe JSP. Upewnij się, Ŝe wybranym serwerem aplikacji jest zagnieŝdŝony serwer Tomcat 5.5. Skróć ścieŝkę aplikacji do postaci /ai-jsp i zaznacz zgodność kodu źródłowego z 1.4. Kliknij przycisk Finish. 4. Nowy projekt automatycznie posiada domyślną stronę index.jsp, która nie będzie wykorzystywana w tym ćwiczeniu. Po lewej stronie ekranu widoczny jest nawigator projektu. UmoŜliwia on przeglądanie i rozbudowę projektu. 5. Kolejnym krokiem jest dodanie nowej strony JSP do projektu. Kliknij prawym przyciskiem myszy na węzeł Web Pages. Wybierz polecenie New JSP. Podaj nazwę pliku JSP, np. sort. Uwaga! Nie podawaj rozszerzenia pliku gdyŝ zostanie ono dodane automatycznie. Kliknij przycisk Finish.
6. Listę wszystkich stron (aktualnie dwie) moŝesz odnaleźć w nawigatorze projektu. Przełączanie pomiędzy stronami jest moŝliwe m.in. poprzez dwukrotne kliknięcie lewym przyciskiem myszy na nazwie pliku. Przejdź do edycji pliku sort.jsp.
7. Strona w pliku sort.jsp będzie realizowała sortowanie bąbelkowe zbioru liczb wyspecyfikowanych w definicji tej strony. Wprowadź do pliku sort.jsp następujący kod. <%@page contenttype="text/html"%> <%@page pageencoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <head> <title>buble Sort</title> </head> <%! int temp, i; %> <%! boolean change; %> <%! int data[] = { 1, 6, 4, 5, 3 ; %> <%! int size; %> <% size = data.length; do { change = false; i = size - 1; do { i--; if (data[i+1] < data[i]) { temp = data[i]; data[i] = data[i+1]; data[i+1] = temp; change = true; while (i!= 0); while (change); %> Posortowane liczby: <% for (int i = 0; i < size; i++) { %> <%= data [i] %> <% %> 8. Uruchom stronę za pomocą skrótu Shift+F6. MoŜna to takŝe zrobić klikając prawym przyciskiem na nazwie strony w nawigatorze projektu i wybierając Run nazwa pliku. W środowisko NetBeans wbudowany jest serwer aplikacji Tomcat, który zostanie automatycznie uruchomiony. Komunikat o uruchomienia serwera zostanie wyświetlony u dołu ekranu
W oknie przeglądarki zostanie wyświetlona strona sort.jsp 9. Przejdź do katalogu $NETBEANS_HOME/mywork/Aplikacje internetowe JSP/build/generated/src/org/apache/jsp i obejrzyj kod umieszczony w pliku sort_jsp.java. Przeanalizuj, w jaki sposób kod JSP został automatycznie przetłumaczony na postać serwletu. 10. Jeśli z jakimś formularzem nie jest związany atrybut action, wówczas zawartość formularza zostaje ponownie wysłana do strony JSP. Stwórz nową stronę form.jsp i umieść w niej poniŝszy kod, przetestuj działanie strony. <%@page contenttype="text/html"%> <%@page pageencoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <head> <title>form example</title> </head> <form> Nazwisko: <input type="text" name="last_name"/> <input type="submit" value="wyślij"/> </form><br/> <% if (request.getparameter("last_name")!= null) { %> Przesłane nazwisko to <%= request.getparameter("last_name") %> <% %> 11. Kolejnym krokiem będzie dodanie moŝliwości określenia przez uŝytkownika ilości sortowanych liczb. Parametr zostanie przekazany przez formularz HTML metodą POST. Liczby będą generowane losowo. Dodaj do projektu nową stronę (patrz krok 5) o nazwie better_sort.
12. Zastąp domyślnie wygenerowany kod w pliku better_sort.jsp zamieszczonym poniŝej. Zwróć uwagę na konieczność zaimportowania klasy java.util.random. <%@page contenttype="text/html"%> <%@page pageencoding="utf-8"%> <%@page import="java.util.random"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <head> <title>better Bubble Sort</title> </head> <BR> <form method="post"> <input type="text" name="c_numbers" value="10" /> <input type="submit" value="sortuj" /> </form><br/> <%! int temp, i; %> <%! boolean change; %> <%! int data[]; %> <%! int size; %> <% if (request.getparameter("c_numbers")!= null) size=integer.parseint(request.getparameter("c_numbers")); else size = 10; data = new int[size]; Random generator = new Random(); for (int i = 0; i < size; i++) data[i] = generator.nextint(100); do { change = false; i = size - 1; do { i--; if (data[i+1] < data[i]) { temp = data[i]; data[i] = data[i+1]; data[i+1] = temp; change = true; while (i!= 0); while (change); %> Posortowane liczby: <% for (int i = 0; i < size; i++) { %> <%= data[i] %> <% %>
13. Uruchom stronę za pomocą skrótu Shift+F6. Wprowadź liczbę dodatnia (większą od jeden), np. 25 i kliknij przycisk Sortuj. 14. Strony JSP mogą korzystać z innych stron poprzez włączanie ich zawartości do swojej strony. Niektóre elementy mogą być współdzielone przez wiele stron. Dodaj nową stronę o nazwie header.jsp. Tworząc stronę, zaznacz opcję umoŝliwiającą zbudowanie segmentu JSP. Umieść segment w katalogu WEB-INF\jspf.
15. Umieść w pliku header.jspf poniŝszy kod. <h2>jsp, sortowanie wersja <% if (request.getparameter("version")!= null) out.println(request.getparameter("version")); else out.println(" 0.1"); %> </h2> 16. Przejdź do pliku konfiguracyjnego web.xml i dodaj, bezpośrednio po znaczniku <web-app>, poniŝszy kod włączający poprawną kompilację plików *.jspf <servlet-mapping> <servlet-name>jsp</servlet-name> <url-pattern>*.jspf</url-pattern> </servlet-mapping> 17. Dodaj znacznik włączenia zawartości do pliku sort.jsp. Znacznik umieść na początku sekcji bezpośrednio po tagu otwierającym. Uruchom plik. <%@ include file="web-inf/jspf/header.jspf" %>... 18. Dodaj znacznik włączania zawartości do pliku better_sort.jsp. Znacznik umieść na początku sekcji bezpośrednio po tagu otwierającym. Tym razem, wykorzystaj akcję <jsp:include> i moŝliwość parametryzacji segmentu. Uruchom aplikację. <jsp:include page="web-inf/jspf/header.jspf?version=0.2"/>...
19. Uruchom stronę better_sort, wpisz w pole tekstowe tekst, który nie jest liczbą i kliknij przycisk Sortuj. 20. Dodaj stronę o nazwie error_page.jsp. Umieść w niej następujący kod. <%@page contenttype="text/html"%> <%@page pageencoding="utf-8"%> <%@page iserrorpage="true" %> <%@page import="java.io.printwriter"%> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body > <h1>błąd </h1> Niestety nie mogę wyświetlić poprawnej strony. <BR><BR><BR> Przyczyna błędu: <BR> <pre> <% exception.printstacktrace(new PrintWriter(out)); %> </pre> 21. Dodaj do strony better_sort, na początku pliku, poniŝszy kod. <%@page errorpage="error_page.jsp" %>
22. Powtórz działanie z kroku nr 19. Zwróć uwagę na adres URL wyświetlonej strony. ZauwaŜ, Ŝe uŝytkownik nie jest świadomy, Ŝe Ŝądanie zostało przekierowane do innej strony.
23. Kolejne ćwiczenie pokazuje wykorzystanie komponentów Java Bean. Kliknij prawym klawiszem myszy na ikonie projektu i z menu kontekstowego wybierz New Java Class. Utwórz klasę SessionTrackerBean i umieść ją w pakiecie ai.beans. 24. Umieść w klasie następujący kod. package ai.beans; import java.util.date; public class SessionTrackerBean { private String ip; private Date lastaccess; public SessionTrackerBean() {
25. Zaznacz pola ip i lastaccess, a następnie kliknij prawym klawiszem myszy w edytorze kodu i z menu kontekstowego wybierz opcję Refactor Encapsulate Fields. Upewnij się, Ŝe dla obu składowych zostaną wygenerowane metody getter i setter. Odznacz pole Preview All Changes. Kliknij przycisk Next >. 26. Utwórz nową stronę sessionbean.jsp. Umieść w niej poniŝszy kod. Zwróć uwagę na sposób wykorzystania komponentu Java Bean: inicjalizacji, odczytania i zapisania własności komponentu. Uruchom stronę i kilkakrotnie ją odświeŝ. <%@page contenttype="text/html"%> <%@page pageencoding="utf-8"%> <%@page import="java.util.date" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <head><title>jsp Beans</title></head> <jsp:usebean id="mybean" class="ai.beans.sessiontrackerbean" scope="session"/> <h2>jsp Session Bean</h2> Dane odczytane z komponentu Java Bean: <ul> <li>adres IP: <jsp:getproperty name="mybean" property="ip"/> <li>ostatni dostęp: <jsp:getproperty name="mybean" property="lastaccess"/> </ul> <jsp:setproperty name="mybean" property="ip" value="<%= request.getremoteaddr()%>"/> <jsp:setproperty name="mybean" property="lastaccess" value="<%= new Date() %>"/>
27. Kolejne ćwiczenie pokazuje sposób wykorzystania komponentów Java Bean do przetwarzania parametrów przekazanych z formularzy HTML. Utwórz nową klasę Java i nazwij ją UserFormBean.java. Umieść klasę w pakiecie ai.beans. Umieść w klasie poniŝszy kod. Następnie, dla pól username, email, password wygeneruj metody dostępowe getter i setter. package ai.beans; public class UserFormBean { private String username; private String email; private String password; public UserFormBean() { 28. Utwórz plik formbean.jsp i umieść w nim poniŝszy kod. Zwróć uwagę na sposób wczytania danych z formularza do komponentu Java Bean. <%@page contenttype="text/html"%> <%@page pageencoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <head><title>java Beans and HTML forms</title></head> <jsp:usebean id="formbean" class="ai.beans.userformbean" scope="request"/> <jsp:setproperty name="formbean" property="*"/> <form> <table> <tr><td>uŝytkownik</td><td><input type="text" name="username"/></td></tr> <tr><td>email</td><td><input type="text" name="email"/></td></tr> <tr><td>hasło</td><td><input type="password" name="password"/></td></tr> <tr><td colspan="2"><input type="submit" value="send"/></td></tr> </table> </form> <h2>dane przesłane z formularza</h2> <ul> <li>uŝytkownik: <jsp:getproperty name="formbean" property="username"/> <li>email: <jsp:getproperty name="formbean" property="email"/> <li>hasło: <jsp:getproperty name="formbean" property="password"/> </ul>
29. Podstawowym narzędziem dostępu do zmiennych, parametrów i nagłówków jest język wyraŝeń JSP EL. Utwórz nową stronę jspel.jsp i wypełnij ją następującym kodem. Zwróć uwagę na róŝne sposoby odczytywania zmiennych za pomocą języka wyraŝeń. <%@page contenttype="text/html"%> <%@page pageencoding="utf-8"%> <%@page import = "java.util.date" session="true"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <head><title>jsp EL Test</title></head> <form method="post"> Podaj imię: <input type="text" name="username" /> <input type="submit" value="prześlij" /> </form><br/> <h2>język wyraŝeń JSP EL</h2> Imię: ${param.username <br/> Przeglądarka: ${header["user-agent"] <br/> Ostatnia wizyta: ${sessionscope.lastvisit <br/> <% session.setattribute("lastvisit", new java.util.date()); %> 30. Ostatnim ćwiczeniem będzie przedstawienie poprawnego sposobu współdziałania między formularzem, komponentem Java Bean oraz stroną JSP. Utwórz prostą stronę yesterday.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"/> <title>data entry form</title> </head> <form action="controllerservlet" method="post"> <table> <tr><td>tekst</td> <td><select name="forecolor"> <option>red</option><option>green</option><option>black</option> </select></td></tr> <tr><td>tło</td> <td><select name="backcolor"> <option>yellow</option><option>magenta</option><option>gray</option> </select></td></tr> <tr><td colspan="2"><input type="submit" value="wyślij"></td></tr> </table> </form>
31. Następnie, przygotuj klasę Java Bean która będzie wykorzystywana do komunikacji między serwletem i stroną JSP. Dodaj do projektu plik ColorBean.java i umieść klasę w pakiecie ai.beans. Umieść w klasie poniŝszy kod. Nie zapomnij wygenerować metod getter i setter i dla obu pól składowych. package ai.beans; public class ColorBean { private String foregroundcolor; private String backgroundcolor; public ColorBean() { 32. W kolejnym kroku zbuduj serwlet o nazwie ControllerServlet i umieść go w pakiecie ai.servlets. Kod serwletu znajduje się poniŝej. Zwróć uwagę na wykorzystanie komponentu Java Bean do komunikacji między warstwami aplikacji. package ai.servlets; import java.io.*; import java.net.*; import javax.servlet.*; import javax.servlet.http.*; import ai.beans.colorbean; public class ControllerServlet extends HttpServlet { protected void doget(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { dopost(request, response); protected void dopost(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { ColorBean mybean = new ColorBean(); mybean.setforegroundcolor( request.getparameter("forecolor") ); mybean.setbackgroundcolor( request.getparameter("backcolor") ); request.setattribute("bean", mybean); ServletContext ctx = this.getservletcontext(); RequestDispatcher dispatcher = ctx.getrequestdispatcher("/yesterday.jsp"); dispatcher.forward(request, response);
33. W ostatnim kroku stwórz stronę yesterday.jsp i wypełnij poniŝszym kodem. Następnie wróć do strony yesterday.html i uruchom aplikację. Przetestuj jej działanie. <%@page contenttype="text/html"%> <%@page pageencoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <head> <title>yesterday</title> <style type="text/css"> body { background: ${bean.backgroundcolor; color: ${bean.foregroundcolor </style> </head> <h2>yesterday</h2> Yesterday,<br/> All my troubles seemed so far away,<br/> Now it looks as though they're here to stay,<br/> Oh, I believe in yesterday.<br/> <br/> Suddenly,<br/> I'm not half the man I used to be,<br/> There's a shadow hanging over me,<br/> Oh, yesterday came suddenly.<br/> <br/> Why she<br/> Had to go I don't know, she wouldn't say.<br/> I said,<br/> Something wrong, now I long for yesterday.<br/> <a href="yesterday.html">powrót</a>
Zadanie do samodzielnego wykonania Zaimplementuj grę kamień-papier-noŝyczki w postaci serwletu stanowiącego kontroler gry oraz stron JSP do wyświetlania wyniku. Pierwsza strona JSP stanowi statyczny formularz umoŝliwiający grającej(emu) w pierwszym kroku wybór jednej z opcji (kamień, papier, noŝyczki). Wybór zostaje przesłany do serwletu, który losuje odpowiedź i określa wynik gry. Łączna liczba wygranych i przegranych jest przekazywana między kolejnymi Ŝądaniami poprzez komponent JavaBean umieszczony w zasięgu sesji. Kontroler, po określeniu wyniku pojedynczej gry, uaktualnia komponent JavaBean zapamiętujący łączną liczbę wygranych i przegranych oraz przekazuje sterowanie do jednej z dwóch stron JSP (wygrana lub przegrana) wraz z komponentem zawierającym łączny wynik gry.