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

Oznaczenie: INF.03-01-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 samochodowego, 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 PlikiSt202601 zabezpieczone hasłem: S@mocHody^

Pobierz PlikiSt202601.zip

Archiwum należy rozpakować.

Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego. Wszystkie wyniki należy zapisać w tym folderze.

Operacje na bazie danych

Baza danych zawiera połączone relacją tabele przedstawione na Ilustracji 1.

Ilustracja 1. Baza danych

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

  • Utwórz bazę danych o nazwie samochody, z zestawem polskich znaków (np. utf8_polish_ci)
  • Z rozpakowanego archiwum zaimportuj tabele z pliku baza.sql do utworzonej bazy
  • Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie JPEG 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 samochody. Zapytania zapisz w pliku kwerendy.txt. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań
    • Zapytanie 1: wybierające pierwsze 15 rekordów, jedynie pola: marka, model, cena dla pojazdów, których marka to BM posortowane malejąco według ceny
    • Zapytanie 2: liczące średnią cenę pojazdów oraz wybierające najdroższy pojazd dla modelu „meta”. Nazwy kolumn (aliasy) odpowiednio: „Średnia cena”, „Maksymalna cena”
    • Zapytanie 3: wybierające z tabeli pojazdy jedynie pola: marka, model, cena oraz odpowiadające im z tabeli kolory pola: nazwa, doplata dla modelu „alfa”. Należy posłużyć się relacją
    • Zapytanie 4: losujące dwa dowolne rekordy z tabeli pojazdy i wybierające jedynie markę, model i cenę

Witryna internetowa

Ilustracja 2. Wygląd witryny internetowej, kursor na tabeli w bloku lewym (dane w bloku środkowym mogą się różnić)

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 „Konfigurator samochodów”
  • 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 „Serwis konfiguracji samochodów”
  • Zawartość bloku nawigacyjnego: trzy nagłówki drugiego stopnia o treści: „Samochody”, „Konfigurator”, „Kontakt”
  • Zawartość bloku głównego: blok sekcji lewej, środkowej i prawej
  • Zawartość bloku sekcji lewej: tabela z czterema kolumnami, wypełniona skryptem 1
  • Zawartość bloku sekcji środkowej:
    • Tabela z trzema kolumnami i siedmioma wierszami, niektóre komórki są scalone zgodnie z Ilustracją 2
    • W pierwszym wierszu tabeli komórki nagłówkowe: „Konfiguracja”, „Cena”
    • W drugim wierszu tabeli obraz a1.jpg z tekstem alternatywnym „Konfiguracja 1”
    • W trzecim i czwartym wierszu tabeli działanie skryptu 2
    • W piątym wierszu tabeli obraz a2.jpg z tekstem alternatywnym „Konfiguracja 2”
    • W szóstym i siódmym wierszu tabeli dalszy ciąg działania skryptu 2
  • Zawartość bloku sekcji prawej:
    • Nagłówek trzeciego stopnia o treści „111 222 444”
    • Obraz a3.png z tekstem alternatywnym „Samochód”
  • 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. W Tabeli 2 zawarto pomoc do niektórych właściwości CSS. Cechy formatowania CSS, działające na stronie:

  • Domyślnie dla wszystkich selektorów: wyrównanie tekstu do środka, krój czcionki Helvetica, w przypadku braku, sans-serif
  • Wspólne dla bloków nagłówkowego, nawigacyjnego i stopki: biały kolor czcionki, marginesy wewnętrzne 2 px
  • Dodatkowo dla bloków nagłówkowego i stopki: kolor tła DarkGreen oraz dla bloku nawigacyjnego kolor tła ForestGreen
  • Dla wszystkich bloków sekcji: kolor tła LightGreen, szerokość 33.3%, wysokość 550 px, jedynie górny margines wewnętrzny 10 px, paski przewijania widoczne jedynie w przypadku przepełnienia bloku
  • Dla selektora nagłówka drugiego stopnia: szerokość 33%, sposób wyświetlania elementu liniowo-blokowy
  • Wspólne dla selektora tabeli, komórki tabeli i komórki nagłówkowej: obramowanie linią ciągłą o szerokości 1 px i kolorze DarkGreen
  • Dodatkowo dla selektora tabeli: szerokość 90%, linie obramowania połączone
  • Jedynie dla obrazów z bloku środkowego: szerokość 95%, zaokrąglenie rogów 8 px
  • Jedynie dla wierszy tabeli z bloku lewego: gdy kursor znajdzie się na wierszu tabeli jego kolor tła zmienia się na ForestGreen (jak na Ilustracji 2)
UWAGA!
Styl CSS nagłówka drugiego stopnia, tabeli, komórki tabeli i komórki nagłówkowej 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 samochody
  • Skrypt 1
    • Wysyła do bazy danych zapytanie 3
    • W czwartej kolumnie tabeli wyświetlana jest cena całkowita, która jest sumą ceny z tabeli pojazdy oraz dopłaty z tabeli kolory
    • W wierszach tabeli wyświetlane są kolejne rekordy zgodnie z Ilustracją 2
  • Skrypt 2
    • Wysyła do bazy danych zapytanie 4
    • Wyświetla pierwszy rekord w tabeli w wierszach 3 i 4; drugi rekord w wierszach 6 i 7
  • Na końcu zamykane jest połączenie z serwerem

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. CSS display property

The display property specifies the display behavior (the type of rendering box) of an element. Property Values:

block Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
inline Displays an element as an inline element (like <span>). Any height and width properties will have no effect. This is default.
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
none The element is completely removed

Tabela 3. 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: a1.jpg, a2.jpg, a3.png, import.jpg, index.php, kw1.png, kw2.png, kw3.png, kw4.png, 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ą.