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

Oznaczenie: INF.03-08-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 hobbystycznego, 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 PlikiCz202508 zabezpieczone hasłem: SmoKi-Swi@ta#

Pobierz PlikiCz202508.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 tabele przedstawione na Ilustracji 1. Tabele są ze sobą w relacji.

Ilustracja 1. Baza danych

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

  • Utwórz bazę danych o nazwie smoki, z zestawem polskich znaków (np. utf8_polish_ci)
  • Z rozpakowanego archiwum zaimportuj tabele z pliku bazasmoki.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 smoki. 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 nazwę, długość i szerokość smoka, dla smoków z Polski
    • Zapytanie 2: wybierające niepowtarzające się kraje pochodzenia smoków, posortowane rosnąco według kraju pochodzenia
    • Zapytanie 3: wybierające jedynie rok z tabeli parada i obliczającą odpowiadającą mu średnią wartość długości z tabeli smok, nazwa kolumny (alias) „Średnia długość” tylko dla lat po 2005 roku. Należy posłużyć się relacją i zgrupować rekordy względem roku
    • Zapytanie 4: zmieniające strukturę tabeli parada, przez wstawienie nowej kolumny lokalizacja typu napisowego o maksymalnej długości 100 znaków

Witryna internetowa

Ilustracja 2. Wygląd witryny internetowej

Cechy grafiki smok1.jpg:

  • Przeskalowana z zachowaniem proporcji do wysokości 300 px

Cechy witryny:

  • Składa się ze strony o nazwie smoki.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 „Smoki”
  • 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 drugiego stopnia o treści „Poznaj smoki!”
  • Zawartość bloku nawigacyjnego to trzy bloki:
    • Blok 1 z treścią „Baza”, gdy zostanie kliknięty jest wywoływana funkcja JavaScript
    • Blok 2 z treścią „Opisy”, gdy zostanie kliknięty jest wywoływana funkcja JavaScript
    • Blok 3 z treścią „Galeria”, gdy zostanie kliknięty jest wywoływana funkcja JavaScript
  • Zawartość bloku głównego to trzy sekcje (w jednym momencie jest widoczna tylko jedna sekcja):
    • Sekcja 1:
      • Nagłówek trzeciego stopnia o treści „Baza Smoków”
      • Formularz wysyłający dane do tego samego pliku metodą bezpieczną, z elementami:
        • Lista rozwijana wypełniona przez skrypt 1
        • Przycisk „Szukaj”, wysyłający dane z formularza do skryptu 2
      • Tabela o trzech kolumnach. Pierwszy wiersz jest wierszem z komórkami nagłówkowymi: „Nazwa”, „Długość”, „Szerokość”. Kolejne wiersze są wypełnione przez skrypt 2
    • Sekcja 2:
      • Nagłówek trzeciego stopnia o treści „Opisy smoków”
      • Lista definicji wypełniona danymi, które należy skopiować z pliku opis.txt. Nazwa smoka jest terminem, a pozostałe dane – opisem definicji, zgodnie z Ilustracją 5
    • Sekcja 3:
      • Nagłówek trzeciego stopnia o treści „Galeria”
      • Obraz smok1.jpg z tekstem alternatywnym „Smok czerwony”
      • Obraz smok2.jpg z tekstem alternatywnym „Smok wielki”
      • Obraz smok3.jpg z tekstem alternatywnym „Skrzydlaty łaciaty”
  • Zawartość stopki: paragraf o treści „Stronę opracował: ”, 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 3 zawarto pomoc do niektórych właściwości CSS. Cechy formatowania CSS działające na stronie:

  • Domyślnie dla wszystkich selektorów: wyrównanie tekstu do środka, krój czcionki Georgia
  • Wspólne dla bloku nagłówkowego i stopki: kolor tła Tomato, kolor czcionki MistyRose, marginesy wewnętrzne 10 px
  • Dla bloku nawigacyjnego: szerokość 20%
  • Dla bloku 1, bloku 2, bloku 3: kolor tła #FFAEA5, wysokość 170 px, rozmiar czcionki 200%
  • Jedynie dla bloku 1: kolor tła MistyRose
  • Dla bloku głównego: kolor tła MistyRose, szerokość 80%, wysokość 510 px, paski przewijania widoczne tylko w przypadku przepełnienia zawartością
  • Jedynie dla sekcji 2 i sekcji 3: sekcje są usunięte z DOM (patrz Tabela 3)
  • Dla selektora tabeli: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 60%, obramowanie linią kreskowaną o szerokości 1 px i kolorze Indigo
  • Dla listy rozwijanej i przycisku: marginesy zewnętrzne 20 px
  • Dla selektora terminu w liście definicji (dt): czcionka pogrubiona i pochylona
  • W momencie gdy kursor znajdzie się na terminie w liście definicji jego rozmiar czcionki zmienia się na 180%
UWAGA!
Styl CSS tabeli i terminu w liście definicji należy zdefiniować wyłącznie przy pomocy selektora tego znacznika. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.

Skrypty PHP

W Tabelach 1 i 2 zamieszczono pomoc dla języków PHP i JavaScript. Wymagania dotyczące skryptów:

  • Skrypty 1 i 2 są 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 smoki
  • na końcu działania skrypt zamyka połączenie z serwerem

Skrypt 1

  • Wysyła do bazy danych zapytanie 2
  • Wszystkie zwrócone zapytaniem wiersze są zapisywane jako opcje listy rozwijanej, zgodnie z Ilustracją 4

Skrypt 2, wykonywany tylko, gdy formularz wysłał dane:

  • Wysyła do bazy danych zmodyfikowane zapytanie 1, tak że w warunku umieszczony jest kraj pochodzenia wysłany z formularza
  • Każdy zwrócony zapytaniem wiersz jest zapisywany jako kolejny wiersz tabeli, zgodnie z Ilustracją 4

Ilustracja 4. Skrypty PHP, wybrano Francję

Skrypt

W Tabeli 2 zamieszczono pomoc dla języka JavaScript. Wymagania dotyczące skryptów:

  • Skrypt jest napisany w języku JavaScript
  • Należy stosować znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim
  • Składa się z jednej lub trzech funkcji wywoływanych po kliknięciu na jednym z bloków w bloku nawigacyjnym
  • Funkcje modyfikują style CSS bloków (Ilustracje 2, 5, 6)
  • Gdy zostanie kliknięty Blok 1:
    • Kolor tła bloku 1 zmienia się na MistyRose, pozostałe na #FFAEA5
    • Sposób wyświetlania Sekcji 1 zmienia się na blokowy, pozostałe są usunięte
  • Gdy zostanie kliknięty Blok 2:
    • Kolor tła bloku 2 zmienia się na MistyRose, pozostałe na #FFAEA5
    • Sposób wyświetlania Sekcji 2 zmienia się na blokowy, pozostałe są usunięte
  • Gdy zostanie kliknięty Blok 3:
    • Kolor tła bloku 3 zmienia się na MistyRose, pozostałe na #FFAEA5
    • Sposób wyświetlania Sekcji 3 zmienia się na blokowy, pozostałe są usunięte

Ilustracja 5. Kliknięty blok drugi, wyświetlona sekcja druga z listą definicji, zadziałał styl CSS

Ilustracja 6. Kliknięty blok trzeci, wyświetlona sekcja trzecia z galerią

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 pola i metody modelu DOM języka JavaScript

Wyszukiwanie elementów
document.getElementById(Id)
document.getElementByTagName(TagName)
document.getElementsByClassName(ClassName)
document.getElementsByName(ElementName)
document.querySelector(CSSselector)
document.querySelectorAll(CSSselector)
Zmiana elementów
element.innerHTML = "nowa zawartość"
element.attribute_name = "nowa wartość"
element.setAttribute(atrybut,wartość)
element.style.property_name = "nowa wartość"

Tabela 3. CSS: wartości właściwości display

Value Description
inline Displays an element as an inline element
block Displays an element as a block element
none The element is completely removed

Tabela 4. 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: import.jpg, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, przeglądarka.txt, smok1.jpg, smok2.jpg, smok3.jpg, smoki.php, 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
  • skrypty.