AWWW-1st3.6-l13.tresc-1.0: Różnice pomiędzy wersjami

Z Studia Informatyczne
Przejdź do nawigacjiPrzejdź do wyszukiwania
następna edycja →
WizualnieWikikod
Nie podano opisu zmian
 
Nie podano opisu zmian
Linia 1: Linia 1:
==Aplikacje internetowe - laboratorium==
==Zaawansowane aplikacje internetowe==
===Administracja serwerem aplikacji.===
===AJAX 2===
Celem ćwiczenia jest zainstalowanie i administracja prostym serwerem aplikacji. Ćwiczenie zostanie wykonane przy użyciu popularnego darmowego serwera aplikacji Apache Tomcat w wersji 5.5.17 (do pobrania ze strony [http://tomcat.apache.org/ http://tomcat.apache.org]) oraz (opcjonalnie) sterownika JDBC do bazy danych Oracle.
Celem tego laboratorium jest przybliżenie jednego z najbardziej znanych zastosowań technologii AJAX - Google Maps. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, wyświetlająca mapę pewnego obszaru, a następnie mapa ta zostanie wzbogacona o pewne interaktywne elementy.


1. Ściągnij plik apache-tomcat-5.5.17.exe ze strony [http://tomcat.apache.org/ http://tomcat.apache.org]
Do opracowania ćwiczeń wystarczy dowolny edytor tekstowy (znacznym ułatwieniem jest kolorowanie składni języka HTML, ale nie jest to wymagane). Powstające w trakcie ćwiczeń pliki można umieszczać w dowolnym katalogu na dysku twardym komputera osobistego lub serwera i otwierać przy pomocy prawie dowolnej przeglądarki graficznej (ograniczenia wynikają głównie z braku, lub słabego wsparcia danej przeglądarki dla technologii AJAX). Ważne jest też, aby w trakcie wykonywania ćwiczeń mieć dostęp do zasobów Gogle Maps (mieć aktywne połączenie z Internetem). Niektóre przeglądarki mogą wymagać od użytkownika potwierdzenia, iż użytkownik świadomie otwiera strony z aktywną zawartością.


2. Uruchom plik apache-tomcat-5.5.17.exe w celu rozpoczęcia instalacji serwera aplikacji. Kliknij przycisk <u>N</u>ext >.
====Ćwiczenie 1====
W tym ćwiczeniu zostanie przedstawiony prosty kod strony w języku HTML, wyświetlający mapę pewnego, ściśle określonego obszaru. Rozmiar i skala mapy także są tu dokładnie określone przez użytkownika.


* Należy zapoznać się z materiałami udostępnionymi na stronie: [http://www.google.com/apis/maps/documentation/ http://www.google.com/apis/maps/documentation/]
* Poniższy kod należy umieścić w dowolnym pliku z rozszerzeniem ''html''
<tt>
<tt>


{|border="2" cellspacing="0" cellpadding="4" width="100%"
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
|&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN"<br>&nbsp;&nbsp;&nbsp;&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;<br>&lt;html&nbsp;xmlns="http://www.w3.org/1999/xhtml"&gt;<br>&nbsp;&nbsp;&lt;head&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;http-equiv="content-type"&nbsp;content="text/html;&nbsp;charset=utf-8"/&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Google&nbsp;Maps&nbsp;JavaScript&nbsp;API&nbsp;Example&lt;/title&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src="http://maps.google.com/maps?file=api&amp;v=2"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type="text/javascript"&gt;&lt;/script&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type="text/javascript"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;//&lt;!<nowiki>[</nowiki>CDATA<nowiki>[</nowiki><br><br>&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;load()&nbsp;<nowiki>{</nowiki><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(GBrowserIsCompatible())&nbsp;<nowiki>{</nowiki><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;map&nbsp;=&nbsp;new&nbsp;GMap2(document.getElementById("map"));<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map.setCenter(new&nbsp;GLatLng(52.4,16.95),&nbsp;16);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<nowiki>}</nowiki><br>&nbsp;&nbsp;&nbsp;&nbsp;<nowiki>}</nowiki><br><br>&nbsp;&nbsp;&nbsp;&nbsp;//<nowiki>]]</nowiki>&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;<br>&nbsp;&nbsp;&lt;/head&gt;<br><br>&nbsp;&nbsp;&lt;body&nbsp;onload="load()"&nbsp;onunload="GUnload()"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="map"&nbsp;style="width:&nbsp;800px;&nbsp;height:&nbsp;600px"&gt;&lt;/div&gt;<br>&nbsp;&nbsp;&lt;/body&gt;<br>&lt;/html&gt;
[[Image:AWWW-1st3_6-l13_tresc-1_0_01.png]]
 
|-
|}
 
</tt>
 
3. Zapoznaj się z licencją Apache Licence na której rozpowszechniane jest oprogramowanie Apache Tomcat. Kliknij przycisk I <u>A</u>gree.
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_02.png]]
 
|-
|}
 
</tt>
 
4. Wybierz rodzaj instalacji Normal. Rozwiń gałąź Tomcat. Masz możliwość zainstalować opcję Service która powoduje automatyczne uruchamianie serwera aplikacji w momencie uruchomienia systemu operacyjnego oraz opcję Native służącą do poprawy wydajności działania serwera aplikacji w środowisku produkcyjnym. Zaznacz chęć doinstalowania przykładów aplikacji internetowych. Kliknij przycisk <u>N</u>ext >.
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_03.png]]
 
|-
|}
 
</tt>
 
5. Wskaż katalog instalacyjny dla serwera aplikacji (możesz pozostawić domyślną lokalizację). Kliknij przycisk <u>N</u>ext >.
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_04.png]]
 
|-
|-
|}
|}
Linia 59: Linia 21:
----
----


6. Wskaż port TCP/IP na którym ma być uruchomiony serwer aplikacji oraz nazwę i hasło użytkownika, który będzie miał prawo administrowania serwerem aplikacji. Kliknij przycisk <u>N</u>ext >.
* Po zapisaniu można otworzyć dokument w przeglądarce internetowej.
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_05.png]]
 
|-
|}
 
</tt>
 
7. Wskaż lokalizację środowiska Java Runtime Environment (koniecznie w wersji 5.0). Kliknij przycisk <u>I</u>nstall.
 
<tt>
<tt>


{|border="2" cellspacing="0" cellpadding="4" width="100%"
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_06.png]]
[[Image:ZAWWW-2st1_2-l13_tresc-1_0_01.png]]


|-
|-
Linia 87: Linia 35:
----
----


8. Poczekaj na zakończenie procesu instalacji.
* Aby zwiększyć możliwości wyświetlanej mapy, można włączyć kontrolki pozwalające na sterowanie sposobem wyświetlania i powiększania mapy (http://www.google.com/apis/maps/documentation/v1/<nowiki> </nowiki>Adding_Controls_to_the_Map ).
 
<tt>
<tt>


{|border="2" cellspacing="0" cellpadding="4" width="100%"
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
|var&nbsp;map&nbsp;=&nbsp;new&nbsp;GMap2(document.getElementById("map"));<br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map.addControl(new&nbsp;GSmallMapControl());'''<br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map.addControl(new&nbsp;GMapTypeControl());'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map.setCenter(new&nbsp;GLatLng(52.4,16.95),&nbsp;16);
[[Image:AWWW-1st3_6-l13_tresc-1_0_07.png]]
 
|-
|-
|}
</tt>
9. Upewnij się, że opcja Run Apache Tomcat jest zaznaczona. Kliknij przycisk <u>F</u>inish.
<tt>
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_08.png]]
[[Image:ZAWWW-2st1_2-l13_tresc-1_0_02.png]]


|-
|-
Linia 113: Linia 49:
</tt>
</tt>


10. Poczekaj na uruchomienie usługi. Upewnij się, że w pasku systemowym jest obecna ikona Apache Tomcat.
====Ćwiczenie 2====
 
Korzystając z właściwości Google Maps API należy przygotować mapę, na której znajdą się przynajmniej 2 interesujące punkty (np. uczelnia i starówka).
<tt>


{|border="2" cellspacing="0" cellpadding="4" width="100%"
* Linią ciągłą należy zaznaczyć drogę pomiędzy tymi punktami
|align = "center"|
* Markerami zaznaczysz interesujące miejsca – muzea, teatry, .... Po kliknieciu na marker powinna się pojawiać krótka informacja o tym miejscu
[[Image:AWWW-1st3_6-l13_tresc-1_0_09.png]]
* W miejscu, w którym znajduje się siedziba interesującej firmy umieścisz jej logo
<br>
* Chwilę po załadowaniu mapa zacznie się przesuwać tak, aby w jej środku znalazł się najpierw początek, a później koniec trasy.
[[Image:AWWW-1st3_6-l13_tresc-1_0_10.png]]
 
|-
|}
 
</tt>
 
11. Uruchom przeglądarkę internetową i połącz się z adresem [http://localhost:8080/ http://localhost:8080]
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_11.png|512px]]
 
|-
|}
 
</tt>
 
12. Kliknij na odnośnik <font color="#0000FF"><u>Tomcat Manager</u></font> w lewej górnej części okna. Wprowadź nazwę i hasło użytkownika, którego stworzyła(e)ś w trakcie instalacji serwera aplikacji.
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_12.png|512px]]
 
|-
|}
 
</tt>
 
----
 
13. Okno przedstawia listę wszystkich aplikacji, które są aktualnie zainstalowane w serwerze aplikacji. Kliknij prawym przyciskiem myszy na odnośniku <u>/jsp-examples</u> i wybierz opcję Otwórz w nowym oknie. Możesz poświęcić chwilę na obejrzenie prostych przykładów zastosowania języka JSP EL, plików znaczników, dokumentów JSP XML, i innych.
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_13.png|372px]]
 
|-
|}
 
</tt>
 
14. Wróć do okna zarządcy serwera aplikacji i wybierz komendę <u>Stop</u> odnoszącą się do aplikacji <u>/jsp-examples</u>. W okienku pop-up naciśnij przycisk OK. Wróć do okna z przykładami JSP i odśwież zawartość okna przeglądarki.
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_14.png|373px]]
 
|-
|}
 
</tt>
 
----
 
15. Zainstalujmy teraz przykładową aplikację internetową przygotowaną w postaci gotowego archiwum WAR (Web Archive). Przejdź do okna zarządcy serwera aplikacji. Sekcja Deploy pozwala na zainstalowanie aplikacji spakowanej w postaci pliku *.war umieszczonej po stronie serwera lub umieszczonej na komputerze lokalnym. Znajdź pole Select WAR file to upload i kliknij przycisk Przeglądaj… Przejdź następnie do katalogu %CATALINA_HOME%\webapps\tomcat-docs\appdev\sample (zmienna %CATALINA_HOME% wskazuje na katalog instalacji serwera Tomcat) i zaznacz plik sample.war. Kliknij przycisk Otwórz. Kliknij przycisk Deploy.
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_15.png|512px]]
 
|-
|}
 
</tt>
 
16. Kliknij na odnośnik <u>/sample</u> w bloku Applications i obejrzyj przykładową aplikację
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_16.png|353px]]
 
|-
|}
 
</tt>
 
----
 
17. Zobaczmy teraz, jak aplikacja <u>/sample</u> jest fizycznie zlokalizowana na dysku. Przejdź do katalogu %CATALINA_HOME%\webapps. To jest katalog zawierający wszystkie aplikacje zainstalowane w serwerze aplikacji. Archiwum sample.war zostało załadowane właśnie tutaj. Pierwsze odwołanie do adresu URL [http://localhost:8080/sample http://localhost:8080/sample] spowodowało automatyczne rozpakowanie tego pliku. Przejdź do katalogu sample. Katalog images zawiera wykorzystany na jednej ze stron obraz tomcat.gif. Katalog META-INF zawiera pusty plik MANIFEST.MF. W tym katalogu, opcjonalnie, mógłby się znaleźć deskryptor kontekstu aplikacji (czyli plik konfiguracyjny aplikacji internetowej). Katalog WEB-INF zawiera deskryptor wdrożenia aplikacji internetowej web.xml. Otwórz i zapoznaj się z zawartością tego pliku.
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_17.png|522px]]
 
|-
|}
 
</tt>
 
----
 
18. W pliku zdefiniowano jeden serwlet o nazwie HelloServlet zaimplementowany w postaci klasy mypackage.Hello i dostępny pod adresem <u>/hello</u> w ramach kontekstu aplikacji <u>/sample</u>. Otwórz adres [http://localhost:8080/sample/hello http://localhost:8080/sample/hello] i sprawdź, czy serwlet tam działa. W katalogu WEB-INF mieszczą się także źródła i postać skompilowana aplikacji internetowej. W podkatalogu classes/mypackage mieści się kod serwletu w pliku Hello.class, a źródło serwletu mieści się w podkatalogu src/mypackage w pliku Hello.java. Pliki *.html i *.jsp są umieszczone bezpośrednio w głównym katalogu sample.
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_18.png|605px]]
 
|-
|}
 
</tt>
 
19. Automatyczne rozpakowanie i instalacja aplikacji były możliwe ze względu na właściwą konfigurację serwera aplikacji. Podstawowym plikiem konfiguracyjnym jest plik %CATALINA_HOME%\conf\server.xml. Otwórz ten plik i znajdź w nim opcję autoDeploy. Poniższy fragment definiuje główny katalog w którym są umieszczane aplikacje (atrybut appBase), automatyczne rozpakowywanie archiwów *.war (atrybut unpackWARs), oraz automatyczną instalację rozpakowanych plików (atrybut autoDeploy).
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "justify"|<'''Host'''&nbsp;name="localhost"&nbsp;appBase="webapps"<br>&nbsp;&nbsp;unpackWARs="true"&nbsp;autoDeploy="true"<br>&nbsp;&nbsp;xmlValidation="false"&nbsp;xmlNamespaceAware="false">
|-
|}
 
</tt>
 
----
 
20. Wróć do katalogu %CATALINA_HOME%\webapps\sample\WEB-INF i dodaj do pliku web.xml poniższy kod
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "justify"|<'''security-constraint'''><br>&nbsp;&nbsp;<'''display-name'''>Security&nbsp;Constraint<'''/display-name'''><br>&nbsp;&nbsp;<'''web-resource-collection'''><br>&nbsp;&nbsp;&nbsp;&nbsp;<'''web-resource-name'''>Protected&nbsp;Area<'''/web-resource-name'''><br>&nbsp;&nbsp;&nbsp;&nbsp;<'''url-pattern'''>/hello<'''/url-pattern'''><br>&nbsp;&nbsp;&nbsp;&nbsp;<'''http-method'''>GET<'''/http-method'''><br>&nbsp;&nbsp;<'''/web-resource-collection'''><br>&nbsp;&nbsp;<'''auth-constraint'''><br>&nbsp;&nbsp;&nbsp;&nbsp;<'''role-name'''>helloRole<'''/role-name'''><br>&nbsp;&nbsp;<'''/auth-constraint'''><br><'''/security-constraint'''><br><br><'''login-config'''><br>&nbsp;&nbsp;<'''auth-method'''>BASIC<'''/auth-method'''><br>&nbsp;&nbsp;<'''realm-name'''>Basic&nbsp;Authentication&nbsp;Area<'''/realm-name'''><br><'''/login-config'''>
|-
|}
 
</tt>
 
21. Przejdź do okna zarządcy serwera aplikacji i przeładuj aplikację <u>/sample</u> (odnośnik <u>Reload</u>)
 
22. Spróbuj otworzyć w przeglądarce adres [http://localhost:8080/sample/hello http://localhost:8080/sample/hello]
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_19.png|605px]]
 
|-
|}
 
</tt>
 
23. Kod wprowadzony do deskryptora wdrożenia web.xml definiuje ograniczenie bezpieczeństwa nazwane Security Constraint i obejmujące sobą adres URL /hello w kontekście aplikacji. Ograniczenie dotyczy wołania tego adresu za pomocą metody GET. Jedynie użytkownicy posiadający rolę helloRole otrzymują dostęp do chronionego zasobu. Sposób logowania został ustawiony na Basic, co oznacza wykorzystanie wewnętrznego mechanizmu przeglądarki.
 
24. Przejdź do katalogu %CATALINA_HOME%\conf\ i otwórz w dowolnym edytorze plik tomcat-users.xml. Dodaj do pliku poniższe linie
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "justify"|<'''role'''&nbsp;rolename="helloRole"/><br><'''user'''&nbsp;username="scott"&nbsp;password="tiger"&nbsp;roles="helloRole"/>
|-
|}
 
</tt>
 
25. Restartuj serwer aplikacji. Otwórz konsolę MS-DOS i wydaj poniższe komendy
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_20.png]]
 
|-
|}
 
</tt>
 
26. Ponownie otwórz w przeglądarce adres [http://localhost:8080/sample/hello http://localhost:8080/sample/hello] i wpisz nazwę i hasło utworzonego przez siebie użytkownika.
 
27. Serwer aplikacji Tomcat umożliwia także konfigurowanie połączeń do zewnętrznych zasobów, np. do baz danych. W kolejnym kroku zdefiniujemy połączenie z bazą danych na poziomie serwera aplikacji i wykorzystamy je do stworzenia testowej strony JSP. Przejdź do katalogu %CATALINA_HOME%\conf\ i dodaj do pliku server.xml, tuż przed zamykającym znacznikiem </Host>, poniższy kod (oczywiście wpisz właściwe parametry połączenia z serwerem bazy danych i właściwe konto w bazie danych)
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "justify"|<'''Context'''&nbsp;path="/sample"><br>&nbsp;&nbsp;<'''Resource'''&nbsp;name="jdbc/oracle"&nbsp;auth="Container"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type="javax.sql.DataSource"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;driverClassName="oracle.jdbc.driver.OracleDriver"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url="jdbc:oracle:thin:@''host'':''port'':''sid''"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;username="scott"&nbsp;password="tiger"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maxActive="20"&nbsp;maxIdle="10"&nbsp;maxWait="-1"/><br></'''Context'''>
|-
|}
 
</tt>
 
28. Do prawidłowej pracy aplikacji konieczna jest dostępność sterownika JDBC dla bazy danych Oracle. Umieść sterownik w katalogu %CATALINA_HOME%\common\lib (jest to katalog bibliotek wykorzystywanych przez serwer aplikacji wewnętrznie)
 
29. Aplikacja testowa będzie wykorzystywać bibliotekę znaczników JSTL. Umieść biblioteki JSTL w katalogu %CATALINA_HOME%\shared\lib (jest to katalog bibliotek wykorzystywanych wspólnie przez aplikacje)
 
30. Restartuj serwer aplikacji
 
31. Przejdź do katalogu %CATALINA_HOME%\webapps\sample i utwórz w nim nowy plik test.jsp. Umieść w pliku test.jsp poniższy kod
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "justify"|<%@&nbsp;'''taglib'''&nbsp;uri="http://java.sun.com/jsp/jstl/sql"&nbsp;prefix="sql"&nbsp;%><br><%@&nbsp;'''taglib'''&nbsp;uri="http://java.sun.com/jsp/jstl/core"&nbsp;prefix="c"&nbsp;%><br><br><'''sql:query'''&nbsp;var="rs"&nbsp;dataSource="jdbc/oracle"><br>&nbsp;&nbsp;select&nbsp;*&nbsp;from&nbsp;emp<br><'''/sql:query'''><br><br><'''html'''><br>&nbsp;&nbsp;<'''head'''><br>&nbsp;&nbsp;&nbsp;&nbsp;<'''title'''>DB&nbsp;Test</'''title'''><br>&nbsp;&nbsp;<'''/head'''><br>&nbsp;&nbsp;<'''body'''><br><br>&nbsp;&nbsp;<'''h2'''>Results<'''/h2'''><br><br>&nbsp;&nbsp;<'''c:forEach'''&nbsp;var="row"&nbsp;items="${rs.rows}"><br>&nbsp;&nbsp;&nbsp;&nbsp;${row.empno}&nbsp;${row.ename}&nbsp;${row.job}<br/><br>&nbsp;&nbsp;<'''/c:forEach'''><br><br>&nbsp;&nbsp;<'''/body'''><br><'''/html'''>
|-
|}
 
</tt>
 
32. Otwórz w przeglądarce adres [http://localhost:8080/sample/test.jsp http://localhost:8080/sample/test.jsp]
 
<tt>
 
{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center"|
[[Image:AWWW-1st3_6-l13_tresc-1_0_21.png|239px]]
 
|-
|}
 
</tt>

Wersja z 11:12, 18 wrz 2006

Zaawansowane aplikacje internetowe

AJAX 2

Celem tego laboratorium jest przybliżenie jednego z najbardziej znanych zastosowań technologii AJAX - Google Maps. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, wyświetlająca mapę pewnego obszaru, a następnie mapa ta zostanie wzbogacona o pewne interaktywne elementy.

Do opracowania ćwiczeń wystarczy dowolny edytor tekstowy (znacznym ułatwieniem jest kolorowanie składni języka HTML, ale nie jest to wymagane). Powstające w trakcie ćwiczeń pliki można umieszczać w dowolnym katalogu na dysku twardym komputera osobistego lub serwera i otwierać przy pomocy prawie dowolnej przeglądarki graficznej (ograniczenia wynikają głównie z braku, lub słabego wsparcia danej przeglądarki dla technologii AJAX). Ważne jest też, aby w trakcie wykonywania ćwiczeń mieć dostęp do zasobów Gogle Maps (mieć aktywne połączenie z Internetem). Niektóre przeglądarki mogą wymagać od użytkownika potwierdzenia, iż użytkownik świadomie otwiera strony z aktywną zawartością.

Ćwiczenie 1

W tym ćwiczeniu zostanie przedstawiony prosty kod strony w języku HTML, wyświetlający mapę pewnego, ściśle określonego obszaru. Rozmiar i skala mapy także są tu dokładnie określone przez użytkownika.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(52.4,16.95), 16);
      }
    }

    //]]>
    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 800px; height: 600px"></div>
  </body>
</html>

  • Po zapisaniu można otworzyć dokument w przeglądarce internetowej.

var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(52.4,16.95), 16);

Ćwiczenie 2

Korzystając z właściwości Google Maps API należy przygotować mapę, na której znajdą się przynajmniej 2 interesujące punkty (np. uczelnia i starówka).

  • Linią ciągłą należy zaznaczyć drogę pomiędzy tymi punktami
  • Markerami zaznaczysz interesujące miejsca – muzea, teatry, .... Po kliknieciu na marker powinna się pojawiać krótka informacja o tym miejscu
  • W miejscu, w którym znajduje się siedziba interesującej firmy umieścisz jej logo
  • Chwilę po załadowaniu mapa zacznie się przesuwać tak, aby w jej środku znalazł się najpierw początek, a później koniec trasy.
Źródło: „https://wazniak.mimuw.edu.pl/index.php?title=AWWW-1st3.6-l13.tresc-1.0&oldid=52381”