Rozwiązanie buduje portal koła zdobywców gór polskich: baza zdobywcy z górami, osobami i osiągnięciami oraz cztery zapytania - sortowanie malejące z limitem, wybór kolumn i dwa wstawienia rekordów INSERT z kluczem nadawanym automatycznie, potem logo z przezroczystym tłem i napisem na mapie, strona zdobywcy.php z nawigacją do zrzutów, formularzem zapisu do koła i tabelą członków oraz style w styles.css. Dwa skrypty PHP: jeden dopisuje do bazy osobę z formularza, drugi wypisuje wszystkie osoby w tabeli.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypty są najpierw pisane najprościej (mysqli_query, mysqli_fetch_row), a na końcu zostają przerobione na wersję z prawdziwych projektów: zapytanie przygotowane, sprawdzenie e-maila i funkcji oraz przekierowanie po zapisie, które chroni przed podwójnym dopisaniem przy odświeżeniu strony.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: układ na siatce CSS i PHP na PDO z zapytaniem przygotowanym, walidacją i przekierowaniem po zapisie od pierwszej linii - obie wersje są zgodne z kluczem.
Baza i logo pochodzą z prawdziwego archiwum pliki4 (załącznik do arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP. Podgląd strony to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2, na świeżo zaimportowanej bazie; od kroku z zapisem - po wysłaniu formularza z danymi M., Miłosz, uczestnik, jak w ostatnim wierszu tabeli na ilustracji 2.
Jak liczą się punkty. Klucz ma 40 kryteriów (R.1.1 - R.5.8), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów - można stracić 10 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-7 · po tym etapie masz 6 z 40 kryteriów (pkt)
Utwórz bazę danych o nazwie zdobywcy, z zestawem polskich znaków (np. utf8_unicode_ci).
Rozpakuj pliki4.7z z pulpitu (hasło $ZdobyWcy&) do folderu z numerem zdającego: baza.sql i logo.jpg. W phpMyAdmin: Nowa, nazwa zdobywcy, porównywanie np. utf8_unicode_ci.
Z rozpakowanego archiwum zaimportuj tabele z pliku baza.sql do utworzonej bazy.
Import → baza.sql. Trzy tabele z ilustracji 1: gory (309 szczytów z pasmem i wysokością), osoby (15 członków koła) i osiagniecia (kto i kiedy zdobył który szczyt - pola gora_id i osoba_id).
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą 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 i zapis jako import.png.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie pasmo, nazwę góry i jej wysokość z tabeli gory i wyświetlające pierwszych 10 rekordów posortowanych malejąco według wysokości.
ORDER BY wysokosc DESC - malejąco, od najwyższego; LIMIT 10 - dziesięć pierwszych wierszy po sortowaniu. Wynik zaczyna się od Rysów (2499 m) i Mięguszowieckiego Szczytu. Zapytanie do kwerendy.txt, zrzut kw1.png.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT pasmo, nazwa_gory, wysokosc FROM gory ORDER BY wysokosc DESC LIMIT 10;
Zapytanie 2: wybierające jedynie nazwisko, imię, funkcję i email z tabeli osoby.
Cztery kolumny, bez klucza id_osoby. Wynik: 15 osób (16, jeśli wcześniej wykonano zapytanie 4 - klucz to uwzględnia). Zrzut: kw2.png. To zapytanie wypełni tabelę na stronie.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT pasmo, nazwa_gory, wysokosc FROM gory ORDER BY wysokosc DESC LIMIT 10;
-- Zapytanie 2
SELECT nazwisko, imie, funkcja, email FROM osoby;
Zapytanie 3: wstawiające osiągnięcie w postaci zdobycia góry „Łysica - Skała Agaty” (id=182) przez uczestnika B. Urszula (id=4) w dniu 2024-06-08, klucz główny uzyskiwany automatycznie.
Wartości w kolejności kolumn tabeli osiagniecia: klucz NULL (nada go baza), gora_id = 182, osoba_id = 4, data. Do osiągnięcia wpisujesz identyfikatory, nie nazwy - nazwę góry i osoby baza zna z pozostałych tabel. Nowy rekord dostaje id 12. Zrzut: kw3.png (tu: wstawiony rekord złączony z nazwą góry i osobą, żeby było widać, że to właściwe dane).
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT pasmo, nazwa_gory, wysokosc FROM gory ORDER BY wysokosc DESC LIMIT 10;
-- Zapytanie 2
SELECT nazwisko, imie, funkcja, email FROM osoby;
-- Zapytanie 3
INSERT INTO osiagniecia VALUES (NULL, 182, 4, "2024-06-08");
Zapytanie 4: wstawiające nową osobę: M., Miłosz, uczestnik, [email protected] do tabeli osoby, klucz główny uzyskiwany automatycznie.
To samo dla tabeli osoby: NULL w miejscu klucza i cztery napisy w apostrofach. Nowa osoba dostaje id 16. Zrzut: kw4.png. To zapytanie - z danymi z formularza zamiast stałych - wyśle Skrypt 2.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT pasmo, nazwa_gory, wysokosc FROM gory ORDER BY wysokosc DESC LIMIT 10;
-- Zapytanie 2
SELECT nazwisko, imie, funkcja, email FROM osoby;
-- Zapytanie 3
INSERT INTO osiagniecia VALUES (NULL, 182, 4, "2024-06-08");
-- Zapytanie 4
INSERT INTO osoby VALUES (NULL, 'M.', 'Miłosz', 'uczestnik', '[email protected]');
Kroki 8-19 · po tym etapie masz 20 z 40 kryteriów (pkt)
Cechy grafiki: Nazwa pliku logo.png, grafika wykonana na podstawie pliku logo.jpg. Tło przezroczyste. Umieszczony na środku mapy tekst o treści „ZDOBYWCY GÓR” zapisany czcionką szeryfową, w kolorze zielonym. Tekst nie może wychodzić poza obszar mapy. Przeskalowana z zachowaniem proporcji do szerokości 600 px.
W GIMP-ie:
Kolor na alfę z białym zamienia też śnieg na szczytach w przezroczystość - na tle strony góry zrobią się „dziurawe”.
Cechy witryny: Składa się ze strony o nazwie zdobywcy.php. Zapisana w języku HTML5.
Jedna strona, zdobywcy.php. Bez PHP podgląd pokazuje ją wprost.
zdobywcy.php PHP nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny.
lang="pl".
zdobywcy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków. Tytuł strony „ZDOBYWCY GÓR” widoczny na karcie przeglądarki.
<meta charset="UTF-8"> i <title>.
zdobywcy.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styles.css prawidłowo połączony z kodem strony.
Uwaga na nazwę: styles.css - z „s” na końcu.
style.css albo styl.css (jak w innych arkuszach) odcina wszystkie style.
zdobywcy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>Podział strony na blok nagłówkowy, poniżej blok nawigacji, poniżej obok siebie bloki lewy i prawy, na dole blok stopki. Podział zrealizowany za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 2.
<header>, <nav>, dwie <section> (left, right) i <footer> (R.2.4).
zdobywcy.php PHP zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści: „Klub zdobywców gór polskich”.
<h1>.
zdobywcy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Klub zdobywców gór polskich</h1>
</header>
<nav>
</nav>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku nawigacji: odnośniki do plików zawierających zrzuty ekranu wykonanych kwerend z treścią: kwerenda1, kwerenda2, kwerenda3, kwerenda4.
Odnośnik może prowadzić do dowolnego pliku, także obrazu - kliknięcie otworzy zrzut w przeglądarce. Zrzuty kw1.png - kw4.png leżą w tym samym folderze, więc wystarczy sama nazwa (R.3.3). W podglądzie kliknięcia są zablokowane.
zdobywcy.php PHP zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Klub zdobywców gór polskich</h1>
</header>
<nav>
<a href="kw1.png">kwerenda1</a>
<a href="kw2.png">kwerenda2</a>
<a href="kw3.png">kwerenda3</a>
<a href="kw4.png">kwerenda4</a>
</nav>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku lewego: Grafika logo.png z tekstem alternatywnym o treści: „logo zdobywcy”. Nagłówek trzeciego stopnia o treści: „razem z nami:”. Lista punktowana (nieuporządkowana) zawierająca elementy: „wyjazdy”, „szkolenia”, „rekreacja”, „wypoczynek”, „wyzwania”.
Obraz, <h3> i <ul> z pięcioma <li> (R.2.5, R.2.6, R.2.7).
zdobywcy.php PHP zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Klub zdobywców gór polskich</h1>
</header>
<nav>
<a href="kw1.png">kwerenda1</a>
<a href="kw2.png">kwerenda2</a>
<a href="kw3.png">kwerenda3</a>
<a href="kw4.png">kwerenda4</a>
</nav>
<section id="left">
<img src="logo.png" alt="logo zdobywcy">
<h3>razem z nami:</h3>
<ul>
<li>wyjazdy</li>
<li>szkolenia</li>
<li>rekreacja</li>
<li>wypoczynek</li>
<li>wyzwania</li>
</ul>
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku prawego: Nagłówek drugiego stopnia o treści: „Dołącz do naszego zespołu!”. Paragraf zawierający tekst „Wpisz swoje dane do formularza:”. Formularz wysyłający dane do tego samego pliku metodą bezpieczną, zawierający: pole edycyjne poprzedzone etykietą „Nazwisko: ”, pole edycyjne poprzedzone etykietą „Imię: ”, pole listy rozwijanej poprzedzone etykietą „Funkcja: ”, o elementach: „uczestnik”, „przewodnik”, „zaopatrzeniowiec”, „organizator”, „ratownik”, pole edycyjne przeznaczone do wpisywania adresu email, poprzedzone etykietą „Email: ”, przycisk „Dodaj” wysyłający dane z formularza do skryptu 2.
method="post" bez action - dane wracają do zdobywcy.php (R.3.4); „metoda bezpieczna” w rozumieniu arkusza to POST (tak ocenia klucz R.3.4) - dane idą w treści żądania, a nie w adresie strony. W specyfikacji HTTP „bezpieczne” są co prawda metody, które niczego nie zmieniają na serwerze (GET i HEAD), ale punkt daje method="post",for/id; nazwy name (surname, name, role, email) to klucze, pod którymi Skrypt 2 znajdzie dane w $_POST,type="email" - przeglądarka sprawdzi format adresu przed wysłaniem (R.3.6),<select> z pięcioma opcjami; przycisk type="submit" (R.3.5).zdobywcy.php PHP zmienione: 19 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Klub zdobywców gór polskich</h1>
</header>
<nav>
<a href="kw1.png">kwerenda1</a>
<a href="kw2.png">kwerenda2</a>
<a href="kw3.png">kwerenda3</a>
<a href="kw4.png">kwerenda4</a>
</nav>
<section id="left">
<img src="logo.png" alt="logo zdobywcy">
<h3>razem z nami:</h3>
<ul>
<li>wyjazdy</li>
<li>szkolenia</li>
<li>rekreacja</li>
<li>wypoczynek</li>
<li>wyzwania</li>
</ul>
</section>
<section id="right">
<h2>Dołącz do naszego zespołu!</h2>
<p>Wpisz swoje dane do formularza:</p>
<form method="post">
<label for="surname">Nazwisko: </label>
<input type="text" id="surname" name="surname">
<label for="name">Imię: </label>
<input type="text" id="name" name="name">
<label for="role">Funkcja: </label>
<select id="role" name="role">
<option>uczestnik</option>
<option>przewodnik</option>
<option>zaopatrzeniowiec</option>
<option>organizator</option>
<option>ratownik</option>
</select>
<label for="email">Email: </label>
<input type="email" id="email" name="email">
<button type="submit">Dodaj</button>
</form>
</section>
<footer>
</footer>
</body>
</html>Tabela o 4 kolumnach, pierwszy jej wiersz zawiera komórki nagłówkowe: Nazwisko, Imię, Funkcja, Email. Tabela jest wypełniana za pomocą skryptu 1.
Wiersz <th>; resztę wierszy dopisze Skrypt 1 (R.2.9).
zdobywcy.php PHP zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Klub zdobywców gór polskich</h1>
</header>
<nav>
<a href="kw1.png">kwerenda1</a>
<a href="kw2.png">kwerenda2</a>
<a href="kw3.png">kwerenda3</a>
<a href="kw4.png">kwerenda4</a>
</nav>
<section id="left">
<img src="logo.png" alt="logo zdobywcy">
<h3>razem z nami:</h3>
<ul>
<li>wyjazdy</li>
<li>szkolenia</li>
<li>rekreacja</li>
<li>wypoczynek</li>
<li>wyzwania</li>
</ul>
</section>
<section id="right">
<h2>Dołącz do naszego zespołu!</h2>
<p>Wpisz swoje dane do formularza:</p>
<form method="post">
<label for="surname">Nazwisko: </label>
<input type="text" id="surname" name="surname">
<label for="name">Imię: </label>
<input type="text" id="name" name="name">
<label for="role">Funkcja: </label>
<select id="role" name="role">
<option>uczestnik</option>
<option>przewodnik</option>
<option>zaopatrzeniowiec</option>
<option>organizator</option>
<option>ratownik</option>
</select>
<label for="email">Email: </label>
<input type="email" id="email" name="email">
<button type="submit">Dodaj</button>
</form>
<table>
<tr>
<th>Nazwisko</th>
<th>Imię</th>
<th>Funkcja</th>
<th>Email</th>
</tr>
</table>
</section>
<footer>
</footer>
</body>
</html>Zawartość stopki: paragraf „Stronę wykonał: ”, dalej wstawiony numer zdającego.
Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL).
zdobywcy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Klub zdobywców gór polskich</h1>
</header>
<nav>
<a href="kw1.png">kwerenda1</a>
<a href="kw2.png">kwerenda2</a>
<a href="kw3.png">kwerenda3</a>
<a href="kw4.png">kwerenda4</a>
</nav>
<section id="left">
<img src="logo.png" alt="logo zdobywcy">
<h3>razem z nami:</h3>
<ul>
<li>wyjazdy</li>
<li>szkolenia</li>
<li>rekreacja</li>
<li>wypoczynek</li>
<li>wyzwania</li>
</ul>
</section>
<section id="right">
<h2>Dołącz do naszego zespołu!</h2>
<p>Wpisz swoje dane do formularza:</p>
<form method="post">
<label for="surname">Nazwisko: </label>
<input type="text" id="surname" name="surname">
<label for="name">Imię: </label>
<input type="text" id="name" name="name">
<label for="role">Funkcja: </label>
<select id="role" name="role">
<option>uczestnik</option>
<option>przewodnik</option>
<option>zaopatrzeniowiec</option>
<option>organizator</option>
<option>ratownik</option>
</select>
<label for="email">Email: </label>
<input type="email" id="email" name="email">
<button type="submit">Dodaj</button>
</form>
<table>
<tr>
<th>Nazwisko</th>
<th>Imię</th>
<th>Funkcja</th>
<th>Email</th>
</tr>
</table>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 20-25 · po tym etapie masz 31 z 40 kryteriów (pkt)
Dla selektora ciała strony: kolor tła #DDEEDD, krój czcionki Tahoma, wyrównanie tekstu do środka. Dla selektora listy punktowanej: typ punktora kwadrat. Dla selektora elementu listy: wyrównanie tekstu do lewej.
Punktor kwadrat to square. Strona jest wyśrodkowana, ale elementy listy - jak na ilustracji 2 - przy lewej krawędzi (R.4.1, R.4.7).
styles.css CSS nowy plik body {
background-color: #DDEEDD;
font-family: Tahoma;
text-align: center;
}
ul {
list-style-type: square;
}
li {
text-align: left;
}Wspólne dla bloku nagłówkowego i stopki: biały kolor czcionki, rozmiar czcionki 120%, marginesy wewnętrzne 10 px. Dodatkowo dla bloku nagłówkowego: kolor tła #409FFF. Dodatkowo dla stopki: kolor tła #A0A0A0.
Wspólne cechy w jednej regule, kolory tła osobno (R.4.2, R.4.3, R.4.6, R.4.10).
styles.css CSS zmienione: 11 linii body {
background-color: #DDEEDD;
font-family: Tahoma;
text-align: center;
}
ul {
list-style-type: square;
}
li {
text-align: left;
}
header, footer {
color: white;
font-size: 120%;
padding: 10px;
}
header {
background-color: #409FFF;
}
footer {
background-color: #A0A0A0;
}Dla bloku nawigacji: kolor tła #FFFFFF, odstępy między wyrazami 30 px, marginesy wewnętrzne 10 px. Dla selektora odnośnika: kolor czcionki #009900.
word-spacing powiększa odstęp między wyrazami - każdy odnośnik to jedno słowo, więc rozsuwają się o 30 px (R.4.2, R.4.3, R.4.6, R.4.8).
styles.css CSS zmienione: 8 linii body {
background-color: #DDEEDD;
font-family: Tahoma;
text-align: center;
}
ul {
list-style-type: square;
}
li {
text-align: left;
}
header, footer {
color: white;
font-size: 120%;
padding: 10px;
}
header {
background-color: #409FFF;
}
footer {
background-color: #A0A0A0;
}
nav {
background-color: #FFFFFF;
word-spacing: 30px;
padding: 10px;
}
a {
color: #009900;
}Dla bloku lewego: kolor tła #E4C0A8, szerokość 30%, wysokość 650 px. Dla bloku prawego: szerokość 70%, wysokość 650 px, paski przewijania widoczne tylko gdy tekst nie mieści się w bloku. Dla selektora obrazu: szerokość 90%.
overflow: auto - pasek tylko przy dłuższej treści (R.4.2, R.4.4, R.4.5).
styles.css CSS zmienione: 13 linii body {
background-color: #DDEEDD;
font-family: Tahoma;
text-align: center;
}
ul {
list-style-type: square;
}
li {
text-align: left;
}
header, footer {
color: white;
font-size: 120%;
padding: 10px;
}
header {
background-color: #409FFF;
}
footer {
background-color: #A0A0A0;
}
nav {
background-color: #FFFFFF;
word-spacing: 30px;
padding: 10px;
}
a {
color: #009900;
}
#left {
background-color: #E4C0A8;
width: 30%;
height: 650px;
}
#right {
width: 70%;
height: 650px;
overflow: auto;
}
img {
width: 90%;
}Wspólne dla tabeli i wszystkich komórek tabeli: obramowanie ciągłe koloru czarnego o grubości 1 px. Dodatkowo dla tabeli: margines zewnętrzny górny 20 px, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę.
„Wszystkich komórek” - th i td. margin: auto wyśrodkowuje tabelę, a następna linia margin-top: 20px nadpisuje tylko margines górny - kolejność ma znaczenie (R.4.6, R.4.9).
Odwrotna kolejność (margin-top: 20px; przed margin: auto;) - skrót margin nadpisze górny margines na auto, czyli 0.
styles.css CSS zmienione: 7 linii body {
background-color: #DDEEDD;
font-family: Tahoma;
text-align: center;
}
ul {
list-style-type: square;
}
li {
text-align: left;
}
header, footer {
color: white;
font-size: 120%;
padding: 10px;
}
header {
background-color: #409FFF;
}
footer {
background-color: #A0A0A0;
}
nav {
background-color: #FFFFFF;
word-spacing: 30px;
padding: 10px;
}
a {
color: #009900;
}
#left {
background-color: #E4C0A8;
width: 30%;
height: 650px;
}
#right {
width: 70%;
height: 650px;
overflow: auto;
}
img {
width: 90%;
}
table, th, td {
border: 1px solid black;
}
table {
margin: auto;
margin-top: 20px;
}Poniżej obok siebie bloki lewy i prawy, na dole blok stopki. Podział zrealizowany tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 2.
float: left dla sekcji, clear: both dla stopki (R.3.1).
styles.css CSS zmienione: 6 linii body {
background-color: #DDEEDD;
font-family: Tahoma;
text-align: center;
}
ul {
list-style-type: square;
}
li {
text-align: left;
}
header, footer {
color: white;
font-size: 120%;
padding: 10px;
}
header {
background-color: #409FFF;
}
footer {
background-color: #A0A0A0;
}
nav {
background-color: #FFFFFF;
word-spacing: 30px;
padding: 10px;
}
a {
color: #009900;
}
#left {
background-color: #E4C0A8;
width: 30%;
height: 650px;
}
#right {
width: 70%;
height: 650px;
overflow: auto;
}
img {
width: 90%;
}
table, th, td {
border: 1px solid black;
}
table {
margin: auto;
margin-top: 20px;
}
section {
float: left;
}
footer {
clear: both;
}Kroki 26-28 · po tym etapie masz 40 z 40 kryteriów (pkt)
Łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie zdobywcy. Na końcu jest zamykane połączenie z serwerem.
Oba skrypty stoją w bloku prawym. Połączenie otwierasz w bloku PHP pod formularzem, bo tam stanie Skrypt 2 - dopisanie osoby musi się wykonać przed wypisaniem tabeli, żeby nowa osoba była od razu w tabeli. Zamknięcie (mysqli_close) stawiasz w bloku PHP wewnątrz tabeli, gdzie stanie Skrypt 1 - to ostatnia operacja na bazie (R.5.1, R.5.2, R.5.3). Zmienna $connection z pierwszego bloku jest dostępna w drugim - to ten sam plik PHP.
zdobywcy.php PHP zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Klub zdobywców gór polskich</h1>
</header>
<nav>
<a href="kw1.png">kwerenda1</a>
<a href="kw2.png">kwerenda2</a>
<a href="kw3.png">kwerenda3</a>
<a href="kw4.png">kwerenda4</a>
</nav>
<section id="left">
<img src="logo.png" alt="logo zdobywcy">
<h3>razem z nami:</h3>
<ul>
<li>wyjazdy</li>
<li>szkolenia</li>
<li>rekreacja</li>
<li>wypoczynek</li>
<li>wyzwania</li>
</ul>
</section>
<section id="right">
<h2>Dołącz do naszego zespołu!</h2>
<p>Wpisz swoje dane do formularza:</p>
<form method="post">
<label for="surname">Nazwisko: </label>
<input type="text" id="surname" name="surname">
<label for="name">Imię: </label>
<input type="text" id="name" name="name">
<label for="role">Funkcja: </label>
<select id="role" name="role">
<option>uczestnik</option>
<option>przewodnik</option>
<option>zaopatrzeniowiec</option>
<option>organizator</option>
<option>ratownik</option>
</select>
<label for="email">Email: </label>
<input type="email" id="email" name="email">
<button type="submit">Dodaj</button>
</form>
<?php
$connection = mysqli_connect("localhost", "root", "", "zdobywcy");
?>
<table>
<tr>
<th>Nazwisko</th>
<th>Imię</th>
<th>Funkcja</th>
<th>Email</th>
</tr>
<?php
mysqli_close($connection);
?>
</table>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 1: wysyła do bazy danych zapytanie 2. W każdym wierszu tabeli, w odpowiednich komórkach, wyświetlane są zwrócone zapytaniem kolejne wiersze z bazy.
Zapytanie 2, pętla while z mysqli_fetch_row i dla każdej osoby wiersz <tr> z czterema komórkami w kolejności kolumn z SELECT. Podgląd: 15 członków koła (R.2.8, R.5.4, R.5.5).
zdobywcy.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Klub zdobywców gór polskich</h1>
</header>
<nav>
<a href="kw1.png">kwerenda1</a>
<a href="kw2.png">kwerenda2</a>
<a href="kw3.png">kwerenda3</a>
<a href="kw4.png">kwerenda4</a>
</nav>
<section id="left">
<img src="logo.png" alt="logo zdobywcy">
<h3>razem z nami:</h3>
<ul>
<li>wyjazdy</li>
<li>szkolenia</li>
<li>rekreacja</li>
<li>wypoczynek</li>
<li>wyzwania</li>
</ul>
</section>
<section id="right">
<h2>Dołącz do naszego zespołu!</h2>
<p>Wpisz swoje dane do formularza:</p>
<form method="post">
<label for="surname">Nazwisko: </label>
<input type="text" id="surname" name="surname">
<label for="name">Imię: </label>
<input type="text" id="name" name="name">
<label for="role">Funkcja: </label>
<select id="role" name="role">
<option>uczestnik</option>
<option>przewodnik</option>
<option>zaopatrzeniowiec</option>
<option>organizator</option>
<option>ratownik</option>
</select>
<label for="email">Email: </label>
<input type="email" id="email" name="email">
<button type="submit">Dodaj</button>
</form>
<?php
$connection = mysqli_connect("localhost", "root", "", "zdobywcy");
?>
<table>
<tr>
<th>Nazwisko</th>
<th>Imię</th>
<th>Funkcja</th>
<th>Email</th>
</tr>
<?php
$query = "SELECT nazwisko, imie, funkcja, email FROM osoby;";
$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><td>$row[3]</td></tr>";
}
mysqli_close($connection);
?>
</table>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 2 wysyła do bazy danych zmodyfikowane zapytanie 4, w ten sposób, że dane do zapytania są pobrane z formularza. Zapytanie jest wysyłane tylko wtedy, gdy podano dane w formularzu.
!empty dla nazwiska, imienia i e-maila - przy pierwszym wejściu na stronę i przy pustych polach nic się nie dopisuje (klucz: „zabezpieczony na wypadek braku danych”, wystarczy jedno pole) (R.5.7). Wartości z $_POST wstawiasz do zapytania 4 zamiast stałych. INSERT niczego nie zwraca do wypisania, więc wynik mysqli_query nie jest potrzebny. Podgląd pokazuje stan po wysłaniu formularza z danymi M., Miłosz, uczestnik - nowy, szesnasty wiersz na końcu tabeli, jak na ilustracji 2 (R.5.6, R.5.8).
Skrypt 2 postawiony pod tabelą dopisze osobę dopiero po wypisaniu tabeli - nowy wiersz pojawi się dopiero przy następnym wejściu na stronę.
Nazwisko z apostrofem (np. O'Neill) zamyka napis w zapytaniu: 'O'Neill' to dla bazy błąd składni SQL i w PHP 8 strona kończy się błędem krytycznym mysqli_sql_exception - osoba się nie dopisuje. Na egzaminie wystarczy wersja z klucza; poprawny sposób (zapytanie przygotowane) jest w etapie „Dobre praktyki”.
zdobywcy.php PHP zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Klub zdobywców gór polskich</h1>
</header>
<nav>
<a href="kw1.png">kwerenda1</a>
<a href="kw2.png">kwerenda2</a>
<a href="kw3.png">kwerenda3</a>
<a href="kw4.png">kwerenda4</a>
</nav>
<section id="left">
<img src="logo.png" alt="logo zdobywcy">
<h3>razem z nami:</h3>
<ul>
<li>wyjazdy</li>
<li>szkolenia</li>
<li>rekreacja</li>
<li>wypoczynek</li>
<li>wyzwania</li>
</ul>
</section>
<section id="right">
<h2>Dołącz do naszego zespołu!</h2>
<p>Wpisz swoje dane do formularza:</p>
<form method="post">
<label for="surname">Nazwisko: </label>
<input type="text" id="surname" name="surname">
<label for="name">Imię: </label>
<input type="text" id="name" name="name">
<label for="role">Funkcja: </label>
<select id="role" name="role">
<option>uczestnik</option>
<option>przewodnik</option>
<option>zaopatrzeniowiec</option>
<option>organizator</option>
<option>ratownik</option>
</select>
<label for="email">Email: </label>
<input type="email" id="email" name="email">
<button type="submit">Dodaj</button>
</form>
<?php
$connection = mysqli_connect("localhost", "root", "", "zdobywcy");
if (!empty($_POST["surname"]) && !empty($_POST["name"]) && !empty($_POST["email"])) {
$surname = $_POST["surname"];
$name = $_POST["name"];
$role = $_POST["role"];
$email = $_POST["email"];
$query = "INSERT INTO osoby VALUES (NULL, '$surname', '$name', '$role', '$email');";
mysqli_query($connection, $query);
}
?>
<table>
<tr>
<th>Nazwisko</th>
<th>Imię</th>
<th>Funkcja</th>
<th>Email</th>
</tr>
<?php
$query = "SELECT nazwisko, imie, funkcja, email FROM osoby;";
$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><td>$row[3]</td></tr>";
}
mysqli_close($connection);
?>
</table>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 29 · po tym etapie masz 40 z 40 kryteriów (pkt)
Zapytanie jest wysyłane tylko wtedy, gdy podano dane w formularzu.
Dwa realne problemy wersji z egzaminu, sprawdzone przy uruchamianiu:
header("Location: zdobywcy.php") i exit - przeglądarka pobiera stronę ponownie zwykłym GET, a odświeżenie już niczego nie dopisuje. header musi stać przed jakimkolwiek wypisanym znakiem, dlatego Skrypt 2 przenosisz nad <!DOCTYPE html>.?, filter_var(..., FILTER_VALIDATE_EMAIL) - type="email" działa tylko w przeglądarce, funkcja tylko z listy dozwolonych (in_array), trim i htmlspecialchars przy wypisywaniu.Podgląd pokazuje stronę po przekierowaniu - Miłosz jest w tabeli raz. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
zdobywcy.php PHP zmienione: 23 linie <?php
// Skrypt 2 przeniesiony na początek pliku: zapis, a potem przekierowanie (wzorzec POST/Redirect/GET)
$connection = mysqli_connect("localhost", "root", "", "zdobywcy");
$roles = ["uczestnik", "przewodnik", "zaopatrzeniowiec", "organizator", "ratownik"];
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$surname = trim($_POST["surname"] ?? "");
$name = trim($_POST["name"] ?? "");
$role = $_POST["role"] ?? "";
$email = filter_var(trim($_POST["email"] ?? ""), FILTER_VALIDATE_EMAIL);
if ($surname !== "" && $name !== "" && $email !== false && in_array($role, $roles, true)) {
$statement = mysqli_prepare($connection, "INSERT INTO osoby (nazwisko, imie, funkcja, email) VALUES (?, ?, ?, ?)");
mysqli_stmt_bind_param($statement, "ssss", $surname, $name, $role, $email);
mysqli_stmt_execute($statement);
}
header("Location: zdobywcy.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ZDOBYWCY GÓR</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Klub zdobywców gór polskich</h1>
</header>
<nav>
<a href="kw1.png">kwerenda1</a>
<a href="kw2.png">kwerenda2</a>
<a href="kw3.png">kwerenda3</a>
<a href="kw4.png">kwerenda4</a>
</nav>
<section id="left">
<img src="logo.png" alt="logo zdobywcy">
<h3>razem z nami:</h3>
<ul>
<li>wyjazdy</li>
<li>szkolenia</li>
<li>rekreacja</li>
<li>wypoczynek</li>
<li>wyzwania</li>
</ul>
</section>
<section id="right">
<h2>Dołącz do naszego zespołu!</h2>
<p>Wpisz swoje dane do formularza:</p>
<form method="post">
<label for="surname">Nazwisko: </label>
<input type="text" id="surname" name="surname">
<label for="name">Imię: </label>
<input type="text" id="name" name="name">
<label for="role">Funkcja: </label>
<select id="role" name="role">
<option>uczestnik</option>
<option>przewodnik</option>
<option>zaopatrzeniowiec</option>
<option>organizator</option>
<option>ratownik</option>
</select>
<label for="email">Email: </label>
<input type="email" id="email" name="email">
<button type="submit">Dodaj</button>
</form>
<table>
<tr>
<th>Nazwisko</th>
<th>Imię</th>
<th>Funkcja</th>
<th>Email</th>
</tr>
<?php
$query = "SELECT nazwisko, imie, funkcja, email FROM osoby;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<tr>";
foreach ($row as $value) {
echo "<td>" . htmlspecialchars($value) . "</td>";
}
echo "</tr>";
}
mysqli_close($connection);
?>
</table>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 30 · po tym etapie masz 40 z 40 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki.
W folderze: zdobywcy.php, styles.css, kwerendy.txt, import.png, kw1.png - kw4.png (do nich prowadzą odnośniki w nawigacji), logo.png i przeglądarka.txt. 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 29.
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.