Darmowy fragment publikacji:
AJAX i PHP. Tworzenie
interaktywnych aplikacji
internetowych. Wydanie II
Autorzy: Bogdan Brinzarea, Cristian Darie
T³umaczenie: Julia Szajkowska
ISBN: 978-83-246-2768-4
Tytu³ orygina³u: AJAX and PHP: Building Modern
Web Applications 2nd Edition
Format: B5, stron: 304
(cid:129) Jak tworzyæ szybsze i sprawniejsze aplikacje internetowe?
(cid:129) Jak pracowaæ z bibliotek¹ jQuery?
(cid:129) Jak wprowadzaæ nowe rozwi¹zania do ju¿ istniej¹cych stron?
Wprowadzenie technologii AJAX pozwoli³o na tworzenie bardziej atrakcyjnych
i przyjaznych u¿ytkownikowi witryn, które nie wymagaj¹ prze³adowywania po ka¿dej
interakcji. To zapewni³o AJAX-owi ogromn¹ popularnoœæ wœród webmasterów. Otrzymali
bowiem doskona³e narzêdzie do projektowania interaktywnych i dynamicznych aplikacji,
tak po¿¹danych w dobie WEB 2.0. Jednak nic nie jest doskona³e i nawet AJAX, mimo
wielkiego potencja³u, ma swoje s³aboœci i ograniczenia. Jakie? W trakcie lektury ksi¹¿ki
poznasz plusy i minusy tej technologii!
Intencj¹ autorów by³o przede wszystkim przekazanie wiedzy niezbêdnej do opanowania
sztuki tworzenia interaktywnych aplikacji, wykorzystuj¹cych PHP, JavaScript, MySQL
i jQuery. Dowiesz siê st¹d równie¿, jak przeprowadzaæ weryfikacjê danych wprowadzanych
na stronie za pomoc¹ technologii AJAX i jak ³¹czyæ ze sob¹ funkcje programu wystêpuj¹ce
po stronie serwera z tymi, które pojawiaj¹ siê po stronie klienta. Poznasz skuteczne
metody debugowania kodu. Ponadto na kilku rozbudowanych przyk³adach nauczysz siê
sprawnie pracowaæ z bibliotek¹ jQuery. Autorzy poka¿¹ Ci, jak unikaæ najczêstszych
b³êdów, tworzyæ wydajny kod AJAX z myœl¹ o pozycjonowaniu witryny oraz w prosty
sposób wprowadzaæ nowe rozwi¹zania, tak¿e do istniej¹cych ju¿ stron internetowych.
(cid:129) Przygotowanie œrodowiska pracy
(cid:129) Wprowadzenie w œwiat zagadnieñ technologii AJAX
(cid:129) JavaScript i klient AJAX
(cid:129) Programowanie obiektowe w JavaScript
(cid:129) Skrypty PHP i u¿ywanie MySQL po stronie serwera
(cid:129) Weryfikacja poprawnoœci wprowadzanych danych za pomoc¹ AJAX
(cid:129) Debugowanie i profilowanie aplikacji AJAX
(cid:129) Zaawansowane metody budowania aplikacji internetowych
(cid:129) Arkusze danych w technologii AJAX
Opanuj sztukê tworzenia aplikacji WEB 2.0!
Spis treĂci
O autorach
O recenzencie
Wprowadzenie
Rozdziaï 1. ¥wiat technologii AJAX i jÚzyka PHP
Ogólny zarys
Technologia AJAX a Web 2.0
Strony internetowe od 1990 roku
Protokóï HTTP i jÚzyk HTML
PHP i inne technologie strony serwera
JavaScript i inne technologie strony klienta
Czego zatem brakuje?
¥wiat technologii AJAX
Co skïada siÚ na narzÚdzia AJAX?
Kiedy warto uĝywaÊ technologii AJAX, a kiedy naleĝy z niej zrezygnowaÊ?
NarzÚdzia i ěródïa
Przygotowanie Ărodowiska pracy
Prosta aplikacja wykorzystujÈca AJAX i PHP
Podsumowanie
Rozdziaï 2. JavaScript i klient AJAX
JavaScript a obiektowy model dokumentu
Zdarzenia w jÚzyku JavaScript i model DOM
I znowu model DOM
JavaScript, model DOM i arkusze stylów CSS
Uĝywanie obiektów klasy XMLHttpRequest
Tworzenie obiektu klasy XMLHttpRequest
Obsïuga wyjÈtków w jÚzyku JavaScript
Tworzenie lepszych obiektów dla przeglÈdarki Internet Explorer 6
Inicjowanie ĝÈdania za pomocÈ obiektu klasy XMLHttpRequest
Obsïuga odpowiedzi przysyïanych z serwera
7
9
11
17
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 treĞci
Praca z dokumentami XML
WiÚcej na temat obsïugi bïÚdów i zwracania wyjÈtków
Tworzenie struktury pliku XML
Podsumowanie
78
84
85
86
Rozdziaï 3. Obiektowy JavaScript
Dlaczego jÚzyk JavaScript ma tak duĝe znaczenie?
Idea programowania obiektowego
Hermetyzacja
Dziedziczenie
Polimorfizm
Funkcje JavaScript jako obiekty pierwszej klasy
Funkcje wewnÚtrzne
DomkniÚcia
Klasy w jÚzyku JavaScript
Programowanie obiektowe w jÚzyku JavaScript
W jÚzyku JavaScript obiekty sÈ sïownikami
Funkcje w jÚzyku JavaScript
87
88
88
89
90
91
91
92
94
95
96
97
98
98
100
102
103
104
105
106
107
109
110
Praktyczne zagadnienia programowania obiektowego w JavaScript — wstÚp do notacji JSON 112
113
114
117
Konstruktory
Diagramy klas
Odwoïania do funkcji zewnÚtrznych
Prototypy
WïaĂciwoĂci i metody instancji
Metody i wïaĂciwoĂci statyczne
Prywatni uczestnicy klasy
Kontekst wykonania w jÚzyku JavaScript
Kiedy var x, kiedy this.x, a kiedy x?
Praca we wïaĂciwym kontekĂcie
Idea formatu JSON
Prosty przykïad pracy z danymi w formacie JSON
Podsumowanie
Rozdziaï 4. Skrypty PHP i uĝywanie MySQL po stronie serwera
PHP, DOM i XML
JÚzyk PHP i format JSON
Przekazywanie zmiennych i obsïuga bïÚdów w jÚzyku PHP
Praca z bazÈ MySQL
Tworzenie tabel w bazie danych
Przetwarzanie danych
Èczenie siÚ z bazÈ danych i wykonywanie zapytañ
Podsumowanie
Rozdziaï 5. Weryfikacja poprawnoĂci wprowadzanych danych za pomocÈ AJAX
Implementacja weryfikacji poprawnoĂci danych z zastosowaniem technologii AJAX
Obiekt klasy XMLHttpRequest, wersja 2.
Weryfikacja danych z wykorzystaniem moĝliwoĂci technologii AJAX
Podsumowanie
119
120
125
129
139
139
142
143
149
151
152
156
164
185
4
Spis treĞci
Rozdziaï 6. Debugowanie i profilowanie aplikacji AJAX
Debugowanie i profilowanie kodu w przeglÈdarce Internet Explorer
187
188
Uruchamianie debugowania w przeglÈdarkach Internet Explorer 6 i Internet Explorer 7 188
189
Debugowanie kodu w przeglÈdarce Internet Explorer 8
196
Inne narzÚdzia debugujÈce w przeglÈdarce Internet Explorer
197
198
200
201
202
Dodatek Firebug
Dodatek Venkman JavaScript Debugger
Dodatek Web Developer
Debugowanie i profilowanie kodu w przeglÈdarce Firefox
Podsumowanie
Rozdziaï 7. Zaawansowane rozwiÈzania i metody budowania aplikacji internetowych 203
206
207
208
210
211
212
Pozyskiwanie przewidujÈce
Wskaěnik postÚpu
Nieinwazyjne kodowanie JavaScript
Progresywne ulepszanie i eleganckie przemijanie
Asynchroniczne wysyïanie plików za pomocÈ aplikacji AJAX
Wysyïanie plików za pomocÈ protokoïu HTTP
Asynchroniczne wysyïanie plików z uĝyciem znacznika iframe
i rozwiÈzañ technologii AJAX
Wywoïania miÚdzydomenowe
Realizacja wywoïañ miÚdzydomenowych za pomocÈ serwera proxy
Realizacja wywoïañ miÚdzydomenowych za pomocÈ aplikacji Flash
Realizacja wywoïañ miÚdzydomenowych za pomocÈ znacznika iframe
Realizacja wywoïañ miÚdzydomenowych za pomocÈ obiektów JSONP
Atak typu cross-site request forgery
Przejmowanie kontroli za pomocÈ obiektów JSON
Zmniejszenie ryzyka zaistnienia ataku CSRF
Ataki typu cross-site scripting
Ataki przeprowadzane za pomocÈ kodu wykorzystujÈcego luki w zabezpieczeniach
(ang. exploits)
Nietrwaïy atak typu XSS
Trwaïy atak typu XSS
Unikanie ataków typu XSS
Weryfikacja danych wejĂciowych
Zmiana zestawu znaków
Zabezpieczanie plików cookie
Podsumowanie
Rozdziaï 8. Czat bazujÈcy na AJAX i jQuery
Czatuj z AJAX
Szkielet jQuery
Zanim zaczniemy
Pierwsze kroki
Selektory obiektów modelu DOM w szkielecie jQuery
Obiekt osïonowy szkieletu jQuery
212
218
219
219
220
220
221
222
222
223
223
223
224
224
224
225
225
226
227
227
228
229
229
230
230
5
Spis treĞci
añcuchowanie metod
Obsïuga wyjÈtków
Prosty przykïad
Podstawowe idee
Czat w technologii AJAX
Aplikacja czatu
Podsumowanie
Rozdziaï 9. Arkusz danych w technologii AJAX
Implementacja kodu arkusza danych AJAX
Analiza kodu
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
231
231
232
233
234
235
261
263
265
266
266
267
269
270
278
279
280
280
283
283
287
6
9
Arkusz danych
w technologii AJAX
Najbardziej powszechnÈ metodÈ przedstawiania danych jest wykorzystanie formy arkusza
danych. W arkuszu moĝna prezentowaÊ dane wszelkiego rodzaju — od zawartoĂci ksiÈĝki ad-
resowej do zestawienia danych logistycznych. Poniewaĝ firmy potrzebowaïy moĝliwoĂci prze-
chowywania informacji w scentralizowanych archiwach, nie trzeba byïo dïugo czekaÊ na po-
jawienie siÚ pierwszych aplikacji pozwalajÈcych zapisywaÊ dane w internecie czy intranecie
w postaci arkusza. Niestety, w porównaniu do swoich stacjonarnych odpowiedników aplikacje
te byïy bardzo mocno okrojone — praca z nimi wymagaïa ogromnego wysiïku i duĝych na-
kïadów czasu. Dodatkowym problemem byïa implementacja rozwiÈzania (szczególnie jeĂli
w grÚ wchodziïa kontrola róĝnych poziomów dostÚpu na róĝnych serwerach), a opóěnienia
wynikajÈce z potrzeby odĂwieĝania zawartoĂci strony, zwiÈzane niejednokrotnie z wykonywa-
niem najprostszych operacji sortowania czy edytowania, sprawiaïy, ĝe praca z dostÚpnymi
w sieci arkuszami danych byïa wysoce niewygodna i mocno obciÈĝajÈca dla maszyn.
JesteĂ bystrym czytelnikiem, wiÚc na pewno domyĂliïeĂ siÚ juĝ, ĝe aktualizacjÚ zawartoĂci
arkusza moĝna przeprowadziÊ za pomocÈ narzÚdzi dostÚpnych w technologii AJAX. Juĝ za
chwilÚ pokaĝemy Ci, jak to zrobiÊ! Tak zaprojektowana aplikacja bÚdzie odĂwieĝaïa zawartoĂÊ
arkusza bez potrzeby ponownego otwierania strony, bÚdzie potrafiïa przechowywaÊ dane po
stronie klienta (zamiast wysyïaÊ je za kaĝdym razem na serwer) i bÚdzie umoĝliwiaïa zmianÚ
swojego wyglÈdu w kilku uderzeniach w klawiaturÚ! Pora poĝegnaÊ na zawsze migajÈce ekra-
ny niepeïnych zestawieñ i sesje wygasajÈce tuĝ przed ukoñczeniem pracy. ¿yczymy Ci miïej
zabawy!
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
W tym rozdziale wykorzystamy dodatek szkieletu jQuery o nazwie jqGrid. Dodatek ten jest
dostÚpny za darmo do uĝytku prywatnego i komercyjnego (choÊ autorzy nie wzgardzÈ dobro-
wolnym wsparciem finansowym). Moĝna pobraÊ go ze strony http://www.trirand.com/blog/.
Zapewne domyĂliïeĂ siÚ, ĝe wszystkie operacje po stronie serwera bÚdÈ realizowane za pomocÈ
skryptu PHP, ale pamiÚtaj, ĝe dodatek jqGrid potrafi wspóïpracowaÊ równieĝ z innymi jÚzy-
kami skryptowymi. Za pracÚ arkusza po stronie klienta bÚdÈ odpowiadaïy biblioteka jQuery
JavaScript i technologia JSON. WyglÈd arkusza zdefiniujemy w odpowiednim arkuszu stylów
CSS, wykorzystujÈc w tym celu motywy. W ten sposób jego zmiana nie bÚdzie wymagaïa
wiele zachodu. Zacznijmy od zapoznania siÚ z moĝliwoĂciami dodatku jqGrid. Juĝ wkrótce
przekonasz siÚ, ĝe nowo nabyte umiejÚtnoĂci pracy w technologii AJAX pozwolÈ Ci szybko
wykorzystaÊ moĝliwoĂci tego narzÚdzia przy tworzeniu dowolnego serwisu WWW.
Ukoñczony arkusz bÚdzie wyglÈdaï 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 niezbÚdne do omówienia tego przykïadu zostaïy udostÚpnione w archiwum
wszystkich przykïadów z ksiÈĝki, ale moĝesz teĝ przepisaÊ kod osobiĂcie.
ZachÚcamy CiÚ do pobrania przykïadowej aplikacji z internetu, poniewaĝ jest to szybsze
i bezpieczniejsze (unikniesz w ten sposób bïÚdów popeïnianych podczas przepisywania kodu).
Jeĝeli zdecydujesz siÚ na to rozwiÈzanie, wystarczy, ĝe wykonasz nastÚpujÈce kroki:
1. Skopiuj katalog grid z archiwum do katalogu ajax na serwerze.
2. PoïÈcz siÚ z bazÈ danych i wykonaj w niej kod SQL zawarty w pliku product.sql.
3. Wprowadě do pliku config.php dane uĝytkownika bazy i hasïo.
4. Otwórz w przeglÈdarce adres http://localhost/ajax/grid. Efekt powinien wyglÈdaÊ
tak jak na rysunku 9.1.
5. Moĝesz teĝ sprawdziÊ od raz funkcjÚ edytowania zawartoĂci. Kliknij wybranÈ komórkÚ,
wprowadě zmiany i zaakceptuj je klawiszem Enter. Rysunek 9.2 pokazuje wyglÈd
aplikacji w trybie edycji danych.
Rysunek 9.2. Edycja wiersza
265
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
Analiza kodu
Jeĝeli wolisz wïasnorÚcznie zapisaÊ kod caïej aplikacji, znajdziesz go w dalszej czÚĂci tego
rozdziaïu. Na razie zajmiemy siÚ szybkim przeglÈdem plików tworzÈcych arkusz danych.
Szczegóïowe omówienie ich zawartoĂci znajdziesz na koñcu rozdziaïu.
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 Dziaïania po stronie serwera sÈ realizowane za pomocÈ skryptów zapisanych
w plikach grid.php i grid.class.php.
Q CzÚĂÊ aplikacji dziaïajÈca po stronie klienta zostaïa umieszczona w pliku index.html.
Q Skrypty jQuery wywoïywane z poziomu pliku index.html znajdujÈ siÚ w katalogu
scripts.
Rysunek 9.3. Skïadniki aplikacji arkusza danych
Baza danych
Edytowalny arkusz danych wyĂwietla zawartoĂÊ fikcyjnej bazy towarów. Na serwerze umie-
ĂciliĂmy tabelÚ danych product zbudowanÈ z nastÚpujÈcych pól:
Q product_id — unikatowy numer generowany w bazie danych automatycznie
za pomocÈ autoinkrementacji. Jest to klucz gïówny tej tabeli.
Q name — nazwa towaru.
Q price — cena towaru wystawionego na sprzedaĝ.
Q on_promotion — pole liczbowe przyjmujÈce wartoĂci 0 lub 1 (odpowiednik wartoĂci
logicznych prawda i faïsz). W interfejsie jest ono realizowane za pomocÈ pola wyboru.
Wybór pola product_id na klucz gïówny arkusza nasuwa siÚ automatycznie, poniewaĝ przyj-
muje ono unikatowÈ wartoĂÊ dla kaĝdego z towarów. Pole to nigdy nie bÚdzie puste, gdyĝ jego
zawartoĂÊ jest uzupeïniana automatycznie za pomocÈ funkcji inkrementacji wartoĂci w chwili
dodawania towarów 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ĂÊ pozostaïych pól nie wymaga szerszego omawiania — ĝadne z nich nie moĝe pozo-
staÊ puste i kaĝdemu z nich, z wyjÈtkiem pola product_id, przypisujemy rÚcznie innÈ wartoĂÊ.
Pole tinyint bÚdzie pojawiaÊ siÚ w arkuszu w postaci pola wyboru, które uĝytkownik bÚdzie
zaznaczaï w razie potrzeby. Pole on_promotion przechowuje zmienne typu tinyint, poniewaĝ
zapisywane bÚdÈ w nim jedynie wartoĂci 1 lub 0 (prawda lub faïsz).
Style i kolory
Zostawmy na razie kwestiÚ bazy danych i zajmijmy siÚ aspektami bardziej powiÈzanymi z ko-
dem aplikacji. Pora zorientowaÊ siÚ wreszcie, w jaki sposób dziaïa nasz arkusz danych.
WspominaliĂmy juĝ, ĝe za wyglÈd aplikacji bÚdzie odpowiadaï osobny arkusz stylów CSS.
W pliku index.html znajdziesz nastÚpujÈcy 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 róĝnych motywów graficznych. W prezentowanym powyĝej
fragmencie kodu pojawia siÚ nazwa coffee, ale moĝesz zmieniÊ jÈ na innÈ, na przykïad green,
jeĂli chcesz zmieniÊ kolory arkusza. Moĝesz teĝ utworzyÊ (zachowujÈc konwencjÚ nazw) wïasny
motyw graficzny, jeĂli przygotujesz odpowiednie pliki graficzne, zapiszesz je w podkatalogu
katalogu themes i zmienisz nazwÚ motywu we wskazanym wierszu kodu. WyglÈd przycisków
aplikacji zaleĝy od Ăcieĝki imgpath podanej w pliku index.html — scripts/themes/green/images .
Jeĝeli chcesz go zmieniÊ, musisz zmieniÊ teĝ nazwÚ motywu w tej Ăcieĝki.
RozwiÈzanie wymagajÈce modyfikowania nazwy katalogu w dwóch miejscach pliku jest po-
tencjalnym ěródïem bïÚdów, wiÚc naleĝy zachowaÊ szczególnÈ ostroĝnoĂÊ w czasie przepro-
wadzania tej operacji. Z pomocÈ przyjdzie nam biblioteka jQuery, która pozwoli zastosowaÊ
sprytne rozwiÈzanie polegajÈce na dynamicznym wybieraniu arkusza CSS i zmienianiu Ăcieĝki
imgpath na podstawie okreĂlonej wczeĂniej nazwy motywu.
Sztuczka, którÈ mamy zamiar siÚ posïuĝyÊ, wymaga stworzenia dynamicznie znacznika link
wewnÈtrz sekcji head i okreĂlenia jego atrybutu tak, by wskazywaï na okreĂlony motyw.
Od tej pory zmiana motywu bÚdzie ograniczaÊ siÚ do podania nowej nazwy zmiennej skryptu
JavaScript.
267
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
Definicje stylów okna nakïadki zawiera plik jqModal.css, który jest czÚĂciÈ dodatku jqModal.
(Funkcje umoĝliwiajÈce jego dziaïanie znajdujÈ siÚ w pliku jqModal.js w katalogu scripts/js).
WtyczkÚ i jej arkusz stylów moĝesz 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 plików JavaScript niezbÚdnych do stworzenia arkusza danych (oraz nazwÚ pliku
nakïadki jqModal.js).
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
Jak widzisz, do poprawnego funkcjonowania arkusza niezbÚdnych jest kilka plików. Wszystkie
je omówimy bardziej szczegóïowo w dalszej czÚĂci rozdziaïu.
Sekcja body pliku index.html zawiera deklaracjÚ tabeli, która bÚdzie stanowiïa zrÈb naszego
arkusza. W sekcji tej znajdujÈ siÚ teĝ fragmenty kodu odpowiedzialne za wyĂwietlenie arkusza
na stronie i wypeïnienie 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 dziaïajÈcy 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
wysyïanych przez klienta. Ma on nastÚpujÈcÈ 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 zostaïa przedstawiona na diagramie na rysunku 9.4. Jest ona
na tyle prosta, ĝe uznaliĂmy, iĝ nie wymaga szerszego omówienia.
Rysunek 9.4. Diagram klasy Grid
Budowanie arkusza danych krok po kroku
JeĂli wolisz zapisaÊ caïy kod aplikacji wïasnorÚcznie, oto niezbÚdne wskazówki:
1. Zanim przejdziesz do tworzenia arkusza danych, musisz przygotowaÊ zestaw
rekordów bazy, z którym bÚdziesz pracowaÊ. Wykonaj podany poniĝej kod SQL
w aplikacji phpMyAdmin. (¿eby oszczÚdziÊ Ci pracy, zamieĂciliĂmy tu skróconÈ
wersjÚ kodu dostÚpnego w archiwum z przykïadami).
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, price, on_promotion) VALUES( Kostium Dziadka Mroza ,
14.99, 0);
INSERT INTO product(name, price, on_promotion) VALUES( Kostium damy ,
49.99, 1);
INSERT INTO product(name, price, on_promotion) VALUES( Jaskiniowiec ,
12.99, 0);
INSERT INTO product(name, price, on_promotion) VALUES( Kostium ghula ,
18.99, 0);
270
Rozdziaá 9. • Arkusz danych w technologii AJAX
INSERT INTO product(name, price, on_promotion) VALUES( Ninja ,
15.99, 0);
INSERT INTO product(name, price, on_promotion) VALUES( Mnich ,
13.99, 0);
INSERT INTO product(name, price, on_promotion) VALUES( Elvis, czarny kostium ,
35.99, 0);
INSERT INTO product(name, price, on_promotion) VALUES( Robin Hood ,
18.99, 0);
INSERT INTO product(name, price, on_promotion) VALUES( Pierot ,
22.99, 1);
INSERT INTO product(name, price, on_promotion) VALUES( Austin Powers ,
49.99, 0);
INSERT INTO product(name, price, on_promotion) VALUES( Obcy ,
35.99, 0);
INSERT INTO product(name, price, on_promotion) VALUES( Fantomas ,
18.99, 1);
INSERT INTO product(name, price, on_promotion) VALUES( Maska i peleryna
krzykacza , 30.99, 0);
2. Sprawdě, czy dane zostaïy 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 przykïadowymi kodami.
271
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
5. Utwórz plik o nazwie config.php i wpisz w nim nastÚpujÈcy kod:
?php
// Definiuje dane niezbĊdne do poáączenia siĊ z bazą.
define( DB_HOST , localhost );
define( DB_USER , ajaxuser );
define( DB_PASSWORD , practical );
define( DB_DATABASE , ajax );
?
6. Utwórz nowy plik o nazwie error_handler.php i wprowadě do niego podanÈ poniĝej
zawartoĂÊ.
?php
// Definiuje metodĊ obsáugi báĊdów.
set_error_handler( error_handler , E_ALL);
// Funkcja odpowiedzialna za obsáugĊ báĊdów.
function error_handler($errNo, $errStr, $errFile, $errLine)
{
// Usuwa wszystkie wygenerowane juĪ dane wyjĞciowe.
ob_clean();
// Wysyáa komunikat o báĊdzie.
$error_message = NR B}DU: . $errNo . chr(10) .
WIADOMO¥m: . $errStr . chr(10) .
LOKALIZACJA: . $errFile .
, wiersz . $errLine;
echo $error_message;
// Zapobiega wykonywaniu innych skryptów PHP.
exit;
}
?
7. W pliku o nazwie grid.php umieĂÊ podany poniĝej skrypt.
?php
// Uruchamia skrypt obsáugi báĊdów i wczytuje klasĊ Grid.
require_once( error_handler.php );
require_once( grid.class.php );
// DomyĞlne dziaáanie 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, które 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. Utwórz plik o nazwie grid.class.php i wpisz w nim nastÚpujÈce instrukcje:
?php
// Otwiera plik konfiguracyjny.
require_once( config.php );
// Rozpoczyna sesjĊ.
session_start();
// Doáącza narzĊdzia obsáugi listy towarów.
class Grid
{
// Licznik stron arkusza.
private $mTotalPages;
// Licznik wpisów w arkuszu.
private $mTotalItemsCount;
private $mItemsPerPage;
private $mCurrentPage;
private $mSortColumn;
private $mSortDirection;
273
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
// Funkcja obsáugująca poáączenie z bazą danych.
private $mMysqli;
// Konstruktor klasy.
function __construct( $currentPage =1, $itemsPerPage=5,
$sortColumn= product_id , $sortDirection= asc )
{
// Tworzy poáączenie 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;
// Wywoáuje funkcjĊ countAllRecords zliczającą 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Ċ towarów i zapisuje ją w zmiennej $this- grid.
public function getCurrentPageItems()
{
// Tworzy zapytanie SQL, które zwróci stronĊ towarów.
$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Ĕ wyników.
$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 wejĞciowych, tak by nie zagraĪaáy zawartoĞci
// 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, które 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 caákowitą liczbĊ rekordów arkusza.
private function countAllItems()
{
// Zapytanie zwracające licznik rekordów.
$count_query = SELECT COUNT(*) FROM product ;
// Wykonuje zapytanie i przechwytuje wynik.
if ($result = $this- mMysqli- query($count_query))
{
// Pobiera pierwszy zwrócony wiersz.
$row = $result- fetch_row();
// Zamyka poáączenie 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 utwórz 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 - przykïad /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 Mój 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 wygląd przycisków.
pager: $( #pager ),
sortname: product_id ,
viewrecords: true,
sortorder: desc ,
caption: Przykïad 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 przeglÈdarce adres http://localhost/ajax/grid i sprawdě, czy arkusz dziaïa
poprawnie. Powinien prezentowaÊ siÚ tak, jak przedstawiliĂmy to na rysunkach 9.1 i 9.2.
Jak widzisz, tak skonstruowany arkusz danych pozwala od rÚki edytowaÊ zawartoĂÊ komórek,
sortowaÊ towary i wprowadzaÊ wszelkie modyfikacje w sposób intuicyjny, reagujÈc na dziaïa-
nia uĝytkownika. Zaprojektowana w ten sposób aplikacja nie wymaga wprowadzania danych
seriami, na zasadzie „pliku wsadowego”, wiÚc praca z niÈ jest bardziej przyjemna i wydajna!
Z kolei zastosowanie dostÚpnych w sieci dodatków i kontrolowanie wyglÈdu aplikacji za po-
mocÈ arkusza CSS sprawia, ĝe programista zyskuje moĝliwoĂÊ ïatwego przystosowania jej do
potrzeb róĝnych stron. Wystarczy kilka drobnych zmian w kodzie, by program zmieniï siÚ
zgodnie z wymogami caïego projektu, zarówno w warstwie graficznej, jak i w oferowanych
funkcjach.
277
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
Podsumowanie
Technologia AJAX nie róĝni siÚ od innych dziedzin wiedzy — im wiÚcej czasu poĂwiÚcisz na
Êwiczenie swoich umiejÚtnoĂci, tym bardziej je rozwiniesz. PostaraliĂmy siÚ przedstawiÊ Ci
zestaw narzÚdzi pozwalajÈcych odnaleěÊ siÚ w Ăwiecie technologii AJAX i pokazaÊ Ci, jak
z nich korzystaÊ. ZbudowaliĂmy kilka aplikacji od zera, ale teĝ zaprezentowaliĂmy metody
rozwijania istniejÈcych juĝ programów. Gdy poznasz zasady rzÈdzÈce tÈ technologiÈ, znaj-
dziesz siÚ na prostej drodze do sukcesu.
Zawsze z radoĂciÈ wysïuchujemy wszystkich uwag naszych czytelników i chÚtnie poznajemy
ich projekty tworzone w oparciu o proponowane przez nas rozwiÈzania, dlatego zachÚcamy
CiÚ, byĂ podzieliï siÚ z nami swoimi pracami! Mamy nadziejÚ, ĝe podobaï Ci siÚ ten kurs
technologii AJAX — czujemy siÚ zaszczyceni, ĝe zdecydowaïeĂ siÚ poĂwiÚciÊ swój czas na
wyprawÚ w naszym towarzystwie!
278
Pobierz darmowy fragment (pdf)
