Aplikacje internetowe i rozproszone - laboratorium

ASP.NET Web Forms – kontrolki bazodanoweDo realizacji projektu potrzebne jest zintegrowane środowisko programistyczne MicrosoftVisual Studio 2008 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łyprzygotowane dla serwera bazy danych Microsoft SQL Server 2005 Express Edition.Ćwiczenie 1Celem ćwiczenia jest utworzenie aplikacji składającej się z formularza do wyborupracowników wg etatu i pensji oraz strony z tabelką prezentującą pracowników spełniającychokreślone kryteria selekcji. Aplikacja ilustruje użycie kontrolek do walidacji danych,przekierowanie żądania do innej strony oraz komunikację z bazą danych poprzez bazodanowekontrolki Web Forms.1. Sprawdzenie czy zainstalowany i uruchomiony jest lokalny serwer bazy danych SQLServer Express (i uruchomienie go jeśli jest zainstalowany, a nie uruchomiony)a) Usługib) SQL Server Configuration Manager (dostępny z menu Start)

2. Sprawdzenie konfiguracji Visual Studio w zakresie współpracy z SQL Server Express(Tools→Options).3. Utworzenie nowej witryny (Web Site).a) Uruchom środowisko Microsoft Visual Studio 2008.b) Z menu głównego wybierz File→New Web Site. Wybierz szablon ASP.NET Web Site,język Visual C# i lokalizację File System. Zaakceptuj zaproponowany katalog lubzmień go na inny gdy nie masz prawa zapisu w proponowanym katalogu. Kliknijprzycisk OK.

4. Utworzenie połączenia z bazą danych w środowisku MS Visual Studioa) W panelu Server Explorer wywołaj prawym klawiszem myszy menu kontekstowe dlawęzła Data Connections i wybierz opcję Add Connection.b) Jako źródło danych wybierz Microsoft SQL Server Database File. Kliknij przyciskContinue.c) Pobierz na dysk lokalny plik bazy danych Instytut.mdf. Wróć do Visual Studioi korzystając z przycisku Browse... zlokalizuj pobrany na dysk plik bazy danych.

d) Przetestuj połączenie przyciskiem Test Connection i w przypadku powodzeniakliknij przycisk OK.e) W panelu Server Explorer rozwiń węzeł reprezentujący utworzone połączenie,następnie rozwiń węzeł Tables aby upewnić się, że w bazie danych dostępna jesttabela PRACOWNICY. (Możesz podejrzeć zawartość tabeli PRACOWNICY wywołującprawym klawiszem myszy menu kontekstowe i wybierając z niego opcję Show TableData.)

5. Utworzenie formularza do wprowadzania kryteriów selekcji pracowników.a) Przejdź do edycji utworzonej wraz z projektem strony Default.aspx w trybieDesign.b) Techniką drag-and-drop umieść na stronie kontrolkę DropDownList z grupy Standard.c) Z menu, które pojawi się po umieszczeniu kontrolki na stronie wybierz opcję EditItems. (Wskazówka: menu z typowymi zadaniami dotyczącymi kontrolki możeszwywoływać i ukrywać wybierając myszą strzałkę znajdującą się na górnej krawędzikontrolki.)

f) Korzystając z palety właściwości (Properties) zmień identyfikatory (ID) kontrolek na„EtatDropDownList”, „DolnyTextBox”, „GornyTextBox” i „SzukajButton”. Równieżpoprzez paletę zmień etykietę przycisku (Text) na „Szukaj”.6. Rozbudowa formularza do wprowadzania kryteriów selekcji pracowników o mechanizmywalidacji danych. Wprowadzenie progów płacy ma być obowiązkowe, wartości progówpowinny być liczbami całkowitymi z zakresu od 0 do 9999, przy czym próg dolny nie możebyć większy od górnego.a) Techniką drag-and-drop umieść obok kontrolki do wprowadzania dolnego progu płacykontrolkę RequiredFieldValidator z grupy Validation.

) Korzystając z palety właściwości zmień komunikat o błędzie związany z walidatorem(ErrorMessage) na „Pole wymagane!”, a jako walidowaną kontrolkę(ControlToValidate) wybierz DolnyTextBox. Zmień sposób wyświetlania (Display) na„Dynamic”, w ten sposób formularz dynamicznie przydzieli miejsce dla kontrolki jeślizajdzie taka potrzeba. Dla pozostałych właściwości pozostaw wartości domyślne.c) Analogicznie do punktów a) i b) dodaj walidator RequiredFieldValidator dla kontrolkido wprowadzania górnego progu płacy.d) Techniką drag-and-drop umieść obok walidatora RequiredFieldValidator dla dolnegoprogu płacy kontrolkę RangeValidator z grupy Validation.e) Korzystając z palety właściwości zmień komunikat o błędzie związany z walidatorem(ErrorMessage) na „Wartość musi być liczbą całkowitą z zakresu od 0 do 9999!”, jakowalidowaną kontrolkę (ControlToValidate) wybierz DolnyTextBox, jako wartośćmaksymalną (MaximumValue) podaj 9999, jako wartość minimalną (MinimumValue)podaj 0, a jako typ danych (Type) wybierz Integer. Zmień sposób wyświetlaniakontrolki na dynamiczny. Dla pozostałych właściwości pozostaw wartości domyślne.f) Analogicznie do punktów d) i e) dodaj walidator RangeValidator dla kontrolki dowprowadzania górnego progu płacy.g) Techniką drag-and-drop umieść obok przycisku kontrolkę CompareValidator z grupyValidation.h) Korzystając z palety właściwości zmień następujące właściwości dodanego walidatoratypu CompareValidator: jako komunikat o błędzie związany z walidatorem(ErrorMessage) wprowadź „Dolny próg nie może być wyższy niż górny!”, jakowalidowaną kontrolkę (ControlToValidate) wybierz GornyTextBox, jako kontrolkę doporównania (ControlToCompare) wybierz DolnyTextBox, jako typ danych (Type)wybierz Integer, a jako operator porównania (Operator) wybierz GreaterThanEqual.Zmień sposób wyświetlania kontrolki na dynamiczny. Dla pozostałych właściwościpozostaw wartości domyślne.i) Zapisz wszystkie zmiany (np. File→Save All).

j) Uruchom stronę wybierając z menu kontekstowego opcję View in Browser.k) Przetestuj działanie walidacji na stronie wprowadzając różne kombinacje wartościdolnego i górnego progu płacy.7. Utworzenie strony ASP.NET prezentującej odczytane z bazy danych dane o pracownikachw formie tabelki.a) Utwórz w ramach bieżącej witryny nową stronę, wybierając z menu opcję File→NewFile, a następnie szablon Web Form. Jako jej nazwę podaj „Pracownicy.aspx”, a jakojęzyk „Visual C#”.b) Sprawdź w panelu Solution Explorer, że nowa strona została dodana do witryny.

c) Przełącz się na edycję strony Pracownicy.aspx w trybie Design.d) Przejdź do panelu Server Explorer. Rozwiń gałąź reprezentującą utworzone wcześniejpołączenie z bazą danych. Następnie rozwiń dla tego połączenia gałąź Tables.e) Techniką drag-and-drop umieść tabelę PRACOWNICY na stronie Pracownicy.aspx.

f) Z menu podręcznego dla umieszczonej przez kreator kontrolki typu GridView wybierzopcję Edit Columns.g) W wywołanym oknie Fields usuń z listy Selected Fields pola ID_SZEFA,ZATRUDNIONY, PLACA_DOD i ID_ZESP. Następnie kolejno wybierając poszczególnekolumny w panelu Selected Fields zmień nagłówki pozostałych kolumn (HeaderText)na „Id”, „Nazwisko”, „Etat” i „Płaca”. Na zakończenie kliknij przycisk OK.h) Zapisz wszystkie zmiany (np. File→Save All).i) Uruchom stronę wybierając z menu kontekstowego opcję View in Browser. Strona wprzeglądarce powinna zawierać tabelkę z danymi wszystkich pracowników.j) Otwórz paletę własności komponentu GridView. W grupie własności Behavior włączmożliwość sortowania zawartości tabelki (AllowSorting = true). W grupie własnościPaging włącz paginację (AllowPaging = true), ustaw liczbę jednorazowowyświetlanych rekordów na 5 (PageSize = 5), wybierz sposób wyświetlania pagera(PagerSettings.Mode = NumericFirstLast). W grupie własności AlternatingRowStylewłącz podświetlanie co drugiego wiersza (BackColor = #FFFF80). Uruchom ponowniestronę.

8. Parametryzacja źródłowego zapytania dla kontrolki GridView.a) W trybie Design edycji strony Pracownicy.aspx kliknij myszą kontrolkę źródładanych (SqlDataSource), a następnie w palecie właściwości znajdź właściwośćSelectQuery tej kontrolki. Wywołaj edytor wartości dla tej właściwości zaznaczając wpalecie nazwę właściwości, a następnie klikając związany z nią przycisk ..., którypojawi się po zaznaczeniu właściwości.b) W oknie edytora treści zapytania SELECT dla źródła danych rozszerz zapytanie onastępującą klauzulę WHERE:WHERE [ETAT] = @p_etat AND [PLACA_POD] BETWEEN @p_dolny AND @p_gornyc) Kliknij przycisk Refresh Parameters, aby w panelu Parameters pojawiły sięwykorzystywane w zapytaniu parametry p_etat, p_dolny i p_gorny.d) Jako źródło parametru p_etat wybierz QueryString. Następnie jako nazwę parametruw adresie URL (QueryStringField) podaj „p_etat”.e) Powtórz krok d) dla parametrów p_dolny i p_gorny, podając jako nazwę parametru wadresie URL odpowiednio „p_dolny” i „p_gorny”. Kliknij przycisk OK.f) Za pomocą palety właściwości zmień wartość właściwości EmptyDataText dlakomponentu GridView na „Brak pracowników spełniających zadane kryteria.”.g) Zapisz wszystkie zmiany (np. File→Save All).9. Dodanie linku umożliwiającego powrót ze strony wyświetlającej dane pracowników(Pracownicy.aspx) do strony startowej, umożliwiającej wprowadzanie kryteriów selekcji(Default.aspx)

a) Techniką drag-and-drop umieść na stronie Pracownicy.aspx pod kontrolką źródładanych kontrolkę HyperLink z grupy Standard.b) Poprzez paletę właściwości ustaw dla dodanej kontrolki HyperLink właściwość Text na„Powrót”, a dla właściwości NavigateURL wywołaj kreator zaznaczając w palecienazwę właściwości, a następnie klikając związany z nią przycisk ..., który pojawi siępo zaznaczeniu właściwości. Jako stronę, do której ma prowadzić link wybierzDefault.aspx i kliknij przycisk OK.c) Zapisz wszystkie zmiany (np. File→Save All).10. Implementacja nawigacji do strony z informacjami o pracownikach ze strony startowej zformularzem do wprowadzania kryteriów selekcji.a) Przejdź do edycji strony Default.aspx w trybie Design.b) Kliknij dwukrotnie przycisk w celu oprogramowania zdarzenia kliknięcia przycisku.c) Jako ciało utworzonej przez kreator metody SzukajButton_Click() wprowadź poniższykod:Response.Redirect("Pracownicy.aspx?p_etat=" +Server.UrlEncode(EtatDropDownList.Text) +"&p_dolny=" + DolnyTextBox.Text +"&p_gorny=" + GornyTextBox.Text);Powyższy fragment kodu realizuje przekierowanie do strony Pracownicy.aspxmetodą Response.Redirect(), przekazując w adresie URL wartości parametrów p_etat,p_dolny i p_gorny, reprezentujące kryteria selekcji pracowników wprowadzone przezużytkownika do formularza. Ponieważ nazwy etatów mogłyby potencjalnie zawieraćznaki zabronione w adresach URL, nazwa wybranego etatu jest kodowana metodąServer.UrlEncode().d) Zapisz wszystkie zmiany (np. File→Save All).e) Uruchom stronę Default.aspx wybierając z menu kontekstowego opcję View inBrowser.f) Przetestuj aplikację wybierając z listy różne etaty i różne progi płacy.11. Dynamiczne wczytywanie listy wartościa) Otwórz stronę Default.aspx i wyświetl paletę własności listy rozwijanejzawierającej nazwy etatów. W grupie własności Data wybierz DataSourceID i z listyrozwijanej wybierz opcję . Jako źródło danych wskaż bazędanych (Database), jako nazwę wpisz ListaNazwEtatow. Kliknij OK.

) W kolejnym kroku wybierz z listy rozwijanej nazwę połączenia do bazy danych (tejsamej, z której korzysta strona z tabelką pracowników). Kliknij Next >.Z listy dostępnych tabel wybierz tabelę PRACOWNICY i zaznacz atrybut ETAT.Koniecznie zaznacz pole „Return only unique rows”. Kliknij Next >. Kliknij Finish.

c) Wróć do własności listy rozwijanej ze strony Default.aspx. W grupie własnościData wybierz jako pole do wyświetlenia na liście (DataTextField) atrybut ETAT, jakopole do zwrócenia wartości z listy (DataValueField) także atrybut ETAT. Uruchomi przetestuj aplikację.Ćwiczenie 2Celem ćwiczenia jest obserwacja problemów wynikających ze współbieżnego dostępu dodanych w aplikacjach ASP.NET i ich rozwiązanie poprzez optymistyczne zarządzaniewspółbieżnością.1. Utwórz w ramach witryny tworzonej w pierwszym ćwiczeniu stronę umożliwiającą edycjęi usuwanie pracowników. W tym celu:a) Dodaj do witryny nową stronę Web Form i nazwij ją PracEdit.aspx.b) Przejdź do edycji strony PracEdit.aspx w trybie Design.c) Przejdź do panelu Server Explorer. Rozwiń gałąź reprezentującą utworzone wcześniejpołączenie z bazą danych. Następnie rozwiń dla tego połączenia gałąź Tables.d) Techniką drag-and-drop umieść tabelę PRACOWNICY na stronie.

e) W menu podręcznym dla umieszczonej przez kreator kontrolki typu GridView zaznaczopcje Enable Editing i Enable Deleting.f) Zapisz wszystkie zmiany (np. File→Save All).g) Uruchom stronę wybierając z menu kontekstowego opcję View in Browser.Strona w przeglądarce powinna zawierać tabelkę z danymi wszystkich pracownikówz możliwością ich edycji i usuwania.2. Otwórz stronę w dwóch przeglądarkach. Sprawdź co stanie się w przypadku współbieżnejmodyfikacji tego samego wiersza. W tym celu:a) w pierwszej przeglądarce kliknij „Edit” dla któregoś wierszab) w drugiej przeglądarce kliknij „Edit” dla tego samego wierszac) w obu przeglądarkach zmodyfikuj płacę podstawową tego samego pracownika,ustawiając dwie różne wartościd) kliknij „Update” najpierw w jednej a potem w drugiej przeglądarce.3. Kliknij znacznik inteligentny kontrolki SqlDataSource i wybierz opcję Configure DataSource....

4. Przejdź do ekranu Configure the Select Statement, kliknij przycisk Advanced i zaznaczpole wyboru Use Optimistic Concurrency. Następnie kliknij OK i Finish.5. Obejrzyj zmienione wskutek włączenia optymistycznego zarządzania współbieżnościąwłaściwości kontrolki SqlDataSource: ConflictDetection (CompareAllValues zamiastOverwriteChanges) i DeleteQuery/UpdateQuery, wtórych klauzula WHERE zostałarozszerzona o warunki odwołujące się do oryginalnych wartości.6. Przetestuj zachowanie strony przy współbieżnych modyfikacjach (sposobem z pkt. 2).7. W obecnej postaci aplikacji nie występuje problem „ślepego” nadpisywania zmiandokonanych przez inną transakcję. Problemem jest jednak to, że modyfikacje drugiejtransakcji są ignorowane bez żadnego komunikatu dla użytkownika. Aby wykryć konfliktoperacji i poinformować użytkownika o jego wystąpieniu umieścimy na stronie etykietę zkomunikatem o błędzie, która będzie widoczna, gdy operacja UPDATE lub DELETE nieznajdzie żadnego pasującego do warunku WHERE wiersza w bazie danych:a) Umieść na stronie komponent etykiety. Zmień jej identyfikator na „ErrorLabel”.Wprowadź dla niej stosowny tekst i ustaw jej właściwość widzialności na false.

) W palecie właściwości komponentu GridView przełącz się na zakładkę Events i utwórzprocedury obsługi zdarzeń RowDeleted i RowUpdated.c) Wprowadź następującą treść utworzonych metod obsługi zdarzeń:protected void GridView1_RowDeleted(object sender,GridViewDeletedEventArgs e){if (e.AffectedRows == 0)ErrorLabel.Visible = true;elseErrorLabel.Visible = false;}protected void GridView1_RowUpdated(object sender,GridViewUpdatedEventArgs e){if (e.AffectedRows == 0){ErrorLabel.Visible = true;e.KeepInEditMode = true;GridView1.DataBind();}elseErrorLabel.Visible = false;}d) Uruchom stronę i ponownie przetestuj jej zachowanie przy współbieżnych modyfikacjach.