Arkusz INF.03 : 2025 - czerwiec - zad. 06 (php)

Oznaczenie: INF.03-06-25.06-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 dla biblioteki, 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 7z o nazwie PlikiCz202506 zabezpieczone hasłem: BibLio#tek@

Pobierz PlikiCz202506.7z

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 przedstawiona na Ilustracji 1 jest uproszczoną na potrzeby zadania wersją modelu bibliotecznego. Zawiera dwie tabele połączone relacją. Pole gatunek przyjmuje wartości: „liryka”, „epika”, „dramat”.

Ilustracja 1. Baza danych

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

  • Utwórz bazę danych o nazwie biblioteka, z zestawem polskich znaków (np. utf8_unicode_ci)
  • Z rozpakowanego archiwum zaimportuj tabele z pliku biblio.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 biblioteka. 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, kw5. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań
    • Zapytanie 1: wybierające jedynie id i tytuły książek z gatunku liryka
    • Zapytanie 2: wybierające pierwsze 15 rekordów, jedynie tytuł książki oraz odpowiadające mu id czytelnika i data oddania posortowane rosnąco według daty oddania. Należy posłużyć się relacją
    • Zapytanie 3: modyfikujące strukturę tabeli ksiazka, poprzez dodanie nowej kolumny o nazwie rezerwacja typu TINYINT, o długości 1 Bajta, która przyjmuje wartość domyślną 0 (oznacza, że książka nie jest zarezerwowana)
    • Zapytanie 4: aktualizujące pole rezerwacja na wartość 1 dla książki, której id=1
    • Zapytanie 5: wybierające jedynie tytuł książki, której id=4

Witryna internetowa

Ilustracja 2. Witryna internetowa na ekranie o szerokości powyżej 800 px oraz na mniejszym

Cechy grafiki obraz.jpg:

  • Przeskalowana z zachowaniem proporcji do wysokości 200 px
  • Przezroczystość zamiast białego tła
  • Zapisana pod tą samą nazwą, w formacie PNG

Cechy witryny:

  • Składa się ze strony o nazwie biblioteka.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 „Biblioteka miejska”
  • 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
  • Zawartość bloku nagłówkowego: efekt działania skryptu 1
  • Zawartość pierwszego bloku sekcji:
    • Nagłówek drugiego stopnia o treści „Liryka”
    • Formularz wysyłający dane metodą bezpieczną do tego samego pliku, z elementami:
      • Lista rozwijana wypełniona skryptem 2
      • Przycisk „Rezerwuj” wysyłający dane z formularza do skryptu 3
    • Efekt działania skryptu 3
  • Zawartość drugiego bloku sekcji:
    • Nagłówek drugiego stopnia o treści „Epika”
    • Formularz wysyłający dane metodą bezpieczną do tego samego pliku, z elementami:
      • Lista rozwijana wypełniona zmodyfikowanym skryptem 2 (gatunek to „epika”)
      • Przycisk „Rezerwuj” wysyłający dane z formularza do skryptu 3
  • Zawartość trzeciego bloku sekcji:
    • Nagłówek drugiego stopnia o treści „Dramat”
    • Formularz wysyłający dane metodą bezpieczną do tego samego pliku, z elementami:
      • Lista rozwijana wypełniona zmodyfikowanym skryptem 2 (gatunek to „dramat”)
      • Przycisk „Rezerwuj” wysyłający dane z formularza do skryptu 3
  • Zawartość czwartego bloku sekcji:
    • Nagłówek drugiego stopnia o treści „Zaległe książki”
    • Lista punktowana (nieuporządkowana) wypełniona skryptem 4
  • Zawartość stopki: paragraf o treści „Autor: ”, dalej wstawiony numer zdającego. Tekst w paragrafie jest zapisany za pomocą znacznika semantycznego oznaczającego tekst ważny, formatowany domyślnie jako pogrubiony

Ilustracja 3. Układ bloków dla ekranów powyżej 800 px

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: krój czcionki Cambria
  • Dla selektora ciała strony: kolor tła MistyRose
  • Dla bloku nagłówkowego i stopki: wysokość 200 px, wyrównanie tekstu do środka, w przypadku przepełnienia bloku zawartość poza blokiem jest ukrywana
  • Dla bloków sekcji: kolor tła Plum, wysokość 400 px, marginesy zewnętrzne 5 px, cień bloku o przesunięciu 4 px w obu osiach, rozmyciu 10 px i kolorze DimGray, w przypadku przepełnienia bloku zawartość poza blokiem jest ukrywana
  • W przypadku ekranów o szerokości do 800 px szerokość bloków sekcji 100%, powyżej 800 px szerokość bloków sekcji 22%
  • Dla selektora nagłówka drugiego stopnia: wyrównanie tekstu do środka
  • Gdy kursor znajdzie się na dowolnym przycisku jego kolor tła zmienia się na #505050 a kolor czcionki na biały
UWAGA!
Styl CSS ciała strony i nagłówka drugiego stopnia 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 biblioteka
  • Na końcu zamykane jest połączenie z serwerem

Skrypt 1

  • Wyświetla 20 razy grafikę obraz.png. Należy zastosować instrukcję iteracyjną (pętlę)

Skrypt 2 w sekcji „Liryka” (Ilustracja 4)

  • Wysyła do bazy danych zapytanie 1
  • Ze zwróconych zapytaniem wierszy generuje kolejne opcje listy rozwijanej w ten sposób, że tytuł jest treścią opcji, a id jest przypisane do atrybutu value

Ilustracja 4. Lista rozwijana

Skrypt 2 do sekcji „Epika” należy powielić i dostosować (Ilustracja 5): działa on na zmodyfikowanym zapytaniu 1, tak że wypełnia listę rozwijaną książkami z gatunku „epika”

Skrypt 2 do sekcji „Dramat” należy powielić i dostosować: działa on na zmodyfikowanym zapytaniu 1, tak że wypełnia listę rozwijaną książkami z gatunku „dramat”

Skrypt 3 (Ilustracja 5), jeżeli dokonano wyboru w liście rozwijanej liryki wykonuje czynności:

  • Wysyła do bazy danych zapytanie 5, zmodyfikowane w ten sposób, że w klauzuli WHERE podana jest wartość id wysłana przez formularz
  • Wyświetla w paragrafie tekst „Książka <tytuł> została zarezerwowana”, gdzie pole <> zawiera wartość wybraną z bazy
  • Wysyła do bazy danych zmodyfikowane zapytanie 4, w ten sposób że w klauzuli WHERE podana jest wartość id wysłana przez formularz

Skrypt 3 do sekcji „Epika” należy powielić i dostosować: pobiera on dane wysłane formularzem z sekcji „Epika”

Skrypt 3 do sekcji „Dramat” należy powielić i dostosować: pobiera on dane wysłane formularzem z sekcji „Dramat”

Należy zwrócić uwagę na to, że wyświetlany w wyniku wykonania formularza paragraf powinien pojawić się tylko w odpowiedniej sekcji

Skrypt 4

  • Wysyła do bazy danych zapytanie 2
  • Każdy zwrócony zapytaniem wiersz wyświetla w elemencie listy kolejno: tytuł, id czytelnika i datę oddania oddzielone od siebie spacją

Ilustracja 5. Działanie skryptu w bloku Liryka nie powoduje wyświetlenia paragrafu w innych blokach

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. Wybrane właściwości CSS

Tabela 3. Przykład stylu CSS wykorzystującego regułę @media

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: biblioteka.php, import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kw5.jpg, kwerendy.txt, obraz.png, 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ą.