Aktywne i dynamiczne strony WWW

Transkrypt

Aktywne i dynamiczne strony WWW
Elementy projektowania stron WWW
Część 3
Formularze HTML
Aktywne strony WWW
dr inŜ. Tomasz Traczyk
Dynamiczne strony WWW
2
Formularze HTML
Do czego to słuŜą
MoŜliwości
• Do tworzenia interaktywnych stron WWW
– bez konieczności wykonywania kodu na
kliencie
Sposób działania
• Przeglądarka wysyła URL strony zawierającej
formularz
• Serwer WWW wysyła stronę z formularzem
(statyczną lub dynamiczną)
• UŜytkownik wypełnia pola formularza
• Atrybut action formularza określa URL pod
jaki ma zostać odesłany wynik wypełniania
formularza
• Po wciśnięciu przycisku submit dane
z formularza są wysyłane za pomocą metody
– post – dane w treści Ŝądania HTTP
(metoda zalecana)
– get – dane w URL Ŝądania HTTP
(jako parametry)
• Rodzaje pól
– tekstowe jedno- i wieloliniowe
– listy rozwijane i grupy radiowe
– pola wyboru (checkboxes)
– przyciski
♦ standardowe (submit i reset)
♦ niestandardowe – kod JavaScript
• Formatowanie formularza
– wszelkie moŜliwości HTML
– pola w formularzu są dowolnie wplecione
w tekst HTML
• Oprogramowanie
– w JavaScript – na kliencie
– na serwerze (wymaga wysłania)
T.Traczyk: WWW, cz. 3
Formularze HTML – przykład
<body>
<form action="mailto:[email protected]?Pytanie" method="POST">
Wybierz przedmiot z listy
<select name="przedmiot">
<option selected>WWW</option>
<option>POB</option>
</select><p>
Wpisz pytanie <textarea name="pytanie" rows="2" cols="50"></textarea><p>
Dotyczy
<input name="dotyczy" type="radio" value="W" checked>wykładu</input>
<input name="dotyczy" type="radio" value="C"
>ćwiczeń</input>
<p>
Pilne? <input name="status" type="checkbox" value="PILNE"/><p>
Wpisz swój adres e-mail <input name="nadawca" type="text"/><p>
<input type="submit" value="Wyślij"/>
<input type="reset" value="Skasuj"/>
</form>
</body>
• Serwer odpowiada na przesłane dane
z formularza, odsyłając odpowiednią
(dynamiczną) stronę WWW
3
4
Aktywne strony WWW
Co to jest?
Do czego to powinno słuŜyć?
• Strony WWW
– statyczne lub dynamiczne
– zawierające kody programów
wykonywanych na kliencie
• Do wykonywania operacji, które nie powinny
wymagać odwołania do serwera, np.
– podstawowa walidacja wprowadzanych
danych
– reakcje na przyciśnięcie przycisków
• Do tworzenie niezbędnych rozszerzeń
funkcjonalnych HTML, np.
– przetwarzanie wysp danych
– podpowiedzi
Technologie
•
•
•
•
JavaScript (ECMAScritp)
Aplety
Flash
VBScript, ActiveX itp.
JavaScript – wprowadzenie
Co to jest?
Działanie
• Skrypty zagnieŜdŜane w kodzie HTML
– zwyczajowo skrypty umieszcza się w
komentarzu dla zmylenia archaicznych
przeglądarek
• Skrypty składają się z
– kodu wykonywanego bezpośrednio
– funkcji
• Zdarzenia
– predefiniowane
– przypisywane przez specjalne atrybuty
elementów HTML do kodu
♦ skryptów do bezpośredniego
wykonania
♦ wywołań funkcji
Do czego to nie powinno słuŜyć?
• Do realizacji funkcjonalności osiągalnych za
pomocą samego HTML
• Do zaśmiecania stron „bajerami”
5
6
function sprawdz(pole) {
if (isNaN(pole.value)) {
window.alert('Błąd');
pole.focus();
return false
};
return true
}
</script>
</head>
<body>
<form onSubmit="return sprawdz(this.pole)">
Wpisz liczbę <input name="pole" type="text"><p>
<input type="button" value="Przycisk"
onmouseover="window.status='MoŜna to wcisnąć'"
onmouseout="window.status=''"
onclick="if (sprawdz(form.pole)) {przycisk()}"/>
</form>
</body>
7
• Cechy
– predefiniowane
♦ ograniczone moŜliwości tworzenia
własnych klas (bez dziedziczenia)
♦ moŜna tworzyć nowe wystąpienia
niektórych predefiniowanych klas
♦ niektóre obiekty są tworzone
automatycznie
– mają atrybuty i metody, do których moŜna
odwołać się w skryptach
• Rodzaje obiektów (wybór)
– związane z elementami dokumentu HTML
– związane ze środowiskiem przeglądarki,
np. navigator, window, history,
document
– pełniące rolę swoistych bibliotek,
np. Date, Math
– związane z modelami DOM i SAX
– this – obiekt „bieŜący”
JavaScript – przykład
<head>
<script language="JavaScript">
function przycisk()
{ window.alert('Wciśnięty'); }
Obiekty w JavaScript
• Język przeznaczony do wykonywania
w przeglądarkach WWW
– interpretowany przez przeglądarki
• Składniowo przypominający język Java,
ale znacznie prostszy
• Oparty na obiektach (predefiniowanych)
Aplety – wprowadzenie
Co to takiego?
Technologia
• Mini-aplikacje w Javie
• Działające po stronie klienta
– maszyna wirtualna Javy wbudowana
w przeglądarkę
Zalety
• Bardzo duŜe moŜliwości
(silny język programowania)
• Przenośność
• Niezłe bezpieczeństwo
– zwykłe aplety nie mają praw „grzebania”
na komputerze klienta
• Na serwerze umieszcza się skompilowany
program apletu (kod przenośny)
• Na stronie HTML umieszcza się element
APPLET lub OBJECT, np:
<APPLET code="aplet.class"
codebase="URL"
width="300" height="200"
alt="Tekst zastępczy">
<PARAM name="nazwa" value="wartość">
...
</APPLET>
Wady
• Umiarkowana wydajność
• ObciąŜenie sieci – konieczność przesłania
kodu apletu
• Spore obciąŜenie komputera klienta
8
Dynamiczne strony WWW
Do czego to słuŜy?
Co to jest?
• Strony
– tworzone dynamicznie przez serwer
– na podstawie parametrów i/lub zawartości
Ŝądania
• Zawartość
– zwykle tworzona na bieŜąco
– często na podstawie informacji z bazy
danych
• Nie przechowywane w całości w postaci plików
– tworzone w 100% dynamicznie
lub
– tworzone przez dynamiczne wypełnianie
wzorca
• Do prezentacji zawsze aktualnej wersji szybko
zmiennych informacji, np.
– raportowanie aktualnego stanu zasobów,
finansów itp.
– prezentacja aktualnych analiz handlowych
– prezentacja aktualnej oferty
z uwzględnieniem bieŜących zapasów
magazynowych
• Do prowadzenia dynamicznego dialogu
z uŜytkownikiem (odpowiedzi na formularze,
rozgałęzienia itp.), np.
– wyszukiwarki
– personalizacja dostępu
– składanie zamówień
– ankietowanie on-line
• Do realizacji duŜych często zmiennych zbiorów
informacji, np.
– portale
– bazy wiedzy,
CMS (Content Management Systems)
itp.
Dynamiczne strony WWW, c.d.
Technologie
•
•
•
•
Trudności
CGI
Moduły serwerowe
Serwlety
Server pages
Zasady
• Separacja logiki od prezentacji
– kod programów reprezentujący logikę
strony powinien być oddzielony od definicji
wyglądu strony
♦ odmienne kwalifikacje projektantów
♦ inna dynamika zmian
• Single sign-on
– jednorazowa autoryzacja przy dostępie do
wielu zasobów o róŜnym pochodzeniu
– wymaga pośrednictwa serwera
autoryzacyjnego SSO
• Częste interakcje z serwerem
• Konieczność odświeŜania całej strony po
kaŜdej interakcji z serwerem
• Nienaturalne sposoby utrzymania sesji
– potrzebne ze względu na wymogi
♦ bezpieczeństwa
♦ przetwarzania transakcyjnego
– trudne z powodu bezstanowości
protokołu HTTP
– stosowane sztuczki: przesyłanie
generowanych na bieŜąco numerów sesji
♦ w cookies
♦ w kolejnych URL
• Ostatnio mocno naduŜywane (PHP...)
9
10
CGI i moduły serwerowe
CGI (Common Gateway Interface)
Moduły serwerowe
• Sposób wywoływania programów na serwerze
ze stron WWW
– programy w dowolnym języku
programowania lub skryptowym
(C, C++, shell, Perl, itp.)
• Działanie bramki CGI
– bramka CGI jest dostępna z URL przez
odpowiednią ścieŜkę wirtualną
(zwyczajowo /cgi-bin/)
– parametry wywołania umieszczane są
przez bramkę w zmiennych
środowiskowych
– program CGI wypisuje swój wynik na
standardowe wyjście
• Zalety
– moŜliwość uŜycia dowolnego języka
– prostota interfejsu
• Wady
– problemy z wydajnością – osobny proces
dla kaŜdego Ŝądania
– ograniczona przenośność programów
11
• „Przystawki” do serwera WWW
– pozwalające wykonywać programy
„typu CGI”
– ale bez wad związanych z wydajnością
„klasycznego” CGI
Serwlety
Cechy
Co to jest?
• Program w języku Java
– klasa potomna klasy HttpServlet
– definiująca metodę doGet lub doPost
• Przechowywany
– w postaci skompilowanej
Przykłady (Apache)
• mod_perl
– moduł umoŜliwiający pisanie programów
typu CGI w języku Perl
• mod_php
– dynamiczne tworzenie stron WWW w
języku PHP
– na serwerze aplikacyjnym
• Wykonywany
– na serwerze aplikacyjnym
Połączenie z bazą danych
– przez specjalny aparat (motor), np. Tomcat
• Interakcja
– wywołanie przez Ŝądanie HTTP
– odpowiedź HTTP, np. w postaci
dokumentu HTML lub XML
12
• Zalety
– przenośność (takŜe w formie
skompilowanej)
– porządny język programowania
• Wady
– brak oddzielenia prezentacji od logiki
– problemy z wydajnością
• JDBC
– biblioteka Javy
– umoŜliwia
♦ połączenie z bazą danych
♦ wysyłanie zapytań SQL
♦ odbieranie wyników
Serwlety – przykład
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
Server Pages
Co to takiego?
public class Serwlet extends HttpServlet {
public void doGet(HttpServletRequest zadanie,
HttpServletResponse odpowiedz)
throws ServletException, IOException {
odpowiedz.setContentType("text/html");
PrintWriter wyjscie = odpowiedz.getWriter();
wyjscie.println("<TITLE>Pokaz</TITLE>");
wyjscie.println("<H1>Pokaz serwleta</H1>");
...
Dlaczego warto to stosować?
• Strony w HTML lub XML zawierające
– szablon statycznych części strony
– wstawki w języku programowania
– zmienne w dynamicznie generowanych
miejscach dokumentu
• Interpretowane przez serwer
– wstawki w języku programowania są
wykonywana
– zmienne są zastępowane wynikami
przetwarzania
– wypełniony szablon jest wysyłany do
przeglądarki
• Stosunkowo łatwe w uŜyciu
• Pozwalają w pewnym stopniu oddzielić
logikę od prezentacji
Technologie (przykłady)
• JSP – Java Server Pages
• ASP – Application Server Pages
(Microsoft, język Basic)
}
}
13
14
JSP – wprowadzenie
Java Server Pages
Separacja kodu od prezentacji
• Zanurzone w kodzie HTML wstawki w Javie
• Kod jest wykonywany przed przesłaniem strony
• Realizacja: serwlet
– przy pierwszym wywołaniu aparat JSP
tworzy serwlet na podstawie strony JSP
i kompiluje go
– kolejne wywołania od razu uruchamiają
serwlet
Elementy JSP
•
•
•
•
Dyrektywy (np. określające Ŝe to jest JSP)
Deklaracje zmiennych i metod
Scriptlety – kod wykonywalny w Javie
WyraŜenia – umoŜliwiają wstawianie wyników
przetwarzania do wynikowego dokumentu
HTML
• Obiekt request słuŜący do odczytywania
parametrów wywołania
15
• W prostym uŜyciu JSP nie ma dostatecznej
separacji
• Lepszą separację umoŜliwia zastosowanie
komponentów JavaBeans
– kod Java w osobnych plikach
– na stronach JSP tylko odwołania do
atrybutów
JavaBeans
• Klasy Javy
• Mające
– prywatne atrybuty
– klasy dostępu do atrybutów (takŜe
wirtualnych) o nazwach getAtrybut
i setAtrybut
JSP – przykłady
<HTML>
<HEAD>
<TITLE>Pokaz JSP</TITLE>
</HEAD>
<BODY>
<%@ page language="java" %>
<%! String parametr; %>
<% wynik =
request.getParameter("parametr");
%>
<H1>
Oto strona o tytule
"<%= wynik %>"
</H1>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Pokaz JSP</TITLE>
</HEAD>
<BODY>
<%@ page language="java" %>
<jsp:useBean id="jb”
class="wezParametr"/>
<jsp:setProperty name="jb"
property="parametr”/>
<H1>
Oto strona o tytule
<jsp:getProperty name="jb"
property="wynik"/>
</H1>
</BODY>
</HTML>
• Przeznaczone do wielokrotnego wykorzystania
w róŜnych aplikacjach
Biblioteki znaczników (taglib)
• Pozwalają definiować i oprogramować
znaczniki realizujące jakieś typowe akcje
– np. typowe działania dostępu do
bazy danych
16
AJAX
Wada „klasycznych” stron dynamicznych
• Częste interakcje z serwerem są niezbędne np.
do
– walidacji informacji
– bardziej złoŜonych reakcji na działania
uŜytkownika
• Po kaŜdej interakcji z serwerem
– przeładowanie całej strony
– wyświetlenie od nowa całej strony
• Ogranicza to moŜliwości interakcji
Asynchronous JavaScript and XML
• Działanie uŜytkownika powoduje
– wysłanie Ŝądania do serwera
– odpowiedź serwera w XML
• Otrzymanie odpowiedzi z serwera powoduje
– przyrostową aktualizację strony
♦ przez program na kliencie
manipulujący drzewem DOM
♦ na podstawie przesłanego XML
– bez przeładowywania całej strony
Zalety
• Sposób wykorzystania istniejących technologii
– XML
– technologie stron aktywnych, np.
JavaScript
– Model DOM
♦ obiektowy model wyświetlanego
dokumentu (X)HTML/XML
♦ moŜliwość programowego
manipulowania dokumentem
17
Jak działa AJAX?
• Znacznie szybsze reakcje na działania
uŜytkownika
• MoŜliwość tworzenia bardziej złoŜonych
interakcji
Wady
• Dość pokrętna technologia
• Nieprzejrzysty kod stron
• Złe działanie przycisku „Wstecz” przeglądarki

Aktywne i dynamiczne strony WWW

Transkrypt

Podobne dokumenty

„Grupa” EqDb - Instytut Automatyki i Informatyki Stosowanej

Elementy projektowania stron WWW Część 1 Podstawy systemów

Aplikacja internetowa vs Strona Internetowa

EWOLUCJA RZEŹBY KARKONOSZY W PÓŹNYM GLACJALE

Technologie J2EE

Programowanie w języku Java

Aplikacja internetowa vs Strona Internetowa. Aplikacja internetowa

JavaServer Pages

Wykorzystanie aplikacji Java Server Pages w środowisku J2EE