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

Oznaczenie: INF.03-03-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 szkolnej, 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 PlikiCz202503 zabezpieczone hasłem: &&BiBlioTek@

Archiwum należy rozpakować.

Pobierz PlikiCz202503.7z

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 zawiera dwie tabele przedstawione na Ilustracji 1. Tabela uczniowie zawiera informacje o uczniach korzystających z biblioteki i wypożyczonych przez nich książkach. Tabela ksiazki zawiera informacje o imieniu i nazwisku autora książki, jej tytule, dacie dodania i numerze katalogowym woluminu.

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 tabelę z pliku baza.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 PNG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań
    • Zapytanie 1: wybierające jedynie nazwisko, imię, klasę i datę wypożyczenia dla uczniów dla których data wypożyczenia jest późniejsza niż 2020-03-02
    • Zapytanie 2: wybierające jedynie nazwisko, imię i datę wypożyczenia oraz odpowiadające im pola autor i kod książki wypożyczonej przez ucznia. Należy posłużyć się relacją
    • Zapytanie 3: usuwające wszystkie rekordy tabeli ksiazki, w których autorowi została przypisana wartość '0'
    • Zapytanie 4: wybierające losowo dokładnie pięć rekordów z całej tabeli ksiazki zawierających jedynie pola autor, tytul i kod

Witryna internetowa

Ilustracja 2. Wygląd witryny internetowej dla szerokich ekranów, kursor na wierszu tabeli

Cechy grafiki:

  • Grafiki ksiazka1, ksiazka2, ksiazka3 zapisane w formacie JPEG
  • Grafiki ksiazka1.jpg, ksiazka2.jpg, ksiazka3.jpg przekształcone poprzez wklejenie na pierwszy plan książek z pliku ksiazki.png na dole i górze obrazu, powinny one w całości zmieścić się w wymiarach obrazu, patrz Ilustracja 2
  • W grafice ksiazka1.jpg w niebieskim polu umieszczony tekst „HANS CHRISTIAN ANDERSEN Ropucha”
  • W grafice ksiazka2.jpg w zielonym polu umieszczony tekst „MARIA KONOPNICKA Przygoda z lalką”
  • W grafice ksiazka3.jpg w fioletowym polu umieszczony tekst „IGNACY KRASICKI Przyjaciel”
  • Tekst zapisany jest czcionką szeryfową, tytuł jest dodatkowo pogrubiony

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 SZKOLNA” widoczny na karcie przeglądarki
  • Arkusz stylów w pliku o nazwie styles.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
  • Teksty zamieszczone na stronie można skopiować z pliku teksty.txt z rozpakowanego archiwum
  • Zawartość bloku nagłówkowego: nagłówek drugiego stopnia o treści: „STRONA BIBLIOTEKI SZKOLNEJ WIEDZAMIN”
  • Zawartość sekcji:
    • Nagłówek trzeciego stopnia o treści: „Nasze dzisiejsze propozycje:”
    • Tabela o trzech kolumnach, w której pierwszy wiersz zawiera komórki nagłówkowe o treści: Autor, Tytuł, Katalog. Tabela jest wypełniona przez skrypt
  • Zawartość bloku głównego: trzy bloki artykułu
  • W każdym bloku artykułu znajdują się:
    • Grafika, kolejno ksiazka1.jpg, ksiazka2.jpg, ksiazka3.jpg z tekstami alternatywnymi o treści „okładka książki”
    • Paragraf zawierający odpowiedni tekst streszczenia – patrz Ilustracja 2 oraz plik teksty.txt
  • Zawartość stopki: napis „Stronę wykonał: ”, dalej wstawiony numer zdającego

Ilustracja 3. Układ bloków

Ilustracja 4. Fragment widoku trzech bloków sekcji dolnej na mniejszych ekranach

Styl CSS witryny internetowej

Styl CSS zdefiniowany jest w całości w zewnętrznym pliku o nazwie styles.css. W Tabeli 2 zawarto pomoc dla niektórych właściwości CSS. Cechy formatowania CSS działające na stronie:

  • Domyślnie dla wszystkich selektorów: krój czcionki: Roboto, w przypadku jego braku Arial, sans-serif, wyrównanie tekstu do środka
  • Dla selektora ciała strony: kolor tła LightCyan
  • Dla bloku nagłówkowego i stopki: kolor tła SteelBlue, biały kolor czcionki, marginesy wewnętrzne 10 px
  • Dla wszystkich bloków artykułu: margines wewnętrzny górny 40 px, marginesy zewnętrzne 1% oraz ułożenie:
    • Gdy szerokość ekranu wynosi 800 px i więcej, trzy bloki są wyświetlane obok siebie, ich szerokość wynosi 30%
    • Gdy szerokość ekranu jest mniejsza niż 800 px szerokość każdego z trzech bloków wynosi 98% (są wyświetlane jeden pod drugim) zgodnie z Ilustracją 4
  • Dodatkowo dla pierwszego artykułu: kolor tła DodgerBlue
  • Dodatkowo dla drugiego artykułu: kolor tła LimeGreen
  • Dodatkowo dla trzeciego artykułu: kolor tła DarkOrchid
  • Dla selektora obrazu: szerokość 70%
  • Dla selektora paragrafu: marginesy wewnętrzne 20 px
  • Dla selektora tabeli: wyśrodkowanie tabeli, szerokość 70%, obramowanie linią ciągłą o kolorze SteelBlue i szerokości 1 px
  • W momencie gdy kursor myszy znajdzie się na wierszu tabeli, jego kolor tła zmienia się na SteelBlue, a kolor czcionki na biały
UWAGA!
Styl CSS ciała strony, obrazu, paragrafu i 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 skryptu:

  • Napisany w języku PHP
  • Należy stosować znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim
  • Łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie biblioteka
  • Wysyła do bazy danych zapytanie 4
  • W każdym wierszu tabeli, w odpowiednich komórkach, wyświetlane są zwrócone zapytaniem kolejne wiersze z bazy
  • Na końcu działania skrypt zamyka 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. Wybrane właściwości CSS

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: biblioteka.php, import.png, ksiazka1.jpg, ksiazka2.jpg, ksiazka3.jpg, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, przeglądarka.txt, styles.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ą.