Przejdź do głównej treści
INF.03-06-26.01-SGStyczeń 2026 · 51 kroków · ok. 87 min · 39 kryteriów z klucza

Rozwiązanie krok po kroku: Portal diagnostyki chorób (Wersja podstawowa)

Rozwiązanie buduje portal do diagnostyki online: baza choroby (choroby, objawy i tabela pośrednicząca choroby_objawy dla relacji n..m) i cztery zapytania - warunek z sortowaniem, prosty SELECT, złączenie przez tabelę pośredniczącą i grupowanie z COUNT po dwóch złączeniach - potem grafika z napisem przyciętym do liter, strona zdrowie.php z nagłówkiem, menu, dwiema sekcjami i stopką, style w styl.css (obraz pozycjonowany absolutnie i rozmiary czcionek ustawiane pseudoklasą :nth-child) oraz trzy skrypty PHP: lista chorób zakaźnych, lista rozwijana wszystkich chorób i objawy choroby wybranej 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 z tabeli 1 arkusza (mysqli_query, mysqli_fetch_row, isset), a na końcu zostają przerobione na wersję z prawdziwych projektów: liczba zamiast surowego tekstu z formularza, zapytanie przygotowane, zapamiętany wybór na liście, komunikat dla choroby bez objawów i htmlspecialchars.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: układ na siatce CSS, kolory w zmiennych i PHP na PDO z walidacją identyfikatora i zapytaniami przygotowanymi od pierwszej linii - obie wersje są zgodne z kluczem.

Baza pochodzi z prawdziwego archiwum pliki9-1 (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. Podgląd strony od kroków z PHP to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2 na bazie z arkusza; po wysłaniu formularza pokazuje objawy COVID-19, jak na ilustracji 6.

Jak liczą się punkty. Klucz ma 39 kryteriów (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów - można stracić 9 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)

  1. Etap 1: Baza danych

    Kroki 1-7 · po tym etapie masz 6 z 39 kryteriów (pkt)

    Krok 1: Baza danych choroby

    ok. 2 min
    Polecenie z arkusza

    Utwórz bazę danych o nazwie choroby, z zestawem polskich znaków (np. utf8_polish_ci)

    Rozpakuj pliki9-1.7z z pulpitu (hasło *ZdroWia!!! - z gwiazdką na początku i trzema wykrzyknikami) i załóż folder z numerem zdającego. W phpMyAdmin: Nowa, nazwa choroby, porównywanie utf8_polish_ci. Porównywanie wybrane przy bazie dziedziczą tabele zakładane później bez własnego ustawienia; tabele z choroby.sql mają je zapisane w definicji (COLLATE=utf8_polish_ci), więc sortują po polsku i bez względu na wielkość liter - „COVID-19” stanie między „angina” i „grypa”.

    Typowe błędy

    Nazwa bazy musi brzmieć dokładnie choroby - skrypty łączą się z bazą po nazwie, więc literówka zabiera też punkty za skrypty (R.5.1).

  2. Krok 2: Import tabel z pliku choroby.sql

    ok. 2 min
    Polecenie z arkusza

    Z rozpakowanego archiwum zaimportuj tabele z pliku choroby.sql do utworzonej bazy

    Zaznacz bazę choroby, potem Import → choroby.sql → Wykonaj. Powstają trzy tabele z ilustracji 1: choroby (pole zakazna z literą T albo N), objawy i choroby_objawy, która łączy jedne z drugimi - jedna choroba ma wiele objawów, ten sam objaw występuje w wielu chorobach (relacja n..m).

  3. Krok 3: Zrzut ekranu import.png

    Kryteria:

    R.1.1 Wykonany import tabel do bazy danych choroby - plik 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, wklejasz do edytora grafiki i zapisujesz jako import.png. Na zrzucie widać komunikat o udanym imporcie i trzy tabele w drzewku bazy.

    Typowe błędy

    Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).

  4. Krok 4: Zapytanie 1: choroby zakaźne alfabetycznie

    Kryteria: ,

    R.1.2 W pliku kwerendy.txt zapisane co najmniej jedno zapytanie SQL, wynikające z treści zadania

    R.1.3 Wykonane zapytanie 1 wybierające jedynie nazwy chorób zakaźnych, posortowane rosnąco według nazwy. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa; oraz na zrzucie widocznych jest dokładnie 7 rekordów z danymi: angina, COVID-19, grypa, odra, ospa, różyczka, świnka

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 1: wybierające jedynie nazwy chorób zakaźnych, posortowane rosnąco według nazwy

    • SELECT nazwa - jedno pole,
    • FROM choroby - jedna tabela,
    • WHERE zakazna = 'T' - choroby zakaźne; litera w apostrofach, bo pole jest tekstowe,
    • ORDER BY nazwa - rosnąco, czyli domyślnie (ASC można dopisać).

    Wynik: siedem wierszy - angina, COVID-19, grypa, odra, ospa, różyczka, świnka. Zapytanie zapisujesz w kwerendy.txt, zrzut jako kw1.png (cały ekran z paskiem zadań).

    Typowe błędy

    Kolejność z klucza daje każde porównywanie bez rozróżniania wielkości liter (_ci: polskie, unicode, general) - sprawdzone na tej bazie. Tylko porównywanie binarne (utf8_bin) stawia „COVID-19” przed „angina”, bo wielkie litery mają mniejsze kody niż małe. Tabele z choroby.sql niosą własne utf8_polish_ci, więc ten błąd zdarzy się tylko przy ręcznej zmianie porównywania kolumny.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: identyfikatory i nazwy chorób

    Kryteria:

    R.1.4 Wykonane zapytanie 2 wybierające jedynie identyfikatory i nazwy dla wszystkich chorób. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT id, nazwa FROM choroby; oraz na zrzucie widocznych jest dokładnie 16 rekordów, id od 1 do 16

    ok. 1 min
    Polecenie z arkusza

    Zapytanie 2: wybierające jedynie identyfikatory i nazwy dla wszystkich chorób

    Dwie kolumny, bez warunku: 16 wierszy o identyfikatorach 1 - 16, od anginy do choroby Kawasaki (w bazie zapisanej jako „Kavasaki”). Skrypt 2 zrobi z nich opcje listy rozwijanej. Zrzut: kw2.png.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;

-- Zapytanie 2
SELECT id, nazwa FROM choroby;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: objawy choroby o id 5

    Kryteria:

    R.1.5 Wykonane zapytanie 3 wybierające jedynie nazwy objawów dla choroby o id 5. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa FROM objawy JOIN choroby_objawy ON id = id_objawy WHERE id_choroby = 5; oraz na zrzucie widocznych jest dokładnie 6 rekordów: ból głowy, gorączka, mdłości, rozwolnienie, wymioty, drgawki

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 3: wybierające jedynie nazwy objawów dla choroby o id 5. Należy posłużyć się relacją

    • SELECT objawy.nazwa - nazwa objawu; obie tabele z nazwami mają pole nazwa, więc dopisujesz tabelę,
    • FROM objawy JOIN choroby_objawy - łączysz objawy z tabelą pośredniczącą,
    • ON objawy.id = choroby_objawy.id_objawy - relacja: identyfikator objawu w obu tabelach,
    • WHERE choroby_objawy.id_choroby = 5 - tylko wiersze choroby 5 (jelitówka).

    Tabeli choroby nie potrzebujesz - identyfikator choroby jest już w tabeli pośredniczącej. Wynik: sześć objawów - ból głowy, gorączka, mdłości, rozwolnienie, wymioty, drgawki. Zrzut: kw3.png.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;

-- Zapytanie 2
SELECT id, nazwa FROM choroby;

-- Zapytanie 3
SELECT objawy.nazwa FROM objawy JOIN choroby_objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby_objawy.id_choroby = 5;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: liczba objawów chorób zakaźnych

    Kryteria:

    R.1.6 Wykonane zapytanie 4 wybierające jedynie nazwy chorób oraz wyliczoną dla nich liczbę objawów zgrupowanych dla każdej choroby zakaźnej. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT choroby.nazwa, COUNT(objawy.id) FROM choroby JOIN choroby_objawy ON choroby.id = id_choroby JOIN objawy ON objawy.id = id_objawy WHERE zakazna = 'T' GROUP by choroby.nazwa; (lub porównanie kluczy po WHERE) oraz na zrzucie widocznych jest 7 rekordów z danymi: angina 9, COVID-19 11, grypa 8, odra 4, ospa 6, różyczka 7, świnka 6

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 4: wybierające jedynie nazwy chorób oraz wyliczoną dla nich liczbę objawów zgrupowane dla każdej choroby zakaźnej. Należy posłużyć się relacją n..m.

    • SELECT choroby.nazwa, COUNT(objawy.id) - nazwa choroby i liczba objawów,
    • FROM choroby JOIN choroby_objawy ON choroby.id = choroby_objawy.id_choroby - pierwsza połowa relacji n..m,
    • JOIN objawy ON objawy.id = choroby_objawy.id_objawy - druga połowa: od tabeli pośredniczącej do objawów,
    • WHERE choroby.zakazna = 'T' - tylko choroby zakaźne,
    • GROUP BY choroby.nazwa - jeden wiersz na chorobę; COUNT liczy wiersze w każdej grupie.

    Wynik: siedem wierszy - angina 9, COVID-19 11, grypa 8, odra 4, ospa 6, różyczka 7, świnka 6, dokładnie jak w kluczu. Zrzut: kw4.png.

    Typowe błędy

    Bez warunku WHERE wynik ma 14 wierszy (wszystkie choroby, które mają objawy) zamiast 7 - klucz wymaga samych chorób zakaźnych.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;

-- Zapytanie 2
SELECT id, nazwa FROM choroby;

-- Zapytanie 3
SELECT objawy.nazwa FROM objawy JOIN choroby_objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby_objawy.id_choroby = 5;

-- Zapytanie 4
SELECT choroby.nazwa, COUNT(objawy.id) FROM choroby JOIN choroby_objawy ON choroby.id = choroby_objawy.id_choroby JOIN objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby.zakazna = 'T' GROUP BY choroby.nazwa;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

    Kroki 8-29 · po tym etapie masz 18 z 39 kryteriów (pkt)

    Krok 8: Grafika zdrowia.png: napis na przezroczystym tle

    ok. 4 min
    Polecenie z arkusza

    Wykonaj grafikę zdrowia.png o cechach: Wysokość 100 px. Tło przeźroczyste. Zawartością jest tekst ZDROWIA zapisany wielkimi literami, dowolną czcionką bezszeryfową

    W GIMP-ie: Plik → Nowy, w opcjach zaawansowanych Wypełnienie: Przezroczystość. Narzędziem Tekst piszesz ZDROWIA krojem bezszeryfowym (tu DejaVu Sans, może być Arial albo Verdana) dużym rozmiarem, np. 200 px - łatwiej potem przyciąć. Zapisz przez Plik → Wyeksportuj jako w formacie PNG, bo JPEG nie ma przezroczystości.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 8

  9. Krok 9: Grafika zdrowia.png: przycięcie do napisu i wysokość 100 px

    Kryteria:

    R.2.1 Grafika zdrowia.png ma wysokość dokładnie 100 px, tło przezroczyste oraz napis wielkimi literami ZDROWIA. Napis wypełnia w pionie całą grafikę, dopuszcza się przycięcie tuż przy napisie lub lekkie podcięcie liter tak, że zniekształci to np. literę o (kilka pikseli)

    ok. 3 min
    Polecenie z arkusza

    Tekst ma wysokość 100 px i wypełnia w pionie całą grafikę. W poziomie należy przyciąć grafikę do szerokości napisu. Szerokość ta będzie uzależniona od rodzaju dobranej czcionki.

    Obraz → Przytnij do zawartości obcina przezroczyste pasy dookoła liter - napis dotyka wszystkich czterech krawędzi. Potem Obraz → Skaluj obraz z zamkniętym łańcuchem: wysokość 100 px, szerokość wyjdzie sama. W tym rozwiązaniu 641 × 100 px; litera O wystaje odrobinę ponad Z i D (tak rysuje się okrągłe litery), więc to ona wyznacza górę i dół grafiki.

    Typowe błędy

    Skalowanie przed przycięciem daje grafikę wysoką na 100 px, ale z pustymi pasami nad i pod napisem - wtedy tekst nie wypełnia grafiki w pionie i kryterium R.2.1 przepada.

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

  10. Krok 10: Plik zdrowie.php w HTML5

    ok. 2 min
    Polecenie z arkusza

    Składa się ze strony o nazwie zdrowie.php. Zapisana w języku HTML5

    Deklaracja <!DOCTYPE html> i szkielet strony. Rozszerzenie .php, bo dojdą skrypty; na egzaminie plik leży w htdocs XAMPP-a i otwierasz go przez http://localhost/....

    zdrowie.php PHP nowy plik 
    <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  11. Krok 11: Język strony

    Kryteria:

    R.2.2 W pliku zdrowie.php znajduje się deklaracja HTML5 <!DOCTYPE HTML> i deklaracja języka zawartości witryny: polski np. <html lang="pl">

    ok. 1 min
    Polecenie z arkusza

    Zadeklarowany polski język zawartości witryny

    Atrybut lang="pl" w znaczniku <html> - razem z deklaracją HTML5 to jedno kryterium klucza.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  12. Krok 12: Kodowanie polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Jawnie zastosowany właściwy standard kodowania polskich znaków

    <meta charset="UTF-8"> jako pierwszy element <head> - bez niego „Życzymy zdrowia!” może wyświetlić się krzakami.

    zdrowie.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 (zdrowie.php)

  13. Krok 13: Tytuł strony

    Kryteria:

    R.2.3 W sekcji head znajduje się jawnie podany standard kodowania polskich znaków i tytuł strony "Wykaz chorób”

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony „Wykaz chorób”

    <title> w <head> - widać go na karcie przeglądarki. Kodowanie i tytuł to razem jedno kryterium.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  14. Krok 14: 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

    ok. 1 min
    Polecenie z arkusza

    Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony

    Nazwa pliku: styl.css (nie style.css). Całe formatowanie ma pochodzić z tego pliku - żadnych atrybutów style w HTML-u.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  15. Krok 15: Bloki: nagłówek, menu, główny z dwiema sekcjami, stopka

    Kryteria:

    R.2.4 W sekcji body zdefiniowany jest podział na bloki za pomocą semantycznych znaczników HTML5: header, nav, main->section+section, footer (dopuszcza się zastosowanie bloków pomocniczych)

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 4

    Klucz wymaga wprost header, nav, main z dwoma section w środku i footer (R.2.4). Sekcje różnią się kolorem tła, więc dajesz im identyfikatory left i right - po nich je rozróżnisz w CSS. Obok siebie ustawisz je później w stylach.

    zdrowie.php PHP zmienione: 12 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
    </header>
    <nav>
    </nav>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  16. Krok 16: Nagłówek strony

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści „Informacja o chorobach w Polsce”

    Pierwszego stopnia, czyli <h1>.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
    </nav>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  17. Krok 17: Odnośnik „Szpitale”

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku nawigacyjnego: Odnośnik do strony https://szpitale.pl/ o treści „Szpitale”

    Znacznik <a> z pełnym adresem w href - adres zewnętrzny musi zaczynać się od https://, inaczej przeglądarka szukałaby pliku na serwerze strony.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/">Szpitale</a>
    </nav>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  18. Krok 18: Odnośnik „Przychodnie”

    ok. 1 min
    Polecenie z arkusza

    Odnośnik do strony https://www.przychodnie.pl/ o treści „Przychodnie”

    Drugi odnośnik tuż pod pierwszym. Odnośniki są elementami liniowymi, więc stoją w jednym wierszu.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/">Szpitale</a>
        <a href="https://www.przychodnie.pl/">Przychodnie</a>
    </nav>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  19. Krok 19: Odnośnik „NFZ”

    ok. 1 min
    Polecenie z arkusza

    Odnośnik do strony https://www.nfz.gov.pl/ o treści „NFZ”

    Trzeci odnośnik - komplet menu.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/">Szpitale</a>
        <a href="https://www.przychodnie.pl/">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/">NFZ</a>
    </nav>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  20. Krok 20: Odnośniki w nowym oknie

    Kryteria:

    R.3.3 Kliknięcie każdego odnośnika otwiera stronę w nowym oknie: Szpitale - https://szpitale.pl/, Przychodnie - https://www.przychodnie.pl/, NFZ - https://www.nfz.gov.pl/ (adresy stron z www lub bez)

    ok. 1 min
    Polecenie z arkusza

    Wszystkie odnośniki otwierają się w nowym oknie przeglądarki

    Atrybut target="_blank" w każdym z trzech odnośników - klucz sprawdza kliknięciem wszystkie trzy (R.3.3). Linki w podglądzie są zablokowane, więc sprawdzasz to w przeglądarce na egzaminie.

    Typowe błędy

    Wystarczy, że jeden odnośnik otwiera się w tej samej karcie, i kryterium R.3.3 przepada w całości.

    zdrowie.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  21. Krok 21: Sekcja lewa: nagłówek

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku głównego: blok sekcji lewej i blok sekcji prawej. Zawartość bloku sekcji lewej: Nagłówek drugiego stopnia o treści „Choroby zakaźne”

    <h2> na początku sekcji left.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  22. Krok 22: Sekcja lewa: lista numerowana

    ok. 1 min
    Polecenie z arkusza

    Lista numerowana (uporządkowana) wypełniona skryptem 1

    Lista numerowana to <ol> (ordered list); <ul> dałby kropki zamiast numerów. Elementy <li> wypisze Skrypt 1 - zostawiasz miejsce między znacznikami. Pusta lista nic nie pokazuje, więc w podglądzie widać na razie sam nagłówek.

    zdrowie.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  23. Krok 23: Sekcja prawa: nagłówek

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku sekcji prawej: Nagłówek drugiego stopnia o treści „Objawy chorób”

    To samo w sekcji right.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  24. Krok 24: Formularz wysyłany metodą POST

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Formularz wysyłający dane metodą bezpieczną do tego samego pliku

    method="post" - „metoda bezpieczna” w rozumieniu arkusza: dane jadą w treści żądania, a nie w adresie, więc nie zostają w historii przeglądarki. (W specyfikacji HTTP „bezpieczna” znaczy co innego - metodę, która niczego nie zmienia na serwerze, czyli GET - ale klucz R.3.4 rozstrzyga: POST.) Atrybut action pomijasz: formularz bez niego wysyła dane do bieżącej strony, czyli do zdrowie.php (klucz uznaje oba zapisy).

    zdrowie.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
            </form>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  25. Krok 25: Lista rozwijana

    ok. 1 min
    Polecenie z arkusza

    Lista rozwijana wypełniona skryptem 2

    <select> z atrybutem name="disease" - pod tą nazwą wybrana wartość trafi do $_POST. Opcje wypisze Skrypt 2.

    zdrowie.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                </select>
            </form>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  26. Krok 26: Przycisk „Sprawdź”

    Kryteria: ,

    R.2.8 W bloku sekcji prawej umieszczony formularz z listą rozwijaną i przyciskiem Sprawdź

    R.3.5 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 „Sprawdź” wysyłający dane z formularza do skryptu 3

    <button type="submit"> wysyła formularz; Skrypt 3 odczyta dane po przeładowaniu strony. Formularz ma już komplet: listę i przycisk.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  27. Krok 27: Blok na wynik skryptu 3

    Kryteria:

    R.2.9 W bloku sekcji prawej znajduje się blok (np. div, section)

    ok. 1 min
    Polecenie z arkusza

    Blok w którym umieszczony jest efekt działania skryptu 3

    Zwykły <div> pod formularzem, z identyfikatorem symptoms do stylów. Blok stoi w HTML-u zawsze - przed wysłaniem formularza jest pusty (na ilustracji 3 widać samą kropkowaną ramkę), a po wysłaniu wypełni go Skrypt 3.

    zdrowie.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  28. Krok 28: Stopka

    Kryteria:

    R.2.5 W bloku nagłówkowym znajduje się <h1>: „Informacja o chorobach w Polsce”, w bloku sekcji lewej <h2>: „Choroby zakaźne", w bloku sekcji prawej <h2>: „Objawy chorób” oraz <p> z numerem zdającego w stopce

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: paragraf o treści „Stronę opracował: ”, dalej wstawiony 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. Z tym krokiem są już wszystkie nagłówki z klucza: <h1>, dwa <h2> i akapit w stopce.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  29. Krok 29: Obraz poza blokami

    Kryteria:

    R.2.6 Na stronie umieszczona grafika z tekstem alternatywnym "Życzymy zdrowia!"

    ok. 1 min
    Polecenie z arkusza

    Poza blokami znajduje się obraz zdrowia.png z tekstem alternatywnym „Życzymy zdrowia!”

    <img> bezpośrednio w <body>, za stopką - poza wszystkimi blokami. Na razie stoi pod stopką; na miejsce z ilustracji 3 przesunie go styl.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  30. Etap 3: Styl CSS

    Kroki 30-39 · po tym etapie masz 29 z 39 kryteriów (pkt)

    Krok 30: Plik styl.css: krój czcionki

    Kryteria:

    R.4.1 domyślnie dla wszystkich selektorów (*): krój czcionki "Trebuchet MS", sans-serif (dozwolona tylko taka kolejność)

    ok. 1 min
    Polecenie z arkusza

    Domyślnie dla wszystkich selektorów: krój czcionki Trebuchet MS, w przypadku braku sans-serif

    Selektor *. Nazwę kroju ze spacją bierzesz w cudzysłów: "Trebuchet MS", a na końcu rodzina zapasowa sans-serif - klucz sprawdza właśnie tę kolejność.

    styl.css CSS nowy plik 
    * {
    font-family: "Trebuchet MS", sans-serif;
}
    Podgląd strony po tym kroku (zdrowie.php)

  31. Krok 31: Nagłówek, menu i stopka

    Kryteria:

    R.4.5 wyrównanie tekstu do prawej strony: blok nagłówkowy, nawigacyjny i stopka

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla bloku nagłówkowego, nawigacyjnego i stopki: kolor tła #FF8F00, marginesy wewnętrzne 10 px, wyrównanie tekstu do prawej strony

    Jedna reguła dla trzech selektorów po przecinku. Marginesy wewnętrzne to padding, a text-align: right dosuwa do prawej nagłówek, odnośniki i podpis w stopce, jak na ilustracji 3.

    styl.css CSS zmienione: 5 linii 
    * {
    font-family: "Trebuchet MS", sans-serif;
}
header, nav, footer {
    background-color: #FF8F00;
    padding: 10px;
    text-align: right;
}
    Podgląd strony po tym kroku (zdrowie.php)

  32. Krok 32: Sekcje: szerokość i wysokość

    Kryteria:

    R.4.4 wysokość: blok sekcji lewej i prawej - 400px, szerokość: blok sekcji lewej i prawej - 50% (width lub grid-template-columns lub flex)

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla bloków sekcji lewej i prawej: szerokość 50%, wysokość 400 px

    Selektor znacznika section obejmuje obie sekcje. Szerokość w procentach liczy się od rodzica, czyli od <main>.

    styl.css CSS zmienione: 4 linie 
    * {
    font-family: "Trebuchet MS", sans-serif;
}
header, nav, footer {
    background-color: #FF8F00;
    padding: 10px;
    text-align: right;
}
section {
    width: 50%;
    height: 400px;
}
    Podgląd strony po tym kroku (zdrowie.php)

  33. Krok 33: Sekcje: kolory tła

    ok. 1 min
    Polecenie z arkusza

    Dodatkowo kolor tła dla bloku sekcji lewej to #FFF8E1, dla bloku sekcji prawej to #FFECB3

    Tu przydają się identyfikatory: #left i #right. Selektor identyfikatora jest mocniejszy niż selektor znacznika, ale wspólnych właściwości i tak nie nadpisuje - dokłada tylko tło.

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: "Trebuchet MS", sans-serif;
}
header, nav, footer {
    background-color: #FF8F00;
    padding: 10px;
    text-align: right;
}
section {
    width: 50%;
    height: 400px;
}
#left {
    background-color: #FFF8E1;
}
#right {
    background-color: #FFECB3;
}
    Podgląd strony po tym kroku (zdrowie.php)

  34. Krok 34: Układ bloków zgodny z ilustracją 4

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 4

    Arkusz nie mówi, jak postawić sekcje obok siebie - wybierasz display: flex na <main>. Dzieci kontenera flex stają w rzędzie, a 50% + 50% daje całą szerokość. Przy float trzeba by pamiętać o clear: both dla stopki, inaczej wjechałaby pod pływające sekcje; flex nie wypuszcza dzieci poza kontener, więc stopka sama zostaje pod spodem (R.3.1).

    Typowe błędy

    Bloki, które na siebie zachodzą (sprawdzane w inspektorze), zabierają punkt za układ, nawet gdy strona „na oko” wygląda dobrze.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: "Trebuchet MS", sans-serif;
}
header, nav, footer {
    background-color: #FF8F00;
    padding: 10px;
    text-align: right;
}
section {
    width: 50%;
    height: 400px;
}
#left {
    background-color: #FFF8E1;
}
#right {
    background-color: #FFECB3;
}
main {
    display: flex;
}
    Podgląd strony po tym kroku (zdrowie.php)

  35. Krok 35: Odnośniki

    Kryteria: ,

    R.4.2 kolor tła: blok nagłówkowy, nawigacyjny, stopka - #FF8F00, blok sekcji lewej - #FFF8E1, blok sekcji prawej - #FFECB3, kolor czcionki: selektora a - #FFECB3

    R.4.3 dla odnośnika rozmiar czcionki 180%, bez podkreślenia (text-decoration:none)

    ok. 2 min
    Polecenie z arkusza

    Dla selektora odnośnika: kolor czcionki #FFECB3, jedynie margines zewnętrzny lewy 70 px, czcionka o rozmiarze 180%, bez podkreślenia

    „Jedynie margines zewnętrzny lewy” to margin-left, nie margin - pozostałe marginesy zostają domyślne. Selektor znacznika a, zgodnie z uwagą arkusza. Ta reguła zamyka kryterium kolorów (R.4.2): tła bloków masz już ustawione, brakowało koloru czcionki odnośników.

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: "Trebuchet MS", sans-serif;
}
header, nav, footer {
    background-color: #FF8F00;
    padding: 10px;
    text-align: right;
}
section {
    width: 50%;
    height: 400px;
}
#left {
    background-color: #FFF8E1;
}
#right {
    background-color: #FFECB3;
}
main {
    display: flex;
}
a {
    color: #FFECB3;
    margin-left: 70px;
    font-size: 180%;
    text-decoration: none;
}
    Podgląd strony po tym kroku (zdrowie.php)

  36. Krok 36: Odnośnik pod kursorem

    Kryteria:

    R.4.10 gdy kursor znajdzie się na odnośniku jego kolor czcionki zmienia się na biały i dodawane jest podkreślenie

    ok. 1 min
    Polecenie z arkusza

    Gdy kursor znajdzie się na odnośniku jego kolor czcionki zmienia się na biały i dodawane jest podkreślenie

    Pseudoklasa :hover zmienia dwie rzeczy naraz: kolor i podkreślenie (underline przywraca to, co wyłączono w poprzedniej regule). Na ilustracji 3 kursor stoi na „Przychodnie”.

    styl.css CSS zmienione: 4 linie 
    * {
    font-family: "Trebuchet MS", sans-serif;
}
header, nav, footer {
    background-color: #FF8F00;
    padding: 10px;
    text-align: right;
}
section {
    width: 50%;
    height: 400px;
}
#left {
    background-color: #FFF8E1;
}
#right {
    background-color: #FFECB3;
}
main {
    display: flex;
}
a {
    color: #FFECB3;
    margin-left: 70px;
    font-size: 180%;
    text-decoration: none;
}
a:hover {
    color: white;
    text-decoration: underline;
}
    Podgląd strony po tym kroku (zdrowie.php)

  37. Krok 37: Obraz pozycjonowany absolutnie

    Kryteria:

    R.4.8 dla selektora img styl position: absolute; left: 100px; top: 500px; oraz obraz jest zawsze na wierzchu (np. z-index)

    ok. 2 min
    Polecenie z arkusza

    Dla selektora obrazu: zawsze na wierzchu, pozycjonowanie na stronie - przesunięcie względem rodzica: 100 px od lewej krawędzi i 500 px od góry, element ten jest usuwany z normalnego przepływu dokumentu

    Tabela 3 arkusza mówi wprost: przesunięcie względem rodzica z usunięciem z przepływu to position: absolute, a przesunięcie wyznaczają left i top. Obraz nie zajmuje już miejsca pod stopką, tylko leży nad sekcją lewą i stopką, jak na ilustracji 3. „Zawsze na wierzchu” zapewnia z-index większy od zera - element pozycjonowany z dodatnim z-index przykrywa zwykłe bloki.

    Typowe błędy

    position: fixed też usuwa element z przepływu, ale liczy przesunięcie od okna przeglądarki i obraz nie przewija się ze stroną - to nie jest „względem rodzica”.

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: "Trebuchet MS", sans-serif;
}
header, nav, footer {
    background-color: #FF8F00;
    padding: 10px;
    text-align: right;
}
section {
    width: 50%;
    height: 400px;
}
#left {
    background-color: #FFF8E1;
}
#right {
    background-color: #FFECB3;
}
main {
    display: flex;
}
a {
    color: #FFECB3;
    margin-left: 70px;
    font-size: 180%;
    text-decoration: none;
}
a:hover {
    color: white;
    text-decoration: underline;
}
img {
    position: absolute;
    left: 100px;
    top: 500px;
    z-index: 1;
}
    Podgląd strony po tym kroku (zdrowie.php)

  38. Krok 38: Blok wyniku skryptu 3

    Kryteria: ,

    R.4.6 marginesy wewnętrzne (padding) : blok nagłówkowy, nawigacyjny i stopka - 10px, blok ze skryptem 3 - 30px, marginesy zewnętrzne (margin) : blok ze skryptem 3 - 50px 180px 0 50px, dla odnośnika margin-left: 70px

    R.4.7 dla bloku ze skryptem 3: obramowanie 1px dotted black

    ok. 2 min
    Polecenie z arkusza

    Dla bloku, w którym umieszczony jest skrypt 3: obramowanie linią kropkowaną o szerokości 1 px i kolorze czarnym, marginesy wewnętrzne 30 px, marginesy zewnętrzne: góra 50 px, prawy 180 px, dół 0, lewy 50 px

    Skrót border: 1px dotted black. Cztery wartości w margin idą zgodnie z ruchem wskazówek zegara: góra, prawy, dół, lewy - stąd 50px 180px 0 50px. Pusty blok ma i tak 60 px wysokości (dwa razy padding), dlatego na ilustracji 3 widać prostokąt, zanim cokolwiek wyślesz. Ta reguła zamyka kryterium marginesów (R.4.6).

    styl.css CSS zmienione: 5 linii 
    * {
    font-family: "Trebuchet MS", sans-serif;
}
header, nav, footer {
    background-color: #FF8F00;
    padding: 10px;
    text-align: right;
}
section {
    width: 50%;
    height: 400px;
}
#left {
    background-color: #FFF8E1;
}
#right {
    background-color: #FFECB3;
}
main {
    display: flex;
}
a {
    color: #FFECB3;
    margin-left: 70px;
    font-size: 180%;
    text-decoration: none;
}
a:hover {
    color: white;
    text-decoration: underline;
}
img {
    position: absolute;
    left: 100px;
    top: 500px;
    z-index: 1;
}
#symptoms {
    border: 1px dotted black;
    padding: 30px;
    margin: 50px 180px 0 50px;
}
    Podgląd strony po tym kroku (zdrowie.php)

  39. Krok 39: Rozmiary objawów: pseudoklasa nth-child

    Kryteria:

    R.4.9 rozmiar czcionki dla span:nth-child(n)dla n=2: 120%, n=4: 240%, n=5: 150%, n=7: 160%, n=9: 130%, n=10: 190%

    ok. 3 min
    Polecenie z arkusza

    Rozmiar czcionki dla selektorów span: drugiego 120%, czwartego 240%, piątego 150%, siódmego 160%, dziewiątego 130%, dziesiątego 190%. Należy wykonać za pomocą przeznaczonej do tego pseudoklasy

    Pseudoklasa :nth-child(n) (tabela 2 arkusza) wybiera element, który jest n-tym dzieckiem swojego rodzica. Rodzicem wszystkich <span> będzie blok #symptoms, a Skrypt 3 nie wypisze w nim nic poza spanami - dlatego drugi span to drugie dziecko. Sześć reguł, po jednej na numer. Objawów jeszcze nie ma; efekt zobaczysz po Skrypcie 3: „ból gardła” większy, „bóle stawów” największe.

    Typowe błędy

    Gdyby przed spanami stał w bloku inny element (np. nagłówek), numeracja przesunęłaby się o jeden - nth-child liczy wszystkie dzieci, nie tylko spany.

    styl.css CSS zmienione: 18 linii 
    * {
    font-family: "Trebuchet MS", sans-serif;
}
header, nav, footer {
    background-color: #FF8F00;
    padding: 10px;
    text-align: right;
}
section {
    width: 50%;
    height: 400px;
}
#left {
    background-color: #FFF8E1;
}
#right {
    background-color: #FFECB3;
}
main {
    display: flex;
}
a {
    color: #FFECB3;
    margin-left: 70px;
    font-size: 180%;
    text-decoration: none;
}
a:hover {
    color: white;
    text-decoration: underline;
}
img {
    position: absolute;
    left: 100px;
    top: 500px;
    z-index: 1;
}
#symptoms {
    border: 1px dotted black;
    padding: 30px;
    margin: 50px 180px 0 50px;
}
span:nth-child(2) {
    font-size: 120%;
}
span:nth-child(4) {
    font-size: 240%;
}
span:nth-child(5) {
    font-size: 150%;
}
span:nth-child(7) {
    font-size: 160%;
}
span:nth-child(9) {
    font-size: 130%;
}
span:nth-child(10) {
    font-size: 190%;
}
    Podgląd strony po tym kroku (zdrowie.php)

  40. Etap 4: Skrypty PHP

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

    Krok 40: Połączenie z bazą i zamknięcie na końcu

    Kryteria: ,

    R.5.1 Skrypt realizuje połączenie z serwerem bazy danych i wybór bazy choroby

    R.5.2 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 choroby. Na końcu działania skrypt zamyka połączenie z serwerem

    Pierwszy skrypt na stronie stoi w liście <ol>, więc tam otwierasz połączenie: mysqli_connect z czterema argumentami łączy się z serwerem i od razu wybiera bazę. Uchwyt w zmiennej $connection posłuży wszystkim trzem skryptom. Ostatni blok PHP, w bloku symptoms, na razie tylko zamyka połączenie - Skrypt 3 dopiszesz nad tą linią, żeby zamknięcie zostało ostatnią operacją na bazie (R.5.1, R.5.2). Od tego kroku podgląd to wynik prawdziwego uruchomienia strony.

    zdrowie.php PHP zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    mysqli_close($connection);
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  41. Krok 41: Skrypt 1: zapytanie 1

    Kryteria:

    R.5.3 Przynajmniej jeden skrypt zawiera instrukcję wysyłającą do bazy danych zapytanie

    ok. 1 min
    Polecenie z arkusza

    Skrypt 1: Wysyła do bazy danych zapytanie 1

    Treść zapytania w zmiennej $query, mysqli_query wysyła ją do bazy, a w $result zostaje wynik do odczytania wiersz po wierszu. Apostrofy wokół T mieszczą się w napisie PHP w cudzysłowach bez żadnego ukośnika.

    zdrowie.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
                $query = "SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;";
                $result = mysqli_query($connection, $query);
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    mysqli_close($connection);
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>

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

  42. Krok 42: Skrypt 1: element listy z nazwą choroby

    Kryteria: ,

    R.2.7 W bloku sekcji lewej umieszczona jedna lista numerowana z przynajmniej jednym elementem, zastosowane znaczniki <ol>, <li> (w skrypcie lub HTML)

    R.5.4 Skrypt 1 wyświetla z każdego zwróconego zapytaniem 1 rekordu element <li>

    ok. 2 min
    Polecenie z arkusza

    W każdym elemencie listy umieszcza zwrócone zapytaniem pole rekordu

    mysqli_fetch_row oddaje kolejny wiersz jako tablicę ($row[0] - jedyne pole, nazwa), a po ostatnim zwraca null i pętla while się kończy. Każda nazwa trafia do osobnego <li>, a numery 1 - 7 dopisuje sama przeglądarka, bo lista to <ol>. Podgląd pokazuje siedem chorób jak na ilustracji 3.

    zdrowie.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
                $query = "SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0]</li>";
                }
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    mysqli_close($connection);
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  43. Krok 43: Skrypt 2: zapytanie 2

    ok. 1 min
    Polecenie z arkusza

    Skrypt 2: Wysyła do bazy danych zapytanie 2

    Skrypt 2 piszesz wewnątrz <select> - to, co wypisze, stanie się opcjami listy. Zmiennych $query i $result używasz ponownie: wynik Skryptu 1 został już wypisany.

    zdrowie.php PHP zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
                $query = "SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0]</li>";
                }
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                    <?php
                        $query = "SELECT id, nazwa FROM choroby;";
                        $result = mysqli_query($connection, $query);
                    ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    mysqli_close($connection);
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  44. Krok 44: Skrypt 2: opcje z identyfikatorem w value

    Kryteria:

    R.5.5 Skrypt 2 wyświetla z każdego zwróconego zapytaniem 2 rekordu opcję listy rozwijanej, tak że identyfikator jest przypisany atrybutowi value, a nazwa - treści opcji

    ok. 2 min
    Polecenie z arkusza

    Każdym zwróconym rekordem wypełnia opcje listy w ten sposób, że identyfikator jest przypisany do atrybutu wartości opcji, a nazwa jest treścią opcji

    Widać nazwę choroby, a formularz wyśle value, czyli identyfikator - tego potrzebuje zapytanie 3. Cudzysłowy atrybutu wewnątrz napisu PHP poprzedzasz ukośnikiem \". Rozwiń listę w podglądzie: 16 chorób w kolejności identyfikatorów, od anginy do „Kavasaki”, jak na ilustracji 5.

    zdrowie.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
                $query = "SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0]</li>";
                }
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                    <?php
                        $query = "SELECT id, nazwa FROM choroby;";
                        $result = mysqli_query($connection, $query);
                        while ($row = mysqli_fetch_row($result)) {
                            echo "<option value=\"$row[0]\">$row[1]</option>";
                        }
                    ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    mysqli_close($connection);
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  45. Krok 45: Skrypt 3: tylko po wysłaniu formularza

    ok. 1 min
    Polecenie z arkusza

    Skrypt 3, wykonywany tylko wtedy, gdy formularz wysłał dane (ilustracja 6)

    Przy zwykłym wejściu na stronę tablica $_POST jest pusta, po kliknięciu „Sprawdź” ma klucz disease (nazwa listy). Warunek isset to sprawdza. Zamknięcie połączenia stoi pod blokiem if, poza nim - wykona się zawsze, także bez wysłania formularza, i nadal jako ostatnia operacja na bazie.

    zdrowie.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
                $query = "SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0]</li>";
                }
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                    <?php
                        $query = "SELECT id, nazwa FROM choroby;";
                        $result = mysqli_query($connection, $query);
                        while ($row = mysqli_fetch_row($result)) {
                            echo "<option value=\"$row[0]\">$row[1]</option>";
                        }
                    ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    if (isset($_POST["disease"])) {
                    }
                    mysqli_close($connection);
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>

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

  46. Krok 46: Skrypt 3: zapytanie 3 z identyfikatorem z formularza

    Kryteria: ,

    R.5.6 Skrypt 3 zawiera instrukcję sprawdzającą czy dane z formularza zostały wysłane oraz instrukcję pobierającą dane z tablicy globalnej odpowiadającej zastosowanej metodzie formularza ($_POST, $_GET, $_REQUEST)

    R.5.7 Skrypt 3 wysyła zmodyfikowane zapytanie 3 tak, że w warunku podany jest identyfikator wysłany przez formularz

    ok. 2 min
    Polecenie z arkusza

    Wysyła do bazy danych zmodyfikowane zapytanie 3 w ten sposób, że w warunku podany jest identyfikator wysłany przez formularz

    Wartość listy czeka w $_POST["disease"] - przepisujesz ją do zmiennej $disease i wstawiasz do zapytania 3 w miejsce 5. Identyfikator to liczba, więc w SQL bez apostrofów. Od tego kroku podgląd pokazuje stronę po wysłaniu formularza z wybranym COVID-19 (identyfikator 15) - blok jest jeszcze pusty, bo wyniku nie wypisujesz.

    zdrowie.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
                $query = "SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0]</li>";
                }
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                    <?php
                        $query = "SELECT id, nazwa FROM choroby;";
                        $result = mysqli_query($connection, $query);
                        while ($row = mysqli_fetch_row($result)) {
                            echo "<option value=\"$row[0]\">$row[1]</option>";
                        }
                    ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    if (isset($_POST["disease"])) {
                        $disease = $_POST["disease"];
                        $query = "SELECT objawy.nazwa FROM objawy JOIN choroby_objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby_objawy.id_choroby = $disease;";
                        $result = mysqli_query($connection, $query);
                    }
                    mysqli_close($connection);
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>

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

  47. Krok 47: Skrypt 3: objawy w znacznikach span

    Kryteria: ,

    R.5.8 Skrypt 3 wyświetla w znaczniku <span> każdy zwrócony zapytaniem objaw choroby np. <span> $wiersz[0] </span>

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

    ok. 2 min
    Polecenie z arkusza

    Każdy zwrócony zapytaniem objaw choroby zapisuje w znaczniku span w ten sposób, że przed i po objawie jest spacja

    Spacje stoją wewnątrz napisu, przed i po $row[0]: "<span> $row[0] </span>". Spany są elementami liniowymi i bez nich objawy zlepiłyby się w jeden wyraz („ból głowyból gardła”). Teraz działają reguły :nth-child z CSS: w podglądzie jest 11 objawów COVID-19, a „bóle stawów” (czwarty span) są największe, jak na ilustracji 6. W skryptach są już zmienne $connection, $query, $result, $row i $disease - nazwy po angielsku mówią, do czego służą (R.5.9).

    zdrowie.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
                $query = "SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0]</li>";
                }
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                    <?php
                        $query = "SELECT id, nazwa FROM choroby;";
                        $result = mysqli_query($connection, $query);
                        while ($row = mysqli_fetch_row($result)) {
                            echo "<option value=\"$row[0]\">$row[1]</option>";
                        }
                    ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    if (isset($_POST["disease"])) {
                        $disease = $_POST["disease"];
                        $query = "SELECT objawy.nazwa FROM objawy JOIN choroby_objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby_objawy.id_choroby = $disease;";
                        $result = mysqli_query($connection, $query);
                        while ($row = mysqli_fetch_row($result)) {
                            echo "<span> $row[0] </span>";
                        }
                    }
                    mysqli_close($connection);
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  48. Etap 5: Dobre praktyki (poza kluczem)

    Kroki 48-50 · po tym etapie masz 39 z 39 kryteriów (pkt)

    Krok 48: Identyfikator z formularza: liczba i zapytanie przygotowane

    ok. 4 min
    Polecenie z arkusza

    Wysyła do bazy danych zmodyfikowane zapytanie 3 w ten sposób, że w warunku podany jest identyfikator wysłany przez formularz

    Lista podsuwa tylko identyfikatory 1 - 16, ale żądanie POST można wysłać z dowolną treścią. Sprawdzone na tej bazie: wartość 5 OR 1=1 zamienia warunek wersji egzaminacyjnej w „zawsze prawdę” i blok wypisuje 74 objawy - wszystkie powiązania z tabeli pośredniczącej. Rzutowanie (int) robi z wartości liczbę (zostaje 5), a zapytanie przygotowane (mysqli_prepare, znak ?, mysqli_stmt_bind_param z typem "i") w ogóle nie skleja SQL z danymi. Wynik odbiera mysqli_stmt_get_result, więc pętla z mysqli_fetch_row zostaje bez zmian. Stara wersja zostaje w komentarzu. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    zdrowie.php PHP zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
                $query = "SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0]</li>";
                }
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                    <?php
                        $query = "SELECT id, nazwa FROM choroby;";
                        $result = mysqli_query($connection, $query);
                        while ($row = mysqli_fetch_row($result)) {
                            echo "<option value=\"$row[0]\">$row[1]</option>";
                        }
                    ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    if (isset($_POST["disease"])) {
                        $disease = (int) $_POST["disease"];
                        $statement = mysqli_prepare($connection, "SELECT objawy.nazwa FROM objawy JOIN choroby_objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby_objawy.id_choroby = ?");
                        mysqli_stmt_bind_param($statement, "i", $disease);
                        mysqli_stmt_execute($statement);
                        $result = mysqli_stmt_get_result($statement);
                        while ($row = mysqli_fetch_row($result)) {
                            echo "<span> $row[0] </span>";
                        }
                    }
                    mysqli_close($connection);
                    /* Wersja z egzaminu:
                    $disease = $_POST["disease"];
                    $query = "SELECT objawy.nazwa FROM objawy JOIN choroby_objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby_objawy.id_choroby = $disease;";
                    $result = mysqli_query($connection, $query);
                    */
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>

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

  49. Krok 49: Lista zapamiętuje wybraną chorobę

    ok. 3 min
    Polecenie z arkusza

    Każdym zwróconym rekordem wypełnia opcje listy w ten sposób, że identyfikator jest przypisany do atrybutu wartości opcji, a nazwa jest treścią opcji

    W wersji z egzaminu po kliknięciu „Sprawdź” strona ładuje się od nowa i lista wraca do pierwszej pozycji: pod nią stoją objawy COVID-19, a na liście „angina” - użytkownik nie wie, czego dotyczy wynik. Na ilustracji 6 lista pokazuje „COVID-19”; żeby tak było naprawdę, opcja z identyfikatorem równym wysłanemu dostaje atrybut selected. Przy okazji mysqli_fetch_assoc (pola po nazwach kolumn) i htmlspecialchars dla nazwy z bazy. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    zdrowie.php PHP zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
                $query = "SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0]</li>";
                }
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                    <?php
                        $query = "SELECT id, nazwa FROM choroby;";
                        $result = mysqli_query($connection, $query);
                        $chosen = (int) ($_POST["disease"] ?? 0);
                        while ($diseaseRow = mysqli_fetch_assoc($result)) {
                            $selected = ($diseaseRow["id"] == $chosen) ? " selected" : "";
                            echo "<option value=\"" . $diseaseRow["id"] . "\"$selected>" . htmlspecialchars($diseaseRow["nazwa"]) . "</option>";
                        }
                        // while ($row = mysqli_fetch_row($result)) { echo "<option value=\"$row[0]\">$row[1]</option>"; }
                    ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    if (isset($_POST["disease"])) {
                        $disease = (int) $_POST["disease"];
                        $statement = mysqli_prepare($connection, "SELECT objawy.nazwa FROM objawy JOIN choroby_objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby_objawy.id_choroby = ?");
                        mysqli_stmt_bind_param($statement, "i", $disease);
                        mysqli_stmt_execute($statement);
                        $result = mysqli_stmt_get_result($statement);
                        while ($row = mysqli_fetch_row($result)) {
                            echo "<span> $row[0] </span>";
                        }
                    }
                    mysqli_close($connection);
                    /* Wersja z egzaminu:
                    $disease = $_POST["disease"];
                    $query = "SELECT objawy.nazwa FROM objawy JOIN choroby_objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby_objawy.id_choroby = $disease;";
                    $result = mysqli_query($connection, $query);
                    */
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  50. Krok 50: Komunikat dla choroby bez objawów

    ok. 2 min
    Polecenie z arkusza

    Każdy zwrócony zapytaniem objaw choroby zapisuje w znaczniku span w ten sposób, że przed i po objawie jest spacja

    Baza z arkusza ma dwie choroby bez ani jednego objawu: nosówkę (13) i „Kavasaki” (16). Wersja z egzaminu zostawia wtedy pusty kropkowany prostokąt i nie wiadomo, czy strona zadziałała. mysqli_num_rows (też z tabeli 1 arkusza) mówi, ile wierszy zwróciło zapytanie - przy zerze wypisujesz komunikat. Akapit stoi tylko wtedy, gdy spanów nie ma, więc numeracja :nth-child się nie przesuwa. Podgląd pokazuje stan po wybraniu nosówki. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    zdrowie.php PHP zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank">NFZ</a>
    </nav>
    <main>
        <section id="left">
            <h2>Choroby zakaźne</h2>
            <ol>
            <?php
                $connection = mysqli_connect("localhost", "root", "", "choroby");
                $query = "SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0]</li>";
                }
            ?>
            </ol>
        </section>
        <section id="right">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease">
                    <?php
                        $query = "SELECT id, nazwa FROM choroby;";
                        $result = mysqli_query($connection, $query);
                        $chosen = (int) ($_POST["disease"] ?? 0);
                        while ($diseaseRow = mysqli_fetch_assoc($result)) {
                            $selected = ($diseaseRow["id"] == $chosen) ? " selected" : "";
                            echo "<option value=\"" . $diseaseRow["id"] . "\"$selected>" . htmlspecialchars($diseaseRow["nazwa"]) . "</option>";
                        }
                        // while ($row = mysqli_fetch_row($result)) { echo "<option value=\"$row[0]\">$row[1]</option>"; }
                    ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
                <?php
                    if (isset($_POST["disease"])) {
                        $disease = (int) $_POST["disease"];
                        $statement = mysqli_prepare($connection, "SELECT objawy.nazwa FROM objawy JOIN choroby_objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby_objawy.id_choroby = ?");
                        mysqli_stmt_bind_param($statement, "i", $disease);
                        mysqli_stmt_execute($statement);
                        $result = mysqli_stmt_get_result($statement);
                        if (mysqli_num_rows($result) == 0) {
                            echo "<p>W bazie nie ma objawów tej choroby.</p>";
                        }
                        while ($row = mysqli_fetch_row($result)) {
                            echo "<span> " . htmlspecialchars($row[0]) . " </span>";
                        }
                    }
                    mysqli_close($connection);
                    /* Wersja z egzaminu:
                    $disease = $_POST["disease"];
                    $query = "SELECT objawy.nazwa FROM objawy JOIN choroby_objawy ON objawy.id = choroby_objawy.id_objawy WHERE choroby_objawy.id_choroby = $disease;";
                    $result = mysqli_query($connection, $query);
                    */
                ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  51. Etap 6: Oddanie pracy

    Krok 51 · po tym etapie masz 39 z 39 kryteriów (pkt)

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

    ok. 5 min
    Polecenie z arkusza

    UWAGA: po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.

    W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.

    W folderze z numerem zdającego: import.png, kw1.png - kw4.png, kwerendy.txt, przeglądarka.txt, styl.css, zdrowia.png, zdrowie.php. 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 50.

Podgląd

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