Przejdź do głównej treści
EE.09-06-20.06-SGCzerwiec 2020 · 28 kroków · ok. 62 min · 32 kryteria z klucza

Rozwiązanie krok po kroku: Biuro wycieczek krajoznawczych z archiwum (Nowoczesny kod (flex, PDO))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza egzamin4 z czterema zapytaniami oraz strona biuro.php z banerem, archiwum wycieczek, cennikiem, galerią i kontaktem - i tak samo spełnia każde kryterium klucza. Inna jest droga:

  • flexbox zamiast float: trzy bloki stoją w znaczniku <main> ułożonym we flexie, więc stopka nie potrzebuje clear, a bloki same wyrównują wysokość,
  • semantyczne znaczniki: baner w <header>, stopka w <footer>, tabela cen z nagłówkiem wiersza <th scope="row">, kontakt w <address>,
  • zmienne CSS dla trzech kolorów z arkusza,
  • PHP na PDO na górze pliku biuro.php, przed HTML-em - w blokach zostają tylko pętle i wypisywanie danych przez htmlspecialchars,
  • obsługa błędu bazy: zamiast ostrzeżeń PHP uczeń zobaczy zrozumiały komunikat, a reszta strony się wyświetli.

To arkusz EE.09 z czerwca 2020 - kwalifikacji formuły 2017, którą zastąpiła INF.03. Baza i zdjęcia pochodzą z oryginalnego archiwum CKE egzamin4.zip (załącznik na stronie arkusza), zapytania i zrzuty są policzone na MariaDB 10.4, a podgląd od kroków z PHP to wynik prawdziwego uruchomienia kodu w PHP 8.2.

Jak liczą się punkty. Klucz ma 32 kryteria (R.1.1 - R.5.6), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 24 punkty. Przy każdym kroku jest napisane, które kryteria spełnia; klucz przyjmuje zarówno mysqli, jak i PDO.

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 32 kryteriów (pkt)

    Krok 1: Folder zdającego i archiwum egzamin4.zip

    ok. 2 min
    Polecenie z arkusza

    Na pulpicie znajdziesz archiwum ZIP o nazwie egzamin4.zip zabezpieczone hasłem: $poDrozE& Archiwum należy rozpakować. Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Umieść w tym folderze rozpakowane pliki.

    Folder na pulpicie nazwany numerem PESEL (w tym rozwiązaniu w jego miejscu stoi Bartosz Bryniarski), do niego archiwum egzamin4.zip rozpakowane z hasłem $poDrozE&. W środku: egzamin3.sql i zdjęcia 1.jpg - 9.jpg. Do tego folderu trafiają wszystkie rezultaty pracy.

  2. Krok 2: XAMPP i pusta baza egzamin4

    ok. 2 min
    Polecenie z arkusza

    Uruchom usługi MySQL i Apache za pomocą XAMPP Control Panel. Za pomocą narzędzia phpMyAdmin wykonaj podane operacje na bazie danych: Utwórz bazę danych o nazwie egzamin4

    Start przy Apache i MySQL, potem http://localhost/phpmyadmin, Nowa, nazwa egzamin4 - z cyfrą 4, choć plik do importu ma w nazwie 3.

  3. Krok 3: Import pliku egzamin3.sql i zrzut import.png

    Kryteria:

    R.1.1 Wykonano import tabel do bazy danych egzamin4 , czynność udokumentowano plikiem o nazwie import w formacie PNG. Zrzut zawiera cały obszar ekranu z widocznym paskiem zadań

    ok. 3 min
    Polecenie z arkusza

    Do bazy egzamin4 zaimportuj tabele z pliku egzamin3.sql z rozpakowanego archiwum. Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG pod nazwą import w folderze z numerem PESEL. Nie kadruj zrzutu. Zrzut powinien obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel

    Baza egzamin4, karta Import, plik egzamin3.sql, Wykonaj. Powstaje osiem tabel - w zadaniu potrzebne są tylko wycieczki i zdjecia. Pole zdjecia_id w wycieczkach wskazuje id zdjęcia, a dostepna ma wartość 1 albo 0. Zrzut całego ekranu z paskiem zadań: import.png.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 3

  4. Krok 4: Zapytanie 1: wycieczki niedostępne

    Kryteria: ,

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

    R.1.3 Utworzono zapytanie 1 wybierające jedynie pola id, cel i cena z tabeli wycieczki, jedynie dla wycieczek, które nie są dostępne. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT id, cel, cena FROM wycieczki WHERE dostepna = FALSE; (lub =0) oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są dokładnie 3 rekordy dla id równego 5, 7, 8; widoczne jedynie pola id, cel i cena

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 1: wybierające jedynie pola id, cel, cena z tabeli wycieczki dla wycieczek, które nie są dostępne (pole dostepna)

    Trzy kolumny i warunek dostepna = FALSE (w MariaDB FALSE to 0). Wynik: 3 wiersze o id 5, 7 i 8. Zapytanie trafia do kwerendy.txt, zrzut - do kw1.jpg. Każda klauzula w osobnej linii: przy dłuższych zapytaniach łatwiej znaleźć błąd.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT id, cel, cena
FROM wycieczki
WHERE dostepna = FALSE;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: zdjęcia malejąco po podpisie

    Kryteria:

    R.1.4 Utworzono zapytanie 2 wybierające jedynie pola nazwaPliku i podpis z tabeli zdjecia sortując je malejąco alfabetycznie według pola podpis. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis DESC; oraz wynik działania zapytania udokumentowano zrzutem, na którym widocznych jest dokładnie 9 rekordów posortowanych malejąco alfabetycznie wg. kolumny podpis jedynie pola nazwaPliku i podpis

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 2: wybierające jedynie pola nazwaPliku i podpis z tabeli zdjecia sortując je malejąco alfabetycznie według kolumny podpis

    ORDER BY podpis DESC - od Z do A. Wynik: 9 wierszy, od Wenecji do Barcelony. Zrzut: kw2.jpg. To zapytanie zasili galerię.

    kwerendy.txt Tekst zmienione: 5 linii 
    -- Zapytanie 1
SELECT id, cel, cena
FROM wycieczki
WHERE dostepna = FALSE;

-- Zapytanie 2
SELECT nazwaPliku, podpis
FROM zdjecia
ORDER BY podpis DESC;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: relacja zdjęć i tanich wycieczek

    Kryteria:

    R.1.5 Utworzono zapytanie 3 wykorzystujące relację i wybierające jedynie pola podpis, cena i cel związany ze zdjęciem z tabel zdjecia i wycieczki , dla wycieczek, których cena jest niższa niż 1200 zł. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT podpis, cena, cel FROM zdjecia JOIN wycieczki ON zdjecia.id = wycieczki.zdjecia_id WHERE cena < 1200; możliwe też INNER JOIN lub SELECT podpis, cena, cel FROM zdjecia, wycieczki WHERE zdjecia.id = wycieczki.zdjecia_id AND cena < 1200; oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczny jest dokładnie 1 rekord, jedynie pola podpis, cel i cena z danymi dla wycieczki do Warszawy

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 3: wykorzystujące relację i wybierające jedynie pola podpis, cena i cel związany ze zdjęciem z tabel zdjecia i wycieczki, dla wycieczek, których cena jest niższa niż 1200 zł

    JOIN ... ON zdjecia.id = wycieczki.zdjecia_id łączy każdą wycieczkę z jej zdjęciem, WHERE cena < 1200 zostawia tańsze niż 1200 zł (ostra nierówność). Wynik: jeden wiersz - Warszawa, 640, „Polska, Warszawa”. Zrzut: kw3.jpg.

    Typowe błędy

    cena <= 1200 dokłada trzy wycieczki za dokładnie 1200 zł - klucz wymaga jednego rekordu.

    kwerendy.txt Tekst zmienione: 6 linii 
    -- Zapytanie 1
SELECT id, cel, cena
FROM wycieczki
WHERE dostepna = FALSE;

-- Zapytanie 2
SELECT nazwaPliku, podpis
FROM zdjecia
ORDER BY podpis DESC;

-- Zapytanie 3
SELECT podpis, cena, cel
FROM zdjecia
JOIN wycieczki ON zdjecia.id = wycieczki.zdjecia_id
WHERE cena < 1200;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: usunięcie kolumny dataWyjazdu

    Kryteria:

    R.1.6 Utworzono zapytanie 4 usuwające pole dataWyjazdu z tabeli wycieczki . W pliku z kwerendami lub na zrzucie istnieje zapis np.: ALTER TABLE wycieczki DROP dataWyjazdu; lub DROP COLUMN oraz wynik działania zapytania udokumentowano zrzutem wskazującym na usunięcie kolumny dataWyjazdu

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: usuwające pole dataWyjazdu z tabeli wycieczki

    ALTER TABLE ... DROP zmienia strukturę tabeli - kolumna znika razem z danymi. Karta Struktura tabeli wycieczki nie ma już dataWyjazdu; jej zrzut to kw4.jpg.

    kwerendy.txt Tekst zmienione: 4 linie 
    -- Zapytanie 1
SELECT id, cel, cena
FROM wycieczki
WHERE dostepna = FALSE;

-- Zapytanie 2
SELECT nazwaPliku, podpis
FROM zdjecia
ORDER BY podpis DESC;

-- Zapytanie 3
SELECT podpis, cena, cel
FROM zdjecia
JOIN wycieczki ON zdjecia.id = wycieczki.zdjecia_id
WHERE cena < 1200;

-- Zapytanie 4
ALTER TABLE wycieczki
DROP dataWyjazdu;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Strona HTML

    Kroki 8-14 · po tym etapie masz 14 z 32 kryteriów (pkt)

    Krok 8: Plik biuro.php i kodowanie znaków

    Kryteria: ,

    R.2.1 Witrynę internetową zapisano w pliku PHP o nazwie biuro

    R.2.2 Zastosowano właściwy standard kodowania polskich znaków dla witryny

    ok. 1 min
    Polecenie z arkusza

    Składa się ze strony o nazwie biuro.php. Zastosowany właściwy standard kodowania polskich znaków

    Szkielet HTML5 w pliku biuro.php: lang="pl", <meta charset="UTF-8"> jako pierwszy element <head> (plik zapisany w UTF-8) i <meta name="viewport"> - bez niego telefon pokazałby stronę pomniejszoną jak na monitorze (R.2.1, R.2.2).

    biuro.php PHP nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  9. Krok 9: Tytuł strony i arkusz stylów

    Kryteria: ,

    R.2.3 Nadano tytuł strony: "Wycieczki krajoznawcze”

    R.3.3 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl4.css a 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

    Tytuł strony widoczny na karcie przeglądarki: „Wycieczki krajoznawcze”. Arkusz stylów w pliku o nazwie styl4.css prawidłowo połączony z kodem strony

    <title> z napisem na karcie przeglądarki (R.2.3) i <link rel="stylesheet" href="styl4.css"> - całe formatowanie pochodzi z tego pliku, bez atrybutów style w HTML-u (R.3.3).

    biuro.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  10. Krok 10: Bloki strony i nagłówek banera

    Kryteria:

    R.2.4 Wygląd strony zdefiniowano dzieląc ją na bloki: na górze baner, poniżej blok z danymi, poniżej trzy bloki: lewy, środkowy i prawy, poniżej stopka. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: na górze baner, poniżej blok z danymi, poniżej obok siebie trzy bloki: lewy, środkowy i prawy, poniżej stopka. Zawartość banera: nagłówek pierwszego stopnia o treści: „WITAMY W BIURZE PODRÓŻY”

    Znaczniki mówią, czym jest każda część strony:

    • <header> - baner z jedynym na stronie <h1>,
    • <section id="data"> - blok z danymi (archiwum),
    • <main> - główna treść, w nim trzy bloki jako <section> z identyfikatorami left, center, right,
    • <footer> - stopka.

    Klucz wymaga znaczników sekcji (R.2.4): są nimi blok z danymi i trzy bloki w <main>. Znacznik <main> nie zmienia wyglądu, ale pozwoli ustawić trzy bloki w rzędzie jedną regułą CSS.

    biuro.php PHP zmienione: 15 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </header>
    <section id="data">
    </section>
    <main>
        <section id="left">
        </section>
        <section id="center">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  11. Krok 11: Nagłówki trzeciego stopnia w czterech blokach

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku z danymi: Nagłówek trzeciego stopnia o treści: „ARCHIWUM WYCIECZEK”. Zawartość lewego bloku: Nagłówek trzeciego stopnia o treści: „NAJTANIEJ...”. Zawartość środkowego bloku: Nagłówek trzeciego stopnia o treści: „TU BYLIŚMY”. Zawartość prawego bloku: Nagłówek trzeciego stopnia o treści: „SKONTAKTUJ SIĘ”

    Cztery <h3> - po jednym w każdym bloku. Hierarchia nagłówków jest spójna: jeden <h1> dla całej strony, <h3> dla jej części.

    biuro.php PHP zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </header>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <main>
        <section id="left">
            <h3>NAJTANIEJ...</h3>
        </section>
        <section id="center">
            <h3>TU BYLIŚMY</h3>
        </section>
        <section id="right">
            <h3>SKONTAKTUJ SIĘ</h3>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  12. Krok 12: Tabela najniższych cen z nagłówkami wierszy

    Kryteria:

    R.2.6 W bloku lewym umieszczono tabelę o 2 kolumnach i 3 wierszach. Kolejno z wierszami: Włochy, od 1200 zł; Francja, od 1200 zł; Hiszpania, od 1400 zł; zastosowano znaczniki <table>, <tr>, <td> oraz ich zamknięcia

    ok. 2 min
    Polecenie z arkusza

    Tabela o dwóch kolumnach i trzech wierszach, wypełniona zgodnie z danymi: Włochy, od 1200 zł, Francja, od 1200 zł, Hiszpania, od 1400 zł

    Nazwa kraju to nagłówek wiersza: <th scope="row"> mówi czytnikowi ekranu, że „od 1200 zł” to cena dla Włoch. Klucz wymienia <table>, <tr>, <td> i ich zamknięcia (R.2.6) - wszystkie są, a <th> jest komórką tak samo jak <td>.

    Typowe błędy

    Przeglądarka pogrubia i wyśrodkowuje treść <th> - jeśli chcesz wyglądu jak z obrazu 2, dodaj w CSS th { font-weight: normal; text-align: left; } (krok stylów niżej).

    biuro.php PHP zmienione: 14 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </header>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <main>
        <section id="left">
            <h3>NAJTANIEJ...</h3>
            <table>
                <tr>
                    <th scope="row">Włochy</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Francja</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Hiszpania</th>
                    <td>od 1400 zł</td>
                </tr>
            </table>
        </section>
        <section id="center">
            <h3>TU BYLIŚMY</h3>
        </section>
        <section id="right">
            <h3>SKONTAKTUJ SIĘ</h3>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  13. Krok 13: Kontakt: odnośnik e-mail i telefon w znaczniku address

    Kryteria:

    R.3.2 Na stronie umieszczono odnośnik "napisz do nas" łączący z adresem email (np.:href="mailto:[email protected]")

    ok. 2 min
    Polecenie z arkusza

    Odnośnik do adresu e-mail [email protected] o treści: „napisz do nas”. Paragraf (akapit) o treści „telefon: 555666777”

    • <address> - znacznik na dane kontaktowe właściciela strony; przeglądarka wyświetla go kursywą (w CSS kursywa zostanie zdjęta),
    • href="mailto:..." - kliknięcie otwiera program pocztowy z wpisanym adresatem (R.3.2),
    • telefon w <p>, jak każe arkusz.
    biuro.php PHP zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </header>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <main>
        <section id="left">
            <h3>NAJTANIEJ...</h3>
            <table>
                <tr>
                    <th scope="row">Włochy</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Francja</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Hiszpania</th>
                    <td>od 1400 zł</td>
                </tr>
            </table>
        </section>
        <section id="center">
            <h3>TU BYLIŚMY</h3>
        </section>
        <section id="right">
            <h3>SKONTAKTUJ SIĘ</h3>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  14. Krok 14: Stopka: paragraf z autorem strony

    Kryteria:

    R.2.5 W bloku banera zapisano nagłówek h1: "WITAMY W BIURZE PODRÓŻY" oraz w bloku z danymi nagłówek h3: "ARCHIWUM WYCIECZEK" oraz w blokach lewym, środkowym i prawym przynajmniej jeden nagłówek h3 z: "NAJTANIEJ...", "TU BYLIŚMY", "SKONTAKTUJ SIĘ" oraz przynajmniej jeden paragraf (znacznik <p>)

    ok. 1 min
    Polecenie z arkusza

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

    Na egzaminie numer PESEL, tu w jego miejscu Bartosz Bryniarski. Strona ma teraz <h1>, cztery <h3> i paragrafy (R.2.5).

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </header>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <main>
        <section id="left">
            <h3>NAJTANIEJ...</h3>
            <table>
                <tr>
                    <th scope="row">Włochy</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Francja</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Hiszpania</th>
                    <td>od 1400 zł</td>
                </tr>
            </table>
        </section>
        <section id="center">
            <h3>TU BYLIŚMY</h3>
        </section>
        <section id="right">
            <h3>SKONTAKTUJ SIĘ</h3>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  15. Etap 3: Styl CSS

    Kroki 15-22 · po tym etapie masz 25 z 32 kryteriów (pkt)

    Krok 15: Plik styl4.css: kolory z arkusza w zmiennych

    ok. 2 min

    Arkusz używa trzech kolorów, a brzoskwiniowy rgb(255, 218, 185) wraca dwa razy: w bloku z danymi i pod zdjęciem wskazanym kursorem. Zmienne CSS w :root dają kolorom nazwy - var(--peach) czyta się łatwiej niż trzy liczby, a zmiana odcienia to jedna linia. Klucz sprawdza wartość koloru; przez zmienną dociera ona do elementu tak samo jak wpisana wprost.

    styl4.css CSS nowy plik 
    :root {
    --olive: rgb(107, 142, 35);
    --peach: rgb(255, 218, 185);
    --cream: rgb(255, 239, 213);
}
    Podgląd strony po tym kroku (biuro.php)

  16. Krok 16: Krój Tahoma dla całej strony

    Kryteria:

    R.4.1 Ustawiono domyślny krój czcionki dla całej strony na Tahoma (dla selektora * lub body, lub html, lub kontenera całej strony)

    ok. 1 min
    Polecenie z arkusza

    Domyślne dla całej strony: krój czcionki Tahoma

    Selektor * obejmuje każdy element strony (R.4.1).

    styl4.css CSS zmienione: 3 linie 
    :root {
    --olive: rgb(107, 142, 35);
    --peach: rgb(255, 218, 185);
    --cream: rgb(255, 239, 213);
}
* {
    font-family: Tahoma;
}
    Podgląd strony po tym kroku (biuro.php)

  17. Krok 17: Baner i stopka

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla banera i stopki: kolor tła RGB 107, 142, 35; biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 3 px

    Selektory znaczników header i footer - na stronie jest po jednym, więc identyfikatory nie są potrzebne. Biały tekst daje R.4.3.

    styl4.css CSS zmienione: 6 linii 
    :root {
    --olive: rgb(107, 142, 35);
    --peach: rgb(255, 218, 185);
    --cream: rgb(255, 239, 213);
}
* {
    font-family: Tahoma;
}
header, footer {
    background-color: var(--olive);
    color: white;
    text-align: center;
    padding: 3px;
}
    Podgląd strony po tym kroku (biuro.php)

  18. Krok 18: Blok z danymi

    Kryteria:

    R.4.7 Ustawiono marginesy wewnętrzne (padding) 3px dla banera i stopki oraz bloku z danymi

    ok. 1 min
    Polecenie z arkusza

    Dla bloku z danymi: kolor tła RGB 255, 218, 185; marginesy wewnętrzne 3 px

    padding: 3px banera, stopki i bloku z danymi daje R.4.7.

    styl4.css CSS zmienione: 4 linie 
    :root {
    --olive: rgb(107, 142, 35);
    --peach: rgb(255, 218, 185);
    --cream: rgb(255, 239, 213);
}
* {
    font-family: Tahoma;
}
header, footer {
    background-color: var(--olive);
    color: white;
    text-align: center;
    padding: 3px;
}
#data {
    background-color: var(--peach);
    padding: 3px;
}
    Podgląd strony po tym kroku (biuro.php)

  19. Krok 19: Trzy bloki obok siebie we flexie

    Kryteria: , ,

    R.4.2 Ustawiono kolor tła rgb(107, 142, 35) dla bloków banera i stopki oraz rgb(255, 218, 185) dla bloku z danymi oraz rgb(255, 239, 213) dla bloków lewego, środkowego i prawego

    R.4.4 Ustawiono wysokość bloków lewego, środkowego i prawego 550px

    R.4.5 Ustawiono szerokość bloku lewego i prawego na 27% oraz środkowego na 46%

    ok. 3 min
    Polecenie z arkusza

    Dla bloku lewego i prawego: kolor tła RGB 255, 239, 213; szerokość 27%, wysokość 550 px. Dla bloku środkowego: kolor tła RGB 255, 239, 213; szerokość 46%, wysokość 550 px

    • display: flex na <main> ustawia jego dzieci - trzy bloki - w jednym rzędzie, bez float i bez clear pod spodem,
    • wspólne tło i wysokość w jednej regule, szerokości osobno: 27% + 46% + 27% = 100%.

    Szerokości zostają na blokach: klucz z 2020 roku sprawdza szerokość ustawioną dla bloku (R.4.5), a nie podział kolumn rodzica. Tła wszystkich bloków (R.4.2) i wysokość trzech bloków (R.4.4) są ustawione.

    styl4.css CSS zmienione: 13 linii 
    :root {
    --olive: rgb(107, 142, 35);
    --peach: rgb(255, 218, 185);
    --cream: rgb(255, 239, 213);
}
* {
    font-family: Tahoma;
}
header, footer {
    background-color: var(--olive);
    color: white;
    text-align: center;
    padding: 3px;
}
#data {
    background-color: var(--peach);
    padding: 3px;
}
main {
    display: flex;
}
#left, #center, #right {
    background-color: var(--cream);
    height: 550px;
}
#left, #right {
    width: 27%;
}
#center {
    width: 46%;
}
    Podgląd strony po tym kroku (biuro.php)

  20. Krok 20: Nagłówki trzeciego stopnia

    Kryteria: ,

    R.4.6 Ustawiono wyrównanie tekstu do środka dla banera i stopki oraz znacznika h3

    R.4.8 Ustawiono styl pierwszej litery znacznika h3 (pseudoelement first-letter): zielony kolor czcionki (dowolny odcień)

    ok. 1 min
    Polecenie z arkusza

    Dla znacznika nagłówka trzeciego stopnia: wyrównanie tekstu do środka. Dla pierwszej litery nagłówka trzeciego stopnia (pseudoelement): zielony kolor czcionki

    text-align: center dla h3 (razem z banerem i stopką R.4.6) i pseudoelement ::first-letter - tylko pierwsza litera na zielono (R.4.8).

    styl4.css CSS zmienione: 6 linii 
    :root {
    --olive: rgb(107, 142, 35);
    --peach: rgb(255, 218, 185);
    --cream: rgb(255, 239, 213);
}
* {
    font-family: Tahoma;
}
header, footer {
    background-color: var(--olive);
    color: white;
    text-align: center;
    padding: 3px;
}
#data {
    background-color: var(--peach);
    padding: 3px;
}
main {
    display: flex;
}
#left, #center, #right {
    background-color: var(--cream);
    height: 550px;
}
#left, #right {
    width: 27%;
}
#center {
    width: 46%;
}
h3 {
    text-align: center;
}
h3::first-letter {
    color: green;
}
    Podgląd strony po tym kroku (biuro.php)

  21. Krok 21: Obrazy i tło pod kursorem

    Kryteria: ,

    R.4.9 Ustawiono styl obrazu: wysokość 90px, marginesy wewnętrzne (padding) 7px

    R.4.10 Ustawiono styl obrazu z pseudoklasą hover: kolor tła rgb(255, 218, 185)

    ok. 1 min
    Polecenie z arkusza

    Dla obrazu: wysokość 90 px, marginesy wewnętrzne 7 px. W momencie, gdy kursor znajduje się na obrazie, styl obrazu zmienia się na: kolor tła RGB 255, 218, 185

    Szerokość dobierze przeglądarka z proporcji zdjęcia (R.4.9). Tło z :hover widać w polu padding - tę samą zmienną ma blok z danymi (R.4.10).

    styl4.css CSS zmienione: 7 linii 
    :root {
    --olive: rgb(107, 142, 35);
    --peach: rgb(255, 218, 185);
    --cream: rgb(255, 239, 213);
}
* {
    font-family: Tahoma;
}
header, footer {
    background-color: var(--olive);
    color: white;
    text-align: center;
    padding: 3px;
}
#data {
    background-color: var(--peach);
    padding: 3px;
}
main {
    display: flex;
}
#left, #center, #right {
    background-color: var(--cream);
    height: 550px;
}
#left, #right {
    width: 27%;
}
#center {
    width: 46%;
}
h3 {
    text-align: center;
}
h3::first-letter {
    color: green;
}
img {
    height: 90px;
    padding: 7px;
}
img:hover {
    background-color: var(--peach);
}
    Podgląd strony po tym kroku (biuro.php)

  22. Krok 22: Układ zgodny z obrazem 2

    Kryteria:

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest w pełni zgodny z Obrazem 2 w arkuszu egzaminacyjnym

    ok. 2 min
    Polecenie z arkusza

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

    Dwie reguły wyrównują wygląd do obrazu 2: nagłówki wierszy tabeli bez pogrubienia i kontakt bez kursywy, którą <address> ma domyślnie. Układ jest kompletny: baner, blok z danymi, flex z trzema blokami i stopka pod nimi - ani jednego float, ani jednego clear (R.3.1).

    styl4.css CSS zmienione: 7 linii 
    :root {
    --olive: rgb(107, 142, 35);
    --peach: rgb(255, 218, 185);
    --cream: rgb(255, 239, 213);
}
* {
    font-family: Tahoma;
}
header, footer {
    background-color: var(--olive);
    color: white;
    text-align: center;
    padding: 3px;
}
#data {
    background-color: var(--peach);
    padding: 3px;
}
main {
    display: flex;
}
#left, #center, #right {
    background-color: var(--cream);
    height: 550px;
}
#left, #right {
    width: 27%;
}
#center {
    width: 46%;
}
h3 {
    text-align: center;
}
h3::first-letter {
    color: green;
}
img {
    height: 90px;
    padding: 7px;
}
img:hover {
    background-color: var(--peach);
}
th {
    font-weight: normal;
    text-align: left;
}
address {
    font-style: normal;
}
    Podgląd strony po tym kroku (biuro.php)

  23. Etap 4: Skrypt PHP

    Kroki 23-26 · po tym etapie masz 32 z 32 kryteriów (pkt)

    Krok 23: Połączenie z bazą egzamin4 przez PDO

    Kryteria:

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

    ok. 4 min
    Polecenie z arkusza

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

    Cała logika na górze pliku, przed <!DOCTYPE html> - HTML niżej tylko wypisuje gotowe dane:

    • funkcja e() - skrót do htmlspecialchars, przyda się przy każdym wypisaniu danych z bazy,
    • new PDO(...) - serwer localhost, baza egzamin4 i kodowanie w jednym napisie (DSN), użytkownik root, puste hasło (R.5.1),
    • ERRMODE_EXCEPTION - każdy błąd bazy rzuca wyjątek, który łapie catch,
    • FETCH_ASSOC - wiersze jako tablice z nazwami kolumn ($trip['cel'] zamiast $row[1]).

    Tablice $archive i $photos wypełnią zapytania w kolejnych krokach. Od tego kroku podgląd to wynik prawdziwego uruchomienia w PHP 8.2.

    biuro.php PHP zmienione: 18 linii 
    <?php
function e(?string $text): string
{
    return htmlspecialchars($text ?? '', ENT_QUOTES, 'UTF-8');
}

$archive = [];
$photos = [];
$pdo = null;
try {
    $pdo = new PDO('mysql:host=localhost;dbname=egzamin4;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    $error = 'nie udało się odczytać danych, spróbuj ponownie za chwilę';
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </header>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <main>
        <section id="left">
            <h3>NAJTANIEJ...</h3>
            <table>
                <tr>
                    <th scope="row">Włochy</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Francja</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Hiszpania</th>
                    <td>od 1400 zł</td>
                </tr>
            </table>
        </section>
        <section id="center">
            <h3>TU BYLIŚMY</h3>
        </section>
        <section id="right">
            <h3>SKONTAKTUJ SIĘ</h3>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  24. Krok 24: Skrypt 1: archiwum wycieczek

    Kryteria: ,

    R.5.3 Skrypt 1 wysyła do bazy danych zapytanie 1

    R.5.4 Skrypt 1 wyświetla zwrócone zapytaniem wiersze, według wzoru: „<id>. <cel>, cena: <cena>”, gdzie w znakach < > zapisano pola zwracane zapytaniem. Każdy wiersz wyświetlany w osobnej linii

    ok. 4 min
    Polecenie z arkusza

    Skrypt 1: Wysyła do bazy danych zapytanie 1. Każdy zwrócony zapytaniem wiersz jest wyświetlany w osobnej linii, według wzoru: „<id>. <cel>, cena: <cena>”, gdzie w znakach < > zapisano pola zwracane zapytaniem

    Dwie części w dwóch miejscach pliku:

    • na górze $pdo->query(...)->fetchAll() - zapytanie 1 (R.5.3), trzy wiersze trafiają do tablicy $archive. Zapytanie nie ma danych od użytkownika, więc query wystarczy,
    • w bloku z danymi pętla foreach ($archive as $trip): z zamknięciem endforeach; - ta składnia z dwukropkiem jest czytelniejsza niż klamry, gdy między fragmentami PHP stoi HTML.

    <?= ... ?> to skrót od <?php echo ... ?>. Każda linia według wzoru, zakończona <br> (R.5.4): „5. Francja, Paryz, cena: 1350” i dwie wycieczki do Barcelony.

    biuro.php PHP zmienione: 4 linie 
    <?php
function e(?string $text): string
{
    return htmlspecialchars($text ?? '', ENT_QUOTES, 'UTF-8');
}

$archive = [];
$photos = [];
$pdo = null;
try {
    $pdo = new PDO('mysql:host=localhost;dbname=egzamin4;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
    $archive = $pdo->query('SELECT id, cel, cena FROM wycieczki WHERE dostepna = FALSE;')->fetchAll();
} catch (PDOException $exception) {
    $error = 'nie udało się odczytać danych, spróbuj ponownie za chwilę';
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </header>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
        <?php foreach ($archive as $trip): ?>
            <?= e($trip['id']) ?>. <?= e($trip['cel']) ?>, cena: <?= e($trip['cena']) ?><br>
        <?php endforeach; ?>
    </section>
    <main>
        <section id="left">
            <h3>NAJTANIEJ...</h3>
            <table>
                <tr>
                    <th scope="row">Włochy</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Francja</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Hiszpania</th>
                    <td>od 1400 zł</td>
                </tr>
            </table>
        </section>
        <section id="center">
            <h3>TU BYLIŚMY</h3>
        </section>
        <section id="right">
            <h3>SKONTAKTUJ SIĘ</h3>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  25. Krok 25: Skrypt 2: galeria z zapytania 2

    Kryteria: , ,

    R.5.5 Skrypt 2 wysyła do bazy danych zapytanie 2

    R.5.6 Skrypt 2 wyświetla obrazy na podstawie danych zwróconych zapytaniem, w ten sposób, że pole nazwaPliku jest źródłem obrazu, a pole podpis jest tekstem alternatywnym obrazu

    R.2.7 W bloku środkowym umieszczono przynajmniej jeden obraz z tekstem alternatywnym (w skrypcie lub HTML)

    ok. 3 min
    Polecenie z arkusza

    Skrypt 2: Wysyła do bazy danych zapytanie 2. Dane z każdego zwróconego zapytaniem wiersza są wykorzystane do wyświetlenia kolejnych obrazów, w ten sposób, że pole nazwaPliku jest źródłem obrazu, a pole podpis jest tekstem alternatywnym obrazu

    Zapytanie 2 do tablicy $photos (R.5.5), a w bloku środkowym znacznik <img> zapisany zwykłym HTML-em, z danymi wstawionymi w atrybuty: nazwa pliku w src, podpis w alt (R.5.6, R.2.7). Nie trzeba ukośników przed cudzysłowami jak w echo, a e() zamienia " w danych na &quot;, więc podpis z cudzysłowem nie zamknie atrybutu. Wynik: 9 zdjęć od Wenecji do Barcelony.

    biuro.php PHP zmienione: 4 linie 
    <?php
function e(?string $text): string
{
    return htmlspecialchars($text ?? '', ENT_QUOTES, 'UTF-8');
}

$archive = [];
$photos = [];
$pdo = null;
try {
    $pdo = new PDO('mysql:host=localhost;dbname=egzamin4;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
    $archive = $pdo->query('SELECT id, cel, cena FROM wycieczki WHERE dostepna = FALSE;')->fetchAll();
    $photos = $pdo->query('SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis DESC;')->fetchAll();
} catch (PDOException $exception) {
    $error = 'nie udało się odczytać danych, spróbuj ponownie za chwilę';
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </header>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
        <?php foreach ($archive as $trip): ?>
            <?= e($trip['id']) ?>. <?= e($trip['cel']) ?>, cena: <?= e($trip['cena']) ?><br>
        <?php endforeach; ?>
    </section>
    <main>
        <section id="left">
            <h3>NAJTANIEJ...</h3>
            <table>
                <tr>
                    <th scope="row">Włochy</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Francja</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Hiszpania</th>
                    <td>od 1400 zł</td>
                </tr>
            </table>
        </section>
        <section id="center">
            <h3>TU BYLIŚMY</h3>
            <?php foreach ($photos as $photo): ?>
                <img src="<?= e($photo['nazwaPliku']) ?>" alt="<?= e($photo['podpis']) ?>">
            <?php endforeach; ?>
        </section>
        <section id="right">
            <h3>SKONTAKTUJ SIĘ</h3>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  26. Krok 26: Zamknięcie połączenia i komunikat o błędzie

    Kryteria:

    R.5.2 Po wykonaniu operacji na bazie zastosowano funkcję zamknięcia bazy

    ok. 3 min
    Polecenie z arkusza

    Na końcu działania skrypt zamyka połączenie z serwerem

    PDO nie ma funkcji close - połączenie zamyka się, gdy znika ostatnie odwołanie do obiektu. Dlatego w bloku finally stoi $pdo = null. finally wykonuje się po try zawsze - po udanym odczycie i po wyjątku - więc zamknięcie jest ostatnią operacją na bazie w każdej gałęzi (R.5.2). Dane są już w tablicach, więc pętle niżej działają bez połączenia.

    Gdy odczyt się nie uda, catch zapisuje komunikat w $error, a blok z danymi go pokazuje. Treść wyjątku zostaje na serwerze: komunikat bazy zdradzałby nazwy tabel i kolumn. Sprawdzone na prawdziwym PHP: przy złym haśle strona wyświetla komunikat, cennik, kontakt i stopkę, a puste pętle niczego nie psują.

    biuro.php PHP zmienione: 5 linii 
    <?php
function e(?string $text): string
{
    return htmlspecialchars($text ?? '', ENT_QUOTES, 'UTF-8');
}

$archive = [];
$photos = [];
$pdo = null;
try {
    $pdo = new PDO('mysql:host=localhost;dbname=egzamin4;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
    $archive = $pdo->query('SELECT id, cel, cena FROM wycieczki WHERE dostepna = FALSE;')->fetchAll();
    $photos = $pdo->query('SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis DESC;')->fetchAll();
} catch (PDOException $exception) {
    $error = 'nie udało się odczytać danych, spróbuj ponownie za chwilę';
} finally {
    $pdo = null;
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </header>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
        <?php if (isset($error)): ?>
            <p class="error"><?= e($error) ?></p>
        <?php endif; ?>
        <?php foreach ($archive as $trip): ?>
            <?= e($trip['id']) ?>. <?= e($trip['cel']) ?>, cena: <?= e($trip['cena']) ?><br>
        <?php endforeach; ?>
    </section>
    <main>
        <section id="left">
            <h3>NAJTANIEJ...</h3>
            <table>
                <tr>
                    <th scope="row">Włochy</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Francja</th>
                    <td>od 1200 zł</td>
                </tr>
                <tr>
                    <th scope="row">Hiszpania</th>
                    <td>od 1400 zł</td>
                </tr>
            </table>
        </section>
        <section id="center">
            <h3>TU BYLIŚMY</h3>
            <?php foreach ($photos as $photo): ?>
                <img src="<?= e($photo['nazwaPliku']) ?>" alt="<?= e($photo['podpis']) ?>">
            <?php endforeach; ?>
        </section>
        <section id="right">
            <h3>SKONTAKTUJ SIĘ</h3>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
    </main>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  27. Etap 5: Porównanie z wersją podstawową

    Krok 27 · po tym etapie masz 32 z 32 kryteriów (pkt)

    Krok 27: Co jest inaczej i którą wersję wybrać na egzaminie

    ok. 3 min

    Obie wersje dają komplet 32 punktów. Różnice:

    wersja podstawowawersja nowoczesna
    trzy blokifloat: left, clear przy stopce<main> z display: flex
    baner i stopka<section id="banner">, <footer><header>, <footer>
    kolorywpisane w każdej regulezmienne --olive, --peach, --cream
    tabela censame <td><th scope="row"> przy kraju
    kontaktodnośnik i akapitw znaczniku <address>
    bibliotekamysqli (tabela 1 arkusza)PDO z wyjątkami
    gdzie jest skryptpołączenie na górze, zapytania w blokachwszystko na górze, w HTML-u tylko foreach i <?= ?>
    znacznik obrazuskładany w echo z \"zwykły HTML z danymi w atrybutach
    wypisywanie danychhtmlspecialchars dopisane na końcue() od pierwszej linii
    zamknięcie bazymysqli_close po galerii$pdo = null w finally

    Na egzaminie wersja podstawowa trzyma się funkcji z tabeli 1 i łatwiej ją napisać bez dokumentacji. Nowoczesna pokazuje komunikat zamiast ostrzeżeń, gdy baza nie odpowiada - a klucz przyjmuje obie.

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

  28. Etap 6: Oddanie pracy

    Krok 28 · po tym etapie masz 32 z 32 kryteriów (pkt)

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

    ok. 5 min
    Polecenie z arkusza

    Po zakończeniu pracy utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Nazwij plik przeglądarka.txt i zapisz go w folderze z numerem PESEL. Nagraj płytę z rezultatami pracy.

    W przeglądarka.txt nazwa przeglądarki, w której sprawdzana była strona. W folderze z numerem zdającego: biuro.php, import.png, kw1.jpg - kw4.jpg, kwerendy.txt, styl4.css, przeglądarka.txt i zdjęcia 1.jpg - 9.jpg. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem PESEL.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

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

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.

Potwierdzenie

Informacja