Przejdź do głównej treści
INF.03-01-22.06-SGCzerwiec 2022 · 34 kroki · ok. 57 min · 35 kryteriów z klucza

Rozwiązanie krok po kroku: Portal dla wędkarzy (Wersja podstawowa)

Rozwiązanie buduje portal dla wędkarzy: baza wedkowanie z rybami, okresami ochronnymi i łowiskami i cztery zapytania (warunek na kodzie stylu życia, porównanie <, złączenie z warunkiem na rodzaju łowiska i ALTER TABLE z typem TINYINT UNSIGNED - liczby 0-255), zdjęcie przeskalowane do 400 px, strona wedkuj.php z dwoma blokami lewymi i blokiem prawym oraz style w styl_1.css z cieniem obrazu i podświetlaniem wiersza tabeli. Dwa skrypty PHP: lista ryb rzecznych w zdaniach typu „Szczupak pływa w rzece Warta-Obrzycko, Wielkopolskie” i tabela ryb drapieżnych.

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ą. Kod PHP jest najpierw pisany funkcjami z tabeli 1 arkusza (proceduralne mysqli), a na końcu dochodzi odczyt kolumn po nazwach i escapowanie danych.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: siatka CSS z kolumnami 55% i 45% zamiast float i clear (bloki w kodzie w naturalnej kolejności), kolory w zmiennych CSS i oba zapytania wykonane przez PDO na górze pliku, z bezpiecznym wypisywaniem danych - obie wersje są zgodne z kluczem.

Baza i zdjęcie pochodzą z prawdziwego archiwum pliki1 (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.

Jak liczą się punkty. Klucz ma 35 pozycji (R.1.1 - R.5.6), każda za 1 punkt; pozycja R.2.10 jest w opublikowanym kluczu pusta (bez treści kryterium). Próg zdania części praktycznej to 75%, czyli 27 punktów. 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 35 kryteriów (pkt)

    Krok 1: Baza danych wedkowanie

    Kryteria:

    R.1.1 Wykonano import tabel do bazy danych wedkowanie czynność udokumentowano plikiem o nazwie import w formacie PNG

    ok. 2 min
    Polecenie z arkusza

    Utwórz bazę danych o nazwie wedkowanie.

    Rozpakuj pliki1.zip z pulpitu (hasło WedkoWaniE&) do folderu zdającego: baza.sql i ryba1.jpg. W phpMyAdmin: Nowa, nazwa wedkowanie (bez „ę”).

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

    Kryteria:

    R.1.1 Wykonano import tabel do bazy danych wedkowanie czynność udokumentowano plikiem o nazwie import w formacie PNG

    ok. 2 min
    Polecenie z arkusza

    Do bazy wedkowanie zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum.

    Import → baza.sql → Wykonaj. Z obrazu 1 korzystasz z trzech tabel: ryby (styl_zycia: 1 - drapieżnik, 2 - ryba spokojnego żeru), okres_ochronny (z wymiar_ochronny w cm) i lowisko (rodzaj: 1 morze, 2 jezioro, 3 rzeka, 4 zalew, 5 staw). Obie mniejsze tabele wskazują rybę kluczem obcym Ryby_id. Plik zawiera też tabelę samochody - w zadaniu jej nie używasz.

  3. Krok 3: Zrzut ekranu import.png

    Kryteria:

    R.1.1 Wykonano import tabel do bazy danych wedkowanie czynność udokumentowano plikiem o nazwie import w formacie PNG

    ok. 2 min
    Polecenie z arkusza

    Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij 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, zapis jako import.png; zrzuty zapytań będą w JPEG.

  4. Krok 4: Zapytanie 1: ryby drapieżne

    Kryteria: ,

    R.1.2 Zapisano plik o nazwie kwerendy.txt zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania

    R.1.3 Utworzono zapytanie 1 wybierające jedynie pola id, nazwa i wystepowanie z tabeli Ryby dla ryb drapieżnych. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT id, nazwa, wystepowanie FROM ryby WHERE styl_zycia=1; oraz wynik działania udokumentowano zrzutem, na którym jest widocznych dokładnie 5 wierszy dla id = 1, 3, 4, 5, 6, widoczne jedynie kolumny id, nazwa, wystepowanie

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 1: wybierające jedynie pola id, nazwa i wystepowanie z tabeli Ryby dla ryb drapieżnych.

    „Drapieżne” to w bazie styl_zycia = 1 (opis w treści zadania). Wynik: 5 ryb o identyfikatorach 1, 3, 4, 5, 6 - jak w kluczu. Zrzut kw1.jpg. To zapytanie wyśle skrypt 2.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT id, nazwa, wystepowanie FROM ryby WHERE styl_zycia = 1;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: wymiar ochronny poniżej 30 cm

    Kryteria:

    R.1.4 Utworzono zapytanie 2 wybierające jedynie pola Ryby_id oraz wymiar_ochronny z tabeli Okres_ochronny dla ryb, których wymiar ochronny jest mniejszy niż 30 cm. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT Ryby_id, wymiar_ochronny FROM okres_ochronny WHERE wymiar_ochronny < 30; oraz wynik działania udokumentowano zrzutem, na którym są widoczne dokładnie 4 wiersze: 4 15; 6 0; 7 0; 8 25

    ok. 1 min
    Polecenie z arkusza

    Zapytanie 2: wybierające jedynie pola Ryby_id oraz wymiar_ochronny z tabeli Okres_ochronny dla ryb, których wymiar ochronny jest mniejszy niż 30 cm.

    „Mniejszy niż” to < (mniejszy lub równy byłby <=). Wynik: 4 wiersze - 4/15, 6/0, 7/0, 8/25 - jak w kluczu. Zrzut kw2.jpg.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT id, nazwa, wystepowanie FROM ryby WHERE styl_zycia = 1;

-- Zapytanie 2
SELECT Ryby_id, wymiar_ochronny FROM okres_ochronny WHERE wymiar_ochronny < 30;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: ryby rzeczne z łowiskiem

    Kryteria:

    R.1.5 Utworzono zapytanie 3 wybierające jedynie pole nazwa z tabeli Ryby oraz odpowiadające tej nazwie pola akwen i wojewodztwo z tabeli Lowisko dla łowisk, które są rzekami. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa, akwen, wojewodztwo FROM ryby JOIN lowisko ON ryby.id = lowisko.Ryby_id WHERE rodzaj = 3; (możliwe również INNER JOIN lub porównanie kluczy po WHERE) oraz wynik działania udokumentowano zrzutem, na którym są widoczne dokładnie 2 rekordy z danymi: Szczupak Warta-Obrzycko Wielkopolskie; Leszcz Przemsza k.Okradzinowa Slaskie

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 3: wybierające jedynie pole nazwa z tabeli Ryby oraz odpowiadające tej nazwie pola akwen i wojewodztwo z tabeli Lowisko dla łowisk, które są rzekami. Zapytanie wykorzystuje relację.

    FROM ryby JOIN lowisko ON ryby.id = lowisko.Ryby_id - ryba z jej łowiskiem; „rzeki” to rodzaj = 3. Wynik: Szczupak (Warta-Obrzycko, Wielkopolskie) i Leszcz (Przemsza k. Okradzinowa, Slaskie). Zrzut kw3.jpg. To zapytanie wyśle skrypt 1.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT id, nazwa, wystepowanie FROM ryby WHERE styl_zycia = 1;

-- Zapytanie 2
SELECT Ryby_id, wymiar_ochronny FROM okres_ochronny WHERE wymiar_ochronny < 30;

-- Zapytanie 3
SELECT nazwa, akwen, wojewodztwo FROM ryby JOIN lowisko ON ryby.id = lowisko.Ryby_id WHERE rodzaj = 3;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: kolumna dobowy_limit 0-255

    Kryteria:

    R.1.6 Utworzono zapytanie 4 dodające do tabeli Ryby kolumnę dobowy_limit typu numerycznego, o rozmiarze pozwalającym na wpisanie jedynie liczb naturalnych z przedziału <0, 255> (tinyint unsigned). W pliku z kwerendami lub na zrzucie istnieje zapis np.: ALTER TABLE ryby ADD dobowy_limit TINYINT UNSIGNED; (jedynie typ TINYINT jest poprawny, błędem jest zapis UNSIGNED przed typem) oraz wynik działania udokumentowano zrzutem, na którym jest widoczna wykonana kwerenda i komunikat lub struktura tabeli z nazwą nowego pola

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: dodające do tabeli Ryby kolumnę dobowy_limit typu numerycznego, o rozmiarze pozwalającym na wpisanie jedynie liczb z przedziału <0, 255>.

    Typ dobierasz do zakresu: TINYINT zajmuje 1 bajt, czyli 256 wartości; bez znaku (UNSIGNED) to dokładnie 0-255. Klucz przyjmuje tylko ten typ i tę kolejność słów: TINYINT UNSIGNED. Zrzut kw4.jpg: wykonana kwerenda z komunikatem albo, jak obok, struktura tabeli z nowym polem.

    Typowe błędy

    UNSIGNED TINYINT (odwrotna kolejność) to błąd składni; INT pozwala na dużo większe liczby, a TINYINT bez UNSIGNED na zakres -128..127 - klucz nie uzna ani jednego, ani drugiego.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT id, nazwa, wystepowanie FROM ryby WHERE styl_zycia = 1;

-- Zapytanie 2
SELECT Ryby_id, wymiar_ochronny FROM okres_ochronny WHERE wymiar_ochronny < 30;

-- Zapytanie 3
SELECT nazwa, akwen, wojewodztwo FROM ryby JOIN lowisko ON ryby.id = lowisko.Ryby_id WHERE rodzaj = 3;

-- Zapytanie 4
ALTER TABLE ryby ADD COLUMN dobowy_limit TINYINT UNSIGNED;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

    Kroki 8-19 · po tym etapie masz 17 z 35 kryteriów (pkt)

    Krok 8: ryba1.jpg: szerokość 400 px

    Kryteria:

    R.2.1 Grafikę w pliku o nazwie ryba1.jpg przeskalowano z zachowaniem proporcji do szerokości 400 px, odpowiadająca temu wysokość wynosi 320 px (± 2 px)

    ok. 2 min
    Polecenie z arkusza

    Przygotowanie grafiki: Plik ryba1.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego szerokość wynosiła dokładnie 400 px.

    Zdjęcie ma 600 × 480 px. Obraz → Skaluj obraz, łańcuch zamknięty, szerokość 400 - wysokość wyjdzie 320 px (klucz R.2.1: 320 ± 2). Eksport pod tą samą nazwą.

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

  9. Krok 9: Plik wedkuj.php w HTML5

    Kryteria:

    R.2.2 Witrynę internetową zapisano w pliku wedkuj.php oraz zapisano jawnie standard kodowania polskich znaków i deklarację HTML5 <!DOCTYPE HTML> oraz zadeklarowano dla witryny język polski

    ok. 2 min
    Polecenie z arkusza

    Cechy witryny: Składa się ze strony o nazwie wedkuj.php zapisanej w języku HTML5.

    Utwórz wedkuj.php: <!DOCTYPE html> i szkielet strony.

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

  10. Krok 10: Język strony

    Kryteria:

    R.2.2 Witrynę internetową zapisano w pliku wedkuj.php oraz zapisano jawnie standard kodowania polskich znaków i deklarację HTML5 <!DOCTYPE HTML> oraz zadeklarowano dla witryny język polski

    ok. 1 min
    Polecenie z arkusza

    Zadeklarowany język dla witryny: polski.

    lang="pl" w <html>.

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

  11. Krok 11: Kodowanie polskich znaków

    Kryteria:

    R.2.2 Witrynę internetową zapisano w pliku wedkuj.php oraz zapisano jawnie standard kodowania polskich znaków i deklarację HTML5 <!DOCTYPE HTML> oraz zadeklarowano dla witryny język polski

    ok. 1 min
    Polecenie z arkusza

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

    <meta charset="UTF-8">.

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

  12. Krok 12: Tytuł strony

    Kryteria:

    R.2.3 Nadano tytuł strony: Wędkowanie

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Wędkowanie”.

    <title> z polską literą - stąd potrzebne kodowanie UTF-8 (R.2.3).

    wedkuj.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  13. Krok 13: Podpięcie arkusza stylów

    Kryteria:

    R.3.3 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl_1.css , formatowanie 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_1.css prawidłowo połączony z kodem strony.

    Nazwa z podkreśleniem i cyfrą: styl_1.css.

    Typowe błędy

    styl.css zamiast styl_1.css odcina wszystkie style (R.3.3 i cały rezultat R.4).

    wedkuj.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  14. Krok 14: Bloki: baner, prawy, dwa lewe, stopka

    Kryteria:

    R.2.4 Układ strony zdefiniowano dzieląc ją na bloki: banera, dwa bloki lewe, prawy i stopkę. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: na górze blok banera, poniżej po lewej stronie dwa bloki lewe, obok jeden blok prawy, na dole blok stopki. Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2.

    <header>, trzy <section> i <footer> (R.2.4). Identyfikatory po angielsku: rivers (ryby rzeczne - pierwszy lewy), predators (drapieżniki - drugi lewy), photo (prawy).

    Blok prawy piszesz w kodzie przed blokami lewymi: na obrazie 2 stoi obok obu, od samej góry. Przy układzie opływanym (float) blok, który ma zacząć się na górze, musi pojawić się w kodzie przed blokami, obok których stoi.

    wedkuj.php PHP zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
    <header>
    </header>
    <section id="photo">
    </section>
    <section id="rivers">
    </section>
    <section id="predators">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  15. Krok 15: Baner

    Kryteria:

    R.2.5 W banerze zapisano nagłówek h1: "Portal dla wędkarzy" oraz w blokach lewych przynajmniej jeden nagłówek h3: "Ryby zamieszkujące rzeki" lub "Ryby drapieżne naszych wód" oraz w stopce paragraf o treści: "Stronę wykonał:" z numerem zdającego

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek pierwszego stopnia o treści „Portal dla wędkarzy”.

    <h1> w <header>.

    wedkuj.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
    </section>
    <section id="rivers">
    </section>
    <section id="predators">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  16. Krok 16: Pierwszy blok lewy: nagłówek i lista

    Kryteria: ,

    R.2.5 W banerze zapisano nagłówek h1: "Portal dla wędkarzy" oraz w blokach lewych przynajmniej jeden nagłówek h3: "Ryby zamieszkujące rzeki" lub "Ryby drapieżne naszych wód" oraz w stopce paragraf o treści: "Stronę wykonał:" z numerem zdającego

    R.2.6 W pierwszym bloku lewym umieszczono listę numerowaną z dwoma elementami, zastosowano znaczniki <ol>, <li> (wygenerowaną skryptem lub w HTML)

    ok. 1 min
    Polecenie z arkusza

    Zawartość pierwszego bloku lewego: Nagłówek trzeciego stopnia o treści: „Ryby zamieszkujące rzeki”. Lista numerowana (uporządkowana) wypełniona przez skrypt 1.

    <h3> i pusta <ol> - elementy wypisze skrypt 1.

    wedkuj.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
    </section>
    <section id="rivers">
        <h3>Ryby zamieszkujące rzeki</h3>
        <ol>
        </ol>
    </section>
    <section id="predators">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  17. Krok 17: Drugi blok lewy: tabela z wierszem nagłówkowym

    Kryteria: , ,

    R.2.5 W banerze zapisano nagłówek h1: "Portal dla wędkarzy" oraz w blokach lewych przynajmniej jeden nagłówek h3: "Ryby zamieszkujące rzeki" lub "Ryby drapieżne naszych wód" oraz w stopce paragraf o treści: "Stronę wykonał:" z numerem zdającego

    R.2.7 W drugim bloku lewym umieszczono tabelę o trzech kolumnach, zastosowano znaczniki <table>, <tr>, <td> (wygenerowaną skryptem lub w HTML)

    R.2.8 Pierwszy wiersz tabeli zawiera komórki nagłówkowe o treści, kolejno: L.p., Gatunek, Występowanie, zastosowano znacznik <th>

    ok. 2 min
    Polecenie z arkusza

    Zawartość drugiego bloku lewego: Nagłówek trzeciego stopnia o treści: „Ryby drapieżne naszych wód”. Tabela o trzech kolumnach wypełniona danymi. Pierwszy wiersz zawiera komórki nagłówkowe o treści, kolejno: „L.p.”, „Gatunek”, „Występowanie”.

    Pierwszy wiersz z trzema komórkami nagłówkowymi <th> (R.2.8); kolejne wiersze dopisze skrypt 2.

    wedkuj.php PHP zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
    </section>
    <section id="rivers">
        <h3>Ryby zamieszkujące rzeki</h3>
        <ol>
        </ol>
    </section>
    <section id="predators">
        <h3>Ryby drapieżne naszych wód</h3>
        <table>
            <tr>
                <th>L.p.</th>
                <th>Gatunek</th>
                <th>Występowanie</th>
            </tr>
        </table>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  18. Krok 18: Blok prawy: obraz i odnośnik do kwerend

    Kryteria: ,

    R.2.9 W bloku prawym umieszczono obraz ryba1.jpg wraz z tekstem alternatywnym "Sum"

    R.3.2 Po wybraniu odnośnika "Pobierz kwerendy" otwiera się lub pobiera plik kwerendy.txt

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku prawego: Obraz ryba1.jpg z tekstem alternatywnym o treści: „Sum”. W kolejnej linii odnośnik do pliku kwerendy.txt z treścią: „Pobierz kwerendy”.

    Obraz i odnośnik są elementami liniowymi - stanęłyby obok siebie. „W kolejnej linii” to znacznik <br> między nimi. Odnośnik może prowadzić do dowolnego pliku, nie tylko strony: href="kwerendy.txt" - przeglądarka otworzy plik tekstowy albo go pobierze (R.2.9, R.3.2).

    wedkuj.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
        <img src="ryba1.jpg" alt="Sum">
        <br>
        <a href="kwerendy.txt">Pobierz kwerendy</a>
    </section>
    <section id="rivers">
        <h3>Ryby zamieszkujące rzeki</h3>
        <ol>
        </ol>
    </section>
    <section id="predators">
        <h3>Ryby drapieżne naszych wód</h3>
        <table>
            <tr>
                <th>L.p.</th>
                <th>Gatunek</th>
                <th>Występowanie</th>
            </tr>
        </table>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  19. Krok 19: Stopka

    Kryteria:

    R.2.5 W banerze zapisano nagłówek h1: "Portal dla wędkarzy" oraz w blokach lewych przynajmniej jeden nagłówek h3: "Ryby zamieszkujące rzeki" lub "Ryby drapieżne naszych wód" oraz w stopce paragraf o treści: "Stronę wykonał:" z numerem zdającego

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: akapit (paragraf) o treści: „Stronę wykonał: ”, oraz zawierający numer, którym został podpisany arkusz.

    Akapit w <footer>. Na egzaminie wpisujesz numer PESEL - tu stoi autor rozwiązania.

    wedkuj.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
        <img src="ryba1.jpg" alt="Sum">
        <br>
        <a href="kwerendy.txt">Pobierz kwerendy</a>
    </section>
    <section id="rivers">
        <h3>Ryby zamieszkujące rzeki</h3>
        <ol>
        </ol>
    </section>
    <section id="predators">
        <h3>Ryby drapieżne naszych wód</h3>
        <table>
            <tr>
                <th>L.p.</th>
                <th>Gatunek</th>
                <th>Występowanie</th>
            </tr>
        </table>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  20. Etap 3: Styl CSS

    Kroki 20-27 · po tym etapie masz 28 z 35 kryteriów (pkt)

    Krok 20: Plik styl_1.css: krój czcionki

    Kryteria:

    R.4.1 Ustawiono domyślne formatowanie wszystkich selektorów (dla *): krój czcionki Helvetica (w przypadku wymienionych kilku czcionek Helvetica jest pierwsza)

    ok. 1 min
    Polecenie z arkusza

    Styl CSS zdefiniowany w całości w zewnętrznym pliku o nazwie styl_1.css. Domyślne formatowanie wszystkich selektorów: krój czcionki Helvetica.

    Utwórz styl_1.css; selektor * (R.4.1).

    styl_1.css CSS nowy plik 
    * {
    font-family: Helvetica;
}
    Podgląd strony po tym kroku (wedkuj.php)

  21. Krok 21: Baner i stopka

    Kryteria: , , ,

    R.4.2 Ustawiono kolor tła #00838F dla banera i stopki, #EFEFEF dla obu bloków lewych oraz #4FB3BF dla bloku prawego

    R.4.3 Ustawiono biały kolor czcionki i rozmiar czcionki 130% dla banera i stopki

    R.4.6 Ustawiono wyrównanie tekstu do środka dla banera, stopki i bloku prawego

    R.4.7 Ustawiono marginesy wewnętrzne (padding) dla banera i stopki 5px, dla selektorów td i th 4px oraz marginesy zewnętrzne (margin) 20px dla selektora img i auto dla tabeli

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla bloku banera i stopki: kolor tła #00838F, biały kolor czcionki, marginesy wewnętrzne 5 px, rozmiar czcionki 130%, wyrównanie tekstu do środka.

    Jedna reguła dla dwóch selektorów.

    styl_1.css CSS zmienione: 7 linii 
    * {
    font-family: Helvetica;
}
header, footer {
    background-color: #00838F;
    color: white;
    padding: 5px;
    font-size: 130%;
    text-align: center;
}
    Podgląd strony po tym kroku (wedkuj.php)

  22. Krok 22: Bloki lewe: tło, szerokość, wysokości

    Kryteria: , ,

    R.4.2 Ustawiono kolor tła #00838F dla banera i stopki, #EFEFEF dla obu bloków lewych oraz #4FB3BF dla bloku prawego

    R.4.4 Ustawiono wysokość pierwszego bloku lewego 150px, drugiego lewego 300px oraz prawego 450px

    R.4.5 Ustawiono szerokość obu bloków lewych 55%, bloku prawego 45% (width lub grid- template-columns lub flex) oraz selektora table 80%

    ok. 1 min
    Polecenie z arkusza

    Dla obu bloków lewych: kolor tła #EFEFEF, szerokość 55%. Dodatkowo dla pierwszego bloku lewego wysokość 150 px oraz dla drugiego – 300 px.

    Wspólna reguła dla obu bloków i dwie osobne z wysokościami. Razem 150 + 300 = 450 px - tyle, ile blok prawy.

    styl_1.css CSS zmienione: 10 linii 
    * {
    font-family: Helvetica;
}
header, footer {
    background-color: #00838F;
    color: white;
    padding: 5px;
    font-size: 130%;
    text-align: center;
}
#rivers, #predators {
    background-color: #EFEFEF;
    width: 55%;
}
#rivers {
    height: 150px;
}
#predators {
    height: 300px;
}
    Podgląd strony po tym kroku (wedkuj.php)

  23. Krok 23: Blok prawy

    Kryteria: , , ,

    R.4.2 Ustawiono kolor tła #00838F dla banera i stopki, #EFEFEF dla obu bloków lewych oraz #4FB3BF dla bloku prawego

    R.4.4 Ustawiono wysokość pierwszego bloku lewego 150px, drugiego lewego 300px oraz prawego 450px

    R.4.5 Ustawiono szerokość obu bloków lewych 55%, bloku prawego 45% (width lub grid- template-columns lub flex) oraz selektora table 80%

    R.4.6 Ustawiono wyrównanie tekstu do środka dla banera, stopki i bloku prawego

    ok. 1 min
    Polecenie z arkusza

    Dla bloku prawego: kolor tła #4FB3BF, szerokość 45%, wysokość 450 px, wyrównanie tekstu do środka.

    55% + 45% = 100% szerokości.

    styl_1.css CSS zmienione: 6 linii 
    * {
    font-family: Helvetica;
}
header, footer {
    background-color: #00838F;
    color: white;
    padding: 5px;
    font-size: 130%;
    text-align: center;
}
#rivers, #predators {
    background-color: #EFEFEF;
    width: 55%;
}
#rivers {
    height: 150px;
}
#predators {
    height: 300px;
}
#photo {
    background-color: #4FB3BF;
    width: 45%;
    height: 450px;
    text-align: center;
}
    Podgląd strony po tym kroku (wedkuj.php)

  24. Krok 24: Obraz: cień i marginesy

    Kryteria: ,

    R.4.7 Ustawiono marginesy wewnętrzne (padding) dla banera i stopki 5px, dla selektorów td i th 4px oraz marginesy zewnętrzne (margin) 20px dla selektora img i auto dla tabeli

    R.4.8 Ustawiono cień dla obrazu o wartości box-shadow: 10px 10px 7px DimGray; (lub DimGrey)

    ok. 1 min
    Polecenie z arkusza

    Dla selektora obrazu: cień o przesunięciu 10 px w obu osiach, rozmyciu 7 px i kolorze DimGray, marginesy zewnętrzne 20 px.

    box-shadow: przesunięcie w poziomie, w pionie, rozmycie, kolor (R.4.8). Selektor znacznika img, jak każe uwaga w arkuszu.

    styl_1.css CSS zmienione: 4 linie 
    * {
    font-family: Helvetica;
}
header, footer {
    background-color: #00838F;
    color: white;
    padding: 5px;
    font-size: 130%;
    text-align: center;
}
#rivers, #predators {
    background-color: #EFEFEF;
    width: 55%;
}
#rivers {
    height: 150px;
}
#predators {
    height: 300px;
}
#photo {
    background-color: #4FB3BF;
    width: 45%;
    height: 450px;
    text-align: center;
}
img {
    box-shadow: 10px 10px 7px DimGray;
    margin: 20px;
}
    Podgląd strony po tym kroku (wedkuj.php)

  25. Krok 25: Tabela: obramowania, wyśrodkowanie, marginesy komórek

    Kryteria: , ,

    R.4.5 Ustawiono szerokość obu bloków lewych 55%, bloku prawego 45% (width lub grid- template-columns lub flex) oraz selektora table 80%

    R.4.7 Ustawiono marginesy wewnętrzne (padding) dla banera i stopki 5px, dla selektorów td i th 4px oraz marginesy zewnętrzne (margin) 20px dla selektora img i auto dla tabeli

    R.4.9 Ustawiono dla tabeli i komórki tabeli obramowanie o cechach 1px solid #4FB3BF, obramowanie połączone border-collapse: collapse; lub border-spacing: 0px; (styl dla th nie jest wymagany)

    ok. 2 min
    Polecenie z arkusza

    Dla selektora tabeli, komórek tabeli, komórek nagłówkowych: obramowanie linią ciągłą o szerokości 1 px i kolorze #4FB3BF, obramowanie tabeli i komórek połączone. Dodatkowo dla selektora tabeli: marginesy zewnętrzne wyliczane automatycznie przez przeglądarkę, szerokość 80%. Dodatkowo dla selektora komórek tabeli i nagłówkowych: marginesy wewnętrzne 4 px.

    Trzy reguły z arkusza po kolei. margin: auto przy szerokości 80% stawia tabelę na środku bloku; border-collapse: collapse łączy ramki (R.4.9).

    styl_1.css CSS zmienione: 11 linii 
    * {
    font-family: Helvetica;
}
header, footer {
    background-color: #00838F;
    color: white;
    padding: 5px;
    font-size: 130%;
    text-align: center;
}
#rivers, #predators {
    background-color: #EFEFEF;
    width: 55%;
}
#rivers {
    height: 150px;
}
#predators {
    height: 300px;
}
#photo {
    background-color: #4FB3BF;
    width: 45%;
    height: 450px;
    text-align: center;
}
img {
    box-shadow: 10px 10px 7px DimGray;
    margin: 20px;
}
table, td, th {
    border: 1px solid #4FB3BF;
    border-collapse: collapse;
}
table {
    margin: auto;
    width: 80%;
}
td, th {
    padding: 4px;
}
    Podgląd strony po tym kroku (wedkuj.php)

  26. Krok 26: Wiersz pod kursorem

    Kryteria:

    R.4.10 Gdy kursor myszy znajdzie się na wierszu tabeli, kolor tła wiersza zmienia się na #4FB3BF (dla tr:hover)

    ok. 1 min
    Polecenie z arkusza

    Gdy kursor myszy znajdzie się na wierszu tabeli, kolor tła wiersza zmienia się na #4FB3BF.

    tr:hover - cały wiersz zmienia tło (R.4.10). Wiersze z danymi wypisze skrypt 2.

    styl_1.css CSS zmienione: 3 linie 
    * {
    font-family: Helvetica;
}
header, footer {
    background-color: #00838F;
    color: white;
    padding: 5px;
    font-size: 130%;
    text-align: center;
}
#rivers, #predators {
    background-color: #EFEFEF;
    width: 55%;
}
#rivers {
    height: 150px;
}
#predators {
    height: 300px;
}
#photo {
    background-color: #4FB3BF;
    width: 45%;
    height: 450px;
    text-align: center;
}
img {
    box-shadow: 10px 10px 7px DimGray;
    margin: 20px;
}
table, td, th {
    border: 1px solid #4FB3BF;
    border-collapse: collapse;
}
table {
    margin: auto;
    width: 80%;
}
td, th {
    padding: 4px;
}
tr:hover {
    background-color: #4FB3BF;
}
    Podgląd strony po tym kroku (wedkuj.php)

  27. Krok 27: Układ bloków zgodny z obrazem 2

    Kryteria:

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z obrazem 2 w arkuszu (prawidłowo zastosowano właściwości CSS układające bloki na stronie, np. float i clear albo display flex albo grid)

    ok. 2 min
    Polecenie z arkusza

    Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2.

    • #photo { float: right; } - blok prawy przy prawej krawędzi, od góry (stąd jego miejsce w kodzie przed blokami lewymi),
    • #rivers, #predators { float: left; } - pierwszy lewy na górze, a drugi już się obok niego nie zmieści (55% + 55%), więc spada pod pierwszy,
    • footer { clear: both; } - stopka pod wszystkimi blokami (R.3.1).
    styl_1.css CSS zmienione: 5 linii 
    * {
    font-family: Helvetica;
}
footer {
    clear: both;
}
header, footer {
    background-color: #00838F;
    color: white;
    padding: 5px;
    font-size: 130%;
    text-align: center;
}
#rivers, #predators {
    float: left;
    background-color: #EFEFEF;
    width: 55%;
}
#rivers {
    height: 150px;
}
#predators {
    height: 300px;
}
#photo {
    float: right;
    background-color: #4FB3BF;
    width: 45%;
    height: 450px;
    text-align: center;
}
img {
    box-shadow: 10px 10px 7px DimGray;
    margin: 20px;
}
table, td, th {
    border: 1px solid #4FB3BF;
    border-collapse: collapse;
}
table {
    margin: auto;
    width: 80%;
}
td, th {
    padding: 4px;
}
tr:hover {
    background-color: #4FB3BF;
}
    Podgląd strony po tym kroku (wedkuj.php)

  28. Etap 4: Skrypty PHP

    Kroki 28-32 · po tym etapie masz 34 z 35 kryteriów (pkt)

    Krok 28: Połączenie z bazą danych

    Kryteria:

    R.5.1 Skrypt zawiera działające połączenie z serwerem bazy danych i wybór bazy wedkowanie

    ok. 2 min
    Polecenie z arkusza

    Wymagania dotyczące skryptów: Napisane w języku PHP. Skrypty łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie wedkowanie.

    Połączenie raz, zaraz po <body>, w $connection (R.5.1). Od tego kroku podgląd to wynik działania strony po stronie serwera.

    wedkuj.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'wedkowanie');
?>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
        <img src="ryba1.jpg" alt="Sum">
        <br>
        <a href="kwerendy.txt">Pobierz kwerendy</a>
    </section>
    <section id="rivers">
        <h3>Ryby zamieszkujące rzeki</h3>
        <ol>
        </ol>
    </section>
    <section id="predators">
        <h3>Ryby drapieżne naszych wód</h3>
        <table>
            <tr>
                <th>L.p.</th>
                <th>Gatunek</th>
                <th>Występowanie</th>
            </tr>
        </table>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  29. Krok 29: Skrypt 1: zapytanie 3 do bazy

    Kryteria:

    R.5.3 Skrypt 1 wysyła do bazy danych zapytanie 3 lub skrypt 2 wysyła do bazy zapytanie 1

    ok. 1 min
    Polecenie z arkusza

    Skrypt 1: wysyła do bazy danych zapytanie 3.

    Skrypt stoi w <ol> pierwszego bloku lewego; wynik w $riverFish (ryby rzeczne).

    wedkuj.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'wedkowanie');
?>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
        <img src="ryba1.jpg" alt="Sum">
        <br>
        <a href="kwerendy.txt">Pobierz kwerendy</a>
    </section>
    <section id="rivers">
        <h3>Ryby zamieszkujące rzeki</h3>
        <ol>
<?php
$riverFish = mysqli_query($connection, 'SELECT nazwa, akwen, wojewodztwo FROM ryby JOIN lowisko ON ryby.id = lowisko.Ryby_id WHERE rodzaj = 3;');
?>
        </ol>
    </section>
    <section id="predators">
        <h3>Ryby drapieżne naszych wód</h3>
        <table>
            <tr>
                <th>L.p.</th>
                <th>Gatunek</th>
                <th>Występowanie</th>
            </tr>
        </table>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

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

  30. Krok 30: Skrypt 1: zdanie o każdej rybie jako element listy

    Kryteria: , ,

    R.5.4 Skrypt 1 wyświetla każdy zwrócony zapytaniem wiersz według wzoru: "<nazwa_gatunku> pływa w rzece <nazwa_akwenu>, <województwo>”, gdzie nawiasy <> oznaczają wartości pobrane z bazy danych

    R.5.5 Skrypt 1 wyświetla każdy zwrócony zapytaniem wiersz jako element listy

    R.2.6 W pierwszym bloku lewym umieszczono listę numerowaną z dwoma elementami, zastosowano znaczniki <ol>, <li> (wygenerowaną skryptem lub w HTML)

    ok. 2 min
    Polecenie z arkusza

    Każdy zwrócony zapytaniem wiersz jest wyświetlany w osobnym elemencie listy, według wzoru: ”<nazwa_gatunku> pływa w rzece <nazwa_akwenu>, <wojewodztwo>”, gdzie nawiasy <> oznaczają wartości pobrane z bazy danych.

    Pętla while z mysqli_fetch_row; w napisie w cudzysłowie PHP podstawia trzy kolumny: nazwa $row[0], akwen $row[1], województwo $row[2] - razem zdanie według wzoru. Każde zdanie w osobnym <li> (R.5.4, R.5.5).

    wedkuj.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'wedkowanie');
?>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
        <img src="ryba1.jpg" alt="Sum">
        <br>
        <a href="kwerendy.txt">Pobierz kwerendy</a>
    </section>
    <section id="rivers">
        <h3>Ryby zamieszkujące rzeki</h3>
        <ol>
<?php
$riverFish = mysqli_query($connection, 'SELECT nazwa, akwen, wojewodztwo FROM ryby JOIN lowisko ON ryby.id = lowisko.Ryby_id WHERE rodzaj = 3;');
while ($row = mysqli_fetch_row($riverFish)) {
    echo "<li>$row[0] pływa w rzece $row[1], $row[2]</li>";
}
?>
        </ol>
    </section>
    <section id="predators">
        <h3>Ryby drapieżne naszych wód</h3>
        <table>
            <tr>
                <th>L.p.</th>
                <th>Gatunek</th>
                <th>Występowanie</th>
            </tr>
        </table>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  31. Krok 31: Skrypt 2: wiersze tabeli ryb drapieżnych

    Kryteria: , ,

    R.5.3 Skrypt 1 wysyła do bazy danych zapytanie 3 lub skrypt 2 wysyła do bazy zapytanie 1

    R.5.6 Skrypt 2 wyświetla każdy zwrócony zapytaniem wiersz jako osobny wiersz tabeli zgodnie z Obrazem 2 w arkuszu egzaminacyjnym

    R.2.7 W drugim bloku lewym umieszczono tabelę o trzech kolumnach, zastosowano znaczniki <table>, <tr>, <td> (wygenerowaną skryptem lub w HTML)

    ok. 2 min
    Polecenie z arkusza

    Skrypt 2: wysyła do bazy danych zapytanie 1. Każdy zwrócony zapytaniem wiersz jest wyświetlany w osobnym wierszu tabeli.

    Skrypt 2 stoi w tabeli, pod wierszem nagłówkowym. Każdy wiersz wyniku zapytania 1 to <tr> z trzema komórkami - w kolumnie „L.p.” stoi identyfikator ryby, jak na obrazie 2 (1, 3, 4, 5, 6). Najedź na wiersz - podświetla się (R.5.6).

    wedkuj.php PHP zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'wedkowanie');
?>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
        <img src="ryba1.jpg" alt="Sum">
        <br>
        <a href="kwerendy.txt">Pobierz kwerendy</a>
    </section>
    <section id="rivers">
        <h3>Ryby zamieszkujące rzeki</h3>
        <ol>
<?php
$riverFish = mysqli_query($connection, 'SELECT nazwa, akwen, wojewodztwo FROM ryby JOIN lowisko ON ryby.id = lowisko.Ryby_id WHERE rodzaj = 3;');
while ($row = mysqli_fetch_row($riverFish)) {
    echo "<li>$row[0] pływa w rzece $row[1], $row[2]</li>";
}
?>
        </ol>
    </section>
    <section id="predators">
        <h3>Ryby drapieżne naszych wód</h3>
        <table>
            <tr>
                <th>L.p.</th>
                <th>Gatunek</th>
                <th>Występowanie</th>
            </tr>
<?php
$predators = mysqli_query($connection, 'SELECT id, nazwa, wystepowanie FROM ryby WHERE styl_zycia = 1;');
while ($row = mysqli_fetch_row($predators)) {
    echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";
}
?>
        </table>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wedkuj.php)

  32. Krok 32: Zamknięcie połączenia

    Kryteria:

    R.5.2 Ostatnią operacją na bazie jest jej zamknięcie (zgodne ze składnią)

    ok. 1 min
    Polecenie z arkusza

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

    mysqli_close($connection) po stopce - ostatnia operacja na bazie (R.5.2). Strona spełnia wszystkie kryteria arkusza.

    wedkuj.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'wedkowanie');
?>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
        <img src="ryba1.jpg" alt="Sum">
        <br>
        <a href="kwerendy.txt">Pobierz kwerendy</a>
    </section>
    <section id="rivers">
        <h3>Ryby zamieszkujące rzeki</h3>
        <ol>
<?php
$riverFish = mysqli_query($connection, 'SELECT nazwa, akwen, wojewodztwo FROM ryby JOIN lowisko ON ryby.id = lowisko.Ryby_id WHERE rodzaj = 3;');
while ($row = mysqli_fetch_row($riverFish)) {
    echo "<li>$row[0] pływa w rzece $row[1], $row[2]</li>";
}
?>
        </ol>
    </section>
    <section id="predators">
        <h3>Ryby drapieżne naszych wód</h3>
        <table>
            <tr>
                <th>L.p.</th>
                <th>Gatunek</th>
                <th>Występowanie</th>
            </tr>
<?php
$predators = mysqli_query($connection, 'SELECT id, nazwa, wystepowanie FROM ryby WHERE styl_zycia = 1;');
while ($row = mysqli_fetch_row($predators)) {
    echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";
}
?>
        </table>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
<?php
mysqli_close($connection);
?>
</body>
</html>

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

  33. Etap 5: Dobre praktyki (poza kluczem)

    Krok 33 · po tym etapie masz 34 z 35 kryteriów (pkt)

    Krok 33: Kolumny po nazwach i escapowanie

    ok. 4 min
    Polecenie z arkusza

    Każdy zwrócony zapytaniem wiersz jest wyświetlany w osobnym elemencie listy.

    mysqli_fetch_assoc oddaje wiersz po nazwach kolumn - $row['akwen'] mówi więcej niż $row[1], a zmiana kolejności w SELECT niczego nie psuje. Teksty z bazy przechodzą przez htmlspecialchars przy wypisywaniu, więc znacznik wpisany w nazwę łowiska nie wykona się na stronie (XSS). W napisie z cudzysłowem element tablicy z kluczem tekstowym obejmujesz klamrami: {$row['id']}. Podgląd bez zmian.

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

    wedkuj.php PHP zmienione: 9 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wędkowanie</title>
    <link rel="stylesheet" href="styl_1.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'wedkowanie');
?>
    <header>
        <h1>Portal dla wędkarzy</h1>
    </header>
    <section id="photo">
        <img src="ryba1.jpg" alt="Sum">
        <br>
        <a href="kwerendy.txt">Pobierz kwerendy</a>
    </section>
    <section id="rivers">
        <h3>Ryby zamieszkujące rzeki</h3>
        <ol>
<?php
$riverFish = mysqli_query($connection, 'SELECT nazwa, akwen, wojewodztwo FROM ryby JOIN lowisko ON ryby.id = lowisko.Ryby_id WHERE rodzaj = 3;');
while ($row = mysqli_fetch_assoc($riverFish)) {
    $name = htmlspecialchars($row['nazwa']);
    $river = htmlspecialchars($row['akwen']);
    $region = htmlspecialchars($row['wojewodztwo']);
    echo "<li>$name pływa w rzece $river, $region</li>";
}
?>
        </ol>
    </section>
    <section id="predators">
        <h3>Ryby drapieżne naszych wód</h3>
        <table>
            <tr>
                <th>L.p.</th>
                <th>Gatunek</th>
                <th>Występowanie</th>
            </tr>
<?php
$predators = mysqli_query($connection, 'SELECT id, nazwa, wystepowanie FROM ryby WHERE styl_zycia = 1;');
while ($row = mysqli_fetch_assoc($predators)) {
    $name = htmlspecialchars($row['nazwa']);
    $habitat = htmlspecialchars($row['wystepowanie']);
    echo "<tr><td>{$row['id']}</td><td>$name</td><td>$habitat</td></tr>";
}
?>
        </table>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
<?php
mysqli_close($connection);
?>
</body>
</html>

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

  34. Etap 6: Oddanie pracy

    Krok 34 · po tym etapie masz 34 z 35 kryteriów (pkt)

    Krok 34: 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 weryfikowałeś poprawność działania witryny. Umieść go w folderze z numerem, którym został podpisany arkusz. Nagraj płytę z rezultatami pracy. W folderze z numerem, którym został podpisany arkusz, powinny znajdować się pliki: import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, przeglądarka.txt, ryba1.jpg, styl_1.css, wedkuj.php, ewentualnie inne przygotowane pliki.

    W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę przez http://localhost/….

    Sprawdź listę plików (kwerendy.txt musi leżeć obok strony - prowadzi do niego odnośnik), 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 31.

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.