Wybrane działy Informatyki Stosowanej

Transkrypt

1 Wybrane działy Informatyki Stosowanej Laboratorium 2. Formularze HTML. Metody przekazywania parametrów. Spis treści I. Wprowadzanie wartości parametrów w formularzu HTML... 1 II. Projektowanie formularza HTML do aplikacji Biletomat... 3 III. Odczytywanie danych z formularzy HTML w serwlecie... 4 IV. Parametry formularza HTML przesłane do serwletu metodą POST... 6 V. Zadanie do samodzielnego wykonania... 6 I. Wprowadzanie wartości parametrów w formularzu HTML 1. Utwórz na dysku Z:\ w Netbeans nowy projekt typu Java Class Library z kategorii Java o nazwie TrzyParametry 2. Dodaj do gałęzi Library wybierając z menu podręcznego opcję Add JAR/Folder plik: servlet-api.jar który znajdziesz w folderze $CATALINA_HOME\lib\servlet-api.jar 3. Dodaj do projektu nowy plik HTML o nazwie Formularz3p.html za pomocą menu File New File Zapoznaj się z jego budową. <html> <head> <title>todo supply a title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div>todo write content</div> </body> </html> 4. W sekcji <title> </title> dodaj opis strony Przekazywanie wartości parametrów, który zostanie wyświetlony w nagłówku okna przeglądarki internetowej. 5. Ustaw kolor tła dokumentu jako atrybut znacznika <body BGCOLOR="#FDF5E6"> 6. Poniżej znacznika <body> otwierającego sekcję treści dokumentu HTML, umieść napis Pobranie wartości trzech parametrów wyróżniając go znacznikiem <h1> <H1 ALIGN="CENTER">Przekazywanie wartości parametrów</h1> 7. Usuń dotychczasową zawartość sekcji <div> </div> zostawiając same znaczniki <div> </div> str. 1

2 8. Pomiędzy znacznikami sekcji <div> <div> dodaj deklarację formularza FORM. Atrybut ACTION formularza wskazuje na adres URL na serwerze WWW, który jest odpowiedzialny za obsługę żądania przetwarzania danych przekazywanych z poszczególnych pól formularza HTML. Adres URL można podawać zarówno w formie bezwzględnej (np. jak i względnej w odniesieniu do katalogu głównego aplikacji webowej <FORM ACTION=" METHOD="GET"> </FORM> Podstaw w miejscu adresu ACTION=" adres IP komputera wykładowcy. 9. Do pobrania informacji od użytkownika należy użyć elementów definiujących różnego rodzaju pola. Elementy te umieszczamy pomiędzy otwierającym i zamykającym znacznikiem elementu FORM, a w każdym z nich trzeba określić wartość atrybutu NAME. Najczęściej stosowanymi elementami formularzy są pola tekstowe. Dodaj do formularza deklarację pola tekstowego o etykiecie Parameter pierwszy oraz nazwie param1 umieszczając go wewnątrz znaczników <form> </form> Parameter pierwszy<br> <INPUT TYPE="TEXT" NAME="param1"> Dodaj w analogiczny sposób pola tekstowe o nazwie param2 oraz param3 poprzedzając je stosowanym opisem. 10. U dołu formularza umieść przycisk, którego kliknięcie spowoduje przesłanie danych z formularza na serwer. Aby wyśrodkować położenie przycisku na ekranie, użyj znacznika <center> <CENTER> <INPUT TYPE="SUBMIT"> </CENTER> 11. Plik Formularz3p.html przekopiuj na serwer Apache do katalogu ROOT. 12. Otwórz przeglądarkę i wpisz w niej adres: Wprowadź dowolne wartości do pól tekstowych i kliknij przycisk [Wyślij]. Jeśli plik HTML został skonfigurowany poprawnie i na komputerze wykładowcy działa serwlet ShowParametryTabela, uzyskasz odpowiedź serwera w postaci pliku HTML z odczytanymi wartościami parametrów. 14. CheckPoint 1: zgłoś wykonanie zadania wykładowcy str. 2

3 II. Projektowanie formularza HTML do aplikacji Biletomat W tym rozdziale opracujesz plik HTML do wprowadzenia danych do aplikacji Biletomat. Urządzenie, którego pracę będziesz modelować, sprzedaje bilety 20-minutowe, jednorazowe, dobowe oraz grupowe weekendowe. Cena 1 szt. wynosi odpowiednio 3.40, 4.40, oraz PLN. Dla biletów ulgowych stosuje się zniżkę 50%. Ogólny wygląd strony HTML aplikacji Biletomat w przeglądarce WWW przedstawia rys. 1 Rys. 1. Widok formularza wprowadzania danych w aplikacji Biletomat 1. Utwórz projekt BiletyZTM typu ClassLibrary. Zapisz go na dysku Z: 2. Dodaj do projektu plik Zakup.html 3. Za pomocą znacznika <title> opisz plik podając swoje imię, nazwisko oraz grupę 4. Usuń całą zawartość sekcji <body> zostawiając same znaczniki <body> 5. Dodaj na początku sekcji <body> napis Sprzedaż biletów ZTM wyróżniając go znacznikiem <h1> 6. Umieść niżej sekcję <form> z parametrami method= GET oraz action= podając jako adres docelowy adres IP komputera wykładowcy z portem 8084 oraz nazwą aplikacji /ShowParametryTabela (p. poprzednie zadanie) 7. Umieść pomiędzy znacznikami <form> </form> następujące elementy: 7.1. Tekst Wybierz rodzaj biletu (zwykłym tekstem) 7.2. Element typu radio do wyboru opcji biletu 20-minutowego (rodzaj biletu) <br><input type="radio" name="bilet" id="20min" value="3.40"/>20 min 7.3. W ten sam sposób dodaj kolejne elementy wyboru biletów jednorazowych, dobowych oraz grupowych. Zmień odpowiednie wartości w polach id oraz value 7.4. Element typu checkbox reprezentujący ulgę 50% <input type="checkbox" name="ulga">ulga 50% 7.5. Tekst Liczba sztuk (zwykłym tekstem) oddzielając do znacznikiem <br/> lub <p/> 7.6. Element sterowania typu select reprezentujący liczbę zakupionych biletów <br><select name="liczba"> str. 3

4 <option value="1">1 szt.</option> <option value="2">2 szt.</option> <option value="3">3 szt.</option> <option value="4">4 szt.</option> <option value="5">5 szt.</option> </select> 7.7. Tekst Wpłacono PLN (zwykłym tekstem) 7.8. Dodaj pole tekstowe w celu wprowadzenia wpłaconej kwoty <br><input type="text" name="kwota" value="0"/> 7.9. Dodaj przycisk [Wyślij] jako element typu <submit> 8. Sprawdzenie działania formularza Otwórz formularz w przeglądarce (można na razie nie kopiować na serwer Apache). Upewnij się że ma on wygląd maksymalnie zbliżony z rys. 1. Zwróć szczególną uwagę na kolejność rozmieszczenia elementów sterowania (kontrolek) oraz ich opis. Formularz powinien być łatwy w zrozumieniu oraz jednoznaczny 8.2. Skopiuj za pomocą programu Eksplorator Windows (lub innego menedżera plików) plik Zakup.html do katalogu ROOT serwera Apache Tomcat 8.3. Uruchom serwer Apache (jeśli był wcześniej uruchomiony, zatrzymaj i uruchom ponownie) 8.4. Otwórz w przeglądarce plik Zakup.html na serwerze Apache: Sprawdź, czy widok jest podobny do przedstawionego na rys Wprowadź przykładowe dane zakupu biletu 8.7. Wyślij wprowadzone dane na serwer klikając przycisk [Wyślij] 8.8. Zademonstruj wykładowcy uzyskaną odpowiedź 9. CheckPoint 2: zgłoś wykonanie zadania wykładowcy III. Odczytywanie danych z formularzy HTML w serwlecie 1. Dodaj do projektu klasę typu serwlet o nazwie ShowParametryTabela, koniecznie w pakiecie domyślnym (bez nazwy) 2. Przed blokiem try zadeklaruj zmienną title typu String następująco: String title = "Odczyt parametrów formularza HTML"; 3. Zastąp instrukcję out.println("<title>servlet ShowParametryTabela</title>"); na: out.println("<title>" + title + "</TITLE>"); 4. Zastąp instrukcję out.println("<h1>servlet ShowParametryTabela at " + request.getcontextpath() + "</h1>"); na poniższą: out.println("<h1>" + title + "</h1>"); str. 4

5 5. Umieść poniżej następujący fragment kodu programu out.println("<table BORDER=1 ALIGN=CENTER>\n"); out.println("<th BGCOLOR='#FFAD00'>Nazwa parametru</th>\n"); out.println("<th BGCOLOR='#FFAD00'>Wartość parametru</th>\n"); Enumeration parametry = request.getparameternames(); while (parametry.hasmoreelements()) { String nazwa = (String) parametry.nextelement(); out.print("<tr><td>" + nazwa + "</TD>\n<TD>"); String[] wartosci = request.getparametervalues(nazwa); out.println("<ul>"); for (int i = 0; i < wartosci.length; i++) { wartosci[i]=new String(wartosci[i].getBytes("ISO "), "ISO "); out.println("<li>" + wartosci[i]); } out.println("</ul></td>\n</tr>\n"); } out.println("</table>"); Pamiętaj o zaimportowaniu klasy Enumeration; (z menu podręcznego Fix Imports). 6. Skompiluj projekt <F9>. Podczas tej kompilacji powinien utworzyć się w folderze..build\classes plik ShowParametryTabela.class. 7. Po udanej kompilacji przekopiuj plik ShowParametryTabela.class do katalogu ROOT\WEB-INF\classes\ 8. Uaktualnij plik deskryptora web.xml, który masz otwarty w NetBeans, dopisując poniższy kod w odpowiednie miejsce: <servlet> <servlet-name>showparametrytabela</servlet-name> <servlet-class>showparametrytabela</servlet-class> </servlet> <servlet-mapping> <servlet-name>showparametrytabela</servlet-name> <url-pattern>/showparametrytabela</url-pattern> </servlet-mapping> 9. W pliku Zakup.html z Zadania 1 zmień instrukcję FORM ACTION na: <FORM ACTION="/ShowParametryTabela"> Zmodyfikowany plik Zakup.html przekopiuj na serwer do katalogu ROOT. 10. Nie zapomnij ponownie uruchomić serwera Apache Tomcat. 11. Otwórz przeglądarkę i wpisz w niej adres: Wpisz dowolne wartości parametrów, możesz używać spacji i znaków specjalnych. Przeanalizuj, w jakiej formie do adresu URL dopisywane są parametry wywołania. 12. Kliknij przycisk [Wyślij]. str. 5

6 13. Przeanalizuj odpowiedź serwera i porównaj ją z przedstawioną na rys. powyżej. CheckPoint 3: zgłoś wykonanie zadania wykładowcy IV. Parametry formularza HTML przesłane do serwletu metodą POST 1. Zmień w pliku Zakup.html w sekcji FORM metodę przekazywania danych na serwer z GET na POST 2. Przekopiuj zmodyfikowaną wersję pliku na serwer Apache Tomcat do katalogu ROOT 3. Otwórz stronę w przeglądarce WWW 4. Wprowadź przykładowe dane i wyślij je na serwer 5. Sprawdź czy wpisane wartości parametrów są widoczne w pasku adresu okna przeglądarki. V. Zadanie do samodzielnego wykonania 1. Dodaj do projektu nowy plik o nazwie Rejestracja.html 2. Utwórz w pliku formularz FORM, za pomocą którego można będzie przekazać do serwletu następujące informacje: a. Nazwisko studenta (pole tekstowe, name="nazwisko") b. Imię studenta (pole tekstowe, name="imie") c. Numer albumu (pole tekstowe, name="album") d. Przyciski RESET oraz SUBMIT 3. Opisz ww. pola zgodnie z rysunkiem 4. Formularz powinien przekazywać wartości ww. parametrów do serwleta działającego pod adresem wskazanym przez wykładowcę metodą GET 5. Umieść plik HTML na lokalnym serwerze Apache Tomcat 6. Otwórz plik w przeglądarce WWW str. 6

7 7. Wprowadź swoje imię, nazwisko oraz numer albumu 8. Wyślij dane na serwer i uzyskaj potwierdzenie rejestracji str. 7