Wydawnictwo Helionul. Ko�ciuszki 1c44-100 Gliwicetel. 032 230 98 63e-mail: helion@helion.pl

Tworzenie stron WWWz wykorzystaniem Ajaksa.ProjektyAutor: Larry UllmanT³umaczenie: Rados³aw MerykISBN: 978-83-246-1553-7Tytu³ orygina³u: Building a Web Sitewith Ajax: Visual QuickProject GuideFormat: 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. Dzi� trudno sobie wyobraziæ nowoczesn¹ aplikacjê WWW, któranie korzysta³aby z dobrodziejstw tego rozwi¹zania. Nie bez powodu! Intuicyjny interfejs u¿ytkownika, wysoki poziom interaktywno�ci, wygoda oraz dynamika serwisów korzystaj¹cych z tego rozwi¹zania gwarantuj¹, ¿e jeszcze d³ugo bêdzie ono na topietechnik 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 wyja�nia 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ó�niej nauczysz siê implementowaæ funkcjonalno�ci 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 funkcjonalno�ci aplikacji WWW dzia³aj¹bez wykorzystania technologii AJAX, a nastêpnie jak zyskuj¹ na atrakcyjno�ci po dodaniutej technologii. Teraz wszystko zale¿y tylko od Twojej wyobra�ni!

� 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� Testowanie statycznych rozwi¹zañ� Testowanie dynamicznych rozwi¹zañ, korzystaj¹cych z AJAX� Wykorzystanie jêzyka JavaScript� Przegl¹danie informacji� Wyszukiwanie informacji� Dodawanie nowych wpisów do bazy� Zastosowanie formatu XML� Wykorzystanie formatu JSON

Stwórz swoj¹ w³asn¹, interaktywn¹ stronê WWW!

5

spis treściwprowadzenie 9jak działa ajax? 10czego można nauczyć się z tej książki? 11jak zorganizowana jest ta książka? 12potrzebne narzędzia 14

witryna internetowa towarzysząca książce 17

następny krok 18

1. tworzenie bazy danych 19

dostęp do bazy danych MySQL 20utworzenie bazy danych 21utworzenie tabel 23

wypełnienie tabel danymi 25informacje dodatkowe 27

2. przeglądanie pracowników 29

co będziemy robić? 30utworzenie strony HTML 31utworzenie formularza HTML 32utworzenie skryptu PHP 33wyświetlenie listy pracowników 34zgłaszanie błędów 35

nawiązanie połączenia z bazą danych 36utworzenie arkusza stylów 37wykorzystanie arkusza stylów 38testowanie stron 39informacje dodatkowe 40

3. przeglądanie z wykorzystaniem technologii ajax 45

co będziemy robić? 46utworzenie funkcji 47sprawdzenie obsługi technologii Ajax 48wywołanie funkcji 49konfiguracja Ajaksa 50rozpoczęcie strony PHP 52

wyświetlenie listy pracowników 53obsługa odpowiedzi 55wyświetlenie wyników 56modyfikacja kodu HTML 57testowanie warstwy Ajaksa 58informacje dodatkowe 59

Ajax_00.indd 5 2008-09-12 08:54:06

6

spis treści

spis treści

5. dodawanie rekordów z wykorzystaniem technologii ajax 79

co będziemy robić? 80dodanie elementów technologii Ajax 82wykorzystanie warstwy Ajaksa 83konfiguracja Ajaksa 84przygotowanie danych formularza 85dokończenie funkcji 86przygotowanie do przesyłania

wyników w formacie XML 87walidacja danych formularza 88

aktualizacja bazy danych 92uzupełnienie danych w formacie XML 93obsługa odpowiedzi 95przygotowanie strony 96obsługa danych w formacie XML 97wyświetlenie wyników 99testowanie warstwy Ajaksa 100informacje dodatkowe 102

6. wyszukiwanie 107

co będziemy robić? 108utworzenie strony HTML 109utworzenie formularza 111rozpoczęcie strony PHP 112zapytanie do bazy danych 113

wyświetlenie wyników 114wyświetlenie komunikatów o błędach 115testowanie wersji niajaksowej 116informacje dodatkowe 117

4. dodawanie rekordów 63

co będziemy robić? 64utworzenie strony HTML 65utworzenie formularza 66utworzenie elementów formularza 67rozpoczęcie strony PHP 69

walidacja danych formularza 70aktualizacja bazy danych 73wyświetlenie komunikatów obłędach 74testowanie wersji nieajaksowej 75informacje dodatkowe 77

Ajax_00.indd 6 2008-09-12 08:54:06

7spis treści

7. wyszukiwanie z wykorzystaniem ajaksa 119

co będziemy robić? 120dodanie elementów technologii Ajax 122wykorzystanie warstwy Ajaksa 123konfiguracja Ajaksa 125dokończenie funkcji 126przygotowanie do przesyłania

wyników w formacie XML 127zapytanie do bazy danych 128pobranie wyników 129dokończenie skryptu PHP 130obsługa odpowiedzi 131

przygotowanie strony 132obsługa danych w formacie XML 133wyświetlenie wyników 134obsługa nazwisk 136obsługa wydziałów 137obsługa adresów e-mail 139wyświetlenie komunikatu

o braku wyników 141dokończenie funkcji 142testowanie warstwy Ajaksa 143informacje dodatkowe 144

dodatek A następne kroki 149

problemy związane z Ajaksem 150alternatywy dla Ajaksa 151wprowadzenie do JSON 152wysyłanie danych w formacie JSON 154dostęp do danych w formacie JSON 156korzystanie z danych w formacie JSON 157

zasoby w internecie 159zestawy Framework

dla języka JavaScript 160biblioteki PHP-Ajax 161debugowanie kodu JavaScript 162informacje dodatkowe 166

skorowidz 169

Ajax_00.indd 7 2008-09-12 08:54:06

dodawanie rekordów

63

4W pierwszym rozdziale utworzyliśmy strukturę bazy danych dla witryny WWW wyświetlającej listę pracowników. W poprzednich dwóch rozdziałach opracowaliśmy ajaksową i nieajaksową wersję aplikacji wyświetlającej listę pracowników wybrane-go wydziału. W rozdziale niniejszym opracujemy funkcję dodawania pracowników do bazy danych. Oczywiście rozpoczniemy od wersji nieajaksowej gwarantującej dostęp dla wszystkich użytkowników, a następnie — w kolejnym rozdziale — opracu-jemy wersję bazującą na technologii Ajax.

Rozpoczniemy od utworzenia formularza HTML, który pobiera wszystkie niezbęd-ne dane. Następnie napiszemy skrypt PHP, który obsługuje przesyłanie formularza bez wykorzystania technologii Ajax. Będzie to bardzo prosty skrypt PHP obsługujący formularz HTML.

Ajax_04.indd 63 2008-09-08 17:41:19

64 dodawanie rekordów

co będziemy robić?

1 Najpierw, na stronach 65 – 68, utworzymy stronę HTML z formu-larzem.

W formularzu są elementy repre-zentujące wszystkie dane dotyczą-ce pracowników zapisane w bazie danych.

Gdy w przeglądarkach bez obsługi Ajaksa użytkownik kliknie Dodaj, formularz zostanie przesłany do skryptu PHP.

Na końcu tego rozdziału, w punkcie „Informacje dodatkowe”, umieścimy dodatkowe dane, wskazówki i zalecenia związane z wykonanymi czynnościami.

W następnym rozdziale do utworzonych stron dodamy elementy technologii Ajax.

2 Na stronach 69 – 74 napiszemy skrypt PHP, który obsługuje for-mularz HTML. Skrypt dokonuje walidacji danych formularza, a następnie zwraca wyniki.

W przypadku nieprawidłowego wypełnienia dowolnego pola skrypt PHP wyświetla komunikat o błędzie.

3 Na koniec, tak jak wcześniej, przetestujemy napisane elemen-ty aplikacji, aby uzyskać pewność, że wszystko działa poprawnie.

Ajax_04.indd 64 2008-09-08 17:41:19

65dodawanie rekordów

utworzenie strony html

Element <title> opisuje przeznaczenie strony.

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>

Arkusz stylów nadaje stronie taki sam wygląd jak pozostałym stronom w serwisie.

Ajax_04.indd 65 2008-09-08 17:41:20

66 dodawanie rekordów

utworzenie formularza

1 Zdefiniuj komunikat informujący o tym, do czego służy formularz i jak należy z niego korzystać.

4 Dla warstwy ajaksowej istotne znaczenie ma wartość atrybutu id formularza (prac_form).

3 Formularz wykorzystuje metodę POST, a nie GET (zobacz „Informacje dodatkowe” na stronie 77).

2 W przypadku przeglądarek nieobsługujących Ajaksa formularz będzie przesłany do skryptu dodaj_pracownika.php, który napiszemy w dalszej części rozdziału.

... <body> <p>Ten formularz służy do wprowadzania danych dotyczących pracownika (wszystkie pola są obowiązkowe):</p>

<form action="dodaj_pracownika.php" method="post" id="prac_form"> </form> </body> ...

Ajax_04.indd 66 2008-09-08 17:41:20

67dodawanie 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>

Ajax_04.indd 67 2008-09-08 17:41:20

68 dodawanie rekordów

utworzenie elementów formularza cd.

2 Wydział pracownika można wybrać za pomocą rozwijanego menu.

4 Etykiety informują o przezna-czeniu poszczególnych elementów (zobacz „Informacje dodatkowe” na stronie 77).

5 Przycisk przesyłania formularza ma wartość Dodaj.

6 Skrypt należy zapisać w pliku dodaj_pracownika.html i umieścić w tym samym katalogu co pozostałe strony aplikacji.

<p><label class="tytul" id="telefon_wewn_etykieta">Numer wewnętrzny<input type="text" id="telefon_wewn" name="telefon_ wewn" /></label> </p>

<p><input name="dodaj" type="submit" value="Dodaj" /></p> </form> ...

3 Kolejne pole tekstowe służy do wprowadzania numeru telefonu wewnętrznego pracownika.

<p><label class="tytul" id="wydzial_id_etykieta">Wydział<select id="wydzial_id" name="wydzial_id">

<option value="1">Kadry</option> <option value="2">Księgowość</option> <option value="3">Marketing</option> <option value="4">Wydział pomocniczy</option> </select></label> </p>

Ajax_04.indd 68 2008-09-08 17:41:20

69dodawanie rekordów

rozpoczęcie strony php

Pierwszy skrypt PHP obsługuje operację przesłania formularza bez wykorzystania technologii Ajax. Powinien to być jednocześnie prawidłowy dokument HTML, dlatego należy go rozpocząć od poniższych znaczników:

Wszystkie własności strony zostaną zdefiniowane pomiędzy znacznikami PHP.

Strona musi nawiązać połączenie z serwerem MySQL, dlatego należy załadować skrypt mysql.inc.php.

Przed zakończeniem działania skryptu połączenie MySQL musi być zamknięte.

Skrypt należy zapisać w pliku dodaj_pracownika.php i umieścić w tym samym katalogu co plik dodaj_pracownika.html.

<!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>

Ajax_04.indd 69 2008-09-08 17:41:20

70 dodawanie rekordów

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:

if (!empty($_POST['nazwisko'])) { $ln = mysql_real_escape_string($_POST['nazwisko'], $dbc); } else { $bledy[] = 'nazwisko'; }

1 W tablicy $bledy będą zapisane wszystkie błędy, jakie wystąpiły podczas walidacji danych w formularzu.

2 Walidacja pól tekstowych polega na sprawdzeniu, czy nie są one puste (zobacz „Informacje dodatkowe” na stronie 77).

... require_once('mysql.inc.php'); $bledy = array(); if (!empty($_POST['imie'])) { $fn = mysql_real_escape_string($_POST['imie'], $dbc); } else { $bledy[] = 'imię'; }

Ajax_04.indd 70 2008-09-08 17:41:20

71dodawanie rekordów

3 W celu uzyskania pewności, że dane można bezpiecznie wykorzystać w zapytaniu, są one przetwa-rzane w funkcji mysql_real_escape_string().

if (!empty($_POST['email'])) { $e = mysql_real_escape_string($_POST['email'],$dbc); } else { $bledy[] = 'adres email'; }

Ajax_04.indd 71 2008-09-08 17:41:20

72 dodawanie rekordów

walidacja danych formularza cd.

5 Aby można było 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.

if (isset($_POST['wydzial_id']) && is_numeric($_POST['wydzial_id']) && ($_POST['wydzial_id']>0)) {

$idw = (int) $_POST['wydzial_id']; } else { $bledy[] = 'wydział'; }

4 Wartości liczbowe, takie jak identyfikator wydziału 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 wewnętrzny'; } mysql_close($dbc); ...

Ajax_04.indd 72 2008-09-08 17:41:20

73dodawanie rekordów

aktualizacja bazy danych

Zakładając, że dane wprowadzone w formularzu pomyślnie przeszły przez proce-dury walidacji, należy uruchomić zapytanie INSERT.

1 Jeśli nie było błędów, to ten warunek będzie prawdziwy (ponieważ zmienna $bledy będzie pusta).

3 Funkcja mysql_affected_rows() zwraca liczbę rekordów, których dotyczyło zapytanie. W przypadku zapytania wykorzy-stanego w tym skrypcie liczba ta będzie wynosiła 1, bowiem dodano jeden nowy rekord.

4 Wyniki działania skryptu są wyświetlane na ekranie.

2 Instrukcja INSERT dodaje nowego pracownika do bazy danych, wykorzystując dane przetworzone za pomocą procedur walidacyjnych (zobacz „Informacje dodatkowe” na stronie 78).

... $bledy[] = 'numer wewnętrzny'; } 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); ...

Ajax_04.indd 73 2008-09-08 17:41:20

74 dodawanie rekordów

wyświetlenie komunikatów o błędach

1 Pierwsza klauzula else dotyczy sytuacji, kiedy zapytanie nie dotyczyło jednego wiersza. Zazwyczaj jest to sygnał wystąpienia błędu składniowego (zobacz „Informacje dodatkowe” na stronie 78).

2 Druga klauzula else uru-chamia się, jeśli dane nie przej-dą pomyślnie przez wszystkie testy walidacji.

3 Ponieważ błędy są zapisa-ne w tablicy, najłatwiejszym sposobem uzyskania dostępu do wszystkich błędów jest prze-twarzanie ich w pętli.

... echo '<p><strong>Dodano nowego pracownika.</strong></p>'; } else { // Wykonanie zapytania nie powiodło się. echo '<p class="blad">Nie można dodać pracownika z powodu błędu systemowego.</p>';

} } else { // Błędy! echo '<p>Wystąpiły następujące błędy :</p><ul class="blad">'; foreach ($bledy as $e) { echo "<li>Należy podać prawidłową wartość w polu:$e.</li>\n"; } echo '</ul>'; } mysql_close($dbc); ...

Na koniec, jeśli jest taka potrzeba, należy wyświetlić użytkownikom informacje o błędach, które wystąpiły.

Ajax_04.indd 74 2008-09-08 17:41:20

75dodawanie rekordów

testowanie wersji nieajaksowej

1 Załaduj stronę HTML w przeglądarce WWW, aby przetestować aplikację w dotychczasowym kształcie.

3 Skrypt PHP powinien wyświetlić wyniki.

2 Wypełnij częściowo formularz i kliknij Dodaj.

Aby strona zadziałała, adres musi zaczy-nać się od http://.

Ajax_04.indd 75 2008-09-08 17:41:20

76 dodawanie rekordów

testowanie wersji nieajaksowej cd.

4 Powróć do formularza, wypełnij go całkowicie i kliknij Dodaj.

5 Tak jak wcześniej, skrypt PHP wyświetla wyniki.

Ajax_04.indd 76 2008-09-08 17:41:20

77dodawanie rekordów

informacje dodatkowe

utworzenie formularza str. 66• MetodyPOST, ogólnie rzecz biorąc,

powinno się używać w przypadku, gdy operacja przesyłania formularza od-działuje na witrynę. Na przykład użycie formularza Nowy pracownik dodaje nowy rekord do bazy danych.

• MetodęGET zazwyczaj wykorzy-stuje się w celu zażądania informacji. Na przykład powinno się ją zastosować przy żądaniu informacji o pracowni-kach w określonym wydziale.

utworzenie elementów formularza str. 67• Etykietyformularzaspełniajądwacele.

Po pierwsze, informują użytkowników o przeznaczeniu określonych elemen-tów. Po drugie, będą modyfikowane z wykorzystaniem JavaScript w celu wskazania błędów w ajaksowej wersji formularza.

walidacja danych formularza str. 70• Sposóbwalidacjidanychformularza

zależy od typu danych (liczby, ciągi zna-ków itp.) oraz spodziewanych wartości (liczba dodatnia, adres e-mail itp). Dla potrzeb walidacji nazwiska osoby czę-sto wystarczy się upewnić, czy wpro-wadzono jakąkolwiek wartość.

• Dokładniejszawalidacjaadresue-mailobejmuje potwierdzenie, że spełnia 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 e-mail muszą spełniać ścisłe reguły.

• Abypoprawićbezpieczeństwotegosystemu, można by zastosować funkcję strip_tags() dla operacji wprowa-dzania danych tekstowych. Wykorzy-stanie tej funkcji pozwala zapobiegać atakom za pomocą skryptów krzyżo-wych (ang. cross-site scripting attacks — XSS).

• Funkcjamysql_real_escape_string() zapewnia specyficzną dla języka ochronę dotyczącą wartości tekstowych wykorzystywanych w zapy-taniach.

Ajax_04.indd 77 2008-09-08 17:41:20

78 dodawanie rekordów

informacje dodatkowe cd.

aktualizacja bazy danych str. 73• Istniejedokładniejszysposóbzapisania

zapytania INSERT. W tej składni należy określić kolumny, których dotyczy ope-racja. W przypadku zapytania używane-go w tym rozdziale byłaby to instrukcja INSERT INTO pracownicy (wydz-ial_id, imie, nazwisko, email, telefon_wewn) VALUES ($idw, '$fn', '$ln', '$e', $wewn).

wyświetlenie komunikatów o błędach str. 74• Abydebugowaćproblemydotyczące

PHP i MySQL, należy wyświetlić za-pytanie w celu przeanalizowania jego składni. Należy również wywołać funk-cję mysql_error(), aby przekonać się, jakie problemy zgłasza baza danych.

• Witrynyprodukcyjnenigdyniepowinny ujawniać szczegółowych komunikatów o błędach, na przykład uruchamianych zapytań lub błędó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 błędów).

Ajax_04.indd 78 2008-09-08 17:41:20