Podstawy technologii WWW

Wielkość: px

Rozpocząć pokaz od strony:

Download "Podstawy technologii WWW"

Stanisław Marciniak
5 lat temu
Przeglądów:

1 Podstawy technologii WWW Ćwiczenie 14 AJAX, czyli jak odświeżyć bez odświeżania, część trzecia Na dzisiejszych zajęciach będziemy kontynuować realizację serwisu do wymiany wiadomości z wykorzystaniem technologii AJAX, która pozwala nam na odświeżanie części strony i wysyłanie danych bez konieczności odświeżania całej strony w przeglądarce. Poniższe zadania realizujemy w aplikacji, której implementację rozpoczęliśmy na poprzednich zajęciach (Ćwiczenie 12 i 13). 1. Wiosenne porządki Po zrealizowaniu funkcjonalności z poprzednich zajęć, powinieneś posiadać w projekcie listę następujących plików (wymienionych w kolejności ich dodawania). index.html loguj.php poczta.php Info.txt kalendarz.png data.php tresc.php dodaj_wiadomosc.php ile_nowych_wiadomosci.php W jednym folderze zebrało się sporo plików różnego typu i o różnym zastosowaniu. Warto byłoby sobie to uporządkować. Dodatkowo, nasz największy plik poczta.php zawiera fragmenty opisane w różnych językach, co znacznie zmniejsza jego przejrzystość i łatwość wprowadzania zmian. Nasze porządkowanie zaczniemy właśnie od niego. 1

2 1) Utwórz plik style.css i przenieś do niego style zdefiniowane w pliku poczta.php. Do pliku poczta.php dodaj referencję do pliku ze stylami. 2) Utwórz plik script.js i przenieś do niego skrypty zdefiniowane w pliku poczta.php. Do pliku poczta.php dodaj referencję do pliku ze skryptami. 3) Utwórz plik header.php i przenieść do niego kod PHP znajdujący się nad formularzem (wyświetlenie aktualnie zalogowanego, daty i ilości nowych wiadomości). W miejsce tego kodu dodaj wywołanie funkcji include, której parametrem jest nazwa pliku z treścią do zamieszczenia w danym miejscu (<? php include 'intro.php';?>). 4) To samo zrób w przypadku kodu do wyświetlania wiadomości. Plik nazwij wiadomosci.php. 5) Aby uporządkować i pogrupować pliki naszej aplikacji utwórzmy w niej następujące katalogi: images katalog na obrazki php katalog na pliki php załączane w innych plikach metodą include resources katalog na pliki z zasobami naszej aplikacji scripts katalog na pliki ze skrytami services katalog na pliki php wywoływane za pomocą AJAX-a (dlatego też traktujemy je jako usługi) styles katalog na pliki z arkuszami stylów 6) Przenieś pliki do odpowiednich folderów według przykładu pokazanego na rysunku poniżej (chociaż ich rozłożenie powinno być w miarę intuicyjne i bez obrazka). Pliki index.html i poczta.php pozostawmy w głównym katalogu. 7) Popraw w kodzie odwołania do poszczególnych plików poprzedzając je nazwą odpowiedniego folderu. Jeżeli chcemy przejść do katalogu wyżej, używamy znaku podwójnej kropki (np. w przypadku pliku loguj.php, który ma nas przekierować do znajdującego się w głównym katalogu pliku poczta.php napiszemy: header("location:../poczta.php");). 8) Ciesz się przejrzystością projektu i myślą o łatwości dopisywania nowych funkcji i stylów! 2

3 2. Najnowsze wiadomości Dodaj obsługę automatycznego pobierania nowych wiadomości. 1) Utwórz plik nowe_wiadomosci.php (w katalogu serwices), w którym zrealizuj wyszukiwanie wiadomości dla danego właściciela (pobranego z sesji), z katalogu Odebrane i o identyfikatorze większym od przesłanego w parametrze żądania, posortowanych według daty. Dzięki temu, że będziemy przekazywać identyfikator najnowszej wiadomości wyświetlanej aktualnie użytkownikowi, zwrócimy do przeglądarki tylko najnowsze wiadomości, których jeszcze nie widział (a nie wszystkie z tabeli). Po wyszukaniu tworzymy tablicę obiektów reprezentujących kolejne wyszukane wiersze. Następnie, tą tablicę, przekazujemy zapisaną w formacie JSON (z wykorzystaniem metody json_encode()). Przesyłanie czystych danych, bez znaczników HTML (np. zdefiniowanych wierszy tabeli), zmniejsza oczywiście ilość przesyłanych danych i przyśpiesza sam proces komunikacji. 3

4 2) W pliku script.js dodaj metodę, która będzie się odwoływała do wcześniej zdefiniowanego pliku php, czyli pobierała nowe wiadomości. Wywołujemy w niej metodę get(), której parametrem jest nazwa pliku, identyfikator najnowszej wiadomości (pobrany z pierwszego wiersza po wierszu nagłówkowym oznaczonym identyfikatorem header), oraz metoda wywoływana po otrzymaniu odpowiedzi. W metodzie tej sprawdzamy, czy są nowe wiadomości. Jeżeli tak, to wykorzystujemy metodę $.parsejson() do zamienienia otrzymanego łańcucha znaków na obiekt JavaScript. Obiektem tym jest tablica z wiadomościami. Przechodzimy po niej pętlą for, dla każdej wiadomości tworzymy nowy wiersz (w przykładzie poniżej w formie uproszczonej) i dodajemy go za wierszem nagłówkowym. Teraz wystarczy tylko tą metodę odpowiednio wywołać, np. korzystając z metody setinterval(). 4

5 3. A na zakończenie kilka zadań na wykazanie się zdobytą wiedza i umiejętnościami: 1) Dodaj kontrolkę (np. listę rozwijaną), która pomoże użytkownikowi z podawaniem odbiorcy wiadomości. Może ona zawierać listę odbiorców, do których do tej pory użytkownik wysłał swoje wiadomości. 2) Dodaj możliwość filtrowania wiadomości na podstawie nadawcy. 3) Dodaj do każdej z wiadomości możliwość wyboru katalogu, do którego ma zostać przeniesiona (np. Kosz, Spam). Możesz to zrobić za pomocą listy rozwijanej, lub odpowiednich ikonek. Po dokonaniu wyboru przez użytkownika, informacja o aktualnym katalogu powinna być zapisana w bazie, a wiadomość usunięta z tabelki (w końcu chcemy od razu widzieć, że została przeniesiona). Dodaj do aplikacji menu pozwalające na przełączanie się miedzy poszczególnymi katalogami. 5

Podobne dokumenty

Podstawy technologii WWW

Podstawy technologii WWW Ćwiczenie 11 PHP, MySQL: więcej, więcej!, więcej!!. tabel i funkcjonalności. Na dzisiejszych zajęciach zdefiniujemy w naszej bazie kilka tabel powiązanych kluczem obcym i zobaczymy,