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

Oznaczenie: INF.03-03-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 hobbystyczną aplikację internetową o kalendarzu, 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 PlikiSt202503 zabezpieczone hasłem: k@L3ndarz

Pobierz PlikiSt202503.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 zawiera tabelę imieniny przedstawioną na Ilustracji 1. Data zapisana jest w formacie mm-dd, np. data 7 listopada zapisana jest jako 11-07.

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

• Utwórz bazę danych o nazwie kalendarz, z zestawem polskich znaków (np. utf8_unicode_ci)
• Do utworzonej bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
• 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 kalendarz. 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 z tabeli imieniny jedynie daty, w których są imieniny Karola
  • Zapytanie 2: wybierające jedynie imiona osób, które obchodzą imieniny 4 maja
  • Zapytanie 3: obliczające, ile jest dat, w których imieniny obchodzi osoba, której imię zawiera cząstkę mir (np. Miron, Dobromir, Sędzimira)
  • Zapytanie 4: dodające do tabeli imieniny pole zyczenia typu napisowego, które pomieści 500 znaków
• Wyeksportuj dane z tabeli imieniny do pliku w formacie CSV i nadaj mu nazwę imieniny

Grafika

Przygotowanie animacji o nazwie kalendarz.gif:

• Na animację składają się pliki, kolejno: kalendarz01.png, kalendarz02.png, kalendarz03.png, kalendarz04.png, kalendarz05.png, kalendarz06.png, kalendarz07.png, kalendarz08.png, kalendarz09.png, kalendarz10.png, kalendarz11.png i kalendarz12.png
• Nie należy zmieniać właściwości grafik: przezroczystości i wymiarów 500 x 500 px
• Każdy obraz jest pokazywany w animacji przez 350 ms, jedna klatka na warstwę. Udokumentuj ustawienie parametru za pomocą zrzutu ekranu o nazwie parametry_animacji.png. Zrzut musi obejmować cały obszar ekranu z widocznym paskiem zadań

Witryna internetowa

Cechy witryny:

• Składa się ze strony o nazwie kalendarz.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: „Kalendarz”
• Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
• Podział strony na bloki: nagłówkowy, napisu, poniżej trzy bloki umieszczone obok siebie, 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 „Dni, miesiące, lata...”
• Zawartość bloku napisu:
  • Paragraf z efektem działania Skryptu 1
• Zawartość bloku lewego:
  • Tabela o 2 kolumnach i 13 wierszach, z czego niektóre wiersze są scalone. Pierwszy wiersz zawiera komórki nagłówkowe. Treść i wygląd tabeli przedstawiony jest na Ilustracji 3
• Zawartość bloku środkowego:
  • Nagłówek drugiego stopnia o treści: „Sprawdź kto ma urodziny”
  • Formularz przesyłający dane metodą bezpieczną, do tego samego pliku. Zawierający pola:
    • Pole edycyjne o typie przeznaczonym do wprowadzania daty. Kalendarz wyświetla tylko daty z 2024 roku (od 1 stycznia 2024 do 31 grudnia 2024). Pole edycyjne jest wymagane. Pole edycyjne w stanie początkowym po naciśnięciu przycisku kalendarza zostało przedstawione na Ilustracji 4
    • Przycisk o treści „wyślij” wysyłający dane do skryptu z formularza − Efekt działania Skryptu 2
• Zawartość bloku prawego:
  • Animacja kalendarz.gif z tekstem alternatywnym „Kalendarz Majów”, której kliknięcie powoduje otwarcie strony internetowej https://pl.wikipedia.org/wiki/Kalendarz_Majów w nowym oknie przeglądarki
  • Nagłówek drugiego stopnia o treści „Rodzaje kalendarzy”
  • Lista numerowana (uporządkowana) z zagnieżdżonymi dwoma listami punktowanymi (nieuporządkowanymi), zgodna z Ilustracją 5
• Zawartość stopki: paragraf o treści „Stronę opracował(a): ”, dalej 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 ciała strony: krój czcionki Bookman, a w przypadku braku: czcionka Serif
• Wspólne dla bloku nagłówkowego i stopki: kolor tła Indigo, biały kolor czcionki, marginesy wewnętrzne 10 px, wyrównanie tekstu do środka
• Dla bloku napisu: kolor tła BlueViolet, marginesy wewnętrzne 10 px, wyrównanie tekstu do prawej strony
• Wspólny dla bloków lewego i prawego: kolor tła Lavender, wysokość 500 px
• Dodatkowo szerokość bloku lewego 25%, bloku prawego 35%
• Dla bloku środkowego: kolor tła GhostWhite, wyrównanie tekstu do środka, wysokość 500 px, szerokość 40%
• Dla selektora obrazu: oblewanie tekstem po lewej stronie (obraz po prawej stronie), szerokość 50%, marginesy wewnętrzne 10 px
• Dla selektora paragrafu: biały kolor czcionki, rozmiar czcionki 150%, pochylenie czcionki
• Wspólne dla tabeli i formularza: marginesy zewnętrzne 30 px
• Dla tabeli i komórki tabeli: obramowanie połączone, linią ciągłą o szerokości 1 px i kolorze Indigo
• Wspólne dla zwykłej komórki i komórki nagłówkowej tabeli: marginesy wewnętrzne 3 px

UWAGA!

Styl CSS obrazu i paragrafu 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 języka PHP. Zamieszczono także pomoc dla funkcji daty i czasu. 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 kalendarz
• Skrypt 1
  • Wysyła do bazy danych zmodyfikowane zapytanie 2, tak że jest sprawdzana data bieżąca w formacie mm-dd
  • Wyświetla tekst o treści „Dzisiaj jest <dzień tygodnia>, <data>, imieniny: <imiona>”, gdzie <dzień tygodnia> oznacza słowny zapis bieżącego dnia w języku polskim, np. „poniedziałek”, <data> oznacza bieżącą datę w formacie dd-mm-yyyy, a <imiona> - pole zwrócone zapytaniem
• Skrypt 2
  • Pobiera datę z formularza, a następnie przekształca ją do formatu mm-dd
  • Wysyła do bazy danych zmodyfikowane zapytanie 2, tak, że jest sprawdzana data podana w formularzu w formacie mm-dd
  • Wyświetla tekst o treści „Dnia <data> są imieniny: <imiona>”, gdzie <data> oznacza datę pobraną z formularza w formacie yyyy-mm-dd, <imiona> - pole zwrócone zapytaniem
• Na końcu zamykane jest połączenie z serwerem

Polskie dni tygodnia: Poniedziałek, Wtorek, Środa, Czwartek, Piątek, Sobota, Niedziela

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: imieniny.csv, import.png, kalendarz.gif, kalendarz.php, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, parametry_animacji.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ą.