Rozwiązanie buduje stronę restauracji z rezerwacją stolika: baza baza z daniami, pracownikami i rezerwacjami i cztery zapytania - tym razem nie tylko SELECT, ale też INSERT (dopisanie rezerwacji z automatycznym id) i UPDATE (zmiana stanowiska wszystkich kelnerów), strona restauracja.html z formularzem rezerwacji (pole daty, pole liczbowe, telefon, zgoda i dwa przyciski: czyszczący i wysyłający) oraz style w styl_1.css. Formularz wysyła dane metodą POST do osobnego skryptu rezerwacja.php, który dopisuje rezerwację do bazy.
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 pisany najprościej, funkcjami z tabeli 1 arkusza, a na końcu zostaje zabezpieczony zapytaniem przygotowanym i sprawdzeniem danych, a formularz - polami, które same pilnują formatu.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (flex, PDO)” jest drugi sposób rozwiązania tego samego arkusza: panele ustawione flexem w znaczniku <main>, kolory w zmiennych CSS, dane z formularza sprawdzane w PHP i zapisywane przez PDO zapytaniem przygotowanym, a odświeżenie strony po rezerwacji nie dopisuje jej drugi raz - obie wersje są zgodne z kluczem.
Baza i zdjęcie pochodzą z prawdziwego archiwum zad1 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu.
Jak liczą się punkty. Klucz ma 36 kryteriów (R.1.1 - R.5.6), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 27 punktów - można stracić 9 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.
Kroki 1-6 · po tym etapie masz 6 z 36 kryteriów (pkt)
Utwórz nową bazę danych o nazwie baza.
Rozpakuj zad1.zip z pulpitu (hasło Wykon@jTo) do folderu z numerem zdającego: baza.sql i menu.jpg. W phpMyAdmin: Nowa, nazwa bazy to dosłownie baza.
Nazwa jest nietypowa i łatwo ją „poprawić” na restauracja - skrypt łączy się z bazą baza (R.5.2).
Zaimportuj do bazy tabele z pliku baza.sql, z wcześniej rozpakowanego archiwum. Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie JPEG i nazwij zad1. Nie kadruj zrzutu. Zrzut powinien obejmować cały ekran, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Import → baza.sql → Wykonaj. Plik tworzy kilka tabel; w zadaniu korzystasz z trzech z obrazu 1: dania (typ: 1 zupy, 2 mięsne, 3 przekąski, 4 napoje), pracownicy (stanowisko: 1 kucharz, 2 pomoc, 3 kelner, 4 barman) i pustej rezerwacje. Zrzut zapisujesz jako zad1.jpg - w tym arkuszu tak nazywa się zrzut importu.
import.jpg zamiast zad1.jpg - klucz R.1.1 sprawdza nazwę pliku.
Zapytanie 1: wstawiające do tabeli rezerwacje rekord z danymi: numer stolika = 1, data=„2017-07-04”, liczba osób = 4, numer telefonu = „111222333”, wartość pola id nadawana jest automatycznie.
INSERT INTO dopisuje wiersz: po nazwie tabeli lista kolumn, po VALUES wartości w tej samej kolejności. Kolumny id nie podajesz - ma AUTO_INCREMENT, więc baza nada numer sama. Data i telefon to teksty, więc w apostrofach; numer stolika i liczba osób - bez. Zrzut kw1.jpg pokazuje tabelę z nowym rekordem (id = 1). Zapytanie do kwerendy.txt.
Bez listy kolumn (INSERT INTO rezerwacje VALUES (1, ...)) pierwsza wartość trafi do id - stolik 1 stałby się identyfikatorem.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
INSERT INTO rezerwacje (nr_stolika, data_rez, liczba_osob, telefon) VALUES (1, '2017-07-04', 4, '111222333');
Zapytanie 2: wybierające z tabeli dania jedynie pola nazwa i cena dla dań mięsnych.
Dania mięsne to typ = 2. Wynik: 5 dań, od „Kaczka i owoc” do „Alle kotlet” - jak w kluczu. Zrzut kw2.jpg.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
INSERT INTO rezerwacje (nr_stolika, data_rez, liczba_osob, telefon) VALUES (1, '2017-07-04', 4, '111222333');
-- Zapytanie 2
SELECT nazwa, cena FROM dania WHERE typ = 2;
Zapytanie 3: wybierające z tabeli dania jedynie pole nazwa dla takich przekąsek, których cena jest mniejsza od 15 zł.
Dwa warunki z AND: przekąska (typ = 3) i cena mniejsza od 15 (<, przekąski za równe 15 zł odpadają). Wynik: „Orzechy i chipsy” i „Bukiet warzyw”. Zrzut kw3.jpg.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
INSERT INTO rezerwacje (nr_stolika, data_rez, liczba_osob, telefon) VALUES (1, '2017-07-04', 4, '111222333');
-- Zapytanie 2
SELECT nazwa, cena FROM dania WHERE typ = 2;
-- Zapytanie 3
SELECT nazwa FROM dania WHERE typ = 3 AND cena < 15;
Zapytanie 4: aktualizujące dane w tabeli pracownicy. Dla wszystkich pracowników, którzy zatrudnieni są jako kelner, należy dokonać zmiany stanowiska na barman.
UPDATE tabela SET kolumna = nowa wartość WHERE warunek zmienia istniejące wiersze. Kelner to 3, barman to 4: SET stanowisko = 4 WHERE stanowisko = 3. Zmieniają się dwie osoby - Anna Przybylska i Maria Kowal; Ewa Nowacka już była barmanką. Zrzut kw4.jpg pokazuje tabelę po zmianie.
UPDATE bez WHERE zmienia stanowisko WSZYSTKIM pracownikom - phpMyAdmin wykona to bez pytania.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
INSERT INTO rezerwacje (nr_stolika, data_rez, liczba_osob, telefon) VALUES (1, '2017-07-04', 4, '111222333');
-- Zapytanie 2
SELECT nazwa, cena FROM dania WHERE typ = 2;
-- Zapytanie 3
SELECT nazwa FROM dania WHERE typ = 3 AND cena < 15;
-- Zapytanie 4
UPDATE pracownicy SET stanowisko = 4 WHERE stanowisko = 3;
Kroki 7-18 · po tym etapie masz 19 z 36 kryteriów (pkt)
Wymagania dotyczące witryny: Nazwa pliku: restauracja.html. Zastosowany język HTML 5.
Tym razem strona to zwykły plik .html - PHP będzie w osobnym pliku. <!DOCTYPE html> i szkielet strony.
restauracja.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zastosowany właściwy standard kodowania polskich znaków.
<meta charset="UTF-8">; od razu dopisujesz też lang="pl" w <html> (arkusz go nie wymaga, ale to dobry nawyk).
restauracja.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Restauracja Wszystkie Smaki”. Arkusz stylów w pliku o nazwie styl_1.css prawidłowo połączony z kodem strony.
<title> i <link> do styl_1.css (z podkreśleniem i cyfrą).
restauracja.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
</body>
</html>Podział strony na bloki: baner, panele lewy i prawy, dolny, stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.
<header>, trzy <section> z identyfikatorami left, right, bottom (po angielsku) i <footer> (R.2.3).
restauracja.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
</header>
<section id="left">
</section>
<section id="right">
</section>
<section id="bottom">
</section>
<footer>
</footer>
</body>
</html>Zawartość banera: nagłówek pierwszego stopnia o treści: Witamy w restauracji „Wszystkie Smaki”.
<h1>; cudzysłów wokół nazwy restauracji należy do treści - w HTML wpisujesz go wprost.
restauracja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Witamy w restauracji "Wszystkie Smaki"</h1>
</header>
<section id="left">
</section>
<section id="right">
</section>
<section id="bottom">
</section>
<footer>
</footer>
</body>
</html>Zawartość panelu lewego: obraz menu.jpg z tekstem alternatywnym o treści: „Nasze danie”.
Zdjęcie z archiwum, bez obróbki (R.2.5, R.2.6).
restauracja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Witamy w restauracji "Wszystkie Smaki"</h1>
</header>
<section id="left">
<img src="menu.jpg" alt="Nasze danie">
</section>
<section id="right">
</section>
<section id="bottom">
</section>
<footer>
</footer>
</body>
</html>Zawartość panelu prawego: Nagłówek czwartego stopnia o treści: „U nas dobrze zjesz!”. Lista numerowana z trzema elementami: Obiady od 40 zł; Przekąski od 10 zł; Kolacje od 20 zł.
<h4> i lista numerowana <ol> z trzema <li> - każdy z znacznikiem zamykającym (klucz R.2.7 wymaga zamknięć).
restauracja.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Witamy w restauracji "Wszystkie Smaki"</h1>
</header>
<section id="left">
<img src="menu.jpg" alt="Nasze danie">
</section>
<section id="right">
<h4>U nas dobrze zjesz!</h4>
<ol>
<li>Obiady od 40 zł</li>
<li>Przekąski od 10 zł</li>
<li>Kolacje od 20 zł</li>
</ol>
</section>
<section id="bottom">
</section>
<footer>
</footer>
</body>
</html>Zawartość panelu dolnego: Nagłówek drugiego stopnia o treści: „Zarezerwuj stolik on-line”. Formularz zgodny z obrazem 2, wysyłający dane do pliku rezerwacja.php metodą bezpieczną.
action="rezerwacja.php" - dokąd trafią dane; method="post" - „metoda bezpieczna” w rozumieniu arkusza (dane w treści żądania, nie w adresie). W specyfikacji HTTP „bezpieczne” są co prawda metody, które niczego nie zmieniają na serwerze (GET i HEAD), ale arkusz używa tego słowa w innym sensie, a klucz wymaga POST. Pola i przyciski dopiszesz wewnątrz <form>.
restauracja.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Witamy w restauracji "Wszystkie Smaki"</h1>
</header>
<section id="left">
<img src="menu.jpg" alt="Nasze danie">
</section>
<section id="right">
<h4>U nas dobrze zjesz!</h4>
<ol>
<li>Obiady od 40 zł</li>
<li>Przekąski od 10 zł</li>
<li>Kolacje od 20 zł</li>
</ol>
</section>
<section id="bottom">
<h2>Zarezerwuj stolik on-line</h2>
<form action="rezerwacja.php" method="post">
</form>
</section>
<footer>
</footer>
</body>
</html>Zawiera podpisy i pola: „Data (format rrrr-mm-dd):”, poniżej pole edycyjne. „Ile osób?”, poniżej pole edycyjne typu numerycznego. „Twój numer telefonu:”, poniżej pole edycyjne.
Każdy podpis w <label> powiązanym z polem przez for/id, a „poniżej” to <br> po podpisie i po polu. Pole liczby osób ma type="number". Najważniejszy jest atrybut name: pod tą nazwą wartość trafi do $_POST w skrypcie (date, people, phone) (R.2.9).
Pole bez name w ogóle nie zostanie wysłane - skrypt nie znajdzie wartości w $_POST.
restauracja.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Witamy w restauracji "Wszystkie Smaki"</h1>
</header>
<section id="left">
<img src="menu.jpg" alt="Nasze danie">
</section>
<section id="right">
<h4>U nas dobrze zjesz!</h4>
<ol>
<li>Obiady od 40 zł</li>
<li>Przekąski od 10 zł</li>
<li>Kolacje od 20 zł</li>
</ol>
</section>
<section id="bottom">
<h2>Zarezerwuj stolik on-line</h2>
<form action="rezerwacja.php" method="post">
<label for="date">Data (format rrrr-mm-dd):</label><br>
<input type="text" id="date" name="date"><br>
<label for="people">Ile osób?</label><br>
<input type="number" id="people" name="people"><br>
<label for="phone">Twój numer telefonu:</label><br>
<input type="text" id="phone" name="phone"><br>
</form>
</section>
<footer>
</footer>
</body>
</html>Pole wyboru z napisem: „Zgadzam się na przetwarzanie moich danych osobowych”.
<input type="checkbox"> z podpisem za polem, jak na obrazie 2 - kliknięcie napisu też zaznacza pole, bo jest w <label>.
restauracja.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Witamy w restauracji "Wszystkie Smaki"</h1>
</header>
<section id="left">
<img src="menu.jpg" alt="Nasze danie">
</section>
<section id="right">
<h4>U nas dobrze zjesz!</h4>
<ol>
<li>Obiady od 40 zł</li>
<li>Przekąski od 10 zł</li>
<li>Kolacje od 20 zł</li>
</ol>
</section>
<section id="bottom">
<h2>Zarezerwuj stolik on-line</h2>
<form action="rezerwacja.php" method="post">
<label for="date">Data (format rrrr-mm-dd):</label><br>
<input type="text" id="date" name="date"><br>
<label for="people">Ile osób?</label><br>
<input type="number" id="people" name="people"><br>
<label for="phone">Twój numer telefonu:</label><br>
<input type="text" id="phone" name="phone"><br>
<input type="checkbox" id="consent" name="consent">
<label for="consent">Zgadzam się na przetwarzanie moich danych osobowych</label><br>
</form>
</section>
<footer>
</footer>
</body>
</html>Przycisk „WYCZYŚĆ”, po jego wciśnięciu formularz jest czyszczony. Przycisk „REZERWUJ”, po jego wciśnięciu są wysyłane dane z formularza.
Działanie przycisku zależy od typu: type="reset" przywraca pola do wartości początkowych - czyści formularz bez jednej linii skryptu (R.3.2); type="submit" wysyła formularz pod adres z action (R.3.3). Wpisz coś w podglądzie i kliknij WYCZYŚĆ.
restauracja.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Witamy w restauracji "Wszystkie Smaki"</h1>
</header>
<section id="left">
<img src="menu.jpg" alt="Nasze danie">
</section>
<section id="right">
<h4>U nas dobrze zjesz!</h4>
<ol>
<li>Obiady od 40 zł</li>
<li>Przekąski od 10 zł</li>
<li>Kolacje od 20 zł</li>
</ol>
</section>
<section id="bottom">
<h2>Zarezerwuj stolik on-line</h2>
<form action="rezerwacja.php" method="post">
<label for="date">Data (format rrrr-mm-dd):</label><br>
<input type="text" id="date" name="date"><br>
<label for="people">Ile osób?</label><br>
<input type="number" id="people" name="people"><br>
<label for="phone">Twój numer telefonu:</label><br>
<input type="text" id="phone" name="phone"><br>
<input type="checkbox" id="consent" name="consent">
<label for="consent">Zgadzam się na przetwarzanie moich danych osobowych</label><br>
<button type="reset">WYCZYŚĆ</button>
<button type="submit">REZERWUJ</button>
</form>
</section>
<footer>
</footer>
</body>
</html>Zawartość stopki: napis o treści: „Stronę internetową opracował: ”, dalej wstawiony Twój numer PESEL, lub w przypadku jego braku, inny numer, którym został podpisany arkusz, numer powinien być zapisany pochyloną czcionką.
Sam napis (arkusz nie wymaga akapitu), a numer w <i> - pochylenie jako znacznik HTML; klucz R.3.4 wprost dopuszcza to jedno formatowanie poza CSS. Na egzaminie w miejscu nazwiska wpisujesz swój PESEL (R.2.10).
restauracja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Witamy w restauracji "Wszystkie Smaki"</h1>
</header>
<section id="left">
<img src="menu.jpg" alt="Nasze danie">
</section>
<section id="right">
<h4>U nas dobrze zjesz!</h4>
<ol>
<li>Obiady od 40 zł</li>
<li>Przekąski od 10 zł</li>
<li>Kolacje od 20 zł</li>
</ol>
</section>
<section id="bottom">
<h2>Zarezerwuj stolik on-line</h2>
<form action="rezerwacja.php" method="post">
<label for="date">Data (format rrrr-mm-dd):</label><br>
<input type="text" id="date" name="date"><br>
<label for="people">Ile osób?</label><br>
<input type="number" id="people" name="people"><br>
<label for="phone">Twój numer telefonu:</label><br>
<input type="text" id="phone" name="phone"><br>
<input type="checkbox" id="consent" name="consent">
<label for="consent">Zgadzam się na przetwarzanie moich danych osobowych</label><br>
<button type="reset">WYCZYŚĆ</button>
<button type="submit">REZERWUJ</button>
</form>
</section>
<footer>
Stronę internetową opracował: <i>Bartosz Bryniarski</i>
</footer>
</body>
</html>Kroki 19-26 · po tym etapie masz 30 z 36 kryteriów (pkt)
Plik CSS zawiera formatowanie: Całej strony: kolor tła #F6E5DC, krój czcionki Verdana.
„Cała strona” to selektor body - tło obejmie całe okno, a krój odziedziczą wszystkie elementy (R.4.1, R.4.2).
styl_1.css CSS nowy plik body {
background-color: #F6E5DC;
font-family: Verdana;
}Banera: kolor tła #2F180C, wyrównanie tekstu do środka, kolor czcionki khaki, wysokość 60 px.
khaki to nazwa koloru w CSS - wpisujesz ją wprost.
styl_1.css CSS zmienione: 6 linii body {
background-color: #F6E5DC;
font-family: Verdana;
}
header {
background-color: #2F180C;
text-align: center;
color: khaki;
height: 60px;
}Panelu lewego: szerokość 60%. Panelu prawego: rozmiar czcionki 150%, marginesy wewnętrzne 70 px.
Panel prawy nie ma podanej szerokości - zajmie tyle, ile potrzebuje jego treść z marginesem 70 px.
styl_1.css CSS zmienione: 7 linii body {
background-color: #F6E5DC;
font-family: Verdana;
}
header {
background-color: #2F180C;
text-align: center;
color: khaki;
height: 60px;
}
#left {
width: 60%;
}
#right {
font-size: 150%;
padding: 70px;
}Panelu dolnego: kolor tła #D0B6A8, wyrównanie tekstu do środka, marginesy wewnętrzne 30 px.
Wyśrodkowanie obejmuje też pola i przyciski formularza - są elementami liniowymi.
styl_1.css CSS zmienione: 5 linii body {
background-color: #F6E5DC;
font-family: Verdana;
}
header {
background-color: #2F180C;
text-align: center;
color: khaki;
height: 60px;
}
#left {
width: 60%;
}
#right {
font-size: 150%;
padding: 70px;
}
#bottom {
background-color: #D0B6A8;
text-align: center;
padding: 30px;
}Stopki: kolor tła #2F180C, kolor czcionki khaki, wysokość 60 px.
Jak baner, ale tekst zostaje przy lewej krawędzi (obraz 2).
styl_1.css CSS zmienione: 5 linii body {
background-color: #F6E5DC;
font-family: Verdana;
}
header {
background-color: #2F180C;
text-align: center;
color: khaki;
height: 60px;
}
#left {
width: 60%;
}
#right {
font-size: 150%;
padding: 70px;
}
#bottom {
background-color: #D0B6A8;
text-align: center;
padding: 30px;
}
footer {
background-color: #2F180C;
color: khaki;
height: 60px;
}Obrazu: wysokość 350 px.
Podaj tylko wysokość - szerokość dopasuje się do proporcji zdjęcia.
styl_1.css CSS zmienione: 3 linie body {
background-color: #F6E5DC;
font-family: Verdana;
}
header {
background-color: #2F180C;
text-align: center;
color: khaki;
height: 60px;
}
#left {
width: 60%;
}
#right {
font-size: 150%;
padding: 70px;
}
#bottom {
background-color: #D0B6A8;
text-align: center;
padding: 30px;
}
footer {
background-color: #2F180C;
color: khaki;
height: 60px;
}
img {
height: 350px;
}Obu przycisków: marginesy zewnętrzne 10 px, wewnętrzne 5 px, kolor tła #2F180C, kolor czcionki khaki.
Selektor button obejmuje oba przyciski naraz (R.4.9, R.4.10).
styl_1.css CSS zmienione: 6 linii body {
background-color: #F6E5DC;
font-family: Verdana;
}
header {
background-color: #2F180C;
text-align: center;
color: khaki;
height: 60px;
}
#left {
width: 60%;
}
#right {
font-size: 150%;
padding: 70px;
}
#bottom {
background-color: #D0B6A8;
text-align: center;
padding: 30px;
}
footer {
background-color: #2F180C;
color: khaki;
height: 60px;
}
img {
height: 350px;
}
button {
margin: 10px;
padding: 5px;
background-color: #2F180C;
color: khaki;
}Podział zrealizowany za pomocą znaczników sekcji tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.
#left, #right { float: left; } - panele obok siebie (lewy 60%, prawy obok, na szerokość treści); #bottom { clear: both; } - panel dolny pod nimi, na całą szerokość. Stopka stoi pod panelem dolnym zwyczajnie (R.3.1).
Panel prawy ma szerokość swojej treści - w Chrome około 400 px (czcionka 150% i padding 70 px). Gdy obszar strony ma mniej niż około 1020 px szerokości (np. ekran 1024 px), panel nie mieści się obok 60% panelu lewego i spada pod zdjęcie - sprawdzone w Chrome. Przed oceną układu (R.3.1) obejrzyj stronę w zmaksymalizowanym oknie.
styl_1.css CSS zmienione: 4 linie body {
background-color: #F6E5DC;
font-family: Verdana;
}
header {
background-color: #2F180C;
text-align: center;
color: khaki;
height: 60px;
}
#left, #right {
float: left;
}
#left {
width: 60%;
}
#right {
font-size: 150%;
padding: 70px;
}
#bottom {
clear: both;
background-color: #D0B6A8;
text-align: center;
padding: 30px;
}
footer {
background-color: #2F180C;
color: khaki;
height: 60px;
}
img {
height: 350px;
}
button {
margin: 10px;
padding: 5px;
background-color: #2F180C;
color: khaki;
}Kroki 27-31 · po tym etapie masz 36 z 36 kryteriów (pkt)
Wymagania dotyczące skryptu: Napisany w języku PHP, w pliku o nazwie rezerwacja.php. Jest uruchamiany po wypełnieniu formularza i wciśnięciu przycisku REZERWUJ. Nie jest wymagane sprawdzenie poprawności danych wpisanych w formularz. Wypisuje tekst „Dodano rezerwację do bazy”.
Utwórz rezerwacja.php w tym samym folderze co strona - tam wysyła formularz (action). Na start sam komunikat z arkusza przez echo (R.5.1, R.5.4). Plik nie ma kodu HTML: przeglądarka pokaże po wysłaniu formularza sam tekst - podgląd obok to właśnie ta strona.
rezerwacja.php PHP nowy plik <?php
echo 'Dodano rezerwację do bazy';
?>Łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie baza.
mysqli_connect z tabeli 1: serwer, użytkownik, hasło (puste), nazwa bazy baza (R.5.2).
rezerwacja.php PHP zmienione: 1 linia <?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
echo 'Dodano rezerwację do bazy';
?>Podgląd strony bez zmian - taki jak po kroku 27.
Pobiera dane z formularza.
Dane wysłane metodą POST są w tablicy $_POST, pod nazwami z atrybutów name formularza: $_POST['date'], $_POST['people'], $_POST['phone'] (R.5.5). Zapisz je w zmiennych o tych samych, angielskich nazwach. Pole zgody nie jest potrzebne w bazie.
$_POST['data'] przy polu name="date" daje ostrzeżenie „Undefined array key” i pustą wartość - klucz w $_POST to dokładnie name pola.
rezerwacja.php PHP zmienione: 3 linie <?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
$date = $_POST['date'];
$people = $_POST['people'];
$phone = $_POST['phone'];
echo 'Dodano rezerwację do bazy';
?>Podgląd strony bez zmian - taki jak po kroku 27.
Wysyła do bazy danych zapytanie wstawiające rekord do tabeli rezerwacje z danymi pobranymi z formularza bez wypełnionego numeru stolika (zmodyfikowane zapytanie 1, patrz punkt „Operacje na bazie danych”).
Zapytanie 1 bez numeru stolika: lista kolumn tylko z trzema polami, a w VALUES zmienne zamiast stałych. Zapytanie w cudzysłowie, żeby PHP podstawił zmienne; data i telefon w apostrofach, bo w SQL to teksty. Numer stolika zostaje pusty (NULL), a id nada baza (R.5.6).
⚠️ Wklejanie danych z formularza do SQL jest niebezpieczne - poprawisz to w etapie „Dobre praktyki”. Na egzaminie arkusz wprost zwalnia ze sprawdzania danych.
Puste pole liczby osób daje w zapytaniu VALUES ('…', , '…') - błąd składni SQL, wyjątek „Uncaught mysqli_sql_exception” i strona się urywa. Tak samo kończy się otwarcie rezerwacja.php wprost z paska adresu, bez formularza (najpierw ostrzeżenia „Undefined array key”). Sprawdzone w PHP 8.2. Klucz tego nie sprawdza - zabezpieczenie jest w etapie „Dobre praktyki”.
rezerwacja.php PHP zmienione: 1 linia <?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
$date = $_POST['date'];
$people = $_POST['people'];
$phone = $_POST['phone'];
mysqli_query($connection, "INSERT INTO rezerwacje (data_rez, liczba_osob, telefon) VALUES ('$date', $people, '$phone');");
echo 'Dodano rezerwację do bazy';
?>Podgląd strony bez zmian - taki jak po kroku 27.
Na końcu działania skrypt zamyka połączenie z serwerem.
mysqli_close($connection) na końcu - ostatnia operacja na bazie (R.5.3). Sprawdź całość: otwórz http://localhost/…/restauracja.html, wypełnij formularz i kliknij REZERWUJ - przeglądarka pokazuje „Dodano rezerwację do bazy”, a w phpMyAdmin w tabeli rezerwacje jest nowy wiersz z NULL w numerze stolika (obok: stan tabeli po wysłaniu daty 2026-10-10 dla 2 osób).
rezerwacja.php PHP zmienione: 1 linia <?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
$date = $_POST['date'];
$people = $_POST['people'];
$phone = $_POST['phone'];
mysqli_query($connection, "INSERT INTO rezerwacje (data_rez, liczba_osob, telefon) VALUES ('$date', $people, '$phone');");
echo 'Dodano rezerwację do bazy';
mysqli_close($connection);
?>
Kroki 32-33 · po tym etapie masz 36 z 36 kryteriów (pkt)
Nie jest wymagane sprawdzenie poprawności danych wpisanych w formularz.
Na egzaminie sprawdzania nie ma, w prawdziwej rezerwacji - musi być:
exit, zamiast wpisywać puste rekordy;mysqli_prepare z ?, mysqli_stmt_bind_param z typami 'sis' - tekst, liczba, tekst): telefon w rodzaju 1'); DROP TABLE rezerwacje; -- zostaje zwykłym tekstem, a nie kodem SQL;(int) zamienia liczbę osób na liczbę całkowitą.Stara linia zostaje w komentarzu. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
rezerwacja.php PHP zmienione: 9 linii <?php
if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST['consent'])) {
echo 'Wypełnij formularz rezerwacji i zaznacz zgodę.';
exit;
}
$connection = mysqli_connect('localhost', 'root', '', 'baza');
$date = $_POST['date'];
$people = (int) $_POST['people'];
$phone = $_POST['phone'];
$statement = mysqli_prepare($connection, 'INSERT INTO rezerwacje (data_rez, liczba_osob, telefon) VALUES (?, ?, ?)');
mysqli_stmt_bind_param($statement, 'sis', $date, $people, $phone);
mysqli_stmt_execute($statement);
// mysqli_query($connection, "INSERT INTO rezerwacje (data_rez, liczba_osob, telefon) VALUES ('$date', $people, '$phone');");
echo 'Dodano rezerwację do bazy';
mysqli_close($connection);
?>Formularz zgodny z obrazem 2, wysyłający dane do pliku rezerwacja.php metodą bezpieczną.
HTML5 potrafi sprawdzić dane, zanim formularz wyjdzie z przeglądarki:
type="date" - kalendarz zamiast wpisywania; wysyła datę zawsze w formacie rrrr-mm-dd, takim, jaki przyjmuje kolumna date,min="1" - nie da się zarezerwować stolika dla 0 osób,type="tel" - na telefonie otwiera klawiaturę numeryczną,required - pole musi być wypełnione (przy polu wyboru: zaznaczone), inaczej przeglądarka zatrzyma wysyłkę.To wygoda dla użytkownika, a nie zabezpieczenie: dane da się wysłać z pominięciem formularza, dlatego sprawdzenie w PHP z poprzedniego kroku zostaje. Na egzaminie wystarczy wersja wcześniejsza - arkusz wymaga pola tekstowego na datę z podanym formatem.
restauracja.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Restauracja Wszystkie Smaki</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Witamy w restauracji "Wszystkie Smaki"</h1>
</header>
<section id="left">
<img src="menu.jpg" alt="Nasze danie">
</section>
<section id="right">
<h4>U nas dobrze zjesz!</h4>
<ol>
<li>Obiady od 40 zł</li>
<li>Przekąski od 10 zł</li>
<li>Kolacje od 20 zł</li>
</ol>
</section>
<section id="bottom">
<h2>Zarezerwuj stolik on-line</h2>
<form action="rezerwacja.php" method="post">
<label for="date">Data (format rrrr-mm-dd):</label><br>
<input type="date" id="date" name="date" required><br>
<label for="people">Ile osób?</label><br>
<input type="number" id="people" name="people" min="1" required><br>
<label for="phone">Twój numer telefonu:</label><br>
<input type="tel" id="phone" name="phone" required><br>
<input type="checkbox" id="consent" name="consent" required>
<label for="consent">Zgadzam się na przetwarzanie moich danych osobowych</label><br>
<button type="reset">WYCZYŚĆ</button>
<button type="submit">REZERWUJ</button>
</form>
</section>
<footer>
Stronę internetową opracował: <i>Bartosz Bryniarski</i>
</footer>
</body>
</html>Krok 34 · po tym etapie masz 36 z 36 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Plik zapisz w folderze z Twoim numerem PESEL (lub innym, którym został podpisany arkusz) jako przeglądarka.txt. Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL (lub innym, którym został podpisany arkusz) powinny się znajdować pliki: kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, menu.jpg, przeglądarka.txt, restauracja.html, rezerwacja.php, styl_1.css, zad1.jpg, ewentualnie inne przygotowane pliki.
W przeglądarka.txt wpisujesz nazwę przeglądarki.
Sprawdź listę plików (zrzut importu nazywa się tu zad1.jpg), nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 33.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
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: Bartosz Bryniarski. 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.