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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <head> <title>buble Sort</title> </head> <body> <%! 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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <head> <title>form example</title> </head> <body> <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 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> <body><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. Uruchom stronę better_sort, wpisz w pole tekstowe tekst, który nie jest liczbą i kliknij przycisk Sortuj.
15. Dodaj stronę o nazwie error_page.jsp. Umieść w niej następujący kod. <%@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> 16. Dodaj do strony better_sort, na początku pliku, poniższy kod. <%@page errorpage="error_page.jsp" %> 17. Powtórz działanie z kroku nr 14. Zwróć uwagę na adres URL wyświetlonej strony. Zauważ, że użytkownik nie jest świadomy, że żądanie zostało przekierowane do innej strony.
18. 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. 19. 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() {
20. 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 >. 21. 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 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> <body> <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() %>"/>
22. 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() { 23. 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. <!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> <body> <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>
24. 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 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> <body> <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()); %> 25. 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> <body> <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>
26. 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() { 27. 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);
28. 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. <!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> <body> <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 (wersja łatwiejsza) Zadanie polega na zaimplementowaniu gry w zgadywanie liczby. Program składa się z jednej strony JSP, stanowiącej interfejs użytkownika i źródło logiki. Strona JSP zawiera formularz HTML umożliwiający podanie dowolnej liczby. Gra przebiega w następujący sposób: przed rozpoczęciem gry następuje wylosowanie liczby-zagadki z przedziału <0-100>. Następnie, gracz podaje liczbę z przedziału <0-100> używając do tego formularza HTML. W odpowiedzi na przesłanie formularza gracz jest informowany, czy podana przez niego liczba jest większa czy mniejsza od liczby-zagadki. zagadki. Gracz kontynuuje grę do momentu odgadnięcia zagadkowej liczby. Liczba-zagadka może być przekazana przez zmienną sesyjną, komponent JavaBean lub ciasteczko. Zadanie do samodzielnego wykonania (wersja trudniejsza) Zadanie polega na zaimplementowaniu gry w zgadywanie liczby. Program składa się z jednej strony JSP, stanowiącej interfejs użytkownika i źródło logiki programu oraz z jednego komponentu JavaBean służącego do przechowywania stanu gry. Strona JSP zawiera formularz HTML umożliwiający podanie dowolnej liczby. Gra przebiega w następujący sposób: przed rozpoczęciem ciem gry następuje wylosowanie liczby-zagadki z przedziału <0-100>. Następnie, gracz podaje liczbę z przedziału <0-100> używając do tego formularza HTML. W odpowiedzi na przesłanie formularza gracz jest informowany, czy podana przez niego liczba jest większa czy mniejsza od liczby-zagadki. zagadki. Gracz kontynuuje grę do momentu odgadnięcia zagadkowej liczby. Po odgadnięciu liczby-zagadki zagadki gracz jest informowany o liczbie wykonanych prób. Liczba-zagadka zagadka oraz liczba prób gracza są przechowywane w komponencie JavaBean i przekazywane w zasięgu request. Podpowiedź Utwórz komponent JavaBean o Gra. Umieść w nim składowe int zagadka oraz int proby.. Wylosuj początkową wartość liczby zagadki wykorzystując odwołanie do klasy java.util.random w konstruktorze komponentu JavaBean. Dodaj do komponentu metodę zwiększającą liczbę prób, aby łatwiej było wywołać tę metodę z poziomu strony JSP.