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.

Last modified: Saturday, 21.01.2017, 14:58