Laboratorium z przedmiotu Aplikacje klient-serwer - zestaw 01 Cel zajęć. Celem zajęć jest zapoznanie z praktycznymi aspektami tworzenia aplikacji z wykorzystaniem środowiska Visual Studio 2010. Wprowadzenie teoretyczne. Rozważana w ramach niniejszych zajęć tematyka stanowi wprowadzenie do tworzenia aplikacji w języku ASP.NET. Aby ze zrozumieniem zrealizować zadania, przewidziane do wykonania w ramach zajęć laboratoryjnych, należy zapoznać się z następującymi zagadnieniami: komunikacja klient-serwer poprzez połączenie internetowe, cechy języka ASP.NET, modele tworzenia aplikacji z wykorzystaniem ASP.NET. 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 języka ASP.NET 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. 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 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 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 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
4. Kaskadowe Arkusze Stylów (CSS) i ASP.NET CSS (ang. Cascading Style Sheets) język służący do opisu formy prezentacji stron WWW. Aby dodać Kaskadowy Arkusz Stylów do projektu ASP.NET, należy w oknie Solution Explorer prawym przyciskiem myszy kliknąć na nazwę projektu, a następnie wybrać opcję: Add > New Item > wybieramy Style Sheet > OK. Następnie na stronie z kodem, w sekcji <HEAD></HEAD> należy umieścić standardowy kod dołączenia Kaskadowego Arkuszu Stylów: <link type="text/css" href="nazwapliku.css" rel="stylesheet" /> Zastępczo można też posłużyć się następującym kodem: <style type="text/css" >@import url("nazwapliku.css");</style> W celu przyporządkowania kontrolki serwerowej ASP.NET do danej klasy CSS, należy edytować jej właściwość CssClass, nadając jej wartość będącą nazwą klasy. Zadanie 1. Proszę zrealizować aplikację, 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 katalogu zawierającego imię i nazwisko studenta. 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ę określić typ projektu jako: Visual C# > Web. Następnie proszę wybrać szablon ASP.NET Web Application i platformę.net w wersji 4. Przed stworzeniem nowego projektu, proszę zlokalizować go w stworzonym uprzednio 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. 2
Proszę usunąć zawartość znacznika asp:content o ID BodyContent (znaczniki h2 i p). W tej samej sekcji proszę o umieszczenie następującego kodu: Po wykonaniu tej operacji i zmianie rodzaju widoku z source na split lub design 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 plusa przy nazwie strony Default.aspx i dwukrotne kliknięcie nazwy pliku Default.aspx.cs. Po wykonaniu tej operacji na ekranie powinna ukazać się zakładka zawierająca kod otwieranego pliku. W klasie _Default otworzonego pliku proszę dodać następujący kod: 3
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 > OK. Przy ocenie zadania główny nacisk będzie kładziony na: Wykonanie wszystkich założeń ujętych w treści zadania. Sposób implementacji operacji wywołanej naciśnięciem przycisku. Zadanie 2. Proszę zrealizować aplikację, 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 strony ASP.NET o nazwie Zadanie 1.2. 4
Wewnątrz znacznika asp:content o ID BodyContent 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 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. 5
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: Przy ocenie zadania główny nacisk będzie kładziony na: Wykonanie wszystkich założeń ujętych w treści zadania. Sposób implementacji obsługi zdarzenia onclick przycisków. Zadanie do domu. Proszę zrealizować aplikację, która powinna odznaczać się następującymi cechami: Aplikacja ta jest rozwinięciem aplikacji z zadania drugiego. Powinna ona wykrywać stan, w którym w jednym rzędzie, kolumnie lub na przekątnej tabeli znajdą się trzy takie same symbole. Jeśli stan opisany powyżej zostanie wykryty, komunikat kontrolki typu Label powinien informować o tym, który symbol zwyciężył. Dodatkowo linia zwycięskich symboli powinna zostać podświetlona innym kolorem poprzez zmianę koloru tła odpowiednich przycisków. Zagadnienia, które należy uznać za przyswojone w trakcie zajęć. Po zajęciach będzie obowiązywać praktyczna znajomość: Podstawowa znajomość HTML. Tworzenie nowego projektu ASP.NET w VisualStudio. Znajomość struktury projektu ASP.NET. Znajomość podstawowych paneli VisualStudio (Solution, Toolbox, Properties). Znajomość kontrolek Button i Label. Znajomość sposobu obsługi zdarzeń w ASP.NET. Dołączanie stylów CSS do strony ASP.NET. 6
Zagadnienia do samodzielnego zgłębienia dla dociekliwych. Osoby zainteresowane mogą dodatkowo zapoznać się z następującymi tematami: Debugowanie projektów ASP.NET z wykorzystaniem Visual Studio. Zagadnienia do powtórzenia na następne zajęcia. Przed kolejnymi zajęciami należy powtórzyć następujące zagadnienia: Praktyczne zastosowanie na stronach WWW Kaskadowych Arkuszy Stylów (CSS). Właściwości podstawowych kontrolek.net (TextBox, RadioButton, CheckBox) Wybrane aspekty dotyczące implementacji z wykorzystaniem języka PHP. Rozważane w ramach niniejszych zajęć aspekty mogą być implementowane w różnorodnych technologiach służących do realizacji aplikacji, m.in. języku skryptowym PHP. Zasadnicze różnice w korzystaniu z ASP.NET i PHP w kontekście tematyki niniejszego laboratorium są następujące: Cechy języka Hypertext preprocesor: Nie bazuje na znacznikach jest językiem programowania wykorzystującym dostępne materiały i możliwości jakie oferuje HTML, XML czy Ajax. Nie posiada swoich własnych znaczników, a jedynie funkcje(nazwę i jej definicję). Jest stabilny w tym sensie, że nie potrzebuje serwera, którego często należy resetować, wersje języka są kompatybilne wstecz, a ich modyfikacje nie są radykalne. Najpopularniejszy z serwerów PHP Apacze jest jednym z bardziej znanych i stabilnych serwerów posiadających ogromną bazę programistów i deweloperów czuwających nad jego bezpieczeństwem i rozwojem nie jest to jedna duża firma. Jest szybki w działaniu, szczególnie wersja działająca na systemach Unix. Pomimo ogromnej różnicy w strukturze budowy i działania skryptów(interpretacja w locie) jest subiektywnie szybszy od porównywalnych systemów opartych na konkurencyjnych środowiskach(asp, JSP). Jest otwarty open source dostępny jest pełny kod źródłowy języka wraz z możliwością jego zmiany, modyfikacji, rozbudowy. Fakt ten wpływa pozytywnie na uodpornienie zmian płynących z innej konfiguracji serwera(windows, Linux). Działa pod każdą platformą. Jest otwarty na współpracę z innymi platformami nie wprowadza swoich modyfikacji dobrze znanych środowisk czy bibliotek dostosowuje się do jak najlepszego ich użycia(np. MySQL). Wykorzystuje wiele protokołów jak POP3, IMAP lub LDAP. Może wykorzystywać architekturę wielowarstwową czy modyfikować obrazy dzięki bibliotece GD. Cały czas się rozwija język prze na przód idąc za zapotrzebowaniem użytkowników. Nie osiada na laurach czy przestaje być rozwijany ponieważ, Popularność PHP cały czas wzrasta a to oznacza, że coraz więcej użytkowników, firm przechodzi z innych architektur na PHP z powodów praktycznych jak i najważniejszego: PHP jest DARMOWY. 7
Modele tworzenia aplikacji w Hypertext preprocesor Kod inline analogicznie jak w ASP to kod znaczników HTML/XML i kod aplikacji(właściwy język PHP) w jednym pliku.php. Kod wpleciony kod znaczników HTML/XML oraz kod aplikacji znajdują się w osobnych plikach. W kodzie znaczników występują sekcje odwołujące się do kodu aplikacji. Kod ukryty najczęściej spotykany gdy kod PHP zarządza kodem HTML/XML. Np. plik z wyglądem strony mogą być zapisane w dowolnym formacie i z rozszerzeniem, podłączone są do nadzorującego pliku(wraz z odpowiednią metodą lub funkcją) z kodem PHP. Z kolei analogie w korzystaniu z ASP.NET i PHP w kontekście tematyki niniejszego laboratorium są następujące: Obie technologie używane są do budowy rozbudowanych aplikacji opartych o rozbudowanej strukturze obsługi klienta jak i zarządzanej bazy danych. Wykorzystują te same znaczniki HTML i CSS. Są w pełni obiektowe. Wykorzystują cały wachlarz metod, sposobów połączenia, zarządzania jakie oferuje sieć Internet. Uwagi szczegółowe dotyczące implementacji w języku PHP są następujące: Podstawowa aplikacja wyświetlająca na ekranie napis test wygląda następująco: Pierwsza strona WWW w PHP Numery linii od 1 do 17 i od 22 do 23 to zwyczajny kod HTML informujący przeglądarkę o sposobie kodowania strony internetowej(linia 3), adres email do kontaktu 4, opis strony WWW 5, słowa kluczowe 6, autor strony 7, prawa autorskie 8, program użyty do tworzenia tej strony 9 i język strony 10. Tytuł kończy sekcję <head>. Następnie już w części widzialnej strony ciele umieszczono największy nagłówek oraz duży nagłówek. Strona kończy się wymaganym zamknięciem znaczników <body> i <html> W linii 18 pokazano zaprezentowano znacznik otwierający kod PHP odpowiednik <% z ASP. Za nim jest wymagana składnia PHP wszelkie odstępstwa od niej uznane są za błąd. Zakończenie sekcji oznaczona jest w linii 21. UWAGA! Każdy plik będący od początku tylko kodem PHP również musi się zacząć tymi samymi znacznikami początku i końca(<?php i?>). 8
W linii 20 zaprezentowano działanie metody print przyjmującej parametr wyświetlającej go na stronie WWW. W tym wypadku jest to napis. UWAGA! W PHP nie istnieje podział na typ podstawowy(np. int, double, char). Każda zmienna może być dowolnym obiektem, może też typ zmieniać w locie co może być przyczyną późniejszych błędów(nie występuje w PHP po prostu kontrola typu zmiennej). Poniżej zaprezentowano ten sam przykład wyświetlający napis test ale w konwencji kodu HTML zarządzanego przez PHP. Listing pliku nagłówkowego Listing pliku stopki Listing pliku kodu PHP W trzech odsłuchach zaprezentowano podział jednego pliku na ich zbiór. Dzięki takiemu zabiegowi jest możliwe do osiągnięcia wysoka czytelność programu i skuteczność w wyłapywaniu błędów. W Listingu pliku kodu PHP zaprezentowano metodę include_once służącą do dodawania do pliku wywołującego zawartości pliku dodawanego w tym wypadku kodu HTML. Analogicznie jest dodawany inny kod PHP metody czy całe klasy. Poniżej zaprezentowano sposób przesyłu na serwer danych z formularza oraz sposób ich obsługi metodą GET. 9
W linii od 5 do 19 zaprezentowano warunek sprawdzający co za przycisk został kliknięty i odpowiednio podmieniający jego wartość na inną z zera na jeden i na odwrót. Wykorzystano w tym wypadku formularz. Metodą przesyłu danych między formularzem na stronie WWW a serwerem jest metoda GET przesyłająca dane nie zakodowane widoczne na pasku adresu strony WWW:?s_id=2 przesyła parametr s_id o wartości 2. W linii 6 wykorzystano globalną zmienną mówiącą jaki jest adres strony na serwerze $php_self. Wybrane zewnętrzne aplikacje. Praktyczną implementację aplikacji można usprawnić wykorzystując możliwości aplikacji. W kontekście aspektów rozważanych w ramach niniejszego laboratorium można skorzystać z następujących aplikacji: Aplikacje IDE: Micro$oft Notepad notatnik. Podstawowy i często używany sposób do szybkiej edycji i tworzenia kodu PHP. 10
NotePad++ - rozbudowany edytor posiadający między innymi podkreślanie składni(różne kolory ułatwiające odczyt znaczników, metod i klas), posiadający dopełnianie składni danego języka uzależnione jest to od doinstalowanego dodatku nie tylko dla PHP ale też innego języka programowania jak ASP czy ADA. Potrafi zmienić kodowanie pliku co jest czasem przydatne przy edycji plików HTML. Jest lekki (kilka MB) i darmowy. Z powodu uniwersalności może z powodzeniem zastąpić domyślny notatnik systemu Windows. Zend Studio to kombajn do tworzenia ogromnych projektów w PHP. Jest rozbudowany, stabilny i defacto najlepszym środowiskiem do tworzenia oprogramowania w PHP(i tylko w tym języku nie licząc HTML a czy JS). Jest płatny brak wersji darmowej. Jest to odpowiednik VS dla ASP. Eclipse PDT przeprojektowana wersja środowiska Eclipse do projektowania i tworzenia kodu PHP. Posiada wbudowany debuger z środowiska Zend. Pracuje na Linuxie i Windowsie. Jest Darmowy. Samo środowisko Eclipse IDE posiada również zestaw dodatków do tworzenia kodu w PHP, niejako tworzące z niego środowisko PDT. Sam Eclipse PDT jest przeznaczony do projektowania tylko 11
i wyłącznie stron WWW. NetBeans 6.X popularne środowisko posada mocno rozbudowany moduł do obsługi PHP(nie ma podziału jak w Eclipse dlatego jest tylko jeden ale duży pakiet). Posiada tak jak Eclipse wszystkie najważniejsze opcje wsparcia projektowania i implementowania kodu PHP z wyjątkiem debugera posiada swoją systemową wersję. Jest Darmowy. Dwa wyżej wymienione środowiska mogą być używane zamiennie i wybór najczęściej zależy od upodobań własnych użytkownika np. Netbeans ma wszystko na miejscu jest dość minimalistyczny, Eclipse za to jest bardziej cukierkowy i posiada więcej okienek. Netbeans ma mniej dodatków niż Eclipse jednak dodatek w postaci oglądania internetowej TV może być odebrana dwojako. Pakiet instalacyjny to około 250MB(Netbeans) i ~150MB(Eclipse). Oba środowiska wywodzą się ze środowiska Java pracują pod systemem Windows i Linux ale chcąc nie chcąc przenoszą na PHP cześć wielkiej walki o dominacje nad światem ;) Istnieje cała gama edytorów do tworzenia tego typu oprogramowania, znaczna część z niech nie wybija się ponad wymienione ale trzeba za nie płacić. Dla środowiska Linux takich edytorów jest dużo. Poza domyślnym VI i VIM em popularne są też: Quanta Plus, Kate, Bluefish. W zasadzie każdy edytor pod tym środowiskiem sobie z edycją PHP poradzi nawet środowisko K-Develope po doinstalowniu odpowiedniego pluginu. Serwery WWW: XAMPP niemiecki zbiór programów do budowy serwera PHP. Zawiera zarówno sam serwer Apache, jak i bazę danych MySQL a także wiele innych dodatków. Jest to typowy zestaw do budowy 12
serwerów testowania i budowy stron WWW. Jest w pełni darmowy dla platformy Windows i Linux. WAMP analogiczny do XAMPP zestaw oprogramowania tworzący serwer WWW na komputerze bez wiedzy na temat jak funkcjonuje Apache. Jest jednym z popularniejszych serwerów w środowisku twórców WWW. Dysponuje dobrą bazą dodatków do oprogramowania. Jest darmowy. System operacyjny Linux jak mówi słynne powiedzenie Linux is like a wigwam no doors, no Windows and Apache inside praktycznie każda dystrybucja posiada wbudowany już domyślnie ten serwer lub bez najmniejszych problemów można pobrać wymagane pakiety. W zależności od dystrybucji najczęściej jest darmowy. 13