Przejdź do głównej treści
INF.03-02-23.01-SGStyczeń 2023 · 39 kroków · ok. 66 min · 33 kryteria z klucza

Rozwiązanie krok po kroku: Witryna pensjonatu z cennikiem (Wersja podstawowa)

Witryna pensjonatu „Pod dobrym humorem” to baza wynajem (pokoje i rezerwacje) z pięcioma zapytaniami - wszystkie wiersze, warunek na liczbie, SUM, UPDATE z warunkiem i CREATE USER z hasłem - trzy zdjęcia pokoi przerobione z BMP na JPEG 300 × 300 w odcieniach szarości oraz trzy strony. index.html ma baner, trzy bloki z odnośnikami i zdjęciami oraz stopkę; cennik.php różni się od niej tylko blokiem środkowym, w którym skrypt PHP wypisuje tabelę cen pokoi; kalkulator.html to strona w budowie. Wspólny arkusz stylów styl2.css daje blokom cień (box-shadow), a odnośnikom zmianę koloru pod kursorem.

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 najpierw napisany najprościej, funkcjami z tabeli 1 arkusza (mysqli_query, mysqli_fetch_row), a na końcu przerobiony na wersję z prawdziwych projektów.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: trzy bloki w siatce CSS wewnątrz znacznika <main>, kolory w zmiennych CSS, a cennik pobierany przez PDO na górze pliku cennik.php i wypisywany pętlą foreach z htmlspecialchars oraz komunikatem, gdy bazy nie da się odczytać - obie wersje są zgodne z kluczem.

Baza i zdjęcia pochodzą z prawdziwego archiwum zad2 (załącznik do arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP; konto najemca zostało sprawdzone prawdziwym logowaniem. Podgląd strony cennik.php od kroków z PHP to wynik prawdziwego uruchomienia kodu w PHP 8.2 (klucz każe sprawdzać w XAMPP 8.1.2 - zachowanie tych funkcji jest w obu wersjach takie samo).

Jak liczą się punkty. Klucz ma 33 kryteria (R.1.1 - R.5.4), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 25 punktów - można stracić 8 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

  1. Etap 1: Baza danych

    Kroki 1-8 · po tym etapie masz 7 z 33 kryteriów (pkt)

    Krok 1: Baza danych wynajem

    ok. 2 min
    Polecenie z arkusza

    Utwórz bazę danych o nazwie wynajem

    Najpierw archiwum zad2.zip z pulpitu (hasło MN52dc%% - z dwoma znakami procentu na końcu) i folder z numerem zdającego, do którego trafiają wynajem.sql i trzy zdjęcia BMP. W phpMyAdmin: Nowa, nazwa wynajem. Arkusz nie podaje porównywania - wybierasz np. utf8_polish_ci. Tabel z wynajem.sql to nie zmienia: obie mają zestaw utf8mb4 zapisany we własnej definicji, a porównywanie bazy dziedziczą tylko tabele zakładane później bez własnego ustawienia.

    Typowe błędy

    Nazwa bazy musi brzmieć dokładnie wynajem - skrypt łączy się z bazą po nazwie (R.5.1).

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

    ok. 2 min
    Polecenie z arkusza

    Do bazy wynajem zaimportuj tabele z pliku wynajem.sql z rozpakowanego archiwum

    Przy zaznaczonej bazie wynajem: Import → wynajem.sql → Wykonaj. Dwie tabele z obrazu 1: pokoje (3 rodzaje pokoi z ceną) i rezerwacje (10 rezerwacji: numer pokoju id_pok, liczba dni liczba_dn i sezon „lato” albo „zima”). Pole id_pok jest kluczem obcym wskazującym pokój.

  3. Krok 3: Zrzut ekranu import.png

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.

    Print Screen, wklejenie do edytora grafiki i zapis jako import.png. Uwaga na formaty: import idzie do PNG, a zrzuty zapytań do JPEG.

    Typowe błędy

    Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).

  4. Krok 4: Zapytanie 1: wszystkie pokoje

    Kryteria: ,

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

    R.1.3 Utworzono zapytanie 1 wybierające wszystkie wiersze z tabeli pokoje . W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT * FROM pokoje; oraz wynik działania udokumentowano zrzutem, na którym widoczne są wszystkie dane z tabeli: trzy rekordy z polami id, nazwa, cena

    ok. 1 min
    Polecenie z arkusza

    Zapytanie 1: wybierające wszystkie wiersze z tabeli pokoje

    • SELECT * - wszystkie pola,
    • FROM pokoje - bez warunku, więc wszystkie wiersze.

    Wynik: trzy pokoje z polami id, nazwa, cena - jak w kluczu. Z tego zapytania powstanie skrypt cennika. Zapytania trafiają do kwerendy.txt, zrzut wyniku do kw1.jpg.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT * FROM pokoje;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: rezerwacje dłuższe niż tydzień

    Kryteria:

    R.1.4 Utworzono zapytanie 2 wybierające z tabeli rezerwacje jedynie id pokoju oraz sezon dla rezerwacji o liczbie dni przekraczającej tydzień. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT id_pok, sezon FROM rezerwacje WHERE liczba_dn > 7; oraz wynik działania udokumentowano zrzutem, na którym widoczne są dokładnie 3 rekordy z danymi: 1, lato; 3, zima; 1, zima

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 2: wybierające z tabeli rezerwacje jedynie id pokoju oraz sezon dla rezerwacji o liczbie dni przekraczającej tydzień

    • SELECT id_pok, sezon - numer pokoju (nie numer rezerwacji) i sezon,
    • FROM rezerwacje,
    • WHERE liczba_dn > 7 - „przekraczającej tydzień” to więcej niż 7 dni.

    Wynik: 3 wiersze - 1, lato; 3, zima; 1, zima - jak w kluczu. Zrzut: kw2.jpg.

    Typowe błędy

    liczba_dn >= 7 nic tu nie zmienia w wyniku (nie ma rezerwacji na 7 dni), ale nie jest tym, o co prosi arkusz - tydzień „przekroczony” to od 8 dni.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT * FROM pokoje;

-- Zapytanie 2
SELECT id_pok, sezon FROM rezerwacje WHERE liczba_dn > 7;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: suma dni rezerwacji zimą

    Kryteria:

    R.1.5 Utworzono zapytanie 3 liczące sumę dni rezerwacji zimą. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT SUM(liczba_dn) FROM rezerwacje WHERE sezon = "zima"; oraz wynik działania udokumentowano zrzutem, na którym widoczna jest wartość 25 lub 27

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 3: liczące sumę dni rezerwacji zimą

    • SELECT SUM(liczba_dn) - funkcja agregująca dodaje wartości pola ze wszystkich wybranych wierszy,
    • FROM rezerwacje,
    • WHERE sezon = 'zima' - tylko rezerwacje zimowe (2 + 6 + 9 + 8 dni).

    Wynik: 25. Klucz uznaje też 27 - tyle wychodzi, gdy zapytanie 3 zostanie wykonane już po zapytaniu 4, które dwudniową rezerwację zimową wydłuża do 4 dni (sprawdzone). Zrzut: kw3.jpg.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT * FROM pokoje;

-- Zapytanie 2
SELECT id_pok, sezon FROM rezerwacje WHERE liczba_dn > 7;

-- Zapytanie 3
SELECT SUM(liczba_dn) FROM rezerwacje WHERE sezon = 'zima';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: minimum 4 dni rezerwacji

    Kryteria:

    R.1.6 Utworzono zapytanie 4 aktualizujące liczbę dni rezerwacji, dla rekordów, w których liczba dni jest mniejsza od 4 liczba ta jest ustawiana na 4. W pliku z kwerendami lub na zrzucie istnieje zapis np.: UPDATE rezerwacje SET liczba_dn = 4 WHERE liczba_dn < 4; oraz wynik działania udokumentowano zrzutem, na którym widoczny jest komunikat o poprawnej aktualizacji lub tabela ze zaktualizowanymi danymi

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: aktualizujące liczbę dni rezerwacji. Minimalna liczba dni rezerwacji to 4, dla rekordów, w których liczba dni jest mniejsza od 4 liczba ta jest zmieniana na 4

    • UPDATE rezerwacje - zmiana istniejących wierszy,
    • SET liczba_dn = 4 - nowa wartość,
    • WHERE liczba_dn < 4 - tylko krótsze rezerwacje; bez warunku wszystkie rezerwacje dostałyby 4 dni.

    Komunikat: „3 wiersze zmienione” (rezerwacje na 2, 3 i 3 dni). Zrzut kw4.jpg pokazuje komunikat i tabelę po zmianie.

    Typowe błędy

    UPDATE bez WHERE zmienia wszystkie wiersze i nie da się tego cofnąć przyciskiem - wtedy trzeba usunąć tabele i zaimportować bazę od nowa.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT * FROM pokoje;

-- Zapytanie 2
SELECT id_pok, sezon FROM rezerwacje WHERE liczba_dn > 7;

-- Zapytanie 3
SELECT SUM(liczba_dn) FROM rezerwacje WHERE sezon = 'zima';

-- Zapytanie 4
UPDATE rezerwacje SET liczba_dn = 4 WHERE liczba_dn < 4;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Krok 8: Zapytanie 5: użytkownik najemca z hasłem

    Kryteria:

    R.1.7 Utworzono zapytanie 5 tworzące użytkownika najemca z hasłem n@JEM1@! W pliku z kwerendami lub na zrzucie istnieje zapis z jawnie zapisanym hasłem np.: CREATE USER najemca IDENTIFIED BY "n@JEM1@!"; oraz wynik działania udokumentowano zrzutem, na którym widoczny jest komunikat o poprawnym dodaniu użytkownika lub dodany użytkownik widoczny jest na liście

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 5: tworzące użytkownika najemca z hasłem n@JEM1@!

    • CREATE USER 'najemca'@'localhost' - nazwa konta i host, z którego może się logować (tu ten sam komputer),
    • IDENTIFIED BY 'n@JEM1@!' - hasło zapisane jawnie w zapytaniu, jak wymaga klucz.

    Klucz uznaje też zapis bez hosta (CREATE USER najemca IDENTIFIED BY 'n@JEM1@!'), który tworzy konto 'najemca'@'%' - logowanie z dowolnego komputera. Sprawdzone logowanie nowym kontem: działa, ale konto nie ma jeszcze żadnych uprawnień - próba wejścia do bazy wynajem kończy się błędem 1044 „Access denied”. Arkusz o uprawnienia nie prosi. Zrzut kw5.jpg pokazuje komunikat i konto na liście użytkowników.

    Typowe błędy

    Hasło musi być dokładnie n@JEM1@! - wielkość liter ma znaczenie, a znak ! na końcu łatwo zgubić.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT * FROM pokoje;

-- Zapytanie 2
SELECT id_pok, sezon FROM rezerwacje WHERE liczba_dn > 7;

-- Zapytanie 3
SELECT SUM(liczba_dn) FROM rezerwacje WHERE sezon = 'zima';

-- Zapytanie 4
UPDATE rezerwacje SET liczba_dn = 4 WHERE liczba_dn < 4;

-- Zapytanie 5
CREATE USER 'najemca'@'localhost' IDENTIFIED BY 'n@JEM1@!';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 8

  9. Etap 2: Grafika i strony HTML

    Kroki 9-25 · po tym etapie masz 17 z 33 kryteriów (pkt)

    Krok 9: Zdjęcia 1-3: 300 × 300 px, odcienie szarości, JPEG

    Kryteria:

    R.2.1 Przynajmniej jeden obraz 1 , 2 lub 3 zapisano w formacie JPEG w odcieniach szarości i dokładnych wymiarach 300 px na 300 px

    ok. 5 min
    Polecenie z arkusza

    Obrazy 1.bmp, 2.bmp, 3.bmp należy przeskalować bez zachowania proporcji do wymiarów 300 px na 300 px oraz zapisać w odcieniach szarości i w formacie JPEG

    Dla każdego z trzech plików w GIMP-ie: Obraz → Skaluj obraz, rozłączony łańcuch między szerokością a wysokością (to jest „bez zachowania proporcji”), 300 i 300. Zdjęcia 1 i 2 mają 3872 × 2592 px, a 3 - 1632 × 1224 px, więc po skalowaniu są ściśnięte w poziomie - tak ma być. Potem Obraz → Tryb → Odcienie szarości i Plik → Wyeksportuj jako 1.jpg (2.jpg, 3.jpg). Format zmienia się przez rozszerzenie przy eksporcie - zwykłe Zapisz utworzyłoby plik GIMP-a .xcf. Wynikowe pliki ważą po kilkanaście kilobajtów zamiast 30 MB.

    Typowe błędy

    Zmiana samego rozszerzenia nazwy w Eksploratorze (1.bmp na 1.jpg) nie zmienia formatu pliku - klucz wymaga JPEG.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 9

  10. Krok 10: Plik index.html w HTML5

    ok. 1 min
    Polecenie z arkusza

    Zapisane w języku HTML 5

    Deklaracja <!DOCTYPE html> i szkielet strony głównej. Najpierw powstaje cała strona index.html; cennik.php będzie jej kopią z innym blokiem środkowym.

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

  11. Krok 11: Kodowanie polskich znaków

    ok. 1 min
    Polecenie z arkusza

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

    <meta charset="UTF-8"> jako pierwszy element <head> - bez niego „GŁÓWNA” i „Stronę opracował” mogą wyświetlić się krzakami.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  12. Krok 12: Język strony

    ok. 1 min
    Polecenie z arkusza

    Zadeklarowany język witryny: polski

    Atrybut lang="pl" w znaczniku <html>.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  13. Krok 13: Tytuł strony

    Kryteria:

    R.2.3 Nadano tytuł stronie: "Wynajem pokoi"

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Wynajem pokoi”

    <title> w <head> - napis na karcie przeglądarki.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

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

    Kryteria:

    R.3.5 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl2 , 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 styl2.css prawidłowo połączony z kodem strony

    Nazwa pliku: styl2.css - z cyfrą 2. Całe formatowanie ma pochodzić z tego pliku - żadnych atrybutów style w HTML-u.

    Typowe błędy

    Klucz odbiera R.3.5 także wtedy, gdy choć jeden selektor nie trafia w blok (np. kropka zamiast #).

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  15. Krok 15: Bloki: baner, trzy bloki i stopka

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: baner, poniżej obok siebie blok lewy, środkowy i prawy, na dole stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2

    Baner to <header>, stopka <footer>, a trzy bloki - trzy <section>. Wszystkie trzy wyglądają tak samo (ten sam kolor, wymiary i cień), więc nie potrzebują identyfikatorów - w CSS wystarczy selektor section. Obok siebie postawi je arkusz stylów.

    index.html HTML zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
    </header>
    <section>
    </section>
    <section>
    </section>
    <section>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  16. Krok 16: Baner: nagłówek pierwszego stopnia

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek pierwszego stopnia o treści „Pensjonat pod dobrym humorem”

    <h1> w <header>.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
    </section>
    <section>
    </section>
    <section>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  17. Krok 17: Blok lewy: odnośnik GŁÓWNA

    Kryteria:

    R.3.2 Po wybraniu odnośnika GŁÓWNA otwiera się strona index.html

    ok. 1 min
    Polecenie z arkusza

    Odnośnik „GŁÓWNA” do pliku index.html

    <a href="index.html"> - odnośnik do strony głównej. Na cennik.php (kopii tej strony) zaprowadzi z powrotem na stronę główną.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
    </section>
    <section>
    </section>
    <section>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  18. Krok 18: Blok lewy: zdjęcie 1.jpg

    ok. 1 min
    Polecenie z arkusza

    Obraz 1.jpg z tekstem alternatywnym „pokoje”

    <img> z przygotowanym zdjęciem i tekstem alternatywnym. Zdjęcia leżą w tym samym folderze co strona, więc w src wystarczy nazwa pliku.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
    </section>
    <section>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  19. Krok 19: Blok prawy: odnośnik KALKULATOR

    ok. 1 min
    Polecenie z arkusza

    Odnośnik „KALKULATOR” do pliku kalkulator.html

    Arkusz opisuje blok prawy przed środkowym, bo środkowy jest jedyną różnicą między stronami. Odnośnik prowadzi do strony, która powstanie za chwilę.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  20. Krok 20: Blok prawy: zdjęcie 3.jpg

    ok. 1 min
    Polecenie z arkusza

    Obraz 3.jpg z tekstem alternatywnym „pokoje”

    To samo co w bloku lewym, z plikiem 3.jpg.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
        <img src="3.jpg" alt="pokoje">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  21. Krok 21: Stopka

    Kryteria:

    R.2.5 W banerze zapisano nagłówek h1: "Pensjonat pod dobrym humorem" oraz paragraf w stopce

    ok. 1 min
    Polecenie z arkusza

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

    Akapit <p> w <footer>. Na egzaminie w miejscu imienia i nazwiska wpisuje się numer zdającego, czyli PESEL; w tym rozwiązaniu stoi tam „Bartosz Bryniarski”. Z nagłówkiem <h1> w banerze to kryterium R.2.5.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
        <img src="3.jpg" alt="pokoje">
    </section>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  22. Krok 22: index.html, blok środkowy: odnośnik CENNIK

    Kryteria:

    R.3.3 Po wybraniu odnośnika CENNIK otwiera się strona cennik.php

    ok. 1 min
    Polecenie z arkusza

    Odnośnik „CENNIK” do pliku cennik.php

    Odnośnik do strony z cennikiem - ten sam będzie też na samej stronie cennik.php.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
        <a href="cennik.php">CENNIK</a>
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
        <img src="3.jpg" alt="pokoje">
    </section>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  23. Krok 23: index.html, blok środkowy: zdjęcie 2.jpg

    Kryteria:

    R.2.7 Na stronie głównej w blokach lewym, środkowym i prawym umieszczono trzy grafiki o nazwach 1 , 2 , 3 (w formacie BMP lub JPEG) i tekście alternatywnym "pokoje"

    ok. 1 min
    Polecenie z arkusza

    Obraz 2.jpg z tekstem alternatywnym „pokoje”

    Trzecie zdjęcie - na stronie głównej są już wszystkie trzy obrazy z tekstem „pokoje” (R.2.7).

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
        <a href="cennik.php">CENNIK</a>
        <img src="2.jpg" alt="pokoje">
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
        <img src="3.jpg" alt="pokoje">
    </section>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  24. Krok 24: cennik.php: kopia strony z tabelą zamiast zdjęcia

    Kryteria:

    R.2.2 Witrynę internetową zapisano w plikach index.html i cennik.php oraz zapisano jawnie standard kodowania polskich znaków i deklarację HTML5 <!DOCTYPE HTML> i zadeklarowano język witryny: polski, np. <html lang="pl">

    ok. 2 min
    Polecenie z arkusza

    Strony index.html i cennik.php różnią się jedynie blokiem środkowym

    Plik index.html zapisany pod nazwą cennik.php; w bloku środkowym zostaje odnośnik CENNIK, a zdjęcie 2.jpg zastępuje pusta tabela <table> - wiersze dopisze skrypt. Rozszerzenie .php jest potrzebne, żeby serwer wykonał skrypt; strona działa tylko otwarta przez http://localhost/.... Witryna jest już zapisana w obu plikach, z deklaracją HTML5, kodowaniem i językiem (R.2.2).

    cennik.php PHP nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
        <a href="cennik.php">CENNIK</a>
        <table>
        </table>
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
        <img src="3.jpg" alt="pokoje">
    </section>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (cennik.php)

  25. Krok 25: kalkulator.html: strona w trakcie budowy

    Kryteria:

    R.3.4 Po wybraniu odnośnika KALKULATOR otwiera się strona kalkulator.html

    ok. 1 min
    Polecenie z arkusza

    Na stronie kalkulator.html należy jedynie zapisać „strona w trakcie budowy”

    Najkrótsza poprawna strona HTML5 z jednym akapitem. Po tym kroku działa odnośnik KALKULATOR - klucz sprawdza tylko, czy otwiera się kalkulator.html (R.3.4).

    kalkulator.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
</head>
<body>
    <p>strona w trakcie budowy</p>
</body>
</html>
    Podgląd strony po tym kroku (kalkulator.html)

  26. Etap 3: Styl CSS

    Kroki 26-33 · po tym etapie masz 28 z 33 kryteriów (pkt)

    Krok 26: Krój czcionki i wyśrodkowanie dla wszystkich elementów

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    Selektor uniwersalny *. Wyśrodkowanie dotyczy też obrazów i tabeli w blokach, bo text-align działa na elementy w linii tekstu.

    styl2.css CSS nowy plik 
    * {
    font-family: Garamond;
    text-align: center;
}
    Podgląd strony po tym kroku (index.html)

  27. Krok 27: Ciało strony: kolor tła

    ok. 1 min
    Polecenie z arkusza

    Dla selektora ciała strony: kolor tła Lavender

    Selektor body. Lavender (lawendowy) to nazwa koloru z listy CSS - bez # i cudzysłowu.

    styl2.css CSS zmienione: 3 linie 
    * {
    font-family: Garamond;
    text-align: center;
}
body {
    background-color: Lavender;
}
    Podgląd strony po tym kroku (index.html)

  28. Krok 28: Baner i stopka

    ok. 1 min
    Polecenie z arkusza

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

    Jedna reguła dla dwóch selektorów. Marginesy wewnętrzne to padding.

    styl2.css CSS zmienione: 5 linii 
    * {
    font-family: Garamond;
    text-align: center;
}
body {
    background-color: Lavender;
}
header, footer {
    background-color: #AF8EB5;
    color: white;
    padding: 10px;
}
    Podgląd strony po tym kroku (index.html)

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

    Kryteria: , ,

    R.4.2 Ustawiono kolor tła Lavender dla selektora body, #AF8EB5 dla banera i stopki, kolor tła #E1BEE7 dla bloków lewego, środkowego i prawego

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

    R.4.9 Ustawiono cień bloku lewego, środkowego i prawego box-shadow: 10px 10px 10px DimGray (poprawnie również 10px 10px 10px 0 DimGray)

    ok. 3 min
    Polecenie z arkusza

    Wspólne dla bloków lewego, środkowego i prawego: kolor tła #E1BEE7, szerokość 30%, wysokość 500 px, margines wewnętrzny górny 40 px, marginesy zewnętrzne 15 px, cień bloku o przesunięciu 10 px w obu osiach, rozmyciu 10 px i kolorze DimGray

    Selektor znacznika section trafia we wszystkie trzy bloki.

    • padding-top: 40px - tylko górny margines wewnętrzny, odsuwa odnośnik od górnej krawędzi,
    • margin: 15px - odstęp z każdej strony, widać między nim lawendowe tło strony,
    • box-shadow: 10px 10px 10px DimGray - według składni z arkusza: przesunięcie poziome, pionowe, rozmycie i kolor (rozciągnięcie można pominąć).

    Wszystkie kolory tła są ustawione (R.4.2).

    styl2.css CSS zmienione: 8 linii 
    * {
    font-family: Garamond;
    text-align: center;
}
body {
    background-color: Lavender;
}
header, footer {
    background-color: #AF8EB5;
    color: white;
    padding: 10px;
}
section {
    background-color: #E1BEE7;
    width: 30%;
    height: 500px;
    padding-top: 40px;
    margin: 15px;
    box-shadow: 10px 10px 10px DimGray;
}
    Podgląd strony po tym kroku (index.html)

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

    Kryteria:

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z obrazem 2 w arkuszu (prawidłowo zastosowano właściwości CSS układające bloki na stronie, np. float i clear albo display flex albo grid). Dopuszcza się zachodzenie obrazów na stopkę.

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: baner, poniżej obok siebie blok lewy, środkowy i prawy, na dole stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2

    Trzy <section> z float: left stają obok siebie, a stopka z clear: both - pod nimi. Każdy blok zajmuje 30% szerokości plus 2 × 15 px marginesu, czyli razem 90% + 90 px: mieszczą się obok siebie w oknie szerszym niż 900 px, a w węższym trzeci blok spadnie niżej. Klucz dopuszcza, żeby obrazy zachodziły na stopkę.

    styl2.css CSS zmienione: 6 linii 
    * {
    font-family: Garamond;
    text-align: center;
}
body {
    background-color: Lavender;
}
header, footer {
    background-color: #AF8EB5;
    color: white;
    padding: 10px;
}
section {
    background-color: #E1BEE7;
    width: 30%;
    height: 500px;
    padding-top: 40px;
    margin: 15px;
    box-shadow: 10px 10px 10px DimGray;
}
section {
    float: left;
}
footer {
    clear: both;
}
    Podgląd strony po tym kroku (index.html)

  31. Krok 31: Odnośniki

    Kryteria: , ,

    R.4.3 Ustawiono biały kolor czcionki dla banera i stopki oraz Indigo dla selektora a

    R.4.6 Ustawiono marginesy wewnętrzne (padding) 10px dla banera, stopki i odnośnika, oraz padding-top: 40px i marginesy zewnętrzne (margin) 15px dla dla bloków lewego, środkowego i prawego

    R.4.8 Ustawiono cechy dla odnośnika: rozmiar czcionki 150%, czcionka pogrubiona

    ok. 2 min
    Polecenie z arkusza

    Dla selektora odnośnika: kolor czcionki Indigo, rozmiar czcionki 150%, marginesy wewnętrzne 10 px, czcionka pogrubiona

    Selektor znacznika a. Margines wewnętrzny będzie widać dopiero pod kursorem - wtedy odnośnik dostaje tło, a padding robi z niego prostokąt wokół napisu, jak przy CENNIK na obrazie 2. Wszystkie kolory czcionek i marginesy wewnętrzne z arkusza są ustawione (R.4.3, R.4.6).

    styl2.css CSS zmienione: 6 linii 
    * {
    font-family: Garamond;
    text-align: center;
}
body {
    background-color: Lavender;
}
header, footer {
    background-color: #AF8EB5;
    color: white;
    padding: 10px;
}
section {
    background-color: #E1BEE7;
    width: 30%;
    height: 500px;
    padding-top: 40px;
    margin: 15px;
    box-shadow: 10px 10px 10px DimGray;
}
section {
    float: left;
}
footer {
    clear: both;
}
a {
    color: Indigo;
    font-size: 150%;
    padding: 10px;
    font-weight: bold;
}
    Podgląd strony po tym kroku (index.html)

  32. Krok 32: Odnośnik pod kursorem

    Kryteria:

    R.4.10 Gdy kursor znajdzie się na odnośniku jego kolor tła zmienia się na Indigo a kolor czcionki na biały np. a:hover

    ok. 1 min
    Polecenie z arkusza

    Gdy kursor znajdzie się na odnośniku jego kolor tła zmienia się na Indigo, a kolor czcionki na biały

    Pseudoklasa :hover - zmiana działa tylko wtedy, gdy kursor stoi nad odnośnikiem.

    styl2.css CSS zmienione: 4 linie 
    * {
    font-family: Garamond;
    text-align: center;
}
body {
    background-color: Lavender;
}
header, footer {
    background-color: #AF8EB5;
    color: white;
    padding: 10px;
}
section {
    background-color: #E1BEE7;
    width: 30%;
    height: 500px;
    padding-top: 40px;
    margin: 15px;
    box-shadow: 10px 10px 10px DimGray;
}
section {
    float: left;
}
footer {
    clear: both;
}
a {
    color: Indigo;
    font-size: 150%;
    padding: 10px;
    font-weight: bold;
}
a:hover {
    background-color: Indigo;
    color: white;
}
    Podgląd strony po tym kroku (index.html)

  33. Krok 33: Obraz i tabela: obramowanie, szerokość, marginesy

    Kryteria: ,

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

    R.4.7 Ustawiono obramowanie dla obrazu i tabeli: linia ciągła 1px oraz marginesy zewnętrzne (margin) górny i dolny 40 px, lewy i prawy auto

    ok. 2 min
    Polecenie z arkusza

    Wspólne dla selektora obrazu i tabeli: obramowanie linią ciągłą o szerokości 1 px, szerokość 80%, marginesy zewnętrzne górny i dolny 40 px, lewy i prawy automatycznie wyliczany przez przeglądarkę

    Selektory znaczników img i table po przecinku. Arkusz nie podaje koloru obramowania - bez koloru przeglądarka bierze kolor tekstu. margin: 40px auto - pierwsza wartość to górny i dolny margines, druga lewy i prawy. auto wyśrodkowuje tabelę (element blokowy), a obraz jest wyśrodkowany przez text-align z pierwszej reguły. Zdjęcia 300 × 300 zmniejszają się do 80% szerokości bloku.

    styl2.css CSS zmienione: 5 linii 
    * {
    font-family: Garamond;
    text-align: center;
}
body {
    background-color: Lavender;
}
header, footer {
    background-color: #AF8EB5;
    color: white;
    padding: 10px;
}
section {
    background-color: #E1BEE7;
    width: 30%;
    height: 500px;
    padding-top: 40px;
    margin: 15px;
    box-shadow: 10px 10px 10px DimGray;
}
section {
    float: left;
}
footer {
    clear: both;
}
a {
    color: Indigo;
    font-size: 150%;
    padding: 10px;
    font-weight: bold;
}
a:hover {
    background-color: Indigo;
    color: white;
}
img, table {
    border: 1px solid;
    width: 80%;
    margin: 40px auto;
}
    Podgląd strony po tym kroku (index.html)

  34. Etap 4: Skrypt PHP

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

    Krok 34: Połączenie z bazą i zamknięcie

    Kryteria: ,

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

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

    ok. 2 min
    Polecenie z arkusza

    Skrypt łączy się z serwerem bazy danych na localhost, użytkownik root bez hasła, baza danych o nazwie wynajem

    Skrypt stoi wewnątrz tabeli - to, co wypisze, znajdzie się między <table> a </table>. mysqli_connect z czterema argumentami łączy się z serwerem i od razu wybiera bazę; uchwyt trafia do zmiennej $connection. Druga linia już teraz zamyka połączenie - kolejne instrukcje będą dopisywane nad nią, więc zamknięcie zostanie ostatnią operacją na bazie (R.5.2). Od tego kroku podgląd to wynik prawdziwego uruchomienia cennik.php.

    cennik.php PHP zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
        <a href="cennik.php">CENNIK</a>
        <table>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "wynajem");
            mysqli_close($connection);
        ?>
        </table>
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
        <img src="3.jpg" alt="pokoje">
    </section>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (cennik.php)

  35. Krok 35: Zapytanie 1 do bazy

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Skrypt wysyła do bazy danych zapytanie 1

    Zapytanie 1 bez zmian, w zmiennej $query. mysqli_query wysyła je do bazy, a w $result zostaje wynik do odczytania wiersz po wierszu.

    cennik.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
        <a href="cennik.php">CENNIK</a>
        <table>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "wynajem");
            $query = "SELECT * FROM pokoje;";
            $result = mysqli_query($connection, $query);
            mysqli_close($connection);
        ?>
        </table>
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
        <img src="3.jpg" alt="pokoje">
    </section>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

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

  36. Krok 36: Każdy pokój w kolejnym wierszu tabeli

    Kryteria: ,

    R.5.4 Skrypt wyświetla dane zwrócone zapytaniem, tak że każdy wiersz jest wpisywany do kolejnych wierszy tabeli z wykorzystaniem pętli

    R.2.6 Na stronie cennika umieszczono w bloku środkowym tabelę z trzema kolumnami, zastosowano znaczniki <table>, <tr> i <td> (w HTML lub skrypcie)

    ok. 3 min
    Polecenie z arkusza

    Dane z każdego zwróconego zapytaniem wiersza wypisywane są w kolejnym wierszu tabeli

    mysqli_fetch_row oddaje kolejny wiersz jako tablicę numerowaną od zera w kolejności kolumn tabeli: $row[0] - id, $row[1] - nazwa, $row[2] - cena. Po ostatnim wierszu zwraca null i pętla while się kończy. Każdy pokój to jeden wiersz <tr> z trzema komórkami <td> - tabela ma trzy kolumny, jak na obrazie 3.

    cennik.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
        <a href="cennik.php">CENNIK</a>
        <table>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "wynajem");
            $query = "SELECT * FROM pokoje;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";
            }
            mysqli_close($connection);
        ?>
        </table>
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
        <img src="3.jpg" alt="pokoje">
    </section>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (cennik.php)

  37. Etap 5: Dobre praktyki (poza kluczem)

    Kroki 37-38 · po tym etapie masz 33 z 33 kryteriów (pkt)

    Krok 37: Kolumny po nazwach i htmlspecialchars

    ok. 2 min
    Polecenie z arkusza

    Dane z każdego zwróconego zapytaniem wiersza wypisywane są w kolejnym wierszu tabeli

    Przy SELECT * numer kolumny zależy od kolejności pól w tabeli - wystarczy, że ktoś doda w phpMyAdmin pole przed ceną, i $row[2] przestaje być ceną. mysqli_fetch_assoc oddaje wiersz z kluczami takimi jak nazwy kolumn ($room["cena"]). Nazwa pokoju to tekst z bazy, więc przed wypisaniem przechodzi przez htmlspecialchars - znak < albo & w nazwie nie rozbije tabeli. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    cennik.php PHP zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
        <a href="cennik.php">CENNIK</a>
        <table>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "wynajem");
            $query = "SELECT * FROM pokoje;";
            $result = mysqli_query($connection, $query);
            while ($room = mysqli_fetch_assoc($result)) {
                $name = htmlspecialchars($room["nazwa"]);
                echo "<tr><td>" . $room["id"] . "</td><td>$name</td><td>" . $room["cena"] . "</td></tr>";
            }
            // while ($row = mysqli_fetch_row($result)) { ... "<td>$row[0]</td><td>$row[1]</td><td>$row[2]</td>" ... }
            mysqli_close($connection);
        ?>
        </table>
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
        <img src="3.jpg" alt="pokoje">
    </section>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

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

  38. Krok 38: Komunikat, gdy cennik jest pusty

    ok. 2 min
    Polecenie z arkusza

    Skrypt wysyła do bazy danych zapytanie 1

    Wersja egzaminacyjna sprawdzona na pustej tabeli pokoje: strona pokazuje w bloku środkowym samo obramowanie tabeli bez treści i użytkownik nie wie, czy cennik się nie wczytał, czy pensjonat nie ma pokoi. mysqli_num_rows (funkcja z tabeli 1 arkusza) zwraca liczbę wierszy wyniku - przy zerze skrypt wypisuje wiersz z komunikatem. Podgląd: pełny cennik, bo w bazie są pokoje; komunikat pokazuje się tylko przy pustej tabeli (sprawdzone). Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    cennik.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wynajem pokoi</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <h1>Pensjonat pod dobrym humorem</h1>
    </header>
    <section>
        <a href="index.html">GŁÓWNA</a>
        <img src="1.jpg" alt="pokoje">
    </section>
    <section>
        <a href="cennik.php">CENNIK</a>
        <table>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "wynajem");
            $query = "SELECT * FROM pokoje;";
            $result = mysqli_query($connection, $query);
            if (mysqli_num_rows($result) == 0) {
                echo "<tr><td>Cennik jest chwilowo niedostępny</td></tr>";
            }
            while ($room = mysqli_fetch_assoc($result)) {
                $name = htmlspecialchars($room["nazwa"]);
                echo "<tr><td>" . $room["id"] . "</td><td>$name</td><td>" . $room["cena"] . "</td></tr>";
            }
            // while ($row = mysqli_fetch_row($result)) { ... "<td>$row[0]</td><td>$row[1]</td><td>$row[2]</td>" ... }
            mysqli_close($connection);
        ?>
        </table>
    </section>
    <section>
        <a href="kalkulator.html">KALKULATOR</a>
        <img src="3.jpg" alt="pokoje">
    </section>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

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

  39. Etap 6: Oddanie pracy

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

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

    ok. 5 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 weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy.

    W przeglądarka.txt wystarczy nazwa przeglądarki, w której była sprawdzana strona.

    W folderze: 1.jpg, 2.jpg, 3.jpg, cennik.php, index.html, kalkulator.html, kw1.jpg - kw5.jpg, kwerendy.txt, przeglądarka.txt, styl2.css i import.png. Pliki BMP z archiwum nie są potrzebne. Po nagraniu płyty trzeba sprawdzić jej odczyt i opisać ją numerem zdającego.

    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.