AWWW-1st3.6-l08.tresc-1.0

Z Studia Informatyczne
Przejdź do nawigacjiPrzejdź do wyszukiwania

Aplikacje WWW - laboratorium

JavaServer Pages Standard Tag Library

Celem ćwiczenia jest zapoznanie ze standardową biblioteką znaczników JSTL. W ramach ćwiczenia zostanie skonstruowany prosty sklep internetowy przy użyciu stron JSP i komponentu JavaBean. Biblioteka JSTL zostania wykorzystana do przetwarzania pliku XML, sterowania przepływem pracy oraz wyświetlania danych. Do wykonania ćwiczenia potrzebne jest zintegrowane środowisko programistyczne NetBeans IDE 5.0 (do pobrania z http://www.netbeans.org) oraz środowisko J2SE 1.4.2 (lub wyższe).

1. Uruchom narzędzie NetBeans IDE 5.0

2. Z menu głównego wybierz File->New Project. W oknie kreatora projektu wybierz kategorię Web i typ projektu Web Application. Kliknij przycisk Next >.

3. Podaj nazwę projektu, np. „labJSTL". Kliknij przycisk Finish.

4. Budowany sklep internetowy będzie oferował funkcję koszyka, w którym klient może umieszczać (lub z niego usuwać) produkty. Ze strony programisty wymaga to zapewnienia, że informacje o wybranych przez klienta produktach nie będą ulotne. W tym celu można zastosować komponent JavaBean (o zasięgu sesji) reprezentujący koszyk zakupów.

5. W nawigatorze projektu (znajduje się w lewej części okna) prawym przyciskiem myszy kliknij na węzeł Source Packages i wybierz opcję New->Java Package. Wprowadź nazwę pakietu, np. student.beans. Kliknij przycisk Finish.

6. Pod węzłem Source Packages został utworzony węzeł student.beans. Kliknij na nim prawym przyciskiem myszy i wybierz New->Java Class. Wprowadź nazwę klasy, np. shoppingCart i kliknij przycisk Finish.

7. Przejdź do edycji utworzonej klasy (dwukrotne kliknięcie na nazwie klasy w nawigatorze projektu). Klasa będzie oferowała możliwość przechowywania identyfikatorów produktów w koszyku wraz z ilością sztuk danego produktu. Takie dane można w łatwy sposób składować w tablicy haszowej, której kluczem jest identyfikator produktu a wartością liczba zamówionych sztuk tego produktu. Ponadto dostępne są metody do dodawania produktu (można dodawać po jednej sztuce), usuwania produktu (całość, niezależnie od ilości sztuk) oraz pobierania ilości różnych produktów i całej tablicy haszowej. Zastąp zawartość klasy shoppingCart poniższym kodem.

package student.beans;
import java.util.Hashtable;

public class shoppingCart {
    private Hashtable items;

    public shoppingCart() {
        this.items = new Hashtable();
    }

    public void add(String id_item) {
        if (this.items.containsKey(id_item)) {
            Integer quantity = (Integer)this.items.get(id_item);
            int newQuantity = quantity.intValue() + 1;
            this.items.put(id_item, new Integer(newQuantity));
        } else
            this.items.put(id_item, new Integer(1));
    }

    public Hashtable getItems() {
        return this.items;
    }
    public int getSize() {
        return items.size();
    }

    public void setNewItem(String id_item) {
        this.add(id_item);
    }

    public void setRemoveItem(String id_item) {
        this.items.remove(id_item);
    }
}

8. Dane na temat towarów oferowanych w sklepie będą znajdowały się w pliku XML. Plik zawiera opis części komputerowych. Struktura drzewa DOM (z przykładowymi wartościami) tego dokumentu została przedstawiona poniżej.

9. Kliknij prawym przyciskiem na węzeł Web Pages i wybierz New->XML Document. Podaj nazwę pliku, np. items_data (bez rozszerzenia). Kliknij przycisk Next > a następnie przycisk Finish. Przejdź do edycji pliku XML i wprowadź do niego poniższą zawartość.

<?xml version="1.0" encoding="UTF-8"?>
<computer_parts><part ID="10"><name>Procesor 3.8 GHz</name><price>450.50</price></part><part ID="25"><name>Mysz laserowa</name><price>65.20</price></part><part ID="40"><name>Klawiatura multimedialna</name><price>12</price></part><part ID="50"><name>Monitor LCD 19</name><price>960</price></part><part ID="60"><name>Monitor CRT 17</name><price>360</price></part></computer_parts>

10. Kolejnym krokiem jest utworzenie stron JSP, które będą służyły do zarządzania zawartością koszyka. Utworzony projekt automatycznie posiada główną stronę w pliku index.jsp. W nawigatorze projektu rozwiń węzeł Web Pages i przejdź do edycji głównej strony (dwukrotne kliknięcie myszą na nazwie pliku).

11. Na głównej stronie sklepu internetowego będą wyświetlone nazwy i ceny produktów, które zapisane są w pliku XML. Poniżej znajduję się kod głównej strony. Wszystkie potencjalne skryptlety zostały zastąpione odpowiednimi znacznikami JSTL. Dotyczy to zarówno odczytu, przetwarzania i wyświetlania dokumentu XML, jak również konstrukcji adresów URL oraz obsługi napisów w różnych językach. Umieść poniższy kod w pliku index.jsp.

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
<%@page import="java.util.Iterator"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   </head>
   <body>
     <jsp:useBean id="cart" class="student.beans.shoppingCart"
                  scope="session"/>
     <fmt:setBundle basename="student.properties.language" />
     <center>
         <h1><fmt:message key="title"/></h1>
         <c:import var="xmlfile" url="items_data.xml"/>
         <x:parse doc="${xmlfile}" var="result"/>
         <table border=1>
             <tr>
                 <td><fmt:message key="name"/></td>
                 <td><fmt:message key="price"/></td>
                 <td> </td>
             </tr>
             <x:forEach select="$result//part" var="currentPart">
                 <tr>
                     <td><x:out select="$currentPart/name"/></td>
                     <td><x:out select="$currentPart/price"/></td>
                     <c:set var="id_part">
                         <x:out select="$currentPart/@ID" />
                     </c:set>
                     <c:url value="/change_cart.jsp" var="addURL">
                         <c:param name="action" value="add"/>
                         <c:param name="id_part" value="${id_part}"/>
                     </c:url>
                     <td><a href="<c:out value="${addURL}"/>">
                         <fmt:message key="add_to_cart"/></a></td>
                    </tr>
                </x:forEach>
            </table>
            <BR><fmt:message key="num_of_items"/>
                <c:out value="${cart.size}"/><BR>
            <a href="show_cart.jsp"><fmt:message key="show_cart"/></a>
        </center>
    </body>
</html>

12. W środowisku NetBeans zostanie wyświetlona informacja o wykrytym problemie. Użyte znaczniki nie mogą zostać rozpoznane. Jest to spowodowane tym, że biblioteka JSTL nie jest domyślnie włączona do projektu.

13. W nawigatorze projektu kliknij prawym przyciskiem na węzeł Libraries i wybierz Add Library. W okienku wyboru biblioteki wybierz JSTL 1.1 i kliknij przycisk Add Library.

14. Następnym krokiem ćwiczenia jest dodanie odpowiednich wpisów dla różnych wersji językowych. W nawigatorze projektu dodaj pakiet student.properties (patrz opis dodania pakietu w punkcie 5). Kliknij prawym przyciskiem myszy na węźle utworzonego pakietu i wybierz New->Properties File. Wpisz nazwę pliku, np. language i kliknij przycisk Finish.

15. Rozwiń węzeł language.properties, kliknij na nim prawym przyciskiem myszy i wybierz Add Locale.

16. W polu kodu języka wpisz pl i kliknij przycisk OK.

17. Postępując tak samo, jak w kroku 16, dodaj lokację z kodem języka en. Ostatecznie w nawigatorze projektu powinna być następująca struktura.

18. Kliknij prawym przyciskiem myszy na węźle dla lokacji pl. Wybierz Add Property. W pole key wpisz nazwę klucza, przez który następuje odwołanie z dokumentu JSP do wartości (pole value) w odpowiednim pliku językowym, np. dla klucza „title" polska wartość to „Sklep". Kliknij przycisk OK.

19. Postępując zgodnie z punktem 17 wprowadź do lokacji pl-polski następujące pary klucz-wartość.

title=Sklep
name=Nazwa
price=Cena
add_to_cart=Dodaj do koszyka
remove_from_cart=Usuń wszyskie
show_cart=Pokaż koszyk
added_to_cart=Dodano do koszyka.
num_of_items=Liczba różnych produktów w koszyku:
error=Błąd
cart=Zawartość koszyka
quantity=Ilość
go_back=Wróć
total_price=Wartość koszyka:
removed_from_cart=Usunięto z koszyka

20. Dla lokacji en-angielski i lokacji domyślnej wprowadź następujący tekst (możesz bezpośrednio skopiować i wkleić tekst do pliku z lokacją).

title=Shop
name=Name
price=Price
add_to_cart=Add to cart
remove_from_cart=Remove all
show_cart=Show cart
added_to_cart=Added to cart.
num_of_items=Number of different products in cart:
error=Error
removed_from_cart=Removed form cart.
cart=Cart
quantity=Quantity
go_back=Go back
total_price=Total price:
removed_from_cart=Removed from cart.

21. Następnym krokiem jest zapewnienie możliwości dodawania i usuwania produktów z koszyka. Jednym z rozwiązań jest skonstruowanie odpowiedniej strony JSP (można także utworzyć np. servlet). Utwórz nową stronę klikając prawym przyciskiem myszy na węzeł Web Pages i wybierając New->JSP. Jako nazwę podaj change_cart. Kliknij przycisk Finish.

22. Do sterowania przepływem pracy (wybór między dodawaniem i usuwaniem produktów) można wykorzystać znaczniki JSTL. Przejdź do edycji utworzonej strony i zastąp automatycznie wygenerowany kod poniższym.

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
     <META HTTP-EQUIV="Refresh"  CONTENT="2; URL=index.jsp">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
     <center><font color="red"><h3>
     <jsp:useBean id="cart" class="student.beans.shoppingCart"
                  scope="session"/>
     <fmt:setBundle basename="student.properties.language" />
     <c:if test="${!empty param.action and !empty param.id_part}">
         <c:choose>
             <c:when test="${param.action ==’add’}">
                 <fmt:message key="added_to_cart"/>
                 <jsp:setProperty name="cart" property="newItem"
                                  value="${param.id_part}"/>
             </c:when>
             <c:when test="${param.action == ’remove’}">
                 <jsp:setProperty name="cart" property="removeItem"
                                  value="${param.id_part}"/>
                 <fmt:message key="removed_from_cart"/>
             </c:when>
             <c:otherwise>
                 <fmt:message key="error"/>
             </c:otherwise>
         </c:choose>
     </c:if>
     </h3></font></center>
 </body>
</html>

23. Ostatnim krokiem w budowie sklepu jest dodanie możliwości przeglądania produktów umieszczonych w koszyku klienta. Dodaj stronę JSP (patrz punkt 20) o nazwie show_cart.

24. Strona służąca do przeglądania zawartości koszyka jest podobna do głównej strony, gdzie klient dokonuje wyboru produktów. Informacje na temat produktów pochodzą z komponentu JavaBean, gdzie przechowywane są identyfikatory i ilości zamówionych produktów. Na podstawie identyfikatorów produktów odczytywane (przeszukiwanie XML z użyciem XPath) i wyświetlane są pozostałe dane dotyczące produktów. Analogicznie do poprzednich stron JSP, również tutaj skryptlety zostały wyeliminowane przez użycie znaczników JSTL. Wprowadź poniższy kod do pliku strony show_cart.

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.Hashtable"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <jsp:useBean id="cart" class="student.beans.shoppingCart"
                 scope="session"/>
    <fmt:setBundle basename="student.properties.language" />
    <center><BR>
      <fmt:message key="cart"/><BR><BR>
      <c:import var="xmlfile" url="items_data.xml"/>
      <x:parse doc="${xmlfile}" var="result"/>
      <c:set var="total_price" value="0"/>
      <table border=1>
         <tr><td><fmt:message key="name"/></td>
             <td><fmt:message key="price"/></td>
             <td><fmt:message key="quantity"/></td><td> </td></tr>
         <c:forEach var=’item’ items=’${cart.items}’>
            <c:set var="key" value="${item.key}"/>
            <x:forEach select="$result//part[@ID=$key]" var="currentPart">
              <tr>
              <x:set var="price" select="string($currentPart/price)"/>
              <c:set var="total_price" value="${total_price + price *
                     item.value}"/>
              <td><x:out select="$currentPart/name"/></td>
              <td><fmt:formatNumber><c:out
                   value="${price}"/></fmt:formatNumber></td>
              <c:set var="id_part">
                  <x:out select="$currentPart/@ID" />
              </c:set>
              <c:url value="/change_cart.jsp" var="addURL">
                 <c:param name="action" value="remove"/>
                 <c:param name="id_part" value="${id_part}"/>
              </c:url>
              <td><c:out value="${item.value}"/></td>
              <td><a href="<c:out value="${addURL}"/>">
                  <fmt:message key="remove_from_cart"/></a></td>
              </tr>
            </x:forEach>
         </c:forEach>
      </table>
      <BR>
      <fmt:message key="total_price"/>
      <c:out value="${total_price}"/><BR><BR>
      <a href="index.jsp"><fmt:message key="go_back"/></a>
    </center>
  </body>
</html>

25. Przejdź do edycji głównego pliku (index.jsp) i uruchom aplikację za pomocą klawiszy SHIFT+F6. Przetestuj działanie sklepu.

26. Sprawdź działanie sklepu dla innej lokacji. Możesz to zrobić używając np. przeglądarki Internet Explorer. Uruchom przeglądarkę. Z głównego menu wybierz Narzędzia->Opcje internetowe, na zakładce Ogólne kliknij przycisk Języki. Otworzy się panel, w którym można dodawać/usuwać preferowane języki oraz zmieniać ich priorytet. Umieść na pierwszym miejscu język angielski[en]. Uruchom stronę sklepu w przeglądarce Internet Explorer. Sprawdź, w jaki sposób wyświetlane są liczby na stronie z zawartością koszyka na stronie dla lokacji pl i dla lokacji en.

Źródło: „https://wazniak.mimuw.edu.pl/index.php?title=AWWW-1st3.6-l08.tresc-1.0&oldid=37062”