Arkusz INF.03 : 2024 - czerwiec - zad. 03 (php)

Oznaczenie: INF.03-03-24.06-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

UWAGA!
Folder z rezultatami pracy oraz płytę należy opisać numerem zdającego, którym został podpisany arkusz, czyli numerem PESEL lub w przypadku jego braku numerem paszportu. Dalej w zadaniu numer ten jest nazwany numerem zdającego.

Wykonaj aplikację internetową prezentującą stany rzek w województwie dolnośląskim, wykorzystując edytor grafiki rastrowej, pakiet XAMPP oraz edytor zaznaczający składnię.

Aby wykonać zadanie, należy zalogować się na konto Egzamin bez hasła. Na pulpicie znajduje się archiwum ZIP o nazwie PlikiCz202403 zabezpieczone hasłem: St@ny%RzeK

Pobierz PlikiCz202403.zip

Archiwum należy rozpakować.

Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego. Rozpakowane pliki należy umieścić w tym folderze. Po skończonej pracy wszystkie wyniki należy zapisać w tym folderze.

Operacje na bazie danych

Baza danych jest zgodna ze strukturą przedstawioną na Obrazie 1. Tabele są połączone relacją 1..n.

Obraz 1. Baza danych

Za pomocą narzędzia phpMyAdmin wykonaj operacje na bazie danych:

  • Utwórz bazę danych o nazwie rzeki, z zestawem polskich znaków (np. utf8_unicode_ci)
  • Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
  • Wykonaj zapytania SQL działające na bazie rzeki. Zapytania zapisz w pliku kwerendy.txt. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie JPEG 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 nazwa, rzeka, stanAlarmowy z tabeli wodowskazy
    • Zapytanie 2: wybierające jedynie pola nazwa, rzeka, stanOstrzegawczy, stanAlarmowy z tabeli wodowskazy oraz odpowiadające im pole stanWody z tabeli pomiary dla daty pomiaru 2022-05-05. Należy posłużyć się relacją
    • Zapytanie 3: wybierające jedynie pola nazwa, rzeka, stanOstrzegawczy, stanAlarmowy z tabeli wodowskazy oraz odpowiadające im pole stanWody z tabeli pomiary dla daty pomiaru 2022-05-05 oraz takie, dla których stanWody jest wyższy niż stanOstrzegawczy. Należy posłużyć się relacją
    • Zapytanie 4: wybierające jedynie datę pomiaru oraz liczące średnie stany wody z tabeli pomiary grupując je według daty pomiaru

Witryna internetowa

Obraz 2. Witryna internetowa. Kursor na wierszu tabeli

Przygotowanie grafiki:

Dla grafiki obraz1.png, wypakowanej z archiwum, należy nadać przezroczyste tło oraz wypełnić obszar województwa dolnośląskiego kolorem niebieskim o dowolnym odcieniu. Województwo dolnośląskie znajduje się w lewym dolnym rogu mapy – patrz Obraz 2.

Cechy witryny:

  • Składa się ze strony o nazwie poziomRzek.php zapisanej w języku HTML5
  • Ustawiony język zawartości strony na polski
  • Jawnie zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Poziomy rzek”
  • Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: na górze dwa bloki banera, poniżej menu, poniżej bloki: lewy i prawy, na dole blok stopki. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z Obrazem 2
  • Zawartość pierwszego banera: obraz1.png z tekstem alternatywnym o treści: „Mapa Polski”
  • Zawartość drugiego banera: nagłówek pierwszego stopnia o treści „Rzeki w województwie dolnośląskim”
  • Zawartość menu:
    • Formularz wysyłający dane do skryptu na tej samej stronie, metodą bezpieczną, zawierający:
      • Obok siebie 3 pola opcji (radio) zgrupowane, tak aby było możliwe jednoczesne wybranie tylko jednego pola. Etykiety przy polach opcji: „Wszystkie”, „Ponad stan ostrzegawczy”, „Ponad stan alarmowy” (pola opcji będą formatowane jedną klasą CSS)
      • Przycisk o treści „Pokaż”, wysyłający dane do skryptu
  • Zawartość bloku lewego:
    • Nagłówek trzeciego stopnia o treści: „Stany na dzień 2022-05-05”
    • Tabela zawierająca dane:
      • Pierwszy wiersz wypełniony komórkami nagłówkowymi o treści: „Wodomierz”, „Rzeka”, „Ostrzegawczy”, „Alarmowy”, „Aktualny”
      • Pozostałe wiersze wypełnione przez skrypt skojarzony z formularzem
  • Zawartość bloku prawego:
    • Nagłówek trzeciego stopnia o treści: „Informacje”
    • Lista punktowana (nieuporządkowana) zawierająca elementy: „Brak ostrzeżeń o burzach z gradem”, „Smog w mieście Wrocław”, „Silny wiatr w Karkonoszach”
    • Nagłówek trzeciego stopnia o treści: „Średnie stany wód”
    • Efekt działania skryptu 2
    • Odnośnik do adresu „https://komunikaty.pl” o treści „Dowiedz się więcej”
    • Obraz o nazwie obraz2.jpg i tekście alternatywnym „rzeka”
  • Zawartość stopki: akapit (paragraf) o treści: „Stronę wykonał: ”, dalej wstawiony numer zdającego

Styl CSS witryny internetowej

Styl CSS zdefiniowany jest w całości w zewnętrznym pliku o nazwie styl.css. Cechy formatowania CSS, działające na stronie:

  • Domyślne formatowanie wszystkich selektorów: krój czcionki Georgia
  • Wspólne dla obu bloków banera: kolor tła Navy, biały kolor czcionki, wyrównanie tekstu do środka, wysokość 100 px, szerokość 50%
  • Dla bloku menu: kolor tła Navy, marginesy wewnętrzne 20 px
  • Dla klasy formatującej teksty przy polach opcji: kolor czcionki Silver, marginesy zewnętrzne 50 px
  • W momencie, gdy kursor myszy znajdzie się na tekście pola opcji ma on kolor biały i podkreślenie
  • Wspólne dla bloku lewego i prawego: kolor tła Azure, wysokość 550 px
  • Dodatkowo blok lewy ma szerokość 70% a blok prawy szerokość 30%
  • Dla stopki: kolor tła Navy, biały kolor czcionki
  • Dla selektora tabeli: obramowanie linią ciągłą o szerokości 1 px i kolorze Navy, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 70%
  • W momencie, gdy kursor myszy znajdzie się na wierszu tabeli, jego kolor tła zmienia się na SkyBlue
  • Dla obrazu w prawym bloku: szerokość 90%
UWAGA!
Styl CSS tabeli należy zdefiniować wyłącznie przy pomocy selektora tego znacznika. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.

Skrypt połączenia z bazą

W Tabeli 1 podano wybór funkcji PHP do obsługi bazy danych. Wymagania dotyczące skryptów:

  • Napisane w języku PHP
  • Należy stosować znaczące nazewnictwo wszystkich zmiennych lub funkcji
  • Skrypty łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie rzeki
  • Skrypt skojarzony z formularzem, po wysłaniu danych z formularza, wyświetla dane w tabeli w zależności od wybranego pola opcji:
    • Wszystkie dane wodomierzy są uzyskane za pomocą zapytania 2 (patrz Obraz 2)
    • Dane wodomierzy z przekroczonym stanem ostrzegawczym są uzyskane za pomocą zapytania 3 lub alternatywnie za pomocą zapytania 2 i odpowiednio przygotowanego warunku (patrz Obraz 3)
    • Dane wodomierzy z przekroczonym stanem alarmowym są uzyskane za pomocą zmodyfikowanego zapytania 3 lub alternatywnie za pomocą zapytania 2 i odpowiednio przygotowanego warunku (patrz Obraz 4)

Obraz 3. Po wybraniu pola opcji „Ponad stan ostrzegawczy” i wysłaniu formularza

Obraz 4. Po wybraniu pola opcji „Ponad stan alarmowy” i wysłaniu formularza

  • Skrypt 2
    • Wysyła do bazy danych zapytanie 4
    • Każdy zwrócony zapytaniem wiersz jest wyświetlany w paragrafie o treści: „<data>: <średnia>”, gdzie dane zapisane w <> są pobierane z bazy danych
  • Na końcu jest zamykane połączenie z serwerem

Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQLi i MariaDB

Funkcje bilioteki mysqli Zwracana wartość
mysqli_connect(serwer, uzytkownik, haslo, nazwa_bazy) id połączenia lub FALSE, gdy niepowodzenie
mysqli_select_db(id_polaczenia, nazwa_bazy) TRUE / FALSE, w zależności od stanu operacji
mysqli_error(id_polaczenia) Tekst komunikatu błędu
mysqli_close(id_polaczenia) TRUE / FALSE, w zależności od stanu operacji
mysqli_query(id_polaczenia, zapytanie) Wynik zapytania
mysqli_fetch_row(wynik_zapytania) Tablica numeryczna odpowiadająca wierszowi zapytania
mysqli_fetch_array(wynik_zapytania) Tablica zawierająca kolejny wiersz z podanych w wyniku zapytania lub FALSE, jeżeli nie ma więcej wierszy w wyniku zapytania
mysqli_num_rows(wynik_zapytania) Liczba wierszy w podanym zapytaniu
mysqli_num_fields (wynik_zapytania) Liczba kolumn w podanym zapytaniu
UWAGA!
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego.
UWAGA!
Nagraj płytę z rezultatami pracy. W folderze z numerem zdającego, powinny znajdować się pliki: import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, obraz1.png, obraz2.jpg, poziomRzek.php, przeglądarka.txt, styl.css, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność jej odczytu. Opisz płytę numerem zdającego i pozostaw zapakowaną w pudełku na stanowisku 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ą.