E.14 - 10 - 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 materialy4.zip zabezpieczone hasłem: OdzYwi4niE
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 Zwierzęta ma dwa klucze obce łączące ją z tabelami Odzywianie i Gromady. Pole czy_zagrozony tabeli Zwierzeta przybiera wartość 0, gdy gatunek nie jest zagrożony oraz 1, gdy jest zagrożony. Obraz pojawi się wkrótce
Obraz 1. Baza danych oraz wartość w tabeli Odzywianie
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 baza
  • Do bazy zaimportuj tabele z pliku baza2.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 obejmować cały ekran monitora, 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. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESE. Wykonaj zrzut 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: wybierające jedynie pola: id, gatunek i wystepowanie z tabeli Zwierzeta jedynie dla zwierząt wszytkożernych
    2. Zapytanie 2: wybierające jedynie pole gatunek z tabeli Zwierzeta oraz odpowiadające mu pole rodzaj z tabeli Odzywianie. Należy posłużyć się relacją
    3. Zapytanie 3: zliczające liczbę rekordów w tabeli Zwierzeta jedynie dla zwierząt drapieżnych
    4. Zapytanie 4: tworzące użytkownika JanKowalski o haśle J4nKow
Witryna internetowa
Obraz pojawi się wkrótce
Obraz 2. Witryna internetowa
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: "Odżywianie zwierząt"
  • Arkusz stylów w pliku o nazwie style4.css prawidłowo połaczony z kodem strony
  • Podział strony na bloki: na górze baner, poniżęj blok formularz, poniżej trzy bloki głowne: lewy, środkowy i prawy, na dole stopki. Podział zrealizowanu za pomocą znaczników sekcji,tak aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
  • Zawartość banera:
    1. Nagłowek drugiego stopnia "DRAPIEŻNIKI I INNE"
  • Zawartośc bloku formularza:
    1. Nagłowek trzewciego stopnia o treści "Wybierz styl życia:"
    2. Formularz wysyłający dane metodą POST z elementami:
      - Pole listy rozwijalnej z elementami: "Drapieżniki", "Roślinożerne", "Padlinożerne", "Wszytkożerne". Z listy można wybrać tylko jeden element
      - Przycisk wysyłający dane o nazwie "Zobacz"
  • Zawartość bloku głównego-lewego:
    1. Nagłowek trzeciego stopnia o treści "Lista zwierząt"
    2. Efekt wykonania skryptu nr 1
  • Zawartość bloku głownego-środkowego:
    1. Efekt wykonania skryptu nr 2
  • Zawartość bloku głównego-prawego:
    1. obraz drapieznik.jpg z wypakowanego archiwum z tekstem alternatywnym "Wilki"
  • Zawartość stopki:
    1. Odnośnik o treści "Poczytaj o zwierzętach na Wikipedii" prowadzący do strony "pl.wikipedia.org" odnośnik otwiera stronę w osobnym oknie
    2. Napis o treści "autor strony:" dalej wstawiony numer PESEL zdającego
Styl CSS witryny internetowej
Cechy formatowania CSS działające na stronie
  • Domyślne dla całej strony: krój czcionki Helvetica
  • Dla bloku banera: koor tła DarkCyan, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 20px
  • Dla bloku formularza: kolor tła LightSeaGreen, wyrównanie tekstu do środka, marginesy wewnętrzne 60px
  • Wspólne dla bloku głownego lewego oraz środkowego: kolor tła Teal, biały kolor czcionki, wyrównanie tekstu do środka, wysokość 350px, szerokość 25%
  • Dla bloku głównego-prawego: kolor tła Teal, wysokość 350 px, szerokość 50%
  • Dla stopki: kolor tła DarkCyan, biały kolor czcionki, marginesy wewnętrzne 40px
  • Dla listy punktowej: obramowanie 4px linią kropkowaną w kolorze RGB: 127,255,212
Skrypt połączenia z bazą
Wymagania dotyczące skryptów:
  • Napisany w języku PHP
  • Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie baza
  • Na końcu działania skrypt zamyka połączonie z serwerem bazodanowym
  • Działanie skryptu nr1:
    1. Skrypt wysyła do bazy zapytanie numer 2
    2. Tworzy listę punktową, w której w kolejnych elementach wypisywane są rekordy w formacie: "[gatunek] -> [rodzaj odżywiania]"
  • Działanie skryptu nr 2:
    1. Skrypt pobiera wybór z listy rozwijalnej
    2. W zależności od wartości wypisuje w nagłowku trzeciego stopnia: dla wartości 1- "Drapieżnik", 2-"Roślonożerne", 3-"Padlinożerne", 4-"Wszystkożerne"
    3. Wysyła do bazy zmodyfikowane zapytanie nr 1 w ten sposób, że w sekcji warunku sprawdzany rodzaj odżywiania jest zgodny z wyborem w liście rozwijanej w formularzu. Jeśli wybrano w liście "drapieżniki", to zapytanie dotyczy drapieżników itd.
    4. Wartości zwrócone zapytaniem są wypisywane w osobnych wierszach, w formacie "[id].[gatunek],[wystepowanie]"
W tabeli 1 podano wybór funkcji PHP do obsługi bazy danych Obraz pojawi się wkrótce
Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQL i MariaDB
UWAGA: po zakończeniu pracu utwórz plik tekstowy o nazwie przegladarka.txt. Zapisz w nim nazwe przegladarki interetowej, w ktorej weryfikowałeś poprawność działania witryny. Umieść go w folderze z numerem PESEL
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny znajdować się pliki: drapieżnik.jpg, import.png, index.php, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, przegladarka.txt, styl.css, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność jje odczytu. Opisz płytę swoim numerem PESEL i pozostaw zapakowaną w pudełku na stanowiski wraz z arkuszem egzaminacyjnym


Czas przeznaczony na wykonanie zadania wynosi 150 minut.
Ocenie będzie podlegać 5 rezultatów:
  • operacje na bazie danych,
  • zawartość witryny internetowej
  • działanie witryny internetowej,
  • styl CSS witryny internetowej,
  • skrypt połączenia z bazą.