Laboratorium z przedmiotu Aplikacje WWW

Aplikacje WWW
Laboratorium z przedmiotu Aplikacje WWW - zestaw 03
Cel zajęć. Zapoznanie z przeznaczeniem i sposobami obsługi kontrolek zaawansowanych w aplikacjach WWW.
Wprowadzenie teoretyczne. Rozważana w ramach niniejszych zajęć tematyka stanowi wprowadzenie do
wykorzystania zaawansowanych kontrolek w tworzeniu aplikacji WWW 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: MultiView i View, Wizard, FileUpload, AdRotator, Calendar.
1.
Kontrolka MultiView i View
Funkcjonują razem, tworząc serie nawigacyjnych sekcji strony. Czasami trzeba podzielić stronę internetową
na oddzielne fragmenty z zapewnieniem łatwej nawigacji między nimi, przy czym w danym momencie jest
wyświetlany tylko jeden fragment. Kontrolka MultiView posiada cztery właściwości – w celu
zautomatyzowania nawigacji między widokami.
Atrybuty CommandName kontrolki MultiView:
NextViewCommandName
NextView
Udostępnia następny widok z wyższą
wartością
ActiveViewIndex.
Jeżeli
wyświetlany jest ostatni widok, wówczas
ActiveViewIndex zostanie ustawiony jako
-1 i nic nie zostanie wyświetlone.
PreviousViewCommnadName
PrevView
Udostępnia następny widok z niższą
wartością
ActiveViewIndex.
Jeżeli
wyświetlany jest pierwszy widok,
wówczas
ActiveViewIndex
zostanie
ustawiony jako -1 i nic nie zostanie
wyświetlone.
SwitchViewByIDCommandName
SwitchViewByID
Udostępnia obiekt View o podanym
identyfikatorze ID. Aby określić ID
można użyć atrybutu CommandArgument.
SwitchViewByIndexCommnadName
SwitchViewByIndex
Udostępnia obiekt View o podanym
indeksie. Aby określić indeks można
użyć atrybutu CommandArgument.
Np. kontrolki Buton, ImageButton, LinkButton z atrybutami CommandNameNextView, po kliknięciu przycisku
będą automatycznie przenosiły kontrolkę MultiView do kolejnego obiektu View. Odbędzie się to bez
potrzeby pisania dodatkowego kodu(nie trzeba ręcznie opisywać zdarzenia Click). Kontrolka MultiView jest
„pojemnikiem” na kontrolki View, nie posiada przez to możliwości ustawienia stylu. Kontrolka View ma
właściwość Visible, która to(true/false) ustala czy dany komponent ma być widoczne.
2.
Kontrolka Wizard
Tworzy podobny zestaw okien dialogowych stosowanych do przeprowadzenia użytkownika poprzez łatwy
do zrozumienia zbiór kroków, realizujących pewne zadanie. Podobnie jak kontrolka MultiView również
Wizard składa się ze zbioru obiektów, tym razem to WizardStep. Pochodzi od klasy View. Wszystkie
kontrolki w wszystkich użytych WizardStep są częścią hierarchii kontrolek na stronie, oznacza to że przez
kod dostępne SA one podczas działania programu, bez względu na to który WizardStep jest wyświetlany
aktualnie. Nie jest obsługiwany mechanizm cross-page posting. Kontrolka Wizzard posiada wiele właściwości
dotyczących jej wyglądu i zachowania. Poniżej przedstawione zostały najważniejsze elementy:
ActiveStep
Aktualnie wyświetlany krok ze zbioru WizardStep.
CancelDestinationPageUrl
Adres URL, który zostanie wywołany po kliknięciu
przycisku Anuluj.
CellSpacing
Liczba pikseli między komórkami. Domyślnie jest 0
1
Aplikacje WWW
FinishDestinationPageUrl
Adres URL, który zostanie wywołany po kliknięciu
na przycisk Zakończ.
SkipLinkText
Wygenerowana
jako
alternatywny
tekst
niewidocznych
elementów
graficznych
do
współpracy z technologiami wspomagającymi.
Domyślnie „Pomiń nawigację” zlokalizowane dla
serwera lokalnego.
StepStyle
Właściwości stylów dla obiektów WizardStep.
Ponad to, właściwości kontrolki powiązane z przyciskami można podzielić na te opisujące adres obiektu
graficznego przypisanego do danego przycisku – kończące się na ImageUrl – np. CancelButtonImageUrl lub
StartStepButtonImageUrl. Właściwości opisujące style kończą się na Style – np. CancelButtonStyle,
StartStepButtonStyle, teks wyświetlany na przycisku to końcówka Text – np. CancelButtonText,
StartStepButtonText oraz typ wygenerowanego przycisku(Button, Image, Link) kończą się na Type – np.
CancelButtonType lub StartStepButtonType.
Zdarzenia kontrolki Wizard:
3.
ActiveStepChanged
Wywołania po wyświetleniu nowego kroku.
CancelButtonClick
Wywołanie po kliknięciu przycisku Anuluj.
NextButtonClick
Wywołanie po kliknięciu na przycisk Dalej.
SideBarButtonClick
Wywołanie po kliknięciu na przycisku paska
bocznego.
Kontrolka FileUpload
Dostarcza przeglądarkę plików umożliwiającą wskazanie pliku przeznaczonego do przekazania do serwera
oraz infrastrukturę obsługującą te zadania. Kontrolka dziedziczy po klasie WebControl. Kontrolka dzięki
przyciskowi „Przeglądaj” oraz polu tekstowemu do wpisania nazwy pliku znacznie ułatwia przeglądanie
i zaznaczanie plików do wysłania.
Właściwości kontrolki FileUpload:
FileContent
Zwraca obiekt Stream, który wskazuje na plik
przeznaczony do przekazania do serwera.
FileName
Zwraca nazwę przekazywanego pliku bez żadnych
szczegółowych informacji.
HasFile
Jeżeli przyjmie wartość true, to kontrolka posiada
odniesienie do pliku przeznaczonego do przekazania
do serwera.
PostedFile
Zwraca odniesienie do pliku, który został
przekazany do serwera. Posiada właściwości tylko
do odczytu(tabela niżej).
Właściwości HttpPostedFile:
ContentLenght
Zwraca podaną w bajtach wielkość przekazanego
pliku.
2
Aplikacje WWW
4.
ContentType
Zwraca typ MIME przekazanego pliku.
FileName
Zwraca pełną nazwę pliku na komputerze klienta.
InputStream
Zwraca obiekt
przekazany plik.
Stream,
który
wskazuje
na
Kontrolka AdRotator
Kontrolka prezentuje losowo wybrany element graficzny z listy przy każdym wczytaniu strony. Najczęściej
jest wykorzystywana do wyświetlania przeróżnych reklam na stronie WWW. Zadaniem kontrolki jest
wyświetlenie pliku graficznego, losowo wybranego z listy przechowywanej w oddzielnym pliku XML, lub
jako dołączone źródło danych. Dziedziczy po WebControl, ale posiada kilka swoich właściwości:
AdvertisementFile
Ścieżka do pliku XML zawierającego listę reklam
i ich atrybuty.
AlternativeTextField
Nazwa elementu z pliku Advertisement lub pola
danych, w którym jest przechowywany alternatywny
teks. Domyślnie: AlternateText.
DataSource
Obiekt z którego kontrolka będzie pobierać dane.
ImageUrlField
Nazwa elementu z pliku Advertisement lub
pojadanych, w którym jest przechowywany adres
URL pliku. Domyślnie ImageUrl.
Target
To okno przeglądarki, ramka, w której wyświetlona
zostanie zawartość powiązanej strony po kliknięciu
kontrolki AdRotator.
AdCreated
Zdarzenie występują raz, w czasie po utworzeniu na
serwerze kontrolki, ale przed wyświetleniem na
ekranie.
Plik advertisement jest plikiem XML. Zawiera on informacje o reklamach(obrazach) wyświetlanych przez
kontrolkę AdRotator. Jego położenie oraz nazwa jest określone poprzez wartość AdvertisementFile kontrolki.
Znaczniki XML w pliku advertisement:
Advertisement
Obejmuje cały plik XML.
Ad
Odgradza każdą reklamę.
ImageUrl
Adres URL pliku przeznaczonego do wyświetlania.
Jest wymagany.
NavigateUrl
Adres URL strony, która zostanie uruchomiona po
kliknięciu kontrolki(danego obrazu).
AlternateText
Teks, który zastąpi obrazek w razie jego nie
odczytania.
Keyworld
Kategoria reklamy. Dzięki ustawieniu jego, oraz
właściwości KeyworldFilter może zostać również użyty
do filtrowania wyświetlanych reklam.
3
Aplikacje WWW
Impressions
5.
Wartość mówiąca jak często jest wyświetlana dana
reklama względem innych reklam zawartych w pliku.
Kontrolka Calendar
W pełni wyposażona kontrolka do wyświetlania i wybierania dat. Jej zadanie to: wyświetlenie kalendarza
oraz prezentację dnia, miesiąca i aktualnego roku. Użytkownik może zaznaczyć dzień, tydzień, miesiąc.
Może też zaznaczyć zakres dni.
Właściwości kontrolki Calendar:
Caption
Ciąg zanków…
Tekst, który zostanie wyświetlony na
stronie nad kalendarzem.
CellPadding
1,2,3…
Podana w pikselach odległość między
krawędzią
a zawartością
komórki.
Domyślnie 2.
DayNameFormat
Full, Short, FirstLetter,
FirstTwoLetters
Format dni tygodnia. Short to pierwsze
trzy litery nazwy dnia. Domyślnie Short.
FirstDayOfWeek
Default, Sudany, Monady…
Dzień
tygodnia,
który
zostanie
wyświetlony w pierwszej kolumnie.
Wartość domyślną(Default) określającą
ustawienia w systemie operacyjnym.
NextMonthText
Ciąg znaków…
Teks wyświetlający nawigację do
kolejnego miesiąca. Wartość domyślna
to %gt;(to znak >). Opcja ma
zastosowanie jedynie wtedy, gdy
właściwość ShowNextPrevMonth jest
ustawiona na true.
NextPrevFormat
CustomText, FullMonth,
ShortMonth
Przy użyciu CustomText należy podać
rzeczywisty teks do wykorzystania dla
opcji NextMonthText i PrevMonthText.
SelectedDate
DataTime
Pojedyncza zaznaczona data. Nie
przechowuje czasu(jak SelectedDates).
SelectedDates
DataTime[]
Zbiór
obiektów
DataTime
po
zaznaczeniu wielu dat. Przechowywana
jest jedynie data – czas jest ustawiony na
null.
SelectMonthText
Ciąg znaków…
Tekst przeznaczony dla elementu
wyboru miesiąca w kolumnie wyboru.
Wartość domyślna(>>) generuje
>>. Opcja ma zastosowanie tylko dla
ustawionej opcji SelectionMode na
DayWeekMonth.
ShowDayHeader
true/false
Dni tygodnia zostaną przedstawione
jako nagłówki(wartość true, domyślna).
ShowTitle
true/false
Czy zostanie wyświetlony tytuł. Jeżeli
jest false to elementy nawigacyjne do
poprzedniego i następnego miesiąca
zostają ukryte, domyślnie true.
UserAccessibleHeader
true/false
Wskazuje, czy zostanie użyty nagłówek
dla technologii wspomagających.
Gdy użytkownik ma zaznaczyć(lub chce to zrobić) pojedynczy dzień, całego tygodnia a nawet miesiąca,
należy ustawić własność SelectMode. Jej wartości przedstawia tabela:
4
Aplikacje WWW
Day
Pozwala na zaznaczenie pojedynczego dnia –
domyślna wartość.
DayWeek
Pozwala na zaznaczenie pojedynczego dnia lub
całego tygodnia.
DayWeekMonth
Pozwala na zaznaczenie pojedynczego dnia, całego
tygodnia lub całego miesiąca.
None
Nie można nic zaznaczyć.
Jeżeli chcemy wpłynąć na wygląd kalendarza – zmienić jego wygląd należy posłużyć się stylami i tak
TableItemStyle reguluje jak ma wyglądać każda część kontrolki Calendar, jeżeli chcemy bardziej dokładnie
wpłynąć na wygląd możemy skorzystać z własności: DayHeaderStyle, DayStyle, NextPrevStyle itp. – wszystkie
własności kończące się na Style.
Jeżeli chcemy pokazać lub ukryć pewne własności kalendarza – np. nazwy, możemy je wyświetlić lub
zakazać ich pokazywaniu. Do tego celu służą właściwości kończące się na Show. Własność ShowDayHeader
ustawiona na true(domyślnie) wyświetla nazwy dni tygodnia. ShowGirdLines (domyślnie false) pokazuje lub nie
linie siatki między dniami miesiąca.
Kolejną rzeczą jaka jest podstawowa dla kontrolki Calendar to konwersja daty otrzymanej do postaci
znakowej, którą to postać możemy później odpowiednio wykorzystać/przetworzyć. Do tego celu służą
następujące metody:
ToFileName
Konwertuje do formatu lokalnego systemu plików.
ToLongDateString
Konwertuje do ciągu znaków długiego zapisu daty.
ToLongTimeString
Konwertuje do ciągu znaków długiego zapisu czasu.
ToShortTimeString
Konwertuje do ciągu znaków krótkiego zapisu daty.
ToString
Konwertuje do postaci ciągu znaków.
oraz prezentację dnia, miesiąca i aktualnego roku. Użytkownik może zaznaczyć dzień, tydzień, miesiąc.
Może też zaznaczyć zakres dni.
Zadanie 1. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami:

Aplikacja ma stanowić formularz, w którym użytkownik ma podać imię, nazwisko, adres e-mail oraz datę
urodzenia.

Aplikacja ma umożliwiać wybór daty urodzenia z kontrolki typu Calendar.

Kontrolka typu Calendar ma posiadać oznaczoną dzisiejszą datę.

Dni z poprzedniego i następnego miesiąca kontrolki typu Calendar mają być oznaczone innym kolorem.

Po podaniu wymaganych danych aplikacja ma przedstawić podsumowanie z prośbą o potwierdzenie
poprawności danych.

Aplikacja ma zostać zbudowana w oparciu o kontrolkę typu MultiView.
Aby zrealizować zadanie należy wykonać następujące kroki:
5
Aplikacje WWW

Proszę w swoim katalogu utworzyć projekt o nazwie „Zadanie 3.1”.
UWAGA! Przy dodawaniu do strony kolejnych kontrolek proszę o używanie unikalnych ID kontrolek
o nazwie związanej z ich przeznaczeniem, np. „buttonDalej”.

Proszę o dodanie do strony następującego kodu:
Po wykonaniu tej operacji strona w widoku Design powinna wyglądać następująco:

Następnie proszę o dodanie dostosowanie widoku „View1” do schematu przedstawionego na poniższym
rysunku. W tym celu proszę o umieszczenie w nim kontrolek typu Label, TextBox, Button i Calendar
Aby w kontrolce typu Calendar podświetlić aktualną datę, należy zmienić wartość właściwości TodayDayStyle >
BackColor.
Aby dni poprzedniego i następnego miesiąca były wyświetlane za pomocą innego koloru, należy zmienić
wartość właściwości OtherMonthDayStyle > ForeColor.

Po wykonaniu czynności z powyższego podpunktu proszę o przypisanie właściwości ActiveViewIndex
kontrolki typu MultiView wartości „0”. Spowoduje to domyślne wyświetlenie widoku „View1” posiadającego
indeks „0” po uruchomieniu strony.
6
Aplikacje WWW

Następnie proszę o implementację obsługi zdarzenia SelectionChanged kontrolki typu Calendar. Jego wystąpienie
ma powodować przypisanie wartości zaznaczonej daty do odpowiedniej kontrolki typu TextBox.
Podpowiedź: należy użyć konstrukcji metody ToShortDateString właściwości SelectedDate.

Następnie proszę o implementację obsługi zdarzenia wywołanego kliknięciem przycisku „Dalej”. Naciśnięcie
przycisku ma powodować zmianę widoku na „View2”, o ile wszystkie pola typu TextBox zostały wypełnione.
W przeciwnym wypadku ma pojawić się komunikat o braku wypełnienia odpowiedniego pola. Widok
„View2” ma zawierać informację o podanych danych, co przedstawia poniższy rysunek (proszę o jego
dostosowanie, aby był zgodny z rysunkiem):

Po wykonaniu powyższej czynności proszę o implementację obsługi zdarzeń wywołanych kliknięciem
przycisków w widoku „View2”. Naciśnięcie przycisku „Wstecz” ma powodować przejście do widoku
„View1”. Naciśnięcie przycisku „Dalej” ma powodować przejście do widoku „View3”, o ile poprawność
danych została potwierdzona. W przeciwnym razie ma zostać wyświetlony komunikat z prośbą o podanie
poprawnych danych.

Wszystkie komunikaty powinny posiadać wartość „False” przy właściwości EnableViewState. Ma to na celu
„wyczyszczenie” wartości komunikatu po przejściu między widokami.

Widok „View3” powinien zawierać informację, iż dane zostały poprawnie potwierdzone.
Przy ocenie zadania główny nacisk będzie kładziony na:

Wykonanie wszystkich założeń ujętych w treści zadania.

Prawidłowe nazewnictwo obiektów kontrolek.

Rozmieszczenie kontrolek na stronie (użycie CSS).

Implementację obsługi zdarzeń wywołanych naciśnięciem kontrolek typu Button.
7
Aplikacje WWW
Zadanie 2. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami:

Aplikacja ma umożliwiać upload plików do katalogu „reklamy”.

Wysyłane pliki mają spełniać następujące kryteria:

muszą posiadać rozszerzenie JPG, GIF lub PNG

muszą być nie większe niż 100 KB

jeśli w katalogu docelowym znajduje się plik o tej samej nazwie, plik nie może zostać
wysłany

Aplikacja za pomocą kontrolki AdRotator ma wyświetlać treści reklamowe z katalogu „reklamy”.

Po wysłaniu obrazu do katalogu „reklamy” aplikacja ma dodawać wpis do odpowiedniego pliku XML, w celu
umożliwienia wyświetlenia w kontrolce AdRotator nowo dodanego obrazu (parametry NavigateUrl,
AlternateText, Keyworld, Impressions za każdym razem mają być określone przez użytkownika).
Aby zrealizować zadanie należy wykonać następujące kroki:

Proszę w swoim katalogu utworzyć projekt o nazwie „Zadanie 3.2”.
UWAGA! Przy dodawaniu do strony kolejnych kontrolek proszę o używanie unikalnych ID kontrolek
o nazwie związanej z ich przeznaczeniem, np. „buttonWyslijPlik”.

Proszę o dodanie do projektu katalogu o nazwie „reklamy”.

Następnie proszę o umieszczenie na stronie kontrolki typu FileUpload oraz kontrolki typu Button, której
naciśnięcie powodować będzie próbę wysłania pliku do katalogu „reklamy”.

Po wykonaniu powyższej czynności proszę o obsługę zdarzenia OnClick dodanego przycisku.
Podpowiedzi:


Na początku należy sprawdzić, czy kontrolka FileUpload zawiera plik (właściwość HasFile)

Właściwości wysyłanego pliku są zawarte we właściwości PostedFile kontrolki typu FileUpload

Akceptowane typy wysyłanego pliku to: „image/jpg”, „image/gif”, „image/png”

Zapis pliku w katalogu docelowym dokonywany jest za pomocą metody SaveAs kontrolki typu
FileUpload (funkcja ta przyjmuje jako parametr ścieżkę bezwzględną, dlatego do mapowania ścieżki
należy użyć funkcji Server.MapPath)

Przykładowe sprawdzenie, czy dany plik istnieje w określonym katalogu:
Następnie proszę o upload dołączonych do zadania plików „KIK.jpg” oraz „PCz.jpg”.
8
Aplikacje WWW

Po wykonaniu tej operacji proszę o dodanie do projektu pliku typu XML, nadanie mu nazwy „reklamy.xml”
oraz o umieszczenie w nim następującej treści:

Następnie proszę o umieszczenie na stronie kontrolki typu AdRotator oraz o zmianę wartości jej parametru
AdvertismentFile na „~/reklamy.xml”. Po uruchomieniu strony internetowej i jej każdorazowym odświeżeniu,
kontrolka typu AdRotator wyświetli losowo wybraną reklamę.

Po wykonaniu powyższej czynności proszę o implementację metody, umożliwiającej dodanie do pliku
„reklamy.XML” nowego wpisu z parametrami nowej reklamy:

Następnie proszę o umieszczenie na stronie kontrolki typu Panel. Kolejnym krokiem zadania będzie
dynamiczne dodanie do kontrolki typu Panel czterech kontrolek typu Label i TextBox. W tym celu proszę
o implementację metody DodajKontrolki
9
Aplikacje WWW


Enum.GetName(typeof(nazwy),i) – zwraca wartość łańcuchową typu wyliczeniowego
„nazwy”, którego wartość przekazano za pomocą zmiennej „i”.

panelInput.Controls.Add(label) – dodaje dynamicznie do kolekcji kontrolek panelu
„panelInput” kontrolkę „label”
Następnie proszę o wywołanie metody DodajKontrolki w ciele metody Page_Load:
Po wykonaniu powyższych operacji i uruchomieniu strony internetowej, powinna ona wyglądać następująco:

Następnie proszę o implementację metody DodajWpisReklamy, która ma zostać wywołana po udanym
wysłaniu pliku na serwer. Metoda ta ma dodawać wpis do pliku „reklamy.xml” zgodnie z wartościami pól
typu TextBox podanymi przez użytkownika.
Podpowiedź:

Aby uzyskać dostęp do kontrolki tworzonej dynamicznie, należy skorzystać z funkcji
FindControl
10
Aplikacje WWW

Przed wysłaniem pliku na serwer i dodaniem wpisu do pliku XML należy sprawdzić, czy
użytkownik uzupełnił wszystkie pola typu TextBox
Przy ocenie zadania główny nacisk będzie kładziony na:

Wykonanie wszystkich założeń ujętych w treści zadania.

Prawidłowe nazewnictwo obiektów kontrolek.

Rozmieszczenie kontrolek na stronie (użycie CSS).

Sposób implementacji metody powodującej upload pliku.

Sposób implementacji metody FindControl.
Zadanie do domu. Proszę zrealizować aplikację WWW, która powinna odznaczać się następującymi cechami:

Aplikacja ta ma stanowić modyfikację aplikacji z zadania pierwszego.

Wszystkie kontrolki typu Label i TextBox mają być tworzone dynamicznie (jak w zadaniu drugim).

Dodatkowo aplikacja ma zawierać opcję wyboru wykształcenia użytkownika spośród następujących:
podstawowe, zawodowe, średnie, wyższe.
Zagadnienia, które należy uznać za przyswojone w trakcie zajęć. Po zajęciach będzie obowiązywać praktyczna
znajomość:

Znajomość zaawansowanych kontrolek ASP.NET: MultiView, View, Wizard, AdRotator, Calendar.

Znajomość dynamicznego dodawania kontrolek.

Znajomość operacji na typach wyliczeniowych.
Zagadnienia do samodzielnego zgłębienia dla dociekliwych. Osoby zainteresowane mogą dodatkowo
zapoznać się z następującymi tematami:

Kontrolki walidacyjne i wyrażenia regularne.
Zagadnienia do powtórzenia na następne zajęcia. Przed kolejnymi zajęciami należy powtórzyć następujące
zagadnienia:

Klasa Page

Sposoby przejścia na inną stronę:

Kontrolka HyperLink.

Metoda Server.Transfer.

Metoda Response.Redirect.

Mechanizm Cross-Page-Posting.

Stan sesji, widoku, stan aplikacji.
11
Aplikacje WWW
Wybrane aspekty dotyczące implementacji z wykorzystaniem języka PHP. Przykładem jaki zostanie
zaprezentowany w wykonaniu języka PHP to część zadania drugiego. Niżej przedstawiono kod obsługi przesyłu
pliku na serwer.

W linii od 13 do 26 zaprezentowany jest kod wyglądu strony PHP. W tym przykładzie ograniczono się do
prezentacji przesyłu pliku, ponieważ dodanie opisu jest analogiczne jak w przykładzie z poprzednich zajęć.
Główną częścią jest formularz w którym wykonujemy przesył danych do tej samej strony – odpowiednia
informacja jest konieczna, żeby PHP wiedział, że do czynienia z ciągłymi danymi tworzącymi jakiś zbiór enctype="multipart/form-data"

W linii 21 w polu ukrytym ograniczamy rozmiar ciągu danych jaki zostanie przesłany do 10MB – w tym
wypadku. W przeważającej liczbie dostępnych serwerów taka rzecz jest nie możliwa – średnio po parę MB(nie
wchodzą w to serwery Ala RapidShare). Ostatnie linijki ustalają nazwę „pliku” oraz jego odpowiednia
kontrolka w HTML – type=”file”.

Odnosząc się do kodu PHP w liniach od 2 do 12, w linii 2 ustalamy gdzie ma być umieszczony przesłany ciąg
danych; w lini następnej tworzymy nazwę tworu jaki zostanie utworzony – ścieżka plus jego nazwa. Tutaj
można łatwo zauważyć, że jeżeli dany plik nie może zostać umiejscowiony na serwerze – sprawdzamy jego
koniec – rozszerzenie – używając funkcji z poprzednich zajęć. Tak serwer nie daje do umieszczenia plików
np. .mp3.

Ostatnią i najważniejszą rzeczą jest umieszczenie danych w utworzonym wcześniej miejscu – jest to funkcja
move_uploaded_file(lokacja tymczasowego pliku, lokacja docelowego pliku). Funkcja zwraca true jeżeli operacja się
powiedzie, jeżeli nie skrypt zwraca błąd.
Ważną jeżeli nie najważniejszą rzeczą w PHP jest możliwość tworzenia w pełni obiektowych skryptów. Od wersji 5.0
PHP wspiera i z biegiem czasu będzie wymuszać właśnie taki sposób programowania. Zmusza to programistę to
zastanowienia się czego potrzebuje i jak ma wyglądać konstrukcja samej strony, dopiero potem tworzy ją samą.
Zapobiega to tworzeniu stron WWW nie czytelnych w debugowaniu oraz nadzorowaniu(dalszym rozwoju). Poniżej
został zaprezentowany fragment kodu prezentującego podstawowe możliwości tego języka.
12
Aplikacje WWW

Listing ten prezentuje kod dwóch klas – klasy TextBox oraz jej dziecka klasy TextBoxEx. Jak można się łatwo
domyśleć PHP również posiada możliwość dziedziczenia – tak jak w językach C# i Java jednokrotnego.

W linii 2 do 16 zdefiniowano klasę TextBox. Jest to bardzo uboga i prosta klasa mająca jedno pole
przechowujące napis – linia 4. Konstruktor przyjmuje parametr który przypisuje temu właśnie polu.

W linii 12 klasa otrzymała jedną metodę wyświetlającą na ekranie tabelę z napisem.

W liniach 18 i 19 najpierw zostaje utworzony nowy obiekt klasy TextBox, następnie wywołujemy jego metodę
display z wcześniej zadanym parametrem.

Domyślny konstruktor musi zostać zdefiniowany – np. bez parametrów.

Destruktor również jest – function __destructor(){…} – często jest on wykorzystywany to ostatecznego
rozłączania się z bazą danych.

W liniach 23 do 38 zdefiniowano klasę dziedziczącą po TextBox, mianowicie TextBoxEx – posiadającą jedno
pole więcej – grubość ramki, oraz nową metodę display().
13
Aplikacje WWW

Proszę zwrócić uwagę na linię 35. W niej to zaprezentowano jak można wywołać metodę klasy bazowej. Jest
to uniwersalny sposób – zarówno dla zwykłych metod jak i konstruktorów czy desktuktorów wygląda to tak
samo.

W liniach 40 i 41 odpowiednio tworzymy i wywołujemy nowy przycisk.
Zaawansowaną kontrolką – jeżeli można tak to określić jest programowanie po stronie klienta. Odciąża to serwer
z natłoku informacji jakie przychodzą z żądaniami od klientów, dzięki temu strony WWW mogą być bardziej
elastyczne na zaistniałe zdarzenia. Flagowym przykładem jest sprawdzanie poprawności formularza przy rejestracji,
czy tworzenie dynamicznego animowanego menu strony. PHP nie potrafi tego robić – on działa po stronie serwera.
Narzędziem a raczej językiem z jakim przyjdzie się w tym przykładzie poznać to – JavaScript.
Pierwszy przykład w tym języku nie jest rozbudowany i stosunkowo prosty. Stworzony zostaje mianowicie prosty
banner reklamowy, który jest animowany – zmienia swoja zawartość w czasie:
Jak widać na obrazie powyżej jest to przejście z jednego obrazka na drugi w pewnym odstępie czasu. Zapewne na
myśl przychodzi animowany GIF, ale stosując tą technikę jest do dyspozycji cała paleta barw i w praktyce mniejszy
rozmiar pliku animowanego jak to ma miejsce dla GIF’a.
Kod strony HTML jest bardzo prosty:

Nowością jest linia 5 gdzie to dodajemy do pliku HTML’a plik „script.js” – jest to plik z kodem JavaScript
jaki zostanie dołączony w trakcie interpretacji strony przez przeglądarkę WWW.

W linii 9 stworzony został obraz który będzie się zmieniał. Jak łatwo zauważyć jest to statyczny obraz, ale
z parametrem id.
14
Aplikacje WWW

Kod pliku .js wygląda następująco:

W linii pierwszej jest polecenie mówiące o tym, że po załadowaniu strony przez przeglądarkę WWW –
wykonaj funkcję rogate.

Linie 3 i 4 są odpowiednio zmiennymi. Pierwsza zmienna – linia 3 to tablica elementów jakimi są ścieżki
dostępu do obrazków – w tym przykładzie trzech. W linii 4 stworzony jest indeks informujący który aktualnie
obraz jest wyświetlany z tablicy wcześniej zadeklarowanej. Są to zmienne globalne.

Funkcja z linii 6 do 14 jest odpowiedzialna za podmianę obrazka. Pierwszą rzeczą jest podmiana indenu
obrazka z tablicy – przy czym aby nie wyjść za jej rozmiar sprawdzamy warunek – linia 8.

W linii 11 z wszystkich elementów zawartych na stronie – body, head, title, Br… itp. – wyszukujemy taki
którego parametr ID ma wartość „adBanner”. Znajdując ten element – to znacznik <img> podmieniony
zostaje jego wskaźnik na adres – src – na taki z tablicy stworzonej w linii 3 o odpowiednim nowym indeksie.

W linii 13 ustalony zostaje czas co jaki ma zostać wywołana funkcja rogate – co 3 sekundy.
15