Przejdź do głównej treści
INF.03-06-24.01-SGStyczeń 2024 · 34 kroki · ok. 58 min · 34 kryteria z klucza

Rozwiązanie krok po kroku: Aplikacja biura podróży (Wersja podstawowa)

Rozwiązanie buduje stronę biura podróży: baza podroze i cztery zapytania - sortowanie po podpisie, filtr po polu logicznym (wycieczki niedostępne), złączenie dwóch tabel (JOIN) i usunięcie tabeli (DROP TABLE), potem strona biuro.php z banerem, trzema blokami obok siebie (promocje, galeria, kontakt), blokiem z listą dawnych wyjazdów i stopką oraz style w styl9.css. Dwa skrypty PHP: pierwszy buduje z bazy galerię dziewięciu zdjęć z dymkami, drugi wypisuje wyjazdy w liście numerowanej cyframi rzymskimi.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: trzy bloki na siatce CSS, kolory w zmiennych, dane pobierane przez PDO na początku pliku, a w treści strony tylko pętle wyświetlające - obie wersje są zgodne z kluczem.

Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypty są najpierw pisane najprościej (mysqli_query, mysqli_fetch_row), a na końcu zostają przerobione na wersję z prawdziwych projektów.

Baza i zdjęcia pochodzą z prawdziwego archiwum materialy6 (załącznik do arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP. Podgląd strony to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2; najedź na zdjęcie w galerii, a pojawi się dymek z nazwą miasta, jak na obrazie 2.

Jak liczą się punkty. Klucz ma 34 kryteria (R.1.1 - R.5.7), 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 podroze

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Utwórz bazę danych o nazwie podroze.

    Rozpakuj materialy6.7z z pulpitu (hasło $poDrozE&!) do folderu z numerem zdającego: egzamin.sql i zdjęcia 1.jpg - 9.jpg. W phpMyAdmin: Nowa, nazwa podroze.

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

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Do bazy podroze zaimportuj tabele z pliku egzamin.sql z rozpakowanego archiwum.

    Import → egzamin.sql. Plik ma kilka tabel; w zadaniu potrzebne są dwie z obrazu 1: zdjecia (nazwa pliku i podpis) i wycieczki (cel, data, cena, pole dostepna oraz zdjecia_id - klucz obcy wskazujący zdjęcie celu).

  3. Krok 3: Zrzut ekranu import.png

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG pod nazwą import. Zrzut powinien obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.

    Print Screen i zapis jako import.png. Zrzuty zapytań mają być w JPEG (kw1.jpg - kw4.jpg) i zawierać treść zapytania.

  4. Krok 4: Zapytanie 1: zdjęcia według podpisu

    Kryteria: ,

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

    R.1.3 Wykonano zapytanie 1 wybierające jedynie pola nazwaPliku i podpis z tabeli zdjecia sortując je rosnąco według kolumny 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 udokumentowano zrzutem, na którym widocznych jest dokładnie 9 rekordów dla kolejnych nazw plików 8, 3, 5, 1, 9, 7, 6, 4, 2, jedynie pola nazwaPliku i podpis

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 1: wybierające jedynie pola nazwaPliku i podpis z tabeli zdjecia sortując je rosnąco według kolumny podpis.

    • SELECT nazwaPliku, podpis FROM zdjecia - dwie kolumny,
    • ORDER BY podpis - rosnąco, czyli alfabetycznie; ASC jest domyślne i można je pominąć.

    Wynik: 9 zdjęć w kolejności plików 8, 3, 5, 1, 9, 7, 6, 4, 2 (od Barcelony do Wenecji), jak w kluczu. Zapytanie do kwerendy.txt, zrzut kw1.jpg. To zapytanie wyśle Skrypt 1 - galeria będzie w tej kolejności.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: wycieczki niedostępne

    Kryteria:

    R.1.4 Wykonano zapytanie 2 wybierające jedynie pola cel i dataWyjazdu z tabeli wycieczki dla wycieczek, które nie są dostępne. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT cel, dataWyjazdu FROM wycieczki WHERE dostepna = FALSE; (lub =0) oraz wynik działania udokumentowano zrzutem, na którym widoczne są dokładnie 3 rekordy: Francja, Paryz, 2019-07-14; Hiszpania, Barcelona 2019-07-14; Hiszpania, Barcelona 2019-08-14;

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 2: wybierające jedynie pola cel i dataWyjazdu z tabeli wycieczki dla wycieczek, które nie są dostępne.

    • WHERE dostepna = 0 - pole logiczne w MariaDB przechowuje TRUE jako 1, a FALSE jako 0; równoważnie dostepna = FALSE.

    Wynik: 3 wycieczki - Paryż 2019-07-14 oraz Barcelona 2019-07-14 i 2019-08-14. Zrzut kw2.jpg. To zapytanie wyśle Skrypt 2.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;

-- Zapytanie 2
SELECT cel, dataWyjazdu FROM wycieczki WHERE dostepna = 0;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: drogie wycieczki z podpisem zdjęcia

    Kryteria:

    R.1.5 Wykonano zapytanie 3 wybierające jedynie pola cel i cena z tabeli wycieczki oraz odpowiadające im pole podpis z tabeli zdjecia , dla wycieczek, których cena jest wyższa niż 1300 zł. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT cel, cena, podpis FROM zdjecia JOIN wycieczki ON zdjecia.id = wycieczki.zdjecia_id WHERE cena > 1300; (możliwe też INNER JOIN lub porównanie kluczy po WHERE) oraz wynik działania udokumentowano zrzutem, na którym widoczne są dokładnie 4 rekordy: Francja, Paryz 1350 Paryz; Hiszpania, Barcelona 1500 Barcelona; Hiszpania, Barcelona 1500 Barcelona; Hiszpania, Barcelona 1400 Barcelona;

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 3: wybierające jedynie pola cel i cena z tabeli wycieczki oraz odpowiadające im pole podpis z tabeli zdjecia, dla wycieczek, których cena jest wyższa niż 1300 zł. Zapytanie wykorzystuje relację.

    • FROM wycieczki JOIN zdjecia - łączysz dwie tabele,
    • ON zdjecia.id = wycieczki.zdjecia_id - relacja: wiersz wycieczki dostaje wiersz zdjęcia, na które wskazuje jej klucz obcy zdjecia_id,
    • WHERE cena > 1300 - „wyższa niż”, więc Paryż za równe 1300 zł nie wchodzi.

    Wynik: 4 wiersze - Paryż 1350 i trzy razy Barcelona (1500, 1500, 1400), każdy z podpisem swojego zdjęcia. Zrzut kw3.jpg.

    Typowe błędy

    FROM wycieczki, zdjecia bez warunku łączącego daje iloczyn kartezjański - każdą wycieczkę z każdym zdjęciem.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;

-- Zapytanie 2
SELECT cel, dataWyjazdu FROM wycieczki WHERE dostepna = 0;

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

  7. Krok 7: Zapytanie 4: usunięcie tabeli uzytkownik

    Kryteria:

    R.1.6 Wykonano zapytanie 4 usuwające tabelę uzytkownik . W pliku z kwerendami lub na zrzucie istnieje zapis np.: DROP TABLE uzytkownik; oraz wynik działania udokumentowano zrzutem, na którym widnieje komunikat o poprawnym usunięciu lub spis tabel bazy danych bez tabeli uzytkownik

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: usuwające tabelę uzytkownik.

    DROP TABLE usuwa całą tabelę - strukturę i dane (w przeciwieństwie do DELETE, który kasuje wiersze, a tabelę zostawia). phpMyAdmin pyta o potwierdzenie. Zrzut kw4.jpg - komunikat albo lista tabel bez uzytkownik.

    Typowe błędy

    DELETE FROM uzytkownik opróżnia tabelę, ale jej nie usuwa - to nie spełnia R.1.6.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;

-- Zapytanie 2
SELECT cel, dataWyjazdu FROM wycieczki WHERE dostepna = 0;

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

-- Zapytanie 4
DROP TABLE uzytkownik;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Strona HTML

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

    Krok 8: Plik biuro.php w HTML5

    Kryteria: ,

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

    R.2.2 Zastosowano deklarację języka HTML5 <!DOCTYPE html>, zadeklarowano język witryny polski np. <html lang = "pl"> oraz zapisano jawnie właściwy standard kodowania polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Cechy witryny: Składa się ze strony o nazwie biuro.php zapisanej w języku HTML 5.

    Jedna strona, biuro.php. Dopóki nie ma w niej kodu PHP, podgląd pokazuje ją wprost. Zdjęcia 1.jpg - 9.jpg leżą obok strony.

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

  9. Krok 9: Język strony

    Kryteria:

    R.2.2 Zastosowano deklarację języka HTML5 <!DOCTYPE html>, zadeklarowano język witryny polski np. <html lang = "pl"> oraz zapisano jawnie właściwy standard kodowania polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Ustawiony język zawartości strony na polski.

    Atrybut lang="pl".

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

  10. Krok 10: Kodowanie polskich znaków

    Kryteria:

    R.2.2 Zastosowano deklarację języka HTML5 <!DOCTYPE html>, zadeklarowano język witryny polski np. <html lang = "pl"> oraz zapisano jawnie właściwy standard kodowania polskich znaków

    ok. 1 min
    Polecenie z arkusza

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

    <meta charset="UTF-8">.

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

  11. Krok 11: Tytuł strony

    Kryteria:

    R.2.3 Stronie nadano tytuł: "Poznaj Europę"

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Poznaj Europę”.

    <title> w <head>.

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

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

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    Nazwa z cyfrą: styl9.css.

    Typowe błędy

    styl.css bez dziewiątki odcina wszystkie style (R.3.3).

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

  13. Krok 13: Bloki strony

    Kryteria:

    R.2.4 Układ strony zdefiniowano dzieląc ją na bloki: baner, lewy, środkowy, prawy, dane i stopka. Zastosowano znaczniki sekcji

    ok. 1 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. Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z Obrazem 2.

    <header> na baner, cztery <section> (left, middle, right, data) i <footer>.

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

  14. Krok 14: Baner

    Kryteria:

    R.2.5 W banerze zapisano nagłówek h1: "BIURO PODRÓŻY", w blokach lewym, środkowym i prawym przynajmniej jeden h2 z: "Promocje", "W tym roku jedziemy do...", "Kontakt", w bloku dane h3: "W poprzednich latach byliśmy..." oraz przynajmniej jeden paragraf

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek pierwszego stopnia o treści: „BIURO PODRÓŻY”.

    <h1>.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <section id="data">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  15. Krok 15: Blok lewy: promocje w tabeli

    Kryteria: ,

    R.2.5 W banerze zapisano nagłówek h1: "BIURO PODRÓŻY", w blokach lewym, środkowym i prawym przynajmniej jeden h2 z: "Promocje", "W tym roku jedziemy do...", "Kontakt", w bloku dane h3: "W poprzednich latach byliśmy..." oraz przynajmniej jeden paragraf

    R.2.7 W bloku lewym zapisano tabelę o 2 kolumnach i 3 wierszach, zastosowano znaczniki <table>, <tr>, <td>

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku lewego: Nagłówek drugiego stopnia o treści: „Promocje”. Tabela o dwóch kolumnach i trzech wierszach, wypełniona danymi: Warszawa od 600 zł, Wenecja od 1200 zł, Paryż od 1200 zł.

    <h2> i tabela 3 × 2: trzy <tr>, w każdym dwie komórki <td>. Tabela nie ma wiersza nagłówkowego - arkusz go nie wymaga.

    biuro.php PHP zmienione: 15 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
        <h2>Promocje</h2>
        <table>
            <tr>
                <td>Warszawa</td>
                <td>od 600 zł</td>
            </tr>
            <tr>
                <td>Wenecja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Paryż</td>
                <td>od 1200 zł</td>
            </tr>
        </table>
    </section>
    <section id="middle">
    </section>
    <section id="right">
    </section>
    <section id="data">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  16. Krok 16: Blok środkowy: nagłówek

    Kryteria:

    R.2.5 W banerze zapisano nagłówek h1: "BIURO PODRÓŻY", w blokach lewym, środkowym i prawym przynajmniej jeden h2 z: "Promocje", "W tym roku jedziemy do...", "Kontakt", w bloku dane h3: "W poprzednich latach byliśmy..." oraz przynajmniej jeden paragraf

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku środkowego: Nagłówek drugiego stopnia o treści: „W tym roku jedziemy do...”. Efekt działania skryptu 1.

    <h2>; pod nim Skrypt 1 wstawi galerię zdjęć.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
        <h2>Promocje</h2>
        <table>
            <tr>
                <td>Warszawa</td>
                <td>od 600 zł</td>
            </tr>
            <tr>
                <td>Wenecja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Paryż</td>
                <td>od 1200 zł</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>W tym roku jedziemy do...</h2>
    </section>
    <section id="right">
    </section>
    <section id="data">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  17. Krok 17: Blok prawy: kontakt

    Kryteria: ,

    R.2.5 W banerze zapisano nagłówek h1: "BIURO PODRÓŻY", w blokach lewym, środkowym i prawym przynajmniej jeden h2 z: "Promocje", "W tym roku jedziemy do...", "Kontakt", w bloku dane h3: "W poprzednich latach byliśmy..." oraz przynajmniej jeden paragraf

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

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku prawego: Nagłówek drugiego stopnia o treści: „Kontakt”. Odnośnik do adresu e-mail [email protected] o treści: „napisz do nas”. Paragraf (akapit) o treści „telefon: 444555666”.

    Odnośnik do adresu e-mail ma w href przedrostek mailto: - kliknięcie otwiera program pocztowy z gotowym adresatem (R.3.2).

    Typowe błędy

    href="[email protected]" bez mailto: przeglądarka traktuje jak plik w bieżącym folderze.

    biuro.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
        <h2>Promocje</h2>
        <table>
            <tr>
                <td>Warszawa</td>
                <td>od 600 zł</td>
            </tr>
            <tr>
                <td>Wenecja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Paryż</td>
                <td>od 1200 zł</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>W tym roku jedziemy do...</h2>
    </section>
    <section id="right">
        <h2>Kontakt</h2>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 444555666</p>
    </section>
    <section id="data">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  18. Krok 18: Blok z danymi: nagłówek i lista

    Kryteria:

    R.2.5 W banerze zapisano nagłówek h1: "BIURO PODRÓŻY", w blokach lewym, środkowym i prawym przynajmniej jeden h2 z: "Promocje", "W tym roku jedziemy do...", "Kontakt", w bloku dane h3: "W poprzednich latach byliśmy..." oraz przynajmniej jeden paragraf

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku z danymi: Nagłówek trzeciego stopnia o treści: „W poprzednich latach byliśmy...”. Lista numerowana (uporządkowana), a w niej efekt działania skryptu 2.

    <h3> i pusta lista <ol> - jej elementy <li> wypisze Skrypt 2.

    biuro.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
        <h2>Promocje</h2>
        <table>
            <tr>
                <td>Warszawa</td>
                <td>od 600 zł</td>
            </tr>
            <tr>
                <td>Wenecja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Paryż</td>
                <td>od 1200 zł</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>W tym roku jedziemy do...</h2>
    </section>
    <section id="right">
        <h2>Kontakt</h2>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 444555666</p>
    </section>
    <section id="data">
        <h3>W poprzednich latach byliśmy...</h3>
        <ol>
        </ol>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  19. Krok 19: Stopka

    Kryteria:

    R.2.5 W banerze zapisano nagłówek h1: "BIURO PODRÓŻY", w blokach lewym, środkowym i prawym przynajmniej jeden h2 z: "Promocje", "W tym roku jedziemy do...", "Kontakt", w bloku dane h3: "W poprzednich latach byliśmy..." oraz przynajmniej jeden paragraf

    ok. 1 min
    Polecenie z arkusza

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

    Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL), tu - autor rozwiązania.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
        <h2>Promocje</h2>
        <table>
            <tr>
                <td>Warszawa</td>
                <td>od 600 zł</td>
            </tr>
            <tr>
                <td>Wenecja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Paryż</td>
                <td>od 1200 zł</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>W tym roku jedziemy do...</h2>
    </section>
    <section id="right">
        <h2>Kontakt</h2>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 444555666</p>
    </section>
    <section id="data">
        <h3>W poprzednich latach byliśmy...</h3>
        <ol>
        </ol>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  20. Etap 3: Styl CSS

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

    Krok 20: Plik styl9.css: czcionka i wyśrodkowanie

    Kryteria:

    R.4.1 Ustawiono domyślne formatowanie wszystkich selektorów (*): krój czcionki Georgia, wyrównanie tekstu do środka

    ok. 1 min
    Polecenie z arkusza

    Ustawione domyślne wartości dla wszystkich selektorów stylu CSS: krój czcionki Georgia, wyrównanie tekstu do środka.

    Selektor uniwersalny *.

    styl9.css CSS nowy plik 
    * {
    font-family: Georgia;
    text-align: center;
}
    Podgląd strony po tym kroku (biuro.php)

  21. Krok 21: Baner i stopka

    Kryteria: , ,

    R.4.2 Ustawiono kolor tła #BA6B6C dla banera i stopki, #EF9A9A dla bloku lewego i prawego, MistyRose dla bloku z danymi i środkowego

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

    R.4.6 Ustawiono marginesy wewnętrzne (padding) 7px dla banera i stopki, 50px dla bloku z danymi, marginesy zewnętrzne (margin) 7px dla obrazu oraz auto dla tabeli

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla banera i stopki: kolor tła #BA6B6C, biały kolor czcionki, marginesy wewnętrzne 7 px.

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

    styl9.css CSS zmienione: 5 linii 
    * {
    font-family: Georgia;
    text-align: center;
}
header, footer {
    background-color: #BA6B6C;
    color: white;
    padding: 7px;
}
    Podgląd strony po tym kroku (biuro.php)

  22. Krok 22: Bloki lewy, środkowy i prawy

    Kryteria: , ,

    R.4.2 Ustawiono kolor tła #BA6B6C dla banera i stopki, #EF9A9A dla bloku lewego i prawego, MistyRose dla bloku z danymi i środkowego

    R.4.4 Ustawiono szerokość 20% dla bloków lewego i prawego, 60% dla środkowego (width lub grid-template-columns lub flex), 80% dla selektora table

    R.4.5 Ustawiono wysokość 500px dla bloków lewego, środkowego i prawego i 120px dla selektora img

    ok. 2 min
    Polecenie z arkusza

    Dla bloku lewego i prawego: kolor tła #EF9A9A, szerokość 20%, wysokość 500 px. Dla bloku środkowego: kolor tła MistyRose, szerokość 60%, wysokość 500 px.

    20% + 60% + 20% = cała szerokość.

    styl9.css CSS zmienione: 10 linii 
    * {
    font-family: Georgia;
    text-align: center;
}
header, footer {
    background-color: #BA6B6C;
    color: white;
    padding: 7px;
}
#left, #right {
    background-color: #EF9A9A;
    width: 20%;
    height: 500px;
}
#middle {
    background-color: MistyRose;
    width: 60%;
    height: 500px;
}
    Podgląd strony po tym kroku (biuro.php)

  23. Krok 23: Blok z danymi

    Kryteria: ,

    R.4.2 Ustawiono kolor tła #BA6B6C dla banera i stopki, #EF9A9A dla bloku lewego i prawego, MistyRose dla bloku z danymi i środkowego

    R.4.6 Ustawiono marginesy wewnętrzne (padding) 7px dla banera i stopki, 50px dla bloku z danymi, marginesy zewnętrzne (margin) 7px dla obrazu oraz auto dla tabeli

    ok. 1 min
    Polecenie z arkusza

    Dla bloku z danymi: kolor tła MistyRose, marginesy wewnętrzne 50 px.

    Selektor #data.

    styl9.css CSS zmienione: 4 linie 
    * {
    font-family: Georgia;
    text-align: center;
}
header, footer {
    background-color: #BA6B6C;
    color: white;
    padding: 7px;
}
#left, #right {
    background-color: #EF9A9A;
    width: 20%;
    height: 500px;
}
#middle {
    background-color: MistyRose;
    width: 60%;
    height: 500px;
}
#data {
    background-color: MistyRose;
    padding: 50px;
}
    Podgląd strony po tym kroku (biuro.php)

  24. Krok 24: Lista z cyframi rzymskimi

    Kryteria:

    R.4.7 Ustawiono dla selektora ol punktor wielka cyfra rzymska (list-style lub list-style-type: upper- roman;) oraz dla selektora li wyrównanie tekstu do lewej strony

    ok. 1 min
    Polecenie z arkusza

    Dla selektora listy numerowanej: punktor jest wielką cyfrą rzymską. Dla selektora elementu listy: wyrównanie tekstu do lewej strony.

    Wielkie cyfry rzymskie to upper-roman (I, II, III); lower-roman dałoby i, ii, iii. Elementy listy wyrównujesz do lewej, bo cała strona jest wyśrodkowana.

    styl9.css CSS zmienione: 6 linii 
    * {
    font-family: Georgia;
    text-align: center;
}
header, footer {
    background-color: #BA6B6C;
    color: white;
    padding: 7px;
}
#left, #right {
    background-color: #EF9A9A;
    width: 20%;
    height: 500px;
}
#middle {
    background-color: MistyRose;
    width: 60%;
    height: 500px;
}
#data {
    background-color: MistyRose;
    padding: 50px;
}
ol {
    list-style-type: upper-roman;
}
li {
    text-align: left;
}
    Podgląd strony po tym kroku (biuro.php)

  25. Krok 25: Pierwsza litera nagłówków

    Kryteria:

    R.4.10 Ustawiono styl pseudoelementu h2::first-letter: rozmiar czcionki 170%, kolor czcionki Maroon

    ok. 1 min
    Polecenie z arkusza

    Dla pierwszej litery nagłówka drugiego stopnia: rozmiar czcionki 170%, kolor czcionki Maroon.

    Pseudoelement ::first-letter wybiera tylko pierwszą literę elementu - stąd duże „P”, „W”, „K” na obrazie 2, bez dodatkowych znaczników w HTML.

    styl9.css CSS zmienione: 4 linie 
    * {
    font-family: Georgia;
    text-align: center;
}
header, footer {
    background-color: #BA6B6C;
    color: white;
    padding: 7px;
}
#left, #right {
    background-color: #EF9A9A;
    width: 20%;
    height: 500px;
}
#middle {
    background-color: MistyRose;
    width: 60%;
    height: 500px;
}
#data {
    background-color: MistyRose;
    padding: 50px;
}
ol {
    list-style-type: upper-roman;
}
li {
    text-align: left;
}
h2::first-letter {
    font-size: 170%;
    color: Maroon;
}
    Podgląd strony po tym kroku (biuro.php)

  26. Krok 26: Tabela

    Kryteria: , ,

    R.4.4 Ustawiono szerokość 20% dla bloków lewego i prawego, 60% dla środkowego (width lub grid-template-columns lub flex), 80% dla selektora table

    R.4.6 Ustawiono marginesy wewnętrzne (padding) 7px dla banera i stopki, 50px dla bloku z danymi, marginesy zewnętrzne (margin) 7px dla obrazu oraz auto dla tabeli

    R.4.8 Ustawiono obramowanie dla tabeli: 1px solid Maroon

    ok. 1 min
    Polecenie z arkusza

    Dla selektora tabeli: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 80%, obramowanie linią ciągłą o szerokości 1 px i kolorze Maroon.

    Obramowanie tylko dla table - komórki go nie mają, więc na obrazie 2 widać jedną ramkę wokół całej tabeli.

    styl9.css CSS zmienione: 5 linii 
    * {
    font-family: Georgia;
    text-align: center;
}
header, footer {
    background-color: #BA6B6C;
    color: white;
    padding: 7px;
}
#left, #right {
    background-color: #EF9A9A;
    width: 20%;
    height: 500px;
}
#middle {
    background-color: MistyRose;
    width: 60%;
    height: 500px;
}
#data {
    background-color: MistyRose;
    padding: 50px;
}
ol {
    list-style-type: upper-roman;
}
li {
    text-align: left;
}
h2::first-letter {
    font-size: 170%;
    color: Maroon;
}
table {
    margin: auto;
    width: 80%;
    border: 1px solid Maroon;
}
    Podgląd strony po tym kroku (biuro.php)

  27. Krok 27: Obrazy z cieniem

    Kryteria: , ,

    R.4.5 Ustawiono wysokość 500px dla bloków lewego, środkowego i prawego i 120px dla selektora img

    R.4.6 Ustawiono marginesy wewnętrzne (padding) 7px dla banera i stopki, 50px dla bloku z danymi, marginesy zewnętrzne (margin) 7px dla obrazu oraz auto dla tabeli

    R.4.9 Ustawiono dla obrazu cień box-shadow: 7px 7px 7px DimGray;

    ok. 1 min
    Polecenie z arkusza

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

    box-shadow wg składni z arkusza: przesunięcie poziome, pionowe, rozmycie, kolor. Wysokość 120 px bez szerokości - przeglądarka dobierze szerokość z zachowaniem proporcji (180 px).

    styl9.css CSS zmienione: 5 linii 
    * {
    font-family: Georgia;
    text-align: center;
}
header, footer {
    background-color: #BA6B6C;
    color: white;
    padding: 7px;
}
#left, #right {
    background-color: #EF9A9A;
    width: 20%;
    height: 500px;
}
#middle {
    background-color: MistyRose;
    width: 60%;
    height: 500px;
}
#data {
    background-color: MistyRose;
    padding: 50px;
}
ol {
    list-style-type: upper-roman;
}
li {
    text-align: left;
}
h2::first-letter {
    font-size: 170%;
    color: Maroon;
}
table {
    margin: auto;
    width: 80%;
    border: 1px solid Maroon;
}
img {
    height: 120px;
    margin: 7px;
    box-shadow: 7px 7px 7px DimGray;
}
    Podgląd strony po tym kroku (biuro.php)

  28. Krok 28: Układ: trzy bloki obok siebie

    Kryteria:

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

    ok. 1 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.

    float: left dla trzech bloków, clear: both dla bloku z danymi.

    Typowe błędy

    padding dla bloków bocznych poszerzyłby je ponad 100% razem - prawy blok spadłby pod spód.

    styl9.css CSS zmienione: 6 linii 
    * {
    font-family: Georgia;
    text-align: center;
}
header, footer {
    background-color: #BA6B6C;
    color: white;
    padding: 7px;
}
#left, #right {
    background-color: #EF9A9A;
    width: 20%;
    height: 500px;
}
#middle {
    background-color: MistyRose;
    width: 60%;
    height: 500px;
}
#data {
    background-color: MistyRose;
    padding: 50px;
}
ol {
    list-style-type: upper-roman;
}
li {
    text-align: left;
}
h2::first-letter {
    font-size: 170%;
    color: Maroon;
}
table {
    margin: auto;
    width: 80%;
    border: 1px solid Maroon;
}
img {
    height: 120px;
    margin: 7px;
    box-shadow: 7px 7px 7px DimGray;
}
#left, #middle, #right {
    float: left;
}
#data {
    clear: both;
}
    Podgląd strony po tym kroku (biuro.php)

  29. Etap 4: Skrypty PHP

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

    Krok 29: Połączenie w bloku środkowym, zamknięcie w liście

    Kryteria: ,

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

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

    ok. 3 min
    Polecenie z arkusza

    Łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie podroze. Na końcu działania skrypt zamyka połączenie z serwerem.

    Skrypt 1 stoi pod nagłówkiem bloku środkowego i otwiera połączenie. Skrypt 2 stoi wewnątrz <ol> - wypisze tam elementy listy - i kończy się mysqli_close (R.5.2). Podgląd: skrypty jeszcze niczego nie wypisują.

    biuro.php PHP zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
        <h2>Promocje</h2>
        <table>
            <tr>
                <td>Warszawa</td>
                <td>od 600 zł</td>
            </tr>
            <tr>
                <td>Wenecja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Paryż</td>
                <td>od 1200 zł</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>W tym roku jedziemy do...</h2>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "podroze");
        ?>
    </section>
    <section id="right">
        <h2>Kontakt</h2>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 444555666</p>
    </section>
    <section id="data">
        <h3>W poprzednich latach byliśmy...</h3>
        <ol>
            <?php
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  30. Krok 30: Skrypt 1: galeria z bazy

    Kryteria: , ,

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

    R.5.3 Skrypt 1 wysyła do bazy danych zapytanie 1 lub skrypt 2 wysyła 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

    ok. 3 min
    Polecenie z arkusza

    Skrypt 1: Wysyła do bazy danych zapytanie 1. 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.

    Dla każdego wiersza jeden <img>: nazwa pliku w src, podpis w alt. Cudzysłowy atrybutów są wewnątrz napisu w cudzysłowie, więc poprzedzasz je ukośnikiem \". Podgląd: dziewięć zdjęć od Barcelony do Wenecji.

    biuro.php PHP zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
        <h2>Promocje</h2>
        <table>
            <tr>
                <td>Warszawa</td>
                <td>od 600 zł</td>
            </tr>
            <tr>
                <td>Wenecja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Paryż</td>
                <td>od 1200 zł</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>W tym roku jedziemy do...</h2>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "podroze");
            $query = "SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                echo "<img src=\"$row[0]\" alt=\"$row[1]\">";
            }
        ?>
    </section>
    <section id="right">
        <h2>Kontakt</h2>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 444555666</p>
    </section>
    <section id="data">
        <h3>W poprzednich latach byliśmy...</h3>
        <ol>
            <?php
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  31. Krok 31: Skrypt 1: dymek z podpisem

    Kryteria:

    R.5.5 Skrypt 1 definiuje atrybut title dla każdego obrazu z tekstem z pola podpis zwróconym zapytaniem

    ok. 1 min
    Polecenie z arkusza

    Pole podpis jest także tekstem pokazującym się w dymku, gdy kursor znajdzie się na grafice, patrz Obraz 2, dymek do grafiki z Londynem.

    Dymek po najechaniu to atrybut title - ten sam podpis drugi raz. alt jest dla czytników ekranu i na wypadek braku obrazu, title - dla wskazówki po najechaniu. Najedź w podglądzie na zdjęcie Londynu.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
        <h2>Promocje</h2>
        <table>
            <tr>
                <td>Warszawa</td>
                <td>od 600 zł</td>
            </tr>
            <tr>
                <td>Wenecja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Paryż</td>
                <td>od 1200 zł</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>W tym roku jedziemy do...</h2>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "podroze");
            $query = "SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                echo "<img src=\"$row[0]\" alt=\"$row[1]\" title=\"$row[1]\">";
            }
        ?>
    </section>
    <section id="right">
        <h2>Kontakt</h2>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 444555666</p>
    </section>
    <section id="data">
        <h3>W poprzednich latach byliśmy...</h3>
        <ol>
            <?php
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  32. Krok 32: Skrypt 2: dawne wyjazdy w liście

    Kryteria: , ,

    R.2.6 W bloku z danymi umieszczono jedną listę numerowaną, zastosowano znaczniki <ol>, <li> (w skrypcie lub HTML)

    R.5.6 Skrypt 2 wyświetla każdy zwrócony wiersz w elemencie listy w formacie: „Dnia <data> pojechaliśmy do <cel>”, gdzie < > oznacza pole zwrócone zapytaniem

    R.5.7 Zastosowano znaczące nazewnictwo dla wszystkich zmiennych lub funkcji w języku polskim lub angielskim. Nazwy odzwierciedlają cel zastosowania

    ok. 3 min
    Polecenie z arkusza

    Skrypt 2: Wysyła do bazy danych zapytanie 2. Każdy zwrócony zapytaniem wiersz jest wyświetlany w elemencie listy, według wzoru: „Dnia <data> pojechaliśmy do <cel>”.

    Zapytanie 2 zwraca najpierw cel, potem datę, a zdanie zaczyna się od daty - dlatego $row[1] stoi przed $row[0]. Podgląd: trzy elementy listy numerowane I, II, III, jak na obrazie 2. Nazwy zmiennych są po angielsku i mówią, co przechowują (R.5.7).

    Typowe błędy

    $row[0] w miejscu daty daje „Dnia Francja, Paryz pojechaliśmy do 2019-07-14”.

    biuro.php PHP zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
        <h2>Promocje</h2>
        <table>
            <tr>
                <td>Warszawa</td>
                <td>od 600 zł</td>
            </tr>
            <tr>
                <td>Wenecja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Paryż</td>
                <td>od 1200 zł</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>W tym roku jedziemy do...</h2>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "podroze");
            $query = "SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                echo "<img src=\"$row[0]\" alt=\"$row[1]\" title=\"$row[1]\">";
            }
        ?>
    </section>
    <section id="right">
        <h2>Kontakt</h2>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 444555666</p>
    </section>
    <section id="data">
        <h3>W poprzednich latach byliśmy...</h3>
        <ol>
            <?php
                $query = "SELECT cel, dataWyjazdu FROM wycieczki WHERE dostepna = 0;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "<li>Dnia $row[1] pojechaliśmy do $row[0]</li>";
                }
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  33. Etap 5: Dobre praktyki (poza kluczem)

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

    Krok 33: Kolumny po nazwach, bezpieczne atrybuty, data po polsku

    ok. 4 min
    Polecenie z arkusza

    Pole podpis jest tekstem alternatywnym obrazu oraz tekstem pokazującym się w dymku.

    Trzy poprawki z prawdziwych projektów:

    • mysqli_fetch_assoc - kolumny po nazwach ($row["podpis"]) zamiast numerów; nie trzeba pamiętać, że data jest drugą kolumną,
    • htmlspecialchars - podpis trafia do atrybutów alt i title; podpis z cudzysłowem (np. Wieża "Eiffla") urwałby atrybut w połowie i rozbił znacznik,
    • date("d.m.Y", strtotime(...)) - data z bazy (2019-07-14) zapisana tak, jak czyta ją człowiek: 14.07.2019.

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

    biuro.php PHP zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Poznaj Europę</title>
    <link rel="stylesheet" href="styl9.css">
</head>
<body>
    <header>
        <h1>BIURO PODRÓŻY</h1>
    </header>
    <section id="left">
        <h2>Promocje</h2>
        <table>
            <tr>
                <td>Warszawa</td>
                <td>od 600 zł</td>
            </tr>
            <tr>
                <td>Wenecja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Paryż</td>
                <td>od 1200 zł</td>
            </tr>
        </table>
    </section>
    <section id="middle">
        <h2>W tym roku jedziemy do...</h2>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "podroze");
            $query = "SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_assoc($result)) {
                $file = htmlspecialchars($row["nazwaPliku"]);
                $caption = htmlspecialchars($row["podpis"]);
                echo "<img src=\"$file\" alt=\"$caption\" title=\"$caption\">";
            }
        ?>
    </section>
    <section id="right">
        <h2>Kontakt</h2>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 444555666</p>
    </section>
    <section id="data">
        <h3>W poprzednich latach byliśmy...</h3>
        <ol>
            <?php
                $query = "SELECT cel, dataWyjazdu FROM wycieczki WHERE dostepna = 0;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_assoc($result)) {
                    $date = date("d.m.Y", strtotime($row["dataWyjazdu"]));
                    $destination = htmlspecialchars($row["cel"]);
                    echo "<li>Dnia $date pojechaliśmy do $destination</li>";
                }
                mysqli_close($connection);
            ?>
        </ol>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  34. Etap 6: Oddanie pracy

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

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

    ok. 5 min
    Polecenie z arkusza

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

    W przeglądarka.txt wpisujesz nazwę przeglądarki.

    W folderze: zdjęcia 1.jpg - 9.jpg, biuro.php, import.png, kw1.jpg - kw4.jpg, kwerendy.txt, przeglądarka.txt, styl9.css. 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 33.

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.