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

Rozwiązanie krok po kroku: Biuro podróży z galerią zdjęć (Nowoczesny kod (flex, PDO))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza egzamin3 z czterema zapytaniami oraz strona wycieczki.php z banerem, kontaktem, galerią, promocjami, listą wycieczek i stopką - 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 blok z danymi nie potrzebuje clear,
  • semantyczne znaczniki: baner w <header>, stopka w <footer>, kontakt w <address>,
  • zmienne CSS dla trzech kolorów z arkusza (brązowy wraca w bloku z danymi i pod zdjęciem wskazanym kursorem),
  • PHP na PDO na górze pliku wycieczki.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 egzamin3.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 egzamin3.zip

    ok. 2 min
    Polecenie z arkusza

    Na pulpicie znajdziesz archiwum ZIP o nazwie egzamin3.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 egzamin3.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 egzamin3

    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 egzamin3

    Start przy Apache i MySQL, potem http://localhost/phpmyadmin, Nowa, nazwa egzamin3.

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

    Kryteria:

    R.1.1 Wykonano import tabel do bazy danych egzamin3 , 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 egzamin3 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 egzamin3, 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: dostępne wycieczki

    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, dataWyjazdu, cel i cena z tabeli wycieczki jedynie dla dostępnych wycieczek. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT id, dataWyjazdu, cel, cena FROM wycieczki WHERE dostepna = TRUE; (lub = 1) oraz wynik działania zapytania udokumentowano zrzutem, na którym widocznych jest dokładnie 6 rekordów dla id równego 1, 2, 3, 4, 6, 9; widoczne jedynie pola id, dataWyjazdu, cel i cena

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 1: wybierające jedynie pola id, dataWyjazdu, cel i cena z tabeli wycieczki dla dostępnych wycieczek (pole dostepna)

    Cztery kolumny w kolejności, w której skrypt je wypisze, i warunek dostepna = TRUE (w MariaDB TRUE to 1). Wynik: 6 wierszy o id 1, 2, 3, 4, 6 i 9. 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, dataWyjazdu, cel, cena
FROM wycieczki
WHERE dostepna = TRUE;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: zdjęcia posortowane po podpisie

    Kryteria:

    R.1.4 Utworzono zapytanie 2 wybierające jedynie pola nazwaPliku i podpis z tabeli zdjecia sortując je rosnąco alfabetycznie według pola podpis. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis; (opcjonalnie ASC) oraz wynik działania zapytania udokumentowano zrzutem, na którym widocznych jest dokładnie 9 rekordów posortowanych rosnąco alfabetycznie według 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 rosnąco alfabetycznie według kolumny podpis

    ORDER BY podpis - domyślnie rosnąco. Wynik: 9 wierszy, od Barcelony do Wenecji. Zrzut: kw2.jpg. To zapytanie zasili galerię.

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

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

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

    Kryteria:

    R.1.5 Utworzono zapytanie 3 wykorzystujące relację i wybierające jedynie pola nazwaPliku i cel związany ze zdjęciem z tabel zdjecia i wycieczki , dla wycieczek, których cena jest wyższa niż 1000 zł. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwaPliku, cel FROM zdjecia JOIN wycieczki ON zdjecia.id = wycieczki.zdjecia_id WHERE cena > 1000; możliwe też INNER JOIN lub SELECT nazwaPliku, cel FROM zdjecia, wycieczki WHERE zdjecia.id = wycieczki.zdjecia_id AND cena > 1000; oraz wynik działania zapytania udokumentowano zrzutem, na którym widocznych jest dokładnie 8 rekordów, jedynie pola nazwaPliku i cel z danymi: dwukrotnie Włochy, Wenecja; trzykrotnie Francja, Paryz; trzykrotnie Hiszpania, Barcelona

    ok. 3 min
    Polecenie z arkusza

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

    JOIN ... ON zdjecia.id = wycieczki.zdjecia_id łączy każdą wycieczkę z jej zdjęciem, WHERE cena > 1000 zostawia droższe niż 1000 zł. Wynik: 8 wierszy - dwa razy Wenecja, trzy razy Paryż i trzy razy Barcelona. Zrzut: kw3.jpg.

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

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

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

  7. Krok 7: Zapytanie 4: kolumna dataPrzyjazdu

    Kryteria:

    R.1.6 Utworzono zapytanie 4 dodające do tabeli wycieczki pole dataPrzyjazdu typu date, pole powinno być wstawione po polu dataWyjazdu. W pliku z kwerendami lub na zrzucie istnieje zapis np.: ALTER TABLE wycieczki ADD dataPrzyjazdu DATE AFTER dataWyjazdu; lub ADD COLUMN oraz wynik działania zapytania udokumentowano zrzutem wskazującym na dodanie kolumny dataPrzyjazdu z typem DATE po polu dataWyjazdu

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: dodające do tabeli wycieczki pole dataPrzyjazdu typu data, pole powinno być wstawione po polu dataWyjazdu

    ALTER TABLE ... ADD dataPrzyjazdu DATE AFTER dataWyjazdu - nowa kolumna typu data zaraz po dacie wyjazdu. Karta Struktura pokazuje ją na czwartym miejscu; jej zrzut to kw4.jpg.

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

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

-- Zapytanie 3
SELECT nazwaPliku, cel
FROM zdjecia
JOIN wycieczki ON zdjecia.id = wycieczki.zdjecia_id
WHERE cena > 1000;

-- Zapytanie 4
ALTER TABLE wycieczki
ADD dataPrzyjazdu DATE AFTER 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 wycieczki.php i kodowanie znaków

    Kryteria: ,

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

    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 wycieczki.php. Zastosowany właściwy standard kodowania polskich znaków

    Szkielet HTML5 w pliku wycieczki.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).

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

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

    Kryteria: ,

    R.2.3 Nadano tytuł strony: "Wycieczki i urlopy”

    R.3.3 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl3.css , formatowanie pochodzi jedynie z tego arkusza Uwaga: kryterium to nie jest spełnione również, gdy zdający źle przypisał co najmniej jeden selektor do bloku (np. kropka zamiast #)

    ok. 1 min
    Polecenie z arkusza

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

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

    wycieczki.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 i urlopy</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (wycieczki.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 trzy bloki obok siebie: lewy, środkowy i prawy, poniżej blok z danymi, poniżej stopka. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

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

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

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

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

    wycieczki.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 i urlopy</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <main>
        <section id="left">
        </section>
        <section id="center">
        </section>
        <section id="right">
        </section>
    </main>
    <section id="data">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wycieczki.php)

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

    ok. 2 min
    Polecenie z arkusza

    Zawartość lewego bloku: Nagłówek drugiego stopnia o treści: „KONTAKT”. Zawartość środkowego bloku: Nagłówek drugiego stopnia o treści: „GALERIA”. Zawartość prawego bloku: Nagłówek drugiego stopnia o treści: „PROMOCJE”. Zawartość bloku z danymi: Nagłówek drugiego stopnia o treści „LISTA WYCIECZEK”

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

    wycieczki.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 i urlopy</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <main>
        <section id="left">
            <h2>KONTAKT</h2>
        </section>
        <section id="center">
            <h2>GALERIA</h2>
        </section>
        <section id="right">
            <h2>PROMOCJE</h2>
        </section>
    </main>
    <section id="data">
        <h2>LISTA WYCIECZEK</h2>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wycieczki.php)

  12. Krok 12: 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 (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.
    wycieczki.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 i urlopy</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <main>
        <section id="left">
            <h2>KONTAKT</h2>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
        <section id="center">
            <h2>GALERIA</h2>
        </section>
        <section id="right">
            <h2>PROMOCJE</h2>
        </section>
    </main>
    <section id="data">
        <h2>LISTA WYCIECZEK</h2>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wycieczki.php)

  13. Krok 13: Tabela promocji

    Kryteria:

    R.2.6 W bloku prawym umieszczono tabelę o 3 kolumnach i 2 wierszach. Kolejno pierwszy wiersz: Jesień, Grupa 4+, Grupa 10+; drugi wiersz: 5%, 10%, 15%; zastosowano znaczniki <table>, <tr>, <td> oraz ich zamknięcia

    ok. 2 min
    Polecenie z arkusza

    Tabela o trzech kolumnach i dwóch wierszach wypełniona danymi: Jesień, Grupa 4+, Grupa 10+, 5%, 10%, 15%

    Dwa wiersze <tr> po trzy komórki <td>. Pierwszy wiersz wygląda na nagłówek tabeli i semantycznie pasowałby do niego <th>, ale klucz wymienia wprost <table>, <tr>, <td> (R.2.6) - przy tak sformułowanym kryterium bezpieczniej trzymać się komórek <td>.

    wycieczki.php PHP zmienione: 12 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wycieczki i urlopy</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <main>
        <section id="left">
            <h2>KONTAKT</h2>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
        <section id="center">
            <h2>GALERIA</h2>
        </section>
        <section id="right">
            <h2>PROMOCJE</h2>
            <table>
                <tr>
                    <td>Jesień</td>
                    <td>Grupa 4+</td>
                    <td>Grupa 10+</td>
                </tr>
                <tr>
                    <td>5%</td>
                    <td>10%</td>
                    <td>15%</td>
                </tr>
            </table>
        </section>
    </main>
    <section id="data">
        <h2>LISTA WYCIECZEK</h2>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wycieczki.php)

  14. Krok 14: Stopka: paragraf z autorem strony

    Kryteria:

    R.2.5 W bloku banera zapisano nagłówek h1: "BIURO PODRÓŻY" oraz w blokach lewym, środkowym i prawym nagłówki h2: "KONTAKT", "GALERIA", "PROMOCJE" oraz w bloku z danymi nagłówek h2: "LISTA WYCIECZEK" 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 <h2> i paragrafy (R.2.5).

    wycieczki.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 i urlopy</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <main>
        <section id="left">
            <h2>KONTAKT</h2>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
        <section id="center">
            <h2>GALERIA</h2>
        </section>
        <section id="right">
            <h2>PROMOCJE</h2>
            <table>
                <tr>
                    <td>Jesień</td>
                    <td>Grupa 4+</td>
                    <td>Grupa 10+</td>
                </tr>
                <tr>
                    <td>5%</td>
                    <td>10%</td>
                    <td>15%</td>
                </tr>
            </table>
        </section>
    </main>
    <section id="data">
        <h2>LISTA WYCIECZEK</h2>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wycieczki.php)

  15. Etap 3: Styl CSS

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

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

    ok. 2 min

    Arkusz używa trzech kolorów, a brązowy rgb(210, 180, 140) wraca dwa razy: w bloku z danymi i pod zdjęciem wskazanym kursorem. Zmienne CSS w :root dają kolorom nazwy - var(--brown) 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.

    styl3.css CSS nowy plik 
    :root {
    --red: rgb(205, 92, 92);
    --sand: rgb(250, 235, 215);
    --brown: rgb(210, 180, 140);
}
    Podgląd strony po tym kroku (wycieczki.php)

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

    Kryteria:

    R.4.1 Ustawiono domyślny krój czcionki dla całej strony na Verdana (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 Verdana

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

    styl3.css CSS zmienione: 3 linie 
    :root {
    --red: rgb(205, 92, 92);
    --sand: rgb(250, 235, 215);
    --brown: rgb(210, 180, 140);
}
* {
    font-family: Verdana;
}
    Podgląd strony po tym kroku (wycieczki.php)

  17. Krok 17: Baner i stopka

    Kryteria:

    R.4.7 Ustawiono marginesy wewnętrzne (padding) dla banera i stopki 5px

    ok. 1 min
    Polecenie z arkusza

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

    Selektory znaczników header i footer - na stronie jest po jednym, więc identyfikatory nie są potrzebne. padding: 5px daje R.4.7.

    styl3.css CSS zmienione: 6 linii 
    :root {
    --red: rgb(205, 92, 92);
    --sand: rgb(250, 235, 215);
    --brown: rgb(210, 180, 140);
}
* {
    font-family: Verdana;
}
header, footer {
    background-color: var(--red);
    color: white;
    text-align: center;
    padding: 5px;
}
    Podgląd strony po tym kroku (wycieczki.php)

  18. Krok 18: Trzy bloki obok siebie we flexie

    Kryteria: ,

    R.4.4 Ustawiono wysokość bloku lewego, środkowego i prawego 500px

    R.4.5 Ustawiono szerokość bloku lewego i prawego 25% oraz środkowego 50%

    ok. 3 min
    Polecenie z arkusza

    Dla bloku lewego i prawego: kolor tła RGB 250, 235, 215; szerokość 25%, wysokość 500 px. Dla bloku środkowego: kolor tła RGB 250, 235, 215; szerokość 50%, wysokość 500 px

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

    Szerokości zostają na blokach: klucz z 2020 roku sprawdza szerokość ustawioną dla bloku (R.4.5), a nie podział kolumn rodzica. Wysokość trzech bloków daje R.4.4.

    styl3.css CSS zmienione: 13 linii 
    :root {
    --red: rgb(205, 92, 92);
    --sand: rgb(250, 235, 215);
    --brown: rgb(210, 180, 140);
}
* {
    font-family: Verdana;
}
header, footer {
    background-color: var(--red);
    color: white;
    text-align: center;
    padding: 5px;
}
main {
    display: flex;
}
#left, #center, #right {
    background-color: var(--sand);
    height: 500px;
}
#left, #right {
    width: 25%;
}
#center {
    width: 50%;
}
    Podgląd strony po tym kroku (wycieczki.php)

  19. Krok 19: Blok z danymi

    Kryteria: ,

    R.4.2 Ustawiono kolor tła rgb(205, 92, 92) dla bloków banera i stopki oraz rgb(250, 235, 215) dla bloków lewego, środkowego i prawego oraz rgb(210, 180, 140) dla bloku z danymi

    R.4.3 Ustawiono biały kolor czcionki dla banera, stopki i bloku z danymi

    ok. 1 min
    Polecenie z arkusza

    Dla bloku z danymi: kolor tła RGB 210, 180, 140; biały kolor czcionki

    Blok z danymi stoi pod <main> bez żadnego clear - flex, inaczej niż pływające bloki, ma swoją wysokość. Tła wszystkich bloków (R.4.2) i biały tekst w banerze, stopce i bloku z danymi (R.4.3) są ustawione.

    styl3.css CSS zmienione: 4 linie 
    :root {
    --red: rgb(205, 92, 92);
    --sand: rgb(250, 235, 215);
    --brown: rgb(210, 180, 140);
}
* {
    font-family: Verdana;
}
header, footer {
    background-color: var(--red);
    color: white;
    text-align: center;
    padding: 5px;
}
main {
    display: flex;
}
#left, #center, #right {
    background-color: var(--sand);
    height: 500px;
}
#left, #right {
    width: 25%;
}
#center {
    width: 50%;
}
#data {
    background-color: var(--brown);
    color: white;
}
    Podgląd strony po tym kroku (wycieczki.php)

  20. Krok 20: Nagłówki drugiego stopnia

    Kryteria: ,

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

    R.4.8 Ustawiono styl pierwszej litery znacznika h2 (pseudoelement first-letter): rozmiar czcionki 150%

    ok. 1 min
    Polecenie z arkusza

    Dla znacznika nagłówka drugiego stopnia: wyrównanie tekstu do środka. Dla pierwszej litery nagłówka drugiego stopnia (pseudoelement): rozmiar czcionki 150%

    text-align: center dla h2 (razem z banerem i stopką R.4.6) i pseudoelement ::first-letter - pierwsza litera o połowę większa od reszty nagłówka (R.4.8).

    styl3.css CSS zmienione: 6 linii 
    :root {
    --red: rgb(205, 92, 92);
    --sand: rgb(250, 235, 215);
    --brown: rgb(210, 180, 140);
}
* {
    font-family: Verdana;
}
header, footer {
    background-color: var(--red);
    color: white;
    text-align: center;
    padding: 5px;
}
main {
    display: flex;
}
#left, #center, #right {
    background-color: var(--sand);
    height: 500px;
}
#left, #right {
    width: 25%;
}
#center {
    width: 50%;
}
#data {
    background-color: var(--brown);
    color: white;
}
h2 {
    text-align: center;
}
h2::first-letter {
    font-size: 150%;
}
    Podgląd strony po tym kroku (wycieczki.php)

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

    Kryteria: ,

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

    R.4.10 Ustawiono styl obrazu z pseudoklasą hover: kolor tła rgb(210, 180, 140)

    ok. 1 min
    Polecenie z arkusza

    Dla obrazu: wysokość 100 px, marginesy wewnętrzne 7 px. W momencie, gdy kursor znajduje się na obrazie, styl obrazu zmienia się na: kolor tła RGB 210, 180, 140

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

    styl3.css CSS zmienione: 7 linii 
    :root {
    --red: rgb(205, 92, 92);
    --sand: rgb(250, 235, 215);
    --brown: rgb(210, 180, 140);
}
* {
    font-family: Verdana;
}
header, footer {
    background-color: var(--red);
    color: white;
    text-align: center;
    padding: 5px;
}
main {
    display: flex;
}
#left, #center, #right {
    background-color: var(--sand);
    height: 500px;
}
#left, #right {
    width: 25%;
}
#center {
    width: 50%;
}
#data {
    background-color: var(--brown);
    color: white;
}
h2 {
    text-align: center;
}
h2::first-letter {
    font-size: 150%;
}
img {
    height: 100px;
    padding: 7px;
}
img:hover {
    background-color: var(--brown);
}
    Podgląd strony po tym kroku (wycieczki.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

    Kontakt bez kursywy, którą <address> ma domyślnie - tak jak na obrazie 2. Układ jest kompletny: baner, flex z trzema blokami, blok z danymi i stopka - ani jednego float, ani jednego clear (R.3.1).

    styl3.css CSS zmienione: 3 linie 
    :root {
    --red: rgb(205, 92, 92);
    --sand: rgb(250, 235, 215);
    --brown: rgb(210, 180, 140);
}
* {
    font-family: Verdana;
}
header, footer {
    background-color: var(--red);
    color: white;
    text-align: center;
    padding: 5px;
}
main {
    display: flex;
}
#left, #center, #right {
    background-color: var(--sand);
    height: 500px;
}
#left, #right {
    width: 25%;
}
#center {
    width: 50%;
}
#data {
    background-color: var(--brown);
    color: white;
}
h2 {
    text-align: center;
}
h2::first-letter {
    font-size: 150%;
}
img {
    height: 100px;
    padding: 7px;
}
img:hover {
    background-color: var(--brown);
}
address {
    font-style: normal;
}
    Podgląd strony po tym kroku (wycieczki.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ą egzamin3 przez PDO

    Kryteria:

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

    ok. 4 min
    Polecenie z arkusza

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

    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 egzamin3 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[2]).

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

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

$photos = [];
$trips = [];
$pdo = null;
try {
    $pdo = new PDO('mysql:host=localhost;dbname=egzamin3;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 i urlopy</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <main>
        <section id="left">
            <h2>KONTAKT</h2>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
        <section id="center">
            <h2>GALERIA</h2>
        </section>
        <section id="right">
            <h2>PROMOCJE</h2>
            <table>
                <tr>
                    <td>Jesień</td>
                    <td>Grupa 4+</td>
                    <td>Grupa 10+</td>
                </tr>
                <tr>
                    <td>5%</td>
                    <td>10%</td>
                    <td>15%</td>
                </tr>
            </table>
        </section>
    </main>
    <section id="data">
        <h2>LISTA WYCIECZEK</h2>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wycieczki.php)

  24. Krok 24: Skrypt 1: galeria z zapytania 2

    Kryteria: , ,

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

    R.5.4 Skrypt 1 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. 4 min
    Polecenie z arkusza

    Skrypt 1: 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

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

    • na górze $pdo->query(...)->fetchAll() - zapytanie 2 (R.5.3), dziewięć wierszy trafia do tablicy $photos. Zapytanie nie ma danych od użytkownika, więc query wystarczy,
    • w bloku środkowym pętla foreach ($photos as $photo): z zamknięciem endforeach;, a w niej znacznik <img> zapisany zwykłym HTML-em: nazwa pliku w src, podpis w alt (R.5.4, R.2.7).

    <?= ... ?> to skrót od <?php echo ... ?>. 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 Barcelony do Wenecji.

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

$photos = [];
$trips = [];
$pdo = null;
try {
    $pdo = new PDO('mysql:host=localhost;dbname=egzamin3;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
    $photos = $pdo->query('SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;')->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 i urlopy</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <main>
        <section id="left">
            <h2>KONTAKT</h2>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
        <section id="center">
            <h2>GALERIA</h2>
            <?php foreach ($photos as $photo): ?>
                <img src="<?= e($photo['nazwaPliku']) ?>" alt="<?= e($photo['podpis']) ?>">
            <?php endforeach; ?>
        </section>
        <section id="right">
            <h2>PROMOCJE</h2>
            <table>
                <tr>
                    <td>Jesień</td>
                    <td>Grupa 4+</td>
                    <td>Grupa 10+</td>
                </tr>
                <tr>
                    <td>5%</td>
                    <td>10%</td>
                    <td>15%</td>
                </tr>
            </table>
        </section>
    </main>
    <section id="data">
        <h2>LISTA WYCIECZEK</h2>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wycieczki.php)

  25. Krok 25: Skrypt 2: lista dostępnych wycieczek

    Kryteria: ,

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

    R.5.6 Skrypt 2 wyświetla zwrócone zapytaniem wiersze w osobnej linii, według wzoru: „<id>. <dataWyjazdu>, <cel>, cena: <cena>”, gdzie w znakach < > zapisano pola zwracane zapytaniem

    ok. 3 min
    Polecenie z arkusza

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

    Zapytanie 1 do tablicy $trips (R.5.5), a w bloku z danymi pętla, która wypisuje jedną linię według wzoru i kończy ją <br> (R.5.6). Klucze tablicy to nazwy kolumn z zapytania, więc wzór czyta się wprost: id, data wyjazdu, cel, cena. Wynik: sześć linii, od „1. 2019-09-08, Wlochy, Wenecja, cena: 1200”.

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

$photos = [];
$trips = [];
$pdo = null;
try {
    $pdo = new PDO('mysql:host=localhost;dbname=egzamin3;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
    $photos = $pdo->query('SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;')->fetchAll();
    $trips = $pdo->query('SELECT id, dataWyjazdu, cel, cena FROM wycieczki WHERE dostepna = TRUE;')->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 i urlopy</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <main>
        <section id="left">
            <h2>KONTAKT</h2>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
        <section id="center">
            <h2>GALERIA</h2>
            <?php foreach ($photos as $photo): ?>
                <img src="<?= e($photo['nazwaPliku']) ?>" alt="<?= e($photo['podpis']) ?>">
            <?php endforeach; ?>
        </section>
        <section id="right">
            <h2>PROMOCJE</h2>
            <table>
                <tr>
                    <td>Jesień</td>
                    <td>Grupa 4+</td>
                    <td>Grupa 10+</td>
                </tr>
                <tr>
                    <td>5%</td>
                    <td>10%</td>
                    <td>15%</td>
                </tr>
            </table>
        </section>
    </main>
    <section id="data">
        <h2>LISTA WYCIECZEK</h2>
        <?php foreach ($trips as $trip): ?>
            <?= e($trip['id']) ?>. <?= e($trip['dataWyjazdu']) ?>, <?= e($trip['cel']) ?>, cena: <?= e($trip['cena']) ?><br>
        <?php endforeach; ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wycieczki.php)

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

    Kryteria:

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

    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, kontakt, promocje i stopkę.

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

$photos = [];
$trips = [];
$pdo = null;
try {
    $pdo = new PDO('mysql:host=localhost;dbname=egzamin3;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
    $photos = $pdo->query('SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;')->fetchAll();
    $trips = $pdo->query('SELECT id, dataWyjazdu, cel, cena FROM wycieczki WHERE dostepna = TRUE;')->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 i urlopy</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <main>
        <section id="left">
            <h2>KONTAKT</h2>
            <address>
                <a href="mailto:[email protected]">napisz do nas</a>
                <p>telefon: 555666777</p>
            </address>
        </section>
        <section id="center">
            <h2>GALERIA</h2>
            <?php foreach ($photos as $photo): ?>
                <img src="<?= e($photo['nazwaPliku']) ?>" alt="<?= e($photo['podpis']) ?>">
            <?php endforeach; ?>
        </section>
        <section id="right">
            <h2>PROMOCJE</h2>
            <table>
                <tr>
                    <td>Jesień</td>
                    <td>Grupa 4+</td>
                    <td>Grupa 10+</td>
                </tr>
                <tr>
                    <td>5%</td>
                    <td>10%</td>
                    <td>15%</td>
                </tr>
            </table>
        </section>
    </main>
    <section id="data">
        <h2>LISTA WYCIECZEK</h2>
        <?php if (isset($error)): ?>
            <p class="error"><?= e($error) ?></p>
        <?php endif; ?>
        <?php foreach ($trips as $trip): ?>
            <?= e($trip['id']) ?>. <?= e($trip['dataWyjazdu']) ?>, <?= e($trip['cel']) ?>, cena: <?= e($trip['cena']) ?><br>
        <?php endforeach; ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (wycieczki.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 bloku z danymi<main> z display: flex
    baner i stopka<section id="banner">, <footer><header>, <footer>
    kolorywpisane w każdej regulezmienne --red, --sand, --brown
    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 liście$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: import.png, kw1.jpg - kw4.jpg, kwerendy.txt, styl3.css, wycieczki.php, 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