Laboratorium z przedmiotu Aplikacje klient-serwer - zestaw 06 Cel zajęć. Celem zajęć jest zapoznanie się z stronami wzorcowymi i kontrolkami własnymi aplikacjach. Wprowadzenie teoretyczne. Rozważana w ramach niniejszych zajęć tematyka stanowi wprowadzenie do tworzenia stron wzorcowych oraz kontrolek własnych w aplikacji 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: Master Page, pojęcie kontrolki własnej i użytkownika w ASP.Net. 1. Master Page Dobrym sposobem projektowania i wykonywania większych jak i mniejszych projektów jest oddzielenie części wyglądu strony od jej działania. Daje to możliwość prostszej zmiany wyglądu np. z jakiejś okazji, oraz poprawy elastyczności na pewne działania użytkownika. Rozwiązaniem jakie dostarcza ASP.Net są tzw. Strony wzorcowe. Dostarcza użytkownikowi kod HTML, kontrolki oraz kod, który będzie stosowany w charakterze szablonu dla wszystkich stron witryny. Wszystkie elementy jakie zostaną w niej zawarte będą pokazana na każdej stronie, która korzysta z tejże strony wzorcowej. Ponad to każda strona wzorcowa posiada obszar zawartości, w którym umieszcza się właściwą treść strony najczęściej różną dla każdej strony potomnej. Kolejną ważną rzeczą jaka może być przydatna to stworzenie czytelnej i funkcjonalnej nawigacji strony WWW. Zapobiega to zgubieniu się użytkowników serwisu jednocześnie dając im szansę skorzystania z wszystkich możliwości witryny. Istnieje wiele sposobów aby stworzyć takie menu np. za pomocą pliku XML i kontrolki TreeView. Najważniejsze właściwości kontrolki TreeView: AutoGenerateDataBindings ChcekedNodes CollapseImageToolTip ExpandDeph NodeIndent NodeWarp PathSeparator SelectedNode ShowCheckBoxes Dla true, pozwala na ustawianie wiązań miedzy danymi oraz węzłami drzewka. Zwraca zbiór obiektów TreeNode, zawierające jedynie węzły, których pola wyboru zostały zaznaczone. Wyświetla podpowiedź, Gdy węzeł jest zwinięty. Liczba poziomów, do którego drzewko powinno zostać rozwinięte przy jego pierwszym wyświetleniu. Liczba pikseli, o które węzły potomne są wcięte względem elementów nadrzędnych. Dla true, jeśli zabraknie miejsca, to tekst węzła zostanie przeniesiony do nowego wiersza. Domyślnie false. Znak używany jako ogranicznik wartości węzła. Zwraca zaznaczony obiekt TreeNode. Bitowe połączenie TreeNodeTypes wskazujące, które typy węzłów będą wyświetlane z polami wyboru. 1
Metody i zdarzenia kontrolki TreeView: CollapseAll ExpandAll FindNode SelectedNodeChanged TreeNodeCheckChanged TreeNodeCollapsed TreeNodeExpanded Zwija całe drzewko. Rozwija całe drzewko. Pobiera wskazany obiekt TreeNode. Wywoływane, gdy w kontrolce TreeView zostanie zaznaczony węzeł. Wywoływane, gdy zmieni się stan pola wyboru węzła. Wywoływane, gdy węzeł zostanie zwinięty. Wywoływane, gdy węzeł zostanie rozwinięty. TreeNodePopulate Wywoływane, gdy węzeł, którego własność PopulateOnDemand ustawiono na true. Zostanie rozwinięty w kontrolce TreeView. 2. Kontrolki własne oraz kontrolki użytkownika Kontrolki użytkownika pozwalają na zapisania fragmentu istniejącej strony ASP.Net oraz ponowne jego użycie na wielu innych stronach ASP. Kontrolka taka jest podobna do zwykłej strony ale: Kontrolki użytkownika posiadają rozszerzenie.ascx zamiast.aspx; Kontrolki użytkownika nie mogą zawierać znaczników <html>, <body> ani <form>; Kontrolki użytkownika zamiast dyrektywy Page posiadają dyrektywę Control Klasycznym przykładem takiej kontrolki jest informacja jaka pojawia się na każdej stronie a informująca o prawach autorskich. Dla każdej kontrolki użytkownika dopuszczalna jest tylko jedna dyrektywa @Control. Jest ona używana przez analizator składni ASP.Net i kompilator do ustawienia atrybutów kontrolce użytkownika. Właściwości dyrektywy @Control: AutoEventWireup ClassName CompilerOptions Debug Description EnableViewState Dla domyślnej wartości true wskazuje, że strona automatycznie wykonuje zapytanie do serwera. Dla wartości fale, programista musi ręcznie wywoływać zdarzenia na serwerze. Nazwa klasy dla strony. Przekazywany do kompilatora. Określa, czy kompilacja ma przebiegać z symbolami debugowania. Tekst opisujący stronę. Wskazuje, czy stan widoku jest obsługiwany przez kontrolkę użytkownika. 2
Explicits Wskazuje, czy strona powinna zostać skompilowana z opcją VB.Net Explicite. Inherits Language Src Definiuje klasę ukrytego kodu. Zastosowany język programowania, wykorzystany do generowania bloków wewnątrz strony oraz skryptów po stronie serwera. Nazwa pliku źródłowego pliku ukrytego kodu. Strict Wskazuje, czy strona powinna zostać skompilowana z opcją VB.Net Strict WaringLevel Poziom ostrzeżeń kompilatora, na którym nastąpi przerwanie kompilacji Oprócz tworzenia kontrolek użytkownika, które generalnie stanowią elementy stron internetowych możliwe do ponownego użycia, można stworzyć też własne, skompilowane kontrolki. Istnieją trzy sposoby na stworzenie własnych kontrolek: wykorzystanie istniejącej kontrolki, utworzenie kontrolki która wykorzystuje istniejącą lub stworzenie od podstaw nowej kontrolki. Kontrolki własne są podobne do kontrolek użytkownika. Różną się tym, że złożone kontrolki są kompilowane do postaci dll i używane jak każde inne kontrolki serwerowe. Najważniejsze atrybuty własnych kontrolek: Bindable Browsable Category DefaultProperty DefaultValue Description ToolboxData Dla wartości true wskazuje, że VS.Net będzie wyświetlał tę kontrolkę w oknie dialogowym dołączania danych. Określa czy właściwość zostanie wyświetlona w projekcie. Określa kategorię, w której ta kontrolka zostanie wyświetlona, gdy okno Properties będzie sortowane wg. Kategorii. Właściwość domyślna klasy. Wartość domyślna. Tekst, który zostanie wyświetlony w polu opisu panelu Properties. Atrybut używany przez pakiet VS2005 w celu dostarczenia znacznika, kiedy obiekt jest przeciągany z paska narzędziowego. 3
Zadanie 1. Proszę zrealizować aplikację, która powinna odznaczać się następującymi cechami: Aplikacja ma zostać zbudowana w oparciu o stronę wzorcową (Master Page). Szablon strony ma zostać zbudowany w oparciu o elementy DIV kodu HTML, z wykorzystaniem kaskadowych arkuszy stylów (CSS). Strona ma zawierać nagłówek z zamieszczonym logo, stopkę, oraz menu nawigacyjne w osobnym pojemniku DIV (przykładowy wygląd strony został przedstawiony w opisie zadania). Szablon ma zawierać kontrolkę typu SiteMapPath. Menu nawigacyjne ma zostać zrealizowane w oparciu o kontrolkę typu TreeView. Po utworzeniu strony wzorcowej, do projektu należy dodać kilka przykładowych stron utworzonych w oparciu o nią. Aby zrealizować zadanie należy wykonać następujące kroki: Proszę w swoim katalogu utworzyć projekt typu ASP.NET Empty Web Application o nazwie Zadanie 6.1. UWAGA! Przy dodawaniu do strony kolejnych kontrolek proszę o używanie unikalnych ID kontrolek o nazwie związanej z ich przeznaczeniem, np. buttondodaj. Proszę o dodanie do projektu elementu typu Master Page i nadanie mu nazwy Szablon.Master. Następnie proszę o dostosowanie szablonu do wymagań zadania, poprzez umieszczenie w jego kodzie odpowiednich elementów DIV oraz nadanie im odpowiednich właściwości przy użyciu CSS. Przykładowy sposób wyglądu szablonu przedstawia poniższy rysunek: Obszar otoczony różową ramką oznacza element typu ContentPlaceHolder, którego treść będzie unikatowa dla każdej ze stron. Po wykonaniu powyższej operacji, proszę o dodanie do projektu elementu typu Site Map i nadanie mu nazwy Web.sitemap. Dodany plik będzie zawierać mapę witryny (opis wszystkich stron wchodzących w skład aplikacji). Na jego podstawie utworzona będzie treść kontrolek nawigacyjnych. Następnie proszę o zastanowienie się, jakie strony mogą zostać dodane do projektu. W zaprezentowanym przykładzie zostało przyjęte, że będą to strony o nazwach Default.aspx, dydaktyka.aspx, po.aspx i awww.aspx (należy dodać je jako elementy typu Web Form using Master Page). Zgodnie z dokonanym wyborem, proszę o edycję pliku Web.sitemap. Przykładowa treść pliku prezentuje się następująco: 4
Po wykonaniu powyższej operacji proszę o dodanie do szablonu strony obiektu typu SiteMapDataSource. Następnie proszę o umieszczenie w szablonie kontrolek typu TreeView i SiteMapPath, zgodnie z poniższym rysunkiem. Proszę też o przypisanie właściwości DataSourceID kontrolki typu TreeView nazwy kontrolki typu SiteMapDataSource. Po wykonaniu tych czynności przykładowa strona wygląda następująco: Następnie proszę o dodanie do projektu wszystkich stron podanych w mapie witryny oraz o wypełnienie ich przykładową treścią. W tym celu proszę o dodanie do projektu nowego elementu typu Web Content Form o odpowiedniej nazwie, w oparciu o stworzony szablon. 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. Sposób implementacji szablonu strony. Prawidłowy format mapy witryny. 5
Zadanie 2. Proszę zrealizować aplikację, która powinna odznaczać się następującymi cechami: Niniejsze zadanie jest rozwinięciem zadania pierwszego. Do projektu ma zostać dodana kontrolka użytkownika, stanowiąca stopkę strony. Stopka powinna zawierać obrazek informacyjny (reklamowy) będący odnośnikiem (kontrolka ImageButton). Stopka powinna zawierać także informację na temat praw autorskich w postaci napisu Copyright 2012, gdzie rok jest pobierany dynamicznie na podstawie aktualnej daty. Aby zrealizować zadanie należy wykonać następujące kroki: Proszę o dodanie do projektu z zadania pierwszego elementu typu Web User Control o nazwie stopka.ascx. Następnie proszę o dodanie do szablonu strony następującej dyrektywy: Dzięki dodaniu dyrektywy, na stronie może zostać wykorzystana kontrolka użytkownika przy zastosowaniu następujących znaczników: Proszę o umieszczenie powyższego fragmentu kodu między znacznikami DIV pojemnika zawierającego treść stopki. Następnie proszę o dodanie do projektu trzech dowolnych obrazków o rozmiarach 80x15 px. Przykładowy obrazek prezentuje się następująco: Przykładowy odnośnik to http://www.iis.net. Po wykonaniu tej czynności proszę o dodanie do projektu kontrolek typu ImageButton i Label, a następnie proszę o implementacje założonej funkcjonalności. Podpowiedź: należy dokonać implementacji kodu w pliku stopka.aspx.cs. Przykładowy wygląd stopki: Po wykonaniu zadania proszę zauważyć, że nowo utworzoną kontrolkę można wykorzystać także w innych projektach. 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. 6
Wygląd stopki. Sposób implementacji stopki. Zadanie do domu. Proszę zrealizować aplikację, która powinna odznaczać się następującymi cechami: Aplikacja ta ma stanowić kontrolkę własną, będącą rozwijanym menu pionowym. Po kliknięciu na główną kategorię menu, mają zostać rozwinięte lub schowane kategorie potomne. Zagadnienia, które należy uznać za przyswojone w trakcie zajęć. Po zajęciach będzie obowiązywać praktyczna znajomość: Tworzenie stron wzorcowych. Tworzenie prostych kontrolek własnych i kontrolek użytkownika. Zagadnienia do samodzielnego zgłębienia dla dociekliwych. Osoby zainteresowane mogą dodatkowo zapoznać się z następującymi tematami: Tworzenie zagnieżdżonych stron wzorcowych. Tworzenie kontrolek pochodnych. Tworzenie złożonych kontrolek. Zagadnienia do powtórzenia na następne zajęcia. Przed kolejnymi zajęciami należy powtórzyć następujące zagadnienia: Zasada działania technologii AJAX. Technologia AJAX w.net 3.5. Wybrane aspekty dotyczące implementacji z wykorzystaniem języka PHP. Strony internetowe oparte o język PHP nie posiadają takich mechanizmów kontrolki tym bardziej jest pozbawiony mechanizmów do tworzenia stron wzorcowych. Konstrukcja samych stron wzorcowych nie jest zbytnim problemem jak można to łatwo zauważyć na przykładzie ASP, a wykonanie takiego elementu w PHP ogranicza się do odpowiedniego podziału i upakowania stron odpowiedzialnych za wygląd oraz odpowiedzialnych za działanie(html i kod PHP). Najczęściej odbywa się to przez zastosowanie plików nagłówka i stopki wspomnianego wcześnie przy okazji oddzielenia kodu HTML od PHP. Poniżej został przedstawiony zarys działania takiego odpowiednika PHP dla ASP owego tworzenia stron wzorcowych. 7
Pierwszym krokiem jest stworzenie czegoś co w miarę zmiany zawartości elementów i materiałów na stronie powinno być w miarę nie zmienne. W tym przykładzie jest to funkcja kończąca stronę WWW czyli tzw. Stopka. W stopce zawsze występkuje zakończenie szaty graficznej, podpis twórcy, reklamy czy inne elementy ale są one takie same nie ważne czy użytkownik coś komentuje, ogląda czy czyta. Analogicznie do tego może wyglądać każda inna część strony WWW przede wszystkim nagłówek czyli element z logiem i tytułem strony, może to też być menu strony, czy elementy które są na stronie pomimo zmiany jej zawartości informacje, komentarze. W przykładzie funkcji metody będącej częścią klasy data_class linie 133 134 odpowiadają za stworzenie opisu aktualnej daty i wydobycia z niej aktualnego roku. Najczęściej gdy ktoś tworzy stronę WWW podpisuje prawa autorskie np. XXX 2001-2002. Data ta powinna być płynna w zależności od aktualnego czasu(chyba, że status trony na to nie pozwala) dlatego też dobrze jest stworzyć coś co pomimo nadwątlenia czasem nadal wydaje się być aktualne czyli np. XXX 2001-2011. Kolejnym elementem jest podczepienie reklam. W tym wypadku to linie: 140-149 odpowiadające za poprawna walidację strony WWW, oraz linie 151 159 odpowiadające za wywołanie skryptu zliczającego odwiedziny strony WWW. Wszystko to jest zwracane poleceniem return jako zwykły napis string. 8
Drugim elementem jest zawartość strony WWW. Ta część najczęściej zmienna i podlegająca degradacji w czasie powinna być starannie upakowana i zabezpieczona na możliwe i nie przemyślane zmiany(chodzi o obsługę użytkownika). W takim celu można posłużyć się kilkoma sposobami: Pierwszy to zapisanie samej zawartości strony/podstrony WWW w pliku tekstowym(lub php). Dzięki takiemu rozwiązaniu treść jest niezależna od opakowania kodu PHP może ulegać szybkim zmianom. Jedynie trzeba zapewnić jej odpowiednią obsługę wywołanie(prezentowana powyżej funkcja), czy zabezpieczenie plików przez nie powołanymi osobami zabezpieczenia związane z serwerem. Drugim sposobem podobnym do wyżej wymienionego jest zapisanie treści w bazie danych. Analogicznie do pilików trzeba zapewnić odpowiednie narzędzia do komunikacji z treścią i bazą danych. W tym przykładzie posłużono się pierwszym przykładem, ale w typowych silnikach CMS występują przede wszystkim odwołania do bazy danych, czasem odwołując się do plików na serwerze np. tłumaczenia. Przedostatnim elementem jest klasa użytkownika tutaj admin_class odpowiedzialna za zachowanie i działanie stron WWW gdy pojawi się na niej administrator. Jak widać pierwsze zadanie takiej klasy to odczytać zawartość wszystkich materiałów i stron linia 23 konstruktor przygotowujący klasę z danymi metodami i funkcjami pokazanymi wcześniej w przykładach. Po wejściu administratora na stronę klasa admin_class ma zadanie wykonać metodę stronaglowna. W zależności od przyjętych parametrów mówiących gdzie jest użytkowniku, lub w co kliknął(to też jest bardzo ważne później 9
używane w AJAX ie) takie elementy lub treści należy wysłać w odpowiedzi. I tak, zawsze takie same są nagłówek i stopka linia 28 i 29, dlatego są one tworzone tzw. z marszu. Kolejne elementy są odpowiedzialne za zawartości samej strony lina 30 i 31. Elementy zostaną zawsze zwrócone nawet jeżeli ich to kolej nie była ale proszę zwrócić uwagę są one PUSTE. Dopiero w linii 32 pojawia się wybór który pozwoli na określenie czego chciał użytkownik i jaki element należy wypełnić treścią. I tak np. chcąc zobaczyć stronę główną użytkownik otrzyma opis jej czyli wynik działania metody getopis_sg, jeżeli chciał by zobaczyć jakiś apartament otrzyma odpowiedź getapartament1a_sg jako już całą stronę WWW. Ostatnim elementem jest plik index.php i wywołanie głównej klasy. Po określeniu z kim lub czym strona WWW ma do czynienia przystępuje do odpowiedniego działania. W tym wypadku jest to użytkownik administrator dlatego też tworzony jest taki obiekt linia 19. Kolejnym elementem jest odczytanie co użytkownik chciał otrzymać najczęściej to parametr przekazany w formie GET lub POST. Na podstawie tego jest zwracana odpowiedź na ekran np. lina 22 gdzie funkcja PHP echo wyświetla to co przyszło z wywołania metody stronaglowna. Jeżeli jakiś element musi być przesłany dalej wystarczy go przekazać w wywołaniu metody - linia 24. Proszę zwrócić uwagę na przemyconą w pewnym sensie formę obiektowego tworzenia aplikacji w PHP. W tym przykładzie istnieją obiekty strona, użytkownik i dane. Każdy element wie tylko o tym elemencie którego uruchamia. Niezwykle wydłuża to sprawność działania samej konstrukcji strony WWW, a stworzenie strony wzorcowej przychodzi jak gdyby przy okazji. 10