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

Oznaczenie: ozn   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 szkoleniowego, 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 PlikiCz202510 zabezpieczone hasłem: *SzkoLenia^

Pobierz PlikiCz202510.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 trzy 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 szkolenia, z zestawem polskich znaków (np. utf8_polish_ci)
  • Z rozpakowanego archiwum zaimportuj tabele z pliku szkolimy.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 szkolenia. 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 kod, nazwę i cenę kursów posortowane rosnąco według ceny
    • Zapytanie 2: wybierające jedynie nazwy wszystkich kursów
    • Zapytanie 3: wstawiające rekord do tabeli uczestnicy o danych: Tadeusz Wysocki, wiek 36 lat. Klucz główny nadawany automatycznie
    • Zapytanie 4: tworzące zestawienie, na którym widoczne są nazwy wszystkich kursów oraz liczby osób zapisanych na te kursy. Nazwa kolumny z liczbą osób (alias): „Zapisanych”

Witryna internetowa

Ilustracja 2. Wygląd witryny internetowej

Cechy grafiki 1.jpg:

  • Przeskalowana z zachowaniem proporcji do szerokości 150 px

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 „Szkolenia i kursy”
  • 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:
    • Nagłówek pierwszego stopnia o treści: „SZKOLENIA”
  • Zawartość bloku głównego: sekcja lewa i sekcja prawa
  • Zawartość sekcji lewej:
    • Tabela o trzech kolumnach. Pierwszy wiersz zawiera komórki nagłówkowe: Kurs, Nazwa, Cena. Tabela wypełniona jest przez skrypt 1
  • Zawartość sekcji prawej:
    • Nagłówek drugiego stopnia o treści: „Zapisy na kursy”
    • Formularz zgodny z Ilustracją 2, wysyłający dane do tego samego pliku metodą bezpieczną z polami:
      • Etykieta dla pierwszego pola edycyjnego: „Imię”
      • Pole edycyjne
      • Etykieta dla drugiego pola edycyjnego: „Nazwisko”
      • Pole edycyjne
      • Etykieta dla trzeciego pola edycyjnego: „Wiek”
      • Pole edycyjne typu numerycznego
      • Etykieta dla listy rozwijanej: „Rodzaj kursu”
      • Lista rozwijana wypełniona przez skrypt 2
      • Przycisk „Dodaj dane” wysyłający dane z formularza do skryptu 3
    • Efekt działania skryptu 3
  • Zawartość stopki: paragraf o treści „Stronę wykonał: ”, dalej wstawiony numer zdającego

Ilustracja 3. Układ bloków

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:

  • Dla selektora ciała strony: krój czcionki Century Gothic, w przypadku braku sans-serif, wyrównanie tekstu do środka, kolor tła #FCE4EC
  • Dla bloku nagłówkowego i stopki: kolor tła #880E4F, biały kolor czcionki, marginesy wewnętrzne 10 px, odległość między literami 20 px
  • Dla lewej sekcji: szerokość 50%, wysokość 600 px, paski przewijania tylko w momencie, gdy zawartość nie mieści się w bloku
  • Dla prawej sekcji: kolor tła #880E4F, biały kolor czcionki, szerokość 40%, wysokość 500 px, marginesy zewnętrzne 35 px, cień bloku o przesunięciu 10 px w obu osiach, rozmyciu 15 px i kolorze DimGray
  • Dla selektora tabeli: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 70%
  • Dla wszystkich kontrolek (pola edycyjne, lista rozwijana, przycisk) marginesy zewnętrzne 5 px, szerokość 70%
  • Gdy kursor znajdzie się na wierszu tabeli jego kolor tła zmienia się na #F8BBD0
UWAGA!
Styl CSS ciała strony 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 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 szkolenia
  • Na końcu zamykane jest połączenie z bazą

Skrypt 1

  • Wysyła do bazy danych zapytanie 1
  • Dla każdego zwróconego przez bazę rekordu, w kolejnych wierszach tabeli wstawiane są:
    • do pierwszej komórki: obraz o nazwie utworzonej ze zwróconego przez bazę kodu i rozszerzenia .jpg z tekstem alternatywnym: „kurs” (dla kodu 1 jest to 1.jpg)
    • do kolejnych komórek: zwrócone z bazy nazwa i cena kursu

Skrypt 2 (Ilustracja 4)

  • Wysyła do bazy danych zapytanie 2
  • Wszystkie zwrócone nazwy kursów są zapisywane jako elementy listy rozwijanej

Skrypt 3 (Ilustracja 5)

  • Wykonywany po kliknięciu przycisku „Dodaj dane”
  • Jeżeli imię, nazwisko i wiek zostały wprowadzone w formularzu:
    • Wysyła do bazy danych zapytanie 3, zmodyfikowane tak, że dane wysłane z formularza są wstawione do zapytania
    • Wyświetla paragraf o treści „Dane uczestnika <imię> <nazwisko> zostały dodane”, gdzie pola <> oznaczają wartości wysłane z formularza
  • W przeciwnym wypadku wyświetla paragraf „Wprowadź wszystkie dane”

Ilustracja 4. Elementy listy rozwijanej

Ilustracja 5. Zatwierdzony formularz

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

Właściwość Opis

box-shadow: h-offset v-offset blur spread color inset;

The inset parameter changes the shadow from an outer shadow (outset) to an inner shadow.

 cień bloku
text-shadow: h-shadow v-shadow blur-radius color; cień tekstu

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: obrazy 1.jpg ÷ 8.jpg, import.png, index.php, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, 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ą.