Laboratorium: AJAX
Laboratorium: AJAX
Zadania
Posługując się projektem przygotowanym w ramach poprzedniego zadania należy wprowadzić na stronach witryny interakcje z użytkownikiem z wykorzystaniem języka JavaScript i technologii AJAX.
1) AJAX - potwierdzenie rezerwacji biletu
Należy wykorzystać technologię AJAX, aby wyświetlić potwierdzenie dokonania rezerwacji na film bez przeładowywania całej strony.
1.1 Należy przygotować plik html, który zawiera fragment strony z komunikatem o udanej rezerwacji.
1.2 Do przycisku odpowiedzialnego za rezerwację należy podłączyć funkcję obsługi zdarzeń (zdarzenie onclick).
1.3 W funkcji obsługi zdarzeń należy pobrać przygotowany plik html z serwera i wyświetlić go w miejscu formularza rezerwacji (dokumentacja: https://api.jquery.com/jquery.get/).
2) AJAX - wyszukiwarka filmów
Należy dodać do strony wyszukiwarkę filmów, która wyświetla dopasowane pozycje z repertuaru bez przeładowywania całej strony. Można porównać zachowanie opracowywanego rozwiązania z wyszukiwarką w serwisie http://www.filmweb.pl/.
Informacje o dopasowanych filmach pochodzą z aplikacji serwerowej (back-end) i są przez nią udostępniane w formacie JSON. Należy wykorzystać przykładową aplikację z archiwum ajax-server.zip. Po rozpakowaniu archiwum zip należy przejść w terminalu do uzyskanego katalogu i uruchomić polecenie:
php -S 0.0.0.0:8080 -t web
Spowoduje ono uruchomienie lokalnego serwera pod adresem http://localhost:8080. Aplikacja serwerowa obsługuje dwie grupy adresów:
- http://localhost:8080/movies?q=gra - zasób pozwalający na wyszukiwanie filmów; wartość parametru q jest frazą wyszukiwania, która zostaje dopasowana do tytułów filmów; przykładowa odpowiedź serwera w formacie JSON wygląda następująco:
[
{
"title": "Gra Endera",
"director": "Gavin Hood",
"year": 2013,
"poster": "enders_game.jpg",
"screenings": [
"19:20",
"20:40",
"21:10"
]
},
{
"title": "Grawitacja",
"director": "Alfonso Cuaron",
"year": 2013,
"poster": "gravity.jpg",
"screenings": [
"20:50",
"21:20",
"22:40"
]
}
]
- http://localhost:8080/posters/* - zasoby plakatów filmowych, np. http://localhost:8080/posters/now_you_see_me.jpg
2.1 Należy w wybranym miejscu strony dodać pole tekstowe pełniące rolę wyszukiwarki. Treść wpisana w pole (zdarzenie keyup) powinna być wykorzystywana jako fraza wyszukiwania (parametr q) w czasie wywoływania usługi po stronie serwera.
2.2 Na podstawie otrzymanych danych w formacie JSON należy zbudować interfejs prezentujący dopasowane filmy. Wyniki wyszukiwania powinny prezentować tytuł, reżysera, rok produkcji oraz plakat filmu.
3) Wyszukiwarka filmów - część 2
W oparciu o przykładowe rozwiązanie zadań 1-2 (ajax-front-end.zip) należy zmodyfikować wyszukiwarkę filmów wprowadzając następujące elementy:
3.1 W sytuacji gdy back-end nie zwróci żadnych pasujących filmów (pusta tablica w odpowiedzi na żądanie AJAXowe) należy wyświetlić odpowiedni komunikat na stronie.
3.2 W czasie oczekiwania na odpowiedź od back-endu na żądanie asynchroniczne należy wyświetlić element typu spinner wskazujący, że dane są pobierane w tle. Można wykorzystać ikony dostępne w biblioteki FontAwesome, np.:
<i class="fa fa-refresh fa-spin fa-4x"></i>
Spinner powinien zostać ukryty, gdy przeglądarka otrzyma odpowiedź.
3.3 Godziny najbliższych seansów powinny być pobierane z danych w formacie JSON, które aplikacja otrzymuje z back-endu.
4) Promowane filmy w aktualnym repertuarze - dynamiczna treść pobierana AJAXem
W ramach Laboratorium: Interfejsy dodano do strony obszar prezentujący promowane filmy z aktualnego repertuaru. Statyczną dotychczas treść tej sekcji należy zastąpić dynamiczną treścią pobieraną z back-endu. Aplikacja serwerowa udostępnia zasób pod adresem http://localhost:8080/promoted, który zwraca informacje o 3 promowanych filmach. Filmy wybierane są losowo przy każdym wywołaniu usługi. Struktura zwracanych danych jest taka sama jak w przypadku wyszukiwarki filmów, przy czym zawsze występują 3 rezultaty. Informacje z back-endu należy pobrać bezpośrednio po załadowaniu front-endu w przeglądarce.
5) Newsy
Należy dodać na stronie sekcję wiadomości (może być to osobna podstrona lub kolejna sekcja strony głównej), których treść pobierana jest z back-endu. Aplikacja serwerowa udostępnia zasób pod adresem http://localhost:8080/news. Należy zapoznać się ze strukturą zwracanych danych i na ich podstawie zbudować za pomocą biblioteki jQuery interfejs prezentujący wiadomości.
6) Rezerwacja biletów - dynamiczna treść
W zadaniu nr 1 powyżej prezentowana była statyczna treść po zatwierdzeniu formularza rezerwacji biletu. Należy zmodyfikować ten element witryny tak, aby do back-endu przesyłane były informacje o dacie i godzinie seansu, który wybrał użytkownik. Należy w tym celu wykorzystać żądanie typu POST (dokumentacja: https://api.jquery.com/jquery.post/). Aplikacja serwerowa oczekuje parametrów o nazwach:
- date - data seansu,
- time - godzina seansu.
Adres zasobu: http://localhost:8080/reservations
Odpowiedź serwera zawiera informację, czy rezerwacja się powiodła, przykładowo:
{
"success": true,
"date": "2017-01-22",
"time": "19:20"
}
Serwer zwraca wartość "success": false dla 33% żądań rezerwacji. W zależności od odpowiedzi back-endu należy wyświetlić komunikat o powodzeniu bądź niepowodzeniu rezerwacji. Komunikat powinien zawierać również datę i godzinę seansu odczytane z odpowiedzi back-endu.
