Arkusz INF.03 : 2025 - styczeń - zad. 12 (php)

Oznaczenie: INF.03-12-25.01-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ą prezentującą piekarnię, 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 PlikiSt202512 zabezpieczone hasłem: ULeptnny!

Pobierz PlikiSt202512.7z

Archiwum należy rozpakować.

Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego. 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 zawiera jedną tabelę przedstawioną na Ilustracji 1. Tabela wyroby zawiera informacje o pogrupowanych wyrobach oferowanych przez zakład piekarski. W tabeli znajdują się pola z rodzajami wyrobów, ich nazwy, gramatury oraz ceny produktów.

Ilustracja 1. Baza danych

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

  • Utwórz bazę danych o nazwie piekarnia, z zestawem polskich znaków (np. utf8_unicode_ci)
  • Z rozpakowanego archiwum zaimportuj tabelę z pliku baza.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 table.
  • Wykonaj zapytania SQL działające na bazie piekarnia. 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 pola: Rodzaj, Nazwa, Gramatura i Cena dla wyrobów z rodzaju „INNE”
    • Zapytanie 2: wybierające jedynie posortowane malejąco rodzaje wyrobów. Rodzaje wyrobów nie mogą się powtarzać
    • Zapytanie 3: wybierające jedynie pola: ID oraz Nazwa dla wyrobów, których nazwa zawiera słowo „Chałka”
    • Zapytanie 4: wybierające pole Rodzaj oraz obliczające średnią cenę dla każdej grupy wyrobów z kategorii Rodzaj, zaokrągloną do dwóch miejsc po przecinku. Obliczona średnia cena powinna mieć nadaną nazwę kolumny (alias) „Średnia cena”

Witryna internetowa

Ilustracja 2. Wygląd witryny internetowej

Przygotowanie grafiki:

  • Do grafiki z pliku wypieki.jpg należy dołączyć grafikę z pliku rogal.jpg po prawej stronie. Lewy koniec rogala zachodzi pod precel. Grafika jest widoczna na Ilustracji 2
  • Cechy połączonej grafiki
    • Tło przezroczyste
    • Cień przesunięty w prawo i w dół
    • Wymiar: szerokość 1700 px i wysokość 240 px
    • Nazwa pliku wypieki, format obsługujący przezroczystość

Cechy witryny:

  • Składa się ze strony o nazwie piekarnia.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 „PIEKARNIA”, widoczny na karcie przeglądarki
  • Arkusz stylów w pliku o nazwie styles.css prawidłowo połączony z kodem strony
  • Obraz wypieki.png z tekstem alternatywnym o treści: „Produkty naszej piekarni” umieszczony jest na tylnym planie strony. Bloki strony zakrywają obraz
  • Podział strony na bloki: nawigacyjny, nagłówkowy, główny, stopki. Podział zrealizowany 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 Ilustracją 2
  • Zawartość bloku nawigacyjnego:
    • Cztery odnośniki o treści: KWERENDA1, KWERENDA2, KWERENDA3, KWERENDA4. Odnośniki prowadzą do kolejnych zrzutów ekranu z kwerendami
  • Zawartość bloku nagłówkowego:
    • Nagłówek pierwszego stopnia o treści: „WITAMY”
    • Nagłówek czwartego stopnia o treści: „NA STRONIE PIEKARNI”
    • Paragraf (akapit) zawierający tekst. Tekst można skopiować z pliku teksty.txt z wypakowanego archiwum
  • Zawartość bloku głównego:
    • Nagłówek czwartego stopnia o treści: „Wybierz rodzaj wypieków:”
    • Formularz wysyłający dane metodą bezpieczną do tego samego pliku. Pola formularza:
      • Lista rozwijana wypełniona przez skrypt 1
      • Przycisk „Wybierz” wysyłający dane do skryptu 2 z formularza
    • Tabela o czterech kolumnach zawierająca:
      • Wiersz z komórkami nagłówkowymi: Rodzaj, Nazwa, Gramatura, Cena
      • Wiersze z danymi wypełnione skryptem 2
  • Zawartość stopki:
    • Paragraf „AUTOR ”, dalej wstawiony numer zdającego
    • Paragraf „Data: ”, dalej wpisana data egzaminu

Styl CSS witryny internetowej

Styl CSS zdefiniowany jest w całości w zewnętrznym pliku o nazwie styles.css. W Tabeli 2 zawarto pomoc do niektórych właściwości CSS. Cechy formatowania CSS, działające na stronie:

  • Domyślne formatowanie wszystkich selektorów: krój czcionki Verdana
  • Dla ciała strony: tło jako gradient liniowy pionowy od koloru Teal do AliceBlue, biały kolor czcionki, wyrównanie tekstu do środka, jedynie marginesy zewnętrzne lewy i prawy 20 px
  • Dla obrazu: szerokość 100%, blokowy sposób wyświetlania, stałe położenie na stronie z odstępem od góry 70 px. Obraz jest zawsze pod spodem treści strony
  • Dla odnośnika: rozmiar czcionki 130%, marginesy wewnętrzne 30 px, biały kolor czcionki
  • Dla bloku nagłówkowego: kolor tła RGB 160, 82, 45 z przezroczystością 0.6, marginesy wewnętrzne 10 px, jedynie margines zewnętrzny górny 100 px, jedynie górne rogi zaokrąglone o 15 px
  • Dla bloku głównego: kolor tła SandyBrown, marginesy wewnętrzne 30 px
  • Dla bloku stopki: kolor tła Sienna, marginesy wewnętrzne 30 px, jedynie dolne rogi zaokrąglone o 15 px
  • Dla selektora nagłówka pierwszego stopnia: zewnętrzny cień tekstu przesunięty w poziomie i pionie o 2 px, promień rozmycia 5 px, kolor cienia czarny
  • Dla selektora tabeli: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 70%, kolor tła Sienna
  • Wspólne dla selektora tabeli i komórek tabeli: obramowanie linią ciągłą o grubości 1 px i kolorze SandyBrown, obramowanie połączone
UWAGA!
Styl CSS nagłówka pierwszego stopnia i tabeli należy zdefiniować wyłącznie przy pomocy selektora tego znacznika. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.

Skrypty 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 piekarnia
  • Skrypt 1
    • Wysyła do bazy danych zapytanie 2
    • Dane zwrócone zapytaniem wyświetla w kolejnych elementach listy rozwijanej
  • Skrypt 2
    • Wysyła do bazy danych zapytanie 1 zmodyfikowane w ten sposób, że wartość pola Rodzaj w warunku jest pobrana z formularza
    • Zwrócone zapytaniem wiersze wyświetla w kolejnych wierszach tabeli, w przeznaczonych do tego komórkach
    • W stanie początkowym, gdy nie wybrano opcji listy rozwijanej, w tabeli nie są wyświetlane wiersze z danymi
  • Na końcu jest zamykane połączenie z serwerem

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

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: import.png, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, przeglądarka.txt, piekarnia.php, styles.css, wypieki.png, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność jej odczytu. Podpisz płytę numerem zdającego i pozostaw zapakowaną 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ą.