E.14 - 01 - 19.01




Zadania egzaminacyjne

Wykonaj aplikację internetową prezentującą możliwości HTML,CSS i JavaScript. Wykorzystaj pakiet XAMPP jako środowisko bazowo-aplikacyjne, edytor zaznaczający skadnię oraz program do obróbki grafiki rastrowej i wektorowej.
Aby wykonać zadanie, zaloguj się na konto Egazamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki1.zip zabezpieczone hasłem: Baz@FilmY
Archiwum należy rozpakować
Na pulpicie konta Egzamin utwórz folder. Jako nzawy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Wyniki swojej pracy 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 JPG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań.
    1. Zapytanie 1: wstawiające do tabeli filmy jeden rekord o danych: film „Suburbicon” z roku 2017, gatunek filmu to komedia, ocena jest równa 5
    2. Zapytanie 2: wybierające jedynie pole tytul z tabeli filmy oraz odpowiadające mu pole nazwa z tabeli gatunki dla filmów, dla których pole ocena ma wartość 6 . Należy posłużyć się relacją
    3. Zapytanie 3: wybierające jedynie pola tytul oraz rok z tabeli filmy tylko dla gatunku dramatów o ocenie równej 5
    4. Zapytanie 4: tworzące tabelę o nazwie aktorzy i polach id typu numerycznego, imie typu tekstowego, nazwisko typu tekstowego. Pole id nie może przyjmować wartości NULL
Przygotowanie grafiki:
Brak obrazu proszę głosić do supportu
Obraz kadr.jpg
  • Grafikę kadr.jpg należy skadrować. Na obrazie widoczne są dwie czarne linie wyznaczające kadr. Zdjęcie powinno być wycięte tak, aby był widoczny tylko obszar pomiędzy liniami (linie nie mają być widoczne).
Witryna internetowa
Brak obrazu proszę głosić do supportu
Obraz 2. Witryna internetowa, kursor znalazł się na obszarze formularza.
Cechy witryny:
  • Składa się ze strony o nazwie index.html
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Filmy”
  • Arkusz stylów w pliku o nazwie styl1.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: boczny panel po lewej stronie oraz trzy panele po prawej stronie – jeden pod drugim, stopka pod wszystkimi panelami. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
  • Zawartość lewego panelu:
    1. Nagłówek trzeciego stopnia o treści „Dostępne gatunki filmu”
    2. Lista numerowana (uporządkowana) z elementami o treści: „Sci-Fi”, „animacja”, „dramat”, „horror”, „komedia”
    3. Umieszczony w akapicie (paragrafie) odnośnik o treści „Pobierz obraz” prowadzący do obrazu kadr.jpg
    4. Umieszczony w akapicie odnośnik o treści „Sprawdź repertuar kin” prowadzący do strony „repertuar-kin.pl”, odnośnik otwiera się w osobnym oknie
  • Zawartość pierwszego prawego panelu:
    1. Nagłówek pierwszego stopnia o treści „FILMOTEKA”
  • Zawartość drugiego prawego panelu: formularz wysyłający dane metodą POST do pliku dodaj.php z elementami umieszczonymi w osobnych wierszach:
    1. Tekst „Tytuł: ” oraz pole edycyjne typu tekstowego
    2. Tekst „Gatunek filmu: ” oraz pole edycyjne typu numerycznego
    3. Tekst „Rok produkcji: ” oraz pole edycyjne typu numerycznego
    4. Tekst „Ocena: ” oraz pole edycyjne typu numerycznego
    5. Przycisk o treści CZYŚĆ, po jego wciśnięciu dane z pól edycyjnych są usuwane
    6. Przycisk o treści DODAJ, po jego wciśnięciu dane są wysyłane do skryptu PHP
  • Zawartość trzeciego prawego panelu:
    1. Obraz kadr.jpg z tekstem alternatywnym „zdjęcia filmowe”
  • Zawartość stopki:
    1. Akapit o treści „Autor strony: ”, dalej wstawiony numer PESEL zdającego
Styl CSS witryny internetowej
Plik styl1.css zawiera formatowanie:
  • Domyślne dla całej strony: krój czcionki Helvetica
  • Panelu lewego: kolor tła Navy, biały kolor czcionki, wysokość 700 px, szerokość 25%
  • Pierwszego panelu prawego: kolor tła RoyalBlue, wysokość 100 px, szerokość 75%, wyrównanie tekstu do środka
  • Drugiego panelu prawego: kolor tła SteelBlue, wysokość 300 px, szerokość 75%
  • Trzeciego panelu prawego: kolor tła RoyalBlue, wysokość 300 px, szerokość 75%, wyrównanie tekstu do środka
  • Stopki: kolor tła SteelBlue, wyrównanie tekstu do środka, marginesy wewnętrzne 20 px
  • Nagłówka pierwszego stopnia: odległość między literami wynosi 5 px
  • Formularza: marginesy zewnętrzne 30 px, wysokość linii wynosi 3
  • W momencie najechania kursorem na obszar formularza zmienia on kolor tła na DeepSkyBlue
Skrypt połączenia z bazą
Wymagania dotyczące skryptów:
  • Napisany w języku PHP, umieszczony w pliku dodaj.php (w pliku znajduje się tylko skrypt)
  • Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie dane
  • Pobiera dane z formularza ze wszystkich pól edycyjnych
  • Dodaje dane do tabeli filmy za pomocą zmodyfikowanego zapytania 1
  • Wypisuje tekst „Film [tytul] został dodany do bazy”, gdzie [tytul] oznacza tytuł wpisany do formularza
  • Zamyka połączenie z bazą
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: dodaj.php, import.png, index.html, kadr.jpg, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, przeglądarka.txt, styl1.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.