plik


ÿþTworzenie stron WWW z wykorzystaniem Ajaksa. Projekty Autor: Larry Ullman T³umaczenie: Rados³aw Meryk ISBN: 978-83-246-1553-7 Tytu³ orygina³u: Building a Web Site with Ajax: Visual QuickProject Guide Format: 170x230, stron: 168 Stwórz interaktywny serwis WWW, korzystaj¹cy z technologii AJAX! " Jakich narzêdzi potrzebujesz, by stworzyæ stronê WWW? " Jak wzbogaciæ witrynê dziêki technologii AJAX? " Jak obs³ugiwaæ dane w formacie XML? AJAX jest skrótem od Asynchronous JavaScript and XML. Technologia ta sta³a siê trzonem rewolucji Web 2.0. DziS trudno sobie wyobraziæ nowoczesn¹ aplikacjê WWW, która nie korzysta³aby z dobrodziejstw tego rozwi¹zania. Nie bez powodu! Intuicyjny interfejs u¿ytkownika, wysoki poziom interaktywnoSci, wygoda oraz dynamika serwisów korzystaj¹cych z tego rozwi¹zania gwarantuj¹, ¿e jeszcze d³ugo bêdzie ono na topie technik tworzenia stron WWW. Dziêki ksi¹¿ce  Tworzenie stron WWW z wykorzystaniem AJAKSA. Projekty poznasz proces tworzenia strony WWW, korzystaj¹cej z tej technologii. Autor krok po kroku wyjaSnia zasadê dzia³ania oraz sposób tworzenia serwisu i ka¿dego z elementów projektowanych dla niego aplikacji. Pierwsze zadanie, które stawia on przed Tob¹, to zbudowanie bazy danych. Póxniej nauczysz siê implementowaæ funkcjonalnoSci takie, jak przegl¹danie danych, dodawanie nowych wpisów czy te¿ wyszukiwanie informacji. Po przeczytaniu niniejszej ksi¹¿ki nie bêdzie dla Ciebie problemem po³¹czenie na przyk³ad technologii HTML, JavaScript, CSS, XML i PHP w celu uzyskania dynamicznego, interaktywnego oraz efektownego serwisu WWW. Zobaczysz tak¿e, jak poszczególne funkcjonalnoSci aplikacji WWW dzia³aj¹ bez wykorzystania technologii AJAX, a nastêpnie jak zyskuj¹ na atrakcyjnoSci po dodaniu tej technologii. Teraz wszystko zale¿y tylko od Twojej wyobraxni! " Zasada dzia³ania AJAX " Narzêdzia konieczne w procesie projektowania, wytwarzania i testowania " Przygotowanie bazy danych " Obs³uga ¿¹dañ z wykorzystaniem PHP " Przygotowanie stron HTML " Tworzenie i obs³uga formularzy " Dynamiczna weryfikacja danych wprowadzanych przez u¿ytkownika Wydawnictwo Helion " Testowanie statycznych rozwi¹zañ ul. KoSciuszki 1c " Testowanie dynamicznych rozwi¹zañ, korzystaj¹cych z AJAX 44-100 Gliwice " Wykorzystanie jêzyka JavaScript tel. 032 230 98 63 " Przegl¹danie informacji e-mail: helion@helion.pl " Wyszukiwanie informacji " Dodawanie nowych wpisów do bazy " Zastosowanie formatu XML " Wykorzystanie formatu JSON Stwórz swoj¹ w³asn¹, interaktywn¹ stronê WWW! spis tre[ci wprowadzenie 9 jak dziaBa ajax? 10 witryna internetowa czego mo|na nauczy si z tej ksi|ki? 11 towarzyszca ksi|ce 17 jak zorganizowana jest ta ksi|ka? 12 nastpny krok 18 potrzebne narzdzia 14 1. tworzenie bazy danych 19 dostp do bazy danych MySQL 20 wypeBnienie tabel danymi 25 utworzenie bazy danych 21 informacje dodatkowe 27 utworzenie tabel 23 2. przegldanie pracowników 29 co bdziemy robi? 30 nawizanie poBczenia z baz danych 36 utworzenie strony HTML 31 utworzenie arkusza stylów 37 utworzenie formularza HTML 32 wykorzystanie arkusza stylów 38 utworzenie skryptu PHP 33 testowanie stron 39 wy[wietlenie listy pracowników 34 informacje dodatkowe 40 zgBaszanie bBdów 35 3. przegldanie z wykorzystaniem technologii ajax 45 co bdziemy robi? 46 wy[wietlenie listy pracowników 53 utworzenie funkcji 47 obsBuga odpowiedzi 55 sprawdzenie obsBugi technologii Ajax 48 wy[wietlenie wyników 56 wywoBanie funkcji 49 modyfikacja kodu HTML 57 konfiguracja Ajaksa 50 testowanie warstwy Ajaksa 58 rozpoczcie strony PHP 52 informacje dodatkowe 59 5 spis tre[ci 4. dodawanie rekordów 63 co bdziemy robi? 64 walidacja danych formularza 70 utworzenie strony HTML 65 aktualizacja bazy danych 73 utworzenie formularza 66 wy[wietlenie komunikatów obBdach 74 utworzenie elementów formularza 67 testowanie wersji nieajaksowej 75 rozpoczcie strony PHP 69 informacje dodatkowe 77 5. dodawanie rekordów z wykorzystaniem technologii ajax 79 co bdziemy robi? 80 aktualizacja bazy danych 92 dodanie elementów technologii Ajax 82 uzupeBnienie danych w formacie XML 93 wykorzystanie warstwy Ajaksa 83 obsBuga odpowiedzi 95 konfiguracja Ajaksa 84 przygotowanie strony 96 przygotowanie danych formularza 85 obsBuga danych w formacie XML 97 dokoDczenie funkcji 86 wy[wietlenie wyników 99 przygotowanie do przesyBania testowanie warstwy Ajaksa 100 wyników w formacie XML 87 informacje dodatkowe 102 walidacja danych formularza 88 6. wyszukiwanie 107 co bdziemy robi? 108 wy[wietlenie wyników 114 utworzenie strony HTML 109 wy[wietlenie komunikatów o bBdach 115 utworzenie formularza 111 testowanie wersji niajaksowej 116 rozpoczcie strony PHP 112 informacje dodatkowe 117 zapytanie do bazy danych 113 spis tre[ci 6 7. wyszukiwanie z wykorzystaniem ajaksa 119 co bdziemy robi? 120 przygotowanie strony 132 dodanie elementów technologii Ajax 122 obsBuga danych w formacie XML 133 wykorzystanie warstwy Ajaksa 123 wy[wietlenie wyników 134 konfiguracja Ajaksa 125 obsBuga nazwisk 136 dokoDczenie funkcji 126 obsBuga wydziaBów 137 przygotowanie do przesyBania obsBuga adresów e-mail 139 wyników w formacie XML 127 wy[wietlenie komunikatu zapytanie do bazy danych 128 o braku wyników 141 pobranie wyników 129 dokoDczenie funkcji 142 dokoDczenie skryptu PHP 130 testowanie warstwy Ajaksa 143 obsBuga odpowiedzi 131 informacje dodatkowe 144 dodatek A nastpne kroki 149 problemy zwizane z Ajaksem 150 zasoby w internecie 159 alternatywy dla Ajaksa 151 zestawy Framework wprowadzenie do JSON 152 dla jzyka JavaScript 160 wysyBanie danych w formacie JSON 154 biblioteki PHP-Ajax 161 dostp do danych w formacie JSON 156 debugowanie kodu JavaScript 162 korzystanie z danych w formacie JSON 157 informacje dodatkowe 166 skorowidz 169 spis tre[ci 7 dodawanie 4 rekordów W pierwszym rozdziale utworzyli[my struktur bazy danych dla witryny WWW wy[wietlajcej list pracowników. W poprzednich dwóch rozdziaBach opracowali[my ajaksow i nieajaksow wersj aplikacji wy[wietlajcej list pracowników wybrane- go wydziaBu. W rozdziale niniejszym opracujemy funkcj dodawania pracowników do bazy danych. Oczywi[cie rozpoczniemy od wersji nieajaksowej gwarantujcej dostp dla wszystkich u|ytkowników, a nastpnie  w kolejnym rozdziale  opracu- jemy wersj bazujc na technologii Ajax. Rozpoczniemy od utworzenia formularza HTML, który pobiera wszystkie niezbd- ne dane. Nastpnie napiszemy skrypt PHP, który obsBuguje przesyBanie formularza bez wykorzystania technologii Ajax. Bdzie to bardzo prosty skrypt PHP obsBugujcy formularz HTML. 63 co bdziemy robi? 1 Najpierw, na stronach 65  68, utworzymy stron HTML z formu- larzem. W formularzu s elementy repre- zentujce wszystkie dane dotycz- ce pracowników zapisane w bazie danych. Gdy w przegldarkach bez obsBugi Ajaksa u|ytkownik kliknie Dodaj, formularz zostanie przesBany do skryptu PHP. 2 Na stronach 69  74 napiszemy skrypt PHP, który obsBuguje for- mularz HTML. Skrypt dokonuje walidacji danych formularza, a nastpnie zwraca wyniki. W przypadku nieprawidBowego wypeBnienia dowolnego pola skrypt PHP wy[wietla komunikat o bBdzie. 3 Na koniec, tak jak wcze[niej, Na koDcu tego rozdziaBu, w punkcie przetestujemy napisane elemen-  Informacje dodatkowe , umie[cimy ty aplikacji, aby uzyska pewno[, dodatkowe dane, wskazówki i zalecenia |e wszystko dziaBa poprawnie. zwizane z wykonanymi czynno[ciami. W nastpnym rozdziale do utworzonych stron dodamy elementy technologii Ajax. 64 dodawanie rekordów utworzenie strony html Rozpoczniemy od utworzenia nowej strony HTML w dowolnym edytorze tekstu. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <title>Nowy pracownik</title> <style type="text/css" media="all">@import "style.css";</style> </head> <body> </body> </html> Element <title> opisuje przeznaczenie strony. Arkusz stylów nadaje stronie taki sam wygld jak pozostaBym stronom w serwisie. dodawanie rekordów 65 utworzenie formularza 1 Zdefiniuj komunikat informujcy o tym, do czego sBu|y formularz i jak nale|y z niego korzysta. ... <body> <p>Ten formularz sBu|y do wprowadzania danych dotyczcych pracownika (wszystkie pola s obowizkowe):</p> <form action="dodaj_pracownika.php" method="post" id="prac_form"> </form> </body> ... 2 W przypadku przegldarek nieobsBugujcych Ajaksa formularz bdzie przesBany do skryptu dodaj_pracownika.php, który napiszemy w dalszej cz[ci rozdziaBu. 3 Formularz wykorzystuje metod POST, a nie GET (zobacz  Informacje dodatkowe na stronie 77). 4 Dla warstwy ajaksowej istotne znaczenie ma warto[ atrybutu id formularza (prac_form). 66 dodawanie rekordów utworzenie elementów formularza 1 Do wprowadzania imienia, nazwiska i adresu e-mail pracownika nale|y utworzy pola tekstowe. ... <form action="dodaj_pracownika.php" method="post" id="prac_form"> <p><label class="tytul" id="imie_etykieta">Imi<input type="text" id="imie" name="imie"/></label> </p> <p><label class="tytul" id="nazwisko_etykieta">Nazwisko<input type="text" id="nazwisko" name="nazwisko" /></label> </p> <p><label class="tytul" id="email_etykieta">Adres e-mail<input type="text" id="email" name="email" /></label> </p> dodawanie rekordów 67 utworzenie elementów formularza cd. 2 WydziaB pracownika mo|na wybra za pomoc rozwijanego menu. <p><label class="tytul" id="wydzial_id_etykieta">WydziaB<select id="wydzial_id" name="wydzial_id"> <option value="1">Kadry</option> <option value="2">Ksigowo[</option> <option value="3">Marketing</option> <option value="4">WydziaB pomocniczy</option> </select></label> </p> 3 Kolejne pole tekstowe sBu|y do wprowadzania numeru telefonu wewntrznego pracownika. <p><label class="tytul" id="telefon_wewn_etykieta">Numer wewntrzny<input type="text" id="telefon_wewn" name="telefon_ wewn" /></label> </p> <p><input name="dodaj" type="submit" value="Dodaj" /></p> </form> ... 4 Etykiety informuj o przezna- czeniu poszczególnych elementów (zobacz  Informacje dodatkowe na stronie 77). 5 Przycisk przesyBania formularza ma warto[ Dodaj. 6 Skrypt nale|y zapisa w pliku dodaj_pracownika.html i umie[ci w tym samym katalogu co pozostaBe strony aplikacji. 68 dodawanie rekordów rozpoczcie strony php Pierwszy skrypt PHP obsBuguje operacj przesBania formularza bez wykorzystania technologii Ajax. Powinien to by jednocze[nie prawidBowy dokument HTML, dlatego nale|y go rozpocz od poni|szych znaczników: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <title>Nowy pracownik</title> <style type="text/css" media="all">@import "style.css";</style> </head> <body> <h1>Nowy pracownik</h1> <?php # dodaj_pracownika.php require_once('mysql.inc.php'); mysql_close($dbc); ?> </body> </html> Wszystkie wBasno[ci strony zostan zdefiniowane pomidzy znacznikami PHP. Strona musi nawiza poBczenie z serwerem MySQL, dlatego nale|y zaBadowa skrypt mysql.inc.php. Przed zakoDczeniem dziaBania skryptu poBczenie MySQL musi by zamknite. Skrypt nale|y zapisa w pliku dodaj_pracownika.php i umie[ci w tym samym katalogu co plik dodaj_pracownika.html. dodawanie rekordów 69 walidacja danych formularza Przed wykorzystaniem w zapytaniu danych wprowadzonych w formularzu nale|y przeprowadzi ich walidacj. W skrypcie PHP nale|y wprowadzi poni|szy kod: ... require_once('mysql.inc.php'); $bledy = array(); if (!empty($_POST['imie'])) { $fn = mysql_real_escape_string($_POST['imie'], $dbc); } else { $bledy[] = 'imi'; } 1 W tablicy $bledy bd zapisane wszystkie bBdy, jakie wystpiBy podczas walidacji danych w formularzu. 2 Walidacja pól tekstowych polega na sprawdzeniu, czy nie s one puste (zobacz  Informacje dodatkowe na stronie 77). if (!empty($_POST['nazwisko'])) { $ln = mysql_real_escape_string($_POST['nazwisko'], $dbc); } else { $bledy[] = 'nazwisko'; } 70 dodawanie rekordów if (!empty($_POST['email'])) { $e = mysql_real_escape_string($_POST['email'],$dbc); } else { $bledy[] = 'adres email'; } 3 W celu uzyskania pewno[ci, |e dane mo|na bezpiecznie wykorzysta w zapytaniu, s one przetwa- rzane w funkcji mysql_real_escape_string(). dodawanie rekordów 71 walidacja danych formularza cd. if (isset($_POST['wydzial_id']) && is_numeric($_POST['wydzial_id']) && ($_POST['wydzial_id']>0)) { $idw = (int) $_POST['wydzial_id']; } else { $bledy[] = 'wydziaB'; } 4 Warto[ci liczbowe, takie jak identyfikator wydziaBu i numer telefonu, musz by liczbami dodatnimi. if (isset($_POST['telefon_wewn']) && is_numeric($_POST['telefon_wewn']) && ($_POST['telefon_wewn'] > 0)) { $wewn = (int) $_POST['telefon_wewn']; } else { $bledy[] = 'numer wewntrzny'; } mysql_close($dbc); ... 5 Aby mo|na byBo je bezpiecznie wykorzystywa w zapytaniu, dla warto[ci numerycznych wykonuje si rzutowanie typów do danych typu integer. 6 Ka|da nieudana operacja walidacji powoduje dodanie wpisu do tablicy $bledy. 72 dodawanie rekordów aktualizacja bazy danych ZakBadajc, |e dane wprowadzone w formularzu pomy[lnie przeszBy przez proce- dury walidacji, nale|y uruchomi zapytanie INSERT. 1 Je[li nie byBo bBdów, to ten warunek bdzie prawdziwy (poniewa| zmienna $bledy bdzie pusta). ... $bledy[] = 'numer wewntrzny'; } if (!$bledy) { $q = "INSERT INTO pracownicy VALUES (NULL, $idw, '$fn', '$ln', '$e', $wewn)"; $r = mysql_query($q, $dbc); if (mysql_affected_rows($dbc) == 1) { echo '<p><strong>Dodano nowego pracownika.</strong></p>'; mysql_close($dbc); ... 2 Instrukcja INSERT dodaje nowego pracownika do bazy danych, wykorzystujc dane przetworzone za pomoc procedur walidacyjnych (zobacz  Informacje dodatkowe na stronie 78). 3 Funkcja mysql_affected_ rows() zwraca liczb rekordów, których dotyczyBo zapytanie. W przypadku zapytania wykorzy- stanego w tym skrypcie liczba ta bdzie wynosiBa 1, bowiem dodano jeden nowy rekord. 4 Wyniki dziaBania skryptu s wy[wietlane na ekranie. dodawanie rekordów 73 wy[wietlenie komunikatów o bBdach Na koniec, je[li jest taka potrzeba, nale|y wy[wietli u|ytkownikom informacje o bBdach, które wystpiBy. 1 Pierwsza klauzula else dotyczy sytuacji, kiedy zapytanie nie dotyczyBo jednego wiersza. Zazwyczaj jest to sygnaB wystpienia bBdu skBadniowego (zobacz  Informacje dodatkowe na stronie 78). ... echo '<p><strong>Dodano nowego pracownika.</strong></p>'; } else { // Wykonanie zapytania nie powiodBo si. echo '<p class="blad">Nie mo|na doda pracownika z powodu bBdu systemowego.</p>'; } } else { // BBdy! echo '<p>WystpiBy nastpujce bBdy :</p><ul class="blad">'; foreach ($bledy as $e) { echo "<li>Nale|y poda prawidBow warto[ w polu:$e.</li>\n"; } echo '</ul>'; } mysql_close($dbc); ... 2 Druga klauzula else uru- chamia si, je[li dane nie przej- d pomy[lnie przez wszystkie testy walidacji. 3 Poniewa| bBdy s zapisa- ne w tablicy, najBatwiejszym sposobem uzyskania dostpu do wszystkich bBdów jest prze- twarzanie ich w ptli. 74 dodawanie rekordów testowanie wersji nieajaksowej 1 ZaBaduj stron HTML w przegldarce WWW, aby przetestowa aplikacj w dotychczasowym ksztaBcie. Aby strona zadziaBaBa, adres musi zaczy- na si od http://. 2 WypeBnij cz[ciowo formularz i kliknij Dodaj. 3 Skrypt PHP powinien wy[wietli wyniki. dodawanie rekordów 75 testowanie wersji nieajaksowej cd. 4 Powró do formularza, wypeBnij go caBkowicie i kliknij Dodaj. 5 Tak jak wcze[niej, skrypt PHP wy[wietla wyniki. 76 dodawanie rekordów informacje dodatkowe utworzenie formularza str. 66 walidacja danych formularza " Metody POST, ogólnie rzecz biorc, str. 70 powinno si u|ywa w przypadku, gdy " Sposób walidacji danych formularza operacja przesyBania formularza od- zale|y od typu danych (liczby, cigi zna- dziaBuje na witryn. Na przykBad u|ycie ków itp.) oraz spodziewanych warto[ci formularza Nowy pracownik dodaje (liczba dodatnia, adres e-mail itp). Dla nowy rekord do bazy danych. potrzeb walidacji nazwiska osoby cz- " Metod GET zazwyczaj wykorzy- sto wystarczy si upewni, czy wpro- stuje si w celu za|dania informacji. wadzono jakkolwiek warto[. Na przykBad powinno si j zastosowa " DokBadniejsza walidacja adresu e-mail przy |daniu informacji o pracowni- obejmuje potwierdzenie, |e speBnia kach w okre[lonym wydziale. on wzorzec wyra|enia regularnego. Tego rodzaju walidacj nale|y przepro- wadza znacznie cz[ciej dla adresów e-mail ni| dla nazwisk, poniewa| adresy utworzenie elementów e-mail musz speBnia [cisBe reguBy. formularza str. 67 " Aby poprawi bezpieczeDstwo tego " Etykiety formularza speBniaj dwa cele. systemu, mo|na by zastosowa funkcj Po pierwsze, informuj u|ytkowników strip_tags() dla operacji wprowa- o przeznaczeniu okre[lonych elemen- dzania danych tekstowych. Wykorzy- tów. Po drugie, bd modyfikowane stanie tej funkcji pozwala zapobiega z wykorzystaniem JavaScript w celu atakom za pomoc skryptów krzy|o- wskazania bBdów w ajaksowej wersji wych (ang. cross-site scripting attacks formularza.  XSS). " Funkcja mysql_real_escape_ string() zapewnia specyficzn dla jzyka ochron dotyczc warto[ci tekstowych wykorzystywanych w zapy- taniach. dodawanie rekordów 77 informacje dodatkowe cd. aktualizacja bazy danych str. 73 wy[wietlenie komunikatów " Istnieje dokBadniejszy sposób zapisania o bBdach str. 74 zapytania INSERT. W tej skBadni nale|y " Aby debugowa problemy dotyczce okre[li kolumny, których dotyczy ope- PHP i MySQL, nale|y wy[wietli za- racja. W przypadku zapytania u|ywane- pytanie w celu przeanalizowania jego go w tym rozdziale byBaby to instrukcja skBadni. Nale|y równie| wywoBa funk- INSERT INTO pracownicy (wydz- cj mysql_error(), aby przekona si, ial_id, imie, nazwisko, email, jakie problemy zgBasza baza danych. telefon_wewn) VALUES ($idw, " Witryny produkcyjne nigdy nie '$fn', '$ln', '$e', $wewn). powinny ujawnia szczegóBowych komunikatów o bBdach, na przykBad uruchamianych zapytaD lub bBdów bazy MySQL. Informacje te mo|na wykorzystywa dla potrzeb debu- gowania, ale potem nale|y je ukry w wersji produkcyjnej (która powinna by pozbawiona bBdów). 78 dodawanie rekordów

Wyszukiwarka

Podobne podstrony:
Tworzenie stron WWW we Flashu 8 Projekty
Tworzenie stron WWW we Flashu CS4 CS4 PL Projekty twfcs4
Tworzenie stron WWW Ćwiczenia praktyczne Wydanie III
informatyka tworzenie stron www kurs wydanie iii radoslaw sokol ebook
04 tworzenie stron www
Tworzenie stron www wyd 2
ABC tworzenia stron WWW
ABC tworzenia stron WWW Wydanie II

więcej podobnych podstron