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

Oznaczenie: INF.03-11-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ą hodowli świnek morskich, 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 PlikiCz202411 zabezpieczone hasłem: @Swinki-MorSkie!

Pobierz PlikiCz202411.zip

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 jest zgodna ze strukturą przedstawioną na Obrazie 1.

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

• Utwórz bazę danych o nazwie hodowla, 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 hodowla. 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ń oraz zawierać wykonane zapytanie.
  • Zapytanie 1: wybierające jedynie pola imie i miot z tabeli swinki dla świnek morskich urodzonych w lipcu
  • Zapytanie 2: wybierające niepowtarzające się wiersze z datą urodzenia i miotem z tabeli swinki oraz odpowiadającą im nazwą rasy z tabeli rasy dla id rasy równego 1. Należy posłużyć się relacją
  • Zapytanie 3: wybierające jedynie imię, cenę i opis świnek morskich, których id rasy jest równe 1
  • Zapytanie 4: wybierające jedynie rasę z tabeli rasy

Witryna internetowa

Przygotowanie grafiki:

• Grafikę crested.jpg, wypakowaną z archiwum, należy skadrować tak, aby rozmiar obrazu po kadrowaniu wynosił dokładnie 500 px szerokości na 330 px wysokości. Na skadrowanym obrazie musi być widoczny pysk zwierzęcia. Przykład kadru zaznaczono czarnym prostokątem na Obrazie 3.

Cechy witryny:

• Składa się ze stron o nazwach peruwianka.php, american.php, crested.php zapisanych w języku HTML5

Cechy strony peruwianka.php:

• 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: „Hodowla świnek morskich”
• Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
• Podział strony na bloki: baner, dwa bloki lewe: blok menu i blok główny, jeden blok prawy, 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 „Hodowla świnek morskich - zamów świnkowe maluszki”
• Zawartość lewego bloku menu:
  • Odnośnik do pliku peruwianka.php, o treści „Rasa Peruwianka”
  • Odnośnik do pliku american.php, o treści „Rasa American”
  • Odnośnik do pliku crested.php, o treści „Rasa Crested”
• Zawartość prawego bloku:
  • Nagłówek trzeciego stopnia o treści: „Poznaj wszystkie rasy świnek morskich”
  • Lista numerowana (uporządkowana) wypełniona elementami przez skrypt 1
• Zawartość lewego bloku głównego:
  • Obraz peruwianka.jpg z tekstem alternatywnym: „Świnka morska rasy peruwianka”
  • Efekt działania skryptu 2
  • Linia pozioma
  • Nagłówek drugiego stopnia o treści: „Świnki w tym miocie”
  • Efekt działania skryptu 3
• Zawartość stopki:
  • Paragraf (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 Helvetica
• Wspólne dla banera i stopki: kolor tła SaddleBrown, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 7 px
• Dla lewego bloku menu: kolor tła Peru, szerokość 80%, wysokość 40 px, margines wewnętrzny górny 20 px
• Dla lewego bloku głównego: szerokość 80%, wysokość 700 px, rozmiar czcionki 120%, paski przewijania pojawiające się tylko, gdy tekst nie mieści się w oknie
• Dla bloku prawego: kolor tła Peru, biały kolor czcionki, szerokość 20%, wysokość 760 px
• Dla selektora odnośnika: kolor czcionki #DDD, margines wewnętrzny lewy 90 px, rozmiar czcionki 140%, brak podkreślenia
• W momencie gdy kursor znajdzie się na odnośniku, jego kolor czcionki zmienia się na biały
• Dla selektora obrazu: opływanie tekstem po prawej stronie (obraz znajduje się po lewej stronie), marginesy zewnętrzne 30 px

UWAGA!

Styl CSS obrazu i odnośnika należy zdefiniować wyłącznie przy pomocy selektora tego 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 hodowla
• Skrypt 1
  • Wysyła do bazy danych zapytanie 4
  • Zwrócone zapytaniem rasy świnek morskich wypisuje jako elementy listy
• Skrypt 2
  • Wysyła do bazy danych zapytanie 2
  • Wyświetla dane pobrane z bazy danych, w następujący sposób:
    • W nagłówku drugiego stopnia treść „Rasa: <rasa>”
    • W paragrafie treść „Data urodzenia: <data-ur>”
    • W paragrafie treść „Oznaczenie miotu: <miot>”, gdzie dane zapisane w nawiasach <> wybrane zostały z bazy danych
• Skrypt 3
  • Wysyła do bazy danych zapytanie 3
  • Wyświetla dane pobrane z bazy danych, w następujący sposób:
    • W nagłówku trzeciego stopnia treść „<imie> - <cena> zł”
    • W paragrafie zwrócony zapytaniem opis
• Na końcu jest zamykane połączenie z serwerem.

Sposób przygotowania stron american.php i crested.php

• Obie strony należy przygotować na podstawie gotowego dokumentu peruwianka.php. Należy to zrobić po wykonaniu i przetestowaniu działania strony.
• Należy skopiować dwukrotnie dokument peruwianka.php i zmienić nazwy na american.php i crested.php
• Zmiany, których należy dokonać w bloku głównym dokumentu american.php (Obraz 4):
  • Obraz: źródło american.jpg, tekst alternatywny „Świnka morska rasy american”
  • Skrypt 2: w zapytaniu 2 należy zmienić warunek zapytania, id rasy jest równe 6
  • Skrypt 3: w zapytaniu 3 należy zmienić warunek zapytania, id rasy jest równe 6
• Zmiany, których należy dokonać w bloku głównym dokumentu crested.php (Obraz 5):
  • Obraz: źródło crested.jpg, tekst alternatywny „Świnka morska rasy crested”
  • Skrypt 2: w zapytaniu 2 należy zmienić warunek zapytania, id rasy jest równe 7
  • Skrypt 3: w zapytaniu 3 należy zmienić warunek zapytania, id rasy jest równe 7

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: american.jpg, american.php, crested.jpg, crested.php, import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, peruwianka.jpg, peruwianka.php, 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ą.