Aplikacje internetowe - laboratorium ASP.NET- zagadnienia zaawansowane (część 2) Do realizacji projektu potrzebne jest zintegrowane środowisko programistyczne Microsoft Visual Studio 2005 oraz dostęp do bazy danych z tabelą PRACOWNICY, zawierającą m.in. kolumny ID_PRAC, NAZWISKO, ETAT i PLACA_POD. Szczegółowe kroki rozwiązania zostały przygotowane dla serwera bazy danych Oracle, ale możliwe jest również wykorzystanie instancji serwera bazy danych Microsoft SQL Server 2005 Express Edition, instalowanej razem ze środowiskiem Visual Studio 2005. Celem ćwiczenia jest przedstawienie studentom zaawansowanych elementów architektury ASP.NET, w tym między innymi: programowej obsługi kontrolek podstawowych, wykorzystania kontrolek zaawansowanych, metod nawigacji między elementami aplikacji, obsługi stanu widoku i stanu sesji, śledzenia i obsługi błędów, dostępu do danych przez kontrolki danych, uwierzytelniania za pomocą formularzy HTML, zarządzania rolami i prawami dostępu, uspójniania wyglądu aplikacji poprzez strony wzorcowe, tworzenia map serwisu oraz globalnego współdzielenia kodu. Uwaga: tutorial zakłada znajomość środowiska Visual Studio 2005, więc podstawowe operacje (utworzenie formularza, edycja pliku z kodem ukrytym, uruchomienie formularza) nie będą już opisywane). Autor ćwiczenia: Mikołaj Morzy 1. Dostęp do danych przez kontrolki danych a) Utwórz w ramach aplikacji nowy formularz i nazwij go GridAdvanced.aspx. Otwórz nowo utworzony formularz w trybie projektowania. Z przybornika przeciągnij i umieść w formularzu kontrolkę SqlDataSource. Kliknij tag inteligentny kontrolki i wybierz opcję Configure Data Source Kliknij przycisk New Connection. W oknie Add Connection wskaż jako źródło danych bazę danych Oracle i jako nazwę serwera wpisz DBLAB10g. Podaj nazwę użytkownika i hasło użytkownika, zaznacz zapamiętanie hasła. Kliknij przycisk OK. Zapisz połączenie pod nazwą użytkownik@dblab10g. W kolejnym kroku wskaż jako źródło danych tabelę PRACOWNICY. Zaznacz atrybuty: ID_PRAC, NAZWISKO, ETAT, ZATRUDNIONY, PLACA_POD. Kliknij na przycisk Advanced i zaznacz wygenerowanie poleceń CRUD (Insert, Update, Delete). Kliknij przycisk OK. Kliknij przycisk Next i zakończ działanie kreatora.
b) Dodaj do formularza kontrolkę GridView. Kliknij tag inteligentny kontrolki. Wybierz opcję Auto Format i wybierz szablon kolorów. Następnie, z listy rozwijanej wybierz źródło danych (SqlDataSource1). Kliknij raz jeszcze tag inteligentny i zaznacz opcje Enable Editing, Enable Deleting. Kliknij ponownie tag inteligentny kontrolki i wybierz opcję Edit Columns. Zaznacz pole CommandField i w palecie własności po prawej stronie zmień typ przycisku na Button. Kliknij przycisk OK. c) Uruchom aplikację. Spróbuj usunąć asystenta Hapkego. Połącz się z bazą danych za pomocą dowolnego klienta (SQL*Plus, isql*plus) i wyświetl zawartość tabeli PRACOWNICY. Czy transakcja uruchomiona przez ASP.NET została już zatwierdzona? d) Za pomocą klienta SQL daj stażyście Białemu 10% podwyżki ale nie zatwierdzaj transakcji. Wróć do aplikacji ASP.NET i spróbuj usunąć stażystę Białego. Co się dzieje? e) Kliknij przycisk Edit przy pracowniku Morzy i daj mu 100 zł podwyżki. Kliknij przycisk Update. Sprawdź za pomocą klienta SQL jaki jest aktualnie stan bazy danych. f) Wyświetl kod źródłowy strony GridAdvanced.aspx i sprawdź, jak wyglądają zapytania SQL przesyłane przez formularz do bazy danych. Następnie, kliknij tag inteligentny kontrolki SqlDataSource i wybierz opcję Configure Data Source Przejdź do strony zawierającej możliwość wyboru tabeli źródłowej oraz kolumn zapytania. Kliknij przycisk Advanced i zaznacz opcję Use optimistic concurrency. Kliknij przycisk OK. Kliknij przycisk Next >. Kliknij przycisk Finish. Sprawdź w kodzie źródłowym strony jak zmieniły się zapytania przesyłane z kontrolki do bazy danych. Dlaczego przybrały taką postać? Uruchom ponownie aplikację i kliknij przycisk Edit przy pracowniku Matysiak. Daj Matysiakowi 50 zł podwyżki, ale nie klikaj na przycisk Update. Przejdź do klienta SQL i wyświetl dane Matysiaka. Co widzisz? Wykorzystując klienta SQL daj Matysiakowi 100 zł podwyżki i zatwierdź transakcję. Teraz wróć do aplikacji ASP.NET i kliknij przycisk Update aby zakończyć transakcję. Co się stało?
2. Strony wzorcowe a) Dodaj do aplikacji nowy element (menu File New File) i wybierz jako typ elementu Master Page. Nazwij tworzoną stronę MasterPage.master (rozszerzenie musi być.master). Przełącz utworzoną stronę w tryb projektowania. Do strony została automatycznie dołączona kontrolka ContentPlaceHolder. Ponad kontrolką dodaj napis Politechnika Poznańska, Aplikacje internetowe, zmień kolor napisu i kolor tła. Pod napisem umieść tabelkę. Z menu Layout wybierz Insert Table, wskaż opcję Template i wybierz wzorzec Side. Wykorzystując technikę drag&drop przenieś kontrolkę ContentPlaceHolder do prawej komórki tabeli. Twój formularz powinien wyglądać następująco b) Dodaj do aplikacji nowy formularz, jako typ wskaż Web Form, koniecznie zaznacz pole wyboru Select Master Page (jak pokazano na rysunku)
c) Przełącz się w tryb projektowania, wpisz jako treść strony łańcuch znaków To jest pierwsza strona podrzędna. Utwórz stronę MasterPage_subpage2.aspx z treścią To jest druga strona podrzędna. Wyświetl kod źródłowy strony. Zwróć uwagę, że w deklaracji <%Page %> pojawił się atrybut MasterPageFile. Uruchom formularze MasterPage_subpage1.aspx i MasterPage_subpage2.aspx d) Dodaj trzeci formularz o nazwie MasterPage_subpages.aspx, jako treść strony umieść zdanie Tutaj jest pierwsza strona podrzędna a tutaj druga strona podrzędna, gdzie słowa tutaj są kontrolkami typu Hyperlink wskazującymi na obie strony podrzędne e) Dodaj do aplikacji nowy element, z listy możliwych elementów wybierz Site Map, nazwij plik Web.sitemap, edytuj jego zawartość i umieść w nim poniższy kod: <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns="http://schemas.microsoft.com/aspnet/sitemap-file-1.0" > <sitemapnode url="masterpage_subpages.aspx" title="strony 1 i 2"> <sitemapnode url="masterpage_subpage1.aspx" title="strona 1"/> <sitemapnode url="masterpage_subpage2.aspx" title="strona 2"/> </sitemapnode> </sitemap> f) Wróć do trybu projektowania strony MasterPage.master. Z przybornika wybierz kontrolkę SiteMapDataSource (grupa Data) i umieść ją pod tabelą. Następnie, wybierz kontrolkę TreeView (grupa Navigation) i umieść ją w lewej komórce tabeli. Jako źródło danych wskaż SiteMapDataSource1 i zaznacz opcję Show lines Uruchom i przetestuj działanie aplikacji. g) Z przybornika wybierz kontrolkę SiteMapPath i umieść ją w prawej komórce tabeli, bezpośrednio nad kontrolką ContentPlaceHolder. W palecie własności kontrolki zmień własność PathSeparator na znak / oraz ustaw własność RenderCurrentNodeAsLink na true. Ponownie uruchom i przetestuj aplikację.
3. Globalne współdzielenie kodu a) Dodaj do aplikacji nowy element i z listy możliwych typów elementów wybierz Global Application Class. Zaakceptuj domyślną nazwę Global.asax. Dopisz na końcu skryptu poniższy kod: void WriteToFile(string strtext) { } System.IO.StreamWriter writer = new System.IO.StreamWriter(@"C:\ log.txt", true); string str = DateTime.Now.ToShortTimeString() + " " + strtext; writer.writeline(str); writer.close(); b) Umieść wywołania metody WriteToFile() w metodach Session_Start() i Session_End(). Uruchom aplikację, otwórz aplikację w dwóch różnych przeglądarkach. Sprawdź zawartość pliku dziennika wskazanego w metodzie WriteToFile(). c) Otwórz okno Solution Explorer, zaznacz aplikację i wyświetl menu kontekstowe. Z menu kontekstowego wybierz opcję Add ASP.NET Folder i wskaż folder App_Code. Po dodaniu folderu kliknij na nim prawym klawiszem myszki, wybierz Add New Item, wskaż że chcesz dodać nową klasę i nazwij ją GlobalClass.cs. Otwórz klasę do edycji kodu i umieść w niej poniższy kod: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public class GlobalClass { public GlobalClass() { } public void WriteToFile(string strtext) { System.IO.StreamWriter writer =
} new System.IO.StreamWriter(@"C:\ log.txt", true); string str = DateTime.Now.ToShortTimeString() + " " + strtext; writer.writeline(str); writer.close(); public static void StaticWriteToFile(string strtext) { } } System.IO.StreamWriter writer = new System.IO.StreamWriter(@"C:\ log.txt", true); string str = DateTime.Now.ToShortTimeString() + " " + strtext; writer.writeline(str); writer.close(); d) Zdefiniowana przez Ciebie klasa i jej metody są dostępne globalnie w ramach całej aplikacji. Aby się o tym przekonać, otwórz plik kodu ukrytego SimpleControls.aspx.cs i dodaj w metodzie DropDownList1_SelectedIndexChanged() dodaj poniższy kod: GlobalClass.StaticWriteToFile("to jest tekst z metody statycznej"); GlobalClass g = new GlobalClass(); g.writetofile("a to zwykły tekst"); e) Uruchom formularz SimpleControls.aspx, wybierz kilka razy nazwę czcionki z listy rozwijanej, sprawdź zawartość pliku dziennika.
4. Autoryzacja za pomocą formularzy a) Utwórz w lokalnej bazie danych SQL Express zestaw tabel potrzebnych do obsługi logowania się użytkowników i zarządzania rolami. W tym celu uruchom wiersz poleceń Visual Studio 2005 (menu Start Programy Microsoft Visual Studio 2005 Visual Studio Tools Visual Studio 2005 Command Promet), przejdź do katalogu <dysk:>\windows\microsoft.net\framework\numerwersji i uruchom program aspnet_regsql.exe (bez żadnych parametrów). W oknie, które się pojawi, kliknij przycisk Next >. Następnie, wybierz opcję Configure SQL Server for Application Services. Jako nazwę serwera podaj.\sqlexpress, wybierz autoryzację Windows i jako nazwę bazy danych podaj aspnetdb. Dokończ działanie kreatora. b) Znajdź na dysku katalog zawierający Twoją aplikację. Utwórz w nim podkatalog o nazwie Security. Otwórz menedżera usług internetowych (Mój komputer Zarządzaj Usługi i aplikacje Internetowe usługi informacyjne Witryny sieci Web), zaznacz Domyślna witryna sieci Web i z menu kontekstowego wybierz Nowy Katalog wirtualny. W pierwszym kroku nadaj alias Secure. Kliknij przycisk Dalej >. W drugim kroku wskaż ścieżkę do katalogu utworzonego na dysku. Zaakceptuj domyślne uprawnienia dostępu (odczyt i uruchamianie skryptów) i zakończ działanie kreatora.
c) Klikając prawym klawiszem myszy na nowo utworzonym katalogu wirtualnym wyświetl jego właściwości. Przejdź na zakładkę ASP.NET. Kliknij przycisk Edit Configuration Przejdź na zakładkę Authentication i zmień opcję Authentication mode na Forms. Upewnij się, że wartością cechy Membership Provider Class jest AspNetSqlMembershipProvider. Zamknij wszystkie okna klikając przycisk OK.
d) Upewnij się, że w podkatalogu Security został utworzony plik konfiguracyjny web.config. Z menu File wybierz New Web Site. Zaznacz ASP.NET Web Site i kliknij przycisk Browse. Zaznacz podkatalog Security i kliknij przycisk Open. Kliknij przycisk OK aby utworzyć nową aplikację. Okno dialogowe zaproponuje utworzenie nowej aplikacji lub wykorzystanie istniejących źródeł. Zaznacz opcję Open the existing Web Site i kliknij przycisk OK. e) Dodaj do aplikacji nowy formularz i nazwij go CreateUsers.aspx. W przyborniku rozwiń grupę kontrolek Login i dodaj do formularza kontrolkę CreateUserWizzard. Kliknij tag inteligentny kontrolki i wybierz opcję Auto Format Wybierz szablon kolorystyczny kontrolki. Wyświetl paletę własności kontrolki. Znajdź cechę ContinueDestinationPageUrl i wskaż stronę CreateUsers.aspx jako stronę, do której należy przejść po utworzeniu nowego użytkownika. Uruchom aplikację i dodaj dwóch użytkowników: Jana Kowalskiego (jkowalski) i Adama Nowaka (anowak). Domyślnie, hasła muszą mieć co najmniej sześć znaków i składać się z trzech różnych typów znaków (litery małe i duże, cyfry, znaki specjalne). Można to zmienić przez modyfikację cechy PasswordRegularExpression kontrolki.
f) Dodaj do aplikacji nowy formularz Welcome.aspx. Będzie to strona, której zawartość będzie zależała od tego, czy użytkownik się poprawnie zalogował. Przełącz formularz w tryb projektowania i z przybornika przeciągnij do formularza kontrolkę LoginStatus. Następnie, umieść w formularzu kontrolkę LoginView. Kliknij tag inteligentny kontrolki i upewnij się, że aktualnie jest uruchomiony szablon użytkownika niezalogowanego (AnonymousTemplate). Umieść wewnątrz kontrolki tekst Przykro mi, ale nie jesteś zalogowana(y). Przełącz kontrolkę do szablonu użytkownika zalogowanego (LoggedInTemplate) i umieśc w kontrolce tekst Zalogowała(e)ś się poprawnie jako. Przeciągnij z przybornika kontrolkę LoginName. Ostatecznie, oba szablony powinny wyglądać następująco: g) Dodaj do aplikacji formularz Login.aspx. Przełącz formularz w tryb projektowania i umieść w nim kontrolkę Login. Wykorzystaj tag inteligentny i opcję Auto Format do wyboru szablonu graficznego. Wyświetl paletę cech kontrolki i jako własność DesitnationPageUrl podaj Welcome.aspx. Uruchom aplikację. Celowo popełnij błąd przy logowaniu i zaobserwuj skutki błędu. Zaloguj się poprawnie jako jkowalski. h) Wewnątrz aplikacji utwórz nowy folder o nazwie tajne_dane. W tym folderze stwórz plik topsecret.html i umieść w nim przykładowe tajne dane. Otwórz formularz Welcome.aspx i przejdź do szablonu zalogowanego użytkownika. Dodaj odnośnik do utworzonej strony z tajnymi danymi, do tego celu posłuż się kontrolką Hyperlink. i) Z menu Website wybierz pozycję ASP.NET Configuration. W otwartej aplikacji kliknij na zakładkę Security. Kliknij odnośnik Enable roles. Następnie, kliknij odnośnik Create or Manager roles i utwórz rolę admin. Kliknij odnośnik Manage i dodaj do roli użytkownika jkowalski. Kliknij przycisk Back umieszczony w prawym dolnym rogu strony. Kliknij odnośnik Create access rules. Kliknij i zaznacz folder tajne_dane. Stwórz dwie reguły (koniecznie w takiej kolejności) Role: admin Permission: allow All users Permission: deny j) Kliknij odnośnik Manager access rules aby upewnić się, że posiadacze roli admin mogą odczytywać zawartość folderu tajne_dane. Wróć do głównego okna zakładki Security. Zamknij aplikację ASP.NET Web Site Administration Tool. k) Uruchom aplikację i spróbuj się zalogować jako anowak. Spróbuj wejść na stronę z tajnymi danymi. Powtórz tę operację będąc zalogowana(y) jako jkowalski.