Tworzenie Aplikacji Internetowych dr Wojciech M. Gańcza 4.

Prezentacja na temat: "Tworzenie Aplikacji Internetowych dr Wojciech M. Gańcza 4."— Zapis prezentacji:

1 Tworzenie Aplikacji Internetowych dr Wojciech M. Gańcza 4

2 Interakcja Serwer może przesyłać użytkownikowi zawartość strony Użytkownik może wybierać inne strony poprzez wybór linku Ale to nie wystarcza – często potrzebujemy przekazać do serwera konkretne dane Rozwiązaniem są formularze

3 Formularz Formularzem jest wszystko to co znajduje się między znacznikami … Na stronie może znajdować się wiele formularzy Wewnątrz formularza można umieszczać elementy edycyjne Można formularz może także zawierać normalny kod HTML

4 Formularz – właściwości name – Formularz powinien posiadać nazwę – jest używana jeśli odwołujemy się do niego z poziomu JavaScript-u. method – Sposób w jaki dane z formularza przesyłane są do serwera post (domyślna) – dane mogą być durze i nie są widoczne. get – dane są dołączane do adresu strony – po znaku zapytania

5 Formularz – właściwości … action – adres URL pod który formularz zostanie wysłany. enctype – sposób kodowanie/przesyłania danych: application/x-www-form- urlencoded (domyślna). multipart/form-data – przy przesyłaniu plików metodą post Można także reagować na zdarzenia – ale o tym przy okazji JavaScriptu

6 Elementy edycyjne Pole tekstowe Wieloliniowe pole tekstowe Przyciski Radio button Checkbox Pole edycji hasła Lista Plik (upload) Pola ukryte Obiekty – inne elementy edycyjne

7 Ważniejsze atrybuty name – Nazwa elementy edycyjnego – pod taką nazwą dane będą dostępne na serwerze. Nazwa ta służy także do manipulacji elementem edycyjnym ze strony JavaScript-u style – styl w jakim element ma być wyświetlony class – Styl zdefiniowany w CSS2 title – tekst tooltipu przypisanego do elementu edycyjnego disabled – element nie może być wybrany i nie jest przesyłany! readonly – nie może być edytowany

8 Pole tekstowe value – zawartość (do edycji) size – określa rozmiar elementu w znakach maxlength – określa ile znaków pole tekstowe może zaakceptować

9 Tekst wieloliniowy To jest tekst rows – wysokość (w liniach) cols – szerokość (w znakach) Rozmiar musi być podany!

10 Przyciski submit wysyła formularz zgodnie z jegoustawieniami reset – przywraca wartości pól edycyjnych z przed edycji button – wywołuje jedynie metodę OnClick którą możemy oprogramować

11 Radio button Radio button występuje w grupach Wszystkie elementy grupy – mają taką samą nazwę – lecz różne wartości Wysyłana jest wartość która jest wybrana Wybierz 1 Wybierz 2

12 Checkbox To przesyłana jest wartość jeśli checkbox jest zaznaczony Jeśli nie – to nic nie jest wysyłane Jeśli wiele checkbox-ów ma taką samą nazwę – wysyłana jest lista Wybierz mnie

13 Hasło Pole hasła zachowuje się jak pole tekstowe – ale zawartość jest wyświetlana jako gwiazdki Z takiego pola nie można też kopiować do schowka

14 Lista wartość 1 wartość 2 wartość 3 Lista może być wyświetlana jako list rozwijana labo jako pole zawierające listę

15 Lista … wartość 1 wartość 2 wartość 3 multiselect – pozwala na zaznaczenie więcej niż jednej pozycji na liście

16 Plik Przewidziano także element pozwalający na upload pliku Należy pamiętać o ustawieniu odpowiedniego typu formularza

17 Pola ukryte Pola ukryte nie mają widoku Ich zawartość jest przesyłana do serwera tak jak innych elementów Można w nich zapamiętać wartości które nie podlegają edycji (na przykład identyfikator rekordu)

18 Obiekty Obiekty – to furtka pozostawiona by umożliwić rozbudowę edycji o nie przewidziane jeszcze elementy Atrybuty zależą od konkretnych typów obiektów Więcej szczegółów : http://www.w3.org/TR/html401/interact/forms.html

19 A na serwerze Wartości elementów edycyjnych są dostępne w globalnych tablicach $_GET[] – te które zostały wysłane metodą GET, lub wartości które zostały umieszczone w adresie $_POST[] – te które zostały wysłane metodą POST Tablice indeksuje się nazwami elementów edycyjnych Jeśli wartością jest lista – wartości są oddzielone przecinkiem

20 Klasa kontrolki class Control { var $name; var $value; Control($name, $defvalue) { … } render(&$out) { … } }

21 Klasa kontrolki Control($name, $defvalue) { $this->name = $name; $this->value = $_GET[$name]; if ($this->value == NULL) $this->value = $_POST[$name]; if ($this->value == NULL) $this->value = $defvalue; }

22 Jak używać Na formularzu – tworzymy kontrolkę Możemy sprawdzić jej wartość Ewentualnie ustawić A w czasie generowania strony… Wygenerować kod Elementy do selekcji (listy i radiobutton-y) – wymagają jako selekcji – tablicy i są trochę bardziej skomplikowane

23 Typy kontrolek Warto tworzyć typu kontrolek pod konkretne zastosowania Imię i nazwisko – są polami tekstowymi o różnej długości – można je zaimplementować jako jedną klasę z długością jako parametrem Ale można też utworzyć dwie różne klasy specjalnie do danych określonych typów

24 Typy kontrolek … Wybór typu powinien dotyczyć przeznaczenia a nie wyglądu Wygląd będzie można spójnie zmienić bez konieczności przeszukiwania kodu Wygodnie jest przygotować sobie fabrykę kontrolek Typ może być określony przeznaczeniem oraz prawami dostępu

25 Edycja tabeli Edycja tabeli jest osobnym problemem Powinniśmy jej unikać Zajmuje dużo pamięci Zbyt wiele elementów edycyjnych – to chaos na ekranie Jeśli musimy – to zezwalajmy na edycję pojedynczego rzędu Najlepiej poza tabelą

26 Edycja rekordu Zawartość strony musi być uporządkowana Szczególnie przy edycji W większych aplikacjach zachodzi potrzeba edycji różnych danych Ale wygląd stron edycyjnych powinien być spójny Rozwiązanie – builder – klasa konstruująca strony edycyjne na podstawie typów danych

27 W następnym odcinku Jak zapanować nad wyglądem strony Określenie stylu Klasy stylów CSS2 – co jest a co nie jest kaskadowe