Przejdź do głównej treści
INF.03-07-23.06-SGCzerwiec 2023 · 46 kroków · ok. 71 min · 37 kryteriów z klucza

Rozwiązanie krok po kroku: Portal biblioteki (Wersja podstawowa)

Portal biblioteki w Książkowicach Małych to baza biblioteka (autorzy, książki, czytelnicy), cztery zapytania - INSERT z kluczem nadawanym automatycznie, sortowanie, złączenie książek z autorami i COUNT z GROUP BY i aliasem - grafika przeskalowana do 100 pikseli w odcieniach szarości oraz jedna strona biblioteka.php. W panelu lewym jest formularz wysyłany metodą POST, pod którym Skrypt 1 potwierdza dodanie czytelnika i zapisuje go w bazie, a w prawym Skrypt 2 wypisuje wszystkich czytelników jako listę numerowaną - razem z tym, który przed chwilą został dodany.

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 napisane najprościej, funkcjami z tabeli 1 arkusza (mysqli_query, mysqli_fetch_row), a na końcu sprawdzone na prawdziwych błędach (puste pola, apostrof w nazwisku, odświeżenie strony) i przerobione na wersję z prawdziwych projektów.

Baza i grafika pochodzą z prawdziwego archiwum materialy7 (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 wykonaniu zapytania 1 (klucz każe sprawdzać w XAMPP 8.1.2 - zachowanie tych funkcji jest w obu wersjach takie samo). Od Skryptu 1 podgląd pokazuje stronę po wysłaniu formularza z danymi z obrazu 2, Moniki Nowak; obraz nie pokazuje jej symbolu, więc w podglądzie stoi przykładowy 56678.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (flex, PDO)” jest drugi sposób rozwiązania tego samego arkusza: panele ustawione flexem w znaczniku <main>, kolory w zmiennych CSS, cała praca z bazą przez PDO na górze pliku, sprawdzenie danych z formularza, zapytanie przygotowane i przekierowanie po zapisie, przy którym napis o dodanym czytelniku przenosi sesja - obie wersje są zgodne z kluczem.

Ten sam arkusz był też wydany pod numerami 09 i 11 tej sesji - rozwiązanie pasuje do wszystkich trzech.

Jak liczą się punkty. Klucz ma 37 kryteriów (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 28 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 37 kryteriów (pkt)

    Krok 1: Baza danych biblioteka

    ok. 2 min
    Polecenie z arkusza

    Utwórz nową bazę danych o nazwie biblioteka

    Najpierw archiwum materialy7.7z z pulpitu (hasło @Z@d@nie$s7 - małpy zamiast „a”, dolar zamiast „s”, wielkość liter ma znaczenie) i folder z numerem zdającego, do którego trafiają biblioteka.sql i biblioteka.png. W phpMyAdmin: Nowa, nazwa biblioteka. Arkusz nie podaje porównywania - wybierasz np. utf8_polish_ci. Tabel z biblioteka.sql to nie zmienia: każda ma zestaw znaków zapisany we własnej definicji (część latin1, część utf8), a porównywanie bazy dziedziczą tylko tabele zakładane później bez własnego ustawienia.

    Typowe błędy

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

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

    ok. 2 min
    Polecenie z arkusza

    Do bazy zaimportuj tabele z pliku biblioteka.sql, z wcześniej rozpakowanego archiwum

    Przy zaznaczonej bazie biblioteka: Import → biblioteka.sql → Wykonaj. Powstaje sześć tabel; zadanie używa trzech z obrazu 1: czytelnicy (10 osób, pole kod puste), autorzy (10 autorów) i ksiazki (21 tytułów, pole id_autor wskazuje autora).

  3. Krok 3: Zrzut ekranu dane.jpg

    Kryteria:

    R.1.1 Wykonano import tabel do bazy danych o nazwie biblioteka , czynność udokumentowano plikiem o nazwie dane w formacie JPEG

    ok. 2 min
    Polecenie z arkusza

    Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem zdającego, w formacie JPEG i nazwij dane. 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, wklejenie do edytora grafiki i zapis jako dane.jpg - w tym arkuszu zrzut importu nie nazywa się import. Na zrzucie widać komunikat o zakończonym imporcie i listę tabel po lewej.

    Typowe błędy

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

  4. Krok 4: Zapytanie 1: nowa czytelniczka Ewelina Romanowska

    Kryteria: ,

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

    R.1.3 Zapisano zapytanie 1 wstawiające do tabeli czytelnicy rekord Ewelina, Romanowska, 56677, wartość klucza głównego jest nadawana automatycznie. W pliku z kwerendami lub na zrzucie istnieje zapis np.: INSERT INTO czytelnicy(`imie`, `nazwisko`, `kod`) VALUES ('Ewelina', 'Romanowska', '56677'); (możliwe również bez struktury tabeli lub przez przypisania SET) oraz wynik działania zapytania udokumentowano zrzutem ekranu na którym widoczny jest komunikat o poprawnym wykonaniu zapytania lub tabela z wstawionym wierszem

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 1: wstawiające do tabeli czytelnicy nowy rekord z danymi: Ewelina Romanowska z kodem 56677. Pole klucza głównego nadawane automatycznie

    • INSERT INTO czytelnicy (imie, nazwisko, kod) - lista pól bez id: klucz główny ma AUTO_INCREMENT, więc baza sama nada kolejny numer,
    • VALUES ('Ewelina', 'Romanowska', '56677') - wartości w kolejności pól; kod jest tekstem (varchar(6)), więc też w apostrofach.

    Komunikat „1 wiersz wstawiony”, nowy rekord ma id 11. Zapytania trafiają do kwerendy.txt, zrzut z komunikatem i tabelą do kwerenda1.jpg. Z tego zapytania powstanie Skrypt 1.

    Typowe błędy

    Zapytanie wykonane dwa razy doda dwie Eweliny Romanowskie - na liście czytelników będą wtedy dwie.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES ('Ewelina', 'Romanowska', '56677');
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: czytelnicy alfabetycznie

    Kryteria:

    R.1.4 Zapisano zapytanie 2 wybierające jedynie pola imie i nazwisko dla wszystkich rekordów w tabeli czytelnicy , posortowane rosnąco nazwiskami. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT imie, nazwisko FROM czytelnicy ORDER BY nazwisko; (opcjonalnie ASC) oraz wynik działania zapytania udokumentowano zrzutem ekranu, na którym widocznych jest minimum 10 rekordów jedynie pola imie i nazwisko

    ok. 1 min
    Polecenie z arkusza

    Zapytanie 2: wybierające jedynie pola imie i nazwisko dla wszystkich rekordów w tabeli czytelnicy, posortowane rosnąco według nazwisk

    • SELECT imie, nazwisko - bez id i kod,
    • FROM czytelnicy,
    • ORDER BY nazwisko - rosnąco to kierunek domyślny.

    Wynik: 11 osób (10 z importu i Ewelina Romanowska), od Olgi Domys do Macieja Wysockiego. Zrzut: kwerenda2.jpg. Z tego zapytania powstanie Skrypt 2.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES ('Ewelina', 'Romanowska', '56677');

-- Zapytanie 2
SELECT imie, nazwisko FROM czytelnicy ORDER BY nazwisko;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: książki Sienkiewicza

    Kryteria:

    R.1.5 Zapisano zapytanie 3 wybierające jedynie pole tytul dla wszystkich utworów, których nazwisko autora to Sienkiewicz. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT tytul FROM ksiazki JOIN autorzy ON ksiazki.id_autor = autorzy.id WHERE nazwisko = 'Sienkiewicz'; (lub INNER JOIN, lub porównanie kluczy po WHERE; warunek id_autor=8 jest błędem) oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są dokładnie 3 tytuły: Quo vadis, Potop, Ogniem i mieczem

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 3: wybierające jedynie pole tytul dla wszystkich utworów, których nazwisko autora to Sienkiewicz

    • SELECT tytul,
    • FROM ksiazki JOIN autorzy - nazwisko jest w innej tabeli niż tytuł,
    • ON ksiazki.id_autor = autorzy.id - powiązanie z obrazu 1,
    • WHERE autorzy.nazwisko = 'Sienkiewicz'.

    Wynik: Quo vadis, Potop, Ogniem i mieczem - jak w kluczu. Zrzut: kwerenda3.jpg.

    Typowe błędy

    Klucz wprost uznaje warunek id_autor = 8 za błąd - arkusz mówi o nazwisku, więc trzeba złączyć tabele i porównać nazwisko.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES ('Ewelina', 'Romanowska', '56677');

-- Zapytanie 2
SELECT imie, nazwisko FROM czytelnicy ORDER BY nazwisko;

-- Zapytanie 3
SELECT tytul FROM ksiazki JOIN autorzy ON ksiazki.id_autor = autorzy.id WHERE autorzy.nazwisko = 'Sienkiewicz';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: liczba tytułów każdego autora

    Kryteria:

    R.1.6 Zapisano zapytanie 4 wybierające jedynie pole nazwisko dla wszystkich rekordów w tabeli autorzy oraz obliczające liczbę tytułów danego autora znajdujących się w bazie. Nazwa kolumny (alias) obliczającej liczbę tytułów to ile_tytulow. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwisko, COUNT(tytul) AS ile_tytulow FROM autorzy JOIN ksiazki ON ksiazki.id_autor = autorzy.id GROUP BY nazwisko; (możliwe również porównanie kluczy po WHERE, poprawne są LEFT JOIN, RIGHT JOIN, INNER JOIN) oraz wynik działania zapytania udokumentowano zrzutem ekranu, na którym widoczne są jedynie nazwiska autorów i pole ile_tytulow: Brzechwa 2, Chmielewska 2, Fredro 2, Gombrowicz 3, Kasprowicz 2, Kruczkowski 2, Sienkiewicz 3, Tuwim 3, Witkiewicz 2 i opcjonalnie Korczak 0

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 4: wybierające jedynie pole nazwisko dla wszystkich rekordów w tabeli autorzy oraz obliczające liczbę tytułów danego autora znajdujących się w bazie biblioteka. Nazwa kolumny (alias) dla zliczania tytułów: ile_tytulow

    • SELECT nazwisko, COUNT(ksiazki.id) AS ile_tytulow - nazwisko i liczba książek pod nazwą z arkusza,
    • FROM autorzy LEFT JOIN ksiazki - złączenie lewostronne zostawia też autora bez żadnej książki,
    • ON ksiazki.id_autor = autorzy.id,
    • GROUP BY nazwisko - książki tego samego autora zlewają się w jeden wiersz.

    Wynik: 10 wierszy, od Brzechwy (2) do Witkiewicz (2), z Korczakiem 0 - arkusz mówi o „wszystkich rekordach w tabeli autorzy”, a Janusz Korczak nie ma w bazie żadnej książki. Klucz uznaje też zwykłe JOIN (wtedy Korczaka nie ma - sprawdzone, pozostałe liczby te same). COUNT liczy pole z tabeli ksiazki, a nie *: przy złączeniu lewostronnym COUNT(*) policzyłby Korczakowi 1 (sprawdzone). Zrzut: kwerenda4.jpg.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES ('Ewelina', 'Romanowska', '56677');

-- Zapytanie 2
SELECT imie, nazwisko FROM czytelnicy ORDER BY nazwisko;

-- Zapytanie 3
SELECT tytul FROM ksiazki JOIN autorzy ON ksiazki.id_autor = autorzy.id WHERE autorzy.nazwisko = 'Sienkiewicz';

-- Zapytanie 4
SELECT nazwisko, COUNT(ksiazki.id) AS ile_tytulow FROM autorzy LEFT JOIN ksiazki ON ksiazki.id_autor = autorzy.id GROUP BY nazwisko;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

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

    Krok 8: Grafika: 100 px szerokości, odcienie szarości

    Kryteria:

    R.2.1 Grafikę biblioteka.png zapisano w odcieniach szarości oraz przeskalowano z zachowaniem proporcji do szerokości 100 px, odpowiadająca temu wysokość to 157 px (± 5 px)

    ok. 3 min
    Polecenie z arkusza

    Grafikę biblioteka.png przeskalować z zachowaniem proporcji tak, aby szerokość wynosiła dokładnie 100 px oraz zapisać w odcieniach szarości.

    W GIMP-ie: Obraz → Skaluj obraz, łańcuch między szerokością a wysokością zamknięty (to jest „zachowanie proporcji”), szerokość 100 - wysokość przeliczy się sama na 157 (235 · 100 / 150 = 156,7). Potem Obraz → Tryb → Odcienie szarości i Plik → Nadpisz biblioteka.png. Przezroczyste tło zostaje - tryb odcieni szarości w PNG też ma kanał alfa.

    Typowe błędy

    Odcienie szarości to zmiana trybu obrazu, a nie samo odbarwienie warstwy filtrem - po filtrze plik dalej jest kolorowy (RGB), tylko szary w wyglądzie. Klucz dopuszcza wysokość 157 px ± 5 px.

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

  9. Krok 9: Plik biblioteka.php w HTML5

    ok. 2 min
    Polecenie z arkusza

    Składa się ze strony o nazwie biblioteka.php

    Deklaracja <!DOCTYPE html> i szkielet strony. Rozszerzenie .php, bo strona będzie miała skrypty; na egzaminie folder z numerem zdającego leży w htdocs XAMPP-a i strona otwiera się przez http://localhost/..., inaczej PHP się nie wykona.

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

  10. Krok 10: Język strony

    ok. 1 min
    Polecenie z arkusza

    Ustawiony język zawartości strony na polski

    Atrybut lang="pl" w znaczniku <html>.

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

  11. Krok 11: Kodowanie polskich znaków

    Kryteria:

    R.2.2 Witrynę internetową zapisano w pliku biblioteka.php, zastosowano deklarację języka HTML5 <!DOCTYPE html>, zadeklarowano język witryny polski np. <html lang = "pl"> oraz zastosowano właściwy standard kodowania 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 „Książkowice Małe” mogą wyświetlić się krzakami. Razem z deklaracją HTML5 i językiem to jedno kryterium klucza (R.2.2).

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

  12. Krok 12: Tytuł strony

    Kryteria:

    R.2.3 Nadano stronie tytuł "Biblioteka”

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Biblioteka”

    <title> w <head> - jedno słowo, inaczej niż nagłówek w banerze.

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

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

    Kryteria:

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

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

    Typowe błędy

    Klucz odbiera R.3.6 także wtedy, gdy choć jeden selektor nie trafia w blok (np. kropka zamiast # przy identyfikatorze).

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

  14. Krok 14: Bloki: baner, trzy panele i stopka

    Kryteria:

    R.2.4 Wygląd strony zdefiniowano dzieląc ją na baner, panele lewy, środkowy, prawy oraz stopkę. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: na górze baner, poniżej bloki: lewy, środkowy i prawy oraz na dole blok stopki. Podział zrealizowany za pomocą znaczników sekcji tak, aby wygląd układu bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2

    Baner to <header>, stopka <footer>, a trzy panele - trzy <section> z identyfikatorami left, middle i right. Panele lewy i prawy mają wspólny wygląd, środkowy własny, więc CSS musi je rozróżniać. Obok siebie postawi je arkusz stylów.

    biblioteka.php PHP zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
    </header>
    <section id="left">
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  15. Krok 15: Baner: nagłówek pierwszego stopnia

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek pierwszego stopnia o treści „Biblioteka w Książkowicach Małych”

    <h1> w <header>.

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  16. Krok 16: Panel lewy: nagłówek czwartego stopnia

    ok. 1 min
    Polecenie z arkusza

    Nagłówek czwartego stopnia o treści „Dodaj czytelnika”

    <h4> - arkusz tak ustawia stopnie nagłówków (bez <h2> i <h3>).

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

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

    Kryteria:

    R.3.2 Dane z formularza przesyłane są za pomocą metody POST do tego samego pliku (poprawne również bez atrybutu action)

    ok. 1 min
    Polecenie z arkusza

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

    method="post" - dane jadą w treści żądania, a nie w adresie strony. „Do tego samego pliku” - action="biblioteka.php"; klucz uznaje też formularz bez atrybutu action, bo wtedy przeglądarka wysyła dane na bieżący adres.

    Typowe błędy

    Bez method="post" formularz wysyła dane metodą GET i Skrypt 1, który czyta $_POST, niczego nie dostanie.

    biblioteka.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
        </form>
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  18. Krok 18: Pole edycyjne „imię”

    ok. 1 min
    Polecenie z arkusza

    Pole edycyjne poprzedzone napisem „imię: ”

    <input type="text"> z nazwą name - pod tą nazwą wartość pola trafi do PHP. Napis i pole są w jednym <label>, więc kliknięcie w napis ustawia kursor w polu. <br> przenosi następne pole do nowej linii, jak na obrazie 2.

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
        </form>
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  19. Krok 19: Pole edycyjne „nazwisko”

    ok. 1 min
    Polecenie z arkusza

    Pole edycyjne poprzedzone napisem „nazwisko: ”

    To samo co wyżej, nazwa pola surname.

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
        </form>
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  20. Krok 20: Pole numeryczne „symbol”

    Kryteria:

    R.3.4 Pole edycyjne do wpisania symbolu jest typu numerycznego

    ok. 1 min
    Polecenie z arkusza

    Pole edycyjne typu numerycznego poprzedzone napisem „symbol: ”

    type="number" - przeglądarka przyjmuje tylko cyfry i pokazuje strzałki do zmiany wartości. Symbol trafi do kolumny kod, stąd nazwa pola code.

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
        </form>
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  21. Krok 21: Przycisk AKCEPTUJ

    Kryteria: ,

    R.3.3 Przycisk w formularzu realizuje wysyłanie danych do skryptu (input lub button z typem submit lub button bez typu)

    R.2.7 W bloku lewym umieszczono formularz z trzema polami edycyjnymi i przyciskiem AKCEPTUJ

    ok. 1 min
    Polecenie z arkusza

    Przycisk AKCEPTUJ wysyłający dane z formularza

    <button type="submit"> wysyła formularz (to samo robi <input type="submit" value="AKCEPTUJ">). Formularz ma już trzy pola i przycisk - komplet do R.2.7.

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  22. Krok 22: Panel lewy: miejsce na Skrypt 1

    ok. 1 min
    Polecenie z arkusza

    Efekt działania skryptu 1

    Napis o dodanym czytelniku stanie w panelu lewym pod formularzem - jak na obrazie 2. Blok PHP dojdzie w etapie skryptów, zaraz za </form>; ten krok nie zmienia pliku.

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

  23. Krok 23: Panel środkowy: obraz z tekstem alternatywnym

    Kryteria:

    R.2.8 W bloku środkowym umieszczono obraz z pliku biblioteka.png z tekstem alternatywnym "biblioteka"

    ok. 1 min
    Polecenie z arkusza

    Obraz biblioteka.png z tekstem alternatywnym „biblioteka”

    <img> stoi w kodzie przed nagłówkiem i akapitem - tylko wtedy tekst zacznie się obok obrazu, gdy w CSS obraz dostanie float (element pływający oblewa treść, która jest po nim).

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  24. Krok 24: Panel środkowy: adres w nagłówku szóstego stopnia

    Kryteria:

    R.2.9 Zastosowano jedynie znak specjalny &nbsp; w danych adresowych: Czytelników&nbsp;15 (bez zwykłych spacji)

    ok. 1 min
    Polecenie z arkusza

    Nagłówek szóstego stopnia o treści: „ul. Czytelników 15; Książkowice Małe”, nazwa ulicy i numer lokalu połączone nierozdzielającą spacją

    <h6> - najmniejszy nagłówek, stąd mały napis na obrazie 2. Spacja nierozdzielająca to encja &nbsp; stojąca zamiast spacji między „Czytelników” a „15”: przeglądarka nie złamie tam wiersza, więc numer nie zostanie sam w następnej linii. Pozostałe spacje zwykłe.

    Typowe błędy

    Klucz wymaga encji tylko w „Czytelników 15” i bez zwykłej spacji obok niej.

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  25. Krok 25: Panel środkowy: odsyłacz pocztowy

    Kryteria: ,

    R.3.5 Napis "Czy masz jakieś uwagi?" jest odsyłaczem pocztowym do adresu [email protected], w definicji zastosowano "mailto:"

    R.2.5 Zapisano w banerze nagłówek h1 "Biblioteka w Książkowicach Małych", w panelu środkowym h6 z adresem biblioteki, w panelach lewym i prawym przynajmniej jeden h4: "Dodaj czytelnika” lub "Nasi czytelnicy:” oraz zapisano przynajmniej jeden paragraf

    ok. 1 min
    Polecenie z arkusza

    Paragraf (akapit) o treści: „Czy masz jakieś uwagi?”, który jest odsyłaczem pocztowym do adresu [email protected]

    <a> z adresem zaczynającym się od mailto: - kliknięcie otwiera program pocztowy z wpisanym odbiorcą. Odnośnik stoi wewnątrz <p>. Jest już <h1>, <h6>, <h4> i akapit - komplet do R.2.5.

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  26. Krok 26: Panel prawy: nagłówek

    ok. 1 min
    Polecenie z arkusza

    Nagłówek czwartego stopnia o treści „Nasi czytelnicy:”

    Drugi <h4> - oba wyśrodkuje jedna reguła CSS.

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  27. Krok 27: Panel prawy: pusta lista numerowana

    ok. 1 min
    Polecenie z arkusza

    Lista numerowana (uporządkowana) generowana za pomocą skryptu 2

    Lista numerowana to <ol>. Znaczniki listy są w HTML-u, a elementy <li> dopisze Skrypt 2 - po jednym na czytelnika.

    biblioteka.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
        <ol>
        </ol>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  28. Krok 28: Stopka

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: paragraf (akapit) o treści „Projekt witryny: ”, dalej wstawiony numer zdającego

    Akapit <p> w <footer>. Na egzaminie w miejscu imienia i nazwiska wpisuje się numer zdającego, czyli PESEL; w tym rozwiązaniu stoi tam „Bartosz Bryniarski”.

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
        <ol>
        </ol>
    </section>
    <footer>
        <p>Projekt witryny: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  29. Etap 3: Styl CSS

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

    Krok 29: Krój czcionki dla wszystkich elementów

    Kryteria:

    R.4.1 Ustawiono domyślne formatowanie wszystkich selektorów (*) krój czcionki Tahoma

    ok. 1 min
    Polecenie z arkusza

    Domyślne formatowanie wszystkich selektorów : krój czcionki Tahoma

    Selektor uniwersalny * - także pola formularza i przycisk dostają Tahomę.

    style.css CSS nowy plik 
    * {
    font-family: Tahoma;
}
    Podgląd strony po tym kroku (biblioteka.php)

  30. Krok 30: Baner i stopka

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Dla banera i stopki: kolor tła SaddleBrown, biały kolor czcionki, marginesy wewnętrzne 3 px, wyrównanie tekstu do środka

    Jedna reguła dla dwóch selektorów. SaddleBrown to nazwa koloru z listy CSS - pisze się ją bez cudzysłowu i bez #. Marginesy wewnętrzne to padding.

    style.css CSS zmienione: 6 linii 
    * {
    font-family: Tahoma;
}
header, footer {
    background-color: SaddleBrown;
    color: white;
    padding: 3px;
    text-align: center;
}
    Podgląd strony po tym kroku (biblioteka.php)

  31. Krok 31: Panele lewy i prawy

    ok. 1 min
    Polecenie z arkusza

    Dla panelu lewego i prawego: kolor tła Tan, wysokość 400 px, szerokość 40%

    Dwa identyfikatory po przecinku, wspólne właściwości.

    style.css CSS zmienione: 5 linii 
    * {
    font-family: Tahoma;
}
header, footer {
    background-color: SaddleBrown;
    color: white;
    padding: 3px;
    text-align: center;
}
#left, #right {
    background-color: Tan;
    height: 400px;
    width: 40%;
}
    Podgląd strony po tym kroku (biblioteka.php)

  32. Krok 32: Panel środkowy

    Kryteria: , ,

    R.4.2 Ustawiono kolor tła dla banera i stopki na SaddleBrown, panelu lewego i prawego Tan, środkowego Wheat

    R.4.4 Ustawiono wysokość wszystkich paneli 400px

    R.4.5 Ustawiono szerokość panelu lewego i prawego 40%, środkowego 20%

    ok. 1 min
    Polecenie z arkusza

    Dla panelu środkowego: kolor tła Wheat, wysokość 400 px, szerokość 20%

    40% + 20% + 40% = 100%, więc trzy panele zmieszczą się w jednym rzędzie. Wszystkie kolory, wysokości i szerokości paneli są ustawione (R.4.2, R.4.4, R.4.5).

    style.css CSS zmienione: 5 linii 
    * {
    font-family: Tahoma;
}
header, footer {
    background-color: SaddleBrown;
    color: white;
    padding: 3px;
    text-align: center;
}
#left, #right {
    background-color: Tan;
    height: 400px;
    width: 40%;
}
#middle {
    background-color: Wheat;
    height: 400px;
    width: 20%;
}
    Podgląd strony po tym kroku (biblioteka.php)

  33. Krok 33: 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 z wartością flex lub grid albo position)

    ok. 2 min
    Polecenie z arkusza

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

    Arkusz nie mówi, jak ułożyć bloki. Najprościej: wszystkie trzy <section> dostają float: left i stają obok siebie w kolejności z kodu. Stopka z clear: both zaczyna się dopiero pod nimi - bez tego wjechałaby w wolne miejsce obok pływających paneli.

    style.css CSS zmienione: 6 linii 
    * {
    font-family: Tahoma;
}
header, footer {
    background-color: SaddleBrown;
    color: white;
    padding: 3px;
    text-align: center;
}
#left, #right {
    background-color: Tan;
    height: 400px;
    width: 40%;
}
#middle {
    background-color: Wheat;
    height: 400px;
    width: 20%;
}
section {
    float: left;
}
footer {
    clear: both;
}
    Podgląd strony po tym kroku (biblioteka.php)

  34. Krok 34: Obraz: margines prawy i oblewanie z lewej

    Kryteria:

    R.4.8 Ustawiono dla obrazu opływanie tekstem z lewej strony (np. float: right;)

    ok. 1 min
    Polecenie z arkusza

    Dla selektora obrazu: margines zewnętrzny prawy 20 px, oblewanie z lewej strony zgodnie z Obrazem 2

    „Oblewanie z lewej strony” znaczy, że tekst opływa obraz od lewej, czyli sam obraz dosuwa się do prawej krawędzi panelu: float: right. Adres i odnośnik stoją wtedy obok grafiki, jak na obrazie 2. margin-right: 20px odsuwa obraz od prawej krawędzi.

    Typowe błędy

    float: left daje odwrotny układ (obraz z lewej, tekst z prawej) - klucz wymaga oblewania z lewej, np. float: right.

    style.css CSS zmienione: 4 linie 
    * {
    font-family: Tahoma;
}
header, footer {
    background-color: SaddleBrown;
    color: white;
    padding: 3px;
    text-align: center;
}
#left, #right {
    background-color: Tan;
    height: 400px;
    width: 40%;
}
#middle {
    background-color: Wheat;
    height: 400px;
    width: 20%;
}
section {
    float: left;
}
footer {
    clear: both;
}
img {
    margin-right: 20px;
    float: right;
}
    Podgląd strony po tym kroku (biblioteka.php)

  35. Krok 35: Nagłówki czwartego stopnia wyśrodkowane

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Dla selektora nagłówka czwartego stopnia: wyrównanie tekstu do środka

    Selektor znacznika h4 - uwaga arkusza zabrania tu klasy i identyfikatora (R.4.6 razem z banerem i stopką).

    style.css CSS zmienione: 3 linie 
    * {
    font-family: Tahoma;
}
header, footer {
    background-color: SaddleBrown;
    color: white;
    padding: 3px;
    text-align: center;
}
#left, #right {
    background-color: Tan;
    height: 400px;
    width: 40%;
}
#middle {
    background-color: Wheat;
    height: 400px;
    width: 20%;
}
section {
    float: left;
}
footer {
    clear: both;
}
img {
    margin-right: 20px;
    float: right;
}
h4 {
    text-align: center;
}
    Podgląd strony po tym kroku (biblioteka.php)

  36. Krok 36: Pola edycyjne: marginesy

    Kryteria:

    R.4.7 Ustawiono marginesy wewnętrzne (padding) 3px dla banera i stopki oraz marginesy zewnętrzne (margin) 5px dla selektora input oraz margines zewnętrzny prawy (np. margin- right) 20px dla selektora img

    ok. 1 min
    Polecenie z arkusza

    Dla selektora pola edycyjnego: marginesy zewnętrzne 5 px

    Selektor znacznika input. Są już wszystkie odstępy z arkusza: padding banera i stopki, margin-right obrazu i margin pól (R.4.7).

    style.css CSS zmienione: 3 linie 
    * {
    font-family: Tahoma;
}
header, footer {
    background-color: SaddleBrown;
    color: white;
    padding: 3px;
    text-align: center;
}
#left, #right {
    background-color: Tan;
    height: 400px;
    width: 40%;
}
#middle {
    background-color: Wheat;
    height: 400px;
    width: 20%;
}
section {
    float: left;
}
footer {
    clear: both;
}
img {
    margin-right: 20px;
    float: right;
}
h4 {
    text-align: center;
}
input {
    margin: 5px;
}
    Podgląd strony po tym kroku (biblioteka.php)

  37. Krok 37: Element listy pod kursorem

    Kryteria:

    R.4.9 Po najechaniu na element listy jego tło jest zmieniane na Sienna, kolor czcionki na biały

    ok. 1 min
    Polecenie z arkusza

    Po najechaniu na element listy, jego tło jest zmieniane na Sienna a kolor czcionki na biały

    Pseudoklasa :hover przy selektorze li - zmiana działa tylko wtedy, gdy kursor stoi nad danym elementem. Efekt będzie widać, gdy Skrypt 2 wypisze czytelników.

    style.css CSS zmienione: 4 linie 
    * {
    font-family: Tahoma;
}
header, footer {
    background-color: SaddleBrown;
    color: white;
    padding: 3px;
    text-align: center;
}
#left, #right {
    background-color: Tan;
    height: 400px;
    width: 40%;
}
#middle {
    background-color: Wheat;
    height: 400px;
    width: 20%;
}
section {
    float: left;
}
footer {
    clear: both;
}
img {
    margin-right: 20px;
    float: right;
}
h4 {
    text-align: center;
}
input {
    margin: 5px;
}
li:hover {
    background-color: Sienna;
    color: white;
}
    Podgląd strony po tym kroku (biblioteka.php)

  38. Etap 4: Skrypty PHP

    Kroki 38-43 · po tym etapie masz 37 z 37 kryteriów (pkt)

    Krok 38: Połączenie z bazą w Skrypcie 1, zamknięcie w Skrypcie 2

    Kryteria:

    R.5.1 Zastosowano funkcję realizującą połączenie z serwerem bazy danych na localhost, użytkownik root, bez hasła, baza danych biblioteka

    ok. 2 min
    Polecenie z arkusza

    Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie biblioteka

    Na stronie są dwa bloki PHP: Skrypt 1 w panelu lewym tuż pod formularzem i Skrypt 2 wewnątrz listy <ol> w panelu prawym. mysqli_connect z czterema argumentami łączy się z serwerem i od razu wybiera bazę; uchwyt trafia do zmiennej $connection. Skrypt 1 jest w kodzie wcześniej, więc to on otwiera połączenie, a Skrypt 2 je zamyka. Od tego kroku podgląd to wynik prawdziwego uruchomienia strony.

    biblioteka.php PHP zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "biblioteka");
        ?>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
        <ol>
            <?php
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Projekt witryny: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  39. Krok 39: Skrypt 1: dane z formularza

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Pobiera dane z formularza

    Wysłany formularz PHP wkłada do tablicy $_POST: pod kluczem "name" jest imię, "surname" - nazwisko, "code" - symbol (klucze to atrybuty name pól). Przy pierwszym otwarciu strony tablica jest pusta, dlatego odczyt stoi w warunku isset($_POST["name"]) - bez niego PHP wypisałby ostrzeżenie „Undefined array key”. Podgląd: strona po wysłaniu formularza z danymi Moniki Nowak; na razie nic się nie zmienia.

    biblioteka.php PHP zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "biblioteka");
            if (isset($_POST["name"])) {
                $name = $_POST["name"];
                $surname = $_POST["surname"];
                $code = $_POST["code"];
            }
        ?>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
        <ol>
            <?php
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Projekt witryny: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

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

  40. Krok 40: Skrypt 1: napis o dodanym czytelniku

    Kryteria:

    R.5.3 Skrypt 1 wyświetla napis: "Dodano czytelnika <imie> <nazwisko>”, gdzie pola <> pobrano z formularza

    ok. 1 min
    Polecenie z arkusza

    Wyświetla napis „Dodano czytelnika <imie> <nazwisko>”, gdzie pola <> pobrano z formularza

    W napisie w cudzysłowach PHP podstawia wartości zmiennych. Podgląd: „Dodano czytelnika Monika Nowak” pod formularzem - jak na obrazie 2.

    biblioteka.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "biblioteka");
            if (isset($_POST["name"])) {
                $name = $_POST["name"];
                $surname = $_POST["surname"];
                $code = $_POST["code"];
                echo "Dodano czytelnika $name $surname";
            }
        ?>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
        <ol>
            <?php
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Projekt witryny: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  41. Krok 41: Skrypt 1: zapytanie 1 z danymi z formularza

    Kryteria:

    R.5.4 Skrypt 1 dodaje do tabeli czytelnicy nowy rekord, zawierający dane pobrane z formularza, należy sprawdzić w phpMyAdmin

    ok. 2 min
    Polecenie z arkusza

    Wysyła do bazy danych zmodyfikowane zapytanie 1 tak, że wstawia do bazy danych dane z formularza

    Zapytanie 1, w którym w miejsce „Ewelina”, „Romanowska” i „56677” stoją zmienne - apostrofy wokół nich zostają, bo w SQL-u tekst musi być w apostrofach. INSERT nie zwraca wierszy, więc wyniku mysqli_query nie trzeba zapisywać. Sprawdzenie, jak każe klucz: w phpMyAdmin w tabeli czytelnicy jest nowy wiersz z Moniką Nowak.

    Typowe błędy

    Tabela czytelnicy z pliku arkusza ma zestaw znaków latin1 - polskie litery z formularza zapisują się jako „?” (sprawdzone: „Łucja Żak” → „?ucja ?ak”), choć napis na stronie jest poprawny. Na egzaminie nie zmieniaj struktury tabel z arkusza; poza egzaminem naprawia to ALTER TABLE czytelnicy CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_polish_ci;.

    biblioteka.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "biblioteka");
            if (isset($_POST["name"])) {
                $name = $_POST["name"];
                $surname = $_POST["surname"];
                $code = $_POST["code"];
                echo "Dodano czytelnika $name $surname";
                $query = "INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES ('$name', '$surname', '$code');";
                mysqli_query($connection, $query);
            }
        ?>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
        <ol>
            <?php
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Projekt witryny: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

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

  42. Krok 42: Skrypt 2: zapytanie 2

    ok. 1 min
    Polecenie z arkusza

    Wysyła do bazy danych zapytanie 2

    Zapytanie 2 bez zmian, w zmiennej $query - tą samą nazwą co w Skrypcie 1, bo tamto zapytanie zostało już wysłane. W $result zostaje wynik do odczytania wiersz po wierszu. mysqli_close pozostaje ostatnią instrukcją - wynik jest już w pamięci PHP, więc zamknięcie połączenia go nie kasuje.

    biblioteka.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "biblioteka");
            if (isset($_POST["name"])) {
                $name = $_POST["name"];
                $surname = $_POST["surname"];
                $code = $_POST["code"];
                echo "Dodano czytelnika $name $surname";
                $query = "INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES ('$name', '$surname', '$code');";
                mysqli_query($connection, $query);
            }
        ?>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
        <ol>
            <?php
                $query = "SELECT imie, nazwisko FROM czytelnicy ORDER BY nazwisko;";
                $result = mysqli_query($connection, $query);
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Projekt witryny: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

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

  43. Krok 43: Skrypt 2: czytelnicy jako elementy listy

    Kryteria: , , ,

    R.5.6 Skrypt 2 wyświetla imiona i nazwiska czytelników zwrócone zapytaniem 2

    R.5.7 Skrypt 2 generuje rekordy jako elementy listy z wykorzystaniem pętli

    R.2.6 W bloku prawym umieszczono jedną listę numerowaną, w kodzie HTML lub skrypcie, zastosowano znaczniki <ol>, <li>

    R.5.2 Ostatnią operacją na bazie danych jest zamknięcie połączenia z serwerem bazy danych

    ok. 3 min
    Polecenie z arkusza

    Pobrane zapytaniem imiona i nazwiska czytelników wypisywane są jako elementy listy numerowanej (uporządkowanej)

    mysqli_fetch_row oddaje kolejny wiersz jako tablicę: $row[0] - imię, $row[1] - nazwisko; po ostatnim wierszu zwraca null i pętla while się kończy. Każdy czytelnik to jeden <li>, numery dopisuje przeglądarka. Skrypt 1 stoi w kodzie wyżej, więc wykonuje się wcześniej - dlatego na liście jest już Monika Nowak, dodana przed chwilą. Podgląd: 12 czytelników, jak na obrazie 2 (z Eweliną Romanowską z zapytania 1). Zamknięcie połączenia jest ostatnią operacją na bazie (R.5.2).

    biblioteka.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "biblioteka");
            if (isset($_POST["name"])) {
                $name = $_POST["name"];
                $surname = $_POST["surname"];
                $code = $_POST["code"];
                echo "Dodano czytelnika $name $surname";
                $query = "INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES ('$name', '$surname', '$code');";
                mysqli_query($connection, $query);
            }
        ?>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
        <ol>
            <?php
                $query = "SELECT imie, nazwisko FROM czytelnicy ORDER BY nazwisko;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0] $row[1]</li>";
                }
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Projekt witryny: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  44. Etap 5: Dobre praktyki (poza kluczem)

    Kroki 44-45 · po tym etapie masz 37 z 37 kryteriów (pkt)

    Krok 44: Puste pola i apostrof w nazwisku

    ok. 4 min
    Polecenie z arkusza

    Wysyła do bazy danych zmodyfikowane zapytanie 1 tak, że wstawia do bazy danych dane z formularza

    Wersja egzaminacyjna sprawdzona na dwóch formularzach. Pusty: strona wypisuje „Dodano czytelnika” bez imienia i nazwiska, a na liście pojawia się pusty, trzynasty element - wiersz z pustymi polami naprawdę trafił do bazy (isset sprawdza tylko, czy pole przyszło, a puste też przychodzi). Kate O'Hara: apostrof z nazwiska zamyka napis w SQL-u, PHP (od wersji 8.1, także w XAMPP 8.1.2 z klucza) zgłasza wyjątek mysqli_sql_exception i przerywa stronę - znika panel środkowy, lista i stopka.

    Poprawki: trim i warunek „wszystkie pola wypełnione” z komunikatem zamiast zapytania, a zamiast doklejania wartości do SQL-a zapytanie przygotowane - mysqli_prepare ze znakami ? i mysqli_stmt_bind_param z typami "sss" (trzy teksty). Baza nigdy nie czyta wartości z formularza jako kodu SQL, więc apostrof nie przeszkadza, a wstrzyknięcie fragmentu zapytania przestaje działać. Stare linie zostają w komentarzu. Podgląd: O'Hara zapisana i widoczna na liście. Jedna rzecz zostaje świadomie bez zmian: odświeżenie strony klawiszem F5 po dodaniu czytelnika wysyła formularz drugi raz i na liście są dwie Moniki Nowak (sprawdzone). Lekarstwem jest przekierowanie po zapisie (header("Location: biblioteka.php"), wzorzec PRG), ale samo skasowałoby napis o dodanym czytelniku, którego wymaga arkusz - napis trzeba wtedy przenieść przez sesję, a kod obsługi formularza przesunąć na górę pliku, przed HTML. Tak jest zrobione w wersji nowoczesnej (zakładka obok). Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    biblioteka.php PHP zmienione: 13 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "biblioteka");
            if (isset($_POST["name"])) {
                $name = trim($_POST["name"]);         // było: $name = $_POST["name"];
                $surname = trim($_POST["surname"]);
                $code = trim($_POST["code"]);
                if ($name === "" || $surname === "" || $code === "") {
                    echo "Wypełnij wszystkie pola formularza";
                } else {
                    echo "Dodano czytelnika $name $surname";
                    $statement = mysqli_prepare($connection, "INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES (?, ?, ?)");
                    mysqli_stmt_bind_param($statement, "sss", $name, $surname, $code);
                    mysqli_stmt_execute($statement);
                    // $query = "INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES ('$name', '$surname', '$code');";
                    // mysqli_query($connection, $query);
                }
            }
        ?>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
        <ol>
            <?php
                $query = "SELECT imie, nazwisko FROM czytelnicy ORDER BY nazwisko;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>$row[0] $row[1]</li>";
                }
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Projekt witryny: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  45. Krok 45: htmlspecialchars przy wypisywaniu

    ok. 2 min
    Polecenie z arkusza

    Pobrane zapytaniem imiona i nazwiska czytelników wypisywane są jako elementy listy numerowanej (uporządkowanej)

    Na tej stronie dane z formularza wracają na ekran dwa razy: w napisie Skryptu 1 i - już z bazy - na liście Skryptu 2. Gdy ktoś wpisze w imię znacznik (np. <b>Jan</b> albo <script>), wersja egzaminacyjna wklei go do strony jako kod, i to przy każdym kolejnym otwarciu, bo siedzi w bazie. htmlspecialchars zamienia <, >, & i cudzysłowy na encje, więc przeglądarka pokazuje je jako zwykły tekst. Podgląd: znów Monika Nowak. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    biblioteka.php PHP zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Biblioteka</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Biblioteka w Książkowicach Małych</h1>
    </header>
    <section id="left">
        <h4>Dodaj czytelnika</h4>
        <form method="post" action="biblioteka.php">
            <label>imię: <input type="text" name="name"></label><br>
            <label>nazwisko: <input type="text" name="surname"></label><br>
            <label>symbol: <input type="number" name="code"></label><br>
            <button type="submit">AKCEPTUJ</button>
        </form>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "biblioteka");
            if (isset($_POST["name"])) {
                $name = trim($_POST["name"]);         // było: $name = $_POST["name"];
                $surname = trim($_POST["surname"]);
                $code = trim($_POST["code"]);
                if ($name === "" || $surname === "" || $code === "") {
                    echo "Wypełnij wszystkie pola formularza";
                } else {
                    echo "Dodano czytelnika " . htmlspecialchars("$name $surname");
                    // echo "Dodano czytelnika $name $surname";
                    $statement = mysqli_prepare($connection, "INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES (?, ?, ?)");
                    mysqli_stmt_bind_param($statement, "sss", $name, $surname, $code);
                    mysqli_stmt_execute($statement);
                    // $query = "INSERT INTO czytelnicy (imie, nazwisko, kod) VALUES ('$name', '$surname', '$code');";
                    // mysqli_query($connection, $query);
                }
            }
        ?>
    </section>
    <section id="middle">
        <img src="biblioteka.png" alt="biblioteka">
        <h6>ul. Czytelników&nbsp;15; Książkowice Małe</h6>
        <p><a href="mailto:[email protected]">Czy masz jakieś uwagi?</a></p>
    </section>
    <section id="right">
        <h4>Nasi czytelnicy:</h4>
        <ol>
            <?php
                $query = "SELECT imie, nazwisko FROM czytelnicy ORDER BY nazwisko;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>" . htmlspecialchars("$row[0] $row[1]") . "</li>";
                    // echo "<li>$row[0] $row[1]</li>";
                }
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Projekt witryny: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biblioteka.php)

  46. Etap 6: Oddanie pracy

    Krok 46 · po tym etapie masz 37 z 37 kryteriów (pkt)

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

    ok. 5 min
    Polecenie z arkusza

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

    W przeglądarka.txt wystarczy nazwa przeglądarki, w której była sprawdzana strona.

    W folderze z numerem zdającego: biblioteka.php, biblioteka.png, dane.jpg, kwerenda1.jpg - kwerenda4.jpg, kwerendy.txt, przeglądarka.txt i style.css. Po nagraniu płyty trzeba sprawdzić jej odczyt i opisać ją numerem zdającego.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

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

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.