Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00578 007449 13829311 na godz. na dobę w sumie
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych. Wydanie II - książka
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych. Wydanie II - książka
Autor: , , Liczba stron: 296
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2768-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> ajax
Porównaj ceny (książka, ebook, audiobook).

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.

Opanuj sztukę tworzenia aplikacji WEB 2.0!

Znajdź podobne książki Ostatnio czytane w tej kategorii

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)

Gdzie kupić całą publikację:

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych. Wydanie II
Autor:
, ,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: