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

Oznaczenie: INF.03-07-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ą dla stacji meteorologicznej, 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 PlikiSt202607 zabezpieczone hasłem: &M3t3oPogoDa%

Pobierz PlikiSt202607.zip

Archiwum należy rozpakować.

Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego. Wszystkie wyniki należy zapisać w tym folderze.

Operacje na bazie danych

Baza danych zawiera połączone relacją tabele przedstawione na Ilustracji 1. Tabele opisują pomiary temperatury dla różnych miejscowości w różnych porach roku i miesiącach.

Ilustracja 1. Baza danych

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

  • Utwórz bazę danych o nazwie pogoda, z zestawem polskich znaków (np. utf8_polish_ci)
  • Z rozpakowanego archiwum zaimportuj tabele z pliku pogoda.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 pogoda. 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: liczące średnią temperaturę dla miesiąca o identyfikatorze 7. Wyliczona wartość jest zaokrąglona do dwóch miejsc po przecinku
    • Zapytanie 2: wstawiające do tabeli miejscowosc wiersz z danymi „Kijów”, „Ukraina”. Klucz nadawany automatycznie
    • Zapytanie 3: wybierające jedynie nazwy miast i krajów z tabeli miejscowosc oraz odpowiadające im temperatury w miesiącu o identyfikatorze 7. Należy posłużyć się relacją
    • Zapytanie 4: wybierające jedynie nazwy miesięcy z tabeli miesiace oraz odpowiadające im średnie temperatury. Należy posłużyć się relacją

Grafika

Z pliku pogoda.png należy wyciąć kształty pełnego słońca, słońca za chmurą i deszczu. Kształty mają wypełniać całą przestrzeń obrazu, tak jak zaznaczony obszar kadrowania na Ilustracji 2a. Następnie każdy obraz należy przeskalować do wymiarów dokładnie 100 px na 100 px. Zapisać grafiki jako slonce.png, chmury.png, deszcz.png, zgodnie z ilustracjami 2b, 2c, 2d z zachowaniem przezroczystości.

Witryna internetowa

Ilustracja 3. Wygląd witryny internetowej

Cechy witryny:

  • Składa się ze strony 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 widoczny na karcie przeglądarki: „Pogoda”
  • 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ą 4

Ilustracja 4. Układ bloków

  • Zawartość bloku nagłówkowego 1: obraz slonce.png z tekstem alternatywnym „Słonecznie”
  • Zawartość bloku nagłówkowego 2: nagłówek pierwszego stopnia o treści „Pogoda w Europie”
  • Zawartość bloku głównego: blok sekcji lewej i blok sekcji prawej
  • Zawartość bloku sekcji lewej:
    • Nagłówek drugiego stopnia o treści: „Temperatury w lipcu”
    • Tabela o czterech kolumnach. Pierwszy wiersz zawiera komórki nagłówkowe o treści „Miasto”, „Kraj”, „Temperatura”, „Pogoda”. Tabela jest wypełniona skryptem 1
  • Zawartość bloku sekcji prawej:
    • Nagłówek drugiego stopnia o treści: „Średnie temperatury w roku”
    • Dwanaście odnośników dla wszystkich miesięcy roku:
      • „Styczeń” prowadzi do adresu index.php i przesyła metodą GET identyfikator miesiąca równy 1
      • „Luty” prowadzi do adresu index.php i przesyła metodą GET identyfikator miesiąca równy 2
      • „Marzec” prowadzi do adresu index.php i przesyła metodą GET identyfikator miesiąca równy 3
      • ...
      • „Grudzień” prowadzi do adresu index.php i przesyła metodą GET identyfikator miesiąca równy 12
    • Paragraf o treści „Średnia temperatura dla wybranego miesiąca wynosi”
    • Efekt działania skryptu 2 wykonywanego po kliknięciu odnośnika
  • Zawartość stopki: paragraf o treści „Numer zdającego: ”, 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:

  • Dla selektora ciała strony: krój czcionki Georgia, wyrównanie tekstu do środka
  • Wspólne dla obu bloków nagłówkowych: kolor tła #388E3C, biały kolor czcionki, wysokość 100 px
  • Dodatkowo szerokość pierwszego bloku nagłówkowego 20%, drugiego 80%
  • Wspólne dla bloków sekcji lewej i prawej: kolor tła #DCE775, szerokość 50%, wysokość 600 px
  • Dla bloku stopki: kolor tła #388E3C, biały kolor czcionki
  • Dla selektora tabeli: szerokość 80%, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, obramowanie linią kreskowaną o szerokości 2 px i kolorze #388E3C
  • Jedynie dla obrazów w tabeli: wysokość 70 px
  • Dla selektora odnośnika: kolor czcionki #388E3C, marginesy zewnętrzne 20 px, czcionka pochylona o rozmiarze 200%
  • Dla selektora paragrafu: marginesy zewnętrzne 0 px
  • Gdy kursor znajdzie się na odnośniku jego kolor tła zmienia się na #388E3C, a kolor czcionki na #DCE775
UWAGA!
Styl CSS ciała strony, tabeli 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 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 pogoda
  • Na końcu działania skrypt zamyka połączenie z serwerem

Skrypt 1

  • Wysyła do bazy danych zapytanie 3
  • W pierwszych trzech kolumnach tabeli zapisuje kolejne nazwy miast, krajów i temperatury dla wszystkich zwróconych zapytaniem rekordów
  • Czwarta kolumna wypełniona jest obrazem:
    • slonce.png, gdy temperatura dla tego rekordu jest powyżej 30 °C
    • deszcz.png, gdy temperatura dla tego rekordu jest poniżej 26 °C
    • chmury.png, w innych przypadkach

Skrypt 2, wykonywany tylko jeżeli zostały wysłane dane poprzez kliknięcie odnośnika (ilustracja 5)

  • Wysyła do bazy danych zapytanie 1, zmodyfikowane tak, żeby wybierane były dane dotyczące wybranego przez użytkownika miesiąca (w miejscu id miesiąca jest wstawiona wartość przesłana metodą GET)
  • Zwróconą zapytaniem temperaturę wyświetla w nagłówku trzeciego stopnia w sposób „<temp> stopni”, gdzie <> oznacza wartość zwróconą zapytaniem

Ilustracja 5. Działanie skryptu 2

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

Przykład przesyłania danych między stronami za pomocą odnośników

Istnieje możliwość przekazywania niedużej liczby parametrów za pomocą zwykłych odnośników dostępnych w języku HTML. W takim przypadku wykorzystuje się metodę GET – konstruuje się odnośnik, na końcu którego należy umieścić znak zapytania a po nim oddzielone ampersandami pary parametr=wartość.

Przykład:

strona.html: <a href= "strona.php?liczba=4&wynik=6">Kliknij tu</a>

strona.php: <?php echo "<p>$_GET['liczba']</p>"; ?>

Tabela 2. 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: chmury.png, deszcz.png, import.png, index.php, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, slonce.png, 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ą.