Aplikacje klient-serwer

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

Dla true, pozwala na ustawianie wiązań miedzy danymi oraz węzłami drzewka.

ChcekedNodes

Zwraca zbiór obiektów TreeNode, zawierające jedynie węzły, których pola wyboru zostały zaznaczone.

CollapseImageToolTip

Wyświetla podpowiedź, Gdy węzeł jest zwinięty.

ExpandDeph

Liczba poziomów, do którego drzewko powinno zostać rozwinięte przy jego pierwszym wyświetleniu.

NodeIndent

Liczba pikseli, o które węzły potomne są wcięte względem elementów nadrzędnych.

NodeWarp

Dla true, jeśli zabraknie miejsca, to tekst węzła zostanie przeniesiony do nowego wiersza. Domyślnie false.

PathSeparator

Znak używany jako ogranicznik wartości węzła.

SelectedNode

Zwraca zaznaczony obiekt TreeNode.

ShowCheckBoxes

Bitowe połączenie TreeNodeTypes wskazujące, które typy węzłów będą wyświetlane z polami wyboru.

1

Aplikacje klient-serwer

Metody i zdarzenia kontrolki TreeView:

2.

CollapseAll

Zwija całe drzewko.

ExpandAll

Rozwija całe drzewko.

FindNode

Pobiera wskazany obiekt TreeNode.

SelectedNodeChanged

Wywoływane, gdy w kontrolce TreeView zostanie zaznaczony węzeł.

TreeNodeCheckChanged

Wywoływane, gdy zmieni się stan pola wyboru węzła.

TreeNodeCollapsed

Wywoływane, gdy węzeł zostanie zwinięty.

TreeNodeExpanded

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.

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 , ani ;



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

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.

ClassName

Nazwa klasy dla strony.

CompilerOptions

Przekazywany do kompilatora.

Debug

Określa, czy kompilacja ma przebiegać z symbolami debugowania.

Description

Tekst opisujący stronę.

EnableViewState

Wskazuje, czy stan widoku jest obsługiwany przez kontrolkę użytkownika.

2

Aplikacje klient-serwer

Explicits

Wskazuje, czy strona powinna skompilowana z opcją VB.Net Explicite.

zostać

Inherits

Definiuje klasę ukrytego kodu.

Language

Zastosowany język programowania, wykorzystany do generowania bloków wewnątrz strony oraz skryptów po stronie serwera.

Src

Nazwa pliku źródłowego – pliku ukrytego kodu.

Strict

Wskazuje, czy strona powinna skompilowana z opcją VB.Net Strict

WaringLevel

Poziom ostrzeżeń kompilatora, na którym nastąpi przerwanie kompilacji

zostać

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

Dla wartości true wskazuje, że VS.Net będzie wyświetlał tę kontrolkę w oknie dialogowym dołączania danych.

Browsable

Określa czy właściwość zostanie wyświetlona w projekcie.

Category

Określa kategorię, w której ta kontrolka zostanie wyświetlona, gdy okno Properties będzie sortowane wg. Kategorii.

DefaultProperty

Właściwość domyślna klasy.

DefaultValue

Wartość domyślna.

Description

Tekst, który zostanie wyświetlony w polu opisu panelu Properties.

ToolboxData

Atrybut używany przez pakiet VS2005 w celu dostarczenia znacznika, kiedy obiekt jest przeciągany z paska narzędziowego.

3

Aplikacje klient-serwer

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

Aplikacje klient-serwer



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

Aplikacje klient-serwer

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

Aplikacje klient-serwer



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

Aplikacje klient-serwer

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

Aplikacje klient-serwer

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

Aplikacje klient-serwer 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