E.14 - 03 - 19.01




Zadania egzaminacyjne

Wykonaj aplikację internetową witryny z bazą filmów. Wykorzystaj pakiet XAMPP jako środowisko bazodanowo-aplikacyjne. Stronę internetową zbuduj przy wykorzystaniu edytora zaznaczającego składnię oraz programu do obróbki grafiki rastrowej i wektorowej.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki3.zip zabezpieczone hasłem: FiLmoTekA
Archiwum należy rozpakować.
Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Po skończonej pracy wyniki zapisz w tym folderze.

Operacje na bazie danych
Baza danych jest zgodna ze strukturą przedstawioną na obrazie 1. Tabela filmy ma dwa klucze obce łączące ją z tabelami rezyserzy i gatunki. Brak obrazu proszę głosić do supportu
Obraz 1. Baza danych oraz wartości tabeli gatunki
Uruchom usługi MySQL i Apache za pomocą XAMPP Control Panel. Za pomocą narzędzia phpMyAdmin wykonaj podane operacje na bazie danych:
  • Utwórz nową bazę danych o nazwie dane
  • Do bazy zaimportuj tabele z pliku dane.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL, w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel
  • Zapisz i wykonaj zapytania SQL działające na bazie danych dane. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań.
  • Zapytanie 1: wybierające jedynie pola tytul, rok oraz ocena z tabeli filmy tylko dla gatunku komedii
  • Zapytanie 2: wybierające jedynie pola id i tytul z tabeli filmy oraz odpowiadające im pola imie i nazwisko z tabeli rezyserzy. Należy posłużyć się relacją
  • Zapytanie 3: wybierające jedynie pola id oraz tytul z tabeli filmy tylko dla filmów z roku 2017, dla których wartość wynosi 6
  • Zapytanie 4: zmieniające dane w tabeli rezyserzy. Pole imie w rekordzie o id równym 8 ma nowe brzmienie „Francis Ford”
Witryna internetowa
Brak obrazu proszę głosić do supportu
Obraz 2. Witryna internetowa z listy rozwijanej wybrano „dramat”.
Przygotowanie grafiki
Grafiki klaps.png oraz gwiezdneWojny.jpg należy przeskalować z zachowaniem proporcji tak, aby ich wysokość wynosiła dokładnie 200 px
Cechy witryny
  • Składa się ze strony o nazwie index.php
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Filmoteka”
  • Arkusz stylów w pliku o nazwie styl3.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: na górze cztery bloki, ułożone obok siebie, poniżej dwa bloki główne: lewy i prawy, na dole blok stopki. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
  • Zawartość pierwszego górnego bloku: obraz klaps.png z tekstem alternatywnym „Nasze filmy”
  • Zawartość drugiego górnego bloku: nagłówek pierwszego stopnia o treści „BAZA FILMÓW”
  • Zawartość trzeciego górnego bloku: formularz wysyłający dane metodą POST z elementami:   - Lista rozwijana z elementami: „Sci-Fi”, „animacja”, „dramat”, „horror”, „komedia”
      - Przycisk wysyłający dane o nazwie „Filmy”
  • Zawartość czwartego górnego bloku: obraz gwiezdneWojny.jpg z tekstem alternatywnym „szturmowcy”
  • Zawartość głównego bloku lewego:   - Nagłówek drugiego stopnia o treści „Wybrano filmy:”
      - Skrypt nr 1
  • Zawartość głównego bloku prawego:   - Nagłówek drugiego stopnia o treści „Wszystkie filmy”
      - Skrypt nr 2
  • Zawartość stopki:   - Akapit (paragraf) o treści „Autor: ”, dalej wstawiony numer PESEL zdającego
      - Odnośnik „Zapytania do bazy” otwierający / pobierający plik kwerendy.txt
      - Odnośnik „Przejdź do filmy.pl” prowadzący do strony „filmy.pl”, odnośnik otwiera się w osobnym oknie przeglądarki
Styl CSS witryny internetowej
Plik styl3.css zawiera formatowanie

  • Domyślne dla całej strony: krój czcionki Garamond
  • Wspólne dla czterech bloków górnych: kolor tła #790DB5, kolor czcionki orange, wysokość 200 px, szerokość 25%, wyrównanie tekstu do środka
  • Wspólne dla obu bloków głównych: kolor tła #FFE6A3, wysokość 500 px, szerokość 50%
  • Dla stopki: kolor tła #790DB5, kolor czcionki orange, wyrównanie tekstu do środka, marginesy wewnętrzne 30 px
  • Dla formularza: margines wewnętrzny górny 60 px
  • Dla akapitu (paragrafu): rozmiar czcionki 150%
  • Dla odnośnika: odnośnik niewybrany przyjmuje kolor yellow, odwiedzony – kolor orange
Skrypt połączenia z bazą
Wymagania dotyczące skryptów:
  • Napisany w języku PHP, umieszczony w pliku index.php
  • Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie dane
  • Na końcu działania skrypt zamyka połączenie z serwerem
  • Działanie skryptu nr 1:   -Po zatwierdzeniu formularza skrypt pobiera dane z listy rozwijanej
      - Wysyła do bazy zmodyfikowane zapytanie 1, w ten sposób, że w sekcji warunku sprawdzany jest gatunek filmu zgodny z wyborem w liście rozwijanej. Jeśli w liście wybrano „komedia” – zapytanie dotyczy komedii itd.
      - Wartości zwrócone zapytaniem są wypisywane w osobnych akapitach, w formacie „Tytuł: <tytul>, Rok produkcji: <rok>, Ocena: <ocena>” gdzie pola w nawiasach <> oznaczają dane pobrane z bazy
  • Działanie skryptu nr 2:   - Skrypt wysyła do bazy zapytanie 2
      - W kolejnych akapitach wypisywane są rekordy w formacie: „<id>. <tytul>, reżyseria: <imie> <nazwisko>”
W tabeli 1 podano wybór funkcji PHP do obsługi bazy danych. Brak obrazu proszę głosić do supportu
Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQL i MariaDB
UWAGA: po zakończeniu pracy utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny, zapisz go w folderze z numerem PESEL jako przeglądarka.txt. Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: gwiezdneWojny.jpg, import.png, index.php, klaps.png, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, przeglądarka.txt, styl3.css, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność nagrania. Opisz płytę swoim numerem PESEL i pozostaw na stanowisku, zapakowaną w pudełku wraz z arkuszem egzaminacyjnym

Czas przeznaczony na wykonanie zadania wynosi 150 minut.
Ocenie będzie podlegać 5 rezultatów:
  • operacje na bazie danych,
  • wygląd witryny internetowej,
  • działanie witryny internetowej,
  • styl CSS witryny internetowej,
  • skrypt połączenia z bazą.
PODANE ROZWIĄZANIE JEST TYLKO PRZYKŁADEM.