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

Oznaczenie: INF.03-12-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ą dla przychodni, 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 PlikiCz202512 zabezpieczone hasłem: _PrzychoDnia%

Pobierz PlikiCz202512.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 jest zgodna ze strukturą przedstawioną na Ilustracji 1. Między tabelami Abonamenty i Cechy jest relacja n:m połączona za pomocą tabeli SzczegolyAbonamentu. W bazie zapisano trzy abonamenty, i przypisano im cechy. Poszczególne abonamenty z cechami są wyświetlone w zielonych blokach na Ilustracji 2.

Ilustracja 1. Baza danych

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

  • Utwórz bazę danych o nazwie medica, 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 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 medica. 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ń
    • Zapytanie 1: wybierające jedynie nazwę, cenę i opis wszystkich abonamentów
    • Zapytanie 2: liczące średnią cenę abonamentów. Cena jest zaokrąglona do dwóch miejsc po przecinku oraz nadano nazwę kolumny (alias) na „Srednio_abonament”
    • Zapytanie 3: wybierające jedynie nazwę abonamentu i odpowiadającą mu cechę dla abonamentu o id równym 1. Należy zastosować pełną relację n:m
    • Zapytanie 4: wybierające jedynie nazwę i opis abonamentów, w których w opisie w dowolnym miejscu znajdują się słowa „zdrowie” albo „opieką”

Witryna internetowa

Ilustracja 2. Witryna internetowa

Przygotowanie grafiki:

  • Plik obraz2.png z czerwonym krzyżem, wypakowany z archiwum, należy przeskalować do dokładnych rozmiarów 32 px na 32 px

Cechy witryny:

  • Składa się ze strony o nazwie medica.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 widoczny na karcie przeglądarki: „Przychodnia Medica”
  • Obraz2.png jako favicon widoczny na karcie przeglądarki
  • 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 „Abonamenty w przychodni Medica"
  • Zawartość bloku artykułu:
    • Efekt działania skryptu 1
    • Odnośnik o treści „Dowiedz się więcej” prowadzący do podstrony opis.html. Należy utworzyć plik opis.html i zapisać w nim „Strona w trakcie budowy”
  • Zawartość bloku głównego: trzy sekcje
  • Zawartość pierwszej sekcji:
    • Nagłówek drugiego stopnia o treści „Standardowy”
    • Lista punktowana (nieuporządkowana), a w niej efekt działania skryptu 2
  • Zawartość drugiej sekcji:
    • Nagłówek drugiego stopnia o treści „Premium”
    • Lista punktowana (nieuporządkowana), a w niej efekt działania zmodyfikowanego skryptu 2 dla id abonamentu równego 2
  • Zawartość trzeciej sekcji:
    • Nagłówek drugiego stopnia o treści „Dziecko”
    • Lista punktowana (nieuporządkowana), a w niej efekt działania zmodyfikowanego skryptu 2 dla id abonamentu równego 3
  • Zawartość stopki:
    • Paragraf, a w nim obraz o nazwie obraz2.png z tekstem alternatywnym „przychodnia” oraz treść „Stronę przygotował:”, dalej 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. Cechy formatowania CSS, działające na stronie:

  • Domyślne formatowanie wszystkich selektorów: krój czcionki Georgia
  • Dla bloku nagłówkowego i stopki: kolor tła #1B5E20, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 5 px
  • Dla bloku artykułu: tłem jest obraz o nazwie obraz1.jpg, kolor czcionki DimGray, rozmiar czcionki 150%, wysokość 350 px, widoczne paski przewijania
  • Dla trzech sekcji: kolor tła #00E676, kolor czcionki #1B5E20, szerokość 28%, wysokość 560 px, marginesy zewnętrzne 2%, zaokrąglenie rogów 10 px, cień bloku o przesunięciu 8 px w obu osiach, rozmyciu 6 px i kolorze DimGray
  • Gdy kursor znajdzie się na dowolnej sekcji jej kolor tła zmienia się na #10EF84
  • Gdy kursor znajdzie się na paragrafie jego kolor czcionki zmienia się na czarny
  • Dla nagłówków drugiego i trzeciego stopnia: kolor czcionki #1B5E20, wyrównanie tekstu do środka, odstępy między literami 3 px, margines wewnętrzny górny 20 px
  • Dla listy punktowanej: punktor jest obrazem o nazwie obraz3.png

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 zmiennych i funkcji w języku polskim lub angielskim
  • Skrypty łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie medica
  • Skrypt 1
    • Wysyła do bazy danych zapytanie 1
    • Zwrócone wiersze są wyświetlane według wzoru:
      • W nagłówku trzeciego stopnia: „Pakiet <nazwa> - cena <cena> zł”, gdzie nawiasy <> oznaczają wartość pobraną z bazy danych
      • W paragrafie opis pobrany z bazy danych
  • Skrypt 2
    • Wysyła do bazy danych zapytanie 3
    • Zwrócone zapytaniem wiersze są wyświetlane jako elementy listy, tylko <cecha>, gdzie nawiasy <> oznaczają wartość pobraną z bazy danych
  • Modyfikacje skryptu 2
    • W drugiej sekcji należy zastosować zmodyfikowane zapytanie, które sprawdza warunek dla abonamentu o id równym 2. Pozostałe cechy skryptu są identyczne
    • W trzeciej sekcji należy zastosować zmodyfikowane zapytanie, które sprawdza warunek dla abonamentu o id równym 3. Pozostałe cechy skryptu są identyczne
  • Na końcu jest zamykane połączenie z serwerem

Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQLi 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. Cień elementu i tekstu w CSS

Tabela 3. 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.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, medica.php, obraz1.jpg, obraz2.png, obraz3.png, opis.html, przeglądarka.txt, styl.css, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność jej odczytu. Opisz płytę numerem zdającego, którym został podpisany arkusz 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ą.