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

Oznaczenie: INF.03-04-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ą hurtowni z obuwiem, 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 PlikiSt202504 zabezpieczone hasłem: *HurTowni@Buty$

Pobierz PlikiSt202504.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

Do wykonania operacji na bazie należy wykorzystać przedstawione na Ilustracji 1 tabele.

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

• Utwórz bazę danych o nazwie obuwie, z zestawem polskich znaków (np. utf8_unicode_ci)
• Do utworzonej bazy zaimportuj tabele z pliku obuwie.sql z rozpakowanego archiwum
• 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 obuwie. 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 pole model z tabeli produkt
  • Zapytanie 2: wybierające jedynie pola model, nazwa, cena z tabeli buty oraz odpowiadające im pole nazwa_pliku z tabeli produkt. Należy posłużyć się relacją
  • Zapytanie 3: wybierające jedynie pola nazwa, cena z tabeli buty i odpowiadające mu pola kolor, kod_produktu, material, nazwa_pliku z tabeli produkt dla modelu „P-59-03”. Należy posłużyć się relacją
  • Zapytanie 4: wstawiające rekord z nazwą kategorii „Sandały” do tabeli kategorie. Klucz główny generowany automatycznie

Witryna internetowa

Cechy witryny:

• Składa się z dwóch stron o nazwach index.php, zamow.php

Cechy wspólne dla obu stron:

• Zapisane w języku HTML5
• Zadeklarowany polski język zawartości witryny
• Jawnie zastosowany właściwy standard kodowania polskich znaków
• Tytuł strony widoczny na karcie przeglądarki: „Obuwie”
• Arkusz stylów w pliku o nazwie style.css prawidłowo połączony z kodem strony
• Podział strony na bloki: nagłówkowy, poniżej główny, na dole stopka. 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 nagłówkowego: nagłówek pierwszego stopnia o treści „Obuwie męskie”
• Zawartość stopki: paragraf o treści: „Autor strony: ”, dalej wstawiony numer zdającego

Zawartość bloku głównego strony index.php:

• Formularz wysyłający dane metodą bezpieczną do pliku zamow.php, składający się z:
  • Listy rozwijanej, poprzedzonej etykietą „Model: ”, wypełnionej przez skrypt 1
  • Listy rozwijanej, poprzedzonej etykietą: „Rozmiar: ”, wypełnionej liczbami od 40 do 43
  • Pola edycyjnego przeznaczonego do wpisywania wartości liczbowych, poprzedzonego etykietą: „Liczba par: ”
  • Przycisku o treści „Zamów”, który wysyła dane z formularza
• Efekt działania skryptu 2

Zawartość bloku głównego strony zamow.php:

• Nagłówek drugiego stopnia o treści „Zamówienie”
• Efekt działania skryptu 3
• Odnośnik „Strona główna” prowadzący do strony index.php

Styl CSS witryny internetowej

Styl CSS zdefiniowany jest w całości w zewnętrznym pliku o nazwie style.css. Cechy formatowania CSS działające na stronie:

• Domyślnie, dla wszystkich selektorów: krój czcionki Cambria
• Wspólne dla bloku nagłówkowego i stopki: kolor tła Sienna, biały kolor czcionki, marginesy wewnętrzne 5 px, wyrównanie tekstu do środka
• Dla bloku głównego: kolor tła AntiqueWhite, wysokość 700 px, rozmiar czcionki 120%, paski przewijania pojawiające się w przypadku gdy zawartość nie mieści się w bloku
• Zdefiniowana klasa kontrolki o cechach: szerokość 150 px, marginesy zewnętrzne 10 px. Klasa jest przypisana do wszystkich elementów formularza (listy rozwijane, pole edycyjne, przycisk)
• Zdefiniowana klasa buty o cechach: szerokość 70%, marginesy zewnętrzne 15 px, marginesy wewnętrzne 7 px, obramowanie linią ciągłą o szerokości 1 px i kolorze Sienna, zaokrąglenie rogów 30 px. Klasa jest przypisana do bloków produktu (patrz skrypt 2)
• Gdy kursor znajdzie się na bloku produktu (klasa buty) jego kolor tła zmienia się na Linen
• Dla selektora obrazu: opływany po prawej stronie zawartością (obraz po lewej stronie), margines zewnętrzny prawy 30 px
• Dla selektora nagłówka czwartego stopnia: kolor tła Sienna, biały kolor czcionki, wyrównanie tekstu do prawej

UWAGA!

Styl CSS obrazu i nagłówka czwartego stopnia należy zdefiniować wyłącznie przy pomocy selektora tych znaczników. 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 obuwie
• Skrypt 1 w pliku index.php
  • Wysyła do bazy danych zapytanie 1
  • Wyświetla pobrane zapytaniem wartości jako elementy listy rozwijanej z modelami obuwia
• Skrypt 2 w pliku index.php
  • Wysyła do bazy danych zapytanie 2
  • Dla każdego zwróconego zapytaniem wiersza tworzy blok produktu, zawierający:
    • Obraz o nazwie pliku pobranej zapytaniem i tekście alternatywnym „but męski”
    • Nagłówek drugiego stopnia zawierający zwróconą zapytaniem nazwę produktu
    • Nagłówek piątego stopnia o treści: „Model: <model>”, gdzie wartość w nawiasach oznacza dane pobrane zapytaniem
    • Nagłówek czwartego stopnia o treści: „Cena: <cena>”, gdzie wartość w nawiasach <> oznacza dane pobrane zapytaniem
• Skrypt 3 w pliku zamow.php
  • Wykorzystuje dane wysłane z formularza
  • Wysyła zmodyfikowane zapytanie 3, w ten sposób, że w warunku sprawdzany jest model buta wybrany w formularzu
  • Dane ze zwróconego zapytaniem wiersza są wyświetlane na stronie:
    • Obraz o nazwie pliku pobranej zapytaniem i tekście alternatywnym „but męski”
    • Nagłówek drugiego stopnia z nazwą produktu pobraną z bazy
    • Paragraf o treści: „cena za <liczbaPar> par: <wartośćCałkowita> zł", gdzie <liczbaPar> oznacza wartość pobraną z formularza, a <wartośćCałkowita> oznacza obliczony koszt za podaną liczbę par wybranego buta
    • Paragraf o treści: ”Szczegóły produktu: <kolor>, <materiał>”, gdzie wartości w nawiasach <> oznaczają dane pobrane zapytaniem
    • Paragraf o treści: „Rozmiar: <rozmiar>”, gdzie wartość w nawiasach <> oznacza dane pobrane z formularza
• Na końcu zamykane jest połączenie z serwerem

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: but1.png, but2.png, but3.png, but4.png, import.jpg, index.php, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt przeglądarka.txt, style.css, zamow.php, 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ą.