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

Oznaczenie: INF.03-09-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 remontujących mieszkania, 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 PlikiCz202509 zabezpieczone hasłem: Remon&Tow@nie+

Pobierz PlikiCz202509.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 zawiera cztery tabele przedstawione na Ilustracji 1. Tabela wykonanie łączy relacją wykonawców i zlecenia (jedno zlecenie może być wykonane przez wielu wykonawców). Tabela zlecenia opisuje zlecenia remontu przez klientów. Pole rodzaj przyjmuje wartości malowanie lub gipsowanie.

Ilustracja 1. Baza danych

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

  • Utwórz bazę danych o nazwie remonty, z zestawem polskich znaków (np. utf8_unicode_ci)
  • Z rozpakowanego archiwum zaimportuj tabele z pliku remonty.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 remonty. 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, kw5. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań
    • Zapytanie 1: wybierające jedynie średnią liczbę pracowników w firmach, minimalną liczbę pracowników i maksymalną liczbę pracowników. Kolumnom należy nadać nazwy (aliasy), kolejno: „średnia”, „najmniej”, „najwięcej”
    • Zapytanie 2: wybierające jedynie nazwy firm i liczbę pracowników dla firm, w których liczba pracowników wynosi 40 i więcej
    • Zapytanie 3: wybierające bez powtórzeń jedynie nazwy miast, z których pochodzą klienci, posortowane rosnąco według nazwy miasta
    • Zapytanie 4: wybierające jedynie imiona klientów oraz ceny ich zleceń tylko dla klientów z Poznania, którzy zamówili malowanie. Należy posłużyć się relacją
    • Zapytanie 5: wybierające jedynie imiona klientów oraz nazwy firm wykonujących dla nich zlecenia. Należy posłużyć się relacją

Grafika

Cechy grafiki cegla.jpg (Ilustracja 2):

  • Wycięta z pliku tapeta_lewa.png, zawiera całą cegłę z pierwszego od góry wiersza cegieł
  • Po wycięciu cegły należy ją przeskalować z zachowaniem proporcji do wysokości 60 px

Ilustracja 2. cegla.jpg

Cechy grafiki tapeta_prawa.png:

  • Grafika jest odbitą poziomo wersją grafiki tapeta_lewa.png

Witryna internetowa

Ilustracja 3. Wygląd witryny internetowej

Cechy witryny:

  • Składa się ze stron o nazwie zlecenia.php, kontakt.html
  • W pliku kontakt.html należy umieścić tekst „Strona w budowie”
  • Zapisana w języku HTML5
  • Zadeklarowany polski język zawartości witryny
  • Jawnie zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony „Remonty”
  • 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
  • Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści: „Malowanie i gipsowanie”
  • Zawartość bloku głównego: bloki nawigacyjny, dwie sekcje, boczny
  • Zawartość bloku nawigacyjnego:
    • Odnośnik do podstrony kontakt.html o treści „Kontakt”
    • Odnośnik do strony o adresie https://remonty.pl i treści „Partnerzy”. Odnośnik otwiera się w nowej karcie przeglądarki
  • Zawartość bloku bocznego:
    • Obraz tapeta_lewa.png z tekstem alternatywnym "usługi"
    • Poniżej obraz tapeta_prawa.png z tekstem alternatywnym "usługi"
    • Poniżej obraz tapeta_lewa.png z tekstem alternatywnym "usługi"
  • Zawartość sekcji lewej:
    • Nagłówek drugiego stopnia o treści „Dla klientów”
    • Formularz wysyłający dane do tego samego pliku metodą bezpieczną, z elementami
      • Etykieta dla pola edycyjnego o treści „Ilu co najmniej pracowników potrzebujesz?”
      • Poniżej pole edycyjne przeznaczone do wpisywania jedynie liczb całkowitych
      • Przycisk „Szukaj firm” wysyłający dane z formularza do skryptu 1
    • Efekt działania skryptu 1
  • Zawartość sekcji środkowej:
    • Nagłówek drugiego stopnia o treści „Dla wykonawców”
    • Formularz wysyłający dane do tego samego pliku metodą bezpieczną, z elementami
      • Lista rozwijana wypełniona skryptem 2
      • Poniżej pole opcji o treści „malowanie”, pole jest domyślnie zaznaczone
      • Poniżej pole opcji o treści „gipsowanie”
      • W jednym momencie można wybrać tylko jedno pole opcji
      • Przycisk „Szukaj klientów” wysyłający dane z formularza do skryptu 3
    • Lista punktowana (nieuporządkowana) wypełniona za pomocą skryptu 3
  • Zawartość stopki: paragraf o treści „Stronę wykonał: ”, dalej wstawiony numer zdającego. Tekst w paragrafie zapisany jest za pomocą znacznika semantycznego oznaczającego tekst ważny, formatowany domyślnie jako pogrubiony

Ilustracja 4. Układ bloków

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 Century Gothic, w przypadku braku Verdana
  • Dla selektora ciała strony: kolor tła #F0EAE2
  • Dla bloku nagłówkowego i stopki: tło, które stanowi obraz cegla.jpg, biały kolor czcionki, wysokość 60 px, wyrównanie tekstu do środka
  • Dla bloku nawigacyjnego: kolor tła #824555, szerokość 80%, wysokość 60 px
  • Dla bloku bocznego: szerokość 20%, wysokość 560 px, wyrównanie tekstu do prawej strony, w przypadku przepełnienia bloku zawartość poza blokiem jest ukryta
  • Jedynie dla obrazów w bloku bocznym: szerokość 100%
  • Dla obu sekcji: szerokość 40%, wysokość 500 px, paski przewijania tylko w przypadku przepełnienia bloku
  • Dla selektora nagłówka drugiego stopnia: wyrównanie tekstu do środka
  • Dla selektora odnośnika: kolor tekstu #F0EAE2, tylko lewy margines wewnętrzny 100 px, rozmiar czcionki 180%
  • Gdy kursor znajdzie się na odnośniku, jego kolor czcionki zmienia się na biały
UWAGA!
Styl CSS ciała strony, nagłówka drugiego stopnia 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 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 remonty
  • Na końcu działania zamykane jest połączenie z bazą

Skrypt 1 (Ilustracja 5), wykonywany tylko gdy wypełniono formularz:

  • Wysyła do bazy danych zapytanie 2, zmodyfikowane tak że w warunku podana jest wartość wysłana z formularza
  • Dla każdego zwróconego wiersza wypisuje paragraf o treści „<firma>, <liczbaPracownikow> pracowników”, gdzie pola <> są pobrane z bazy

Skrypt 2:

  • Wysyła do bazy danych zapytanie 3
  • Każde zwrócone zapytaniem miasto jest treścią opcji listy rozwijanej

Skrypt 3 (Ilustracja 6), wykonywany tylko gdy wypełniono formularz:

  • Wysyła do bazy danych zapytanie 4, zmodyfikowane tak że w warunku podane są nazwa miasta i rodzaj remontu wysłane z formularza
  • Każde zwrócone zapytaniem imię i cenę wypisuje w elementach listy punktowanej, oddzielone od siebie znakiem myślnika

Ilustracja 5. Wybrano 30 pracowników

Ilustracja 6. Wybrano malowanie we Wrocławiu

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: cegla.jpg, import.jpg, kontakt.html, kw1.png, kw2.png, kw3.png, kw4.png, kw5.png, kwerendy.txt, przeglądarka.txt, styl.css, tapeta_lewa.png, tapeta_prawa.png, zlecenia.php, 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ą.