prowadzący dr ADRIAN HORZYK /~horzyk Konsultacje paw. D-13/325D

Transkrypt

1 INTERNET i PROJEKTOWANIE STRON WWW WYKŁAD 2. prowadzący dr ADRIAN HORZYK home.agh.edu.pl/~ /~horzyk horzyk@agh agh.edu.pl tel.: Konsultacje paw. D-13/325D

2 MENU WYKŁADU Budowa formularzy w XHTMLu z wykorzystaniem CSS obsługiwanych przez JavaScripty po stronie klienta oraz przez skrypty PHP po stronie serwera JavaScript to okrojony C++ dostosowany do zastosowań sieciowych. Nie kojarzyć go z językiem Java firmy SUN PHP interpreter skryptów działających po stronie serwera, umożliwiający wykonywanie programów zorientowanych obiektowo, pracę na bazach danych, dostarczający bezpieczeństwa wykonywania skryptów oraz interakcję i dynamikę stron WWW MySQL opensource owa baza danych możliwa do darmowego niekomercyjnego wykorzystania na stronach WWW

3 SKŁADANIA ARKUSZY STYLÓW CSS Arkusz stylów składa się z definicji stylu (reguł). Reguła składa się z selektora określającego formatowany element lub grupę elementów oraz jednej lub więcej rozdzielonych dwukropkiem oraz zakończonych średnikiem par właściwość-wartość. Pary muszą być otoczone nawiasami klamrowymi. Ponieważ średnik służy do separowania par, po ostatniej z nich nie powinno się pisać tego znaku (w przeciwnym razie cała definicja może zostać zignorowana). selektor { właściwość: wartość; inna-właściwość: inna-wartość } Przykładowo chcąc przypisać wszystkim akapitom określoną czcionkę użyjemy zapisu: p { font-family: sans-serif } Gdzie selektorem jest p (reguła zostanie zastosowana do wszystkich elementów p w dokumencie), właściwością - font-family (poddawana zmianie jest rodzina czcionek) a wartością - sans serif (akapitom przypisywana jest rodzina czcionek bezszeryfowych). Podstawowe selektory CSS zapewniają możliwość opisania docelowej grupy elementów między innymi według ich: wartości atrybutów aktualnego stanu (np. focus lub hover) relacji rodzic-potomek-rodzeństwo względem innego elementu

4 UMIESZCZENIE ARKUSZA W DOKUMENCIE Powiązać dokument z arkuszem można określając relację tego pierwszego z osobnym dokumentem CSS za pomocą elementu link: <link rel="stylesheet" href="arkusz.css"> <!-- wersja dla HTML --> <link rel="stylesheet" href="arkusz.css" /> <!-- wersja dla XHTML --> W przypadku dokumentu XML (lub XHTML serwowanego z XML-owym typem zawartości) można użyć specyficznej dla XML-a instrukcji przetwarzania: <?xml-stylesheet type="text/css" href="arkusz.css"?> Reguły CSS można też umieszczać wewnątrz nagłówka dokumentu (X)HTML dzięki elementowi style: <style type="text/css">p { color: red }</style> Lub stosować lokalnie do wybranego elementu (X)HTML za pomocą atrybutu style, co jednak nie jest ani praktyczne, ani zalecane: <p style="color: red"></p>

5 KASKADOWOŚĆ i PRIORYTETY STYLÓW Nazwa "kaskadowe arkusze stylów" wynika z faktu, iż gdy reguły CSS wykluczają się wzajemnie w arkuszu zewnętrznym, arkuszu wewnętrznym oraz na poziomie elementów HTML, priorytet stylów ustalany jest hierarchicznie. Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, te zaś mogą być modyfikowane przez reguły zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane "bliżej" formatowanego elementu. Kolejność interpretacji reguł formatujących dany element przez przeglądarkę przedstawia się następująco: 1. Domyślny arkusz przeglądarki WWW (niezależny od autora strony) 2. Domyślny arkusz użytkownika przeglądarki (niezależny od autora strony) 3. Zewnętrzne arkusze stylów 4. Definicje stylów w nagłówku dokumentu 5. Definicje stylów w atrybucie style elementu Ten model działania pokazuje, w jaki sposób działa kaskada stylów. Między stylami z różnych źródeł nie muszą zresztą wcale występować żadne konflikty - wszystkie style uzupełnią się, tworząc jeden wielki "wirtualny" styl.

6 ARKUSZE STYLÓW Pozwalają oddzielić układ graficzny strony od jej treści i układu funkcjonalnego. Jest to podejście niezbędne przy wykorzystywaniu DTD XHTML Strict (w XHTML Transitional można używać starszych znaczników). Stosowanie stylów umożliwia zachowanie ładnego stylu graficznego czcionek i rozpoznanie wiersza kodu przez starsze przeglądarki z pominięciem atrybutu stylu, np.: <h1 style= font-family: Arial, Helvetica >Witamy na naszej witrynie</h1> zamiast nierozpoznawalnego przez starsze przeglądarki lub przeglądarki WAPowe w telefonach komórkowych: <font face= Arial, Helvetica size= +2 > Witamy na naszej witrynie</font> Oddzielenie znaczników stylu od znaczników organizacyjnych poprawia czytelność kodu HTMLa, np.: <p><font face= Arial, Helvetica, San Serif size= +2 color= green >Witamy na naszej stronie!</font></p> można zastąpić kodem bardziej czytelnym umieszczając u góry strony oddzielnie definicję stylu elementu <p>: <style> p { font-family: Arial, Helvetica, San Serif; font-size: 16pt; color: Green } </style> a potem w treści dokumentu wystarczy umieścić następujący kod: <p> Witamy na naszej stronie! </p>

7 Przykłady deklaracji stylu: Przykłady CSS <h1 style= font-family: Arial, Helvetica, Sans Serif >Raporty</h1> <p style= font-size: 12pt; font-style: italic; font-weight: bold; background: yellow >Witamy na stronie </p> Zmianę tła komórki tabeli wykonamy następująco: <td style= background: yellow >100</td> Jeśli umieścimy definicję stylu elementu w nagłówku strony, wtedy będzie ona obowiązywała na całej stronie WWW, np: <head> <style type= text/css > element { właściwość: styl; właściwość: styl; } np.: p { font-size: 16pt; color: Green } </style> </head> Element którego styl definiujemy nazywamy selektorem, a wyrażenie w nawiasach klamrowych jego definicją. Selektor i definicja tworzy regułę. Selektorem może być nazwa znacznika HTML, np.: p, ul, h1,... W definicji składającej się z określenia kilku właściwości stosujemy przecinki dla ich odseparowania.

8 CSS Kaskadowe arkusze stylów pozwalają dziedziczyć właściwości stylu przez elementy podrzędne. Jeśli na przykład przypiszemy określony styl do elementu <table>, to ten styl będą posiadać automatycznie elementy <tr> i <td> (wiersze i komórki). Jeśli zadeklarujemy styl w elemencie <body>, będzie on obowiązywał na całej stronie, np.: <style> body {font-family: Arial, Helvetica; font-size: 12pt} ul {font-family: Times New Roman, Times} </style> będzie obowiązywał na całej stronie za wyjątkiem list nienumerowanych (unordered list).

9 CSS Jeśli chcemy zdefiniować kilka różnych stylów na stronie dla jednego znacznika warto się posłużyć klasami stylów, tworząc np.: <head> <style> h1.czerwony { color: red } h1.zielony { color: green } h1.niebieski { color: blue } </style> </head> <body> <h1>nagłówek ten jest w kolorze domyślnym</h1> <h1 class= czerwony >Nagłówek ten jest w kolorze czerwonym.</h1> <h1 class= zielony >Nagłówek ten jest w kolorze zielonym.</h1> <h1 class= niebieski >Nagłówek ten jest w kolorze niebieskim.</h1> </body> Przecinek służy do oddzielania poszczególnych wartości danej właściwości stylu, zaś średnik do oddzielania poszczególnych właściwości stylów.

10 CSS Analogicznie możemy sobie zdefiniować klasy stylów dla różnych typów paragrafów następująco: <style> p.glowny { font-family: Times New Roman; font-size: 14pt } p.notka { font-family: Arial, Helvetica; font-size: 10pt } </style> wtedy w tekście zmieniamy styl elementu <p> poprzez zmianę jego atrybutu klasy: <p class= glowny >...</p> <p class= notka >... </p> Można też stworzyć klasę uniwersalną, która nie jest przypisana żadnemu konkretnemu znacznikowi i może być zastosowana w każdym elemencie na stronie, np.: <style>.maly { font-family: Arial, Helvetica; font-size: 10pt } </style> wtedy można go zastosować np. w: <ul class= maly >... </ul> czy np. w <p class= maly >...</p>

11 CSS - SPAN Jeśli chcesz zastosować styl do dowolnie wybranego elementu strony (oprócz obrazków i elementów multimedialnych) można go objąć elementem <span> z określeniem odpowiedniego formatowania bądź też tworzymy klasy takich elementów, np.: <span style= font-family: Times New Roman; font-size: 14pt > Jakiś tekst napisany czcionką Times New Roman o rozmiarze 14 punktów. </span> Można też wcześniej zdefiniować styl elementu <span> do jego późniejszego wykorzystania: <style> span { font-family: Times New Roman; font-size: 14pt } </style> <span> Jakiś tekst napisany czcionką Times New Roman o rozmiarze 14 punktów. </span> Najlepiej jednak zdefiniować kilka klas dla elementu <span>, jeśli chcemy wykorzystać go do zmiany stylów na stronie: <style> span.duzy { font-family: Times New Roman, Times; font size: 20pt; float: left } span.maly { font: Arial, Helvetica; font-variant: small-caps } <style> wtedy w tekście można wykorzystać te klasy do odpowiedniego formatowania tekstu: <p><span class= duzy >T</span><span class= maly >ak się wszystko zaczęło...</span>

12 CSS - DIV Jeśli chcesz zastosować określone formatowanie do większej części strony (włączając w to obrazki, tabele i obiekty multimedialne), należy użyć elementu <div> w podobny sposób, jak element <span> z tym, że możemy nim objąć większy fragment strony, np.: <div align= center > </div> lub <div style= background-color: #EEEEEE > </div>

13 CSS UNIWERSALNE ARKUSZE STYLÓW można zdefiniować w oddzielnym pliku (*.css) i dołączenie go w nagłówku strony, np.: 1. W pliku style.css umieszczamy definicję stylu: h1 { font-family: Arial, Helvetica; font-size: 24pt; font-weight: bold; word-spacing: 2pt; } 2. Następnie umieszczamy go w nagłówku projektowanej strony: <head> <title> Strona główna </title> <link rel= stylesheet href= </head> Jeżeli zdefiniowano w nagłówku strony główną lokalizację strony wykorzystując element <base>: <head> <base href= </head> wtedy można się posłużyć adresem względnym referencji hipertekstowej: <link rel= stylesheet href= styl.css > /*... komentarze w ramach definicji stylów...*/ Priorytety definiowania stylów: 1. atrybut style przy określonym elemencie strony 2. element <style> zdefiniowany w nagłówku strony 3. element <style> zdefiniowany w zewnętrznym arkuszu stylów

14 CSS STYL TEKSTÓW I JEDNOSTKI Można stosować następujące jednostki: px piksele in cale mm milimetry cm centymetry pt punkty em wysokość bieżącej czcionki ex wysokość litery x bieżącej czcionki

15 CSS WŁAŚCIWOŚCI CZCIONEK I TŁA

16 twarda spacja < znak mniejszości (<) > znak większości (>) ukośnik (/) & &iexl; ampersand (&) symbol prawa autorskiego symbol znaku towarowego CSS ZNAKI SPECJALNE symbol zastrzeżonego znaku towarowego symbol akapitu lewy pojedynczy znak cudzysłowu prawy pojedynczy znak cudzysłowu lewy podwójny znak cudzysłowu prawy podwójny znak cudzysłowu symbol waluty jena symbol waluty euro symbol waluty funta symbol waluty centa symbol półpauzy symbol pauzy odwrócony wykrzyknik odwrócony znak zapytania

17 FORMULARZE umożliwiają dodawanie do stron elementów, które służą do pobierania informacji od użytkownika i pozwalają na dialog i interakcję z użytkownikiem. Służą one również do zamawiania różnych towarów w sklepach internetowych, chociaż wtedy należy dodatkowo zadbać o bezpieczeństwo przesyłanych danych. Prosty formularz pocztowy przedstawiony w tym rozdziale, na pewno nie jest odpowiedni do przesyłania np. numerów kart kredytowych, ważnych haseł dostępu czy innych poufnych danych! Bezpieczeństwo można uzyskać przy pomocy skryptów wykonywanych po stronie serwera oraz protokołu SSL. Formularz ma formę elektronicznej ankiety, którą wypełnia się wprost na stronie. Możliwe jest przy tym wpisywanie tekstu, odpowiadanie na zadane pytania, czy zaznaczanie jednej bądź kilku z podanych możliwości wyboru. Taki formularz może być przesłany pocztą elektroniczną (prosty formularz pocztowy) i odebrany przez adresata. Istnieje wiele programów wspomagających odbieranie formularzy i grupowe wysyłanie listów na ich podstawie, przez co czynność ta może stać się mniej żmudna. Są to zarówno aplikacje w postaci programów instalowanych tradycyjnie, jak i specjalne skrypty wykonywane bezpośrednio w przeglądarce (np. PHP).

18 MOŻLIWOŚCI FORMULARZY Użytkownicy mogą za pomocą formularzy: wpisywać swoje odpowiedzi w polach tekstowych, a także wpisywać swoje wypowiedzi na określony temat, wybierać jedną lub kilka z opcji, odpowiedzi z utworzonej uprzednio listy potencjalnych odpowiedzi za pomocą menu lub pól wyboru, wybierać tylko jedną lub kilka odpowiedź spośród wszystkich dostępnych opcji za pomocą menu lub przycisków opcji, uruchamiać pewne skrypty (np. JavaScript, PHP) za pomocą przycisków lub akcji zdefiniowanych dla poszczególnych pól.

19 TWORZENIE FORMULARZY <form metod = get/post action= przesyłanie danych formularza lub inna akcja > elementy formularza </form> Metoda get powoduje, iż dane formularza w trakcie przesyłania zostaną dołączone do docelowego URLa (ilość danych formularza jest jednak ograniczona do mniej niż 100 znaków). Metoda post powoduje oddzielne przesłanie danych i dzięki temu nie praktycznie żadnych ograniczeń co do ilości przesyłanych danych. Każdy formularz składa się z różnych typów pól, dzięki którym użytkownik może wprowadzać dane. Są to np. pola do wpisywania tekstu, czy też pozwalające wybrać jedną, bądź kilka, z podanych opcji. Pola działające w analogiczny sposób, występują prawie w każdym programie komputerowym, dlatego użytkownicy nie powinni mieć problemów z wypełnieniem formularza na stronie WWW. Pomiędzy podanymi wyżej znacznikami (<form> oraz </form>), mieszczą się wszystkie inne polecenia, dotyczące formularza (pola do wprowadzania danych). Każdy taki formularz musi rozpoczynać się od znacznika otwierającego <form>, a kończyć się znacznikiem zamykającym </form>.

20 OBSŁUGA AKCJI FORMULARZY Jako wartość atrybutu action="..." można również podać adres skryptu PHP lub CGI (jeśli znajduje się on na tym samym serwerze, wystarczy podać względną ścieżkę dostępu). Skrypt taki stanowi specjalny program, wykonywany wprost na serwerze na stronie WWW. Potrafi on, zgodnie z poleceniami programisty, przetworzyć wszystkie dane i np. zapisać je w oddzielnym pliku. W ten sposób oszczędzamy sobie wiele pracy, a wyniki mogą zostać natychmiastowo wyświetlone na ekranie - nie trzeba tego wykonywać ręcznie. Jednak pisanie skryptów PHP lub CGI, jest dużo bardziej skomplikowane niż tworzenie stron za pomocą prostego HTML. PHP i CGI to tzw. skrypty wykonywane po stronie serwera. Cechują się one m.in. tym, że potrafią zapisywać dane w zewnętrznych plikach. Oprócz nich istnieją jeszcze skrypty wykonywane po stronie klienta (np.: JavaScript lub Visual Basic - VBScript). Są one obsługiwane przez przeglądarkę użytkownika - na jego komputerze - dlatego mogą być wykonywane nawet bez dostępu do Internetu. Również i one obsługują formularze, lecz nie potrafią zapisywać danych w pliku.

21 POLE <INPUT> FORMULARZE - POLE INPUT <input type= TYP name= NAZWA size= ILOŚĆ ZNAKÓW maxlength= MAKSYMALNA ILOŚĆ ZNAKÓW > pozwala bardziej szczegółowo zdefiniować rodzaj informacji pobieranych od użytkownika. Można by zdefiniować następujące rodzaje elementów kontrolnych formularza poprzez określenie typu pola za pomocą type w elemencie input:

22 FORMULARZE - POLE INPUT WPROWADZANIE TEKSTÓW: Nazwisko: <input type= text name= nazwisko size= 50 maxlength= 40 > Miasto: <input type= text name= miasto size= 50 maxlength= 40 value= Kraków > Wprowadź nazwę użytkownika: <input type= text name= nazwa size= 50 maxlength= 40 > Wprowadź hasło: <input type= password name= haslo size= 10 maxlength= 10 > POLA WYBORU: <p> Które miasta zwiedziłeś?</p> <input type= checkbox name= Krakow checked= checked >W Krakowie<br> <input type= checkbox name= Warszawa >W Warszawie<br> <input type= checkbox name= Tarnow >W Tarnowie<br>

23 PRZYCISK OPCJI: <p> Gdzie mieszkasz?</p> FORMULARZE - POLE INPUT <input type= radio name= Krakow checked= checked >W Krakowie<br> <input type= radio name= Warszawa >W Warszawie<br> <input type= radio name= Tarnow >W Tarnowie<br> POLA UKRYTE: <input type= hidden name= identyfikacja value= formularz 1 >

24 PRZYCISK SUBMIT: FORMULARZE - POLE INPUT <input type= submit value= Wyślij! > Atrybut value= TEXT pozwala zdefiniować tekst wyświetlany na przycisku. Przycisk submit w formie obrazka: <input type= image src= obrazki/submit.gif alt= Wyślij formularz! > PRZYCISK RESET: <input type= reset value= Wyczyść formularz > Atrybut value= TEXT pozwala zdefiniować tekst wyświetlany na przycisku. PRZYCISK BUTTON: Pozwala indywidualnie zdefiniować przycisk formularza oraz akcję jaką ma wykonać.

25 POLE <TEXTAREA< > FORMULARZE - POLE INPUT <textarea name= NAZWA rows= LICZBA WIERSZY cols= LICZBA KOLUMN > tekst domyślnie wpisany w polu tekstowym </textarea> pozwala na wpisywanie tekstów o dowolnej ilości znaków.

26 FORMULARZE - POLE SELECT POLE < SELECT > - MENU ROZWIJANE umożliwia dokonanie pojedynczego wyboru z rozwijanej listy: Jak często odwiedzasz tę witrynę? <select name= czestotliwosc > <option selected= selected value= pierwszy >Po raz pierwszy</option> <option value= dzien >Codziennie</option> <option value= tydzien >Raz w tygodniu</option> <option value= miesiac >Raz w miesiącu</option> </select> Formularze możemy uporządkować przy pomocy tabel!

27 FORMULARZE - POLE SELECT POLE < SELECT > - MENU ROZWIJANE umożliwia dokonanie wielokrotnego wyboru z rozwijanej listy: Jakie tematy Cię interesują? <select name= tematy multiple= multiple > <option value= sport >Sport</option> <option value= muzyka >Muzyka</option> <option value= wiadomosci >Wiadomości</option> <option value= nauka >Nauka</option> </select>

28 FORMULARZE - POLE SELECT POLE < SELECT > - MENU ROZWIJANE umożliwia pogrupowanie opcji w grupy i nadanie im atrybutu label: <select name= źródło size= 14 multiple= multiple > <option value= brak selected= selected >Żadna z poniższych</option> <optgroup label= Radio > <option value= radioint >Radio internetowe</option> <option value= radiopub >Radio publiczne</option> </optgroup> <optgroup label= Telewizja > <option value= tvint >Telewizja internetowa</option> <option value= tvkab > Telewizja kablowa e</option> <option value= tvant > Telewizja publiczna </option> </optgroup> </select>

29 PHP TYPY DANYCH W PHP rozróżniamy 8 podstawowych typów danych, które można podzielić na: typy skalarne: typ boolean (logiczny) typ integer (liczb całkowitych) typ float (liczb rzeczywistych) typ string (ciągów tekstów) typy złożone typ array (tablicowy) typ object (obiektowy) typy specjalne typ resource (odwołania do zasobów zewnętrznych) typ null (informacja, że zmienna nie przechowuje żadnych danych)

30 PHP - ZMIENNE Zmienne w PHP rozpoczynamy od znaku $, po którym mogą występować znaki liter, podkreślenia i cyfry (cyfra nie może być na początku): $zmienna $zmienna1 $zmienna_1 $_1zmienna $_12 W PHP nie ma wymogu deklarowania zmiennych ani też konieczności określania ich typów. Czynności te wykonywane są automatycznie na podstawie wartości im przypisywanych. Typ zmiennej można wykryć wywołując funkcje kontrolujące typ zmiennych: gettype(), is_bool(), is_double(), is_float(), is_int(), is_integer(), is_long(), is_real(), is_string() is_array(), is_object(), is_resource(), is_null().

31 PHP ZMIENNE GLOBALNE $GLOBALS tablica zawierająca odniesienie do każdej zmiennej zdefiniowanej przez użytkownika o zasięgu globalnym $_SERVER tablica zawierająca informacje ustawiane przez serwer WWW $_GET tablica zawierająca dane przekazane do serwera WWW za pomocą metody GET $_POST tablica zawierająca dane przekazane do serwera WWW za pomocą metody POST $_COOKIE tablica zawierająca cookies przekazane z serwera WWW $_FILES tablica zawierająca elementy przekazane do skryptu za pomocą metody POST podczas przesyłania plików do serwera $_ENV tablica zawierająca wartości zmiennych środowiskowych przekazanych z systemu, na którym działa PHP $_REQUEST tablica asocjacyjna zawierająca dane z $_GET, $_POST i $_COOKIE $_SESSION tablica asocjacyjna zawierająca dane związane z bieżącą sesją

32 PHP - STAŁE Stałe nie zmieniają swojej wartości podczas wykonywania skryptu Stałe definiujemy w PHP przy pomocy: define ( nazwa stałej.wartość_stałej); Stałych nie poprzedzamy znakiem $!

33 PHP - OPERATORY W PHP istnieją różne operatory umożliwiający wykonywanie operacji na danych: operatory arytmetyczne: * (mnożenie) / (dzielenie) + (dodawanie) - (odejmowanie) % (dzielenie modulo) operatory inkrementacji i dekrementacji: ++ (inkrementacja) wykonanie inkrementacji: ++$a przed operacją, $a++ po operacji -- (dekrementacja) wykonanie dekrementacji: ++$a przed operacją, $a++ po operacji operatory bitowe: & (AND) (OR) ~ (NOT) ^ (XOR) >> (przesunięcie bitowe w prawo) << (przesunięcie bitowe w lewo) operatory logiczne: and, && (iloczyn logiczny) or, (suma logiczna) xor! (negacja) operatory relacyjne: ==. ===, <>,!=,!==, >, <, >=, <= operatory przypisania: =, +=, -=, *=, /=, %=,.=, <<=, >>=, &=, =, ^= operatory tablicowe: ==, ===, <>,!= operatory rzutowania typów: (int), (float), (string), (array), (object)

34 PHP INSTRUKCJE STERUJĄCE I FUNKCJE INSTRUKCJE WARUNKOWE: if (warunek) {...} if (warunek) {...} else {... } if (warunek) {...} else if {... } warunek? wartość1 : wartość2 INSTRUKCJA WYBORU: switch (liczba/wyrażenie) { case wartość1: instrukcje; break; case wartość2: instrukcje; break;... default: instrukcje; } PĘTLE: for (wyrażenie początkowe; wyrażenie warunkowe; wyrażenie modyfikujące) {... } while (wyrażenie warunkowe dopuszczające) {... } do {... } while (wyrażenie warunkowe dopuszczające) foreach ($tablica as $wartość) {... } lub foreach ($tablica as $klucz => $wartość) {... } break przerywa działanie pętli continue przerywa wykonywanie pętli dla danej wartości i kontynuuje jej wykonywanie dla kolejnej wartości

35 PHP INSTRUKCJE STERUJĄCE I FUNKCJE TABLICE: $tablica = array ( wartość1, wartość2, wartość3, wartość4,... ) Odwołanie tworzymy w postaci $tablica[$i] - $i indeks tablicy liczony od 0-ra TABLICE ASOCJACYJNE: $tablica = array (klucz1 => wartość1, klucz2 => wartość2, klucz3 => wartość3,... )

36 Formularz HTML Jak formularze są obsługiwane przez PHP? Formularz HTML definiujemy stosując element FORM. Wewnątrz, po między znacznikami <FORM> oraz </FORM> umieszczamy zawartość formularza, na którą składają się kontrolki (np. INPUT) oraz elementy formatujące (np. TABLE). Typowy formularz składa się z elementu FORM zawierającego tabelę, wewnątrz której umieszczono kilka kontrolek. Listing 1 przedstawia przykładowy formularz. <FORM action="jakis-skrypt.php"> <TABLE> <TR> <TD>Imię:</TD> <TD><INPUT name="imie"></td></tr> <TR> <TD>Nazwisko:</TD> <TD><INPUT name="nazwisko"></td></tr> <TR> <TD> </TD> <TD><INPUT type="submit" value="wyślij"></td></tr> </TABLE> </FORM> Zawiera on dwa pola do wprowadzania danych (pola te nazwano Imię i Nazwisko) oraz przycisk Wyślij. Osoba odwiedzająca witrynę może umieścić kursor wewnątrz pól formularza, wypełnić je, wpisując napisy Aleksander Macedoński, po czym przesłać formularz, naciskając przycisk Wyślij. Treść wprowadzona przez użytkownika zostanie przesłana do skryptu o nazwie jakis-skrypt.php. Nazwę skryptu przetwarzającego formularz podajemy jako wartość atrybutu action elementu FORM.

37 Jak formularze są obsługiwane przez PHP? Po naciśnięciu przycisku Wyślij, wizyta zostanie przeniesiona pod adres jakis-skrypt.php. W skrypcie tym będą dostępne dane wprowadzone przez użytkownika w formularzu. Skrypt przetwarzający formularz zawarty w pliku jakis-skrypt.php może być napisany w dowolnym języku programowania dynamicznych stron WWW, np. w PHP.

38 PHP - DOSTĘP DO PÓL FORMULARZA Dostęp do zawartości pól formularza iloscopon można uzyskać 3 metodami: $iloscopon $_POST[ iloscopon ] $HTTP_POST_VARS[ iloscopon ] //styl krótki //styl średni (zalecany) //styl długi Średnik służy do oddzielana instrukcji w PHP! /* komentarze */ // komentarz do końca linii Łączenie ciągów za pomocą kropeczki:.

39 PHP i FORMULARZE PRZYKŁAD 1. <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta> <title>formularz1</title> </head> <body> <form action="przetworz.php" method=post> <table border=0> <tr bgcolor=#cccccc> <td width="150">produkt</td> <td width="15">ilość</td> </tr> <tr> <td>opony</td> <td align="center"><input type="text" name="iloscopon" size="3" maxlength="3"></td> </tr> <tr> <td>olej</td> <td align="center"><input type="text" name="iloscoleju" size="3" maxlength="3"></td> </tr> <tr> <td>świece Zapłonowe</td> <td align="center"><input type="text" name="iloscswiec" size="3" maxlength="3"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="złóż zamówienie"></td> </tr> </table> </form> </body> </html>

40 PHP i FORMULARZE PRZYKŁAD 1. KOMENTARZ.HTML <html> <head> <title>części samochodowe Janka - komentarz klienta</title> </head> <body> <h1>komentarz klienta</h1> <p>proszę przekazać nam swoje komentarze.<p> <form action="przetworzkomentarz.php" method=post> Nazwisko:<br /> <input type=text name="nazwa" size=40><br /> Adres poczty elektronicznej:<br /> <input type=text name=" " size=40><br /> Komentarz:<br /> <textarea name="komentarz" cols=30 rows=5> </textarea><br /> <input type=submit value="wyślij komentarz"> </form> </body>

41 PHP i FORMULARZE PRZYKŁAD 1. PRZETWORZKOMENTARZ.PHP <?php // utworzenie krótkich nazw zmiennych $nazwa=$_post['nazwa']; $ =$_post[' ']; $komentarz=$_post['komentarz']; $adresdo = 'komentarze@przyklad.com'; $temat = 'Komentarz ze strony WWW'; $zawartosc = 'Nazwa klienta: '.$nazwa."\n".'adres pocztowy: '.$ ."\n"."komentarz klienta: \n".$komentarz."\n"; $adresod = 'serwerwww@przyklad.com'; mail($adresdo, $temat, $zawartosc, $adresod);?> <html> <head> <title>części samochodowe Janka komentarz przyjęty</title> </head> <body> <h1>komentarz przyjęty</h1> <p>komentarz Państwa został wysłany.</p> </body> </html>

42 PHP i FORMULARZE PRZYKŁAD 1. TRANSPORT.HTML <html> <body> <table border="0" cellpadding="3"> <tr> <td bgcolor="#cccccc" align="center">odległość</td> <td bgcolor="#cccccc" align="center">koszt</td> </tr> <tr> <td align="right">50</td> <td align="right">5</td> </tr> <tr> <td align="right">100</td> <td align="right">10</td> </tr> <tr> <td align="right">150</td> <td align="right">15</td> </tr> <tr> <td align="right">200</td> <td align="right">20</td> </tr> <tr> <td align="right">250</td> <td align="right">25</td> </tr> </table> </body> </html>

43 PHP i FORMULARZE PRZYKŁAD 2. PRZETWORZ.HTML <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>części samochodowe Janka wyniki zamówienia</title> </head> <body> <h1>części samochodowe Janka</h1> <h2>wyniki zamówienia</h2> </body> </html> TRANSPORT.PHP <html> <body> <table border="0" cellpading="3"> <tr> <td bgcolor = "#CCCCCC" align="center">odległość</td> <td bgcolor = "#CCCCCC" align="center">koszt</td> </tr> <?php $odleglosc = 50; while ($odleglosc <= 250 ) { echo "<tr>\n <td align="right">$odleglosc</td>\n"; echo " <td align="right">". $odleglosc / 10."</td>\n</tr>\n"; $odleglosc += 50; }?> </table> </body> </html>

44 JavaScript - PRZYKŁAD <html>... <body> <form name= frmpersonaldetails > <input type = radio name= radio1 value= jeden > <input type = radio name= radio1 value= dwa > <input type = radio name= radio1 value= trzy > </form> <script> var inputarray = document.frmpersonaldetails.radio1; var arraylength = inputarray.length; for (val elementindex = 0; elementindex < arraylength; elementindex++) { var formelement = inputarray[elementindex]; document.write ( Indeks elementu: + elementindex + i ); document.write ( wartość elementu: + fromelement.value); } </script> </body> </html>

45 Pozycjonowanie stron

46 Pozycjonowanie stron

47 LITERATURA i ODNOŚNIKI 1. Elizabeth Castro, Po prostu HTML, XHTML i CSS, Wydanie VI, HELION, ISBN: , Gliwice, David Crowder, Rhonda Crowder, Tworzenie stron WWW. Biblia, Wydanie I, ISBN , Helion, Gliwice, Elisabeth Freeman & Eric Freeman, Head Frist HTML with CSS & XHTML, Helion, ISBN: /8, Gliwice, Programiści praca grupowa, Zaawansowane programowanie JavaScript, Helion, ISBN: , Gliwice, Marcin Lis, PHP i MySQL dla każdego, Helion, ISBN: , Gliwice, Marcin Lis, Ćwiczenia praktyczne MySQL. Darmowa baza danych, Helion, ISBN: , Gliwice, Todd Stauffer, Kurs tworzenia stron internetowych, Helion, ISBN: , Wydanie I, Gliwice, Luke Welling & Laura Thomson, PHP i MySQL. Vademecum profesjonalisty, Helion, ISBN: , Gliwice, Wikipedia, Kevin Yank, PHP i MySQL, Helion, ISBN: , Gliwice, Jeffrey Zeldman, Projektowanie serwisów WWW. Standardy sieciowe., Wydanie II, Helion, ISBN: , Gliwice, 2007.