Aplikacje WWW. Laboratorium z przedmiotu Aplikacje WWW - zestaw 01

Transkrypt

1 Laboratorium z przedmiotu Aplikacje WWW - zestaw 01 Cel zajęć. Celem zajęć jest zapoznanie z technologią ASP.NET Web Forms. Wprowadzenie teoretyczne. 1. Komunikacja klient-serwer poprzez połączenie internetowe Internet składa się z zasobów oraz użytkowników żądających dostępu do zasobów internetowych. Do umożliwienia takiego dostępu wymagane są trzy mechanizmy: URI (ang. Uniform Resource Identifier) schemat nazewnictwa pozwalający lokalizować zasoby HTTP (ang. Hypertext Transfer Protocol) protokół definiujący funkcjonowanie żądać i odpowiedzi. Żądania można przesyłać za pomocą metod GET i POST. HTML (ang. HyperText Markup Language) język używany do przedstawienia informacji i poruszania się między zasobami. Za zachowanie stanu zmiennych przekazywanych między kolejnymi operacjami żądania i odpowiedzi odpowiada programista. HTTP oraz HTML nie udostępniają takich właściwości. 2. Cechy technologii ASP.NET Web Forms Integracja ze środowiskiem.net formularze Web zostały oparte na wspólnym środowisku uruchomieniowym i posiadają dostęp do wszystkich klas platformy oraz do specjalnych przestrzeni nazw, służących do tworzenia aplikacji WWW. Integracja z platformą.net jest wymagana jedynie po stronie serwera. Wiązanie kontrolek HTML działających po stronie klienta z kontrolkami uruchamianymi po stronie serwera Kontrolki, które widziane są w oknie przeglądarki, powstają w oparciu o kod w języku HTML. W ASP.NET Web Forms wszystkie kontrolki to klasy. ASP.NET udostępnia kontrolki uruchamiane po stronie serwera, które mogą być odwzorowane na znaczniki HTML. Gdy informacje zawarte na stronie internetowej zostają przesłane na serwer, wszystkie znaczniki HTML przeznaczone do uruchomienia na serwerze zostają przekształcone na odpowiadające im klasy. Kompilacja stron internetowych zamiast ich interpretacji strony internetowe ASP.NET Web Forms składają się z interfejsu użytkownika definiowanego przez HTML oraz z logiki interfejsu stworzonej w jednym z języków platformy.net (np. C#). Pierwsze żądanie strony ASP powoduje jej kompilację do klasy platformy.net, natomiast kolejne żądania obsługują zestaw utworzony w czasie tej kompilacji. 3. Modele tworzenia aplikacji w ASP.NET Web Forms Kod inline kod znaczników HTML i kod aplikacji (np. w języku C#) występują w pojedynczym pliku.aspx Kod ukryty kod znaczników HTML oraz kod aplikacji znajdują się w osobnych plikach. Kod znaczników występuje w pliku.aspx, natomiast kod logiki w pliku.cs (jeśli językiem, w którym jest pisany jest C#). Klasy częściowe jest odmianą modelu wykorzystującego kod ukryty, w którym kod logiki zaimplementowany jest za pomocą klas częściowych (ang. partial classes). 1

2 Zadanie 1. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami: Aplikacja ma się składać ze strony internetowej, zawierającej przycisk oraz komunikat tekstowy. Komponenty te mają zostać umieszczone na stronie jako kontrolki serwerowe ASP.NET. Naciśnięcie przycisku ma powodować zwiększanie wartości licznika o 1. Początkowa wartość licznika to 0. Komunikat ma zawierać informację o aktualnej wartości licznika. Gdy wartość licznika jest podzielna przez 2, komunikat powinien być koloru czerwonego. W przeciwnym razie komunikat powinien być koloru zielonego. Gdy wartość licznika przekroczy 5, powinien on być zerowany. Aby zrealizować zadanie należy wykonać następujące kroki: Proszę o utworzenie nowego projektu strony WWW. W tym celu proszę o wybranie z głównego menu programu Visual Studio następujących opcji: File > New > Project. W nowo otwartym oknie proszę wybrać szablon projektu: Templates > Visual C# > Windows > Web. Następnie proszę wybrać szablon ASP.NET Web Application. Przed stworzeniem nowego projektu, proszę zlokalizować go w łatwo dostępnym katalogu i zmienić jego nazwę na Zadanie 1.1. Proszę o sprawdzenie, czy zaznaczono opcję Create directory for solution. Prawidłowo skonfigurowane okno tworzenia nowego projektu przedstawia poniższy rysunek. Po sprawdzeniu ustawień proszę nacisnąć przycisk OK. W nowo otwartym oknie proszę wybrać pusty szablon (Empty) oraz zaznaczyć opcję Add folders and core references for: Web Forms. Prawidłowo skonfigurowane okno przedstawia poniższy rysunek. Po sprawdzeniu ustawień proszę nacisnąć przycisk OK. 2

3 Następnie w oknie Solution Explorer proszę kliknąć prawym przyciskiem myszy na nazwę projektu Zadanie 1.1 i wybrać opcję Add > Web Form. W nowo otwartym oknie proszę zmienić nazwę pliku na index i zatwierdzić wybór przyciskiem OK. Wewnątrz znacznika <div> utworzonej strony proszę o dodanie następującego kodu: Po wykonaniu tej operacji i zmianie rodzaju widoku z source na split lub design (opcja dostępna na dole strony) na ekranie powinien ukazać się dodany guzik (jeśli konieczna jest synchronizacja widoku, należy kliknąć na wyświetlony komunikat). Pod dodanym poprzednio kodem kontrolki klasy Button, proszę o umieszczenie następującego kodu: Po wykonaniu tej operacji na stronie WWW pod przyciskiem powinno pojawić się pole tekstowe. Proszę o dokonanie zmiany koloru czcionki dodanego napisu na czerwony (należy użyć właściwości ForeColor). Operację tę proszę wykonać analogicznie do ustalenia właściwości Text. Proszę o dodanie do przycisku właściwości o następującym kodzie: W oknie Solution Explorer proszę o kliknięcie znaczka trójkąta przy nazwie strony index.aspx i dwukrotne kliknięcie nazwy pliku index.aspx.cs. Po wykonaniu tej operacji na ekranie powinna ukazać się zakładka zawierająca kod otwieranego pliku. 3

4 W klasie index otworzonego pliku proszę dodać następujący kod: Funkcja ButtonDodaj_Click będzie wywoływana poprzez zdarzenie onclick przycisku. Proszę o utworzenia ciała funkcji ButtonDodaj_Click, której wywołanie dostarczy wymaganej funkcjonalności strony, opisanej na początku zadania. Podpowiedzi: - Dostęp do właściwości kontrolek z poziomu funkcji obrazuje przykład: - Przykład rzutowania z typu string do typu int: - Wartość licznika należy wydobyć za pomocą operacji na łańcuchach znaków - Struktura Color zawierająca definicje kolorów znajduje się w przestrzeni nazw System.Drawing Aby uruchomić stronę, z głównego menu proszę wybrać opcję: Debug > Start Debugging. Zadanie 2. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami: Aplikacja ma składać się ze strony internetowej, zawierającej tabelę składającą się z trzech wierszy i trzech kolumn. W każdej komórce tabeli ma znajdować się przycisk, będący kontrolką serwerową ASP.NET Aplikacja ma być symulacją gry w kółko i krzyżyk, po naciśnięciu danego przycisku, tekst który na nim widnieje ma się zmieniać na o lub x (naprzemiennie) W aplikacji ma być wyświetlona informacja, czy aktualny ruch należy do gracza posługującego się krzyżykami, czy kółkami Aplikacja ma zawierać zabezpieczenie, dzięki któremu przycisków oznaczonych kółkiem lub krzyżykiem nie można będzie nacisnąć Aplikacja ma zawierać możliwość czyszczenia wartości wszystkich pól przez naciśnięcie przycisku Aby zrealizować zadanie należy wykonać następujące kroki: W swoim katalogu proszę o stworzenie projektu o nazwie Zadanie 1.2 i dodanie do niego pliku index. 4

5 W pliku index proszę o umieszczenie następującego kodu: Następnie proszę o zmianę typu widoku strony internetowej z Source na Design. Proszę o wybranie z panelu Toolbox kontrolki typu Button, a następnie przeciągnięcie jej do pierwszej komórki tabeli o indeksie 1,1 (1-numer wiersza, 1-numer kolumny). Efekt końcowy tej operacji przedstawia poniższy rysunek: Następnie proszę o zaznaczenia wstawionego przycisku oraz zmianę w panelu Properties następujących parametrów: - (ID) któremu proszę przypisać wartość button11 (końcówka 11 informuje o miejscu położenia w tabeli, pierwsza cyfra stanowi indeks wiersza, a druga indeks kolumny) - Text któremu proszę przypisać wartość? Dwie powyższe operacje proszę wykonać dla wszystkich komórek tabeli, wypełniając je kontrolkami klasy Button. Proszę o dostosowanie nazw przycisków do podanego schematu, opartego na miejscu położenia przycisku w komórce o danych indeksach. Następnie proszę o przeciągnięcie na stronę z panelu Toolbox kontrolki typu Label. Po wykonaniu tej operacji proszę o jej zaznaczenie oraz zmianę w panelu Properties następujących parametrów: - (ID) któremu proszę przypisać wartość labelaktualnyznak - Text któremu proszę przypisać wartość Aktualnie ruch wykonuje: o Następnie proszę o dwukrotne kliknięcie przycisku znajdującego się w komórce o indeksie 1,1. Na ekranie powinien pojawić się następujący kod funkcji, obsługujący zdarzenie onclick: Można zauważyć, że wywołanie zdarzenia onclick każdego z przycisków znajdujących się w tabeli, będzie powodowało wykonanie tych samych operacji sprawdzenia aktualnego znaku, zmiany znaku przycisku oraz zabezpieczenia przycisku przed próbą ponownego kliknięcia. W związku z tym pozostałe przyciski poprzez 5

6 wystąpienie zdarzenia onclick powinny wywoływać te samą funkcję, co przycisk znajdujący się w komórce o indeksie 1,1. Aby przypisać wywołanie funkcji button11_click podczas kliknięcia pozostałym przyciskom, proszę ponownie przejść do widoku Design strony WWW. Proszę o zaznaczenie przycisku znajdującego się w komórce o indeksie 1,2. Po wykonaniu tej operacji w panelu Properties proszę wybrać obsługę zdarzeń (ikonka z piorunem). Proszę o zaznaczenie pola Click, a następnie z rozwijanego menu o wybranie funkcji button11_click. Operację tę proszę powtórzyć z pozostałymi przyciskami. UWAGA! Operację tę można także wykonać korzystając z widoku Source i przydzielając każdemu z przycisków właściwość: Następnie proszę o napisanie ciała funkcji button11_click, aby strona spełniała funkcjonalność określoną na początku zadania. Podpowiedź należy dokonać rzutowania typu obiektu sender na typ Button. Następnie proszę o umieszczenia na stronie kolejnego przycisku, którego naciśnięcie będzie powodowało zmianę wartości wszystkich przycisków w tabeli na? i czyniło je gotowymi do użycia. Aktualny symbol ma być wtedy ustawiony na o. Podpowiedź do znalezienia kontrolki o szukanym ID można skorzystać z funkcji FindControl. 6