Arkusz INF.03 : 2024 - czerwiec - zad. 01 (php)

Oznaczenie: INF.03-01-24.06-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

UWAGA!
Folder z rezultatami pracy oraz płytę należy opisać numerem zdającego, którym został podpisany arkusz, czyli numerem PESEL lub w przypadku jego braku numerem paszportu. Dalej w zadaniu numer ten jest nazwany numerem zdającego.

Wykonaj aplikację internetową o motocyklach, 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 ZIP o nazwie PlikiCz202401 zabezpieczone hasłem: ^moTocyKle^

Pobierz PlikiCz202401.zip

Archiwum należy rozpakować.

Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego, którym został podpisany arkusz. 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 jest zgodna ze strukturą przedstawioną na Obrazie 1. Tabele są połączone relacją 1..n.

Obraz 1. Baza danych

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

  • Utwórz bazę danych o nazwie motory, z zestawem polskich znaków (np. utf8_unicode_ci)
  • Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij 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 motory. 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 nazwy wycieczek, których początek jest w Muszynie, Wieliczce
    • Zapytanie 2: wybierające jedynie pola nazwa, opis i poczatek z tabeli wycieczki oraz odpowiadające im pole zrodlo z tabeli zdjecia. Należy posłużyć się relacją
    • Zapytanie 3: zliczające liczbę wycieczek wpisanych do tabeli wycieczki
    • Zapytanie 4: modyfikujące strukturę tabeli wycieczki, poprzez dodanie kolumny ocena typu całkowitego

Witryna internetowa

Obraz 2. Witryna internetowa. Kursor znajduje się na trzecim elemencie definicji

Przygotowanie grafiki:

  • Plik droga1.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego szerokość wynosiła dokładnie 640 px

Cechy witryny:

  • Składa się ze strony o nazwie motor.php zapisanej w języku HTML5
  • Ustawiony język zawartości strony na polski
  • Jawnie zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Motocykle”
  • Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
  • Umieszczony poza blokami obraz motor.png o tekście alternatywnym „motocykl”
  • Podział strony na bloki: na górze baner, poniżej trzy bloki: lewy, i dwa prawe, na dole blok stopki. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z Obrazem 2
  • Zawartość banera: nagłówek pierwszego stopnia o treści „Motocykle - moja pasja”
  • Zawartość bloku lewego:
    • Nagłówek drugiego stopnia o treści: „Gdzie pojechać?”
    • Lista definicji (Description List) wypełniona przez skrypt 1
  • Zawartość pierwszego bloku prawego:
    • Nagłówek drugiego stopnia o treści: „Co kupić?”
    • Lista numerowana (uporządkowana) o 5 elementach: „Honda CBR125R”, „Yamaha YBR125”, „Honda VFR800i”, „Honda CBR1100XX”, „BMW R1200GS LC”
  • Zawartość drugiego bloku prawego:
    • Nagłówek drugiego stopnia o treści: „Statystyki”
    • paragraf (akapit) o treści „Wpisanych wycieczek: ”, dalej efekt działania skryptu 2
    • paragraf o treści „Użytkowników forum: 200”
    • paragraf o treści „Przesłanych zdjęć: 1300”
  • Zawartość stopki: akapit o treści „Stronę wykonał: ”, dalej wstawiony numer zdającego

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ślne formatowanie wszystkich selektorów: krój czcionki Verdana
  • Jedynie dla obrazu motor.png: wyświetlanie blokowe, pozycjonowanie na stronie: element przesunięty 15% od lewej strony względem swojego rodzica, szerokość 70%, element jest zakryty przez bloki strony (znajduje się za blokami strony)
  • Dla banera: kolor tła RGB z wartościami 60, 120, 160 i przezroczystością 0.9; biały kolor czcionki, rozmiar czcionki 150%, marginesy wewnętrzne 10 px
  • Dla bloku lewego: kolor tła RGB z wartościami 0, 100, 0 i przezroczystością 0.6; marginesy zewnętrzne 2%, szerokość 75%, wysokość 600 px, rozmiar czcionki 120%, paski przewijania widoczne tylko gdy zawartość nie mieści się w bloku, cień bloku o przesunięciu 10 px w obu osiach, rozmyciu 7 px i kolorze DimGray
  • Wspólne dla bloków prawych: kolor tła RGB z wartościami 0, 100, 0 i przezroczystością 0.6; marginesy zewnętrzne 1%, szerokość 15%, wysokość 300 px, cień bloku o przesunięciu 10 px w obu osiach, rozmyciu 7 px i kolorze DimGray
  • Dla stopki: kolor tła RGB z wartościami 60, 120, 160 i przezroczystością 0.9; biały kolor czcionki, marginesy wewnętrzne 10 px
  • Dla selektora nagłówka pierwszego i drugiego stopnia: wyrównanie tekstu do środka, czcionka pochylona
  • Wspólne dla odnośnika i terminu w liście definicji: biały kolor czcionki
  • Dla elementu definicji w liście: marginesy wewnętrzne 1%
  • Gdy kursor znajdzie się na elemencie definicji w liście, jego kolor tła zmienia się na LightGreen (widoczne na Obrazie 2)
UWAGA!
Styl CSS nagłówka pierwszego i drugiego stopnia należy zdefiniować wyłącznie przy pomocy selektora dla danego znacznika. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.

Skrypt połączenia z bazą

W Tabeli 1 podano wybór funkcji PHP do obsługi bazy danych. Wymagania dotyczące skryptów:

  • Napisane w języku PHP
  • Należy stosować znaczące nazewnictwo wszystkich zmiennych lub funkcji
  • Skrypty łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie motory
  • Skrypt 1
    • Wysyła do bazy danych zapytanie 2
    • Zwrócone zapytaniem wartości są wyświetlane jako poszczególne terminy i elementy definicji listy według wzoru:
      • Termin listy: „<nazwa>, rozpoczyna się w <poczatek>, ”, następnie odnośnik o treści „zobacz zdjęcie”, prowadzący do zdjęcia, którego nazwa została zwrócona zapytaniem
      • Element definicji listy: zwrócone zapytaniem pole opis
  • Skrypt 2
    • Wysyła do bazy danych zapytanie 3
    • Wartość zwrócona zapytaniem jest wyświetlana w paragrafie po słowach: „Wpisanych wycieczek: ”
  • Na końcu jest zamykane połączenie z serwerem

Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQLi 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

Tabela 2. Pozycjonowanie elementów na stronie za pomocą właściwości position języka CSS

static normalne (domyślne) pozycjonowanie elementu
relative pozwala przesunąć element w inne miejsce w stosunku do położenia pierwotnego
absolute pozwala przesunąć element w inne miejsce względem rodzica tego elementu (względem bloku lub względem strony)
fixed pozwala przesunąć element w inne miejsce zawsze względem krawędzi okna przeglądarki
parametrami przesunięcia są własności: left, top, right, bottom
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.
UWAGA!
Nagraj płytę z rezultatami pracy. W folderze z numerem zdającego, powinny znajdować się pliki: droga1.jpg, droga2.jpg, droga3.jpg, droga4.jpg, droga5.jpg, import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, motor.php, motor.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 będzie podlegać 5 rezultatów:

  • operacje na bazie danych
  • zawartość witryny internetowej
  • działanie witryny internetowej
  • styl CSS witryny internetowej
  • skrypt połączenia z bazą.