SlideShare a Scribd company logo
1 of 20
Download to read offline
Tworzenie stron WWW
                           z wykorzystaniem Ajaksa.
                           Projekty
                           Autor: Larry Ullman
                           T³umaczenie: Rados³aw Meryk
                           ISBN: 978-83-246-1553-7
                           Tytu³ orygina³u: Building a Web Site
                           with Ajax: Visual QuickProject Guide
                           Format: 170x230, stron: 168

                                        Stwórz interaktywny serwis WWW, korzystaj¹cy z technologii AJAX!
                                • Jakich narzêdzi potrzebujesz, by stworzyæ stronê WWW?
                                • Jak wzbogaciæ witrynê dziêki technologii AJAX?
                                • Jak obs³ugiwaæ dane w formacie XML?
                           AJAX jest skrótem od Asynchronous JavaScript and XML. Technologia ta sta³a siê trzonem
                           rewolucji Web 2.0. Dziœ trudno sobie wyobraziæ nowoczesn¹ aplikacjê WWW, która
                           nie korzysta³aby z dobrodziejstw tego rozwi¹zania. Nie bez powodu! Intuicyjny interfejs
                           u¿ytkownika, wysoki poziom interaktywnoœci, wygoda oraz dynamika serwisów
                           korzystaj¹cych z tego rozwi¹zania gwarantuj¹, ¿e jeszcze d³ugo bêdzie ono na topie
                           technik tworzenia stron WWW.
                           Dziêki ksi¹¿ce „Tworzenie stron WWW z wykorzystaniem AJAKSA. Projekty” poznasz proces
                           tworzenia strony WWW, korzystaj¹cej z tej technologii. Autor krok po kroku wyjaœnia zasadê
                           dzia³ania oraz sposób tworzenia serwisu i ka¿dego z elementów projektowanych dla niego
                           aplikacji. Pierwsze zadanie, które stawia on przed Tob¹, to zbudowanie bazy danych. PóŸniej
                           nauczysz siê implementowaæ funkcjonalnoœci takie, jak przegl¹danie danych, dodawanie
                           nowych wpisów czy te¿ wyszukiwanie informacji. Po przeczytaniu niniejszej ksi¹¿ki nie
                           bêdzie dla Ciebie problemem po³¹czenie na przyk³ad technologii HTML, JavaScript, CSS,
                           XML i PHP w celu uzyskania dynamicznego, interaktywnego oraz efektownego serwisu
                           WWW. Zobaczysz tak¿e, jak poszczególne funkcjonalnoœci aplikacji WWW dzia³aj¹
                           bez wykorzystania technologii AJAX, a nastêpnie jak zyskuj¹ na atrakcyjnoœci po dodaniu
                           tej technologii. Teraz wszystko zale¿y tylko od Twojej wyobraŸni!
                                • Zasada dzia³ania AJAX
                                • Narzêdzia konieczne w procesie projektowania, wytwarzania i testowania
                                • Przygotowanie bazy danych
                                • Obs³uga ¿¹dañ z wykorzystaniem PHP
                                • Przygotowanie stron HTML
                                • Tworzenie i obs³uga formularzy
Wydawnictwo Helion              • Dynamiczna weryfikacja danych wprowadzanych przez u¿ytkownika
ul. Koœciuszki 1c               • Testowanie statycznych rozwi¹zañ
44-100 Gliwice                  • Testowanie dynamicznych rozwi¹zañ, korzystaj¹cych z AJAX
tel. 032 230 98 63              • Wykorzystanie jêzyka JavaScript
e-mail: helion@helion.pl        • Przegl¹danie informacji
                                • Wyszukiwanie informacji
                                • Dodawanie nowych wpisów do bazy
                                • Zastosowanie formatu XML
                                • Wykorzystanie formatu JSON
                                                 Stwórz swoj¹ w³asn¹, interaktywn¹ stronê WWW!
spis treści
wprowadzenie                                                                        9
jak działa ajax?                         10   witryna internetowa
czego można nauczyć się z tej książki?   11     towarzysząca książce                17
jak zorganizowana jest ta książka?       12   następny krok                         18
potrzebne narzędzia                      14


1. tworzenie bazy danych                                                            19

dostęp do bazy danych MySQL              20   wypełnienie tabel danymi              25
utworzenie bazy danych                   21   informacje dodatkowe                  27
utworzenie tabel                         23


2. przeglądanie pracowników                                                         29

co będziemy robić?                       30   nawiązanie połączenia z bazą danych   36
utworzenie strony HTML                   31   utworzenie arkusza stylów             37
utworzenie formularza HTML               32   wykorzystanie arkusza stylów          38
utworzenie skryptu PHP                   33   testowanie stron                      39
wyświetlenie listy pracowników           34   informacje dodatkowe                  40
zgłaszanie błędów                        35


3. przeglądanie z wykorzystaniem technologii ajax                                   45

co będziemy robić?                       46   wyświetlenie listy pracowników        53
utworzenie funkcji                       47   obsługa odpowiedzi                    55
sprawdzenie obsługi technologii Ajax     48   wyświetlenie wyników                  56
wywołanie funkcji                        49   modyfikacja kodu HTML                 57
konfiguracja Ajaksa                      50   testowanie warstwy Ajaksa             58
rozpoczęcie strony PHP                   52   informacje dodatkowe                  59




                                                                                         5
spis treści

4. dodawanie rekordów                                                           63

co będziemy robić?                    64   walidacja danych formularza           70
utworzenie strony HTML                65   aktualizacja bazy danych              73
utworzenie formularza                 66   wyświetlenie komunikatów obłędach     74
utworzenie elementów formularza       67   testowanie wersji nieajaksowej        75
rozpoczęcie strony PHP                69   informacje dodatkowe                  77


5. dodawanie rekordów z wykorzystaniem technologii ajax                         79

co będziemy robić?                    80   aktualizacja bazy danych              92
dodanie elementów technologii Ajax    82   uzupełnienie danych w formacie XML    93
wykorzystanie warstwy Ajaksa          83   obsługa odpowiedzi                    95
konfiguracja Ajaksa                   84   przygotowanie strony                  96
przygotowanie danych formularza       85   obsługa danych w formacie XML         97
dokończenie funkcji                   86   wyświetlenie wyników                  99
przygotowanie do przesyłania               testowanie warstwy Ajaksa            100
  wyników w formacie XML              87   informacje dodatkowe                 102
walidacja danych formularza           88



6. wyszukiwanie                                                                 107

co będziemy robić?                   108   wyświetlenie wyników                 114
utworzenie strony HTML               109   wyświetlenie komunikatów o błędach   115
utworzenie formularza                111   testowanie wersji niajaksowej        116
rozpoczęcie strony PHP               112   informacje dodatkowe                 117
zapytanie do bazy danych             113




6                                                                    spis treści
7. wyszukiwanie z wykorzystaniem ajaksa                                      119

co będziemy robić?                     120   przygotowanie strony            132
dodanie elementów technologii Ajax     122   obsługa danych w formacie XML   133
wykorzystanie warstwy Ajaksa           123   wyświetlenie wyników            134
konfiguracja Ajaksa                    125   obsługa nazwisk                 136
dokończenie funkcji                    126   obsługa wydziałów               137
przygotowanie do przesyłania                 obsługa adresów e-mail          139
  wyników w formacie XML               127   wyświetlenie komunikatu
zapytanie do bazy danych               128     o braku wyników               141
pobranie wyników                       129   dokończenie funkcji             142
dokończenie skryptu PHP                130   testowanie warstwy Ajaksa       143
obsługa odpowiedzi                     131   informacje dodatkowe            144



dodatek A następne kroki                                                     149

problemy związane z Ajaksem            150   zasoby w internecie             159
alternatywy dla Ajaksa                 151   zestawy Framework
wprowadzenie do JSON                   152     dla języka JavaScript         160
wysyłanie danych w formacie JSON       154   biblioteki PHP-Ajax             161
dostęp do danych w formacie JSON       156   debugowanie kodu JavaScript     162
korzystanie z danych w formacie JSON   157   informacje dodatkowe            166


skorowidz                                                                    169




spis treści                                                                        7
dodawanie
       4                                            rekordów
W pierwszym rozdziale utworzyliśmy strukturę bazy danych dla witryny WWW
wyświetlającej listę pracowników. W poprzednich dwóch rozdziałach opracowaliśmy
ajaksową i nieajaksową wersję aplikacji wyświetlającej listę pracowników wybrane-
go wydziału. W rozdziale niniejszym opracujemy funkcję dodawania pracowników
do bazy danych. Oczywiście rozpoczniemy od wersji nieajaksowej gwarantującej
dostęp dla wszystkich użytkowników, a następnie — w kolejnym rozdziale — opracu-
jemy wersję bazującą na technologii Ajax.

Rozpoczniemy od utworzenia formularza HTML, który pobiera wszystkie niezbęd-
ne dane. Następnie napiszemy skrypt PHP, który obsługuje przesyłanie formularza
bez wykorzystania technologii Ajax. Będzie to bardzo prosty skrypt PHP obsługujący
formularz HTML.




                                                                                63
co będziemy robić?

 1 Najpierw, na stronach 65 – 68,
utworzymy stronę HTML z formu-
larzem.

W formularzu są elementy repre-
zentujące wszystkie dane dotyczą-
ce pracowników zapisane w bazie
danych.



Gdy w przeglądarkach bez obsługi
Ajaksa użytkownik kliknie Dodaj,
formularz zostanie przesłany
do skryptu PHP.



 2 Na stronach 69 – 74 napiszemy
skrypt PHP, który obsługuje for-
mularz HTML. Skrypt dokonuje
walidacji danych formularza,
a następnie zwraca wyniki.

W przypadku nieprawidłowego
wypełnienia dowolnego pola skrypt
PHP wyświetla komunikat o błędzie.

 3 Na koniec, tak jak wcześniej,     Na końcu tego rozdziału, w punkcie
przetestujemy napisane elemen-       „Informacje dodatkowe”, umieścimy
ty aplikacji, aby uzyskać pewność,   dodatkowe dane, wskazówki i zalecenia
że wszystko działa poprawnie.        związane z wykonanymi czynnościami.

                                     W następnym rozdziale do utworzonych
                                     stron dodamy elementy technologii
                                     Ajax.



64                                             dodawanie rekordów
utworzenie strony html

Rozpoczniemy od utworzenia nowej strony HTML w dowolnym edytorze tekstu.



     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtmll/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
     <head>
        <meta http-equiv="content-type" content="text/html;
       charset=windows-1250" />
        <title>Nowy pracownik</title>
        <style type="text/css" media="all">@import "style.css";</style>
     </head>
     <body>
     </body>
     </html>




    Element <title> opisuje przeznaczenie strony.




                                         Arkusz stylów nadaje stronie
                                         taki sam wygląd jak pozostałym
                                         stronom w serwisie.




dodawanie rekordów                                                         65
utworzenie formularza

                                       1 Zdefiniuj komunikat informujący
                                      o tym, do czego służy formularz i jak należy
                                      z niego korzystać.


     ...
     <body>
     <p>Ten formularz służy do wprowadzania danych dotyczących pracownika
        (wszystkie pola są obowiązkowe):</p>
     <form action="dodaj_pracownika.php" method="post" id="prac_form">
     </form>
     </body>
     ...




 2 W przypadku przeglądarek nieobsługujących
Ajaksa formularz będzie przesłany do skryptu
dodaj_pracownika.php, który napiszemy w dalszej
części rozdziału.


                                 3 Formularz wykorzystuje metodę
                                POST, a nie GET (zobacz „Informacje
                                dodatkowe” na stronie 77).


                                              4 Dla warstwy ajaksowej istotne
                                             znaczenie ma wartość atrybutu
                                             id formularza (prac_form).




66                                                   dodawanie rekordów
utworzenie elementów formularza

   1 Do wprowadzania imienia, nazwiska i adresu e-mail pracownika
  należy utworzyć pola tekstowe.


    ...
    <form action="dodaj_pracownika.php" method="post" id="prac_form">
    <p><label class="tytul" id="imie_etykieta">Imię<input type="text"
      id="imie" name="imie"/></label> </p>
    <p><label class="tytul" id="nazwisko_etykieta">Nazwisko<input
     type="text" id="nazwisko" name="nazwisko" /></label> </p>
    <p><label class="tytul" id="email_etykieta">Adres e-mail<input
     type="text" id="email" name="email" /></label>
    </p>




dodawanie rekordów                                                      67
utworzenie elementów formularza cd.

2 Wydział pracownika można wybrać za pomocą rozwijanego menu.


       <p><label class="tytul" id="wydzial_id_etykieta">Wydział<select
        id="wydzial_id" name="wydzial_id">
             <option value="1">Kadry</option>
             <option value="2">Księgowość</option>
             <option value="3">Marketing</option>
             <option value="4">Wydział pomocniczy</option>
       </select></label> </p>



      3 Kolejne pole tekstowe służy do wprowadzania numeru
     telefonu wewnętrznego pracownika.



       <p><label class="tytul" id="telefon_wewn_etykieta">Numer
         wewnętrzny<input type="text" id="telefon_wewn" name="telefon_
        wewn" /></label> </p>
       <p><input name="dodaj" type="submit" value="Dodaj" /></p>
       </form>
       ...




      4 Etykiety informują o przezna-
     czeniu poszczególnych elementów
     (zobacz „Informacje dodatkowe”
     na stronie 77).
     5 Przycisk przesyłania formularza
     ma wartość Dodaj.
      6 Skrypt należy zapisać w pliku
     dodaj_pracownika.html i umieścić
     w tym samym katalogu co pozostałe
     strony aplikacji.



68                                                    dodawanie rekordów
rozpoczęcie strony php

Pierwszy skrypt PHP obsługuje operację przesłania formularza bez wykorzystania
technologii Ajax. Powinien to być jednocześnie prawidłowy dokument HTML, dlatego
należy go rozpocząć od poniższych znaczników:


     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
     <head>
          <meta http-equiv="content-type" content="text/html;
          charset=windows-1250" />
          <title>Nowy pracownik</title>
          <style type="text/css" media="all">@import "style.css";</style>
     </head>
     <body>
     <h1>Nowy pracownik</h1>
     <?php # dodaj_pracownika.php
     require_once('mysql.inc.php');
     mysql_close($dbc);
     ?>
     </body>
     </html>



   Wszystkie własności strony zostaną zdefiniowane pomiędzy znacznikami PHP.

   Strona musi nawiązać połączenie z serwerem MySQL, dlatego należy załadować
   skrypt mysql.inc.php.

   Przed zakończeniem działania skryptu połączenie MySQL musi być zamknięte.

   Skrypt należy zapisać w pliku dodaj_pracownika.php i umieścić w tym samym
   katalogu co plik dodaj_pracownika.html.




dodawanie rekordów                                                             69
walidacja danych formularza

Przed wykorzystaniem w zapytaniu danych wprowadzonych w formularzu należy
przeprowadzić ich walidację. W skrypcie PHP należy wprowadzić poniższy kod:


       ...
       require_once('mysql.inc.php');
       $bledy = array();
       if (!empty($_POST['imie'])) {
             $fn = mysql_real_escape_string($_POST['imie'], $dbc);
       } else {
             $bledy[] = 'imię';
       }




     1 W tablicy $bledy będą zapisane wszystkie błędy, jakie wystąpiły podczas
     walidacji danych w formularzu.

      2 Walidacja pól tekstowych polega na sprawdzeniu, czy nie są one puste
     (zobacz „Informacje dodatkowe” na stronie 77).



       if (!empty($_POST['nazwisko'])) {
              $ln = mysql_real_escape_string($_POST['nazwisko'], $dbc);
       } else {
              $bledy[] = 'nazwisko';
       }




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




    3 W celu uzyskania pewności, że dane można
   bezpiecznie wykorzystać w zapytaniu, są one przetwa-
   rzane w funkcji mysql_real_escape_string().




dodawanie rekordów                                            71
walidacja danych formularza cd.

     if (isset($_POST['wydzial_id']) && is_numeric($_POST['wydzial_id']) &&
         ($_POST['wydzial_id']>0)) {
           $idw = (int) $_POST['wydzial_id'];
     } else {
           $bledy[] = 'wydział';
     }



4 Wartości liczbowe, takie jak identyfikator wydziału i numer telefonu,
muszą być liczbami dodatnimi.

     if (isset($_POST['telefon_wewn']) && is_numeric($_POST['telefon_wewn'])
         && ($_POST['telefon_wewn'] > 0)) {
           $wewn = (int) $_POST['telefon_wewn'];
     } else {
           $bledy[] = 'numer wewnętrzny';
     }
     mysql_close($dbc);
     ...




 5 Aby można było je bezpiecznie wykorzystywać w zapytaniu,
dla wartości numerycznych wykonuje się rzutowanie typów
do danych typu integer.

 6 Każda nieudana operacja walidacji powoduje dodanie wpisu
do tablicy $bledy.




72                                                    dodawanie rekordów
aktualizacja bazy danych

  Zakładając, że dane wprowadzone w formularzu pomyślnie przeszły przez proce-
  dury walidacji, należy uruchomić zapytanie INSERT.

  1 Jeśli nie było błędów, to ten warunek będzie prawdziwy (ponieważ zmienna
  $bledy będzie pusta).

    ...
          $bledy[] = 'numer wewnętrzny';
    }
    if (!$bledy) {
          $q = "INSERT INTO pracownicy VALUES (NULL, $idw, '$fn', '$ln',
        '$e', $wewn)";
          $r = mysql_query($q, $dbc);
          if (mysql_affected_rows($dbc) == 1) {
            echo '<p><strong>Dodano nowego pracownika.</strong></p>';
    mysql_close($dbc);
    ...



   2 Instrukcja INSERT dodaje nowego pracownika do bazy danych,
  wykorzystując dane przetworzone za pomocą procedur walidacyjnych
  (zobacz „Informacje dodatkowe” na stronie 78).

   3 Funkcja mysql_affected_
  rows() zwraca liczbę rekordów,
  których dotyczyło zapytanie.
  W przypadku zapytania wykorzy-
  stanego w tym skrypcie liczba ta
  będzie wynosiła 1, bowiem dodano
  jeden nowy rekord.

   4 Wyniki działania skryptu
  są wyświetlane na ekranie.




dodawanie rekordów                                                         73
wyświetlenie komunikatów o błędach

Na koniec, jeśli jest taka potrzeba, należy wyświetlić użytkownikom informacje
o błędach, które wystąpiły.

      1 Pierwsza klauzula else dotyczy sytuacji, kiedy zapytanie nie dotyczyło
     jednego wiersza. Zazwyczaj jest to sygnał wystąpienia błędu składniowego
     (zobacz „Informacje dodatkowe” na stronie 78).


       ...
                 echo '<p><strong>Dodano nowego pracownika.</strong></p>';
             } else { // Wykonanie zapytania nie powiodło się.
                 echo '<p class="blad">Nie można dodać pracownika z powodu błędu
           systemowego.</p>';
             }
       } else { // Błędy!
             echo '<p>Wystąpiły następujące błędy :</p><ul class="blad">';
             foreach ($bledy as $e) {
                 echo "<li>Należy podać prawidłową wartość w polu:$e.</li>n";
             }
       echo '</ul>';
       }
       mysql_close($dbc);
       ...



      2 Druga klauzula else uru-
     chamia się, jeśli dane nie przej-
     dą pomyślnie przez wszystkie
     testy walidacji.

      3 Ponieważ błędy są zapisa-
     ne w tablicy, najłatwiejszym
     sposobem uzyskania dostępu
     do wszystkich błędów jest prze-
     twarzanie ich w pętli.




74                                                      dodawanie rekordów
testowanie wersji nieajaksowej

1 Załaduj stronę HTML w przeglądarce WWW, aby przetestować aplikację
w dotychczasowym kształcie.

Aby strona zadziałała, adres musi zaczy-
nać się od http://.




 2 Wypełnij częściowo formularz
i kliknij Dodaj.




3 Skrypt PHP powinien wyświetlić wyniki.




dodawanie rekordów                                                     75
testowanie wersji nieajaksowej cd.




4 Powróć do formularza,
wypełnij go całkowicie i kliknij
Dodaj.




5 Tak jak wcześniej, skrypt PHP wyświetla wyniki.




76                                                  dodawanie rekordów
informacje dodatkowe

utworzenie formularza str. 66                 walidacja danych formularza
•	 Metody	POST, ogólnie rzecz biorąc,         str. 70
   powinno się używać w przypadku, gdy        •	 Sposób	walidacji	danych	formularza	
   operacja przesyłania formularza od-           zależy od typu danych (liczby, ciągi zna-
   działuje na witrynę. Na przykład użycie       ków itp.) oraz spodziewanych wartości
   formularza Nowy pracownik dodaje              (liczba dodatnia, adres e-mail itp). Dla
   nowy rekord do bazy danych.                   potrzeb walidacji nazwiska osoby czę-
•	 Metodę	GET zazwyczaj wykorzy-                 sto wystarczy się upewnić, czy wpro-
   stuje się w celu zażądania informacji.        wadzono jakąkolwiek wartość.
   Na przykład powinno się ją zastosować      •	 Dokładniejsza	walidacja	adresu	e-mail	
   przy żądaniu informacji o pracowni-           obejmuje potwierdzenie, że spełnia
   kach w określonym wydziale.                   on wzorzec wyrażenia regularnego.
                                                 Tego rodzaju walidację należy przepro-
                                                 wadzać znacznie częściej dla adresów
utworzenie elementów                             e-mail niż dla nazwisk, ponieważ adresy
formularza str. 67                               e-mail muszą spełniać ścisłe reguły.
                                              •	 Aby	poprawić	bezpieczeństwo	tego	
•	 Etykiety	formularza	spełniają	dwa	cele.	
                                                 systemu, można by zastosować funkcję
   Po pierwsze, informują użytkowników
                                                 strip_tags() dla operacji wprowa-
   o przeznaczeniu określonych elemen-
                                                 dzania danych tekstowych. Wykorzy-
   tów. Po drugie, będą modyfikowane
                                                 stanie tej funkcji pozwala zapobiegać
   z wykorzystaniem JavaScript w celu
                                                 atakom za pomocą skryptów krzyżo-
   wskazania błędów w ajaksowej wersji
                                                 wych (ang. cross-site scripting attacks
   formularza.
                                                 — XSS).
                                              •	 Funkcja	mysql_real_escape_
                                                 string() zapewnia specyficzną dla
                                                 języka ochronę dotyczącą wartości
                                                 tekstowych wykorzystywanych w zapy-
                                                 taniach.




dodawanie rekordów                                                                     77
informacje dodatkowe cd.

aktualizacja bazy danych str. 73              wyświetlenie komunikatów
•	 Istnieje	dokładniejszy	sposób	zapisania	   o błędach str. 74
   zapytania INSERT. W tej składni należy     •	 Aby	debugować	problemy	dotyczące	
   określić kolumny, których dotyczy ope-        PHP i MySQL, należy wyświetlić za-
   racja. W przypadku zapytania używane-         pytanie w celu przeanalizowania jego
   go w tym rozdziale byłaby to instrukcja       składni. Należy również wywołać funk-
  INSERT INTO pracownicy (wydz-
                                                 cję mysql_error(), aby przekonać się,
  ial_id, imie, nazwisko, email,
  telefon_wewn) VALUES ($idw,
                                                 jakie problemy zgłasza baza danych.
  '$fn', '$ln', '$e', $wewn).                 •	 Witryny	produkcyjne	nigdy	nie	
                                                 powinny ujawniać szczegółowych
                                                 komunikatów o błędach, na przykład
                                                 uruchamianych zapytań lub błędów
                                                 bazy MySQL. Informacje te można
                                                 wykorzystywać dla potrzeb debu-
                                                 gowania, ale potem należy je ukryć
                                                 w wersji produkcyjnej (która powinna
                                                 być pozbawiona błędów).




78                                                       dodawanie rekordów

More Related Content

Similar to Tworzenie stron WWW z wykorzystaniem Ajaksa. Projekty

Tworzenie stron WWW we Flashu 8. Projekty
Tworzenie stron WWW we Flashu 8. ProjektyTworzenie stron WWW we Flashu 8. Projekty
Tworzenie stron WWW we Flashu 8. ProjektyWydawnictwo Helion
 
PHP5, Apache i MySQL. Od podstaw
PHP5, Apache i MySQL. Od podstawPHP5, Apache i MySQL. Od podstaw
PHP5, Apache i MySQL. Od podstawWydawnictwo Helion
 
PHP i MySQL. Witryna WWW oparta na bazie danych. Wydanie III
PHP i MySQL. Witryna WWW oparta na bazie danych. Wydanie IIIPHP i MySQL. Witryna WWW oparta na bazie danych. Wydanie III
PHP i MySQL. Witryna WWW oparta na bazie danych. Wydanie IIIWydawnictwo Helion
 
PHP Web 2.0. Tworzenie aplikacji typu mashup
PHP Web 2.0. Tworzenie aplikacji typu mashupPHP Web 2.0. Tworzenie aplikacji typu mashup
PHP Web 2.0. Tworzenie aplikacji typu mashupWydawnictwo Helion
 
PHP i MySQL. Wprowadzenie. Wydanie II
PHP i MySQL. Wprowadzenie. Wydanie IIPHP i MySQL. Wprowadzenie. Wydanie II
PHP i MySQL. Wprowadzenie. Wydanie IIWydawnictwo Helion
 
PHP, MySQL i Apache dla każdego. Wydanie II
PHP, MySQL i Apache dla każdego. Wydanie IIPHP, MySQL i Apache dla każdego. Wydanie II
PHP, MySQL i Apache dla każdego. Wydanie IIWydawnictwo Helion
 
PHP5. Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie II
PHP5. Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie IIPHP5. Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie II
PHP5. Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie IIWydawnictwo Helion
 
Ajax. Zaawansowane programowanie
Ajax. Zaawansowane programowanieAjax. Zaawansowane programowanie
Ajax. Zaawansowane programowanieWydawnictwo Helion
 
Spa i .net core
Spa i .net coreSpa i .net core
Spa i .net coreVimanet
 
JavaScript. Ćwiczenia praktyczne. Wydanie II
JavaScript. Ćwiczenia praktyczne. Wydanie IIJavaScript. Ćwiczenia praktyczne. Wydanie II
JavaScript. Ćwiczenia praktyczne. Wydanie IIWydawnictwo Helion
 
PHP i MySQL. Dynamiczne strony WWW. Szybki start
PHP i MySQL. Dynamiczne strony WWW. Szybki startPHP i MySQL. Dynamiczne strony WWW. Szybki start
PHP i MySQL. Dynamiczne strony WWW. Szybki startWydawnictwo Helion
 
Ajax. Niezbędnik projektanta dynamicznych aplikacji
Ajax. Niezbędnik projektanta dynamicznych aplikacjiAjax. Niezbędnik projektanta dynamicznych aplikacji
Ajax. Niezbędnik projektanta dynamicznych aplikacjiWydawnictwo Helion
 
ASP.NET 3.5 dla programistów PHP
ASP.NET 3.5 dla programistów PHPASP.NET 3.5 dla programistów PHP
ASP.NET 3.5 dla programistów PHPWydawnictwo Helion
 
PHP, MySQL i Apache dla każdego. Wydanie III
PHP, MySQL i Apache dla każdego. Wydanie IIIPHP, MySQL i Apache dla każdego. Wydanie III
PHP, MySQL i Apache dla każdego. Wydanie IIIWydawnictwo Helion
 
Adobe Dreamweaver CS3 z ASP, ColdFusion i PHP. Oficjalny podręcznik
Adobe Dreamweaver CS3 z ASP, ColdFusion i PHP. Oficjalny podręcznikAdobe Dreamweaver CS3 z ASP, ColdFusion i PHP. Oficjalny podręcznik
Adobe Dreamweaver CS3 z ASP, ColdFusion i PHP. Oficjalny podręcznikWydawnictwo Helion
 
PHP i MySQL. Tworzenie stron WWW. Wydanie drugie. Vademecum profesjonalisty
PHP i MySQL. Tworzenie stron WWW. Wydanie drugie. Vademecum profesjonalistyPHP i MySQL. Tworzenie stron WWW. Wydanie drugie. Vademecum profesjonalisty
PHP i MySQL. Tworzenie stron WWW. Wydanie drugie. Vademecum profesjonalistyWydawnictwo Helion
 
Visual Basic .NET. Bazy danych. Księga eksperta
Visual Basic .NET. Bazy danych. Księga ekspertaVisual Basic .NET. Bazy danych. Księga eksperta
Visual Basic .NET. Bazy danych. Księga ekspertaWydawnictwo Helion
 

Similar to Tworzenie stron WWW z wykorzystaniem Ajaksa. Projekty (20)

Tworzenie stron WWW we Flashu 8. Projekty
Tworzenie stron WWW we Flashu 8. ProjektyTworzenie stron WWW we Flashu 8. Projekty
Tworzenie stron WWW we Flashu 8. Projekty
 
PHP5, Apache i MySQL. Od podstaw
PHP5, Apache i MySQL. Od podstawPHP5, Apache i MySQL. Od podstaw
PHP5, Apache i MySQL. Od podstaw
 
PHP i MySQL. Witryna WWW oparta na bazie danych. Wydanie III
PHP i MySQL. Witryna WWW oparta na bazie danych. Wydanie IIIPHP i MySQL. Witryna WWW oparta na bazie danych. Wydanie III
PHP i MySQL. Witryna WWW oparta na bazie danych. Wydanie III
 
PHP Web 2.0. Tworzenie aplikacji typu mashup
PHP Web 2.0. Tworzenie aplikacji typu mashupPHP Web 2.0. Tworzenie aplikacji typu mashup
PHP Web 2.0. Tworzenie aplikacji typu mashup
 
PHP i MySQL. Wprowadzenie. Wydanie II
PHP i MySQL. Wprowadzenie. Wydanie IIPHP i MySQL. Wprowadzenie. Wydanie II
PHP i MySQL. Wprowadzenie. Wydanie II
 
ASP.NET 2.0. Księga eksperta
ASP.NET 2.0. Księga ekspertaASP.NET 2.0. Księga eksperta
ASP.NET 2.0. Księga eksperta
 
PHP, MySQL i Apache dla każdego. Wydanie II
PHP, MySQL i Apache dla każdego. Wydanie IIPHP, MySQL i Apache dla każdego. Wydanie II
PHP, MySQL i Apache dla każdego. Wydanie II
 
PHP5. Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie II
PHP5. Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie IIPHP5. Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie II
PHP5. Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie II
 
Ajax. Zaawansowane programowanie
Ajax. Zaawansowane programowanieAjax. Zaawansowane programowanie
Ajax. Zaawansowane programowanie
 
SPA i .Net Core
SPA i .Net CoreSPA i .Net Core
SPA i .Net Core
 
Spa i .net core
Spa i .net coreSpa i .net core
Spa i .net core
 
JavaScript. Ćwiczenia praktyczne. Wydanie II
JavaScript. Ćwiczenia praktyczne. Wydanie IIJavaScript. Ćwiczenia praktyczne. Wydanie II
JavaScript. Ćwiczenia praktyczne. Wydanie II
 
PHP i MySQL. Dynamiczne strony WWW. Szybki start
PHP i MySQL. Dynamiczne strony WWW. Szybki startPHP i MySQL. Dynamiczne strony WWW. Szybki start
PHP i MySQL. Dynamiczne strony WWW. Szybki start
 
AJAX - wdw1
AJAX - wdw1AJAX - wdw1
AJAX - wdw1
 
Ajax. Niezbędnik projektanta dynamicznych aplikacji
Ajax. Niezbędnik projektanta dynamicznych aplikacjiAjax. Niezbędnik projektanta dynamicznych aplikacji
Ajax. Niezbędnik projektanta dynamicznych aplikacji
 
ASP.NET 3.5 dla programistów PHP
ASP.NET 3.5 dla programistów PHPASP.NET 3.5 dla programistów PHP
ASP.NET 3.5 dla programistów PHP
 
PHP, MySQL i Apache dla każdego. Wydanie III
PHP, MySQL i Apache dla każdego. Wydanie IIIPHP, MySQL i Apache dla każdego. Wydanie III
PHP, MySQL i Apache dla każdego. Wydanie III
 
Adobe Dreamweaver CS3 z ASP, ColdFusion i PHP. Oficjalny podręcznik
Adobe Dreamweaver CS3 z ASP, ColdFusion i PHP. Oficjalny podręcznikAdobe Dreamweaver CS3 z ASP, ColdFusion i PHP. Oficjalny podręcznik
Adobe Dreamweaver CS3 z ASP, ColdFusion i PHP. Oficjalny podręcznik
 
PHP i MySQL. Tworzenie stron WWW. Wydanie drugie. Vademecum profesjonalisty
PHP i MySQL. Tworzenie stron WWW. Wydanie drugie. Vademecum profesjonalistyPHP i MySQL. Tworzenie stron WWW. Wydanie drugie. Vademecum profesjonalisty
PHP i MySQL. Tworzenie stron WWW. Wydanie drugie. Vademecum profesjonalisty
 
Visual Basic .NET. Bazy danych. Księga eksperta
Visual Basic .NET. Bazy danych. Księga ekspertaVisual Basic .NET. Bazy danych. Księga eksperta
Visual Basic .NET. Bazy danych. Księga eksperta
 

More from Wydawnictwo Helion

Tworzenie filmów w Windows XP. Projekty
Tworzenie filmów w Windows XP. ProjektyTworzenie filmów w Windows XP. Projekty
Tworzenie filmów w Windows XP. ProjektyWydawnictwo Helion
 
Blog, więcej niż internetowy pamiętnik
Blog, więcej niż internetowy pamiętnikBlog, więcej niż internetowy pamiętnik
Blog, więcej niż internetowy pamiętnikWydawnictwo Helion
 
Pozycjonowanie i optymalizacja stron WWW. Ćwiczenia praktyczne
Pozycjonowanie i optymalizacja stron WWW. Ćwiczenia praktycznePozycjonowanie i optymalizacja stron WWW. Ćwiczenia praktyczne
Pozycjonowanie i optymalizacja stron WWW. Ćwiczenia praktyczneWydawnictwo Helion
 
E-wizerunek. Internet jako narzędzie kreowania image&#39;u w biznesie
E-wizerunek. Internet jako narzędzie kreowania image&#39;u w biznesieE-wizerunek. Internet jako narzędzie kreowania image&#39;u w biznesie
E-wizerunek. Internet jako narzędzie kreowania image&#39;u w biznesieWydawnictwo Helion
 
Microsoft Visual C++ 2008. Tworzenie aplikacji dla Windows
Microsoft Visual C++ 2008. Tworzenie aplikacji dla WindowsMicrosoft Visual C++ 2008. Tworzenie aplikacji dla Windows
Microsoft Visual C++ 2008. Tworzenie aplikacji dla WindowsWydawnictwo Helion
 
Co potrafi Twój iPhone? Podręcznik użytkownika. Wydanie II
Co potrafi Twój iPhone? Podręcznik użytkownika. Wydanie IICo potrafi Twój iPhone? Podręcznik użytkownika. Wydanie II
Co potrafi Twój iPhone? Podręcznik użytkownika. Wydanie IIWydawnictwo Helion
 
Makrofotografia. Magia szczegółu
Makrofotografia. Magia szczegółuMakrofotografia. Magia szczegółu
Makrofotografia. Magia szczegółuWydawnictwo Helion
 
Java. Efektywne programowanie. Wydanie II
Java. Efektywne programowanie. Wydanie IIJava. Efektywne programowanie. Wydanie II
Java. Efektywne programowanie. Wydanie IIWydawnictwo Helion
 
Ajax, JavaScript i PHP. Intensywny trening
Ajax, JavaScript i PHP. Intensywny treningAjax, JavaScript i PHP. Intensywny trening
Ajax, JavaScript i PHP. Intensywny treningWydawnictwo Helion
 
PowerPoint 2007 PL. Seria praktyk
PowerPoint 2007 PL. Seria praktykPowerPoint 2007 PL. Seria praktyk
PowerPoint 2007 PL. Seria praktykWydawnictwo Helion
 
Serwisy społecznościowe. Budowa, administracja i moderacja
Serwisy społecznościowe. Budowa, administracja i moderacjaSerwisy społecznościowe. Budowa, administracja i moderacja
Serwisy społecznościowe. Budowa, administracja i moderacjaWydawnictwo Helion
 

More from Wydawnictwo Helion (20)

Tworzenie filmów w Windows XP. Projekty
Tworzenie filmów w Windows XP. ProjektyTworzenie filmów w Windows XP. Projekty
Tworzenie filmów w Windows XP. Projekty
 
Blog, więcej niż internetowy pamiętnik
Blog, więcej niż internetowy pamiętnikBlog, więcej niż internetowy pamiętnik
Blog, więcej niż internetowy pamiętnik
 
Access w biurze i nie tylko
Access w biurze i nie tylkoAccess w biurze i nie tylko
Access w biurze i nie tylko
 
Pozycjonowanie i optymalizacja stron WWW. Ćwiczenia praktyczne
Pozycjonowanie i optymalizacja stron WWW. Ćwiczenia praktycznePozycjonowanie i optymalizacja stron WWW. Ćwiczenia praktyczne
Pozycjonowanie i optymalizacja stron WWW. Ćwiczenia praktyczne
 
E-wizerunek. Internet jako narzędzie kreowania image&#39;u w biznesie
E-wizerunek. Internet jako narzędzie kreowania image&#39;u w biznesieE-wizerunek. Internet jako narzędzie kreowania image&#39;u w biznesie
E-wizerunek. Internet jako narzędzie kreowania image&#39;u w biznesie
 
Microsoft Visual C++ 2008. Tworzenie aplikacji dla Windows
Microsoft Visual C++ 2008. Tworzenie aplikacji dla WindowsMicrosoft Visual C++ 2008. Tworzenie aplikacji dla Windows
Microsoft Visual C++ 2008. Tworzenie aplikacji dla Windows
 
Co potrafi Twój iPhone? Podręcznik użytkownika. Wydanie II
Co potrafi Twój iPhone? Podręcznik użytkownika. Wydanie IICo potrafi Twój iPhone? Podręcznik użytkownika. Wydanie II
Co potrafi Twój iPhone? Podręcznik użytkownika. Wydanie II
 
Makrofotografia. Magia szczegółu
Makrofotografia. Magia szczegółuMakrofotografia. Magia szczegółu
Makrofotografia. Magia szczegółu
 
Windows PowerShell. Podstawy
Windows PowerShell. PodstawyWindows PowerShell. Podstawy
Windows PowerShell. Podstawy
 
Java. Efektywne programowanie. Wydanie II
Java. Efektywne programowanie. Wydanie IIJava. Efektywne programowanie. Wydanie II
Java. Efektywne programowanie. Wydanie II
 
JavaScript. Pierwsze starcie
JavaScript. Pierwsze starcieJavaScript. Pierwsze starcie
JavaScript. Pierwsze starcie
 
Ajax, JavaScript i PHP. Intensywny trening
Ajax, JavaScript i PHP. Intensywny treningAjax, JavaScript i PHP. Intensywny trening
Ajax, JavaScript i PHP. Intensywny trening
 
PowerPoint 2007 PL. Seria praktyk
PowerPoint 2007 PL. Seria praktykPowerPoint 2007 PL. Seria praktyk
PowerPoint 2007 PL. Seria praktyk
 
Excel 2007 PL. Seria praktyk
Excel 2007 PL. Seria praktykExcel 2007 PL. Seria praktyk
Excel 2007 PL. Seria praktyk
 
Access 2007 PL. Seria praktyk
Access 2007 PL. Seria praktykAccess 2007 PL. Seria praktyk
Access 2007 PL. Seria praktyk
 
Word 2007 PL. Seria praktyk
Word 2007 PL. Seria praktykWord 2007 PL. Seria praktyk
Word 2007 PL. Seria praktyk
 
Serwisy społecznościowe. Budowa, administracja i moderacja
Serwisy społecznościowe. Budowa, administracja i moderacjaSerwisy społecznościowe. Budowa, administracja i moderacja
Serwisy społecznościowe. Budowa, administracja i moderacja
 
AutoCAD 2008 i 2008 PL
AutoCAD 2008 i 2008 PLAutoCAD 2008 i 2008 PL
AutoCAD 2008 i 2008 PL
 
Bazy danych. Pierwsze starcie
Bazy danych. Pierwsze starcieBazy danych. Pierwsze starcie
Bazy danych. Pierwsze starcie
 
Inventor. Pierwsze kroki
Inventor. Pierwsze krokiInventor. Pierwsze kroki
Inventor. Pierwsze kroki
 

Tworzenie stron WWW z wykorzystaniem Ajaksa. Projekty

  • 1. Tworzenie stron WWW z wykorzystaniem Ajaksa. Projekty Autor: Larry Ullman T³umaczenie: Rados³aw Meryk ISBN: 978-83-246-1553-7 Tytu³ orygina³u: Building a Web Site with Ajax: Visual QuickProject Guide Format: 170x230, stron: 168 Stwórz interaktywny serwis WWW, korzystaj¹cy z technologii AJAX! • Jakich narzêdzi potrzebujesz, by stworzyæ stronê WWW? • Jak wzbogaciæ witrynê dziêki technologii AJAX? • Jak obs³ugiwaæ dane w formacie XML? AJAX jest skrótem od Asynchronous JavaScript and XML. Technologia ta sta³a siê trzonem rewolucji Web 2.0. Dziœ trudno sobie wyobraziæ nowoczesn¹ aplikacjê WWW, która nie korzysta³aby z dobrodziejstw tego rozwi¹zania. Nie bez powodu! Intuicyjny interfejs u¿ytkownika, wysoki poziom interaktywnoœci, wygoda oraz dynamika serwisów korzystaj¹cych z tego rozwi¹zania gwarantuj¹, ¿e jeszcze d³ugo bêdzie ono na topie technik tworzenia stron WWW. Dziêki ksi¹¿ce „Tworzenie stron WWW z wykorzystaniem AJAKSA. Projekty” poznasz proces tworzenia strony WWW, korzystaj¹cej z tej technologii. Autor krok po kroku wyjaœnia zasadê dzia³ania oraz sposób tworzenia serwisu i ka¿dego z elementów projektowanych dla niego aplikacji. Pierwsze zadanie, które stawia on przed Tob¹, to zbudowanie bazy danych. PóŸniej nauczysz siê implementowaæ funkcjonalnoœci takie, jak przegl¹danie danych, dodawanie nowych wpisów czy te¿ wyszukiwanie informacji. Po przeczytaniu niniejszej ksi¹¿ki nie bêdzie dla Ciebie problemem po³¹czenie na przyk³ad technologii HTML, JavaScript, CSS, XML i PHP w celu uzyskania dynamicznego, interaktywnego oraz efektownego serwisu WWW. Zobaczysz tak¿e, jak poszczególne funkcjonalnoœci aplikacji WWW dzia³aj¹ bez wykorzystania technologii AJAX, a nastêpnie jak zyskuj¹ na atrakcyjnoœci po dodaniu tej technologii. Teraz wszystko zale¿y tylko od Twojej wyobraŸni! • Zasada dzia³ania AJAX • Narzêdzia konieczne w procesie projektowania, wytwarzania i testowania • Przygotowanie bazy danych • Obs³uga ¿¹dañ z wykorzystaniem PHP • Przygotowanie stron HTML • Tworzenie i obs³uga formularzy Wydawnictwo Helion • Dynamiczna weryfikacja danych wprowadzanych przez u¿ytkownika ul. Koœciuszki 1c • Testowanie statycznych rozwi¹zañ 44-100 Gliwice • Testowanie dynamicznych rozwi¹zañ, korzystaj¹cych z AJAX tel. 032 230 98 63 • Wykorzystanie jêzyka JavaScript e-mail: helion@helion.pl • Przegl¹danie informacji • Wyszukiwanie informacji • Dodawanie nowych wpisów do bazy • Zastosowanie formatu XML • Wykorzystanie formatu JSON Stwórz swoj¹ w³asn¹, interaktywn¹ stronê WWW!
  • 2. spis treści wprowadzenie 9 jak działa ajax? 10 witryna internetowa czego można nauczyć się z tej książki? 11 towarzysząca książce 17 jak zorganizowana jest ta książka? 12 następny krok 18 potrzebne narzędzia 14 1. tworzenie bazy danych 19 dostęp do bazy danych MySQL 20 wypełnienie tabel danymi 25 utworzenie bazy danych 21 informacje dodatkowe 27 utworzenie tabel 23 2. przeglądanie pracowników 29 co będziemy robić? 30 nawiązanie połączenia z bazą danych 36 utworzenie strony HTML 31 utworzenie arkusza stylów 37 utworzenie formularza HTML 32 wykorzystanie arkusza stylów 38 utworzenie skryptu PHP 33 testowanie stron 39 wyświetlenie listy pracowników 34 informacje dodatkowe 40 zgłaszanie błędów 35 3. przeglądanie z wykorzystaniem technologii ajax 45 co będziemy robić? 46 wyświetlenie listy pracowników 53 utworzenie funkcji 47 obsługa odpowiedzi 55 sprawdzenie obsługi technologii Ajax 48 wyświetlenie wyników 56 wywołanie funkcji 49 modyfikacja kodu HTML 57 konfiguracja Ajaksa 50 testowanie warstwy Ajaksa 58 rozpoczęcie strony PHP 52 informacje dodatkowe 59 5
  • 3. spis treści 4. dodawanie rekordów 63 co będziemy robić? 64 walidacja danych formularza 70 utworzenie strony HTML 65 aktualizacja bazy danych 73 utworzenie formularza 66 wyświetlenie komunikatów obłędach 74 utworzenie elementów formularza 67 testowanie wersji nieajaksowej 75 rozpoczęcie strony PHP 69 informacje dodatkowe 77 5. dodawanie rekordów z wykorzystaniem technologii ajax 79 co będziemy robić? 80 aktualizacja bazy danych 92 dodanie elementów technologii Ajax 82 uzupełnienie danych w formacie XML 93 wykorzystanie warstwy Ajaksa 83 obsługa odpowiedzi 95 konfiguracja Ajaksa 84 przygotowanie strony 96 przygotowanie danych formularza 85 obsługa danych w formacie XML 97 dokończenie funkcji 86 wyświetlenie wyników 99 przygotowanie do przesyłania testowanie warstwy Ajaksa 100 wyników w formacie XML 87 informacje dodatkowe 102 walidacja danych formularza 88 6. wyszukiwanie 107 co będziemy robić? 108 wyświetlenie wyników 114 utworzenie strony HTML 109 wyświetlenie komunikatów o błędach 115 utworzenie formularza 111 testowanie wersji niajaksowej 116 rozpoczęcie strony PHP 112 informacje dodatkowe 117 zapytanie do bazy danych 113 6 spis treści
  • 4. 7. wyszukiwanie z wykorzystaniem ajaksa 119 co będziemy robić? 120 przygotowanie strony 132 dodanie elementów technologii Ajax 122 obsługa danych w formacie XML 133 wykorzystanie warstwy Ajaksa 123 wyświetlenie wyników 134 konfiguracja Ajaksa 125 obsługa nazwisk 136 dokończenie funkcji 126 obsługa wydziałów 137 przygotowanie do przesyłania obsługa adresów e-mail 139 wyników w formacie XML 127 wyświetlenie komunikatu zapytanie do bazy danych 128 o braku wyników 141 pobranie wyników 129 dokończenie funkcji 142 dokończenie skryptu PHP 130 testowanie warstwy Ajaksa 143 obsługa odpowiedzi 131 informacje dodatkowe 144 dodatek A następne kroki 149 problemy związane z Ajaksem 150 zasoby w internecie 159 alternatywy dla Ajaksa 151 zestawy Framework wprowadzenie do JSON 152 dla języka JavaScript 160 wysyłanie danych w formacie JSON 154 biblioteki PHP-Ajax 161 dostęp do danych w formacie JSON 156 debugowanie kodu JavaScript 162 korzystanie z danych w formacie JSON 157 informacje dodatkowe 166 skorowidz 169 spis treści 7
  • 5. dodawanie 4 rekordów W pierwszym rozdziale utworzyliśmy strukturę bazy danych dla witryny WWW wyświetlającej listę pracowników. W poprzednich dwóch rozdziałach opracowaliśmy ajaksową i nieajaksową wersję aplikacji wyświetlającej listę pracowników wybrane- go wydziału. W rozdziale niniejszym opracujemy funkcję dodawania pracowników do bazy danych. Oczywiście rozpoczniemy od wersji nieajaksowej gwarantującej dostęp dla wszystkich użytkowników, a następnie — w kolejnym rozdziale — opracu- jemy wersję bazującą na technologii Ajax. Rozpoczniemy od utworzenia formularza HTML, który pobiera wszystkie niezbęd- ne dane. Następnie napiszemy skrypt PHP, który obsługuje przesyłanie formularza bez wykorzystania technologii Ajax. Będzie to bardzo prosty skrypt PHP obsługujący formularz HTML. 63
  • 6. co będziemy robić? 1 Najpierw, na stronach 65 – 68, utworzymy stronę HTML z formu- larzem. W formularzu są elementy repre- zentujące wszystkie dane dotyczą- ce pracowników zapisane w bazie danych. Gdy w przeglądarkach bez obsługi Ajaksa użytkownik kliknie Dodaj, formularz zostanie przesłany do skryptu PHP. 2 Na stronach 69 – 74 napiszemy skrypt PHP, który obsługuje for- mularz HTML. Skrypt dokonuje walidacji danych formularza, a następnie zwraca wyniki. W przypadku nieprawidłowego wypełnienia dowolnego pola skrypt PHP wyświetla komunikat o błędzie. 3 Na koniec, tak jak wcześniej, Na końcu tego rozdziału, w punkcie przetestujemy napisane elemen- „Informacje dodatkowe”, umieścimy ty aplikacji, aby uzyskać pewność, dodatkowe dane, wskazówki i zalecenia że wszystko działa poprawnie. związane z wykonanymi czynnościami. W następnym rozdziale do utworzonych stron dodamy elementy technologii Ajax. 64 dodawanie rekordów
  • 7. utworzenie strony html Rozpoczniemy od utworzenia nowej strony HTML w dowolnym edytorze tekstu. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <title>Nowy pracownik</title> <style type="text/css" media="all">@import "style.css";</style> </head> <body> </body> </html> Element <title> opisuje przeznaczenie strony. Arkusz stylów nadaje stronie taki sam wygląd jak pozostałym stronom w serwisie. dodawanie rekordów 65
  • 8. utworzenie formularza 1 Zdefiniuj komunikat informujący o tym, do czego służy formularz i jak należy z niego korzystać. ... <body> <p>Ten formularz służy do wprowadzania danych dotyczących pracownika (wszystkie pola są obowiązkowe):</p> <form action="dodaj_pracownika.php" method="post" id="prac_form"> </form> </body> ... 2 W przypadku przeglądarek nieobsługujących Ajaksa formularz będzie przesłany do skryptu dodaj_pracownika.php, który napiszemy w dalszej części rozdziału. 3 Formularz wykorzystuje metodę POST, a nie GET (zobacz „Informacje dodatkowe” na stronie 77). 4 Dla warstwy ajaksowej istotne znaczenie ma wartość atrybutu id formularza (prac_form). 66 dodawanie rekordów
  • 9. utworzenie elementów formularza 1 Do wprowadzania imienia, nazwiska i adresu e-mail pracownika należy utworzyć pola tekstowe. ... <form action="dodaj_pracownika.php" method="post" id="prac_form"> <p><label class="tytul" id="imie_etykieta">Imię<input type="text" id="imie" name="imie"/></label> </p> <p><label class="tytul" id="nazwisko_etykieta">Nazwisko<input type="text" id="nazwisko" name="nazwisko" /></label> </p> <p><label class="tytul" id="email_etykieta">Adres e-mail<input type="text" id="email" name="email" /></label> </p> dodawanie rekordów 67
  • 10. utworzenie elementów formularza cd. 2 Wydział pracownika można wybrać za pomocą rozwijanego menu. <p><label class="tytul" id="wydzial_id_etykieta">Wydział<select id="wydzial_id" name="wydzial_id"> <option value="1">Kadry</option> <option value="2">Księgowość</option> <option value="3">Marketing</option> <option value="4">Wydział pomocniczy</option> </select></label> </p> 3 Kolejne pole tekstowe służy do wprowadzania numeru telefonu wewnętrznego pracownika. <p><label class="tytul" id="telefon_wewn_etykieta">Numer wewnętrzny<input type="text" id="telefon_wewn" name="telefon_ wewn" /></label> </p> <p><input name="dodaj" type="submit" value="Dodaj" /></p> </form> ... 4 Etykiety informują o przezna- czeniu poszczególnych elementów (zobacz „Informacje dodatkowe” na stronie 77). 5 Przycisk przesyłania formularza ma wartość Dodaj. 6 Skrypt należy zapisać w pliku dodaj_pracownika.html i umieścić w tym samym katalogu co pozostałe strony aplikacji. 68 dodawanie rekordów
  • 11. rozpoczęcie strony php Pierwszy skrypt PHP obsługuje operację przesłania formularza bez wykorzystania technologii Ajax. Powinien to być jednocześnie prawidłowy dokument HTML, dlatego należy go rozpocząć od poniższych znaczników: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <title>Nowy pracownik</title> <style type="text/css" media="all">@import "style.css";</style> </head> <body> <h1>Nowy pracownik</h1> <?php # dodaj_pracownika.php require_once('mysql.inc.php'); mysql_close($dbc); ?> </body> </html> Wszystkie własności strony zostaną zdefiniowane pomiędzy znacznikami PHP. Strona musi nawiązać połączenie z serwerem MySQL, dlatego należy załadować skrypt mysql.inc.php. Przed zakończeniem działania skryptu połączenie MySQL musi być zamknięte. Skrypt należy zapisać w pliku dodaj_pracownika.php i umieścić w tym samym katalogu co plik dodaj_pracownika.html. dodawanie rekordów 69
  • 12. walidacja danych formularza Przed wykorzystaniem w zapytaniu danych wprowadzonych w formularzu należy przeprowadzić ich walidację. W skrypcie PHP należy wprowadzić poniższy kod: ... require_once('mysql.inc.php'); $bledy = array(); if (!empty($_POST['imie'])) { $fn = mysql_real_escape_string($_POST['imie'], $dbc); } else { $bledy[] = 'imię'; } 1 W tablicy $bledy będą zapisane wszystkie błędy, jakie wystąpiły podczas walidacji danych w formularzu. 2 Walidacja pól tekstowych polega na sprawdzeniu, czy nie są one puste (zobacz „Informacje dodatkowe” na stronie 77). if (!empty($_POST['nazwisko'])) { $ln = mysql_real_escape_string($_POST['nazwisko'], $dbc); } else { $bledy[] = 'nazwisko'; } 70 dodawanie rekordów
  • 13. if (!empty($_POST['email'])) { $e = mysql_real_escape_string($_POST['email'],$dbc); } else { $bledy[] = 'adres email'; } 3 W celu uzyskania pewności, że dane można bezpiecznie wykorzystać w zapytaniu, są one przetwa- rzane w funkcji mysql_real_escape_string(). dodawanie rekordów 71
  • 14. walidacja danych formularza cd. if (isset($_POST['wydzial_id']) && is_numeric($_POST['wydzial_id']) && ($_POST['wydzial_id']>0)) { $idw = (int) $_POST['wydzial_id']; } else { $bledy[] = 'wydział'; } 4 Wartości liczbowe, takie jak identyfikator wydziału i numer telefonu, muszą być liczbami dodatnimi. if (isset($_POST['telefon_wewn']) && is_numeric($_POST['telefon_wewn']) && ($_POST['telefon_wewn'] > 0)) { $wewn = (int) $_POST['telefon_wewn']; } else { $bledy[] = 'numer wewnętrzny'; } mysql_close($dbc); ... 5 Aby można było je bezpiecznie wykorzystywać w zapytaniu, dla wartości numerycznych wykonuje się rzutowanie typów do danych typu integer. 6 Każda nieudana operacja walidacji powoduje dodanie wpisu do tablicy $bledy. 72 dodawanie rekordów
  • 15. aktualizacja bazy danych Zakładając, że dane wprowadzone w formularzu pomyślnie przeszły przez proce- dury walidacji, należy uruchomić zapytanie INSERT. 1 Jeśli nie było błędów, to ten warunek będzie prawdziwy (ponieważ zmienna $bledy będzie pusta). ... $bledy[] = 'numer wewnętrzny'; } if (!$bledy) { $q = "INSERT INTO pracownicy VALUES (NULL, $idw, '$fn', '$ln', '$e', $wewn)"; $r = mysql_query($q, $dbc); if (mysql_affected_rows($dbc) == 1) { echo '<p><strong>Dodano nowego pracownika.</strong></p>'; mysql_close($dbc); ... 2 Instrukcja INSERT dodaje nowego pracownika do bazy danych, wykorzystując dane przetworzone za pomocą procedur walidacyjnych (zobacz „Informacje dodatkowe” na stronie 78). 3 Funkcja mysql_affected_ rows() zwraca liczbę rekordów, których dotyczyło zapytanie. W przypadku zapytania wykorzy- stanego w tym skrypcie liczba ta będzie wynosiła 1, bowiem dodano jeden nowy rekord. 4 Wyniki działania skryptu są wyświetlane na ekranie. dodawanie rekordów 73
  • 16. wyświetlenie komunikatów o błędach Na koniec, jeśli jest taka potrzeba, należy wyświetlić użytkownikom informacje o błędach, które wystąpiły. 1 Pierwsza klauzula else dotyczy sytuacji, kiedy zapytanie nie dotyczyło jednego wiersza. Zazwyczaj jest to sygnał wystąpienia błędu składniowego (zobacz „Informacje dodatkowe” na stronie 78). ... echo '<p><strong>Dodano nowego pracownika.</strong></p>'; } else { // Wykonanie zapytania nie powiodło się. echo '<p class="blad">Nie można dodać pracownika z powodu błędu systemowego.</p>'; } } else { // Błędy! echo '<p>Wystąpiły następujące błędy :</p><ul class="blad">'; foreach ($bledy as $e) { echo "<li>Należy podać prawidłową wartość w polu:$e.</li>n"; } echo '</ul>'; } mysql_close($dbc); ... 2 Druga klauzula else uru- chamia się, jeśli dane nie przej- dą pomyślnie przez wszystkie testy walidacji. 3 Ponieważ błędy są zapisa- ne w tablicy, najłatwiejszym sposobem uzyskania dostępu do wszystkich błędów jest prze- twarzanie ich w pętli. 74 dodawanie rekordów
  • 17. testowanie wersji nieajaksowej 1 Załaduj stronę HTML w przeglądarce WWW, aby przetestować aplikację w dotychczasowym kształcie. Aby strona zadziałała, adres musi zaczy- nać się od http://. 2 Wypełnij częściowo formularz i kliknij Dodaj. 3 Skrypt PHP powinien wyświetlić wyniki. dodawanie rekordów 75
  • 18. testowanie wersji nieajaksowej cd. 4 Powróć do formularza, wypełnij go całkowicie i kliknij Dodaj. 5 Tak jak wcześniej, skrypt PHP wyświetla wyniki. 76 dodawanie rekordów
  • 19. informacje dodatkowe utworzenie formularza str. 66 walidacja danych formularza • Metody POST, ogólnie rzecz biorąc, str. 70 powinno się używać w przypadku, gdy • Sposób walidacji danych formularza operacja przesyłania formularza od- zależy od typu danych (liczby, ciągi zna- działuje na witrynę. Na przykład użycie ków itp.) oraz spodziewanych wartości formularza Nowy pracownik dodaje (liczba dodatnia, adres e-mail itp). Dla nowy rekord do bazy danych. potrzeb walidacji nazwiska osoby czę- • Metodę GET zazwyczaj wykorzy- sto wystarczy się upewnić, czy wpro- stuje się w celu zażądania informacji. wadzono jakąkolwiek wartość. Na przykład powinno się ją zastosować • Dokładniejsza walidacja adresu e-mail przy żądaniu informacji o pracowni- obejmuje potwierdzenie, że spełnia kach w określonym wydziale. on wzorzec wyrażenia regularnego. Tego rodzaju walidację należy przepro- wadzać znacznie częściej dla adresów utworzenie elementów e-mail niż dla nazwisk, ponieważ adresy formularza str. 67 e-mail muszą spełniać ścisłe reguły. • Aby poprawić bezpieczeństwo tego • Etykiety formularza spełniają dwa cele. systemu, można by zastosować funkcję Po pierwsze, informują użytkowników strip_tags() dla operacji wprowa- o przeznaczeniu określonych elemen- dzania danych tekstowych. Wykorzy- tów. Po drugie, będą modyfikowane stanie tej funkcji pozwala zapobiegać z wykorzystaniem JavaScript w celu atakom za pomocą skryptów krzyżo- wskazania błędów w ajaksowej wersji wych (ang. cross-site scripting attacks formularza. — XSS). • Funkcja mysql_real_escape_ string() zapewnia specyficzną dla języka ochronę dotyczącą wartości tekstowych wykorzystywanych w zapy- taniach. dodawanie rekordów 77
  • 20. informacje dodatkowe cd. aktualizacja bazy danych str. 73 wyświetlenie komunikatów • Istnieje dokładniejszy sposób zapisania o błędach str. 74 zapytania INSERT. W tej składni należy • Aby debugować problemy dotyczące określić kolumny, których dotyczy ope- PHP i MySQL, należy wyświetlić za- racja. W przypadku zapytania używane- pytanie w celu przeanalizowania jego go w tym rozdziale byłaby to instrukcja składni. Należy również wywołać funk- INSERT INTO pracownicy (wydz- cję mysql_error(), aby przekonać się, ial_id, imie, nazwisko, email, telefon_wewn) VALUES ($idw, jakie problemy zgłasza baza danych. '$fn', '$ln', '$e', $wewn). • Witryny produkcyjne nigdy nie powinny ujawniać szczegółowych komunikatów o błędach, na przykład uruchamianych zapytań lub błędów bazy MySQL. Informacje te można wykorzystywać dla potrzeb debu- gowania, ale potem należy je ukryć w wersji produkcyjnej (która powinna być pozbawiona błędów). 78 dodawanie rekordów