Upload
vukiet
View
214
Download
0
Embed Size (px)
Citation preview
Piotr Bubacz
Aplikacje Internetowe
ITA-103
Wersja 1
Warszawa, październik 2008
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Strona i-2
2008 Piotr Bubacz. Autor udziela prawa do bezpłatnego kopiowania
i dystrybuowania wśród pracowników uczelni oraz studentów objętych
programem ITAcademy. Wszelkie informacje dotyczące programu można
uzyskać: [email protected].
Wszystkie inne nazwy firm i producentów wymienione w niniejszym
dokumencie mogą być znakami towarowymi zarejestrowanymi przez ich
właścicieli.
Inne produkty i nazwy firm używane w treści mogą być nazwami
zastrzeżonymi przez ich właścicieli.
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Strona i-3
Spis treści Wprowadzenie i-4
Moduł 1 Podstawy HTML 1-1
Moduł 2 Kaskadowe Arkusze Stylów – CSS 2-1
Moduł 3 Podstawy JavaScript 3-1
Moduł 4 Wprowadzenie do ASP.NET 4-1
Moduł 5 Kontrolki serwerowe 5-1
Moduł 6 Projektowanie serwisów internetowych 6-1
Moduł 7 Kolokwium 1 7-1
Moduł 8 Kontrolki danych w ASP.NET 8-1
Moduł 9 LINQ w ASP.NET 9-1
Moduł 10 Bezpieczeństwo serwisów internetowych 10-1
Moduł 11 Zarządzanie stanem w aplikacjach ASP.NET 11-1
Moduł 12 Technologia WebParts 12-1
Moduł 13 ASP.NET AJAX 13-1
Moduł 14 ASP.NET AJAX Control Toolkit 14-1
Moduł 15 Kolokwium 2 15-1
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Strona i-4
Wprowadzenie
Informacje o kursie
Opis kursu Kurs zawiera informacje dotyczące programowania dynamicznych stron
internetowych w technologii ASP.NET. Przedstawia kompletny projekt
witryny internetowej sklepu Adventure Works realizowany w czasie zajęć,
dzięki któremu zapoznasz się z najważniejszymi komponentami tej
technologii.
Kurs rozpoczynamy od przedstawienia podstaw HTML i CSS, by później
przeprowadzić Cię przez podstawy tworzenia aplikacji internetowych oraz
dodawania i konfigurowania kontrolek dostępnych w ASP.NET. Te wszystke
zagadnienia poznajemy na przykładzie projektu sklepu internetowego, który
stopniowo rozbudowujemy o nowe, poznawane w kolejnych modułach
elementy.
Cel kursu Celem kursu jest przedstawienie zagadnień związanych z tworzeniem
aplikacji internetowych w ASP.NET, dzięki którym będziesz w stanie
samodzielnie projektować i wykonywać proste serwisy internetowe.
Uzyskane kompetencje Po zrealizowaniu kursu będziesz:
• potrafił tworzyć strony w XHTML przyjazne dla CSS
• rozumiał potrzebę tworzenia stron internetowych zgodnych ze
standardami
• potrafił tworzyć proste aplikacje działające po stronie klienta w
języku JavaScript
• potrafił tworzyć aplikacje internetowe w Visual Studio 2008
• potrafił dodawać i konfigurować kontrolki serwerowe dostępne w
ASP.NET
• potrafił zaprojektować szablon strony i zarządzać wyglądem serwisu
• potrafił dodawać i konfigurować różne kontrolki źródła prezentacji
danych
• potrafił tworzyć proste zapytania LINQ
• rozumiał potrzebę i znał możliwości zabezpieczania portalu przed
niepowołanym dostępem
• potrafił zarządzać stanem aplikacji
• potrafił tworzyć aplikacje internetowe konfigurowalne przez
użytkownika
• potrafił wykorzystywać zalety asynchronicznej komunikacji z
serwerem przy pomocy AJAX
• wiedział jak wykorzystać kontrolki dostępne w ASP.NET AJAX
Control Toolkit
Wymagania wstępne Do zrealizowania tego kursu powinieneś posiadać:
• wiedzę z zakresu programowania obiektowego w języku C#, którą
obejmują kursy ITA-104 „Wprowadzenie do programowania„ i
ITA-105 „Programowanie obiektowe”
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Strona i-5
Zakres tematyczny kursu
Opis modułów W Tab. 1 przedstawiony został opis modułów, zawierający podział na
zajęcia. Każde zajęcie jest zaplanowane na 90 minut. Wykładowca może
dostosować harmonogram do swoich potrzeb.
Tab. 1 Zakres tematyczny modułów
Numer moduł
Tytuł
Opis
Moduł 1
Podstawy HTML
W tym module znajdziesz informacje dotyczące języka
HTML. Poznasz jego możliwości i ograniczenia.
Zobaczysz, w jaki sposób używać tabel i formularzy do
pobierania informacji od użytkownika. Nauczysz się, jak
tworzyć proste strony i serwisy internetowe.
Moduł 2
Kaskadowe Arkusze
Stylów – CSS
W tym module znajdziesz informacje dotyczące
kaskadowych arkuszy stylów i zalet wynikających z ich
stosowania. Zobaczysz, w jaki sposób używać
selektorów i jak utworzyć układ strony wykorzystując
pozycjonowanie CSS. Dodatkowo nauczysz się, jak
zmienić istniejący dokument HTML wykorzystujący
formatowanie przy pomocy tabel, aby był zgodny ze
standardem XHTML i przyjazny dla CSS.
Moduł 3
Podstawy JavaScript
W tym module znajdziesz informacje dotyczące podstaw
języka JavaScript. Nauczysz się tworzyć kod działający po
stronie klienta w przeglądarce. Poznasz sposoby
sprawdzania poprawności wprowadzanych informacji
przez użytkownika.
Moduł 4
Wprowadzenie do
ASP.NET
W tym module znajdziesz informacje dotyczące podstaw
tworzenia aplikacji internetowych w Visual Studio 2008.
Nauczysz się dodawać strony internetowe do aplikacji
oraz umieszczać na nich kontrolki dostępne w ASP.NET.
Poznasz zasady programowego odwoływania się do
kontrolek oraz interakcji z użytkownikiem strony.
Moduł 5
Kontrolki serwerowe
W tym module znajdziesz informacje dotyczące
kontrolek dostępnych w ASP.NET. Poznasz różnice
między kontrolkami serwerowymi HTML a kontrolkami
Web. Nauczysz się wykorzystywać nie tylko różne
kontrolki serwerowe, ale również walidować
wprowadzone dane po stronie klienta lub/i po stronie
serwera.
Moduł 6
Projektowanie
serwisów
internetowych
W tym module znajdziesz informacje dotyczące
zarządzania wyglądem aplikacji i tworzenia elementów
nawigacyjnych. Poznasz możliwości centralnego
zarządzania wyglądem witryny przy pomocy stron
wzorcowych i kompozycji. Poznasz metody tworzenia
mapy witryny internetowej oraz nauczysz się, jak
wykorzystywać kontrolki nawigacyjne.
Moduł 8
Kontrolki danych w
ASP.NET
W tym module znajdziesz informacje dotyczące
komunikacji i wyświetlania informacji z bazy danych w
aplikacjach internetowych. Nauczysz się definiować
zapytania przy pomocy kontrolki LinqDataSource i
wyświetlać wyniki w kontrolkach GridView oraz
Repeater.
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Strona i-6
Moduł 9
LINQ w ASP.NET
W tym module znajdziesz informacje dotyczące
technologii LINQ. Nauczysz się, jak formułować proste
zapytania z wykorzystaniem zintegrowanego języka
zapytań i w jaki sposób połączyć go z ASP.NET.
Moduł 10
Bezpieczeństwo
serwisów
internetowych
W tym module znajdziesz informacje dotyczące
sposobów zabezpieczania dostępu do aplikacji
internetowej przy pomocy mechanizmów autoryzacji.
Poznasz kontrolki logowania oraz nauczysz się, jak
można ukrywać opcje menu przed różnymi grupami
użytkowników.
Moduł 11
Zarządzanie stanem w
aplikacjach ASP.NET
W tym module znajdziesz informacje dotyczące
możliwości zarządzania stanem w aplikacjach ASP.NET.
Nauczysz się przechowywać zmienne i obiekty w stanie
sesji i aplikacji. Zobaczysz, w jaki sposób można
dodawać, zarządzać i usuwać obiekty z tych stanów.
Moduł 12
Technologia WebParts
W tym module znajdziesz informacje dotyczące
technologii umożliwiającej personalizację wyglądu
strony przez jej użytkowników – WebParts. Nauczysz się,
jak tworzyć i zarządzać kontrolkami WebPart, jak
również, jak zachować układ kontrolek umieszczonych
na szablonie strony na wszystkich stronach serwisu.
Moduł 13
ASP.NET AJAX
W tym module znajdziesz informacje dotyczące
tworzenia aplikacji internetowych z wykorzystaniem
AJAX. Zobaczysz, jak prosto i skutecznie można
wykorzystywać podstawowe kontrolki dostępne w
ASP.NET AJAX. Nauczysz się, jak kilkoma kliknięciami
myszy rozszerzyć funkcjonalność aplikacji o możliwość
asynchronicznej komunikacji z serwerem.
Moduł 14
ASP.NET AJAX Control
Toolkit
W tym module znajdziesz informacje dotyczące
biblioteki ASP.NET AJAX Control Toolkit. Nauczysz się
rozszerzać możliwości standardowych kontrolek
ASP.NET o funkcjonalności zawarte w bibliotece.
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 2
Wersja 1
Podstawy HTML Spis treści
Podstawy HTML ................................................................................................................................... 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Uwagi dla studenta .................................................................................................................... 18
Dodatkowe źródła informacji..................................................................................................... 18
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące języka HTML. Poznasz jego możliwości i ograniczenia. Zobaczysz, w jaki sposób używać tabel i formularzy do pobierania informacji od użytkownika. Nauczysz się, jak tworzyć proste strony i serwisy internetowe.
Cel modułu
Celem modułu jest przedstawienie możliwości wykorzystania języka HTML, formatowania dokumentu przy użyciu tabel oraz pobierania informacji od użytkownika.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• potrafił tworzyć nowe strony internetowe w języku HTML
• wiedział jak tworzyć i kiedy warto stosować tabele
• potrafił tworzyć formularze i przesyłać je do odbiorcy
Wymagania wstępne
Ten moduł nie ma żadnego wymagania wstępnego. Możesz od razu rozpocząć pracę z tym modułem.
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem do realizacji tego modułu nie jest wymagane zapoznanie się z materiałem zawartym w innych modułach.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-3
Przygotowanie teoretyczne
Przykładowy problem
Znajomość języka HTML w projektowaniu stron internetowych w dobie narzędzi pracujących w trybie WYSIWYG (ang. What You See Is What You Get, co znaczy dosłownie „to co widzisz jest tym, co otrzymasz) wydaje się niepotrzebna. Nie jest to prawdą. Projektant aplikacji internetowej musi w swojej pracy sięgać również na poziom znaczników HTML.
Pełna kontrola nad kodem tworzonym po stronie użytkownika wymaga jawnego odwołania się do znaczników HTML. Znaczniki HTML nie wymagają przetwarzania na serwerze Znajomość znaczników pozwala nam również łatwiej zrozumieć problemy wyświetlania informacji.
Bez znajomości języka HTML bardzo trudno jest nam tworzyć dobre strony. Tabele w HTML są bardzo przydatne do przedstawiania danych tabelarycznych, choć niektórzy do dzisiaj budują w oparciu o nie wygląd aplikacji. Nie jest to błąd, ale powoduje ograniczenie dostępności strony dla urządzeń mobilnych, czy dla osób z ograniczonymi zdolnościami percepcji.
Formularze w języku HTML udostępniają podstawową funkcjonalność tworzenia elementów interakcji z użytkownikiem.
Podstawy teoretyczne
World Wide Web (w skrócie WWW lub Web) jest multimedialnym, hipertekstowym systemem informacyjnym opartym na publicznie dostępnych, otwartych standardach. Podstawowym zadaniem WWW jest publikowanie informacji.
WWW jest siecią milionów komputerów działających w oparciu o model klient-serwer. Serwer przechowuje informacje i obsługuje zapytania klienta. Klient tworzy zapytanie, wysyła, odbiera je i przetwarza, a następnie wyświetla informacje dla końcowego użytkownika. Klientem sieci Web jest najczęściej przeglądarka internetowa.
Cechy WWW:
• hipertekstowy system informacyjny
• graficzna reprezentacja informacji
• łatwa nawigacja
• system wieloplatformowy
• system rozproszony
• sieć dynamiczna
• sieć interaktywna
• uniwersalny sposób nazewnictwa zasobów informacyjnych (URI)
• ustalony protokół dostępu do zasobów (HTTP)
• stosowanie specjalnego typu języka w celu nawigacji po zasobach (HTML)
Strona internetowa
Strona internetowa to dokument tekstowy napisany w jednej z odmian języka znaczników, np. HTML, interpretowanego przez przeglądarkę użytkownika. Strony można podzielić ze względu na sposób jej tworzenia na statyczne i dynamiczne.
Strona statyczna musi być przygotowana wcześniej przez twórcę. Jej ostateczny wygląd oraz cała treść musi być znany na etapie projektowania.
Zalety:
• łatwość implementacji
Wady:
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-4
• brak elastyczności
Strona dynamiczna jest generowana przez serwer na podstawie działania użytkownika serwisu i danych zapisanych najczęściej w relacyjnej bazie danych.
Zalety:
• interaktywność
• łatwość aktualizacji
Wady:
• trudność w implementacji, testowaniu i wdrażaniu
• większe wymagania sprzętowe serwera i łącz internetowych
Serwis internetowy
Zbiór powiązanych ze sobą i umieszczonych w jednej lokalizacji stron internetowych nazywa się witryną lub serwisem internetowym. Portal jest zbiorem wielu informacji i zasobów z kilku lub jednej dziedziny. Portale zawierają najczęściej: wiadomości, informacje tematyczne, forum, Portale można podzielić na:
• poziome – zawierają informacje z wielu dziedzin, dodatkowo mogą udostępniać np. wyszukiwarki, pocztę elektroniczną
• pionowe – zawierają informacje z jednej dziedziny (nazywane wortalami)
Protokół HTTP
HTTP (ang. HyperText Transfer Protocol) – protokół warstwy aplikacji służący do transferu dokumentów HTML, obrazów, multimediów itp. Jest protokołem bezstanowym – interakcja klienta (najczęściej przeglądarki internetowej) z serwerem WWW odbywa się w modelu bezpołączeniowym:
• Klient nawiązuje połączenie TCP/IP z serwerem, najczęściej na porcie 80.
• Klient wysyła żądanie do serwera wraz z informacjami na temat systemu operacyjnego, wersji języka, obsługiwanych protokołów informacyjnych. W sieci przesyłane są polecenia tekstowe zorganizowane w wiersze np.:
GET /KatalogNaSerwerze/plik.html HTTP/1.0 User–agent: Mozilla/4.0 Accept: text/html, image/gif,image/jpeg Accept–language:pl [dodatkowa pusta linia]
• Serwer wysyła do klienta kod odpowiedzi (informujący o sukcesie lub problemach z wysyłaniem żądanego zasobu), informacje dotyczące rodzaju zawartości zasobu, kodowania, itp. oraz żądany zasób:
HTTP/1.1 200 OK. Server: ASP.NET Development Server/8.0.0.0 Date: Sat, 29 Jul 2006 22:49:42 GMT X–AspNet–Version: 2.0.50727 Cache–Control: private Content–Type: text/html; charset=utf–8 Content–Length: 487 Connection: Close
• Serwer po przesłaniu odpowiedzi automatycznie zamyka połączenie z klientem.
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-5
Najważniejsze metody klienta
Jeśli użytkownik musi podać jakieś dane, to jedyną możliwością jest pobranie ich ze standardowego formularza HTML. Dane podane mogą być przesłane do serwera za pomocą ośmiu metod, z których najczęściej wykorzystywane to:
• GET – pobieranie zasobu wskazanego przez URL. Może zawierać parametry dołączane do URL (po znaku zapytania).
• POST – wysyła dane użytkownika do określonego zasobu:
• dane zawarte są w ciele komunikatu
• nagłówek Content–Type i Content–Length
• w odpowiedzi klient otrzymuje dokument wygenerowany dynamicznie.
Przekazywanie parametrów
Parametry można przesyłać przy pomocy metody POST lub GET.
W metodzie GET Parametry są przekazywane w adresie URL po znaku zapytania, oddzielone od siebie znakiem &, w formacie parametr=wartość, np.
GET /index.aspx?cat=2&prodid=23
Znaki zastrzeżone (=, &, &, +) są kodowane do postaci %xx, gdzie xx jest kodem ASCII znaku zapisanym szesnastkowo, np. znak spacji zamieniany jest na %20.
W metodzie POST informacje są pobierane z formularza znajdującego się na stronie internetowej.
Język HTML
HTML (ang. HyperText Markup Language) jest językiem znaczników zaprojektowanym do tworzenia stron internetowych. Służy on do opisywania struktury dokumentu (nagłówki, akapity, listy), a nie jego formatowania. Umieszczanie informacji o formatowaniu w dokumencie jest złą praktyką. Interpretacją znaczników i graficznym przedstawieniem zawartości zajmują się przeglądarki internetowe. Gramatyka języka jest oparta o standard SGML.
SGML (ang. Standard Generalized Markup Language) to ustandaryzowany nadrzędny język znaczników służący do ujednolicania struktury i formatu różnego typu informacji. Umożliwia zapisywanie informacji w formie dokumentu tekstowego, dzięki czemu możliwe jest ich łatwe przenoszenie, wyświetlanie i drukowanie.
Podstawowe właściwości:
• Znacznik jest reprezentowany przez tekst zawarty w nawiasach trójkątnych (< i >).
• Tekst pomiędzy nawiasami to nazwa znacznika.
• Istnieją trzy rodzaje znaczników:
• otwierający postaci <znacznik>
• zamykający postaci </znacznik>
• samodzielny postaci <znacznik />
• Znacznik otwierający może posiadać szereg atrybutów definiowanych jako nazwa="wartość".
• Znaki białe, np. spacje, tabulatory lub znaki nowej linii są ignorowane.
Dokument HTML
Dokument HTML jest plikiem tekstowym, w którym znajdują się polecenia (znaczniki) HTML. Z tego wynika, że dokument taki można utworzyć za pomocą dowolnego edytora tekstowego, ręcznie dodając znaczniki. Metoda taka jest skuteczna, ale zbyt uciążliwa i podatna na błędy, szczególnie przy projektowaniu dużych serwisów internetowych. Dlatego na rynku pojawiło się wiele
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-6
specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Narzędzia można podzielić na dwie kategorie: narzędzia graficzne WYSIWYG oraz tekstowe. Narzędzia graficzne umożliwiają tworzenie serwisów osobom, które nie znają języka HTML, jednak znajomość tego języka ułatwia pracę twórcom stron.
Dokument rozpoczyna się definicją typu dokumentu. W języku HTML w wersji 4.01 element ten jest wymagany, podobnie jak w języku XHTML. Cały dokument zawarty jest w znaczniku <html> i składa się z dwóch głównych części: nagłówka (<head>) oraz ciała – treści dokumentu <body>.
Wersja minimalna dokumentu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!– Naglowek dokumentu ––> <title> Tytuł strony </title> </head> <body> <!– Tresc dokumentu ––> </body> </html>
Definicja typu dokumentu
Definicja typu dokumentu określa wersję języka, która jest wykorzystywana w dokumencie. Poprawny dokument HTML w wersji 4.01 zawiera w pierwszym wierszu definicje typu dokumentu. Podobnie jest w XHTML. Deklaracja typu zawiera informacje o dokumencie definicji typu (ang. Document Type Definition, DTD) wykorzystywanym w dokumencie. DTD zawiera definicje elementów, które można użyć w danym dokumencie.
W języku HTML w wersji 4.01 określono trzy dokumenty definicji typu, które można użyć w projektowanej stronie internetowej:
• Ścisły (ang. strict) – zawiera wszystkie elementy i atrybuty, które są zdefiniowane w standardzie bez elementów nie zalecanych oraz informacji dotyczących dokumentów zawierających ramki. Deklaracja typu dokumentu:
<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• Przejściowy (ang. transitional) – zawieray wszystkie elementy typu bezpośredniego oraz elementy i atrybuty niezalecane (większość dotyczy wizualnej formatowania). Deklaracja typu dokumentu:
<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• Zbiór ramek (ang. frameset) – zawiera wszystkie elementy typu przejściowego oraz elementy zbioru ramek. Deklaracja typu dokumentu:
<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
W dokumencie XHTML przed elementem korzenia (najczęściej znacznikiem <html>) musi znajdować się deklaracja typu dokumentu, tzw. DOCTYPE. Publiczny identyfikator dołączony do tej deklaracji musi odnosić się do jednego z trzech DTD:
<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–transitional.dtd">
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-7
<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–frameset.dtd">
Nagłówek strony
Nagłówek strony zawiera informacje, które nie są wyświetlane na stronie, ale mają wpływ na jej wygląd. Przykłady tu prezentowane zapisane zostały zgodnie z językiem HTML. Różnica pomiędzy zapisem HTML a XHTML to przede wszystkim konieczność stosowania w XHTML bardziej restrykcyjnych reguł formatowania dokumentu, np. zamknięcie znacznika czy pisanie nazw znaczników małymi literami, lub otaczanie wartości atrybutów cudzysłowem, podczas gdy w HTML można użyć apostrofów, w XHTML wymagana jest również odpowiednia kolejność zamykania znaczników.
Przykładowe znaczniki w sekcji <head>:
• <title> – zawiera tytuł dokumentu wyświetlany w pasku tytułowym okna przeglądarki. Zgodnie ze specyfikacją języka, każdy dokument musi posiadać ten znacznik w sekcji <head>.
• <meta> – umożliwia autorom strony na podawanie informacji o stronie. Informacje mogą być zawarte w następujących atrybutach:
• lang – określa język zawartości
• content – ustala wartość atrybutu
• name – ustala nazwę i rodzaj informacji
• scheme – określa schemat interpretacji informacji
• http–equiv – ustala nazwę i rodzaj informacji
• <link> – określa relację pomiędzy połączonymi dokumentami. Znacznik wykorzystywany do określania lokalizacji zewnętrznego dokumentu CSS. Atrybuty znacznika:
• charset – definiuje kodowanie znaków we wskazanym zasobie
• href – adres zasobu
• type – określa typ MIME wskazanego zasobu
• href – adres zasobu
• rel – definiuje związek pomiędzy aktualnym, a wskazywanym zasobem. Rodzaje związków:
• stylesheet – zewnętrzny arkusz styli
• alternate – alternatywna wersja dokumentu, często stosowana z atrybutem Lang
• glosssary – słownik
• copyright – prawa autorskie dokumentu
• help – plik z dodatkową pomocą, linkami itp.
• rev – definiuje związek pomiędzy wskazywanym, a aktualnym zasobem
Formatowanie treści dokumentu
W znaczniku <body> umieszczona jest treść dokumenty. W tym miejscu możliwe jest korzystanie z pełnej palety możliwości języka HTML, w szczególności:
• Definiowanie struktury tekstu:
• nagłówki, akapity itp.
• listy wypunktowane i numerowane
• wyróżnianie cytatów, itp.
• Formatowanie tekstu:
• wielkość i kolor tekstu
• podkreślanie, pogrubianie, pochylanie, wyrównanie tekstu do lewej, prawej, środka, lub do obydwu marginesów, itp.
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-8
• Tabele
• Osadzanie grafiki i innych obiektów
• Odnośniki
• Formularze
Definiowanie struktury tekstu
Definiowanie struktury dokumentu polega na określaniu podziału tekstu na rozdziały, akapity i inne jednostki logiczne dokumentu.
Nagłówki
Znacznik <h1> do <h6> określa nagłówek – tytuł rozdziału. <h1> definiuje nagłówek najwyższego poziomu (dotyczy głównego rozdziału i jest wyświetlany największymi literami), a <h6> najniższego poziomu (jest wyświetlany najmniejszą czcionką). Dobrą praktyką jest umieszczanie co najwyżej jednego nagłówka pierwszego poziomu <h1>.
<h1>To jest nagłówek 1</h1>
<h2>To jest nagłówek 2</h2>
<h3>To jest nagłówek 3</h3>
<h4>To jest nagłówek 4</h4>
<h5>To jest nagłówek 5</h5>
<h6>To jest nagłówek 6</h6>
Akapity i wiersze
Akapity są podstawową jednostką logiczną podziału dokumenty. HTML nie rozpoznaje białych znaków (spacje, znaki końca linii), traktując je, niezależnie od ich ilości, jak pojedynczą przerwę – odstęp. Zawartość akapitu należy umieścić w specjalnym znaczniki <p>. Znacznik <p> musi zostać zamknięty (</p>).
Przeglądarka sama decyduje, w którym miejscu ma zostać przełamana linia. Użytkownik może wymusić przełamanie za pomocą znacznika <br />.
Listy wypunktowane i numerowane
W wielu dokumentach istnieje potrzeba zaprezentowania fragmentu tekstu za pomocą listy wypunktowanej lub numerowanej. Możliwe jest również tworzenie wielopoziomowych list.
Znacznik <ul> umożliwia utworzenie szkieletu wykazu wypunktowanego. Poszczególne punkty wykazu należy umieszczać między znacznikami <li> i </li>. Standardowo pozycje listy oznaczone są kołem. Do utworzenia listy numerowanej zamiast znacznika <ul> wykorzystuje się znacznik <ol>. Standardowo pozycje listy są numerowane za pomocą liczb arabskich.
Zmiana wyglądu oraz sposobu znakowania listy jest możliwa przy pomocy kaskadowych arkuszy stylów, które poznasz w kolejnym module.
Inne wyróżnienia tekstu
W języku HTML możliwe jest logiczne wyróżnianie pewnych informacji, np. cytatów. Wyróżnienie nie tylko dodaje informacje o strukturze, ale również jest związane z formatowaniem danego fragmentu przez przeglądarkę. Przeglądarki albo zmieniają wygląd zawartości tekstu, albo ignorują dany znacznik nie zmieniając formatowania.
Lista znaczników:
• <em> – wyróżnienie
• <strong> – mocniejsze wyróżnienie
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-9
• <cite>– zawiera cytowanie lub odnośnik do innego źródła
• <dfn> – zawiera definicję
• <code> – fragment kodu programu komputerowego
• <samp> – zawiera przykładowy wynik działania programu, skryptu, itp.
• <kbd> – określa tekst, który ma wprowadzić użytkownik
• <var> – zawiera zmienną lub argument programu
• <acronym> – zawiera akronim, np. WWW, HTTP, URI, itp.
Osadzanie grafiki i innych obiektów
Grafika oraz inne multimedialne elementy są dzisiaj jedną z najbardziej charakterystycznych wyróżników stron internetowych.
Osadzanie grafiki na stronie
Podstawowa konstrukcja ma następującą postać:
<img src="zrodlo_pliku" alt="tekst">
Atrybut alt służy do wyświetlania tekstu, gdy nie jest możliwe wyświetlenie grafiki.
Atrybuty wymagane:
• src – lokalizacja pliku (URL)
• alt – krótki opis wyświetlany, gdy nie można wyświetlić grafiki
Pozostałe atrybuty opcjonalne są w większości przestarzałe i zamiast nich lepiej jest używać styli CSS.
Osadzanie multimediów na stronie
Do osadzania grafiki służy znacznik <object>. Umożliwia on określenie danych i parametrów obiektu osadzonego w dokumencie HTML wraz z kodem, który może być użyty do wyświetlenie lub manipulacji danymi.
Atrybuty znacznika:
• align – wyrównanie obiektu (top, bottom, left, right)
• archive – lista ładowanych wstępnie zasobów
• border – rozmiar ramki obiektu
• classid – klasa obiektu
• codebase – określa adres bazowy dla classid, data i archive
• codetype – określa typ obiektu
• data – wskazuje adres danych obiektu
• declare – deklaracja obiektu
• height – określa wysokość obiektu
• hspace – pionowy odstęp od obiektu
• name – unikatowa nazwa elementu
• standby – informacja pokazywana w trakcie ładowania obiektu
• type – określa typ danych
• usemap – podaje mapę elementu
• vspace – odstęp poziomy od obiektu
• width – określa szerokość obiektu
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-10
Grupowanie liniowe i blokowe
Znacznik <span> tworzy uniwersalny zakres liniowy i pozwala nadać mu wspólne atrybuty za pomocą stylu.
Znacznik <div> obejmuje blokiem grupę elementów w dokumencie i pozwala im nadać wspólne atrybuty. Element ten jest kontenerem umożliwiającym dodanie struktury do dokumentu HTML. Najczęściej służy on do logicznego podziału zawartości strony, np. nawigacji, nagłówka czy stopki strony.
Odnośniki
Odnośniki (odsyłacze, hiperłącza, łącza hipertekstowe, odnośniki) są najbardziej charakterystycznym elementem sieci WWW. Dzięki nim można mówić o HTML jako języku hipertekstowym – odnośniki w jednym kontekście do innego kontekstu. Bez odsyłaczy nie byłoby możliwe tworzenie serwisów internetowych, bez nawigacji stałby się on tylko zbiorem niepowiązanych dokumentów lub musiałby zostać przedstawiony na jednej stronie, co jest najczęściej możliwe, chociaż w przypadku dużych portali mało prawdopodobne.
Odnośnik to wskazanie do innego miejsca. Kliknięcie na nim przenosi użytkownika do określonego miejsca. Może to być miejsce na tej samej stronie, w tym samym serwisie, ale równie dobrze może to być strona na drugim końcu świata.
Do utworzenia odnośnika w języku HTML potrzebne są lokalizacja zasobu oraz tekst opisujący zasób. Format najprostszego odnośnika:
<a href="lokalizacja_zasobu">Tekst opisujący zasób</a>
Parametr href (ang. Hypertext Reference) – odnośnik hipertekstowy. Służy do określenia URL zasobu, wskazywanego przez dane połączenie.
Lokalizacja to najczęściej adres URL do zasobu lub nazwa pliku. Lokalizacja może zawierać ścieżkę względną lub bezwzględną.
Ścieżka względna jest podawana względem aktualnego pliku, np.:
<a href="../plik_w_katalogu_nadrzednym">Tekst opisujący zasób</a> <a href="/kat/plik_w_katalogu_podrzednym">Tekst opisujący zasób</a>
Ścieżka bezwzględna jest podawana jako pełny adres internetowy strony.
<a href="http://www.example.com/plik">Tekst opisujący zasób</a>
Połączenie do określonych miejsc w dokumencie
Aby odwołać się do określonego miejsca w dokumencie należy określić zakładkę (kotwicę, etykietę), a następnie wskazać ją w odnośniku.
Aby utworzyć zakładkę należy użyć konstrukcji:
<a name="nazwa_zakladki"> </a>
Możliwe jest utworzenie dowolnej ilości etykiet na stronie. Jest to szczególnie wygodne w przypadku stron o dużej objętości.
Odnośnik do etykiety ma postać:
<a href="strona.html#nazwa_zakladki">Odnośnik do zakładki</a>
lub jeśli odnośnik jest na tej samej stronie co zakładka, to można odnieść się w skróconej formie:
<a href="#nazwa_zakladki">Odnośnik do zakładki</a>
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-11
Odnośniki do adresu e-mail
Odnośnik do adresu e-mail jest taki sam, jak standardowy odnośnik. Różnica polega na tym, że po kliknięci go nie zostanie otworzona nowa strona, lecz aplikacja do wysyłania listów elektronicznych. Linki do adresów e-mail są szczególnie pomocne dla kontaktu z autorem strony czy biurem obsługi klienta na stronie firmowej.
Odnośnik do adresu e-mail ma postać:
<a href="mailto:adres@serwer">Wyślij do nas list</a>
Tabele
Tabele w języku HTML są podobne do tabel spotykanych w innych dziedzinach życia, umożliwiając przedstawienie danych w uporządkowanej postaci. Dodatkowo umożliwiają układanie danych – tekstu, obrazków, odnośników, formularzy, pól formularza, innych tabel, itp. w wiersze i kolumny komórek. Należy jednak dodać, że współcześnie panuje tendencja odchodzenia od wykorzystywania tabel w charakterze szkieletu strony.
Tabela może zawierać nagłówek zawierający krótki opis zawartości tabeli. Tabel składa się z wierszy, które zawierają komórki. Istnieje możliwość scalania wielu wierszy lub kolumn.
Znacznik <table>
Tabelę rozpoczyna znacznik <table>, a kończy </table>. Znacznik <table> posiada kilka atrybutów. Atrybut width określa szerokość tabeli. Może być ona podana m.in. w pikselach lub jako procent całej szerokości dostępnej dla okna przeglądarki. Przykłady:
<table width="150"> <table width="50%">
Innym atrybutem jest border, który określa grubość ramki. Parametr ten określa w pikselach grubość ramki. Wartość 0 oznacza całkowite wyłączenie ramki.
Dodatkowo możliwe jest określenie odległości pomiędzy komórkami – atrybut cellspacing. Odległość od komórki do jej zawartości określa atrybut cellpadding. Obie wartości określane są w pikselach.
<table border="2" cellspacing="3" cellpadding="3">
Wiersze tabeli
Podstawową jednostką tabeli są wiersze. Każda tabela musi zawierać co najmniej jeden wiersz. Wiersz tabeli reprezentowany jest przez znacznik <tr>.
<table border="2" cellspacing="3" cellpadding="3"> <tr> </tr> </table>
Wiersz tabeli tworzy ramy dla komórek z danymi. Możliwe jest dodanie wielu wierszy do tabeli:
<table border="2" cellspacing="3" cellpadding="3"> <tr> </tr> <tr> </tr> </table>
Komórka tabeli
Komórka tabeli dodaje pionową kolumnę do tabeli. Są one reprezentowane przez znacznik <td>. Wspólnie ze znacznikami <table> oraz <tr>, znacznik <td> stanowi najważniejsze elementy budowy tabeli:
<table width="80%" border="2" cellspacing="3" cellpadding="3"> <tr> <td></td> <td></td>
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-12
</tr> </table>
Powyższy kod HTML tworzy tabelę przedstawioną poniżej.
Nagłówki tabeli
Nagłówek tabeli określa nagłówek kolumny lub wiersza. Tekst w komórce, która jest nagłówkiem jest pogubiony. Nagłówek tabeli reprezentowany jest przez znacznik <th>.
W przypadku nagłówka wiersza:
<table width="80%" border="2" cellspacing="3" cellpadding="3"> <tr> <th>Lp.</th> <th>Imię</th> </tr> <tr> <td>1</td> <td>Piotr</td> </tr> </table>
W przypadku nagłówka kolumny:
<table width="80%" border="2" cellspacing="3" cellpadding="3"> <tr> <th>Lp.</th> <td>1</td> </tr> <tr> <th>Imię</th> <td>Piotr</td> </tr> </table>
Tytuł tabeli
Często niezbędne jest dołączenie do tabeli jej tytułu. Tytuł powinien zawierać krótki opis wyjaśniający jej treść. Tytuł reprezentowany jest przez znacznik <caption>, który należy umieścić zaraz za znacznikiem <table>, a przed znacznikami <tr>.
<table width="80%" border="2" cellspacing="3" cellpadding="3"> <caption>Tytuł</caption> <tr> <th>Lp.</th><td>1</td> </tr> <tr> <th>Imię</th><td>Piotr</td> </tr> </table>
Scalanie wierszy
Czasem istnieje konieczność scalenia kilku wierszy w jednej komórce. W tym celu należy użyć atrybutu rowspan, podając ile wierszy ma zostać połączonych.
Przykład:
<table border="1" cellpadding="2"cellspacing="2"> <tr> <th rowspan="2" >Nagłowek (scalone 2 wiersze)</th> <td>dane</td> <td rowspan="3" > dane (scalone 3 wiersze)</td>
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-13
<td> dane</td> </tr> <tr> <td>dane</td> <td>dane</td> </tr> <tr> <th>Nagłowek</th> <td>dane</td> <td>dane</td> </tr> </table>
Scalanie kolumn
Podobnie jak wiersze, można również scalić kolumny. Służy do tego atrybut colspan.
<table border="2" cellpadding="2" cellspacing="2"> <tr> <th>Nagłówek</th> <th>Nagłowek</th> <th colspan="2">Nagłówek (scalne 2 kolumny)</th> </tr> <tr> <td>dane</td> <td colspan="2"> dane (scalone 2 kolumny)</td> <td>dane</td> </tr> <tr> <td colspan="2">dane (scalone 2 kolumny)</td> <td>dane</td> <td>dane</td> </tr>
</table>
Możliwe jest również jednoczesne scalanie wierszy i kolumn:
<table border="2" cellpadding="2" cellspacing="2"> <tr> <th>Nagłówek</th> <th>Nagłowek</th> <th>Nagłówek</th> <th>Nagłówek</th> <th>Nagłówek</th> <th>Nagłówek</th> </tr> <tr> <td>dane</td> <td colspan="2">dane (scalone 2 kolumny)</td> <td rowspan="2" colspan="2">dane (scalone 2 wiersze, 2 kolumny)</td> <td>dane</td> </tr> <tr> <td>dane</td> <td>dane</td> <td>dane</td> <td>dane</td> </tr> </table>
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-14
Rys. 2 Przykład tabeli
Formularze
Formularz umożliwia pobranie od użytkownika pewnych informacji. Zawiera przycisk umożliwiający wysłanie danych do określonego pliku/aplikacji na serwerze. Przykłady wykorzystania formularza to:
• podanie danych osobowych i adresu email w celu zapisania się na forum
• rezerwacja miejsca wakacji w biurze podróży
• podawanie danych do przelewu w bankowości elektronicznej
• zakup określonych towarów i usług w sklepie internetowym
Formularze są relatywnie proste do tworzenia, przynajmniej z pozycji kodu HTML. Największy problem stanowi przetworzenie wpisanych danych po stronie serwera tak, aby odpowiadały one zamierzeniom projektanta i użytkownika.
Formularz zawarty jest w znaczniku <form>. Ma on dwa atrybuty:
• method – określa metodę, jaką zostaną wysłane dane do serwera. Są to metody protokołu http, takie jak GET i POST.
• action – określa ścieżkę do miejsca, w którym skrypt zostanie przetworzony.
Parametr action może wskazywać nie tylko ścieżkę na serwerze, ale również w prostych przypadkach umożliwia przesyłanie danych z formularza przy użyciu poczty elektronicznej:
<form method="post" action="mailto:adres@serwer?subject=tytuł">
Pola tekstowe
Pola tekstowe są wykorzystywane w wielu przypadkach do pobrania od użytkownika określonych, krótkich fragmentów tekstu, takich jak imię, nazwisko i numeru telefonu. Pole tekstowe jest tworzone przy wykorzystaniu znacznika input z parametrem type="text".
Przykład:
<form method="post" action="Default.aspx"> Imię: <input type="text" /><br /> Nazwisko: <input type="text" /><br /> Telefon: <input type="text" /> </form>
Rys. 3 Przykład formularz
Należy zauważyć, że nie ma możliwości rozróżnienia poszczególnych pól formularz. Do tego celu służą parametry name i id z odpowiednimi wartościami. Wykorzystanie obu parametrów zapewni
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-15
kompatybilność z wcześniejszymi aplikacjami oraz umożliwi identyfikowanie określonych przestrzeni formularza dla formatowania oraz oprogramowania.
<form method="post" action="Default.aspx"> Imię: <input id="imie" name="imie" type="text" /> <br /> Nazwisko: <input id="nazwisko" name="nazwisko" type="text" /> <br /> Telefon: <input id="telefon" name="telefon"type="text" /> </form>
Kolejnym elementem związanym z polem tekstowym jest określanie rozmiaru pola za pomocą atrybutu size oraz określanie maksymalnej ilości znaków, jaką pole akceptuje za pomocą atrybutu maxlength.
Pole tekstowe umożliwia również ukrywanie wprowadzanych ważnych informacji, takich jak hasła, zamieniając atrybut type="text" na type="password":
Hasło <input id="haslo" name="haslo" type="password" />
Rys. 4 Pole ukryte
Obszar tekstowy
Obszar tekstowy to miejsce, w którym użytkownik strony może wpisać swoje dodatkowe uwagi. Obszar ten umożliwia również wielowierszowe wprowadzanie danych. Jest on tworzony przy pomocy znacznika <textarea> wraz z parametrami rows i cols, określającymi odpowiednio ilość wierszy i kolumn przeznaczonych do wprowadzania tekstu.
<form method="post" action="Default.aspx">Wpisz swoje uwagi:<br /> <textarea id="komentarz" cols="20" rows="20" > </textarea> </form>
Rys. 5 Przykład obszaru tekstowego
Pole opcji i pole wyboru
Pole opcji (przełącznika) jest polem, w którym użytkownik wybiera jedną z dostępnych możliwości. W polu stosowany jest znacznik <input> oraz parametr type="radio".
Do grupowania wartości poszczególnych opcji wykorzystywany jest parametr name, który musi być wspólny dla wszystkich elementów listy. Parametr checked="checked" umożliwia domyślne zaznaczenie danej opcji.
<form method="post" action="Default.aspx"> Podaj swoją płeć<br /> <input id="mezczyzna"name="plec" type="radio" /> Mężczyzna<br /> <input id="kobieta" name="plec" type="radio" /> Kobieta<br /> <input id="brak" name="plec" type="radio" checked="checked" /> Wolę nie podawać<br /> </form>
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-16
Rys. 6 Przykład pola opcji
Pole wyboru umożliwia dokonanie wyboru kilku opcji jednocześnie, np. zaznaczenie kilku zainteresowań, czy kilku sposobów odpoczynku. W polu stosowany jest znacznik <input> oraz parametr type="checkbox".
<form method="post" action="Default.aspx"> <input type="checkbox" name="zain" id="elektronika"/>elektronika<br /> <input type="checkbox" name="zain" id="fotografia"/>fotografia<br /> <input type="checkbox" name="zain" id="internet"/>internet<br /> <input type="checkbox" name="zain" id="inwestycje"/>inwestycje<br /> <input type="checkbox" name="zain" id="ksiazki"/>ksiazki<br /> <input type="checkbox" name="zain" id="muzyka"/>muzyka<br /> <input type="checkbox" name="zain" id="sport"/>sport<br /> <input type="checkbox" name="zain" id="polityka"/>polityka </form>
Rys. 7 Przykład pola wyboru
Lista rozwijana oraz wyboru
Lista rozwijana służy do tworzenia rozwijanych menu, zawierających kilka opcji. Użytkownik może wybrać jedną z nich. Składnia jest następująca:
<select name="nazwa_listy" size="liczba_wyświetlanych_pozycji" > <option> pierwsza pozycja</option> <option> druga pozycja</option> <option> trzecia pozycja</option> ... </select>
Przeglądarka tworzy listę rozwijaną zawierającą poszczególne elementy zawarte w znaczniku <option>, parametr value umożliwia rozpoznanie wybranego elementu:
<form method="post" action="Default.aspx"> Wybierz ulubioną potrawę:<br /> <select id="potrawa"> <option value="pierogi">Pierogi</option> <option value="slatka">Sałatka warzywna</option> <option value="slimaki">Ślimaki</option> </select> </form>
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-17
Rys. 8 Przykład listy rozwijanej
Lista wyboru służy do tworzenia do tworzenia menu, zawierających kilka opcji. Możliwe jest wybranie jednej lub kilku z nich. Listę ta tworzy się podobnie do listy rozwijanej dodając atrybut size="wyświetlana wielkość listy". wybór wielokrotny możliwy jest po dodaniu atrybutu multiple="multiple".
<form method="post" action="Default.aspx"> <select id="potrawa" size="5" multiple="multiple"> <option value="pierogi">Pierogi</option> <option value="slatka">Sałatka warzywna</option> <option value="slimaki">Ślimaki</option> </select> </form>
Rys. 9 Przykład listy wyboru
Wysyłanie informacji
Po wykonaniu formularza należy jeszcze zapewnić wysłanie jego zawartości do autora. Sposób wysłania jest określony w atrybutach method i action znacznika <form>. Do wysłania służy znacznik input z atrybutem type="submit". Po kliknięciu tego przycisku przeglądarka wyśle dane (wypełnione pola tekstowe, wybrane opcje itp.) do miejsca zdefiniowanego w znaczniku form.
Często istnieje potrzeba zresetowania całego formularza, służy do tego znacznik input z atrybutem type="reset".
<form method="post" action="Default.aspx"> <input type="reset" /> <input type="submit" /> </form>
Rys. 10 Przyciski formularza - Reset i Submit
Parametr value w obu przypadkach umożliwia dopasowanie wyświetlanego komunikatu na przyciskach:
<form method="post" action="Default.aspx"> <input type="reset" value="Skasuj dane"/> <input type="submit" value="Wyślij"/> </form>
Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-18
Podsumowanie
W tym rozdziale przedstawione zostały podstawy języka HTML. Pokazaliśmy najważniejsze znaczniki, które są wykorzystywane do tworzenia stron internetowych.
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• znasz podstawowe znaczniki HTML
• wiesz jak tworzyć tabelę i jak łączyć wiersze i kolumny
• wiesz jak tworzyć i przesyłać formularze internetowe napisane w języku HTML
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. Bryan Pfaffenberger, Steven M. Schafer, Chuck White, Bill Karow, HTML, XHTML i CSS. Biblia, Helion, 2005
Książka zawiera opis najnowszych standardów związanych z tworzeniem stron WWW – obowiązującej obecnie specyfikacji HTML, CSS oraz XHTML. Przedstawia nowoczesne metodologie tworzenia i testowania witryn WWW oraz ich aktualizowania i modyfikowania.
2. Wempen Faithe, HTML i XHTML Krok po kroku, RM, 2007
Z książki nauczysz się nadawać strukturę stronom WWW, stosując tabele, ramki lub makiety oparte na podziałach. Utworzysz listy wypunktowane i numerowane, aby poprawić przekaz informacji. Będziesz wiedział, jak dodać hiperłącza i paski menu, aby ułatwić nawigację. Dowiesz się, w jaki sposób umieść obrazki, klipy dźwiękowe i wideo na stronach WWW. Wprowadzisz kolory, rozmiary czcionek i różne formatowanie, stosując znaczniki i kaskadowe arkusze stylów. Zbudujesz formularze z przyciskami opcji, polami wyboru i rozwijanymi menu.
3. Jennifer Niederst Robbins, HTML i XHTML. Leksykon kieszonkowy, Helion, 2006
W książce znajdziesz zestawienie znaczników HTML – wraz z atrybutami i ich dopuszczalnymi wartościami – które jest niezwykle przydatne każdemu projektantowi witryn WWW. Autor opisuje najnowsze specyfikacje HTML i XHTML, wskazuje podobieństwa i różnice pomiędzy nimi, a także zawiera praktyczne informacje, dzięki którym Twoja witryna WWW zostanie zaprojektowana zgodnie z rekomendacjami W3C.
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 2
Wersja 1
Kaskadowe Arkusze Stylów – CSS
Spis treści
Kaskadowe Arkusze Stylów – CSS ........................................................................................................ 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Przykładowe rozwiązanie ............................................................................................................. 9
Porady praktyczne ..................................................................................................................... 11
Uwagi dla studenta .................................................................................................................... 12
Dodatkowe źródła informacji..................................................................................................... 12
Laboratorium podstawowe ................................................................................................................ 14
Problem 1 (czas realizacji 20 min) .............................................................................................. 14
Problem 2 (czas realizacji 25 min) .............................................................................................. 17
Laboratorium rozszerzone ................................................................................................................. 21
Zadanie 1 (czas realizacji 45 min) ............................................................................................... 21
Zadanie 2 (czas realizacji 45 min) ............................................................................................... 21
Zadanie 3 (czas realizacji 90 min) ............................................................................................... 21
Zadanie 4 (czas realizacji 90 min) ............................................................................................... 21
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące kaskadowych arkuszy stylów i zalet wynikających z ich stosowania. Zobaczysz, w jaki sposób używać selektorów i jak utworzyć układ strony wykorzystując pozycjonowanie CSS. Dodatkowo nauczysz się, jak zmienić istniejący dokument HTML wykorzystujący formatowanie przy pomocy tabel, aby był zgodny ze standardem XHTML i przyjazny dla CSS.
Cel modułu
Celem modułu jest przedstawienie możliwości wykorzystania kaskadowych arkuszy stylów do określenia wyglądu dokumentu XHTML, jak również przedstawienie zasad pracy z arkuszami stylów w Visual Studio.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• wiedział czym są i gdzie warto stosować kaskadowe arkusze stylów
• potrafił tworzyć nowe strony przyjazne dla kaskadowych arkuszy stylów
• rozumiał potrzebę przystosowania istniejących dokumentów HTML do wymagań standardu XHTML
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy języka XHTML (patrz: moduł „Wprowadzenie do XHTML”)
• rozumieć zasady grupowania elementów przy pomocy znaczników <div> i <span>
• znać zasady pracy w środowisku Visual Studio, w szczególności tworzenia stron internetowych zgodnych z XHTML
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem do realizacji tego modułu należy zapoznać się z materiałem zawartym w module „Podstawy HTML”.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-3
Przygotowanie teoretyczne
Przykładowy problem
Mając już pewne doświadczenie z językiem HTML, na pewno próbowałeś określić układ elementów na stronie przy pomocy tabel, a jej wygląd przy pomocy znaczników takich jak <i>, <b> czy <font>. Stosując takie podejście prędzej czy później zauważysz jego oczywiste wady. Przy bardziej złożonych stronach kod HTML staje się nieczytelny, a próba zmiany stylu lub układu elementów pociąga za sobą konieczność wprowadzenia poprawek w wielu miejscach w kodzie. Co więcej, jeśli strona, którą tworzysz, jest tylko jedną z wielu stron w serwisie, to zmiany najprawdopodobniej trzeba wprowadzić również w pozostałych dokumentach. Rozwiązaniem tych problemów może być oddzielenie treści dokumentu od jego prezentacji. Niestety język HTML nie wspiera takiej możliwości. Do tego celu powszechnie wykorzystuje się inne narzędzie – kaskadowe arkusze stylów lub w skrócie CSS (ang. Cascading Style Sheets).
O ile tworzenie reguł CSS nie jest trudne, o tyle nauka efektywnego posługiwania się nim może zająć dużo więcej czasu, niż w przypadku języka HTML. Musisz nie tylko wiedzieć, jakie właściwości mają poszczególne elementy HTML, lecz również jak właściwości te są interpretowane przez najpopularniejsze przeglądarki. Ponadto musisz nauczyć się odpowiednio przygotowywać dokumenty HTML i poprawnie pozycjonować elementy na stronie.
Podstawy teoretyczne
Kaskadowe arkusze stylów to mechanizm używany do opisywania wyglądu dokumentów HTML. Wśród głównych zalet wynikających z jego stosowania wymienić można:
• Łatwiejsze zarządzanie wyglądem dokumentów – CSS pozwala grupować informacje o wyglądzie poszczególnych elementów strony, jak również wykorzystywać je wielokrotnie, nawet przez wiele dokumentów.
• Mniejszy rozmiar stron – stosowanie arkuszy stylów pozwala zmniejszyć rozmiar dokumentów HTML i ogólnie ograniczyć ilość danych, jakie musi pobrać użytkownik, by wyświetlić je w przeglądarce – w przypadku, gdy wiele stron wykorzystuje ten sam arkusz CSS, jest on pobierany przez przeglądarkę tylko raz.
• Oddzielenie treści od wyglądu dokumentów – dzięki CSS można oddzielić zawartość stron od ich wyglądu, dzięki czemu ich treść staje się łatwiej dostępna np. dla wyszukiwarek internetowych lub czytników ekranowych, wykorzystywanych przez osoby niewidome.
Reguły CSS
Arkusz CSS stanowi zbiór reguł, które informują przeglądarkę, jak wyświetlać określone elementy na stronie. Każda reguła składa się z dwóch części: tzw. selektora i definicji, którą tworzy zbiór par właściwość-wartość:
selektor { właściwość: wartość[; właściwość: wartość[;...n] ] }
Selektor określa, jakich elementów strony dotyczy reguła, definicja zaś mówi, jakie wartości powinny przyjąć wybrane właściwości tych elementów, takie jak kolor czy styl tekstu. Przykładowo następująca reguła:
h1 { font-family: Arial; font-style: italic; }
określa, że tekst wewnątrz wszystkich elementów h1 na stronie powinien zostać wyświetlony krojem Arial, pismem pochyłym.
Rodzaje selektorów
Selektory to jedne z najważniejszych aspektów CSS. Dzielą się one na kilka rodzajów, z których te najczęściej używane omówimy w kolejnych punktach.
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-4
Selektor typu
Selektor typu odnosi się do wszystkich elementów określonego rodzaju. Przykładowo reguła:
h1 { font-weight: bold }
zostanie zastosowana dla wszystkich elementów h1 w dokumencie.
Selektor klasy
Selektor klasy odnosi się do wszystkich elementów o określonej wartości atrybutu class. Przykładowo reguła:
.akapit { font-weight: bold; }
zostanie zastosowana dla elementów dowolnego rodzaju, którym przypisano klasę akapit, np.:
<p class="akapit">…</p>
Selektor ID
Selektor ID działa na podobnej zasadzie, co selektor klasy, z tymże wybiera elementy o określonej wartości atrybutu id. Ponieważ wartość tego atrybutu jest unikatowa, selektor tego typu zawsze odnosi się do co najwyżej jednego elementu na stronie. Przykładowo reguła:
#stopka { font-weight: bold; }
zostanie zastosowana dla elementu dowolnego rodzaju posiadającego atrybut id="stopka", np.:
<div id="stopka">…</div>
Łączenie selektorów
By precyzyjniej określić elementy, poszczególne rodzaje selektorów można łączyć ze sobą. Przykładowo reguła:
p.akapit { font-weight: bold; }
zostanie zastosowana wyłącznie dla takich elementów p, którym przypisano klasę akapit.
Definiowanie stylów dla dokumentu HTML
Reguły możemy definiować:
• bezpośrednio w dokumencie HTML, w nagłówku strony:
<head>
…
<style type="text/css">
h1 { color: olive; }
p { color: gray; }
</style>
</head>
• w dokumencie HTML jako wartość atrybutu style wybranych elementów:
<h1 style="color:olive">…</h1>
<p style="color:gray">…</p>
• w zewnętrznym pliku CSS – wymagane jest wskazanie go przy pomocy elementu link , np.:
<head>
…
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-5
Praca z CSS w środowisku Visual Studio 2008
Środowisko Visual Studio udostępnia wizualny edytor reguł CSS (Rys. 2), który można przywołać wybierając z menu Format -> New Style.
Rys. 2 Okno New Style, kategoria Font
Najważniejsze pola w edytorze to:
• Selector – selektor dla reguły.
• Define In – miejsce przechowywania reguły, może być nim nagłówek aktualnej strony lub zewnętrzny arkusz stylów.
• URL – lokalizacja zewnętrznego arkusza stylów.
• Preview – podgląd zdefiniowanego formatowania.
• Description – podgląd definicji reguły.
• Category – lista kategorii, na które podzielone zostały właściwości elementów HTML.
Kategoria Font
W kategorii Font (Rys. 2) znajdują się opcje pozwalające określić sposób wyświetlania tekstu. Przykładowe właściwości:
• font-family – krój pisma
• font-size – stopień pisma
• color – kolor tekstu
Kategoria Block
W kategorii Block (Rys. 3) znajdują się opcje pozwalające określić sposób ułożenia tekstu wewnątrz elementów blokowych.
Rys. 3 Okno New Style, kategoria Block
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-6
Przykładowe właściwości:
• line-height – odległość między sąsiednimi liniami tekst
• vertical-align – ułożenie tekstu w pionie
• text-align – ułożenie tekstu w poziomie
Kategoria Background
W kategorii Background (Rys. 4) znajdują się opcje pozwalające określić wygląd tła elementu.
Rys. 4 Okno New Style, kategoria Background
Przykładowe właściwość:
• background-color – kolor tła
• background-image – obraz wyświetlany w tle
• background-repeat – powtarzanie obrazu wyświetlanego w tle w pionie i/lub w poziomie
Kategoria Border
W kategorii Border (Rys. 5) znajdują się opcje pozwalające określić wygląd obramowania wokół elementu.
Rys. 5 Okno New Style, kategoria Border
Opcja Same for all umożliwia zastosowanie tych samych ustawień dla wszystkich krawędzi obramowania. Przykładowe właściwości:
• border-style – styl obramowania
• border-width – grubość obramowania
• border-color – kolor obramowania
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-7
Kategoria Box
W kategorii Box (Rys. 6) znajdują się opcje pozwalające określić marginesy zewnętrzne i wewnętrzne elementów.
Rys. 6 Okno New Style, kategoria Box
Opcja Same for all umożliwia zastosowanie tych samych ustawień dla wszystkich marginesów. Właściwości:
• padding – rozmiar marginesu wewnętrznego
• margin – rozmiar marginesu zewnętrznego
Kategoria Position
W kategorii Position (Rys. 7) znajdują się opcje pozwalające określić rozmiar i położenie elementów.
Rys. 7 Okno New Style, kategoria Position
Przykładowe właściwości:
• position – rodzaj pozycjonowania (statyczne, względne lub bezwzględne)
• width – szerokość elementu
• height – wysokość elementu
• left – położenie lewej krawędzi elementu (zależy od rodzaju pozycjonowania)
• top – położenie górnej krawędzi elementu (zależy od rodzaju pozycjonowania)
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-8
Kategoria Layout
W kategorii Layout (Rys. 8) znajdują się opcje pozwalające określić zaawansowane pozycjonowanie elementów na stronie.
Rys. 8 Okno New Style, kategoria Layout
Przykładowe właściwości:
• visibility – widoczność elementu
• float – przyciąganie elementu do krawędzi bocznych innych elementów (tzw. pływanie)
• clear – zakaz możliwości przyciągania innych elementów do krawędzi bocznych elementu
Kategoria List
W kategorii List (Rys. 9) znajdują się opcje pozwalające określić wygląd list.
Rys. 9 Okno New Style, kategoria List
Właściwości:
• list-style-type – rodzaj listy (numerowana lub punktowana)
• list-style-image – obrazu używany jako punktor w listach punktowanych
• list-style-position – położenie punktora
Podsumowanie
W tym rozdziale przedstawione zostały najważniejsze pojęcia związane z kaskadowymi arkuszami stylów. Dowiedziałeś się, czym są reguły i jak stosować je do wybranych elementów strony wykorzystując selektory.
Choć do edycji kaskadowych arkuszy stylów wystarczy najprostszy edytor tekstu, Visual Studio udostępnia dużo wygodniejszy, wizualny edytor stylów, wyposażony m.in. w dynamicznie aktualizowany podgląd formatowania i możliwość zarządzania umiejscowieniem reguł.
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-9
Przykładowe rozwiązanie
Przygotowanie dokumentu HTML przyjaznego dla CSS
Zanim będziemy mogli zdefiniować wygląd elementów na stronie przy pomocy kaskadowych arkuszy stylów, powinniśmy najpierw odpowiednio przygotować dokument HTML. Wyobraźmy sobie, że chcemy przy pomocy HTML i CSS stworzyć stronę o ułożeniu elementów jak na Rys. 10.
Rys. 10 Szkic wyglądu strony
Pierwszym problemem, z jakim musimy sobie poradzić, jest podzielenie strony na główne obszary. Jeśli przyjrzysz się rysunkowi, zauważysz, że można wyodrębnić dwa główne elementy, oznaczone na rysunku pogrubioną linią: nagłówek strony oraz jej treść. Możemy zdefiniować je za pomocą znaczników <div>. Dodatkowo każdemu z nich warto nadać atrybut id, aby można było jednoznacznie je identyfikować. By ułatwić pozycjonowanie, możemy dodać jeszcze jeden, dodatkowy znacznik <div>, który obejmie całą stronę:
<body>
<div id="Strona">
<div id="Naglowek"></div>
<div id="Tresc"></div>
</div>
</body>
Teraz należy przeanalizować zawartość głównych elementów. Rozpoczniemy od nagłówka. Składa się on z trzech głównych elementów: logo, menu oraz obszaru logowania. Postępując według tej samej zasady, co poprzednio, powinniśmy otrzymać:
<div id="Naglowek">
Logo
<div id="Menu">Menu</div>
<div id="ObszarLogowania">Zaloguj</div>
</div>
W analogiczny sposób możemy wyróżnić trzy obszary, w których prezentowana będzie treść strony:
<div id="Tresc">
<div id="PierwszyObszarBoczny">Pierwszy obszar boczny</div>
<div id="DrugiObszarBoczny">Drugi obszar boczny</div>
<div id="ObszarRoboczy">Obszar roboczy</div>
</div>
Możemy teraz podejrzeć tak przygotowany dokument w przeglądarce. Jak łatwo zauważyć, na razie wyglądem strona w ogóle nie przypomina tej z rysunku. Mimo to prace nad kodem HTML możemy praktycznie zakończyć.
Podejście hierarchiczne ułatwia nam zarządzanie wyglądem strony. Zmiana właściwości elementu nadrzędnego powoduje zmianę wszystkich elementów podrzędnych. Podział hierarchiczny może
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-10
wynikać z dwóch czynników, po pierwsze z logicznego podziału strony, po drugie z podziału strony na elementy podobne.
Definiowanie reguł CSS dla dokumentu – definiowanie ułożenia elementów
W kolejnym kroku powinniśmy utworzyć arkusz stylów (np. plik Style.css) i dołączyć go do dokumentu przy pomocy znacznika <link>. W pliku zdefiniujemy reguły, które pozwolą wyświetlić obok siebie obszary, w których prezentowana jest treść. Aby odwołać się do tych elementów posłużymy się selektorem ID:
#PierwszyObszarBoczny { width:200px; height:300px; float:left; }
#DrugiObszarBoczny { width:200px; height:300px; float:right; }
Zdefiniowaliśmy rozmiar obu elementów oraz przyciąganie elementu do krawędzi bocznych innych elementów (w tym przypadku elementu nadrzędnego <div id="Tresc">). Możemy teraz uruchomić stronę w przeglądarce i zweryfikować poprawność reguł. Obszary boczne zgodnie z oczekiwaniami wyświetlane są przy przeciwległych krawędziach strony.
Teraz zajmiemy się obszarem roboczym (<div id="ObszarRoboczy">). W pierwszym kroku spróbujemy określić jego aktualny zasięg. W tym celu zdefiniujemy dla niego kolor tła, dodając następującą regułę CSS:
#ObszarRoboczy { background-color: #EEE; }
Możemy teraz zapisać plik CSS i odświeżyć stronę w przeglądarce. Jak zauważymy, obszar roboczy jest aktualnie wyświetlany na całą szerokość strony. Powinniśmy odsunąć go od lewej i prawej krawędzi o 200px, aby zrobić miejsce dla obszarów bocznych. W tym celu zastosujemy marginesy. Dodatkowo wprowadzimy marginesy wewnętrzne, aby treść prezentowana w obszarze głównym nie zlewała się z treścią wyświetlaną w pozostałych obszarach. Po zmodyfikowaniu zdefiniowana wcześniej reguła CSS powinna mięć następującą postać:
#ObszarRoboczy { background-color: #EEE;
padding: 50px 20px;
margin: 0 200px; }
Jeśli teraz zapiszemy plik CSS i odświeżymy stronę w przeglądarce, zauważymy, że obszar główny jest wyświetlany tak, jak oczekiwaliśmy.
Definiowanie reguł CSS dla dokumentu – definiowanie wyglądu elementów
Otrzymaliśmy stronę, której elementy są odpowiednio ułożone. W kolejnym kroku określimy wygląd poszczególnych elementów. Rozpoczniemy od zdefiniowania wyglądu elementu na najwyższym poziomie hierarchii. Dla treści strony internetowej takim elementem jest znacznik <body>. Do określenia jego właściwości, w pliku CSS, wykorzystamy selektor typu:
body {
font-family: Verdana;
font-size: 8pt;
color: #000033; }
Określimy teraz nie tylko wygląd tekstu wyświetlanego bezpośrednio w znaczniku <body>, ale również wszystkich znaczników zagnieżdżonych, w tym przypadku wszystkich tekstów na stronie. Zajmiemy się teraz elementami nagłówka.
Określimy właściwości elementu <div id="Menu">. Dla tego elementu określimy inny kolor tła oraz zmniejszymy wyświetlany tekst. W pliku CSS dodajemy następującą regułę:
#Menu {
background-color: #55BBFF;
font-size: 7.5pt; }
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-11
Dla elementu <div id="ObszarLogowania"> określimy wyrównanie do prawej, inny kolor tła oraz marginesy wewnętrzne. Reguła w pliku CSS będzie miała postać:
#ObszarLogowania {
text-align: right;
background-color: #C3DBEA;
padding: 5px 10px; }
Jeśli teraz zapiszemy plik CSS i odświeżymy stronę w przeglądarce, zauważymy, że wszystkie elementy są wyświetlane zgodnie ze szkicem strony przedstawionym na Rys. 10. Teraz jedyne co pozostało, to dodać treść do naszej nowej strony.
Porady praktyczne
Uwagi ogólne
• Pamiętaj, że Twoje strony powinny wyświetlać się poprawnie we wszystkich najpopularniejszych przeglądarkach internetowych, co ze względu na różnice w interpretacji CSS może być czasem trudne.
• Sprawdzaj zgodność kodu HTML oraz CSS ze standardami przy pomocy walidatorów na stronach W3C. Jeśli Twoja strona spełnia wymagania standardów, to umieść na niej informację o zgodności. Możesz w tym celu wykorzystać kod zawarty na stronach walidatorów W3C.
• Staraj się umieszczać w kodzie CSS komentarze. W ten sposób nawet rok po jego napisaniu będziesz mógł szybko przypomnieć sobie, do czego służą poszczególne reguły.
• Organizuj arkusze stylów, np. dzieląc je na sekcje. Dobra organizacja pliku ułatwia jego modyfikację i przeglądanie w przyszłości.
• Jeśli w regule określasz wartość 0, możesz pominąć jednostkę (np. zamiast 0px możesz napisać 0).
Stosowanie stylów w dokumentach XHTML
• Możliwe jest dobieranie stylów na podstawie atrybutów class i id, jak również definiowanie ich bezpośrednio jako wartość atrybutu style. Najczęściej powinieneś stosować klasy, ponieważ umożliwiają one wielokrotne wykorzystanie tych samych definicji, natomiast zdecydowanie powinieneś unikać stosowania atrybutu style. Jeśli chcesz nadać unikatowy styl jakiemuś elementowi, skorzystaj z atrybutu id.
• Jako wartość atrybutu class możesz podać wiele klas, np. <div class="pierwszy
drugi">. Powinieneś jednak uważać, aby wskazane style nie określały tych samych własności, bo różne przeglądarki mogą odmiennie to zinterpretować.
• W nazwach elementów i klas zawsze używaj słów określających ich znaczenie (np. id="Menu" lub class="ObszarBoczny"), a nie ułożenie na stronie lub wygląd (np. id="LewyObszarBoczny" lub class="NiebieskieTło"). W końcu jedną z największych zalet CSS jest umożliwienie kompletnej zmiany wyglądu stron bez potrzeby modyfikowania dokumentów HTML.
Definiowanie układu elementów na stronie
• Staraj się nie używać tabel do układania elementów. Stosując je utrudniasz dostęp do treści i możliwość zmiany wyglądu strony w przyszłości.
• Układ elementów na stronie można zdefiniować wykorzystując statyczne pozycjonowanie lub pływanie. Oba podejścia mają wady. Pływanie jest trudne do opanowania, a pozycjonowanie ogranicza elastyczność układu strony. O wyborze jednego z nich powinny zdecydować wymagania względem strony.
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-12
Określanie wielkości pisma
• Wielkość pisma możemy określić m.in. w pikselach, punktach lub firetach (em). Wybór właściwej jednostki jest trudny. Wybierając piksele mamy największą kontrolę nad wyglądem strony, ale blokujemy możliwość zmiany wielkości tekstu w przeglądarce. Problemu tego nie mamy, jeśli zastosujemy firety, jednak wówczas musimy upewnić się, że po zmianie rozmiaru tekstu w przeglądarce strona nadal wygląda tak, jak tego chcemy.
• Rozmiar tekstu można określić wykorzystując wartości symboliczne: xx-small, x-small, small, medium, large, x-large, xx-large oraz smaller i larger. Ich użycie jest jednak niepraktyczne, bowiem nie wiemy dokładnie, jaką wielkość przyjmie tekst wyświetlany w przeglądarce.
Skrócona notacja
Tam, gdzie to możliwe, powinieneś używać skróconej notacji CSS oraz grupować style, np. zamiast:
.styl1 { margin-top: 11px; margin-right: 11px; margin-bottom: 11px;
margin-left: 11px; }
.styl2 { margin-top: 11px; margin-right: 11px; margin-bottom: 11px;
margin-left: 11px; }
powinieneś napisać:
.styl1, .styl2 { margin: 11px; }
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• rozumiesz zasadę i potrzebę budowania dokumentów XHTML przyjaznych dla CSS
• umiesz posługiwać się selektorami
• umiesz zmienić istniejący dokument w języku HTML na zgodny z XHTML i przyjazny dla CSS
• potrafisz podać przykłady przestarzałych znaczników HTML, które można zastąpić przy pomocy CSS
• umiesz zdefiniować w pliku CSS podstawowe własności związane z wyglądem i położeniem elementu na stronie
• umiesz podać przykład zastosowania CSS, jego wady i zalety
• wiesz, w jaki sposób można określić reguły CSS w Visual Studio 2008
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. Eric A. Meyer, CSS według Erica Meyera. Kolejna odsłona, Helion, 2005
W książce autor prezentuje możliwości CSS na przykładzie różnych projektów prezentując krok po kroku ich rozwiązanie.
2. Dave Shea, Molly E. Holzschlag, Zen stosowania CSS, Helion, 2006
Jest to książka autora witryny CSS Zen Garden. Na przykładzie różnych projektów opisuje on różnorodne aspekty tworzenia stron, m.in. projektowanie, układ, typografia czy efekty specjalne.
3. Working with CSS Overview, http://msdn2.microsoft.com/en-us/library/bb398931.aspx
Na stronie opisano możliwości pracy z CSS w Visual Studio 2008.
4. Cascading Style Sheets, http://www.w3.org/Style/CSS
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-13
Na stronie znajdziesz wszystkie informacje związane ze standardem CSS.
5. CSS Zen Garden, http://www.csszengarden.com
Na stronie znajdziesz przykłady zastosowania wielu stylów do jednej strony.
6. CSS Vault, http://cssvault.com
Na stronie znajdziesz przykłady zastosowania CSS w różnych projektach.
7. Open Source Web Design, http://www.oswd.org
Na stronie znajdziesz setki gotowych projektów szablonów stron.
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-14
Laboratorium podstawowe
Problem 1 (czas realizacji 20 min)
Jesteś właścicielem niewielkiej firmy komputerowej wykonującej różnego rodzaju zlecenia. Właśnie dzisiaj przyszedł do Ciebie Twój dobry klient i poprosił o przygotowanie dla niego strony internetowej jego firmy zajmującej się handlem nieruchomościami. Przedstawił Ci swoją koncepcję układu elementów na stronie (Rys. 11) i zaproponował, abyś w oparciu o nią przygotował szablon wyglądu. Ucieszyłeś się i przyjąłeś zlecenie, gdyż dodatkowe pieniądze są zawsze potrzebne, jednak po chwili odkryłeś, że wszyscy Twoi pracownicy są już obłożeni pracą na następnych kilka dni. Postanowiłeś zatem sam wykonać zadanie.
Rys. 11 Szkic wyglądu strony
Pamiętaj, że strona musi być zgodna ze standardem XHTML oraz CSS. Powinieneś zweryfikować to za pomocą walidatorów na stronie W3C.
Zadanie Tok postępowania
1. Utwórz nową stronę w Visual Studio 2008
• Otwórz Visual Studio 2008.
• Z menu wybierz File -> New -> Web Site.
• Z listy Visual Studio installed templates wybierz Empty Web Site.
• Z listy Location wybierz File System, a w polu obok określ lokalizację dla pliku w dowolnym miejscu na dysku.
• Z listy Language wybierz Visual C#.
• Kliknij OK.
2. Dodanie strony do projektu. Utworzenie głównych elementów strony
• Wybierz Website -> Add New Item.
• Z listy Visual Studio installed templates wybierz HTML Page.
• W polu Name wpisz Szablon.htm.
• Kliknij OK.
• Zmień typ dokumentu z XHTML 1.0 Transitional na XHTML 1.1, modyfikując pierwszą linię pliku do postaci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• Zmień tytuł strony na „Strona firmowa”.
• Wewnątrz znacznika <body> dodaj:
<div id="Strona">
<div id="Naglowek"></div>
<div id="Tresc"></div>
</div>
3. Podział głównych
• Wewnątrz znacznika zawierającego nagłówek (id="Naglowek") dodaj:
Logo
Piotr Bubacz ITA-103 Aplikacje internetowe
elementów <div id="Menu">Menu</div>
<div id="ObszarLogowania">Zaloguj</div>
• Wewnątrz
<div id="PierwszyObszarBoczny">
<div id="DrugiObszarBoczny">
<div id="ObszarRoboczy">Obszar
4. Sprawdzenie wyniku prac
• W oknie
5. Dodanie nowego arkusza stylów
• Wybierz
• Z listy
• W polu
• Kliknij
6. Określenie pozycji w obszarach roboczych
• Przełącz widok strony na
• Wybierz
• W polu
• W górnej częścia
• Z listyleft
• Z listy200
• Kliknij
• Postępuj podobnie z selektorem właściwość
7. Określenie podstawowego wyglądu zawartości strony
• W pliku <body
• Określ właściwości#
• Z listybackgroud
• Z listyUpewnij się, że opcja
• Kliknij
• Otwórz plik Style.css
Zobacz ja
8. Określenie wyglądu pozostałych elementów strony
• Przynastępując
—
—
—
Kaskadowe Arkusze Stylów
Strona 2-15
<div id="Menu">Menu</div>
<div id="ObszarLogowania">Zaloguj</div>
Wewnątrz znacznika zawierającego treść (id="Tresc"
<div id="PierwszyObszarBoczny">Pierwszy obszar
<div id="DrugiObszarBoczny">Drugi obszar boczny
<div id="ObszarRoboczy">Obszar roboczy</div>
W oknie Solution Explorer kliknij prawym przyciskiem myszy plikSzablon.htm, a następnie wybierz View In Browser
Czy w przeglądarce internetowej strona wygląda takDlaczego nie?
Wybierz Website -> Add New Item.
Z listy Visual Studio installed templates wybierz Style
W polu Name wpisz Style.css.
Kliknij OK.
Przełącz widok strony na Design lub Split.
Wybierz Format -> New Style.
W polu Selector wpisz #PierwszyObszarBoczny.
W górnej części okna z listy Define in wybierz z listy rozwijanej URL wybierz Style.css.
Z listy Category wybierz Layout, a następnie określ właściwośćleft.
Z listy Category wybierz Position, a następnie określ 200 px oraz height: 300 px.
Kliknij OK.
Postępuj podobnie z selektorem #DrugiObszarBoczny
właściwość float na right.
W pliku Style.css standardowo jest już dodany selektor znacznika <body>. Kliknij go prawym przyciskiem myszy i wybierz
Określ właściwości font-family: Verdana, font
#000033.
Z listy Category wybierz Background, a następniebackgroud-color: white.
Z listy Category wybierz Box, a następnie określ Upewnij się, że opcja Same for all jest zaznaczona
Kliknij OK.
Otwórz plik Szablon.htm. W oknie Solution Explorer
Style.css i upuść go w sekcji nagłówka strony za znacznikiem Zobacz jak zmienił się podgląd pliku.
Przy pomocy narzędzi Visual Studio lub w kodzie pliku następujące style:
— #Menu: kolor tła: #55BBFF, wielkość tekstu: 7.5pt
— #ObszarLogowania: wyrównanie tekstu (właściwość prawej, kolor tła #C3DBEA, margines wewnętrznyz góry i dołu 5px, z lewej i prawej 10px.
— #ObszarRoboczy: kolor tła #EEE, margines wewnętrzny (padding) z góry i dołu 50px, z lewej i prawej i dołu 0, z lewej i prawej 200px.
Moduł 2 Kaskadowe Arkusze Stylów – CSS
id="Tresc") dodaj:
bszar boczny</div>
boczny</div>
kliknij prawym przyciskiem myszy plik Browser.
wygląda tak, jak na szkicu?
Style Sheet.
wybierz Existing Style Sheet,
określ właściwość float:
a następnie określ właściwości width:
DrugiObszarBoczny, tylko zmień
standardowo jest już dodany selektor znacznika i wybierz Build Style.
font-size: 8 pt i color:
, a następnie określ właściwość
określ właściwość margin: 0. jest zaznaczona.
Explorer chwyć myszką plik za znacznikiem </title>.
Studio lub w kodzie pliku Style.css określ
7.5pt. (właściwość text-align): do
wewnętrzny (ang. padding)
, margines wewnętrzny (ang. , z lewej i prawej 20px, margines z góry
Piotr Bubacz ITA-103 Aplikacje internetowe
9. Sprawdzenie wyglądu strony w przeglądarce
• W oknie Szablon.htm
• Strona w przeglądarce powinna wyglądać podobnie
10. Sprawdzenie poprawności na stronie W3C
• Wejdź na stronę dokumentu XHTML
• Wejdź na stronę
11. Dodanie informacji o zgodności ze standardami
• Wewnątrz znacznika zawierającego obszar roboczy (id="ObszarRoboczy"
<p>
</p>
12. Zamiana położenia obszarów bocznych
• W pliku właściwość
• W left
13. Przygotowanie propozycji własnej stylistyki
• Przygotuj strony. Zmień kolory,
Kaskadowe Arkusze Stylów
Strona 2-16
W oknie Solution Explorer kliknij prawym przyciskiem myszy plik Szablon.htm i wybierz View In Browser.
Strona w przeglądarce powinna wyglądać podobnie
Rys. 12 Wygląd strony po zastosowaniu stylów
Wejdź na stronę http://validator.w3.org i zweryfikuj poprawność dokumentu XHTML.
Czy Twój dokument jest zgodny ze standardemprzeanalizuj błędy i spróbuj je poprawić.
Wejdź na stronę http://jigsaw.w3.org/css-validator
poprawność arkusza CSS.
Czy Twój arkusz stylów jest zgodny ze standardem CSSprzeanalizuj błędy i spróbuj je poprawić.
Wewnątrz znacznika zawierającego obszar roboczy id="ObszarRoboczy") dodaj następujący kod:
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-xhtml11
alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss
alt="Poprawny CSS!" /></a>
</p>
W pliku Style.css w regule z selektorem #PierwszyObszarBoczny
właściwość float na right.
W regule z selektorem #DrugiObszarBoczny zmień właściwość left.
Czy oba obszar zamieniły się miejscami? wykonać, gdyby dokument sformatowany był z użyciem tabel
Przygotuj arkusz CSS zawierający Twoją propozycję nowestrony. Zmień kolory, krój tekstu i inne właściwości
Moduł 2 Kaskadowe Arkusze Stylów – CSS
kliknij prawym przyciskiem myszy plik
Strona w przeglądarce powinna wyglądać podobnie jak na Rys. 12.
i zweryfikuj poprawność
zgodny ze standardem XHTML? Jeśli nie, to
validator i zweryfikuj
zgodny ze standardem CSS? Jeśli nie, to
Wewnątrz znacznika zawierającego obszar roboczy
href="http://validator.w3.org/check?uri=referer">
style="border:0;width:88px;height:31px"
xhtml11-blue"
validator/">
dth:88px;height:31px"
validator/images/vcss-blue"
PierwszyObszarBoczny zmień
zmień właściwość float na
Czy oba obszar zamieniły się miejscami? Jakie kroki musiałbyś wykonać, gdyby dokument sformatowany był z użyciem tabel?
CSS zawierający Twoją propozycję nowego wyglądu właściwości.
Piotr Bubacz ITA-103 Aplikacje internetowe
Problem 2 (czas realizacji 25 min)
Akurat wtedy, kiedy skończyłeś ze sobą stronę przygotowaną kilka lat wcześniej i poprosił, abyś dostosował ją do obecnych standardów. Bardzo zależało mu na zachowaniu obecnego wygląz możliwością łatwego wprowadzania zmian w przyszłości. Spojrzałeś w kod i zauważyłeś, że drozmieszczania elementów strony używane są tabele, zaś wygląd definiowany jest przy użyciu przestarzałych znaczników, takich jak trzeba będzie przepisać kod od początku, ale ponieważ klientowi w potodmawia, zgodziłeś się podjąć zadania.
Zadanie Tok postępowania
1. Utwórz nową stronę w Visual Web Developer 2008 Express Edition
• Otwórz Visual
• Z menu wybierz
• Z listy
• Z listypliku w
• Z
• Kliknij
2. Dodanie oryginalnej strony do projektu
• Dodaj do projektu ->
• Otwórz stronę klikając Solution
3. Sprawdzenie poprawności dokumentu
• Źródło dokumentu przekopiuj na stronę w zakładce
4. Utworzenie szablonu strony
• Wybierz
• Z listy
• W polu
• Kliknij
• Zamień zawartość pliku na:
<!DOCTYPE html PUBLIC "
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Lorem ipsum dolor sit amet</title></head>
<body>
Kaskadowe Arkusze Stylów
Strona 2-17
(czas realizacji 25 min)
skończyłeś pracę nad szablonem, przyszedł do Ciebie przygotowaną kilka lat wcześniej i poprosił, abyś dostosował ją do obecnych
standardów. Bardzo zależało mu na zachowaniu obecnego wyglądu i układu elementów, jednak możliwością łatwego wprowadzania zmian w przyszłości. Spojrzałeś w kod i zauważyłeś, że d
rozmieszczania elementów strony używane są tabele, zaś wygląd definiowany jest przy użyciu przestarzałych znaczników, takich jak <b>, <i> czy <font>. Uświadomiłeś sobie, że praktycznie trzeba będzie przepisać kod od początku, ale ponieważ klientowi w potodmawia, zgodziłeś się podjąć zadania.
Tok postępowania
Otwórz Visual Web Developer 2008 Express Edition
Z menu wybierz File -> New Web Site.
Z listy Visual Studio installed templates wybierz Empty
Z listy Location wybierz File System, a w polu obok określ lokalizację pliku w dowolnym miejscu na dysku.
listy Language wybierz Visual C#.
Kliknij OK.
Dodaj do projektu istniejący plik StronaGlowna.htm
> Add Existing Item, a następnie wskaż jego lokalizację.
Otwórz stronę klikając dwukrotnie plik StronaGlowna.htm
Solution Explorer.
Źródło dokumentu przekopiuj na stronę http://validator.w3.org
w zakładce Validate by Direct Input.
• Wciśnij przycisk Check.
Ile błędów jest na stronie?
• Z listy Doctype wybierz XHTML 1.1 i wciśnij przycisk
Ile błędów jest wyświetlanych teraz?
Wybierz Website -> Add New Item.
Z listy Visual Studio installed templates wybierz HTML
W polu Name wpisz Szablon.htm.
Kliknij OK.
Zamień zawartość pliku na:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Lorem ipsum dolor sit amet</title></head>
<body>
<div id="Strona">
<div id="Naglowek">
<h1></h1>
<h2></h2>
</div>
<div id="Tresc">
<div id="Obszar1">
<div class="Ramka"></div>
<div class="Ramka"></div>
<div class="Ramka Ostatnia"></div>
</div>
<div id="Obszar2"></div>
Moduł 2 Kaskadowe Arkusze Stylów – CSS
, przyszedł do Ciebie kolejny klient. Przyniósł przygotowaną kilka lat wcześniej i poprosił, abyś dostosował ją do obecnych
du i układu elementów, jednak możliwością łatwego wprowadzania zmian w przyszłości. Spojrzałeś w kod i zauważyłeś, że do
rozmieszczania elementów strony używane są tabele, zaś wygląd definiowany jest przy użyciu . Uświadomiłeś sobie, że praktycznie
trzeba będzie przepisać kod od początku, ale ponieważ klientowi w potrzebie nigdy się nie
Edition.
Empty Web Site.
w polu obok określ lokalizację
StronaGlowna.htm. Wybierz Website
lokalizację.
StronaGlowna.htm w oknie
http://validator.w3.org do pola
i wciśnij przycisk Revalidate.
HTML Page.
//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head><title>Lorem ipsum dolor sit amet</title></head>
Piotr Bubacz ITA-103 Aplikacje internetowe
</body>
</html>
• Przekopiuj treśszablonu
• Do wnętrza znacznika tabeli
• Do wnętrza znacznika
• Do wnętrza znacznika wiersza tabeli.
• Tekst zapisany stylem pogrubionym umieść wewnątrz znaczników <h3>
• Resztę tekstu umieść wewnątrz znaczników
• Wewnątrz znacznika o <h3>
<img
5. Dodanie nowego arkusza stylów
• Wybierz
• Z listy
• W polu
• Kliknij
6. Określenie podstawowego ułożenia strony
• Do pliku
#Obszar1 { float: left;
#Obszar2 { float: right; width: 200px; }
#Strona { width: 620px; }
#Tresc { float: left;
.Ramka { float: left; width: 200px; }
7. Sprawdzenie wyglądu strony w przeglądarce
• Otwórz plik Style.css
• W oknie Szablon.htm
projektowana strona.
8. Określenie wyglądu strony
• Przy pomocy narzędzi Visual Studio lub w kodzie pliku style dla wymienionych
• Dla
—
—
• Dla
—
—
—
Kaskadowe Arkusze Stylów
Strona 2-18
<div id="ObszarGlowny"></div>
<div id="Obszar3">
<div class="Ramka"></div>
<div class="Ramka Ostatnia"></div>
</div>
</div>
<div id="Stopka"></div>
</div>
</body>
</html>
Zauważ, że został zmieniony standardowy typ dokumentu z XHTML 1.0 Transitional na XHTML 1.1.
Przekopiuj treść z pliku StronaGlowna.htm do nowo utworzonego szablonu na podstawie wskazówek poniżej.
Do wnętrza znacznika <h1> przekopiuj tekst z pierwszego wiersza tabeli.
Do wnętrza znacznika <h2> przekopiuj tekst z drugiego wiersza tabeli.
Do wnętrza znacznika o id="Stopka" przekopiuj tekst wiersza tabeli.
Tekst zapisany stylem pogrubionym umieść wewnątrz znaczników <h3>.
Resztę tekstu umieść wewnątrz znaczników <p>.
Wewnątrz znacznika o id="ObszarGlowny", pomiędzy znacznikami <h3> i <p>, dodaj następujący kod:
<img src="Pictures/WebPage.png" alt="Web page" />
Wybierz Website -> Add New Item.
Z listy Visual Studio installed templates wybierz Style
W polu Name wpisz Style.css.
Kliknij OK.
Do pliku Style.css dodaj następujące reguły:
#Obszar1 { float: left; width: 620px; }
#Obszar2 { float: right; width: 200px; }
#Strona { width: 620px; }
#Tresc { float: left; width: 620px; }
.Ramka { float: left; width: 200px; }
Otwórz plik Szablon.htm. W oknie Solution Explorer
Style.css i upuść go w sekcji nagłówka strony za znacznikiem
W oknie Solution Explorer kliknij prawym przyciskiem myszy plik Szablon.htm i wybierz View In Browser. Zobacz jak wygląda projektowana strona.
Przy pomocy narzędzi Visual Studio lub w kodzie pliku style dla wymienionych niżej elementów.
Dla elementu body:
— Kolor tła: #708090 — Kolor czcionki: #F5F5F5
Dla elementów h1:
— Rodzinę fontów: Arial, Helvetica, sans-serif — Margines górny: 0 — Wyrównanie: wyśrodkowane
Moduł 2 Kaskadowe Arkusze Stylów – CSS
, że został zmieniony standardowy typ dokumentu
do nowo utworzonego
ekst z pierwszego wiersza
przekopiuj tekst z drugiego wiersza tabeli.
przekopiuj tekst z ostatniego
Tekst zapisany stylem pogrubionym umieść wewnątrz znaczników
, pomiędzy znacznikami
src="Pictures/WebPage.png" alt="Web page" />
Style Sheet.
Explorer chwyć myszką plik za znacznikiem </title>.
kliknij prawym przyciskiem myszy plik Zobacz jak wygląda
Przy pomocy narzędzi Visual Studio lub w kodzie pliku Style.css określ
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-19
• Dla elementów h2:
— Wielkość tekstu: 1em — Styl tekstu: kursywa — Margines: 0
• Dla elementów h3:
— Wielkość fontów: 1em — Styl fontów: pogubienie — Margines: 0
• Dla elementów img:
— Pływanie: do lewej — Margines: 10px 10px 10px 0 — Szerokość: 172px
• Dla elementów p:
— Margines: 0
• Dla elementu o id="Obszar2" dodaj:
— Margines górny: 10px
• Dla elementu o id="Strona" dodaj:
— Margines lewy: auto — Margines prawy: auto
• Dla elementu o id="Tresc" dodaj:
— Margines górny i dolny: 10px — Margines prawy i lewy: 0
• Dla elementu o id=" Obszar3" oraz id="ObszarGlowny":
— Pływanie: do lewej — Margines górny: 10px — Szerokość: 410px
• Dla elementu o id="Stopka" dodaj:
— Styl fontów: pogubienie — Wyrównanie: wyśrodkowane
• Dla elementów klasy Ramka dodaj:
— Margines prawy: 10px
• Dla elementów klasy Ostatnia:
— Margines prawy: 0
• Dla elementów klasy Ikona:
— Obramowanie: 0 — Szerokość: 88px — Wysokość: 31px
9. Sprawdzenie wyglądu strony w przeglądarce
• W oknie Solution Explorer kliknij prawym przyciskiem myszy plik Szablon.htm i wybierz View In Browser. Zobacz jak teraz wygląda projektowana strona.
Piotr Bubacz ITA-103 Aplikacje internetowe
• Strona powinna wyglądać podobnie
10. Sprawdzenie poprawności na stronie W3C
• Wejdź na stronę dokumentu XHTML.
• Wejdź na stronę
11. Dodanie informacji o zgodności ze standardem
• Wewnątrz znacznika
<p>
</p>
12. Przygotowanie propozycji własnej stylistyki
• Przygotuj arkusz CSS zawierający Twoją propozycję nowego wyglądu strony. Zmień kolory, krój tekstu i inne właściwości.
Kaskadowe Arkusze Stylów
Strona 2-20
Strona powinna wyglądać podobnie do strony StronaGlowna.htm
Wejdź na stronę http://validator.w3.org i zweryfikuj poprawność dokumentu XHTML.
Czy Twój dokument jest zgodny ze standardemprzeanalizuj błędy i spróbuj je poprawić.
Wejdź na stronę http://jigsaw.w3.org/css-validator
poprawność arkusza CSS.
Czy Twój arkusz stylów jest zgodny ze standardem przeanalizuj błędy i spróbuj je poprawić.
Wewnątrz znacznika o id="Stopka" dodaj następujący kod:
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img class="Ikona"
src="http://www.w3.org/Icons/valid-xhtml11
alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/">
<img class="Ikona"
src="http://jigsaw.w3.org/css-validator/images/vcss
alt="Poprawny CSS!" /></a>
</p>
Przygotuj arkusz CSS zawierający Twoją propozycję nowego wyglądu strony. Zmień kolory, krój tekstu i inne właściwości.
Moduł 2 Kaskadowe Arkusze Stylów – CSS
StronaGlowna.htm.
i zweryfikuj poprawność
zgodny ze standardem XHTML? Jeśli nie, to
validator i zweryfikuj
zgodny ze standardem CSS? Jeśli nie, to
następujący kod:
href="http://validator.w3.org/check?uri=referer">
xhtml11-blue"
validator/">
validator/images/vcss-blue"
Przygotuj arkusz CSS zawierający Twoją propozycję nowego wyglądu strony. Zmień kolory, krój tekstu i inne właściwości.
Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS
Strona 2-21
Laboratorium rozszerzone
Zadanie 1 (czas realizacji 45 min)
Przygotowałeś dla klienta stronę internetową z wykorzystaniem XHTML i CSS. Ten bardzo się ucieszył, że jest ona zgodna ze standardami i można łatwo wprowadzać w niej modyfikacje, a ponieważ zbliża się rocznica powstania jego firmy, zaproponował, abyś z tej okazji przygotował propozycję nowego układu oraz wyglądu strony. Ponieważ nie masz dużego doświadczenia w dziedzinie projektowania, postanowiłeś poszukać inspiracji na jednej z witryn oferujących gotowe rozwiązania. Z pomocą wyszukiwarki trafiłeś na stronę Open Source Web Design (http://www.oswd.org), oferującą darmowe szablony. Spróbuj zaadoptować style z któregoś z projektów do strony przygotowanej w poprzednim zadaniu.
Zadanie 2 (czas realizacji 45 min)
Spółka usługowo-handlowa Kowalski-Sale posiada witrynę internetową wykonaną 4 lata temu. Firma się rozwija i w związku z tym chciałaby odświeżyć wizerunek oraz rozszerzyć informacje na swojej stronie. Niestety nie jest to łatwe, gdyż do zdefiniowania wyglądu i ułożenia elementów zostały użyte tabele i przestarzałe znaczniki. Przeanalizuj dokumenty zawarte w archiwum Kowalski-Sale.zip i opracuj nową wersję strony zgodną ze standardami XHTML i CSS. Przygotuj co najmniej dwie różne wersje układu i wyglądu strony.
Zadanie 3 (czas realizacji 90 min)
Starasz się o świetnie płatną pracę w dużej firmie tworzącej aplikacje internetowe. Jesteś jednym z kilku kandydatów, którzy przeszli do drugiej tury rozmów. Twój przyszły pracodawca postanowił sprawdzić Twoje umiejętności posługiwania się kaskadowymi arkuszami stylów, prosząc Cię o przygotowanie pliku CSS dla strony głównej witryny CSS Zen Garden (http://csszengarden.com).
Podpowiedź: w serwisie znajdują się przykładowe pliki CSS przygotowane przez innych użytkowników. Zobacz, jak został w nich zdefiniowany wygląd strony głównej. Pamiętaj, że w firmie działa system antyplagiatowy!
Zadanie 4 (czas realizacji 90 min)
Jesteś niezależnym projektantem stron internetowych. Twoim nowym zleceniem jest przygotowanie profesjonalnie wyglądającej galerii zdjęć. Twój klient określił następujące wymagania:
• Strona powinna być zgodna ze standardem XHTML 1.1 oraz CSS 2.1.
• Wygląd strony musi być zdefiniowany w zewnętrznym pliku CSS.
• Na głównej stronie galerii ma być wyświetlana lista miniatur zdjęć wraz z odnośnikami do zdjęcia. Każda miniatura musi być umieszczona w wystylizowanej w CSS ramce. Ilość miniatur w wierszu ma być zależna od szerokości okna przeglądarki.
Jako zawartość galerii wykorzystaj wybrane przez siebie zdjęcia umieszczone w serwisie Live Spaces (http://www.spaces.live.com).
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 3
Wersja 1
Podstawy JavaScript
Spis treści
Podstawy JavaScript ............................................................................................................................. 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Uwagi dla studenta .................................................................................................................... 10
Dodatkowe źródła informacji..................................................................................................... 10
Laboratorium podstawowe ................................................................................................................ 11
Problem 1 (czas realizacji 20 min) .............................................................................................. 11
Problem 2 (czas realizacji 25 min) .............................................................................................. 14
Laboratorium rozszerzone ................................................................................................................. 17
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące podstaw języka JavaScript.
Nauczysz się tworzyć kod działający po stronie klienta w przeglądarce.
Poznasz sposoby sprawdzania poprawności wprowadzanych informacji
przez użytkownika.
Cel modułu
Celem modułu jest przedstawienie możliwości wykorzystania języka
JavaScript do tworzenia interaktywnych aplikacji działających po stronie
klienta, jak również przedstawienie możliwości pracy z tym językiem
w Visual Studio 2008.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• wiedział jak tworzyć interaktywne aplikacje działające po stronie
klienta w przeglądarce
• potrafił pisać aplikację w języku JavaScript
• potrafił pracować z językiem JavaScript w Visual Studio 2008
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy języka XHTML (patrz: moduł „Wprowadzenie do
XHTML”)
• znać zasady pracy w środowisku Visual Studio, w szczególności
tworzenia stron internetowych zgodnych z XHTML
• znać podstawy definiowania wyglądu aplikacji w oparciu o style
kaskadowe CSS
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznać się z materiałem zawartym
w module Wprowadzenie do XHTML oraz Kaskadowe Arkusze Stylów – CSS.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-3
Przygotowanie teoretyczne
Przykładowy problem
Mając pewne doświadczenie w tworzeniu stron internetowych zgodnych ze standardem XHTML,
których wygląd definiujemy za pomocą arkusza stylów CSS kolejnym krokiem jest chęć
umieszczenia elementów interaktywnych na stronie. Możemy wykorzystać np. technologię Flash
czy Silverlight, jednak, nie jest to proste zadanie. Potrzebujemy prostego języka, który umożliwia
tworzenie pewnej interakcji z użytkownikiem po stronie klienta w przeglądarce. Umożliwi
sprawdzenie poprawności wpisywanych danych do formularza czy uatrakcyjni Twoją stronę
poprzez rozwijane elementy np. menu. Do tego celu powszechnie wykorzystuje się język JavaScript.
Podstawy teoretyczne
JavaScript jest skryptowym, interpretowanym językiem o składni podobnej do języka C. Aplikacje
napisane w tym języku są wykonywane po stronie klienta. Zaletą tego rozwiązania jest
natychmiastowe działanie, dzięki czemu strony wydają się funkcjonować szybciej. Możliwe jest
również osiąganie pewnych dodatkowych funkcjonalności od wyświetlania okien dialogowych po
zaawansowane aplikacje AJAX.
Umieszczanie kodu JavaScript
Kod aplikacji możemy umieszczać w stronie lub w zewnętrznym pliku. Możemy również odwoływać
się do wielu plików równocześnie, co ułatwia nam tworzenie i korzystanie z bibliotek funkcji.
Umieszczanie kodu JavaScript na stronie
Kod aplikacji na stronie HTML należy umieścić w znacznikach scripts:
<script type="text/javascript"> // Tutaj umieszczamy kod aplikacji </script>
Na stronie możemy umieścić więcej niż jeden blok scripts praktycznie w dowolnym miejscu,
najczęściej dla łatwego odnajdowania kodu umieszczany on jest w nagłówku pliku – znaczniku
head. Jeśli jednak skrypt tworzy dynamiczną zawartość należy umieścić go w miejscu, w którym ta
zawartość ma się pojawić.
Umieszczanie kodu JavaScript w zewnętrznych repozytoriach
Tworząc aplikacje w języku JavaScript możemy budować bibliotekę funkcji lub korzystać z innych
rozbudowanych bibliotek. Repozytorium jest umieszczane w zewnętrznych plikach tekstowych,
najczęściej z rozszerzeniem js. Dołączmy je do aplikacji podobnie jak skrypt podając w właściwości
src ścieżkę dostępu do pliku.
<script type="text/javascript" src="biblioteka.js"></script>
Przeglądarka po napotkaniu takiego znacznika zatrzyma wykonywanie strony aż do załadowania
zewnętrznego pliku, dlatego najlepiej jest pododawać taką informację w nagłówku strony.
Obsługa wejścia i wyjścia
W przypadku aplikacji internetowych jednym z najważniejszych elementów jest wyświetlanie
i pobieranie informacji. W tym względzie język JavaScript udostępnia kilka możliwości począwszy od
pisania na stronie, poprzez okna dialogowe, aż po wyświetlanie kodu HTML w dowolnym
elemencie.
Pisanie na stronie
Możliwe jest umieszczenie dowolnego napisu na stronie. W tym celu wykorzystujemy polecenie:
document.writeln(napis)
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-4
gdzie napis jest ciągiem znaków wyświetlonym na stronie. To polecenie powinno być wykorzystane
jedynie podczas tworzenie strony. Użycie tego polecenie podczas działania strony spowoduje
w większości przeglądarek usunięcie strony i wypisanie jedynie podanego ciągu znaków.
Przykładowy kod wykorzystujący to polecenie:
<script type="text/javascript"> document.writeln("Witaj świecie"); </script>
Podczas renderowania strony w przeglądarce napis pojawi się dokładnie w miejscu jego użycia.
Okna dialogowe
Kolejną możliwością wyświetlania komunikatów są okna dialogowe. Jeśli wyświetlimy okno
dialogowe aplikacja zatrzyma wykonanie skryptu aż do momentu kiedy użytkownik kliknie OK.
Przykład użycia:
<script type="text/javascript"> alert("Witaj świecie"); </script>
Użycie tej metody powinniśmy ograniczyć do niezbędnego minimum. Wyskakujące okna dialogowe
są raczej negatywnie odbierane przez użytkowników.
Wyświetlanie kodu HTML w dowolnym elemencie
Kolejną możliwością jest dynamiczne wyświetlanie kodu HTML w dowolnym elemencie na stronie.
Każdy element na stronie może posiadać właściwość ID jednoznacznie go identyfikującą.
Wykorzystujemy ją nie tylko przy definiowaniu stylów css, ale również przy odwoływaniu się do
elementu w języku JavaScript. Przy pomocy konstrukcji:
document.getElementById(idElementu)
możemy jednoznacznie odwołać się do elementu o id=idElementu. Następnie możemy odwoływać
się do właściwości takiego elementu. Najpopularniejsze właściwości to:
• innerHTML – umożliwia określenie kodu HTML który zostanie umieszczony w elemencie
• innerText – umożliwia określenie ciągu znaków który zostanie umieszczony w elemencie
• className – umożliwia określenie klasy CSS użytej do prezentacji elementu.
Przykład użycia:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> .wyroznienieCzerwone { color: Red; font-weight: 600; } </style> </head> <body> <div id="nazwa"></div> <script type="text/javascript"> document.getElementById("nazwa").innerHTML = "Witaj świecie"; document.getElementById("nazwa").className = "wyroznienieCzerwone"; </script> </body> </html>
Zawartość elementu, w tym przypadku div o id="nazwa" może zostać zmieniona w momencie
ładowania strony.
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-5
Pobieranie informacji od użytkownika
Najprostszą metodą komunikacji jest wciśnięcie przycisku lub innego elementu na stronie. Każdy
element na stronie umożliwia obsługę zdarzenia kliknięcia za pomocą właściwości onclick.
Podajemy w niej jako parametr nazwę funkcji która zostanie wywołana. Zmieniając zawartość body
z powyższego przykładu otrzymujemy:
<div id="nazwa" onclick="zmien()"></div> <script type="text/javascript"> document.getElementById("nazwa").innerHTML = "Witaj świecie"; function zmien() { document.getElementById("nazwa").innerHTML = "Witaj ważny świecie!"; document.getElementById("nazwa").className = "wyroznienieCzerwone"; } </script>
Po kliknięciu na napis Witaj świecie pojawia się na czerwono napis Witaj ważny świecie. Kod
umieszczony w znacznikach jest wykonywany od razu, natomiast kod umieszczony w funkcji
dopiero po jej wywołaniu po kliknięciu na aktywną zawartość.
Kolejną możliwością pobierania informacji od użytkownika są pola tekstowe. Fragment strony
umożliwiający wyświetlenie w miejscu div id="wynik" informacji wpisanej w kontrolce input o
id="dane".
<input id="dane" type="text" /> <input type="button" value="Wyświetl" onclick="Wyswietl()" /> <div id="wynik" ></div> <script type="text/javascript"> function Wyswietl() { document.getElementById("wynik").innerHTML = "Wpisałeś " + document.getElementById("dane").value; } </script>
Jak wynika z powyższego przykładu konstrukcja document.getElementById służy nie tylko do
określania właściwości ale również do ich pobierania.
Inną możliwością jest przekazanie do funkcji formularza i odwoływanie się do elementów przy
pomocy właściwości value. W przypadku formularza przypisanie powyższe będzie miało postać:
document.getElementById("wynik").innerHTML= "Wpisałeś " + form.imie.value ;
Zdarzenia w JavaScript
W poprzednim rozdziale wprowadziliśmy pojęcie obsługi zdarzeń w JavaScript. Zdarzenie to inaczej
zajście jakiejś sytuacji np. kliknięcie myszką, przesuwanie kursora myszki nad obiektem lub
wpisywanie treści do kontrolki. Metoda obsługi zdarzenia to w języku JavaScript funkcja, która jest
wywoływana w momencie wystąpienia określonego zdarzenia. Listę najważniejszych zdarzeń jakie
są możliwe do obsłużenia w tym języku przedstawia Tab. 1.
Tab. 1 Lista najważniejszych zdarzeń w języku JavaScript
Zdarzenie Opis
onChange Zawartość elementu uległa zmianie.
onClick Użytkownik kliknął na tym elemencie.
onDblClick Użytkownik kliknął dwukrotnie na tym elemencie.
onFocus Użytkownik wybrał dany element.
onKeyDown Użytkownik nacisnął klawisz.
onKeyPress Użytkownik nacisnął lub zwolnił klawisz.
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-6
onKeyUp Użytkownik zwolnił klawisz.
onMouseDown Użytkownik wcisnął przycisk myszki.
onMouseOut Użytkownik przesunął kursor myszki poza element.
onMouseOver Użytkownik przesunął kursor myszki poza element.
onSubmit Użytkownik wcisnął przycisk wysyłający dane z formularza.
Przepisywanie treści z jednej kontrolki do drugiej można również obsłużyć za pomocą zdarzenia
onKeyUp:
<input id="dane" type="text" onKeyUp="Wyswietl()" /> <div id="wynik" ></div> <script type="text/javascript"> function Wyswietl() { document.getElementById("wynik").innerHTML = "Wpisałeś " + document.getElementById("dane").value; } </script>
Co ciekawe nie trzeba nic zmieniać w funkcji Wyswietl.
Zmienne
Język JavaScript nie jest językiem silnie typowanym, co znaczy, że nie musimy przejmować się
typem zmiennych. Możemy przypisać do zmiennej daną dowolnego typu, a następnie poprzez
ponowne przypisanie zmienić nie tylko zawartość, ale również typ przechowywanej informacji, co
nie jest polecane, bo w czasie wykonywania aplikacji nie wiadomo jakiego typu jest dana zmienna.
Nazwa zmiennej nie może być słowem zarezerwowanym, zaczynać się od liczby lub symbolu innego
niż $ lub _. Należy również unikać nazw zmiennych, które są takie same jak nazwy elementów
HTML.
Zmiennymi mogą być w języku JavaScript również funkcje. Możliwe jest następujące przypisanie:
var mojaFunkcja = function() { return "Jestem sobie funkcją!"; }
Po zdefiniowaniu takiej funkcji może ona być przekazana jako argument do innej funkcji lub
przypisana do innej zmiennej tak, jak ciąg znaków, tablica czy inny obiekt JavaScript. Ogólnie
funkcje użyte bez nawiasów są traktowane jak zmienne: mogą być przekazywane do innych funkcji
i można do nich przypisać dowolne wartości. Użycie nawiasów wywołuje działanie funkcji
i przekazuje wartość zwrotną.
Zmienne mogą być deklarowane ze słowem kluczowym var lub bez niego. W przypadku, kiedy
użyjemy tego słowa zmienne są widoczne tylko wewnątrz funkcji w której są zdefiniowane. Jeśli
zadeklarujemy (przypisując po raz pierwszy wartość) jakąś zmienna bez tego słowa kluczowego, to
zmienna ma zasięg globalny.
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-7
Operatory
Operatory arytmetyczne
Operatory arytmetyczne zostały przedstawione w Tab. 2.
Tab. 2 Operatory arytmetyczne w JavaScript
Operator Opis
+ Dodawanie – również konkatenacja ciągów znaków
- Odejmowanie
* Mnożenie
/ Dzielenie
% Reszta z dzielenia
++ Inkrementacja przed lub po
-- Dekrementacja przed lub po
Operatory inkrementacji i dekrementacji zachowują się podobnie jak w języku C. Jeśli występują
przed zmienną to operacja następuje natychmiast, jeśli po zmiennej, to operacja następuje po całej
linii kodu. Przykład:
var x = 1; var y = x++; // y=1, x=2 var z = ++x; // z=3, x=3
Operatory logiczne
Operatory logiczne zostały przedstawione w Tab. 3.
Tab. 3 Operatory logiczne
Operator Opis
= Przypisania x=5; // przypisuje 5 do zmiennej x
== Równości, czy x==5?
=== Identyczności, x===5 czy x ma wartość 5 i czy jest liczbą?
!= Nie równe
!== Nie identyczne
! Negacja
|| Lub (OR)
&& I (AND)
< Mniejsze niż
<= Mniejsze niż lub równe
> Większe niż
>= Większe niż lub równe
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-8
Język JavaScript umożliwia porównanie nie tylko równości (==) ale również identyczności (===). Przy
porównaniu równości porównanie jest dokonywane bez sprawdzania typu, zatem 5=="5". Przy
sprawdzaniu identyczności sprawdzana jest nie tylko wartość, ale i typ zmiennych.
Sterowanie
W każdym języku programowania instrukcje sterujące określają kolejność wykonywania obliczeń.
Instrukcja warunkowa if
Instrukcję if stosuje się przy podejmowaniu decyzji. Formalnie możemy ją zapisać jako:
if (wyrazenie) instrukcja_1 else instrukcja_2
Jeśli wyrażenie wyrazenie jest spełnione, to wykonywana jest instrukcja_1 w przeciwnym
przypadku wykonywana jest instrukcja_2.
Instrukcja warunkowa switch
Instrukcja switch służy do podejmowania decyzji wielowariantowych, w których sprawdzana się,
czy wartość pewnego wyrażenia pasuje do jednej z kilku całkowitych stałych wartości, jeśli tak, to
przy pomocy instrukcji break następuje wyjście z porównania. Formalnie możemy ją zapisać jako:
switch (wyrazenie) { case wyrazenie_stale_1: instrukcja_1; break; case wyrazenie_stale_2: instrukcja_2 ; break; default: instrukcja_3; }
Instrukcja następująca po słowie default (w tym przypadku instrukcja_3) zostanie wykonana,
jeśli wyrażenie nie spełniło żadnego z wyrażeń stałych.
Pętle
Pętle umożliwiają powtórzenie pewnych instrukcji dopóki nie zostanie spełniony określony
warunek.
Jedną z pętli dostępnych w języku JavaScript jest pętla for. Formalnie możemy ją zapisać jako:
for (stanPoczatkowy; warunekZakonczenia; zmiany) lista_instrukcji
Na początku zostanie ustalony stan początkowy zdefiniowany w stanPoczatkowy. Następnie
pętla będzie wykonywana aż do spełnienia warunku określonego w warunekZakonczenia. Przy
każdej iteracji pętli będą wykonywane operacje umieszczone w zmiany.
Bardzo pomocną pętlą jest pętla for/in. Pętla ta umożliwia przeglądanie kolekcji obiektów – jest
podobna do pętli foreach w języku C#. Formalnie możemy ją zapisać jako:
for (var element in kolekcja) lista_instrukcji
gdzie kolekcja jest kolekcją obiektów, a element jest poszczególnym (kolejnym) elementem w
kolekcji podczas jej przeglądania.
Kolejną pętlą jest pętla while. Umożliwia ona wykonywanie ciągu instrukcji aż do spełnienia
określonego warunku sprawdzanego na początku działania pętli. Formalnie możemy ją zapisać jako:
while (warunekKoncowy) lista_instrukcji
Ponieważ warunek sprawdzany jest na początku pętla ta może się nie wykonać ani razu.
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-9
Pętlą podobną jest pętla do-while. W tej pętli najpierw następuje przetwarzanie a później
sprawdzenie warunku. Formalnie możemy ją zapisać jako:
do { lista_instrukcji } while (warunekKoncowy);
Praca z JavaScript w Visual Studio 2008
Nowości wprowadzonymi do Visual Studio w wersji 2008 są IntelliSense i debugowanie dla języka
JavaScript.
InteliSens to automatyczne, kontekstowe uzupełnianie – podpowiadanie kodu i konstrukcji
językowych dostępne m.in. w VisualStudio. Dotychczas ta technologia nie wspierała języka
JavaScript. Teraz mamy możliwość podejrzenia listy możliwych poleceń, jak również argumentów
funkcji (Rys. 2).
Rys. 2 Przykład użycia technologii IntelliSense w VisualStudio dla języka JavaScript
Visual Studio umożliwia łatwe debugowanie aplikacji JavaScript. Możemy w dowolnym miejscu w
kodzie ustawić punkt przerwania (breakpoint) i uruchamiać aplikację krok po kroku. Możliwe jest
również, w oknie Watch, przeglądanie i edycja właściwości dowolnych zmiennych i obiektów ().
Rys. 3 Przykład przerwania wykonania aplikacji oraz podgląd obiektu form
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-10
Szczegółowe informacje o możliwościach pracy z IntelliSense i debugowaniem w Visual Studio
możemy znaleźć na blogu Scott Guthrie umieszczonego w dodatkowych źródłach informacji.
Podsumowanie
W tym rozdziale przedstawione zostały podstawy języka JavaScript oraz wprowadzenie do pracy
z tym językiem w VisualStudio 2008.
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• umiesz dodawać kod JavaScript do strony HTML
• potrafisz napisać prostą aplikację w JavaScript
• wiesz, co umożliwia IntelliSense i jak uruchomić debugowanie w Visual Studio 2008
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. Scott Guthrie, VS 2008 JavaScript Intellisense - ScottGu's Blog
http://weblogs.asp.net/scottgu/archive/2007/06/21/vs-2008-javascript-intellisense.aspx
Na blogu autor prezentuje możliwości technologii Intellisense w języku JavaScript.
2. Scott Guthrie, VS 2008 JavaScript Debugging - ScottGu's Blog,
http://weblogs.asp.net/scottgu/archive/2007/07/19/vs-2008-javascript-debugging.aspx
Na blogu autor prezentuje możliwości debugowania aplikacji napisanych w języku
JavaScript.
3. Danny Goodman, JavaScript. Biblia, Helion
W książce znajdziesz wszystko, co jest ważne przy tworzeniu aplikacji w języku
JavaScript. Na prawie 1500 stronach autor umieścił prawie wszystko co chciałbyś
wiedzieć o tym języku.
4. Shelley Powers, JavaScript. Wprowadzenie, Helion
W książce autor przedstawił praktyczne wprowadzenie do języka JavaScript.
Z książki nauczysz się przechwytywać zdarzenia zachodzące w oknie przeglądarki,
sprawdzać dane wprowadzane przez użytkowników do formularzy na stronach
WWW oraz korzystać z plików cookie. Poznasz obiektowy model dokumentu
(DOM), technologię AJAX i dodatkowe biblioteki.
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-11
Laboratorium podstawowe
Problem 1 (czas realizacji 20 min)
Jesteś właścicielem niewielkiej firmy i Twój pracownik przygotował prostą ankietę w języku HTML
umożliwiającą pobranie od użytkownika podstawowych informacji dotyczących imienia, adresu,
wzrostu i zakresu cen. Ankieta została przedstawiona na Rys. 4.
Rys. 4 Ankieta
Niestety klient zażyczył sobie aby dodać sprawdzenie danych po stronie przeglądarki:
• Pola wymagane:
• Imie
• Cena od i do
• Sprawdzenie poprawności wpisanych wartości dla pól:
• E-mail (e-mail w formacie [email protected])
• Kod pocztowy (kod odpowiedni dla naszego kraju)
• Wzrost (zakres od 40 do 250 cm)
• Wartości w polach od i do wpisane odpowiednio
Twoim zadaniem jest przygotowanie odpowiednich skryptów w języku JavaScript umożliwiających
spełnienie oczekiwań klienta.
Zadanie Tok postępowania
1. Utwórz nową
stronę w Visual
Studio 2008
Express Edition
• Otwórz Visual Studio 2008.
• Z menu wybierz File -> New -> Web Site.
• Z listy Visual Studio installed templates wybierz Empty Web Site.
• Z listy Location wybierz File System, a w polu obok określ lokalizację dla
pliku w dowolnym miejscu na dysku.
• Kliknij OK.
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-12
2. Dodaj do
projektu
utworzone przez
pracownika pliki
• Wybierz Website->Add Existing Item a następnie wskaż plik
Ankieta.htm.
• Podobnie dodaj plik Style.css.
• Wybierz prawym przyciskiem myszy plik Ankieta.htm i wybierz View in
Browser.
3. Dodaj nowy
plik, który będzie
zawierał kod
sprawdzający
• Wybierz Website->Add New Item a następnie w oknie Add New Item:
— W obszarze Templates wybierz JScript File
— W polu Name wpisz Walidacja.js
• Otwórz plik Ankieta.htm i z okna Solution Explorer przeciągnij plik
Walidacja.js do środka znacznika head na stronie.
• Zapisz zmiany.
4. Dodanie
funkcji walidującej
formularz i
sprawdź, czy
wymagane w
zadaniu pola są
wypełnione
• Do pliku Walidacja.js wpisz następujący kod:
function sprawdz ( form ) { if (form.imie.value == "") { alert( "Proszę wprowadzić imię." ); form.imie.focus(); return false ; } if (form.email.value == "") { alert( "Proszę wprowadzić adres email." ); form.email.focus(); return false ; } if (form.cenaOd.value == "") { alert( "Proszę wprowadzić wartość od." ); form.cenaOd.focus(); return false ; } if (form.cenaDo.value == "") { alert( "Proszę wprowadzić wartość do." ); form.cenaDo.focus(); return false ; } return true ; }
• W pliku Ankieta.htm do znacznika form dodaj właściwość
onsubmit="return sprawdz(this)" tak, aby znacznik wyglądał jak
poniżej
<form name="ankietaSklepu" onsubmit="return sprawdz(this)">
• Zapisz oba pliki i otwórz plik Ankieta.htm w przeglądarce. Sprawdź, czy
możesz wysłać formularz (wcisnąć przycisk Wyślij) bez wypełnienia pól
wymaganych.
5. Sprawdź
poprawność
adresu e-mail
• W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje adresEmail
sprawdzającą przy pomocy wyrażenia regularnego poprawność
wpisanego adresu E-mail wpisz:
function adresEmail( adres ) { var regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/; return regex.test(adres); }
• W funkcji sprawdz powyżej linii return true wpisz:
if (!adresEmail(form.email.value)) { alert( "Proszę wprowadzić poprawny adres email \n w formacie: [email protected]." ); form.email.focus(); return false ; }
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-13
• Zapisz plik Walidacja.js i otwórz plik Ankieta.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij
wypełniając pole E-mail w złym formacie.
6. Sprawdź
poprawność kodu
pocztowego
• W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje
kodPocztowy
function kodPocztowy( kod ) { var regex = /^[0-9]{2}\-[0-9]{3}$/; return regex.test(kod); }
• W funkcji sprawdz powyżej linii return true wpisz:
if (!kodPocztowy(form.kodPocztowy.value)) { alert( "Proszę wprowadzić poprawny kod pocztowy." ); form.kodPocztowy.focus(); return false ; }
• Zapisz plik Walidacja.js i otwórz plik Ankieta.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij
wypełniając pole Kod pocztowy w złym formacie.
7. Sprawdź
poprawność
wpisanej wartości
w polu Wzrost
• W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje
sprawdzWzrost. Dodatkowo dodaj funkcje pomocniczą liczbaCalkowita.
function liczbaCalkowita( liczba ) { var regex = /^[\-]{0,1}[0-9]{1,8}$/; return regex.test(liczba); } function sprawdzWzrost( liczba ) { if (!liczbaCalkowita(liczba)) { return false ;} var wzrost=parseInt(liczba); if((wzrost<40) || (wzrost>250)) {return false;} return true; }
• W funkcji sprawdz powyżej linii return true wpisz:
if (!sprawdzWzrost(form.wzrost.value)) { alert( "Proszę wprowadzić poprawny wzrost w cm. (zakres 40-250cm)" ); form.wzrost.focus(); return false ; }
• Zapisz plik Walidacja.js i otwórz plik Ankieta.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij
wypełniając pole Wzrost w złym formacie.
8. Sprawdź
poprawność
wpisanych
wartości w polach
Od i Do
• W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje
sprawdzOdDo przyjmującą dwa parametry cenaOd i cenaDo
function sprawdzOdDo( cenaOd, cenaDo) { if (!liczbaCalkowita(cenaOd)) { return false ;} if (!liczbaCalkowita(cenaDo)) { return false ;} var zakres=parseInt(cenaDo)-parseInt(cenaOd); if(zakres<0){return false;} return true; }
• W funkcji sprawdz powyżej linii return true wpisz:
if (!sprawdzOdDo(form.cenaOd.value,form.cenaDo.value)) { alert( "Proszę wprowadzić poprawny zakres cenowy" ); form.wzrost.focus(); return false ; }
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-14
• Zapisz plik Walidacja.js i otwórz plik Ankieta.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij
wypełniając pole od i do wartościami innymi niż liczba oraz umieszczając
w polu od większą wartość niż w polu do.
Problem 2 (czas realizacji 25 min)
Zbliża się termin oddania projektu dla ważnego klienta, gdy nagle okazuje się, że brakuje istotnego
elementu jakim jest formularz rejestracji nowego użytkownika na stronie. Formularz ma zawierać
jedynie trzy pola nazwa i dwa razy hasło, jednak klient zażyczył sobie następującą funkcjonalność
realizowaną w przeglądarce:
• nazwa użytkownika ma mieć co najmniej 5 znaków, nie więcej jednak jak 10 i może zawierać
tylko litery
• hasło ma mieć co najmniej 7 znaków i ma być wyświetlana informacja o sile hasła.
Dodatkowo hasło powinno posiadać możliwość określenia poziomu jego zabezpieczenia – podczas
tworzenia użytkownik ma być powiadamiany o sile hasła. Wszystkie informacje mają pojawiać się
obok pola do wpisywania.
Zadanie Tok postępowania
1. Utwórz nową
stronę w Visual
Studio 2008
Express Edition
• Otwórz Visual Studio 2008.
• Z menu wybierz File -> New -> Web Site.
• Z listy Visual Studio installed templates wybierz Empty Web Site.
• Z listy Location wybierz File System, a w polu obok określ lokalizację dla
pliku w dowolnym miejscu na dysku.
• Kliknij OK.
2. Dodaj do
projektu
utworzone przez
pracownika pliki
• Wybierz Website->Add Existing Item a następnie wskaż plik
Rejestracja.htm.
• Podobnie dodaj plik StyleRej.css.
• Wybierz prawym przyciskiem myszy plik Rejestracja.htm i wybierz View
in Browser.
3. Umieść na
formularzu pola
do których będą
wpisywane
informacje o
błędach
• Otwórz stronę Rejestracja.htm za polem input o właściwości
name="nazwa" umieść następujący znacznik:
<span id="zlaNazwa"></span>
• Za polem input o właściwości name="haslo" umieść następujący
znacznik:
<span id="opisHasla"></span>
• Za polem input o właściwości name="haslo2" umieść następujący
znacznik:
<span id="zgodneHasla"></span>
• Zapisz zmiany.
4. Dodaj styl do
wyświetlania
informacji o
błędach na
stronie
• Do pliku StyleRej.css dodaj następujący styl:
.wyroznienieCzerwone{ padding-left:10px; color:Red; font-weight:600; }
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-15
5. Sprawdź liczbę
znaków w nazwie
użytkownika i
haśle
• Wybierz Website->Add New Item a następnie w oknie Add New Item:
— W obszarze Templates wybierz JScript File
— W polu Name wpisz Rejestracja.js
• Otwórz plik Rejestracja.htm i z okna Solution Explorer przeciągnij
dodany plik do środka znacznika head na stronie.
• W pliku Rejestracja.htm do znacznika form dodaj właściwość
onsubmit="return sprawdz(this)".
• Zapisz zmiany.
• W pliku Rejestracja.js dodaj następujący kod:
function sprawdz (form){ var user=form.nazwa.value; if ((user.length<5) || (user.length>10)) { document.getElementById("zlaNazwa").innerHTML = "Nazwa użytkownika może mieć od 5 do 10 liter"; document.getElementById("zlaNazwa").className = "wyroznienieCzerwone"; form.nazwa.focus; return false; } else { document.getElementById("zlaNazwa").innerHTML = "";} if (form.haslo.value.length < 7) { document.getElementById("opisHasla").innerHTML = "Proszę wprowadzić hasło co najmniej 7 literowe."; document.getElementById("opisHasla").className = "wyroznienieCzerwone"; form.haslo.focus(); return false ; } return true; }
• Zapisz plik Rejestracja.js i otwórz plik Rejestracja.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij. Wpisz
nazwę użytkownika i hasło zawierające odpowiednią liczbę znaków.
6. Sprawdź znaki
w nazwie
użytkownika
• W pliku Rejestracja.js w funkcji sprawdz powyżej linii return true
dodaj następujący kod:
if (!((user.match(/[a-z]/)) || (user.match(/[A-Z]/)))) { document.getElementById("zlaNazwa").innerHTML = "Nazwa użytkownika zawierać tylko litery"; document.getElementById("zlaNazwa").className = "wyroznienieCzerwone"; form.nazwa.focus; return false; } else { document.getElementById("zlaNazwa").innerHTML = ""; }
• Zapisz plik Rejestracja.js i otwórz plik Rejestracja.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij. Wpisz
nazwę użytkownika zawierające inne znaki niż małe czy duże litery.
7. Sprawdź
zgodność
wpisanych haseł
• W pliku Rejestracja.js w funkcji sprawdz powyżej linii return true
dodaj następujący kod:
if (form.haslo.value!=form.haslo2.value) { document.getElementById("zgodneHasla").innerHTML = "Hasła nie są zgodne!"; document.getElementById("zgodneHasla").className = "wyroznienieCzerwone"; return false; }
• Zapisz plik Rejestracja.js i otwórz plik Rejestracja.htm w przeglądarce.
Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij. Wpisz
różne hasła w polach.
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-16
8. Dodaj
możliwość
wyświetlania
informacji o sile
hasła
• W pliku Rejestracja.htm do pola Input o właściwości name="haslo"
dodaj właściwość onkeyup="silaHasla(this.value)"
• Do pliku Rejestracja.js dodaj następująca funkcję:
function silaHasla( haslo ) { var punkty=0; if (haslo.length >=7) punkty++; if ((haslo.match(/[a-z]/)) && (haslo.match(/[A-Z]/))) punkty++; if (haslo.match(/\d+/)) punkty++; if (haslo.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) punkty++; if (punkty<1) { document.getElementById("opisHasla").innerHTML = "Bardzo słabe"; document.getElementById("opisHasla").className = "opisHaslaBardzoSlabe"} else if (punkty<2) { document.getElementById("opisHasla").innerHTML = "Słabe"; document.getElementById("opisHasla").className = "opisHaslaSlabe"} else if (punkty<3){ document.getElementById("opisHasla").innerHTML = "Średnie"; document.getElementById("opisHasla").className = "opisHaslaSrednie"} else { document.getElementById("opisHasla").innerHTML = "Silne"; document.getElementById("opisHasla").className = "opisHaslaSilne"} }
• Do pliku StyleRej.css dodaj następujące stylu umożliwiające
wyświetlenie w różnych kolorach informacji o sile hasła:
.opisHaslaBardzoSlabe { padding-left:10px; color:Red; } .opisHaslaSlabe { padding-left:10px; color:Maroon; } .opisHaslaSrednie { padding-left:10px; color:Yellow; } .opisHaslaSilne { padding-left:10px; color:Green; }
• Zapisz plik Rejestracja.js i otwórz plik Rejestracja.htm w przeglądarce.
Sprawdź, jak zachowuje się strona przy wpisywaniu hasła. Wymyśl
hasło, które zostanie ocenione jako silne.
Piotr Bubacz Moduł 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-17
Laboratorium rozszerzone
Twoim zadaniem jest przygotowanie i walidacja ankiety dla agencji modelek i modeli „Modelinki”.
Strona ankiety musi umożliwić pobranie od każdego chętnego do pracy w charakterze modela
następujących informacji:
• imię
• nazwisko
• adres zamieszkania
• telefon
• wiek
• wzrost
• waga
• kolor włosów
• kolor oczu
• rozmiar ubrania
• numer butów
• doświadczenie (wybierane od 1 do 5)
• płeć
Po wybraniu płci użytkownikowi zostaje wyświetlony albo formularz dla kobiet albo dla mężczyzn,
który umożliwia pobranie następujących informacji:
• w przypadku kobiet:
• obwód biustu
• wielkość miseczki
• talia
• biodra
• długość nogi
• w przypadku mężczyzn:
• klatka
• pas
• długość nogi
Ponieważ wszystkie pola są wymagane opracuje schemat sprawdzania pola w odpowiedniej funkcji.
Sprawdzenie poprawności wpisanych wartości ma odbywać się dla pól:
• E-mail (e-mail w formacie [email protected])
• Kod pocztowy (kod odpowiedni dla naszego kraju)
• Wzrost – liczba w zakresie od 40 do 250 cm,
• Waga – liczba w zakresie od 20 do 80 kg
Wszystkie operacje sprawdzenia poprawności i wyświetlania elementów dla kobiet i mężczyzn maja
być realizowane po stronie klienta w przeglądarce!
ITA- 103 Aplikacje internetowe
Piotr Bubacz
Moduł 4
Wersja 1
Wprowadzenie do ASP.NET Spis treści
Wprowadzenie do ASP.NET ................................................................................................................. 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Przykładowe rozwiązanie ........................................................................................................... 10
Porady praktyczne ..................................................................................................................... 14
Uwagi dla studenta .................................................................................................................... 15
Dodatkowe źródła informacji..................................................................................................... 15
Laboratorium podstawowe ................................................................................................................ 17
Problem 1 (czas realizacji 15 min) .............................................................................................. 17
Problem 2 (czas realizacji 30 min) .............................................................................................. 18
Laboratorium rozszerzone ................................................................................................................. 22
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące podstaw tworzenia aplikacji
internetowych w Visual Studio 2008. Nauczysz się dodawać strony
internetowe do aplikacji oraz umieszczać na nich kontrolki dostępne w
ASP.NET. Poznasz zasady programowego odwoływania się do kontrolek
oraz interakcji z użytkownikiem strony.
Cel modułu
Celem modułu jest poznanie zasad pracy z aplikacjami internetowymi w
ASP.NET, dodawania i programowego odwoływania się do kontrolek oraz
dodawania i przesyłania informacji między stronami.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• potrafił tworzyć aplikacje internetowe w ASP.NET w Visual Studio
2008
• potrafił dodawać kontrolki do strony internetowej
• potrafił odwoływać się programowo do kontrolek na stronie
• rozumiał zasadę przesyłania informacji między stronami
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy języka XHTML
• znać podstawy CSS
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznać się z materiałem zawartym
w modułach „Podstawy HTML” i „Kaskadowe Arkusze Stylów – CSS”.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-3
Przygotowanie teoretyczne
Przykładowy problem
Podstawowym ograniczeniem języka HTML jest jego statyczność. Nie ma możliwości w tym języku
dynamicznej zmiany wyświetlanej zawartości ani reagowania na działania użytkownika. Statyczne
strony są bardzo dobre jako wizytówki, ale dzisiaj ciężko sobie wyobrazić stronę internetową bez
elementów dynamicznych.
Firmowe strony internetowe muszą przynajmniej umożliwiać wyszukiwanie czy przeglądanie
produktów. Dzisiaj firmy coraz częściej zwracają się w kierunku Web 2.0, udostępniając
użytkownikom swoich serwisów możliwość samodzielnego generowania treści. Takie narzędzia jak
blog stają się podstawą komunikacji z klientami już nie tylko w dużych korporacjach, ale i w małych
firmach. Firmy dostrzegają możliwości Wikipedii i udostępniają możliwość rozszerzania swojej
podstawowej wiedzy o produktach. Te wszystkie nowe elementy pojawiające się na stronach
wymagają dynamicznych technologii tworzenia zawartości stron.
Podstawy teoretyczne
ASP.NET jest zbiorem technologii programistycznych zbudowanych na platformie .NET, używanych
do budowania dynamicznych aplikacji internetowych. W ASP.NET programista ma do dyspozycji
wiele gotowych komponentów i klas związanych z najczęściej wykonywanymi zadaniami.
Aplikacja ASP.NET
Na aplikację ASP.NET mogą składać się następujące elementy:
• formularze internetowe (ang. Web Forms) – pliki z rozszerzeniem .aspx
• usługi Web (ang. Web Services) – pliki z rozszerzeniem .asmx
• pliki logiki aplikacji – pliki z rozszerzeniem .vb lub .cs
• globalna klasa aplikacji – plik Global.asax
• pliki konfiguracyjne – pliki Web.config
• inne pliki – np. strony HTML, arkusze CSS itp.
Formularz internetowy
Formularze internetowe reprezentują dynamicznie budowane strony internetowe. Składają się ze
znaczników ASP.NET oraz logiki i są przesyłane do użytkownika najczęściej w postaci
standardowych dokumentów XHTML. Aplikacja ASP.NET zawiera jeden lub więcej formularzy. Cała
logika jest wykonywana po stronie serwera, chociaż możliwe jest wykonywanie części kodu w
postaci skryptów po stronie użytkownika.
Pliki konfiguracyjne
Najważniejsze pliki zawierające ustawienia konfiguracyjne aplikacji ASP.NET to:
• Machine.config – przechowywane w nim ustawienia dotyczą wszystkich aplikacji na
komputerze lokalnym
• Web.config – przechowywane w nim ustawienia dotyczą tylko wybranej aplikacji
Pliki konfiguracyjne mogą być modyfikowane w czasie działania aplikacji, lecz wiąże się to
z koniecznością jej ponownego uruchomienia.
Zintegrowane środowisko programistyczne Visual Studio 2008
Zintegrowane środowisko programistyczne umożliwia wytwarzanie i weryfikację aplikacji oraz
przygotowywanie ich do wdrożenia. Charakteryzuje się tym, że udostępnia funkcjonalności
obejmujące edycję i kompilowanie kodu źródłowego, tworzenie zasobów programu, zarządzanie
bazami danych itp.
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-4
Visual Studio 2008 IDE składa się z wielu okien o różnym przeznaczeniu (Rys. 2). W menu View
można określić, które z nich mają być widoczne dla użytkownika.
Rys. 2 Okno Visual Studio 2008
1. Okno dokumentu – centralne okno aplikacji. W trybie projektowania (Design) możliwe jest
graficzne projektowanie stron w trybie WYSIWYG (ang. What You See Is What You Get). W
trybie podglądu kodu źródłowego (Source) w oknie wyświetlany jest kod strony. Tryb
dzielony (Split) umożliwia jednoczesne wyświetlanie strony w obu widokach.
2. Toolbox – zbiór elementów, które można umieścić na projektowanej stronie,
pogrupowanych w kategorie.
3. Solution Explorer – lista plików i folderów wchodzących w skład projektu. Wyświetla
hierarchię plików. Z tego okna można przenosić i modyfikować pliki, w szczególności możliwe
jest:
• przenoszenia plików poprzez przeciąganie ich myszą
• wyświetlenie zawartości pliku w oknie dokumentów po dwukrotnym kliknięciu go
• wywołanie menu kontekstowego skojarzonego z elementem poprzez kliknięcie go
prawym przyciskiem myszy
4. Properties – lista dostępnych właściwości oraz bieżące ustawienia aktualnie zaznaczonego
obiektu.
5. Error List – informacje o błędach, które wystąpiły w projekcie.
6. Server Explorer – interakcja z narzędziami dostępnymi na serwerze.
Aplikacje internetowe w Visual Studio
Tworzenie aplikacji
Aby utworzyć nową aplikację w Visual Studio musimy wybrać z menu File -> New -> Web Site. Na
ekranie pojawi się okno New Web Site (Rys. 3), w którym możemy określić podstawowe parametry
tworzonej witryny.
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-5
Rys. 3 Okno New Web Site
Elementy wyświetlane w oknie New Web Site:
1. Zainstalowane szablony aplikacji – lista, w której możemy określić, jakiego typu aplikację
chcemy utworzyć. Najczęściej wybieramy szablon ASP.NET Web Site.
2. Docelowa wersja .NET Framework – docelowa wersja środowiska, pod którą ma być
uruchamiana aplikacja.
3. Lokalizacja witryny – umiejscowienie plików aplikacji.
4. Ścieżka lub adres serwera – dokładne położenie plików aplikacji na lokalnym dysku twardym
lub na serwerze, zależnie od wybranej lokalizacji.
5. Język programowania – języka programowania, w którym tworzona będzie aplikacja.
6. Przycisk Browse – przycisk umożliwiający określenie dokładnego położenia plików aplikacji.
Uruchamianie aplikacji
Aby uruchomić aplikację, wybieramy z menu Debug -> Start Debugging lub naciskamy klawisz F5.
Po wybraniu tej opcji przy pierwszym uruchomieniu aplikacji pojawi się okno z informacją o
konieczności zezwolenia na debugowanie. W tym przypadku należy wcisnąć OK. W tym trybie nie
będzie możliwe dynamiczne poprawianie strony, ale będzie możliwe debugowanie aplikacji.
Możemy w dowolnym miejscu w kodzie aplikacji zatrzymać wykonywanie programu, podejrzeć
zmienne, sprawdzić krok po kroku wykonywanie poszczególnych wierszy kodu itp.
Aplikację można również uruchomić w trybie bez możliwości debugowania, wybierając z menu
głównego Debug -> Start Without debugging lub wciskając Ctrl+F5. Zaletą tego trybu jest
możliwość wprowadzania zmian w kodzie, które widoczne są po odświeżeniu strony w
przeglądarce.
Strona internetowa
Struktura strony
Stronę internetową (formularz internetowy) definiuje się w pliku z rozszerzeniem .aspx. Struktura
takiego pliku składa się z trzech sekcji: dyrektyw strony, kodu aplikacji i układu strony.
Dyrektywy
Dyrektywy umożliwiają definiowanie podstawowych ustawień. Mają one następującą składnię:
<%@ dyrektywa atrybut="wartość" [, atrybut="wartość"[,...n] ] %>
Najważniejszą i zarazem jedyną obowiązkową dyrektywą jest umieszczona na początku każdej
strony internetowej ASP.NET dyrektywa @Page.
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-6
Dyrektywa @Page określa atrybuty używane przez parser i kompilator. Pozwala m.in. określić
parametry protokołu HTTP, przestrzenie nazw, wykorzystywany język programowania.
Sekcja kodu aplikacji
Sekcja kodu aplikacji zawiera procedury obsługi zdarzeń wraz dodatkowymi procedurami
pomocniczymi. Kod aplikacji może zostać osadzony wewnątrz kodu znacznikowego (Code Inline) lub
umieszczaniu kodu w osobnym pliku (Code Behind) (Rys. 4).
<%@ Page …
<script runat="server“>
…//logika aplikacji
</script>
<html>…
</html>plik.aspx
Inline
Logika aplikacji w pliku
plik.aspx.cs
<html>
…
</html>
plik.aspx
Codebehind
Rys. 4 Strona plik.aspx jako Code Inline i Code Behind
W przypadku Code Inline kod aplikacji jest umieszczany w sekcji nagłówka strony (<head>)
wewnątrz znacznika <script> z atrybutem runat="Server", który informuje kompilator, że
zawartość tego znacznika będzie przetwarzana na serwerze przed wygenerowaniem kodu HTML dla
klienta. Strona może posiadać znacznik <script> bez atrybutu runat, zawierający skrypt
wykonywany po stronie klienta.
Jeśli kod aplikacji ma zostać umieszczony w osobnym pliku (Code Behind), to w dyrektywie @Page
są zdefiniowane atrybuty CodeFile (nazwa pliku) oraz Inherits (nazwa klasy częściowej
zawierającej kod aplikacji).
Kod aplikacji jest zawsze kompilowany przed wykonaniem. Może on być także prekompilowany i
dołączony do aplikacji w postaci binarnej.
Układ strony
Układ strony jest opisany za pomocą kodu znacznikowego, który zawiera kontrolki serwerowe, ciągi
tekstu oraz znaczniki języka HTML. Wygląd strony może być zdefiniowany na stronie poprzez
ustawienie właściwości indywidualnych elementów lub przy pomocy arkuszy styli.
Dodawanie stron internetowych do aplikacji
Do Projektu witryny można dodać nową lub istniejącą stronę internetową. Dodanie nowej strony
możliwe jest:
• po wybraniu z menu głównego Website -> Add New item
• po wciśnięciu kombinacji klawiszy Ctrl+Shift+A
• po wybraniu Add New Item z menu kontekstowego wywoływanego po kliknięciu prawym
przyciskiem myszy nazwy projektu w oknie Solution Explorer
Po wybraniu jednej z powyższych opcji zostanie wyświetlone okno dialogowe (Rys. 5).
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-7
Rys. 5 Okno dialogowe Add New Item
Okno dialogowe dodawania nowego obiektu do aplikacji zawierające następujące elementy:
1. Templates – opcja to umożliwia wybranie szablonu dodawanego pliku.
2. Name – pole tekstowe umożliwiające określenie nazwy pliku.
3. Language – lista rozwijana umożliwiająca wybór jednego z języków programowania stron
internetowych.
4. Place code in separate file – pole wyboru określające, czy kod aplikacji ma zostać
umieszczony w osobnym pliku (pole zaznaczone), czy też w pliku .aspx w znaczniku
<script> (pole niezaznaczone).
5. Select master page – pole wyboru określające, czy strona internetowa bazuje na stronie
wzorcowej (pole zaznaczone). Jeśli opcja ta została zaznaczona, to po wciśnięciu przycisku OK
użytkownik zostanie poproszony o wskazanie strony wzorcowej. Więcej informacji na temat
stron wzorcowych zostanie przedstawionych później.
Kontrolki na stronie
Dodawanie kontrolek do strony
Kontrolki możemy dodać do strony w dowolnym widoku: Design, Split lub Source. W oknie Toolbox należy wybrać interesujący nas komponent, a następnie, przeciągnąć go na formularz lub
dwukrotnie kliknąć. Kontrolka jest umieszczana zgodnie z przepływem elementów na stronie
internetowej. Aby umieścić ją w dowolnym miejscu, musimy wykorzystać pozycjonowanie CSS.
Określanie właściwości kontrolki
Każda kontrolka posiada zbiór właściwości, które możemy określić w oknie Properites (Rys. 6).
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-8
Rys. 6 Przykład okna Properties dla kontrolki Label
Najczęściej wykorzystuje się właściwość ID, określającą nazwę kontrolki oraz Text, pozwalającą
określić wyświetlany w niej tekst.
Obsługa zdarzeń
Zdarzenia to pewne akcje wykonywane w odpowiedzi na interakcję użytkownika z kontrolkami na
stronie. Mogą nastąpić, gdy naciska on przycisk, wybiera rekord w liście rekordów lub w inny
sposób wchodzi w interakcję z interfejsem użytkownika. Zdarzenia mogą być również generowane
przez aplikację, gdy rozpoczyna lub kończy jakieś zadanie (np. generowanie wynikowego
dokumentu HTML).
Możemy programowo kontrolować działanie aplikacji za pomocą metody obsługi zdarzenia. Jest to
funkcja napisana w wybranym języku programowania, wywoływana w momencie, gdy nastąpi
powiązane z nią zdarzenie.
Najczęściej wykorzystywanym zdarzeniem jest zdarzenie Load klasy Page. Jest ono wywoływane w
momencie, gdy po stronie serwera aplikacja zainicjalizuje wszystkie obiekty kontrolek. Innym
często wykorzystywanym zdarzeniem jest zdarzenie Click klasy Button, pozwalające określić, co
ma się stać po wciśnięciu przycisku przez użytkownika.
Wiele klas udostępnia więcej niż jedno zdarzenie, np. klasa Button oprócz wspomnianego już
zdarzenia Click udostępnia również zdarzenie Command. W takim wypadku jedno z nich jest
określane jako domyślne. Dla przykładu zdarzenie Click jest domyślnym zdarzeniem klasy
Button.
Z poziomu Visual Studio dostęp do domyślnego zdarzenia uzyskujemy po dwukrotnym kliknięciu
wybranej kontrolki w trybie projektowania. Wygenerowana zostanie wówczas pusta metoda do
jego obsługi. Dostęp do wszystkich zdarzeń jest możliwy po wybraniu kontrolki, a następnie
kliknięciu w oknie Properties przycisku Events (oznaczone na Rys. 7 przez czerwone koło). By
wygenerować metodę obsługi dla któregoś z nich, wystarczy dwukrotnie kliknąć jego nazwę.
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-9
Rys. 7 Okno Properties z listą zdarzeń
Programowe odwoływanie do kontrolek
Możemy programowo zmieniać właściwości kontrolek, odwołując się do nich w kodzie po ich
nazwie, określonej przy pomocy właściwości ID (Rys. 8). Visual Studio podpowiada, jakie
właściwości (np. Text) kontrolki możemy zmienić lub jakie metody możemy na niej wywołać (np.
ToString).
Rys. 8 Właściwości i metody kontrolki Label
Przesyłanie informacji między stronami
Metoda przesyłanie danych w parametrach adresu URL
Przesyłane dane są widoczne w adresie docelowym dokumentu. Adres dokumentu jest oddzielany
od parametrów znakiem zapytania, a parametry oddzielone są od siebie znakiem ampersand („&”).
Główną wadą tej metody jest ograniczenie ilości wysyłanych danych do maksymalnej długości
paska adresu przeglądarki klienta. Dodatkowo problem może sprawiać przesyłanie danych
binarnych.
Wysyłanie informacji tą metodą polega na przygotowaniu odpowiednio sformatowanego ciągu
znaków, który będzie zawierał lokalizację i nazwę pliku, do którego należy wysłać zapytanie oraz
odpowiednio dodane nazwy parametrów wraz z ich wartościami po znaku „=”.
Ogólna postać adresu URL z dołączonymi parametrami żądania przesyłanego metodą GET:
strona.aspx?parametr=wartość[¶metr=wartość[&...n] ]
Na przykład jeśli chcemy wysłać zmienną imie i nazwisko do strony Info.aspx, to dane te można
przesłać w adresie w następujący sposób:
Info.aspx?imie=wartosc&nazwisko=wartosc
Przygotowany ciąg znaków należy wysłać przy pomocy metody Response.Redirect(url), gdzie url
jest ciągiem znaków, np.:
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-10
Response.Redirect("Info.aspx?imie=" + imieTextBox.Text + "&nazwisko=" +
nazwiskoTextBox.Text);
Po wykonaniu powyższego kodu przeglądarka zostanie przekierowana do strony Info.aspx, a w
pasku adresu może pojawić się przykładowo następujący ciąg znaków:
http://.../Info.asp?imie=Jan&Nazwisko=Kowalski
W celu wykorzystania tych informacji na stronie docelowej należy użyć właściwości QueryString
obiektu Request, np.
Request.QueryString["imie"]
Metoda przesyłania zawartości jednego formularza do drugiego
Metoda przesyłania zawartości jednego formularza do drugiego umożliwia przesyłanie niemal
nieograniczonych ilości danych, dlatego jest stosowana w większości formularzy internetowych.
Dodatkową jej zaletą jest to, że przesyłane informacje nie pokazują się w pasku adresu
przeglądarki. Ta właściwość czyni ją najlepszym rozwiązaniem przy przesyłaniu poufnych danych z
uwzględnieniem takich mechanizmów, jak szyfrowanie połączenia.
Przykład kodu po stronie wysyłającej:
<form id="form1" runat="server">
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Wyślij"
PostBackUrl="~/Default2.aspx" />
</form>
Przykład kodu po stronie odbierającej:
TextBox txt = (TextBox) PreviousPage.FindControl("TextBox1");
dane= txt.Text;
Połączenie obu metod
Po stronie wysyłającej:
protected void Button1_Click(object sender, EventArgs e)
{ Server.Transfer("Default2.aspx?imie=Piotr"); }
Po stronie odbierajacej:
protected void Page_Load(object sender, EventArgs e) {
daneGET= Request.QueryString["imie"];
danePOST1 = Request.Form["TextBox1"].ToString();
TextBox txt = (TextBox) PreviousPage.FindControl("TextBox2");
danePOST2 = txt.Text; }
Podsumowanie
W tym rozdziale przedstawione zostały podstawowe informacje dotyczące aplikacji ASP.NET i pracy
w środowisku Visual Studio. Dowiedziałeś się, jak tworzyć aplikacje ASP.NET oraz jak dodawać
kontrolki do formularzy i nowe strony do aplikacji. Zostały również omówione mechanizmy
przesyłania informacji między stronami.
Przykładowe rozwiązanie
Utworzenie aplikacji internetowej
Aplikacje internetowe w Visual Studio 2008 nauczymy się tworzyć na przykładzie prostej aplikacji,
której zadaniem będzie wyświetlenie komunikatu „Witaj świecie”.
Aby utworzyć nową aplikację internetową w Visual Studio 2008, wybieramy z menu File -> New Web Site. Otworzy się okno New Web Site. Z listy Visual Studio installed templates wybieramy
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-11
ASP.NET Web Site. Pliki aplikacji możemy przechowywać w systemie plików, na lokalnym serwerze
WWW lub pod zdalną lokalizacją. Zdecydujemy się na pierwsze rozwiązanie, w tym celu z listy
Location wybieramy File System, a w polu obok określamy położenie plików aplikacji w dowolnym
miejscu na dysku, nazywając ostatni katalog MojaPierwszaStrona. Projekt chcemy przygotować w
języku Visual C#, więc wybieramy go z listy Language. Po kliknięciu OK we wskazanym katalogu
zostaną utworzone pliki aplikacji.
W oknie Solution Explorer możemy zobaczyć nowo utworzony projekt. Składają się na niego:
• plik Default.aspx – pusta strona ASP.NET
• plik Web.config – plik przechowujący ustawienia konfiguracyjne
• katalog App_Data – specjalny katalog, w którym umieszczane są dane aplikacji
Rys. 9 Początkowa zawartość aplikacji
Plik Default.aspx standardowo otwiera się w głównym oknie Visual Studio w widoku Source. By
móc edytować stronę w trybie WYSIWYG, możemy przełączyć się na widok Design. Zróbmy tak,
następnie kliknijmy obszar strony i wpiszmy „Witaj świecie!”.
Aby zobaczyć wynik naszej pracy w przeglądarce internetowej, musimy uruchomić aplikację. W tym
celu wybieramy z menu Debug -> Start Debugging. Przy pierwszym uruchomieniu aplikacji pojawi
się okno z informacją, że możliwość debugowania nie jest włączona (Rys. 10). Jeśli nie zmienimy
niczego i klikniemy OK, Visual Studio samodzielnie zmodyfikuje plik Web.config, umożliwiając nam
posługiwanie się debuggerem. Na czas projektowania aplikacji warto włączyć tę opcję.
Rys. 10 Okno Debugging Not Enabled
Aplikację można również uruchomić w trybie bez możliwości debugowania, wybierając z menu
głównego Debug -> Start Without debugging.
Po uruchomieniu aplikacji powinna otworzyć się przeglądarka internetowa, a w niej strona
Default.aspx. Adres strony może wyglądać następująco:
http://localhost:5110/MojaPierwszaStrona/Default.aspx
Poszczególne elementy oznaczają:
• http://localhost – aplikacja jest uruchamiana na serwerze lokalnym
• 5110 – numer portu, na którym został uruchomiony serwer
• MojaPierwszaStrona – nazwa aplikacji
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-12
• Default.aspx – strona internetowa
Posługiwanie się kontrolkami
Podstawową umiejętnością, jaką powinniśmy posiadać tworząc aplikacje ASP.NET, jest umiejętność
posługiwania się kontrolkami. Pracy z nimi nauczymy się na przykładzie prostej aplikacji,
pobierającej od użytkownika imię oraz płeć i wyświetlającej te informacje na stronie.
Utwórzmy nową aplikację, a następnie otwórzmy plik Default.aspx w trybie Design i w obszarze
strony wpiszmy „Podaj imię:”. Obok napisu powinniśmy dodać pole tekstowe, w które użytkownik
będzie mógł wpisać swoje imię. Funkcję tę spełnia kontrolka TextBox. Znajdziemy ją w oknie
Toolbox, w kategorii Standard – by dodać ją do strony, możemy przeciągnąć ją na obszar
projektowania lub kliknąć ją dwukrotnie. Warto zauważyć, że nie możemy umieścić kontrolki w
dowolnym miejscu na stronie, a jedynie obok napisu. Jest to związane z układem elementów na
stronie internetowej. Jeśli chcemy swobodnie rozmieszczać kontrolki na stronie, powinniśmy użyć
CSS. Warto pamiętać, aby zawsze nadawać kontrolkom znaczące nazwy. W tym celu w oknie
Properties zmienimy właściwość ID kontrolki TextBox z TextBox1 na imieTextBox.
Kursor w widoku projektowania powinien aktualnie znajdować się za polem tekstowym. Naciskając
Enter przeniesiemy go do nowej linii. Zobaczmy, jak wygląda kod strony, przełączając się na widok
Source (możemy również przejść do widoku Split i obserwować jednocześnie widoki Design
i Source). Warto zauważyć, że naciśnięcie klawisza ENTER spowodowało dodanie znacznika
<br />.
Przełączmy się z powrotem na widok Design i w drugiej linii wpiszmy „Podaj płeć:”. Następnie
dodajmy kontrolkę DropDownList reprezentującą listę rozwijaną i nadajmy jej nazwę
plecDropDownList. Możemy wypełnić ją dopuszczalnymi wartościami na dwa sposoby:
wykorzystując narzędzia Visual Studio lub ręcznie dodając kolejne pozycje w kodzie strony.
Zdecydujemy się na pierwsze rozwiązanie. Jeśli zaznaczymy kontrolkę w widoku Design, po jej
prawej stronie powinniśmy zauważyć ikonę , tzw. Smart Tag. Smart Tag umożliwia szybki dostęp
do najczęściej używanych funkcji związanych z kontrolką. Kliknijmy go i wybierzmy Edit Items.
Otworzy się okno ListItem Collection Editor (Rys. 11), w którym możemy dodać elementy do listy.
By dodać pierwszy element, kliknijmy przycisk Add.
Rys. 11 Okno ListItem Collection Editor
Na liście właściwości po prawej stronie odnajdźmy właściwość Text, która określa tekst
wyświetlany dla elementu i przypiszmy jej wartość Kobieta. Następnie w polu Value,
określającym jego unikatową wartość, wpiszmy K. Dodajmy kolejny element do listy, lecz tym
razem w polach Text i Value wpiszmy odpowiednio: Mężczyzna i M. Warto zwrócić uwagę, że
standardowo pole Value jest wypełniane taką samą wartością, jak pole Text, lecz w naszym
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-13
przypadku ze względu na problemy, które mogą występować z polskimi znakami diakrytycznymi,
lepiej będzie zastosować skróty.
Po wypełnieniu listy dodajemy na stronie kontrolkę Button o nazwie pokazButton i w następnej
linii kontrolkę Label o nazwie wyswietlLabel. Chcemy, by po kliknięciu przycisku w etykiecie
wyświetlały się informacje o użytkowniku. Aby wygenerować metodę obsługi kliknięcia przycisku,
wystarczy kliknąć go dwukrotnie. W efekcie w pliku Default.aspx.cs powinna pojawić się pusta
metoda pokazButton_Click.
Komunikat dla użytkownika przygotujemy na podstawie wartości wybranych w poszczególnych
kontrolkach, a następnie ustawimy go jako treść etykiety. Wykorzystamy do tego następujący kod,
który umieścimy wewnątrz metody pokazButton_Click:
string wyswietl = "Witaj " + imieTextBox + "!<br />";
if (plecDropDownList.SelectedValue == "K")
wyswietl += "Jesteś kobietą";
else if (plecDropDownList.SelectedValue == "M")
wyswietl += "Jesteś mężczyzną";
wyswietlLabel.Text = wyswietl;
Przesyłanie informacji między stronami
By zaprezentować możliwość przesyłania informacji między stronami, do przygotowanej
poprzednio aplikacji dodamy możliwość przekazywania wartości wpisanej w polu tekstowym przy
pomocy metody GET, zaś wartości wybranej z listy – przy pomocy metody POST.
Zaczniemy od dodania do naszej strony jeszcze jednej kontrolki Button o nazwie wyslijButton
i etykiecie Wyślij. W metodzie obsługi zdarzenia kliknięcia dodajmy następujący kod:
Server.Transfer("Ankieta.aspx?imie=" + imieTextBox.Text);
Spowoduje on przekierowanie po stronie serwera do strony Ankieta.aspx z parametrem imie,
przechowującym zawartość kontrolki imieTextBox.
Dodajmy nową stronę do aplikacji. W tym celu możemy wybrać z menu Website -> Add Add New Item lub kliknąć prawym przyciskiem myszy w oknie Solution Explorer i z menu kontekstowego
wybrać Add New Item. Pojawi się okno Add New Item. Na liście zainstalowanych szablonów
wybieramy Web Form, w polu Name wpisujemy Ankieta.aspx, zaś w polu Language wybieramy
Visual C#. Pozostawiamy zaznaczone tylko jedno pole wyboru, Place code in separate file, a
następnie klikamy Add.
Do nowej strony dodajemy kontrolkę Label o nazwie wyswietlLabel, a następnie w widoku
podglądu strony klikamy dwukrotnie obszar formularza. Visual Studio otworzy edytor kodu strony i
umieści kursor w metodzie Page_Load. Dodamy w niej kod pobierający wartość przekazanego w
adresie parametru imie:
string wyswietl = "Witaj " + Request.QueryString["imie"] + "<br />";
a także kod pobierający dane z poprzedniej strony:
DropDownList ddl =
(DropDownList)PreviousPage.FindControl("plecDropDownList");
Na podstawie wybranego element w liście rozwijanej do treści komunikatu dodamy dodatkowe
informacje:
if (ddl.SelectedValue == "K")
{ wyswietl += "Jesteś kobietą."; }
if (ddl.SelectedValue == "M")
{ wyswietl += "Jesteś mężczyzną."; }
Na końcu przypisz zawartość zmiennej wyswietl do własności Text kontrolki Label:
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-14
wyswietlLabel.Text = wyswietl;
Porady praktyczne
Praca z Visual Studio
• Jeśli omyłkowo zamknąłeś któreś z okien, możesz otworzyć je ponownie korzystając z menu
View.
• Możesz przeciągać myszą elementy z okna Solution Explorer do okna głównego, uzyskując
różne efekty. Przykładowo po przeciągnięciu obrazka Visual Studio automatycznie wygeneruje
znacznik <img>, zaś przy przenoszeniu arkusza stylów CSS w kodzie strony pojawi się znacznik
<link>.
• By sprawnie pracować w środowisku Visual Studio, powinieneś nauczyć się najważniejszych
skrótów klawiszowych. Niektóre z nich są podane w tym module, zaś pełną listę znajdziesz w
plikach pomocy. Pamiętaj też, że każdy skrót możesz dostosować, wybierając z menu głównego
Tools -> Customize -> Keyboard.
Tworzenie aplikacji
• Jeśli nie wykorzystujesz zaawansowanych funkcji serwera IIS, możesz umieścić pliki aplikacji w
dowolnym miejscu w systemie plików i testować ją wykorzystując zintegrowany serwer WWW
dostarczany razem z Visual Studio. Opcja ta jest szczególnie przydatna, gdy nie posiadasz
uprawnień administracyjnych do serwera IIS.
• Jeśli testowałeś swoją aplikację jedynie pod zintegrowanym serwerem WWW, przed
uruchomieniem jej w środowisku produkcyjnym koniecznie przetestuj ją na serwerze IIS.
Istnieją pewne subtelne różnice w zachowaniu tych dwóch serwerów, m.in. w zakresie obsługi
statycznych plików aplikacji, takich jak dokumenty HTML, arkusze stylów CSS czy pliki graficzne.
• Tworząc nową aplikację Web w Visual Studio 2008 masz możliwość wyboru wersji
.NET Framework. Pamiętaj, że musi ona być zainstalowana nie tylko na komputerze, na którym
tworzysz i testujesz aplikację, lecz również na serwerze, na którym zamierzasz docelowo ją
umieścić. Jeśli zdecydujesz się utworzyć aplikację dla .NET Framework 2.0, musisz liczyć się
z tym, że udogodnienia wprowadzone w wersji 3.5, m.in. zintegrowana obsługa Ajax, nie będą
dostępne.
• Gdy uruchamiasz aplikację bez debugowania, możesz z poziomu Visual Studio wprowadzać
zmiany w kodzie aplikacji, które będą widoczne po odświeżeniu strony w przeglądarce.
• Przed umieszczeniem aplikacji w środowisku produkcyjnym upewnij się, że możliwość
debugowania jest wyłączona w pliku konfiguracyjnym. Zapewnisz w ten sposób lepszą
wydajność aplikacji, zaś w przypadku błędu na stronie fragmenty kodu nie będą prezentowane
użytkownikowi.
Tworzenie stron
• Staraj się umieszczać kod strony w osobnym pliku. Możliwość osadzania kodu wykonywalnego
w kodzie znaczników przydaje się głównie przy różnego rodzaju prezentacjach.
• W oknie Add New Item lista szablonów zależy od dodatków zainstalowanych w systemie.
Dodawanie kontrolek do strony
• Kontrolki są rozmieszczane na stronie tak samo, jak elementy HTML. By móc swobodnie
sterować ich położeniem, możesz wykorzystać CSS.
• Staraj się nie korzystać z wizualnych własności kontrolek wymienionych w oknie Properties,
takich jak kolor tła czy rozmiar tekstu. Do zarządzania wyglądem strony używaj CSS.
• Elementy posiadające atrybut runat="server" najczęściej muszą posiadać również atrybut
ID, dzięki czemu można odwoływać się do nich w kodzie. Pamiętaj, że atrybuty te możesz
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-15
nadawać nie tylko kontrolkom serwerowym, lecz również zwykłym elementom HTML, takim jak
<div> czy <img>.
• Nigdy nie powinieneś polegać na tym, że właściwość ID elementu z atrybutem
runat="server" będzie mieć taką samą wartość po stronie klienta i serwera. ASP.NET nie
gwarantuje tego w żaden sposób i często dodaje dodatkowe elementy do nazwy. Z tego
względu użycie selektorów ID w CSS, np. #imieTextBox { font-weight: bold } jest
zupełnie niepraktyczne. W celu określenia wyglądu kontrolek ASP.NET stosuj właściwość
CssClass i klasy CSS.
Przesyłanie informacji między stronami
• Przesyłanie informacji między stronami w parametrach adresu URL ma ograniczone
zastosowanie, gdyż nie chroni danych w żaden sposób, jak również nie pozwala przekazywać
większych porcji informacji.
• By móc przekazywać dane binarne w parametrze adresu URL, powinieneś zastosować jakieś
kodowanie transportowe – powszechnie w tym celu wykorzystuje się kodowanie Base64.
Niestety musisz liczyć się z tym, że rozmiar danych po zakodowaniu ulegnie zwiększeniu.
• Może się zdarzyć, że w łańcuchu znaków przesyłanym w parametrze adresu URL znajdzie się
jakiś znak specjalny, np. ampersand („&”). Jeśli dokleimy taki łańcuch jako wartość dla
parametru, może ona później zostać nieprawidłowo zinterpretowana przez serwer. By
zabezpieczyć się przed taką sytuacją, powinieneś kodować wartości parametrów przy pomocy
metody Server.UrlEncode.
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• umiesz tworzyć aplikacje internetowe ASP.NET w Visual Studio 2008
• umiesz dodawać nowe strony do aplikacji
• umiesz dodawać kontrolki do strony
• wiesz co to jest i jak utworzyć metodę obsługi zdarzenia
• umiesz programowo odwoływać się do kontrolek
• wiesz co to jest Smart Tag i jak z niego korzystać
• wiesz jak przesyłać informację pomiędzy stronami metodą GET i POST
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. Dino Esposito, Programming Microsoft ASP.NET 3.5, Microsoft Press, 2008
Praktyczne podejście do tworzenia aplikacji w ASP.NET 3.5. szczegółowy
przewodnik po najważniejszych elementach projektowania stron internetowych w
ASP.NET 3.5. Zawiera przegląd od podstaw do zaawansowanych elementów
technologii.
2. Tomasz Jahołkowski, Jacek Matulewski, ASP.NET w Visual Web Developer 2008. Ćwiczenia, Helion, 2008
Książka przeznaczona jest dla początkujących programistów, pragnących tworzyć
witryny ASP.NET, którzy zetknęli się już z jakimkolwiek językiem programowania.
Dzięki temu podręcznikowi nauczysz się korzystać z opisanych narzędzi,
działających w nowoczesnym środowisku Visual Web Developer 2008.
3. Jesse Liberty, Dan Hurwitz, ASP.NET. Programowanie, Helion, 2006
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-16
Podręcznik opisujący zasady tworzenia aplikacji i witryn internetowych przy użyciu
języka C# 2.0, środowiska programistycznego Visual Studio 2005 i bibliotek
.NET 2.0. Przedstawia środowisko Visual Studio 2005 i szczegółowo omawia
koncepcję budowania aplikacji za pomocą kontrolek.
4. Chris Hart, John Kauffman, David Sussman, Chris Ullman, Beginning ASP.NET 2.0 with C#, Wrox,
2006
W książce autorzy prezentują podstawy ASP.NET. Pokazują nie tylko teorię, ale
również przykłady kodu w języku C#.
5. The Official Microsoft ASP.NET Site, http://www.asp.net
Strona zawiera najnowsze informacje dotyczące technologii ASP.NET.
Początkującym programistom ASP.NET warto polecić informacje zawarte w
zakładce Get Started. Z kolei cennym źródłem wiedzy dla wszystkich bez wyjątku
jest zakładka Learn.
Piotr Bubacz
ITA-103 Aplikacje internetowe
Laboratorium podstawowe
Problem 1 (czas realizacji
Twoja firma rozpoczęła ekspansję na rynku dynamicznych aplikacji internetowych. W końcu ile
można zarabiać na tworzeniu prostych
postanowiłeś poznać technologię
padł na technologię ASP.NET.
wyświetlenia na stronie internetowej fragment
od użytkownika imienia.
Zadanie Tok postępowania
1. Utwórz nową
stronę w Visual
Studio 2008
• Otwórz Visual Studio 2008.
• Z menu wybierz
• Z listy
• Z listy
pliku w
• Z listy
• Kliknij
2. Dodaj tekst do
strony. Uruchom
aplikację ASP.NET
• Przełącz
• Na stronie internetowej
świecie!
• Zapisz stronę wybierając z menu
kombinację klawiszy
• Uruchom przygotowaną aplikację
Debugopcji przy pierwszym uruchomieniu aplikacji pojawi się okno
z
W
3. Dodaj
kontrolki Label
• Na stronie w nowej linii dopisz
przeciągnij
• W
dzisiajLabel
4. Dodaj
procedurę obsługi
zdarzenia
• W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio
otworzy edytor kodu strony i umieści kursor
• Do
Strona 4-17
Laboratorium podstawowe
(czas realizacji 15 min)
Twoja firma rozpoczęła ekspansję na rynku dynamicznych aplikacji internetowych. W końcu ile
tworzeniu prostych stron WWW? Ponieważ chcesz być
poznać technologię, w której będziecie tworzyli dynamiczne aplikacj
padł na technologię ASP.NET. Swoją przygodę z nią postanowiłeś rozpocząć
wyświetlenia na stronie internetowej fragmentu tekstu, dzisiejszej daty
Tok postępowania
Otwórz Visual Studio 2008.
Z menu wybierz File -> New Web Site.
Z listy Visual Studio installed templates wybierz ASP.NET
Z listy Location wybierz File System, a w polu obok określ lokalizację dla
pliku w dowolnym miejscu na dysku.
Z listy Language wybierz Visual C#.
Kliknij OK.
Przełącz się na widok Split.
Na stronie internetowej w obszarze podglądu
świecie!.
Zapisz stronę wybierając z menu File -> Save Default.aspxkombinację klawiszy Ctrl+S.
Uruchom przygotowaną aplikację wybierając
Debug -> Start Debugging lub wykorzystując klawisz
opcji przy pierwszym uruchomieniu aplikacji pojawi się okno
informacją o konieczności zezwolenia na debugowanie
Wciśnij OK.
Rys. 12 Okno z informacją o modyfikacji pliku Web.config
Na stronie w nowej linii dopisz Dzisiaj jest, a następnie z okna
przeciągnij kontrolkę Label, umieszczoną w zakładce
Kontrolkę możesz umieścić w obszarze podglądu strony lub w kodzie
źródłowym.
Wybierz dodaną kontrolkę i w oknie PropertiesdzisiajLabel, natomiast pole Text zostaw puste.
W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio
otworzy edytor kodu strony i umieści kursor w metodzie
Do metody dodaj następujący kod wyświetlającą aktualną datę w
Moduł 4
Wprowadzenie do ASP.NET
Twoja firma rozpoczęła ekspansję na rynku dynamicznych aplikacji internetowych. W końcu ile
chcesz być dobrym szefem,
w której będziecie tworzyli dynamiczne aplikacje. Wasz wybór
postanowiłeś rozpocząć od prostego zadania –
j daty oraz pobranego
ASP.NET Web Site.
, a w polu obok określ lokalizację dla
u strony wpisz Witaj
Save Default.aspx lub wciskając
wybierając z menu
lub wykorzystując klawisz F5. Po wybraniu tej
opcji przy pierwszym uruchomieniu aplikacji pojawi się okno
informacją o konieczności zezwolenia na debugowanie (Rys. 12).
Okno z informacją o modyfikacji pliku Web.config
następnie z okna Toolbox
zakładce Standard.
obszarze podglądu strony lub w kodzie
Properties w polu (ID) wpisz
W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio
metodzie Page_Load.
dodaj następujący kod wyświetlającą aktualną datę w
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-18
Page_Load kontrolce dzisiajLabel:
dzisiajLabel.Text = DateTime.Today.ToShortDateString();
• Zapisz zmiany i uruchom przygotowaną stronę.
5. Dodaj
kontrolki TextBox,
Button i obsłuż
zdarzenia Click
• Na stronie w nowej linii dopisz: Podaj swoje imię:, a następnie z okna
Toolbox przeciągnij kontrolkę TextBox i w oknie Properities w polu (ID) wpisz imieTextBox.
• Następnie obok poprzedniej kontrolki dodaj do strony kontrolkę Button
w oknie Properities w polu Text wpisz Wyświetl, a w polu (ID) –
wyswietlButton
• W nowej linii dodaj kontrolkę Label i w oknie Properities w polu (ID) wpisz imieLabel i usuń zwartość pola Text.
• Dwukrotnie kliknij kontrolkę Button. Visual Studio otworzy edytor kodu
strony i umieści kursor w metodzie wyswietlButton_Click. Do metody
dodaj:
imieLabel.Text = "Witaj " + imieTextBox.Text;
6. Przetestuj
stronę
• Zapisz zmiany i uruchom przygotowaną stronę. W oknie tekstowym
podaj swoje imię, a następnie wciśnij przycisk Wyświetl.
Problem 2 (czas realizacji 30 min)
Poprzednie zadanie okazało się być łatwiejsze niż sądziłeś. Zachęcony pierwszymi sukcesami
rzuciłeś sobie nowe wyzwanie – postanowiłeś dowiedzieć się, jak przesyłać informacje między
stronami. Zdecydowałeś, że przygotujesz prostą ankietę dla agencji modelek i modeli, którą
prowadzi Twój dobry przyjaciel. Kto wie, może nawet uda Ci się go namówić do zmiany strony
internetowej?
Wymyśliłeś, że na pierwszej stronie użytkownik będzie mógł wprowadzić imię oraz określić swoją
płeć, na podstawie której będzie następnie przekierowywany na odpowiednią stronę z pytaniami.
Zadanie Tok postępowania
1. Dodaj nową
stronę do aplikacji
• Otwórz Visual Studio 2008.
• Z menu wybierz File -> New Web Site.
• Z listy Visual Studio installed templates wybierz ASP.NET Web Site.
• Z listy Location wybierz File System, a w polu obok określ lokalizację dla
pliku w dowolnym miejscu na dysku.
• Z listy Language wybierz Visual C#.
• Kliknij OK.
2. Dodaj
kontrolkę do
wpisania imienia,
określenia płci
oraz
przekierowania na
stronę ankiety
• Na stronie napisz Podaj swoje imię:, a następnie z okna Toolbox
przeciągnij kontrolkę TextBox. Ustaw jej właściwość ID na imieTextBox.
• W nowej linii dodaj tekst Podaj płeć:, a następnie kontrolkę
DropDownList. Ustaw jej właściwość ID na plecDropDownList.
• Zaznacz ostatnio dodaną kontrolkę w widoku projektowania strony,
a następnie kliknij ikonę , która pojawi się po jej prawej stronie
(Smart Tag) i wybierz Edit Items (Rys. 13).
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-19
Rys. 13 Okno Listitem Collection Editor
• W oknie ListItem Collection Editor wciśnij przycisk Add.
• W obszarze Properties po prawej stronie w polu Text wpisz Kobieta, a w
polu Value – K.
• Kliknij przycisk Add.
• W obszarze Properties po prawej stronie w polu Text wpisz Mężczyzna,
a w polu Vaule – M.
• Dodaj kontrolkę Button i w oknie Properities w polu Text wpisz
Wyświetl, a w polu (ID) – wyswietlButton. Następnie dwukrotnie ją
kliknij. Visual Studio otworzy edytor kodu strony i umieści kursor
w metodzie wyslijButton_Click. W metodzie dodaj następujący kod:
if (plecDropDownList.SelectedValue=="K")
{Response.Redirect("Kobieta.aspx?imie=" + imieTextBox.Text); }
else if (plecDropDownList.SelectedValue == "M")
{Response.Redirect("Mezczyzna.aspx?imie=" + imieTextBox.Text); }
3. Dodaj nową
stronę do
projektu
zawierającą
pytania dla kobiet
• Wybierz menu Website -> Add Add New Item lub wciśnij Ctrl+Shift+A
lub w oknie Solution Explorer kliknij prawym przyciskiem myszy i
wybierz Add New Item (Rys. 14).
Rys. 14 Okno Add New Item
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-20
• Określ następujące elementy dla nowej strony:
— nazwa: Kobieta.aspx
— język: Visual C#
— opcja Place code in separate file zaznaczona
— opcja Select master page niezaznaczona
4. Pobierz dane
przesłane do
strony przy
pomocy metody
GET
• Do nowej strony dodaj kontrolkę Label. i w oknie Properities w polu (ID) wpisz wyswietlLabel i usuń zwartość pola Text.
• W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio
otworzy edytor kodu strony i umieści kursor metodzie Page_Load.
• Do metody dodaj kod pobierający dane z poprzedniej strony przesłane
w parametrze imie adresu URL:
wyswietlLabel.Text = "Witaj " + Request.QueryString["imie"];
5. Umieść
pytania do ankiety
• W pliku Kobieta.aspx poniżej kontrolki Label dodaj elementy
umożliwiające pobranie informacji od użytkownika serwisu: wpisz E-mail: i dodaj kontrolkę TextBox. Nadaj jej odpowiednią właściwość ID.
• Kolejno dodaj w osobnych wierszach kontrolki TextBox wraz z
poprzedzającymi je informacjami umożliwiające pobranie następujących
danych:
— wzrost
— numer ubrania
— numer buta
— obwód biustu
— talia
— biodra
• Na dole strony dodaj kontrolkę Button i w oknie Properities w polu Text wpisz Wyświetl, a w polu (ID) – wyswietlButton. Następnie dwukrotnie
ją kliknij. W metodzie wyslijButton_Click dodaj następujący kod:
Server.Transfer("Dziekujemy.aspx?imie=" + Request.QueryString["imie"]);
6. Dodaj nową
stronę do
projektu
zawierającą
podziękowania za
wypełnienie
ankiety
• Dodaj nową stronę do projektu. Określ następujące elementy dla nowej
strony:
— nazwa: Dziekujemy.aspx
— język: Visual C#
— opcja Place code in separate file zaznaczona
— opcja Select master page niezaznaczona
• Do nowoutworzonej strony dodaj kontrolkę Label. Określ jej właściwość
ID na wyswietlLabel, natomiast właściwość Text zostaw pustą.
• W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio
otworzy edytor kodu strony i umieści kursor metodzie Page_Load.
• Do metody dodaj kod pobierający dane z poprzedniej strony przesłane
w parametrze imie adresu URL:
wyswietlLabel.Text = Request.QueryString["imie"] +
", dziękujemy za wypełnienie ankiety";
7. Dodaj nową
stronę do
projektu
zawierającą
• Dodaj nową stronę do projektu. Określ następujące elementy dla nowej
strony:
— nazwa: Mezczyzna.aspx
— język: Visual C#
Piotr Bubacz
ITA-103 Aplikacje internetowe
pytania dla
mężczyzn i
pobierz dane
przesłane przy
pomocy metody
GET
—
—
• Do
wpisz
• W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio
otworzy edytor kodu strony i umieści kursor metodzie
• Do
w
wyswietlLabel.Text = "Witaj " + Request.QueryString["imie"];
8. Umieść
pytania do ankiety
• W pliku
umożliwiające pobranie informacji od użytkownika serwisu: wpisz
• Kolejno dodaj w osobnych wierszach kontrolki
z
następujących danych:
—
—
—
—
—
• Na dole strony dodaj kontrolkę
wpisz
kliknij. W meto
Server.Transfer("Dziekujemy.aspx?imie=" +
Request.QueryString["imie"]);
9. Przetestuj
stronę
• Zapisz zmiany i uruchom stronę
swoje imię,
Strona 4-21
— opcja Place code in separate file zaznaczona
— opcja Select master page niezaznaczona
Do nowej strony dodaj kontrolkę Label i w oknie
wpisz wyswietlLabel i usuń zwartość pola Text.
W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio
otworzy edytor kodu strony i umieści kursor metodzie
Do metody dodaj kod pobierający dane z poprzedniej strony
w parametrze imie adresu URL:
wyswietlLabel.Text = "Witaj " + Request.QueryString["imie"];
W pliku Mezczyzna.aspx poniżej kontrolki Labelumożliwiające pobranie informacji od użytkownika serwisu: wpisz
mail: i dodaj kontrolkę TextBox. Nadaj jej odpowiednią właściwość
Kolejno dodaj w osobnych wierszach kontrolki
poprzedzającymi je informacjami umożliwiające pobranie
następujących danych:
— wzrost
— numer ubrania
— numer buta
— obwód klatki
— obwód pasa
Na dole strony dodaj kontrolkę Button i w oknie Properities wpisz Wyślij, a w polu (ID) – wyslijButton. Następnie dwukrotnie
kliknij. W metodzie wyslijButton_Click dodaj następujący kod
Server.Transfer("Dziekujemy.aspx?imie=" +
Request.QueryString["imie"]);
Zapisz zmiany i uruchom stronę Default.aspx. W oknie tekstowym podaj
swoje imię, wybierz płeć, a następnie wciśnij przycisk
Dlaczego zastosowano Server.TransferwyslijButton_Click? Co to umożliwia?
Moduł 4
Wprowadzenie do ASP.NET
i w oknie Properities w polu (ID)
W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio
otworzy edytor kodu strony i umieści kursor metodzie Page_Load.
metody dodaj kod pobierający dane z poprzedniej strony przesłane
wyswietlLabel.Text = "Witaj " + Request.QueryString["imie"];
Label dodaj elementy
umożliwiające pobranie informacji od użytkownika serwisu: wpisz E-. Nadaj jej odpowiednią właściwość ID.
Kolejno dodaj w osobnych wierszach kontrolki TextBox wraz
umożliwiające pobranie
Properities w polu Text astępnie dwukrotnie ją
następujący kod:
. W oknie tekstowym podaj
a następnie wciśnij przycisk Wyświetl.
Server.Transfer w metodzie
Piotr Bubacz Moduł 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-22
Laboratorium rozszerzone
Po ukończeniu poprzedniego zadania postanowiłeś pokazać ankietę Twojemu koledze,
prowadzącemu agencję modeli i modelek. Bardzo spodobał mu się pomysł na nową stronę dla
agencji. Już dawno myślał o takiej ankiecie na swojej stronie, aby ułatwić sobie prowadzenie
rekrutacji i poszerzyć swoją bazę modeli i modelek.
W związku z tym zgodziłeś się przygotować serwis internetowy dla agencji modelek i modeli
„Modelinki”. Twoim zadaniem jest opracowanie wyglądu strony i przygotowanie strony głównej, na
której powinieneś umieścić m.in. link do ankiety. Strona ankiety musi umożliwić pobranie od
każdego chętnego do pracy w charakterze modela następujących informacji:
• imię
• nazwisko
• adres zamieszkania
• telefon
• wiek
• wzrost
• waga
• kolor włosów
• kolor oczu
• rozmiar ubrania
• numer butów
• doświadczenie (wybierane od 1 do 5)
• płeć
Na podstawie płci należy pobrać następujące informacje:
• w przypadku kobiet:
• obwód biustu
• wielkość miseczki
• talia
• biodra
• długość nogi
• w przypadku mężczyzn:
• klatka
• pas
• długość nogi
Na stronie z podziękowaniem za wypełnienie ankiety powinno znaleźć się podsumowanie
podanych w ankiecie informacji. Wszystkie strony aplikacji powinny mieć spójny wygląd.
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 5
Wersja 1
Kontrolki serwerowe Spis treści
Kontrolki serwerowe ............................................................................................................................ 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Przykładowe rozwiązanie ............................................................................................................. 9
Porady praktyczne ..................................................................................................................... 11
Uwagi dla studenta .................................................................................................................... 13
Dodatkowe źródła informacji..................................................................................................... 13
Laboratorium podstawowe ................................................................................................................ 14
Problem 1 (czas realizacji 20 min) .............................................................................................. 14
Problem 2 (czas realizacji 20 min) .............................................................................................. 20
Problem 3 (czas realizacji 10 min) .............................................................................................. 23
Laboratorium rozszerzone ................................................................................................................. 24
Zadanie 1 (czas realizacji 90 min) ............................................................................................... 24
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące kontrolek dostępnych w ASP.NET. Poznasz różnice między kontrolkami serwerowymi HTML a kontrolkami Web. Nauczysz się wykorzystywać nie tylko różne kontrolki serwerowe, ale również walidować wprowadzone dane po stronie klienta lub/i po stronie serwera.
Cel modułu
Celem modułu jest przedstawienie możliwości programowego wykorzystania kontrolek serwerowych oraz prostej walidacji danych po stronie klienta.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• umiał programowo odwoływać się do złożonych kontrolek serwerowych
• potrafił walidować dane wprowadzane po stronie klienta
• umiał wykorzystywać rozbudowane kontrolki, takie jak MultiView i AdRotator
• wiedział co to jest cykl życia strony i w jaki sposób możesz sprawdzić, czy strona jest przesłana po raz pierwszy do klienta
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy języka XHTML.
• znać zasady pracy w środowisku Visual Studio, w szczególności tworzenia stron internetowych
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem do realizacji tego modułu należy zapoznać się z materiałem zawartym w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS” i „Wprowadzenie do ASP.NET”.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-3
Przygotowanie teoretyczne
Przykładowy problem
Posiadamy już wiedzę dotyczącą tworzenia aplikacji internetowych, dodawania prostych kontrolek do strony, dodawania stron do aplikacji oraz przesyłania informacji między stronami. Nadszedł czas na poważniejsze zadania.
Podstawowym problemem, z jakim spotykają się twórcy aplikacji internetowych, jest sprawdzanie poprawności danych wprowadzanych przez użytkownika. Walidację powinniśmy zawsze realizować po stronie serwera, istnieją jednak sytuacje, w których wstępne sprawdzenie danych warto przeprowadzić już po stronie klienta, np. gdy chcemy upewnić się, czy wymagane pola zostały wypełnione lub czy format wprowadzonych danych jest prawidłowy. Możemy to zrealizować przy pomocy własnych skryptów napisanych w JavaScript, jednak najpierw musimy poznać ten język, a najczęściej również różnice w jego interpretacji przez różne przeglądarki. Na szczęście programiście ASP.NET do podstawowej walidacji wystarczy jedynie znajomość kilku kontrolek.
Innym problemem, z jakim możemy się spotkać, jest konieczność prezentowania różnych elementów na stronie w zależności od potrzeb. W module 3 wykorzystaliśmy dwie dodatkowe strony do wyświetlenia ankiety w zależności od płci użytkownika. Na pewno istnieje lepsze rozwiązanie tego problemu.
Podstawy teoretyczne
Kontrolki serwerowe ASP.NET możemy podzielić na dwie grupy: kontrolki Web i kontrolki HTML. Komponentów z tej pierwszej grupy używaliśmy już w module 3. Kontrolki HTML to zwykłe elementy HTML, do których możemy odwoływać się w kodzie strony.
Niezależnie od rodzaju kontrolki, przed przesłaniem do klienta jest ona przekształcana na kod znaczników zgodny ze standardem XHTML. Wygenerowany kod może wyglądać różnie, gdyż ASP.NET stara się dostosować go do możliwości, jakie oferuje przeglądarka użytkownika.
Programista ma wpływ nie tylko na wygląd kontrolki, , ale może również określić pewne jej zachowania, np. która kontrolka będzie aktywna po wywołaniu strony.
Kontrolki HTML
Serwerowe kontrolki HTML definiuje się jak zwykłe elementy HTML, nadając im dodatkowo atrybut runat="Server". W celu identyfikacji kontrolki oraz możliwości programowego odwoływania się do niej należy nadać jej atrybut ID. Kontrolki te muszą być umieszczone w znaczniku <form>, który również musi posiadać atrybut runat="Server".
Serwerowe kontrolki HTML umożliwiają m.in.:
• programowe odwoływanie się do kontrolek z poziomu kodu aplikacji
• obsługę zdarzeń po stronie serwera
• współpracę z walidatorami
• wiązanie właściwości ze źródłem danych
Kontrolki Web
Kontrolki Web, w porównaniu do kontrolek serwerowych HTML, opisują elementy strony na wyższym poziomie abstrakcji. Choć po stronie klienta widoczne są jako standardowe znaczniki HTML, po stronie serwera udostępniają wiele zaawansowanych funkcjonalności.
Podstawowe kontrolki Web
Do podstawowych kontrolek należą:
• Label – wyświetla statyczny tekst
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-4
• TextBox – wyświetla pole tekstowe
• Button – wyświetla przycisk
• LinkButton – wyświetla odnośnik zachowujący się jak przycisk
• ImageButton – wyświetla obrazek, który po kliknięciu myszką działa jak przycisk
• HyperLink – wyświetla odnośnik, który użytkownik może kliknąć aby przenieść się na inną stronę
• DropDownList – wyświetla rozwijaną listę wyboru
• ListBox – wyświetla listę wielokrotnego wyboru
• CheckBox – wyświetla pole wyboru
• CheckBoxList – wyświetla listę złożoną z pól wyboru
• Image – wyświetla obrazek
• ImageMap – wyświetla obrazek z opcjonalnie zdefiniowaną mapą aktywnych obszarów
• Table – wyświetla tabelę
• BulletedList – wyświetla listę numerowaną lub wypunktowaną
• HiddenField – tworzy ukryte pole
• Literal – wyświetla statyczną zawartość
Rozbudowane kontrolki Web
Środowisko ASP.NET udostępnia nie tylko podstawowe kontrolki Web, ale również bardziej złożone komponenty. Przykładem takiej rozbudowanej kontrolki Web jest kontrolka MultiView. Kontrolka ta umożliwia dynamiczne prezentowanie i ukrywanie zawartości przed użytkownikiem. Definiuje ona widoki, reprezentowanych przez kontrolkę View. Tylko jeden widok może być w danej chwili widoczny dla użytkownika. Przykładowo kontrolki MultiView możemy użyć następująco:
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="stronaView" runat="server">
…
</asp:View>
<asp:View ID="produktyView" runat="server">
…
</asp:View>
<asp:View ID="dziekujemyView" runat="server">
…
</asp:View>
</asp:MultiView>
Zmiana aktualnie wyświetlonego widoku możliwa jest po komunikacji z serwerem za pomocą metody SetActiveView.
MultiView1.SetActiveView(stronaView);
Kontrolki MultiView można również zagnieżdżać, tworząc złożone struktury umożliwiające praktycznie dowolne manipulowanie zawartością strony.
Innym przykładem rozbudowanej kontrolki Web jest kontrolka AdRotator. Umożliwia ona wyświetlanie elementów graficznych z odnośnikami (najczęściej reklam) na stronie. AdRotator losowo wybiera grafikę z uprzednio przygotowanej listy. Możliwe jest również śledzenie ilości kliknięć.
Aby skorzystać z kontrolki należy przygotować elementy graficzne oraz odnośniki do zasobów. Następnie należy przygotować plik XML, w którym określimy wcześniej przygotowane informacje, np.:
<Advertisements>
<Ad>
<ImageUrl>~/Adv/Adv1.png</ImageUrl>
<NavigateUrl>http://www.asp.net</NavigateUrl>
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-5
<AlternateText>Strona główna ASP.NET </AlternateText>
</Ad>
<Ad>
<ImageUrl>~/Adv/Adv2.png</ImageUrl>
<NavigateUrl>http://www.codeplex.com</NavigateUrl>
<AlternateText>Projekty OpenSource - CodePlex </AlternateText>
</Ad>
</Advertisements>
Plik XML zawiera predefiniowane atrybuty umieszczone w Tab. 1. Tylko atrybut ImageUrl jest wymagany.
Tab. 1 Atrybuty pliku XML dla kontrolki AdRotator
Atrybut Opis
ImageUrl Adres URL wyświetlanego obrazka.
Height Wysokość obrazka w pikselach.
Width Szerokość obrazka w pikselach.
NavigateUrl Adres URL, do którego zostanie przekierowany użytkownik po kliknięciu na kontrolkę.
AlternateText Tekst wyświetlany w przypadku, kiedy obrazek nie jest dostępny.
Keyword Kategoria dla reklamy. Jest używana w kontrolce AdRotator do filtrowania listy reklam dla określonej kategorii.
Impressions Wartość określająca, jak często reklama jest wyświetlana w stosunku do innych reklam. Im większa wartość, tym większa częstotliwość wyświetlania reklamy. Suma wszystkich wartości nie może przekroczyć 2 047 999 999.
Sprawdzanie poprawności wpisywanych danych
Typowym zadaniem przy projektowaniu stron Web jest walidacja danych wprowadzonych przez użytkownika. Użytkownik może celowo lub przez pomyłkę podać błędne dane, które mogą spowodować niepożądane działanie aplikacji. W ASP.NET są dostępne specjalne kontrolki, które w prosty sposób umożliwiają implementację sprawdzania poprawności wpisanych danych.
Kontrolki sprawdzające poprawność danych wprowadzanych przez użytkownika
Kontrolki do sprawdzania poprawności danych wprowadzanych przez użytkownika nazywane są walidatorami. Walidator jest powiązany z wybraną kontrolką na stronie, która umożliwia wprowadzanie danych przez użytkownika.
Ze względu na różne typy wpisywanych danych, istnieją różne kontrolki sprawdzające. Jedna kontrolka wejściowa może być nadzorowana przez kilka walidatorów (kontrolujących np. czy wprowadzono wartość oraz czy dana wartość jest poprawna). Dodatkowo przygotowano kontrolkę wyświetlającą podsumowanie błędów na stronie.
Każdy walidator posiada następujące właściwości:
• ControlToValidate – ustawia lub zwraca identyfikator kontrolki, którą sprawdza walidator
• Display – ustawia lub zwraca sposób wyświetlania i rezerwowania miejsca na stronie na komunikaty o błędach
• ErrorMessage – ustawia lub zwraca treść komunikatu błędu sprawdzania poprawności umieszczonego w podsumowaniu błędów
• IsValid – ustawia lub zwraca informacje o poprawności weryfikowanych danych
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-6
• Text – ustawia lub zwraca treść komunikatu błędu sprawdzenia poprawności wyświetlanego na stronie
Kontrolka RequiredFieldValidation
W celu sprawdzenia, czy użytkownik wypełnił wymagane pole, wykorzystuje się kontrolkę RequiredFieldValidation:
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="imieStronaTextBox"
ErrorMessage="Pole Imię jest wymagane">*
</asp:RequiredFieldValidator>
Najważniejsze elementy konfiguracji kontrolki to:
• ControlToValidate="imieStronaTextBox" – ID kontrolki do sprawdzenia
• ErrorMessage="Pole Imię jest wymagane" – komunikat pojawiający się w polu podsumowania informujący użytkownika o błędzie
• * – symbol wyświetlany w miejscu walidatora w przypadku nie wpisania wartości w polu
Kontrolka CompareValidator
W celu porównania wartości między sobą, wykorzystuje się kontrolkę CompareValidator. Kontrolki tej używa się m.in. do sprawdzenia wieku użytkownika lub porównywania wprowadzonych danych ze zdefiniowaną stałą.
Zachowanie kontrolki zależy od następujących właściwości:
• ValueToCompare – zawiera stałą, z jaką porównywana jest wartość wprowadzona przez użytkownika
• ControlToCompare – zawiera ID kontrolki, z jaką ma być porównana wartość w sprawdzanej kontrolce
• Typ – definiuje typ porównywanych danych, możliwe typy danych:
• String (domyślny) – typ łańcuchowy
• Integer – typ całkowity
• Double – typ zmiennoprzecinkowy
• Currency – typ waluty
• Date – typ daty
• Operator – określa sposób porównania:
• Equal– sprawdza, czy wartości są sobie równe (ustawione domyślnie)
• NotEqual – sprawdza, czy wartości są różne
• GreaterThan– sprawdza, czy jedna wartość jest większa od drugiej
• GreaterThanEqual – sprawdza, czy jedna wartość jest większa lub równa drugiej
• LessThan – sprawdza, czy jedna wartość jest mniejsza od drugiej
• LessThanEqual – sprawdza, czy jedna kontrolka jest mniejsza lub równa drugiej
• DataTypeCheck – sprawdza poprawność typów danych
Przykładowo by sprawdzić, czy podana ilość lat jest większa niż 18, możemy użyć następującej definicji:
<asp:CompareValidator runat="server" id="CompareValidator1"
ControlToValidate=" wiekTextBox " ValueToCompare="18"
Operator="GreaterThanEqual" Type="Integer"
ErrorMessage="Musisz mieć co najmniej 18 lat."> *
</asp:CompareValidator>
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-7
Kontrolka RangeValidator
W celu sprawdzenia, czy podana wartość mieści się w określonym zakresie, wykorzystuje się kontrolkę RangeValidator. Najważniejsze właściwości kontrolki to:
• MinimumValue – wartość minimalna zakresu
• MaximumValue – wartość maksymalna zakresu
• Type – typ danych
Dla przykładu by sprawdzić, czy podana liczba mieści się w zakresie od 1 do 5, możemy skonfigurować walidator następująco:
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="ocenaStronaTextBox"
ErrorMessage="Podaj liczbę w przedziale od 1 do 5" MinimumValue="1"
MaximumValue="5" Type="Integer">*
</asp:RangeValidator>
Kontrolka RegularExpressionValidator
W celu sprawdzenia, czy wprowadzona wartość pasuje do określonego wzorca, wykorzystuje się kontrolkę RegularExpressionValidator. Kontrolki tę używa się do sprawdzania, czy poprawnie podano kod pocztowy, adres mailowy, numer NIP itp. Do sprawdzenia poprawności należy podać w atrybucie ValidationExpression wyrażenie regularne (ang. regular
expression).
Przykładowo walidator zdefiniowany jak poniżej może zostać użyty do sprawdzenia, czy użytkownik wprowadził w polu tekstowym poprawny adres e-mail:
<asp:RegularExpressionValidator ID="RegularExpressionValidator2"
runat="server" ControlToValidate="emailProduktyTextBox"
ErrorMessage="Podaj poprawny adres e-mail"
ValidationExpression= "\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*
</asp:RegularExpressionValidator>
Podczas projektowania w Visual Studio mamy możliwość wyboru gotowego wyrażenia regularnego spośród najczęściej używanych (Rys. 2).
Rys. 2 Edytor wyrażeń regularnych
Kontrolka CustomValidator
W celu sprawdzenia bardziej złożonych warunków wykorzystuje się kontrolkę CustomValidator. By sprawdzić poprawność danych, wywołuje ona funkcje dostarczone przez programistę.
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-8
Kontrolka ValidationSummary
Do wyświetlenia podsumowania błędów na stronie wykorzystuje się kontrolkę ValidationSummary. Wyświetla ona komunikaty zawarte w atrybutach ErrorMessage walidatorów, które wykryły błędy w nadzorowanych kontrolkach.
Przykład:
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
HeaderText="Błędy na stronie:" ShowSummary="true"
DisplayMode="BulletList"/>
Zapamiętywanie stanu kontrolki
Przeglądając kod HTML wygenerowany na podstawie formularza ASP.NET nie sposób przeoczyć ukrytego pola __VIEWSTATE, które może wyglądać tak:
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJNzgzNDMwNTMzZGQlb8soeikaTu0we7QLkZItEc5wTQ==" />
ViewState można przetłumaczyć jako stan strony. Przechowuje on informację dotyczące umieszczonych na niej kontrolek, np. zawartość pola tekstowego czy indeks listy z wynikami wyszukiwania.
ViewState domyślnie jest zapamiętywany w kodzie strony. Przy dużej liczba kontrolek na stronie może to prowadzić do znacznego zwiększenie rozmiaru dokumentu HTML przesyłanego do klienta. Należy również wiedzieć, że pole to nie jest szyfrowane, a jedynie kodowane przy pomocy Base64. Za pomocą odpowiednich aplikacji można podejrzeć jego zawartość.
Na szczęście ViewState można wyłączyć dla wybranych stron lub kontrolek, korzystając z atrybutu EnableViewState dyrektywy @Page lub właściwości o tej samej nazwie.
Wykorzystanie zdarzeń związanych ze stroną
W module 3 poznaliśmy zdarzenia związane z interakcją użytkownika z kontrolkami. Wspomnieliśmy, że istnieje również grupa zdarzeń związanych z aplikacją oraz stroną. W tym miejscu przyjrzymy się zdarzeniom związanym ze stroną.
W momencie, gdy użytkownik zażąda wyświetlenia wybranego formularza ASP.NET, następuje seria zdarzeń związanych ze stroną. Występują one zawsze w tej samej kolejności, która jest opisywana jako cykl życia strony.
Do najważniejszych zdarzeń związanych z cyklem życia strony należą:
1. Init – jest wywoływane, gdy strona jest inicjowana. 2. Load – jest wywoływane, gdy kontrolki na stronie zostały utworzone i zainicjalizowane. 3. Zdarzenia kontrolek – są wywoływane np. w przypadku zmiany wartości na liście lub
kliknięcia przycisku. 4. Unload – jest wywoływane po przesłaniu kodu HTML do klienta, gdy obiekt strony jest
wyładowywany z pamięci.
Zdarzenia te następują po sobie w takiej kolejności, w jakiej zostały wymienione.
W ASP.NET formularz jest zaprojektowany do wysyłania informacji do strony w celu jej przetwarzania. Proces nazywa się komunikacja zwrotną (ang. postback). Komunikacja zwrotna może wystąpić przy określonym działaniu użytkownika. Standardowo inicjują ją kontrolki przycisków, np. Button lub LinkButton. Możliwe jest również przesłanie strony po interakcji z innymi kontrolkami – w tym celu należy ustawić właściwość AutoPostBack. Dla przykładu jeśli chcemy, aby zmiana w liście rozwijanej spowodowała przesłanie strony do serwera, należy użyć następującej definicji:
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-9
<asp:DropDownList ID="plecDropDownList" runat="server" AutoPostBack="True">
<asp:ListItem Value="K">Kobieta</asp:ListItem>
<asp:ListItem Value="M">Mężczyzna</asp:ListItem>
</asp:DropDownList>
Po stronie serwera będziemy mogli wykonać kod np. w metodzie obsługi zdarzenia SelectedIndexChanged obiektu listy.
Czasem zachodzi potrzeba wykrycia, czy strona jest ładowana po raz pierwszy. Jest to ważne m.in. ze względu na potrzebę inicjalizacji wartości kontrolek przy pierwszym przesłaniu ich do klienta. W kolejnych żądaniach zależy nam już tylko na sprawdzeniu tego, co użytkownik zmienił na stronie.
W celu sprawdzenia, czy strona jest po raz pierwszy przesłana do klienta, należy użyć właściwości IsPostBack, zwracającej wartość true kiedy strona jest po raz kolejny wysyłana do klienta (po komunikacji zwrotnej) lub false, kiedy jest przesyłana do niego po raz pierwszy. Przykład wykorzystania:
private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack) {
// ten kod wykona się tylko przy pierwszym wysyłaniu do klienta
}
// ten kod wykona się przy każdym żądaniu klienta
}
Podsumowanie
W tym rozdziale przedstawione zostały informacje dotyczące kontrolek serwerowych a ASP.NET. Dowiedziałeś się, jak używać rozbudowanych kontrolek tj. MulitView i AdRotator oraz poznałeś zasady pracy z kontrolkami umożliwiającymi walidację danych. Dodatkowo wiesz już, jak wygląda cykl życia strony i w jaki sposób możesz sprawdzić, czy strona jest po raz pierwszy przesyłana do klienta.
Przykładowe rozwiązanie
Wykorzystywanie osadzonych kontrolek MulitView
Zobaczmy, jak można wykorzystać zaawansowane kontrolki ASP.NET do rozwiązania typowego problemu, z jakim możemy się spotkać w pracy programisty aplikacji Web. W tym celu posłużymy się bardziej rozbudowanym przykładem, w którym osadzimy kilka kontrolek MultiView w sobie.
Wyobraźmy sobie, że chcemy zaprojektować ankietę, która posiada część wspólną i część zależną np. od wybranego elementu na stronie. Przykładowo na podstawie wybranej płci chcemy zadać odpowiednie pytania. Dodatkowo chcemy mieć możliwość wyświetlenia podsumowania wpisanych przez użytkownika informacji.
Zacznijmy od idei rozwiązania. Głównymi elementami naszej strony są: ankieta i podsumowanie. W ankiecie na podstawie wybranej z listy rozwijanej płci chcemy wyświetlić odpowiednie pytania. Szkic kontrolek prezentuje Rys. 3.
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-10
Rys. 3 Szkic kontrolek
Tworzenie strony rozpoczynamy od zewnętrznej kontrolki MulitView. Dodajemy do niej dwie kontrolki View o ID odpowiednio: Ankieta i Podsumowanie:
<asp:MultiView ID="Multiview1" runat="server">
<asp:View ID="Ankieta" runat="server">
</asp:View>
<asp:View ID="Podsumowanie" runat="server">
</asp:View>
</asp:MultiView>
Następnie do kontrolki o ID="Ankieta" dodajemy listę rozwijaną umożliwiającą określenie płci. Dodatkowo chcemy zapewnić, aby po zmianie wyświetlanej wartości nastąpiło wysłanie strony do serwera i zmiana wyświetlanego widoku. Aby to umożliwić musimy określić właściwość AutoPostBack="True":
<asp:DropDownList ID="plecDropDownList" runat="server" AutoPostBack="True">
<asp:ListItem Value="K">Kobieta</asp:ListItem>
<asp:ListItem Value="M">Mężczyzna</asp:ListItem>
</asp:DropDownList>
Dodajmy również zagnieżdżoną kontrolkę MultiView zawierającą odpowiednie widoki dla kobiet i dla mężczyzn:
<asp:MultiView ID="MultiView2" runat="server">
<asp:View ID="Kobieta" runat="server">
Pytania dla kobiet
</asp:View>
<asp:View ID="Mezczyzna" runat="server">
Pytania dla mężczyzn
</asp:View>
</asp:MultiView>
Teraz, aby możliwe było wybranie odpowiedniego widoku w kontrolce MultiView2, musimy napisać metodę obsługi zdarzenia SelectedIndexChanged kontrolki plecDropDownList. Aby ją dodać, należy w oknie Properties wybrać ikonę Events, a następnie dwukrotnie kliknąć SelectedIndexChanged. Do metody należy dodać następujący kod:
if (plecDropDownList.SelectedValue=="K") {
MultiView2.SetActiveView(Kobieta);
}
else if (plecDropDownList.SelectedValue == "M") {
MultiView2.SetActiveView(Mezczyzna);
}
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-11
Teraz musimy zapewnić, że przy pierwszym przesłaniu strony do klienta zostanie wybrany widok ankiety (MultiView1) oraz części przeznaczonej dla kobiet (ze względu na domyślną wartość wybraną w liście rozwijanej). W tym celu do metody Page_Load należy dodać następujący kod:
if (!IsPostBack) {
Multiview1.SetActiveView(Ankieta);
MultiView2.SetActiveView(Kobieta);
}
Na koniec musimy jeszcze dodać przycisk, który wyśle ankietę do serwera. W metodzie obsługi zdarzenia Click zmienimy widok na Posumowanie:
Multiview1.SetActiveView(Podsumowanie);
Możemy teraz uruchomić stronę i sprawdzić, czy wszystko działa jak należy.
Losowe wyświetlanie reklam na stronie
Często zachodzi potrzeba wyświetlania na stronie reklam naszych produktów bądź też reklam prowadzących do innych witryn. W ASP.NET możemy w tym celu wykorzystać kontrolkę AdRotator. Do poprawnego działania wymaga ona co najmniej podania adresu URL obrazka, który ma zostać wyświetlony w charakterze reklamy. Dodatkowo możemy sprecyzować inne informacje. Wszystkie wymagane dane umieszczamy w pliku XML o dowolnej nazwie, np. adv.xml. Przykład zawartości pliku:
<Advertisements>
<Ad>
<ImageUrl>~/Adv/Adv1.png</ImageUrl>
<NavigateUrl>http://www.asp.net</NavigateUrl>
<AlternateText>Strona główna ASP.NET </AlternateText>
</Ad>
</Advertisements>
Zarówno adres URL obrazka (ImageUrl), jak i miejsca docelowego (NavigateUrl), do którego zostanie przeniesiony użytkownik po kliknięciu reklamy, może być względny lub bezwzględny. W celu zapewnienia zgodności z XHTML 1.0 należy również zdefiniować tekst zastępczy (AlternateText), który będzie wyświetlany przez przeglądarkę użytkownika podczas ładowania obrazka lub gdy nie zostanie on odnaleziony.
Porady praktyczne
Używanie kontrolek
• Staraj się nadawać kontrolkom znaczące nazwy, np. WyslijButton zamiast Button1. Ułatwi to Tobie i innym programistom zrozumienie kodu i przeznaczenia poszczególnych elementów na stronie.
• Wielu programistów do nazw kontrolek dodaje ich typ, np. w formie przyrostka. W ten sposób pisząc kod mogą oni szybko zorientować się, do jakiego rodzaju elementów się odwołują. Możliwość szybkiego określenia typu kontrolki jest szczególnie ważna, gdy korzysta się w Visual Studio z okna Document Outline, przedstawiającego hierarchię elementów na stronie. Zdarza się również, że programiści w nazwach kontrolek stosują tzw. notację węgierską, czyli prefiksują je skrótem właściwym dla typu elementu, np. „btn” dla przycisków lub „lbl” dla etykiet. Dzięki temu kontrolki tego samego rodzaju są wyświetlane jedna po drugiej na liście prezentowanej przez dostępny w Visual Studio mechanizm autouzupełniania. Powinieneś rozważyć stosowanie jednej z tych konwencji przy nazywaniu elementów.
• Najlepiej nadawaj kontrolkom nazwy tuż po wstawieniu ich na stronę. Visual Studio wykorzystuje właściwość ID m.in. do automatycznego generowania nazw dla metod obsługi
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-12
zdarzeń. Jeśli zmienisz identyfikator kontrolki, nazwy tych metod nie zostaną zaktualizowane, zaś ich ręczna zmiana może być kłopotliwa, gdyż wymaga przeróbek w kilku miejscach.
• Kontrolek HTML używaj wtedy, gdy chcesz mieć większą kontrolę nad kodem generowanym dla klienta. Pamiętaj, że najważniejsze z nich mają swoje odpowiedniki wśród kontrolek Web, które oferują większe możliwości i bardziej abstrakcyjny model programowania. Jeżeli nie jesteś pewien, jakiego rodzaju kontrolkę wybrać, korzystniej będzie zdecydować się na kontrolkę Web.
• By móc odwoływać się do wybranego elementu HTML w kodzie po stronie serwera, musisz nadać mu atrybut runat="Server" oraz unikatowe ID. Jeśli zapomnisz o pierwszym z atrybutów, wartość ID będzie traktowana wyłącznie jako identyfikator elementu w wynikowym dokumencie HTML, w efekcie będziesz mógł odwoływać się do niego jedynie w kodzie JavaScript wykonywanym po stronie klienta.
• W kontrolkach DropDownList oraz CheckBoxList staraj się dla każdego elementu listy określić nie tylko właściwość Text, ale również Value. Dzięki temu w kodzie będziesz mógł odwoływać się do nich nie polegając na tym, jak są ułożone lub wyświetlane użytkownikowi.
• Kontrolki inicjujące komunikację zwrotną z serwerem, takie jak Button lub LinkButton, mogą być użyte w połączeniu z ASP.NET AJAX do wysyłania żądań asynchronicznych.
• W kontrolce MultiView ustalając widoczną kontrolkę używaj metody SetActiveView i nazwy kontrolki View, a nie właściwości ActiveViewIndex.
• Kontrolkę AdRotator można wykorzystać nie tylko do wyświetlania losowych banerów reklamowych – równie dobrze mogą to być zwykłe obrazki.
• Jeśli na stronie używasz kontrolki AdRotator i chcesz, by wynikowy dokument był zgodny ze standardem XHTML, powinieneś dla każdego wyświetlanego obrazka określić właściwość AlternateText.
Walidacja danych
• Walidację danych po stronie klienta powinieneś stosować jedynie w celu ograniczenia ruchu do serwera, by w ten sposób zmniejszyć koszty utrzymania aplikacji i zwiększyć czas jej odpowiedzi w przypadku wprowadzenia przez użytkownika nieprawidłowych informacji. Po otrzymaniu danych po stronie serwera powinieneś zawsze walidować je ponownie. Użytkownik może stosunkowo łatwo obejść zabezpieczenia po stronie klienta i wymusić lub upozorować komunikację zwrotną. Jeśli nie zabezpieczysz aplikacji po stronie serwera, może ona paść ofiarą groźnych ataków, takich jak SQL Injection czy XSS (ang. Cross Site Scripting).
• Zdecydowana większość walidatorów wymaga, abyś określił ich właściwość ControlToValidate. Wyjątkiem jest CustomValidator, który może służyć do sprawdzania poprawności danych wprowadzonych w wielu różnych kontrolkach.
• Korzystając z CompareValidator do sprawdzenia poprawności danych po stronie klienta powinieneś pamiętać, że format liczb zmiennoprzecinkowych, daty oraz wartości walutowych zależy od ustawień przeglądarki lub systemu operacyjnego użytkownika. Dane uznane za poprawne po stronie klienta mogą w związku z tym spowodować błąd walidacji po stronie serwera.
• Pamiętaj, że gdy korzystasz z walidacji po stronie klienta, wyrażenie regularne używane do sprawdzania poprawności danych przez RegularExpressionValidator musi być zrozumiałe zarówno dla silnika wyrażeń regularnych używanego po stronie serwera, jak i tego, który jest dostępny w przeglądarce użytkownika. Powinieneś zatem ograniczyć się do pewnego podzbioru języka wyrażeń, który jest interpretowany tak samo przez najpopularniejsze przeglądarki oraz klasy do obsługi wyrażeń regularnych dostępne w .NET.
Obsługa zdarzeń związanych ze stroną
• Każde zdarzenie związane ze stroną możesz obsłużyć na przynajmniej dwa sposoby. Pierwszym, bardziej popularnym, jest przygotowanie metody o odpowiedniej sygnaturze.
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-13
Metoda taka powinny mieć zdefiniowany typ wartości zwracanej jako void, przyjmować dwa parametry – pierwszy typu object, drugi typu EventArgs – oraz posiadać nazwę utworzoną poprzez dodanie do nazwy zdarzenia przedrostka „Page_”. Przykładem tak zdefiniowanej metody jest generowana automatycznie przez Visual Studio metoda Page_Load, która służy do obsługi zdarzenia Load strony. Ten sam efekt możesz uzyskać przysłaniając (ang. override) metodę wirtualną, której nazwa utworzona jest poprzez dodanie do nazwy zdarzenia przedrostka „On”, np. OnLoad. Musisz wówczas pamiętać, by w jej ciele wywołać odpowiednią metodę z klasy bazowej, korzystając ze słowa kluczowego base.
• Za automatyczne kojarzenie metod ze zdarzeniami strony odpowiada mechanizm zwany AutoEventWireup. Wiąże się on z pewnym narzutem, dlatego twórcy ASP.NET udostępnili możliwość wyłączenia go z poziomu dyrektywy @Page. Pamiętaj, że jeśli tak postąpisz, będziesz musiał samodzielnie kojarzyć zdarzenia strony z odpowiednimi funkcjami obsługi lub przysłaniać odpowiadające im metody wirtualne. Zazwyczaj nie ma potrzeby wyłączania mechanizmu AutoEventWireup.
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• rozumiesz jak działają kontrolki serwerowe w ASP i w jaki sposób możesz się programowo do nich odwołać
• umiesz tworzyć zaawansowane strony internetowe bazujące na kontrolce MultiView i wielu widokach
• wiesz jak sprawdzać poprawność danych wprowadzonych przez użytkownika
• wiesz jak wygląda cykl życia strony oraz w jaki sposób sprawdzić, czy strona jest po raz pierwszy wysyłana do użytkownika
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. ASP.NET QuickStart Tutorials, http://quickstarts.asp.net/QuickStartv20/aspnet
Na stronie w sekcji „ASP.NET Control Reference” znajdziesz podstawowe informacje i przykłady użycia wszystkich kontrolek dostępnych w ASP.NET.
2. Walkthrough: Displaying and Tracking Advertisements with the AdRotator Control, http://msdn.microsoft.com/en-us/library/azwad69k.aspx
Na stronie zawarty jest opis możliwości wykorzystania kontrolki AdRotator, ze szczególnym uwzględnieniem możliwości śledzenia ilości kliknięć kontrolki.
3. MultiView and View Web Server Controls Overview, http://msdn.microsoft.com/en-
us/library/ms227665.aspx
Na stronie zawarty jest opis kontrolki MultiView oraz przykłady kodu.
4. Michał Jankowski, Walidacja danych w ASP.NET, http://www.codeguru.pl/article-635.aspx
Encyklopedyczny przegląd walidatorów w języku polskim .
5. Anand Narayanaswamy, Performing Validations with ASP.NET, http://www.codeguru.com/Csharp/.NET/net_asp/controls/article.php/c5349
Dwuczęściowy artykuł zawierający dużo praktycznych przykładów wykorzystania walidatorów.
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-14
Laboratorium podstawowe
Problem 1 (czas realizacji 20 min)
Jesteś właścicielem niewielkiej firmy komputerowej wykonującej różnego rodzaju zlecenia. Dzisiaj przyszedł do Ciebie prezes dużego koncernu produkującego rowery i zaproponował, abyś przygotował ankietę dla ich sklepu internetowego. Jeśli się postarasz, to może otrzymasz super kontrakt na przygotowanie i wdrożenie całej witryny sklepu.
Z jednej strony ma to być ankieta dla nowych klientów, planujących dopiero zakup roweru, z drugiej zaś firma myśli o osobach, które już nabyły rower i chciałaby ich zachęcić do wspólnego podróżowania, tworząc społeczność użytkowników jej produktów. W tym celu musi pozyskać informację o preferencjach tej grupy klientów.
W ankiecie dla potencjalnego klienta powinieneś pobrać następujące informacje:
• imię
• płeć
• wiek
• adres e-mail
• telefon
• adres zamieszkania
• wzrost
• rama roweru, do wyboru:
• damska
• męska
• nie ma znaczenia
• marka, do wyboru (można zaznaczyć kilka odpowiedzi):
• Cateye
• Giant
• Kenda
• Kross
• nie ma znaczenia
• rodzaj roweru, do wyboru:
• górski
• miejski
• szosowy
• BMX
• dziecięcy
• nie wiem
• kwota planowanych wydatków
• preferowany sposób kontaktu
W ankiecie dla osób już posiadających rower firmę interesują takie dane, jak:
• imię
• płeć
• wiek
• adres e-mail
• telefon
• adres zamieszkania
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-15
• rodzaj posiadanego roweru:
• górski
• miejski
• szosowy
• BMX
• dziecięcy
• nie wiem
• data ostatniej wycieczki
• data następnej wycieczki
• ilość kilometrów średnio na jednej wycieczce
• poziom umiejętności
• preferowany sposób kontaktu
Zadanie Tok postępowania
1. Utwórz nową stronę w Visual Web Developer 2008 Express Edition
• Otwórz Visual Web Developer 2008 Express Edition.
• Z menu wybierz File -> New Web Site.
• Z listy Visual Studio installed templates wybierz ASP.NET Web Site.
• Z listy Location wybierz File System, a w polu obok określ lokalizację dla pliku w dowolnym miejscu na dysku.
• Z listy Language wybierz Visual C#.
• Kliknij OK.
2. Wstaw linki do ankiet na stronie głównej aplikacji
• Na stronie Default.aspx wstaw dwa odnośniki wskazujące na ankietę dla nowych klientów planujących zakup nowego roweru oraz ankietę dla osób już posiadających rowery. W tym celu w widoku Source dodaj:
<a href="Ankieta.aspx?view=nowy">Ankieta dla nowych klientów</a>
<br />
<a href="Ankieta.aspx?view=wycieczki">Ankieta dla osób
posiadających rower</a>
3. Dodaj stronę Ankieta.aspx do projektu.
• Wybierz Website -> Add New Item.
• Z listy Visual Studio installed templates wybierz Web Form.
• W polu Name wpisz Ankieta.aspx.
• Z listy Language wybierz Visual C#.
• Upewnij się, że opcja Place code in separate file jest zaznaczona.
• Upewnij się, że opcja Select master page nie jest zaznaczona.
• Kliknij OK.
4. Dodaj główną kontrolkę MultiView
• Do formularza dodaj kontrolkę MultiView, a następnie w oknie Properties określ właściwość ID na mainMultiView.
• Dodaj do kontrolki MultiView dwie kontrolki View, nazywając je po kolei: ankietaGlowna i podsumowanie.
Piotr Bubacz ITA-103 Aplikacje Internetowe
5. Przygotuj wspólną początkową część obu ankiet
• W kontrolce Enowej linii
• W dodanej linii nDropDownListplecDropDownListItems
• Wciśnij przycisk
—
—
• Wciśnij przycisk
—
—
• Wciśnij przycisk
—
—
—
• Wciśnij
• Do formularza dodaj kontrolki użytkownika następujących danych:
—
—
—
—
—
—
—
6. Dodaj kontrolkę MultiView
• W kontrolce dodaj kontrolkę
• Dodaj do kontrolki kolei:
Strona 5-16
Zauważ, że można wyłonić część wspólną obydwu ankiet
W kontrolce ankietaGlowna w widoku Design nter, a następnie umieść kontrolkę TextBox i
nowej linii. W oknie Properties określ właściwość
W dodanej linii na formularzu napisz Płeć:DropDownList. W oknie Properties określ właplecDropDownList. Kliknij Smart Tag dodanej kontrolki i wybierz Items.
Wciśnij przycisk Add, a następnie w obszarze ListItem
— w polu Text wpisz Kobieta — w polu Value wpisz K
Wciśnij przycisk Add, a następnie w obszarze ListItem properities
— w polu Text wpisz Mężczyzna — w polu Value wpisz M
Wciśnij przycisk Add, a następnie w obszarze ListItem properities
— w polu Text wpisz Nie podaję — w polu Value wpisz N — w polu Selected wybierz True
Wciśnij OK.
Do formularza dodaj kontrolki TextBox umożliwiające pobranie od użytkownika następujących danych:
— e-mail (ID: emailTextBox) — telefon (ID: telTextBox) — ulica (ID: ulicaTextBox) — numer domu (ID: domTextBox) — numer mieszkania (ID: mieszTextBox) — kod pocztowy (ID: kodTextBox) — miejscowość (ID: miejscTextBox)
W kontrolce View o ID=AnkietaGlowna poniżej dodanych kontrolek dodaj kontrolkę MultiView i nazwij ją ankietaMultiView
Dodaj do kontrolki MultiView dwie kontrolki Viewkolei: nowyView i wycieczkiView.
Moduł 5 Kontrolki serwerowe
ą obydwu ankiet.
napisz Imię: i naciśnij i ponownie przejdź do
ość (ID) na imieTextBox.
Płeć: i umieść kontrolkę określ właściwość (ID) na
dodanej kontrolki i wybierz Edit
ListItem properities:
ListItem properities:
ListItem properities:
umożliwiające pobranie od
poniżej dodanych kontrolek ankietaMultiView.
View, nazywając je po
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-17
7. Dodaj kontrolki do kontrolki View - Nowy
• Ustaw kursor wewnątrz kontrolki View o ID="nowyView".
• Wpisz Wzrost: i w nowej linii dodaj kontrolkę TextBox o ID="wzrostTextBox".
• Wpisz Rama roweru: i dodaj kontrolkę DropDownList o ID="ramaDropDownList". Kliknij Smart Tag i wybierz Edit Items.
• Dodaj elementy o następujących właściwościach, po czym zamknij okno:
— tekst wyświetlany: Damska, wartość: D — tekst wyświetlany: Męska, wartość: M — tekst wyświetlany: Nie ma znaczenia, wartość: N, zaznaczenie
• Wpisz Marka: i dodaj kontrolkę ListBox o ID="markaListBox". Kliknij Smart Tag i wybierz Edit Items.
• Dodaj elementy o następujących właściwościach, po czym zamknij okno:
— tekst wyświetlany: Cateye, wartość: C — tekst wyświetlany: Giant, wartość: G — tekst wyświetlany: Kenda, wartość: Ke — tekst wyświetlany: Kross, wartość: Kr — tekst wyświetlany: Nie ma znaczenia, wartość: N, zaznaczenie
• Wpisz Rodzaj roweru: i dodaj kontrolkę ListBox o ID="rodzajListBox". Kliknij Smart Tag i wybierz Edit Items.
• Dodaj elementy o następujących właściwościach, po czym zamknij okno:
— tekst wyświetlany: Górski, wartość: G — tekst wyświetlany: Miejski, wartość: M — tekst wyświetlany: Szosowy, wartość: S — tekst wyświetlany: BMX, wartość: B — tekst wyświetlany: Dziecięcy, wartość: D — tekst wyświetlany: Nie wiem, wartość: N, zaznaczenie
• Wpisz Kwota planowanych wydatków: i dodaj kontrolkę RadioButtonList o ID="cenaRadioButtonList". Dodaj do listy elementy o następujących właściwościach:
— tekst wyświetlany: Nie ma znaczenia, wartość: 0, zaznaczenie — tekst wyświetlany: do 500 zł, wartość: 5 — tekst wyświetlany: 500 – 1000 zł, wartość: 10 — tekst wyświetlany: 1000 - 1500, wartość: 15 — tekst wyświetlany: pow. 1500, wartość: 20 — tekst wyświetlany: Zakres:, wartość: 1
• Poniżej kontrolki cenaRadioButtonList wpisz od: i dodaj kontrolkę TextBox o ID="odTextBox", a następnie w tej samej linii wpisz do: i dodaj kontrolkę TextBox o ID="doTextBox".
Piotr Bubacz ITA-103 Aplikacje Internetowe
8. Dodaj kontrolki do kontrolki View Stary
• Ustaw kursor
• Wpisz owła
—
—
—
—
—
—
• Wpisz ID="
• Wpisz ID="
• Wpisz TextBox
• Wpisz ID="wła
—
—
—
9. Dodaj wspólną część końcową
• Poniżej kontrolki Preferowanyowła
—
—
—
• Poniżej dodaj kontrolkę Wyślij
10. Dodaj podsumowanie ankiety
• W kontrolce Dziękujemy za wypełnienie ankietygłównej.
Strona 5-18
Ustaw kursor wewnątrz kontrolki View o ID="wycieczkiView
Wpisz Rodzaj posiadanego roweru: i dodaj kontrolkę o ID="posiadaListBox". Dodaj do listy elementy owłaściwościach:
— tekst wyświetlany: Górski, wartość: G — tekst wyświetlany: Miejski, wartość: M — tekst wyświetlany: Szosowy, wartość: S — tekst wyświetlany: BMX, wartość: B — tekst wyświetlany: Dziecięcy, wartość: D — tekst wyświetlany: Nie wiem, wartość: N, zaznaczenie
Wpisz Data ostatniej wycieczki i dodaj poniżej kontrolkę ID="ostatniaCalendar".
Wpisz Data następnej wycieczki: i dodaj poniżej kontrolkę ID="nastepnaCalendar".
Wpisz Ilość kilometrów średnio na jednej wycieczce:TextBox o ID="kmTextBox".
Wpisz Poziom umiejętności: i dodaj kontrolkę ID="poziomDropDownList". Dodaj do listy elementy owłaściwościach:
— tekst wyświetlany: Początkujący, wartość: P — tekst wyświetlany: Średniozaawansowany, wartość— tekst wyświetlany: Zaawansowany, wartość: Z
Poniżej kontrolki ankietaMultiView w nowym wierszu Preferowany rodzaj kontaktu: i dodaj kontrolkę o ID="kontaktCheckBoxList". Dodaj do listy elementy owłaściwościach:
— tekst wyświetlany: E-Mail, wartość: E — tekst wyświetlany: Telefon, wartość: T — tekst wyświetlany: Osobisty, wartość: O
Poniżej dodaj kontrolkę Button i w oknie Properities Wyślij, a w polu (ID) – wyslijButton.
W kontrolce View o ID="Podsumowanie" w widoku Dziękujemy za wypełnienie ankiety i wstaw głównej.
Odnośniki do stron projektu można szybko dodawać przeciągając dany plik z okna Solution Explorer.
Moduł 5 Kontrolki serwerowe
wycieczkiView".
i dodaj kontrolkę ListBox elementy o następujących
, zaznaczenie
i dodaj poniżej kontrolkę Calendar o
i dodaj poniżej kontrolkę Calendar o
Ilość kilometrów średnio na jednej wycieczce: i dodaj kontrolkę
i dodaj kontrolkę DropDownList o elementy o następujących
wartość: S Z
w nowym wierszu wpisz i dodaj kontrolkę CheckBoxList
elementy o następujących
Properities w polu Text wpisz
w widoku Design napisz wstaw odnośnik do strony
Odnośniki do stron projektu można szybko dodawać przeciągając dany
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-19
11. Dodaj kod umożliwiający wybranie odpowiedniej kontrolki View w zależności od parametru wywołania strony
• W widoku Design dwukrotnie kliknij formularz lub otwórz plik Ankieta.aspx.cs.
• W metodzie Page_Load dodaj kod sprawdzający, czy strona nie jest po komunikacji zwrotnej. Jeśli nie, to prezentowany jest pierwszy widok kontrolki mainMultiView oraz, w zależności od parametru wywołania, odpowiedni widok kontrolki ankietaMultiView:
if (!IsPostBack) {
mainMultiView.SetActiveView(ankietaGlowna);
if (Request.QueryString["view"] == "nowy")
ankietaMultiView.SetActiveView(nowyView); else if (Request.QueryString["view"] == "wycieczki")
ankietaMultiView.SetActiveView(wycieczkiView);
else Response.Redirect("~/Default.aspx");
}
12. Dodaj obsługę wysłania wypełnionej ankiety do serwera
• Dwukrotnie kliknij kontrolkę Button o ID="wyslijButton". Visual Studio otworzy edytor kodu strony i umieści kursor w metodzie wyslijButton_Click. Do metody dodaj kod aktywujący widok Podsumowanie w kontrolce o ID="mainMultiView":
mainMultiView.SetActiveView(podsumowanie);
13. Test działania strony
• Zapisz zmiany i przetestuj działanie strony
Piotr Bubacz ITA-103 Aplikacje Internetowe
Problem 2 (czas realizacji 20 min)
Ponieważ chciałbyś się maksymalnie wykazaćformularzy przed błędnym wypełnieniem pól, jak również określając niektóre pola jako wymagane. Bez tych informacji zbieranie danych w ankiecie raczej nie ma sensu.wymagane:
• imię
• adres e-mail
Sprawdzenie poprawności wpisanych danych
• adres e-mail (poprawny adres e
• telefon (same cyfry w formacie 1234567890)
• wzrost (liczba od 50 do 250 cm)
• cena od i do (zarówno wartość, jak i porównanie wpisanych wartości od<do)
Zadanie Tok postępowania
1. Dodaj kontrolki sprawdzające, czy pole zostało wypełnione
• Do wstaw obok o
• Wybierz dodaną kontrolkę i w oknie
—
—
—
• Wstaw obok kontrolki
• Wybierz dodaną kontrolkę i w oknie
—
—
—
• Zapiwypełnienia informacji w
2. Dodaj kontrolkę wyświetlającą informacje o błędach
• Do formularza mainMultiView(kategoria
• Zapisz zmiany i przetestuj możliwość wysłania formularza bez wypełnienia informacji w
• Wróć do edycji stronykontrolki właściwość
Strona 5-20
(czas realizacji 20 min)
Ponieważ chciałbyś się maksymalnie wykazać, postanowiłeś rozszerzyć stronę o zabezpieczenia formularzy przed błędnym wypełnieniem pól, jak również określając niektóre pola jako wymagane. Bez tych informacji zbieranie danych w ankiecie raczej nie ma sensu. Określiłeś następujące p
Sprawdzenie poprawności wpisanych danych powinno odbywać się w następujących polach:
(poprawny adres e-mail w formacie użytkownik@serwer
(same cyfry w formacie 1234567890)
(liczba od 50 do 250 cm)
do (zarówno wartość, jak i porównanie wpisanych wartości od<do)
Tok postępowania
Do wcześniej utworzonego formularza Ankieta.aspxwstaw obok kontrolki imieTextBox kontrolkę RequiredFieldValidatorokna Toolbox (kategoria Validation).
Wybierz dodaną kontrolkę i w oknie Properties:
— w polu ControlToValidate z listy rozwijanej wybierz — w polu ErrorMessage wpisz Pole Imię jest wymagane— w polu Text wpisz *
Wstaw obok kontrolki emailTextBox kontrolkę RequiredFieldValidator
Wybierz dodaną kontrolkę i w oknie Properties:
— w polu ControlToValidate z listy rozwijanej wybierz — w polu ErrorMessage wpisz Pole E-mail jest wymagane— w polu Text wpisz *
Zapisz zmiany i przetestuj możliwość wysłania formularza bez wypełnienia informacji w polach Imię i E-Mail.
Czy sprawdzenie wpisania danych to odbywa się po stronie serwera czy klienta? Zobacz źródło strony. W jaki sposób jest realizowane to sprawdzenie? Co jest wypisywane obok kontrolki? Czy pojawia się komunikat wpisany w polu ErrorMessage?
Do formularza Ankieta.aspx na końcu (za kontrolką mainMultiView) wstaw kontrolkę ValidationSummary(kategoria Validation).
Zapisz zmiany i przetestuj możliwość wysłania formularza bez wypełnienia informacji w polach Imię i E-Mail.
Czy pojawia się komunikat wpisany w polu ErrorMessagegdzie i dlaczego?
Wróć do edycji strony i przetestuj inne możliwości kontrolki ValidationSummary zmieniając w oknie właściwość DisplayMode.
Moduł 5 Kontrolki serwerowe
postanowiłeś rozszerzyć stronę o zabezpieczenia formularzy przed błędnym wypełnieniem pól, jak również określając niektóre pola jako wymagane.
Określiłeś następujące pola
powinno odbywać się w następujących polach:
serwer.domena)
do (zarówno wartość, jak i porównanie wpisanych wartości od<do)
aspx w widoku Design RequiredFieldValidator z
z listy rozwijanej wybierz imieTextBox Pole Imię jest wymagane
RequiredFieldValidator
z listy rozwijanej wybierz emailTextBox mail jest wymagane
sz zmiany i przetestuj możliwość wysłania formularza bez
Czy sprawdzenie wpisania danych to odbywa się po stronie serwera Zobacz źródło strony. W jaki sposób jest realizowane to
est wypisywane obok kontrolki? Czy pojawia się
(za kontrolką MultiView - ValidationSummary z okna Toolbox
Zapisz zmiany i przetestuj możliwość wysłania formularza bez
ErrorMessage? Jeśli tak, to
etestuj inne możliwości wyświetlania w oknie Properties jej
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-21
3. Dodaj kontrolki sprawdzające poprawność wpisanych danych za pomocą wyrażeń regularnych
• Do formularza Ankieta.aspx obok kontrolki emailTextBox wstaw kontrolkę RegularExpressionValidator z okna Toolbox (kategoria Validation) i w oknie Properties:
— w polu ControlToValidate z listy rozwijanej wybierz emailTextBox — w polu ErrorMessage wpisz Nieprawidłowy adres E-Mail — w polu Text wpisz *
— w polu ValidationExpression wciśnij przycisk , a następnie z listy Standard expressions wybierz Internet e-mail address (Rys. 4).
Rys. 4 Określenie wyrażenia regularnego
• Obok kontrolki telTextBox wstaw kontrolkę RegularExpressionValidator. W oknie Properties:
— w polu ControlToValidate z listy rozwijanej wybierz telTextBox — w polu ErrorMessage wpisz Nieprawidłowy numer telefonu podaj
same cyfry — w polu Text wpisz * — w polu ValidationExpression wpisz: ([0-9]+)$
• Obok kontrolki wzrostTextBox wstaw kontrolkę RegularExpressionValidator. W oknie Properties:
— w polu ControlToValidate z listy rozwijanej wybierz wzrostTextBox — w polu ErrorMessage wpisz Nieprawidłowy wzrost – podaj wzrost w
centymetrach — w polu Text wpisz * — w polu ValidationExpression wpisz: ([0-9]+)$
• Obok kontrolki odTextBox wstaw kontrolkę RegularExpressionValidator. W oknie Properties:
— w polu ControlToValidate z listy rozwijanej wybierz odTextBox — w polu ErrorMessage wpisz Nieprawidłowa kwota – podaj
zaokrąglając do pełnych złotych — w polu Text wpisz * — w polu ValidationExpression wpisz: ([0-9]+)$
• Obok kontrolki doTextBox wstaw kontrolkę RegularExpressionValidator. W oknie Properties:
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-22
— w polu ControlToValidate z listy rozwijanej wybierz doTextBox — w polu ErrorMessage wpisz Nieprawidłowa kwota – podaj
zaokrąglając do pełnych złotych — w polu Text wpisz * — w polu ValidationExpression wpisz: ([0-9]+)$
• Zapisz zmiany i przetestuj możliwość wysłania formularza z błędami w kontrolkach.
4. Dodaj kontrolki sprawdzające poprawność wpisanych danych za pomocą porównania wartości
• Obok kontrolki wzrostTextBox wstaw kontrolkę RangeValidator z okna Toolbox (kategoria Validation) i w oknie Properties:
— w polu ControlToValidate z listy rozwijanej wybierz wzrostTextBox — w polu ErrorMessage wpisz Podaj poprawny wzrost w zakresie od
50 do 250 cm — w polu MaximumValue wpisz 250 — w polu MinimumValue wpisz 50 — w polu Text wpisz * — w polu Type wybierz Integer
• Obok kontrolki doTextBox wstaw kontrolkę CompareValidator. W oknie Properties:
— w polu ControlToCompare z listy rozwijanej wybierz odTextBox — w polu ControlToValidate z listy rozwijanej wybierz doTextBox — w polu ErrorMessage wpisz Wartość w polu Do musi być większa od
wartości w polu Od — w polu Operator z listy rozwijanej wybierz GreaterThan — w polu Text wpisz * — w polu Type wybierz Integer
• W metodzie wyslijButton_Click zamień istniejącą linię następującym kodem:
if (IsValid)
{ mainMultiView.SetActiveView(podsumowanie); }
• Zapisz zmiany i przetestuj możliwość wysłania formularza z błędami w kontrolkach.
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-23
Problem 3 (czas realizacji 10 min)
Twoja praca bardzo spodobała się klientowi, jednak ma on jeszcze jedną prośbę. Chciałby, abyś umieścił baner reklamowy na górze strony. Baner powinien wyświetlać losowo określone reklamy umieszczone na serwerze.
Zadanie Tok postępowania
1. Dodaj katalog i pliki graficzne reklam
• Do projektu dodaj katalog Adv.
• Kliknij katalog prawym przyciskiem myszy i wybierz Add Existing Item, a następnie wskaż pliki Adv1.png i Adv2.png. Wciśnij Add.
2. Określ lokalizacje plików reklam oraz adresy na które wskazuja
• Kliknij prawym przyciskiem myszy katalog Adv i wybierz Add New Item.
• Z okna Templates wybierz XML File, a następnie w polu Name wpisz adv.xml.
• Do pliku dodaj następujący fragment:
<Advertisements>
<Ad> <ImageUrl>~/Adv/Adv1.png</ImageUrl>
<NavigateUrl>http://www.asp.net</NavigateUrl>
<AlternateText>Strona główna ASP.NET </AlternateText>
</Ad>
<Ad> <ImageUrl>~/Adv/Adv2.png</ImageUrl>
<NavigateUrl>http://www.codeplex.com</NavigateUrl>
<AlternateText>Projekty OpenSource - CodePlex </AlternateText>
</Ad>
</Advertisements>
• Zapisz zmiany.
3. Dodaj kontrolkę AdRotator i
• Do wcześniej utworzonego formularza Ankieta.aspx na początku strony wstaw kontrolkę AdRotator i w oknie Properties w polu AdvertisementFile wpisz ~/Adv/adv.xml.
• Zapisz zmiany i przetestuj funkcjonalność wyświetlania reklam na stronie.
Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-24
Laboratorium rozszerzone
Zadanie 1 (czas realizacji 90 min)
Jesteś już specjalistą w zakresie ankiet, więc otrzymujesz coraz więcej zleceń. Twój kolejny klient poprosił Cię o przygotowanie ankiety dla internetowego sklepu z odzieżą. Ma ona być skierowana zarówno do nowych klientów użytkowników, badając ich preferencje zakupowe, jak również do obecnych klientów, sprawdzając ich poziom zadowolenia z towarów i obsługi. Twoim zadaniem jest zaproponowanie i wykonanie ankiety z uwzględnieniem części wspólnej, która zawiera:
• imię (wymagane)
• adres e-mail (wymagane, poprawny adres)
• kod pocztowy (wymagane, poprawny kod)
• wiek (wartość między 10 a 100)
• płeć
• wykształcenie
• rozmiar (wartość między 20 a 50)
Pytania wspólne dla nowych klientów:
• Ile jesteś w stanie przeznaczyć miesięcznie na zakup ubrania? (Lista wyboru, odpowiedzi: „do 100 zł”, „100-500 zł”, „500-1000 zł”, „powyżej 1000 zł”.)
• Gdzie najczęściej dokonujesz zakupów ubrania? (Lista wielokrotnego wyboru, odpowiedzi: „Sklep firmowy”, „Hipermarket”, „Bazar”, „Sklep z odzieżą używaną”.)
• Jak często dokonujesz zakupu ubrania? (Lista wyboru, odpowiedzi: „Codziennie”, „Raz w tygodniu”, „Raz w miesiącu”, „Kilka razy w roku”.)
• W jakich kolorach preferujesz ubrania? (Lista wielokrotnego wyboru, odpowiedzi: „Kolorowo-jaskrawych”, „Stonowanych w szarościach”, „W czerni i bieli”, „W samej czerni”.)
W przypadku, gdy klient jest kobietą, pobierz odpowiedź na pytanie:
• Jakiego rodzaju ubrania najchętniej kupujesz? (Lista wielokrotnego wyboru, odpowiedzi: „garsonki”, „bluzki”, „spódniczki”, „spodnie”.)
W przeciwnym razie pobierz odpowiedź na następujące pytanię:
• Jakiego rodzaju ubrania najchętniej kupujesz? (Lista wielokrotnego wyboru, odpowiedzi: „spodnie”, „spodenki”, „garnitury”, „koszule”, „krawaty”.)
W ankiecie badania satysfakcji klienta powinieneś wyświetlić odpowiednio sformułowane pytania w zależności od płci:
• Kiedy ostatnio robiłaś/robiłeś u nas zakupy (Lista wyboru, odpowiedzi: „Wczoraj”, „W zeszłym tygodniu”, „W zeszłym miesiącu”, „Kilka miesięcy temu”, „Nie pamiętam”.)
• Czy jesteś zadowolona/zadowolony z zakupu (Lista wyboru, odpowiedzi: „Tak”, „Raczej tak”, „Raczej nie”, „Nie”, „Nie wiem”.)
• Czy jesteś zadowolona/zadowolony z naszych pracowników? (Lista wyboru, odpowiedzi: „Tak”, „Raczej tak”, „Raczej nie”, „Nie”, „Nie wiem”.)
• Wpisz swoje uwagi. (Pole tekstowe z możliwością wpisania tekstu w wielu liniach.)
Koniecznie sprawdź poprawność wpisywanych danych, a w podsumowaniu ankiety wyświetl informacje wypełnione przez użytkownika. Klient zażyczył sobie również, by na stronie była możliwość losowego wyświetlania reklam wraz z rejestracją ilości kliknięć banera.
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 6
Wersja 1
Projektowanie serwisów
internetowych
Spis treści
Projektowanie serwisów internetowych ............................................................................................. 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Przykładowe rozwiązanie ............................................................................................................. 7
Porady praktyczne ..................................................................................................................... 10
Uwagi dla studenta .................................................................................................................... 11
Dodatkowe źródła informacji..................................................................................................... 11
Laboratorium podstawowe ................................................................................................................ 12
Problem 1 (czas realizacji 25 min) .............................................................................................. 12
Problem 2 (czas realizacji 25 min) .............................................................................................. 15
Problem 3 (czas realizacji 25 min) .............................................................................................. 16
Problem 4 (czas realizacji 25 min) .............................................................................................. 18
Laboratorium rozszerzone ................................................................................................................. 19
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące zarządzania wyglądem
aplikacji i tworzenia elementów nawigacyjnych. Poznasz możliwości
centralnego zarządzania wyglądem witryny przy pomocy stron wzorcowych
i kompozycji. Poznasz metody tworzenia mapy witryny internetowej oraz
nauczysz się, jak wykorzystywać kontrolki nawigacyjne.
Cel modułu
Celem modułu jest przedstawienie możliwości utrzymania wspólnego
wyglądem aplikacji przy użyciu stron wzorcowych i kompozycji oraz
możliwości tworzenia centralnie zarządzanych elementów nawigacyjnych.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• wiedział jak zarządzać wyglądem aplikacji przy użyciu stron
wzorcowych i kompozycji
• potrafił tworzyć centralnie zarządzane mapy witryny
• potrafił wyświetlać mapę witryny przy pomocy kontrolek
nawigacyjnych
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać zasady pracy w środowisku Visual Studio, w szczególności
tworzenia stron internetowych,
• potrafić tworzyć nowe aplikacje internetowe i dodawać strony.
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznać się z materiałem zawartym
w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS”
i „Wprowadzenie do ASP.NET”
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-3
Przygotowanie teoretyczne
Przykładowy problem
Przeglądając serwisy internetowe możemy zauważyć, że każda strona wygląda podobnie.
Wspólnymi elementami są menu, baner czy inne wizualne komponenty strony. Aby utrzymać
wspólny wygląd strony tworzonej w XHTML należało zaprojektować wspólne elementy, a później
przekopiować je na każdą nową stronę. Oczywiście nie było to rozwiązanie dobre. Nie mówiąc o
problemach przy kopiowaniu należy pamiętać, że zmiana jakiegokolwiek elementu w części
wspólnej powodowała konieczność zmian we wszystkich plikach serwisu.
Kolejnym problemem jest wygląd strony. Już wiesz, że można go określić w pliku CSS, ale co, jeśli
chcemy okresowo zmieniać wygląd naszej witryny. Co jeśli chcemy, aby strona wyglądała inaczej w
zimie, lecie czy na jesień i wiosnę. Oczywiście możemy podmieniać wskazania pliku CSS na stronie,
jednak nie jest dobre rozwiązanie, szczególnie jeśli mamy kilka stron w serwisie. Chcielibyśmy mieć
centralne zarządzanie plikami CSS wykorzystywanymi przez stronę.
Ostatni problem na jaki napotkasz się tworząc serwisy internetowe to menu. Tworzenie menu jako
zbioru odnośników do stron jest może rozwiązaniem prostym, ale zdecydowanie nieoptymalnym.
Chcielibyśmy mieć centralne miejsce do zarządzania elementami nawigacyjnymi. Dodatkowo
musimy mieć możliwość prostego wyświetlania naszej strony. Do tego celu potrzebujemy zbioru
kontrolek nawigacyjnych.
Podstawy teoretyczne
Budowanie wyglądu serwisu w oparciu o strony wzorcowe
Strony serwisu internetowego posiadają wiele wspólnych elementów, które powinny być
wyświetlane na każdej ze stron (np. logo, elementy nawigacyjne itp.). Tworzenie podobnych stron
można wykonać kopiując wspólne elementy. Gdy tych stron jest dużo lub jeśli w pewnym
momencie zaistnieje potrzeba zmiany wyglądu serwisu, wtedy takie rozwiązanie jest niepraktyczne.
ASP.NET został wyposażony w mechanizm stron wzorcowych, umożliwiających grupowanie
pewnych wspólnych elementów z wielu stron w jednym pliku.
Strona wzorcowa (ang. Master Page) umożliwia tworzenie wspólnego wyglądu dla całej witryny
internetowej. Stanowi ona szkielet dla treści dostarczanej przez poszczególne strony i zawiera tylko
wspólne elementy. Miejsce, w którym ma zostać umieszczona treść właściwej strony, jest
określone przez specjalną kontrolkę ContentPlaceHolder. Ze względu na fakt, że możliwe jest
umieszczenie dowolnej ilości kontrolek ContentPlaceHolder, każda kontrolka musi być
jednoznacznie nazwana za pomocą identyfikatora kontrolki ID.
Strona z zawartością (ang. Content Page) korzysta ze strony wzorcowej, wypełniając miejsca
określone przez ContentPlaceHolder. Treść jest umieszczona w kontrolce Content. Kontrolka
ta musi odwoływać się do odpowiedniej kontrolki ContentPlaceHolder za pomocą parametru
ContentPlaceHolderID (Rys. 2).
Rys. 2 Tworzenie strony internetowej na podstawie stron: wzorcowej i zawartości
Strona wzorcowa i strona zawartości mogą zawierać dowolne kontrolki serwerowe, jak również
własny kod programowy. Zawartości obu stron są łączone w jedną strukturę i wysyłane do klienta,
dzięki temu są widoczne jako jedna całość.
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-4
Strona zawartości może umieszczać kontrolki tylko w wyznaczonych miejscach. Istnieje możliwość
umieszczenia kontrolki w dowolnym miejscu na stronie przy pomocy pozycjonowania CSS, ale jest
to w najwyższym stopniu niewskazane. Zmiana szablonu nie spowoduje zmiany położenia kontrolki.
Jeśli musimy coś dodać w określonym miejscu, najłatwiej jest zdefiniować w stronie wzorcowej
kolejną kontrolkę ContentPlaceHolder.
Aby ułatwić tworzenie rozbudowanych serwisów internetowych, możliwe jest zagnieżdżanie stron
wzorcowych. Visual Studio 2008 wspiera ich wizualne projektowanie.
Konwersja istniejącej strony Web na stronę zawartości
Przy projektowaniu aplikacji istnieje czasami konieczność dopasowania istniejącej strony Web do
całego portalu. W tym celu należy z konwertowanej strony usunąć następujące znaczniki:
• <!DOCTYPE>
• <html>
• <head>
• <body>
• <form>
Następnie należy do dyrektywy @Page dodać atrybut MasterPageFile, podając właściwą nazwę
pliku strony wzorcowej. W kolejnym kroku przed treścią strony powinno się dodać znacznik
<asp:Content>. Znacznik ten musi posiadać atrybuty ID (dowolna nazwa),
ContentPlaceHolderID (nazwa kontrolki ContentPlaceHolder na stronie wzorcowej, w
której ma znaleźć się treść strony) oraz runat="Server". Na końcu pliku należy zamknąć znacznik
</asp:Content>.
Jeśli na stronie wzorcowej znajduje się klika kontrolek ContentPlaceHolder, to musimy
zapewnić, że każda z nich będzie posiadała na tej stronie kontrolkę Content z odpowiednim
ContentPlaceHolderID.
Sterowanie wyglądem aplikacji przy użyciu kompozycji
Przy użyciu arkusza styli (CSS) możliwe jest definiowanie wyglądu elementów w języku HTML, nie
jest to jednak możliwe w przypadku kontrolek serwerowych ASP.NET. CSS może zmienić
interpretacje kodu HTML generowanego przez kontrolkę serwerową, ale nie ma wpływu na samą
kontrolkę. Aby umożliwić scentralizowany sposób sterowania wyglądem kontrolek, wprowadzono
kompozycje (ang. themes).
Kompozycje są umieszczone na serwerze w specjalnym katalogu App_Themes, w podkatalogach,
których nazwy są nazwami kompozycji. Podkatalogi zawierać mogą pliki .skin (plik motywu) oraz
pliki arkuszy styli .css. Pliki styli zostaną dołączone do nagłówka każdej ze stron.
Wizualne cechy kontrolek Web określa się za pośrednictwem pliku motywu (.skin). Pojedynczy
folder kompozycji może zawierać dowolną liczbę takich plików. Pliki motywów zawierają znacznik
identyfikujący daną kontrolkę serwerową wraz z parametrami.
Definicja motywów ma wpływ tylko na wygląd kontrolek serwerowych Web, nie ma natomiast
wpływu na następujące elementy:
• elementy HTML
• kontrolki serwerowe HTML
• kontrolki serwerowe Web, które nie mają właściwości wizualnych
• niewizualne właściwości kontrolek serwerowych Web (np. AutoPostBack)
Stosowanie kompozycji do wszystkich stron witryny jest możliwe w pliku Web.config w sekcji
<system.web> przy pomocy znacznika <pages>. Przykład:
<pages theme="NiebieskaSkorka" />
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-5
W celu utworzenia kompozycji należy w oknie Solution Explorer kliknąć prawym przyciskiem i
wybrać Add ASP.NET Folder, a następnie Theme. W tym momencie możliwe jest określenie
dowolnej nazwy folderu, która jednocześnie będzie nazwą kompozycji.
W celu dodania pliku kompozycji należy kliknąć prawym przyciskiem katalog zawierający
kompozycję i wybrać z menu opcje Add New Item, a następnie Skin File i wcisnąć przycisk Add.
Rys. 3 Dodanie pliku motywu
W utworzonym pliku należy następnie umieścić znaczniki i parametry definiujące wygląd strony.
Nawigacja w serwisie internetowym
Większość serwisów internetowych posiada menu – zbiór odnośników do poszczególnych stron.
Możliwe jest określenie tego zbioru ręcznie na każdej stronie lub na stronie wzorcowej, jednak nie
jest to rozwiązanie elastyczne. Dodatkowo problemem jest ukrywanie części odnośników przed
użytkownikami anonimowymi oraz ograniczanie dostępu do odnośników dla różnych grup
użytkowników.
W ASP.NET 2.0 zaproponowano spójny, łatwy do zarządzania, scentralizowany system dostarczania
informacji o mapie serwisu. Możliwości systemu nawigacji:
• Centralne zarządzanie logiczną strukturą witryny – dodawanie lub usuwanie odnośników do
stron domyślnie odbywa się w pliku Web.sitemap. Możliwe jest określenie innego dostawcy.
• Kontrolki nawigacyjne – kontrolki umożliwiające wyświetlenie menu serwisu bazujące na
pliku Web.sitemap.
• Reguły dostępu – możliwość określania reguł wyświetlania lub ukrywania odnośników w
menu nawigacji.
• Możliwość programowego dostępu do kontrolek nawigacji i wyświetlanych w nich informacji.
Tworzenie mapy witryny
Pierwszym krokiem wykorzystania systemu nawigacji w ASP.NET jest określenie struktury serwisu.
Standardowo system nawigacji serwisem wykorzystuje plik XML Web.sitemap zawierający
hierarchię stron.
Plik Web.sitemap musi być umieszczony w katalogu głównym aplikacji. Zawiera on elementy
<siteMapNode> dla każdej strony serwisu. Hierarchię serwisu ustala się poprzez osadzanie
elementów <siteMapNode>. Każdy z nich zawiera następujące atrybuty:
• title – określa tekst wyświetlany w kontrolkach nawigacyjnych
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-6
• description - określenia tekst pomocy pojawiający się po ustawieniu kursora nad pozycją
menu (ang. tool tip)
• url – określa lokalizację strony
Przykład pliku Web.sitemap:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode>
<siteMapNode url="Default.aspx" title="Strona główna"
description="Przenieś do strony głównej" />
<siteMapNode title="Produkty" description="Zapoznaj się z ofertą">
<siteMapNode url="Produkty.aspx" title="Przeglądaj"
description="Przejrzyj dostępne artykuły" />
<siteMapNode url="Szukaj.aspx" title="Szukaj"
description="Wyszukaj po nazwie" />
</siteMapNode>
</siteMapNode>
</siteMap>
Kontrolki nawigacyjne
Kolejnym krokiem po określeniu struktury jest wyświetlenie jej na stronie serwisu. ASP.NET
udostępnia następujące kontrolki nawigacyjne:
• SiteMapPath
• TreeView
• Menu
Kontrolka SiteMapPath
Kontrolka SiteMapPath wyświetla ścieżkę nawigacji. Prezentuje ona użytkownikowi lokalizację i
wyświetla odnośniki umożliwiające nawigację do strony domowej.
Rys. 4 Kontrolka SiteMapPath
Kontrolka TreeView
Kontrolka TreeView wyświetla mapę serwisu w postaci struktury. Węzły zawierające elementy
potomne mogą być rozwijane lub zwijane po kliknięciu ich.
Rys. 5 Przykład kontrolki TreeView a) cała b) zwinięty jeden węzeł
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-7
Kontrolka Menu
Kontrolka Menu wyświetla menu rozwijane. Węzły zawierające elementy potomne są rozwijane w
momencie, kiedy przesunie się nad nimi kursor.
Rys. 6 Przykład działania kontrolki Menu
Podsumowanie
W tym rozdziale przedstawiliśmy podstawowe informacje dotyczące budowania witryn
internetowych w oparciu o strony wzorcowe. Pokazaliśmy, jak tworzyć i zarządzać wyglądem
witryny przy pomocy kompozycji oraz jak tworzyć mapę witryny i wykorzystywać kontrolki
nawigacyjne do jej prezentowania.
Przykładowe rozwiązanie
Tworzenie strony wzorcowej i stron zawartości
Naszym zadaniem jest utworzenie szablonu serwisu internetowego dla klienta. Szablon ma
zawierać elementy przedstawione na Rys. 7.
Rys. 7 Szablon strony
Po utworzeniu nowego projektu aplikacji internetowej dodamy stronę wzorcową do projektu. Za
pomocą menu Website -> Add New Item, lub poprzez kombinację klawiszy Ctrl+Shift+A. W oknie
dialogowym Add New Item należy wybrać szablon Master Page oraz w oknie Name nadać mu
nazwę SzablonStrony.master. Dodatkowo zaznaczymy opcję Place Code In Separate File, aby
umieścić kod strony w osobnym pliku. Po kliknięciu przycisku Add tworzony jest plik strony
wzorcowej zawierający już dwie kontrolki ContentPlaceHolder. Pierwsza kontrolka umożliwia
dodanie treści do nagłówka strony. Dzięki temu na stronie zawartości możemy dodać plik CSS lub
skrypt wykonywany po stronie klienta. Druga kontrolka zawiera treść, która zostanie wypełniona na
stronie zawartości.
Teraz należy odpowiednio przygotować naszą stronę wzorcową. Aby to wykonać, usuniemy
kontrolkę ContentPlaceHolder. Ułatwi nam to opisanie kolejnych czynności. Następnie dodamy
do znacznika <div> właściwość ID="Strona". W kolejnym kroku dodamy dwa znaczniki <div>,
pierwszy o ID="Naglowek", drugi o ID="ObszarRoboczy". Następnie do znacznika
zawierającego nagłówek dopiszemy: Logo. Do znacznika <div> o ID="ObszarRoboczy" dodamy
kolejne dwa znaczniki <div> o ID="Menu" i ID="Tresc". Do znacznika <div> o ID="Menu"
wpiszemy Menu, a do znacznika o ID="Tresc" dodamy kontrolkę ContentPlaceHolder.
Tak przygotowana strona wzorcowa będzie stanowiła bazę dla kolejnych podstron. Warto jeszcze
zdefiniować wygląd poszczególnych sekcji w CSS, ze szczególnym uwzględnieniem odpowiedniego
rozmieszczenia obszaru treści i menu.
Zauważmy, że strona wzorcowa różni się od formularza internetowego tylko dwiema kontrolkami
ContentPlaceHolder. Kontrolki te będą wypełniane przez strony zawartości bazujące na tej
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-8
stronie. Strona zawartości korzystająca z tej strony wzorcowej musi zawierać dwie kontrolki
Content, których atrybut ContentPlaceHolderID jest równy ContentPlaceHolder1 oraz
head. Naszym zadaniem jest umieścić odpowiednią treść w tych kontrolkach, która później
zostanie połączona z szablonem strony i wyświetlona w przeglądarce użytkownika jako jedna
strona XHTML.
Nie możemy zobaczyć szablonu strony bez strony zawartości. Musimy zatem dodać nową stronę
zawartości bazującą na naszym szablonie.
Dodawanie stron zawartości
Kolejnym krokiem jest dodanie strony zawartości, która będzie bazowała na stronie wzorcowej.
Strona zawartości to formularz internetowy, którego treść umieszczona jest w kontrolkach
Content odpowiadających kontrolkom ContentPlaceHolder na stronie wzorcowej.
Stronę zawartości dodajemy do aplikacji podobnie jak formularz internetowy, z tą tylko różnicą, że
w oknie Add New Item (Rys. 8) dodatkowo zaznaczamy opcję Select master page.
Rys. 8 Okno Add New Item dla strony zawartości
Po kliknięciu przycisku Add zostaniemy proszeni o wybranie strony wzorcowej (Rys. 9). W aplikacji
możemy zdefiniować klika szablonów stron. Co więcej, szablony te mogą być zagnieżdżane.
Rys. 9 Okno Select a Master Page
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-9
Po wybraniu przycisku OK tworzona jest nowa strona zawartości oparta na wybranej stronie
wzorcowej. Zawiera ona dyrektywę @Page, w której oprócz standardowych właściwości znajduje
się właściwość określająca szablon strony. Na stronie znajdują się również dwie kontrolki Content
odwołujące się do odpowiednich kontrolek ContentPlaceHolder.
Po przełączeniu w widok Design (Rys. 10) widoczna jest strona będąca połączeniem strony
wzorcowej i strony zawartości. Dzięki temu programista widzi ją tak, jak zostanie ona wysłana do
użytkownika. Część zdefiniowana w stronie wzorcowej jest oznaczona kolorem szarym, a
dodawanie kontrolek jest możliwe wyłącznie w kontenerze Content oznaczonym kolorem białym.
Umieszczenie kursora na szarym tle powoduje zmianę kursora na znak zakazujący.
Rys. 10 Widok WYSIWYG strony zawartości
Możemy teraz wyświetlić naszą stronę zawartości w przeglądarce. Po uruchomieniu widzimy stronę
składającą się z elementów umieszczonych zarówno na stronie wzorcowej, jak i stronie zawartości.
Konwersja istniejącej strony Web na stronę zawartości
Projektując aplikację internetową czasami potrzebujemy dodać do projektu starą stronę
przygotowaną bez użycia szablonu. W tym celu należy ze strony usunąć następujące znaczniki ze
starej strony:
• <!DOCTYPE>
• <html>
• <head>
• <body>
• <form>
Należy pamiętać, że musimy usunąć znaczniki początkowe i końcowe zostawiając właściwą treść
strony. Następnie należy do dyrektywy @Page dodać atrybut MasterPageFile, określający
lokalizację pliku strony wzorcowej. Następnie pod dyrektywą @Page, a przed treścią strony należy
dodać znacznik:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
Jeśli potrzebujemy dodać coś w nagłówku strony, to możemy to umieścić właśnie w tym znaczniku.
W naszym prostym przypadku nie potrzebujemy nic dodawać, zatem zostawiamy pustą zawartość.
Kolejno do strony należ dodać znacznik <asp:Content>. Znacznik ten musi posiadać atrybuty ID
(dowolna nazwa), ContentPlaceHolderID (nazwa kontrolki ze strony wzorcowej
ContentPlaceHolder, w której ma znaleźć się treść strony) oraz runat="Server". W naszym
przypadku:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Na końcu pliku musimy zamknąć znacznik </asp:Content>.
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-10
Jeśli w stronie wzorcowej znajduje się więcej niż dwie kontrolki ContentPlaceHolder, to należy
do strony zawartości dodać odpowiednio tyle kontrolek Content tak, aby każda kontrolka ze
strony wzorcowej miała odniesienie na stronie zawartości.
Sterowanie wyglądem aplikacji przy użyciu kompozycji
Naszym zadaniem będzie stworzenie wyglądu witryny w taki sposób, aby możliwa była szybka
zmiana wyglądu strony. Do tego celu użyjemy kompozycji.
W celu utworzenia kompozycji należy w oknie Solution Explorer kliknąć prawym przyciskiem i
wybrać Add ASP.NET Folder, a następnie Theme. W tym momencie możliwe jest określenie nazwy
folderu, która jednocześnie będzie nazwą kompozycji. W naszym przypadku będzie to
SkorkaZima.
Następnie dodajemy do folderu plik CSS, w którym znajdują się odpowiednie definicje wyglądu
elementów na stronie. Oprócz pliku CSS możemy również wykorzystać plik motywów. W celu
dodania pliku motywów należy kliknąć prawym przyciskiem katalog zawierający kompozycję i
wybrać z menu opcje Add New Item, a następnie Skin File i wcisnąć przycisk Add. W utworzonym
pliku należy następnie umieścić znaczniki i parametry definiujące wygląd strony.
Aktualnie wykorzystywaną kompozycje przez aplikacje definiujemy w pliku Web.config w sekcji
<system.web> przy pomocy znacznika <pages>. Przykład:
<pages theme="SkorkaZima" />
Możliwe jest również umieszczenie bezpośredniego odniesienia do odpowiedniego pliku w sekcji
head każdej strony w aplikacji, jednak ustawienia wykonane w pliku Web.config przykrywają
ustawienia lokalne w sekcji <head>.
Porady praktyczne
Strony wzorcowe
• Praca ze stroną wzorcową jest analogiczna do pracy z formularzem internetowym. Możliwe
jest dodawanie dowolnych kontrolek i wykonywanie dowolnego kodu aplikacji. Należy
jednak pamiętać, że kontrolki i kod tej strony będą wykonywane na wszystkich potomnych
stronach.
• Przy dodawaniu do projektu strony już istniejącej należy:
• w dyrektywie @Page wskazać lokalizację bezwzględną strony wzorcowej rozpoczynając od
głównej strony serwisu "~/"
• dodać tyle kontrolek Content, aby wszystkie kontrolki ContentPlaceHolder miały
swoje odwzorowanie
Kompozycje
• Tworzenie kompozycji należy zacząć od stworzenia kompozycji bazowej, a następnie
zmieniać ją odpowiednio do potrzeb.
• Aby możliwe było projektowanie strony w trybie podglądu, powinieneś określić styl bazowy
w nagłówku strony wzorcowej.
• W katalogu kompozycji możemy umieścić nie tylko pliki CSS i kompozycje, ale również
elementy graficzne niezbędne dla odpowiedniego wyglądu strony.
Nawigacja w serwisie
• W pliku Web.sitemap określaj zawsze element nadrzędny <siteMapNode>, a następnie w
kontrolce Menu określ właściwość ShowStartingNode="False".
• W pliku Web.sitemap staraj się zawsze umieszczać właściwość description. Ułatwi to
odnajdowanie ważnych elementów użytkownikom strony
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-11
• W pliku Web.sitemap nie musisz zawsze określać właściwości url. Jest to szczególnie
przydatne dla nadrzędnych opcji menu.
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• rozumiesz jak działają strony wzorcowe
• umiesz dodawać do projektu stronę wzorcową i stronę zawartości
• potrafisz dodawać i zarządzać kompozycjami
• potrafisz tworzyć mapy witryny w pliku Web.sitemap oraz wykorzystywać te informacje do
wyświetlania w kontrolkach nawigacyjnych
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. Strony wzorcowe – wprowadzenie,
http://aspnet.codeguru.pl/GuidedTourPL/webdev/webdev15.htm
Na stronie znajdziesz opis najważniejszych kwestii związanych ze stronami
wzorcowymi.
2. Stephen Walther, ASP.NET 2.0. Księga eksperta, Helion, 2008
W książce autor porusza wiele zagadnień związanych z ASP.NET 2.0. Z książki
nauczysz się tworzyć efektowne witryny internetowe, a także dbać o ich
bezpieczeństwo oraz wysoką skalowalność. Dowiesz się, jak można dodawać nowe,
jednolite strony do aplikacji webowych.
3. Webcast Wykorzystanie stron wzorcowych,
http://www.microsoft.com/poland/developer/net/webcasty/09_wykorzystanie_stron_wzorcow
ych/default.aspx
Webcast w języku polskim umożliwiający zapoznanie się w nieco ponad 11 min z
najważniejszymi kwestiami związanymi ze stronami wzorcowymi w ASP.NET.
Nauczysz się dodawać strony wzorcowe i strony zwartości. Poznasz również
mechanizm tworzenia mapy witryny i dodawania kontrolek nawigacyjnych.
4. Instrukcja: Dodawanie nawigacji do witryny sieci Web,
http://www.microsoft.com/poland/developer/net/podrecznik/customizing-01.mspx
Fragment podręcznika do ASP.NET, który w prosty sposób na przykładzie pokazuje,
jak tworzyć mapę witryny oraz dodawać kontrolki nawigacyjne.
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-12
Laboratorium podstawowe
Problem 1 (czas realizacji 25 min)
Firma Adventure Works chciałaby w Polsce otworzyć sklep internetowy sprzedający rowery.
Ponieważ poprzednia ankieta, którą przygotowałeś bardzo im się spodobała, zaproponowali Tobie
wykonanie tej strony. Ich grafik zaproponował układ przedstawiony na Rys. 11. Twoim zadaniem
jest przygotowanie strony wzorcowej oraz zaprezentowanie jej klientowi.
Rys. 11 Szkic wyglądu strony
Zadanie Tok postępowania
1. Utwórz nową
stronę w Visual
Web Developer
2008 Express
Edition
• Otwórz Visual Web Developer 2008 Express Edition.
• Z menu wybierz File -> New Web Site.
• Z listy Visual Studio installed templates wybierz ASP.NET Web Site.
• Z listy Location wybierz File System, a w polu obok określ lokalizację dla
pliku w dowolnym miejscu na dysku.
• Z listy Language wybierz Visual C#.
• Kliknij OK.
2. Utwórz
wzorzec strony
• Usuń z projektu stronę Default.aspx.
• Wybierz z menu opcję Websites -> Add New Item lub naciśnij
kombinację Ctrl+Shift+A.
• Z wyświetlonego okna dialogowego wybierz następujące opcje:
— Templates: Master Page
— Language: Visual C#
— Name: SzablonStrony.master
— Place Code In Separate File: zaznaczona
• Naciśnij przycisk Add.
• Program utworzy stronę wzorcową z dwiema kontrolkami
ContentPlaceHolder.
• Usuń kontrolkę ContentPlaceHolder o id="ContentPlaceHolder1".
3. Utworzenie
głównych
elementów strony
• Zmień tytuł strony na Adventure Works.
• Wewnątrz znacznika <body> dodaj:
<div id="Strona">
<div id="Naglowek"></div>
<div id="Tresc"></div>
</div>
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-13
4. Podział
głównych
elementów
• Wewnątrz znacznika zawierającego nagłówek (id="Naglowek") dodaj:
Logo
<div id="Menu">Menu</div>
<div id="ObszarLogowania">Zaloguj</div>
• Wewnątrz znacznika zawierającego treść (id="Tresc") dodaj:
<div id="PierwszyObszarBoczny">Pierwszy obszar boczny</div>
<div id="DrugiObszarBoczny">Drugi obszar boczny</div>
<div id="ObszarRoboczy">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
5. Dodanie
nowego arkusza
stylów
• Wybierz Website -> Add New Item.
• Z listy Visual Studio installed templates wybierz Style Sheet.
• W polu Name wpisz Style.css.
• Kliknij OK.
6. Określenie
pozycji
w obszarach
roboczych
• Przełącz widok strony na Design lub Split.
• Wybierz Format -> New Style.
• W polu Selector wpisz #PierwszyObszarBoczny.
• W górnej części okna z listy Define in wybierz Existing Style Sheet,
a z listy rozwijanej URL wybierz Style.css.
• Z listy Category wybierz Layout, a następnie określ właściwość float:
left.
• Z listy Category wybierz Position, a następnie określ właściwości width:
200 px oraz height: 300 px.
• Kliknij OK.
• Postępuj podobnie z selektorem #DrugiObszarBoczny, tylko zmień
właściwość float na right.
7. Określenie
podstawowego
wyglądu
zawartości strony
• W pliku Style.css standardowo jest już dodany selektor znacznika
<body>. Kliknij go prawym przyciskiem myszy i wybierz Build Style.
• Określ właściwości font-family: Verdana, font-size: 8 pt i color:
#000033.
• Z listy Category wybierz Background, a następnie określ właściwość
backgroud-color: white.
• Z listy Category wybierz Box, a następnie określ właściwość margin: 0.
Upewnij się, że opcja Same for all jest zaznaczona.
• Kliknij OK.
• Otwórz plik SzablonStrony.master. W oknie Solution Explorer chwyć
myszką plik Style.css i upuść go w sekcji nagłówka strony za znacznikiem
</title>. Zobacz jak zmienił się podgląd pliku.
8. Określenie
wyglądu
pozostałych
elementów strony
• Przy pomocy narzędzi Visual Studio lub w kodzie pliku Style.css określ
następujące style:
— #Menu: kolor tła: #55BBFF, wielkość tekstu: 7.5pt
— #ObszarLogowania: wyrównanie tekstu (właściwość text-align): do
prawej, kolor tła #C3DBEA, margines wewnętrzny (ang. padding)
z góry i dołu 5px, z lewej i prawej 10px
— #ObszarRoboczy: kolor tła #EEE, margines wewnętrzny (ang.
padding) z góry i dołu 50px, z lewej i prawej 20px, margines z góry
i dołu 0, z lewej i prawej 200px
Piotr Bubacz
ITA-103 Aplikacje Internetowe
9. Dodaj logo do
strony
• Do aplikacji dodaj kat
następnie nazwij go
• Do katalogu dodaj
wskaż nowo dodany folder, w
następnie wskaż obrazek
• Usuń napis
kontrolkę
~/Ima
10. Dodawaj
stronę z
zawartością
• W oknie
Websites
• Z wyświetlonego okna dialogowego wybierz następujące opcje:
—
—
—
—
—
• Naciśnij przycisk
• W oknie dialogowym
SzablonStrony.master
11. Sprawdzenie
wyglądu strony w
przeglądarce
• W oknie
Default.aspx
Projektowanie serwisów internetowych
Strona 6-14
Do aplikacji dodaj katalog Images. Wybierz Website
następnie nazwij go Images.
Do katalogu dodaj obrazek AWlogo.jpg. W oknie
wskaż nowo dodany folder, wybierz Website ->
następnie wskaż obrazek AWlogo.jpg.
Usuń napis Logo na górze strony, a następnie w to miejsce
kontrolkę Image i w oknie Properties w polu
~/Images/AWlogo.jpg.
W oknie Solution Explorer wskaż nazwę aplikacji.
Websites -> Add New Item lub naciśnij kombinację
Z wyświetlonego okna dialogowego wybierz następujące opcje:
— Templates: Web Form
— Language: Visual C#
— Place Code In Separate File: zaznaczona
— Select Master Page: zaznaczona
— Nazwa: Default.aspx
Naciśnij przycisk Add.
W oknie dialogowym Select a Master Page
SzablonStrony.master, a następnie wciśnij OK.
Zawartość strony Default.aspx i wszystkich pozostałych można dodać
w kontrolce Content. Aby zmienić zawartość pozostałych części strony
należy dokonać edycji strony wzorcowej.
W oknie Solution Explorer kliknij prawym przyciskiem
Default.aspx i wybierz View In Browser.
Strona w przeglądarce powinna wyglądać podobnie jak na
Rys. 12 Wygląd strony po zastosowaniu stylów
Moduł 6
Projektowanie serwisów internetowych
Website -> New folder, a
W oknie Solution Explorer
> Add Existing Item, a
a następnie w to miejsce dodaj
w polu ImageUrl wpisz
wskaż nazwę aplikacji. Wybierz z menu opcję
lub naciśnij kombinację Ctrl+Shift+A.
Z wyświetlonego okna dialogowego wybierz następujące opcje:
Select a Master Page wybierz
i wszystkich pozostałych można dodać
. Aby zmienić zawartość pozostałych części strony
kliknij prawym przyciskiem myszy plik
Strona w przeglądarce powinna wyglądać podobnie jak na Rys. 12.
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Problem 2 (czas realizacji 25 min)
Aby przetestować szablon strony chciałbyś dodać stronę z ankietami wykonaną w ćwiczeniu w
module 4.
Zadanie Tok postępowania
1. Dodaj stronę
do projektu
• Wybierz
• Znajdź na dysku stronę
• Kliknij
• Do projektu d
2. Usuń
niepotrzebne
znaczniki
• Usuń następujące znaczniki ze strony:
—
—
—
—
—
3. Określ
parametry
dyrektywy @Page
• Na stronie w dyrektywie
MasterPageFile="~/SzablonStrony.master"
4. Dodaj
kontrolkę Content
• Po dyrektywie
<asp:Content ID="Content1
• Na końcu strony po całej treści zamknij dodany znacznik
</asp:Content>
5. Dodaj do
strony głównej
odnośniki do
ankiety
• Do strony głównej dodaj odnośniki odpowiednio uruchamiający ankietę
dla nowego klienta oraz dla osoby posiadającej już rower.
• Przetestuj d
Projektowanie serwisów internetowych
Strona 6-15
Problem 2 (czas realizacji 25 min)
Aby przetestować szablon strony chciałbyś dodać stronę z ankietami wykonaną w ćwiczeniu w
Tok postępowania
Wybierz Website -> Add Existing Item.
Znajdź na dysku stronę Ankieta.aspx.
Kliknij Add.
Do projektu dodaj również katalog Adv z jego zawartością.
Usuń następujące znaczniki ze strony:
— <!DOCTYPE>
— <html>
— <head>
— <body>
— <form>
Nie zapomnij o znacznikach końcowych.
Na stronie w dyrektywie @Page dodaj atrybuty:
MasterPageFile="~/SzablonStrony.master" Title="
Po dyrektywie @Page dodaj znacznik:
<asp:Content ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Na końcu strony po całej treści zamknij dodany znacznik
</asp:Content>.
Do strony głównej dodaj odnośniki odpowiednio uruchamiający ankietę
dla nowego klienta oraz dla osoby posiadającej już rower.
Przetestuj działanie ankiety klikając na linki na stronie głównej.
Moduł 6
Projektowanie serwisów internetowych
Aby przetestować szablon strony chciałbyś dodać stronę z ankietami wykonaną w ćwiczeniu w
z jego zawartością.
Title="Ankieta"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Na końcu strony po całej treści zamknij dodany znacznik
Do strony głównej dodaj odnośniki odpowiednio uruchamiający ankietę
dla nowego klienta oraz dla osoby posiadającej już rower.
na stronie głównej.
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Problem 3 (czas realizacji 25 min)
Klient jest bardzo zadowolony z wyniku Twoich prac. Chciałby
nawigacyjne do strony. Zaproponował, aby na stronie w miejscu, gdzie jest napis
się prawdziwe menu z rozsuwanymi elementami.
Zadanie Tok postępowania
1. Dodaj nowe
strony do
projektu
• Do aplikacji internetowej utw
cztery
Uwagi.aspx
właściwości:
—
—
—
• W kolejnym oknie wybierz
2. Utwórz mapę
witryny
• Wybierz z menu opcję
kombinację
• W
Map
• W głównym oknie aplikacji zostanie zaprezentowana zawartość pliku.
• Zamień zawartość pliku na
<?xml version="1.0" encoding="utf
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap
1.0" >
<siteMapNode>
o nas">
</siteMap>
• Zapisz zmiany
Projektowanie serwisów internetowych
Strona 6-16
Problem 3 (czas realizacji 25 min)
Klient jest bardzo zadowolony z wyniku Twoich prac. Chciałby, abyś dodał jeszcze elementy
nawigacyjne do strony. Zaproponował, aby na stronie w miejscu, gdzie jest napis
się prawdziwe menu z rozsuwanymi elementami.
Tok postępowania
Do aplikacji internetowej utworzonej w poprzednim zadaniu doda
cztery nowe strony aspx. Nazwij je kolejno: Produkty.aspx
Uwagi.aspx oraz Informacje.aspx i dla każdej określ następujące
właściwości:
— Language: Visual C#
— Place code in separate file: zaznaczona
— Select master page: zaznaczona
W kolejnym oknie wybierz SzablonStrony.master
Strony dodajemy, aby po kliknięciu na pozycje menu nie pojawiła się
informacja o błędzie.
Wybierz z menu opcję Websites -> Add New Item
kombinację Ctrl+Shift+A.
W wyświetlonym oknie dialogowym w obszarze Templates
Map a w polu Nazwa wpisz Web.sitemap. Naciśnij przycisk
W głównym oknie aplikacji zostanie zaprezentowana zawartość pliku.
Zamień zawartość pliku na następującą:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap
1.0" >
<siteMapNode>
<siteMapNode url="Default.aspx" title="Strona główna"
description="Przenieś do strony głównej" />
<siteMapNode title="Produkty"
description="Zapoznaj się z ofertą">
<siteMapNode url="Produkty.aspx" title="Przeglądaj"
description="Przejrzyj dostępne filmy" />
<siteMapNode url="Szukaj.aspx" title="Szukaj"
description="Wyszukaj po nazwie" />
</siteMapNode>
<siteMapNode title="Ankiety"
description="Wypełnij ankietę na stronie">
<siteMapNode url="Ankieta.aspx?view=nowy
title="Szukam roweru"
description="Określ preferowane produkty" />
<siteMapNode url="Ankieta.aspx?view=wycie
title="Szukam towarzystwa na wycieczki "
description="Opowiedz nam o sobie" />
</siteMapNode>
<siteMapNode title="Informacje" description="Dowiedz się więcej
o nas">
<siteMapNode url="Informacje.aspx" title="O nas"
description="Dowiedz się więcej o nas" />
<siteMapNode url="Uwagi.aspx" title="Zgłoś uwagę"
description="Zgłoś uwagę odnośnie działania serwisu" />
</siteMapNode>
</siteMapNode>
</siteMap>
Zapisz zmiany.
Moduł 6
Projektowanie serwisów internetowych
abyś dodał jeszcze elementy
nawigacyjne do strony. Zaproponował, aby na stronie w miejscu, gdzie jest napis „Menu” pojawiło
orzonej w poprzednim zadaniu dodaj
Produkty.aspx, Szukaj.aspx,
i dla każdej określ następujące
i naciśnij Add.
Strony dodajemy, aby po kliknięciu na pozycje menu nie pojawiła się
Add New Item lub naciśnij
Templates wybierz Site
Naciśnij przycisk Add.
W głównym oknie aplikacji zostanie zaprezentowana zawartość pliku.
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-
<siteMapNode url="Default.aspx" title="Strona główna"
description="Przenieś do strony głównej" />
<siteMapNode url="Produkty.aspx" title="Przeglądaj"
description="Przejrzyj dostępne filmy" />
<siteMapNode url="Szukaj.aspx" title="Szukaj"
description="Wypełnij ankietę na stronie">
nowy"
description="Określ preferowane produkty" />
?view=wycieczki "
title="Szukam towarzystwa na wycieczki "
description="Opowiedz nam o sobie" />
<siteMapNode title="Informacje" description="Dowiedz się więcej
<siteMapNode url="Informacje.aspx" title="O nas"
on="Dowiedz się więcej o nas" />
<siteMapNode url="Uwagi.aspx" title="Zgłoś uwagę"
description="Zgłoś uwagę odnośnie działania serwisu" />
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-17
3. Dodaj
kontrolkę Menu
• Przejdź do strony wzorcowej SzablonStrony.master. Przejdź do widoku
Source.
• W miejsce napisu Menu wstaw kontrolkę SiteMapDataSource (okno
Toolbox, sekcja Data) i w oknie Properties:
— w polu ID wpisz MapaSerwisu
— w polu ShowStartingNode z listy rozwijanej wybierz False
— kontrolkę Menu (okno Toolbox, sekcja Navigation):
• Obok dodanej kontrolki dodaj kontrolkę Dla kontrolki Menu (okno
Toolbox, sekcja Navigation) i w oknie Properties:
— w polu ID wpisz MenuGlowne
— w polu DataSourceID wpisz MapaSerwisu
— w polu Orientation z listy rozwijanej wybierz Horizontal
• Zapisz zmiany i uruchom przygotowaną aplikację. Sprawdź wyświetlanie
menu i możliwość wybierania poszczególnych stron.
4. Określ wygląd
kontrolki menu
• Ponownie wybierz kontrolkę Menu MenuGlowne i w oknie Propoerties:
Określ właściwości CssClass dla następujących elementów:
— w polu DynamicHoverStyle-CssClass wpisz
ZaznaczonyElementMenu
— w polu DynamicMenuItemStyle-CssClass: wpisz
ElementMenuRozwijanego
— w polu StaticHoverStyle-CssClass wpisz ZaznaczonyElementMenu
— w polu StaticMenuItemStyle-CssClass wpisz
ElementMenuNadrzednego
• Do pliku Style.css dodaj następujące definicje stylów:
.ElementMenuNadrzednego
{ color: #000033; font-weight: bold; padding: 3px 10px; }
.ElementMenuRozwijanego
{ background: #F5F5F5; color: #000033; padding: 3px 10px; }
.ZaznaczonyElementMenu
{ background: #000033; color: White; }
• Zapisz zmiany i uruchom przygotowaną aplikację. Sprawdź wyświetlanie
menu.
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Problem 4 (czas realizacji 25 min)
Twój klient jest bardzo zadowolony z Twoich postępów w projekcie. Na dzisiejszym spotkaniu
pojawiła się nowa kwestia. Firma chciałby mieć możliwość szybkiej zmiany wyglądu strony bez
konieczności ingerencji w jej kod.
Zadanie Tok postępowania
1. Dodaj
kompozycje do
projektu
• W
ASP.NET Folder
• Określ nazwę nowej kompozycji jako
• K
Add
CzerwonaSkorka
2. Skopiuj plik css
z głównego
katalogu aplikacji
do nowych
kompozycji i
odpowiednio
przygotuj
kompozycje
CzerwonaSkorka
• Skopiuj plik
• Przenieś plik
• W nagłówku strony wzorcowej zmień odniesienie do pliku CSS
umieszczonego w katalogu
• Zmień style w kompozycji
była w odcieniach czerwieni.
3. Określ
aktywną
kompozycją
CzerwonaSkorka
• Otwórz plik
do niego właściwość
wyglądać następująco:
<pages theme="
4. Testowanie
zmian
• Zapisz
Projektowanie serwisów internetowych
Strona 6-18
acji 25 min)
Twój klient jest bardzo zadowolony z Twoich postępów w projekcie. Na dzisiejszym spotkaniu
pojawiła się nowa kwestia. Firma chciałby mieć możliwość szybkiej zmiany wyglądu strony bez
konieczności ingerencji w jej kod.
Tok postępowania
W oknie Solution Explorer kliknij prawym przyciskiem i
ASP.NET Folder, a następnie Theme.
Określ nazwę nowej kompozycji jako NiebieskaSkorka
Kliknij prawym przyciskiem myszy na folderze App_T
Add ASP.NET Folder, a następnie Theme. Określ nazwę kompozycji jako
CzerwonaSkorka.
Skopiuj plik Style.css do katalogu CzerwonaSkorka
Przenieś plik Style.css do katalogu NiebieskaSkorka
W nagłówku strony wzorcowej zmień odniesienie do pliku CSS
umieszczonego w katalogu NiebieskaSkorka.
Zmień style w kompozycji CzerwonaSkorka, tak, aby wyświetlana strona
była w odcieniach czerwieni.
Otwórz plik Web.config, a następnie odszukaj znacznika
do niego właściwość theme="CzerwonaSkorka", teraz ten znacznik ma
wyglądać następująco:
<pages theme="CzerwonaSkorka" >
Zapisz zmiany i przetestuj aplikację w przeglądarce.
Dlaczego w Visual Studio widać kompozycję
przeglądarce widać CzerwonaSkorka?
Moduł 6
Projektowanie serwisów internetowych
Twój klient jest bardzo zadowolony z Twoich postępów w projekcie. Na dzisiejszym spotkaniu
pojawiła się nowa kwestia. Firma chciałby mieć możliwość szybkiej zmiany wyglądu strony bez
prawym przyciskiem i wybierz Add
NiebieskaSkorka.
App_Themes i wybierz
. Określ nazwę kompozycji jako
CzerwonaSkorka.
NiebieskaSkorka.
W nagłówku strony wzorcowej zmień odniesienie do pliku CSS
, tak, aby wyświetlana strona
, a następnie odszukaj znacznika <pages>. Dodaj
, teraz ten znacznik ma
zmiany i przetestuj aplikację w przeglądarce.
Dlaczego w Visual Studio widać kompozycję NiebieskaSkorka, a w
Piotr Bubacz Moduł 6
ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych
Strona 6-19
Laboratorium rozszerzone
Przygotuj projekt strony dla firmy Adventure Works sprzedającej rowery. Do tego celu możesz
wykorzystać wybrany przez Ciebie szablon ze strony Open Source Web Design
(http://www.oswd.org).
W ramach projektu zdefiniuj wspólny wygląd przy pomocy strony wzorcowej oraz kompozycji.
Przygotuj i przetestuj co najmniej dwie różne kompozycje. Przygotuj też strukturę nowego serwisu.
Zaplanuj, że w serii będą dostępne następujące strony (lub grupy stron):
• Strona główna – strona zawierająca informacje ogólne o sprzedawanym towarze
• Nowości – strona zawierająca informacje o nowościach
• Strona z informacją o produktach – strony umożliwiające przeglądanie lub wyszukiwanie
produktów
• Ankieta dla klientów – ankieta dla klientów oraz ankieta opinie o stronie
• Informacja o firmie – informacje o działalności firmy
• Zawartość serwisu – strona zawiera mapę serwisu wyświetloną w postaci struktury
Wyświetl strukturę w menu oraz na stronie Zawartosc.aspx umieść kontrolkę wyświetlającą mapę
serwis w postaci struktury.
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 8
Wersja 1
Kontrolki danych w ASP.NET
Spis treści
Kontrolki danych w ASP.NET ................................................................................................................ 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Uwagi dla studenta ...................................................................................................................... 8
Dodatkowe źródła informacji....................................................................................................... 8
Laboratorium podstawowe .................................................................................................................. 9
Problem 1 (czas realizacji 20 min) ................................................................................................ 9
Problem 2 (czas realizacji 15 min) .............................................................................................. 13
Problem 3 (czas realizacji 10 min) .............................................................................................. 15
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące komunikacji i wyświetlania
informacji z bazy danych w aplikacjach internetowych. Nauczysz się
definiować zapytania przy pomocy kontrolki LinqDataSource
i wyświetlać wyniki w kontrolkach GridView oraz Repeater.
Cel modułu
Celem modułu jest poznanie zasad współpracy aplikacji internetowych
z bazą danych, definiowania źródeł danych oraz wyświetlania informacji na
podstawie tej definicji.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• wiedział jak określać źródło danych w aplikacjach internetowych
• potrafił konfigurować kontrolki źródła danych
• potrafił łączyć kontrolki źródła danych z kontrolkami prezentacji
danych
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy pracy z aplikacjami internetowymi
w Visual Studio 2008
• znać podstawy języka zapytań SQL
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznać się z materiałem zawartym
w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS” oraz
„Wprowadzenie do ASP.NET”.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-3
Przygotowanie teoretyczne
Przykładowy problem
Każda dynamiczna aplikacja internetowa komunikuje się ze źródłem danych. Takim źródłem
najczęściej jest serwer baz danych. Istnieje potrzeba pobierania tych danych i prezentowania ich na
stronach internetowych.
Firmy tworząc strony internetowe nie chcą już mieć statycznych wizytówek, ale wymagają, aby
aplikacje internetowe mogły dynamicznie tworzyć zawartość na podstawie danych generowanych
przez systemy wewnętrzne. Coraz częściej firmy na swoich stronach oferują produkty lub/i usługi,
które klient strony może kupić. W tym celu niezbędna jest interakcja z użytkownikiem. Musi on
mieć możliwość wyszukania odpowiedniej oferty, dopasowania jej do własnych potrzeb i w końcu
bezpiecznego zakupu wybranego towaru. Aby ułatwić to zadanie musimy na naszych stronach
pobierać, wyświetlać, uaktualniać, dodawać, usuwać i sortować rekordy pobierane z bazy.
Ważne jest, aby praca, którą włożymy w tworzenie aplikacji była jak najmniejsza. Chcemy mieć
proste i łatwe narzędzia do tworzenia rozbudowanych serwisów internetowych. Chcemy móc
odpytywać źródło danych nawet nie znając języka SQL.
Podstawy teoretyczne
Aplikacje internetowe coraz częściej wymagają przechowywania i przetwarzania dużych ilości
danych. Dane te są przechowywane w bazie danych, skąd są pobierane i dokąd są zapisywane
nowe. ASP.NET dostarcza dużą kolekcję kontrolek umożliwiających pobieranie i wyświetlanie
danych w różnych formach prezentacji.
Technologię umożliwiającą dostęp do baz danych dla aplikacji napisanych na platformie .NET jest
ADO.NET. ADO.NET koncentruje się na trzech najważniejszych elementach: połączeniu do bazy,
wysłaniu zapytań do bazy i odebraniu wyników tych zapytań.
Przegląd kontrolek źródła danych w ASP.NET 3.5
ASP.NET posiada zestaw kontrolek umożliwiających pracę z różnego rodzaju źródłem danych tj.
baza danych, plik XML czy warstwa pośrednia obiektów biznesowych. Kontrolki źródła danych łączą
się i pobierają dane ze źródła danych a następnie udostępniają te dane innym kontrolkom bez
konieczności tworzenia kodu. Kontrolki te również umożliwiają zmianę danych. Model źródła
danych w ASP.NET jest rozszerzalny więc możemy tworzyć własne kontrolki źródła danych które
pobierają dane z różnych źródeł danych lub rozszerzają funkcjonalność istniejących źródeł danych.
W celu wsparcia różnych scenariuszy dodawania danych platforma .NET zawiera różne kontrolki
źródła danych. Tab. 1 zawiera opis wbudowanych kontrolek.
Tab. 1 Przegląd kontrolek źródła danych
Nazwa kontrolki Opis
LinqDataSource
Umożliwia użycie języka LINQ na stronach ASP.NET poprzez model
deklaratywny do pobrania i modyfikowania danych z obiektów danych
takich jak tabele w bazie czy kolekcje w pamięci serwera. Wspiera
automatyczne generowanie poleceń wybierania, aktualizacji, dodawania i
usuwania danych. Kontrolka wspiera sortowanie, filtrowanie i dzielenie na
strony.
EntityDataSource Umożliwia połączenie z danymi pochodzącymi z modelu Entity Data
Model (EDM). Wspiera automatyczne generowanie poleceń wybierania,
aktualizacji, dodawania i usuwania danych. Kontrolka wspiera sortowanie,
filtrowanie i dzielenie na strony.
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-4
ObjectDataSource Umożliwia połączenie z obiektami logiki biznesowej i innych klas i służy do
tworzenia aplikacji webowych które bazują na obiektach warstwy
pośredniej do zarządzania danymi. Wspiera zaawansowane sortowania i
dzielenie na strony niedostępne w innych kontrolkach źródeł danych.
SqlDataSource Umożliwia połączenie do serwerów baz danych takich jak Microsoft SQL
Server czy Oracle. We współpracy z serwerem SQL Server wspiera
zaawansowane możliwości buforowania. Kontrolka wspiera również
sortowanie, filtrowanie i dzielenie na strony, jeśli dane są zwracane jako
obiekt DataSet.
AccessDataSource Umożliwia współpracę z bazami danych zapisanymi w Microsoft Access.
Kontrolka wspiera sortowanie, filtrowanie i dzielenie na strony, jeśli dane
są zwracane jako obiekt DataSet.
XmlDataSource Umożliwia pobieranie danych zapisanych w plikach XML, szczególnie dla
hierarchicznych kontrolek serwerowych ASP.NET takich jak TreeView.
Wspiera filtrowanie przy użyciu wyrażeń XPath i umożliwia stosowanie
transformacji danych przy użyciu XSLT. Umożliwia również aktualizację
danych przez zapisanie całego dokumentu XML ze zmianami.
SiteMapDataSource Używana w ASP.NET do nawigacji na stronie.
Przegląd kontrolek prezentacji danych
Kontrolki prezentacji danymi umożliwiają połączenie z dowolną kontrolką źródła danych.
Automatycznie pobierają dane, a następnie zamieniają je w znaczniki przesyłane do klienta w
przeglądarce. Kontrolki te mogą wykorzystywać możliwości udostępniane przez kontrolki źródła
danych takie jak sortowanie, dzielenie na strony, buforowanie, filtrowanie, aktualizacja, usuwanie i
dodawanie wierszy danych. Kontrolka wyświetlania danych jest podłączona do kontrolki źródła
danych za pomocą właściwości DataSourceID.
Lista kontrolek:
• Kontrolki listy – wyświetlają dane w różnych formatach, kontrolki listy to: BulletedList,
CheckBoxList, DropDownList, ListBox i RadioButtonList.
• AdRotator – wyświetla ogłoszenia na stronie – dane o lokalizacji mogą być umieszczone w
źródle danych.
• DataList – wyświetla dane w tabeli, każdy element jest wyświetlany zgodnie z szablonem
zdefiniowanym przez nas.
• DetailsView – wyświetla jeden rekord w układzie tabelarycznym i umożliwia edycję,
usuwanie i dodawanie rekordów.
• FormView – kontrolka podobna do kontrolki DetailsView, ale umożliwia definiowanie
wyglądu dla każdego rekordu. Kontrolka FormView jest podobna do kontrolki DataList, ale
dla pojedynczego rekordu.
• GridView – wyświetla dane w tabeli i umożliwia edycję, zmianę, usuwanie, sortowanie,
dzielenie na strony bez konieczności pisania kodu.
• ListView – wyświetla dane zgodnie z definicją umieszczoną w szablonie. Umożliwia
automatyczne sortowanie, edycję, dodawanie i usuwanie rekordów. Możliwe jest również
dzielenie na strony przy pomocy połączonej kontrolki DataPager.
• Repeater – wyświetla dane w postaci listy. Każdy rekord jest wyświetlany przy użyciu
szablonu.
• TreeView – wyświetla dane w postaci drzewa hierarchicznego z rozwijanymi węzłami.
• Menu – wyświetla dane w postaci hierarchicznego, dynamicznego menu, który może
zawierać podmenu.
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-5
Połączenie do bazy danych
Zanim rozpocznie się wysyłanie zapytań do bazy należy się z nią połączyć. W wielu przypadkach
wiąże się to z koniecznością uwierzytelnienia (np. przy pomocy nazwy użytkownika i hasła).
Informacje o połączeniu są wysyłane jako ciąg znaków zawierających różne parametry konfiguracji
połączenia w postaci tzw. łańcucha połączenia (ang. connection string).
W celu uzyskania dostępu do źródła danych potrzebny jest dostawca danych (ang. provider) – jest
to biblioteka, umożliwiająca komunikację ze źródłem danych w trybie binarnym.
W ASP.NET standardowo możliwe jest korzystanie z następujących dostawców:
• ODBC .NET Data Provider (System.Data.ODBC)
• OLE DB .NET Data Provider (System.Data.OleDb)
• Oracle .NET Data Provider (System.Data.OracleClient)
• Microsoft SQL Server .NET Data Provider (System.Data.SqlClient)
Połączenie i tworzenie zapytań przy pomocy kontrolki SqlDataSource
W celu utworzenia połączenia do bazy danych można skorzystać z kontrolki SqlDataSource. Po
dodaniu kontrolki do formularza należy określić następujące atrybuty:
• ConnectionString – łańcuch połączenia.
• ProviderName – nazwa dostawcy danych.
• SelectCommand – polecenie SQL zawierające treść zapytania do bazy danych lub nazwa
procedury składowanej do wykonania.
Przykład:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.\SQLEXPRESS; AttachDbFilename=|DataDirectory|\CDDB.mdf;Integrated Security=True; User Instance=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Kategorie]"> </asp:SqlDataSource>
Łańcuch połączenia najlepiej jest umieścić w pliku konfiguracyjnym aplikacji. W tym celu należy
dodać w bloku <configuration> w pliku konfiguracyjnym Web.config następujący blok:
<connectionStrings> <add name="PolaczenieDoBazy" connectionString="Data Source=.\SQLEXPRESS; AttachDbFilename=|DataDirectory|\CDDB.mdf;Integrated Security=True; User Instance=True" providerName="System.Data.SqlClient" /> </connectionStrings>
Teraz należy w kontrolce SqlDataSource zainicjalizować właściwość ConnectionString jak w
przykładzie:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PolaczenieDoBazy %>" SelectCommand="SELECT * FROM [Kategorie]"> </asp:SqlDataSource>
Treść zapytania do bazy można skonfigurować bezpośrednio w kontrolce SqlDataSource. W
poprzednim rozdziale przedstawiono sposób deklaracji zapytania SELECT za pomocą atrybutu
SelectCommand. Atrybuty kontrolki umożliwiają dodatkowo deklarację treści polecenia INSERT –
za pomocą atrybutu InsertCommand, UPDATE – za pomocą atrybutu UpdateCommand oraz
DELETE – za pomocą atrybutu DeleteCommand. Kontrolka umożliwia wysłanie tych komend przy
pomocy metod Select, Insert, Update oraz Delete. Możliwe jest zdefiniowanie wszystkich
czterech poleceń w jednej kontrolce:
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-6
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PolaczenieDoBazy %>" SelectCommand="SELECT * FROM [Kategorie]" DeleteCommand="DELETE FROM [Kategorie] WHERE [KatID] = @KatID" InsertCommand="INSERT INTO [Kategorie] ([Nazwa]) VALUES (@Nazwa)" UpdateCommand="UPDATE [Kategorie] SET [Nazwa] = @Nazwa WHERE [KatID] = @KatID"> <DeleteParameters> <asp:Parameter Name="KatID" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="Nazwa" Type="String" /> <asp:Parameter Name="KatID" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="Nazwa" Type="String" /> </InsertParameters> </asp:SqlDataSource>
Połączenie do bazy i tworzenie zapytań przy pomocy kontrolki LinqDataSource
Największą zaletą kontrolki LinqDataSource jest możliwość definiowania zapytań poprzez model
deklaratywny. Kontrolka może pobierać dane z bazy danych lub z kolekcji danych umieszczonych w
pamięci serwera, takich jak tablice. W postaci deklaracji można zapisać wszystkie warunki do
pobrania, filtrowania, sortowania i grupowania danych. Dodatkowo w przypadku pobierania
danych z bazy danych kontrolka umożliwia zmianę, dodawanie i usuwanie rekordów. Kontrolka
wykonuje to bez konieczności tworzenia zapytań SQL, aby wykonać te zadania.
W przypadku korzystania z bazy danych należy najpierw przygotować opis struktury danych przy
pomocy DBML (ang. DataBase Markup Language). Visual Studio wspiera tworzenie tego opisu przy
pomocy szablonu LINQ to SQL Classes. Następnie możemy określić następujące właściwości
kontrolki:
• ContextTypeName – umożliwia określenie nazwy klasy zawierającej opis struktury bazy
danych.
• TableName – nazwa tabeli lub widoku, który będzie źródłem danych.
• Where – określenie warunku.
• Select – umożliwia wybranie określonych kolumn.
Przykład kontrolki:
<asp:LinqDataSource ID="KategorieLinqDataSource" runat="server" ContextTypeName="AdventureWorksDataContext" TableName="ProductCategories" Where="ParentProductCategoryID=null" > </asp:LinqDataSource>
Przykłady kontrolek
Kontrolka GridView
Kontrolka GridView umożliwia wyświetlanie, sortowanie, wybór, stronicowanie i edycję danych.
Kontrolka GridView wyświetla dane w układzie tabelarycznym. Każdy rekord jest prezentowany
jako wiersz tabeli. Kontrolka umożliwia określenia atrybutu DataSourceID zawierającego
identyfikator źródła danych zdefiniowanego w projekcie np. kontrolki SqlDataSource.
Sortowanie
Zezwolenie na sortowanie za pomocą przypisania do atrybutu AllowSorting wartości
true,zmienia etykiety nagłówka w odnośniki, po wybraniu których rekordy są sortowane rosnąco
lub malejąco.
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-7
<asp:GridView ID="GridView1" runat="server" AllowSorting="true" DataSourceID="SqlDataSource1"> </asp:GridView>
Stronicowanie
Jeśli w tabeli znajduje się wiele rekordów, to wyświetlenie ich wszystkich na stronie może
spowodować pewne problemy, np. nieprawidłową prezentację elementów strony, dlatego warto
rozważyć podzielenie wyników na strony. Stronicowanie ustala się z pomocą dwóch atrybutów:
• AllowPaging="true" – włączenie stronicowania.
• PageSize – określenie (za pomocą liczby dziesiętnej) ilości rekordów na stronę.
Przykład:
<asp:GridView ID="GridView1" runat="server" AllowSorting="true" DataSourceID="SqlDataSource1" AllowPaging="true" PageSize="3"> </asp:GridView>
Edycja danych
Kontrolka GridView umożliwia również edycję danych bez konieczności pisania kodu programu.
Przypisanie wartości true do atrybutów AutoGenerateEditButton oraz
AutoGenerateDeleteButton tworzy odnośniki Edit oraz Delete, umożliwiające edycję lub
usunięcie danego rekordu:
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"> </asp:GridView>
Formatowanie kontrolki GridView
Kontrolka GridView zawiera wiele właściwości umożliwiających określenie jej wyglądu oraz
właściwość CssClass, umożliwiającą kontrolowanie jej wyglądu przy pomocy klas CSS.
Kontrolka Repeater
Kontrolka Repeater umożliwia w pełni konfigurowalne wyświetlanie danych. Sposób prezentacji
danych w tej kontrolce jest całkowicie zależny od programisty i umożliwia wyświetlanie danych w
dowolnym układzie i formacie zależnym od zdefiniowanego szablonu.
Kontrolka Repeater udostępnia następujące typy szablonów:
• ItemTemplate – definiuje wygląd każdego rekordu lub jeśli zostanie zdefiniowany szablon
AlternatingItemTemplate – wygląd rekordów nieparzystych.
• AlternatingItemTemplate – definiuje wygląd rekordów parzystych.
• FooterTemplate – definiuje wygląd stopki kontrolki.
• HeaderTemplate – definiuje wygląd nagłówku kontrolki.
• SeparatorTemplate – definiuje wygląd separatora kolejnych rekordów.
W celu wyświetlenia rekordów należy stworzyć szablon wyświetlania. Poniższy przykład wyświetla
odnośniki do strony Szczegoly.aspx wraz z przekazaniem parametrów prodID oraz KatID. Na
ekranie przeglądarki zostanie wyświetlony odnośnik zawierający nazwę produktu oraz informacja o
jego cenie. Najbardziej podstawowym z szablonów jest ItemTemplate. Kolejność deklaracji
szablonów nie ma znaczenia. Przykład:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <a href="Szczegoly.aspx?prodID=<%# Eval("ProdID") %>&KatID= <%# Eval("KatID") %>"><%# Eval("Nazwa") %></a><br /> <span style="padding-left: 20px">w super cenie <span style="color:Red"><%# Eval("Cena","{0:c}") %></span></span><br/>
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-8
</ItemTemplate> <SeparatorTemplate> ===============<hr /> </SeparatorTemplate> <FooterTemplate> Pamiętaj TA promocja jest TYLKO dzisiaj </FooterTemplate> </asp:Repeater>
Szablony kontrolki Repeater
Podsumowanie
W tym rozdziale przedstawione zostały kontrolki źródła i prezentacji danych. Porównano
połączenie i tworzenie zapytań do bazy danych przy pomocy kontrolki SqlDataSource i
LinqDataSource. Przedstawiono kontrolkę GridView oraz Repeater.
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• wiesz jakie kontrolki służą do pobierania, a jakie do wyświetlania danych
• potrafisz wybrać odpowiednią kontrolkę prezentacji danych w zależności od potrzeb
• wiesz jak dodać i skonfigurować kontrolkę LinqDataSource, GridView oraz Repeater
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. Piotr Gaszewski, ASP.NET 2.0 – Metody dostępu do danych - wprowadzenie,
http://codeguru.pl/article-454.aspx
W artykule autor przedstawił podstawy metod dostępu do danych. Prezentuje
kontroki SqlDataSource, GridView i DetailsView w akcji. Pokazuje również
wstęp do tworzenia biznesowej warstwy pośredniej.
2. Jacek Matulewski, Sławomir Orłowski, Technologie ASP.NET i ADO.NET w Visual Web Developer,
Helion, 2007
Książka zawiera opis technik i narzędzi do tworzenia witryn internetowych za
pomocą ASP.NET i ADO.NET. Dzięki niej nauczysz się korzystać z tych technologii w
środowisku Visual Web Developer oraz używać podstawowych języków do
programowania stron ASP.NET. Dowiesz się, jak wygodnie zarządzać bazami danych
w aplikacjach sieciowych i jak sprawnie umieścić gotową witrynę na serwerze.
3. Data Access Tutorials, http://www.asp.net/learn/data-access
Na stronie znajdziesz serię tutoriali, które przedstawią techniki implementacji
metod dostępu do danych w ASP.NET. Tutoriale zawierają kod źródłowy w Visual
C#.
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Laboratorium podstawowe
Problem 1 (czas realizacji
Po przygotowaniu szablonu aplikacji Twój klient z uśmieche
i powiedział „To jest nasza baza, proszę zobacz ją i przygotuj stronę internetową do działania”.
Co to znaczy działania? Okazało się, że baza jest dostępna w języku angielskim. Klient chce wejść na
polski rynek i aktualnie p
przyśpieszenia prac nad stroną masz już teraz wykorzystać tą bazę, bo później nowa baza będzie
miała taką samą strukturę.
Twoim pierwszym zadaniem będzie wyświetlenie produktów z wybranej przez
kategorii. Produkty są umieszczone w tabeli
Diagram z tymi tabelami przedstawia
Najbardziej zwróciła Twoją uwagę
grupa kategorii nadrzędnych
stronie musisz zatem wyświetlić dwie kontrolki z kategoriami
kategorii – podrzędną.
Zadanie Tok postępowania
1. Otwórz
aplikacje
internetową z
poprzedniego
modułu
• Otwórz Visual
• Z menu wybierz
• Zlokalizuj folder z aplikacją z poprzedniego modułu.
• Kliknij
2. Dodaj źródło
danych
• Kliknij prawym przyciskiem
existing item
• O
3. Sprawdź
źródło danych
• Dwukrotnie kliknij dodany plik.
• W oknie
• Kli
Strona 8-9
Laboratorium podstawowe
(czas realizacji 20 min)
Po przygotowaniu szablonu aplikacji Twój klient z uśmiechem na twarzy wręczył Tobie płytę
powiedział „To jest nasza baza, proszę zobacz ją i przygotuj stronę internetową do działania”.
to znaczy działania? Okazało się, że baza jest dostępna w języku angielskim. Klient chce wejść na
polski rynek i aktualnie przygotowuje lokalizację produktów i informacji o nich. W celu
przyśpieszenia prac nad stroną masz już teraz wykorzystać tą bazę, bo później nowa baza będzie
Twoim pierwszym zadaniem będzie wyświetlenie produktów z wybranej przez
kategorii. Produkty są umieszczone w tabeli Product, a kategorie w tabeli
z tymi tabelami przedstawia Rys. 2.
Rys. 2 Diagram z tabelami Product i ProductCategory
zwróciła Twoją uwagę relacja na tabeli ProductCategory. Oznacza ona, że istnieje
nadrzędnych, których pole ParentProductCategoryIDwyświetlić dwie kontrolki z kategoriami: nadrzędną i
Tok postępowania
Otwórz Visual Studio 2008.
Z menu wybierz File -> Open Web Site.
Zlokalizuj folder z aplikacją z poprzedniego modułu.
Kliknij OK.
Kliknij prawym przyciskiem myszy katalog App_Data
existing item.
Odnajdź plik AdventureWorksLT_Data.mdf i kliknij
Dwukrotnie kliknij dodany plik.
W oknie Server Explorer sprawdź zawartość bazy danych.
Kliknij dwukrotnie tabelę Customer.
Jakie informacje możemy zobaczyć? Jak sprawdzić zawartość tabeli
Moduł 8
Kontrolki danych w ASP.NET
m na twarzy wręczył Tobie płytę
powiedział „To jest nasza baza, proszę zobacz ją i przygotuj stronę internetową do działania”.
to znaczy działania? Okazało się, że baza jest dostępna w języku angielskim. Klient chce wejść na
rzygotowuje lokalizację produktów i informacji o nich. W celu
przyśpieszenia prac nad stroną masz już teraz wykorzystać tą bazę, bo później nowa baza będzie
Twoim pierwszym zadaniem będzie wyświetlenie produktów z wybranej przez użytkownika strony
, a kategorie w tabeli ProductCategory.
. Oznacza ona, że istnieje
ParentProductCategoryID ma wartość null. Na
nadrzędną i – po dokonaniu wyboru
Zlokalizuj folder z aplikacją z poprzedniego modułu.
App_Data i wybierz Add
i kliknij Add.
sprawdź zawartość bazy danych.
Jak sprawdzić zawartość tabeli?
Piotr Bubacz
ITA-103 Aplikacje Internetowe
4. Dodaj
konwerter danych
dla języka LINQ
• Wybierz
• Z okna
AdventureWorks.dbml
• W oknie z
(Rys.
• Do nowo otwartego pliku
Relational Designer
——————————
• Zapisz plik.
5. Wyświetl
główne kategorie
produktów
• Do strony
Properities:
—————
• Dodaj kontrolkę
Kliknij
• W oknie
—
——
—
Strona 8-10
Wybierz Website -> Add New Item.
Z okna Templates wybierz LINQ to SQL Classes, w oknie
AdventureWorks.dbml.
W oknie z pytaniem o dodanie specjalnego pliku do katalogu
Rys. 3) wciśnij Yes.
Rys. 3 Pytanie o przeniesienie pliku do katalogu
Do nowo otwartego pliku po lewej jego stronie –
Relational Designer z okna Server Explorer przenieś
— Address
— Customer
— CustomerAddress
— Product
— ProductCategory
— ProduktDescription
— ProduktModel
— ProduktModelProduktDescription
— SalesOrderDetail
— SalesOrderHeader
Zauważ, że oprócz tabel pojawiły się również relacje między nimi.
apisz plik.
Do strony Produkty.aspx dodaj kontrolkę LinqDataSource
Properities:
— w polu ID wpisz KategorieLinqDataSource
— w polu ContextTypeName wpisz AdventureWorksDataContext
— w polu TableName wpisz ProductCategories
— w polu Where wpisz ParentProductCategoryID=null
— w polu Select wpisz new (ProductCategoryID, Name)
Dodaj kontrolkę ListBox i zmień jej właściwość ID
Kliknij Smart Tag i wybierz Choose Data Source.
W oknie Data Source Configuration Wizard (Rys.
— z listy rozwijanej Select a data Source
KategorieLinqDataSource
— wciśnij link Refresh Schema
— z listy rozwijanej Select a data field to display In the ListBox
Name
— z listy rozwijanej Select a data field for the value of the ListBox
wybierz ProductCategoryID
Moduł 8
Kontrolki danych w ASP.NET
, w oknie Name wpisz
o dodanie specjalnego pliku do katalogu App_Code
Pytanie o przeniesienie pliku do katalogu App_Code
do obszaru The Object
przenieś następujące tabele:
Zauważ, że oprócz tabel pojawiły się również relacje między nimi.
LinqDataSource i w oknie
AdventureWorksDataContext
ParentProductCategoryID=null
new (ProductCategoryID, Name)
ID na KategorieListBox.
Rys. 4):
Select a data Source wybierz
Select a data field to display In the ListBox wybierz
Select a data field for the value of the ListBox
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-11
Rys. 4 Okno Data Source Configuration Wizard
• Po kliknięciu OK ponownie kliknij Smart Tag, a następnie zaznacz opcję
Enable AutoPostBack.
6. Wyświetl listę
podkategorii
• Do strony dodaj kontrolkę LinqDataSource i zmień jej właściwość ID na
PodkategorieLinqDataSource.
• Kliknij SmartTag i wybierz Configure Data Source.
• W oknie Choose a Content Object wybierz
AdventureWorksDataContext i kliknij Next.
• W oknie Configure Data Selection z listy Tables wybierz
ProductCategories, w obszarze Select zaznacz ProductCategoryID oraz
Name.
• Kliknij przycisk Where.
• W oknie Configure Where Expression (Rys. 5):
— z listy rozwijanej Column wybierz ParentProductCategoryID
— z listy rozwijanej Operator wybierz ==
— z listy rozwijanej Source wybierz Control
— z listy rozwijanej Control ID wybierz KategorieListBox
— w polu Default value wpisz -1
— kliknij przycisk Add
Rys. 5 Konfiguracja w oknie Configure Where Expression
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-12
• Dodaj kontrolkę ListBox i określ jej właściwość ID na
PodkategorieListBox. Kliknij Smart Tag i wybierz Choose Data Source.
• W oknie Data Source Configuration Wizard wybierz:
— z listy rozwijanej Select a data Source wybierz
PodkategorieLinqDataSource
— z listy rozwijanej Select a data field to display In the ListBox wybierz
Name
— z listy rozwijanej Select a data field for the value of the ListBox
wybierz ProductCategoryID
• Po kliknięciu OK ponownie kliknij Smart Tag, a następnie zaznacz opcję
Enable AutoPostBack.
7. Dodaj
kontrolkę danych
do wyświetlania
produktów
w wybranej
kategorii
• Do strony dodaj kontrolkę LinqDataSource zmień właściwość ID na
ProduktyLinqDataSource.
• Kliknij Smart Tag i wybierz Configure Data Source.
• W oknie Choose a Content Object wybierz
AdventureWorksDataContext i kliknij Next.
• W oknie Configure Data Selection z listy Tables wybierz Products. W
obszarze Select wybierz ProductID, Name, ProductNumber, Color,
ListPrice.
• Kliknij przycisk Where.
• W oknie Configure Where Expression:
— z listy rozwijanej Column wybierz ProductCategoryID
— z listy rozwijanej Operator wybierz ==
— z listy rozwijanej Source wybierz Control
— z listy rozwijanej ControlID wybierz PodkategorieListBox
— w oknie Default value wpisz -1
— kliknij przycisk Add
8. Sformatuj
wyświetlanie
produktów
• Z okna Toolbox, sekcja Data do strony dodaj kontrolkę GridView.
• Kliknij Smart Tag i z listy rozwijanej Choose Data Source wybierz
ProduktyLinqDataSource.Kliknij Smart Tag kontrolki GridView, a
następnie wybierz opcje Edit Columns.
• Za pomocą przycisku usuń wszystkie pola za wyjątkiem
ProductNumber, Color i ListPrice.
• Z list Available fields wybierz HyperLinkField i wciśnij Add.
• W obszarze HyperLinkField properities:
— w polu HeaderText wpisz Nazwa produktu
— w polu DataNavigateUrlFields wpisz ProductID
— w polu DataNavigateUrlFormatString wpisz ~/Szczegoly.aspx?id={0}
— w polu DataTextField wpisz Name
• Przy pomocy przycisku ustal pole na pierwszej pozycji.
• Dla pola ProductNumber określ właściwość HeaderText="Numer
katalogowy".
• Dla pola Color określ właściwość HeaderText="Kolor".
• Dla pola ListPrice określ właściwość HeaderText="Cena" oraz
DataFormatString="{0:c}".
9. Włącz
stronicowanie
• Dla kontrolki GridView określ właściwości:
Piotr Bubacz
ITA-103 Aplikacje Internetowe
wyświetlanych
wyników
——
10. Zapisz i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie i przetestuj
produktów na stronie
• Zmień właściwość
najlepiej wyświetlana na stronie.
11. Napraw błąd
wyświetlania
kontrolki
GridView
• W przeglądarce wybierz główną kategorię, następnie wybierz kategorię
podrzędną. Tera wybierz pono
• Wybierz kontrolkę
EnableViewState
• Zapisz zmiany i ponownie przetestuj kontrolkę
Problem 2 (czas realizacji
Twoim kolejnym zdaniem jest umożliwienie wyszukiwania określonego produktu. Wyniki
wyszukiwania mają zostać wyświetlone wraz z kontrolk
umożliwiające wyszukiwanie.
Zadanie Tok postępowania
1. Dodaj
kontrolkę
użytkownika do
wyszukiwania
• Wybierz
• Kliknij prawym przyciskiem myszy dodany katalog i wybierz
Item
———
• Na otwartej stronie
kontrolkę
• Dodaj
————
• Dodaj kontrolkę
Text="
• Do metody obsługi przycisku dodaj następujący kod:
string url = String.Format("~/NazwaProduktuTextBox.Text);Response.Redirect(url);
2. Do strony
Szukaj.aspx dodaj
kontrolkę Szukaj
• W widoku
przeciągnij
3. Dodaj stronę
wyświetlającą
wyniki
wyszukiwania
• Do aplikacji dodaj stronę
strony
• Na stronie wpisz
Strona 8-13
— AllowPaging: true
— PageSize: 5
Zapisz zmiany w projekcie i przetestuj możliwość wyświetlania
produktów na stronie Produkty.aspx.
Zmień właściwość PageSize kontrolki GridView
najlepiej wyświetlana na stronie.
W przeglądarce wybierz główną kategorię, następnie wybierz kategorię
podrzędną. Tera wybierz ponownie inną kategorię główną.
Co się stało z kontrolką GridView? Dlaczego nadal jest wyświetlana?
Wybierz kontrolkę GridView i w oknie
EnableViewState z listy rozwijanej wybierz False.
Zapisz zmiany i ponownie przetestuj kontrolkę GridView
Dlaczego tym razem kontrolka działa poprawnie?
(czas realizacji 15 min)
Twoim kolejnym zdaniem jest umożliwienie wyszukiwania określonego produktu. Wyniki
wyszukiwania mają zostać wyświetlone wraz z kontrolką do wyszukiwania.
umożliwiające wyszukiwanie.
Tok postępowania
Wybierz Website->New Folder i nazwij go Kontrolki
Kliknij prawym przyciskiem myszy dodany katalog i wybierz
Item. W oknie Add New Item:
— W obszarze Template wybierz Web User Control
— w polu Name wpisz Szukaj.ascx
— z listy Language wybierz Visual C#
Na otwartej stronie wpisz Podaj nazwę produktu:
kontrolkę TextBox i zmień jej właściwość ID na na
Dodaj kolejno kontrolkę RequiredFieldValidator i w oknie
— w polu ID wpisz NazwaRequiredFieldValidator
— w polu ControlToValidate wpisz nazwaTextBox
— w polu ErrorMessage wpisz Podaj fragment nazwy produktu
— w polu Text wpisz *
Dodaj kontrolkę Button o właściwościach ID="
Text="Szukaj". W widoku Design kliknij dwukrotnie kontrolkę
Do metody obsługi przycisku dodaj następujący kod:
string url = String.Format("~/WynikiWyszukiwaniaNazwaProduktuTextBox.Text); Response.Redirect(url);
W widoku Design do strony Szukaj.aspx z okna
przeciągnij kontrolkę Szukaj.ascx.
Do aplikacji dodaj stronę WynikiWyszukiwania.aspx
strony SzablonStrony.master.
Na stronie wpisz Wyniki wyszukiwania:.
Moduł 8
Kontrolki danych w ASP.NET
możliwość wyświetlania
GridView tak, aby była jak
W przeglądarce wybierz główną kategorię, następnie wybierz kategorię
wnie inną kategorię główną.
? Dlaczego nadal jest wyświetlana?
i w oknie Properties w polu
.
GridView.
Dlaczego tym razem kontrolka działa poprawnie?
Twoim kolejnym zdaniem jest umożliwienie wyszukiwania określonego produktu. Wyniki
do wyszukiwania. Przygotuj elementy
Kontrolki.
Kliknij prawym przyciskiem myszy dodany katalog i wybierz Add New
Web User Control
Podaj nazwę produktu:, a następnie Dodaj
nazwaTextBox.
i w oknie Properties:
RequiredFieldValidator
nazwaTextBox
fragment nazwy produktu
ID="szukajButton" oraz
kliknij dwukrotnie kontrolkę Button.
Do metody obsługi przycisku dodaj następujący kod:
WynikiWyszukiwania.aspx?Nazwa={0}",
z okna Solution Explorer
WynikiWyszukiwania.aspx opartą na szablonie
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-14
• W nowej linii dodaj kontrolkę GridView i w oknie Properties:
— w polu ID wpisz WynikiWyszukiwaniaGridView
— w polu AutoGenerateColumns z listy rozwijanej wybierz False
— w polu DataKeyNames wpisz ProductID
• W widoku Source dodaj w ciele kontrolki GridView (pomiędzy znaczniki
<asp:GridView…> a </asp:GridView>):
<Columns> <asp:HyperLinkField DataNavigateUrlFields="ProductID" DataNavigateUrlFormatString="~/Szczegoly.aspx?id={0}" HeaderText="Nazwa produktu" DataTextField="Name" Text="Nazwa produktu" /> <asp:BoundField DataField="ProductNumber" HeaderText="Numer katalogowy" SortExpression="ProductNumber" /> <asp:BoundField DataField="Color" HeaderText="Kolor" SortExpression="Color" /> <asp:BoundField DataField="ListPrice" DataFormatString="{0:c}" HeaderText="Cena" SortExpression="ListPrice" /> </Columns>
• Poniżej kontrolki GridView w widoku Source wpisz <br />Szukaj:<br />.
• W widoku Design do ostatniego wiersza na stronie dodaj kontrolkę
użytkownika Szukaj.ascx.
4. Dodaj kod
umożliwiający
wyszukiwanie
• W pliku WynikiSzukania.aspx.cs do metody Page_Load dodaj
następujący kod:
string nazwa = Request.QueryString["Nazwa"]; if (nazwa!=null) { AdventureWorksDataContext db = new AdventureWorksDataContext(); var produkty = from p in db.Products where p.Name.Contains(nazwa) select p; WynikiWyszukiwaniaGridView.DataSource = produkty; WynikiWyszukiwaniaGridView.DataBind(); }
5. Zapisz i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie i przetestuj możliwość wyszukiwania
produktów.
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Problem 3 (czas realizacji
Twój klient wymyślił, że na stronie głównej ma być wyświetlana lista kategorii nadrzędnych
kliknięciu których użytkownik strony
wybraną nadrzędną kategorią.
Zadanie Tok postępowania
1. Dodaj
kontrolkę
użytkownika
wyświetlającą
główne kategorie
• Do katalogu
Kategorie.ascx
• Następnie dodaj kontrolkę
właściwość
————
• Dodaj kontrolkę
——
• W
<HeaderTemplate> </HeaderTemplate><ItemTemplate> </ItemTemplate>
• Zapisz zmiany.
2. Dodaj
kontrolkę do
szablonu strony
• Otwórz szablon strony
• W widoku
po lewej stronie o
• Zapisz zmiany.
3. Zapisz i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie i sprawdź
wyświetlanie są odpowiednie podkategorie na stronie przeglądania
produktów.
4. Dodaj
możliwość
wyświetlania
podkategorii na
podstawie
parametru
wywołania strony
• Otwórz plik
string katID= Request.QueryString["katID"];if (katID != null)
5. Zapisz i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie i sprawdź
wyświetlanie są odpowiednie podkategorie na stronie przeglądania
produktów.
Strona 8-15
(czas realizacji 10 min)
Twój klient wymyślił, że na stronie głównej ma być wyświetlana lista kategorii nadrzędnych
użytkownik strony będzie przekierowywany na stronę wyświetlania produktów z
wybraną nadrzędną kategorią.
Tok postępowania
Do katalogu Kontrolki dodaj nową kontrolkę użytkownika o nazwie
Kategorie.ascx.
Następnie dodaj kontrolkę LinqDataSource.
właściwość ID na KategorieLinqDataSource i w oknie
— w polu ContextTypeName wpisz AdventureWorksDataContext
— w polu Select wpisz new (ProductCategoryID, Name)
— w polu TableName wpisz ProductCategories
— w polu Where wpisz ParentProductCategoryID=null
Dodaj kontrolkę Repeater i w oknie Properties:
— w polu ID wpisz KategorieRepeater
— w polu DataSourceID z listy rozwijanej wybierz
KategorieLinqDataSource".
W widoku Source w kontrolce Repeater dodaj:
<HeaderTemplate> <strong>Wybierz kategorię produktu</strong> </HeaderTemplate> <ItemTemplate> <asp:HyperLink ID="HyperLink1" runat="Server" NavigateUrl='<%# "~/Produkty.aspx?KatID=" + Eval("ProductCategoryID") %>' Text='<%# Eval("Name") %>'> </asp:HyperLink> <br /> </ItemTemplate>
Zapisz zmiany.
Otwórz szablon strony SzablonStrony.master
W widoku Design przenieś kontrolkę do obszaru roboczego położonego
po lewej stronie o ID="PierwszyObszarBoczny".
Zapisz zmiany.
Zapisz zmiany w projekcie i sprawdź, czy po kliknięciu na kategorie
wyświetlanie są odpowiednie podkategorie na stronie przeglądania
produktów.
Dlaczego nie są?
Otwórz plik Produkty.aspx.cs. Do metody Page_Loa
string katID= Request.QueryString["katID"]; if (katID != null) { KategorieListBox.SelectedValue = katID; }
Zapisz zmiany w projekcie i sprawdź, czy po kliknięciu na kategorie
wyświetlanie są odpowiednie podkategorie na stronie przeglądania
produktów.
Moduł 8
Kontrolki danych w ASP.NET
Twój klient wymyślił, że na stronie głównej ma być wyświetlana lista kategorii nadrzędnych, po
przekierowywany na stronę wyświetlania produktów z
dodaj nową kontrolkę użytkownika o nazwie
W kontrolce zmień
i w oknie Properties:
AdventureWorksDataContext
new (ProductCategoryID, Name)
ParentProductCategoryID=null
z listy rozwijanej wybierz
<br />
<asp:HyperLink ID="HyperLink1" runat="Server" %# "~/Produkty.aspx?KatID=" +
Text='<%# Eval("Name") %>'>
rolkę do obszaru roboczego położonego
czy po kliknięciu na kategorie
wyświetlanie są odpowiednie podkategorie na stronie przeglądania
Page_Load dodaj:
czy po kliknięciu na kategorie
wyświetlanie są odpowiednie podkategorie na stronie przeglądania
Piotr Bubacz Moduł 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-16
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 9
Wersja 1
LINQ w ASP.NET
Spis treści
LINQ w ASP.NET ................................................................................................................................... 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Uwagi dla studenta ...................................................................................................................... 5
Dodatkowe źródła informacji....................................................................................................... 6
Laboratorium podstawowe .................................................................................................................. 7
Problem 1 (czas realizacji 10 min) ................................................................................................ 7
Problem 2 (czas realizacji 15 min) ................................................................................................ 8
Problem 3 (czas realizacji 10 min) ................................................................................................ 9
Problem 4 (czas realizacji 10 min) .............................................................................................. 10
Piotr Bubacz Moduł 9
ITA-103 Aplikacje Internetowe LINQ w ASP.NET
Strona 9-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące technologii LINQ. Nauczysz
się, jak formułować proste zapytania z wykorzystaniem zintegrowanego
języka zapytań i w jaki sposób połączyć go z ASP.NET.
Cel modułu
Celem modułu jest przedstawienie technologii LINQ i możliwości jego
wykorzystania w aplikacjach ASP.NET.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• wiedział czym jest i jak działa LINQ
• potrafił tworzyć proste zapytania w LINQ
• potrafił wykorzystywać LINQ w ASP.NET
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy języka XHTML
• znać zasady pracy w środowisku Visual Studio, w szczególności
tworzenia stron internetowych
• znać podstawy pracy z danymi w ASP.NET
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznać się z materiałem zawartym
w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS”,
„Wprowadzenie do ASP.NET” oraz „Kontrolki danych w ASP.NET”.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 9
ITA-103 Aplikacje Internetowe LINQ w ASP.NET
Strona 9-3
Przygotowanie teoretyczne
Przykładowy problem
Większość projektowanych programów manipuluje danymi w taki czy inny sposób. Dane są
najczęściej przechowywane w relacyjnych bazach danych. Mimo to jest duża różnica między
nowoczesnymi językami programowania a bazami w sposobie, w jaki reprezentują dane.
Największą różnica tkwi w sposobie odwoływania się do danych w bazie. Pogram odwołuje się do
bazy za pomocą API, które wymaga, aby zapytania były przesłane jako ciągi znaków. Niestety nie
mam możliwości weryfikacji poprawności tworzonych zapytań w czasie kompilacji, a jedynie w
czasie wykonania. Co więcej różnica, ta jest jeszcze bardziej widoczna przy odbieraniu wyników.
Nowoczesne języki programowania przechowują dane w postaci obiektów, natomiast bazy danych
organizują je w wiersze.
Dotychczas połączenie tych dwóch światów należało do programisty osobno w każdej tworzonej
aplikacji. Najlepszym rozwiązaniem było użycie pośredniej abstrakcyjnej warstwy dostępu, która
umożliwiała przejście pomiędzy światem wierszy a światem obiektów.
Podstawy teoretyczne
Rozwiązaniem problemu niekompatybilności świata baz danych i nowoczesnych języków
programowania jest LINQ (ang. Language Integrated Query), nowe podejście dostępu do danych,
które integruje język zapytań bazodanowych bezpośrednio w językach programowania .NET. W
wyniku otrzymujemy nie wiersze, ale obiekty.
Korzyści:
• niezależność od typu danych
• operowanie na danych jak na obiektach
• lepsza integracja z językami programowania
• wsparcie dla IntelliSense
Na Rys. 2 została przedstawiona architektura i komponenty LINQ.W warstwie najbliższej klientowi
mamy języki programowania dostępne na platformie .NET, takie jak C# 3.0. Następnie mamy
warstwę pośrednią, wykorzystywaną do translacji zapytań formułowanych w językach
programowania z jednej strony, z drugiej zaś translacji danych z różnych źródeł na obiekty.
<book><title/><author/><year/><price/>
</book>
.NET Language Integrated Query
Rys. 2 Architektura i komponenty LINQ
Piotr Bubacz Moduł 9
ITA-103 Aplikacje Internetowe LINQ w ASP.NET
Strona 9-4
Operatory
W LINQ możemy używać wielu operatorów. Najważniejsze z nich zostały przedstawione w Tab. 1.
Tab. 1 Rodzaje operatorów w LINQ
Rodzaj operacji Nazwa operatora
filtrowanie Where
projekcja Select, SelectMany
kolejność OrderBy, ThenBy
grupowanie GroupBy
kwalifikatory Any, All
partycje Take, Skip, TakeWhile, SkipWhile
zbiory Distinct, Union, Intersect, Except
elementy First, FirstOrDefault, ElementAt
agregacja Count, Sum, Min, Max, Average
konwersja ToArray, ToList, ToDictionary
rzutowanie OfType<T>
LINQ to XML
W przypadku odwoływania się do dokumentów zapisanych w XML, wykorzystujemy warstwę
pośrednią LINQ to XML. Porównajmy kod aplikacji do tworzenia dokumentu XML z wyników
poszukiwania innego dokumentu XML.
W wyniku chcemy otrzymać następującą listę osób mieszkających w USA:
<contacts>
<contact>
<name>Great Lakes Food</name>
<phone>(503) 555-7123</phone>
</contact>
...
</contacts>
W przypadku programowania bez użycia LINQ napiszemy:
XmlDocument doc = new XmlDocument();
XmlElement contacts = doc.CreateElement("contacts");
foreach (Customer c in customers)
if (c.Country == "USA") {
XmlElement e = doc.CreateElement("contact");
XmlElement name = doc.CreateElement("name");
name.InnerText = c.CompanyName;
e.AppendChild(name);
XmlElement phone = doc.CreateElement("phone");
phone.InnerText = c.Phone;
e.AppendChild(phone);
contacts.AppendChild(e);
}
doc.AppendChild(contacts);
Używając LINQ:
XElement contacts = new XElement("contacts",
from c in customers
Piotr Bubacz
ITA-103 Aplikacje Internetowe
where c.Country == "USA"
select new XElement("contact",
new XElement("name",
new XElement("phone", c.Phone)
)
);
Porównanie obu fragmentów
Tab. 2 Porównanie programowania XML z i bez użycia LINQ
Programowanie XML bez LINQ
• model imperatywny
• bazowanie na dokumencie
• brak wbudowanych zapytań
• wymaga dużej pamięci
LINQ to SQL
Na Rys. 3 przedstawiono działanie zapytania do bazy zdefiniowanego w LINQ.
Programista tworzy zapytanie w
na zapytanie SQL. Zapytanie SQL jest przesyłane do bazy, skąd wracają wiersze. Następnie wiersze
są przetwarzane na obiekty i udostępniane aplikacji. Podobnie jest w przypadku dodawania
informacji do bazy.
Podsumowanie
W tym rozdziale przedstawione
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• rozumiesz jak działa LINQ
• umiesz napisać proste zapytanie
Pamiętaj o zapoznaniu się z
rozumiesz omawiane w nich
w uwagach, przeczytaj ponownie informacje z tego
Strona 9-5
where c.Country == "USA"
select new XElement("contact",
new XElement("name", c.CompanyName),
new XElement("phone", c.Phone)
fragmentów zostało przedstawione w Tab. 2.
ania XML z i bez użycia LINQ
Programowanie XML z użyciem LINQ
azowanie na dokumencie
wbudowanych zapytań
ymaga dużej pamięci
• model deklaratywny
• bazowanie na elemencie
• zintegrowane zapytania
• mniejsze i szybsze
przedstawiono działanie zapytania do bazy zdefiniowanego w LINQ.
Programista tworzy zapytanie w zintegrowanym języku wyrażeń, które warstwa pośrednia zamienia
na zapytanie SQL. Zapytanie SQL jest przesyłane do bazy, skąd wracają wiersze. Następnie wiersze
są przetwarzane na obiekty i udostępniane aplikacji. Podobnie jest w przypadku dodawania
Rys. 3 LINQ to SQL
przedstawione zostały podstawy języka LINQ.
Jesteś przygotowany do realizacji laboratorium jeśli:
jak działa LINQ
napisać proste zapytanie wykorzystując zintegrowany język zapytań
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z
Moduł 9
LINQ w ASP.NET
Programowanie XML z użyciem LINQ
odel deklaratywny
azowanie na elemencie
integrowane zapytania
przedstawiono działanie zapytania do bazy zdefiniowanego w LINQ.
warstwa pośrednia zamienia
na zapytanie SQL. Zapytanie SQL jest przesyłane do bazy, skąd wracają wiersze. Następnie wiersze
są przetwarzane na obiekty i udostępniane aplikacji. Podobnie jest w przypadku dodawania
zintegrowany język zapytań
zawartymi w tym module. Upewnij się, że
. Jeśli masz trudności ze zrozumieniem tematu zawartego
zajrzyj do notatek z wykładów.
Piotr Bubacz Moduł 9
ITA-103 Aplikacje Internetowe LINQ w ASP.NET
Strona 9-6
Dodatkowe źródła informacji
1. Fabrice Marguerie, Steve Eichert, Jim Wooley, LINQ in Action, Manning Publications, 2008
Autor w prosty sposób przybliża zagadnienia związane z LINQ. Warto też zajrzeć na
stronę książki http://linqinaction.net, gdzie autor umieszcza różne informacje na
temat LINQ.
2. Jacek Matulewski, C# 3.0 i .NET 3.5. Technologia LINQ, Helion, 2008
Dzięki temu podręcznikowi nauczysz się pobierać dane z różnego rodzaju źródeł,
tworzyć pliki XML w nowy, bardziej intuicyjny sposób, stosować składowane
rozszerzenia oraz nowego typu metody (oraz odpowiadające im operatory),
zdefiniowane w najnowszej wersji języka C#. Ponadto dowiesz się, jak tworzyć
własne źródła danych LINQ.
3. Paolo Pialorsi, Marco Russo, Introducing Microsoft LINQ, Microsoft Press, 2008
Książka stanowi wprowadzenie do LINQ dla osób, które nie miały wcześniejszego
doświadczenia ani z tą technologią, ani z nowościami wprowadzonymi w C# 3.0. W
zwięzły sposób omawia podstawy LINQ, w tym składnię, operatory i posługiwanie
się tą technologią w odniesieniu do kolekcji obiektów, relacyjnych baz danych i
dokumentów XML.
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Laboratorium podstawowe
Problem 1 (czas realizacji 10 min)
Aplikacja, która tworzysz dla Adventure Works wymaga rozszerzeń. Przede wszystkim Twojemu
klientowi zależy na wyświetlaniu obrazków produktów. Twoim zadaniem jest zaimplementowanie
sposobu pobierania obrazków z bazy danych.
Zadanie Tok postęp
1. Dodaj nową
stronę
• Otwórz stronę przygotowaną w poprzednim ćwiczeniu.
• Do aplikacji dodaj nową stronę
SzablonStrony.master
2. Na podstawie
parametru ID
wyślij obrazek
• W metodzie
if (Request.QueryString["id"] != null){
}
3. Zapis i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie. Wyświetl stronę
co jest wyświetlane.
• Dodaj do adresu strony
4. Dodaj
wyświetlanie
obrazka na
stronie
Produkty.aspx
• Otwórz stronę
• W widoku
Tag
• Z listy
• Przesuń pole na pierwszą pozycję korzystając z
• W
—
—
—
—
5. Zapisz i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie. Wyświetl stronę
czy wyświetlane są miniatury produktów.
Strona 9-7
Laboratorium podstawowe
zacji 10 min)
Aplikacja, która tworzysz dla Adventure Works wymaga rozszerzeń. Przede wszystkim Twojemu
klientowi zależy na wyświetlaniu obrazków produktów. Twoim zadaniem jest zaimplementowanie
sposobu pobierania obrazków z bazy danych.
Tok postępowania
Otwórz stronę przygotowaną w poprzednim ćwiczeniu.
Do aplikacji dodaj nową stronę Miniatura.aspx opartą o szablon strony
SzablonStrony.master
W metodzie Page_Load dodaj następujący kod:
if (Request.QueryString["id"] != null)
AdventureWorksDataContext db = new AdventureWorksDataContext();
var miniaturka = (from p in db.Products
where p.ProductID == int.Parse(Request.QueryString["id"])
select p.ThumbNailPhoto).FirstOrDefault();
if (miniaturka != null) {
Response.ContentType = "image/bmp";
Response.BinaryWrite(miniaturka.ToArray());
}
Zapisz zmiany w projekcie. Wyświetl stronę Miniatura.aspx
co jest wyświetlane.
Dlaczego pojawiła się pusta strona?
Dodaj do adresu strony ?id=771.
Co się zmieniło? Dlaczego?
Otwórz stronę Produkty.aspx.
W widoku Design wybierz kontrolkę GridView, a następnie kilknij
Tag. Wybierz Edit Columns.
Z listy Available Fields wybierz ImageField i kliknij
Przesuń pole na pierwszą pozycję korzystając z przycisku
W obszarze ImageField Properties:
— w polu DataAlternateTextField wpisz Name
— w polu DataAlternateTextFormatString wpisz
— w polu DataImageUrlField wpisz ProductID
— w polu DataImageUrlFormatString wpisz ~/Miniatura.aspx?id={0}
Zapisz zmiany w projekcie. Wyświetl stronę Produkty.aspx
czy wyświetlane są miniatury produktów.
Moduł 9
LINQ w ASP.NET
Aplikacja, która tworzysz dla Adventure Works wymaga rozszerzeń. Przede wszystkim Twojemu
klientowi zależy na wyświetlaniu obrazków produktów. Twoim zadaniem jest zaimplementowanie
Otwórz stronę przygotowaną w poprzednim ćwiczeniu.
opartą o szablon strony
AdventureWorksDataContext db = new AdventureWorksDataContext();
where p.ProductID == int.Parse(Request.QueryString["id"])
select p.ThumbNailPhoto).FirstOrDefault();
Response.BinaryWrite(miniaturka.ToArray());
Miniatura.aspx i sprawdź,
a następnie kilknij Smart
i kliknij Add.
przycisku .
Miniatura {0}
~/Miniatura.aspx?id={0}
Produkty.aspx i sprawdź,
Piotr Bubacz Moduł 9
ITA-103 Aplikacje Internetowe LINQ w ASP.NET
Strona 9-8
Problem 2 (czas realizacji 15 min)
Teraz musisz przygotować stronę wyświetlającą szczegóły produktu – Szczegoly.aspx.
Zadanie Tok postępowania
1. Przygotuj
stronę
Szczegoly.aspx do
wyświetlenia
informacji o
produkcie
• Do aplikacji dodaj stronę Szczegoly.aspx opartą na stronie wzorcowej, a
następnie dodaj do niej kontrolkę MultiView, a następnie dwie
kontrolki View o ID: prawidlowyView i blednyView.
• W pierwszej kontrolce umieść kontrolkę Label i w oknie Properties w
polu (ID) wpisz nazwaLabel, natomiast pole Text zostaw puste.
• Dodaj znacznik <br /> i dodaj kontrolkę Image i w oknie Properties w
polu (ID) wpisz produktImage.
• Dodaj znacznik <br /> i napisz Kategoria:, a następnie umieść kontrolkę
Label i w oknie Properties w polu (ID) wpisz kategoriaLabel, natomiast
pole Text zostaw puste.
• Dodaj znacznik <br /> i napisz Cena:, a następnie umieść kontrolkę
Label o właściwościach ID="cenaLabel" i Text="".
• Dodaj znacznik <br /> i napisz Kolor:, a następnie umieść kontrolkę
Label i w oknie Properties w polu (ID) wpisz kolorLabel, natomiast pole
Text zostaw puste.
• Dodaj znacznik <br /> i napisz Opis:, a następnie dodaj znacznik <br /> i
umieść kontrolkę Label i w oknie Properties w polu (ID) wpisz opisLabel.
• W kontrolce blednyView w widoku Source dodaj:
Nieprawidłowy produkt<br />
• Na końcu w widoku Source dodaj:
<a href="Produkty.aspx">Powrót do przeglądania produktów</a>
2. Wyświetl
produkt zgodnie z
przesłaną
informacją przez
metodę GET
• Do metody Page_Load dodaj:
MultiView1.SetActiveView(blednyView); if (Request.QueryString["id"] != null)
{
AdventureWorksDataContext db = new AdventureWorksDataContext();
var produkt = (from p in db.Products
where p.ProductID == int.Parse(Request.QueryString["id"])
select new {
ProductID = p.ProductID,
Name = p.Name,
Category = p.ProductCategory.Name,
ListPrice = p.ListPrice, Color = p.Color,
Description =
p.ProductModel.ProductModelProductDescriptions.
First().ProductDescription.Description
}).FirstOrDefault();
if (produkt != null) {
MultiView1.SetActiveView(prawidlowyView);
Page.Title = "Przeglądasz: " + produkt.Name;
nazwaLabel.Text = produkt.Name;
produktImage.ImageUrl = "Miniatura.aspx?id=" + produkt.ProductID.ToString();
kategoriaLabel.Text = produkt.Category;
cenaLabel.Text = String.Format("{0:C}", produkt.ListPrice);
kolorLabel.Text = produkt.Color;
opisLabel.Text = produkt.Description;
} }
Piotr Bubacz Moduł 9
ITA-103 Aplikacje Internetowe LINQ w ASP.NET
Strona 9-9
3. Zapisz i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie i przetestuj możliwość wyświetlania
produktów na stronie Szczegoly.aspx.
• Sprawdź co się stanie, jak w adresie przypiszesz do id inną wartość,
np. 1.
• Sprawdź co się stanie, jak w adresie przypiszesz do id ciąg znaków, np. a.
Problem 3 (czas realizacji 10 min)
Teraz musisz przygotować kontrolkę wyświetlającą nowe produkty na szablonie strony .
Zadanie Tok postępowania
1. Dodaj
kontrolkę
użytkownika
wyświetlającą
nowe produkty
• Do katalogu Kontrolki dodaj nową kontrolkę użytkownika o nazwie
NoweProdukty.ascx.
• Następnie dodaj kontrolkę ListView i w oknie Properties:
— w polu ID wpisz NoweProduktyListView
— w polu ItemPlaceholderID wpisz ListaPlaceHolder
• W widoku Source w kontrolce ListView umieść:
<LayoutTemplate>
<strong>Nasze nowe produkty:</strong><br />
<asp:PlaceHolder ID="ListaPlaceHolder" runat="server" /> </LayoutTemplate>
<ItemTemplate>
<div class="OknoProduktow" >
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl='<%# "~/Szczegoly.aspx?id="+Eval("ProductID") %>' Text='<%#Eval("Name") %>' /> <br />
<asp:Image ID="ProduktyImage" runat="server"
ImageUrl='<%# "~/Miniatura.aspx?id=" + Eval("ProductID") %>'
AlternateText='<%# Eval("Name") %>' /> <br />
Kategoria: <%#Eval("ProductCategory.Name") %> <br />
Kolor: <%#Eval("Color") %> <br /> Cena: <%#Eval("ListPrice", "{0:C}") %><br />
</div>
</ItemTemplate>
• W metodzie Page_Load umieść:
AdventureWorksDataContext db = new AdventureWorksDataContext(); var noweProdukty = (from p in db.Products
orderby p.SellStartDate descending
select p).Take(4);
NoweProduktyListView.DataSource = noweProdukty;
NoweProduktyListView.DataBind();
• Zapisz zmiany.
2. Dodaj
kontrolkę do
szablonu strony
• Otwórz szablon strony SzablonStrony.master.
• W widoku Design przenieś kontrolkę do obszaru roboczego położonego
po prawej stronie o ID=DrugiObszarBoczny.
• Zapisz zmiany.
3. Dodaj
kontrolkę do
głównej strony
aplikacji
• Otwórz stronę Default.aspx.
• W widoku Design przenieś kontrolkę do obszaru roboczego położonego
w środku strony.
• Zapisz zmiany.
Piotr Bubacz Moduł 9
ITA-103 Aplikacje Internetowe LINQ w ASP.NET
Strona 9-10
4. Zapis i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie i sprawdź, czy wyświetlane są nowe produkty
w drugim obszarze roboczym na każdej stronie.
5. Ustal wygląd
wyświetlanych
produktów
• Do pliku Style.css dodaj następujące informacje o stylu:
.OknoProduktow {
background-color: #C3DBEA;
border-style: solid;
border-color: #55BBFF;
margin: 5px auto 0px auto;
width: 120px; }
6. Zapisz i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie i sprawdź, jak wyświetlane są nowe produkty
w drugim obszarze roboczym na każdej stronie.
Problem 4 (czas realizacji 10 min)
Ostatnim zadaniem jest przygotowanie kontrolki wyświetlającej losowe produkty.
Zadanie Tok postępowania
7. Dodaj widok i
funkcję w TSQL
umożliwiającą
losowo
wybieranie
rekordów z bazy
• W oknie Server Explorer rozwiń gałąź zawierającą plik
AdventureWorksLT_Data.mdf i kliknij prawym przyciskiem myszy gałąź
Views i wybierz Add New View.
• W oknie Add Table wciśnij przycisk Close. W oknie zapytania zastąp
SELECT FROM następującym zapytaniem:
SELECT NEWID() AS ID
• Wciśnij CTRL+S i wprowadź nazwę vLosuj.
• Kliknij prawym przyciskiem myszy gałąź Functions i wybierz Add New->
Scalar-valued Function.
• Zamień zapytanie na:
CREATE FUNCTION Losuj ()
RETURNS uniqueidentifier AS
BEGIN RETURN (SELECT ID FROM vLosuj) END
• Wciśnij CTRL+S.
8. Dodanie
funkcji Losuj do
obiektu
AdventureWorksD
ataContext
• W oknie Solution Explorer otwórz App_Code\AdventureWorks.dbml.
• Do prawej strony opisanej Create methods by dragging items dodaj z
okna Server Explorer funkcję Losuj z gałęzi Functions.
9. Dodaj
kontrolkę
użytkownika
wyświetlającą
nowe produkty
• Do katalogu Kontrolki dodaj nową kontrolkę użytkownika o nazwie
WybraneProdukty.ascx.
• Następnie dodaj kontrolkę ListView i w oknie Properties:
— w polu ID wpisz WybraneProduktyListView
— w polu ItemPlaceholderID wpisz ListaPlaceHolder
• W widoku Source w kontrolce umieść:
<LayoutTemplate>
<strong>Wybrane produkty:</strong>
<asp:PlaceHolder ID="ListaPlaceHolder" runat="server" />
</LayoutTemplate>
Piotr Bubacz Moduł 9
ITA-103 Aplikacje Internetowe LINQ w ASP.NET
Strona 9-11
<ItemTemplate>
<div class="OknoProduktow">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# "~/Szczegoly.aspx?id="+Eval("ProductID") %>'
Text='<%#Eval("Name") %>' /> <br />
<asp:Image ID="ProduktyImage" runat="server"
ImageUrl='<%# "~/Miniatura.aspx?id=" + Eval("ProductID") %>'
AlternateText='<%# Eval("Name") %>' /> <br />
Kategoria: <%#Eval("ProductCategory.Name") %><br /> Kolor: <%#Eval("Color") %><br />
Cena: <%#Eval("ListPrice", "{0:C}") %><br />
</div>
</ItemTemplate>
• W metodzie Page_Load umieść:
AdventureWorksDataContext db = new AdventureWorksDataContext();
var noweProdukty = (from p in db.Products
orderby db.Losuj()
select p).Take(3);
WybraneProduktyListView.DataSource = noweProdukty; WybraneProduktyListView.DataBind();
• Zapisz zmiany.
10. Dodaj
kontrolkę do
szablonu strony
• Otwórz szablon strony SzablonStrony.master.
• W widoku Design przenieś kontrolkę do obszaru roboczego położonego
po lewej stronie o ID="PierwszyObszarBoczny".
• Zapisz zmiany.
11. Dodaj
kontrolkę do
głównej strony
aplikacji
• Otwórz stronę Default.aspx
• W widoku Design usuń zawartość strony i umieść kontrolkę
WybraneProdukty.ascx na stronę.
• Zapisz zmiany.
12. Zapis i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie i sprawdź czy wyświetlane są losowe
produkty w pierwszym obszarze roboczym na każdej stronie.
13. Zapisz i
przetestuj dodaną
funkcjonalność
• Zapisz zmiany w projekcie i sprawdź jak wyświetlane są losowe produkty
w pierwszym obszarze roboczym na każdej stronie.
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 10
Wersja 1
Bezpieczeństwo serwisów
internetowych
Spis treści
Bezpieczeństwo serwisów internetowych ........................................................................................... 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Uwagi dla studenta ...................................................................................................................... 9
Dodatkowe źródła informacji....................................................................................................... 9
Laboratorium podstawowe ................................................................................................................ 10
Problem 1 (czas realizacji 20 min) .............................................................................................. 10
Problem 2 (czas realizacji 20 min) .............................................................................................. 12
Problem 3 (czas realizacji 5 min) ................................................................................................ 14
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące sposobów zabezpieczania
dostępu do aplikacji internetowej przy pomocy mechanizmów autoryzacji.
Poznasz kontrolki logowania oraz nauczysz się, jak można ukrywać opcje
menu przed różnymi grupami użytkowników.
Cel modułu
Celem modułu jest przedstawienie wbudowanych w ASP.NET
mechanizmów zabezpieczających dostęp do aplikacji internetowych.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• potrafił wykorzystać uwierzytelnianie oparte na formularzu
• potrafił zabezpieczać dostęp do aplikacji przed nieautoryzowanymi
użytkownikami
• potrafił określać prawa dostępów dla różnych grup użytkowników
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy HTML i CSS
• znać zasady pracy w Visual Studio 2008
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznać się z materiałem zawartym
w modułach Podstawy HTML, Kaskadowe Arkusze Stylów – CSS
i Wprowadzenie do ASP.NET.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-3
Przygotowanie teoretyczne
Przykładowy problem
Tworząc aplikacje internetowe często napotykamy problem związany z dodaniem możliwości
uwierzytelniania użytkowników naszego serwisu. Dodatkowo musimy zapewnić mechanizm
ograniczenia dostępu do zasobów dla określonych użytkowników lub grup użytkowników.
Uwierzytelnianie użytkowników to nie tylko formularz, w którym wpisuje się nazwę i hasło. Za tym
zagadnieniem kryje się szereg innych kwestii: jak i gdzie przechowywać informacje
o użytkownikach, jak umożliwić rejestracje, jak ułatwić proces odzyskiwania hasła, jak w końcu
ograniczyć dostęp do opcji menu i katalogów aplikacji.
W tym celu wykorzystujemy mechanizmy uwierzytelnienia i autoryzacji. Tworzenie takich
mechanizmów nie jest proste i musi być poprzedzone dogłębną analizą problemu. W aplikacjach
internetowych zależy nam na szybkim tworzeniu rozwiązań. W celu zapewnienia odpowiedniego
poziomu zabezpieczeń możemy skorzystać z mechanizmów dostarczanych przez ASP.NET.
Tworzenie, rejestracja, logowanie, zmiana hasła, przypomnienie hasła to najczęstsze przypadki
użycia zarządzania użytkownikami. Tworząc takie formularze od podstaw musimy nie tylko
zapewnić odpowiedni interfejs użytkownika, ale również zapewnić odpowiednie zapisanie tych
danych do repozytorium. ASP.NET dostarcza nam gotowy zbiór podstawowych kontrolek
ułatwiających te zadania.
Podstawy teoretyczne
Uwierzytelnianie użytkowników
Uwierzytelnianie (ang. authentication) jest to proces, w którym sprawdza się, czy dany użytkownik
jest tym, za kogo się podaje. Proces ten najczęściej wiąże się z podaniem przez użytkownika nazwy i
hasła. W ASP.NET wspierane są różne mechanizmy uwierzytelniania:
• uwierzytelnianie Windows
• uwierzytelnianie za pomocą formularza
• uwierzytelnianie przy użyciu Windows Live ID
Uwierzytelnianie Windows
Uwierzytelnianie Windows można wykorzystywać, jeśli baza użytkowników znajduje się na
kontrolerze domeny Windows. Najważniejszą zaletą takiego uwierzytelnienia jest możliwość
korzystania z istniejących kont systemowych oraz to, że nie potrzeba pisać dodatkowego kodu
zarządzającego uwierzytelnieniem. Serwer IIS identyfikuje użytkownika za pomocą żetonów
przyznanych użytkownikowi przy zalogowaniu do serwera.
W celu konfiguracji uwierzytelniania Windows należy w pliku Web.config w sekcji <system.web>
dopisać:
<authentication mode="Windows"/>
Uwierzytelnianie Windows może być wykorzystywane tylko w przypadku posiadania kont przez
użytkowników na serwerze. Taka sytuacja ma miejsce najczęściej w przypadku aplikacji
intranetowych. Uwierzytelnianie Windows jest domyślną metodą uwierzytelniania w aplikacjach
ASP.NET.
Uwierzytelnianie za pomocą formularza
W przypadku gdy projektowana aplikacja ma działać w sieci Internet, posiadanie konta na serwerze
przez wszystkich potencjalnych użytkowników aplikacji jest niemożliwe. Dodatkowo istnieje
potrzeba przechowywania informacji o użytkownikach w innym miejscu niż system użytkowników
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-4
Windows. Najczęściej dane takie przechowywane są w bazie danych. Uwierzytelnianie formularzy
umożliwia łatwe i bezpieczne potwierdzanie tożsamości.
Użytkownik w przypadku tej metody uwierzytelniania musi skorzystać ze specjalnej strony do
wprowadzenia nazwy i hasła, które następnie jest sprawdzane z danymi zapisanymi w bazie
danych, specjalnych plikach lub innych źródłach. W przypadku małej ilości użytkowników możliwe
jest przechowywanie tych danych w pliku Web.config, jednak dla większych rozwiązań lepiej jest
wykorzystać bazę danych.
Standardowo uwierzytelnianie to wykorzystuje plik cookie do przechowywania informacji
o uwierzytelnieniu między stronami. Plik taki jest wysyłany do serwera wraz z każdym żądaniem.
Istnieje możliwość wykorzystania adresu URL do przechowywania tej informacji w przypadku, kiedy
przeglądarka użytkownika ma wyłączoną obsługę ciasteczek.
Poniżej została przedstawiona podstawowa konfiguracje tego typu uwierzytelniania z dodatkowym
znacznikiem <forms> określającym stronę logowania Zaloguj.aspx.
<authentication mode="Forms">
<forms loginUrl="Zaloguj.aspx" />
</authentication>
Uwierzytelnianie przy użyciu Windows Live ID
Windows Live ID to ogólnodostępny, jednolity system, umożliwiający dowolnym użytkownikom –
nie tylko klientom Microsoft – korzystanie ze wszystkich stron Microsoft wymagających logowania.
Każdy zarejestrowany użytkownik otrzymuje swój indywidualny identyfikator, który pomaga mu w
poruszaniu się po wszystkich zasobach Microsoft, na całym świecie. Windows Live ID jest np.
konieczny do wzięcia udziału w spotkaniu (konferencji lub seminarium) – dzięki niemu rejestracja
uczestników odbywa się łatwiej i szybciej.
Windows Live ID został udostępniony programistom, aby łatwo mogli dołączyć globalne
uwierzytelnianie do swoich aplikacji. Dzięki temu użytkownik nie musi posiadać na naszej stronie
dodatkowego hasła. Wystarczy, że zaloguje się na dowolnej stronie wspierającej tę technologie i
ma dostęp do wszystkich zasobów.
Przechowywanie informacji o użytkownikach w bazie danych
W przypadku uwierzytelnienie za pomocą formularza ASP.NET wykorzystuje standardowych
dostawców SqlMembershipProvider i SqlRoleProvider. Wykorzystują one bazę danych SQL
Server do przechowywania informacji o użytkownikach i rolach. Informacje te są przechowywane w
szeregu tabel i dostęp do nich następuje przez procedury składowane. Standardowo informacje te
są przechowywane w bazie ASPNETDB.MDF w katalogu App_Data.
Umieszczając aplikacje internetową na serwerze dostawcy mamy dość często ograniczenie ilości
baz. Z tego względu, jeśli w aplikacji wykorzystywane są również inne dane, dość często są one
dodawane do tej właśnie bazy. Nie jest to rozwiązanie bezpieczne, ponieważ znajomość nazwy bazy
danych może ułatwić atak. Dodatkowo jeśli posiadamy już gotowe rozwiązanie bazodanowe i
chcemy rozszerzyć naszą aplikację o możliwość uwierzytelniania, możemy te informacje umieścić w
naszej bazie danych.
Aby umieścić niezbędne tabele i procedury w naszej bazie, musimy wykorzystać ASP.NET SQL
Server Registration Tool (aspnet_regsql.exe). Narzędzie to może być używane z linii poleceń lub z
poziomu graficznego kreatora. W przypadku użycia linii poleceń mamy większe możliwości
konfiguracji narzędzia.
W tym celu musimy uruchomić linię poleceń VS 2008. W systemie Windows XP/2003 musimy
wybrać Start -> Programy -> Microsoft Visual Studio 2008 -> Visual Studio Tools -> Visual
Studio 2008 Command Prompt, a następnie wydać polecenie:
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-5
aspnet_regsql -A all -C "Data Source=.\SQLEXPRESS;Integrated
Security=True;User Instance=True" -d "X:\Projekt\APP_DATA\moja_baza.mdf"
Gdzie X:\Projekt to ścieżka do naszego projektu strony, a moja_baza.mdf, to plik zawierający
bazę danych aplikacji.
Po utworzeniu niezbędnych tabel i procedur należy poinformować dostawców o konieczności
korzystania z naszej bazy danych. W tym celu do pliku Web.config musimy dodać do sekcji
<system.web> następujące informacje:
<roleManager enabled="true" defaultProvider="CustomizedRoleProvider">
<providers>
<add name="CustomizedRoleProvider"
type="System.Web.Security.SqlRoleProvider"
connectionStringName="ConnectionString" />
</providers>
</roleManager>
<membership defaultProvider="CustomizedMembershipProvider">
<providers>
<add name="CustomizedMembershipProvider"
type="System.Web.Security.SqlMembershipProvider"
connectionStringName="ConnectionString" />
</providers>
</membership>
Gdzie ConnectionString to nazwa naszego połączenia do bazy skonfigurowana w sekcji
connectionStrings.
Autoryzacja użytkowników
Autoryzacja (ang. authorization) to proces, w którym sprawdzane jest, czy użytkownik o ustalonej
wcześniej tożsamości ma prawo dostępu do zasobów, o które prosi. Uprawnienia mogą dotyczyć
np. dostępu do katalogu lub pliku.
Dostęp do plików
Autoryzacja dostępu do pliku jest związana z prawami, jakie użytkownik ma w systemie, zatem aby
używać tej metody należy stosować uwierzytelnianie Windows. W celu konfiguracji uprawnień
należy wykorzystać narzędzia sytemu i skonfigurować odpowiednie poziomy dostępu dla
użytkowników.
Dostęp do pliku w obrębie aplikacji
W przypadku plików w obrębie aplikacji możliwe jest określenie dostępu do pojedynczej strony lub
wirtualnego katalogu w aplikacji sieciowej. Możliwe jest użycie tego sposobu autoryzacji ze
wszystkimi sposobami uwierzytelnienia.
Dostęp do katalogu można ograniczyć w pliku Web.config umieszczonym w głównym katalogu
aplikacji lub katalogu, którego dotyczą dane prawa.
W celu ustalenia praw w wybranym katalogu należy utworzyć w nim plik Web.config, a następnie w
sekcji <authorization> zezwolić (element <allow>) lub zabronić (element <deny>) dostępu do
niego określonym użytkownikom lub grupom użytkowników.
Do określania roli dopuszcza się również używanie następujących symboli zastępczych:
• * – określa dowolnego użytkownika
• ? – określa użytkownika anonimowego
Przykład – zezwolenie dostępu dla użytkowników Adam, Karol oraz Michal i zabronienie dostępu
dla użytkowników anonimowych.
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-6
<authorization>
<allow users="Adam, Karol, Michal" />
<deny users="?" />
</authorization>
W celu ustalenia praw dla całej aplikacji z określeniem katalogów aplikacji należy w głównym pliku
Web.config dodać sekcję <location path="ściezka_do_katalogu">, a następnie sekcję
<system.web>, a w niej sekcję <authorization>. Przykład:
<location path="Admin">
<system.web>
<authorization>
<allow roles="Administrator" />
<deny users="*" />
</authorization>
</system.web>
</location>
Kontrolki logowania
Kontrolki logowania stanowią zbiór kontrolek serwerowych implementujących wszystkie
najważniejsze elementy niezbędne do zarządzania użytkownikami i ich uwierzytelniania.
Kontrolka Login
Kontrolka Login (Rys. 2) umożliwia uwierzytelnienie użytkownika. Uwierzytelnienie odbywa się z
pomocą formularza przy użyciu obiektu MembershipProvider zdefiniowanego w pliku
Web.config.
Rys. 2 Kontrolka Login
Mechanizmy uwierzytelniania umożliwiają zapamiętanie użytkownika w pliku cookie, dzięki temu
nie musi on za każdym razem wpisywać danych logowania.
Kontrolka ChangePassword
Kontrolka ChangePassword (Rys. 3) umożliwia zalogowanemu użytkownikowi zmianę hasła.
Udana zmiana hasła powoduje wysłanie do użytkownika wiadomości e-mail.
Rys. 3 Kontrolka ChangePassword
Wysłanie poczty elektronicznej jest możliwe po wcześniejszym skonfigurowaniu parametrów
serwera SMTP w pliku Web.config. Można to również zrobić przy pomocy ASP.NET Web Site
Administration Tool.
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-7
Przykład konfiguracji serwera poczty w pliku Web.config:
<system.net>
<mailSettings>
<smtp from="od">
<network host="adresSerwera" password="haslo" userName="uzytkownik" />
</smtp>
</mailSettings>
</system.net>
Kontrolka CreateUserWizard
Kontrolka CreateUserWizard (Rys. 4) umożliwia rejestrację nowego użytkownika. Nowy
użytkownik musi podać nazwę, hasło, adres e-mail oraz sekretne pytanie i odpowiedź . Sekretne
pytanie i odpowiedź służą do odzyskiwania hasła w przypadku, gdy użytkownik je zapomni.
Udane utworzenie użytkownika powoduje wysłanie wiadomości elektronicznej na podany adres.
Rys. 4 Kontrolka CreateUserWizard
Kontrolka PasswordRecovery
Kontrolka PasswordRecovery umożliwia użytkownikowi przypomnienie hasła. Kontrolka po
wpisaniu nazwy użytkownika wymaga podania odpowiedzi na sekretne pytanie. Jeśli odpowiedź
jest prawidłowa, to wysyłana jest wiadomość zawierająca nowe hasło.
Rys. 5 Kontrolka PasswordRecovery
Kontrolka LoginView
Kontrolka LoginView jest kontenerem umożliwiającym wyświetlenie zawartości w zależności od
tego, czy i kto jest zalogowany.
Standardowo kontrolka rozpoznaje użytkownika anonimowego (<AnonymousTemplate>) i
zalogowanego (<LoggedInTemplate>). Dla każdego ze stanów możliwe jest zdefiniowanie
osobnej zawartości. Przykład:
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-8
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
Zawartość dla użytkownika zalogowanego
</LoggedInTemplate>
<AnonymousTemplate>
Zawartość dla użytkownika anonimowego
</AnonymousTemplate>
</asp:LoginView>
Kontrolka LoginStatus
Kontrolka LoginStatus umożliwia wyświetlenie konfigurowalnych odnośników w zależności od
tego, czy użytkownik jest zalogowany (Logout) czy anonimowy (Login). Jeśli użytkownik nie jest
zalogowany, to po kliknięciu na odnośnik Login zostaje przekierowany na stronę logowania
zdefiniowaną w pliku Web.config w atrybucie loginUrl sekcji <authentication>. Jeśli
użytkownik jest zalogowany, to kliknięcie przycisku Logout zostaje wylogowany i przekierowany
na stronę podaną w atrybucie LogoutPageUrl kontrolki. Przykład:
<asp:LoginStatus ID="LoginStatus1" runat="server"
LogoutAction="Redirect" LogoutPageUrl="Default.aspx" />
Kontrolka LoginName
Kontrolka LoginName wyświetla nazwę użytkownika. Jest wykorzystywana najczęściej do
wyświetlenia komunikatu powitalnego dla użytkownika. Przykład:
Witaj <asp:LoginName ID="LN1" runat="server" />!
Ukrywanie opcji menu
W aplikacjach internetowych zachodzi często potrzeba ukrywania pewnych elementów
nawigacyjnych przed użytkownikami, którzy nie mają odpowiednich uprawnień, np. wybranych
opcji menu.
Aby tego dokonać, należy dodać atrybut roles do pliku Web.sitemap oraz w pliku Web.config
ustawić właściwość securityTrimmingEnabled obiektu XmlSiteMapProvider na wartość
true.
Należy pamiętać o tym, że ukrycie przed użytkownikiem odnośnika do strony nie zabrania mu do
niej dostępu. Aby ograniczyć dostęp do folderu lub pliku, należy skonfigurować sekcję
<authorization> w pliku Web.config.
Koniecznym zatem jest jawne określenie roli jednocześnie na poziomie uprawnień do folderów
(Web.config), jak i węzłów, z którymi nie jest skojarzony adres URL (Web.sitemap).
Konfiguracja atrybutu roles w pliku Web.sitemap
Konfiguracja atrybutu roles odbywa się poprzez dodanie go do sekcji <siteMapNode> i
przypisanie do niego odpowiednich ról. Przykład:
<siteMapNode
title="Administracja"
description="Zarządzaj witryną"
roles="Administrator">
...
</siteMapNode>
Konfiguracja pliku Web.config
W pliku Web.config w sekcji <system.web> należy dodać domyślnego dostawcę mapy serwisu
XmlSiteMapProvider. Przykład:
<siteMap defaultProvider="XmlSiteMapProvider" enabled="true" >
<providers>
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-9
<add
name="XmlSiteMapProvider"
description="Domyślny dostawca mapy serwisu."
type="System.Web.XmlSiteMapProvider"
siteMapFile="Web.sitemap"
securityTrimmingEnabled="true" />
</providers>
</siteMap>
Podsumowanie
W tym rozdziale przedstawione zostały zagadnienia związane z uwierzytelnianiem użytkowników
przy użyciu formularzy. Pokazano jak zabezpieczać dostęp do katalogów oraz opcji menu.
Zaprezentowano kontrolki ułatwiające najczęstsze zadania przy zarządzaniu użytkownikami.
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• umiesz skonfigurować uwierzytelnianie za pomocą formularza
• umiesz określić dostęp do wybranego katalogu w aplikacji
• znasz kontrolki logowania i wiesz kiedy możesz je użyć
• potrafisz ukryć opcje menu przed różnymi grupami użytkowników
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. Scott Mitchell, Examining ASP.NET 2.0's Membership, Roles, and Profile,
http://aspnet.4guysfromrolla.com/articles/120705-1.aspx
12-częściowy artykuł poruszający praktyczne zagadnienia związane z zarządzaniem
użytkownikami, rolami i profilami. Nie tylko dobrze przedstawiona teoria, ale
przede wszystkim porady praktyczne i rozwiązania najczęściej spotykanych
problemów.
2. Jakub Zagórski, Portal Internetowy w ASP.NET 2.0 – z czym to się je?,
http://www.codeguru.pl/article-560.aspx
Artykuł dotyczący wielu aspektów związanych z tworzeniem portalu
internetowego, z ciekawym opisem kwestii związanych z uwierzytelnieniem.
3. How To: Use Membership in ASP.NET 2.0, http://msdn.microsoft.com/en-
us/library/ms998347.aspx
Obszerny artykuł zespołu patterns & practices przedstawiający kwestie
wykorzystania uwierzytelniania w aplikacjach ASP.NET.
4. Stefan Schackow, Professional ASP.NET 2.0 Security, Membership, and Role Management, Wrox,
2006
Autor w książce poruszył wiele zagadnień związanych z bezpieczeństwem, włącznie
z zabezpieczaniem konfiguracji. Książka zawiera szczegółowe informacje dotyczące
wszystkich najważniejszych obszarów bezpieczeństwa aplikacji ASP.NET.
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-10
Laboratorium podstawowe
Problem 1 (czas realizacji 20 min)
Przygotowujesz aplikację internetową dla firmy Adventure Works, która planuje ekspansje na rynku
internetowym w Polsce. Aktualnie aplikacja umożliwia już przeglądanie produktów oraz zawiera
klika ciekawych elementów ułatwiających sprzedaż produktów. Kolejnym krokiem w rozwoju
aplikacji jest implementacja uwierzytelniania jej użytkowników. W bazie dostarczonej do
rozbudowy istnieją już informacje o użytkownikach, jednak ze względu na krótki czas implementacji
aplikacji Twój zespół zaproponował wykorzystanie wbudowanych mechanizmów uwierzytelniania.
Na szczęście klient się zgodził. Twój zespół sprawdził, że mechanizm ten potrzebuje bazy danych
ASPNETDB. Niestety na serwerze wykupionym przez klienta nie ma możliwości dodania drugiej
bazy danych. Musisz zatem zintegrować bazę uwierzytelniania z istniejącą bazą danych oraz
utworzyć dwóch użytkowników: admin i karol.
Zadanie Tok postępowania
1. Dodaj tabele i
procedury z
uwierzytelniające
do istniejącej bazy
danych
• Otwórz aplikację internetową przygotowaną w poprzednim module.
• W oknie Solution Explorer wybierz bazę danych
AdventureWorksLT_Data.mdf znajdującą się w katalogu App_Data.
Skopiuj ścieżkę dostępu znajdująca się w oknie Properties w polu
FullPath.
• W systemie Windows XP/2003 wybierz Start -> Programy -> Microsoft
Visual Studio 2008 -> Visual Studio Tools -> Visual Studio 2008
Command Prompt.
• W linii poleceń wpisz nie kopiuj:
aspnet_regsql -A all -C "Data Source=.\SQLEXPRESS;Integrated
Security=True;User Instance=True" -d
• Dodaj na końcu wpisanego polecenia odstęp, a następnie wklej
skopiowaną ścieżkę (kliknij prawym przyciskiem myszy, a następnie
wybierz Wklej).
2. Dodaj
informację o
korzystaniu z
innej bazy do
pliku Web.config
• Otwórz plik Web.config.
• Do sekcji <system.web> dodaj następujące informacje:
<roleManager enabled="true"
defaultProvider="CustomizedRoleProvider">
<providers>
<add name="CustomizedRoleProvider"
type="System.Web.Security.SqlRoleProvider"
applicationName="AdventureWorks"
connectionStringName="ConnectionString" />
</providers>
</roleManager>
<membership defaultProvider="CustomizedMembershipProvider">
<providers>
<add name="CustomizedMembershipProvider"
type="System.Web.Security.SqlMembershipProvider"
applicationName="AdventureWorks"
connectionStringName="ConnectionString" />
</providers>
</membership>
• Odnajdź sekcję <connectionStrings>, a następnie znacznik <add>.
Skopiuj zawartość właściwości name i wklej dwukrotnie w miejsce
ConnectionString (wyróżnione miejsca w kodzie powyżej) w dodanej
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-11
uprzednio fragmencie konfiguracji.
3. Uruchom
narzędzie
administracyjne
• Uruchom ASP.NET Web Site Administration Tool, wybierając z menu
główngo Websites -> ASP.NET Configuration.
• Zostanie uruchomiona przeglądarka i wyświetli się strona przedstawiona
na Rys. 6.
Rys. 6 ASP.NET Web Site Administration Tool
4. Dodaj
użytkowników do
aaplikacji
• Wybierz z menu zakładkę Security, a następnie kliknij odnośnik Use the
security Setup Wizard to configure security step by step. Naciśnij
przycisk Next.
• W kroku drugim (Select Access Method) określ metodę odstępu,
zaznaczając opcję From the Internet. Naciśnij przycisk Next.
• W kroku trzecim (Data Store) naciśnij przycisk Next.
• W kroku czwartym (Define Roles) zaznacz opcję Enable roles for this
Web site. Naciśnij przycisk Next. W polu tekstowym New Role Name
wpisz:
— Administrator i wciśnij Add Role
— User i wciśnij Add Role
• Naciśnij przycisk Next.
• W kroku piątym (Add New Users) dodaj nowego użytkownika, podaj
następujące dane:
— User Name: admin
— Password: Pa$$word
— Confirm Password: Pa$$word
— E-mail: {adres e-mail}
— Security Question: Ulubiony kolor
— Security Answer: zielony
• Naciśnij przycisk Create User. Dodaj kolejnego użytkownika:
— User Name: karol
— Password: Pa$$word
Piotr Bubacz
ITA-103 Aplikacje Internetowe
—
—
—
—
• Naciśnij przycisk
• W kroku szóstym (
do katalogów dla poszczególnych użytkowników lub grup
przycisk
• Krok siódmy informuje o zakończeniu procesu konfigu
zabezpieczeń.
• Na
oraz ilość ról (
5. Przypisz konta
użytkowników do
ról
• W zakładce
• P
użytkownika zaznaczając pola wyboru
• P
użytkownika zaznaczając odpowiednie pole wyboru
6. Skonfiguruj
konto pocztowe
• Wybierz zakładkę
e¬mail settings
w
korzystasz
—
—
—
—
—
—
Problem 2 (czas realizacji 20 min)
Po dodaniu i skonfigurowaniu użytkowników czas na dodanie do aplikacji możliwości logowania. Na
stronie Zaloguj.aspx użytkownik ma mieć możliwość podania danych do uwierzytelnienia lub
przekierowania na stronę Odzyskiwanie.aspx
Użytkownik ma mieć również możliwość utworzenia konta w systemie na stronie
Na stronie ZmianaHasla.aspx
dotychczasowego hasła.
Zadanie Tok postępowania
1. Dodaj
wymagane strony
do aplikacji
• Wybierz
• Z listy
• W polu
• Z listy
• Upewnij się, że opcja
• Upewnij się, że opcja
• Kliknij
• Podobnie dodaj stronę
Bezpieczeństwo serwisów internetowych
Strona 10-12
— Confirm Password: Pa$$word
— E-mail: {adres e-mail}
— Security Question: Ulubiony kolor
— Security Answer: zielony
Naciśnij przycisk Create User, a następnie przycisk
W kroku szóstym (Add New Access Rules), pozwalającym
do katalogów dla poszczególnych użytkowników lub grup
przycisk Next.
Krok siódmy informuje o zakończeniu procesu konfigu
zabezpieczeń. Naciśnij przycisk Finish.
Na zakładce Security sprawdź, czy ilość użytkowników (
oraz ilość ról (Roles) – 2.
W zakładce Security kliknij łącze Manage users.
Przy użytkowniku admin kliknij łącze Edit Roles
użytkownika zaznaczając pola wyboru.
Przy użytkowniku karol kliknij łącze Edit Roles i przypisz rol
użytkownika zaznaczając odpowiednie pole wyboru
Wybierz zakładkę Application, a następnie kliknij łącze
e¬mail settings. Skonfiguruj ustawienia serwera poczty wysyłającej
wpisując adres dowolnego serwera pocztowego, z jakiego na co dzień
korzystasz:
— Server Name: adres serwera poczty wysyłającej
— Server Port: port serwera poczty wysyłającej
— From: Informacja, która pojawi się w liście jako
serwery blokują podawanie innych nazw, niż nazwa konta)
— Authentication: zaznacz Basic
— Sender's user name: nazwa użytkownika poczty
— Sender's password: hasło użytkownika
Pamiętaj, że wszystkie dane konta, w tym hasło,
w postaci niezakodowanej w pliku Web.config.
Problem 2 (czas realizacji 20 min)
Po dodaniu i skonfigurowaniu użytkowników czas na dodanie do aplikacji możliwości logowania. Na
użytkownik ma mieć możliwość podania danych do uwierzytelnienia lub
Odzyskiwanie.aspx, na której będzie mógł odzys
Użytkownik ma mieć również możliwość utworzenia konta w systemie na stronie
ZmianaHasla.aspx użytkownik zalogowany ma mieć możliwość zmiany swojego
Tok postępowania
Wybierz Website -> Add New Item.
Z listy Visual Studio installed templates wybierz Web
W polu Name wpisz Zarejestruj.aspx.
Z listy Language wybierz Visual C#.
Upewnij się, że opcja Place code in separate file jest zaznaczona.
Upewnij się, że opcja Select master page jest zaznaczona.
Kliknij OK.
Podobnie dodaj stronę Zaloguj.aspx
Moduł 10
Bezpieczeństwo serwisów internetowych
przycisk Next.
pozwalającym określić prawa
do katalogów dla poszczególnych użytkowników lub grup, naciśnij
Krok siódmy informuje o zakończeniu procesu konfiguracji
, czy ilość użytkowników (Users) wynosi 2
Edit Roles i przypisz obie role do
i przypisz rolę User do
użytkownika zaznaczając odpowiednie pole wyboru.
kliknij łącze Configure SMTP
. Skonfiguruj ustawienia serwera poczty wysyłającej,
pisując adres dowolnego serwera pocztowego, z jakiego na co dzień
: adres serwera poczty wysyłającej
: Informacja, która pojawi się w liście jako Od: (niektóre
serwery blokują podawanie innych nazw, niż nazwa konta)
użytkownika poczty
, w tym hasło, zostaną umieszczone
.
Po dodaniu i skonfigurowaniu użytkowników czas na dodanie do aplikacji możliwości logowania. Na
użytkownik ma mieć możliwość podania danych do uwierzytelnienia lub
na której będzie mógł odzyskać zapomniane hasło.
Użytkownik ma mieć również możliwość utworzenia konta w systemie na stronie Zarejestruj.aspx.
użytkownik zalogowany ma mieć możliwość zmiany swojego
Web Form.
jest zaznaczona.
jest zaznaczona.
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-13
2. Dodaj
kontrolkę
LoginView
• Na stronie wzorcowej SzablonStrony.master w obszarze div o
ID="ObszarLogowania" umieść kontrolkę LoginView.
• Kliknij Smart Tag i wybierz AnonymousTemplate. W kontrolce wpisz
Zarejestruj, zaznacz wpisany tekst i naciśnij Ctrl+L lub wybierz
Format->Convert to Hyperlink. Kliknij przycisk Browse i wybierz plik
Zarejestruj.aspx. Naciśnij OK. Ponownie naciśnij OK.
• Kliknij Smart Tag i wybierz LoggedInTemplate. W kontrolce wpisz
"Witaj ", a następnie dodaj kontrolkę LoginName.
3. Dodaj
kontrolkę
LoginStatus
• Na stronie wzorcowej SzablonStrony.master w obszarze div o
ID="ObszarLogowania" za kontrolką LoginView wpisz symbol |, a
następnie umieść kontrolkę LoginStatus. W oknie Properties:
— w polu CssClass wpisz LinkObszaruLogowania
— w polu LoginText wpisz Zaloguj
— w polu LogoutAction wpisz Redirect
— w polu LogoutPageUrl wpisz ~/Default.aspx
— w polu LogoutText wpisz Wyloguj
• Do pliku Style.css dodaj definicję klasy LinkObszaruLogowania:
.LinkObszaruLogowania
{ color: #000033; }
4. Określ stronę
logowania
• W pliku Web.config zamień znacznik <authentication mode="Forms" />
na:
<authentication mode="Forms">
<forms loginUrl="~/Zaloguj.aspx" />
</authentication>
5. Dodaj
kontrolkę
logowania
• Na stronie Zaloguj.aspx w widoku Design napisz Zaloguj się w serwisie,
a następnie umieść kontrolkę Login. W oknie Properties:
— w polu FailureText wpisz Logowanie nie powiodło się. Upewnij się,
że poprawnie wpisałeś nazwę użytkownika i hasło.
— w polu LoginButtonText wpisz Zaloguj
— w polu PasswordLabelText wpisz Hasło:
— w polu PasswordRequiredErrorMessage wpisz Wprowadź hasło.
— w polu RememberMeText wpisz Zapamiętaj mnie
— w polu UserNameLabelText wpisz Login:
— w polu UserNameRequiredErrorMessage wpisz Wprowadź nazwę.
• Do strony w widoku Source dodaj:
<a href="Odzyskiwanie.aspx">Zapomniałem hasła</a>
• Zapisz zmiany na stronie.
6. Dodaj
kontrolkę
tworzenia
użytkownika
• Na stronie Zarejestruj.aspx w widoku Design umieść kontrolkę
CreateUserWizard. W oknie Properties zmień właściwości tak, aby w
kontrolce były wyświetlane komunikaty w języku polskim.
• Zapisz zmiany na stronie.
7. Dodaj
kontrolkę
odzyskiwania
hasła
• Do aplikacji dodaj stronę Odzyskiwanie.aspx opartą o szablon strony
SzablonStrony.master. W widoku Design umieść kontrolkę
PasswordRecovery. W oknie Properties zmień właściwości tak, aby w
kontrolce były wyświetlane komunikaty w języku polskim.
• Zapisz zmiany na stronie.
Piotr Bubacz Moduł 10
ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych
Strona 10-14
8. Dodaj
kontrolkę zmiany
hasła
• Do projektu dodaj katalog Zarzadzanie.
• Do katalogu dodaj stronę ZmianaHasla.aspx opartą na szablonie strony
SzablonStrony.master.
• Na stronie napisz Zmień hasło i dodaj kontrolkę ChangePassword. W
oknie Properties zmień właściwości tak, aby w kontrolce były
wyświetlane komunikaty w języku polskim.
9. Sprawdź
działanie aplikacji
• Sprawdź poprawność działania aplikacji.
• Zaloguj się korzystając z użytkownika karol.
• Dodaj nowego użytkownika i sprawdź możliwość zalogowania na
podane dane.
Problem 3 (czas realizacji 5 min)
Ostatnim elementem związanym z zabezpieczeniami jest ukrycie opcji menu oraz zabezpieczenie
katalogu przed dostępem niepowołanych użytkowników. Menu Zarządzanie powinno być widoczne
tylko dla użytkowników znajdujących się w roli User i Administrator. Pozostali użytkownicy nie
powinni mieć dostępu do katalogu.
Zadanie Tok postępowania
1. Uzupełnij
brakujące strony
w pliku Web.
sitemap
• Otwórz plik Web.sitemap. Po sekcji wyświetlającej menu dla produktów
dodaj:
<siteMapNode title="Zarządzanie" description="Zarządzaj">
<siteMapNode url="Zarzadzanie/ZmianaHasla.aspx"
title="Zmiana hasła" description="Zmień hasło" />
</siteMapNode>
2. Dodaj atrybut
roles do pliku
Web.sitemap
• Dodaj do znacznika siteMapNode atrybut roles="*", gdy menu ma być
prezentowane dla wszystkich użytkowników strony (nawet
anonimowych).
• Dodaj do znacznika siteMapNode atrybut roles="X", gdzie X jest nazwą
roli (możliwe podanie wielu ról oddzielonych przecinkiem np.
Administrator, User), gdy menu ma być prezentowane dla konkretnych
użytkowników przypisanych do roli X.
• Ustal odpowiednie prawa do menu. Dla węzła siteMapNode o
właściwości:
— title="Produkty" ustal roles="*"
— title="Zarządzanie" ustal roles="User,Administrator"
— title="Ankiety" ustal roles="*"
— title="Informacje" ustal roles="*"
3. Określ
dostawcę
informacji o
ścieżce
nawigacyjnej
• Do pliku Web.config do znacznika <system.web> dodaj następujący
fragment:
<siteMap defaultProvider="XmlSiteMapProvider" enabled="true" >
<providers>
<add name="XmlSiteMapProvider"
description="Domyślny dostawca mapy serwisu."
type="System.Web.XmlSiteMapProvider"
siteMapFile="Web.sitemap"
securityTrimmingEnabled="true" />
</providers>
</siteMap>
Piotr Bubacz
ITA-103 Aplikacje Internetowe
4. Sprawdź
działanie aplikacji
• Sprawdź pop
• Sprawdź, które opcje menu są prezentowane.
• Zaloguj się korzystając z użytkownika
• Sprawdź, które opcje menu są teraz prezentowane
• Jeśli jesteś zalogowany
wywołać stronę
5. Zabezpiecz
katalog
Zarzadzanie przed
niepowołanym
dostępem
• Otwórz plik
• Do sekcji
<location path="Zarzadzanie">
</location>
6. Sprawdź
działanie aplikacji
• Sprawdź poprawność działania aplikacji.
• Jeśli jesteś zalogowany
wywołać stronę
Bezpieczeństwo serwisów internetowych
Strona 10-15
Sprawdź poprawność działania aplikacji.
Sprawdź, które opcje menu są prezentowane.
Zaloguj się korzystając z użytkownika admin.
Sprawdź, które opcje menu są teraz prezentowane
Jeśli jesteś zalogowany, wyloguj się z aplikacji. Sprawdź, czy możesz
wywołać stronę Zarzadzanie/ZmianaHasla.aspx.
Dlaczego strona została wyświetlona?
Otwórz plik Web.config.
Do sekcji configuration dodaj:
<location path="Zarzadzanie">
<system.web>
<authorization>
<allow roles="User,Administrator" />
<deny users="*"/>
</authorization>
</system.web>
</location>
Sprawdź poprawność działania aplikacji.
Jeśli jesteś zalogowany, wyloguj się z aplikacji. Sprawdź, czy możesz
wywołać stronę Zarzadzanie/ZmianaHasla.aspx.
Co się teraz stało? Dlaczego?
Moduł 10
Bezpieczeństwo serwisów internetowych
Sprawdź, które opcje menu są teraz prezentowane
wyloguj się z aplikacji. Sprawdź, czy możesz
wyloguj się z aplikacji. Sprawdź, czy możesz
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 11
Wersja 1
Zarządzanie stanem w aplikacjach
ASP.NET
Spis treści
Zarządzanie stanem w aplikacjach ASP.NET ........................................................................................ 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Uwagi dla studenta ...................................................................................................................... 4
Dodatkowe źródła informacji....................................................................................................... 4
Laboratorium podstawowe .................................................................................................................. 6
Problem 1 (czas realizacji 5 min) .................................................................................................. 6
Problem 2 (czas realizacji 15 min) ................................................................................................ 7
Problem 3 (czas realizacji 25 min) ................................................................................................ 9
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące możliwości zarządzania
stanem w aplikacjach ASP.NET. Nauczysz się przechowywać zmienne i
obiekty w stanie sesji i aplikacji. Zobaczysz, w jaki sposób można dodawać,
zarządzać i usuwać obiekty z tych stanów.
Cel modułu
Celem modułu jest przedstawienie możliwości wykorzystania stanu aplikacji
i sesji do przechowywania zmiennych i obiektów.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• rozumiał potrzebę przechowywania wybranych informacji w stanie
aplikacji i sesji
• potrafił dodawać zmienne i obiekty do stanu sesji i aplikacji
• wiedział jak utworzyć obiekty i zmienne przy starcie aplikacji i sesji
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy języka XHTML
• znać zasady pracy w środowisku Visual Studio, w szczególności
tworzenia stron internetowych
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznać się z materiałem zawartym
w modułach „Podstawy HTML” i „Wprowadzenie do ASP.NET”.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-3
Przygotowanie teoretyczne
Przykładowy problem
Tworząc aplikacje internetową większość informacji przechowujemy w bazie danych. Czasami
wykorzystujemy pliki XML. Jednak są sytuacje, kiedy potrzebujemy szybkiego narzędzia do
przechowywania i zarządzania danymi. Jeśli implementujemy koszyk zakupów czy licznik na stronie,
to zapisywanie ich do bazy czy pliku XML jest zbyt długie. Do tego celu musimy wykorzystać inny
mechanizm.
Podstawy teoretyczne
W aplikacjach ASP.NET często zachodzi potrzeba przechowywania stanu, np. pomiędzy żądaniami
pojedynczego użytkownika. Niestety protokół HTTP, z pomocą którego realizowana jest
komunikacja klienta z serwerem, jest bezstanowy. Oznacza to, że HTTP nie pozwala określić, czy
dwa żądania zostały wykonane przez tego samego, czy przez dwóch różnych użytkowników. Każde
nowe żądanie jest traktowane tak, jakby pochodziło od zupełnie nowego użytkownika.
W poprzednich modułach pokazana została możliwość przekazywania informacji pomiędzy
stronami w postaci parametrów wywołania, metoda ta ma jednak wiele wad. Podstawową z nich
jest małe bezpieczeństwo tak przekazywanych informacji, a także ograniczenie ilości danych, jakie
mogą zostać przesłane.
Stan obiektu tworzą: jego konfiguracja, atrybuty, warunki lub informacje o zawartości. W
aplikacjach internetowych stan jest ulotny i ograniczony do wygenerowania dokumentu po stronie
serwera i przesłania go do użytkownika. W ASP.NET istnieje wiele mechanizmów przechowywania i
zarządzania stanem, które można podzielić ze względu na kilka kryteriów: zasięg, czas życia i
dopuszczalny rozmiar przechowywanych danych oraz po jakiej stronie są przechowywane. Wśród
mechanizmów pozwalających zarządzać stanem indywidualnie dla każdego użytkownika wymienić
można: parametry wywołania i pliki cookies po stronie klienta oraz stan strony (ViewState), stan
sesji i stan aplikacji po stronie serwera. Przykładem informacji, która powinna być przechowywana
w stanie sesji, jest zawartość koszyka zakupów użytkownika, w stanie aplikacji możemy z kolei
przechowywać np. informacje o liczbie odwiedzin naszej strony.
Stan aplikacji
Współdzielenie informacji w całej aplikacji jest możliwe przy użyciu klasy
HttpApplicationState. Klasa ta pozwala przechowywać zmienne w słowniku – kolekcji par
klucz-wartość. Zmienne te są widoczne w obszarze całej aplikacji ASP.NET.
Używając stanu aplikacji do przechowywania obiektów musisz wziąć pod uwagę kilka istotnych
kwestii:
• Zasoby – ponieważ stan aplikacji jest przechowywany w pamięci, mamy do niego szybki
dostęp, w odróżnieniu od danych na dysku czy w bazie danych. Niestety przechowywanie
dużych bloków danych w stanie aplikacji może wypełnić pamięć serwera i spowodować
zapisywanie pamięci na dysku.
• Ulotność – ponieważ stan aplikacji jest przechowywany w pamięci, jest usuwany z niej w
momencie zatrzymania lub restartu aplikacji lub w momencie awarii serwera.
• Skalowalność – stan aplikacji nie jest dzielony na serwery w farmie serwerów, więc jeśli
Twoja aplikacja ma działać w środowisku wielu serwerów, to nie powinieneś wykorzystywać
stanu aplikacji.
• Współbieżność – do stanu aplikacji może jednocześnie odwoływać się wiele wątków, dlatego
ważne jest zapewnienie mechanizmów bezpiecznej aktualizacji przechowywanych obiektów.
Tworzenie zmiennych stanu aplikacji jest możliwe poprzez obiekt Application. Przykład
utworzenia zmiennych aplikacji o nazwach info i AppStartTime:
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-4
Application["info"] = "Witaj świecie";
Application["AppStartTime"] = DateTime.Now;
Pobranie wartości tak utworzonej zmiennej stanu sesji można zrealizować za pomocą następującej
konstrukcji:
string info = (string) Application["info"];
DateTime AppStartTime = (DateTime) Application["AppStartTime"];
Stan sesji
Tworzenie zmiennych stanu sesji jest możliwe poprzez obiekt Session. Przykład utworzenia nowej
zmiennej stanu sesji o nazwie info, przechowującej łańcuch znaków o treści „Witaj świecie!”:
Session["info"] = "Witaj świecie!";
Pobranie wartości tak utworzonej zmiennej stanu sesji można zrealizować za pomocą następującej
konstrukcji:
string info = (string) Session["info"];
Przechowywanie i pobieranie złożonych danych, tj. obiektów, wymaga rzutowania do
odpowiedniego typu. Przykład zapisania obiektu typu Koszyk w zmiennej stanu sesji:
koszyk = new Koszyk();
Session["koszyk"] = koszyk;
Przykład odczytu zmiennej stanu sesji typu Koszyk:
koszyk = (Koszyk) Session["koszyk"];
Global Application Class
Plik Global.asax umożliwia deklarowanie i zarządzanie zdarzeniami na poziomie aplikacji i sesji. Jest
on umieszczony w głównym katalogu aplikacji. Podczas wykonywania plik jest parsowany i
kompilowany w dynamiczną klasę dziedziczoną z klasy bazowej HttpApplication.
Podsumowanie
W tym rozdziale przedstawione zostały podstawy pracy ze stanem sesji i aplikacji.
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• potrafisz dodawać, odczytywać, zmieniać i usuwać obiekty ze stanu sesji i aplikacji
• wiesz do czego służy i co zawiera plik Global.asax
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. Design and Implementation Guidelines for Web Clients, http://msdn2.microsoft.com/en-
us/library/ms978622.aspx
Zespół patterns & practices przygotował wskazówki dotyczące planowania,
implementacji i zarządzania stanem w aplikacjach ASP.NET. Na stronie znajdziesz
dobre praktyki zarządzania stanem.
2. ASP.NET Application State, http://msdn.microsoft.com/en-us/library/bf9xhdz4.aspx
Na stronie przedstawiono szczegółowe informacje dotyczące zarządzania stanem w
aplikacjach ASP.NET.
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-5
3. Randy Connolly, ASP.NET 2.0. Projektowanie aplikacji internetowych, Helion, 2008
W książce autor szczegółowo porusza kwestie związane ze stanem sesji. Znajdziesz
tu m.in. informacje dotyczące dostawców stanu sesji.
4. Stephen Walther, ASP.NET 2.0. Księga eksperta, Helion, 2007
W książce autor przedstawił informacje związane z wykorzytsaniem stanu sesji i
aplikacji. Znajdziesz tu m.in. informacje dotyczące używania stanu sesji bez
wykorzystywania mechanizmu cookies.
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-6
Laboratorium podstawowe
Problem 1 (czas realizacji 5 min)
Już jesteś na ukończeniu strony. Twój klient jednak ciągle dodaje coś nowego do funkcjonalności.
Teraz postanowił sprawdzać ilość osób odwiedzających jego stronę. Musisz zaimplementować
licznik, który będzie pokazywał ilość osób aktualnie przeglądający stronę oraz ilość wszystkich osób,
które odwiedziły stronę.
Zadanie Tok postępowania
1. Dodaj do
aplikacji plik
Global Application
Class
• Otwórz projekt przygotowany na poprzednich zajęciach.
• Następnie wybierz Website -> Add New Item.
• W oknie Templates wybierz Global Application Class, w polu Name
wpisz Global.asax, a w liście rozwijanej Language wybierz C#.
2. Dodaj obsługę
licznika w pliku
Global Application
Class
• W pliku Global.asax w metodzie Application_Start utwórz dwie
zmienne aplikacji: userCount oraz activeUserCount. Zainicjuj je
wartością 0:
Application["userCount"] = 0;
Application["activeUserCount"] = 0;
• W metodzie Session_Start zwiększ o jeden wartości obu utworzonych
zmiennych:
int userCount = (int) Application["userCount"];
userCount++;
Application["userCount"] = userCount;
int activeUserCount = (int) Application["activeUserCount"];
activeUserCount++; Application["activeUserCount"] = activeUserCount;
• W metodzie Session_End zmniejsz o jeden ilość aktywnych
użytkowników:
int activeUserCount = (int) Application["activeUserCount"];
activeUserCount--;
Application["activeUserCount"] = activeUserCount;
3. Utwórz nową
kontrolkę
użytkownika
zawierqającą
licznik
• Utwórz nową kontrolkę użytkownika i nazwij ją Licznik.ascx.
• W widoku Source dodaj następujący fragment:
Naszą stronę odwiedziło:
<asp:Label ID="licznikLabel" runat="server" /><br />
Aktualnie przebywa na stronie:
<asp:Label ID="licznikActiveLabel" runat="server" />
• Do metodzie Page_Load kontrolki dodaj kod programu odpowiedzialny
za pobranie i wyświetlenie w odpowiednich kontrolkach Label wartości
zmiennych aplikacji:
if (!IsPostBack)
{
licznikLabel.Text = Application["userCount"].ToString(); licznikActiveLabel.Text =
Application["activeUserCount"].ToString();
}
• Umieść kontrolkę na stronie wzorcowej. Sprawdź poprawność
wskazywania ilości użytkowników. Aby zwiększyć ilość użytkowników
należy otworzyć dowolną stronę aplikacji w innej przeglądarce.
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-7
Problem 2 (czas realizacji 15 min)
Nadszedł czas na największe wyzwanie. Twoim zdaniem jest obsługa koszyka zakupów dla klientów
strony. Musisz najpierw przygotować stronę, która będzie wyświetlała zawartość koszyka. Twój
klient musi mieć możliwość zmiany ilość poszczególnych produktów, jak i usuwania. Wraz z
zespołem zastanawiałeś się, jak zrealizować dodawanie produktów do koszyka i doszliście do
wniosku, że najlepiej i najprościej będzie dodawać je przez parametr ProdID wywołania strony.
Nie zapomnij o uzupełnieniu stron wyświetlających produkty o możliwość dodawania ich do
koszyka. Wyświetl w menu możliwość przeglądania koszyka, jak i usuwania całej jego zawartości.
Zadanie Tok postępowania
1. Dodaj plik i
kontrolkę
wyświetlającą
zawartość koszyka
• Do projektu dodaj plik Zakupy.aspx oparty na szablonie
SzablonStrony.master.
• Umieść na stronie kontrolkę GridView. W oknie Properties:
— w polu ID wpisz KoszykGridView
— w polu EmptyDataText wpisz Twój koszyk jest pusty
— w polu EnableViewState z listy rozwijanej wybierz False
• Kliknij Smart Tag kontrolki KoszykGridView i wybierz Edit Colmuns.
• W obszarze Aviailable Fields wybierz BoundField i kliknij Add. W
obszarze BoundField Properities:
— w polu HeaderText wpisz Nazwa produktu
— w polu DataField wpisz Nazwa
— w polu ReadOnly z listy rozwijanej wybierz True
• W obszarze Aviailable Fields wybierz BoundField i kliknij Add. W
obszarze BoundField Properities:
— w polu HeaderText wpisz Cena
— w polu DataField wpisz Cena
— w polu DataFormatString wpisz {0:c}
— w polu HtmlEncode z listy rozwijanej wybierz False
— w polu ReadOnly z listy rozwijanej wybierz True
• W obszarze Aviailable Fields wybierz BoundField i kliknij Add. W
obszarze BoundField Properities:
— w polu HeaderText wpisz Ilość sztuk
— w polu DataFormatString wpisz {0:d}
— w polu DataField wpisz IloscSztuk
• W obszarze Aviailable Fields wybierz BoundField i kliknij Add. W
obszarze BoundField Properities:
— w polu DataField wpisz Suma
— w polu DataFormatString wpisz {0:c}
— w polu HeaderText wpisz Wartość
— w polu HtmlEncode z listy rozwijanej wybierz False
— w polu ReadOnly z listy rozwijanej wybierz True
2. Dodaj do
kontrolki
GridView przyciski
do edycji i
usuwania
• W obszarze Aviailable Fields wybierz CommandField i kliknij Add. W
obszarze CommandField Properities:
— w polu ButtonType z listy rozwijanej wybierz Button
— w polu ShowDeleteButton z listy rozwijanej wybierz True
— w polu ShowEditButton z listy rozwijanej wybierz True
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-8
rekordów — w polu CancelText wpisz Anuluj
— w polu DeleteText wpisz Usuń towar
— w polu EditText wpisz Zmień ilość
— w polu UpdateText wpisz Aktualizuj
• Dodaj kontrolkę Button i w oknie Properties:
— w polu ID wpisz kasaButton
— w polu PostBackUrl wpisz ~/Zamowienie.aspx
— w polu Text wpisz Do kasy
• Zapisz zmiany.
3. Rozszerz
aplikacje
możliwość
dodawania
produktów do
koszyka
• Otwórz stronę Produkty.aspx. W widoku Design kliknij Smart Tag
kontrolki ProduktyGridView i wybierz Edit Columns. Z list Available
fields wybierz HyperLinkField i wciśnij Add. W oknie HyperLinkField
properities:
— w polu DataNavigateUrlFields wpisz ProductID
— w polu DataNavigateUrlFormatString wpisz ~/Zakupy.aspx?id={0}
— w polu HeaderText wpisz Dodaj do koszyka
• Otwórz stronę Szczegoly.aspx. W widoku Source przed znacznikiem
</asp:View> kontrolki View o ID="prawidlowyView" dodaj:
<asp:HyperLink ID="KoszykHyperLink" runat="server"
Text="Dodaj do koszyka" /> <br />
• Otwórz plik Szczegoly.aspx.cs i wewnątrz bloku if (produkt!=null) dodaj:
KoszykHyperLink.NavigateUrl = "~/Zakupy.aspx?ProdID=" +
produkt.ProductID;
• Otwórz plik Web.sitemap. Do głównego elementu za elementem
wyświetlającym menu produktów dodaj:
<siteMapNode title="Koszyk" description="Zarządzaj koszykiem" roles="*">
<siteMapNode url="Zakupy.aspx" title="Przeglądaj"
description="Przejrzyj zawartość koszyka" />
<siteMapNode url="OproznijKoszyk.aspx"
title="Opróżnij koszyk" description="Opróżnij zawartość koszyka" />
</siteMapNode>
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-9
Problem 3 (czas realizacji 25 min)
Wspólnie z zespołem jesteś zadowolony z wyglądu aplikacji. Teraz należy przygotować logikę
obsługującą koszyk. Wspólnie przygotowaliście dwie klasy (Rys. 2), które będą odpowiedzialne za
obsługę koszyka. Dodatkowo musisz napisać logikę odpowiedzialną za zarządzanie koszykiem na
stronie Zakupy.aspx. Musisz odpowiednio umożliwić dodawanie, edycja i usuwanie produktów z
koszyka
Rys. 2 Diagram klas elementów koszyka
Zadanie Tok postępowania
1. Dodaj klasę
ElementKoszyka
• Kliknij prawym przyciskiem myszy folder App_code i wybierz Add New
Item. Następnie z okna Template wybierz Class, w polu Name wpisz
ElementKoszyka.cs, a w liście rozwijanej Language wybierz Visual C#.
• W pliku utwórz cztery właściwości Nazwa, ProdID, Cena i IloscSztuk:
public string Nazwa
{ get; set; }
public int ProdID
{ get; set; } public decimal Cena
{ get; set; }
public int IloscSztuk
{ get; set; }
• Do konstruktora domyślnego klasy ElementyKoszyka dodaj następujący
kod:
ProdID = 0;
Nazwa = "";
Cena = 0;
IloscSztuk = 0;
• Dodaj konstruktor parametryzowany klasy przyjmujący parametry:
prodID, nazwa, cena i iloscSztuk.
public ElementKoszyka(int prodID, string nazwa, decimal cena, int
iloscSztuk)
{ ProdID = prodID;
Nazwa = nazwa; Cena = cena;
IloscSztuk = iloscSztuk; }
• Utwórz właściwość Suma:
public decimal Suma
{ get { return Cena * IloscSztuk; } }
• Zapisz zmiany w pliku.
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-10
2. Dodaj klasę
Koszyk
• Kliknij prawym przyciskiem myszy folder App_code i wybierz Add New
Item. Następnie z okna Template wybierz Class, w polu Name wpisz
Koszyk.cs, a w liście rozwijanej Language wybierz Visual C#.
• W sekcji using dodaj:
using System.Collections.Generic;
• Do klasy Koszyk dodaj pole prywatne _koszyk zawierające listę
obiektów klasy ElementKoszyka:
private List<ElementKoszyka> _koszyk;
• Do konstruktora klasy Koszyk dodaj następujący kod:
_koszyk = new List<ElementKoszyka>();
• Do metody dodaj właściwość Ilosc zwracającą ilość elementów w
koszyku:
public int Ilosc
{ get { return _koszyk.Count; } }
• Do klasy dodaj metodę Pobierz zwracającą listę elementów koszyka:
public List<ElementKoszyka> Pobierz()
{ return _koszyk; }
• Do klasy dodaj metodę AktualizujIlosc przyjmującą dwa parametry typu
int: indeks i iloscSztuk:
public void AktualizujIlosc(int indeks, int iloscSztuk) { ElementKoszyka element = _koszyk[indeks];
element.IloscSztuk = iloscSztuk; }
• Do klasy dodaj metodę UsunElement przyjmującą jeden parametr –
indeks usuwanego element:
public void UsunElement(int indeks)
{ _koszyk.RemoveAt(indeks); }
• Do klasy dodaj metodę Dodaj przyjmującą parametr prodID –
identyfikator produktu, który należy dodać do koszyka. W metodzie
dodaj odpowiedni produkt:
public void Dodaj(int prodID)
{
bool znaleziono = false; foreach (ElementKoszyka element in _koszyk)
{
if (element.ProdID == prodID)
{ element.IloscSztuk += 1;
znaleziono = true; }
} if (!znaleziono)
{
AdventureWorksDataContext db = new AdventureWorksDataContext();
var produkt = (from p in db.Products
where p.ProductID == prodID select p).FirstOrDefault();
if (produkt != null)
{
ElementKoszyka element = new ElementKoszyka(prodID,
produkt.Name, produkt.ListPrice, 1);
_koszyk.Add(element); }
}
}
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-11
3. Dodaj obsługę
koszyka w pliku
Zakupy.aspx.cs
• Otwórz plik Zakupy.aspx.cs. Do klasy Zakupy dodaj obiekt koszyka typu
Koszyk:
Koszyk koszyk;
• W metodzie Page_Load utwórz nowy lub pobierz (jeśli istnieje) obiekt
koszyka przechowywany w stanie sesji:
koszyk = (Koszyk)Session["koszyk"];
if (koszyk == null)
{
koszyk = new Koszyk(); Session["koszyk"] = koszyk;
}
• Następnie w tej samej metodzie dodaj do koszyka produkt, którego
ProdID został przekazany przez parametr wywołania strony. Wyświetl
koszyk w kontrolce GridView1:
if (!IsPostBack) {
string req = Request.QueryString["prodID"];
if (req != null)
{
int prodID = int.Parse(Request.QueryString["prodID"]);
koszyk.Dodaj(prodID); //usuwanie z adresu prodID
string url = Request.Url.AbsolutePath;
System.Web.HttpContext.Current.RewritePath(url, "", "");
}
} KoszykGridView.DataSource = koszyk.Pobierz();
KoszykGridView.DataBind();
kasaButton.Enabled = (koszyk.Ilosc > 0);
• W widoku Design wybierz kontrolkę KoszykGridView. W oknie
Properties kliknij Events, a następnie dwukrotnie kliknij RowDeleting.
W metodzie obsługi zdarzenia dodaj:
koszyk.UsunElement(e.RowIndex);
KoszykGridView.DataBind();
• W widoku Design wybierz kontrolkę KoszykGridView. W oknie
Properties kliknij Events, a następnie dwukrotnie kliknij RowEditing. W
metodzie obsługi zdarzenia dodaj:
KoszykGridView.EditIndex = e.NewEditIndex; KoszykGridView.DataBind();
• W widoku Design wybierz kontrolkę KoszykGridView. W oknie
Properties kliknij Events, a następnie dwukrotnie kliknij RowUpdating.
W metodzie obsługi zdarzenia dodaj:
TextBox tb = (TextBox)
KoszykGridView.Rows[e.RowIndex].Controls[2].Controls[0];
try { int wartosc = int.Parse(tb.Text);
if (wartosc<0) { wartosc =wartosc*(-1); }
koszyk.AktualizujIlosc(e.RowIndex, wartosc);}
catch { e.Cancel = true; }
KoszykGridView.EditIndex = -1; KoszykGridView.DataBind();
• W widoku Design wybierz kontrolkę KoszykGridView. W oknie
Properties kliknij Events, a następnie dwukrotnie kliknij
RowCancelingEdit. W metodzie obsługi zdarzenia dodaj:
Piotr Bubacz Moduł 11
ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET
Strona 11-12
e.Cancel = true;
KoszykGridView.EditIndex = -1;
KoszykGridView.DataBind();
• Zapisz zamiany. Sprawdź możliwość dodawania, edycji i usuwania
produktów z koszyka.
4. Dodaj stronę
do usuwania
koszyka
• Dodaj plik OproznijKoszyk.aspx oparty na szablonie
SzablonStrony.master.
• Do pliku OproznijKoszyk.aspx.cs dodaj:
Session["koszyk"] = null;
Response.Redirect("~/Default.aspx");
5. Przetestuj
dodawanie
produktów do
koszyka
• Dodaj produkty do koszyka. Zmień ilość produktów wpisując wartość
ujemną oraz wpisując tekst zamiast liczby.
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 12
Wersja 1
Technologia WebParts
Spis treści
Technologia WebParts ......................................................................................................................... 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Uwagi dla studenta ...................................................................................................................... 7
Dodatkowe źródła informacji....................................................................................................... 7
Laboratorium podstawowe .................................................................................................................. 8
Problem 1 (czas realizacji 20 min) ................................................................................................ 8
Problem 2 (czas realizacji 20 min) ................................................................................................ 9
Problem 3 (czas realizacji 5 min) ................................................................................................ 10
Piotr Bubacz Moduł 12
ITA-103 Aplikacje Internetowe Technologia WebParts
Strona 12-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące technologii umożliwiającej
personalizację wyglądu strony przez jej użytkowników – WebParts.
Nauczysz się, jak tworzyć i zarządzać kontrolkami WebPart, jak również, jak
zachować układ kontrolek umieszczonych na szablonie strony na wszystkich
stronach serwisu.
Cel modułu
Celem modułu jest przedstawienie możliwości wykorzystania technologii
umożliwiającej personalizację wyglądu strony przez jej użytkowników.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• wiedział jak wykorzystać technologię WebPart tworzenia treści
personalizowanych przez użytkowników strony
• potrafił tworzyć kontrolki WebPart na podstawie kontrolek
użytkownika
• potrafił zachować wygląd kontrolek WebPart na wszystkich stronach
serwisu
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy HTML i CSS
• znać zasady pracy w Visual Studio 2008
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznać się z materiałem zawartym
w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS” oraz
„Wprowadzenie do ASP.NET”.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 12
ITA-103 Aplikacje Internetowe Technologia WebParts
Strona 12-3
Przygotowanie teoretyczne
Przykładowy problem
Coraz częściej jednym z wymagań stawianych przed portalem internetowym jest jego
interaktywność. Użytkownik powinien mieć możliwość nie tylko dodawania treści czy interakcji z
elementami portalu, lecz również układania elementów na stronach zgodnie z potrzebami.
Użytkownicy chcą sami określać, które komponenty i w jakich miejscach mają być umieszczone. Za
tym trendem podążają najwięksi. Na naszym rynku jeden z portali internetowych wprowadził
możliwość zmiany układu elementów na stronie oraz ilości wyświetlanych informacji. W sieci
Internet możemy znaleźć wiele przykładów stron, które umożliwiają nam indywidualną
konfiguracje elementów na stronie.
Napisanie takiej funkcjonalności nie jest proste. Chcielibyśmy mieć gotowe rozwiązanie, które
szybko i skutecznie możemy dodać do naszej strony.
Podstawy teoretyczne
Kontrolki WebPart służą do budowania portali internetowych, w których użytkownik decyduje, co i
gdzie będzie wyświetlane. Użytkownik za pomocą przeglądarki może dodać, usunąć oraz zamienić
zawartość wybranych przez programistę kontrolek.
Możliwości technologii WebParts
Główne możliwości, jakie zapewniają nam kontrolki WebPart, to:
• Personalizacja zawartości strony – użytkownik może dodać, usunąć, ukryć lub
zminimalizować kontrolkę WebPart.
• Personalizacja wyglądu strony – użytkownik może przeciągać kontrolki pomiędzy strefami
na stronie, zmieniać ich wygląd, własności i zachowanie.
• Eksport i import kontrolek – użytkownik może eksportować i importować kontrolki WebPart
wraz z ustawieniami, wyglądem a nawet danymi.
• Tworzenie połączeń pomiędzy kontrolkami – użytkownik może zmieniać wartości w jednej
kontrolce, które mają wpływ na inną kontrolkę (np. zmiana wartości powoduje zmianę
zawartości innej kontrolki).
Kontrolki WebPart
Najważniejsze kontrolki WebPart to:
• WebPartManager – zarządza kontrolkami WebPart, musi zostać umieszczony przed innymi
kontrolkami WebPart, może być tylko jeden na stronie.
• CatalogZone – zawiera katalog kontrolek WebPart, które użytkownik może wybrać z listy
dostępnych elementów i umieścić w strefach Web Part.
• EditorZone – umożliwia edycję i personalizację kontrolek WebPart przez użytkownika.
• WebPartZone – umożliwia umieszczanie kontrolek użytkownika, na stronie może znajdować
się wiele takich kontrolek. Możliwe jest również umieszczanie w niej istniejących kontrolek
serwerowych oraz kontrolek użytkownika, które stają się kontrolkami WebPart.
• WebPart – jest to klasa bazowa dla kontrolek WebPart, kontrolka dziedzicząca po tej klasie
może zostać dodana do WebPartZone.
Kontrolka WebPartManager
Kontrolka WebPartManager umożliwia zarządzanie i kontrolę zachowaniem kontrolek WebPart.
Na stronie internetowej może być umieszczona tylko jedna taka kontrolka, ponadto musi zostać
umieszczona przed innymi kontrolkami WebPart.
Piotr Bubacz Moduł 12
ITA-103 Aplikacje Internetowe Technologia WebParts
Strona 12-4
WebPartManager umożliwia zmianę trybu wyświetlania strony zawierającej kontrolki WebPart.
Możliwe tryby to:
• Browse – w tym trybie możliwe jest tylko przeglądanie kontrolek.
• Design – w tym trybie możliwe jest przeciąganie kontrolek pomiędzy strefami WebPartZone
przy pomocy myszy. Zmiany są zapamiętywane na serwerze.
• Edit – w tym trybie użytkownik może robić to, co w trybie Design, dodatkowo, po
umieszczeniu kontrolki EditorZone możliwa jest zmiana atrybutów kontrolki.
• Catalog – w tym trybie użytkownik może przy pomocy kontrolki CatalogZone dodawać i
usuwać kontrolki WebPart ze stref WebPartZone
Tryb pracy może zostać zmieniony programowo przy pomocy zmiany własności DisplayMode:
WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode
Kontrolka WebPartZone
Kontrolka WebPartZone jest kontenerem dla innych kontrolek WebPart i można w niej umieścić
dowolną ilość tych kontrolek. Kontrolki WebPart mogą zostać dodane do WebPartZone statycznie
lub dynamicznie. Użytkownik może, wykorzystując kontrolkę CatalogPart, wybrać z listy
rozwijanej obiekt WebPart i dodać go do odpowiedniej strefy WebPartZone.
Kontrolka CatalogZone
W trybie Catalog obiektu WebPartManager jest widoczna kontrolka CatalogZone. Przy jej
pomocy użytkownik może dodać kontrolkę WebPart do wybranej strefy WebPartZone. Kontrolka
ta może zawierać kontrolki PageCatalogPart, DeclarativeCatalogPart oraz
ImportCatalogPart.
Kontrolka PageCatalogPart (Rys. 2) wyświetla wszystkie dostępne kontrolki WebPart, które
jeszcze nie są umieszczone na stronie. Po dodaniu kontrolki do strefy kontrolka jest usuwana z listy
dostępnych kontrolek.
Rys. 2 Kontrolka PageCatalogPart
Kontrolka ImportCatalogPart (Rys. 3) umożliwia zaimportowanie kontrolek WebPart na
serwer.
Piotr Bubacz Moduł 12
ITA-103 Aplikacje Internetowe Technologia WebParts
Strona 12-5
Rys. 3 Kontrolka ImportCatalogPart
Kontrolka DeclarativeCatalogZone umożliwia programowe określenie listy dostępnych
kontrolek.
Kontrolka EditorZone
W trybie Edit po wybraniu opcji Edit na kontrolce WebPart (Rys. 4) jest wyświetlana kontrolka
EditorZone. Umożliwia ona edycję właściwości kontrolek znajdujących się w strefach
WebPartZone.
Rys. 4 Kontrolka i opcje dostępne w trybie Edit
Kontrolka EditorZone może zawierać kontrolki AppearanceEditorPart (Rys. 5),
BehaviorEditorPart, LayoutEditorPart oraz PropertyGridEditorPart.
Rys. 5 Kontrolka AppearanceEditorPart w kontrolce EditorZone
Piotr Bubacz Moduł 12
ITA-103 Aplikacje Internetowe Technologia WebParts
Strona 12-6
AppearanceEditorPart (Rys. 5) umożliwia zmianę wyglądu kontrolki WebPartZone poprzez
konfigurowalne ustawienie kilku atrybutów strefy. Kontrolka umożliwia zmianę tytułu, sposobu
wyświetlania kontrolki WebPart (tytuł i ramka), kierunku tekstu (z prawej do lewej lub odwrotnie),
rozmiarów oraz widoczności kontrolki na stronie.
Kontrolki WebPart
W celu dodania kontrolek WebPart należy umieścić na stronie kontrolkę WebPartManager.
Kontrolki WebPart należy umieszczać w kontrolce WebPartZone. Zarządzanie kontrolkami
umożliwiają kontrolki EditorZone oraz CatalogZone.
Problemy z zachowaniem wyglądu kontrolek WebPart
Informacje o rozłożeniu kontrolek WebPart są przechowywane dla każdej strony osobno. Z tego
względu należy przesłonić metod LoadPersonalizationBlobs,
ResetPersonalizationBlob, and SavePersonalizationBlob klasy
SqlPersonalizationProvider.
Rozwiązaniem tego problemu jest wykorzystanie klasy zmieniającej standardowe zachowanie
kontrolek WebPart.
public class MasterPageOnlySqlPersonalizationProvider :
SqlPersonalizationProvider
{
protected override void LoadPersonalizationBlobs(
WebPartManager webPartManager,
string path,
string userName,
ref byte[] sharedDataBlob,
ref byte[] userDataBlob)
{
base.LoadPersonalizationBlobs(
webPartManager,
"master",userName,
ref sharedDataBlob,
ref userDataBlob);
}
protected override void ResetPersonalizationBlob(
WebPartManager webPartManager,
string path,
string userName)
{
base.ResetPersonalizationBlob(
webPartManager,
"master",
userName);
}
protected override void SavePersonalizationBlob(
WebPartManager webPartManager,
string path,
string userName,
byte[] dataBlob)
{
base.SavePersonalizationBlob(
webPartManager,
"master",
userName,
dataBlob);
}
}
Piotr Bubacz Moduł 12
ITA-103 Aplikacje Internetowe Technologia WebParts
Strona 12-7
Zmiany w pliku Web.config. Dodanie do sekcji <system.web> informacji o nowym dostawcy:
<webParts>
<personalization
defaultProvider="MasterPageOnlySqlPersonalizationProvider">
<providers>
<add name="MasterPageOnlySqlPersonalizationProvider"
type="MasterPageOnlySqlPersonalizationProvider, __code"
connectionStringName="LocalSqlServer" />
</providers>
</personalization>
</webParts>
Rozwiązanie zaczerpnięto ze strony http://jason.diamond.name/weblog/2005/11/09/web-parts-
and-master-pages.
Podsumowanie
W tym rozdziale przedstawione zostały podstawy pracy z kontrolkami WebPart oraz rozwiązanie
problemu umieszczenia kontrolek na szablonie strony i utrzymanie ich wyglądu w całej aplikacji.
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• rozumiesz zasadę działania kontrolek WebPart
• umiesz zarządzać trybem pracy kontrolki WebPartManager
• wiesz jak skonfigurować kontrolki WebPart, aby były wyświetlane na wszystkich stronach
serwisu jednakowo
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. Instrukcja: Tworzenie strony Web Parts w programie Visual Web Developer,
http://www.microsoft.com/poland/developer/net/podrecznik/additional-2.mspx
Krok po kroku instrukcja prowadzi Cię przez tworzenie strony z użyciem kontrolek
WebPart.
2. Stephen Walther, ASP.NET 2.0 księga eksperta, Helion, 2008
W książce autor poświęcił wiele miejsca kontrolkom WebPart. Opisał metody
tworzenia aplikacji za pomocą tych kontrolek, zaprezentował wszystkie kontrolki
WebPart. Pokazał ścieżkę od podstawowej kontrolki WebPart aż po rozbudowane
możliwości tej platformy.
3. Darren Neimke, ASP.NET 2.0 Web Parts in Action: Building Dynamic Web Portals, Manning
Publications, 2006
Ta ponad 400-stronicowa książka jest poświęcona w całości technologii WebPart.
Autor przekazuje całą swoją wiedzę, począwszy od postaw, a skończywszy na
współpracy WebPart z AJAX.
4. ASP.NET QuickStart Tutorials, http://quickstarts.asp.net/QuickStartv20/aspnet
Na stronie w sekcji „WebParts Controls” znajdziesz podstawowe informacje i
przykłady użycia kontrolek WebPart.
Piotr Bubacz Moduł 12
ITA-103 Aplikacje Internetowe Technologia WebParts
Strona 12-8
Laboratorium podstawowe
Problem 1 (czas realizacji 20 min)
Przygotowujesz aplikację internetową dla firmy Adventure Works, która planuje ekspansje na rynku
internetowym w Polsce. Aktualnie aplikacja praktycznie już działa, teraz nadszedł czas rozszerzania
jej funkcjonalności. Wybór Twojego zespołu padł na technologię WebPart. Jest to ciekawa
technologia, z którą już mieliście wcześniej styczność w intranetowej witrynie SharePoint, ale
dopiero teraz testujecie ją w ASP.NET.
Zadanie Tok postępowania
1. Tworzenie
podstawowej
struktury dla
kontrolek
WebPart
• Otwórz aplikację internetową przygotowaną w poprzednim module.
• Otwórz plik SzablonStrony.master i przełącz widok na Design.
• Na górze strony dodaj kontrolkę WebPartManager. Zmień jej ID na
MenadzerWebPartow.
• Do pierwszego obszaru bocznego (ID="PierwszyObszarBoczny") dodaj
kontrolkę WebPartZone i określ jej ID jako PierwszyObszarWebPartow.
• Do drugiego obszaru bocznego (ID="DrugiObszarBoczny") dodaj
kontrolkę WebPartZone i określ jej ID jako DrugiObszarWebPartow.
• Przenieś istniejące kontrolki użytkownika do odpowiednich obszarów
WebPart.
2. Utwórz stronę
do zarządzania
kontrolkami
WebPart
• Do projektu w katalogu Zarzadzanie dodaj plik WP.aspx oparty na
stronie wzorcowej SzablonStrony.master.
• Dodaj plik WP.aspx do pliku Web.sitemap. W węźle siteMapNode o
właściwości title="Zarządzanie" dodaj:
<siteMapNode url="Zarzadzanie/WP.aspx"
title="Zarządzanie układem strony"
description="Zarządzaj kontrolkami WebPart" />
• W pliku WP.aspx w widoku Design napisz Zarządzanie kontrolkami
WebPart, następnie dodaj znak końca linii i napisz Wybierz tryb:.
• Dodaj kontrolkę DropDownList, a następnie w oknie Properties:
— w polu ID wpisz trybDropDownList
— w polu AutoPostBack z listy rozwijanej wybierz True
• Z menu Smart Tag kontrolki trybDropDownList wybierz Edit Items, a
następnie dodaj elementy o następujących właściwościach, po czym
zamknij okno:
— tekst wyświetlany: Przeglądaj, wartość: 0
— tekst wyświetlany: Projektuj, wartość: 1
— tekst wyświetlany: Edytuj, wartość: 2
— tekst wyświetlany: Katalog, wartość: 3
• Dodaj kontrolkę EditorZone, następnie dodaj do niej kontrolkę
AppearanceEditorPart.
• Dodaj kontrolkę CatalogZone, a następnie dodaj do niej kontrolkę
PageCatalogPart
• Dodaj procedurę obsługi zdarzenia SelectedIndexChanged kontrolki
trybDropDownList. W procedurze dodaj następujący kod:
WebPartManager wpm = new WebPartManager();
wpm = (WebPartManager)
Page.Master.FindControl("MenadzerWebPartow"); switch (trybDropDownList.SelectedValue)
Piotr Bubacz
ITA-103 Aplikacje Internetowe
{
}
• W
using System.Web.UI.WebControls.WebParts;
• Zapisz stronę
3. Sprawdź
poprawność
działania aplikacji
• Uruchom aplikację, zaloguj się i w
WebPartManager
Problem 2 (czas realizacji 20 min)
Kontrolki użytkownika umieszczone w kontrolce
aby łatwo można je było identyfikować. W tym celu postanowiłeś przekształcić je na kontrolki
WebPart.
Zadanie Tok postępowania
1. Zmiana
wyświetlania
tytułu kontrolki
Kategorie
• Otwórz plik
wraz z zawartością
• Otwórz plik
następujący kod:
GenericWebPart gwp = Parent as GenericWebPart;
if (gwp != null)
2. Zmiana
wyświetlania
tytułu kontrolki
Licznik
• Otwórz plik
następujący kod:
GenericWebPart gwp = Parent as GenericWebPart;
if (gwp != null)
3. Zmiana
wyświetlania
tytułu kontrolki
NoweProdukty
• Otwórz plik
<strong>Nasze nowe
• Otwórz plik
umieść następujący kod:
GenericWebPart gwp = Parent as GenericWebPart;if (gwp != null)
4. Zmiana
wyświetlania
tytułu kontrolki
WybraneProdukty
• Otwórz plik
<strong>Wybrane produkty:</strong>
• Otwórz plik
Page_Load
Strona 12-9
case "1":
wpm.DisplayMode = WebPartManager.DesignDisplayMode; break;
case "2":
wpm.DisplayMode = WebPartManager.EditDisplayMode;
break;
case "3":
wpm.DisplayMode = WebPartManager.CatalogDisplayMode; break;
default:
wpm.DisplayMode = WebPartManager.BrowseDisplayMode;
break;
W pliku WP.aspx.cs w sekcji using na samej górze
using System.Web.UI.WebControls.WebParts;
Zapisz stronę.
Uruchom aplikację, zaloguj się i wybierz różne tryby pracy kontrolki
WebPartManager. Sprawdź zachowanie kontrolek
Jakie nazwy noszą kontrolki?
(czas realizacji 20 min)
Kontrolki użytkownika umieszczone w kontrolce WebPartZone wymagają wyświetlenia tytułu tak,
aby łatwo można je było identyfikować. W tym celu postanowiłeś przekształcić je na kontrolki
Tok postępowania
Otwórz plik Kontrolki/Kategorie.aspx. Usuń sekcję
wraz z zawartością wpisz tekst Wybierz kategorię produktu
Otwórz plik Kontrolki/Kategorie.aspx.cs. w metodzie
następujący kod:
GenericWebPart gwp = Parent as GenericWebPart;
if (gwp != null)
{ gwp.Title = "Wybierz kategorię produktu";
Otwórz plik Kontrolki/Licznik.aspx.cs. w metodzie
następujący kod:
GenericWebPart gwp = Parent as GenericWebPart;
if (gwp != null) { gwp.Title = "Licznik odwiedzin"; }
Otwórz plik Kontrolki/NoweProdukty.aspx. Usuń
<strong>Nasze nowe produkty:</strong><br />
Otwórz plik Kontrolki/NoweProdukty.aspx.cs. w metodzie
umieść następujący kod:
GenericWebPart gwp = Parent as GenericWebPart;if (gwp != null)
{ gwp.Title = "Nasze nowe produkty:"; }
Otwórz plik Kontrolki/WybraneProdukty.aspx. Usuń następujący kod:
<strong>Wybrane produkty:</strong>
Otwórz plik Kontrolki/WybraneProdukty.aspx.cs
Page_Load umieść następujący kod:
Moduł 12
Technologia WebParts
wpm.DisplayMode = WebPartManager.DesignDisplayMode;
wpm.DisplayMode = WebPartManager.EditDisplayMode;
wpm.DisplayMode = WebPartManager.CatalogDisplayMode;
wpm.DisplayMode = WebPartManager.BrowseDisplayMode;
na samej górze dodaj:
ybierz różne tryby pracy kontrolki
prawdź zachowanie kontrolek.
wymagają wyświetlenia tytułu tak,
aby łatwo można je było identyfikować. W tym celu postanowiłeś przekształcić je na kontrolki
sekcję HeaderTemplate
Wybierz kategorię produktu.
. w metodzie Page_Load umieść
GenericWebPart gwp = Parent as GenericWebPart;
}
. w metodzie Page_Load umieść
GenericWebPart gwp = Parent as GenericWebPart;
. Usuń następujący kod:
. w metodzie Page_Load
GenericWebPart gwp = Parent as GenericWebPart;
Usuń następujący kod:
.aspx.cs. W metodzie
Piotr Bubacz
ITA-103 Aplikacje Internetowe
GenericWeb
if (gwp != null)
5. Sprawdź
poprawność
działania aplikacji
• Sprawdź poprawność działania aplikacji
• Wybierz różne tryby i sprawdź zachowanie kontrolek
Problem 3 (czas realizacji
Niestety okazało się, że kontrolki zachowują swój układ tylko na stronie WP.aspx. Musicie wraz z
zespołem znaleźć rozwiązanie tego problemu.
Zadanie Tok postępowania
1. Dodaj klasę
MasterPageOnlyS
qlPersonalizationP
rovider
• Kliknij folder
Item
• W obszarze
MasterPageOnlySqlPersonalizationProvider.cs
wybierz
• W sekcji using dodaj:
using System.Web.UI.WebControls.WebParts;
• Określ klasę bazową
class MasterPageOnlySqlPersonalizationProvider
public class
SqlPersonalizationProvider
• Usuń konstruktor klasy i
protected override void LoadPersonalizationBlobs(
{
}
protected override void ResetPersonalizationBlob(
{
} protected override void SavePersonalizationBlob(
{
Strona 12-10
GenericWebPart gwp = Parent as GenericWebPart;
if (gwp != null)
{ gwp.Title = " Wybrane produkty:"; }
Sprawdź poprawność działania aplikacji.
Wybierz różne tryby i sprawdź zachowanie kontrolek
Czy układ kontrolek po zmianie na stronie WP.aspx
na wszystkich stronach aplikacji?
(czas realizacji 5 min)
Niestety okazało się, że kontrolki zachowują swój układ tylko na stronie WP.aspx. Musicie wraz z
zespołem znaleźć rozwiązanie tego problemu.
Tok postępowania
Kliknij folder App_Code prawym przyciskiem myszy i wybierz
Item.
W obszarze Templates wybierz Class, w polu
MasterPageOnlySqlPersonalizationProvider.cs, a
wybierz Visual C#.
W sekcji using dodaj:
using System.Web.UI.WebControls.WebParts;
Określ klasę bazową SqlPersonalizationProvider
class MasterPageOnlySqlPersonalizationProvider
public class MasterPageOnlySqlPersonalizationProvider :
SqlPersonalizationProvider
Usuń konstruktor klasy i dodaj następujący kod:
protected override void LoadPersonalizationBlobs( WebPartManager webPartManager,
string path,
string userName,
ref byte[] sharedDataBlob,
ref byte[] userDataBlob) {
base.LoadPersonalizationBlobs(
webPartManager,
"master",userName,
ref sharedDataBlob,
ref userDataBlob);
protected override void ResetPersonalizationBlob(
WebPartManager webPartManager,
string path,
string userName)
base.ResetPersonalizationBlob(
webPartManager,
"master",
userName);
protected override void SavePersonalizationBlob(
WebPartManager webPartManager,
string path,
string userName,
byte[] dataBlob)
base.SavePersonalizationBlob(
webPartManager,
Moduł 12
Technologia WebParts
Part gwp = Parent as GenericWebPart;
Wybierz różne tryby i sprawdź zachowanie kontrolek.
WP.aspx jest utrzymywany
Niestety okazało się, że kontrolki zachowują swój układ tylko na stronie WP.aspx. Musicie wraz z
prawym przyciskiem myszy i wybierz Add New
, w polu Name wpisz
, a z listy rozwijanej
SqlPersonalizationProvider. Zmień public
class MasterPageOnlySqlPersonalizationProvider na:
MasterPageOnlySqlPersonalizationProvider :
protected override void LoadPersonalizationBlobs(
protected override void ResetPersonalizationBlob(
protected override void SavePersonalizationBlob(
Piotr Bubacz
ITA-103 Aplikacje Internetowe
}
• Zapisz zmiany w pliku
2. Dodaj nowego
dostawcę w pliku
Web.config
• Otwórz plik
<webParts>
</webParts>
• Zapisz zmiany w pliku
3. Sprawdź
poprawność
działania aplikacji
• Sprawdź poprawność działania aplikacji
• Wybierz różne tryby i sprawdź zachowanie kontrolek
Strona 12-11
"master",
userName,
dataBlob);
Zapisz zmiany w pliku.
Otwórz plik Web.config i do sekcji <system.web>
<webParts>
<personalization
defaultProvider="MasterPageOnlySqlPersonalizationProvider"> <providers>
<add name="MasterPageOnlySqlPersonalizationProvider"
type="MasterPageOnlySqlPersonalizationProvider, __code"
connectionStringName="LocalSqlServer" />
</providers>
</personalization> </webParts>
Zapisz zmiany w pliku.
Sprawdź poprawność działania aplikacji.
Wybierz różne tryby i sprawdź zachowanie kontrolek
Czy układ kontrolek po zmianie na stronie WP.aspx
na wszystkich stronach aplikacji?
Moduł 12
Technologia WebParts
dodaj:
defaultProvider="MasterPageOnlySqlPersonalizationProvider">
<add name="MasterPageOnlySqlPersonalizationProvider"
type="MasterPageOnlySqlPersonalizationProvider, __code"
connectionStringName="LocalSqlServer" />
Wybierz różne tryby i sprawdź zachowanie kontrolek.
WP.aspx jest utrzymywany
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 13
Wersja 1
ASP.NET AJAX
Spis treści
ASP.NET AJAX ....................................................................................................................................... 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Uwagi dla studenta ...................................................................................................................... 7
Dodatkowe źródła informacji....................................................................................................... 7
Laboratorium podstawowe .................................................................................................................. 9
Problem 1 (czas realizacji 25 min) ................................................................................................ 9
Problem 2 (czas realizacji 10 min) .............................................................................................. 11
Problem 3 (czas realizacji 10 min) .............................................................................................. 12
Piotr Bubacz Moduł 13
ITA-103 Aplikacje Internetowe ASP.NET AJAX
Strona 13-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące tworzenia aplikacji
internetowych z wykorzystaniem AJAX. Zobaczysz, jak prosto i skutecznie
można wykorzystywać podstawowe kontrolki dostępne w ASP.NET AJAX.
Nauczysz się, jak kilkoma kliknięciami myszy rozszerzyć funkcjonalność
aplikacji o możliwość asynchronicznej komunikacji z serwerem.
Cel modułu
Celem modułu jest przedstawienie AJAX oraz możliwości wykorzystania go
w aplikacjach ASP.NET przy użyciu biblioteki ASP.NET AJAX.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• potrafił tworzyć strony częściowo aktualizowane
• potrafił rozbudowywać istniejącą aplikację o AJAX
• rozumiał zalety stosowania technologii AJAX
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy języka XHTML
• znać zasady pracy w środowisku Visual Studio, w szczególności
tworzenia stron internetowych
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznać się z materiałem zawartym
w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS” oraz
„Wprowadzenie do ASP.NET”.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 13
ITA-103 Aplikacje Internetowe ASP.NET AJAX
Strona 13-3
Przygotowanie teoretyczne
Przykładowy problem
Rozbudowane aplikacje internetowe wymagają długiego czasu na przesłanie informacji od klienta
do serwera. W czasie przesyłania klient może jedynie cierpliwie oczekiwać na dane z serwera.
Niestety większość osób chciała by dane od razu lub też mieć chociaż możliwość przeglądania
strony w czasie pobierania danych. Dodatkowo dobrze by było, gdybyśmy mogli pobierać dane nie
całej strony na raz, ale tylko wybranych elementów.
Podstawy teoretyczne
Klasyczny model aplikacji internetowej
W poprzednich modułach wykorzystywano klasyczny model aplikacji internetowej. W modelu
takim niewielkie zmiany wykonane przez użytkownika na stronie mogą spowodować wysłanie
danych do serwera i wygenerowanie dla klienta nowego dokumentu HTML, nawet jeśli nie różni się
on znacząco od poprzedniego (Rys. 2).
Rys. 2 Klasyczny model aplikacji internetowej
Przykładem takiej akcji w aplikacji tworzonej na zajęciach może być wybranie kategorii z listy
rozwijanej. W takim przypadku zmienia się tylko niewielka część strony odpowiedzialna za
wyświetlenie tytułów, ale serwer i tam musi wygenerować nowy dokument i wysłać go do
użytkownika.
Problemy występujące w klasycznym model aplikacji internetowej:
• Komunikacja zwrotna – po wykonaniu każdej akcji wymagającej przetwarzania po stronie
serwera, cała strona jest przeładowywana, nawet jeśli nowy dokument nie różni się znacząco
od poprzedniego.
• Transfer danych poprzez sieć – dokument wygenerowany po stronie serwera w wyniku
komunikacji zwrotnej musi być za każdym razem w całości wysłany do klienta.
• Przetwarzanie na serwerze – generowanie całego dokumentu od nowa w przypadku
komunikacji zwrotnej powoduje niepotrzebne obciążenie zasobów serwera.
Co to jest AJAX?
AJAX jest to technika pozwalająca aplikacjom Web komunikować się asynchronicznie z serwerem
(Rys. 3). AJAX nie jest technologią – jest podejściem łączącym wiele technologii. AJAX to akronim
powstały od słów Asynchronous JavaScript And XML.
Piotr Bubacz Moduł 13
ITA-103 Aplikacje Internetowe ASP.NET AJAX
Strona 13-4
Rys. 3 Model aplikacji internetowej z użyciem AJAX
AJAX:
• Asynchronous – komunikacja odbywa się asynchronicznie.
• JavaScript – JavaScript jest odpowiedzialny za wysyłanie informacji do serwera,
asynchroniczny odbiór odpowiedzi i przetworzenie jej.
• XML – jest formatem odpowiedzi serwera, dodatkowo komunikacja odbywa się poprzez
obiekt XmlHttpRequest. Aktualnie XML wykorzystuje się rzadziej na rzecz mniej kosztownych
w przesyłaniu i przetwarzaniu formatów takich jak JSON (ang. JavaScript Object Notation).
Zalety i wady AJAX
AJAX posiada wiele zalet, w tym m.in.:
• Strony nie są odświeżane po wykonaniu każdej akcji wymagającej przetwarzania po stronie
serwera.
• Tylko potrzebne dane są wymieniane z serwerem.
• Zwiększona szybkość odpowiedzi serwera.
Należy jednocześnie zdawać sobie sprawę z pewnych wad tego rozwiązania, m.in.:
• Wymaga JavaScript, który może być wyłączony w przeglądarce użytkownika.
• Aplikacjom AJAX trudno zapewnić zgodność z WCAG (ang. Web Content Availability
Guidelines, wytyczne dotyczące dostępności materiałów publikowanych w sieci Internet).
• Jest trudny w oprogramowaniu:
• należy odpowiedniego zainicjalizować obiekt XmlHttpRequest
• duże problemy może sprawiać obsługi przycisków nawigacyjnych w przeglądarce
• mogą pojawić się problemy z zapamiętywaniem i odtwarzaniem konkretnego stanu
aplikacji
ASP.NET AJAX
ASP.NET AJAX jest zbiorem rozszerzeń, które umożliwiają wykorzystanie AJAX w aplikacjach
ASP.NET. Zalety ASP.NET AJAX to:
• Odciążenie serwera na rzecz przetwarzania po stronie klienta.
• Możliwość wykorzystania elementów interfejsu użytkownika znanych z aplikacji Windows,
np. wskaźniki postępu.
• Aktualizacja tylko tych części strony, które tego wymagają.
Piotr Bubacz Moduł 13
ITA-103 Aplikacje Internetowe ASP.NET AJAX
Strona 13-5
• Dostęp po stronie klienta do usług aplikacji ASP.NET: autoryzacji formularzy i profili
użytkownika.
• Integracja danych z różnych źródeł za pomocą odwołań do usług Web (niniejszy kurs nie
obejmuje zagadnień związanych z usługami Web – więcej informacji na ten temat można
znaleźć m.in. pod adresem http://msdn.microsoft.com/webservices).
• Wsparcie dla większości popularnych i używanych przeglądarek, m.in. Microsoft Internet
Explorer, Mozilla Firefox i Apple Safari.
Architektura ASP.NET AJAX
Technologia ASP.NET AJAX zawiera biblioteki skryptów klienckich oraz komponenty serwerowe
(Rys. 4). Dodatkowo można rozszerzyć jej możliwości o darmowy zestaw kontrolek ASP.NET AJAX
Control Toolkit.
ASP.NET AJAX-enabled
ASP.NET Pages
Web Services(ASMX or WCF)
HTML, Script,ASP.NET AJAX
Markup
ASP.NET AJAXServiceProxies
ASP.NET 2.0
Application Services
Page Framework,Server Controls
ASP.NET AJAX Server Extensions
ASP.NET AJAXServer
Controls
App Services Bridge
Web Services Bridge
Microsoft AJAX Library(Client Script Library)
Controls, Components
Script Core
Base Class Library
Component Model and UI Framework
Browser Compatibility
ASP.NET AJAX Client App Services
Local Store
BrowserIntegration
Rys. 4 Architektura ASP.NET AJAX
Bibliotek skryptów po stronie klienta
Biblioteka skryptów po stronie klienta zawiera rozszerzenia JavaScript, które pozwalają na
programowanie zorientowane obiektowo. Taka możliwość nie była wcześniej bezpośrednio
dostępna dla programistów JavaScript. Możliwości programowania zorientowanego obiektowo
dodane do biblioteki skryptów ASP.NET AJAX pozwalają na tworzenie bardziej spójnego i
modularnego kodu po stronie klienta.
Następujące warstwy zostały włączone do biblioteki:
• Biblioteka klas podstawowych – udostępnia podstawowe komponenty i rozszerzoną obsługę
błędów.
• Możliwości przeglądarki – zapewnia kompatybilność skryptów klienckich z większością
używanych przeglądarek.
• Sieci – odpowiada za komunikację z aplikacjami i usługami Web i zarządza asynchronicznymi
wywoływaniami metod.
• Usługi jądra – zawiera rozszerzenia JavaScript, takie jak klasy, przestrzenie nazw, obsługa
błędów, dziedziczenie, typy danych i serializacja obiektów.
Piotr Bubacz Moduł 13
ITA-103 Aplikacje Internetowe ASP.NET AJAX
Strona 13-6
Technologie po stronie serwera
Kontrolki serwerowe ASP.NET AJAX to:
• ScriptManager
• UpdatePanel
• UpdateProgress
• Timer
Usługi Web, z jakich możemy korzystać z poziomu ASP.NET AJAX:
• uwierzytelnianie formularzy
• profile
Kontrolki serwerowe ASP.NET AJAX
Kontrolki serwerowe ASP.NET AJAX łączą w sobie kod wykonywany zarówno po stronie serwera, jak
i klienta.
ScriptManager
Kontrolka ScriptManager zarządza zasobami skryptowymi dla komponentów klienta, częściową
aktualizacją strony, lokalizacją, globalizacją i skryptami własnymi użytkownika. Kontrolka ta musi
zostać umieszczona przed innymi kontrolkami ASP.NET AJAX na stronie. Koordynuje ona i rejestruje
skrypty odpowiedzialne za częściowe odświeżanie strony, odpowiada za konfigurowanie, czy też
zwolnienie bądź debugowanie skryptów wysyłanych do przeglądarki oraz interakcję skryptów z
metodami usług sieciowych.
UpdatePanel
Kontrolka UpdatePanel umożliwia aktualizację wybranej części strony przy użyciu
asynchronicznych żądań. Jest kluczowym elementem AJAX w ASP.NET. Umożliwia wykorzystanie
mechanizmu częściowego odświeżania strony, dzięki czemu możliwe jest ograniczenie czasu
potrzebnego na ponowne ładowanie strony.
Kontrolka UpdatePanel jest kontenerem elementów podlegających pod system dynamicznego
odświeżania strony. Najważniejsze właściwości kontrolki to:
• ContentTemplate – jest kontenerem dla kontrolek, które mają być dynamicznie
aktualizowane. Dodawanie kontrolek jest możliwe tylko do tej części.
• Triggers – zawiera listę wyzwalaczy – zdarzeń, które mogą wywołać aktualizację kontrolek
znajdujących się w ContentTemplate. Dzielą się na dwie grupy:
• AsyncPostBackTrigger – możemy zdefiniować zewnętrzną względem UpdatePanel
kontrolkę i jej zdarzenie, które spowodują jej aktualizację
• PostBackTrigger – możemy zdefiniować wewnętrzną względem UpdatePanel
kontrolkę i jej zdarzenie, które spowoduje aktualizację nie tylko panelu, ale i całej strony
Kontener kontrolek wskazujący aktualizowany region na stronie:
Kontrolki i zawartość nie aktualizowane ...
<asp:UpdatePanel id="u1" runat="server">
<ContentTemplate>
ta zawartość jest dynamicznie aktualizowana!
<asp:label id="Lablel1" runat="server"/>
<asp:button id="button1" text="Wciśnij mnie!" runat="server"/>
<ContentTemplate>
</asp:UpdatePanel>
Pozostała zawartość nie jest aktualizowana...
Piotr Bubacz Moduł 13
ITA-103 Aplikacje Internetowe ASP.NET AJAX
Strona 13-7
Kontrolka UpdatePanel automatycznie generuje wszystkie wymagane skrypty i wysyła je do
przeglądarki. Na stronie możemy umieścić wiele kontrolek UpdatePanel i każda z nich będzie
niezależnie aktualizowana.
UpdateProgress
Kontrolka UpdateProgress udostępnia informacje o statusie aktualizacja kontrolki
UpdatePanel. Kontrolka wyświetla zawartość określoną przez właściwość ProgressTemplate.
W momencie aktualizacji kontrolki UpdatePanel pojawia się zawartość zdefiniowana w kontrolce
UpdateProgress.
Możemy sterować czasem, po jakim pojawi się wyświetlana zawartość kontrolki
UpdateProgress za pomocą właściwości DisplayAfter. Właściwość ta określa czas w
milisekundach, po jakim zostanie wyświetlona zawartość kontrolki UpdatePanel.
W przypadku kilku kontrolek UpdatePanel na stronie standardowo kontrolka UpdateProgress
wyświetla się podczas aktualizacji każdej z nich. Jeśli potrzebujemy ograniczyć wyświetlanie do
jednej kontrolki UpdatePanel, możemy to zrobić przy pomocy właściwości
AssociatedUpdatePanelID.
Timer
Kontrolka Timer odpowiada za komunikację zwrotną do serwera w określonych odstępach czasu.
Możliwe jest wysyłanie całej strony lub jej części ujętej w kontrolce UpdatePanel. Właściwość
Interval określa ilość milisekund, po której nastąpi komunikacja zwrotna do serwera.
Podsumowanie
W tym rozdziale przedstawiona została technologia AJAX ASP.NET.
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• rozumiesz jak działa UpdatePanel
• znasz kontrolki dostępne w AJAX Extensions
• wiesz co to jest i jakie ma zalety częściowa aktualizacja strony
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. The Official Microsoft ASP.NET Site, http://www.asp.net/ajax
Na stronie znajdziesz wiele materiałów dotyczących technologii AJAX. Szczególnie
ciekawe są webcasty prezentujące wiele elementów technologii. Ważnym
miejscem wartym przejrzenia jest zakładka Showcase, prezentująca listę stron
wykorzystujących tę technologię.
2. Maciej Dadela, AJAX w ASP.NET, http://www.codeguru.pl/article-718.aspx
W artykule autor prezentuje przegląd najważniejszych informacji dotyczących
technologii ASP.NET AJAX. Zawarł opis kontrolek i ich właściwości, pozwalając
zapoznać się bliżej z tą technologią.
3. Matt Gibbs, Dan Wahlin, ASP.NET 2.0 AJAX. Zaawansowane programowanie, Helion, 2008
W książce autorzy pokazują, jak korzystać z różnych bibliotek, jak używać
zaawansowanych kontrolek z pakietu AJAX Toolkit, a także jak budować własne
Piotr Bubacz Moduł 13
ITA-103 Aplikacje Internetowe ASP.NET AJAX
Strona 13-8
kontrolki. Nauczysz się asynchronicznie uaktualniać fragmenty stron i zarządzać
skryptami używanymi w przeglądarce, dowiesz się, jak testować takie aplikacje i
usuwać z nich błędy. Z tą książką zdobędziesz wiedzę potrzebną do kreowania
nowoczesnych, interaktywnych aplikacji.
Piotr Bubacz
ITA-103 Aplikacje Internetowe
Laboratorium podstawowe
Problem 1 (czas realizacji
Przed wykorzystaniem technologii ASP.NET AJAX Twój zespół postanowił wysłać Cię na
Twoim zadaniem jest zapoznanie się z możliwościami wykorzystania tej technologii w Waszych
projektach internetowych.
w ASP.NET AJAX.
Zadanie Tok postępowania
1. Utwórz nową
aplikację
internetową w
systemie plików
• Otwórz Visual Studio wybierz
• W oknie dialogowym
—
—
—
2. Dodaj
kontrolkę
UpdatePanel
• Do strony dodaj kontrolkę
myszą
• W kontrolce
—
—
• Do kontrolki
• Poza kontrolką
oknie
—
—
3. Dodaj
procedurę obsługi
zdarzenia
Page_Load
• Otwórz plik
kod
t1Label.Text = DateTime.Now.ToLongTimeString();
t2Label.Text = DateTime.Now.ToLongTimeString();
4. Zapisz i
sprawdź działanie
strony
• Zapisz zmiany i uruchom formularz.
• Wciśnij przycisk
5. Zapoznaj się z
zaletami
częściowej
aktualizacji
strony.
• Do aplikacji dodaj kolejną stronę
• Do strony dodaj kontrolkę
• W kontrolce
kategoria
• Poza kontrolką
• Zapisz i uruchom formularz. Za pomocą przycisków
miesiące w jednej i drugiej kontrolce.
6. Zapoznanie z
możliwością
odświeżania
zawartości
kontrolki
UpdatePanel przy
• Do aplikacji dodaj kolejną stronę
• Do strony dodaj kontrolkę
• W kontrolce
—
—
Strona 13-9
Laboratorium podstawowe
(czas realizacji 25 min)
Przed wykorzystaniem technologii ASP.NET AJAX Twój zespół postanowił wysłać Cię na
Twoim zadaniem jest zapoznanie się z możliwościami wykorzystania tej technologii w Waszych
Wynikiem Twoich prac mają być testy wszystkich kontrolek dostepnych
Tok postępowania
Otwórz Visual Studio wybierz File -> New -> Web Site
W oknie dialogowym New Web Site określ następujące właściwości
— szablon: ASP.NET Web Site
— lokalizacja: z listy rozwijanej wybierz File System
położenie strony
— język: Visual C#
Do strony dodaj kontrolkę ScriptManager i UpdatePanel
myszą z okna Toolbox (kategoria AJAX Extensions
W kontrolce UpdatePanel umieść kontrolkę Label
— w polu ID wpisz t1Label
— w polu Text usuń zawartość
Do kontrolki UpdatePanel dodaj kontrolkę Button
Poza kontrolką UpdatePanel umieść dodatkową kontrolkę
oknie Properties:
— w polu ID wpisz t2Label
— w polu Text usuń zawartość
Otwórz plik Default.aspx.cs i do metody Page_Load
kod, wyświetlający aktualną datę w kontrolkach Label
t1Label.Text = DateTime.Now.ToLongTimeString();
t2Label.Text = DateTime.Now.ToLongTimeString();
Zapisz zmiany i uruchom formularz.
Wciśnij przycisk Button.
Która kontrolka jest aktualizowana? Dlaczego?
Do aplikacji dodaj kolejną stronę ASPX.
Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel
W kontrolce UpdatePanel umieść kontrolkę Calendar
kategoria Standard.
Poza kontrolką UpdatePanel umieść kolejną kontrolkę
Zapisz i uruchom formularz. Za pomocą przycisków
miesiące w jednej i drugiej kontrolce.
Czy można zaobserwować różnicę?
Do aplikacji dodaj kolejną stronę ASPX.
Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel
W kontrolce UpdatePanel umieść kontrolkę Label
— w polu ID wpisz t1Label
— w polu Text usuń zawartość
Moduł 13
ASP.NET AJAX
Przed wykorzystaniem technologii ASP.NET AJAX Twój zespół postanowił wysłać Cię na zwiady.
Twoim zadaniem jest zapoznanie się z możliwościami wykorzystania tej technologii w Waszych
Wynikiem Twoich prac mają być testy wszystkich kontrolek dostepnych
Web Site.
określ następujące właściwości:
File System, a następnie określ
UpdatePanel, przeciągając je
s).
Label i w oknie Properties:
Button.
umieść dodatkową kontrolkę Label i w
Page_Load dodaj następujący
Label:
t1Label.Text = DateTime.Now.ToLongTimeString();
t2Label.Text = DateTime.Now.ToLongTimeString();
UpdatePanel.
Calendar z okna Toolbox
umieść kolejną kontrolkę Calendar.
Zapisz i uruchom formularz. Za pomocą przycisków > kontrolki zmień
UpdatePanel.
Label i w oknie Properties:
Piotr Bubacz
ITA-103 Aplikacje Internetowe
użyciu
zewnętrznego
przycisku
• Poza kontrolką
• Dwukrotnie
Click
t1Label.Text = DateTime.Now.ToLongTimeString();
• Zapisz zmiany i uruchom formularz. Kliknij przycisk.
• Przejdź do widoku
a następnie w oknie
• W oknie
listy zostanie dodany wyzwalacz i w
AsyncPostB
—
—
• Kliknij przycisk
• Zapisz zmiany i uruchom formularz. Kliknij przycisk.
7. Zapoznanie z
możliwościami
wykorzystania
kontrolki
UpdateProgress.
• Do aplikacji dodaj kolejną stronę
• Do strony dodaj kontrolkę
• W kontrolce
—
—
• Do kontrolki
• Kliknij dwukrotnie
Click
System.Threading.Thread.Sleep(3000);
//powyższa linijka służy jednie celom TESTOWYM!!t1Label.Text = DateTime.Now.ToLongTimeString();
• Poza kontrolką
Strona 13-10
Poza kontrolką UpdatePanel dodaj do formularza kontrolkę
Dwukrotnie kliknij dodaną kontrolkę. W metodzie obsługi zdarzenia
Click przycisku dodaj:
t1Label.Text = DateTime.Now.ToLongTimeString();
Zapisz zmiany i uruchom formularz. Kliknij przycisk.
Czy dokonała się pełna czy częściowa aktualizacja strony? Dlaczego?
Przejdź do widoku Design formularza. Wybierz kontrolkę
a następnie w oknie Properities w polu Triggers wybierz
W oknie UpdatePanelTrigger Collection Editor naciśnij przycisk
listy zostanie dodany wyzwalacz i w
AsyncPostBack:Button1.Click properities:
— w polu ControlID wpisz Button1
— w polu EventName wybierz z listy rozwijanej Click
Rys. 5 Okno UpdatePanelTrigger Collection Editor
Kliknij przycisk OK.
Zapisz zmiany i uruchom formularz. Kliknij przycisk.
Czy dokonała się pełna czy częściowa aktualizacja strony? Dlaczego?
Do aplikacji dodaj kolejną stronę ASPX.
Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel
W kontrolce UpdatePanel umieść kontrolkę Label
— w polu ID wpisz t1Label
— w polu Text usuń zawartość
Do kontrolki UpdatePanel dodaj kontrolkę Button
Kliknij dwukrotnie dodaną kontrolkę. W metodzie obsługi zdarzenia
Click przycisku dodaj:
System.Threading.Thread.Sleep(3000);
//powyższa linijka służy jednie celom TESTOWYM!!t1Label.Text = DateTime.Now.ToLongTimeString();
Poza kontrolką UpdatePanel dodaj kontrolkę
Moduł 13
ASP.NET AJAX
dodaj do formularza kontrolkę Button.
metodzie obsługi zdarzenia
t1Label.Text = DateTime.Now.ToLongTimeString();
Zapisz zmiany i uruchom formularz. Kliknij przycisk.
Czy dokonała się pełna czy częściowa aktualizacja strony? Dlaczego?
formularza. Wybierz kontrolkę UpdatePanel,
wybierz (…).
naciśnij przycisk Add. Do
listy zostanie dodany wyzwalacz i w obszarze
Click
UpdatePanelTrigger Collection Editor
Zapisz zmiany i uruchom formularz. Kliknij przycisk.
Czy dokonała się pełna czy częściowa aktualizacja strony? Dlaczego?
UpdatePanel.
Label i w oknie Properties:
Button.
metodzie obsługi zdarzenia
//powyższa linijka służy jednie celom TESTOWYM!! t1Label.Text = DateTime.Now.ToLongTimeString();
dodaj kontrolkę UpdateProgress. W
Piotr Bubacz
ITA-103 Aplikacje Internetowe
kontrolce
• Zapisz zmiany i uruchom formularz
8. Zapoznanie z
możliwościami
kontrolki Timer.
• Do aplikacji dodaj kolejną stronę
• Do strony dodaj kontrolkę
• W kontrolce
—
—
• Do kontrolki
—
—
• Poza kontrolką
Properties
—
—
• Do
uruchomienia formularza w kontrolce
t2Label.Text = DateTime.Now.ToLongTimeString();
• Kliknij dwukrotnie kontrol
dodaj:
t1Label.Text = DateTime.Now.ToLongTimeString();
• Zapisz zmiany i uruchom formu
Problem 2 (czas realizacji
Po zapoznaniu się z technologią
stworzonej dla firmy Adventure Works
Zadanie Tok postępowania
9. Wykorzystaj
częściową
aktualizacje
strony do
wyświetlenia
produktów
• Otwórz aplikację przygotowaną w poprzednim module
• Otwórz stronę
• Przed wszystkimi kontrolkami na górze strony umieść kontrolkę
ScriptManager
• Do strony dodaj kontrolkę
niej wszystkie kontrolki
• Zapisz zamiany w aplikacji i uruchom stronę
10. Dodaj
wyświetlania
informacji o
aktualizacji
• W widoku
kontrolkę
• Wybierz kontrolkę
a
obsługi zdarzenia
Strona 13-11
kontrolce UpdateProgress dodaj tekst Przetwarzanie…
Zapisz zmiany i uruchom formularz, a następnie kliknij przycisk.
Czy dokonała się pełna czy częściowa aktualizacja strony? Co się działo
w czasie aktualizacji?
Do aplikacji dodaj kolejną stronę ASPX.
Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel
W kontrolce UpdatePanel umieść kontrolkę Label
— w polu ID wpisz t1Label
— w polu Text usuń zawartość
Do kontrolki UpdatePanel dodaj kontrolkę Timer.
— w polu ID wpisz t1Timer
— w polu Interval wpisz 5000
Poza kontrolką UpdatePanel umieść kontrolkę
Properties:
— w polu ID wpisz t2Label
— w polu Text usuń zawartość
Do metody Page_Load dodaj następujący kod wyświetlający
uruchomienia formularza w kontrolce t2Label:
t2Label.Text = DateTime.Now.ToLongTimeString();
Kliknij dwukrotnie kontrolkę Timer. W metodzie
dodaj:
t1Label.Text = DateTime.Now.ToLongTimeString();
Zapisz zmiany i uruchom formularz, a następnie p
Co się stało? Dlaczego?
(czas realizacji 10 min)
Po zapoznaniu się z technologią Twoim zadaniem jest dodanie funkcjonalności AJAX do aplikacji
stworzonej dla firmy Adventure Works.
Tok postępowania
Otwórz aplikację przygotowaną w poprzednim module
Otwórz stronę Produkty.aspx.
Przed wszystkimi kontrolkami na górze strony umieść kontrolkę
ScriptManager z okna Toolbox (kategoria AJAX Extension
Do strony dodaj kontrolkę UpdatePanel i w widoku
niej wszystkie kontrolki
Zapisz zamiany w aplikacji i uruchom stronę Produkty.aspx
Czy następuje aktualizacja całej strony?
W widoku Design na stronie poniżej kontrolki
kontrolkę UpdateProgress. Umieść w niej napis: Pobieranie danych
Wybierz kontrolkę KategorieListBox i w oknie Properties
a następnie kliknij dwukrotnie pole SelectedIndexChang
obsługi zdarzenia dodaj następujący kod:
Moduł 13
ASP.NET AJAX
Przetwarzanie….
liknij przycisk.
Czy dokonała się pełna czy częściowa aktualizacja strony? Co się działo
UpdatePanel.
Label i w oknie Properties:
.
umieść kontrolkę Label i w oknie
pujący kod wyświetlający czas
t2Label.Text = DateTime.Now.ToLongTimeString();
metodzie obsługi zdarzenia Tick
t1Label.Text = DateTime.Now.ToLongTimeString();
poczekaj 5 sekund.
odanie funkcjonalności AJAX do aplikacji
Otwórz aplikację przygotowaną w poprzednim module.
Przed wszystkimi kontrolkami na górze strony umieść kontrolkę
xtensions).
i w widoku Design przenieś do
Produkty.aspx.
a stronie poniżej kontrolki UpdatePanel umieść
Pobieranie danych.
Properties kliknij Events,
SelectedIndexChanged. W metodzie
Piotr Bubacz
ITA-103 Aplikacje Internetowe
System.Threading.Thread.Sleep(3000);
• Zapisz wszystkie pliki i u
11. Zmiana
wyświetlania
tekstu na obrazek
• Znajdź animowanego gifa (np. na stronie
• Za
obrazek.
• Zapisz wszystkie pliki i uruchom ponownie aplikacj
12. Dodanie
możliwości
anulowania
aktualizacji
• Do kontrolki
<br /><input type="button"
value="Anuluj aktualizację" />
• Do kontrolki
języku J
<script type="text/javascript" >function abortPB() {
</script>
• Zapisz wszystkie pliki i uruchom ponownie aplikacje. Podczas aktualizacji
naciśnij przycisk
Problem 3 (czas realizacji
Twojemu klientowi zawsze marzyła się reklama
przeglądarce. Twoim ostatnim zadaniem
być odświeżana cyklicznie co
Zadanie Tok postępowania
13. Przygotuj
aplikację do
korzystania z
kontrolki
ScriptMagerProxy
• Otwórz stronę
• Usuń kontrolkę
ScriptMagerProxy
• Otwórz szablon strony
kontrolki
14. Dodaj
kontrolkę
użytkownika
wyświetlającej
reklamy
• Kliknij prawym przyciskiem myszy katalog
Item
wpisz
• Dodaj kontrolkę
UpdatePanel
• W widoku
Określ jej właściwość
• Dodaj kontrolkę
• Zapisz zmiany w pliku.
15. Umieść
kontrolkę
Reklama.ascx na
szablonie strony
• Otwórz szablon strony
do kontrolki
• Zapisz zmiany w pliku.
16. Zapisz i
przetestuj
• Zapisz zmiany i uruchom aplikację.
• Otwórz stronę
Strona 13-12
System.Threading.Thread.Sleep(3000);
Zapisz wszystkie pliki i uruchom ponownie aplikacj
Znajdź animowanego gifa (np. na stronie http://www.ajaxload.info
Zamień wyświetlany tekst w kontrolce UpdateProgress
obrazek.
Zapisz wszystkie pliki i uruchom ponownie aplikacj
Do kontrolki UpdateProgress w trybie Source dodaj:
<br /><input type="button" id="abortButton" onclick="abortPB()"
value="Anuluj aktualizację" />
Do kontrolki Content o ID="Content1" dodaj
języku JavaScript:
<script type="text/javascript" >function abortPB() {
var obj = Sys.WebForms.PageRequestManager.getInstan
if (obj.get_isInAsyncPostBack())
{ obj.abortPostBack(); }
} </script>
Zapisz wszystkie pliki i uruchom ponownie aplikacje. Podczas aktualizacji
naciśnij przycisk Anuluj aktualizację.
Czy aktualizacja została anulowana?
(czas realizacji 10 min)
Twojemu klientowi zawsze marzyła się reklama, której zawartość jest cyklicznie odświeżana w
Twoim ostatnim zadaniem jest dodanie wyświetlania reklamy na stronie. Reklama ma
być odświeżana cyklicznie co 6 sekund.
Tok postępowania
Otwórz stronę Produkty.aspx.
Usuń kontrolkę ScriptManager i w jej miejsce wstaw kontrolkę
ScriptMagerProxy z okna Toolbox (kategoria AJAX Extension
Otwórz szablon strony SzablonStrony.master i na górze strony obok
kontrolki WebPartManager dodaj kontrolkę ScriptManager
Kliknij prawym przyciskiem myszy katalog Kontrolki
Item. W obszarze Templates wybierz Web User Control
wpisz Reklama.ascx. W liście rozwijanej Language
Dodaj kontrolkę ScriptManagerProxy, a następnie kontrolkę
UpdatePanel.
W widoku Design dodaj do kontrolki UpdatePanel
Określ jej właściwość AdvertisementFile="~/Adv/adv.xml".
Dodaj kontrolkę Timer i określ jej właściwość Interval
Zapisz zmiany w pliku.
Otwórz szablon strony SzablonStrony.master i w wido
do kontrolki div o ID="DrugiObszarBoczny" kontrolkę
Zapisz zmiany w pliku.
Zapisz zmiany i uruchom aplikację.
Otwórz stronę Default.aspx i sprawdź, czy następuje zmiana reklamy.
Moduł 13
ASP.NET AJAX
ruchom ponownie aplikację.
http://www.ajaxload.info).
UpdateProgress na odnaleziony
Zapisz wszystkie pliki i uruchom ponownie aplikację.
dodaj:
id="abortButton" onclick="abortPB()"
dodaj następujący skrypt w
<script type="text/javascript" >function abortPB() {
var obj = Sys.WebForms.PageRequestManager.getInstance();
Zapisz wszystkie pliki i uruchom ponownie aplikacje. Podczas aktualizacji
której zawartość jest cyklicznie odświeżana w
dodanie wyświetlania reklamy na stronie. Reklama ma
i w jej miejsce wstaw kontrolkę
AJAX Extension).
i na górze strony obok
ScriptManager.
Kontrolki i wybierz Add New
Web User Control, w polu Name
Language wybierz Visual C#.
, a następnie kontrolkę
UpdatePanel kontrolkę AdRotator.
AdvertisementFile="~/Adv/adv.xml".
Interval="6000".
i w widoku Design dodaj
kontrolkę Reklama.ascx.
i sprawdź, czy następuje zmiana reklamy.
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 14
Wersja 1
ASP.NET AJAX Control Toolkit
Spis treści
ASP.NET AJAX Control Toolkit .............................................................................................................. 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykładowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Przykładowe rozwiązanie ............................................................................................................. 4
Uwagi dla studenta ...................................................................................................................... 6
Dodatkowe źródła informacji....................................................................................................... 6
Laboratorium podstawowe .................................................................................................................. 7
Problem 1 (czas realizacji 10 min) ................................................................................................ 7
Problem 2 (czas realizacji 35 min) ................................................................................................ 8
Piotr Bubacz Moduł 14
ITA-103 Aplikacje Internetowe ASP.NET AJAX Control Toolkit
Strona 14-2
Informacje o module
Opis modułu
W tym module znajdziesz informacje dotyczące biblioteki ASP.NET AJAX
Control Toolkit. Nauczysz się rozszerzać możliwości standardowych
kontrolek ASP.NET o funkcjonalności zawarte w bibliotece.
Cel modułu
Celem modułu jest przedstawienie możliwości wykorzystania biblioteki
ASP.NET AJAX Control Toolkit w projektach stron internetowych do
szybkiego tworzenia zaawansowanych efektów.
Uzyskane kompetencje
Po zrealizowaniu modułu będziesz:
• wiedział jakie kontrolki wchodzą w skład ASP.NET AJAX Control
Toolkit
• potrafił rozszerzać możliwości standardowych kontrolek ASP.NET
o funkcjonalności zawarte w bibliotece
Wymagania wstępne
Przed przystąpieniem do pracy z tym modułem powinieneś:
• znać podstawy języka XHTML
• znać zasady pracy w środowisku Visual Studio 2008, w szczególności
tworzenia stron internetowych
• znać podstawy ASP.NET AJAX
Mapa zależności modułu
Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznać się z materiałem zawartym
w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS”,
„Wprowadzenie do ASP.NET” oraz „ASP.NET AJAX”.
Rys. 1 Mapa zależności modułu
Piotr Bubacz Moduł 14
ITA-103 Aplikacje Internetowe ASP.NET AJAX Control Toolkit
Strona 14-3
Przygotowanie teoretyczne
Przykładowy problem
Tworzenie rozbudowanych stron z efektownie wyglądającym interfejsem użytkownika wymaga
dużo pracy. Niestety w codziennej pracy programistów jest mało czasu na implementacje tego, co
dla użytkownika jest najważniejsze – interfejsu. Aby na stronie pojawiały się zwijane, wysuwany,
wyskakujące czy animowane elementy niezbędna jest znajomość języka JavaScript oraz szczegółów
jego implementacji we wszystkich popularnych przeglądarkach. Niestety na to nie ma czasu i
musimy sięgnąć po gotowe komponenty, które najczęściej nie są tanie. Zatem mamy wybór: albo
sami implementujemy rozwiązania, albo kupujemy drogie kontrolki od innych dostawców.
Podstawy teoretyczne
ASP.NET AJAX Control Toolkit udostępnia zbiór komponentów umożliwiających szybkie tworzenie
stron o rozbudowanej funkcjonalności. Zawiera kod źródłowy, szablony, dokumentacje i przykłady.
Po dodaniu do Visual Studio 2008 każda kontrolka posiada Smart Tag z opcją Add Extender,
umożliwiającą rozszerzenie funkcjonalności kontrolki o możliwości oferowane przez ASP.NET AJAX
Control Toolkit. Po dodaniu do kontrolki rozszerzenia dodana funkcjonalność jest wyświetlana w
oknie Properties. W widoku źródła możemy skonfigurować funkcjonalność w kontrolce
rozszerzenia. Możliwe jest dodanie kilku rozszerzeń do jednej kontrolki.
ASP.NET AJAX Control Toolkit zawiera następujące kontrolki i rozszerzenia:
• Accordion – umożliwia przesłanie kilku paneli i wyświetlenie jednego z nich
• AlwaysVisibleControl – jest prostym rozszerzeniem umożliwiającym przypięcie
kontrolki do strony tak, że pojawia się jako ruchome okno ponad treścią strony
• Animation – umożliwia tworzenie animacji dla elementów i kontrolek
• AutoComplete – rozszerza możliwości kontrolki TextBox o mechanizm podpowiedzi
• Calendar – rozszerza możliwości kontrolki TextBox wyświetlając kalendarz i przekazując
wybraną datę do kontrolki
• CascadingDropDown – umożliwia łączenie kontrolek DropDown i wypełnianie ich
zawartości asynchronicznie
• CollapsiblePanel – rozszerza kontrolkę Panel o możliwość zwijania i rozwijania jej
zawartości
• ConfirmButton – rozszerza możliwości kontrolki Button o potwierdzenie po stronie
klienta
• DragPanel – rozszerza kontrolkę Panel o możliwość przesuwania i umieszczania jej w
dowolnym miejscu na stronie
• DropDown – rozszerza możliwości niemal każdej kontrolki, udostępniając funkcjonalność
menu, które może być innym panelem lub kontrolką
• DropShadow – rozszerza dowolne kontrolki wizualne o możliwość rzucania cienia
• DynamicPopulate – wypełnia zawartość elementu strony wynikiem pobranym z zapytania
do usługi Web
• FilteredTextBox – rozszerza możliwości kontrolki TextBox o zezwolenie na
wprowadzania informacji jednego typu
• HoverMenu – rozszerza dowolną kontrolkę o możliwość wyświetlenia podręcznego menu w
momencie, kiedy kursor myszy znajdzie się nad kontrolką
• MaskedEdit – rozszerza kontrolkę TextBox o możliwość wyświetlenia formatu
wprowadzanych danych oraz ich walidację po stronie klienta
• ModalPopup – umożliwia wyświetlenie okna dialogowego na stronie i zablokowanie strony
przed jej edycją
Piotr Bubacz Moduł 14
ITA-103 Aplikacje Internetowe ASP.NET AJAX Control Toolkit
Strona 14-4
• MutuallyExclusiveCheckBox – rozszerza kontrolki CheckBox o możliwość wzajemnego
wykluczania się
• NoBot – stosuje proste metody zapobiegające wysyłaniu strony przez automatycznych
klientów
• NumericUpDown – rozszerza kontrolkę TextBox o możliwość zwiększenia lub zmniejszenia
wartości w kontrolce przy pomocy powiązanych przycisków
• PagingBulletedList – rozszerza możliwości kontrolki BulletedList o sortowanie i
stronicowanie po stronie klienta
• PasswordStrength – rozszerza kontrolkę TextBox o możliwość sprawdzenia i
wyświetlenia siły wprowadzanego hasła
• PopupControl – umożliwia dodanie do dowolniej kontrolki okna wyskakującego (pop-up)
• Rating – umożliwia łatwą ocenę dowolnej zawartości za pomocą gwiazdek
• ReorderList – umożliwia przestawianie elementów listy poprzez przeciąganie ich myszą
• ResizableControl – umożliwia zmianę wielkości dowolnego element w przeglądarce
• RoundedCorners – rozszerza wizualne kontrolki o zaokrąglone rogi
• Slider – pełni funkcję paska przewijania
• TabContainer – umożliwia wyświetlenie części interfejsu użytkownika w zakładkach
• TextBoxWatermark – rozszerza kontrolkę TextBox o możliwość wyświetlania znaku
wodnego, gdy użytkownik nie wprowadził żadnej wartości
• ToggleButton – rozszerza kontrolkę CheckBox o możliwość wyświetlania obrazków w
miejscu elementów zaznaczonych i niezaznaczonych
• UpdatePanelAnimation – animuje elementy na stronie umożliwiając graficzne
reprezentowanie stanu pobierania danych
• ValidatorCallout – rozszerza możliwości standardowych kontrolek do sprawdzania
poprawności danych wprowadzanych przez użytkownika
Podsumowanie
W tym rozdziale przedstawiony został ASP.NET AJAX Control Toolkit.
Przykładowe rozwiązanie
Wyobraźmy sobie, że mamy rozszerzyć funkcjonalność naszej aplikacji o możliwości oferowane
przez bibliotekę ASP.NET AJAX Control Toolkit.
Dodanie ASP.NET AJAX Control Toolkit do Visual Studio
Zanim będziemy mogli wykorzystać funkcjonalność ASP.NET AJAX Control Toolkit w naszych
aplikacjach, musimy pobrać ze strony http://www.codeplex.com/AjaxControlToolkit archiwum
zawierające kontrolki przeznaczone dla .NET Framework 3.5. Archiwum możemy rozpakować w
dowolnym miejscu, jednak ze względu na lepsze zarządzanie proponujemy zapisać zawartość do
katalogu C:\Program Files\Microsoft ASP.NET. Dzięki temu będziemy mieli jedno miejsce na
poszukiwanie elementów związanych z ASP.NET. Najważniejszą bibliotekę – AjaxControlToolkit.dll,
znajdziemy w katalogu C:\Program Files\Microsoft ASP.NET\SampleWebSite\Bin. Najbezpieczniej
jest ją skopiować od razu do katalogu C:\Program Files\Microsoft ASP.NET\Binaries. W przyszłości
będziemy ingerować w kod kontrolek i sami kompilować tę bibliotekę, więc bezpiecznie mieć kopię
zapasową.
Kolejnym krokiem jest dodanie kontrolki do Visual Studio 2008. W tym celu dodamy nową zakładkę
w oknie Toolbox, klikajać w jego obszarze prawym przyciskiem myszy, a następnie wybierając Add
Tab. Możemy nazwać ją dowolnie, np. AJAX Control Toolkit. Następnie musimy wskazać lokalizację
biblioteki. W tym celu klikamy dodaną przed chwilą zakładkę prawym przyciskiem myszy i
wybieramy Choose Items.
Piotr Bubacz Moduł 14
ITA-103 Aplikacje Internetowe ASP.NET AJAX Control Toolkit
Strona 14-5
Po wskazaniu pliku za pomocą przycisku Browse możemy dodać bibliotekę AjaxControlToolkit.dll.
W tym momencie w zakładce pojawi się lista kontrolek i rozszerzeń zawartych w bibliotece.
Jeśli znajdziesz chwilę czasu warto przetestować wszystkie kontrolki dostępne w bibliotece. W tym
celu w Visual Studio otwieramy projekt C:\Program Files\Microsoft ASP.NET\
AjaxControlToolkit.sln.
Rozszerzanie funkcjonalności kontrolek przy pomocy ASP.NET AJAX Control Toolkit
Teraz nauczymy się rozszerzać funkcjonalność kontrolek przy użyciu ASP.NET AJAX Control Toolkit.
Aby dodać którąś z funkcjonalności oferowanych przez ASP.NET AJAX Control Toolkit do kontrolki,
wybieramy kontrolkę, do której chcemy dodać rozszerzenie, a następnie w menu Smart Tag klikamy
Add Extender.
Rys. 2 Rozszerzanie funkcjonalności kontrolki TextBox przy pomocy ASP.NET AJAX Control Toolkit
W kolejnym oknie Extender Wizard (Rys. 3) musimy wybrać rozszerzenie, które chcemy dodać do
kontrolki. W naszym przypadku dodamy kontrolkę TextBoxWatermarkExtender rozszerzającą
kontrolkę TextBox o możliwość wyświetlania znaku wodnego, gdy użytkownik nie wprowadził
żadnej wartości.
Rys. 3 Okno Extender Wizard
Po dodaniu rozszerzenie w oknie Properties kontrolki znajdziemy nową grupę – Extenders.
Rys. 4 Okno Properties kontrolki TextBox po dodaniu rozszerzenia TextBoxWatermarkExtender
Piotr Bubacz Moduł 14
ITA-103 Aplikacje Internetowe ASP.NET AJAX Control Toolkit
Strona 14-6
Możemy rozwinąć i sprawdzić dodatkowe właściwości kontrolki. Ustalimy, że kontrolka będzie
posiadała znak wodny o treści „Podaj nazwę produktu” (właściwość WatermarkText) oraz
wykorzystamy zdefiniowaną w szablonie strony klasę CSS o nazwie watermarked (właściwość
WatermarkCssClass).
Po uruchomieniu strony w przeglądarce możemy sprawdzić działanie rozszerzenia. W naszym
przypadku na stronie zostanie wyświetlona kontrolka TextBox ze znakiem wodnym „Podaj nazwę
produktu”. Po kliknięciu znak wodny znika (Rys. 5).
a) b) Rys. 5 Kontrolka TextBox po dodaniu TextBoxWatermarkExtender wyświetlona w przeglądarce
a) przed b) po kliknięciu kontrolki
Uwagi dla studenta
Jesteś przygotowany do realizacji laboratorium jeśli:
• potrafisz dodać ASP.NET AJAX Control Toolkit do projektu
• umiesz dodawać rozszerzenia do kontrolek
Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe źródła informacji
1. ASP.NET AJAX Extender Controls, http://msdn.microsoft.com/en-us/library/bb532368.aspx
Na stronie znajdziesz szczegółowe informacje odnośnie możliwości rozszerzania
funkcjonalności kontrolek przy użyciu kontrolek bazujących na ExtenderControl.
2. Adam Calderon, Joel Rumerman, Advanced ASP.NET AJAX Server Controls For .NET
Framework 3.5, Addison-Wesley, 2008
W książce autor przedstawia wszystkie najważniejsze zagadnienia związane z
kontrolkami serwerowymi w ASP.NET AJAX z uwzględnieniem AJAX Control
Toolkit.
3. ASP.NET AJAX Control Toolkit: The Official Microsoft ASP.NET Site,
http://www.asp.net/ajax/ajaxcontroltoolkit
Oficjalna strona AJAX Control Toolkit, znajdziesz tu zawsze najnowsze wersje
kontrolek, dokumentację oraz wideotutoriale ułatwiający szybkie rozpoczęcie
pracy z tą biblioteką.
Piotr Bubacz Moduł 14
ITA-103 Aplikacje Internetowe ASP.NET AJAX Control Toolkit
Strona 14-7
Laboratorium podstawowe
Problem 1 (czas realizacji 10 min)
Twój zespół chciałby dodać kilka nowych rozwiązań, które można zobaczyć na innych stronach.
Niestety okazało się, że wymagają one znajomości języka JavaScript. Już prawie zrezygnowaliście i
chcieliście oddać projekt w takim stanie w jakim jest, ale na szczęście jeden z Twoich kolegów
znalazł informacje o bibliotece ASP.NET AJAX Control Toolkit. Na stronie głównej był link do wersji
live, po przejrzeniu możliwości biblioteki stwierdziliście jednogłośnie, że to jest to, czego chcecie.
Jeden z członków zespołu miał wątpliwości, czy dacie radę szybko nauczyć się tej biblioteki i za jej
pomocą uatrakcyjnić waszą aplikację. Na szczęście pobraliście kod biblioteki i okazało się, że Visual
Studio 2008 na tyle ułatwia współpracę z nią, że mogliście od razu zacząć pracę.
Waszym pierwszym zadaniem jest dodanie funkcjonalności bibliotece ASP.NET AJAX Control Toolkit
do Visual Studio.
Zadanie Tok postępowania
1. Dodanie
ASP.NET AJAX
Control Toolkit do
Visual Studio
• Pobierz ze strony http://www.codeplex.com/AjaxControlToolkit
archiwum zawierające kontrolki przeznaczone dla .NET Framework 3.5.
• Rozpakuj archiwum na dysku w katalogu C:\Program Files\Microsoft
ASP.NET.
• Z katalogu C:\Program Files\Microsoft ASP.NET\SampleWebSite\Bin
skopiuj pliki AjaxControlToolkit.dll i AjaxControlToolkit.pdb do
katalogu C:\Program Files\Microsoft ASP.NET\Binaries.
• Otwórz stronę przygotowaną w poprzednim ćwiczeniu. Otwórz dowolny
plik z rozszerzeniem aspx.
• W oknie Toolbox kliknij prawy przyciskiem myszy i wybierz Add Tab.
Nazwij ją AJAX Control Toolkit.
• Kliknij prawym przyciskiem myszy nowo dodaną zakładkę i wybierz
Choose Items.
Rys. 6 Okno Choose Toolbox Items
• Kliknij Browse.
• Wskaż plik C:\Program Files\Microsoft
ASP.NET\Binaries\AjaxControlToolkit.dll i kliknij Open. Następnie
kliknij OK.
Piotr Bubacz
ITA-103 Aplikacje Internetowe
• W zakładce
kontrolek i rozszerzeń.
2. Przetestuj
możliwości
rozszerzeń
dostępnych w
ASP.NET AJAX
Control Toolkit
• W Visual Studio otwórz projekt
AjaxControlToolkit.sln
• Naciśnij
• Zapoznaj się z możliwościami kontrolek i rozszerzeń kontrolek
dostępnymi w zbiorze
• Szczególnie zapoznaj się z rozszerzeniami:
AlwaysVisibleControlExtender
FilteredTextBoxExtender
Problem 2 (czas realizacji
Teraz Twój zespół wyznaczył sobie następujące zadnia: dodać efekt znaku wodnego do wszystkich
kontrolek TextBox w aplikacji,
strony, dodać filtrowanie wprowadzania
kalendarza na wyświetlanie kalendarza po kliknięciu na kontrolkę
Zadanie Tok postępowania
3. Rozszerz
możliwości
kontrolki Szukaj
• Otwórz kontrolkę użytkownika
• Wybierz kontrolkę
następnie kliknij
• W oknie
OK
• W oknie
NazwaProduktuTextBox_TextBoxWatermarkExt
WatermarkText
WatermarkCssClass
• Do pliku
.watermarked {
}
• Zapisz zmiany i przetestuj działanie aplikacji. Otwórz stronę
i s
4. Rozszerz
możliwości
kontrolki Reklama
• Otwórz kontrolkę użytkownika
• Wybierz
• W oknie Extender
OK
• W oknie
AdRotator1_AlwaysVisibleControlExtender
listy rozwijanej wybierz
• Zapisz zmiany i otwórz dowolną stronę. Zmniejsz okno przeglądarki tak,
aby konieczne było przewijanie treści.
Strona 14-8
W zakładce AJAX Control Toolkit powinna pojawić się lista nowych
kontrolek i rozszerzeń.
W Visual Studio otwórz projekt C:\Program Files
AjaxControlToolkit.sln.
Naciśnij Ctrl+F5 lub wybierz Debug -> Start without debugging.
Zapoznaj się z możliwościami kontrolek i rozszerzeń kontrolek
dostępnymi w zbiorze ASP.NET AJAX Control Toolkit
Szczególnie zapoznaj się z rozszerzeniami:
AlwaysVisibleControlExtender, CalendarExtender
FilteredTextBoxExtender i TextBoxWatermarkExtender
(czas realizacji 35 min)
Teraz Twój zespół wyznaczył sobie następujące zadnia: dodać efekt znaku wodnego do wszystkich
w aplikacji, ustawić pozycję kontrolki AdRotator w prawym górnym rogu
strony, dodać filtrowanie wprowadzania numerów i kodu pocztowego
kalendarza na wyświetlanie kalendarza po kliknięciu na kontrolkę TextBox.
Tok postępowania
Otwórz kontrolkę użytkownika Kontrolki\Szukaj.aspx
Wybierz kontrolkę TextBox o ID="NazwaProduktuTextBox
następnie kliknij Smart Tag. Wybierz Add Extender
W oknie Extender Wizard wybierz TextBoxWatermarkExtender
OK.
W oknie Properties kontrolki TextBox znajdź grupę
NazwaProduktuTextBox_TextBoxWatermarkExtender
WatermarkText wpisz Podaj nazwę produktu
WatermarkCssClass wpisz watermarked.
Do pliku Style.css dodaj styl:
.watermarked {
height:20px;
width:150px;
padding:2px 0 0 2px;
border:1px solid #BEBEBE;
background-color:#F0F8FF;
color:gray;
Zapisz zmiany i przetestuj działanie aplikacji. Otwórz stronę
sprawdź, jak wygląda kontrolka TextBox.
Otwórz kontrolkę użytkownika Kontrolki\Reklama.asp
Wybierz kontrolkę AdRotator i kliknij Smart Tag. Wybierz
W oknie Extender Wizard wybierz AlwaysVisibleControlExtenderi
OK.
W oknie Properties znajdź grupę Extenders
AdRotator1_AlwaysVisibleControlExtender. W polu
listy rozwijanej wybierz Right.
Zapisz zmiany i otwórz dowolną stronę. Zmniejsz okno przeglądarki tak,
aby konieczne było przewijanie treści.
Gdzie znajduje się kontrolka AdRotator
zawartości strony?
Moduł 14
ASP.NET AJAX Control Toolkit
powinna pojawić się lista nowych
Program Files\Microsoft ASP.NET\
Start without debugging.
Zapoznaj się z możliwościami kontrolek i rozszerzeń kontrolek
ol Toolkit.
Szczególnie zapoznaj się z rozszerzeniami:
CalendarExtender i
TextBoxWatermarkExtender.
Teraz Twój zespół wyznaczył sobie następujące zadnia: dodać efekt znaku wodnego do wszystkich
w prawym górnym rogu
oraz zmienić kontrolki
.
Szukaj.aspx.
NazwaProduktuTextBox", a
Extender.
TextBoxWatermarkExtender i kliknij
znajdź grupę Extenders i rozwiń
ender. W polu
Podaj nazwę produktu, a w polu
Zapisz zmiany i przetestuj działanie aplikacji. Otwórz stronę Szukaj.aspx
Reklama.aspx.
. Wybierz Add Extender.
AlwaysVisibleControlExtenderi kliknij
Extenders i rozwiń
W polu HorizontalSide z
Zapisz zmiany i otwórz dowolną stronę. Zmniejsz okno przeglądarki tak,
podczas przewijania
Piotr Bubacz
ITA-103 Aplikacje Internetowe
5. Dodaj
rozszerzenia do
strony
Ankieta.aspx
• Otwórz stronę
• Wybierz kontrolkę
Smart
• W oknie
OK
• W oknie
NazwaProduktuTextBox_
WatermarkText
watermarked
• Podobnie postępuj ze wszystkimi kontrolkami
• Wybierz kontrolkę
SmartTag
• W oknie
• W oknie
telTextBox_FilteredTextBoxExtender
rozwijanej wybierz
• Podobnie postępuj ze
mieszTextBox
liczbaKmTextBox
• Wybierz kontrolkę
Smart
• W oknie
• W oknie
kodTextBox_FilteredTextBoxExtender
—
—
• Zapisz stronę. Uruchom
Ankiety
Ankiety
• Usuń kontrolki
dodaj kontrolkę
rozszerzenie
wpisz
WatermarkCssClass
• Dodaj do kontrolki rozszerzenie
FirstDayOfWeek="Monday"
• Poniżej napisu
ID="nastepnaTextBox"
TextBoxWatermarkExtender
podać datę następnej wycieczki
watermarked
• Dodaj do kontrolki rozszerzenie
FirstDayOfWeek
• Zapisz
Ankiety
Strona 14-9
Otwórz stronę Ankieta.aspx.
Wybierz kontrolkę TextBox o ID="imieTextBox
Smart Tag. Wybierz Add Extender.
W oknie Extender Wizard wybierz TextBoxWatermarkExtender
OK.
W oknie Properties znajdź grupę Extenders
NazwaProduktuTextBox_TextBoxWatermarkExtender
WatermarkText wpisz Podaj imię, a w polu WatermarkCssClass
watermarked.
Podobnie postępuj ze wszystkimi kontrolkami TextBox
Wybierz kontrolkę TextBox o ID="telTextBox"
SmartTag. Wybierz Add Extender.
W oknie Extender Wizard wybierz FilteredTextBoxExtender
W oknie Properties znajdź grupę Extenders
telTextBox_FilteredTextBoxExtender. W polu
rozwijanej wybierz Numbers.
Podobnie postępuj ze kontrolkami TextBox
mieszTextBox, wzrostTextBox, odTextBox
liczbaKmTextBox.
Wybierz kontrolkę TextBox o ID="kodTextBox
Smart Tag. Wybierz Add Extender.
W oknie Extender Wizard wybierz FilteredTextBoxExtender
W oknie Properties znajdź grupę Extenders
kodTextBox_FilteredTextBoxExtender:
— w polu FilterType do listy rozwijanej wpisz Custom, Numbers
— w polu ValidChars wpisz - (myślnik).
Zapisz stronę. Uruchom ją w przeglądarce i z menu strony wybierz
Ankiety -> Szukam towarzystwa na wycieczki
Ankiety -> Szukam roweru i przetestuj działanie dodanych rozszerzeń.
Usuń kontrolki Calendar ze strony. Poniżej napisu
dodaj kontrolkę TextBox. Określ jej ID="ostatniaTextBox
rozszerzenie TextBoxWatermarkExtender i w polu
wpisz Kliknij, aby podać datę ostatniej wycieczki
WatermarkCssClass wpisz watermarked.
Dodaj do kontrolki rozszerzenie CalendarExtender
FirstDayOfWeek="Monday".
Poniżej napisu Następna wycieczka dodaj kontrolkę
ID="nastepnaTextBox". Dodaj rozszerzenie
TextBoxWatermarkExtender i w polu WatermarkText
podać datę następnej wycieczki, a w polu WatermarkCssClass
watermarked.
Dodaj do kontrolki rozszerzenie CalendarExtender
FirstDayOfWeek="Monday".
Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz
Ankiety -> Szukam towarzystwa na wycieczki.
W jakim języku wyświetlana jest kontrolka kalendarza prezentowana
po kliknięciu kontrolek ostatniaTextBox lub nastepnaTextBox
Moduł 14
ASP.NET AJAX Control Toolkit
imieTextBox", a następnie kliknij
TextBoxWatermarkExtender i kliknij
Extenders i rozwiń
TextBoxWatermarkExtender. W polu
WatermarkCssClass wpisz
TextBox na stronie.
", a następnie kliknij
FilteredTextBoxExtender i kliknij OK.
Extenders i rozwiń
. W polu FilterType z listy
o ID: domTextBox,
odTextBox, doTextBox,
kodTextBox", a następnie kliknij
FilteredTextBoxExtender i kliknij OK.
Extenders i rozwiń
Custom, Numbers
ądarce i z menu strony wybierz
Szukam towarzystwa na wycieczki, a następnie
i przetestuj działanie dodanych rozszerzeń.
ze strony. Poniżej napisu Ostatnia wycieczka
ostatniaTextBox". Dodaj
i w polu WatermarkText
Kliknij, aby podać datę ostatniej wycieczki, a w polu
CalendarExtender. Określ właściwość
dodaj kontrolkę TextBox. Określ jej
. Dodaj rozszerzenie
WatermarkText wpisz Kliknij, aby
WatermarkCssClass wpisz
CalendarExtender. Określ właściwość
stronę. Uruchom w przeglądarce i z menu strony wybierz
W jakim języku wyświetlana jest kontrolka kalendarza prezentowana
nastepnaTextBox?
Piotr Bubacz
ITA-103 Aplikacje Internetowe
6. Zmiana
wyświetlania
języka w
rozszerzeniu
CalendarExtender
• W pliku
do niej następujące
EnableScriptGlobalization="true"
• Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz
Ankiety
• Jeśli ko
przeglądarce
Kliknij przycisk
przycisk
przycisku
górze listy. Wciśnij
• Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz
Ankiety
Strona 14-10
W pliku SzablonStrony.master znajdź kontrolkę
do niej następujące atrybuty:
nableScriptGlobalization="true"
Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz
Ankiety -> Szukam towarzystwa na wycieczki.
W jakim języku wyświetlana jest kontrolka kalendarza prezentowana
po kliknięciu kontrolek ostatniaTextBox lub nastepnaTextBox
Jeśli kontrolka jest nadal wyświetlana w języku angielskim, to w
przeglądarce Internet Explorer wybierz Tools
Kliknij przycisk Languages. Jeśli na liście nie ma języka polskiego
przycisk Add i wybierz Polish (Poland) [pl-PL]. Wciśnij
przycisku Move up przesuń wpis Polish (Poland) [pl
górze listy. Wciśnij OK. Wciśnij OK.
Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz
Ankiety -> Szukam towarzystwa na wycieczki.
Moduł 14
ASP.NET AJAX Control Toolkit
r znajdź kontrolkę ScriptManager. Dodaj
Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz
W jakim języku wyświetlana jest kontrolka kalendarza prezentowana
nastepnaTextBox?
ntrolka jest nadal wyświetlana w języku angielskim, to w
Tools -> Internet Options.
. Jeśli na liście nie ma języka polskiego, kliknij
. Wciśnij OK. Za pomocą
Polish (Poland) [pl-PL] tak, aby był na
Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz