Istnieje wiele technik tworzenia dynamicznych witryn internetowych. Jedna z najpopularniejszych to oczywiście PHP. Sporą popularność zdobyły też Java Server Pages. Coraz częściej wykorzystywane jest również rozwiązanie promowane przez Microsoft – ASP.NET 2.0. Nazwa tej technologii nawiązuje do niezbyt udanego Active Server Pages, ale tak naprawdę to zupełnie nowe rozwiązanie, wchodzące w skład pakietu zarządzanych technologii .NET 3.0.
Projektowanie interaktywnych witryn internetowych
za pomocą ASP.NET 2.0 nie jest proste.
Wymaga od projektanta nie tylko znajomości HTML
i JavaScript, ale również umiejętności programowania
w C# lub Visual Basic. Do tego dochodzi
umiejętność budowania stylów CSS określających
wygląd stron witryny i zapytań SQL pobierających
dane z bazy.
Nie wspominając o korzystaniu z plików
XML, który także jest osobnym językiem.
To w sumie daje sześć języków, którym należy
władać, aby móc swobodnie korzystać z ASP.
NET. W trzyczęściowym minikursie ASP.NET 2.0
postaram się jednak przekonać cię, że dzięki użyciu
odpowiedniego środowiska programistycznego
dość złożone witryny można projektować łatwo
i szybko, używając myszki.
Środowisko pracy
Aby efektywnie projektować witryny z użyciem
technologii ASP.NET 2.0, należy wyposażyć się
w kilka wygodnych narzędzi. Przede wszystkim
musimy zainstalować darmowe środowisko programistyczne
Visual Web Developer 2005 Express
Edition (w skrócie będę nazywał je VWD), a z nim
platformę .NET 2.0 i ewentualnie bazę danych SQL
Server 2005 Express Edition. Wszystkie można
pobrać ze strony http://msdn.microsoft.com/vstudio/
express/downloads/. SQL Server 2005 Express
Edition jest darmowy, ale mimo to jego możliwości
są naprawdę spore, w sumie niewiele mniejsze od
pełnej wersji komercyjnej.
W zasadzie poza VWD nie ma innych środowisk
programistycznych dla ASP.NET 2.0. W szczególności
Borland C#Builder utknął z bardzo \”ciężkim\”
środowiskiem w epoce ASP.NET 1.1. Nie zmienia to
jednak faktu, że VWD jest naprawdę dopracowany.
Proponuję także pobrać z witryny http://ajax.asp.net
dodatek do .NET 2.0 i VWD o nazwie Microsoft ASP.
NET 2.0 AJAX Extension 1.0. Warto również zaopatrzyć
się w bibliotekę komponentów AJAX Control
Toolkit, którą można pobrać ze strony http://www.codeplex.pl (witryna projektów open source Microsoftu).
Jej instalacją zajmiemy się jednak dopiero
w trzeciej i ostatniej części tego minikursu.
Do VWD dołączony jest lekki serwer WWW obsługujący
ASP.NET 2.0. Na komputerze, który pełnić
będzie rolę serwera naszej witryny, konieczna jest
jednak instalacja innego serwera WWW. Może być
nim na przykład wbudowany w system Windows
serwer IIS. Alternatywnym rozwiązaniem jest
wykorzystanie komputera kontrolowanego przez
Linux z zainstalowanym pakietem Mono.
Pomysł na projekt: Web 2.0
Jaką witrynę przygotujemy? Proponuję coś
w stylu Web 2.0 – stronę, która będzie pozwalać
na udostępnianie i swobodną wymianę zdjęć.
Witryna nie będzie wymagać od użytkowników
rejestracji. Każdy będzie mógł uzyskać dostęp
zarówno do strony służącej do wysyłania zdjęć na
serwer, jak i do strony z galerią zdjęć znajdujących
się już na witrynie.
Aby móc opisać taki projekt, mieszcząc
się w trzech krótkich artykułach, będę musiał
wprowadzić nieco uproszczeń. Brak rejestracji jest
pierwszym z nich. To, że witryna będzie się składać
tylko z dwóch stron, jest już kolejnym. A będzie ich
jeszcze kilka. Jednak pomimo tych uproszczeń nasz
projekt zostanie przygotowany tak, aby był gotowy
do rozbudowy. Dlatego wykorzystamy wzorzec
strony, dane o zdjęciach przechowywane będą
w bazie danych, za wygląd witryny odpowiadać
będzie kaskadowy arkusz stylów, a jej działanie
wspierać będą kontrolki AJAX – o tym jednak
w dwóch kolejnych częściach minikursu.
Projekt witryny i wzorzec
Zabierzmy się wreszcie do projektowania
stron witryny. Uruchommy Visual Web Developer.
Jak we wszystkich edytorach, także i tu pracę
rozpoczniemy od rozwinięcia menu File i kliknięcia
pozycji New… – w tym przypadku jest to New Web
Site…. Pojawi się okno widoczne na rysunku 1.
Jeżeli dodatek z AJAX-em został zainstalowany to
w liście dostępnych szablonów jest pozycja ASP.
NET AJAX-Enabled Web Site. I właśnie ten szablon
powinniśmy wybrać. Pozostałe opcje ustalmy tak,
jak widać na rysunku 1. Między innymi na język,
w jakim będziemy pisać kod silnika, proponuję
wybrać C#. Uważnie wybierzmy też katalog,
w którym zapiszemy witrynę. Ja nazwałem go Galeria.
Po tych przygotowaniach możemy wreszcie
kliknąć przycisk OK.
Powstanie nowy projekt. Jego pliki widoczne są
w podoknie Solution Explorer (nr 1 na rysunku 2).
Z lewej strony okna w podoknie Toolbox widoczne
są kontrolki, z jakich możemy zbudować stronę
(nr. 2 na rysunku 2). W centrum znajduje się kod.
aspx (nr 3), na podstawie którego serwer będzie
generował kod strony HTML wysyłany do przeglądarki.
Projekt zawiera pusty katalog App_Data
(w przyszłości umieścimy w nim pliki bazy danych),
plik konfiguracyjny aplikacji Web.config i plik
Default.aspx, który domyślnie wczytywany jest do
edytora. Z nim związany jest osobny plik Default.
aspx.cs przeznaczony na kod C#, w którym należy
umieścić kod silnika witryny.
Proponuję rozpocząć projektowanie od…
usunięcia pliku Default.aspx. Dlaczego? Za chwilę
odtworzymy go ponownie, ale wówczas wykorzystamy
do tego wzorzec – mechanizm ułatwiający
m.in. dbanie o jednolity wygląd stron witryny.
Przejdź zatem do podokna Solution Explorer,
zaznacz plik Default.aspx i naciśnij na klawiaturze
Delete.
Po potwierdzeniu usunięcia pliku należy w oknie projektu zaznaczyć nazwę katalogu witryny i z jego menu kontekstowego wybrać polecenie
Add New Item…. Pojawi się okno ze sporą liczbą
możliwych rodzajów plików (rysunek 3). Zaznacz
pozycję Master Page (strona wzorca).
Koniecznie zaznacz opcję Place code in separate file i postępuj tak
zawsze, gdy tylko się ona pojawi. Dzięki temu kod
C# będzie zawsze oddzielany od plików z szablonami
stron. Na koniec zmień jeszcze nazwę pliku na
Galeria.master i kliknij przycisk Add.
Dodamy w ten
sposób do projektu plik wzorca, którym wyznaczać
będziemy wygląd wszystkich stron naszej witryny.
W edytorze pojawi się kod dodanego pliku. Jednak
edytowanie kodu to niepotrzebna strata czasu,
jeżeli mamy do dyspozycji możliwość projektowania
strony w trybie WYSIWYG. Wystarczy kliknąć przycisk
Design na dole strony, aby przejść do widoku
projektowania. To, co zobaczysz, może nie jest na
razie zbyt imponujące, ale wszystko przed nami.
Racjonalne jądro strony
Aby ożywić zaprojektowaną przed chwilą
stronę, musimy przygotować funkcję uruchamianą
po kliknięciu przycisku Wyślij do Galerii. Kliknijmy
dwukrotnie ów przycisk w widoku projektowania.
Przeniesieni zostaniemy do edytora pliku
Upload.aspx.cs, gdzie VWD utworzyło metodę
Button1_Click. Pierwszy człon jej nazwy pochodzi
od identyfikatora przycisku, drugi od zdarzenia,
z którym metoda będzie związana. Zdarzenie Click
oznacza oczywiście kliknięcie przycisku. Metoda
zostanie więc wykonana (na serwerze) po tym,
gdy internauta kliknie przycisk widoczny na stronie
w przeglądarce. Wewnątrz tej metody musimy
umieścić kod przesyłający plik na serwer i zapisujący
go w odpowiednim katalogu.
W tym miejscu kończy się niestety operowanie
myszką, a zaczyna się praca programisty. Zakładam,
że znasz podstawy programowania w jakimkolwiek
języku. Wówczas kod metody widoczny na listingu 1
powinien być w miarę zrozumiały.
protected void Button1_Click(objectsender, EventArgs e)
{
if (!FileUpload1.HasFile)
{
Label2.Text += \"Brak pliku do przesłania.
\";
return;
}
string data = Math.Abs(DateTime.Now.ToBinary()).ToString();
string adresURL = \"Pliki/\" +data + \"_\" + FileUpload1.FileName;
string sciezkaNaSerwerze = Server.MapPath(\"~/\" + adresURL);
FileUpload1.SaveAs(sciezkaNaSerwerze);
Image1.ToolTip = TextBox1.Text;
Image1.ImageUrl = adresURL;
Image1.Visible = true;
Label1.Text = \"Ostatnio przesłanyplik (\" + FileUpload1.FileName+ \"):\";
Label1.Visible = true;
Label2.Text += \"Dodany plik: \" + TextBox1.
Text + \" (\" + FileUpload1.FileName+ \")
\";
TextBox1.Text = \"\";
}
Działanie metody
rozpoczyna się od sprawdzenia, czy w komponencie
FileUpload został wskazany plik. Pozwala na to
własność HasFile, która zwraca prawdę, gdy plik
jest wybrany, a fałsz w przeciwnym przypadku.
Jeżeli plik nie jest wybrany, w komponencie Label2
umieszczany jest stosowny komunikat (zauważmy,
że można tu używać formatowania HTML) i metoda
kończy działanie. W przeciwnym przypadku definiujemy
dwie zmienne łańcuchowe, które przechowywać
będą ścieżkę do nowego pliku względem
katalogu głównego witryny i bezwzględną ścieżkę
do pliku w systemie plików serwera.
Zwróć uwagę, że do nazwy pliku dołączany jest
zbudowany na podstawie bieżącej daty i godziny
ciąg liczb, który czyni ją unikalną. Dzięki temu
nie musimy martwić się o sprawdzanie, czy plik
o identycznej nazwie istnieje już na serwerze. Wywołanie
metody SaveAs komponentu FileUpload
powoduje przeniesienie pliku na serwer. Następnie
konfigurowane są własności kontrolki Image tak,
aby pokazywała nowe zdjęcie. Na koniec opis zdjęcia
dodawany jest do komponentu Label2, a pole
edycyjne z opisem czyszczone.
Zaraz uruchomimy witrynę. Stwórzmy jeszcze
tylko katalog, do którego będziemy zapisywać
przesłane pliki. W podoknie Solution Explorer
zaznaczmy katalog witryny i z jego menu kontekstowego
wybierzmy polecenie New Folder. Nowy
katalog nazwijmy po prostu Pliki.
Teraz możemy wreszcie uruchomić aplikację
i obejrzeć ją w przeglądarce. W tym celu naciśnijmy
klawisz F5. Przy pierwszym uruchomieniu
pojawia się okno z pytaniem o uruchomienie trybu
debugowania – zgoda na to ułatwi ewentualne
diagnozowanie problemów. Następnie trzeba
chwilę odczekać, ponieważ uruchomienie serwera
zajmuje kilka chwil (tylko przy pierwszym ładowaniu witryny).
Po wyświetleniu strony można zabrać się za jej
testowanie. Przetestujmy przede wszystkim wysyłanie
plików – najpewniejszą oznaką, że wszystko
poszło dobrze, jest przesłane zdjęcie widoczne na
stronie (rysunek 7). Możemy też sprawdzić zawartość
podkatalogu Pliki – powinniśmy tam znaleźć
przesłany plik.
Oczywiście nie trzeba obycia ze sztuką przez
duże S, aby zobaczyć, że nasza strona jest
brzydka. Ale jej estetyką zajmiemy się później
– w całości określimy ją w kaskadowych arkuszach
stylów w trzeciej części minikursu. Już teraz
możemy jednak zadbać o jeden szczegół. W tej
chwili nasza strona nazywa się Untitled Page.
Zmieńmy jej tytuł na \”Wirtualna galeria\”. W tym
celu modyfikujemy znacznik rozpoczynający plik
Upload.aspx na:
<%@ Page Language=\"C#\" MasterPageFile=\"~/Galeria.master\" AutoEventWireup=\"true\" CodeFile=\"Upload.aspx.cs\" Inherits=\"Upload\" Title=\"Wirtualna galeria\" %>
Zwróć uwagę na to, że wybór typu plików, jakie
chcemy publikować, to tylko kwestia drobnych
zmian – możemy np. publikować pliki pdf lub mp3.
Co dalej?
Za nami trudny start. Musieliśmy szybko
przyswoić bardzo dużo informacji, dotyczących
korzystania z nowego środowiska Visual Web
Developer, projektowania stron ASP.NET i nawet
programowania dla platformy .NET. Lecz efekty,
jakie uzyskaliśmy, są więcej niż satysfakcjonujące.
W następnej części kursu wyposażymy witrynę
w bazę danych przechowującą dane o przesłanych
przez internautów zdjęciach. Natomiast w ostatniej
części kursu zadbamy o wygląd witryny. Dodamy
kilka ozdobników utworzonych dzięki użyciu
technologii AJAX i określimy styl stron za pomocą
klas CSS.
Więcej informacji na temat ASP.NET 2.0 oraz
o projektowaniu witryn korzystających z tych technologii znajdziesz w książce \”Technologie ASP.NET i ADO.NET w Visual Web Developer\” (Helion, 2007) przygotowanej m.in. przez autora artykułu.
Jak działa ASP.NET
Żeby wszystko było jasne – internauta, który wejdzie na naszą stronę nie zobaczy żadnego komponentu, w tym także dodanego przed chwilą komponentu
HyperLink. On w miejscu, w którym wstawiliśmy komponent zobaczy zwykłe łącze.
Bo też internauta nie będzie miał dostępu do edytowanych przez nas plików .aspx i plików z kodem C#.
Zasada działania ASP.NET jest w tym względzie
podobna do JSP czy PHP. Serwer WWW na podstawie kodu umieszczonego w pliku .aspx
wygeneruje \”zwykły\” kod HTML, który wyśle do przeglądarki. Ten sam serwer z pomocą
uruchomionej na nim aplikacji ASP.NET będzie również obsługiwał żądania, które wysyłać
będzie przeglądarka np. po kliknięciu przycisku znajdującego się na stronie. Wówczas wygeneruje i odeśle nowy kod HTML.
W ten sposób po
stronie klienta nie jest konieczna nawet obecność platformy .NET – jedynie sprawnie działająca przeglądarka WWW.
Na stronie wzorca umieszczony jest komponent
ContentPlaceHolder, którego zadaniem jest,
mówiąc oględnie, rezerwowanie miejsca. Każda
strona korzystająca z wzorca będzie przejmowała
całą jego zawartość (na razie pustą, ale już za
chwilę ją wypełnimy), a swoim indywidualnym
kodem będzie wypełniać miejsca wyznaczone we
wzorcu właśnie przez komponent ContentPlace-Holder. Domyślnie na wzorcu jest tylko jeden taki
komponent, i przy tym zostaniemy, co oznacza, że
możemy wstawić jakiś tekst nad nim i pod nim,
tworząc w ten sposób nagłówek i stopkę wszystkich
stron witryny.
Zauważ, że w widoku projektowania możemy
na stronie pisać tak jak w edytorze tekstu.
Widoczny jest w nim kursor edycji wyznaczający
miejsce, w którym możemy wstawiać tekst lub
kontrolkę z podokna Toolbox. Proponuję ustawić
kursor przed komponentem rezerwującym miejsce
i naciskając kilkakrotnie Enter, zrobić miejsce na
nagłówek. Wpiszmy tam nazwę witryny, ja użyłem
\”Wirtualna Galeria\”, i jej hasło reklamowe, nie dbając
na razie o ich formatowanie – tym zajmiemy się
później (rysunek 4).
W podobny sposób zaprojektujmy stopkę. Tym
razem użyjmy komponentu HyperLink do utworzenia
hiperłącza: zaznaczmy miejsce, w którym ma
się znaleźć łącze i kliknijmy dwukrotnie pozycję
komponentu HyperLink na zakładce Standard podokna
Toolbox. W wyznaczonym miejscu pojawi się
kontrolka otoczona ramką oznaczającą, że obiekt
ten jest w tej chwili zaznaczony. A to oznacza, że
jego własności widoczne są w podoknie znajdującym
się w prawym dolnym rogu okna VWD (rysunek
4). Nazywa się Properties i służy do konfigurowania
umieszczonych na stronie komponentów.
Pośród własności komponent HyperLink najważniejsze są trzy z nich: NavigateUrl, Text
i ImageUrl. Pierwsza powinna zawierać łańcuch
adresu URL, który ma być wywołany po kliknięciu
komponentu. Wpiszmy w tym miejscu nasz adres
e-mail np. mailto:biuro@wg.pl. Własności Text
i ImageUrl są alternatywne. W pierwszej można
wskazać napis, jaki pojawi się w przeglądarce.
W drugiej można natomiast podać adres URL pliku
z obrazem. Wybierzmy tę pierwszą możliwość
i wpiszmy do pola przy własności Text adres e-mail
bez protokołu, a więc biuro@wg.pl.
Co nam daje użycie komponentu? Po pierwsze,
tak jest wygodniej. Po drugie, i to pewnie jest
powód ważniejszy, użycie komponentów daje nam
możliwość zmiany ich własności już po uruchomieniu
aplikacji. W kodzie C# można się odwoływać
do komponentów jak do zwykłych obiektów, tj.
uruchamiać ich metody, ukrywać i niemal dowolnie
modyfikować ich własności. Tego samego nie zrobi
się ze zwykłymi elementami HTML, a przecież to ta
możliwość powoduje, że witrynę można nazwać
dynamiczną.
Strona do wysyłania plików
Dysponując wzorcem, możemy przejść do
tworzenia stron naszej witryny. Zaczniemy od
strony pozwalającej na upload zdjęć na serwer.
Przy jej projektowaniu będziemy unikać wszelkich
ozdobników – wygląd strony w całości będziemy
kontrolować z kaskadowych arkuszy stylów
umieszczonych w osobnym pliku (ale tym zajmiemy
się dopiero w trzeciej części kursu).
Z menu File wybieramy pozycję New File….
Ponownie pojawi się okno z rysunku 3. Tym razem
wybieramy pozycję Web Form. Przed kliknięciem
przycisku Add zaznaczmy także dwie opcje: Place
code in separate file i Select master page. Ta druga
pozwoli wskazać wzorzec tworzonej strony. Nowy
plik nazwijmy Upload.aspx. W kolejnym oknie
wybieramy wzorzec. Oczywiście wskazujemy utworzony
przed chwilą plik Galeria.master.
Po utworzeniu nowego pliku przejdźmy do
widoku projektowania. Może się nam wydać, że
zobaczyliśmy nasz wzorzec, ale to nie on, tylko
jego cień. Ta część, w której umieściliśmy tytuł strony
i która pełni rolę nagłówka oraz stopka z łączem
są teraz niedostępne do edycji (rysunek 5). Możemy
natomiast wypełnić miejsce zarezerwowane
na wzorcu przez komponent ContentPlaceHolder.
Ustawmy kursor wewnątrz tego miejsca i wstawmy
tam komponent FileUpload. Znajdziemy go w podoknie
Toolbox na zakładce Standard. Składa się on
z dwóch elementów – pola tekstowego i przycisku.
Niestety twórcy tego komponentu nie wzięli pod
uwagę, że są na Ziemi ludzie, którzy posługują się
innym językiem niż amerykański. Wobec tego nie
zawadzi umieścić nad nim opisu w stylu \”Wybierz
plik, który chcesz przesłać do galerii:\”.
Zadaniem umieszczonego przed chwilą na
stronie komponentu jest pomoc w wybraniu pliku,
który chcemy przesłać. Udostępnia on też metody,
które to przesłanie realizują. Musimy jednak do
formularza dodać jeszcze jeden przycisk, którym
będziemy inicjować zasadnicze przesyłanie pliku
na serwer. Użyjmy do tego komponentu Button.
Za pomocą podokna Properties jego własność Text
odpowiadającą za etykietę zmieńmy na Wyślij do
galerii. Dodajmy również pole edycyjne (komponent
TextBox), w którym internauta powinien
umieścić opis zdjęcia oraz rozwijaną listę kategorii
zdjęć, tj. komponent DropDownList.
Ten ostatni komponent posiada własność Items
z wygodnym edytorem (rysunek 6), w którym
dodajemy pozycje, definiując nie tylko nazwę
kategorii (własność Text), ale również jej numer
(własność Value).
To tę drugą zapiszemy do bazy
danych. Pod tymi komponentami umieśćmy komponenty
Image (obraz) i Label (etykieta), na których
zaprezentujemy ostatnio wysłany plik oraz jeszcze
jeden komponent Label, którego użyjemy jako listy komunikatów i błędów. Z początku komponent
Image nie będzie miał czego pokazywać, więc go
ukryjmy, ustalając jego własność Visible (widzialny)
na False. Tu szerokość tego komponentu ustalmy
na 300 pikseli, natomiast w dołączonych na CD
źródłach rozmiar podglądu ustalany jest na podstawie
wielkości przesłanego pliku.
I na tym właśnie polega projektowanie stron
w VWD. Zwróć uwagę na to, że przygotowaliśmy
dość rozbudowany formularz, nie wpisując nawet
jednego znacznika HTML ręcznie – wszystko
wykonaliśmy myszką, korzystając z kontrolek
i okna własności. To jest właśnie \”projektowanie
wizualne\” w wydaniu Microsoft.
