Laboratorium z przedmiotu Aplikacje WWW - zestaw 04 Cel zajęć. Celem zajęć jest zapoznanie się z nawigacją w aplikacjach WWW. Wprowadzenie teoretyczne. Rozważana w ramach niniejszych zajęć tematyka stanowi wprowadzenie do tworzenia nawigacji w aplikacji WWW w języku ASP.NET. Aby ze zrozumieniem zrealizować zadania, przewidziane do wykonania w ramach zajęć laboratoryjnych, należy zapoznać się z następującymi zagadnieniami: klasa Page, metoda Server.Transfer, metoda Response.Redirect, metoda Cross-Page-Posting, stan sesji, widoku, aplikacji. 1. Klasa Page Gdy przeglądarka zgłasza do serwera WWW żądanie przesłania pliku.aspx, serwer przetwarza stronę. Jeżeli to będzie pierwsze żądanie przekazania strony do czasu uruchomienia aplikacji sieciowej, wówczas środowisko wykonawcze ASP.NET skompiluje na stronie klasę Page. Wywodzi się ona z podstawowej klasy System.Web.UI.Page. Skompilowana klasa zawiera wszystkie deklaracje kontrolek oraz kod tworzący stronę z właściwościami, zdarzeniami i metodami. Najważniejsze właściwości klasy Page: Application Cache ClientQueryString IsCrossPagePost-Back MaintainScrollPositionOnPostback MasterPageFile Otrzymuje odniesienie do obiektu Application w bieżącym żądaniu. Otrzymuje obiekt Cache aplikacji. Otrzymuje fragment adresu URL, będącym ciągiem znakowym zapytania. Dla wartości true strona wywoła inną stronę. Dla wartości true, pozycja strony w przeglądarce zostaje zachowana domyślnie false. Nazwa pliku ze stroną wzorcową. 2. Metoda Server.Transfer Metoda ta pobiera ze strony.aspx lub.htm adres URL jako ciąg znakowy argumentu i wykonuje ponowne zapytanie do serwera. Przetwarzanie bieżącej strony zostaje przerwane, a rozpoczyna się przetwarzanie nowej strony. Metoda Server.Transfer nie sprawdza, czy użytkownik jest upoważniony do przeglądania strony docelowej. Strony początkowe i docelowe muszą być częścią tej samej aplikacji. Po uruchomieniu nowej strony przeglądarka internetowa będzie mieć na pasku adresu URL strony początkowej, a nie docelowej. Historia przeglądarki nie będzie wiedziała o przejściu do innej strony. 3. Metoda Response.Redirect Jest programowym odpowiednikiem HyperLink. Pobiera adres URL strony.aspx lub.ttm jako ciąg znakowy argumentu i wykonuje przekierowanie po stronie klienta bez ponownego zapytania do serwera. W wyniku tego metoda jest szybsza niż Server.Transfer. Jest to całkowicie nowe żądanie zgłoszone do serwera, zatem wymusza pełne uwierzytelnianie i autoryzację. Dane ze strony początkowej są niedostępne na stronie docelowej, chyba, że strony pochodzą z tej samej aplikacji. W takim przypadku dane mogą zostać przetransferowane za pomocą stanu Session lub Application. Metoda QueryString odczytuje wartość fragmentu z adresu w poszukiwaniu wartości, zmiennych danych przekazanych w takich sposób(działą identycznie jak zmienna GET dla Php). 1
4. Metoda Cross-Page-Posting Jest programowym odpowiednikiem HyperLink. Pobiera adres URL strony.aspx lub.ttm jako ciąg znakowy argumentu i wykonuje przekierowanie po stronie klienta bez ponownego zapytania do serwera. W wyniku tego metoda jest szybsza niż Server.Transfer. Jest to całkowicie nowe żądanie zgłoszone do serwera, zatem wymusza pełne uwierzytelnianie i autoryzację. Jeżeli zarówno strona początkowa, jak i strona docelowa znajdują się w tej samej aplikacji, wówczas podobnie jak wszystkie strony aplikacji, mogą współużytkować stan Session i Application oraz elementy publiczne stany początkowej. Strona może dokonać przekazania do strony spoza aplikacji, ale wtedy dane ze strony początkowej nie będą dostępne na stronie docelowej. Jeżeli jest dostępna własność PreviosuPage strony docelowej, to zostaje ponownie utworzony egzemplarz strony początkowej oraz z początkowej strony zostaje przywrócony przechowywany stan widoku. W wyniku tego strata wydajności podczas wykorzystywania własności PreviousPage jest bezpośrednio związana z ilością informacji przechowywanych w widoku stanu poprzedniej strony. Najważniejsze właściwości Postback: IsPostBack, IsCrossPageBack, PreviousPage ISPostBack, ISCrossPageBack, ClientQueryString IsCrossPagePost-Back MaintainScrollPositionOnPostback MasterPageFile Otrzymuje odniesienie do obiektu Application w bieżącym żądaniu. Otrzymuje obiekt Cache aplikacji. Otrzymuje fragment adresu URL, będącym ciągiem znakowym zapytania. Dla wartości true strona wywoła inną stronę. Dla wartości true, pozycja strony w przeglądarce zostaje zachowana domyślnie false. Nazwa pliku ze stroną wzorcową. 5. Stan sesji, widoku, aplikacji Stan jest aktualną wartością wszystkich kontrolek i zmiennych bieżącego użytkownika. Sieć jest środowiskiem bez stanu, co oznacza, że za każdym razem, strona wykonuje zapytanie do serwera, następnie jest ona odsyłana do przeglądarki strona zostanie przetworzona od nowa. Jeżeli zachodzi potrzeba zapisania jakiegokolwiek kodu, zmiennej lub wartości w pamięci strony WWW można skorzystać też z: stanu sesji, widoku i aplikacji. Oto poniżej porównanie tych trzech metod przedstawia tabela: Funkcja Stan widoku Stan aplikacji Stan sesji Korzysta serwera z zasobów Nie Tak Tak Korzysta z przepustowości łącza Tak Nie Nie Limit czasu Nie Nie Tak Możliwość narażenia bezpieczeństwa Optymalizacja dla typów niepierwotnych Tak Nie Uzależniona Nie Tak Tak Dostępność dowolnych danych dla Tak Tak Tak 2
Dostępność programowa Tak Tak Tak Zasięg Strona Aplikacja Sesja Możliwość przetrwania restartu Tak Nie Uzależniona od konfiguracji Stan sesji cechuje się: współpracą z przeglądarkami, których obsługa plików cookie została wyłączona lub ich brak, identyfikuje, czy żądanie jest częścią istniejącej sesji, przechowuje dane dotyczące sesji mogące zostać użyte w przypadku wielu żądań. Wywołuje zdarzenia sesji(session_start oraz Session_End). Po skończeniu czasu trwania sesji nastąpi automatyczne zwolnienie jej zasobów. Sesja opisana jest przez SessionID, które jest globalne i unikalne(nie powtarzają się) oraz przyznawane są losowo trudno jest odgadnąć wartość nowego SessionID. Stan sesji implementowany jest za pomocą własności Contents collection klasy HttpSessionState. Stan widoku jest stanem strony i jej wszystkich kontrolek, jest automatycznie obsługiwany dzięki zapytaniom skierowanym do serwera. Kiedy strona wykonuje zapytanie do serwera, stan widoku jest odczytywany, aby tuż przed odesłaniem do przeglądarki stan ten przywrócić. Stan aplikacji rozpoczyna się od Application_Start i kończy Application_End(podobnie jak stan sesji). Kiedy aplikacja otrzyma pierwsze żądanie użytkownika, wtedy następuje wywołanie zdarzenia Application_Start. Jeżeli plik.asax jest poddany edycji, a zmiany zostaną zapisane, wówczas wszystkie aktualne oczekujące żądania zostaną zrealizowane i nastąpi wywołanie zdarzenia Application_End oraz ponowne uruchomienie aplikacji. Informacje w aplikacji mogą być współużytkowane globalnie za pomocą słownika obiektów każdy obiekt posiada przypisaną wartość kluczową. Implementacja tego mechanizmu odbywa się za pomocą własności Application klasy HttpApplication. Własność ta pozwala na uzyskanie dostępu do zbioru Contents, którego zawartość została dodana do stanu Application bezpośrednio przez kod. Zadanie 1. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami: Aplikacja ma składać się z dwóch stron internetowych. Na podstawie określenia parametrów na pierwszej stronie internetowej, po przejściu przez użytkownika na drugą stronę, ma być na niej utworzona dynamicznie kontrolka o zadanych wcześniej parametrach. Możliwe do wyboru parametry kontrolki to jej typ (Label lub TextBox), właściwość Text oraz właściwość ForeColor (czarny, czerwony lub zielony). Wybrane parametry mają zostać przekazane do drugiej strony w adresie URL (za pomocą query string). Aby zrealizować zadanie należy wykonać następujące kroki: Proszę w swoim katalogu utworzyć projekt o nazwie Zadanie 4.1. UWAGA! Przy dodawaniu do strony kolejnych kontrolek proszę o używanie unikalnych ID kontrolek o nazwie związanej z ich przeznaczeniem, np. buttondalej. Proszę o dodanie do projektu elementu Web Form i nadanie mu nazwy strona2.aspx. Następnie proszę o umieszczenie na pierwszej stronie odpowiednich kontrolek serwerowych ASP.NET, aby dostosować ją do założeń zadania. Przykładowy wygląd strony przedstawia poniższy rysunek: 3
Następnie proszę o dodanie do strony drugiej kontrolki typu Panel, w której będzie tworzona kontrolka określona uprzednio przez użytkownika. Po wykonaniu czynności z powyższego podpunktu proszę o obsługę zdarzenia OnClick przycisku na stronie pierwszej. Jego wystąpienie ma powodować przekierowanie do strony drugiej, na której w momencie załadowania zostanie utworzona określona przez użytkownika kontrolka. Należy pamiętać o uwzględnieniu obsługi sytuacji, w której użytkownik nie poda wartości pola Tekst. Podpowiedzi: Przekierowanie do strony drugiej należy wykonać za pomocą metody Response.Redirect Przykładowy zapis i odczyt parametrów w adresie: Następnie proszę o umieszczenie na stronie drugiej odnośnika umożliwiającego powrót na stronę pierwszą. Przy ocenie zadania główny nacisk będzie kładziony na: Wykonanie wszystkich założeń ujętych w treści zadania. Prawidłowe nazewnictwo obiektów kontrolek. Rozmieszczenie kontrolek na stronie (użycie CSS). Sposób implementacji komunikacji między stronami. Sposób implementacji tworzenia kontrolki. 4
Zadanie 2. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami: Aplikacja ma składać się z trzech stron internetowych. Pierwsza strona ma zawierać formularz jako kod HTML, zawierający następujące elementy: Pole do wprowadzenia imienia Pole do wprowadzenia nazwiska Opcję wyboru płci (poprzez element typu radio) Pytanie o chęć udziału w ankiecie (poprzez element typu checkbox) Przycisk służący do przekazania danych formularza następnej stronie Druga strona ma wyświetlać dane przekazane z pierwszego formularza. Jeśli użytkownik nie podał imienia lub nazwiska, na stronie ma pojawić się odpowiedni komunikat. Jeśli użytkownik wyraził zgodę na udział w ankiecie, na stronie ma być widoczna ankieta. Ankieta, o której mowa w poprzednim punkcie, ma składać się z kontrolek ASP.NET działających po stronie serwera. Ma ona zawierać dowolne pytanie (np. Czy lubisz truskawki ) i odpowiedzi Tak, Nie w formie kontrolek RadioButton. Ponadto ankieta ma zawierać pytanie o zainteresowania respondenta, na które odpowiedzi można wybrać zaznaczając elementy kontrolki typu CheckBoxList. Po naciśnięciu odpowiedniego przycisku, aplikacja ma zostać przekserowana do kolejnej strony, na której zostaną wyświetlone wyniki ankiety. Dane pomiędzy obiema stronami mają zostać przekazane poprzez wykorzystanie mechanizmu Cross-Page Posting. Aby zrealizować zadanie należy wykonać następujące kroki: Proszę w swoim katalogu utworzyć projekt o nazwie Zadanie 4.2. UWAGA! Przy dodawaniu do strony kolejnych kontrolek proszę o używanie unikalnych ID kontrolek o nazwie związanej z ich przeznaczeniem, np. buttonwyslij. UWAGA! Z racji, iż na stronie opartej na MasterPage nie zadziała tradycyjny formularz, proszę o usunięcie z projektu domyślnie utworzonej strony o nazwie Default.aspx, a następnie o dodanie do projektu elementu Web Form i nadanie mu tej samej nazwy nazwy - Default.aspx. Nowo utworzona strona nie będzie zbudowana w oparciu o MasterPage. Należy pamiętać, aby przy korzystaniu ze strony wzorcowej wybrać inne metody komunikacji pomiędzy stronami, dostępne w ASP.NET. Proszę o dodanie do projektu dwóch kolejnych elementów Web Form. W dalszej części niniejszej instrukcji przyjmiemy, że nazwy dodanych elementów zostały ustalone jako strona2.aspx i strona3.aspx. Następnie proszę o umieszczenie na pierwszej stronie w jej sekcji <body></body> następującego kodu HTML: 5
Po wykonaniu tej czynności na stronie powinien pojawić się formularz. Naciśnięcie przycisku Dalej będzie powodować przekazanie jego parametrów poprzez metodę POST do strony o nazwie strona2.aspx. Po wykonaniu powyższej czynności proszę o umieszczenie na drugiej stronie odpowiednich kontrolek ASP.NET, w celu prezentacji wyników formularza oraz wyświetlenia ankiety. Poniższy rysunek zawiera przykładowy wygląd strony: Następnie proszę o implementację obsługi odczytu przekazanych danych formularza. Należy pamiętać o tym, że ankieta ma być wyświetlana jedynie wtedy, gdy użytkownik wyraził chęć jej wypełnienia. Podpowiedź: Odczyt parametru imie można zrealizować w następujący sposób: Po wykonaniu obsługi odczytu danych proszę o ustalenie wartości właściwości PostBackURL przycisku Wyślij jako ~/strona3.aspx (przyjmujemy, że trzecia strona nosi nazwę strona3.aspx ). Następnie proszę o umieszczenie na stronie trzeciej następującej dyrektywy: 6
Wykonanie dwóch powyższych operacji sprawia, że po przejściu do strony trzeciej poprzez naciśnięcie przycisku Wyślij na stronie drugiej, z poziomu strony trzeciej istnieje możliwość odwoływania się do publicznych elementów (obiektów, właściwości, metod) strony poprzedniej. Mechanizm ten (zwany Cross-Page Posting) ilustruje poniższy przykład. Kod umieszczony w pliku strona2.aspx.cs : Kod umieszczony w pliku strona3.aspx.cs : Następnie korzystając z powyższego mechanizmu proszę o implementację odczytu wyników ankiety na stronie trzeciej. Przykładowy rezultat tej operacji przedstawia poniższy rysunek: Przy ocenie zadania główny nacisk będzie kładziony na: Wykonanie wszystkich założeń ujętych w treści zadania. Prawidłowe nazewnictwo obiektów kontrolek. Wygląd aplikacji. Sposób implementacji komunikacji pomiędzy poszczególnymi stronami. Zadanie do domu. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami: Aplikacja ta ma składać się z trzech stron internetowych. Przekazywanie danych pomiędzy stronami ma odbywać się za pomocą sesji. Pierwsze strona ma zawierać dwa pola tekstowe oraz przycisk, którego naciśnięcie powodować ma przekazanie podanych w obu polach tekstowych wartości liczbowych do strony drugiej. Na drugiej stronie ma zostać utworzona macierz liczb całkowitych o losowych wartościach z przedziału <0,100>. Wymiary macierzy mają stanowić parametry podane na stronie pierwszej. 7
Strona druga ma także zawierać przycisk, którego naciśnięcie będzie powodować obliczenie sumy lub różnicy elementów macierzy (w zależności od rodzaju wybranego działania, np. poprzez kontrolki typu RadioButton), a następnie przekazanie wyniku tej operacji do strony trzeciej. Na stronie trzeciej ma znaleźć się prezentacja przekazanego wyniku. Zagadnienia, które należy uznać za przyswojone w trakcie zajęć. Po zajęciach będzie obowiązywać praktyczna znajomość: Nawigacja między stronami ASP.NET za pomocą metod Server.Transfer, Response.Redirect oraz Cross-Page Posting. Przekazywanie parametrów za pomocą formularza HTML. Praktyczna znajomość pojęć stanu sesji, widoku, aplikacji. Zagadnienia do samodzielnego zgłębienia dla dociekliwych. Osoby zainteresowane mogą dodatkowo zapoznać się z następującymi tematami: Parametr PreserveForm metody Server.Transfer dostęp do kontrolek strony poprzedniej. Wykorzystanie Cross-Page Posting gdy nie jest znany typ poprzedniej strony. Zagadnienia do powtórzenia na następne zajęcia. Przed kolejnymi zajęciami należy powtórzyć następujące zagadnienia: Zagadnienia związane z obsługą i działaniem bazy danych SQL: Polecenia Insert, Update, Delete. Polecenie Select oraz wyszukiwanie w bazie danych. Architektura ADO.NET klasy DataSet, DataReader Wybrane aspekty dotyczące implementacji z wykorzystaniem języka PHP. Pierwszą rzeczą jaką trzeba sobie zdać w tym momencie to ubogość darmowego języka. Nie posada on ani zintegrowanych kontrolek, ani zdarzeń na które mógłby w sposób nie widoczny dla użytkownika reagować. Szczególnie tyczy się to szeroko rozumianej nawigacji stron WWW. Drugą rzeczą jest mechanizm Sesji i Cooki języka PHP. Obie te rzeczy są to zmienne trzymane w pamięci i pomimo zmiany zawartości strony WWW parametr/zmienna taka przechowuje jakieś ustalenie. Dobrym przykładem może tu być zastosowanie sesji do zapamiętania rozmiaru czcionki z poprzedniego przykładu. Czym różnią się obie zmienne? Sesja jest tworzona na serwerze i tam też przechowywana, zmienna ciasteczko (cookie) jest tworzona i przechowywana na komputerze klienta. Zaleta ciastek jest nie zaśmiecanie pamięci serwera(najczęściej pamięci RAM dlatego serwery muszą jej dużo posiadać w przypadku użycia mechanizmu sesji), ale są narażone na zmiany spowodowane zachowaniem klienta np. usunięcie z komputera czego możliwości nie posiada sesja. Zasada stosowana na serwerach jest taka: Jeżeli nie powiedziano inaczej twórz sesje, jeżeli nie ma miejsca(zasobów na serwerze) posiłkuj się mechanizmem Cookiem. Cookie stosuje się tam gdzie potrzeba przechować znaczną liczbę danych ustawień, parametrów jak to ma miejsce w grach Flaszowych, sesje zaś tam gdzie potrzeba jednego parametru mówiącego np. kto jest zalogowany. Ustawienia związane z długością życia takich zmiennych są związane z ustawieniami serwera i po części kodu(serwer ma większe prawa niż zalecenia twórcy strony WWW). 8
Mechanizm Sesji: Przykład prezentuje działanie trywialnego licznika internetowego. Jak łatwo zauważyć wykorzystując mechanizm sesji w PHP zapamiętane jest ile razy użytkownik kliknął na dane łącze lub odwiedził stronę. W linii 2 jest bardzo ważna funkcja informująca o rozpoczęciu zapamiętania zmiennych w sesji. Funkcja ta musi stać na pierwszym miejscu(w pierwszej linii kodu PHP) dokumentu, inaczej nie będzie działać wyrzucając serie niezrozumiałych błędów. Czasem może to być problematyczne, ale tak musi być. W linii 13 sprawdzane jest czy zmienna w sesji istnieje, jeżeli nie tworzymy ją linia 16. W linii18 24 zmienna licznik istnieje przez co odpowiednio ją wydobywamy z pamięci linia 20, następnie przypisujemy nową wartość linia 23. Kod kończy link do tej samej strony. Tak to wygląda w przeglądarce internetowej po kilkukrotnym kliknięci: 9
Mechanizm Cookie: W tym wypadku użycie tej zmienne jest znacznie prostsze niż sesji, jest tylko jedna funkcja. Cały kod zawarty jest w linii od 2 do 13. Najpierw zostaje sprawdzone, czy zadana zmienna istnieje linia 2, następnie jeżeli nie ustawiamy jej wartość linia 4, wykorzystując do tego jedyną funkcję obsługi ciastek. Jej parametry to nazwa zmiennej, wartość oraz czas jej trwania- data ważności w sekundach od 1.01.1970r. Analogicznie sprawa się ma dla sytuacji gdy jest już jakaś wartość zmiennej Cookiem kod 7 do 13. Jedynie inkrementacja wartości liczby odwiedzin może być czymś innym linia 9. Wygląd działania jest analogiczny do działania Sesji: Wybrane aspekty dotyczące implementacji z wykorzystaniem języka JavaScript. Jak już zostało to wspomniane budowa menu strony WWW w oparciu o sam język PHP jest mało efektowny, chodź praktyczny. Ponieważ nie posiada on takich elementów jak własne kontrolki czy zdarzenia wszystkie elementy ponad standard programista musi wykonać sam. Praca ta najczęściej odbywa się w języku JavaScript(może to być też ActionScript nie poruszany na tych zajęciach). W prostym przykładzie obrazującym element JS w eliminowaniu zbędnych informacji z oczy osoby odwiedzającej stronę WWW meny rozsuwane - wykorzystany jest jeden plik JS z następującym kodem: 10
Linia pierwsza to standardowe załadowanie skryptu po załadowaniu strony WWW. Funkcja z linii od 3 do 11, najpierw wyszukuje wszystkie elementy posiadające nazwę na a czyli wszystkie hiperłącza. Posiadając je tylko dla tych które są w menu czyli oznaczone nazwą klasy menulink po kliknięciu na takie łącze nie przechodzimy dalej, ale wykonujemy kod z linii od 13 do 23. Funkcja togglemenu, posiada obiekt hiperłącza stąd wykorzystanie wskaźnika this. W liniach 14 i 15 wyciągnięte zostaje z adresy łącza słowo między znakiem / a znakiem. Powstaje w ten sposób nazwa kolejnego łącza linia 17. Kolejną rzeczą jest wydobycie stylu nowego menu linia 19. Posiadając go można go albo odkryć block, lub ukryć polecenie none. Ostatnią rzeczą jest zwrócenie wartości fałszu, aby strona wskazana przez atrybut href hiperłącza nie trafiła do okna przeglądarki wywołana. Wygląd takiego menu ma postać: 11
Pozostaje jedynie treść kodu HTML dla tego przykładu. Przedstawia się ona następująco: 12