Tworzenie stron WWW

z wykorzystaniem Ajaksa.
Projekty
Autor: Larry Ullman
Tumaczenie: Radosaw Meryk
ISBN: 978-83-246-1553-7
Tytu oryginau: Building a Web Site
with Ajax: Visual QuickProject Guide
Format: 170x230, stron: 168
Stwrz interaktywny serwis WWW, korzystajcy z technologii AJAX!
Jakich narzdzi potrzebujesz, by stworzy stron WWW?
Jak wzbogaci witryn dziki technologii AJAX?
Jak obsugiwa dane w formacie XML?
AJAX jest skrtem od Asynchronous JavaScript and XML. Technologia ta staa si trzonem
rewolucji Web 2.0. Dzi trudno sobie wyobrazi nowoczesn aplikacj WWW, ktra
nie korzystaaby z dobrodziejstw tego rozwizania. Nie bez powodu! Intuicyjny interfejs
uytkownika, wysoki poziom interaktywnoci, wygoda oraz dynamika serwisw
korzystajcych z tego rozwizania gwarantuj, e jeszcze dugo bdzie ono na topie
technik tworzenia stron WWW.
Dziki ksice Tworzenie stron WWW z wykorzystaniem AJAKSA. Projekty poznasz proces
tworzenia strony WWW, korzystajcej z tej technologii. Autor krok po kroku wyjania zasad
dziaania oraz sposb tworzenia serwisu i kadego z elementw projektowanych dla niego
aplikacji. Pierwsze zadanie, ktre stawia on przed Tob, to zbudowanie bazy danych. Pniej
nauczysz si implementowa funkcjonalnoci takie, jak przegldanie danych, dodawanie
nowych wpisw czy te wyszukiwanie informacji. Po przeczytaniu niniejszej ksiki nie
bdzie dla Ciebie problemem poczenie na przykad technologii HTML, JavaScript, CSS,
XML i PHP w celu uzyskania dynamicznego, interaktywnego oraz efektownego serwisu
WWW. Zobaczysz take, jak poszczeglne funkcjonalnoci aplikacji WWW dziaaj
bez wykorzystania technologii AJAX, a nastpnie jak zyskuj na atrakcyjnoci po dodaniu
tej technologii. Teraz wszystko zaley tylko od Twojej wyobrani!

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Zasada dziaania AJAX

Narzdzia konieczne w procesie projektowania, wytwarzania i testowania
Przygotowanie bazy danych
Obsuga da z wykorzystaniem PHP
Przygotowanie stron HTML
Tworzenie i obsuga formularzy
Dynamiczna weryfikacja danych wprowadzanych przez uytkownika
Testowanie statycznych rozwiza
Testowanie dynamicznych rozwiza, korzystajcych z AJAX
Wykorzystanie jzyka JavaScript
Przegldanie informacji
Wyszukiwanie informacji
Dodawanie nowych wpisw do bazy
Zastosowanie formatu XML
Wykorzystanie formatu JSON
Stwrz swoj wasn, interaktywn stron WWW!

spis treci
wprowadzenie
jak dziaa ajax?
czego mona nauczy si z tej ksiki?
jak zorganizowana jest ta ksika?
potrzebne narzdzia

9
10
11
12
14

witryna internetowa
towarzyszca ksice
nastpny krok

1. tworzenie bazy danych

dostp do bazy danych MySQL
utworzenie bazy danych
utworzenie tabel

19
20
21
23

wypenienie tabel danymi

informacje dodatkowe

2. przegldanie pracownikw
co bdziemy robi?
utworzenie strony HTML
utworzenie formularza HTML
utworzenie skryptu PHP
wywietlenie listy pracownikw
zgaszanie bdw

25
27

29
30
31
32
33
34
35

nawizanie poczenia z baz danych

utworzenie arkusza stylw
wykorzystanie arkusza stylw
testowanie stron
informacje dodatkowe

3. przegldanie z wykorzystaniem technologii ajax

co bdziemy robi?
utworzenie funkcji
sprawdzenie obsugi technologii Ajax
wywoanie funkcji
konfiguracja Ajaksa
rozpoczcie strony PHP

17
18

46
47
48
49
50
52

wywietlenie listy pracownikw

obsuga odpowiedzi
wywietlenie wynikw
modyfikacja kodu HTML
testowanie warstwy Ajaksa
informacje dodatkowe

36
37
38
39
40

45
53
55
56
57
58
59

5
Ajax_00.indd 5

2008-09-12 08:54:06

spis treci
4. dodawanie rekordw
co bdziemy robi?
utworzenie strony HTML
utworzenie formularza
utworzenie elementw formularza
rozpoczcie strony PHP

63
64
65
66
67
69

walidacja danych formularza

aktualizacja bazy danych
wywietlenie komunikatw obdach
testowanie wersji nieajaksowej
informacje dodatkowe

5. dodawanie rekordw z wykorzystaniem technologii ajax

co bdziemy robi?
dodanie elementw technologii Ajax
wykorzystanie warstwy Ajaksa
konfiguracja Ajaksa
przygotowanie danych formularza
dokoczenie funkcji
przygotowanie do przesyania
wynikw w formacie XML
walidacja danych formularza

80
82
83
84
85
86
87
88

79

aktualizacja bazy danych

uzupenienie danych w formacie XML
obsuga odpowiedzi
przygotowanie strony
obsuga danych w formacie XML
wywietlenie wynikw
testowanie warstwy Ajaksa
informacje dodatkowe

6. wyszukiwanie
co bdziemy robi?
utworzenie strony HTML
utworzenie formularza
rozpoczcie strony PHP
zapytanie do bazy danych

6
Ajax_00.indd 6

70
73
74
75
77

92
93
95
96
97
99
100
102

107
108
109
111
112
113

wywietlenie wynikw
wywietlenie komunikatw o bdach
testowanie wersji niajaksowej
informacje dodatkowe

114
115
116
117

spis treci
2008-09-12 08:54:06

7. wyszukiwanie z wykorzystaniem ajaksa

co bdziemy robi?
dodanie elementw technologii Ajax
wykorzystanie warstwy Ajaksa
konfiguracja Ajaksa
dokoczenie funkcji
przygotowanie do przesyania
wynikw w formacie XML
zapytanie do bazy danych
pobranie wynikw
dokoczenie skryptu PHP
obsuga odpowiedzi

120
122
123
125
126
127
128
129
130
131

119
przygotowanie strony
obsuga danych w formacie XML
wywietlenie wynikw
obsuga nazwisk
obsuga wydziaw
obsuga adresw e-mail
wywietlenie komunikatu
o braku wynikw
dokoczenie funkcji
testowanie warstwy Ajaksa
informacje dodatkowe

dodatek A nastpne kroki

problemy zwizane z Ajaksem
alternatywy dla Ajaksa
wprowadzenie do JSON
wysyanie danych w formacie JSON
dostp do danych w formacie JSON
korzystanie z danych w formacie JSON

skorowidz

spis treci
Ajax_00.indd 7

132
133
134
136
137
139
141
142
143
144

149
150
151
152
154
156
157

zasoby w internecie
zestawy Framework
dla jzyka JavaScript
biblioteki PHP-Ajax
debugowanie kodu JavaScript
informacje dodatkowe

159
160
161
162
166

169

7
2008-09-12 08:54:06

dodawanie
rekordw

W pierwszym rozdziale utworzylimy struktur bazy danych dla witryny WWW

wywietlajcej list pracownikw. W poprzednich dwch rozdziaach opracowalimy
ajaksow i nieajaksow wersj aplikacji wywietlajcej list pracownikw wybranego wydziau. W rozdziale niniejszym opracujemy funkcj dodawania pracownikw
do bazy danych. Oczywicie rozpoczniemy od wersji nieajaksowej gwarantujcej
dostp dla wszystkich uytkownikw, a nastpnie w kolejnym rozdziale opracujemy wersj bazujc na technologii Ajax.
Rozpoczniemy od utworzenia formularza HTML, ktry pobiera wszystkie niezbdne dane. Nastpnie napiszemy skrypt PHP, ktry obsuguje przesyanie formularza
bez wykorzystania technologii Ajax. Bdzie to bardzo prosty skrypt PHP obsugujcy
formularz HTML.

63
Ajax_04.indd 63

2008-09-08 17:41:19

co bdziemy robi?
1 Najpierw, na stronach 65 68,
utworzymy stron HTML z formularzem.
W formularzu s elementy reprezentujce wszystkie dane dotyczce pracownikw zapisane w bazie
danych.

Gdy w przegldarkach bez obsugi

Ajaksa uytkownik kliknie Dodaj,
formularz zostanie przesany
do skryptu PHP.

2 Na stronach 69 74 napiszemy
skrypt PHP, ktry obsuguje formularz HTML. Skrypt dokonuje
walidacji danych formularza,
a nastpnie zwraca wyniki.
W przypadku nieprawidowego
wypenienia dowolnego pola skrypt
PHP wywietla komunikat o bdzie.
3 Na koniec, tak jak wczeniej,
przetestujemy napisane elementy aplikacji, aby uzyska pewno,
e wszystko dziaa poprawnie.

Na kocu tego rozdziau, w punkcie

Informacje dodatkowe, umiecimy
dodatkowe dane, wskazwki i zalecenia
zwizane z wykonanymi czynnociami.
W nastpnym rozdziale do utworzonych
stron dodamy elementy technologii
Ajax.

64
Ajax_04.indd 64

dodawanie rekordw
2008-09-08 17:41:19

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 stylw nadaje stronie

taki sam wygld jak pozostaym
stronom w serwisie.

dodawanie rekordw
Ajax_04.indd 65

65
2008-09-08 17:41:20

utworzenie formularza
1 Zdefiniuj komunikat informujcy
o tym, do czego suy formularz i jak naley
z niego korzysta.
...
<body>
<p>Ten formularz suy 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 nieobsugujcych

Ajaksa formularz bdzie przesany do skryptu
dodaj_pracownika.php, ktry napiszemy w dalszej
czci rozdziau.
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
Ajax_04.indd 66

dodawanie rekordw
2008-09-08 17:41:20

utworzenie elementw formularza

1 Do wprowadzania imienia, nazwiska i adresu e-mail pracownika
naley 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 rekordw
Ajax_04.indd 67

67
2008-09-08 17:41:20

utworzenie elementw formularza cd.

2 Wydzia pracownika mona wybra za pomoc rozwijanego menu.
<p><label class="tytul" id="wydzial_id_etykieta">Wydzia<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">Wydzia pomocniczy</option>
</select></label> </p>

3 Kolejne pole tekstowe suy 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 przeznaczeniu poszczeglnych elementw

(zobacz Informacje dodatkowe
na stronie 77).
5 Przycisk przesyania formularza
ma warto Dodaj.
6 Skrypt naley zapisa w pliku
dodaj_pracownika.html i umieci
w tym samym katalogu co pozostae
strony aplikacji.

68
Ajax_04.indd 68

dodawanie rekordw
2008-09-08 17:41:20

rozpoczcie strony php

Pierwszy skrypt PHP obsuguje operacj przesania formularza bez wykorzystania
technologii Ajax. Powinien to by jednoczenie prawidowy dokument HTML, dlatego
naley go rozpocz od poniszych znacznikw:

<!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 wasnoci strony zostan zdefiniowane pomidzy znacznikami PHP.

Strona musi nawiza poczenie z serwerem MySQL, dlatego naley zaadowa
skrypt mysql.inc.php.
Przed zakoczeniem dziaania skryptu poczenie MySQL musi by zamknite.
Skrypt naley zapisa w pliku dodaj_pracownika.php i umieci w tym samym
katalogu co plik dodaj_pracownika.html.

dodawanie rekordw
Ajax_04.indd 69

69
2008-09-08 17:41:20

walidacja danych formularza

Przed wykorzystaniem w zapytaniu danych wprowadzonych w formularzu naley
przeprowadzi ich walidacj. W skrypcie PHP naley wprowadzi poniszy 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 bdy, jakie wystpiy podczas

walidacji danych w formularzu.
2 Walidacja pl 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
Ajax_04.indd 70

dodawanie rekordw
2008-09-08 17:41:20

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

3 W celu uzyskania pewnoci, e dane mona

bezpiecznie wykorzysta w zapytaniu, s one przetwarzane w funkcji mysql_real_escape_string().

dodawanie rekordw
Ajax_04.indd 71

71
2008-09-08 17:41:20

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[] = 'wydzia';
}

4 Wartoci liczbowe, takie jak identyfikator wydziau 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 mona byo je bezpiecznie wykorzystywa w zapytaniu,

dla wartoci numerycznych wykonuje si rzutowanie typw
do danych typu integer.
6 Kada nieudana operacja walidacji powoduje dodanie wpisu
do tablicy $bledy.

72
Ajax_04.indd 72

dodawanie rekordw
2008-09-08 17:41:20

aktualizacja bazy danych

Zakadajc, e dane wprowadzone w formularzu pomylnie przeszy przez procedury walidacji, naley uruchomi zapytanie INSERT.
1 Jeli nie byo bdw, 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 rekordw,

ktrych dotyczyo zapytanie.

W przypadku zapytania wykorzy
stanego w tym skrypcie liczba ta
bdzie wynosia 1, bowiem dodano
jeden nowy rekord.
4 Wyniki dziaania skryptu
s wywietlane na ekranie.

dodawanie rekordw
Ajax_04.indd 73

73
2008-09-08 17:41:20

wywietlenie komunikatw o bdach

Na koniec, jeli jest taka potrzeba, naley wywietli uytkownikom informacje
o bdach, ktre wystpiy.
1 Pierwsza klauzula else dotyczy sytuacji, kiedy zapytanie nie dotyczyo
jednego wiersza. Zazwyczaj jest to sygna wystpienia bdu skadniowego
(zobacz Informacje dodatkowe na stronie 78).
...
echo '<p><strong>Dodano nowego pracownika.</strong></p>';
} else { // Wykonanie zapytania nie powiodo si.
echo '<p class="blad">Nie mona doda pracownika z powodu bdu
systemowego.</p>';
}
} else { // Bdy!
echo '<p>Wystpiy nastpujce bdy :</p><ul class="blad">';
foreach ($bledy as $e) {
echo "<li>Naley poda prawidow warto w polu:$e.</li>\n";
}
echo '</ul>';
}
mysql_close($dbc);
...

2 Druga klauzula else uruchamia si, jeli dane nie przejd pomylnie przez wszystkie
testy walidacji.
3 Poniewa bdy s zapisane w tablicy, najatwiejszym
sposobem uzyskania dostpu
do wszystkich bdw jest przetwarzanie ich w ptli.

74
Ajax_04.indd 74

dodawanie rekordw
2008-09-08 17:41:20

testowanie wersji nieajaksowej

1 Zaaduj stron HTML w przegldarce WWW, aby przetestowa aplikacj
w dotychczasowym ksztacie.
Aby strona zadziaaa, adres musi zaczyna si od http://.

2 Wypenij czciowo formularz

i kliknij Dodaj.

3 Skrypt PHP powinien wywietli wyniki.

dodawanie rekordw
Ajax_04.indd 75

75
2008-09-08 17:41:20

testowanie wersji nieajaksowej cd.

4 Powr do formularza,
wypenij go cakowicie i kliknij
Dodaj.

5 Tak jak wczeniej, skrypt PHP wywietla wyniki.

76
Ajax_04.indd 76

dodawanie rekordw
2008-09-08 17:41:20

informacje dodatkowe
utworzenie formularza str. 66
Metody POST, oglnie rzecz biorc,
powinno si uywa w przypadku, gdy
operacja przesyania formularza oddziauje na witryn. Na przykad uycie
formularza Nowy pracownik dodaje
nowy rekord do bazy danych.
Metod GET zazwyczaj wykorzystuje si w celu zadania informacji.
Na przykad powinno si j zastosowa
przy daniu informacji o pracownikach w okrelonym wydziale.

utworzenie elementw
formularza str. 67
Etykiety formularza speniaj dwa cele.
Po pierwsze, informuj uytkownikw
o przeznaczeniu okrelonych elementw. Po drugie, bd modyfikowane
z wykorzystaniem JavaScript w celu
wskazania bdw w ajaksowej wersji
formularza.

dodawanie rekordw
Ajax_04.indd 77

walidacja danych formularza

str. 70
Sposb walidacji danych formularza
zaley od typu danych (liczby, cigi znakw itp.) oraz spodziewanych wartoci
(liczba dodatnia, adres e-mail itp). Dla
potrzeb walidacji nazwiska osoby czsto wystarczy si upewni, czy wprowadzono jakkolwiek warto.
Dokadniejsza walidacja adresu e-mail
obejmuje potwierdzenie, e spenia
on wzorzec wyraenia regularnego.
Tego rodzaju walidacj naley przeprowadza znacznie czciej dla adresw
e-mail ni dla nazwisk, poniewa adresy
e-mail musz spenia cise reguy.
Aby poprawi bezpieczestwo tego
systemu, mona by zastosowa funkcj
strip_tags() dla operacji wprowadzania danych tekstowych. Wykorzystanie tej funkcji pozwala zapobiega
atakom za pomoc skryptw krzyowych (ang. cross-site scripting attacks
XSS).
Funkcja mysql_real_escape_
string() zapewnia specyficzn dla
jzyka ochron dotyczc wartoci
tekstowych wykorzystywanych w zapytaniach.

77
2008-09-08 17:41:20

informacje dodatkowe cd.

aktualizacja bazy danych str. 73
Istnieje dokadniejszy sposb zapisania
zapytania INSERT. W tej skadni naley
okreli kolumny, ktrych dotyczy operacja. W przypadku zapytania uywanego w tym rozdziale byaby to instrukcja
INSERT INTO pracownicy (wydzial_id, imie, nazwisko, email,
telefon_wewn) VALUES ($idw,
'$fn', '$ln', '$e', $wewn).

78
Ajax_04.indd 78

wywietlenie komunikatw
o bdach str. 74
Aby debugowa problemy dotyczce
PHP i MySQL, naley wywietli zapytanie w celu przeanalizowania jego
skadni. Naley rwnie wywoa funkcj mysql_error(), aby przekona si,
jakie problemy zgasza baza danych.
Witryny produkcyjne nigdy nie
powinny ujawnia szczegowych
komunikatw o bdach, na przykad
uruchamianych zapyta lub bdw
bazy MySQL. Informacje te mona
wykorzystywa dla potrzeb debugowania, ale potem naley je ukry
w wersji produkcyjnej (ktra powinna
by pozbawiona bdw).

dodawanie rekordw
2008-09-08 17:41:20