AJAX to podejście do tworzenia. XAJAX: Łatwy AJAX dla programistów PHP. Narzędzia
|
|
- Bartłomiej Kwiatkowski
- 8 lat temu
- Przeglądów:
Transkrypt
1 Narzędzia XAJAX: Łatwy AJAX dla programistów PHP Paweł Grzesiak Stopień trudności: Na fali fascynacji AJAX-em powstało wiele bibliotek mających jednocześnie ułatwić i przyspieszyć proces projektowania witryn internetowych. Prezentujemy XAJAX, rozwiązanie zorientowane na programistów PHP, uwzględniające minimum programowania w JavaScript. W SIECI strona główna projektu XAJAX. dokumentacja wiki do projektu. publications/essays/ archives/ php artykuł Ajax: A New Approach to Web Applications. pl/docs/ajax więcej informacji o samej technice AJAX na stronach Mozilla Developer Center. AJAX to podejście do tworzenia aplikacji internetowych polegające na połączeniu możliwości istniejących już technologii w nową jakość. Termin AJAX użył po raz pierwszy Jesse James Garrett w swoim artykule pt. Ajax: A New Approach to Web Applications opublikowanym na początku roku Jego tekst był próbą odpowiedzenia na pytanie, które wówczas zadawało wiele ludzi, niekoniecznie profesjonalnie związanych z tworzeniem stron www. Pytanie to brzmiało i brzmi nadal czym jest ta rewolucyjna technologia wprowadzona przez Google? Z perspektywy czasu można powiedzieć, że to właśnie Google zapoczątkowało światowy boom na AJAX, prezentując przełomowe na dzień dzisiejszy produkty. Aplikacje internetowe zaoferowane przez Google charakteryzują się ponadprzeciętnymi wartościami użytkowymi, ale to co je wyróżnia od innych, to wysoki stopień interakcji z użytkownikiem. Re- wolucją jest tu bowiem fakt, że zmiany w aplikacjach internetowych Google dokonują się nieomal w czasie rzeczywistym. Wszystko to właśnie dzięki AJAX. Źródła inspiracji? Od strony użytkownika korzyści są widoczne gołym okiem. Dla zwykłego internauty witryna wykorzystująca AJAX to strona, która niekoniecznie musi się przeładować by zmienić swoją zawartość. W taki sposób można najkrócej wyjaśnić ideę AJAX. Niestety, rozumo- Powinieneś wiedzieć: Wymagana jest dobra znajomość PHP oraz nabyte pewne podstawowe umiejętności posługiwania się JavaScript. Obiecujemy: Szybki start w tworzeniu stron opartych o AJAX. Szybkie wdrażanie nowych pomysłów dzięki XAJAX. 2
2 XAJAX Narzędzia wanie wyłącznie w kontekście samego AJAX-a nie daje prawdziwego obrazu zastosowania tej techniki. Najlepiej więc zasięgnąć przykładów, kierując się w stronę działających aplikacji Google. Rysunek 1 prezentuje aplikację Google Spreadsheets ( le.com), która nie tylko wyglądem, lecz i funkcjonalnością przypomina typowy arkusz kalkulacyjny. Co więc robi ta aplikacja, tkwiąc uwięziona w przeglądarce internetowej? Odpowiedź jest dość prosta działa, i to wcale nie najgorzej. Czy już czas zmienić swoje przyzwyczajenia i pisać dokumenty w edytorze tekstu umieszczonym na stronie www? Rysunek 2 to przykład aplikacji internetowej niemal żywcem przeniesionej z pakietu biurowego. Writely ( writely.com) to produkt Google aspirujący do miana internetowego Worda. Inne duże korporacje internetowe też nie próżnują. Yahoo ze swoim serwisem zdjęciowym Flickr ( także aktywnie wykorzystuje możliwości AJAX. Choćby obracanie zdjęć bez konieczności przeładowania to tylko jedna z robiących wrażenie na użytkownikach funkcji. Jak to działa? AJAX (ang. Asynchronous JavaScript and XML) wykorzystuje do pracy komplet istniejących technologii. Najczęściej do stworzenia aplikacji AJAX wykorzystuje się taki zestaw: Rysunek 1. Google Spreadsheets, internetowy arkusz kalkulacyjny HTML/XHTML odpowiedzialny za budowę struktury strony CSS oprawa graficzna witryny; JavaScript realizacja żądań po stronie klienta (wysyłanie/pobieranie/ przetwarzanie w ograniczonym stopniu); DOM obiektowy dostęp do struktury dokumentu (X)HTML; XML pełniący tu rolę protokołu transportowego (do wymiany pakietów danych); PHP (lub dowolny inny język skryptowy: ASP/JSP/Ruby) realizacja żądań po stronie serwera (wysyłanie/ odbieranie danych/przetwarzanie danych ograniczone przez możliwości serwera), głównie obejmuje wymianę informacji z bazą danych (np. Postgre- SQL, MySQL, SQLite); XMLHttpRequest interfejs dzięki któremu możliwe jest wysłanie i odbieranie danych przez przeglądarkę w czasie rzeczywistym (bez konieczności przeładowania strony). Rysunek 2. Writely, internetowy edytor tekstu od Google Typowa strona www oparta jest o mechanizm żądań i odpowiedzi realizowanych pomiędzy aplikacją kliencką (przeglądarki) a serwera www przy użyciu protokołu HTTP. Rysunek 4 ilustruje metodę, w której przeglądarka wysyła żądanie metodą GET lub POST i oczekuje odpowiedzi ze strony serwera. Serwer odpowiada wysyłając użytkownikowi kompletny kod strony, zawierający kod HTML, CSS, jak również JavaScript przy każdym wywołaniu strona się przeładowuje. Przy zastosowaniu techniki AJAX początek procesu wygląda dokładnie w ten 3
3 Narzędzia XAJAX Rysunek 3. Flickr, serwis zdjęciowy od Yahoo! sam sposób, jak przy metodzie klasycznej patrz rysunek 5. Strona zostaje w pełni załadowana. Gdy użytkownik strony wykonania określoną akcję (kliknie na przycisk), pałeczkę przejmuje JavaScript. Odpowiedni skrypt napisany w tym języku najpierw pakuje odpowiednie dane wejściowe (parametry, które chcemy przekazać) do formatu XML, a następnie tworzy instancję klasy XMLHttpRequest. To właśnie ta klasa okazuje się kluczowa. XMLHttpRequest pozwala na wysyłanie i odbieranie przez przeglądarkę żądań w formie osobnej sesji, niezależnej od aktualnie wyświetlonej strony. W ten sposób do serwera trafia żądanie o określonych parametrach i do pracy zabiera się skrypt przygotowany do wygenerowania odpowiedzi. To właśnie do skryptu pracującego po stronie serwera (napisanego np. w PHP) dostarczone są informacje. Na podstawie dostarczonych danych realizowana jest określona procedura, np. na bazie danych (np. zmiana wartości w bazie, dodanie nowego rekordu). Gdy operacja dobiegnie końca, skrypt tworzy odpowiedź i odsyła ją do skryptu JavaScript, który pierwotnie wywołał akcję. Na podstawie tego, co skrypt otrzyma, dokonywana jest określona akcja. Zazwyczaj polega ona na zamianie zawartości elementu html o określonym identyfikatorze (id) na nowy, nadesłany z serwera. AJAX pozwala na dokonanie wielokrotnej akcji polegającej na wysłaniu i pobraniu danych. Za każdym razem nie wymaga to od przeglądarki przeładowania. AJAX może równie i dobrze pracować w pełni w tle przeglądarki. W takiej sytuacji użytkownik nawet nie spostrzeże, iż dane, które wpisuje do formularza są defacto wysyłane do serwera. Możliwości, jakie daje zastosowanie techniki AJAX pozwalają zatem na tworzenie witryn, które swoim wyglądem i zachowaniem przypominają tradycyjne programy komputerowe. Wywołania AJAX mogą być obsługiwane: Synchronicznie w określonych odstępach czasu (przydatne przy zapisie kopii aktualnie pisanego dokumentu); Asynchronicznie na żądanie (uruchamiane na akcję użytkownika). Rysunek 4. Schemat działania klasycznej strony www Stronę w AJAXie raz, proszę Rolą web designera jest spełnianie potrzeb klientów. Jako projektant stron www spotkałem się wielokrotnie z klientami, których podstawowym wymogiem wobec strony było wykorzystanie technologii AJAX. Klientów urzeka sposób, w jaki dobrze zaprojektowany AJAX pozwala poprawić interakcję z użytkownikiem, zapewnić mu szybki i intuicyjny dostęp do funkcji na stronie. Google dociera do ogromnej rzeszy internautów. Klient zapytany wprost o AJAX zapewne nie będzie zdawał sobie sprawy z istnienia takiej technologii. Gdy jednak zapytam go o serwisy, które powinienem przyjąć za wzór, często uzyskuję odpowiedź zbieżną z moimi przewidywaniami. Serwisy, które podobają się wszystkim (wyróżniają się) generalnie wykorzystują w mniejszym, bądź większym stopniu możliwości AJAX. Z AJAXem jest jednak podobnie jak z innymi nowinkami. Wśród programistów zawsze znajdują się konserwatyści, uważający AJAX za nic nadzwyczajnego oraz liberałowie, mniej lub bardziej zafascynowani techniką i skorzy do jej wdrażania. Prędzej, czy później każdy z nich będzie zmuszony do tworzenia aplikacji AJAX. Większość obecnie tworzonych stron w żaden sposób nie przypomina aplikacji w rodzaju Google Spreadsheets, czy Writely. Dlatego też rzadziej używamy w stosunku do nich terminu strona www. Strona powinna raczej pełnić rolę informacyjną (dostarczać treści), a zadaniem tych aplikacji jest wyłącznie realizacja konkretnej usługi. Klienci indywidualni i korporacyjni zainteresowani stworzeniem nowego rozwiązania w sieci, zdecydowanie najrzadziej decydują się na stworzenie tego typu usługi. Trudno więc pisać o technologii AJAX w kontekście odsuniętym od realiów rynku. Strony internetowe potrzebują prze- 4
4 XAJAX Narzędzia AJAX posiada wady, z których główne to: myślanej dawki technologii AJAX. W myśl tego twierdzenia dochodzimy do wniosku, że AJAX mógłby być wykorzystany na witrynie firmowej, czy na forum dyskusyjnym. Czemu nie. Jest wiele sytuacji, w których zastosowanie techniki AJAX ma ogromne znaczenie. Witryny i portale tematyczne, serwisy usługowe i informacyjne napotykają na co najmniej kilka sytuacji, w których użycie AJAX mogłoby pomóc w zapewnieniu wyższej funkcjonalności strony. Kluczem do poprawnego wdrażania technik AJAX jest przestrzeganie kilku reguł przy projektowaniu: Ładowanie dużych partii tekstu za pomocą AJAX, np. kolejnych części długiego artykułu jest niezgodne ze sztuką. Kolejne partie tekstu nie zostaną zaindeksowane przez wyszukiwarkę, a użytkownik i tak nie odczuje znacznego przyspieszenia ładowania nowej treści. Większość witryn techniki AJAX powinno traktować jako dodatek do dotychczasowej funkcjonalności strony. Zapewni to lepszą funkcjonalność strony, ale nie zmniejszy dostępności witryny, wówczas gdy klient posiada wyłączoną obsługę JavaScript. W tym celu konieczne jest zapewnie odpowiedniego zaplecza programistycznego po stronie serwera, które sprawi, że strona nie będzie całkowicie bezużyteczna. Znacznie bezpieczniej jest stworzyć kompleksowy serwis bez użycia AJAX, a następnie dodać do niej AJAX. W ten sposób bez AJAX strona może poprawnie funkcjonować; Rysunek 5. Schemat działania strony opartej o AJAX AJAX doskonale nadaje się do tworzenia przełączników, np. dodaj to zdjęcie do obserwowanych, które aktualizują bazę i zmieniają napis na przełączniku usuń z obserwowanych. Dzięki AJAX można umożliwić szybkie dokonywanie zmian, np. zmiana tytułu artykułu bez konieczności klikania na wyślij i przeładowania strony. W momencie, gdy użytkownik przestanie pisać, uruchamiane jest żądanie AJAX a treść tytułu zapisywana do bazy. Pomimo oczywistej korzyści dla użytkownika, konieczne jest zapewnienie oprogramowania, które zadziała przy wyłączonej obsłudze JS. Wciśnięcie w przeglądarce przycisku wstecz nie powoduje odwrócenia żadnego z procesów AJAX. Taka jest niestety wada tej technologii, która pod tym względem przegrywa z przyzwyczajeniami internautów; Elementy stron wstawiane przez AJAX nie są indeksowane przez wyszukiwarki; Wyłącznie obsługi JavaScript powoduje, że AJAX przestaje działać. Powyższe rady nie dotyczą oczywiście aplikacji internetowych, które zbudowano kompleksowo w oparciu o AJAX, takich jak opisywany Writely, czy G. Spreadsheets. W takich sytuacjach wyłączenie obsługi JavaScript powoduje całkowitą niedostępność usługi. Biblioteki W celu ułatwienia pracy przy tworzeniu aplikacji internetowych opartych o AJAX programiści sięgają po gotowe biblioteki. Nie ma nic w tym złego, bo biblioteki realizują większość krytycznych funkcji, będąc odpowiedzialne za faktyczny transport danych pomiędzy klientem a serwerem. Biorąc pod uwagę ciągły proces udoskonalania i popularność niektórych bibliotek, można śmiało stwierdzić, że tworzenie całej aplikacji od zera mija się z celem, podwyższając w dodatku budżet produkcyjny. Rysunek 6. XAJAX to narzędzie do szybkiego wdrażania AJAX na strony tworzone w oparciu o PHP 5
5 Narzędzia XAJAX Rysunek 7. Wygląd gotowego systemu zakładek Możemy rozróżnić dwa rodzaje bibliotek wspomagających programowanie, ze względu na nacisk, który położono na programowanie w: JavaScript; PHP. Położenie większego nacisku, na któryś z powyższych języków programowania może wydawać się nieco niejasne. W bibliotece, w której nacisk położono na PHP zadania programisty ograniczają się w zasadzie wyłącznie do pisania nowych funkcji obsługi żądań po stronie serwera. Biblioteka poradzi już sobie z resztą generując odpowiednie skrypty JavaScript do obsługi. Oczywiście nie obędzie się całkowicie bez JavaScriptu, lecz stosunek kodu pisanego w PHP do JavaScript będzie jak jeden do pięciu. Biorąc pod uwagę, iż większość programistów traktuje JavaScript jak trudne do kontrolowania dziecko, warto postawić na biblioteki z tej rodziny. Taki jest też XAJAX, biblioteka, której poświęcono tej artykuł. XAJAX XAJAX to biblioteka udostępniana w formie klasy PHP. Oparta o otwarty kod źródłowy udostępniana jest na licencji LGPL. Oznacza to, iż można na niej opierać aplikacje, za które dostaniemy zapłatę. Jak to działa? XAJAX składa się z dwóch bibliotek napisanej w PHP oraz napisanej w JavaScript. Każda z nich przyjmuje na siebie część zadań. Biblioteka XAJAX pracująca w formie obiektu PHP dla każdej funkcji PHP (która ma mieć możliwość asynchronicznej wymiany danych) generuje skrypt Java- Script odpowiedzialny za obsługę żądań. W momencie, gdy nastąpi żądanie, uruchamiany jest ten skrypt, który poprzez obiekt XMLHttpRequest komunikuje się z obiektem xajax mieszczącym się po stronie serwera. Ten wywołuje już tylko funkcję PHP odpowiedzialną za realizację żądania. Gdy funkcja PHP zostanie zrealizowana, xajax zwróci odpowiedź w formie dokumentu XML. Ta zostanie przetworzona parser xajax pracujący po stronie klienta (JavaScript). Odpowiedź zostanie zwrócona przez tenże skrypt JavaScript zazwyczaj w formie aktualizacji danych na stronie. XAJAX posiada wiele interesujących cech i właściwości: XAJAX jest aplikacją zorientowaną obiektowo. Rozszerzanie funkcjonalności oraz separowanie kodu od danych jest tu zadaniem bardzo łatwym. XAJAX łatwo też wdrożyć do już istniejących systemów. Stworzenie dodatkowych klas do obsługi ajax sprawia, iż programista zapomina całkowicie o tej technologii skupiając się na najbardziej dla niego istotnej logice biznesowej; XAJAX pracuje poprawnie na przeglądarkach z rodziny Mozilla (Firefox, Mozilla lub inna oparta o silnik Gecko), Internet Explorer i Safari; Istnieje możliwość bardzo łatwego i szybkiego zastępowania istniejących wartości nowymi. W ten sposób łatwo zmienić nie tylko porcję wyświetlanego aktualnie tekstu, ale także i styl css elementów, czy zaznaczyć pola checkbox lub radio formularzy; XAJAX posiada przyjazny mechanizm umożliwiający debugowanie napisanego wcześniej kodu. W formie okien JavaScript, XAJAX informuje o aktualnie podejmowanych przez bibliotekę działaniach. To przyspiesza programowanie i wyklucza przypadkowe błędy; XAJAX oferuje bardzo prosty mechanizm obsługi formularzy. Przy użyciu jednej funkcji otrzymujemy tablicę z danymi, które następnie można obrobić, wrzucić do bazy danych lub zwrócić użytkownikowi informację o błędnie wypełnionych polach; Przy obsłudze żądania możliwe jest zwrócenie dodatkowej funkcji Java- Rysunek 8. Wygląd gotowego systemu dodawania do obserwowanych 6
6 XAJAX Narzędzia Script, która zrealizuje bardziej zaawansowane zadanie (np. wyśle formularz, gdy ten zostanie sprawdzony przez AJAX na obecność błędów); XAJAX porównuje dane, które mają zostać uaktualnione na stronie, z tymi, które już w danym miejscu się znajdują. Jeżeli nic nie ulega zmianie, xajax nie podejmuje działań. W ten sposób Listing 1. Kod źródłowy systemu zakładek. <?php require('lib/xajax.inc.php'); function tabarea($tabid) { sleep(1); $objresponse = new xajaxresponse(); for($x=1; $x<=6; $x++) { $x == $tabid? $classname = 'active' : $classname = ''; $objresponse->addscript("document.getelementbyid('tab".$x."'). classname='$classname'"); $objresponse->addassign("maintabarea", "innerhtml", implode('', file('tpl/tab_content_'.$tabid.'.html'))); return $objresponse->getxml(); $xajax = new xajax(); $xajax->registerfunction('tabarea'); $xajax->processrequests();?> <html> [..] <?=$xajax->printjavascript()?> </head> <body> <script type="text/javascript"><!-- xajax.loadingfunction = function(){xajax.$('loading') style.display='block';; function hideloadingmessage() { xajax.$('loading'). style.display='none'; xajax.doneloadingfunction = hideloadingmessage; // --></script> <div class="content"> <ul class="tabs" id="maintab"> id="tab1" class="active"><a href="?show= tab1" onclick="xajax_tabarea('1'); return false;">tab 1</a></li> <li id="tab2"><a href="?show=tab2" onclick= "xajax_tabarea('2'); return false;">tab 2</a></li> id="tab3"><a href="?show=tab3" onclick= "xajax_tabarea('3'); return false;">tab 3</a></li> id="tab4"><a href="?show=tab4" onclick= "xajax_tabarea('4'); return false;">tab 4</a></li> id="tab5"><a href="?show=tab5" onclick= "xajax_tabarea('5'); return false;">tab 5</a></li> id="tab6"><a href="?show=tab6" onclick= "xajax_tabarea('6'); return false;">tab 6</a></li> </ul> <div class="insider"> <div id="loading">ładowanie...</div> <div id="maintabarea"> <? include('tpl/tab_content_1.html')?> </div> </div> </div> </body> </html> nie obserwujemy migania charakterystycznego dla aplikacji XAJAX opartych o model synchroniczny; Dla każdej z funkcji PHP może zostać przypisana inna metoda obsługi (POST lub GET). To pozwala zwiększyć nieco bezpieczeństwo całej aplikacji i zapobiega przypadkowym błędom; Dane przesyłane pomiędzy klientem a serwerem są kodowane w standardzie UTF-8. To zapewnia poprawną obsługę narodowych znaków diaktrycznych; XAJAX bardzo łatwo integruje się z wszelkimi systemami szablonowymi. Od strony systemu szablonowego konieczne jest dodanie wyłącznie jednej zmiennej. W jej miejsce zostaną wygenerowane odwołania do skryptów JavaScript odpowiedzialnych za realizację żądań; XAJAX w bardzo dobry sposób radzi sobie z wszelkimi skryptami Java- Script. Kod źródłowy strony przed i po wprowadzeniu tej biblioteki w życie nie różni się znacząco. Instalacja XAJAX Zadaniem tego artykułu jest zaprezentowanie praktycznych rozwiązań, które można niemal od zaraz wdrożyć na własną stronę. Zanim jednak przystąpimy do programowania, warto zapoznać się ze strukturą biblioteki oraz dostępnymi metodami. XAJAX można pobrać ze strony mieszącej się pod adresem: Dokumentację do projektu w formie wiki można odnaleźć pod adresem: Do prawidłowej implementacji XAJAX potrzebne są trzy pliki. Dwa z nich pracują po stronie serwera. Są to następujące skrypty PHP: xajax.inc.php główna klasa biblioteki; xajaxresponse.inc.php klasa do generowania odpowiedzi; Po stronie klienta pracuje jeden skrypt JavaScript; xajax.js klasa do obsługi żądań po stronie klienta; Przyglądając się kodowi źródłowemu xajax.js łatwo zauważyć, iż został on pozbawiony biały znaków. Ze względu na utrudnienia w dokonywaniu zmian w takim skrypcie udostępniono wersję z typowym formatowaniem xajax_uncompressed.js. Do późniejszej kompresji posłuży biblioteka xajaxcompress.php. Wymagania sprzętowe odnośnie biblioteki: Serwer Apache lub IIS (Windows XP/ 2003); PHP 4.3.x lub 5.x; Przeglądarka IE 5.5, Firefox 1.0, Safari 1.3, Opera
7 Narzędzia XAJAX Opis podstawowych metod Zaletą biblioteki XAJAX jest możliwość bardzo szybkiego startu. Podczas codziennej pracy z XAJAX wykorzystamy stosunkowo niewielką ilość metod, będących częścią dwóch klas PHP. Warto pokrótce nakreślić charakterystykę najważniejszych z nich. Klasa xajax (xajax.inc.php): debugon() / debugoff() włącza / wyłącza przydatny tryb usuwania błędów; registerfunction($nazwafunkcji) lub registerfunction(array($nazwa- Funkcji, $nazwaklasy, $nazwametody)) rejestruje funkcję PHP, do której będzie można odwołać się poprzez JavaScript; processrequests() uruchamia silnik odpowiedzialny za obsługę przychodzących wywołań; printjavascript() / getjavascript wyświetla / zwraca kod JavaScript, który musi zostać umieszczony w sekcji head strony. Klasa xajaxresponse (xajaxresponse. inc.php): addassign($idelementu, $atrybut, $dane) pozwala na zamianę wartości elementu HTML o id $idelementu; addscript($kodjs) uruchamia kod JavaScript umieszczony w zmiennej $kodjs; getxml() zwraca odpowiedź do przeglądarki użytkownika; Część XAJAX odpowiedzialna za kod JavaScript (xajax.js) także posiada swój zestaw metod. Wykorzystuje się je w kodzie HTML strony: x a j a x _ N a z w a F u n k c j i ( $ p 1, $p2,...) wywołuje zarejestrowaną funkcję PHP o nazwie NazwaFunkcji, przekazując parametry $p1, $p2,...; xajax.getformvalues($idformul arza) pobiera wszystkie dane, które użytkownik wpisał do formularza o id $idformularza. Zakładki Jednym z najbardziej praktycznych i najpopularniejszych efektów stosowanych na stronach www są obecnie zakładki. Choć podobny mechanizm można zrealizować bez użycia techniki ajax, pokażemy jak Listing 2. Kod źródłowy systemu zakładek. <?php mysql_connect('localhost', 'root', 'root'); mysql_select_db('test'); require('lib/xajax.inc.php'); function fetchobserve($id) { 1 FROM obserwowane WHERE article_id = "'.$id.'"'), 0); function checkobserve($id) { if(fetchobserve($id)) // zaprzestan obserwowania return 'Nie obserwuj'; else //rozpocznij obserwowanie return 'Obserwuj'; function observe($id) { if(fetchobserve($id)) mysql_query('delete FROM obserwowane WHERE article_id = "'.$id.'"'); else mysql_query('insert INTO obserwowane VALUES ("", "'.$id.'")'); $objresponse = new xajaxresponse(); $objresponse->addassign($id, "innerhtml", checkobserve($id)); return $objresponse->getxml(); $xajax = new xajax(); $xajax->registerfunction('observe'); $xajax->processrequests();?> <html> <head> [..] <?=$xajax->printjavascript()?> </head> <body> <div class="content"> <h3>tematy zbliżaj±cych się artykułów</h3> <p style="color: red;">klikaj±c na [..]</p> <h5>51: Użyteczność[..]</h5> <p>[..]</p> <p><a href="" onclick="xajax_observe('51'); return false;" id="51"><?=checkobserve('51')?></a></p> <h5>50: Okiełznać[..]</h5> <p>[..]</p> <p><a href="" onclick="xajax_observe('50'); return false;" id="50"><?=checkobserve('50')?></a></p> <h5>49: SEO[..]</h5> <p>[..]</p> <p><a href="" onclick="xajax_observe('49'); return false;" id="49"><?=checkobserve('49')?></a></p> </div> </body> 8
8 XAJAX Narzędzia ich wszędzie tam, gdzie dojdzie do zmian na stronie. Podstawowym kontenerem, do którego trafia tekst jest maintabarea. Jak łatwo zauważyć poprzedza go kontener loading, który domyślnie jest schowanych. W momencie, gdy XAJAX przystępuje do załadowania nowej zawartości, pojawia się informując użytkownika o trwającym procesie ładowania. Bez takiej informacji użytkownik może poczuć się zdezorientowany. Dokument XHTML jest skonstruowany tak, by nawet po wyłączeniu obstworzyć zakładki, do których dane są pobierane dopiero w momencie kliknięcia na nieaktywną zakładkę. Tworzenie systemu zakładek rozpoczynamy od zbudowania podstawowego kodu XHTML, składającego się z kilku kontenerów oraz listy punktowanej (druga połowa listingu 1). Przy użyciu stylów CSS dokonujemy zmiany wyglądu poszczególnych elementów, tak, by przypominały zakładki. XAJAX rozpoznaje elementy po ich identyfikatorach, stąd istotne jest dodanie Listing 3. Kod źródłowy systemu logowania część pracująca po stronie serwera <?php mysql_connect('localhost', 'root', 'root'); mysql_select_db('test'); define ('XAJAX_DEFAULT_CHAR_ENCODING', 'ISO '); require('lib/xajax.inc.php'); if($_server['query_string'] == 'wszystko_ok_loguj') { echo 'yeah! zalogowany'; return 0; function loginform($d) { $objresponse = new xajaxresponse(); $ = $d['a ']; $pass = $d['apass']; // pytam baze o istnienie loginu $data ('SELECT , password, registered FROM uzytkownicy WHERE ="'.$ .'"')); if(!$ OR!$pass) $out = 'Proszę podać i login.'; else { if($ != $data[' ']) { $out = 'Konto o podanym adresie nie istnieje.'; else { if($pass!= $data['password']) $out = 'Hasło do konta jest nieprawidłowe.'; else { if($data['registered'] == '0') $out = 'Użytkownik nie potwierdził rejestracji.'; else { $out = 'Proszę czekać. <b>logowanie</b>...'; $objresponse->addscript('document.loginform.submit();'); $objresponse->addassign("logblad", "innerhtml", $out); return $objresponse->getxml(); $xajax = new xajax(); $xajax->registerfunction('loginform'); $xajax->processrequests();?> sługi JavaScript strona pracowała w miarę poprawnie. Stąd linki do kolejnych zakładek posiadają parametry?show=tabx. Oczywiście z uwagi na brak miejsca, w powyższym kodzie brakuje obsługi takiej sytuacji. Poszczególne funkcje w XAJAX wywołuje się stosując konstrukcję xajax_ NazawFunkcji (Parametry). Jak łatwo zauważyć, ilość kodu JavaScript zastosowanego w tym przykładzie jest znikoma. Zastosowany dodatkowy parametr przy właściwości onclik return false powoduje, iż przeglądarka nie podąża za linkiem (element href). Parametr przekazywany do funkcji xajax_tabarea pozwala rozróżnić poszczególne zakładki, które odczytamy z plików szablonowych. Pierwsza połowa Listingu 1 zawiera kompletny kod potrzebny do obsługi wszystkich zdarzeń. Programowanie rozpoczynamy od załadowania części biblioteki XAJAX napisanej w PHP. Opuśćmy na chwilę deklarację funkcji tabarea, by przyjrzeć się instancji klasy xajax mieszczącej się zaraz poniżej. Wszystkie funkcje, które mają być zbierane przez bibliotekę JavaScript xajax muszą zostać uprzednio zarejestrowane. Nazwa funkcji jest oczywiście zgodna z nazwą występującą w kodzie XHTML. Metoda processrequest() generuje odpowiedni kod JavaScript, który jest odpowiedzialny za obsługę żądań. Skompletowany w ten sposób kod JS wrzucamy sekcji HEAD dokumentu XHTML, korzystając z funkcji printjavascript(). Wynik działania tej funkcji to dołączenie do strony części biblioteki XAJAX napisanej w JavaScript. Funkcja zwraca ponadto do kodu źródłowego strony także wszystkie inne dane potrzebne bibliotece do obsługi żądań. Ponieważ w systemie zakładek mamy do czynienia wyłącznie z jedną funkcją, do jej obsłużenia musimy odpowiednio stworzyć jedną funkcję PHP. Nazwa tej funkcji musi być zgodna z zarejestrowaną nazwą oraz nazewnictwem używanym w kodzie strony. Zawartość funkcji tabarea to już praca na zupełnie innej klasie. XajaxResponse odpowiada za generowanie odpowiedzi dla klienta. Parametr wejściowy funkcji $tabid to liczba z zakresu 1-6. W kolejnych plikach mieszących się w katalogu tpl umieszczona jest zawartość kolejnych zakładek. Oczywiście w tym miejscu można posłużyć się bazą danych lub bardziej skomplikowanym skryptem do pobierania danych, 9
9 Narzędzia XAJAX np. z bazy tekstowej. Tworząc nową instancję obiektu XajaxResponse przystępujemy do zamiany zawartości elementu DIV o identyfikatorze maintabarea. Wykorzystujemy metodę addassign, która dokona zamiany pobierając dane z jednego z plików szablonowych. Po kliknięciu zakładki chcielibyśmy by zmieniała się ona na aktywną. Zakładka jest aktywna, jeżeli przypisana do elementu LI klasa to active. Przy każdej zmianie zakładki konieczne jest ponowne ustawienie klasy active. W tym celu, dla wszystkich zakładek dokonujemy zresetowania wartości. Tylko zakładce, która jest aktualnie aktywna przypisujemy klasę active. Wysłanie danych z powrotem do użytkownika odbywa się przy użyciu metody getxml(). Funkcja usypiająca skrypt sleep użyta została by pokazać w zwolnieniu działanie skryptu pojawiający się element ładowanie. Dodaj do obserwowanych Kolejny przykład może wydawać się banalny, lecz jego zastosowanie jest nie do podważenia. Zakładamy, iż użytkownik jest zalogowany na naszej stronie. Chcemy mu umożliwić dokonywanie szybkich wyborów, polegających na dodawaniu wybranych zdjęć, artykułów, filmów do listy swoich ulubionych. W klasycznym wydaniu oznacza to konieczność przeładowania strony. AJAX pozwala taką operacje przeprowadzić w tle. Użytkownik klika na element, którym jest zainteresowany. Baza danych jest uaktualniana, a jego przycisk z dodaj do obserwowanych automatycznie zamienia się na usuń z obserwowanych. Mechanizm widoczny na Listingu 2 jest bardzo zbliżony do tego, który obserwowaliśmy w pierwszym przykładzie. Posiadamy trzy przełączniki, odwołujące się do funkcji o nazwie observe. Ładując po raz pierwszy stronę pobieramy z bazy danych informacje o aktualnie ustawionych przełącznikach. Jeżeli rekord dla danego identyfikatora artykułu istnieje, wówczas przełącznik został już włączony. W ten sposób powstaje strona pamiętająca poprzednie ustawienia użytkownika. Klikając na przycisk na stronie, z bazy danych pobierana jest informacja o aktualnym stanie przełącznika i podejmowana jest akcja dodanie lub usunięcie rekordu z informacją. Rysunek 9. Wygląd gotowego systemu logowania Listing 4. Kod źródłowy systemu logowania część pracująca po stronie klienta <html> <head> [..] <?=$xajax->printjavascript()?> </head> <body> moj@ .pl<br/> mojehaslo<br/> <div class="bar"> <h3>zaloguj się</h3> <form action="?wszystko_ok_loguj" method="post" class= "login" name="loginform" id="loginform" style="margin:0;"> <table> <tr> <td><label for="name"> </label></td> <td class="f"><input type="text" name= "a " value=""></td> </tr> <tr> <td><label for="name">hasło:</label></td> <td class="f"><input type="password" name= "apass"></td> </tr> <tr> <td></td> <td style="text-align: right;"><div id= "logblad"></div><input type="submit" value= "Loguj" onclick="xajax_loginform (xajax.getformvalues('loginform')); return false;"></td> </tr> </table> </form> </div> </body> </html> 10
10 XAJAX Narzędzia Logowanie Proces logowania na stronie www przebiega szablonowo. Gdy użytkownik wypełni formularz, ten wysyłany jest metodą POST do serwera użytkownik jest logowany. Co się jednak dzieje, gdy wpisany przez niego login lub hasło są nieprawidłowe? Użytkownik trafi czas, otrzymując komunikat o niepoprawnych danych dopiero po przeładowaniu strony. Stwórzmy zatem system logowania, który po wciśnięciu przycisku loguj sprawdzi poprawność wprowadzonych danych. Jeżeli będą one poprawne, formularz zostanie wysłany metodą POST, a użytkownik zostanie zalogowany. Jeżeli dane będą niepoprawne, użytkownik bez konieczności przeładowania strony otrzyma informację o niepoprawnym loginie, bądź haśle. Ten sposób rozumowania zapewnia, że nawet przy wyłączonej obsłudze AJAX użytkownik będzie mógł skorzystać z usługi. W poprzednich przykładach pominęliśmy kwestię kodowania. Problem nie był zauważalny. By dane przesyłane z serwera poprzez XAJAX miały poprawne kodowanie, należy ustalić domyślny standard kodowania. Mechanizm działania tego przykładu uwzględnia nową właściwość, a mianowicie pobieranie danych, które użytkownik wprowadził do formularza. Na końcu Listingu 4 widoczne jest odwołanie do skryptu JS odpowiedzialnego za obsługę żądania. Wewnątrz funkcji xajax_loginform znajduje się metoda xajax.get- FormValues, gdzie jej parametrem jest identyfikator przypisany do formularza. To właśnie ta linijka jest esencją tego przykładu. Do funkcji loginform widocznej na Listingu 3 trafiają wszystkie dane wprowadzone przez użytkownika w formie tablicy asocjacyjnej $d. Na podstawie danych, które wprowadził użytkownik pobieramy z bazy danych użytkowników informacje. W tym przykładzie może rozpatrujemy zbyt dużą ilość przypadków w których użytkownik popełnia błąd, lecz ma to na celu pokazanie jak szybko i łatwo przekazać użytkownikowi informację o niepoprawnym wprowadzeniu danych. Dopiero, gdy informacje są w pełni poprawne, następuje logowanie. Polega ono na wyświetleniu informacji proszę czekać oraz uruchomieniu skryptu, który automatycznie wyśle formularz. Podsumowanie XAJAX to biblioteka, która pozwala programiście przejść od nauki do programowania po zaledwie kwadransie. Poprawne działanie oraz pełnia automatyzacja sprawia, iż implementacja technik opartych o AJAX staje się nieskomplikowana i przez to osiągalna dla każdego. W XA- JAX-ie urzeka nie tylko prostota i efektywność działania, lecz także mała inwazyjność w kod już istniejących aplikacji. Przykładem na to jest kod JavaScript, o którym praktycznie zapomina się w momencie dołączenia biblioteki xajax.js do sekcji head strony. Pozostałe czynności związane z JS ograniczają się już tylko do tworzenia odwołań do funkcji PHP. XAJAX spisuje się dobrze, nawet gdy pod uwagę wziąć kwestię obsługi rodzimych znaków diaktrycznych. Bibliotekę tą można uznać za idealną dla wszystkich tych programistów PHP, którzy cenią sobie stałość i przewidywalność środowiska programistycznego jakim jest język PHP. Umiejętnie napisany kod PHP do obsługi XAJAX pozwala na bardzo szybkie zmiany, dzięki czemu nakłady dodatkowej pracy przy usuwaniu usterek są minimalne. W artykule udało się pokazać tylko najpopularniejsze metody oferowane przez biblioteki XAJAX. Więcej informacji o pozostałej funkcjonalności biblioteki można znaleźć w dokumentacji. O autorze Paweł Grzesiak jest projektantem witryn internetowych z sześcioletnim doświadczeniem. Zajmuje się tworzeniem rozbudowanych witryn w oparciu o system CMS własnego autorstwa. Jest autorem ponad 50 publikacji w Magazynie Internet, Internet Maker oraz phpsolutions. Obecnie pracuje nad książką, która ukaże się nakładem wydawnictwa Helion pod koniec tego roku. Kontakt: pawel@grzesiak.com.pl 11
Zajęcia 4 - Wprowadzenie do Javascript
Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją
Bardziej szczegółowoAJAX. Wykonał: Marcin Ziółkowski, AGH Kraków, AiR rok 5.
AJAX Wykonał: Marcin Ziółkowski, AGH Kraków, AiR rok 5. Czym jest AJAX? AJAX (Asynchronous JavaScript And XML) nie jest nową technologią, ale nowym sposobem wykorzystania kombinacji istniejących technologii
Bardziej szczegółowoREFERAT O PRACY DYPLOMOWEJ
REFERAT O PRACY DYPLOMOWEJ Temat pracy: Projekt i budowa systemu zarządzania treścią opartego na własnej bibliotece MVC Autor: Kamil Kowalski W dzisiejszych czasach posiadanie strony internetowej to norma,
Bardziej szczegółowoTemat: Ułatwienia wynikające z zastosowania Frameworku CakePHP podczas budowania stron internetowych
PAŃSTWOWA WYŻSZA SZKOŁA ZAWODOWA W ELBLĄGU INSTYTUT INFORMATYKI STOSOWANEJ Sprawozdanie z Seminarium Dyplomowego Temat: Ułatwienia wynikające z zastosowania Frameworku CakePHP podczas budowania stron internetowych
Bardziej szczegółowoI. Informacje ogólne. Jednym z takich systemów jest Mambo.
MAMBO (CMS) I. Informacje ogólne CMS, Content Management System ("system zarządzania treścią") jest to jedna lub zestaw aplikacji internetowych pozwalających na łatwe utworzenie oraz późniejszą aktualizację
Bardziej szczegółowoTworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie
Bardziej szczegółowoDokumentacja systemu NTP rekrut. Autor: Sławomir Miller
Dokumentacja systemu NTP rekrut Autor: Sławomir Miller 1 Spis treści: 1. Wstęp 1.1 Wprowadzenie 1.2 Zakres dokumentu 2. Instalacja 2.1 Wymagania systemowe 2.2 Początek 2.3 Prawa dostępu 2.4 Etapy instalacji
Bardziej szczegółowoAplikacje WWW - laboratorium
Aplikacje WWW - laboratorium PHP. Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej wykorzystującej technologię PHP. Aplikacja pokazuje takie aspekty, obsługa formularzy oraz zmiennych
Bardziej szczegółowoBaza danych do przechowywania użytkowników
System logowania i rejestracji jest bardzo przydatną funkcjonalnością na każdej stronie. Umożliwia sprawną identyfikację i zarządzanie użytkownikami. Strona ze skryptem logowania nabiera dużej wartości.
Bardziej szczegółowoInstrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 1/1.1.1/2015
Instrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 1/1.1.1/2015 INFORMACJE OGÓLNE 1. Wnioski o dofinansowanie projektu w ramach konkursu nr 1/1.1.1/2015
Bardziej szczegółowo6. Bezpieczeństwo przy współpracy z bazami danych
6. Bezpieczeństwo przy współpracy z bazami danych 6.1. Idea ataku SQL injection Atak znany jako SQL injection jest możliwy wtedy, gdy użytkownik ma bezpośredni wpływ na postać zapytania wysyłanego do bazy
Bardziej szczegółowoZPKSoft WDoradca. 1. Wstęp 2. Architektura 3. Instalacja 4. Konfiguracja 5. Jak to działa 6. Licencja
ZPKSoft WDoradca 1. Wstęp 2. Architektura 3. Instalacja 4. Konfiguracja 5. Jak to działa 6. Licencja 1. Wstęp ZPKSoft WDoradca jest technologią dostępu przeglądarkowego do zasobów systemu ZPKSoft Doradca.
Bardziej szczegółowoCzym jest AJAX. AJAX wprowadzenie. Obiekt XMLHttpRequest (XHR) Niezbędne narzędzia. Standardowy XHR. XHR z obsługą baz danych
Czym jest AJAX AJAX wprowadzenie Beata Pańczyk na podstawie: 1. Lis Marcin, Ajax, Helion, 2007 2. Hadlock Kris, Ajax dla twórców aplikacji internetowych, Helion, 2007 AJAX (Asynchronous JavaScript and
Bardziej szczegółowoObiektowy PHP. Czym jest obiekt? Definicja klasy. Składowe klasy pola i metody
Obiektowy PHP Czym jest obiekt? W programowaniu obiektem można nazwać każdy abstrakcyjny byt, który programista utworzy w pamięci komputera. Jeszcze bardziej upraszczając to zagadnienie, można powiedzieć,
Bardziej szczegółowoPomoc dla systemu WordPress
Pomoc dla systemu WordPress Ten plik pomocy przeznaczony jest dla pluginu stat24 w wersji 0.2. W tym pluginie porzucono wsparcie dla starszych wersji WordPress (niższych niż 1.5) oraz zrezygnowano z opcji
Bardziej szczegółowoInstrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 1/1.1.1/2017 INFORMACJE OGÓLNE 1. Wnioski o dofinansowanie projektu w ramach konkursu nr 1/1.1.1/2017
Bardziej szczegółowohttps://lsi.ncbr.gov.pl
Instrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 2/1.1.2/2015 INFORMACJE OGÓLNE 1. Wnioski o dofinansowanie projektu w ramach konkursu nr 2/1.1.2/2015
Bardziej szczegółowoWINDOWS Instalacja serwera WWW na systemie Windows XP, 7, 8.
WINDOWS Instalacja serwera WWW na systemie Windows XP, 7, 8. Gdy już posiadamy serwer i zainstalowany na nim system Windows XP, 7 lub 8 postawienie na nim serwera stron WWW jest bardzo proste. Wystarczy
Bardziej szczegółowoPrzewodnik użytkownika (instrukcja) AutoMagicTest
Przewodnik użytkownika (instrukcja) AutoMagicTest 0.1.21.137 1. Wprowadzenie Aplikacja AutoMagicTest to aplikacja wspierająca testerów w testowaniu i kontrolowaniu jakości stron poprzez ich analizę. Aplikacja
Bardziej szczegółowoInstrukcja. Rejestracji i aktywacji konta w systemie so-open.pl DOTACJE NA INNOWACJE; SOFTWARE OPERATIONS SP. Z O. O.
Instrukcja Rejestracji i aktywacji konta w systemie so-open.pl 1Strona 1 z 12 Spis treści Wstęp... 3 Rejestracja... 3 Aktywacja konta... 5 Rozpoczęcie pracy z systemem... 7 Pierwsze logowanie do systemu...
Bardziej szczegółowoDokumentacja smsapi wersja 1.4
Dokumentacja smsapi wersja 1.4 1. Wprowadzenie Platforma smsapi została skierowana do użytkowników chcących rozbudować swoje aplikacje o system wysyłania smsów. Aplikacja ta w prosty sposób umożliwia integrację
Bardziej szczegółowoInstrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 1/1.1.1/2015
Instrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 1/1.1.1/2015 INFORMACJE OGÓLNE 1. Wnioski o dofinansowanie projektu w ramach konkursu nr 1/1.1.1/2015
Bardziej szczegółowoREFERAT PRACY DYPLOMOWEJ Temat pracy: Projekt i realizacja serwisu ogłoszeń z inteligentną wyszukiwarką
REFERAT PRACY DYPLOMOWEJ Temat pracy: Projekt i realizacja serwisu ogłoszeń z inteligentną wyszukiwarką Autor: Paweł Konieczny Promotor: dr Jadwigi Bakonyi Kategorie: aplikacja www Słowa kluczowe: Serwis
Bardziej szczegółowoPaweł Rajba, pawel.rajba@continet.pl
Paweł Rajba, pawel.rajba@continet.pl Wprowadzenie Zalety Wady XMLHttpRequest AJAX w praktyce AJAX + jquery Literatura Z czego się składa? JavaScript + DOM Obiekt XMLHttpRequest Jakakolwiek technologia
Bardziej szczegółowoKlient poczty elektronicznej - Thunderbird
Klient poczty elektronicznej - Thunderbird Wstęp Wstęp Klient poczty elektronicznej, to program który umożliwia korzystanie z poczty bez konieczności logowania się na stronie internetowej. Za jego pomocą
Bardziej szczegółowoAplikacje internetowe - laboratorium
Aplikacje internetowe - laboratorium PHP Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej opartej o język PHP. Aplikacja ilustruje takie mechanizmy jak: obsługa formularzy oraz obsługa
Bardziej szczegółowoElektroniczny Urząd Podawczy
Elektroniczny Urząd Podawczy Dzięki Elektronicznemu Urzędowi Podawczemu Beneficjent może wypełnić i wysłać formularz wniosku o dofinansowanie projektów w ramach Regionalnego Programu Operacyjnego Województwa
Bardziej szczegółowoREFERAT PRACY DYPLOMOWEJ
REFERAT PRACY DYPLOMOWEJ Temat pracy: Projekt i implementacja aplikacji internetowej do wyszukiwania promocji Autor: Sylwester Wiśniewski Promotor: dr Jadwiga Bakonyi Kategorie: aplikacja webowa Słowa
Bardziej szczegółowoInstalacja systemu zarządzania treścią (CMS): Joomla
Instalacja systemu zarządzania treścią (CMS): Joomla Na stronie http://www.cba.pl/ zarejestruj nowe konto klikając na przycisk:, następnie wybierz nazwę domeny (Rys. 1a) oraz wypełnij obowiązkowe pola
Bardziej szczegółowoPLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ),
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ), Program 351203 Opracowanie: Grzegorz Majda Tematyka zajęć 2. Przygotowanie środowiska pracy
Bardziej szczegółowoTworzenie witryn internetowych PHP/Java. (mgr inż. Marek Downar)
Tworzenie witryn internetowych PHP/Java (mgr inż. Marek Downar) Rodzaje zawartości Zawartość statyczna Treść statyczna (np. nagłówek, stopka) Layout, pliki multimedialne, obrazki, elementy typograficzne,
Bardziej szczegółowoPraca Magisterska "System zdalnego składania ofert kupna i sprzedaży za pośrednictwem Internetu" AUTOR PROMOTOR
System Oferta Praca Magisterska Niniejszy system powstał w ramach pracy magisterskiej "System zdalnego składania ofert kupna i sprzedaży za pośrednictwem Internetu". Politechnika Poznańska Wydział Informatyki
Bardziej szczegółowoProtokół HTTP. 1. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX.
Protokół HTTP 1. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX. 1 Usługi WWW WWW (World Wide Web) jest najpopularniejszym sposobem udostępniania
Bardziej szczegółowoFAQ Systemu EKOS. 1. Jakie są wymagania techniczne dla stanowiska wprowadzania ocen?
27.06.11 FAQ Systemu EKOS 1. Jakie są wymagania techniczne dla stanowiska wprowadzania ocen? Procedura rejestracji ocen wymaga podpisywania protokołów (w postaci wypełnionych formularzy InfoPath Forms
Bardziej szczegółowoINSTRUKCJA obsługi certyfikatów
INSTRUKCJA obsługi certyfikatów dla użytkownika bankowości internetowej Pocztowy24 z wybraną metodą autoryzacji Certyfikat Spis treści 1. Wstęp... 3 1.1 Wymagania techniczne... 3 2. Certyfikat jako jedna
Bardziej szczegółowoStrona wizytówka od 400 zł
Strona wizytówka od 400 zł Oferta z dnia 21.01.2010 Prosta strona zawierająca podstawowe informacje o firmie oraz jej ofercie. Pozwala ona klientom na odnalezienie firmy w sieci, zapoznanie się z jej ofertą,
Bardziej szczegółowoPHP: bloki kodu, tablice, obiekty i formularze
1 PHP: bloki kodu, tablice, obiekty i formularze SYSTEMY SIECIOWE Michał Simiński 2 Bloki kodu Blok if-else Switch Pętle Funkcje Blok if-else 3 W PHP blok if i blok if-else wyglądają tak samo i funkcjonują
Bardziej szczegółowoPomoc dla http://host.nask.pl/ 31.12.2012 r.
Pomoc dla http://host.nask.pl/ 31.12.2012 r. Spis treści Kontakt... 2 Logowanie do konta pocztowego przez WWW... 3 Logowanie do panelu administracyjnego... 4 Konfiguracja klienta pocztowego... 7 Umieszczanie
Bardziej szczegółowoProgramowanie dla początkujących w 24 godziny / Greg Perry, Dean Miller. Gliwice, cop Spis treści
Programowanie dla początkujących w 24 godziny / Greg Perry, Dean Miller. Gliwice, cop. 2017 Spis treści O autorach 11 Podziękowania 12 Wprowadzenie 13 CZĘŚĆ I ZACZNIJ PROGRAMOWAĆ JUŻ DZIŚ Godzina 1. Praktyczne
Bardziej szczegółowoautor poradnika - KS Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej
Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej adres naszej strony: www.zs3.wroc.pl logo liceum 1. Aby dodać artykuł należy się zalogować: System pokaże nazwę zalogowanego użytkownika
Bardziej szczegółowoSpecyfikacja implementacyjna aplikacji serwerowej
Projekt: System wspomagania osób studiujących Strona: 1 / 7 Opracowali: Zatwierdzili: Spis treści Damian Głuchowski Krzysztof Krajewski Krzysztof Krajewski dr inż. Sławomir Skoneczny Spis treści... 1 1.
Bardziej szczegółowoAplikacje WWW - laboratorium
Aplikacje WWW - laboratorium PHP + bazy danych Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej wykorzystującej technologię PHP. Aplikacja pokazuje takie aspekty, współpraca PHP z bazami
Bardziej szczegółowoOpenLaszlo. OpenLaszlo
OpenLaszlo Spis Treści 1 OpenLaszlo Co to jest? Historia Idea Architektura Jako Flash lub DHTML Jako servlet lub SOLO Jak to działa? Język LZX Struktura programu Skrypty Obiekty i klasy Atrybuty i metody
Bardziej szczegółowoKORZYSTANIE Z BAZY DANYCH UpToDate
KORZYSTANIE Z BAZY DANYCH UpToDate 1 KORZYSTANIE Z BAZY DANYCH UpToDate 1. Wejdź na stronę Biblioteki Głównej Uniwersytetu Medycznego w Lublinie: http://www.biblioteka.umlub.pl 2. W ZASOBY kliknij na Zdalny
Bardziej szczegółowoPHP: bazy danych, SQL, AJAX i JSON
1 PHP: bazy danych, SQL, AJAX i JSON SYSTEMY SIECIOWE Michał Simiński 2 Bazy danych Co to jest MySQL? Jak się połączyć z bazą danych MySQL? Podstawowe operacje na bazie danych Kilka dodatkowych operacji
Bardziej szczegółowoAutor: Joanna Karwowska
Autor: Joanna Karwowska Wygodniejszym i wydajniejszym sposobem przechowywania i korzystania z dużej ilości danych zapisanych na serwerze jest współpraca z relacyjną bazą danych. 2 1. Utworzyć bazę danych.
Bardziej szczegółowoTechnologie Internetowe Raport z wykonanego projektu Temat: Internetowy sklep elektroniczny
Technologie Internetowe Raport z wykonanego projektu Temat: Internetowy sklep elektroniczny AiRIII gr. 2TI sekcja 1 Autorzy: Tomasz Bizon Józef Wawrzyczek 2 1. Wstęp Celem projektu było stworzenie sklepu
Bardziej szczegółowoProjektowani Systemów Inf.
Projektowani Systemów Inf. Wykład VII Bezpieczeństwo Copyrights by Arkadiusz Rzucidło 1 Bezpieczeństwo Bezpieczeństwo związane z danymi Konstrukcja magazynów danych Mechanizmy zapisu i modyfikacji danych
Bardziej szczegółowoedistro.pl Spis treści
Spis treści 1 Spis treści 1 Spis treści... 2 2 Obsługa systemu... 3 2.1 Wymagania... 3 2.2 Uzyskiwanie dostępu do edistro... 3 2.3 Sprawdzenie czy mam włączony JavaScript... 4 2.3.1 Internet Explorer...
Bardziej szczegółowoWykład 03 JavaScript. Michał Drabik
Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML
Bardziej szczegółowoE-commerce. Genialnie proste tworzenie serwisów w PHP i MySQL.
E-commerce. Genialnie proste tworzenie serwisów w PHP i MySQL. Autor: Larry Ullman Poznaj zasady wirtualnego handlu i zarabiaj prawdziwe pieniądze Jak stworzyć doskonałą witrynę sklepu internetowego? Jak
Bardziej szczegółowoWykład 5: PHP: praca z bazą danych MySQL
Wykład 5: PHP: praca z bazą danych MySQL Architektura WWW Podstawowa: dwuwarstwowa - klient (przeglądarka) i serwer WWW Rozszerzona: trzywarstwowa - klient (przeglądarka), serwer WWW, serwer bazy danych
Bardziej szczegółowo5.4. Tworzymy formularze
5.4. Tworzymy formularze Zastosowanie formularzy Formularz to obiekt bazy danych, który daje możliwość tworzenia i modyfikacji danych w tabeli lub kwerendzie. Jego wielką zaletą jest umiejętność zautomatyzowania
Bardziej szczegółowoInstrukcja generowania certyfikatu PFRON i podpisywania dokumentów aplikacji SODiR w technologii JS/PKCS 12
Instrukcja generowania certyfikatu PFRON i podpisywania dokumentów aplikacji SODiR w technologii JS/PKCS 12 Wersja 3.0 02-03-2017 Spis treści Instrukcja generowania certyfikatu PFRON i podpisywania dokumentów
Bardziej szczegółowoProgramowanie urządzeń mobilnych. projekt 6 ( )
Programowanie urządzeń mobilnych projekt 6 (05.01.2018) Usługi lokalizacyjne Jedną z powszechniejszych funkcjonalności wykorzystywanych przez liczne aplikacje przeznaczone dla urządzeń mobilnych jest możliwość
Bardziej szczegółowoJęzyki programowania wysokiego poziomu. Ćwiczenia
Języki programowania wysokiego poziomu Ćwiczenia Języki programowania Ćwiczenia Strukturalny HTML Arkusze CSS Formularze HTML i PHP Baza danych MySQL Forum internetowe Strukturalny HTML Zadania Dokument
Bardziej szczegółowoPlatforma e-learningowa
Dotyczy projektu nr WND-RPPD.04.01.00-20-002/11 pn. Wdrażanie elektronicznych usług dla ludności województwa podlaskiego część II, administracja samorządowa realizowanego w ramach Decyzji nr UDA- RPPD.04.01.00-20-002/11-00
Bardziej szczegółowoPodręcznik Użytkownika LSI WRPO
Podręcznik użytkownika Lokalnego Systemu Informatycznego do obsługi Wielkopolskiego Regionalnego Programu Operacyjnego na lata 2007 2013 w zakresie wypełniania wniosków o dofinansowanie Wersja 1 Podręcznik
Bardziej szczegółowoSzczegółowa specyfikacja funkcjonalności zamawianego oprogramowania.
Szczegółowa specyfikacja funkcjonalności zamawianego oprogramowania. Założenia projektowe systemu NETDOC. część 1: założenia ogólne i funkcjonalność rdzenia systemu Założenia ogólne Celem projektu jest
Bardziej szczegółowoInstrukcja dostępu do usługi Google Scholar
Instrukcja dostępu do usługi Google Scholar UWAGA dostęp do Google Scholar wymaga posiadania konta Google. Utworzenie jednego konta Google pozwala na dostęp do wszystkich usług Google. Oznacza to, że jeśli
Bardziej szczegółowoPROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, 351203 O STRUKTURZE PRZEDMIOTOWEJ
PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, 351203 O STRUKTURZE PRZEDMIOTOWEJ Systemy baz danych 1. 2 Wstęp do baz danych 2. 2 Relacyjny model baz danych. 3. 2 Normalizacja baz danych. 4. 2 Cechy
Bardziej szczegółowoSystem epon Dokumentacja użytkownika
System epon Dokumentacja użytkownika Prawa autorskie tego opracowania należą do MakoLab S.A. Dokument ten, jako całość, ani żadna jego część, nie może być reprodukowana lub rozpowszechniana w jakiejkolwiek
Bardziej szczegółowoelektroniczna Platforma Usług Administracji Publicznej
elektroniczna Platforma Usług Administracji Publicznej Instrukcja użytkownika Instrukcja korzystania z certyfikatu wersja 7.6 Ministerstwo Spraw Wewnętrznych i Administracji ul. Batorego 5, 02-591 Warszawa
Bardziej szczegółowoZaawansowane aplikacje internetowe
Zaawansowane aplikacje internetowe AJAX 1 Celem tego laboratorium jest pokazanie moŝliwości technologii AJAX. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, przechwytująca kliknięcia uŝytkownika
Bardziej szczegółowoInstrukcja użytkownika. Aplikacja dla WF-Mag
Instrukcja użytkownika Aplikacja dla WF-Mag Instrukcja użytkownika Aplikacja dla WF-Mag Wersja 1.0 Warszawa, Kwiecień 2015 Strona 2 z 13 Instrukcja użytkownika Aplikacja dla WF-Mag Spis treści 1. Wstęp...4
Bardziej szczegółowoZajęcia 11 wykorzystanie MySQL w PHP
Zajęcia 11 wykorzystanie MySQL w PHP MySQL MySQL jest jednym z najpopularniejszych wolnodostępnych systemów zarządzania relacyjnymi bazami danych. Głównym jego załoŝeniem była szybkość działania, toteŝ
Bardziej szczegółowoSpis treści. Wstęp 5 Rozdział 1. Praca z AJAX-em 9. Rozdział 2. Współpraca ze skryptami PHP 55. Rozdział 3. Obsługa formularzy 81
Spis treści Wstęp 5 Rozdział 1. Praca z AJAX-em 9 Pierwszy przykład 9 Obiekt XMLHttpRequest 12 Transmisja danych 21 Model DOM 34 Obsługa wielu żądań 45 Rozdział 2. Współpraca ze skryptami PHP 55 Odbieranie
Bardziej szczegółowoInstrukcja Integracja z istore. Wersja z 07/02/2015. Copyright Zakupteraz.pl
Instrukcja Integracja z istore Wersja z 07/02/2015 Copyright Zakupteraz.pl 1. SPIS TREŚCI 1. SPIS TREŚCI... 2 2. WSTĘP... 3 3. OPIS PROCEDURY INTEGRACJI... 4 1.1. LOGOWANIE... 4 1.2. PANEL KLIENTA INTEGRACJA
Bardziej szczegółowo1. Rejestracja 2. Logowanie 3. Zgłaszanie nowego wniosku projektowego
1. Rejestracja Dostęp do wniosku projektowego możliwy jest jedynie dla zarejestrowanych użytkowników. Aby zostać zarejestrowanym należy wypełnić formularz dostępny na stronie www.polskapomoc.gov.pl, a
Bardziej szczegółowoREFERAT O PRACY DYPLOMOWEJ
REFERAT O PRACY DYPLOMOWEJ Temat pracy: Projekt i realizacja elektronicznego dziennika ocen ucznia Autor: Grzegorz Dudek wykonanego w technologii ASP.NET We współczesnym modelu edukacji, coraz powszechniejsze
Bardziej szczegółowoSmarty PHP. Leksykon kieszonkowy
IDZ DO PRZYK ADOWY ROZDZIA SPIS TREœCI KATALOG KSI EK KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG Smarty PHP. Leksykon kieszonkowy Autor: Daniel Bargie³ ISBN: 83-246-0676-9 Format: B6, stron: 112 TWÓJ KOSZYK
Bardziej szczegółowoNajważniejsze informacje dla klienta na temat Portalu Serwisowego D-Link Spis treści
Najważniejsze informacje dla klienta na temat Portalu Serwisowego D-Link Spis treści Rozdział 1: Rejestracja i logowanie do Portalu Serwisowego... 2 Rozdział 2: Informacje ogólne... 4 Rozdział 3: Rejestracja
Bardziej szczegółowoSOGA web co powinieneś wiedzieć
SOGA web co powinieneś wiedzieć 1. Zakup Opłata za użytkowanie serwisu SOGA web wynosi 990zł netto za pierwszy rok oraz 99zł za każdy kolejny. Do uruchomienia serwisu konieczne jest posiadanie licencji
Bardziej szczegółowoInternetowy moduł prezentacji WIZYT KLIENTA PUP do wykorzystania np. na stronie WWW. Wstęp
Internetowy moduł prezentacji WIZYT KLIENTA PUP do wykorzystania np. na stronie WWW. Wstęp Prezentujemy Państwu propozycję modułu aplikacji internetowej słuŝącej do prezentacji zaplanowanych wizyt klienta
Bardziej szczegółowoAjax. 1. Wprowadzenie. 2. Aplikacja serwerowa
Ajax 1. Wprowadzenie Do tej pory każda akcja na Waszej stronie kończyła się nowym requestem do serwera i przeładowaniem całej strony w przeglądarce. W tej instrukcji dodamy elementy asynchroniczne na stronie,
Bardziej szczegółowoJęzyki programowania wysokiego poziomu. Blog
Języki programowania wysokiego poziomu Blog Elementy obowiązkowe (2p.) Wyświetlanie wpisów Logowanie/wylogowanie Dodawanie wpisów Elementy obowiązkowe (2p.) Wyświetlanie wpisów - wszystkie wpisy na jednej
Bardziej szczegółowoWdrożenie modułu płatności eservice. dla systemu Zen Cart 1.3.9 1.5
Wdrożenie modułu płatności eservice dla systemu Zen Cart 1.3.9 1.5 - dokumentacja techniczna Wer. 01 Warszawa, styczeń 2014 1 Spis treści: 1 Wstęp... 3 1.1 Przeznaczenie dokumentu... 3 1.2 Przygotowanie
Bardziej szczegółowoInstrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 1/4.1.4/2015
Instrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 1/4.1.4/2015 INFORMACJE OGÓLNE 1. Wnioski o dofinansowanie projektu w ramach konkursu nr 1/4.1.4/2015
Bardziej szczegółowoweblsp Wybór przeglądarki i jej ustawienia Instrukcja ADH-Soft sp. z o.o., ul. 17 Stycznia 74, Warszawa
weblsp Wybór przeglądarki i jej ustawienia Instrukcja ADH-Soft sp. z o.o., ul. 17 Stycznia 74, 02-146 Warszawa www.adh.com.pl Spis treści 1. Wydajność aplikacji po stronie klienta... 3 2. Wybór przeglądarki
Bardziej szczegółowoTypy przetwarzania. Przetwarzanie zcentralizowane. Przetwarzanie rozproszone
Typy przetwarzania Przetwarzanie zcentralizowane Systemy typu mainfame Przetwarzanie rozproszone Architektura klient serwer Architektura jednowarstwowa Architektura dwuwarstwowa Architektura trójwarstwowa
Bardziej szczegółowo5. Wypełniony formularz należy zatwierdzić klikając na przycisk ZATWIERDŹ.
Pomoc Aby skorzystać z generatora wniosku o dofinansowanie wnioskodawca musi wpisać do przeglądarki internetowej adres internetowy generatora wniosku (http://pw.opolskie.pl). W kolejnym etapie wnioskodawca
Bardziej szczegółowoWprowadzenie do Internetu Zajęcia 5
Zajęcia 5 Formularze w PHP Przekazywanie danych ze strony do skryptu PHP Dane ze strony WWW do skryptu PHP można przekazać za pomocą formularzy. W tym celu należy stworzyć formularz (znacznik ),
Bardziej szczegółowoImię, nazwisko i tytuł/stopień KOORDYNATORA (-ÓW) kursu/przedmiotu zatwierdzającego protokoły w systemie USOS Dr Adam Naumowicz
SYLLABUS na rok akademicki 01/013 Tryb studiów Studia stacjonarne Kierunek studiów Informatyka Poziom studiów Pierwszego stopnia Rok studiów/ semestr II/4 Specjalność Bez specjalności Kod katedry/zakładu
Bardziej szczegółowo- 1 Laboratorium fotografii cyfrowej Foto Video Hennig
Foto Video Hennig, ul. Krótka 20,83-110 Tczew tel. 58 531 79 24,, kontakt@foto-hennig.pl Instalacja i użytkowanie programu FotoSender 3.0 Pobieranie i instalacja: 1. Pobieranie i instalacja Fotosendera
Bardziej szczegółowoTworzenie pliku źródłowego w aplikacji POLTAX2B.
Tworzenie pliku źródłowego w aplikacji POLTAX2B. Po utworzeniu spis przekazów pocztowych klikamy na ikonę na dole okna, przypominającą teczkę. Następnie w oknie Export wybieramy format dokumentu o nazwie
Bardziej szczegółowoLeftHand Sp. z o. o.
LeftHand Sp. z o. o. Producent oprogramowania finansowo-księgowe, handlowego i magazynowego na Windows i Linux Instrukcja rejestracji wersji testowej programu LeftHand Ten dokument ma na celu przeprowadzić
Bardziej szczegółowoFARA INTENCJE ONLINE. Przewodnik dla użytkownika programu FARA. Włodzimierz Kessler SIGNUM-NET
2018 FARA INTENCJE ONLINE Przewodnik dla użytkownika programu FARA Wersja 1.6, 10 lutego 2018 www.fara.pl Włodzimierz Kessler SIGNUM-NET 2018-02-10 Spis treści 1. Zanim zaczniesz... 2 1.1. Dla kogo przeznaczony
Bardziej szczegółowoProgramy LeftHand - Obsługa plików JPK. Luty 2017
Programy LeftHand - Obsługa plików JPK Luty 2017 Spis treści 1. Wstęp... 2 2. Pierwsze uruchomienie funkcji JPK... 2 3. Generowanie plików JPK... 9 4. Wysyłanie plików JPK... 10 5. Pobieranie i drukowanie
Bardziej szczegółowoReferat z przedmiotu Technologie Internetowe SPIS TREŚCI
SPIS TREŚCI 1.Dwie metody przekazu danych do serwera 2 2.Metoda GET przykład 3 3.Metoda POST przykład 4 4.Kiedy GET a kiedy POST 5 5.Szablony po co je stosować 7 6.Realizacja szablonu własną funkcją 8
Bardziej szczegółowoSerwis nie zbiera w sposób automatyczny żadnych danych, z wyjątkiem danych zawartych w plikach cookies podczas samego korzystania z Witryny.
POLITYKA PRYWATNOŚCI (POLITYKA COOKIES) SERWISU WWW.EREPETITIO.COM Zawartość 1. Informacje ogólne... 1 2. Jakie dane zbiera Serwis w sposób automatyczny podczas korzystania z Witryny?... 1 3. Logi serwera...
Bardziej szczegółowoAplikacje Internetowe
Aplikacje Internetowe ITA-103 Wersja 1 Warszawa, październik 2008 Spis treści Wprowadzenie i-4 Moduł 1 Podstawy HTML 1-1 Moduł 2 Kaskadowe Arkusze Stylów CSS 2-1 Moduł 3 Podstawy JavaScript 3-1 Moduł 4
Bardziej szczegółowoSynchronizacja i współdzielenie plików w Internecie. Prezentacja. Instrukcja obsługi aplikacji WEB Manager plików
Synchronizacja i współdzielenie plików w Internecie Prezentacja Instrukcja obsługi aplikacji WEB Manager plików 1 Cel instrukcji 1. Zapoznajesz się z instrukcją obsługi aplikacji internetowej File Nebula
Bardziej szczegółowoZintegrowane Systemy Zarządzania Biblioteką SOWA1 i SOWA2 ZAMAWIANIE I REZERWOWANIE
Zintegrowane Systemy Zarządzania Biblioteką SOWA1 i SOWA2 ZAMAWIANIE I REZERWOWANIE Poznań 2011 Spis treści 1. Zamawianie i rezerwowanie definicja pojęć...3 2. Zasada działania systemu...4 3. Zamawianie
Bardziej szczegółowoPodręcznik użytkownika
Podręcznik użytkownika Moduł kliencki Kodak Asset Management Software Stan i ustawienia zasobów... 1 Menu Stan zasobów... 2 Menu Ustawienia zasobów... 3 Obsługa alertów... 7 Komunikaty zarządzania zasobami...
Bardziej szczegółowoWprowadzenie do Doctrine ORM
Wprowadzenie do Doctrine ORM Przygotowanie środowiska Do wykonania ćwiczenia konieczne będzie zainstalowanie narzędzia Composer i odpowiednie skonfigurowanie Netbeans (Tools->Options->Framework & Tools->Composer,
Bardziej szczegółowoDokumentacja wstępna TIN. Rozproszone repozytorium oparte o WebDAV
Piotr Jarosik, Kamil Jaworski, Dominik Olędzki, Anna Stępień Dokumentacja wstępna TIN Rozproszone repozytorium oparte o WebDAV 1. Wstęp Celem projektu jest zaimplementowanie rozproszonego repozytorium
Bardziej szczegółowoSprawdzenie czy połączenie przebiegło poprawnie if (mysqli_connect_errno()) { echo Błąd; Połączenie z bazą danych nie powiodło się.
Za operacje na bazie odpowiada biblioteka mysqli (i jak improved). Posiada ona interfejs obiektowy jak i proceduralny. Podłączenie do bazy (obiektowo) mysqli:: construct() ([ string $host [, string $username
Bardziej szczegółowo