INF.03-03-25.01-SGStyczeń 2025 · 50 kroków · ok. 101 min · 43 kryteria z klucza

Rozwiązanie krok po kroku: Kalendarz imienin w PHP (Wersja podstawowa)

Rozwiązanie buduje stronę o kalendarzu z imieninami: baza kalendarz z tabelą imienin na każdy dzień roku i cztery zapytania - wzorzec LIKE, równość, zliczanie COUNT i dodanie kolumny ALTER TABLE, do tego eksport tabeli do pliku CSV, potem animacja GIF z dwunastu klatek, strona kalendarz.php z tabelą o scalonych wierszach, formularzem z polem daty, listą numerowaną z zagnieżdżonymi listami i animacją-odnośnikiem, style w styl.css i dwa skrypty PHP: pierwszy pokazuje dzisiejszy dzień tygodnia, datę i imieniny, drugi - imieniny w dniu wybranym w formularzu.

Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypty są najpierw pisane najprościej, funkcjami mysqli_query i mysqli_fetch_row, a na końcu zostają przerobione na wersję z prawdziwych projektów: zapytania przygotowane, sprawdzenie daty i htmlspecialchars przy wypisywaniu.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: trzy bloki na siatce CSS zamiast float i clear, PDO z zapytaniem przygotowanym w funkcji, sprawdzenie daty z formularza i htmlspecialchars przy każdym wypisaniu od pierwszej linii - obie wersje są zgodne z kluczem.

Baza i klatki animacji pochodzą z prawdziwego archiwum pliki13 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. PHP nie działa w podglądzie, więc przy krokach ze skryptami widać wynik z tej bazy dla dnia z ilustracji 2 arkusza (czwartek 25 maja 2023) i daty 24 stycznia 2024 wybranej w formularzu.

Jak liczą się punkty. Klucz ma 43 kryteria (R.1.1 - R.5.10), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 33 punkty - można stracić 10 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

Etap 1: Baza danych
Kroki 1-8 · po tym etapie masz 7 z 43 kryteriów (pkt)

Krok 1: Baza danych kalendarz
Kryteria:
R.1.1 Wykonany import tabeli do bazy danych kalendarz, co jest udokumentowane w pliku import.png
ok. 2 min
Polecenie z arkusza
Utwórz bazę danych o nazwie kalendarz, z zestawem polskich znaków (np. utf8_unicode_ci).
Rozpakuj pliki13.7z z pulpitu (hasło k@L3ndarz) do folderu z numerem zdającego: baza.sql i dwanaście klatek kalendarz01.png - kalendarz12.png. W phpMyAdmin: Nowa, nazwa kalendarz, porównywanie z polskimi znakami, np. utf8_unicode_ci - imiona mają polskie litery.
Krok 2: Import tabeli z pliku baza.sql
Kryteria:
R.1.1 Wykonany import tabeli do bazy danych kalendarz, co jest udokumentowane w pliku import.png
ok. 2 min
Polecenie z arkusza
Do utworzonej bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum.
Wybierz bazę kalendarz, potem Import → baza.sql → Wykonaj. Powstaje jedna tabela imieniny z ilustracji 1: 366 wierszy - każdy dzień roku, łącznie z 29 lutego. Data jest zapisana tekstem w formacie mm-dd, bez roku: 7 listopada to 11-07. Imiona są w dopełniaczu, kilka w jednym polu: „Moniki, Floriana, Władysława”.
Krok 3: Zrzut ekranu import.png
Kryteria:
R.1.1 Wykonany import tabeli do bazy danych kalendarz, co jest udokumentowane w pliku import.png
ok. 2 min
Polecenie z arkusza
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.
Print Screen i zapis jako import.png - komunikat o udanym imporcie i tabela imieniny w drzewie bazy.
Typowe błędy
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Krok 4: Zapytanie 1: kiedy imieniny Karola
Kryteria: ,
R.1.2 Zapisany plik kwerendy.txt zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania
R.1.3 Wykonane zapytanie 1 wybierające z tabeli imieniny jedynie daty, w których są imieniny Karola. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT data FROM imieniny WHERE imiona LIKE "%Karola%"; ("%Karol%" jest błędem ) oraz wynik działania udokumentowany zrzutem, na którym widoczne są jedynie trzy rekordy z wartościami: 05-30, 06-03, 11-04
ok. 3 min
Polecenie z arkusza
Zapytanie 1: wybierające z tabeli imieniny jedynie daty, w których są imieniny Karola.
SELECT data FROM imieniny - „jedynie daty”,
WHERE imiona LIKE "%Karola%" - imię może stać w dowolnym miejscu pola, więc % z obu stron.
Ważna pułapka: imiona są w dopełniaczu („imieniny Karola”), a w bazie są też Karoliny. Wzorzec %Karol% łapie i Karola, i Karolinę: 5 dni zamiast 3. Dlatego szukasz formy „Karola” - wynik 05-30, 06-03 i 11-04, jak w kluczu. Zapytanie zapisujesz w kwerendy.txt, zrzut jako kw1.png.
Typowe błędy
LIKE "%Karol%" klucz wprost nazywa błędem - wynik obejmuje imieniny Karoliny.
kwerendy.txt Tekst nowy plik
-- Zapytanie 1 SELECT data FROM imieniny WHERE imiona LIKE "%Karola%";
Podgląd strony po tym kroku
Krok 5: Zapytanie 2: imieniny 4 maja
Kryteria:
R.1.4 Wykonane zapytanie 2 wybierające jedynie imiona osób, które obchodzą imieniny 4 maja. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT imiona FROM imieniny WHERE data = "05-04"; oraz wynik działania udokumentowany zrzutem, na którym widoczny jest dokładnie 1 rekord z danymi: Moniki, Floriana, Władysława
ok. 1 min
Polecenie z arkusza
Zapytanie 2: wybierające jedynie imiona osób, które obchodzą imieniny 4 maja.
4 maja w formacie bazy to 05-04 - najpierw miesiąc, potem dzień, w cudzysłowie, bo pole jest tekstowe. Wynik: jeden wiersz „Moniki, Floriana, Władysława”. Zrzut: kw2.png. To zapytanie wróci w obu skryptach PHP - zamiast 05-04 wstawisz tam datę dzisiejszą albo datę z formularza.
Typowe błędy
data = "04-05" (dzień-miesiąc) szuka 5 kwietnia.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT data FROM imieniny WHERE imiona LIKE "%Karola%"; -- Zapytanie 2 SELECT imiona FROM imieniny WHERE data = "05-04";
Podgląd strony po tym kroku
Krok 6: Zapytanie 3: ile dni z imieniem z cząstką „mir”
Kryteria:
R.1.5 Wykonane zapytanie 3 zliczające daty, w których imieniny obchodzi osoba, której imię zawiera cząstkę "mir". W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT COUNT(data) FROM imieniny WHERE imiona LIKE "%mir%"; (COUNT możliwe również z * lub innym polem) oraz wynik działania udokumentowany zrzutem, na którym widoczna jest jedynie wartość 23
ok. 2 min
Polecenie z arkusza
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).
COUNT(data) zwraca liczbę wierszy spełniających warunek, a nie same wiersze. Wzorzec %mir% łapie cząstkę w środku i na końcu imienia: Dobromira, Sędzimira, Kazimierza. LIKE w MySQL przy porównywaniu utf8_..._ci nie rozróżnia wielkości liter, więc łapie też „Mirosława”. Wynik: 23, jak w kluczu. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT data FROM imieniny WHERE imiona LIKE "%Karola%"; -- Zapytanie 2 SELECT imiona FROM imieniny WHERE data = "05-04"; -- Zapytanie 3 SELECT COUNT(data) FROM imieniny WHERE imiona LIKE "%mir%";
Podgląd strony po tym kroku
Krok 7: Zapytanie 4: nowe pole zyczenia
Kryteria:
R.1.6 Wykonane zapytanie 4 dodające do tabeli imieniny pole zyczenia typu napisowego, które pomieści 500 znaków. W pliku z kwerendami lub na zrzucie istnieje zapis np.: ALTER TABLE imieniny ADD COLUMN zyczenia VARCHAR(500); (COLUMN opcjonalne, dowolny typ tekstowy o długości min. 500 ) oraz wynik działania udokumentowany zrzutem, na którym widoczna jest informacja o poprawnym wykonaniu zapytania lub tabela z dodaną kolumną
ok. 2 min
Polecenie z arkusza
Zapytanie 4: dodające do tabeli imieniny pole zyczenia typu napisowego, które pomieści 500 znaków.
Zmiana budowy tabeli to ALTER TABLE, a nowa kolumna - ADD COLUMN z nazwą i typem. „Napisowe na 500 znaków” to VARCHAR(500) (pasuje też TEXT). Istniejące wiersze dostają w nowej kolumnie NULL. Zrzut kw4.png: komunikat o wykonaniu albo struktura tabeli z kolumną zyczenia.
Typowe błędy
VARCHAR(50) (literówka w długości) nie pomieści 500 znaków - klucz wymaga typu tekstowego o długości co najmniej 500.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT data FROM imieniny WHERE imiona LIKE "%Karola%"; -- Zapytanie 2 SELECT imiona FROM imieniny WHERE data = "05-04"; -- Zapytanie 3 SELECT COUNT(data) FROM imieniny WHERE imiona LIKE "%mir%"; -- Zapytanie 4 ALTER TABLE imieniny ADD COLUMN zyczenia VARCHAR(500);
Podgląd strony po tym kroku

Krok 8: Eksport tabeli do imieniny.csv

Kryteria:

R.1.7 Zapisany plik imieniny w formacie CSV, zawierający wyeksportowane rekordy z tabeli imieniny

ok. 2 min

Polecenie z arkusza

Wyeksportuj dane z tabeli imieniny do pliku w formacie CSV i nadaj mu nazwę imieniny.

W phpMyAdmin klikasz tabelę imieniny, potem Eksport, format CSV i Eksportuj. Plik pobiera się jako imieniny.csv - przenosisz go do folderu z numerem zdającego. Przy ustawieniach domyślnych każdy wiersz to wartości oddzielone przecinkami, w cudzysłowach; pusta kolumna zyczenia (dodana zapytaniem 4) wychodzi jako NULL. Plik ma 366 wierszy (R.1.7).

Typowe błędy

Eksport całej bazy (zakładka Eksport bez wybranej tabeli) w formacie SQL to inny plik niż wymagany CSV z tabeli imieniny.

imieniny.csv CSV nowy plik

"1","01-01","Mieszka, Mieczysława, Marii",NULL
"2","01-02","Izydora, Bazylego, Grzegorza",NULL
"3","01-03","Arlety, Genowefy, Danuty",NULL
"4","01-04","Tytusa, Anieli, Eugeniusza",NULL
"5","01-05","Hanny, Szymona, Edwarda",NULL
"6","01-06","Kacpra, Melchiora, Baltazara",NULL
"7","01-07","Juliana, Lucjana, Rajmunda",NULL
"8","01-08","Seweryna, Mścisława, Juliusza",NULL
"9","01-09","Marceliny, Marianny, Juliana",NULL
"10","01-10","Wilhelma, Dobrosława, Danuty",NULL
"11","01-11","Honoraty, Teodozjusza, Matyldy",NULL
"12","01-12","Grety, Arkadiusza, Rajmunda",NULL
"13","01-13","Bogumiły, Weroniki, Hilarego",NULL
"14","01-14","Feliksa, Domosława, Niny",NULL
"15","01-15","Pawła, Arnolda, Izydora",NULL
"16","01-16","Marcelego, Włodzimierza, Waldemara",NULL
"17","01-17","Antoniego, Rościsława, Jana",NULL
"18","01-18","Piotra, Małgorzaty",NULL
"19","01-19","Henryka, Mariusza, Marty",NULL
"20","01-20","Fabiana, Sebastiana",NULL
"21","01-21","Agnieszki, Jarosława",NULL
"22","01-22","Anastazego, Wincentego",NULL
"23","01-23","Ildefonsa, Rajmunda",NULL
"24","01-24","Felicji, Franciszka, Rafała",NULL
"25","01-25","Pawła, Miłosza, Elwiry",NULL
"26","01-26","Tymoteusza, Michała, Tytusa",NULL
"27","01-27","Przybysława, Anieli, Jerzego",NULL
"28","01-28","Walerego, Radomira, Tomasza",NULL
"29","01-29","Zdzisława, Franciszka, Józefa",NULL
"30","01-30","Macieja, Martyny, Teofila",NULL
"31","01-31","Marceli, Ludwiki, Jana",NULL
"32","02-01","Brygidy, Ignacego, Seweryna",NULL
"33","02-02","Marii, Miłosława",NULL
"34","02-03","Błażeja, Oskara",NULL
"35","02-04","Andrzeja, Weroniki, Joanny",NULL
"36","02-05","Agaty, Adelajdy",NULL
"37","02-06","Doroty, Bogdana, Pawła",NULL
"38","02-07","Ryszarda, Teodora, Romana",NULL
"39","02-08","Hieronima, Sebastiana, Ireny",NULL
"40","02-09","Apolonii, Eryki, Cyryla",NULL
"41","02-10","Elwiry, Jacka, Scholastyki",NULL
"42","02-11","Lucjana, Olgierda",NULL
"43","02-12","Eulalii, Radosława, Modesta",NULL
"44","02-13","Grzegorza, Katarzyny",NULL
"45","02-14","Cyryla, Metodego, Walentego",NULL
"46","02-15","Jowity, Faustyna, Zygfryda",NULL
"47","02-16","Danuty, Julianny, Daniela",NULL
"48","02-17","Aleksego, Zbigniewa, Łukasza",NULL
"49","02-18","Szymona, Konstancji, Flawiana",NULL
"50","02-19","Arnolda, Konrada, Marcelego",NULL
"51","02-20","Leona, Ludomira, Zenobiusza",NULL
"52","02-21","Eleonory, Fortunata, Roberta",NULL
"53","02-22","Marty, Małgorzaty, Piotra",NULL
"54","02-23","Romany, Damiana, Polikarpa",NULL
"55","02-24","Macieja, Bogusza, Sergiusza",NULL
"56","02-25","Wiktora, Cezarego",NULL
"57","02-26","Mirosława, Aleksandra",NULL
"58","02-27","Gabriela, Anastazji",NULL
"59","02-28","Romana, Ludomira, Lecha",NULL
"60","02-29","Lecha, Lutosława",NULL
"61","03-01","Antoniny, Radosława, Dawida",NULL
"62","03-02","Heleny, Halszki, Pawła",NULL
"63","03-03","Maryny, Kunegundy, Tycjana",NULL
"64","03-04","Lucji, Kazimierza, Eugeniusza",NULL
"65","03-05","Adriana, Fryderyka, Teofila",NULL
"66","03-06","Róży, Jordana, Agnieszki",NULL
"67","03-07","Tomasza, Perpetuy, Felicyty",NULL
"68","03-08","Beaty, Wincentego, Jana",NULL
"69","03-09","Franciszki, Brunona",NULL
"70","03-10","Cypriana, Marcela, Aleksandra",NULL
"71","03-11","Ludosława, Konstantyna, Benedykta",NULL
"72","03-12","Grzegorza, Justyna, Alojzego",NULL
"73","03-13","Bożeny, Krystyny",NULL
"74","03-14","Leona, Matyldy, Łazarza",NULL
"75","03-16","Longina, Klemensa, Ludwiki",NULL
"76","03-16","Izabeli, Oktawii, Hilarego",NULL
"77","03-17","Patryka, Zbigniewa, Gertrudy",NULL
"78","03-18","Cyryla, Edwarda, Boguchwały",NULL
"79","03-19","Józefa, Bogdana",NULL
"80","03-20","Klaudii, Eufemii, Maurycego",NULL
"81","03-21","Lubomira, Benedykta",NULL
"82","03-22","Katarzyny, Bogusława",NULL
"83","03-23","Pelagii, Oktawiana, Feliksa",NULL
"84","03-24","Marka, Gabriela, Katarzyny",NULL
"85","03-25","Marioli, Wieńczysława, Ireneusza",NULL
"86","03-26","Larysy, Emmanuela, Teodora",NULL
"87","03-27","Lidii, Ernesta",NULL
"88","03-28","Anieli, Sykstusa, Jana",NULL
"89","03-29","Wiktoryna, Helmuta, Eustachego",NULL
"90","03-30","Anieli, Kwiryna, Leonarda",NULL
"91","03-31","Beniamina, Dobromierza, Leonarda",NULL
"92","04-01","Teodory, Grażyny, Ireny",NULL
"93","04-02","Władysława, Franciszka, Teodozji",NULL
"94","04-03","Ryszarda, Pankracego, Ingi",NULL
"95","04-04","Izydora, Wacława",NULL
"96","04-05","Ireny, Wincentego",NULL
"97","04-06","Izoldy, Celestyna, Wilhelma",NULL
"98","04-07","Rufina, Celestyna, Jana",NULL
"99","04-08","Cezaryny, Dionizego, Julii",NULL
"100","04-09","Marii, Dymitra, Heliodora",NULL
"101","04-10","Michała, Makarego",NULL
"102","04-11","Filipa, Leona",NULL
"103","04-12","Juliusza, Lubosława, Zenona",NULL
"104","04-13","Przemysława, Hermenegildy, Marcina",NULL
"105","04-14","Bereniki, Waleriana, Justyny",NULL
"106","04-15","Ludwiny, Wacławy, Anastazji",NULL
"107","04-16","Kseni, Cecylii, Bernadety",NULL
"108","04-17","Rudolfa, Roberta",NULL
"109","04-18","Bogusławy, Apoloniusza",NULL
"110","04-19","Adolfa, Tymona, Leona",NULL
"111","04-20","Czesława, Agnieszki, Mariana",NULL
"112","04-21","Anzelma, Bartosza, Feliksa",NULL
"113","04-22","Kai, Leonii, Sotera",NULL
"114","04-23","Jerzego, Wojciecha",NULL
"115","04-24","Horacego, Feliksa, Grzegorza",NULL
"116","04-25","Marka, Jarosława, Wasyla",NULL
"117","04-26","Marzeny, Klaudiusza, Marii",NULL
"118","04-27","Zyty, Teofila, Felicji",NULL
"119","04-28","Piotra, Walerii, Witalisa",NULL
"120","04-29","Rity, Katarzyny, Bogusława",NULL
"121","04-30","Mariana, Donaty, Tamary",NULL
"122","05-01","Józefa, Jeremiasza, Filipa",NULL
"123","05-02","Zygmunta, Atanazego, Anatola",NULL
"124","05-03","Marii, Antoniny",NULL
"125","05-04","Moniki, Floriana, Władysława",NULL
"126","05-05","Ireny, Waldemara",NULL
"127","05-06","Judyty, Jakuba, Filipa",NULL
"128","05-07","Gizeli, Ludmiły, Benedykta",NULL
"129","05-08","Stanisława, Lizy, Wiktora",NULL
"130","05-09","Bożydara, Grzegorza, Karoliny",NULL
"131","05-10","Izydora, Antoniny, Symeona",NULL
"132","05-11","Igi, Miry, Władysławy",NULL
"133","05-12","Pankracego, Dominika, Achillesa",NULL
"134","05-13","Serwacego, Roberta, Glorii",NULL
"135","05-14","Bonifacego, Dobiesława, Macieja",NULL
"136","05-15","Zofii, Nadziei, Izydora",NULL
"137","05-16","Andrzeja, Jędrzeja, Szymona",NULL
"138","05-17","Paschalisa, Sławomira, Weroniki",NULL
"139","05-18","Eryka, Feliksa, Jana",NULL
"140","05-19","Iwa, Piotra, Celestyna",NULL
"141","05-20","Bazylego, Bernardyna, Aleksandra",NULL
"142","05-21","Wiktora, Kryspina, Tymoteusza",NULL
"143","05-22","Heleny, Wiesławy, Ryty",NULL
"144","05-23","Iwony, Dezyderego, Kryspina",NULL
"145","05-24","Joanny, Zuzanny",NULL
"146","05-25","Grzegorza, Urbana, Magdaleny",NULL
"147","05-26","Filipa, Pauliny",NULL
"148","05-27","Augustyna, Juliana, Magdaleny",NULL
"149","05-28","Jaromira, Justa, Justyny",NULL
"150","05-29","Magdaleny, Bogumiły, Urszuli",NULL
"151","05-30","Ferdynanda, Karola, Jana",NULL
"152","05-31","Anieli, Petroneli",NULL
"153","06-01","Justyna, Anieli, Konrada",NULL
"154","06-02","Marianny, Marcelina, Piotra",NULL
"155","06-03","Leszka, Tamary, Karola",NULL
"156","06-04","Kwiryny, Franciszka",NULL
"157","06-05","Waltera, Bonifacego, Walerii",NULL
"158","06-06","Norberta, Laurentego, Bogumiła",NULL
"159","06-07","Roberta, Wiesława",NULL
"160","06-08","Medarda, Maksyma, Seweryna",NULL
"161","06-09","Pelagii, Dominika, Efrema",NULL
"162","06-10","Bogumiła, Małgorzaty, Diany",NULL
"163","06-11","Barnaby, Radomiła, Feliksa",NULL
"164","06-12","Janiny, Onufrego, Leona",NULL
"165","06-13","Lucjana, Antoniego",NULL
"166","06-14","Bazylego, Elwiry, Michała",NULL
"167","06-15","Wita, Jolanty",NULL
"168","06-16","Aliny, Benona, Anety",NULL
"169","06-17","Laury, Marcjana, Alberta",NULL
"170","06-18","Marka, Elżbiety",NULL
"171","06-19","Gerwazego, Protazego",NULL
"172","06-20","Diny, Bogny, Florentyny",NULL
"173","06-21","Alicji, Alojzego",NULL
"174","06-22","Pauliny, Tomasza, Jana",NULL
"175","06-23","Wandy, Zenona",NULL
"176","06-24","Jana, Danuty",NULL
"177","06-25","Lucji, Wilhelma, Doroty",NULL
"178","06-26","Jana, Pawła",NULL
"179","06-27","Maryli, Władysława, Cyryla",NULL
"180","06-28","Leona, Ireneusza",NULL
"181","06-29","Piotra, Pawła",NULL
"182","06-30","Emilii, Lucyny",NULL
"183","07-01","Haliny, Mariana, Marcina",NULL
"184","07-02","Jagody, Urbana, Marii",NULL
"185","07-03","Jacka, Anatola, Tomasza",NULL
"186","07-04","Odona, Malwiny, Elżbiety",NULL
"187","07-05","Marii, Antoniego",NULL
"188","07-06","Gotarda, Dominiki, Lucji",NULL
"189","07-07","Cyryla, Estery, Metodego",NULL
"190","07-08","Edgara, Elżbiety, Eugeniusza",NULL
"191","07-09","Lukrecji, Weroniki, Zenona",NULL
"192","07-10","Sylwany, Witalisa, Antoniego",NULL
"193","07-11","Olgi, Kaliny, Benedykta",NULL
"194","07-12","Jana, Brunona, Bonifacego",NULL
"195","07-13","Henryka, Kingi, Andrzeja",NULL
"196","07-14","Ulryka, Bonawentury, Kamila",NULL
"197","07-15","Henryka, Włodzimierza, Dawida",NULL
"198","07-16","Mariki, Benity, Eustachego",NULL
"199","07-17","Anety, Bogdana, Jadwigi",NULL
"200","07-18","Erwina, Kamila, Szymona",NULL
"201","07-19","Wincentego, Wodzisława, Marcina",NULL
"202","07-20","Czesława, Hieronima, Małgorzaty",NULL
"203","07-21","Daniela, Diany, Wawrzyńca",NULL
"204","07-22","Marii, Magdaleny",NULL
"205","07-23","Stwosza, Bogny, Brygidy",NULL
"206","07-24","Kingi, Krystyny",NULL
"207","07-25","Walentyny, Krzysztofa, Jakuba",NULL
"208","07-26","Anny, Mirosławy, Grażyny",NULL
"209","07-27","Lilii, Julii, Natalii",NULL
"210","07-28","Aidy, Marceli, Wiktora",NULL
"211","07-29","Olafa, Marty, Ludmiły",NULL
"212","07-30","Julity, Piotra, Aldony",NULL
"213","07-31","Ignacego, Lubomira, Heleny",NULL
"214","08-01","Nadii, Justyna, Juliana",NULL
"215","08-02","Kariny, Gustawa, Euzebiusza",NULL
"216","08-03","Lidii, Augusta, Nikodema",NULL
"217","08-04","Dominika, Protazego, Jana",NULL
"218","08-05","Oswalda, Marii, Mariana",NULL
"219","08-06","Sławy, Jakuba, Oktawiana",NULL
"220","08-07","Kajetana, Doroty, Sykstusa",NULL
"221","08-08","Cypriana, Emiliana, Dominika",NULL
"222","08-09","Romana, Ryszarda, Edyty",NULL
"223","08-10","Borysa, Filomeny, Wawrzyńca",NULL
"224","08-11","Klary, Zuzanny, Lecha",NULL
"225","08-12","Innocentego, Lecha, Euzebii",NULL
"226","08-13","Diany, Hipolita",NULL
"227","08-14","Alfreda, Euzebiusza, Maksymiliana",NULL
"228","08-15","Napoleona, Stelli",NULL
"229","08-16","Rocha, Stefana, Joachima",NULL
"230","08-17","Mirona, Jacka",NULL
"231","08-18","Ilony, Bronisława, Heleny",NULL
"232","08-19","Bolesława, Juliana",NULL
"233","08-20","Bernarda, Samuela, Sobiesława",NULL
"234","08-21","Joanny, Kazimiery, Piusa",NULL
"235","08-22","Cezarego, Tymoteusza",NULL
"236","08-23","Apolinarego, Filipa",NULL
"237","08-24","Jerzego, Bartosza, Haliny",NULL
"238","08-25","Luizy, Ludwika, Józefa",NULL
"239","08-26","Marii, Aleksandra",NULL
"240","08-27","Cezarego, Józefa, Moniki",NULL
"241","08-28","Patrycji, Wyszomira, Augustyna",NULL
"242","08-29","Beaty, Jana, Sabiny, Racibora",NULL
"243","08-30","Róży, Szczęsnego, Feliksa",NULL
"244","08-31","Bogdana, Ramony, Rajmunda",NULL
"245","09-01","Idziego, Bronisława",NULL
"246","09-02","Juliana, Stefana, Wilhelma",NULL
"247","09-03","Grzegorza, Izabeli, Szymona",NULL
"248","09-04","Idy, Julianny, Rozalii, Róży",NULL
"249","09-05","Doroty, Teodora, Wawrzyńca",NULL
"250","09-06","Beaty, Eugeniusza",NULL
"251","09-07","Domosławy, Melchiora, Reginy",NULL
"252","09-08","Marii, Adrianny, Serafiny",NULL
"253","09-09","¦cibora, Sergiusza, Piotra",NULL
"254","09-10","Łukasza, Aldony, Mścisława",NULL
"255","09-11","Jacka, Prota, Dagny, Hiacynta",NULL
"256","09-12","Gwidona, Radzimira, Marii",NULL
"257","09-13","Eugenii, Aureliusza, Jana",NULL
"258","09-14","Roksany, Bernarda, Cypriana",NULL
"259","09-15","Albina, Nikodema, Marii",NULL
"260","09-16","Edyty, Korneliusza, Cypriana",NULL
"261","09-17","Franciszka, Roberta, Justyna",NULL
"262","09-18","Irmy, Stanisława, Ireny",NULL
"263","09-19","Januarego, Konstancji, Teodora",NULL
"264","09-20","Filipiny, Eustachego, Euzebii",NULL
"265","09-21","Jonasza, Mateusza, Hipolita",NULL
"266","09-22","Tomasza, Maurycego, Joachima",NULL
"267","09-23","Tekli, Bogusława, Linusa",NULL
"268","09-24","Gerarda, Ruperta, Tomiry",NULL
"269","09-25","Aurelii, Władysława, Kleofasa",NULL
"270","09-26","Wawrzyńca, Kosmy, Damiana",NULL
"271","09-27","Wincentego, Mirabeli, Justyny",NULL
"272","09-28","Wacława, Tymona, Marka",NULL
"273","09-29","Michała, Gabriela, Rafała",NULL
"274","09-30","Wery, Honoriusza, Hieronima",NULL
"275","10-01","Danuty, Remigiusza, Teresy",NULL
"276","10-02","Teofila, Dionizego, Sławomira",NULL
"277","10-03","Teresy, Heliodora, Jana",NULL
"278","10-04","Rozalii, Edwina, Franciszka",NULL
"279","10-05","Placyda, Apolinarego",NULL
"280","10-06","Artura, Brunona",NULL
"281","10-07","Marii, Marka, Mirelli",NULL
"282","10-08","Pelagii, Brygidy, Walerii",NULL
"283","10-09","Arnolda, Dionizego, Wincentego",NULL
"284","10-10","Pauliny, Danieli, Leona",NULL
"285","10-11","Aldony, Aleksandra, Dobromiry",NULL
"286","10-12","Eustachego, Maksymiliana, Edwina",NULL
"287","10-13","Geralda, Edwarda, Honorata",NULL
"288","10-14","Liwii, Kaliksta, Bernarda",NULL
"289","10-15","Jadwigi, Teresy, Florentyny",NULL
"290","10-16","Gawła, Ambrożego",NULL
"291","10-17","Wiktora, Marity, Ignacego",NULL
"292","10-18","Juliana, Łukasza",NULL
"293","10-19","Ziemowita, Jana, Pawła",NULL
"294","10-20","Ireny, Kleopatry, Jana",NULL
"295","10-21","Urszuli, Hilarego, Jakuba",NULL
"296","10-22","Halki, Filipa, Salomei",NULL
"297","10-23","Marleny, Seweryna, Igi",NULL
"298","10-24","Rafała, Marcina, Antoniego",NULL
"299","10-25","Darii, Wilhelminy, Bonifacego",NULL
"300","10-26","Lucjana, Ewarysta, Damiana",NULL
"301","10-27","Iwony, Sabiny",NULL
"302","10-28","Szymona, Tadeusza",NULL
"303","10-29","Euzebii, Wioletty, Felicjana",NULL
"304","10-30","Zenobii, Przemysława, Edmunda",NULL
"305","10-31","Urbana, Saturnina, Krzysztofa",NULL
"306","11-01","Seweryna, Wiktoryny",NULL
"307","11-02","Bohdany, Bożydara",NULL
"308","11-03","Sylwii, Marcina, Huberta",NULL
"309","11-04","Karola, Olgierda",NULL
"310","11-05","Elżbiety, Sławomira, Dominika",NULL
"311","11-06","Feliksa, Leonarda, Ziemowita",NULL
"312","11-07","Antoniego, Żytomira, Ernesta",NULL
"313","11-08","Seweryna, Bogdana, Klaudiusza",NULL
"314","11-09","Aleksandra, Ludwika, Teodora",NULL
"315","11-10","Leny, Ludomira, Leona",NULL
"316","11-11","Marcina, Bartłomieja, Teodora",NULL
"317","11-12","Renaty, Witolda, Jozafata",NULL
"318","11-13","Mateusza, Izaaka, Stanisława",NULL
"319","11-14","Rogera, Serafina, Wawrzyńca",NULL
"320","11-15","Alberta, Leopolda",NULL
"321","11-16","Gertrudy, Edmunda, Marii",NULL
"322","11-17","Salomei, Grzegorza, Elżbiety",NULL
"323","11-18","Romana, Klaudyny, Karoliny",NULL
"324","11-19","Seweryny, Maksyma, Salomei",NULL
"325","11-20","Anatola, Sędzimira, Rafała",NULL
"326","11-21","Alberta, Janusza, Konrada",NULL
"327","11-22","Cecylii, Wszemiły, Stefana",NULL
"328","11-23","Adeli, Klemensa, Felicyty",NULL
"329","11-24","Flory, Emmy, Chryzogona",NULL
"330","11-25","Erazma, Katarzyny",NULL
"331","11-26","Delfiny, Sylwestra, Konrada",NULL
"332","11-27","Waleriana, Wirgiliusza, Maksyma",NULL
"333","11-28","Lesława, Zdzisława, Stefana",NULL
"334","11-29","Błażeja, Saturnina",NULL
"335","11-30","Andrzeja, Maury, Konstantego",NULL
"336","12-01","Natalii, Eligiusza, Edmunda",NULL
"337","12-02","Balbiny, Bibianny, Pauliny",NULL
"338","12-03","Franciszka, Ksawerego, Kasjana",NULL
"339","12-04","Barbary, Krystiana, Jana",NULL
"340","12-05","Sabiny, Krystyny, Edyty",NULL
"341","12-06","Mikołaja, Jaremy, Emiliana",NULL
"342","12-07","Marcina, Ambrożego, Teodora",NULL
"343","12-08","Marii, Światozara, Makarego",NULL
"344","12-09","Wiesława Leokadii Joanny",NULL
"345","12-10","Julii, Danieli, Bogdana",NULL
"346","12-11","Damazego, Waldemara, Daniela",NULL
"347","12-12","Dagmary, Aleksandra, Ady",NULL
"348","12-13","Lucji, Otylii",NULL
"349","12-14","Alfreda, Izydora, Jana",NULL
"350","12-15","Niny, Celiny, Waleriana",NULL
"351","12-16","Albiny, Zdzisławy, Alicji",NULL
"352","12-17","Olimpii, Łazarza, Floriana",NULL
"353","12-18","Gracjana, Bogusława, Laurencji",NULL
"354","12-19","Gabrieli, Dariusza, Eleonory",NULL
"355","12-20","Bogumiły, Dominika",NULL
"356","12-21","Tomisława, Seweryna, Piotra",NULL
"357","12-22","Zenona, Honoraty, Franciszki",NULL
"358","12-23","Wiktorii, Sławomiry, Jana",NULL
"359","12-24","Adama, Ewy, Eweliny",NULL
"360","12-25","Anastazji, Eugenii",NULL
"361","12-26","Dionizego, Szczepana",NULL
"362","12-27","Jana, Żanety, Maksyma",NULL
"363","12-28","Teofilii, Godzisława, Cezarego",NULL
"364","12-29","Dawida, Tomasza, Dominika",NULL
"365","12-30","Rainera, Eugeniusza, Irmy",NULL
"366","12-31","Sylwestra, Melanii, Mariusza",NULL

Etap 2: Animacja i strona HTML
Kroki 9-29 · po tym etapie masz 22 z 43 kryteriów (pkt)

Krok 9: Warstwy animacji: dwanaście klatek
Kryteria:
R.2.1 Utworzony plik kalendarz.gif o rozmiarze 500 x 500 px, z przezroczystością, zawierający animację złożoną z plików, kolejno od kalendarz01.png do kalendarz12.png (widać kolejne ruchy strzałki-słońca ), jeden obraz na klatkę
ok. 4 min
Polecenie z arkusza
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.
W GIMP-ie: Plik → Otwórz jako warstwy, zaznaczasz wszystkie dwanaście plików naraz. Każdy plik staje się osobną warstwą, a warstwa w GIF-ie to jedna klatka. Kolejność: najniższa warstwa jest pierwszą klatką - na liście warstw kalendarz01 musi być na dole, a kalendarz12 na górze (w razie potrzeby Warstwa → Stos → Odwróć kolejność warstw). Obrazów nie skalujesz i nie spłaszczasz - zostają 500 × 500 z przezroczystym tłem (R.2.1).
Krok 10: Eksport kalendarz.gif: 350 ms na klatkę
Kryteria: ,
R.2.1 Utworzony plik kalendarz.gif o rozmiarze 500 x 500 px, z przezroczystością, zawierający animację złożoną z plików, kolejno od kalendarz01.png do kalendarz12.png (widać kolejne ruchy strzałki-słońca ), jeden obraz na klatkę
R.2.2 Ustawiony czas wyświetlenia obrazów animacji na 350 ms, co jest udokumentowane zrzutem parametry_animacji.png
ok. 4 min
Polecenie z arkusza
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ń.
Plik → Eksportuj jako kalendarz.gif. W oknie eksportu zaznaczasz Jako animację, opóźnienie między klatkami 350 ms i rozmieszczenie klatek Jedna klatka na warstwę (zastąp) - bez tego klatki nakładałyby się na siebie i strzałka-słońce zostawiałaby ślad. Zanim klikniesz Eksportuj, robisz zrzut całego ekranu z tym oknem: parametry_animacji.png (R.2.2). Animacja w podglądzie obraca strzałkę jak wskazówkę.
Typowe błędy
Zwykły eksport GIF bez zaznaczonego „Jako animację” zapisuje tylko jedną, spłaszczoną klatkę.
Podgląd strony po tym kroku
Krok 11: Plik kalendarz.php w HTML5
Kryteria:
R.2.3 Witryna internetowa zapisana w pliku kalendarz.php oraz zapisany jawnie standard kodowania polskich znaków, deklaracja HTML5 <!DOCTYPE HTML>, zadeklarowany język witryny: polski np. <html lang="pl"> oraz nadany tytuł strony "Kalendarz”, Strona zawiera sekcje head i body
ok. 2 min
Polecenie z arkusza
Cechy witryny: Składa się ze strony o nazwie kalendarz.php. Zapisana w języku HTML5.
Strona ma rozszerzenie .php, bo za chwilę dojdą do niej skrypty - ale na razie to zwykły HTML5 i podgląd pokazuje go wprost. Na egzaminie plik leży w htdocs XAMPP-a i otwierasz go przez http://localhost/....
kalendarz.php PHP nowy plik
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Podgląd strony po tym kroku (kalendarz.php)
Krok 12: Język strony
Kryteria:
R.2.3 Witryna internetowa zapisana w pliku kalendarz.php oraz zapisany jawnie standard kodowania polskich znaków, deklaracja HTML5 <!DOCTYPE HTML>, zadeklarowany język witryny: polski np. <html lang="pl"> oraz nadany tytuł strony "Kalendarz”, Strona zawiera sekcje head i body
ok. 1 min
Polecenie z arkusza
Zadeklarowany polski język zawartości witryny.
Atrybut lang="pl" w znaczniku <html>.
kalendarz.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> </head> <body> </body> </html>
Podgląd strony po tym kroku (kalendarz.php)
Krok 13: Kodowanie polskich znaków
Kryteria:
R.2.3 Witryna internetowa zapisana w pliku kalendarz.php oraz zapisany jawnie standard kodowania polskich znaków, deklaracja HTML5 <!DOCTYPE HTML>, zadeklarowany język witryny: polski np. <html lang="pl"> oraz nadany tytuł strony "Kalendarz”, Strona zawiera sekcje head i body
ok. 1 min
Polecenie z arkusza
Jawnie zastosowany właściwy standard kodowania polskich znaków.
<meta charset="UTF-8"> jako pierwszy element <head>.
kalendarz.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> </head> <body> </body> </html>
Podgląd strony po tym kroku (kalendarz.php)
Krok 14: Tytuł strony
Kryteria:
R.2.3 Witryna internetowa zapisana w pliku kalendarz.php oraz zapisany jawnie standard kodowania polskich znaków, deklaracja HTML5 <!DOCTYPE HTML>, zadeklarowany język witryny: polski np. <html lang="pl"> oraz nadany tytuł strony "Kalendarz”, Strona zawiera sekcje head i body
ok. 1 min
Polecenie z arkusza
Tytuł strony widoczny na karcie przeglądarki: „Kalendarz”.
<title> w <head>.
kalendarz.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Kalendarz</title> </head> <body> </body> </html>
Podgląd strony po tym kroku (kalendarz.php)
Krok 15: Podpięcie arkusza stylów
Kryteria:
R.3.2 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl.css, formatowanie CSS pochodzi jedynie z tego arkusza. Uwaga: kryterium to nie jest spełnione również, gdy zdający źle przypisał co najmniej jeden selektor do bloku (np. kropka zamiast #)
ok. 1 min
Polecenie z arkusza
Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony.
W tym arkuszu styl.css, bez „e” na końcu.
kalendarz.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Kalendarz</title> <link rel="stylesheet" href="styl.css"> </head> <body> </body> </html>
Podgląd strony po tym kroku (kalendarz.php)
Krok 16: Bloki: nagłówek, napis, trzy bloki, stopka
Kryteria:
R.2.4 Zdefiniowany układ strony dzielący ją na bloki: nagłówkowy, napisu, lewy, środkowy, prawy, stopki przy pomocy semantycznych znaczników sekcji języka HTML5 zgodnie z ich znaczeniem, w tym do części nagłówkowej - header, do stopki - footer. Dopuszcza się dodatkowe użycie bloków div lub section
ok. 2 min
Polecenie z arkusza
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.
<header> i <footer> - jak wymaga klucz (R.2.4). Blok napisu i trzy bloki treści to <section> z identyfikatorami po angielsku: caption, left, middle, right - po nich dobierze się do nich styl. Ustawienie trzech bloków obok siebie zrobisz w CSS.
kalendarz.php PHP zmienione: 12 linii
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Kalendarz</title> <link rel="stylesheet" href="styl.css"> </head> <body> <header> </header> <section id="caption"> </section> <section id="left"> </section> <section id="middle"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (kalendarz.php)
Krok 17: Nagłówek pierwszego stopnia
Kryteria:
R.2.5 Umieszczone w bloku nagłówkowym <h1>: "Dni, miesiące, lata…", w bloku środkowym <h2>: "Sprawdź kto ma urodziny", w bloku prawym <h2> "Rodzaje kalendarzy" oraz przynajmniej jeden paragraf
ok. 1 min
Polecenie z arkusza
Zawartość bloku nagłówkowego: Nagłówek pierwszego stopnia o treści „Dni, miesiące, lata...”.
<h1> w <header>.
kalendarz.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Kalendarz</title> <link rel="stylesheet" href="styl.css"> </head> <body> <header> <h1>Dni, miesiące, lata...</h1> </header> <section id="caption"> </section> <section id="left"> </section> <section id="middle"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (kalendarz.php)
Krok 18: Blok napisu: akapit na wynik skryptu
Kryteria:
R.2.5 Umieszczone w bloku nagłówkowym <h1>: "Dni, miesiące, lata…", w bloku środkowym <h2>: "Sprawdź kto ma urodziny", w bloku prawym <h2> "Rodzaje kalendarzy" oraz przynajmniej jeden paragraf
ok. 1 min
Polecenie z arkusza
Zawartość bloku napisu: Paragraf z efektem działania Skryptu 1.
Na razie pusty akapit <p> - jego treść wypisze później Skrypt 1.
kalendarz.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Kalendarz</title> <link rel="stylesheet" href="styl.css"> </head> <body> <header> <h1>Dni, miesiące, lata...</h1> </header> <section id="caption"> <p></p> </section> <section id="left"> </section> <section id="middle"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (kalendarz.php)

Krok 19: Tabela: wiersz nagłówkowy

Kryteria:

R.2.7 Pierwszy wiersz tabeli zawiera komórki nagłówkowe, zastosowany znacznik <th>

ok. 1 min

Polecenie z arkusza

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.

Pierwszy wiersz to komórki nagłówkowe <th>: „liczba dni” i „miesiąc” (R.2.7). Przeglądarka pogrubia je i wyśrodkowuje sama.

kalendarz.php PHP zmienione: 6 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
        </table>
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 20: Tabela: miesiące po 31 dni - komórka scalona

Kryteria:

R.2.6 W bloku lewym utworzona tabela o 2 kolumnach i 13 wierszach, z czego wiersze w pierwszej kolumnie są scalone zgodnie z ilustracją 3 arkusza egzaminacyjnego. Zastosowane znaczniki <table>, <tr>, <td> oraz atrybut rowspan

ok. 3 min

Polecenie z arkusza

Tabela o 2 kolumnach i 13 wierszach, z czego niektóre wiersze są scalone.

Siedem miesięcy ma 31 dni. Liczbę 31 wpisujesz raz, w pierwszym z siedmiu wierszy, z atrybutem rowspan="7" - komórka sięga w dół przez siedem wierszy. Dlatego w kolejnych sześciu wierszach jest już tylko jedna komórka z nazwą miesiąca: drugą kolumnę zajmuje komórka scalona (R.2.6).

Typowe błędy

Wpisanie liczby dni w każdym wierszu mimo rowspan przesuwa nazwy miesięcy do trzeciej, nieistniejącej kolumny.

kalendarz.php PHP zmienione: 22 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
        </table>
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 21: Tabela: miesiące po 30 dni i luty

Kryteria:

ok. 2 min

Polecenie z arkusza

Treść i wygląd tabeli przedstawiony jest na ilustracji 3.

To samo dla czterech miesięcy po 30 dni (rowspan="4") i ostatni wiersz bez scalania: „28 lub 29” i luty. Razem 13 wierszy: nagłówek i 12 miesięcy (R.2.6).

kalendarz.php PHP zmienione: 17 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 22: Blok środkowy: nagłówek drugiego stopnia

Kryteria:

R.2.5 Umieszczone w bloku nagłówkowym <h1>: "Dni, miesiące, lata…", w bloku środkowym <h2>: "Sprawdź kto ma urodziny", w bloku prawym <h2> "Rodzaje kalendarzy" oraz przynajmniej jeden paragraf

ok. 1 min

Polecenie z arkusza

Zawartość bloku środkowego: Nagłówek drugiego stopnia o treści: „Sprawdź kto ma urodziny”.

<h2>. Treść jest z arkusza - choć strona pokazuje imieniny, a nie urodziny.

kalendarz.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 23: Formularz wysyłany metodą POST do tej samej strony

Kryteria: ,

R.2.8 W bloku środkowym umieszczony formularz z polem edycyjnym i przyciskiem "wyślij", zastosowany znacznik <form>

R.3.5 Formularz wysyła dane metodą POST do tego samego pliku (poprawne również bez atrybutu action )

ok. 2 min

Polecenie z arkusza

Formularz przesyłający dane metodą bezpieczną, do tego samego pliku.

„Metoda bezpieczna” w rozumieniu arkusza to method="post": dane idą w treści żądania, nie w adresie strony. W specyfikacji HTTP „bezpieczne” są co prawda metody, które niczego nie zmieniają na serwerze (GET i HEAD), ale arkusz używa tego słowa w innym sensie, a klucz wymaga POST. Bez atrybutu action formularz wysyła dane do tego samego pliku - kalendarz.php przeładuje się i odczyta datę w Skrypcie 2 (R.2.8, R.3.5).

kalendarz.php PHP zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
        </form>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 24: Pole daty tylko z 2024 roku, wymagane

Kryteria:

R.3.4 Pole edycyjne jest typu date , minimalna wartość 2024-01-01, maksymalna 2024-12-31 oraz zawiera atrybut required

ok. 3 min

Polecenie z arkusza

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.

type="date" - przeglądarka dokłada przycisk z kalendarzem,
min="2024-01-01" i max="2024-12-31" - daty zawsze w formacie rrrr-mm-dd; spoza zakresu nie da się wybrać (opis w ramce „Pole edycyjne typu data” arkusza). Ponieważ zakres obejmuje jeden rok, Chrome od razu podpowiada rok 2024 - jak na ilustracji 4,
required - formularza z pustym polem nie da się wysłać,
name="date" - pod tą nazwą Skrypt 2 znajdzie datę w $_POST.

Kliknij ikonę kalendarza w podglądzie (R.3.4).

Typowe błędy

Bez atrybutu name przeglądarka nie wysyła wartości pola - $_POST zostaje pusty, a Skrypt 2 nic nie wypisze.

kalendarz.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
        </form>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 25: Przycisk „wyślij”

Kryteria: ,

R.2.8 W bloku środkowym umieszczony formularz z polem edycyjnym i przyciskiem "wyślij", zastosowany znacznik <form>

R.3.6 Przycisk realizuje funkcję wysłania danych z formularza (input lub button z typem submit lub button bez typu )

ok. 1 min

Polecenie z arkusza

Przycisk o treści „wyślij” wysyłający dane do skryptu z formularza.

<button type="submit"> w środku <form> wysyła formularz (R.3.6). Treść małą literą, jak w arkuszu.

kalendarz.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 26: Animacja jako odnośnik do Wikipedii

Kryteria: ,

R.2.10 W bloku prawym umieszczony obraz z animacją z tekstem alternatywnym "Kalendarz Majów"

R.3.3 Kliknięcie animacji inicjuje otwarcie strony https://pl.wikipedia.org/wiki/Kalendarz_Majów w nowym oknie przeglądarki

ok. 2 min

Polecenie z arkusza

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.

Obraz wstawiasz do środka odnośnika <a> - wtedy cały obraz jest klikalny. target="_blank" otwiera stronę w nowym oknie (karcie) przeglądarki (R.2.10, R.3.3). Animowany GIF wstawia się tak samo jak zwykły obraz.

kalendarz.php PHP zmienione: 3 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 27: Nagłówek „Rodzaje kalendarzy”

Kryteria:

ok. 1 min

Polecenie z arkusza

Nagłówek drugiego stopnia o treści „Rodzaje kalendarzy”.

Drugi <h2>, pod obrazem.

kalendarz.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 28: Lista numerowana z dwiema listami w środku

Kryteria:

R.2.9 W bloku prawym umieszczona jedna lista numerowana z dwoma elementami, każdy z nich zagnieżdża listę punktowaną, pierwsza podlista ma trzy elementy, druga dwa. Zastosowane znaczniki <ol>, <ul> i <li>, zagnieżdżenie wewnątrz znacznika <li>

ok. 3 min

Polecenie z arkusza

Lista numerowana (uporządkowana) z zagnieżdżonymi dwoma listami punktowanymi (nieuporządkowanymi), zgodna z ilustracją 5.

Lista numerowana to <ol>, punktowana - <ul>. Zagnieżdżenie polega na tym, że cała lista <ul> stoi wewnątrz elementu <li> - przed jego zamknięciem </li>. Pierwszy punkt („słoneczny”) ma podlistę z trzema elementami, drugi („księżycowy”) z dwoma (R.2.9).

Typowe błędy

<ul> wstawione między dwa <li> (po </li>) przeglądarka pokaże podobnie, ale to błąd składni - klucz wymaga zagnieżdżenia wewnątrz <li>.

kalendarz.php PHP zmienione: 15 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 29: Stopka

Kryteria:

ok. 1 min

Polecenie z arkusza

Zawartość stopki: paragraf o treści „Stronę opracował(a): ”, dalej numer zdającego.

Akapit w <footer>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania.

kalendarz.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p></p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Etap 3: Styl CSS
Kroki 30-38 · po tym etapie masz 33 z 43 kryteriów (pkt)
Krok 30: Plik styl.css: czcionka strony
Kryteria:
R.4.1 Ustawiony dla ciała strony (dla body lub kontenera całej strony ): krój czcionki Bookman, Serif (tylko taka kolejność jest prawidłowa )
ok. 1 min
Polecenie z arkusza
Dla ciała strony: krój czcionki Bookman, a w przypadku braku: czcionka Serif.
Lista krojów po przecinku: przeglądarka bierze pierwszy, który ma, a serif to rodzina zapasowa - dowolna czcionka szeryfowa. Kolejność ma znaczenie: klucz uznaje tylko „Bookman, serif” (R.4.1).
styl.css CSS nowy plik
body { font-family: Bookman, serif; }
Podgląd strony po tym kroku (kalendarz.php)
Krok 31: Nagłówek i stopka
Kryteria: , , ,
R.4.2 Ustawiony kolor tła Indigo dla bloków nagłówkowego i stopki, BlueViolet dla bloku napisu, Lavender dla bloków lewego i prawego, GhostWhite dla środkowego
R.4.3 Ustawiony biały kolor czcionki dla bloku nagłówkowego i stopki
R.4.5 Ustawione wyrównanie tekstu do środka dla bloków nagłówkowego, środkowego i stopki oraz do prawej strony dla bloku napisu
R.4.6 Ustawione marginesy wewnętrzne (padding) 10px dla bloków nagłówkowego, napisu, stopki i obrazu, 3px dla komórek tabeli oraz ustawione marginesy zewnętrzne (margin) 30px dla tabeli i formularza
ok. 1 min
Polecenie z arkusza
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.
Jedna reguła dla dwóch selektorów.
styl.css CSS zmienione: 6 linii
body { font-family: Bookman, serif; } header, footer { background-color: Indigo; color: white; padding: 10px; text-align: center; }
Podgląd strony po tym kroku (kalendarz.php)
Krok 32: Blok napisu
Kryteria: , ,
R.4.2 Ustawiony kolor tła Indigo dla bloków nagłówkowego i stopki, BlueViolet dla bloku napisu, Lavender dla bloków lewego i prawego, GhostWhite dla środkowego
R.4.5 Ustawione wyrównanie tekstu do środka dla bloków nagłówkowego, środkowego i stopki oraz do prawej strony dla bloku napisu
R.4.6 Ustawione marginesy wewnętrzne (padding) 10px dla bloków nagłówkowego, napisu, stopki i obrazu, 3px dla komórek tabeli oraz ustawione marginesy zewnętrzne (margin) 30px dla tabeli i formularza
ok. 1 min
Polecenie z arkusza
Dla bloku napisu: kolor tła BlueViolet, marginesy wewnętrzne 10 px, wyrównanie tekstu do prawej strony.
Selektor identyfikatora zaczyna się od #. Napis Skryptu 1 stanie przy prawej krawędzi, jak na ilustracji 2.
styl.css CSS zmienione: 5 linii
body { font-family: Bookman, serif; } header, footer { background-color: Indigo; color: white; padding: 10px; text-align: center; } #caption { background-color: BlueViolet; padding: 10px; text-align: right; }
Podgląd strony po tym kroku (kalendarz.php)
Krok 33: Bloki lewy i prawy
Kryteria: ,
R.4.2 Ustawiony kolor tła Indigo dla bloków nagłówkowego i stopki, BlueViolet dla bloku napisu, Lavender dla bloków lewego i prawego, GhostWhite dla środkowego
R.4.4 Ustawiona wysokość bloku lewego, środkowego i prawego 500px oraz szerokość bloku lewego 25%, środkowego 40%, prawego 35% (width lub grid-template-columns lub flex) oraz dla selektora img szerokość 50%
ok. 2 min
Polecenie z arkusza
Wspólny dla bloków lewego i prawego: kolor tła Lavender, wysokość 500 px. Dodatkowo szerokość bloku lewego 25%, bloku prawego 35%.
Wspólne cechy w jednej regule, szerokości osobno - każdy blok ma inną.
styl.css CSS zmienione: 10 linii
body { font-family: Bookman, serif; } header, footer { background-color: Indigo; color: white; padding: 10px; text-align: center; } #caption { background-color: BlueViolet; padding: 10px; text-align: right; } #left, #right { background-color: Lavender; height: 500px; } #left { width: 25%; } #right { width: 35%; }
Podgląd strony po tym kroku (kalendarz.php)
Krok 34: Blok środkowy
Kryteria: , ,
R.4.2 Ustawiony kolor tła Indigo dla bloków nagłówkowego i stopki, BlueViolet dla bloku napisu, Lavender dla bloków lewego i prawego, GhostWhite dla środkowego
R.4.4 Ustawiona wysokość bloku lewego, środkowego i prawego 500px oraz szerokość bloku lewego 25%, środkowego 40%, prawego 35% (width lub grid-template-columns lub flex) oraz dla selektora img szerokość 50%
R.4.5 Ustawione wyrównanie tekstu do środka dla bloków nagłówkowego, środkowego i stopki oraz do prawej strony dla bloku napisu
ok. 1 min
Polecenie z arkusza
Dla bloku środkowego: kolor tła GhostWhite, wyrównanie tekstu do środka, wysokość 500 px, szerokość 40%.
25% + 40% + 35% = 100% - trzy bloki wypełnią całą szerokość, o ile nie dostaną poziomych marginesów ani ramek.
styl.css CSS zmienione: 6 linii
body { font-family: Bookman, serif; } header, footer { background-color: Indigo; color: white; padding: 10px; text-align: center; } #caption { background-color: BlueViolet; padding: 10px; text-align: right; } #left, #right { background-color: Lavender; height: 500px; } #left { width: 25%; } #right { width: 35%; } #middle { background-color: GhostWhite; text-align: center; height: 500px; width: 40%; }
Podgląd strony po tym kroku (kalendarz.php)
Krok 35: Obraz: po prawej, opływany tekstem
Kryteria: , ,
R.4.4 Ustawiona wysokość bloku lewego, środkowego i prawego 500px oraz szerokość bloku lewego 25%, środkowego 40%, prawego 35% (width lub grid-template-columns lub flex) oraz dla selektora img szerokość 50%
R.4.6 Ustawione marginesy wewnętrzne (padding) 10px dla bloków nagłówkowego, napisu, stopki i obrazu, 3px dla komórek tabeli oraz ustawione marginesy zewnętrzne (margin) 30px dla tabeli i formularza
R.4.7 Ustawione dla obrazu opływanie tekstem po lewej stronie float:right
ok. 2 min
Polecenie z arkusza
Dla selektora obrazu: oblewanie tekstem po lewej stronie (obraz po prawej stronie), szerokość 50%, marginesy wewnętrzne 10 px.
float: right przesuwa obraz do prawej krawędzi bloku, a nagłówek i lista zajmują miejsce po jego lewej stronie - tekst „opływa” obraz (R.4.7). Szerokość 50% liczy się od szerokości bloku prawego.
styl.css CSS zmienione: 5 linii
body { font-family: Bookman, serif; } header, footer { background-color: Indigo; color: white; padding: 10px; text-align: center; } #caption { background-color: BlueViolet; padding: 10px; text-align: right; } #left, #right { background-color: Lavender; height: 500px; } #left { width: 25%; } #right { width: 35%; } #middle { background-color: GhostWhite; text-align: center; height: 500px; width: 40%; } img { float: right; width: 50%; padding: 10px; }
Podgląd strony po tym kroku (kalendarz.php)

Krok 36: Akapity: biała, większa kursywa

Kryteria:

R.4.8 Ustawione dla selektora p: rozmiar czcionki 150%, pochylenie, biały kolor

ok. 1 min

Polecenie z arkusza

Dla selektora paragrafu: biały kolor czcionki, rozmiar czcionki 150%, pochylenie czcionki.

Selektor znacznika p działa na akapit w bloku napisu i w stopce (R.4.8). Wynik Skryptu 2 nie jest akapitem, dlatego na ilustracji 2 zostaje czarny.

styl.css CSS zmienione: 5 linii

body {
    font-family: Bookman, serif;
}
header, footer {
    background-color: Indigo;
    color: white;
    padding: 10px;
    text-align: center;
}
#caption {
    background-color: BlueViolet;
    padding: 10px;
    text-align: right;
}
#left, #right {
    background-color: Lavender;
    height: 500px;
}
#left {
    width: 25%;
}
#right {
    width: 35%;
}
#middle {
    background-color: GhostWhite;
    text-align: center;
    height: 500px;
    width: 40%;
}
img {
    float: right;
    width: 50%;
    padding: 10px;
}
p {
    color: white;
    font-size: 150%;
    font-style: italic;
}

Podgląd strony po tym kroku (kalendarz.php)

Krok 37: Tabela i formularz: marginesy, ramki
Kryteria: , ,
R.4.6 Ustawione marginesy wewnętrzne (padding) 10px dla bloków nagłówkowego, napisu, stopki i obrazu, 3px dla komórek tabeli oraz ustawione marginesy zewnętrzne (margin) 30px dla tabeli i formularza
R.4.9 Ustawione dla tabeli i komórki tabeli obramowanie 1px solid Indigo
R.4.10 Ustawione dla tabeli obramowanie połączone border-collapse: collapse
ok. 2 min
Polecenie z arkusza
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.
Trzy reguły, każda dla innej grupy selektorów: table, form - margines, table, td - ramka i border-collapse: collapse, które łączy podwójne ramki sąsiednich komórek w jedną linię, td, th - odstęp tekstu od ramki (R.4.6, R.4.9, R.4.10).
styl.css CSS zmienione: 10 linii
body { font-family: Bookman, serif; } header, footer { background-color: Indigo; color: white; padding: 10px; text-align: center; } #caption { background-color: BlueViolet; padding: 10px; text-align: right; } #left, #right { background-color: Lavender; height: 500px; } #left { width: 25%; } #right { width: 35%; } #middle { background-color: GhostWhite; text-align: center; height: 500px; width: 40%; } img { float: right; width: 50%; padding: 10px; } p { color: white; font-size: 150%; font-style: italic; } table, form { margin: 30px; } table, td { border: 1px solid Indigo; border-collapse: collapse; } td, th { padding: 3px; }
Podgląd strony po tym kroku (kalendarz.php)

Krok 38: Układ: trzy bloki obok siebie

Kryteria:

R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z ilustracją 2 w arkuszu egzaminacyjnym (prawidłowo zastosowane właściwości CSS decydujące o układzie strony np. float i clear albo display flex albo grid albo position )

ok. 2 min

Polecenie z arkusza

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.

float: left dla trzech bloków ustawia je obok siebie; clear: both dla stopki sprowadza ją pod nie. Blok napisu nie dostaje float, więc zostaje na całą szerokość nad blokami (R.3.1).

styl.css CSS zmienione: 6 linii

body {
    font-family: Bookman, serif;
}
header, footer {
    background-color: Indigo;
    color: white;
    padding: 10px;
    text-align: center;
}
#caption {
    background-color: BlueViolet;
    padding: 10px;
    text-align: right;
}
#left, #right {
    background-color: Lavender;
    height: 500px;
}
#left {
    width: 25%;
}
#right {
    width: 35%;
}
#middle {
    background-color: GhostWhite;
    text-align: center;
    height: 500px;
    width: 40%;
}
img {
    float: right;
    width: 50%;
    padding: 10px;
}
p {
    color: white;
    font-size: 150%;
    font-style: italic;
}
table, form {
    margin: 30px;
}
table, td {
    border: 1px solid Indigo;
    border-collapse: collapse;
}
td, th {
    padding: 3px;
}
#left, #middle, #right {
    float: left;
}
footer {
    clear: both;
}

Podgląd strony po tym kroku (kalendarz.php)

Etap 4: Skrypty PHP

Kroki 39-47 · po tym etapie masz 43 z 43 kryteriów (pkt)

Krok 39: Połączenie z bazą kalendarz

Kryteria: ,

R.5.1 Skrypt jest napisany w języku PHP i zawiera przynajmniej jedną zgodną z treścią zadania instrukcję

R.5.2 Skrypt realizuje połączenie z serwerem bazy danych i wybór bazy kalendarz oraz ostatnią operacją na bazie jest jej zamknięcie

ok. 2 min

Polecenie z arkusza

Łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie kalendarz.

Skrypt 1 piszesz w środku akapitu bloku napisu - to, co wypisze, stanie się treścią akapitu. mysqli_connect z czterema argumentami z arkusza łączy się z serwerem i od razu wybiera bazę kalendarz; uchwyt połączenia trzymasz w $connection - użyją go oba skrypty (R.5.1, R.5.2).

kalendarz.php PHP zmienione: 5 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 40: Skrypt 1: dzień tygodnia po polsku

Kryteria:

R.5.4 Skrypt 1 pobiera bieżący dzień tygodnia lub numer dnia tygodnia i przekształca go na dzień tygodnia zapisany w języku polskim

ok. 3 min

Polecenie z arkusza

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”.

date("l") zwraca nazwę dnia po angielsku („Thursday”), więc przekładasz numer dnia na polski. date("N") daje numer od 1 (poniedziałek) do 7 (niedziela) - opis w ramce z funkcjami daty arkusza. Tablica $days ma nazwy w tej samej kolejności, a jej indeksy liczą się od 0, stąd date("N") - 1 (R.5.4).

Typowe błędy

date("w") numeruje dni od niedzieli (0) - z tablicą zaczynającą się od poniedziałku każdy dzień przesunie się o jeden.

kalendarz.php PHP zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
                $days = ["poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota", "niedziela"];
                $dayName = $days[date("N") - 1];
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony bez zmian - taki jak po kroku 39.

Krok 41: Skrypt 1: dzisiejsza data w dwóch formatach

Kryteria:

R.5.5 Skrypt 1 ustala bieżącą datę w formacie mm-dd oraz dd-mm-yy, np. $data = date("m-d"); $dataPelna = date("d-m-Y");

ok. 2 min

Polecenie z arkusza

Wysyła do bazy danych zmodyfikowane zapytanie 2, tak że jest sprawdzana data bieżąca w formacie mm-dd. <data> oznacza bieżącą datę w formacie dd-mm-yyyy.

Ta sama data potrzebna jest dwa razy, w różnych formatach. Litery formatu funkcji date: m - miesiąc z zerem, d - dzień z zerem, Y - rok czterocyfrowy. date("m-d") daje 05-25 - format pola data w bazie, a date("d-m-Y") - 25-05-2023 do wyświetlenia (R.5.5).

kalendarz.php PHP zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
                $days = ["poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota", "niedziela"];
                $dayName = $days[date("N") - 1];
                $today = date("m-d");
                $fullDate = date("d-m-Y");
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony bez zmian - taki jak po kroku 39.

Krok 42: Skrypt 1: zapytanie 2 z dzisiejszą datą

Kryteria:

R.5.3 Przynajmniej jeden skrypt zawiera instrukcję wysyłającą do bazy danych zmodyfikowane zapytanie 2 (wstawiona data z formularza lub bieżąca data)

ok. 3 min

Polecenie z arkusza

Wysyła do bazy danych zmodyfikowane zapytanie 2, tak że jest sprawdzana data bieżąca w formacie mm-dd.

Zapytanie 2, w którym zamiast stałej 05-04 stoi zmienna $today. W napisie w cudzysłowie PHP sam wstawia wartość zmiennej, a apostrofy wokół niej są dla SQL-a - porównujesz tekst. mysqli_query wysyła zapytanie, a mysqli_fetch_row pobiera jedyny wiersz wyniku jako tablicę: $row[0] to pole imiona (R.5.3).

kalendarz.php PHP zmienione: 3 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
                $days = ["poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota", "niedziela"];
                $dayName = $days[date("N") - 1];
                $today = date("m-d");
                $fullDate = date("d-m-Y");
                $query = "SELECT imiona FROM imieniny WHERE data = '$today';";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony bez zmian - taki jak po kroku 39.

Krok 43: Skrypt 1: zdanie w bloku napisu

Kryteria: ,

R.5.8 Skrypt 1 wyświetla w bloku napisu treść "Dzisiaj jest <dzień tygodnia>, <data>, imieniny: <imiona>”, gdzie <dzień tygodnia> oznacza dowolny słowny zapis bieżącego dnia, <data> oznacza bieżącą datę w formacie dd-mm-yyyy, a <imiona> - pole zwrócone zapytaniem

R.5.10 W skryptach zastosowana przynajmniej jedna zmienna lub funkcja oraz nazwy wszystkich funkcji i zmiennych są w języku polskim lub angielskim i odzwierciedlają cel zastosowania

ok. 2 min

Polecenie z arkusza

Wyświetla tekst o treści „Dzisiaj jest <dzień tygodnia>, <data>, imieniny: <imiona>”, gdzie <imiona> oznacza pole zwrócone zapytaniem.

echo z trzema zmiennymi wstawionymi w napis. Element tablicy $row[0] w cudzysłowie PHP też rozwija. W dniu z ilustracji 2 strona pokazuje: „Dzisiaj jest czwartek, 25-05-2023, imieniny: Grzegorza, Urbana, Magdaleny” (R.5.8, R.5.10).

kalendarz.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
                $days = ["poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota", "niedziela"];
                $dayName = $days[date("N") - 1];
                $today = date("m-d");
                $fullDate = date("d-m-Y");
                $query = "SELECT imiona FROM imieniny WHERE data = '$today';";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "Dzisiaj jest $dayName, $fullDate, imieniny: $row[0]";
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 44: Skrypt 2: czy formularz został wysłany, zamknięcie połączenia

Kryteria:

R.5.2 Skrypt realizuje połączenie z serwerem bazy danych i wybór bazy kalendarz oraz ostatnią operacją na bazie jest jej zamknięcie

ok. 2 min

Polecenie z arkusza

Na końcu zamykane jest połączenie z serwerem.

Skrypt 2 stoi pod formularzem. Przy pierwszym wejściu na stronę formularz nie był wysłany i w $_POST nie ma daty - isset sprawdza, czy pole date istnieje, i tylko wtedy wykonasz zapytanie. Za blokiem if, na samym końcu, mysqli_close zamyka połączenie - to ostatnia operacja na bazie (R.5.2).

Typowe błędy

mysqli_close wewnątrz if zamyka połączenie tylko po wysłaniu formularza - przy pierwszym wejściu zostaje otwarte.

kalendarz.php PHP zmienione: 5 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
                $days = ["poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota", "niedziela"];
                $dayName = $days[date("N") - 1];
                $today = date("m-d");
                $fullDate = date("d-m-Y");
                $query = "SELECT imiona FROM imieniny WHERE data = '$today';";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "Dzisiaj jest $dayName, $fullDate, imieniny: $row[0]";
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
        <?php
            if (isset($_POST["date"])) {
            }
            mysqli_close($connection);
        ?>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Krok 45: Skrypt 2: data z formularza w formacie bazy

Kryteria: ,

R.5.6 Skrypt 2 zawiera instrukcję pobierającą dane z tablicy globalnej odpowiadającej zastosowanej metodzie formularza ($_POST, $_GET, $_REQUEST)

R.5.7 Skrypt 2 ustala datę z formatu pola edycyjnego na format w bazie mm-dd , np. $dataDoZapytania = date("m-d", strtotime($dzien));

ok. 3 min

Polecenie z arkusza

Pobiera datę z formularza, a następnie przekształca ją do formatu mm-dd.

Pole daty wysyła wartość w formacie 2024-01-24 - odczytujesz ją z tablicy $_POST, bo formularz ma method="post" (R.5.6). strtotime zamienia napis z datą na znacznik czasu, a date("m-d", ...) formatuje go na nowo: 01-24 - jak w bazie (R.5.7). To przykład z ramki funkcji daty arkusza.

Typowe błędy

date("m-d", $date) bez strtotime kończy się w PHP 8 błędem krytycznym „date(): Argument #2 ($timestamp) must be of type ?int, string given” - drugim argumentem date musi być znacznik czasu, a nie napis z datą (sprawdzone w PHP 8.2).

kalendarz.php PHP zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
                $days = ["poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota", "niedziela"];
                $dayName = $days[date("N") - 1];
                $today = date("m-d");
                $fullDate = date("d-m-Y");
                $query = "SELECT imiona FROM imieniny WHERE data = '$today';";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "Dzisiaj jest $dayName, $fullDate, imieniny: $row[0]";
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
        <?php
            if (isset($_POST["date"])) {
                $date = $_POST["date"];
                $monthDay = date("m-d", strtotime($date));
            }
            mysqli_close($connection);
        ?>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony bez zmian - taki jak po kroku 44.

Krok 46: Skrypt 2: zapytanie 2 z datą z formularza

Kryteria:

R.5.3 Przynajmniej jeden skrypt zawiera instrukcję wysyłającą do bazy danych zmodyfikowane zapytanie 2 (wstawiona data z formularza lub bieżąca data)

ok. 2 min

Polecenie z arkusza

Wysyła do bazy danych zmodyfikowane zapytanie 2, tak, że jest sprawdzana data podana w formularzu w formacie mm-dd.

To samo zapytanie co w Skrypcie 1, tylko z $monthDay. Połączenie $connection jest wciąż otwarte - Skrypt 1 go nie zamykał (R.5.3).

kalendarz.php PHP zmienione: 3 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
                $days = ["poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota", "niedziela"];
                $dayName = $days[date("N") - 1];
                $today = date("m-d");
                $fullDate = date("d-m-Y");
                $query = "SELECT imiona FROM imieniny WHERE data = '$today';";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "Dzisiaj jest $dayName, $fullDate, imieniny: $row[0]";
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
        <?php
            if (isset($_POST["date"])) {
                $date = $_POST["date"];
                $monthDay = date("m-d", strtotime($date));
                $query = "SELECT imiona FROM imieniny WHERE data = '$monthDay';";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
            }
            mysqli_close($connection);
        ?>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony bez zmian - taki jak po kroku 44.

Krok 47: Skrypt 2: zdanie pod formularzem

Kryteria: ,

R.5.9 Skrypt 2 wyświetla pod formularzem treść: "Dnia <data> są imieniny: <imiona>", gdzie <data> oznacza datę pobraną z formularza w formacie yyyy-mm-dd, <imiona> - pole zwrócone zapytaniem

R.5.10 W skryptach zastosowana przynajmniej jedna zmienna lub funkcja oraz nazwy wszystkich funkcji i zmiennych są w języku polskim lub angielskim i odzwierciedlają cel zastosowania

ok. 2 min

Polecenie z arkusza

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.

Tu wypisz datę tak, jak przyszła z formularza (rrrr-mm-dd), bez przeliczania. Po wybraniu 24 stycznia i kliknięciu „wyślij” strona pokazuje: „Dnia 2024-01-24 są imieniny: Felicji, Franciszka, Rafała” - jak na ilustracji 2. Podgląd pokazuje stronę po wysłaniu formularza (R.5.9, R.5.10).

kalendarz.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
                $days = ["poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota", "niedziela"];
                $dayName = $days[date("N") - 1];
                $today = date("m-d");
                $fullDate = date("d-m-Y");
                $query = "SELECT imiona FROM imieniny WHERE data = '$today';";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "Dzisiaj jest $dayName, $fullDate, imieniny: $row[0]";
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
        <?php
            if (isset($_POST["date"])) {
                $date = $_POST["date"];
                $monthDay = date("m-d", strtotime($date));
                $query = "SELECT imiona FROM imieniny WHERE data = '$monthDay';";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "Dnia $date są imieniny: $row[0]";
            }
            mysqli_close($connection);
        ?>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (kalendarz.php)

Etap 5: Dobre praktyki (poza kluczem)

Kroki 48-49 · po tym etapie masz 43 z 43 kryteriów (pkt)

Krok 48: Funkcja z zapytaniem przygotowanym

ok. 4 min

Polecenie z arkusza

Należy stosować znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim.

To samo zapytanie wykonują oba skrypty - przenosisz je do funkcji namesForDay (imiona dla dnia). W środku zapytanie przygotowane: mysqli_prepare z ? w miejscu daty i mysqli_stmt_bind_param z typem "s" (tekst). Wartość idzie do bazy osobno od treści zapytania, więc nic wpisanego przez użytkownika nie zmieni samego zapytania. Funkcja zwraca „brak danych”, gdy dnia nie ma w bazie. Wynik wypisujesz przez htmlspecialchars. Stare linie zostają w komentarzu.

Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

kalendarz.php PHP zmienione: 13 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
                $days = ["poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota", "niedziela"];
                $dayName = $days[date("N") - 1];
                $today = date("m-d");
                $fullDate = date("d-m-Y");

                function namesForDay($connection, $monthDay) {
                    $statement = mysqli_prepare($connection, "SELECT imiona FROM imieniny WHERE data = ?");
                    mysqli_stmt_bind_param($statement, "s", $monthDay);
                    mysqli_stmt_execute($statement);
                    $row = mysqli_fetch_row(mysqli_stmt_get_result($statement));
                    return $row ? $row[0] : "brak danych";
                }

                echo "Dzisiaj jest $dayName, $fullDate, imieniny: " . htmlspecialchars(namesForDay($connection, $today));
                // $query = "SELECT imiona FROM imieniny WHERE data = '$today';";
                // $result = mysqli_query($connection, $query);
                // $row = mysqli_fetch_row($result);
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
        <?php
            if (isset($_POST["date"])) {
                $date = $_POST["date"];
                $monthDay = date("m-d", strtotime($date));
                $query = "SELECT imiona FROM imieniny WHERE data = '$monthDay';";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "Dnia $date są imieniny: $row[0]";
            }
            mysqli_close($connection);
        ?>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony bez zmian - taki jak po kroku 47.

Krok 49: Sprawdzenie daty z formularza

ok. 4 min

Polecenie z arkusza

Pobiera datę z formularza, a następnie przekształca ją do formatu mm-dd.

Atrybuty min, max i required działają tylko w przeglądarce - żądanie można wysłać z pominięciem formularza, z dowolnym tekstem w polu date. strtotime nie odrzuca dat nieistniejących: 2024-02-31 przelicza na 2 marca, więc wersja z egzaminu wypisuje „Dnia 2024-02-31 są imieniny: Heleny, Halszki, Pawła” - imiona z zupełnie innego dnia (sprawdzone na bazie z arkusza w PHP 8.2). DateTime::createFromFormat("Y-m-d", ...) odczytuje datę tylko w oczekiwanym formacie, a porównanie wyniku z powrotem z napisem odrzuca taką datę i strona prosi o poprawną. Datę też wypisujesz przez htmlspecialchars, a zapytanie idzie przez funkcję z poprzedniego kroku.

Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

kalendarz.php PHP zmienione: 10 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kalendarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Dni, miesiące, lata...</h1>
    </header>
    <section id="caption">
        <p>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "kalendarz");
                $days = ["poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota", "niedziela"];
                $dayName = $days[date("N") - 1];
                $today = date("m-d");
                $fullDate = date("d-m-Y");

                function namesForDay($connection, $monthDay) {
                    $statement = mysqli_prepare($connection, "SELECT imiona FROM imieniny WHERE data = ?");
                    mysqli_stmt_bind_param($statement, "s", $monthDay);
                    mysqli_stmt_execute($statement);
                    $row = mysqli_fetch_row(mysqli_stmt_get_result($statement));
                    return $row ? $row[0] : "brak danych";
                }

                echo "Dzisiaj jest $dayName, $fullDate, imieniny: " . htmlspecialchars(namesForDay($connection, $today));
                // $query = "SELECT imiona FROM imieniny WHERE data = '$today';";
                // $result = mysqli_query($connection, $query);
                // $row = mysqli_fetch_row($result);
            ?>
        </p>
    </section>
    <section id="left">
        <table>
            <tr>
                <th>liczba dni</th>
                <th>miesiąc</th>
            </tr>
            <tr>
                <td rowspan="7">31</td>
                <td>styczeń</td>
            </tr>
            <tr>
                <td>marzec</td>
            </tr>
            <tr>
                <td>maj</td>
            </tr>
            <tr>
                <td>lipiec</td>
            </tr>
            <tr>
                <td>sierpień</td>
            </tr>
            <tr>
                <td>październik</td>
            </tr>
            <tr>
                <td>grudzień</td>
            </tr>
            <tr>
                <td rowspan="4">30</td>
                <td>kwiecień</td>
            </tr>
            <tr>
                <td>czerwiec</td>
            </tr>
            <tr>
                <td>wrzesień</td>
            </tr>
            <tr>
                <td>listopad</td>
            </tr>
            <tr>
                <td>28 lub 29</td>
                <td>luty</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>Sprawdź kto ma urodziny</h2>
        <form method="post">
            <input type="date" name="date" min="2024-01-01" max="2024-12-31" required>
            <button type="submit">wyślij</button>
        </form>
        <?php
            if (isset($_POST["date"])) {
                $date = $_POST["date"];
                $parsed = DateTime::createFromFormat("Y-m-d", $date);
                if ($parsed && $parsed->format("Y-m-d") === $date) {
                    $monthDay = $parsed->format("m-d");
                    echo "Dnia " . htmlspecialchars($date) . " są imieniny: " . htmlspecialchars(namesForDay($connection, $monthDay));
                } else {
                    echo "Podaj poprawną datę.";
                }
                // $monthDay = date("m-d", strtotime($date));
                // $query = "SELECT imiona FROM imieniny WHERE data = '$monthDay';";
                // echo "Dnia $date są imieniny: $row[0]";
            }
            mysqli_close($connection);
        ?>
    </section>
    <section id="right">
        <a href="https://pl.wikipedia.org/wiki/Kalendarz_Majów" target="_blank">
            <img src="kalendarz.gif" alt="Kalendarz Majów">
        </a>
        <h2>Rodzaje kalendarzy</h2>
        <ol>
            <li>słoneczny
                <ul>
                    <li>kalendarz Majów</li>
                    <li>juliański</li>
                    <li>gregoriański</li>
                </ul>
            </li>
            <li>księżycowy
                <ul>
                    <li>starogrecki</li>
                    <li>babiloński</li>
                </ul>
            </li>
        </ol>
    </section>
    <footer>
        <p>Stronę opracował(a): Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony bez zmian - taki jak po kroku 47.

Etap 6: Oddanie pracy
Krok 50 · po tym etapie masz 43 z 43 kryteriów (pkt)
Krok 50: Plik przeglądarka.txt i nagranie płyty
ok. 5 min
Polecenie z arkusza
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. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.
W folderze z numerem zdającego muszą być: imieniny.csv, import.png, kalendarz.gif, kalendarz.php, kw1.png - kw4.png, kwerendy.txt, parametry_animacji.png, przeglądarka.txt i styl.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik
Google Chrome
Podgląd strony bez zmian - taki jak po kroku 47.

To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.

Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.

Rozwiązanie krok po kroku: Kalendarz imienin w PHP (Wersja podstawowa)

Etap 1: Baza danych

Krok 1: Baza danych kalendarz

Krok 2: Import tabeli z pliku baza.sql

Krok 3: Zrzut ekranu import.png

Krok 4: Zapytanie 1: kiedy imieniny Karola

Krok 5: Zapytanie 2: imieniny 4 maja

Krok 6: Zapytanie 3: ile dni z imieniem z cząstką „mir”

Krok 7: Zapytanie 4: nowe pole zyczenia

Krok 8: Eksport tabeli do imieniny.csv

Etap 2: Animacja i strona HTML

Krok 9: Warstwy animacji: dwanaście klatek

Krok 10: Eksport kalendarz.gif: 350 ms na klatkę

Krok 11: Plik kalendarz.php w HTML5

Krok 12: Język strony

Krok 13: Kodowanie polskich znaków

Krok 14: Tytuł strony

Krok 15: Podpięcie arkusza stylów

Krok 16: Bloki: nagłówek, napis, trzy bloki, stopka

Krok 17: Nagłówek pierwszego stopnia

Krok 18: Blok napisu: akapit na wynik skryptu

Krok 19: Tabela: wiersz nagłówkowy

Krok 20: Tabela: miesiące po 31 dni - komórka scalona

Krok 21: Tabela: miesiące po 30 dni i luty

Krok 22: Blok środkowy: nagłówek drugiego stopnia

Krok 23: Formularz wysyłany metodą POST do tej samej strony

Krok 24: Pole daty tylko z 2024 roku, wymagane

Krok 25: Przycisk „wyślij”

Krok 26: Animacja jako odnośnik do Wikipedii

Krok 27: Nagłówek „Rodzaje kalendarzy”

Krok 28: Lista numerowana z dwiema listami w środku

Krok 29: Stopka

Etap 3: Styl CSS

Krok 30: Plik styl.css: czcionka strony

Krok 31: Nagłówek i stopka

Krok 32: Blok napisu

Krok 33: Bloki lewy i prawy

Krok 34: Blok środkowy

Krok 35: Obraz: po prawej, opływany tekstem

Krok 36: Akapity: biała, większa kursywa

Krok 37: Tabela i formularz: marginesy, ramki

Krok 38: Układ: trzy bloki obok siebie

Etap 4: Skrypty PHP

Krok 39: Połączenie z bazą kalendarz

Krok 40: Skrypt 1: dzień tygodnia po polsku

Krok 41: Skrypt 1: dzisiejsza data w dwóch formatach

Krok 42: Skrypt 1: zapytanie 2 z dzisiejszą datą

Krok 43: Skrypt 1: zdanie w bloku napisu

Krok 44: Skrypt 2: czy formularz został wysłany, zamknięcie połączenia

Krok 45: Skrypt 2: data z formularza w formacie bazy

Krok 46: Skrypt 2: zapytanie 2 z datą z formularza

Krok 47: Skrypt 2: zdanie pod formularzem

Etap 5: Dobre praktyki (poza kluczem)

Krok 48: Funkcja z zapytaniem przygotowanym

Krok 49: Sprawdzenie daty z formularza

Etap 6: Oddanie pracy

Krok 50: Plik przeglądarka.txt i nagranie płyty

Podgląd