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

Rozwiązanie krok po kroku: Biuro wycieczek krajoznawczych z archiwum (Wersja podstawowa)

Biuro wycieczek krajoznawczych: baza egzamin4 (import pliku egzamin3.sql - osiem tabel, w zadaniu potrzebne są dwie: wycieczki i zdjecia), cztery zapytania - wycieczki niedostępne, zdjęcia posortowane malejąco po podpisie, zdjęcia połączone z wycieczkami tańszymi niż 1200 zł (JOIN) i usunięcie kolumny z tabeli (ALTER TABLE ... DROP). Do tego strona biuro.php z banerem, archiwum wycieczek, trzema blokami obok siebie (cennik, galeria, kontakt) i stopką, style w styl4.css oraz skrypt PHP, który z bazy buduje listę archiwalnych wycieczek i galerię zdjęć.

To arkusz EE.09 z czerwca 2020 - kwalifikacji formuły 2017, którą zastąpiła INF.03. Te same pliki (egzamin3.sql i zdjęcia) ma arkusz EE.09-02 z tej sesji (biuro podróży z galerią) - tam baza nazywa się egzamin3, a zapytania, układ i klucz są inne. 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, funkcjami mysqli z tabeli 1 arkusza, a na końcu sprawdzony na danych z cudzysłowem i zabezpieczony.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (flex, PDO)” jest drugi sposób rozwiązania tego samego arkusza: semantyczne znaczniki, układ bez float, PDO na górze pliku i bezpieczne wypisywanie danych - obie wersje są zgodne z kluczem.

Baza i zdjęcia pochodzą z oryginalnego archiwum CKE egzamin4.zip (załącznik do pobrania na stronie arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP, a podgląd od kroków z PHP to wynik prawdziwego uruchomienia kodu w PHP 8.2.

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

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

    ok. 2 min
    Polecenie z arkusza

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

    Na pulpicie tworzysz folder nazwany numerem PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum egzamin4.zip rozpakowujesz, podając hasło $poDrozE& - wielkość liter i znaki $ oraz & mają znaczenie (to te same znaki co w arkuszu EE.09-02, tylko zamienione miejscami). W środku jest plik egzamin3.sql i dziewięć zdjęć 1.jpg - 9.jpg (każde 500 × 333 px). Zdjęć nie trzeba przerabiać - wysokość ustawi CSS.

    Typowe błędy

    Pliki zapisane poza folderem zdającego (np. tylko w htdocs) nie trafią na płytę - a ocenia się wyłącznie to, co jest na płycie.

  2. Krok 2: XAMPP i pusta baza egzamin4

    ok. 2 min
    Polecenie z arkusza

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

    W XAMPP Control Panel klikasz Start przy Apache i MySQL, potem http://localhost/phpmyadmin. Nowa w lewym panelu, nazwa egzamin4, Utwórz. Uwaga: baza nazywa się egzamin4, a plik do importu - egzamin3.sql.

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

    Kryteria:

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

    ok. 3 min
    Polecenie z arkusza

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

    Zaznacz bazę egzamin4, karta Import, Wybierz plik → egzamin3.sql, Wykonaj. Plik tworzy osiem tabel - poza wycieczki i zdjecia także tabele z innych zadań. W zadaniu używasz tylko dwóch z obrazu 1. Po imporcie lista tabel w karcie Struktura - zrzut całego ekranu z paskiem zadań: import.png.

    W tabeli wycieczki pole dostepna ma wartość 1 (dostępna) albo 0, a zdjecia_id wskazuje id zdjęcia - to relacja między tabelami. Nazwy w danych są bez polskich liter (Wlochy, Paryz).

    Typowe błędy

    Zrzut importu w PNG (import.png), zrzuty kwerend w JPG - zły format albo wykadrowany zrzut nie jest oceniany.

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

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

    Kryteria: ,

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

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

    ok. 3 min
    Polecenie z arkusza

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

    Karta SQL bazy egzamin4:

    • SELECT id, cel, cena - trzy kolumny w kolejności, w której skrypt je wypisze,
    • FROM wycieczki,
    • WHERE dostepna = FALSE - FALSE to w MySQL i MariaDB po prostu 0 (klucz przyjmuje też = 0).

    Wynik: 3 wiersze o id 5, 7 i 8 - dokładnie jak w kluczu. Zapytanie zapisujesz w pliku kwerendy.txt, a cały ekran - jako kw1.jpg.

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

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

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

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

    • SELECT nazwaPliku, podpis FROM zdjecia,
    • ORDER BY podpis DESC - DESC odwraca kolejność: od Z do A.

    Wynik: 9 wierszy od Wenecji do Barcelony. Zrzut: kw2.jpg. W tej kolejności skrypt ułoży zdjęcia w galerii - pierwsza jest Wenecja (2.jpg), jak na obrazie 2.

    Typowe błędy

    Bez DESC sortowanie jest rosnące (domyślne ASC) - galeria zaczęłaby się od Barcelony.

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

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

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

    Kryteria:

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

    ok. 3 min
    Polecenie z arkusza

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

    • SELECT podpis, cena, cel - kolumny z dwóch tabel (podpis ze zdjęć, cena i cel z wycieczek),
    • FROM zdjecia JOIN wycieczki ON zdjecia.id = wycieczki.zdjecia_id - relacja: każda wycieczka łączy się ze zdjęciem, którego id zapisano w jej polu zdjecia_id,
    • WHERE cena < 1200 - „niższa niż” to ostre <, więc wycieczki za równe 1200 zł odpadają.

    Wynik: jeden wiersz - Warszawa, 640, „Polska, Warszawa”, zgodnie z kluczem. Zrzut: kw3.jpg.

    Typowe błędy

    cena <= 1200 dokłada trzy wycieczki za dokładnie 1200 zł (dwie do Wenecji i jedną do Paryża) - klucz wymaga jednego rekordu.

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

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

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

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

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: usuwające pole dataWyjazdu z tabeli wycieczki

    • ALTER TABLE wycieczki - zmiana struktury tabeli,
    • DROP dataWyjazdu - usunięcie kolumny razem z danymi (klucz przyjmuje też DROP COLUMN).

    phpMyAdmin odpowiada „MySQL zwrócił pusty wynik”, a karta Struktura tabeli nie ma już dataWyjazdu - zrzut tej karty to kw4.jpg. Skrypt nie korzysta z daty wyjazdu, więc usunięcie kolumny niczego na stronie nie psuje.

    Typowe błędy

    DROP bez słowa ALTER TABLE przed nim (DROP TABLE wycieczki) usuwa całą tabelę - przed uruchomieniem przeczytaj zapytanie jeszcze raz.

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

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

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

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

  8. Etap 2: Strona HTML

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

    Krok 8: Plik biuro.php

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Składa się ze strony o nazwie biuro.php

    Plik biuro.php w folderze zdającego, obok zdjęć. Rozszerzenie .php, bo dojdzie skrypt - na razie szkielet HTML5: <!DOCTYPE html> i lang="pl" (R.2.1).

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

  9. Krok 9: Kodowanie polskich znaków

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    <meta charset="UTF-8"> jako pierwszy element <head>, a plik zapisany w UTF-8 - inaczej „PODRÓŻY” i „BYLIŚMY” wyświetlą się z krzaczkami (R.2.2).

    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)

  10. Krok 10: Tytuł strony

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Wycieczki krajoznawcze”

    <title>Wycieczki krajoznawcze</title> w <head> (R.2.3).

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

  11. Krok 11: Podpięcie arkusza stylów styl4.css

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    <link rel="stylesheet" href="styl4.css"> w <head>. Plik stylów powstanie po HTML-u (R.3.3).

    Typowe błędy

    Klucz uznaje R.3.3 tylko wtedy, gdy całe formatowanie pochodzi z tego pliku i każdy selektor trafia w swój blok (kropka zamiast # odbiera punkt).

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

  12. Krok 12: Bloki: baner, blok z danymi, trzy bloki obok siebie, stopka

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: na górze baner, poniżej blok z danymi, poniżej obok siebie trzy bloki: lewy, środkowy i prawy, poniżej stopka.

    Sześć bloków w kolejności z obrazu 2: baner, blok z danymi oraz bloki lewy, środkowy i prawy jako <section> z identyfikatorami banner, data, left, center, right (po angielsku - arkusz nazw nie narzuca), na dole <footer>. Inaczej niż w arkuszu EE.09-02 blok z danymi stoi nad trzema blokami (R.2.4).

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

  13. Krok 13: Baner: nagłówek „WITAMY W BIURZE PODRÓŻY”

    ok. 1 min
    Polecenie z arkusza

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

    <h1> - jedyny nagłówek pierwszego stopnia. Pozostałe bloki dostaną nagłówki trzeciego stopnia.

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

  14. Krok 14: Blok z danymi: nagłówek „ARCHIWUM WYCIECZEK”

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku z danymi: Nagłówek trzeciego stopnia o treści: „ARCHIWUM WYCIECZEK”

    <h3> - trzeciego stopnia. Pod nim stanie efekt skryptu 1 - lista wycieczek, których już nie ma w ofercie.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <section id="banner">
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </section>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <section id="left">
    </section>
    <section id="center">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  15. Krok 15: Blok lewy: nagłówek „NAJTANIEJ...”

    ok. 1 min
    Polecenie z arkusza

    Zawartość lewego bloku: Nagłówek trzeciego stopnia o treści: „NAJTANIEJ...”

    Trzy kropki są częścią treści nagłówka, jak na obrazie 2.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <section id="banner">
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </section>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <section id="left">
        <h3>NAJTANIEJ...</h3>
    </section>
    <section id="center">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  16. Krok 16: Tabela najniższych cen

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

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

    • <table> - cała tabela,
    • <tr> - wiersz; są trzy, po jednym na kraj,
    • <td> - komórka; w każdym wierszu dwie: kraj i cena.

    Każdy znacznik ma zamknięcie - klucz to sprawdza (R.2.6). Ceny zgadzają się z bazą: najtańsze wycieczki do Włoch i Francji kosztują 1200 zł, do Hiszpanii 1400 zł.

    biuro.php PHP zmienione: 14 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <section id="banner">
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </section>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <section id="left">
        <h3>NAJTANIEJ...</h3>
        <table>
            <tr>
                <td>Włochy</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Francja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Hiszpania</td>
                <td>od 1400 zł</td>
            </tr>
        </table>
    </section>
    <section id="center">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  17. Krok 17: Blok środkowy: nagłówek „TU BYLIŚMY”

    ok. 1 min
    Polecenie z arkusza

    Zawartość środkowego bloku: Nagłówek trzeciego stopnia o treści: „TU BYLIŚMY”

    Pod nagłówkiem stanie efekt skryptu 2 - galeria zdjęć z bazy.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <section id="banner">
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </section>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <section id="left">
        <h3>NAJTANIEJ...</h3>
        <table>
            <tr>
                <td>Włochy</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Francja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Hiszpania</td>
                <td>od 1400 zł</td>
            </tr>
        </table>
    </section>
    <section id="center">
        <h3>TU BYLIŚMY</h3>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  18. Krok 18: Blok prawy: nagłówek „SKONTAKTUJ SIĘ”

    ok. 1 min
    Polecenie z arkusza

    Zawartość prawego bloku: Nagłówek trzeciego stopnia o treści: „SKONTAKTUJ SIĘ”

    <h3>SKONTAKTUJ SIĘ</h3> - pod nim odnośnik i telefon.

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

  19. Krok 19: Odnośnik „napisz do nas”

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Odnośnik do adresu e-mail [email protected] o treści: „napisz do nas”

    Odnośnik do poczty ma w href przedrostek mailto: - kliknięcie otwiera program pocztowy z wpisanym adresatem. Treścią odnośnika jest „napisz do nas” (R.3.2).

    Typowe błędy

    href="[email protected]" bez mailto: przeglądarka potraktuje jak plik na serwerze i pokaże błąd 404.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <section id="banner">
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </section>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <section id="left">
        <h3>NAJTANIEJ...</h3>
        <table>
            <tr>
                <td>Włochy</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Francja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Hiszpania</td>
                <td>od 1400 zł</td>
            </tr>
        </table>
    </section>
    <section id="center">
        <h3>TU BYLIŚMY</h3>
    </section>
    <section id="right">
        <h3>SKONTAKTUJ SIĘ</h3>
        <a href="mailto:[email protected]">napisz do nas</a>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  20. Krok 20: Paragraf z telefonem

    ok. 1 min
    Polecenie z arkusza

    Paragraf (akapit) o treści „telefon: 555666777”

    <p> - akapit zaczyna się w nowej linii, pod odnośnikiem.

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

  21. Krok 21: Stopka: paragraf z autorem strony

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    Na egzaminie po dwukropku wpisujesz swój numer PESEL; w tym rozwiązaniu w jego miejscu stoi Bartosz Bryniarski. Strona ma teraz <h1> w banerze, cztery <h3> i paragrafy (R.2.5).

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

  22. Etap 3: Styl CSS

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

    Krok 22: Plik styl4.css: krój Tahoma dla całej strony

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    Nowy plik styl4.css. Selektor uniwersalny * obejmuje każdy element strony (R.4.1).

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

  23. Krok 23: Baner i stopka

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

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

    Dwa selektory po przecinku - jedna wspólna reguła. Kolor rgb(107, 142, 35) wprost z arkusza (oliwkowa zieleń, #6B8E23). Biały tekst banera i stopki daje R.4.3.

    styl4.css CSS zmienione: 6 linii 
    * {
    font-family: Tahoma;
}
#banner, footer {
    background-color: rgb(107, 142, 35);
    color: white;
    text-align: center;
    padding: 3px;
}
    Podgląd strony po tym kroku (biuro.php)

  24. Krok 24: Blok z danymi

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    Brzoskwiniowe tło i padding: 3px - marginesy wewnętrzne banera, stopki i bloku z danymi są ustawione (R.4.7).

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

  25. Krok 25: Bloki lewy i prawy

    ok. 1 min
    Polecenie z arkusza

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

    Jaśniejsze tło (#FFEFD5) i po 27% szerokości strony na każdy z bocznych bloków.

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

  26. Krok 26: Blok środkowy

    Kryteria: , ,

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

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

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

    ok. 1 min
    Polecenie z arkusza

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

    27% + 46% + 27% = 100% - trzy bloki zmieszczą się w jednym rzędzie, jeśli nie dostaną obramowań ani padding. Tła wszystkich bloków (R.4.2), ich wysokość (R.4.4) i szerokości (R.4.5) są ustawione.

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

  27. Krok 27: Nagłówki trzeciego stopnia do środka

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Dla znacznika nagłówka trzeciego stopnia: wyrównanie tekstu do środka

    Selektor znacznika h3 obejmuje wszystkie cztery nagłówki bloków. Razem z wyśrodkowaniem banera i stopki daje R.4.6.

    styl4.css CSS zmienione: 3 linie 
    * {
    font-family: Tahoma;
}
#banner, footer {
    background-color: rgb(107, 142, 35);
    color: white;
    text-align: center;
    padding: 3px;
}
#data {
    background-color: rgb(255, 218, 185);
    padding: 3px;
}
#left, #right {
    background-color: rgb(255, 239, 213);
    width: 27%;
    height: 550px;
}
#center {
    background-color: rgb(255, 239, 213);
    width: 46%;
    height: 550px;
}
h3 {
    text-align: center;
}
    Podgląd strony po tym kroku (biuro.php)

  28. Krok 28: Zielona pierwsza litera nagłówków

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Dla pierwszej litery nagłówka trzeciego stopnia (pseudoelement): zielony kolor czcionki

    Pseudoelement ::first-letter wybiera tylko pierwszą literę elementu - „A” w „ARCHIWUM”, „N” w „NAJTANIEJ...”, jak na obrazie 2. Klucz przyjmuje dowolny odcień zieleni (R.4.8).

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

  29. Krok 29: Obrazy: wysokość i marginesy wewnętrzne

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Dla obrazu: wysokość 90 px, marginesy wewnętrzne 7 px

    Ustawiona sama wysokość - szerokość przeglądarka dobierze z proporcji zdjęcia (500 × 333 px), więc obraz ma ok. 135 × 90 px. padding: 7px tworzy ramkę, w której pojawi się tło (R.4.9).

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

  30. Krok 30: Tło obrazu pod kursorem

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    W momencie, gdy kursor znajduje się na obrazie, styl obrazu zmienia się na: kolor tła RGB 255, 218, 185

    Pseudoklasa :hover działa tylko wtedy, gdy kursor jest nad elementem. Tło widać wyłącznie w polu padding - zdjęcie zasłania resztę (R.4.10).

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

  31. Krok 31: Układ bloków zgodny z obrazem 2

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

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

    • trzy bloki float: left stają obok siebie: 27% + 46% + 27%,
    • stopka z clear: both zaczyna się dopiero pod nimi - bez tego wsunęłaby się pod pływające bloki,
    • baner i blok z danymi są zwykłymi blokami nad nimi.

    Trzy bloki mają tę samą wysokość 550 px, więc ich tło tworzy jeden pas (R.3.1).

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

  32. Etap 4: Skrypt PHP

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

    Krok 32: Połączenie z bazą egzamin4

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

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

    Na samej górze biuro.php, przed <!DOCTYPE html>, pierwszy blok PHP. Funkcja mysqli_connect z tabeli 1 arkusza: serwer localhost, użytkownik root, puste hasło '' i nazwa bazy egzamin4 (nie egzamin3, choć tak nazywa się plik SQL) - czwarty argument od razu wybiera bazę (R.5.1). Z połączenia skorzystają oba skrypty: lista w bloku z danymi i galeria w bloku środkowym.

    Od tego kroku podgląd to wynik prawdziwego uruchomienia w PHP 8.2; stronę sprawdzasz przez http://localhost/….

    biuro.php PHP zmienione: 3 linie 
    <?php
$connection = mysqli_connect('localhost', 'root', '', 'egzamin4');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <section id="banner">
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </section>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
    </section>
    <section id="left">
        <h3>NAJTANIEJ...</h3>
        <table>
            <tr>
                <td>Włochy</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Francja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Hiszpania</td>
                <td>od 1400 zł</td>
            </tr>
        </table>
    </section>
    <section id="center">
        <h3>TU BYLIŚMY</h3>
    </section>
    <section id="right">
        <h3>SKONTAKTUJ SIĘ</h3>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 555666777</p>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  33. Krok 33: Skrypt 1: archiwum wycieczek

    Kryteria: ,

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

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

    ok. 3 min
    Polecenie z arkusza

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

    Blok PHP pod nagłówkiem „ARCHIWUM WYCIECZEK”:

    • mysqli_query z zapytaniem 1 z kwerendy.txt (R.5.3),
    • while ($row = mysqli_fetch_row($result)) - kolejne wiersze jako tablice: $row[0] to id, $row[1] - cel, $row[2] - cena,
    • echo jednej linii według wzoru: id, kropka, cel, przecinek i „cena: ”, a na końcu <br> - każda wycieczka w osobnej linii (R.5.4).

    Wynik: trzy linie - „5. Francja, Paryz, cena: 1350”, „7. Hiszpania, Barcelona, cena: 1500” i „8. Hiszpania, Barcelona, cena: 1500”, jak na obrazie 2.

    biuro.php PHP zmienione: 6 linii 
    <?php
$connection = mysqli_connect('localhost', 'root', '', 'egzamin4');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <section id="banner">
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </section>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
        <?php
        $result = mysqli_query($connection, "SELECT id, cel, cena FROM wycieczki WHERE dostepna = FALSE;");
        while ($row = mysqli_fetch_row($result)) {
            echo "$row[0]. $row[1], cena: $row[2]<br>";
        }
        ?>
    </section>
    <section id="left">
        <h3>NAJTANIEJ...</h3>
        <table>
            <tr>
                <td>Włochy</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Francja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Hiszpania</td>
                <td>od 1400 zł</td>
            </tr>
        </table>
    </section>
    <section id="center">
        <h3>TU BYLIŚMY</h3>
    </section>
    <section id="right">
        <h3>SKONTAKTUJ SIĘ</h3>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 555666777</p>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

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

    Kryteria: , ,

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

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

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

    ok. 4 min
    Polecenie z arkusza

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

    Blok PHP pod nagłówkiem „TU BYLIŚMY”:

    • mysqli_query z zapytaniem 2 (R.5.5),
    • w pętli echo znacznika <img>: $row[0] (nazwa pliku) w src, $row[1] (podpis) w alt (R.5.6, R.2.7).

    Cudzysłowy atrybutów wewnątrz napisu w cudzysłowie trzeba poprzedzić ukośnikiem: \". Wynik: 9 zdjęć w kolejności od Wenecji do Barcelony, po trzy w rzędzie, jak na obrazie 2.

    biuro.php PHP zmienione: 6 linii 
    <?php
$connection = mysqli_connect('localhost', 'root', '', 'egzamin4');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <section id="banner">
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </section>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
        <?php
        $result = mysqli_query($connection, "SELECT id, cel, cena FROM wycieczki WHERE dostepna = FALSE;");
        while ($row = mysqli_fetch_row($result)) {
            echo "$row[0]. $row[1], cena: $row[2]<br>";
        }
        ?>
    </section>
    <section id="left">
        <h3>NAJTANIEJ...</h3>
        <table>
            <tr>
                <td>Włochy</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Francja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Hiszpania</td>
                <td>od 1400 zł</td>
            </tr>
        </table>
    </section>
    <section id="center">
        <h3>TU BYLIŚMY</h3>
        <?php
        $result = mysqli_query($connection, "SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis DESC;");
        while ($row = mysqli_fetch_row($result)) {
            echo "<img src=\"$row[0]\" alt=\"$row[1]\">";
        }
        ?>
    </section>
    <section id="right">
        <h3>SKONTAKTUJ SIĘ</h3>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 555666777</p>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  35. Krok 35: Zamknięcie połączenia z bazą

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    mysqli_close($connection) po pętli skryptu 2 - galeria stoi niżej niż archiwum, więc to ostatnie zapytanie na stronie (R.5.2). Strona spełnia wszystkie kryteria arkusza.

    Typowe błędy

    mysqli_close zaraz po skrypcie 1 sprawia, że galeria dostaje zamknięte połączenie i PHP kończy się błędem.

    biuro.php PHP zmienione: 1 linia 
    <?php
$connection = mysqli_connect('localhost', 'root', '', 'egzamin4');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <section id="banner">
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </section>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
        <?php
        $result = mysqli_query($connection, "SELECT id, cel, cena FROM wycieczki WHERE dostepna = FALSE;");
        while ($row = mysqli_fetch_row($result)) {
            echo "$row[0]. $row[1], cena: $row[2]<br>";
        }
        ?>
    </section>
    <section id="left">
        <h3>NAJTANIEJ...</h3>
        <table>
            <tr>
                <td>Włochy</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Francja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Hiszpania</td>
                <td>od 1400 zł</td>
            </tr>
        </table>
    </section>
    <section id="center">
        <h3>TU BYLIŚMY</h3>
        <?php
        $result = mysqli_query($connection, "SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis DESC;");
        while ($row = mysqli_fetch_row($result)) {
            echo "<img src=\"$row[0]\" alt=\"$row[1]\">";
        }
        mysqli_close($connection);
        ?>
    </section>
    <section id="right">
        <h3>SKONTAKTUJ SIĘ</h3>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 555666777</p>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

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

  36. Etap 5: Dobre praktyki (poza kluczem)

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

    Krok 36: Zabezpieczenie: htmlspecialchars przy wypisywaniu danych z bazy

    ok. 3 min

    Strona nie ma formularza, więc zapytania nie zawierają danych od użytkownika i zapytania przygotowane nie są tu potrzebne. Słaby punkt jest gdzie indziej: dane z bazy trafiają wprost do HTML-u. Sprawdzone na prawdziwej stronie - wystarczy, że w tabeli zdjecia pojawi się podpis z cudzysłowem, np. Moskwa - "Plac Czerwony":

    • wersja z poprzednich kroków wypisała alt="Moskwa - "Plac Czerwony"" - pierwszy cudzysłów w danych zamknął atrybut, więc tekst alternatywny to tylko „Moskwa - ”, a reszta stała się śmieciowymi atrybutami,
    • w ten sam sposób ktoś, kto ma dostęp do tabeli (np. przez panel biura), mógłby dopisać do podpisu atrybut onerror z kodem JavaScript, który uruchamiałby się u każdego odwiedzającego.

    htmlspecialchars zamienia " na &quot;, < na &lt; i & na &amp;, więc przeglądarka pokazuje znaki, zamiast traktować je jak kod. Stosuje się ją przy każdym wypisaniu danych z bazy - tu w archiwum i w galerii. Stare linie zostają w komentarzu. Podgląd: strona z tym podpisem - tekst alternatywny jest pełny.

    biuro.php PHP zmienione: 4 linie 
    <?php
$connection = mysqli_connect('localhost', 'root', '', 'egzamin4');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wycieczki krajoznawcze</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <section id="banner">
        <h1>WITAMY W BIURZE PODRÓŻY</h1>
    </section>
    <section id="data">
        <h3>ARCHIWUM WYCIECZEK</h3>
        <?php
        $result = mysqli_query($connection, "SELECT id, cel, cena FROM wycieczki WHERE dostepna = FALSE;");
        while ($row = mysqli_fetch_row($result)) {
            // echo "$row[0]. $row[1], cena: $row[2]<br>";
            echo htmlspecialchars("$row[0]. $row[1], cena: $row[2]") . '<br>';
        }
        ?>
    </section>
    <section id="left">
        <h3>NAJTANIEJ...</h3>
        <table>
            <tr>
                <td>Włochy</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Francja</td>
                <td>od 1200 zł</td>
            </tr>
            <tr>
                <td>Hiszpania</td>
                <td>od 1400 zł</td>
            </tr>
        </table>
    </section>
    <section id="center">
        <h3>TU BYLIŚMY</h3>
        <?php
        $result = mysqli_query($connection, "SELECT nazwaPliku, podpis FROM zdjecia ORDER BY podpis DESC;");
        while ($row = mysqli_fetch_row($result)) {
            // echo "<img src=\"$row[0]\" alt=\"$row[1]\">";
            echo '<img src="' . htmlspecialchars($row[0]) . '" alt="' . htmlspecialchars($row[1]) . '">';
        }
        mysqli_close($connection);
        ?>
    </section>
    <section id="right">
        <h3>SKONTAKTUJ SIĘ</h3>
        <a href="mailto:[email protected]">napisz do nas</a>
        <p>telefon: 555666777</p>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  37. Etap 6: Oddanie pracy

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

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

    ok. 5 min
    Polecenie z arkusza

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

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

    W folderze z numerem zdającego muszą być: biuro.php, import.png, kw1.jpg - kw4.jpg, kwerendy.txt, styl4.css, przeglądarka.txt oraz zdjęcia 1.jpg - 9.jpg (strona z nich korzysta). Nagraj płytę, sprawdź jej odczyt, opisz ją numerem PESEL i zostaw w pudełku na stanowisku razem z arkuszem.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

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

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