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

Oznaczenie: INF.03-10-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ą bloga kulinarnego, 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 PlikiSt202610 zabezpieczone hasłem: BLog+#KuLinarnY@

Pobierz PlikiSt202610.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. Tabela potrawy jest w relacji n:m z tabelą alergeny, za pomocą tabeli pośredniczącej lista_alergenow. Tabela potrawy jest w relacji n:1 z tabelą rodzaje, która opisuje rodzaje potraw: ciasta, dania mięsne itd.

Ilustracja 1. Baza danych

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

  • Utwórz bazę danych o nazwie przepisy, z zestawem polskich znaków (np. utf8_polish_ci)
  • Z rozpakowanego archiwum zaimportuj tabele z pliku przepisy.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 przepisy. 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 nazwę, trudność i kalorie potrawy o identyfikatorze równym 7
    • Zapytanie 2: wybierające jedynie nazwę potrawy i odpowiadające jej pole rodzaj z tabeli rodzaje dla potrawy o identyfikatorze równym 7. Należy posłużyć się relacją
    • Zapytanie 3: wybierające jedynie nazwę potrawy i odpowiadające jej nazwy alergenów dla potrawy o identyfikatorze równym 7. Zapytanie wykorzystuje relację n:m pomiędzy trzema tabelami
    • Zapytanie 4: wybierające jedynie pola przepis i plik dla potrawy o identyfikatorze równym 7

Witryna internetowa

Ilustracja 2. Wygląd witryny internetowej, kursor na odnośniku „Jagnięcina”

Cechy grafiki separator.png:

  • Grafikę należy skadrować tak, aby był widoczny jedynie separator pierwszy od góry, po lewej stronie. Grafikę należy dociąć do krawędzi separatora (Ilustracja 3, ramka przedstawia kadr obrazu).

Ilustracja 3. Separator

Cechy witryny:

  • Składa się ze strony o nazwie przepisy.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 „Blog kulinarny”
  • 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ą 4

Ilustracja 4. Układ bloków

  • Zawartość bloku bocznego:
    • 10 odnośników z nazwami potraw (można skopiować z pliku lista.txt): Sernik, Sałatka ...
    • Każdy odnośnik umieszczony jest w osobnej linii
    • Każdy odnośnik prowadzi do pliku przepisy.php oraz przesyła do niego metodą GET wartość id odpowiadającą wybranej potrawie, są to 1 dla odnośnika Sernik, 2 dla Sałatka itd.
    • Paragraf o treści „Autor: ”, dalej wstawiony numer zdającego
  • Zawartość bloku głównego:
    • Nagłówek pierwszego stopnia wypełniony skryptem 1
    • Efekt działania skryptu 2
    • Obraz separator.png z tekstem alternatywnym „przepis”
    • Paragraf o treści „Alergeny: ”, dalej w paragrafie występują nazwy alergenów wypisane skryptem 3
    • Nagłówek drugiego stopnia o treści „Składniki”
    • Lista punktowana (nieuporządkowana) wypełniona elementami z pliku lista.txt
    • Paragraf wypełniony skryptem 4
  • Zawartość bloku sekcji:
    • Przypisany jak atrybut znacznika bloku styl CSS inline: tło wypełnione obrazem, którego nazwa pliku została pobrana skryptem 4
    • Nagłówek pierwszego stopnia o treści „Blog Kulinarny”

Styl CSS witryny internetowej

Styl CSS zdefiniowany jest w całości w zewnętrznym pliku o nazwie styl.css (oprócz stylu inline dla sekcji) 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: krój czcionki Garamond, wyrównanie tekstu do środka
  • Dla bloku bocznego: kolor tła #3A3C3E, biały kolor czcionki, szerokość 10%, wysokość 600 px
  • Dla bloku głównego: szerokość 45%, wysokość 600 px, paski przewijania widoczne jedynie w przypadku przepełnienia bloku
  • Dla bloku sekcji: wymiary obrazu tła są automatycznie dostosowane do wymiaru bloku przez obcięcie lub rozciągnięcie obrazu, biały kolor czcionki, szerokość 45%, wysokość 600 px
  • Dla selektora nagłówka pierwszego stopnia: kolor tła RGB 211, 211, 211, przezroczystość 0.3, marginesy wewnętrzne górny i dolny 20 px pozostałe 0, marginesy zewnętrzne 0, rozmiar czcionki 2 em
  • Dla selektora nagłówka drugiego stopnia: rozmiar czcionki 2 em, tekst pisany kapitalikami
  • Dla selektora elementu listy: wyrównanie tekstu do lewej strony
  • Dla selektora odnośnika: kolor czcionki Gainsboro, rozmiar czcionki 120%, czcionka pochylona
  • Gdy kursor znajdzie się na odnośniku, jego kolor czcionki zmienia się na biały
UWAGA!
Styl CSS nagłówków pierwszego i drugiego stopnia, elementu listy i odnośnika 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 w języku polskim lub angielskim
  • Łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie przepisy
  • Jeśli do strony została przesłana wartość metodą GET, zmienna jest inicjowana tą wartością. W przeciwnym wypadku, zmienna jest inicjowana wartością 7. Dalej w opisie skryptów zmienna ta jest nazywana ID
  • Na końcu skrypt zamyka połączenie z bazą

Skrypt 1

  • Wysyła do bazy danych zapytanie 2, zmodyfikowane tak, że sprawdzana jest zmienna ID
  • Wyświetla wartość zwróconą polem rodzaj

Skrypt 2

  • Wysyła do bazy danych zapytanie 1, zmodyfikowane tak, że sprawdzana jest zmienna ID
  • Wyświetla:
    • Nagłówek drugiego stopnia z nazwą potrawy
    • Paragraf o treści „Trudność: <trudnosc>, Kalorie: <kalorie>”, pola <> są ustalone na podstawie wartości z bazy danych, a <trudnosc> przyjmuje wartości: „łatwe” dla trudnosc=1, „średnie” dla trudnosc=2, „trudne” dla trudnosc=3

Skrypt 3

  • Wysyła do bazy danych zapytanie 3, zmodyfikowane tak, że sprawdzana jest zmienna ID
  • Wyświetla oddzielone spacją nazwy wszystkich alergenów zwróconych z bazy

Skrypt 4

  • Wysyła do bazy danych zapytanie 4, zmodyfikowane tak, że sprawdzana jest zmienna ID
  • Wyświetla wartość pola przepis zwróconą zapytaniem
  • Pole plik pobrane zapytaniem w tym skrypcie powinno zostać użyte do ustawienia tła sekcji stylem CSS inline, o czym jest mowa w części „Cechy witryny”, „Zawartość bloku sekcji”

Ilustracja 5. Fragment strony z adresem wykorzystującym żądanie GET

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. The background-size CSS Property Values

length Sets the width and height of the background image
precentage Sets the width and height of the background image in percent of the parent element.
cover Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

Tabela 3. Metoda GET i odnośniki

Najpopularniejszy dla metody GET sposób przekazywania parametrów dla żądania to przesyłanie ich w adresie url do danego zasobu:

index.php?id=4

Tabela 4. 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: churros.jpg, eklerki.jpg, hamburger.jpg, import.png, jagniecina.jpg, kociołek.jpg, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, losos.jpg, nugetsy.jpg, pankejki.jpg, przeglądarka.txt, przepisy.php, salatka.jpg, separator.png, sernik.jpg, 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ą.