Arkusz INF.03 : 2026 - styczeń - zad. 05 (php)

Oznaczenie: INF.03-05-26.01-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

UWAGA!
Numer, którym został podpisany arkusz egzaminacyjny (PESEL lub w przypadku jego braku numer paszportu) jest w zadaniu nazywany numerem zdającego.

Wykonaj aplikację internetową portalu zgłoszeń wypadków, wykorzystując 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 PlikiSt202605 zabezpieczone hasłem: @LarMowe^

Pobierz PlikiSt202605.zip

Archiwum należy rozpakować.

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

Operacje na bazie danych

Baza danych zawiera połączone relacją tabele przedstawione na Ilustracji 1. Tabele opisują rejestr zgłoszeń oraz przypisane do nich dane dotyczące personelu oraz pojazdów. W polu personel.status znajdują się wpisy: ‘policjant’ lub ‘ratownik’. W polu pojazdy.typ znajdują się wpisy: ‘K’ lub ‘R’ oznaczające karetkę lub radiowóz.

Ilustracja 1. Baza danych

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

  • Utwórz bazę danych o nazwie zgloszenia, z zestawem polskich znaków (np. utf8_polish_ci)
  • Z rozpakowanego archiwum zaimportuj tabele z pliku zgloszenia.sql do utworzonej bazy
  • Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą 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 zgloszenia. 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 identyfikatory, imiona i nazwiska tych osób spośród personelu, których status to policjant
    • Zapytanie 2: wybierające jedynie typ i zliczające liczbę pojazdów zgrupowanych według typu (zapytanie wybiera liczbę karetek i radiowozów)
    • Zapytanie 3: wybierające jedynie te identyfikatory i nazwiska osób spośród personelu, których id nie pojawia się w rejestrze
    • Zapytanie 4: wstawiające rekord do tabeli rejestr: identyfikator personelu: 1, identyfikator pojazdu: 14, automatycznie wpisywana aktualna data, klucz generowany automatycznie

Witryna internetowa

Ilustracja 2. Wygląd witryny internetowej, kursor na przycisku.

Cechy witryny:

  • Składa się ze strony o nazwie index.php
  • Zapisana w języku HTML5
  • Zadeklarowany polski język zawartości witryny
  • Jawnie zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony „ZGŁOSZENIA”
  • Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
  • Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z Ilustracją 3

Ilustracja 3. Układ bloków

  • Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści „Zgłoszenia wydarzeń”
  • Zawartość bloku głównego: bloki sekcji lewej i sekcji prawej
  • Zawartość bloku sekcji lewej:
    • Nagłówek drugiego stopnia o treści „Personel”
    • Formularz wysyłający dane do tego samego pliku metodą bezpieczną, z elementami:
      • Pole opcji z treścią „Policjant”, domyślnie zaznaczone
      • Pole opcji z treścią „Ratownik”
      • W jednym momencie można zaznaczyć tylko jedno pole opcji
      • Przycisk „Pokaż”, wysyłający dane z formularza do skryptu 1
    • Tabela z trzema kolumnami, w której pierwszy wiersz zawiera komórki nagłówkowe: „Id”, „Imię”, „Nazwisko”. Pozostałe wiersze wypełnione są przez skrypt 1
  • Zawartość bloku sekcji prawej:
    • Nagłówek drugiego stopnia o treści „Nowe zgłoszenie”
    • Lista numerowana (uporządkowana) wypełniona przez skrypt 2
    • Formularz wysyłający dane do tego samego pliku metodą bezpieczną, z elementami:
      • Pole etykiety „Wybierz id osoby z listy: ”, powiązane z polem edycyjnym
      • Pole edycyjne przeznaczone do wpisywania liczb
      • Przycisk „Dodaj zgłoszenie”, wysyłający dane z formularza do skryptu 3
  • Zawartość stopki: 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ślnie dla wszystkich selektorów: krój czcionki Tahoma
  • Wspólne dla bloku nagłówkowego i stopki: kolor tła Maroon, biały kolor czcionki, marginesy wewnętrzne 10 px
  • Wspólne dla bloku sekcji lewej i prawej: szerokość 50%, wysokość 500 px
  • Dodatkowo kolor tła dla bloku sekcji lewej – LightSalmon, dla prawej – DarkSalmon
  • Wspólne dla selektorów nagłówka pierwszego, drugiego i trzeciego stopnia: wyrównanie tekstu do środka
  • Wspólne dla selektora tabeli i selektora komórki tabeli: obramowanie linią ciągłą o szerokości 1 px i kolorze Maroon
  • Dodatkowo dla selektora tabeli: szerokość 85%, krawędzie połączone w jedno obramowanie, marginesy zewnętrzne automatycznie wyliczone przez przeglądarkę
  • Dla listy numerowanej: brak punktora
  • Dla obu przycisków: kolor tła Maroon, biały kolor czcionki, jedynie margines zewnętrzny lewy 20 px, marginesy wewnętrzne 10 px, bez obramowania, zaokrąglenie rogów 20 px
  • Gdy kursor znajdzie się na przycisku jego kolor tła zmienia się na biały, a kolor czcionki na Maroon
UWAGA!
Styl CSS nagłówka pierwszego, drugiego, trzeciego stopnia oraz tabeli i komórki 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 zamieszczono wybrane funkcje PHP do obsługi bazy danych. Wymagania dotyczące skryptów:

  • Napisane w języku PHP
  • Należy stosować znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim
  • Łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie zgloszenia
  • Na końcu zamykane jest połączenie z serwerem

Skrypt 1

  • Wysyła do bazy danych zapytanie 1, zmodyfikowane w ten sposób, że wybierane są rekordy z opcją wysłaną z formularza (policjant lub ratownik) lub w stanie początkowym z opcją policjant
  • Wypisuje nagłówek trzeciego stopnia o treści „Wybrano opcję: <opcja>”, gdzie <opcja> oznacza wybraną w formularzu opcję. Element ten należy wypisać przed tabelą
  • Wszystkie zwrócone zapytaniem wiersze wyświetla jako kolejne wiersze tabeli zgodnie z Ilustracją 2

Skrypt 2

  • Wysyła do bazy danych zapytanie 3
  • Wszystkie zwrócone zapytaniem wiersze wyświetla jako elementy listy zgodnie z Ilustracją 2

Skrypt 3

  • Jeżeli wysłano dane z formularza to skrypt wysyła do bazy danych zmodyfikowane zapytanie 4 tak, że w miejscu id personelu jest podana wartość wysłana z formularza

Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQL 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
isset($zmienna) Sprawdzenie, czy $zmienna istnieje

Tabela 2. Semantic Elements in HTML

Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
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.
Nagraj płytę z rezultatami pracy. W folderze z numerem zdającego, powinny znajdować się pliki: import.png, index.php, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, 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 podlegać będzie 5 rezultatów:

  • operacje na bazie danych
  • zawartość witryny internetowej
  • działanie witryny internetowej
  • styl CSS witryny internetowej
  • skrypt połączenia z bazą.