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

Oznaczenie: INF.03-07-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 wycieczek turystycznych, 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 PlikiCz202507 zabezpieczone hasłem: #TurysTyk@7!

Pobierz PlikiCz202507.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 połączone relacją 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 wyprawy, z zestawem polskich znaków (np. utf8_polish_ci)
  • Z rozpakowanego archiwum zaimportuj tabele z pliku wyprawy.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 wyprawy. 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 nazwy wszystkich miejscowości posortowane rosnąco
    • Zapytanie 2: wybierające jedynie cenę wycieczki do Malborka
    • Zapytanie 3: wybierające jedynie nazwę, cenę i link obrazu z tabeli miejsca dla wierszy, w których link obrazu rozpoczyna się od 0 (zero)
    • Zapytanie 4: wybierające jedynie nazwy wszystkich miejsc i odpowiadające im obliczone średnie liczby osób dorosłych, zgrupowane według nazw miejsc. Średnia liczba osób jest zaokrąglona do liczby całkowitej. Należy posłużyć się relacją
    • Zapytanie 5: tworzące tabelę klienci z kolumnami:
      • id_klienta jako liczba całkowita dodatnia, klucz podstawowy, autoinkrementowany, nie może przyjmować wartości NULL
      • imie typu tekstowego o długości do 20 znaków
      • nazwisko typu tekstowego o długości do 40 znaków
      • data_ur typu data

Witryna internetowa

Ilustracja 2. Wygląd strony głównej index.php, kursor na trzecim bloku

Cechy grafiki 02.jpg:

  • Grafika przeskalowana z zachowaniem proporcji do szerokości 200 px
  • Grafika odbita pionowo

Cechy witryny:

  • Składa się ze strony głównej index.php oraz podstron wczasy.html, wycieczki.html, allinclusive.html. Należy utworzyć trzy pliki podstron i zapisać w nich „Strona w trakcie budowy”

Cechy strony 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 „Biuro turystyczne”
  • 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 nawigacyjnego:
    • Lista punktowana zawierająca trzy elementy:
      • Odnośnik do podstrony wczasy.html o treści „Wczasy”
      • Odnośnik do podstrony wycieczki.html o treści „Wycieczki”
      • Odnośnik do podstrony allinclusive.html o treści „All inclusive”
  • Zawartość bloku głównego: blok boczny i sekcja
  • Zawartość bloku bocznego:
    • Nagłówek trzeciego stopnia o treści: „Twój cel wyprawy”
    • Formularz zgodny z Ilustracją 2, wysyłający dane do tego samego pliku metodą bezpieczną, z zawartością:
      • Etykieta „Miejsce wycieczki” powiązana z listą rozwijaną
      • Lista rozwijana wypełniona przez skrypt 1
      • Etykieta „Ile dorosłych?” powiązana z pierwszym polem edycyjnym
      • Pole edycyjne typu liczbowego
      • Etykieta „Ile dzieci?” powiązana z drugim polem edycyjnym
      • Pole edycyjne typu liczbowego
      • Etykieta „Termin” powiązana z trzecim polem edycyjnym
      • Pole edycyjne typu data
      • Przycisk „Symulacja ceny” wysyłający dane z formularza do skryptu 2
    • Nagłówek czwartego stopnia o treści „Koszt wycieczki”
    • Efekt działania skryptu 2
  • Zawartość sekcji:
    • Nagłówek trzeciego stopnia o treści: „Wycieczki”
    • Efekt działania skryptu 3
  • Zawartość stopki: paragraf o treści „Autor: ”, 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:

  • Domyślnie dla wszystkich selektorów: krój czcionki Comic Sans MS, w przypadku braku sans-serif, wyrównanie tekstu do środka
  • Dla bloku nawigacyjnego i stopki: kolor tła #00838F, kolor czcionki #B2DFDB, marginesy wewnętrzne 10 px
  • Wspólne dla bloku bocznego i sekcji: szerokość 50%, wysokość 600 px, paski przewijania pojawiające się tylko w przypadku przepełnienia bloku
  • Dodatkowo dla bloku bocznego kolor tła: #B2DFDB
  • Dla klasy wycieczka, przypisanej do bloków tworzonych przez skrypt 3: kolor tła #00838F z przezroczystością 0.7, wysokość 150 px, marginesy zewnętrzne: górny i dolny 10 px, boczne 100 px, zaokrąglenie rogów 30 px
  • Gdy kursor znajdzie się na bloku z przypisaną klasą wycieczka, przezroczystość wynosi 1
  • Dla selektora obrazu: opływanie po jego lewej stronie (obraz jest po prawej stronie), zaokrąglenie rogów 30 px, marginesy zewnętrzne 7 px
  • Dla selektora elementu listy: sposób wyświetlania liniowo-blokowy, bez punktorów
  • Dla selektora odnośnika: kolor czcionki #B2DFDB, bez podkreślenia, jedynie margines zewnętrzny lewy 50 px
  • Gdy kursor znajdzie się na odnośniku, jego kolor czcionki zmienia się na biały i dodawane jest podkreślenie
UWAGA!
Styl CSS obrazu, 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 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 wyprawy
  • Na końcu skrypt zamyka połączenie z bazą

Skrypt 1

  • Wysyła do bazy danych zapytanie 1
  • Każde zwrócone zapytaniem miejsce wycieczki wypisuje jako element listy rozwijanej

Skrypt 2

  • Sprawdza, czy z formularza zostały wysłane dane, jeżeli tak, to:
    • Wysyła do bazy danych zapytanie 2, zmodyfikowane w ten sposób, że sprawdzane jest miejsce wycieczki wysłane z formularza
    • Wylicza wartość wycieczki na podstawie wysłanej z formularza liczby dorosłych i dzieci oraz ceny zwróconej zapytaniem, przy czym dzieci płacą połowę ceny wycieczki
    • Wyświetla paragraf o treści „W dniu: <termin>”, gdzie pole <> zostało wysłane z formularza
    • Wyświetla paragraf o treści „<wartość> złotych”, gdzie pole <> jest wyliczoną wartością wycieczki

Ilustracja 4. Formularz

Skrypt 3

  • Wysyła do bazy danych zapytanie 3
  • Dla każdego zwróconego zapytaniem wiersza tworzy blok z przypisaną klasą CSS wycieczka zawierający:
    • Obraz o nazwie zwróconej zapytaniem oraz tekście alternatywnym „zdjęcie z wycieczki”
    • Nagłówek drugiego stopnia z nazwą miejsca zwróconą zapytaniem
    • Paragraf z ceną zwróconą zapytaniem

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 display CSS Property Values

inline Displays an element as an inline element (like <span>). Any height and width properties will have no effect. This is default.
block Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values

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: grafiki 01.jpg ÷ 21.jpg, allinclusive.html, import.png, index.php, kw1.png, kw2.png, kw3.png, kw4.png, kw5.png, kwerendy.txt, przeglądarka.txt, styl.css, wczasy.html, wycieczki.html, 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ą.