AJAX i PHP.

Tworzenie
interaktywnych aplikacji
internetowych. Wydanie II
Autorzy: Bogdan Brinzarea, Cristian Darie
Tumaczenie: Julia Szajkowska
ISBN: 978-83-246-2768-4
Tytu oryginau: AJAX and PHP: Building Modern
Web Applications 2nd Edition
Format: B5, stron: 304

Jak tworzy szybsze i sprawniejsze aplikacje internetowe?

Jak pracowa z bibliotek jQuery?
Jak wprowadza nowe rozwizania do ju istniejcych stron?
Wprowadzenie technologii AJAX pozwolio na tworzenie bardziej atrakcyjnych
i przyjaznych uytkownikowi witryn, ktre nie wymagaj przeadowywania po kadej
interakcji. To zapewnio AJAX-owi ogromn popularno wrd webmasterw. Otrzymali
bowiem doskonae narzdzie do projektowania interaktywnych i dynamicznych aplikacji,
tak podanych w dobie WEB 2.0. Jednak nic nie jest doskonae i nawet AJAX, mimo
wielkiego potencjau, ma swoje saboci i ograniczenia. Jakie? W trakcie lektury ksiki
poznasz plusy i minusy tej technologii!
Intencj autorw byo przede wszystkim przekazanie wiedzy niezbdnej do opanowania
sztuki tworzenia interaktywnych aplikacji, wykorzystujcych PHP, JavaScript, MySQL
i jQuery. Dowiesz si std rwnie, jak przeprowadza weryfikacj danych wprowadzanych
na stronie za pomoc technologii AJAX i jak czy ze sob funkcje programu wystpujce
po stronie serwera z tymi, ktre pojawiaj si po stronie klienta. Poznasz skuteczne
metody debugowania kodu. Ponadto na kilku rozbudowanych przykadach nauczysz si
sprawnie pracowa z bibliotek jQuery. Autorzy poka Ci, jak unika najczstszych
bdw, tworzy wydajny kod AJAX z myl o pozycjonowaniu witryny oraz w prosty
sposb wprowadza nowe rozwizania, take do istniejcych ju stron internetowych.
Przygotowanie rodowiska pracy
Wprowadzenie w wiat zagadnie technologii AJAX
JavaScript i klient AJAX
Programowanie obiektowe w JavaScript
Skrypty PHP i uywanie MySQL po stronie serwera
Weryfikacja poprawnoci wprowadzanych danych za pomoc AJAX
Debugowanie i profilowanie aplikacji AJAX
Zaawansowane metody budowania aplikacji internetowych
Arkusze danych w technologii AJAX
Opanuj sztuk tworzenia aplikacji WEB 2.0!

Spis treci
O autorach

O recenzencie

Wprowadzenie

11

Rozdzia 1. wiat technologii AJAX i jzyka PHP

17

Oglny zarys
Technologia AJAX a Web 2.0
Strony internetowe od 1990 roku
Protok HTTP i jzyk HTML
PHP i inne technologie strony serwera
JavaScript i inne technologie strony klienta
Czego zatem brakuje?
wiat technologii AJAX
Co skada si na narzdzia AJAX?
Kiedy warto uywa technologii AJAX, a kiedy naley z niej zrezygnowa?
Narzdzia i rda
Przygotowanie rodowiska pracy
Prosta aplikacja wykorzystujca AJAX i PHP
Podsumowanie

Rozdzia 2. JavaScript i klient AJAX

JavaScript a obiektowy model dokumentu
Zdarzenia w jzyku JavaScript i model DOM
I znowu model DOM
JavaScript, model DOM i arkusze stylw CSS
Uywanie obiektw klasy XMLHttpRequest
Tworzenie obiektu klasy XMLHttpRequest
Obsuga wyjtkw w jzyku JavaScript
Tworzenie lepszych obiektw dla przegldarki Internet Explorer 6

Inicjowanie dania za pomoc obiektu klasy XMLHttpRequest

Obsuga odpowiedzi przysyanych z serwera

18
19
20
20
22
22
24
24
27
28
29
30
31
43

45
45
51
55
59
63
63
64
66

68
70

Spis treci

Praca z dokumentami XML

Wicej na temat obsugi bdw i zwracania wyjtkw
Tworzenie struktury pliku XML
Podsumowanie

Rozdzia 3. Obiektowy JavaScript

78
84
85
86

87

Dlaczego jzyk JavaScript ma tak due znaczenie?

Idea programowania obiektowego
Hermetyzacja
Dziedziczenie
Polimorfizm
Programowanie obiektowe w jzyku JavaScript
W jzyku JavaScript obiekty s sownikami
Funkcje w jzyku JavaScript

88
88
89
90
91
91
92
94

Funkcje JavaScript jako obiekty pierwszej klasy

Funkcje wewntrzne
Domknicia

95
96
97

Klasy w jzyku JavaScript

98

Konstruktory
Diagramy klas
Odwoania do funkcji zewntrznych
Prototypy
Waciwoci i metody instancji
Metody i waciwoci statyczne
Prywatni uczestnicy klasy

98
100
102
103
104
105
106

Kontekst wykonania w jzyku JavaScript

107

Kiedy var x, kiedy this.x, a kiedy x?

Praca we waciwym kontekcie

109
110

Praktyczne zagadnienia programowania obiektowego w JavaScript wstp do notacji JSON 112

Idea formatu JSON
113
Prosty przykad pracy z danymi w formacie JSON
114
Podsumowanie
117

Rozdzia 4. Skrypty PHP i uywanie MySQL po stronie serwera

PHP, DOM i XML
Jzyk PHP i format JSON
Przekazywanie zmiennych i obsuga bdw w jzyku PHP
Praca z baz MySQL
Tworzenie tabel w bazie danych
Przetwarzanie danych
czenie si z baz danych i wykonywanie zapyta

Podsumowanie

119
120
125
129
139
139
142
143
149

Rozdzia 5. Weryfikacja poprawnoci wprowadzanych danych za pomoc AJAX

151

Implementacja weryfikacji poprawnoci danych z zastosowaniem technologii AJAX

Obiekt klasy XMLHttpRequest, wersja 2.
Weryfikacja danych z wykorzystaniem moliwoci technologii AJAX
Podsumowanie

152
156
164
185

Spis treci

Rozdzia 6. Debugowanie i profilowanie aplikacji AJAX

Debugowanie i profilowanie kodu w przegldarce Internet Explorer
Uruchamianie debugowania w przegldarkach Internet Explorer 6 i Internet Explorer 7
Debugowanie kodu w przegldarce Internet Explorer 8
Inne narzdzia debugujce w przegldarce Internet Explorer
Debugowanie i profilowanie kodu w przegldarce Firefox
Dodatek Firebug
Dodatek Venkman JavaScript Debugger
Dodatek Web Developer
Podsumowanie

187
188
188
189
196
197
198
200
201
202

Rozdzia 7. Zaawansowane rozwizania i metody budowania aplikacji internetowych 203

Pozyskiwanie przewidujce
Wskanik postpu
Nieinwazyjne kodowanie JavaScript
Progresywne ulepszanie i eleganckie przemijanie
Asynchroniczne wysyanie plikw za pomoc aplikacji AJAX
Wysyanie plikw za pomoc protokou HTTP
Asynchroniczne wysyanie plikw z uyciem znacznika iframe
i rozwiza
technologii AJAX
Wywoania midzydomenowe
Realizacja wywoa
midzydomenowych za pomoc serwera proxy
Realizacja wywoa
midzydomenowych za pomoc aplikacji Flash
Realizacja wywoa
midzydomenowych za pomoc znacznika <iframe>
Realizacja wywoa
midzydomenowych za pomoc obiektw JSONP
Atak typu cross-site request forgery
Przejmowanie kontroli za pomoc obiektw JSON
Zmniejszenie ryzyka zaistnienia ataku CSRF
Ataki typu cross-site scripting
Ataki przeprowadzane za pomoc kodu wykorzystujcego luki w zabezpieczeniach
(ang. exploits)

206
207
208
210
211
212
212
218
219
219
220
220
221
222
222
223
223

Nietrway atak typu XSS

Trway atak typu XSS

Unikanie atakw typu XSS

223
224

224

Weryfikacja danych wejciowych

Zmiana zestawu znakw
Zabezpieczanie plikw cookie

Podsumowanie

Rozdzia 8. Czat bazujcy na AJAX i jQuery

Czatuj z AJAX
Szkielet jQuery
Zanim zaczniemy
Pierwsze kroki

224
225
225

226

227
227
228
229
229

Selektory obiektw modelu DOM w szkielecie jQuery

Obiekt osonowy szkieletu jQuery

230
230

Spis treci

a
cuchowanie metod
Obsuga wyjtkw
Prosty przykad
Podstawowe idee
Czat w technologii AJAX
Aplikacja czatu
Podsumowanie

231
231
232
233
234
235
261

Rozdzia 9. Arkusz danych w technologii AJAX

263

Implementacja kodu arkusza danych AJAX

Analiza kodu

265
266

Baza danych
Style i kolory
Po stronie serwera
Budowanie arkusza danych krok po kroku

Podsumowanie

Dodatek. Przygotowanie rodowiska pracy

Instalacja pakietu XAMPP
Instalacja pakietu XAMPP w systemie Windows
Instalacja pakietu XAMPP w systemie Linux
Przygotowanie bazy danych ajax

Skorowidz

266
267
269
270

278

279
280
280
283
283

287

9
Arkusz danych
w technologii AJAX
Najbardziej powszechn metod przedstawiania danych jest wykorzystanie formy arkusza
danych. W arkuszu mona prezentowa dane wszelkiego rodzaju od zawartoci ksiki adresowej do zestawienia danych logistycznych. Poniewa firmy potrzeboway moliwoci przechowywania informacji w scentralizowanych archiwach, nie trzeba byo dugo czeka na pojawienie si pierwszych aplikacji pozwalajcych zapisywa dane w internecie czy intranecie
w postaci arkusza. Niestety, w porwnaniu do swoich stacjonarnych odpowiednikw aplikacje
te byy bardzo mocno okrojone praca z nimi wymagaa ogromnego wysiku i duych nakadw czasu. Dodatkowym problemem bya implementacja rozwizania (szczeglnie jeli
w gr wchodzia kontrola rnych poziomw dostpu na rnych serwerach), a opnienia
wynikajce z potrzeby odwieania zawartoci strony, zwizane niejednokrotnie z wykonywaniem najprostszych operacji sortowania czy edytowania, sprawiay, e praca z dostpnymi
w sieci arkuszami danych bya wysoce niewygodna i mocno obciajca dla maszyn.
Jeste bystrym czytelnikiem, wic na pewno domylie si ju, e aktualizacj zawartoci
arkusza mona przeprowadzi za pomoc narzdzi dostpnych w technologii AJAX. Ju za
chwil pokaemy Ci, jak to zrobi ! Tak zaprojektowana aplikacja bdzie odwieaa zawarto
arkusza bez potrzeby ponownego otwierania strony, bdzie potrafia przechowywa dane po
stronie klienta (zamiast wysya je za kadym razem na serwer) i bdzie umoliwiaa zmian
swojego wygldu w kilku uderzeniach w klawiatur! Pora poegna na zawsze migajce ekrany niepenych zestawie i sesje wygasajce tu przed ukoczeniem pracy. yczymy Ci miej
zabawy!

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

W tym rozdziale wykorzystamy dodatek szkieletu jQuery o nazwie jqGrid. Dodatek ten jest
dostpny za darmo do uytku prywatnego i komercyjnego (cho autorzy nie wzgardz dobrowolnym wsparciem finansowym). Mona pobra go ze strony http://www.trirand.com/blog/.
Zapewne domylie si, e wszystkie operacje po stronie serwera bd realizowane za pomoc
skryptu PHP, ale pamitaj, e dodatek jqGrid potrafi wsppracowa rwnie z innymi jzykami skryptowymi. Za prac arkusza po stronie klienta bd odpowiaday biblioteka jQuery
JavaScript i technologia JSON. Wygld arkusza zdefiniujemy w odpowiednim arkuszu stylw
CSS, wykorzystujc w tym celu motywy. W ten sposb jego zmiana nie bdzie wymagaa
wiele zachodu. Zacznijmy od zapoznania si z moliwociami dodatku jqGrid. Ju wkrtce
przekonasz si, e nowo nabyte umiejtnoci pracy w technologii AJAX pozwol Ci szybko
wykorzysta moliwoci tego narzdzia przy tworzeniu dowolnego serwisu WWW.
Ukoczony arkusz bdzie wyglda tak, jak przedstawia to rysunek 9.1.

Rysunek 9.1. Arkusz danych w technologii AJAX zbudowany na szkielecie jQuery

Przyjrzyjmy si kodowi odpowiedzialnemu za utworzenie funkcji arkusza i zabierajmy si

do pracy.

264

Rozdzia 9. Arkusz danych w technologii AJAX

Implementacja kodu arkusza danych AJAX

Pliki i katalogi niezbdne do omwienia tego przykadu zostay udostpnione w archiwum
wszystkich przykadw z ksiki, ale moesz te przepisa kod osobicie.
Zachcamy Ci do pobrania przykadowej aplikacji z internetu, poniewa jest to szybsze
i bezpieczniejsze (unikniesz w ten sposb bdw popenianych podczas przepisywania kodu).
Jeeli zdecydujesz si na to rozwizanie, wystarczy, e wykonasz nastpujce kroki:
1. Skopiuj katalog grid z archiwum do katalogu ajax na serwerze.
2. Pocz si z baz danych i wykonaj w niej kod SQL zawarty w pliku product.sql.
3. Wprowad do pliku config.php dane uytkownika bazy i haso.
4. Otwrz w przegldarce adres http://localhost/ajax/grid. Efekt powinien wyglda
tak jak na rysunku 9.1.
5. Moesz te sprawdzi od raz funkcj edytowania zawartoci. Kliknij wybran komrk,
wprowad zmiany i zaakceptuj je klawiszem Enter. Rysunek 9.2 pokazuje wygld
aplikacji w trybie edycji danych.

Rysunek 9.2. Edycja wiersza

265

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Analiza kodu
Jeeli wolisz wasnorcznie zapisa kod caej aplikacji, znajdziesz go w dalszej czci tego
rozdziau. Na razie zajmiemy si szybkim przegldem plikw tworzcych arkusz danych.
Szczegowe omwienie ich zawartoci znajdziesz na kocu rozdziau.
Arkusz danych jest zbudowany z kodu zawartego w kilku plikach.
Q Skrypt odpowiedzialny za utworzenie bazy danych arkusza znajduje si w pliku
product.sql.
Q Pliki config.php i error_handler.php to nasze standardowe skrypty pomocnicze.
Q Dziaania po stronie serwera s realizowane za pomoc skryptw zapisanych

w plikach grid.php i grid.class.php.

Q Cz aplikacji dziaajca po stronie klienta zostaa umieszczona w pliku index.html.
Q Skrypty jQuery wywoywane z poziomu pliku index.html znajduj si w katalogu

scripts.

Rysunek 9.3. Skadniki aplikacji arkusza danych

Baza danych
Edytowalny arkusz danych wywietla zawarto fikcyjnej bazy towarw. Na serwerze umiecilimy tabel danych product zbudowan z nastpujcych pl:
Q product_id unikatowy numer generowany w bazie danych automatycznie

za pomoc autoinkrementacji. Jest to klucz gwny tej tabeli.

Q name nazwa towaru.
Q price cena towaru wystawionego na sprzeda.
Q on_promotion pole liczbowe przyjmujce wartoci 0 lub 1 (odpowiednik wartoci

logicznych prawda i fasz). W interfejsie jest ono realizowane za pomoc pola wyboru.
Wybr pola product_id na klucz gwny arkusza nasuwa si automatycznie, poniewa przyjmuje ono unikatow warto dla kadego z towarw. Pole to nigdy nie bdzie puste, gdy jego
zawarto jest uzupeniana automatycznie za pomoc funkcji inkrementacji wartoci w chwili
dodawania towarw do bazy danych:

266

Rozdzia 9. Arkusz danych w technologii AJAX

CREATE TABLE product

(
product_id INT UNSIGNED NOT NULL AUTO_INCREMENT,
name VARCHAR(50) NOT NULL DEFAULT '',
price DECIMAL(10,2) NOT NULL DEFAULT '0.00',
on_promotion TINYINT NOT NULL DEFAULT '0',
PRIMARY KEY (product_id)
);

Zawarto pozostaych pl nie wymaga szerszego omawiania adne z nich nie moe pozosta puste i kademu z nich, z wyjtkiem pola product_id, przypisujemy rcznie inn warto .
Pole tinyint bdzie pojawia si w arkuszu w postaci pola wyboru, ktre uytkownik bdzie
zaznacza w razie potrzeby. Pole on_promotion przechowuje zmienne typu tinyint, poniewa
zapisywane bd w nim jedynie wartoci 1 lub 0 (prawda lub fasz).

Style i kolory
Zostawmy na razie kwesti bazy danych i zajmijmy si aspektami bardziej powizanymi z kodem aplikacji. Pora zorientowa si wreszcie, w jaki sposb dziaa nasz arkusz danych.
Wspominalimy ju, e za wygld aplikacji bdzie odpowiada osobny arkusz stylw CSS.
W pliku index.html znajdziesz nastpujcy fragment kodu:
<link rel="stylesheet" type="text/css" href="scripts/themes/coffee/grid.css"
title="coffee" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />

Katalog themes zawiera definicje rnych motyww graficznych. W prezentowanym powyej

fragmencie kodu pojawia si nazwa coffee, ale moesz zmieni j na inn, na przykad green,
jeli chcesz zmieni kolory arkusza. Moesz te utworzy (zachowujc konwencj nazw) wasny
motyw graficzny, jeli przygotujesz odpowiednie pliki graficzne, zapiszesz je w podkatalogu
katalogu themes i zmienisz nazw motywu we wskazanym wierszu kodu. Wygld przyciskw
aplikacji zaley od cieki imgpath podanej w pliku index.html 'scripts/themes/green/images'.
Jeeli chcesz go zmieni , musisz zmieni te nazw motywu w tej cieki.
Rozwizanie wymagajce modyfikowania nazwy katalogu w dwch miejscach pliku jest potencjalnym rdem bdw, wic naley zachowa szczegln ostrono w czasie przeprowadzania tej operacji. Z pomoc przyjdzie nam biblioteka jQuery, ktra pozwoli zastosowa
sprytne rozwizanie polegajce na dynamicznym wybieraniu arkusza CSS i zmienianiu cieki
imgpath na podstawie okrelonej wczeniej nazwy motywu.
Sztuczka, ktr mamy zamiar si posuy , wymaga stworzenia dynamicznie znacznika <link>
wewntrz sekcji <head> i okrelenia jego atrybutu tak, by wskazywa na okrelony motyw.
Od tej pory zmiana motywu bdzie ogranicza si do podania nowej nazwy zmiennej skryptu
JavaScript.

267

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Definicje stylw okna nakadki zawiera plik jqModal.css, ktry jest czci dodatku jqModal.
(Funkcje umoliwiajce jego dziaanie znajduj si w pliku jqModal.js w katalogu scripts/js).
Wtyczk i jej arkusz stylw moesz pobra ze strony http://dev.iceburg.net/jquery/jqModal/.
W sekcji <head> pliku index.html znajduje si te kilka deklaracji script src. Zawieraj one
nazwy plikw JavaScript niezbdnych do stworzenia arkusza danych (oraz nazw pliku
nakadki jqModal.js).
<script
<script
<script
<script

src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
src="scripts/jquery.jqGrid.js" type="text/javascript"></script>
src="scripts/js/jqModal.js" type="text/javascript"></script>
src="scripts/js/jqDnR.js" type="text/javascript"></script>

Jak widzisz, do poprawnego funkcjonowania arkusza niezbdnych jest kilka plikw. Wszystkie
je omwimy bardziej szczegowo w dalszej czci rozdziau.
Sekcja <body> pliku index.html zawiera deklaracj tabeli, ktra bdzie stanowia zrb naszego
arkusza. W sekcji tej znajduj si te fragmenty kodu odpowiedzialne za wywietlenie arkusza
na stronie i wypenienie go danymi z bazy.
<script type="text/javascript">
var lastSelectedId;
var theme = "steel";
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel:
"stylesheet",
type: "text/css",
href: "scripts/themes/"+theme+"/grid.css",
title: theme,
media: "screen"
});
$('#list').jqGrid({
url:'grid.php',
datatype: 'json',
mtype: 'POST',
colNames:['Lp.','Nazwa', 'Cena', 'W promocji'],
colModel:[
{name:'product_id',index:'product_id', width:55,editable:false},
{name:'name',index:'name', width:100,editable:true,
edittype:'text',editoptions:{size:30,maxlength:50}},
{name:'price',index:'price', width:80, align:'right',formatter:
'currency',
editable:true},
{name:'on_promotion',index:'on_promotion', width:80,
formatter:'checkbox',editable:true, edittype:'checkbox'}
],

268

Rozdzia 9. Arkusz danych w technologii AJAX

rowNum:10,
rowList:[5,10,20,30],
imgpath: 'scripts/themes/'+theme+'/images',//alters buttons
pager: $('#pager'),
sortname: 'product_id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example",
width:600,
height:250,
onSelectRow: function(id){
if(id && id!==lastSelectedId){
$('#list').restoreRow(lastSelectedId);
$('#list').editRow(id,true,null,onSaveSuccess);
lastSelectedId=id;
}
},
editurl:'grid.php?action=save'
});
function onSaveSuccess(xhr)
{
response = xhr.responseText;
if(response == 1)
return true;
return false;
}
</script>

Po stronie serwera
Kod dziaajcy po stronie serwera zosta podzielony na dwa pliki grid.php i grid.class.php.
Pierwszy z nich jest prostym skryptem odpowiedzialnym za realizacj da load oraz save
wysyanych przez klienta. Ma on nastpujc struktur:
<?php
... Inicjalizacja
// Otwiera arkusz danych.
if($action == 'load')
{
... Tu otwiera arkusz danych.
}
// Zapisuje arkusz danych.
elseif ($action == 'save')
{
... Tu zapisuje arkusz danych.
}
?>

269

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Kod odpowiedzialny za otwieranie i zapisywanie arkusza danych znajduje si w pliku grid.class.php
w klasie Grid. Budowa tej klasy zostaa przedstawiona na diagramie na rysunku 9.4. Jest ona
na tyle prosta, e uznalimy, i nie wymaga szerszego omwienia.

Rysunek 9.4. Diagram klasy Grid

Budowanie arkusza danych krok po kroku

Jeli wolisz zapisa cay kod aplikacji wasnorcznie, oto niezbdne wskazwki:
1. Zanim przejdziesz do tworzenia arkusza danych, musisz przygotowa zestaw
rekordw bazy, z ktrym bdziesz pracowa . Wykonaj podany poniej kod SQL
w aplikacji phpMyAdmin. (eby oszczdzi Ci pracy, zamiecilimy tu skrcon
wersj kodu dostpnego w archiwum z przykadami).
CREATE TABLE product
(
product_id INT UNSIGNED NOT NULL AUTO_INCREMENT,
name VARCHAR(50) NOT NULL DEFAULT '',
price DECIMAL(10,2) NOT NULL DEFAULT '0.00',
on_promotion TINYINT NOT NULL DEFAULT '0',
PRIMARY KEY (product_id)
);
INSERT INTO product(name,
14.99, 0);
INSERT INTO product(name,
49.99, 1);
INSERT INTO product(name,
12.99, 0);
INSERT INTO product(name,
18.99, 0);

270

price, on_promotion) VALUES('Kostium Dziadka Mroza',

price, on_promotion) VALUES('Kostium damy',
price, on_promotion) VALUES('Jaskiniowiec',
price, on_promotion) VALUES('Kostium ghula',

Rozdzia 9. Arkusz danych w technologii AJAX

INSERT INTO product(name,

15.99, 0);
INSERT INTO product(name,
13.99, 0);
INSERT INTO product(name,
35.99, 0);
INSERT INTO product(name,
18.99, 0);
INSERT INTO product(name,
22.99, 1);
INSERT INTO product(name,
49.99, 0);
INSERT INTO product(name,
35.99, 0);
INSERT INTO product(name,
18.99, 1);
INSERT INTO product(name,
krzykacza', 30.99, 0);

price, on_promotion) VALUES('Ninja',

price, on_promotion) VALUES('Mnich',
price, on_promotion) VALUES('Elvis, czarny kostium',
price, on_promotion) VALUES('Robin Hood',
price, on_promotion) VALUES('Pierot',
price, on_promotion) VALUES('Austin Powers',
price, on_promotion) VALUES('Obcy',
price, on_promotion) VALUES('Fantomas',
price, on_promotion) VALUES('Maska i peleryna

2. Sprawd, czy dane zostay poprawnie wprowadzone do bazy (rysunek 9.5).

Rysunek 9.5. Tabela product w aplikacji phpMyAdmin

3. W katalogu ajax za podkatalog grid.

4. Skopiuj do niego katalog scripts z archiwum z przykadowymi kodami.

271

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

5. Utwrz plik o nazwie config.php i wpisz w nim nastpujcy kod:

<?php
// Definiuje dane niezbdne do poczenia si z baz.
define('DB_HOST', 'localhost');
define('DB_USER', 'ajaxuser');
define('DB_PASSWORD', 'practical');
define('DB_DATABASE', 'ajax');
?>

6. Utwrz nowy plik o nazwie error_handler.php i wprowad do niego podan poniej

zawarto .
<?php
// Definiuje metod obsugi bdw.
set_error_handler('error_handler', E_ALL);
// Funkcja odpowiedzialna za obsug bdw.
function error_handler($errNo, $errStr, $errFile, $errLine)
{
// Usuwa wszystkie wygenerowane ju dane wyjciowe.
ob_clean();
// Wysya komunikat o bdzie.
$error_message = 'NR BDU: ' . $errNo . chr(10) .
'WIADOMO
: ' . $errStr . chr(10) .
'LOKALIZACJA: ' . $errFile .
', wiersz ' . $errLine;
echo $error_message;
// Zapobiega wykonywaniu innych skryptw PHP.
exit;
}
?>

7. W pliku o nazwie grid.php umie podany poniej skrypt.

<?php
// Uruchamia skrypt obsugi bdw i wczytuje klas Grid.
require_once('error_handler.php');
require_once('grid.class.php');
// Domylne dziaanie to otwarcie arkusza.
$action = 'load';
if(isset($_GET['action']))
$action = $_GET['action'];
// Otwiera arkusz danych.
if($action == 'load')
{
// Pobiera dan stron.
$page = $_POST['page'];
// Pobiera informacj o liczbie wierszy, ktre maj zosta przedstawione w arkuszu.
$limit = $_POST['rows'];
// Pobiera identyfikator wiersza wybranego do przeprowadzenia operacji sortowania.
$sidx = $_POST['sidx'];
// Pobiera kierunek.

272

Rozdzia 9. Arkusz danych w technologii AJAX

$sord = $_POST['sord'];
$grid = new Grid($page,$limit,$sidx,$sord);
$response->page = $page;
$response->total = $grid->getTotalPages();
$response->records = $grid->getTotalItemsCount();
$currentPageItems = $grid->getCurrentPageItems();
for($i=0;$i<count($currentPageItems);$i++) {
$response->rows[$i]['id']=$currentPageItems[$i]['product_id'];
$response->rows[$i]['cell']=array(
$currentPageItems[$i]['product_id'],
$currentPageItems[$i]['name'],
$currentPageItems[$i]['price'],
$currentPageItems[$i]['on_promotion']
);
}
echo json_encode($response);
}
// Zapisuje arkusz danych.
elseif ($action == 'save')
{
$product_id = $_POST['id'];
$name = $_POST['name'];
$price = $_POST['price'];
$on_promotion = ($_POST['on_promotion'] =='Yes')?1:0;
$grid = new Grid();
echo $grid->updateItem($product_id,$on_promotion,$price,$name);
}
?>

8. Utwrz plik o nazwie grid.class.php i wpisz w nim nastpujce instrukcje:

<?php
// Otwiera plik konfiguracyjny.
require_once('config.php');
// Rozpoczyna sesj.
session_start();
// Docza narzdzia obsugi listy towarw.
class Grid
{
// Licznik stron arkusza.
private $mTotalPages;
// Licznik wpisw w arkuszu.
private $mTotalItemsCount;
private $mItemsPerPage;
private $mCurrentPage;
private $mSortColumn;
private $mSortDirection;

273

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

// Funkcja obsugujca poczenie z baz danych.

private $mMysqli;
// Konstruktor klasy.
function __construct( $currentPage =1, $itemsPerPage=5,
$sortColumn='product_id', $sortDirection='asc')
{
// Tworzy poczenie z baz danych MySQL.
$this->mMysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD,
DB_DATABASE);
$this->mCurrentPage = $currentPage;
$this->mItemsPerPage = $itemsPerPage;
$this->mSortColumn = $sortColumn;
$this->mSortDirection = $sortDirection;
// Wywouje funkcj countAllRecords zliczajc rekordy arkusza.
$this->mTotalItemsCount = $this->countAllItems();
if($this->mTotalItemsCount >0)
$this->mTotalPages = ceil($this->mTotalItemsCount/$this->mItems
PerPage);
else
$this->mTotalPages=0;
if($this->mCurrentPage > $this->mTotalPages)
$this->mCurrentPage = $this->mTotalPages;
}

// Odczytuje stron towarw i zapisuje j w zmiennej $this->grid.

public function getCurrentPageItems()
{
// Tworzy zapytanie SQL, ktre zwrci stron towarw.
$queryString = 'SELECT * FROM product';
$queryString .= ' ORDER BY '.
$this->mMysqli->real_escape_string($this->mSortColumn).
' ' . $this->mMysqli->real_escape_string(
$this->mSortDirection);
// Nie umieszczaj na stronie $limit*($page - 1).
$start = $this->mItemsPerPage* $this->mCurrentPage - $this->mItems
PerPage;
if ($start<0) $start = 0;
$queryString .= ' LIMIT '.$start.','.$this->mItemsPerPage;
// Wykonuje zapytanie.
if ($result = $this->mMysqli->query($queryString))
{
for($i = 0; $items[$i] = $result->fetch_assoc(); $i++) ;
// Usuwa ostatni pusty wiersz.
array_pop($items);

274

Rozdzia 9. Arkusz danych w technologii AJAX

// Zamyka strumie wynikw.

$result->close();
return $items;
}
}
public function getTotalPages()
{
return $this->mTotalPages;
}

// Aktualizuje informacje o towarze.

public function updateItem($id, $on_promotion, $price, $name)
{
// Przeprowadza kodowanie danych wejciowych, tak by nie zagraay zawartoci
// bazy danych.
$id = $this->mMysqli->real_escape_string($id);
$on_promotion = $this->mMysqli->real_escape_string($on_promotion);
$price = $this->mMysqli->real_escape_string($price);
$name = $this->mMysqli->real_escape_string($name);
// Tworzy zapytanie SQL, ktre zaktualizuje rekord towaru.
$queryString =
'UPDATE product SET name="' . $name . '", ' .
'price=' . $price . ',' .
'on_promotion=' . $on_promotion .
' WHERE product_id=' . $id;
// Wykonuje polecenie SQL.
$this->mMysqli->query($queryString);
return $this->mMysqli->affected_rows;
}
// Zwraca cakowit liczb rekordw arkusza.
private function countAllItems()
{
// Zapytanie zwracajce licznik rekordw.
$count_query = 'SELECT COUNT(*) FROM product';
// Wykonuje zapytanie i przechwytuje wynik.
if ($result = $this->mMysqli->query($count_query))
{
// Pobiera pierwszy zwrcony wiersz.
$row = $result->fetch_row();
// Zamyka poczenie z baz danych.
$result->close();
return $row[0];
}
return 0;
}
public function getTotalItemsCount()
{

275

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

return $this->mTotalItemsCount;
}
// Koniec klasy Grid.
}
?>

9. Na koniec utwrz plik index.html i wpisz w nim kod interfejsu aplikacji.

<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid - przykad</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/
jqModal.css" />
<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="scripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="scripts/js/jqModal.js" type="text/javascript"></script>
<script src="scripts/js/jqDnR.js" type="text/javascript"></script>
<script src="scripts/js/grid.locale-pl.js" type="text/
javascript"></script>
</head>
<body>
<h2>Mj arkusz danych</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing=
"0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
<script type="text/javascript">
var lastSelectedId;
var theme = "steel";
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel:
"stylesheet",
type: "text/css",
href: "scripts/themes/"+theme+"/grid.css",
title: theme,
media: "screen"
});
$('#list').jqGrid({
url:'grid.php',
datatype: 'json',
mtype: 'POST',
colNames:['Lp.','Nazwa', 'Cena', 'W promocji'],
colModel:[
{name:'product_id',index:'product_id', width:55,editable:false},

276

Rozdzia 9. Arkusz danych w technologii AJAX

{name:'name',index:'name', width:100,editable:true,
edittype:'text',editoptions:{size:30,maxlength:50}},
{name:'price',index:'price', width:80, align:'right',
formatter:'currency',
editable:true},
{name:'on_promotion',index:'on_promotion', width:80,
formatter:'checkbox',editable:true, edittype:'checkbox'}
],
rowNum:10,
rowList:[5,10,20,30],
imgpath: 'scripts/themes/'+theme+'/images', // Zmienia wygld przyciskw.
pager: $('#pager'),
sortname: 'product_id',
viewrecords: true,
sortorder: "desc",
caption:"Przykad JSON",
width:600,
height:250,
onSelectRow: function(id){
if(id && id!==lastSelectedId){
$('#list').restoreRow(lastSelectedId);
$('#list').editRow(id,true,null,onSaveSuccess);
lastSelectedId=id;
}
},
editurl:'grid.php?action=save'
});
function onSaveSuccess(xhr)
{
response = xhr.responseText;
if(response == 1)
return true;
return false;
}
</script>
</body>
</html>

10. Wpisz w przegldarce adres http://localhost/ajax/grid i sprawd, czy arkusz dziaa

poprawnie. Powinien prezentowa si tak, jak przedstawilimy to na rysunkach 9.1 i 9.2.
Jak widzisz, tak skonstruowany arkusz danych pozwala od rki edytowa zawarto komrek,
sortowa towary i wprowadza wszelkie modyfikacje w sposb intuicyjny, reagujc na dziaania uytkownika. Zaprojektowana w ten sposb aplikacja nie wymaga wprowadzania danych
seriami, na zasadzie pliku wsadowego, wic praca z ni jest bardziej przyjemna i wydajna!
Z kolei zastosowanie dostpnych w sieci dodatkw i kontrolowanie wygldu aplikacji za pomoc arkusza CSS sprawia, e programista zyskuje moliwo atwego przystosowania jej do
potrzeb rnych stron. Wystarczy kilka drobnych zmian w kodzie, by program zmieni si
zgodnie z wymogami caego projektu, zarwno w warstwie graficznej, jak i w oferowanych
funkcjach.

277

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Podsumowanie
Technologia AJAX nie rni si od innych dziedzin wiedzy im wicej czasu powicisz na
wiczenie swoich umiejtnoci, tym bardziej je rozwiniesz. Postaralimy si przedstawi Ci
zestaw narzdzi pozwalajcych odnale si w wiecie technologii AJAX i pokaza Ci, jak
z nich korzysta . Zbudowalimy kilka aplikacji od zera, ale te zaprezentowalimy metody
rozwijania istniejcych ju programw. Gdy poznasz zasady rzdzce t technologi, znajdziesz si na prostej drodze do sukcesu.
Zawsze z radoci wysuchujemy wszystkich uwag naszych czytelnikw i chtnie poznajemy
ich projekty tworzone w oparciu o proponowane przez nas rozwizania, dlatego zachcamy
Ci, by podzieli si z nami swoimi pracami! Mamy nadziej, e podoba Ci si ten kurs
technologii AJAX czujemy si zaszczyceni, e zdecydowae si powici swj czas na
wypraw w naszym towarzystwie!

278