Arkusz INF.03 : 2026 - styczeń - zad. 02 (php)

Oznaczenie: INF.03-02-26.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ą portalu dla sklepów z warzywami, 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 PlikiSt202602 zabezpieczone hasłem: baz@rEk100%

Pobierz PlikiSt202602.zip

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.

Baza danych

Baza danych zawiera połączone relacją tabele przedstawione na Ilustracji 1. Tabela towar przechowuje informacje o towarach, tabela sklep przechowuje informacje o sklepach. Tabela zamowienie przechowuje informacje o zamówionej liczbie kilogramów danego towaru (id_towar) w danym sklepie (id_sklep).

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

• Utwórz bazę danych o nazwie bazar, z zestawem polskich znaków (np. utf8_polish_ci)
• Z rozpakowanego archiwum zaimportuj tabele z pliku baza-nowa.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 bazar. 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 10 pierwszych rekordów z tabeli towar, jedynie pola nazwa i plik
  • Zapytanie 2: wybierające jedynie identyfikator i nazwę towarów
  • Zapytanie 3: wybierające jedynie rodzaj, nazwę i cenę towaru o identyfikatorze 1
  • Zapytanie 4: wstawiające do tabeli zamowienie rekord o wartościach: towar o identyfikatorze 9, sklep o identyfikatorze 2, liczba kilogramów 20, klucz główny nadawany automatycznie

Witryna internetowa

Cechy grafiki:

• Dla grafiki jablko.png należy nadać tło przezroczyste i zapisać pod tą samą nazwą
• Grafikę market.png należy przeskalować z zachowaniem proporcji do szerokości 300 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 „Zdrowy bazarek”
• 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 „Zdrowy bazarek”
• Zawartość bloku nawigacyjnego: efekt wykonania skryptu 1
• Zawartość bloku głównego: bloki boczny i sekcji
• Zawartość bloku bocznego: obraz market.png z tekstem alternatywnym „bazarek”
• Zawartość bloku sekcji:
  • Paragraf o treści: „Wybierz owoc lub warzywo i podaj jego wagę:”
  • Formularz wysyłający dane do tego samego pliku metodą bezpieczną, z zawartością:
    • Lista rozwijana wypełniona skryptem 2
    • Pole edycyjne przeznaczone do wpisywania jedynie liczb całkowitych
    • Przycisk „Zamów” wysyłający dane z formularza do skryptu 3
  • Efekt działania skryptu 3
• Zawartość stopki: paragraf o treści: „Stronę opracował: ”, 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ślnie dla wszystkich selektorów: krój czcionki Georgia, w przypadku braku serif
• Wspólne dla bloku nagłówkowego i stopki: kolor tła ForestGreen, biały kolor czcionki, marginesy wewnętrzne 2 px, wyrównanie tekstu do środka
• Dla bloku nawigacyjnego: kolor tła DarkKhaki, wysokość 150 px, w przypadku przepełnienia bloku pozostała jego zawartość jest ukryta (na Ilustracji 2 jest 8 owoców – reszta nie zmieściła się w bloku i została ukryta)
• Wspólne dla bloku bocznego i sekcji: kolor tła Khaki, szerokość 50%, wysokość 400 px
• Jedynie dla obrazu w bloku bocznym: marginesy wewnętrzne 2 px, zewnętrzne 10 px, obramowanie linią kropkową o szerokości 2 px i kolorze ForestGreen, zaokrąglenie rogów 40 px
• Dla selektora paragrafu: rozmiar czcionki 120%, kursywa

UWAGA!

Styl CSS paragrafu należy zdefiniować wyłącznie przy pomocy selektora tego znacznika. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.

Skrypt połączenia z bazą danych

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 bazar
• Skrypt 1:
  • Wysyła do bazy danych zapytanie 1
  • Dla każdego wiersza pobranego z bazy wyświetla obraz o pobranej z bazy nazwie pliku i tekście alternatywnym odpowiadającym nazwie owocu
• Skrypt 2 (Ilustracja 4):
  • Wysyła do bazy danych zapytanie 2
  • Dla każdego wiersza pobranego z bazy generuje opcję listy rozwijanej, gdzie w atrybucie value znajduje się zwrócone pole id, a w treści opcji znajduje się nazwa towaru
• Skrypt 3, wykonywany tylko wtedy, gdy wysłano dane z formularza (Ilustracja 5):
  • Pobiera wartości z formularza: id towaru i liczbę kilogramów
  • Wysyła do bazy danych zmodyfikowane zapytanie 3, tak że wybierany jest rekord o id wskazanym w formularzu
  • Oblicza wartość na podstawie zwróconej zapytaniem ceny oraz liczby kilogramów wysłanej z formularza
  • Wypisuje w dodatkowym paragrafie pod formularzem tekst: „<rodzaj> <nazwa> wartość: <wartość> zł”, gdzie w znakach <> umieszczono zwrócone zapytaniem pola i wyliczoną wartość
  • Wstawia do bazy rekord za pomocą zmodyfikowanego zapytania 4, w ten sposób, że w miejscu id towaru i liczby kilogramów są wpisywane odpowiednie wartości wysłane z formularza (id sklepu pozostaje bez zmian lub jest pomijane)
• Po wykonaniu wszystkich operacji połączenie z bazą jest zamykane

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

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: 11 grafik z owocami, market.png, import.png, index.php, kw1.png, kw2.png, kw3.png, kw4.png, 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ą.