Przejdź do głównej treści
INF.03-01-26.01-SGStyczeń 2026 · 42 kroki · ok. 76 min · 34 kryteria z klucza

Rozwiązanie krok po kroku: Portal konfiguracji samochodów (Wersja podstawowa)

Rozwiązanie buduje serwis konfiguracji samochodów: baza samochody z dwiema tabelami (pojazdy i kolory z dopłatą) i cztery zapytania (ORDER BY z LIMIT, AVG i MAX z aliasami, złączenie tabel, losowanie przez ORDER BY RAND()), strona index.php z nagłówkiem, paskiem nawigacji i trzema sekcjami obok siebie oraz style w styl.css z łączonymi obramowaniami tabel i podświetleniem wiersza pod kursorem. Dwa skrypty PHP: tabela aut z ceną całkowitą liczoną w PHP (cena plus dopłata za kolor) oraz tabela ze scalonymi komórkami (colspan, rowspan), w którą skrypt wpisuje dwa wylosowane auta po obu stronach zdjęcia.

Kroki idą zdanie po zdaniu za treścią arkusza - każdy ma 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 powtórzony kod zostaje zamieniony na funkcję i dochodzi escapowanie danych.

Baza i grafiki 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. Zapytanie 4 losuje, więc w podglądzie stoją dwa auta z ilustracji 2 (BM beta za 94000 i za 77000).

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: sekcje na siatce CSS i PHP na PDO z danymi pobranymi przed HTML-em, htmlspecialchars i obsługą awarii bazy od pierwszej linii - obie wersje są zgodne z kluczem.

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

    Krok 1: Baza danych samochody

    ok. 2 min
    Polecenie z arkusza

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

    Najpierw rozpakuj pliki1.7z z pulpitu (hasło S@mocHody^ z treści zadania): baza.sql i trzy grafiki. W phpMyAdmin: Nowa, nazwa samochody, metoda porównywania utf8_polish_ci.

    Typowe błędy

    Nazwa bazy musi być dokładnie samochody - skrypt łączy się z bazą po nazwie (R.5.1).

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

    ok. 2 min
    Polecenie z arkusza

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

    Przy zaznaczonej bazie samochody: Import → baza.sql → Wykonaj. Powstają dwie tabele z ilustracji 1: pojazdy (62 auta: marka, model, cena, kolor) i kolory (8 kolorów z dopłatą - metaliki kosztują 1000 zł więcej). Kolumna pojazdy.kolor to klucz obcy wskazujący kolory.id.

  3. Krok 3: Zrzut ekranu import.jpg

    Kryteria:

    R.1.1 Wykonany import tabeli do bazy danych samochody - plik import.jpg

    ok. 2 min
    Polecenie z arkusza

    Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie JPEG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.

    Print Screen, zapis jako import.jpg - import w JPEG, zrzuty zapytań w PNG. Na zrzucie komunikat o udanym imporcie albo dwie tabele w bazie.

    Typowe błędy

    Wykadrowany zrzut albo zły format to strata punktu R.1.1.

  4. Krok 4: Zapytanie 1: 15 najdroższych aut marki BM

    Kryteria: ,

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

    R.1.3 Wykonane zapytanie 1 wybierające pierwsze 15 rekordów, jedynie pola: marka, model, cena dla pojazdów, których marka to BM posortowane malejąco według ceny. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT marka, model, cena FROM pojazdy WHERE marka = "BM" ORDER BY cena DESC LIMIT 15; oraz na zrzucie jest dokładnie 15 rekordów zawierających jedynie pola marka, model, cena. Ceny od 94000 do 84000

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 1: wybierające pierwsze 15 rekordów, jedynie pola: marka, model, cena dla pojazdów, których marka to BM posortowane malejąco według ceny.

    Kolejność klauzul jest stała: SELECT → FROM → WHERE → ORDER BY → LIMIT.

    • WHERE marka = "BM" - tylko ta marka,
    • ORDER BY cena DESC - malejąco (DESC; rosnąco to domyślne ASC),
    • LIMIT 15 - pierwsze 15 wierszy po posortowaniu, czyli 15 najdroższych.

    Wynik: 15 wierszy z cenami od 94000 do 84000 - jak w kluczu. Zapytanie do kwerendy.txt, zrzut kw1.png.

    Typowe błędy

    LIMIT przed ORDER BY to błąd składni. Bez DESC dostaniesz 15 najtańszych.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT marka, model, cena FROM pojazdy WHERE marka = "BM" ORDER BY cena DESC LIMIT 15;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: średnia i najwyższa cena modelu meta

    Kryteria:

    R.1.4 Wykonane zapytanie 2 liczące średnią cenę pojazdów oraz wybierające najdroższy pojazd dla modelu „meta”. Nazwy kolumn (aliasy) : „Średnia cena”, „Maksymalna cena”. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT AVG(cena) AS "Średnia cena", MAX(cena) AS "Maksymalna cena" FROM pojazdy WHERE model = "meta"; (AS nieobowiązkowe, w aliasie dopuszczalne literówki) oraz na zrzucie widoczne są wartości: 92071.4286 oraz 98000 (dowolne zaokrąglenie)

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 2: liczące średnią cenę pojazdów oraz wybierające najdroższy pojazd dla modelu „meta”. Nazwy kolumn (aliasy) odpowiednio: „Średnia cena”, „Maksymalna cena”.

    Dwie funkcje agregujące w jednym zapytaniu: AVG(cena) (średnia) i MAX(cena) (najwyższa), obie liczone z wierszy spełniających WHERE model = "meta". Aliasy mają spacje i polskie litery, więc biorą cudzysłów. Wynik: jeden wiersz - 92071.4286 i 98000, jak w kluczu. Zrzut: kw2.png.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT marka, model, cena FROM pojazdy WHERE marka = "BM" ORDER BY cena DESC LIMIT 15;

-- Zapytanie 2
SELECT AVG(cena) AS "Średnia cena", MAX(cena) AS "Maksymalna cena" FROM pojazdy WHERE model = "meta";
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: auta modelu alfa z kolorem i dopłatą

    Kryteria:

    R.1.5 Wykonane zapytanie 3 wybierające z tabeli pojazdy jedynie pola: marka, model, cena oraz odpowiadające im z tabeli kolory pola: nazwa, doplata dla modelu „alfa”. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT marka, model, cena, nazwa, doplata FROM pojazdy INNER JOIN kolory ON kolor = kolory.id WHERE model = "alfa"; (możliwe też samo JOIN lub porównanie kluczy po WHERE) oraz na zrzucie widocznych jest dokładnie 6 wierszy, nazwy kolorów: zielony, czarny, czarny, zielony metalik, czerwony metalik, czarny metalik

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 3: wybierające z tabeli pojazdy jedynie pola: marka, model, cena oraz odpowiadające im z tabeli kolory pola: nazwa, doplata dla modelu „alfa”. Należy posłużyć się relacją.

    • SELECT marka, model, cena, nazwa, doplata - trzy kolumny z pojazdy, dwie z kolory.
    • FROM pojazdy JOIN kolory ON kolor = kolory.id - relacja: kolumna kolor auta wskazuje id koloru. id jest w obu tabelach, więc piszesz kolory.id.
    • WHERE model = "alfa".

    Wynik: 6 wierszy z kolorami zielony, czarny, czarny, zielony metalik, czerwony metalik, czarny metalik - jak w kluczu. Zrzut: kw3.png. To zapytanie wyśle skrypt 1, który doda dopłatę do ceny.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT marka, model, cena FROM pojazdy WHERE marka = "BM" ORDER BY cena DESC LIMIT 15;

-- Zapytanie 2
SELECT AVG(cena) AS "Średnia cena", MAX(cena) AS "Maksymalna cena" FROM pojazdy WHERE model = "meta";

-- Zapytanie 3
SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: dwa losowe auta

    Kryteria:

    R.1.6 Wykonane zapytanie 4 losujące dwa dowolne rekordy z tabeli pojazdy i wybierające jedynie markę, model i cenę. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT marka, model, cena FROM pojazdy ORDER BY RAND() LIMIT 2; oraz na zrzucie są dokładnie 2 losowe wiersze z polami marka, model, cena

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: losujące dwa dowolne rekordy z tabeli pojazdy i wybierające jedynie markę, model i cenę.

    ORDER BY RAND() sortuje wiersze według liczby losowej - przy każdym wykonaniu kolejność jest inna - a LIMIT 2 zostawia dwa pierwsze. Wynik zmienia się za każdym uruchomieniem; na zrzucie kw4.png mają być dokładnie 2 wiersze. To zapytanie wyśle skrypt 2. kwerendy.txt ma komplet.

    Typowe błędy

    RAND() jest funkcją MySQL - w innych bazach nazywa się inaczej (SQLite: RANDOM()). Na egzaminie jest MySQL/MariaDB.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT marka, model, cena FROM pojazdy WHERE marka = "BM" ORDER BY cena DESC LIMIT 15;

-- Zapytanie 2
SELECT AVG(cena) AS "Średnia cena", MAX(cena) AS "Maksymalna cena" FROM pojazdy WHERE model = "meta";

-- Zapytanie 3
SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";

-- Zapytanie 4
SELECT marka, model, cena FROM pojazdy ORDER BY RAND() LIMIT 2;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Strona HTML

    Kroki 8-21 · po tym etapie masz 15 z 34 kryteriów (pkt)

    Krok 8: Plik index.php w HTML5

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

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

    Grafiki a1.jpg, a2.jpg i a3.png z archiwum kopiujesz do folderu zdającego - arkusz nie wymaga ich obróbki. W edytorze tworzysz index.php: <!DOCTYPE html> i szkielet <html>, <head>, <body>.

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

  9. Krok 9: Język strony

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Zadeklarowany polski język zawartości witryny.

    lang="pl" w <html> - informacja dla czytników ekranu i przeglądarki (R.2.1).

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

  10. Krok 10: Kodowanie polskich znaków

    Kryteria:

    R.2.2 W sekcji head znajduje się jawnie podany standard kodowania polskich znaków i tytuł strony "Konfigurator samochodó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> - napisy „Stronę wykonał” i nazwy kolorów wyświetlą się poprawnie.

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

  11. Krok 11: Tytuł strony

    Kryteria:

    R.2.2 W sekcji head znajduje się jawnie podany standard kodowania polskich znaków i tytuł strony "Konfigurator samochodów”

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony „Konfigurator samochodów”.

    <title> w <head> - napis na karcie przeglądarki, nie nagłówek strony (R.2.2).

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

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

    Kryteria:

    R.3.2 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl.css formatowanie CSS pochodzi jedynie z tego arkusza

    ok. 1 min
    Polecenie z arkusza

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

    <link rel="stylesheet" href="styl.css"> - plik napiszesz po HTML.

    Typowe błędy

    Literówka w nazwie pliku odcina cały rezultat R.4.

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

  13. Krok 13: Bloki semantyczne

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 3. Zawartość bloku głównego: blok sekcji lewej, środkowej i prawej.

    Ilustracja 3: nagłówek, pasek nawigacji, blok główny z trzema sekcjami obok siebie, stopka - czyli <header>, <nav>, <main> z trzema <section>, <footer> (klucz R.2.3).

    Sekcje dostają identyfikatory left, middle, right (po angielsku - arkusz dopuszcza oba języki): część stylów dotyczy „jedynie” obrazów z sekcji środkowej i „jedynie” wierszy tabeli z sekcji lewej, a CSS musi umieć te sekcje rozróżnić.

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

  14. Krok 14: Nagłówek pierwszego stopnia

    Kryteria:

    R.2.4 W bloku nagłówkowym znajduje się <h1>: „Serwis konfiguracji samochodów”, w bloku nawigacyjnym <h2>: „Samochody”, „Konfigurator” i „Kontakt”, w bloku sekcji prawej <h3> „111 222 444” oraz w stopce <p> z numerem zdającego

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści „Serwis konfiguracji samochodów”.

    <h1> w <header> (R.2.4).

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
    </nav>
    <main>
        <section id="left">
        </section>
        <section id="middle">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  15. Krok 15: Blok nawigacyjny: trzy nagłówki drugiego stopnia

    Kryteria:

    R.2.4 W bloku nagłówkowym znajduje się <h1>: „Serwis konfiguracji samochodów”, w bloku nawigacyjnym <h2>: „Samochody”, „Konfigurator” i „Kontakt”, w bloku sekcji prawej <h3> „111 222 444” oraz w stopce <p> z numerem zdającego

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku nawigacyjnego: trzy nagłówki drugiego stopnia o treści: „Samochody”, „Konfigurator”, „Kontakt”.

    Trzy <h2> jeden pod drugim w kodzie. Na stronie staną obok siebie dopiero po stylach (display: inline-block - w kroku CSS); na razie są w trzech liniach.

    index.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
        </section>
        <section id="middle">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  16. Krok 16: Sekcja lewa: tabela na wynik skryptu 1

    Kryteria:

    R.2.6 W bloku sekcji lewej umieszczono tabelę z czterema kolumnami oraz w bloku sekcji środkowej - z trzema kolumnami (w skrypcie lub HTML) , zastosowane znaczniki <table>, <tr>, <td>

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku sekcji lewej: tabela z czterema kolumnami, wypełniona skryptem 1.

    Pusty <table> - wiersze z czterema kolumnami wypisze skrypt 1. Nagłówków kolumn ilustracja 2 nie pokazuje, więc ich nie dodajesz.

    index.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
            </table>
        </section>
        <section id="middle">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  17. Krok 17: Sekcja środkowa: tabela z wierszem nagłówkowym

    Kryteria: ,

    R.2.7 Tabela w bloku sekcji środkowej ma w pierwszym wierszu scalone kolumny 1 i 2; w co najmniej jednym wierszu z obrazem są scalone wszystkie kolumny. W co najmniej jednej komórce z ceną są scalone dwa wiersze

    R.2.8 Pierwszy wiersz tabeli z bloku sekcji środkowej zawiera komórki nagłówkowe „Konfiguracja”, „Cena”, zastosowane znaczniki <tr> i <th>

    ok. 3 min
    Polecenie z arkusza

    Zawartość bloku sekcji środkowej: Tabela z trzema kolumnami i siedmioma wierszami, niektóre komórki są scalone zgodnie z ilustracją 2. W pierwszym wierszu tabeli komórki nagłówkowe: „Konfiguracja”, „Cena”.

    Tabela ma 3 kolumny, ale w pierwszym wierszu są tylko dwie komórki - „Konfiguracja” zajmuje dwie kolumny. Scalenie w poziomie to atrybut colspan="2". Komórki nagłówkowe to <th> (pogrubione i wyśrodkowane), nie <td> (klucz R.2.7, R.2.8).

    Siedem wierszy powstanie tak: 1 - nagłówek, 2 - obraz, 3 i 4 - pierwsze auto ze skryptu 2, 5 - obraz, 6 i 7 - drugie auto.

    index.php PHP zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
            </table>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  18. Krok 18: Drugi wiersz: obraz a1.jpg na całą szerokość

    Kryteria: ,

    R.2.5 Na stronie umieszczono grafiki z tekstem alternatywnym: a1.jpg "Konfiguracja 1", a2.jpg "Konfiguracja 2" oraz a3.png "Samochód"

    R.2.7 Tabela w bloku sekcji środkowej ma w pierwszym wierszu scalone kolumny 1 i 2; w co najmniej jednym wierszu z obrazem są scalone wszystkie kolumny. W co najmniej jednej komórce z ceną są scalone dwa wiersze

    ok. 2 min
    Polecenie z arkusza

    W drugim wierszu tabeli obraz a1.jpg z tekstem alternatywnym „Konfiguracja 1”.

    Obraz zajmuje cały wiersz, więc jedna komórka scalona na trzy kolumny: colspan="3". Obraz ma 300 px szerokości i na razie wystaje poza sekcję - zmniejszy go reguła CSS dla obrazów sekcji środkowej.

    index.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
            </table>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  19. Krok 19: Piąty wiersz: obraz a2.jpg

    Kryteria:

    R.2.5 Na stronie umieszczono grafiki z tekstem alternatywnym: a1.jpg "Konfiguracja 1", a2.jpg "Konfiguracja 2" oraz a3.png "Samochód"

    ok. 1 min
    Polecenie z arkusza

    W piątym wierszu tabeli obraz a2.jpg z tekstem alternatywnym „Konfiguracja 2”.

    Drugi wiersz z obrazem, też colspan="3". Dziś stoi zaraz pod pierwszym obrazem - wiersze 3-4 i 6-7 dopisze skrypt 2, przed tym wierszem i po nim.

    index.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
            </table>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  20. Krok 20: Sekcja prawa: telefon i obraz

    Kryteria: ,

    R.2.4 W bloku nagłówkowym znajduje się <h1>: „Serwis konfiguracji samochodów”, w bloku nawigacyjnym <h2>: „Samochody”, „Konfigurator” i „Kontakt”, w bloku sekcji prawej <h3> „111 222 444” oraz w stopce <p> z numerem zdającego

    R.2.5 Na stronie umieszczono grafiki z tekstem alternatywnym: a1.jpg "Konfiguracja 1", a2.jpg "Konfiguracja 2" oraz a3.png "Samochód"

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku sekcji prawej: Nagłówek trzeciego stopnia o treści „111 222 444”. Obraz a3.png z tekstem alternatywnym „Samochód”.

    <h3> z numerem telefonu i obraz kabrioletu. Ten obraz nie dostanie stylu „jedynie dla obrazów z bloku środkowego” - zostaje w naturalnym rozmiarze, jak na ilustracji 2.

    index.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  21. Krok 21: Stopka

    Kryteria:

    R.2.4 W bloku nagłówkowym znajduje się <h1>: „Serwis konfiguracji samochodów”, w bloku nawigacyjnym <h2>: „Samochody”, „Konfigurator” i „Kontakt”, w bloku sekcji prawej <h3> „111 222 444” oraz w stopce <p> z numerem zdającego

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: paragraf o treści: „Stronę wykonał: ”, dalej wstawiony numer zdającego.

    Paragraf w <footer>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tu stoi autor rozwiązania.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  22. Etap 3: Styl CSS

    Kroki 22-31 · po tym etapie masz 26 z 34 kryteriów (pkt)

    Krok 22: Plik styl.css: wyrównanie i krój czcionki

    Kryteria:

    R.4.1 domyślne formatowanie selektorów (*): wyrównanie tekstu do środka, krój czcionki - Helvetica, sans-serif (dozwolona tylko taka kolejność)

    ok. 1 min
    Polecenie z arkusza

    Domyślnie dla wszystkich selektorów: wyrównanie tekstu do środka, krój czcionki Helvetica, w przypadku braku, sans-serif.

    Selektor * - wszystkie elementy. font-family: Helvetica, sans-serif - Helvetica, a gdy jej brak (na Windows zwykle brak), dowolny krój bezszeryfowy. Klucz R.4.1 wymaga dokładnie tej kolejności.

    styl.css CSS nowy plik 
    * {
    text-align: center;
    font-family: Helvetica, sans-serif;
}
    Podgląd strony po tym kroku (index.php)

  23. Krok 23: Nagłówek, nawigacja i stopka: biały tekst i marginesy

    Kryteria: ,

    R.4.3 kolor czcionki: blok nagłówkowy, nawigacyjny, stopka - biały

    R.4.6 marginesy wewnętrzne (padding) : blok nagłówkowy, nawigacyjny, stopka - 2px margines wewnętrzny górny (padding-top) : wszystkie bloki sekcji - 10px

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla bloków nagłówkowego, nawigacyjnego i stopki: biały kolor czcionki, marginesy wewnętrzne 2 px.

    Trzy selektory po przecinku - jedna reguła. Kolor tekstu to color, marginesy wewnętrzne padding. Biały tekst na razie znika na białym tle - kolory tła w następnym kroku.

    styl.css CSS zmienione: 4 linie 
    * {
    text-align: center;
    font-family: Helvetica, sans-serif;
}
header, nav, footer {
    color: white;
    padding: 2px;
}
    Podgląd strony po tym kroku (index.php)

  24. Krok 24: Kolory tła: ciemna zieleń i leśna zieleń

    Kryteria:

    R.4.2 kolor tła: blok nagłówkowy, stopka - DarkGreen, blok nawigacyjny - ForestGreen, bloki wszystkich sekcji - LightGreen

    ok. 1 min
    Polecenie z arkusza

    Dodatkowo dla bloków nagłówkowego i stopki: kolor tła DarkGreen oraz dla bloku nawigacyjnego kolor tła ForestGreen.

    Dwie reguły: wspólna dla nagłówka i stopki oraz osobna dla nawigacji. Nazwy kolorów z arkusza wpisujesz wprost.

    styl.css CSS zmienione: 6 linii 
    * {
    text-align: center;
    font-family: Helvetica, sans-serif;
}
header, nav, footer {
    color: white;
    padding: 2px;
}
header, footer {
    background-color: DarkGreen;
}
nav {
    background-color: ForestGreen;
}
    Podgląd strony po tym kroku (index.php)

  25. Krok 25: Wszystkie sekcje: tło, wymiary, przewijanie

    Kryteria: , , ,

    R.4.2 kolor tła: blok nagłówkowy, stopka - DarkGreen, blok nawigacyjny - ForestGreen, bloki wszystkich sekcji - LightGreen

    R.4.4 wysokość: wszystkie bloki sekcji - 550px szerokość: wszystkie bloki sekcji - 33.3% (width lub grid-template-columns lub flex) , selektor table - 90%, selektor h2 - 33%

    R.4.5 paski przewijania: wszystkie bloki sekcji - auto (overflow)

    R.4.6 marginesy wewnętrzne (padding) : blok nagłówkowy, nawigacyjny, stopka - 2px margines wewnętrzny górny (padding-top) : wszystkie bloki sekcji - 10px

    ok. 2 min
    Polecenie z arkusza

    Dla wszystkich bloków sekcji: kolor tła LightGreen, szerokość 33.3%, wysokość 550 px, jedynie górny margines wewnętrzny 10 px, paski przewijania widoczne jedynie w przypadku przepełnienia bloku.

    Selektor section obejmuje trzy sekcje. 33.3% z kropką - CSS nie zna przecinka dziesiętnego. „Jedynie górny” margines wewnętrzny to padding-top. overflow: auto pokaże pasek przewijania tylko w sekcji, której treść nie mieści się w 550 px (środkowa z dwoma zdjęciami - ilustracja 2). Sekcje są jeszcze jedna pod drugą - układ ustawisz na końcu.

    styl.css CSS zmienione: 7 linii 
    * {
    text-align: center;
    font-family: Helvetica, sans-serif;
}
header, nav, footer {
    color: white;
    padding: 2px;
}
header, footer {
    background-color: DarkGreen;
}
nav {
    background-color: ForestGreen;
}
section {
    background-color: LightGreen;
    width: 33.3%;
    height: 550px;
    padding-top: 10px;
    overflow: auto;
}
    Podgląd strony po tym kroku (index.php)

  26. Krok 26: Nagłówki drugiego stopnia: liniowo-blokowe

    Kryteria: ,

    R.4.4 wysokość: wszystkie bloki sekcji - 550px szerokość: wszystkie bloki sekcji - 33.3% (width lub grid-template-columns lub flex) , selektor table - 90%, selektor h2 - 33%

    R.4.8 styl dla nagłówka drugiego stopnia: właściwość display: inline-block

    ok. 1 min
    Polecenie z arkusza

    Dla selektora nagłówka drugiego stopnia: szerokość 33%, sposób wyświetlania elementu liniowo-blokowy.

    Nagłówek jest domyślnie blokowy - zajmuje całą linię. display: inline-block (tabela 2 arkusza) sprawia, że stoi w linii jak tekst, a mimo to przyjmuje szerokość - trzy nagłówki po 33% mieszczą się obok siebie. Arkusz każe stylować przez selektor znacznika h2, nie klasę ani identyfikator.

    styl.css CSS zmienione: 4 linie 
    * {
    text-align: center;
    font-family: Helvetica, sans-serif;
}
header, nav, footer {
    color: white;
    padding: 2px;
}
header, footer {
    background-color: DarkGreen;
}
nav {
    background-color: ForestGreen;
}
section {
    background-color: LightGreen;
    width: 33.3%;
    height: 550px;
    padding-top: 10px;
    overflow: auto;
}
h2 {
    width: 33%;
    display: inline-block;
}
    Podgląd strony po tym kroku (index.php)

  27. Krok 27: Obramowanie tabel i komórek

    Kryteria:

    R.4.7 obramowanie: dla tabeli, selektorów td i th - 1px solid DarkGreen obramowanie połączone (collapse) - tabela

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla selektora tabeli, komórki tabeli i komórki nagłówkowej: obramowanie linią ciągłą o szerokości 1 px i kolorze DarkGreen.

    Linia ciągła to solid. Selektory znaczników table, td, th - tak każe uwaga w arkuszu. Na razie każda komórka ma własną ramkę, z odstępami między nimi.

    styl.css CSS zmienione: 3 linie 
    * {
    text-align: center;
    font-family: Helvetica, sans-serif;
}
header, nav, footer {
    color: white;
    padding: 2px;
}
header, footer {
    background-color: DarkGreen;
}
nav {
    background-color: ForestGreen;
}
section {
    background-color: LightGreen;
    width: 33.3%;
    height: 550px;
    padding-top: 10px;
    overflow: auto;
}
h2 {
    width: 33%;
    display: inline-block;
}
table, td, th {
    border: 1px solid DarkGreen;
}
    Podgląd strony po tym kroku (index.php)

  28. Krok 28: Tabela: szerokość i połączone obramowania

    Kryteria: ,

    R.4.4 wysokość: wszystkie bloki sekcji - 550px szerokość: wszystkie bloki sekcji - 33.3% (width lub grid-template-columns lub flex) , selektor table - 90%, selektor h2 - 33%

    R.4.7 obramowanie: dla tabeli, selektorów td i th - 1px solid DarkGreen obramowanie połączone (collapse) - tabela

    ok. 1 min
    Polecenie z arkusza

    Dodatkowo dla selektora tabeli: szerokość 90%, linie obramowania połączone.

    border-collapse: collapse łączy ramki sąsiednich komórek w jedną linię - znikają podwójne obramowania i odstępy między komórkami, tabela wygląda jak siatka z ilustracji 2.

    styl.css CSS zmienione: 4 linie 
    * {
    text-align: center;
    font-family: Helvetica, sans-serif;
}
header, nav, footer {
    color: white;
    padding: 2px;
}
header, footer {
    background-color: DarkGreen;
}
nav {
    background-color: ForestGreen;
}
section {
    background-color: LightGreen;
    width: 33.3%;
    height: 550px;
    padding-top: 10px;
    overflow: auto;
}
h2 {
    width: 33%;
    display: inline-block;
}
table, td, th {
    border: 1px solid DarkGreen;
}
table {
    width: 90%;
    border-collapse: collapse;
}
    Podgląd strony po tym kroku (index.php)

  29. Krok 29: Obrazy z sekcji środkowej

    Kryteria:

    R.4.9 styl jedynie dla obrazów z bloku sekcji środkowej: szerokość - 95%, zaokrąglenie rogów - 8px (border-radius)

    ok. 1 min
    Polecenie z arkusza

    Jedynie dla obrazów z bloku środkowego: szerokość 95%, zaokrąglenie rogów 8 px.

    Selektor potomka: #middle img - obrazy wewnątrz elementu o identyfikatorze middle. Obraz w sekcji prawej się nie zmienia, i o to chodzi w słowie „jedynie” (R.4.9). Szerokość 95% liczy się od komórki tabeli, więc zdjęcia mieszczą się w kolumnie.

    styl.css CSS zmienione: 4 linie 
    * {
    text-align: center;
    font-family: Helvetica, sans-serif;
}
header, nav, footer {
    color: white;
    padding: 2px;
}
header, footer {
    background-color: DarkGreen;
}
nav {
    background-color: ForestGreen;
}
section {
    background-color: LightGreen;
    width: 33.3%;
    height: 550px;
    padding-top: 10px;
    overflow: auto;
}
h2 {
    width: 33%;
    display: inline-block;
}
table, td, th {
    border: 1px solid DarkGreen;
}
table {
    width: 90%;
    border-collapse: collapse;
}
#middle img {
    width: 95%;
    border-radius: 8px;
}
    Podgląd strony po tym kroku (index.php)

  30. Krok 30: Wiersz tabeli lewej pod kursorem

    Kryteria:

    R.4.10 styl jedynie dla wierszy tabeli z bloku lewego: gdy kursor znajdzie się na wierszu jego kolor tła zmienia się na ForestGreen. Styl nie działa na tabeli z bloku sekcji środkowej

    ok. 1 min
    Polecenie z arkusza

    Jedynie dla wierszy tabeli z bloku lewego: gdy kursor znajdzie się na wierszu tabeli jego kolor tła zmienia się na ForestGreen (jak na ilustracji 2).

    #left tr:hover - wiersz (tr) w sekcji lewej, w stanie „kursor nad elementem”. Tabela środkowa nie reaguje, bo leży poza #left (klucz R.4.10 sprawdza też to). Wierszy jeszcze nie ma - wypisze je skrypt 1.

    styl.css CSS zmienione: 3 linie 
    * {
    text-align: center;
    font-family: Helvetica, sans-serif;
}
header, nav, footer {
    color: white;
    padding: 2px;
}
header, footer {
    background-color: DarkGreen;
}
nav {
    background-color: ForestGreen;
}
section {
    background-color: LightGreen;
    width: 33.3%;
    height: 550px;
    padding-top: 10px;
    overflow: auto;
}
h2 {
    width: 33%;
    display: inline-block;
}
table, td, th {
    border: 1px solid DarkGreen;
}
table {
    width: 90%;
    border-collapse: collapse;
}
#middle img {
    width: 95%;
    border-radius: 8px;
}
#left tr:hover {
    background-color: ForestGreen;
}
    Podgląd strony po tym kroku (index.php)

  31. Krok 31: Układ bloków zgodny z ilustracją 3

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

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

    Trzy sekcje po 33,3% mają stanąć obok siebie: float: left w regule section ustawia je kolejno od lewej (razem 99,9% szerokości). Stopka dostaje clear: both - schodzi pod sekcje, zamiast wsunąć się pod nie. Sekcje nie mają poziomych marginesów ani paddingu, więc szerokości się sumują dokładnie (R.3.1).

    Typowe błędy

    Poziomy padding w sekcjach (np. padding: 10px zamiast padding-top) dodaje się do 33,3% i trzecia sekcja spada pod pierwszą.

    styl.css CSS zmienione: 4 linie 
    * {
    text-align: center;
    font-family: Helvetica, sans-serif;
}
header, nav, footer {
    color: white;
    padding: 2px;
}
header, footer {
    background-color: DarkGreen;
}
footer {
    clear: both;
}
nav {
    background-color: ForestGreen;
}
section {
    float: left;
    background-color: LightGreen;
    width: 33.3%;
    height: 550px;
    padding-top: 10px;
    overflow: auto;
}
h2 {
    width: 33%;
    display: inline-block;
}
table, td, th {
    border: 1px solid DarkGreen;
}
table {
    width: 90%;
    border-collapse: collapse;
}
#middle img {
    width: 95%;
    border-radius: 8px;
}
#left tr:hover {
    background-color: ForestGreen;
}
    Podgląd strony po tym kroku (index.php)

  32. Etap 4: Skrypty PHP

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

    Krok 32: Połączenie z bazą danych

    Kryteria: ,

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

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

    ok. 3 min
    Polecenie z arkusza

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

    Kod PHP wykonuje serwer, zanim strona trafi do przeglądarki. Połączenie otwierasz raz, zaraz po <body>, w zmiennej $connection - korzystają z niego oba skrypty. mysqli_connect z tabeli 1: serwer, użytkownik, hasło (puste), nazwa bazy.

    Od tego kroku podgląd to wynik działania strony po stronie serwera.

    Typowe błędy

    Nazwa bazy to czwarty argument - mysqli_connect('localhost', 'root', 'samochody') podaje ją jako hasło.

    index.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'samochody');
?>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

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

    Kryteria:

    R.5.3 Skrypty zawierają instrukcję wysyłającą do bazy danych zapytanie 3 lub zapytanie 4

    ok. 2 min
    Polecenie z arkusza

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

    Skrypt 1 stoi wewnątrz <table> sekcji lewej - wypisze tam wiersze. Wynik zapytania 3 zapisujesz w $cars. Zapytanie zawiera cudzysłowy, więc napis PHP bierzesz w apostrofy.

    index.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'samochody');
?>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
<?php
$cars = mysqli_query($connection, 'SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";');
?>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

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

  34. Krok 34: Skrypt 1: wiersz tabeli dla każdego auta

    Kryteria: ,

    R.5.5 Skrypt 1 wykorzystuje pętlę, której liczba powtórzeń równa jest liczbie rekordów zwróconych zapytaniem

    R.2.6 W bloku sekcji lewej umieszczono tabelę z czterema kolumnami oraz w bloku sekcji środkowej - z trzema kolumnami (w skrypcie lub HTML) , zastosowane znaczniki <table>, <tr>, <td>

    ok. 3 min
    Polecenie z arkusza

    W wierszach tabeli wyświetlane są kolejne rekordy zgodnie z ilustracją 2.

    Pętla while z mysqli_fetch_row wykonuje się tyle razy, ile wierszy zwróciło zapytanie - sześć (klucz R.5.5). Każdy wiersz to <tr> z komórkami: marka $row[0], model $row[1] i nazwa koloru $row[3] - kolejność kolumn z SELECT: marka, model, cena, nazwa, doplata. Na razie trzy kolumny, czwartą policzysz. Najedź kursorem na wiersz: podświetla się na ForestGreen.

    Kolejność wierszy wybiera serwer, bo zapytanie nie ma ORDER BY. Podgląd pokazuje kolejność z ilustracji 2, a MariaDB z XAMPP-a (sprawdzone) oddaje wiersze w kolejności identyfikatorów aut - „zielony metalik” stoi wtedy trzeci, nie czwarty. Klucz kolejności nie ocenia.

    index.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'samochody');
?>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
<?php
$cars = mysqli_query($connection, 'SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";');
while ($row = mysqli_fetch_row($cars)) {
    echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[3]</td></tr>";
}
?>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  35. Krok 35: Skrypt 1: cena całkowita w czwartej kolumnie

    Kryteria: ,

    R.5.4 Skrypt 1 oblicza dla każdego rekordu cenę całkowitą jako sumę ceny i dopłaty za kolor zwróconych zapytaniem

    R.5.6 Skrypt 1 wyświetla w wierszach tabeli markę, model, nazwę koloru zwrócone zapytaniem i obliczoną cenę całkowitą

    ok. 2 min
    Polecenie z arkusza

    W czwartej kolumnie tabeli wyświetlana jest cena całkowita, która jest sumą ceny z tabeli pojazdy oraz dopłaty z tabeli kolory.

    W pętli liczysz $totalPrice = $row[2] + $row[4] - cena plus dopłata. mysqli_fetch_row oddaje liczby z bazy jako napisy ("72000", "1000.00"), ale operator + w PHP zamienia je na liczby i dodaje: wynik 73000. Czwarta komórka wiersza pokazuje sumę - zielony metalik za 72000 kosztuje razem 73000, jak na ilustracji 2 (klucz R.5.4, R.5.6).

    Typowe błędy

    Kropka zamiast plusa ($row[2] . $row[4]) skleja napisy: „720001000.00”. W PHP kropka to łączenie tekstu, plus to dodawanie.

    index.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'samochody');
?>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
<?php
$cars = mysqli_query($connection, 'SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";');
while ($row = mysqli_fetch_row($cars)) {
    $totalPrice = $row[2] + $row[4];
    echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[3]</td><td>$totalPrice</td></tr>";
}
?>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  36. Krok 36: Skrypt 2: zapytanie 4 i pierwszy rekord

    Kryteria:

    R.5.3 Skrypty zawierają instrukcję wysyłającą do bazy danych zapytanie 3 lub zapytanie 4

    ok. 3 min
    Polecenie z arkusza

    Skrypt 2: Wysyła do bazy danych zapytanie 4.

    Skrypt 2 jest przecięty wierszem z obrazem a2.jpg: pierwsze auto ma trafić w wiersze 3-4 (nad obrazem), drugie w 6-7 (pod nim). Dlatego pierwszą część skryptu wstawiasz zaraz po wierszu z a1.jpg: wysyła zapytanie 4 (wynik w $random) i od razu pobiera pierwszy wiersz do $car. Pętla nie jest potrzebna - wiadomo, że rekordy są dwa, i każdy idzie w inne miejsce tabeli.

    index.php PHP zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'samochody');
?>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
<?php
$cars = mysqli_query($connection, 'SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";');
while ($row = mysqli_fetch_row($cars)) {
    $totalPrice = $row[2] + $row[4];
    echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[3]</td><td>$totalPrice</td></tr>";
}
?>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
<?php
$random = mysqli_query($connection, 'SELECT marka, model, cena FROM pojazdy ORDER BY RAND() LIMIT 2;');
$car = mysqli_fetch_row($random);
?>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

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

  37. Krok 37: Skrypt 2: wiersze 3 i 4 ze scaloną ceną

    Kryteria: ,

    R.5.7 Skrypt 2 wyświetla dwa zwrócone z bazy rekordy: markę, model i cenę

    R.2.7 Tabela w bloku sekcji środkowej ma w pierwszym wierszu scalone kolumny 1 i 2; w co najmniej jednym wierszu z obrazem są scalone wszystkie kolumny. W co najmniej jednej komórce z ceną są scalone dwa wiersze

    ok. 3 min
    Polecenie z arkusza

    Wyświetla pierwszy rekord w tabeli w wierszach 3 i 4.

    Dwa wiersze: w pierwszym „Marka”, marka i cena scalona na dwa wiersze - rowspan="2" (scalanie w pionie, jak na ilustracji 2); w drugim „Model” i model, już bez trzeciej komórki, bo jej miejsce zajmuje cena z wiersza wyżej. Cudzysłów wokół 2 w napisie PHP poprzedzasz ukośnikiem: rowspan=\"2\". W podglądzie pierwsze z dwóch aut z ilustracji 2.

    Typowe błędy

    Trzecia komórka także w wierszu z modelem rozjeżdża tabelę - przy rowspan="2" drugi wiersz ma o jedną komórkę mniej.

    index.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'samochody');
?>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
<?php
$cars = mysqli_query($connection, 'SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";');
while ($row = mysqli_fetch_row($cars)) {
    $totalPrice = $row[2] + $row[4];
    echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[3]</td><td>$totalPrice</td></tr>";
}
?>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
<?php
$random = mysqli_query($connection, 'SELECT marka, model, cena FROM pojazdy ORDER BY RAND() LIMIT 2;');
$car = mysqli_fetch_row($random);
echo "<tr><td>Marka</td><td>$car[0]</td><td rowspan=\"2\">$car[2]</td></tr>";
echo "<tr><td>Model</td><td>$car[1]</td></tr>";
?>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  38. Krok 38: Skrypt 2: drugi rekord w wierszach 6 i 7

    Kryteria:

    R.5.7 Skrypt 2 wyświetla dwa zwrócone z bazy rekordy: markę, model i cenę

    ok. 2 min
    Polecenie z arkusza

    Drugi rekord w wierszach 6 i 7.

    Druga część skryptu stoi pod wierszem z a2.jpg. Kolejne mysqli_fetch_row($random) oddaje następny wiersz wyniku - drugie wylosowane auto - i wypisujesz je tymi samymi dwiema liniami. Tabela ma teraz komplet siedmiu wierszy.

    index.php PHP zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'samochody');
?>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
<?php
$cars = mysqli_query($connection, 'SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";');
while ($row = mysqli_fetch_row($cars)) {
    $totalPrice = $row[2] + $row[4];
    echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[3]</td><td>$totalPrice</td></tr>";
}
?>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
<?php
$random = mysqli_query($connection, 'SELECT marka, model, cena FROM pojazdy ORDER BY RAND() LIMIT 2;');
$car = mysqli_fetch_row($random);
echo "<tr><td>Marka</td><td>$car[0]</td><td rowspan=\"2\">$car[2]</td></tr>";
echo "<tr><td>Model</td><td>$car[1]</td></tr>";
?>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
<?php
$car = mysqli_fetch_row($random);
echo "<tr><td>Marka</td><td>$car[0]</td><td rowspan=\"2\">$car[2]</td></tr>";
echo "<tr><td>Model</td><td>$car[1]</td></tr>";
?>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

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

    Kryteria:

    R.5.2 Ostatnią operacją na bazie jest jej zamknięcie

    ok. 1 min
    Polecenie z arkusza

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

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

    index.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'samochody');
?>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
<?php
$cars = mysqli_query($connection, 'SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";');
while ($row = mysqli_fetch_row($cars)) {
    $totalPrice = $row[2] + $row[4];
    echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[3]</td><td>$totalPrice</td></tr>";
}
?>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
<?php
$random = mysqli_query($connection, 'SELECT marka, model, cena FROM pojazdy ORDER BY RAND() LIMIT 2;');
$car = mysqli_fetch_row($random);
echo "<tr><td>Marka</td><td>$car[0]</td><td rowspan=\"2\">$car[2]</td></tr>";
echo "<tr><td>Model</td><td>$car[1]</td></tr>";
?>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
<?php
$car = mysqli_fetch_row($random);
echo "<tr><td>Marka</td><td>$car[0]</td><td rowspan=\"2\">$car[2]</td></tr>";
echo "<tr><td>Model</td><td>$car[1]</td></tr>";
?>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
<?php
mysqli_close($connection);
?>
</body>
</html>

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

  40. Etap 5: Dobre praktyki (poza kluczem)

    Kroki 40-41 · po tym etapie masz 34 z 34 kryteriów (pkt)

    Krok 40: Funkcja printCar zamiast dwóch kopii wypisywania

    ok. 3 min
    Polecenie z arkusza

    Wyświetla pierwszy rekord w tabeli w wierszach 3 i 4; drugi rekord w wierszach 6 i 7.

    Dwa auta wypisywały te same dwie linie echo. Przenieś je do funkcji printCar($car) - zdefiniowanej raz, w bloku z połączeniem na początku pliku - i w obu miejscach tabeli wywołaj printCar(mysqli_fetch_row($random)). Poprawka wyglądu wiersza (np. „zł” przy cenie) zmienia teraz jedno miejsce. Podgląd bez zmian.

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

    index.php PHP zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'samochody');

function printCar($car)
{
    echo "<tr><td>Marka</td><td>$car[0]</td><td rowspan=\"2\">$car[2]</td></tr>";
    echo "<tr><td>Model</td><td>$car[1]</td></tr>";
}
?>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
<?php
$cars = mysqli_query($connection, 'SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";');
while ($row = mysqli_fetch_row($cars)) {
    $totalPrice = $row[2] + $row[4];
    echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[3]</td><td>$totalPrice</td></tr>";
}
?>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
<?php
$random = mysqli_query($connection, 'SELECT marka, model, cena FROM pojazdy ORDER BY RAND() LIMIT 2;');
printCar(mysqli_fetch_row($random));
?>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
<?php
printCar(mysqli_fetch_row($random));
?>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
<?php
mysqli_close($connection);
?>
</body>
</html>

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

  41. Krok 41: Escapowanie danych z bazy

    ok. 3 min
    Polecenie z arkusza

    W wierszach tabeli wyświetlane są kolejne rekordy zgodnie z ilustracją 2.

    Nazwy kolorów, marek i modeli ktoś wpisał do bazy - napis z <script> wykonałby się u każdego, kto otworzy stronę (XSS). htmlspecialchars() zamienia <, >, ", & na encje, więc tekst zawsze zostaje tekstem. W funkcji array_map stosuje ją do całego wiersza naraz. Escapujesz przy wypisywaniu, nie przy zapisie. Podgląd bez zmian.

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

    index.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Konfigurator samochodów</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'samochody');

function printCar($car)
{
    $car = array_map('htmlspecialchars', $car);
    echo "<tr><td>Marka</td><td>$car[0]</td><td rowspan=\"2\">$car[2]</td></tr>";
    echo "<tr><td>Model</td><td>$car[1]</td></tr>";
}
?>
    <header>
        <h1>Serwis konfiguracji samochodów</h1>
    </header>
    <nav>
        <h2>Samochody</h2>
        <h2>Konfigurator</h2>
        <h2>Kontakt</h2>
    </nav>
    <main>
        <section id="left">
            <table>
<?php
$cars = mysqli_query($connection, 'SELECT marka, model, cena, nazwa, doplata FROM pojazdy JOIN kolory ON kolor = kolory.id WHERE model = "alfa";');
while ($row = mysqli_fetch_row($cars)) {
    $totalPrice = $row[2] + $row[4];
    $color = htmlspecialchars($row[3]);
    echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$color</td><td>$totalPrice</td></tr>";
}
?>
            </table>
        </section>
        <section id="middle">
            <table>
                <tr>
                    <th colspan="2">Konfiguracja</th>
                    <th>Cena</th>
                </tr>
                <tr>
                    <td colspan="3"><img src="a1.jpg" alt="Konfiguracja 1"></td>
                </tr>
<?php
$random = mysqli_query($connection, 'SELECT marka, model, cena FROM pojazdy ORDER BY RAND() LIMIT 2;');
printCar(mysqli_fetch_row($random));
?>
                <tr>
                    <td colspan="3"><img src="a2.jpg" alt="Konfiguracja 2"></td>
                </tr>
<?php
printCar(mysqli_fetch_row($random));
?>
            </table>
        </section>
        <section id="right">
            <h3>111 222 444</h3>
            <img src="a3.png" alt="Samochód">
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
<?php
mysqli_close($connection);
?>
</body>
</html>

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

  42. Etap 6: Oddanie pracy

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

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

    ok. 5 min
    Polecenie z arkusza

    Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy. W folderze z numerem zdającego, powinny znajdować się pliki: a1.jpg, a2.jpg, a3.png, import.jpg, index.php, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, przeglądarka.txt, styl.css, ewentualnie inne przygotowane pliki.

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

    Sprawdź listę plików z arkusza, 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 38.

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.