Przejdź do głównej treści
E.14-03-22.01-SGStyczeń 2022 · 37 kroków · ok. 59 min · 34 kryteria z klucza

Rozwiązanie krok po kroku: Biuro podróży z obsługą ciasteczek (Wersja podstawowa)

Witryna biura podróży w jednym pliku biuro.php: baner, blok ciasteczek, blok lewy z listą wycieczek i odnośnikami, blok prawy z tabelą czterech zdjęć i stopka. Skrypt PHP przy pierwszej wizycie tworzy ciasteczko i wita gościa informacją o ciasteczkach, a przy kolejnej - wita ponownie. Do tego arkusz stylów styl.css z cieniem pod kursorem, plik regulamin.txt i cztery zdjęcia obrobione w edytorze grafiki.

To arkusz E.14 ze stycznia 2022 - kwalifikacji formuły 2012, którą zastąpiła INF.03. 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ą. Skrypt jest napisany najprościej (isset, setcookie, echo), a w etapie dobrych praktyk dostaje zabezpieczenia, których klucz nie sprawdza.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (flex, jedna zmienna PHP)” jest drugi sposób rozwiązania tego samego arkusza: znaczniki semantyczne (<main>, <aside>), układ flexbox, zmienne CSS i skrypt z jedną zmienną zamiast dwóch sprawdzeń ciasteczka - obie wersje są zgodne z kluczem.

Zdjęcia pochodzą z oryginalnego archiwum CKE (załącznik na stronie arkusza). Skrypt PHP jest uruchomiony naprawdę - dwie wizyty z zapamiętanym ciasteczkiem - a układ strony zmierzony w Chrome.

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

    Kroki 1-6 · po tym etapie masz 5 z 34 kryteriów (pkt)

    Krok 1: Folder zdającego i archiwum pliki3

    ok. 2 min
    Polecenie z arkusza

    Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki3.zip zabezpieczone hasłem: PodRoz3 Archiwum należy rozpakować. Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj numeru, którym został podpisany arkusz. Rozpakowane pliki umieść w tym folderze. Po zakończonej pracy wyniki zapisz w tym folderze.

    Na pulpicie tworzysz folder nazwany numerem, którym podpisano arkusz (PESEL) - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum rozpakowujesz do tego folderu z hasłem PodRoz3 (wielkość liter ma znaczenie). W środku są cztery zdjęcia: grecja.jpg (500 × 310 px), hiszpania.jpg (550 × 341 px), polska.jpg (500 × 375 px, z czarną linią w dolnej części) i wlochy.jpg (500 × 310 px).

    Archiwum do pobrania jest na stronie arkusza w serwisie - CKE wydała je pod nazwą pliki6.zip przy zadaniu ze stycznia 2019, z tym samym hasłem i tymi samymi plikami.

  2. Krok 2: grecja.jpg: rozmycie Gaussa

    Kryteria:

    R.1.1 Obraz grecja.jpg jest w całości rozmyty

    ok. 2 min
    Polecenie z arkusza

    Grafika grecja.jpg powinna być rozmyta za pomocą filtru rozmycie Gaussa. Parametry rozmycia muszą być tak dobrane, aby rozmycie było dobrze widoczne. Przykład pokazano na obrazach 1a i 1b.

    W GIMP-ie: Filtry → Rozmycie → Rozmycie Gaussa. W oknie filtra ustawiasz rozmiar rozmycia - w tym rozwiązaniu 6 px (w GIMP 2.10 pola Rozmiar X/Y to odchylenie standardowe rozmycia). Przy wartości 1-2 rozmycie jest ledwo widoczne, a arkusz wymaga, żeby było „dobrze widoczne” - w całym obrazie, więc filtr nakładasz bez zaznaczenia. Zapis: Plik → Nadpisz grecja.jpg.

    Na podglądzie po lewej oryginał, po prawej obraz po rozmyciu.

    Typowe błędy

    Rozmycie tylko zaznaczonego fragmentu albo tak słabe, że obraz wygląda na ostry - klucz wymaga, by grecja.jpg była rozmyta w całości.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 2

  3. Krok 3: Zrzut ekranu rozmycie.png

    Kryteria:

    R.1.2 Czynność rozmycia obrazu udokumentowano zrzutem ekranu o nazwie rozmycie.png , na którym widoczny jest edytor grafiki oraz okno parametrów filtra rozmycia Gaussa

    ok. 2 min
    Polecenie z arkusza

    Udokumentuj zastosowany na grafice grecja.jpg filtr za pomocą zrzutu ekranu, na którym widoczny jest edytor grafiki oraz okno parametrów filtra. Zrzut zapisz w formacie PNG i nazwij rozmycie. Nie kadruj zrzutu. Powinien on obejmować cały ekran, z widocznym paskiem zadań.

    Zrzut robisz, gdy okno Rozmycie Gaussa jest otwarte z ustawionymi parametrami, a za nim widać okno GIMP-a z obrazem - czyli przed kliknięciem OK w poprzednim kroku. Print Screen kopiuje cały ekran z paskiem zadań, Edycja → Wklej jako → Nowy obraz i Plik → Eksportuj jako rozmycie.png.

    W arkuszu jest literówka „grecja,jpg” (przecinek zamiast kropki) - chodzi o plik grecja.jpg, ten sam, który rozmyto w poprzednim kroku.

    Ten zrzut zależy od Twojego stanowiska, dlatego rozwiązanie nie zawiera pliku - to praca do wykonania na egzaminie.

    Typowe błędy

    Zrzut samego okna albo przycięty - bez paska zadań - nie jest oceniany (uwaga w kluczu przy R.1).

  4. Krok 4: hiszpania.jpg: szerokość 500 px

    Kryteria:

    R.1.3 Przeskalowano obraz hiszpania.jpg z zachowaniem proporcji do szerokości 500 px odpowiadająca temu wysokość wynosi 310 px (± 5 px)

    ok. 2 min
    Polecenie z arkusza

    Grafika hiszpania.jpg powinna być przeskalowana. Należy przeskalować obraz z zachowaniem proporcji do szerokości 500 px.

    Obraz → Skaluj obraz, łańcuch między szerokością a wysokością zamknięty, szerokość 500 px. Wysokość przelicza się sama: 341 × 500 / 550 = 310 px - dokładnie tyle sprawdza klucz (310 px ±5). Zapis: Plik → Nadpisz hiszpania.jpg.

    Typowe błędy

    Rozpięty łańcuch daje 500 × 341 - zdjęcie ściśnięte w poziomie, bez punktu.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: polska.jpg: odcięcie dołu z czarną linią

    Kryteria:

    R.1.4 Przycięto dół obrazu polska.jpg do czarnej linii, linia nie jest widoczna na obrazie

    ok. 2 min
    Polecenie z arkusza

    Grafika polska.jpg powinna być przycięta. Na oryginale jest widoczna czarna linia - na przyciętym obrazie powinien być widoczny jedynie obszar nad linią. Wygląd grafiki po przycięciu na obrazie 1c.

    Czarna linia biegnie przez całą szerokość zdjęcia w wierszach 310-313 (licząc od góry od zera). Zostawiasz obszar nad nią: Obraz → Rozmiar płótna, łańcuch rozpięty, wysokość 310 px, przesunięcie 0, potem Warstwa → Warstwa do rozmiaru obrazu - albo narzędziem Kadrowanie z polem 0, 0, 500 × 310. Wynik ma 500 × 310 px, jak pozostałe zdjęcia, i nie ma na nim ani jednego wiersza linii.

    Typowe błędy

    Cięcie „na oko” narzędziem kadrowania zostawia na dole jeden-dwa wiersze czarnej linii - powiększ widok, zanim zatwierdzisz.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: wlochy.jpg: odcienie szarości

    Kryteria:

    R.1.5 Zapisano obraz wlochy.jpg w odcieniach szarości

    ok. 1 min
    Polecenie z arkusza

    Grafika wlochy.jpg powinna być w odcieniach szarości.

    Obraz → Tryb → Skala szarości i Plik → Nadpisz wlochy.jpg. Tryb skali szarości zapisuje obraz z jednym kanałem jasności - zdjęcie Wenecji staje się czarno-białe, jak na obrazie 2.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Etap 2: Strona biuro.php

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

    Krok 7: Plik biuro.php

    ok. 1 min
    Polecenie z arkusza

    Cechy witryny: strona główna o nazwie biuro.php.

    W edytorze zaznaczającym składnię tworzysz plik biuro.php ze szkieletem HTML5. Rozszerzenie .php jest konieczne, bo strona będzie zawierać skrypt wykonywany na serwerze - na razie to sam HTML i tak też się wyświetla.

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

  8. Krok 8: Kodowanie polskich znaków

    Kryteria:

    R.2.1 Witrynę internetową zapisano w pliku biuro.php oraz zastosowano właściwy standard kodowania polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Zastosowany właściwy standard kodowania polskich znaków.

    <meta charset="UTF-8"> na początku <head> (plik zapisany w UTF-8) - „Podróże z uśmiechem” wyświetli się bez krzaków.

    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)

  9. Krok 9: Tytuł strony

    Kryteria:

    R.2.2 Nadano tytuł strony: "Turystyka moja pasja"

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki „Turystyka moja pasja”.

    <title> w <head> - napis na karcie przeglądarki, nie nagłówek banera.

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

  10. Krok 10: Podpięcie arkusza stylów styl.css

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    <link rel="stylesheet" href="styl.css"> w <head>. Całe formatowanie trafi do tego pliku - klucz R.3.5 wymaga, żeby pochodziło jedynie z niego (bez atrybutów style i znacznika <style>).

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

  11. Krok 11: Pięć bloków

    Kryteria:

    R.2.3 Wygląd strony zdefiniowano dzieląc ją na bloki: baner, blok ciasteczek, lewy, prawy oraz stopkę. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: baner, poniżej blok ciasteczek, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.

    Pięć znaczników <section> z identyfikatorami: banner, cookies (blok ciasteczek), left, right i footer, w kolejności z obrazu 2. Ustawienie bloku lewego i prawego obok siebie zrobi CSS.

    biuro.php PHP zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
    </section>
    <section id="cookies">
    </section>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <section id="footer">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  12. Krok 12: Baner: „Podróże z uśmiechem”

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek pierwszego stopnia o treści „Podróże z uśmiechem”.

    <h1> w bloku banera. Blok ciasteczek zostaje na razie pusty - wypełni go skrypt PHP.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <section id="footer">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  13. Krok 13: Blok lewy: „Nasze wycieczki”

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku lewego: nagłówek drugiego stopnia o treści: „Nasze wycieczki”.

    Nagłówek drugiego stopnia <h2>.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
    </section>
    <section id="right">
    </section>
    <section id="footer">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  14. Krok 14: Lista numerowana z dwiema listami punktowanymi

    Kryteria:

    R.2.8 W bloku lewym umieszczono listę numerowaną z zagnieżdżonymi dwiema listami punktowanymi o elementach zgodnych z obrazem 3, zastosowano znaczniki <ol>, <ul>, <li> oraz ich zamknięcia

    ok. 3 min
    Polecenie z arkusza

    Zawartość bloku lewego: lista numerowana (uporządkowana) z dwoma zagnieżdżonymi listami punktowanymi (nieuporządkowanymi), której treść przedstawia obraz 3.

    Lista zewnętrzna to <ol> z dwoma elementami: „autokarowe” i „samolotem”. Lista zagnieżdżona stoi wewnątrz elementu <li> - po jego tekście, przed zamknięciem </li>:

    • „autokarowe” → <ul> z „po Polsce”, „do Niemiec i Czech”,
    • „samolotem” → <ul> z „Grecja”, „Barcelona”, „Wenecja”.

    Przeglądarka sama numeruje listę zewnętrzną (1., 2.) i rysuje okręgi przy zagnieżdżonej, jak na obrazie 3.

    Typowe błędy

    <ul> wstawione między dwa <li> (po </li>) to błąd składni listy - lista zagnieżdżona musi być wewnątrz elementu.

    biuro.php PHP zmienione: 15 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
    </section>
    <section id="right">
    </section>
    <section id="footer">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  15. Krok 15: Blok lewy: „Pobierz dokumenty”

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku lewego: nagłówek drugiego stopnia o treści: „Pobierz dokumenty”.

    Drugi nagłówek <h2> pod listą.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
    </section>
    <section id="right">
    </section>
    <section id="footer">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  16. Krok 16: Plik regulamin.txt

    ok. 1 min
    Polecenie z arkusza

    Należy utworzyć plik tekstowy o nazwie regulamin.txt, z treścią „Regulamin”.

    Zwykły plik tekstowy (np. w Notatniku) z jednym słowem Regulamin, zapisany w folderze zdającego. Za chwilę strona dostanie do niego odnośnik - kliknięcie wyświetli plik w przeglądarce.

    regulamin.txt Tekst nowy plik 
    Regulamin

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

  17. Krok 17: Akapit z odnośnikiem do regulaminu

    Kryteria: ,

    R.3.2 Na stronie zapisano odnośnik o treści "Regulamin biura podróży", którego kliknięcie powoduje wyświetlenie / pobranie dokumentu regulamin.txt

    R.2.4 W banerze zapisano h1: "Podróże z uśmiechem" oraz w bloku lewym zapisano dwa h2: "Nasze wycieczki" i "Pobierz dokumenty" oraz w bloku lewym zapisano przynajmniej jeden paragraf

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku lewego: akapit (paragraf) o treści „Regulamin biura podróży”, który jest odnośnikiem do dokumentu regulamin.txt.

    Odnośnik <a> wewnątrz akapitu <p>, adres względny regulamin.txt - plik leży w tym samym folderze. Z tym akapitem blok lewy ma komplet elementów sprawdzanych w R.2.4: <h1> w banerze, dwa <h2> i paragraf.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
    </section>
    <section id="right">
    </section>
    <section id="footer">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  18. Krok 18: Akapit z odnośnikiem do galerii w nowym oknie

    Kryteria: ,

    R.3.3 Na stronie zapisano odnośnik o treści "Zdjęcia z naszych wycieczek", którego kliknięcie powoduje otwarcie strony http://galeria.pl

    R.3.4 Odnośnik do strony zewnętrznej otwierany jest w osobnym oknie przeglądarki

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku lewego: akapit o treści „Zdjęcia z naszych wycieczek”, który jest odnośnikiem do strony http://galeria.pl/. Odnośnik otwiera się w osobnym oknie.

    Adres bezwzględny z http:// i target="_blank" - przeglądarka otwiera stronę w nowej karcie albo oknie.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank">Zdjęcia z naszych wycieczek</a></p>
    </section>
    <section id="right">
    </section>
    <section id="footer">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  19. Krok 19: Blok prawy: tabela 2 × 2 ze zdjęciami

    Kryteria: ,

    R.2.5 W bloku prawym zapisano tabelę o wymiarze: 2 x 2, zastosowano znaczniki <table>, <tr>, <td> oraz ich zamknięcia

    R.2.6 W komórkach tabeli umieszczono obrazy: polska.jpg, wlochy.jpg, grecja.jpg, hiszpania.jpg , ich rozmieszczenie jest zgodne z obrazem 2 arkusza

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku prawego: tabela 2x2, w komórkach tabeli znajdują się obrazy, kolejno: polska.jpg, wlochy.jpg, grecja.jpg, hiszpania.jpg.

    <table> z dwoma wierszami <tr>, w każdym dwie komórki <td>. Kolejność obrazów jak w arkuszu i na obrazie 2: w pierwszym wierszu Kraków i Wenecja, w drugim Grecja i Barcelona. Teksty alternatywne dochodzą w następnych krokach.

    biuro.php PHP zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank">Zdjęcia z naszych wycieczek</a></p>
    </section>
    <section id="right">
        <table>
            <tr>
                <td><img src="polska.jpg"></td>
                <td><img src="wlochy.jpg"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg"></td>
                <td><img src="hiszpania.jpg"></td>
            </tr>
        </table>
    </section>
    <section id="footer">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  20. Krok 20: Teksty alternatywne: Kraków i Wenecja

    Kryteria:

    R.2.7 Nadano tekst alternatywny dla przynajmniej dwóch obrazów: „Zwiedzanie Krakowa” - polska.jpg ; " Wenecja i nie tylko" - wlochy.jpg ; „Gorące greckie wyspy” - grecja.jpg ; „Słoneczna Barcelona” - hiszpania.jpg

    ok. 1 min
    Polecenie z arkusza

    W komórkach tabeli znajdują się obrazy, kolejno: polska.jpg z tekstem alternatywnym „Zwiedzanie Krakowa”, wlochy.jpg z tekstem alternatywnym „Wenecja i nie tylko”.

    Atrybut alt - tekst, który przeczyta czytnik ekranu i który przeglądarka pokaże, gdy obrazu nie da się wczytać. Klucz R.2.7 wymaga co najmniej dwóch poprawnych tekstów - dwa pierwsze już go spełniają.

    biuro.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank">Zdjęcia z naszych wycieczek</a></p>
    </section>
    <section id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg"></td>
                <td><img src="hiszpania.jpg"></td>
            </tr>
        </table>
    </section>
    <section id="footer">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  21. Krok 21: Teksty alternatywne: Grecja i Barcelona

    ok. 1 min
    Polecenie z arkusza

    Dalej: grecja.jpg z tekstem alternatywnym „Gorące greckie wyspy”, hiszpania.jpg z tekstem alternatywnym „Słoneczna Barcelona”.

    Dwa pozostałe teksty - arkusz wymaga wszystkich czterech, choć punkt przyznaje już za dwa.

    biuro.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank">Zdjęcia z naszych wycieczek</a></p>
    </section>
    <section id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </section>
    <section id="footer">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  22. Krok 22: Stopka: autor strony

    Kryteria:

    R.2.9 W stopce umieszczono numer zdającego

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: tekst „Stronę przygotował: ”, dalej wstawiony numer zdającego.

    Na egzaminie numer zdającego (PESEL) - tu imię i nazwisko autora rozwiązania.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank">Zdjęcia z naszych wycieczek</a></p>
    </section>
    <section id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </section>
    <section id="footer">
        Stronę przygotował: Bartosz Bryniarski
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  23. Etap 3: Styl CSS

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

    Krok 23: Plik styl.css: krój Georgia

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Cechy formatowania CSS: wspólne dla całej strony: krój czcionki Georgia.

    Selektor uniwersalny * ustawia krój każdemu elementowi strony - także nagłówkom i komórkom tabeli.

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

  24. Krok 24: Baner i stopka

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla banera i stopki: kolor tła Indigo, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 7 px.

    Jedna reguła z dwoma selektorami po przecinku. padding to margines wewnętrzny - odstęp tekstu od krawędzi bloku.

    styl.css CSS zmienione: 7 linii 
    * {
    font-family: Georgia;
}

#banner, #footer {
    background-color: Indigo;
    color: white;
    text-align: center;
    padding: 7px;
}
    Podgląd strony po tym kroku (biuro.php)

  25. Krok 25: Blok ciasteczek

    Kryteria: ,

    R.4.6 Ustawiono wyrównanie tekstu do środka dla banera i stopki oraz do prawej strony dla bloku ciasteczek

    R.4.7 Ustawiono marginesy wewnętrzne (padding) 7px dla banera i stopki, 10px dla bloku ciasteczek

    ok. 1 min
    Polecenie z arkusza

    Dla bloku ciasteczek: kolor tła #A1887F, biały kolor czcionki, marginesy wewnętrzne 10 px, wyrównanie tekstu do prawej strony.

    Kolor w zapisie szesnastkowym #A1887F (szarobrązowy), tekst przy prawej krawędzi. Napis pojawi się w tym bloku po dodaniu skryptu. Z tą regułą komplet wyrównań (R.4.6) i marginesów wewnętrznych (R.4.7) jest gotowy.

    styl.css CSS zmienione: 7 linii 
    * {
    font-family: Georgia;
}

#banner, #footer {
    background-color: Indigo;
    color: white;
    text-align: center;
    padding: 7px;
}

#cookies {
    background-color: #A1887F;
    color: white;
    padding: 10px;
    text-align: right;
}
    Podgląd strony po tym kroku (biuro.php)

  26. Krok 26: Blok lewy

    ok. 1 min
    Polecenie z arkusza

    Dla bloku lewego: kolor tła #D7CCC8, szerokość 35%, wysokość 550 px.

    Kolor #D7CCC8, 35% szerokości strony, 550 px wysokości.

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: Georgia;
}

#banner, #footer {
    background-color: Indigo;
    color: white;
    text-align: center;
    padding: 7px;
}

#cookies {
    background-color: #A1887F;
    color: white;
    padding: 10px;
    text-align: right;
}

#left {
    background-color: #D7CCC8;
    width: 35%;
    height: 550px;
}
    Podgląd strony po tym kroku (biuro.php)

  27. Krok 27: Blok prawy

    Kryteria: ,

    R.4.2 Ustawiono kolor tła Indigo dla banera i stopki, #A1887F dla bloku ciasteczek oraz #D7CCC8 dla bloków prawego i lewego

    R.4.5 Ustawiono szerokość bloku lewego 35% i prawego 65%

    ok. 1 min
    Polecenie z arkusza

    Dla bloku prawego: kolor tła #D7CCC8, szerokość 65%, wysokość 550 px.

    Ten sam kolor i wysokość, 65% szerokości - razem z blokiem lewym 100%. Kolory tła wszystkich bloków (R.4.2) i szerokości (R.4.5) są już ustawione.

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: Georgia;
}

#banner, #footer {
    background-color: Indigo;
    color: white;
    text-align: center;
    padding: 7px;
}

#cookies {
    background-color: #A1887F;
    color: white;
    padding: 10px;
    text-align: right;
}

#left {
    background-color: #D7CCC8;
    width: 35%;
    height: 550px;
}

#right {
    background-color: #D7CCC8;
    width: 65%;
    height: 550px;
}
    Podgląd strony po tym kroku (biuro.php)

  28. Krok 28: Układ: blok lewy i prawy obok siebie

    Kryteria:

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

    ok. 3 min
    Polecenie z arkusza

    Podział strony na bloki: baner, poniżej blok ciasteczek, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.

    Bloki <section> domyślnie stoją jeden pod drugim. float: left w obu blokach ustawia je obok siebie (35% + 65% mieści się dokładnie w szerokości strony), a clear: both w stopce każe jej zacząć się dopiero pod nimi - bez tego stopka wsunęłaby się pod pływające bloki.

    Pomiar w Chrome przy oknie 1280 px: blok ciasteczek tuż pod banerem, bloki lewy i prawy w jednym wierszu, oba po 550 px wysokości, stopka bezpośrednio pod nimi, bez poziomego paska przewijania.

    Typowe błędy

    Domyślny margines strony (8 px) plus float z szerokościami w procentach mieści się, ale dodanie bloczkom obramowania albo padding przy 35% + 65% przenosi blok prawy do następnej linii.

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: Georgia;
}

#banner, #footer {
    background-color: Indigo;
    color: white;
    text-align: center;
    padding: 7px;
}

#cookies {
    background-color: #A1887F;
    color: white;
    padding: 10px;
    text-align: right;
}

#left {
    float: left;
    background-color: #D7CCC8;
    width: 35%;
    height: 550px;
}

#right {
    float: left;
    background-color: #D7CCC8;
    width: 65%;
    height: 550px;
}

#footer {
    clear: both;
}
    Podgląd strony po tym kroku (biuro.php)

  29. Krok 29: Lista punktowana i odnośniki w kolorze Indigo

    Kryteria:

    R.4.3 Ustawiono biały kolor czcionki dla banera, bloku ciasteczek i stopki oraz Indigo dla listy punktowanej i odnośnika

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla selektora listy punktowanej oraz odnośnika: kolor czcionki Indigo.

    Selektor ul obejmuje obie zagnieżdżone listy punktowane, a - oba odnośniki. Tekst biały w banerze, bloku ciasteczek i stopce plus Indigo tutaj dają komplet kolorów czcionki (R.4.3).

    styl.css CSS zmienione: 4 linie 
    * {
    font-family: Georgia;
}

#banner, #footer {
    background-color: Indigo;
    color: white;
    text-align: center;
    padding: 7px;
}

#cookies {
    background-color: #A1887F;
    color: white;
    padding: 10px;
    text-align: right;
}

#left {
    float: left;
    background-color: #D7CCC8;
    width: 35%;
    height: 550px;
}

#right {
    float: left;
    background-color: #D7CCC8;
    width: 65%;
    height: 550px;
}

#footer {
    clear: both;
}

ul, a {
    color: Indigo;
}
    Podgląd strony po tym kroku (biuro.php)

  30. Krok 30: Obrazy: wysokość, marginesy, zaokrąglone rogi

    Kryteria: , ,

    R.4.4 Ustawiono wysokość bloku lewego i prawego na 550px oraz 240px dla obrazu

    R.4.8 Ustawiono marginesy zewnętrzne (margin) 6px dla obrazu

    R.4.9 Ustawiono zaokrąglenie rogów 20px dla obrazu (border-radius)

    ok. 2 min
    Polecenie z arkusza

    Dla selektora obrazu: wysokość 240 px, marginesy zewnętrzne 6 px, zaokrąglenie rogów 20 px.

    height: 240px bez szerokości - przeglądarka dobiera szerokość proporcjonalnie (zdjęcia 500 × 310 mają na stronie 387 × 240 px). margin to margines zewnętrzny, border-radius zaokrągla rogi. Z tą regułą komplet wysokości (R.4.4): bloki 550 px i obrazy 240 px.

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: Georgia;
}

#banner, #footer {
    background-color: Indigo;
    color: white;
    text-align: center;
    padding: 7px;
}

#cookies {
    background-color: #A1887F;
    color: white;
    padding: 10px;
    text-align: right;
}

#left {
    float: left;
    background-color: #D7CCC8;
    width: 35%;
    height: 550px;
}

#right {
    float: left;
    background-color: #D7CCC8;
    width: 65%;
    height: 550px;
}

#footer {
    clear: both;
}

ul, a {
    color: Indigo;
}

img {
    height: 240px;
    margin: 6px;
    border-radius: 20px;
}
    Podgląd strony po tym kroku (biuro.php)

  31. Krok 31: Cień pod kursorem

    Kryteria:

    R.4.10 Gdy kursor myszy znajdzie się na obrazie dodawany jest cień o parametrach: bez przesunięcia, rozmycie 10px, szerokość rozmycia 2px kolor Indigo np. box-shadow: 0 0 10px 2px Indigo;

    ok. 2 min
    Polecenie z arkusza

    Gdy kursor myszy znajdzie się na obrazie dodawany jest cień o parametrach: bez przesunięcia, rozmycie 10 px, szerokość rozmycia 2 px, kolor Indigo. Cień jest widoczny na obrazie 2 dla czarno-białego zdjęcia.

    Pseudoklasa :hover działa, gdy kursor jest nad obrazem. Wartości box-shadow idą w kolejności z pomocy na końcu arkusza: przesunięcie poziome 0, pionowe 0 (bez przesunięcia), rozmycie 10px, rozciągnięcie 2px, kolor Indigo.

    styl.css CSS zmienione: 4 linie 
    * {
    font-family: Georgia;
}

#banner, #footer {
    background-color: Indigo;
    color: white;
    text-align: center;
    padding: 7px;
}

#cookies {
    background-color: #A1887F;
    color: white;
    padding: 10px;
    text-align: right;
}

#left {
    float: left;
    background-color: #D7CCC8;
    width: 35%;
    height: 550px;
}

#right {
    float: left;
    background-color: #D7CCC8;
    width: 65%;
    height: 550px;
}

#footer {
    clear: both;
}

ul, a {
    color: Indigo;
}

img {
    height: 240px;
    margin: 6px;
    border-radius: 20px;
}

img:hover {
    box-shadow: 0 0 10px 2px Indigo;
}
    Podgląd strony po tym kroku (biuro.php)

  32. Etap 4: Skrypt PHP

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

    Krok 32: Ciasteczko przy pierwszej wizycie

    Kryteria: , ,

    R.5.1 Skrypt lub skrypty napisano w języku uruchamianym po stronie serwera, zawierają przynajmniej jedną zgodną ze składnią instrukcję

    R.5.2 W skrypcie zastosowano funkcję ustawiającą ciasteczko o nazwie „ciastko” i zawartości „1”. Np. setcookie("ciastko", "1");

    R.5.3 Funkcja setcookie jest wołana tylko, gdy nie jest ustawione ciasteczko

    ok. 3 min
    Polecenie z arkusza

    Skrypt w przypadku, gdy witryna jest wyświetlona po raz pierwszy: tworzy ciasteczko o nazwie „ciastko” i zawartości „1”, pozostałe parametry funkcji przyjmują wartości domyślne.

    Skrypt stoi na samym początku pliku, przed <!DOCTYPE html>. Ciasteczko jest nagłówkiem odpowiedzi HTTP, a nagłówki muszą wyjść do przeglądarki przed pierwszym znakiem strony - pomoc na końcu arkusza mówi o tym wprost.

    • $_COOKIE['ciastko'] - ciasteczko, które przeglądarka odesłała z żądaniem,
    • isset(...) - czy istnieje; wykrzyknik ! odwraca warunek: „ciasteczka jeszcze nie ma”, czyli pierwsza wizyta,
    • setcookie('ciastko', '1') - nazwa i wartość, reszta parametrów domyślna (ciasteczko żyje do zamknięcia przeglądarki).

    Sprawdzone na serwerze: bez ciasteczka odpowiedź ma nagłówek Set-Cookie: ciastko=1, a z ciasteczkiem - nie ma go wcale, więc setcookie wykonuje się tylko raz.

    Typowe błędy

    setcookie wstawione w bloku ciasteczek, po kodzie HTML, wywołuje ostrzeżenie „headers already sent” (gdy serwer nie buforuje wyjścia) i ciasteczko nie powstaje - strona nigdy nie powie „Witaj ponownie”.

    biuro.php PHP zmienione: 5 linii 
    <?php
if (!isset($_COOKIE['ciastko'])) {
    setcookie('ciastko', '1');
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank">Zdjęcia z naszych wycieczek</a></p>
    </section>
    <section id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </section>
    <section id="footer">
        Stronę przygotował: Bartosz Bryniarski
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  33. Krok 33: Komunikat przy pierwszej wizycie

    Kryteria:

    R.5.4 Na stronie, która jest otwarta w przeglądarce po raz pierwszy, skrypt wyświetla komunikat "Witaj! Nasza strona używa ciasteczek" w bloku ciasteczek

    ok. 2 min
    Polecenie z arkusza

    Skrypt w przypadku, gdy witryna jest wyświetlona po raz pierwszy: wyświetla tekst w akapicie (paragrafie) o treści: „Witaj! Nasza strona używa ciasteczek”.

    Drugi blok PHP stoi w bloku ciasteczek, bo tam ma się pojawić napis. Warunek ten sam co na początku pliku: przy pierwszej wizycie ciasteczka jeszcze nie ma w żądaniu - setcookie dopiero je wysłało i przeglądarka odda je przy następnym wczytaniu strony. echo wypisuje akapit <p> z tekstem „Witaj! Nasza strona używa ciasteczek”.

    biuro.php PHP zmienione: 5 linii 
    <?php
if (!isset($_COOKIE['ciastko'])) {
    setcookie('ciastko', '1');
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
        <?php
        if (!isset($_COOKIE['ciastko'])) {
            echo '<p>Witaj! Nasza strona używa ciasteczek</p>';
        }
        ?>
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank">Zdjęcia z naszych wycieczek</a></p>
    </section>
    <section id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </section>
    <section id="footer">
        Stronę przygotował: Bartosz Bryniarski
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  34. Krok 34: Komunikat przy kolejnej wizycie

    Kryteria:

    R.5.5 Na stronie, która jest otwarta w przeglądarce po raz kolejny, skrypt wyświetla komunikat "Witaj ponownie na naszej stronie"

    ok. 2 min
    Polecenie z arkusza

    W przypadku, gdy witryna jest wyświetlona po raz kolejny, skrypt wyświetla w akapicie tekst o treści „Witaj ponownie na naszej stronie”.

    Gałąź else wykonuje się, gdy ciasteczko już jest - czyli przy każdym kolejnym wczytaniu strony (odświeżenie, powrót z innej strony). Na podglądzie wynik drugiej wizyty: „Witaj ponownie na naszej stronie”. Sprawdzone na serwerze z zapamiętanym ciasteczkiem: pierwsze wczytanie - powitanie z informacją o ciasteczkach, drugie - „Witaj ponownie”. Na egzaminie sprawdzisz to klawiszem F5; od nowa zaczniesz po zamknięciu przeglądarki albo usunięciu ciasteczka.

    biuro.php PHP zmienione: 2 linie 
    <?php
if (!isset($_COOKIE['ciastko'])) {
    setcookie('ciastko', '1');
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
        <?php
        if (!isset($_COOKIE['ciastko'])) {
            echo '<p>Witaj! Nasza strona używa ciasteczek</p>';
        } else {
            echo '<p>Witaj ponownie na naszej stronie</p>';
        }
        ?>
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank">Zdjęcia z naszych wycieczek</a></p>
    </section>
    <section id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </section>
    <section id="footer">
        Stronę przygotował: Bartosz Bryniarski
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  35. Etap 5: Dobre praktyki (poza kluczem)

    Kroki 35-36 · po tym etapie masz 34 z 34 kryteriów (pkt)

    Krok 35: Odnośnik w nowym oknie: rel="noopener noreferrer"

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku lewego: akapit o treści „Zdjęcia z naszych wycieczek”, który jest odnośnikiem do strony http://galeria.pl/. Odnośnik otwiera się w osobnym oknie.

    Strona otwarta przez target="_blank" dostaje w JavaScripcie odwołanie window.opener do karty, z której ją otwarto - i może tę kartę podmienić (np. na fałszywą stronę logowania), gdy użytkownik patrzy na nową kartę. rel="noopener" odcina to odwołanie, noreferrer dodatkowo nie przekazuje adresu strony, z której przyszło kliknięcie. Nowe przeglądarki (Chrome od wersji 88, Firefox od 79) same traktują target="_blank" jak noopener, ale jawny atrybut chroni też w starszych i jest czytelny dla każdego, kto czyta kod.

    Stara linia zostaje w komentarzu HTML. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    biuro.php PHP zmienione: 2 linie 
    <?php
if (!isset($_COOKIE['ciastko'])) {
    setcookie('ciastko', '1');
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
        <?php
        if (!isset($_COOKIE['ciastko'])) {
            echo '<p>Witaj! Nasza strona używa ciasteczek</p>';
        } else {
            echo '<p>Witaj ponownie na naszej stronie</p>';
        }
        ?>
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <!-- <p><a href="http://galeria.pl/" target="_blank">Zdjęcia z naszych wycieczek</a></p> -->
        <p><a href="http://galeria.pl/" target="_blank" rel="noopener noreferrer">Zdjęcia z naszych wycieczek</a></p>
    </section>
    <section id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </section>
    <section id="footer">
        Stronę przygotował: Bartosz Bryniarski
    </section>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  36. Krok 36: Ciasteczko HttpOnly i SameSite

    ok. 3 min
    Polecenie z arkusza

    Skrypt w przypadku, gdy witryna jest wyświetlona po raz pierwszy: tworzy ciasteczko o nazwie „ciastko” i zawartości „1”, pozostałe parametry funkcji przyjmują wartości domyślne.

    Ciasteczko z wartościami domyślnymi jest widoczne dla każdego skryptu na stronie - w konsoli przeglądarki document.cookie pokazuje ciastko=1. Tu ciasteczko niczego nie zdradza, ale gdy w ciasteczku jest identyfikator sesji (logowanie), skrypt wstrzyknięty na stronę przez błąd XSS może je wykraść. Trzeci argument setcookie (tablica opcji, PHP 7.3+):

    • httponly - ciasteczko jedzie tylko w nagłówkach HTTP, document.cookie go nie widzi,
    • samesite = Lax - przeglądarka nie dołącza ciasteczka do żądań wysyłanych z obcych stron (formularze, obrazki), co utrudnia atak CSRF.

    Sprawdzone na serwerze: nagłówek odpowiedzi to teraz Set-Cookie: ciastko=1; HttpOnly; SameSite=Lax, a komunikaty działają jak wcześniej.

    Stara linia zostaje w komentarzu. Na egzaminie zostaw wersję wcześniejszą - arkusz każe pozostawić parametry domyślne, a klucz podaje przykład setcookie("ciastko", "1");.

    biuro.php PHP zmienione: 2 linie 
    <?php
if (!isset($_COOKIE['ciastko'])) {
    // setcookie('ciastko', '1');
    setcookie('ciastko', '1', ['httponly' => true, 'samesite' => 'Lax']);
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1>Podróże z uśmiechem</h1>
    </section>
    <section id="cookies">
        <?php
        if (!isset($_COOKIE['ciastko'])) {
            echo '<p>Witaj! Nasza strona używa ciasteczek</p>';
        } else {
            echo '<p>Witaj ponownie na naszej stronie</p>';
        }
        ?>
    </section>
    <section id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <!-- <p><a href="http://galeria.pl/" target="_blank">Zdjęcia z naszych wycieczek</a></p> -->
        <p><a href="http://galeria.pl/" target="_blank" rel="noopener noreferrer">Zdjęcia z naszych wycieczek</a></p>
    </section>
    <section id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </section>
    <section id="footer">
        Stronę przygotował: Bartosz Bryniarski
    </section>
</body>
</html>

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

  37. Etap 6: Oddanie pracy

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

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

    ok. 3 min
    Polecenie z arkusza

    Po zakończeniu pracy utwórz w folderze z numerem, którym został podpisany arkusz, plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Nagraj płytę z rezultatami pracy. W folderze powinny się znajdować pliki: biuro.php, grecja.jpg, hiszpania.jpg, polska.jpg, przeglądarka.txt, regulamin.txt, rozmycie.png, styl.css, wlochy.jpg, ewentualnie inne przygotowane pliki.

    W przeglądarka.txt nazwa przeglądarki, w której sprawdzasz stronę. W folderze zdającego: biuro.php, grecja.jpg, hiszpania.jpg, polska.jpg, przeglądarka.txt, regulamin.txt, rozmycie.png, styl.css i wlochy.jpg. Stronę sprawdzasz przez serwer (XAMPP, adres http://localhost/...), nie przez otwarcie pliku - plik .php otwarty z dysku pokaże kod zamiast wyniku. 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 35.

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