E.14 - 09 - 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 materialy3.zip zabezpieczone hasłem: G@tuneK
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 Zwierzeta ma dwa klucze obce, łączące je z tabelami Odzywianie i Gromady. Pole czy_zagrozony tabeli Zwierzeta przybiera wartość 0, gdy gatunek nie jest zagrożony oraz 1, gdy gatunek jest zagrożony
Brak obrazu proszę zgłosić do supportu
Brak obrazu proszę zgłosić do supportu
Obraz 1. Baza danych oraz wartości w tabeli Gromady


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 sklep 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 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 sklep. 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ń
    - Zapytanie 1: wybierające jedynie pola: gatunek i wystepowanie z tabeli Zwierzeta jedynie dla ryb
    - Zapytanie 2: wybierające jedynie pola id oraz gatunek z tabeli Zwierzeta oraz odpowiadające im pole nazwa z tabeli Gromady. Należy posłużyć się relacją.
    - Zapytanie 3: zliczające liczbę rekordów w tabeli Zwierzeta jedynie dla ssaków
    - Zapytanie 4: Tworzące użytkownika KatarzynaNowak o haśle K4tNow
Witryna internetowa
Brak obrazu proszę głosić do supportu
Obraz 1. 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: "Dane o zwierzętach"
  • Arkusz stylów w pliku o nazwie styl3.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: na górze baner, poniżej blok formularza, poniżej trzy bloku głowne: lewy, środkowy i prawy, na dole blok stopki. Podział zrealizowany za pomocą znaczików sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
  • Zawartość banera: nagłówek pierwszego stopnia "ATLAS ZWIERZĄT"
  • Zawartość bloku formularza:
    - Nagłówek drugiego stopnia o treści "Gromady"
    - Lista numerowana o elementach "Ryby", "Płazy", "Gady", "Ptaki", "Ssaki"
    - Formularz wysyłający dane metodą POST z elementami:
       - Tekst "Wybierz gromadę"
       - Pole edycyjne typu numerycznego
       - Przycisk wysyłający dane o nazwie "Wyświetl"
  • Zawartość bloku głównego - lewego: obraz zwierzeta.jpg z wypakowanego archiwum z tekstem alternatywnym "dzikie zwierzęta"
  • Zawartość bloku głównego - środkowego:
    - Efekt wykonania skryptu nr 1
  • Zawartość bloku głównego - prawego
    - Nagłówek drugiego stopnia o treści "Wszystkie zwierzęta w bazie"
    - Efekt wykonania skryptu nr 2
  • Zawartość stopki:
    - Odnośnik o treści "Poznaj inne strony o zwierzętach", prowadzący do strony atlas-zwierzat.pl, odnośnik otwiera stronę w osobnym oknie
    - Napis o treści: "autor Atlasu zwierząt: ", dalej wstawiony numer PESEL zdającego
Styl CSS witryny internetowej
Cechy formatowania działające na stronie:
- Domyślne dla całej strony: krój czcionki Garamond
- Dla bloku banera: kolor tła RosyBrown, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 10px
- Dla bloku formularza: kolor tła DarkSalmon, wyrównanie tekstu do środka, marginesy wewnętrzne 40px
- Wspólnie dla bloku głównego lewego i prawego: kolor tła LightSalmon, wysokośc 300px, szerokość 30%
- Dla bloku głównego - środkowego: kolor tła LightSalmon, wysokość 300px, szerokość 40%
- Dla stopki: kolor tła RosyBrown, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 30px
- Dla listy numerowanej: obramowanie 2px linią ciągłą w kolorze RGB: 205, 92, 92; rozmiar czcionki 150%

W tabeli 1 podano wybór funkcji do obsługi bazy danych

Brak obrazu proszę zgłosić do supportu
Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQL i MariaDB
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 skrypt zamyka połączenie z serwerem bazodanowym
  • Działanie skryptu nr 1:
    - Skrypt pobiera dane z pola edycyjnego
    - W zależności od wartości pola wypisuje w nagłówku drugiego stopnia: dla wartości 1 - "RYBY", 2 - "PŁAZY", 3 - "GADY", 4 - "PTAKI", 5 - "SSAKI"
    - Wysyła do bazy zmodyfikowane zapytanie nr 1, w ten sposób, że w sekcji warunku sprawdza czy gromada jest zgodna z wartością pobraną z pola edycyjnego. Jeśli w polu wpisana jest wartość 1 - zapytanie dotyczy ryb, wartość 2 - zapytanie dotyczy płazów itd.
    - Wartości zwrócone zapytaniem są wypisywane w osobnych wierszach, w formacie: "<gatunek>, <występowanie>"
  • Działanie skryptu nr 2:
    - Skrypt wysyła do bazy zapytanie numer 2
    - W kolejnych wierszach wypisywane są rekordy w formacie: "<id>, <gatunek>, <nazwa gromady>"
PODANE ROZWIĄZANIE JEST TYLKO PRZYKŁADEM.