Serwis o poziomach rzek to baza rzeki (wodowskazy i ich pomiary, relacja 1..n) z czterema zapytaniami - wybór kolumn, złączenie JOIN z warunkiem na datę, to samo złączenie z porównaniem dwóch kolumn (stanWody > stanOstrzegawczy) i AVG z GROUP BY - oraz mapa Polski przygotowana w edytorze grafiki i strona poziomRzek.php. Formularz z trzema polami opcji wysyła wybór metodą POST, a skrypt formularza wypełnia tabelę wszystkimi wodowskazami, tylko tymi ponad stanem ostrzegawczym albo tylko ponad alarmowym. Skrypt 2 wypisuje średni stan wody z każdego dnia pomiarów.
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 napisane najprościej, funkcjami z tabeli 1 arkusza (mysqli_query, mysqli_fetch_row, isset), a na końcu przerobione na wersję z prawdziwych projektów: tablica warunków zamiast drabinki if, wybrane pole opcji zaznaczone po wysłaniu, wszystkie wodowskazy od pierwszego wejścia, htmlspecialchars i średnie zaokrąglone do części setnych.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: bloki na siatce CSS (grid-template-areas), kolory w zmiennych i PHP na PDO z danymi pobranymi przed HTML-em - obie wersje są zgodne z kluczem.
Baza i grafiki pochodzą z prawdziwego archiwum pliki3 (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. Podgląd strony od kroków z PHP to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2 na bazie z arkusza - po wybraniu „Wszystkie” i kliknięciu „Pokaż” (obraz 2), a w krokach z warunkami po wybraniu pozostałych pól (obrazy 3 i 4).
Jak liczą się punkty. Klucz ma 39 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ć 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-7 · po tym etapie masz 6 z 39 kryteriów (pkt)
Utwórz bazę danych o nazwie rzeki, z zestawem polskich znaków (np. utf8_unicode_ci)
Najpierw archiwum pliki3.zip z pulpitu (hasło St@ny%RzeK - małpa, procent, wielkość liter ma znaczenie) i folder z numerem zdającego, do którego trafiają rozpakowane pliki. W phpMyAdmin: Nowa, nazwa rzeki, porównywanie utf8_unicode_ci.
Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
Zaznaczona baza rzeki, potem Import → baza.sql → Wykonaj. Powstają dwie tabele z obrazu 1: wodowskazy (17 punktów pomiarowych ze stanem ostrzegawczym i alarmowym) i pomiary (34 pomiary - po jednym dla każdego wodowskazu z 5 i 6 maja 2022). Pole wodowskazy_id łączy pomiar z wodowskazem - to relacja 1..n: jeden wodowskaz, wiele pomiarów.
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.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie pola nazwa, rzeka, stanAlarmowy z tabeli wodowskazy
SELECT nazwa, rzeka, stanAlarmowy - trzy pola, w tej kolejności,FROM wodowskazy - bez warunku, więc wszystkie wiersze.Wynik: 17 wierszy, jak w kluczu. Zapytania trafiają do kwerendy.txt, zrzut do kw1.jpg.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT nazwa, rzeka, stanAlarmowy FROM wodowskazy;
Zapytanie 2: wybierające jedynie pola nazwa, rzeka, stanOstrzegawczy, stanAlarmowy z tabeli wodowskazy oraz odpowiadające im pole stanWody z tabeli pomiary dla daty pomiaru 2022-05-05. Należy posłużyć się relacją
SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody - cztery pola wodowskazu i stan wody z pomiaru,FROM wodowskazy JOIN pomiary - złączenie obu tabel,ON wodowskazy.id = pomiary.wodowskazy_id - relacja z obrazu 1: pomiar wskazuje swój wodowskaz,WHERE dataPomiaru = '2022-05-05' - data w apostrofach, w zapisie rok-miesiąc-dzień.Wynik: 17 wierszy - każdy wodowskaz raz, ze stanem z 5 maja. Bez warunku na datę byłoby 34 (dwa pomiary na wodowskaz). To jest tabela z obrazu 2 - z tego zapytania powstanie skrypt formularza. Zrzut: kw2.jpg.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, rzeka, stanAlarmowy FROM wodowskazy;
-- Zapytanie 2
SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05';
Zapytanie 3: wybierające jedynie pola nazwa, rzeka, stanOstrzegawczy, stanAlarmowy z tabeli wodowskazy oraz odpowiadające im pole stanWody z tabeli pomiary dla daty pomiaru 2022-05-05 oraz takie, dla których stanWody jest wyższy niż stanOstrzegawczy. Należy posłużyć się relacją
To zapytanie 2 z drugim warunkiem dopisanym przez AND:
AND stanWody > stanOstrzegawczy - warunek porównuje dwie kolumny tego samego wiersza, a nie kolumnę z liczbą; „wyższy niż” to ostra nierówność.Wynik: 5 wierszy - Jarnołtów, Łazany, Jelenia Góra, Nowogrodziec, Bardo, jak w kluczu i na obrazie 3. Zrzut: kw3.jpg.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, rzeka, stanAlarmowy FROM wodowskazy;
-- Zapytanie 2
SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05';
-- Zapytanie 3
SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05' AND stanWody > stanOstrzegawczy;
Zapytanie 4: wybierające jedynie datę pomiaru oraz liczące średnie stany wody z tabeli pomiary grupując je według daty pomiaru
SELECT dataPomiaru, AVG(stanWody) - data i średnia z grupy,FROM pomiary,GROUP BY dataPomiaru - jeden wiersz na każdy dzień.Wynik: 2022-05-05 167.6471 i 2022-05-06 179.5882 (MySQL podaje średnią z czterema miejscami po przecinku). Zrzut: kw4.jpg. To zapytanie wyśle Skrypt 2.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, rzeka, stanAlarmowy FROM wodowskazy;
-- Zapytanie 2
SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05';
-- Zapytanie 3
SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05' AND stanWody > stanOstrzegawczy;
-- Zapytanie 4
SELECT dataPomiaru, AVG(stanWody) FROM pomiary GROUP BY dataPomiaru;
Kroki 8-28 · po tym etapie masz 19 z 39 kryteriów (pkt)
Dla grafiki obraz1.png, wypakowanej z archiwum, należy nadać przezroczyste tło oraz wypełnić obszar województwa dolnośląskiego kolorem niebieskim o dowolnym odcieniu. Województwo dolnośląskie znajduje się w lewym dolnym rogu mapy – patrz obraz 2.
obraz1.png to mapa 100 × 100 pikseli: szare granice województw na białym tle, bez przezroczystości. W GIMP-ie najpierw Warstwa → Przezroczystość → Dodaj kanał alfa (bez niego usunięte piksele staną się kolorem tła, a nie przezroczystością). Potem Zaznaczanie spójnego obszaru (różdżka) i kliknięcie w biel poza mapą - z klawiszem Shift w każdym rogu, jeśli obszary się nie łączą - i klawisz Delete. Różdżka zatrzymuje się na granicy kraju, więc wnętrze województw zostaje białe. Podgląd pokazuje mapę po tym kroku na ciemnym tle - widać, że biel zniknęła tylko na zewnątrz.
Dla grafiki obraz1.png, wypakowanej z archiwum, należy nadać przezroczyste tło oraz wypełnić obszar województwa dolnośląskiego kolorem niebieskim o dowolnym odcieniu. Województwo dolnośląskie znajduje się w lewym dolnym rogu mapy – patrz obraz 2.
Kolor pierwszego planu niebieski, narzędzie Wypełnienie kubełkiem z opcją Wypełnienie podobnych kolorów i kliknięcie we wnętrze województwa w lewym dolnym rogu mapy - nad nim leży lubuskie (łatwo się pomylić, oba są przy zachodniej granicy). Kubełek zalewa biel do granic województwa. Eksport: Plik → Wyeksportuj jako obraz1.png - format PNG zachowuje przezroczystość.
Eksport do JPEG gubi przezroczystość - tło znowu staje się białe i R.2.1 przepada.
Składa się ze strony o nazwie poziomRzek.php zapisanej w języku HTML5
Deklaracja <!DOCTYPE html>, sekcje head i body. Nazwa pliku z wielką literą „R” w środku, jak w arkuszu - na serwerze wielkość liter w nazwach plików ma znaczenie. Rozszerzenie .php, bo dojdą skrypty; strona otwiera się przez http://localhost/....
poziomRzek.php PHP nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Ustawiony język zawartości strony na polski
Atrybut lang="pl" w znaczniku <html>.
poziomRzek.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
<meta charset="UTF-8"> jako pierwszy element <head>. Ten krok zamyka kryterium R.2.2: nazwa pliku, deklaracja HTML5, język i kodowanie.
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Poziomy rzek”
<title> w <head>.
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Nazwa pliku: styl.css (nie style.css). Klucz przypomina, że R.3.5 przepada także wtedy, gdy któryś selektor jest źle zapisany, np. kropka zamiast # przy identyfikatorze.
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na bloki: na górze dwa bloki banera, poniżej menu, poniżej bloki: lewy i prawy, na dole blok stopki. Podział zrealizowany wyłącznie 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 obrazem 2
Banery to dwa header (klucz wymaga ich wprost, razem z footer dla stopki - R.2.4), rozróżnione identyfikatorami map i title. Menu z formularzem to nav, blok lewy z tabelą - main (główna treść strony), blok prawy z dodatkowymi informacjami - aside. Kolejność w kodzie jest taka jak na obrazie 2: od góry, od lewej.
poziomRzek.php PHP zmienione: 12 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
</header>
<header id="title">
</header>
<nav>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Zawartość pierwszego banera: obraz1.png z tekstem alternatywnym o treści: „Mapa Polski”
Mapa przygotowana w etapie grafiki. Przezroczyste tło sprawi, że na granatowym banerze widać tylko kształt Polski.
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
</header>
<nav>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Zawartość drugiego banera: nagłówek pierwszego stopnia o treści „Rzeki w województwie dolnośląskim”
<h1> w drugim banerze.
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Zawartość menu: Formularz wysyłający dane do skryptu na tej samej stronie, metodą bezpieczną.
method="post" - „metoda bezpieczna” z arkusza: wybór jedzie w treści żądania, nie w adresie strony. 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. Atrybut action jest pominięty - formularz bez niego wysyła dane do bieżącego pliku, czyli do skryptu na tej samej stronie (klucz: „poprawne również bez atrybutu action”).
poziomRzek.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
</form>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Obok siebie 3 pola opcji (radio) zgrupowane, tak aby było możliwe jednoczesne wybranie tylko jednego pola. Etykiety przy polach opcji: „Wszystkie”, „Ponad stan ostrzegawczy”, „Ponad stan alarmowy” (pola opcji będą formatowane jedną klasą CSS)
„Zgrupowane” to ten sam atrybut name (option) we wszystkich trzech polach - przeglądarka pozwala wtedy zaznaczyć tylko jedno, a do skryptu trafi jedna para option = wartość wybranego pola (all, warning albo alarm). Każde pole ma swoją etykietę <label> połączoną przez for/id (kliknięcie w napis zaznacza pole), a etykiety mają wspólną klasę radio-label - to nią CSS pokoloruje teksty przy polach. Pola i etykiety są liniowe, więc stoją obok siebie.
poziomRzek.php PHP zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
</form>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Przycisk o treści „Pokaż”, wysyłający dane do skryptu
<button> bez atrybutu type wewnątrz formularza jest przyciskiem wysyłającym (submit). Formularz ma już trzy pola opcji z etykietami i przycisk (R.2.9), a jednocześnie da się zaznaczyć tylko jedno pole (R.3.4).
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Zawartość bloku lewego: Nagłówek trzeciego stopnia o treści: „Stany na dzień 2022-05-05”
<h3> na początku bloku lewego.
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Tabela zawierająca dane: Pierwszy wiersz wypełniony komórkami nagłówkowymi o treści: „Wodomierz”, „Rzeka”, „Ostrzegawczy”, „Alarmowy”, „Aktualny”
Komórki nagłówkowe to <th> (domyślnie pogrubione i wyśrodkowane), w jednym wierszu <tr>. Pięć kolumn odpowiada pięciu polom zapytania 2: nazwa, rzeka, stan ostrzegawczy, alarmowy i aktualny stan wody. Pozostałe wiersze wypisze skrypt formularza.
poziomRzek.php PHP zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
</table>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Zawartość bloku prawego: Nagłówek trzeciego stopnia o treści: „Informacje”
<h3> na początku bloku prawego.
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
</table>
</main>
<aside>
<h3>Informacje</h3>
</aside>
<footer>
</footer>
</body>
</html>Lista punktowana (nieuporządkowana) zawierająca elementy: „Brak ostrzeżeń o burzach z gradem”, „Smog w mieście Wrocław”, „Silny wiatr w Karkonoszach”
Lista nieuporządkowana to <ul>, każdy element w <li>.
poziomRzek.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
</aside>
<footer>
</footer>
</body>
</html>Nagłówek trzeciego stopnia o treści: „Średnie stany wód”
Drugi <h3> w bloku prawym. Pod nim Skrypt 2 wypisze średnie z zapytania 4.
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
</aside>
<footer>
</footer>
</body>
</html>Odnośnik do adresu „https://komunikaty.pl” o treści „Dowiedz się więcej”
Adres zewnętrzny musi zaczynać się od https:// - bez tego przeglądarka szukałaby pliku komunikaty.pl w folderze strony. Między nagłówkiem a odnośnikiem stanie później Skrypt 2 („Efekt działania skryptu 2” w arkuszu).
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
</aside>
<footer>
</footer>
</body>
</html>Obraz o nazwie obraz2.jpg i tekście alternatywnym „rzeka”
Zdjęcie z archiwum pod odnośnikiem. Strona ma teraz oba obrazy z tekstami alternatywnymi (R.2.10).
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
</footer>
</body>
</html>Zawartość stopki: akapit (paragraf) o treści: „Stronę wykonał: ”, dalej wstawiony numer zdającego
Na egzaminie w miejscu imienia i nazwiska wpisuje się numer zdającego, czyli PESEL; w tym rozwiązaniu stoi tam „Bartosz Bryniarski”. Strona ma już wszystkie nagłówki i paragraf stopki z klucza (R.2.5).
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 29-40 · po tym etapie masz 30 z 39 kryteriów (pkt)
Domyślne formatowanie wszystkich selektorów: krój czcionki Georgia
Selektor uniwersalny * - krój dostają też przycisk i komórki tabeli.
styl.css CSS nowy plik * {
font-family: Georgia;
}Wspólne dla obu bloków banera: kolor tła Navy, biały kolor czcionki, wyrównanie tekstu do środka, wysokość 100 px, szerokość 50%
Na stronie są dokładnie dwa znaczniki header i oba mają wyglądać tak samo, więc wystarczy selektor znacznika - identyfikatory map i title nie są tu potrzebne. Mapa ma 100 × 100 pikseli, więc wypełnia wysokość banera, a wyśrodkowanie stawia ją pośrodku lewej połowy strony (obraz 2).
styl.css CSS zmienione: 7 linii * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}Dla bloku menu: kolor tła Navy, marginesy wewnętrzne 20 px
padding: 20px odsuwa pola opcji od krawędzi granatowego paska ze wszystkich stron.
styl.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}
nav {
background-color: Navy;
padding: 20px;
}Dla klasy formatującej teksty przy polach opcji: kolor czcionki Silver, marginesy zewnętrzne 50 px
Selektor klasy z kropką. Etykiety są elementami liniowymi, więc margines 50 px działa tylko w poziomie - rozsuwa pola opcji, jak na obrazie 2.
styl.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}
nav {
background-color: Navy;
padding: 20px;
}
.radio-label {
color: Silver;
margin: 50px;
}W momencie, gdy kursor myszy znajdzie się na tekście pola opcji ma on kolor biały i podkreślenie
Pseudoklasa :hover dla tej samej klasy - zmiana dotyczy tylko etykiety, nad którą stoi kursor.
styl.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}
nav {
background-color: Navy;
padding: 20px;
}
.radio-label {
color: Silver;
margin: 50px;
}
.radio-label:hover {
color: white;
text-decoration: underline;
}Wspólne dla bloku lewego i prawego: kolor tła Azure, wysokość 550 px
Dwa selektory po przecinku. Ta sama wysokość obu bloków sprawia, że stopka zaczyna się równo pod nimi. Banery mają 100 px, a teraz bloki 550 px (R.4.4).
styl.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}
nav {
background-color: Navy;
padding: 20px;
}
.radio-label {
color: Silver;
margin: 50px;
}
.radio-label:hover {
color: white;
text-decoration: underline;
}
main, aside {
background-color: Azure;
height: 550px;
}Dodatkowo blok lewy ma szerokość 70% a blok prawy szerokość 30%
70% + 30% = cała szerokość strony - oba bloki zmieszczą się w jednym rzędzie.
styl.css CSS zmienione: 6 linii * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}
nav {
background-color: Navy;
padding: 20px;
}
.radio-label {
color: Silver;
margin: 50px;
}
.radio-label:hover {
color: white;
text-decoration: underline;
}
main, aside {
background-color: Azure;
height: 550px;
}
main {
width: 70%;
}
aside {
width: 30%;
}Dla stopki: kolor tła Navy, biały kolor czcionki
Granatowe tło mają teraz oba banery, menu i stopka, a jasne Azure - bloki lewy i prawy (R.4.2). Biały kolor czcionki mają banery i stopka, srebrny - teksty przy polach opcji (R.4.3).
styl.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}
nav {
background-color: Navy;
padding: 20px;
}
.radio-label {
color: Silver;
margin: 50px;
}
.radio-label:hover {
color: white;
text-decoration: underline;
}
main, aside {
background-color: Azure;
height: 550px;
}
main {
width: 70%;
}
aside {
width: 30%;
}
footer {
background-color: Navy;
color: white;
}Podział strony na bloki: na górze dwa bloki banera, poniżej menu, poniżej bloki: lewy i prawy, na dole blok stopki. Podział zrealizowany wyłącznie 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 obrazem 2
Banery (50% + 50%) i bloki lewy z prawym (70% + 30%) płyną w lewo - float: left stawia je parami obok siebie. Menu i stopka zajmują całą szerokość i dostają clear: both: menu zaczyna się dopiero pod banerami (bez tego wjechałoby pod nie, bo pływające bloki nie zajmują miejsca w zwykłym układzie), a stopka - pod blokami lewym i prawym.
styl.css CSS zmienione: 6 linii * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}
nav {
background-color: Navy;
padding: 20px;
}
.radio-label {
color: Silver;
margin: 50px;
}
.radio-label:hover {
color: white;
text-decoration: underline;
}
main, aside {
background-color: Azure;
height: 550px;
}
main {
width: 70%;
}
aside {
width: 30%;
}
footer {
background-color: Navy;
color: white;
}
header, main, aside {
float: left;
}
nav, footer {
clear: both;
}Dla selektora tabeli: obramowanie linią ciągłą o szerokości 1 px i kolorze Navy, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 70%
Zgodnie z uwagą arkusza selektor to sam znacznik table - klucz nie uzna szerokości tabeli nadanej klasą (R.4.5). Ramka obejmuje całą tabelę, nie komórki - jak na obrazie 2. margin: auto dzieli wolne miejsce po równo na lewo i prawo, więc tabela szeroka na 70% bloku staje na środku. Marginesy menu, etykiet i tabeli są już ustawione (R.4.7).
styl.css CSS zmienione: 5 linii * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}
nav {
background-color: Navy;
padding: 20px;
}
.radio-label {
color: Silver;
margin: 50px;
}
.radio-label:hover {
color: white;
text-decoration: underline;
}
main, aside {
background-color: Azure;
height: 550px;
}
main {
width: 70%;
}
aside {
width: 30%;
}
footer {
background-color: Navy;
color: white;
}
header, main, aside {
float: left;
}
nav, footer {
clear: both;
}
table {
border: 1px solid Navy;
margin: auto;
width: 70%;
}W momencie, gdy kursor myszy znajdzie się na wierszu tabeli, jego kolor tła zmienia się na SkyBlue
Pseudoklasa :hover dla tr - podświetla się cały wiersz (na obrazie 2 Zgorzelec). Działa też na wierszu nagłówkowym; arkusz tego nie zabrania.
styl.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}
nav {
background-color: Navy;
padding: 20px;
}
.radio-label {
color: Silver;
margin: 50px;
}
.radio-label:hover {
color: white;
text-decoration: underline;
}
main, aside {
background-color: Azure;
height: 550px;
}
main {
width: 70%;
}
aside {
width: 30%;
}
footer {
background-color: Navy;
color: white;
}
header, main, aside {
float: left;
}
nav, footer {
clear: both;
}
table {
border: 1px solid Navy;
margin: auto;
width: 70%;
}
tr:hover {
background-color: SkyBlue;
}Dla obrazu w prawym bloku: szerokość 90%
Selektor potomka aside img - dotyczy tylko zdjęcia rzeki; mapa w banerze zostaje w rozmiarze 100 × 100. Szerokości banerów, bloków, tabeli i obrazu są komplet (R.4.5).
styl.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
header {
background-color: Navy;
color: white;
text-align: center;
height: 100px;
width: 50%;
}
nav {
background-color: Navy;
padding: 20px;
}
.radio-label {
color: Silver;
margin: 50px;
}
.radio-label:hover {
color: white;
text-decoration: underline;
}
main, aside {
background-color: Azure;
height: 550px;
}
main {
width: 70%;
}
aside {
width: 30%;
}
footer {
background-color: Navy;
color: white;
}
header, main, aside {
float: left;
}
nav, footer {
clear: both;
}
table {
border: 1px solid Navy;
margin: auto;
width: 70%;
}
tr:hover {
background-color: SkyBlue;
}
aside img {
width: 90%;
}Kroki 41-49 · po tym etapie masz 39 z 39 kryteriów (pkt)
Skrypty łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie rzeki
Skrypt formularza stoi wewnątrz tabeli, pod wierszem nagłówkowym - to, co wypisze, stanie się kolejnymi wierszami. Jest pierwszy na stronie, więc otwiera połączenie: mysqli_connect z czterema argumentami łączy się z serwerem i wybiera bazę; uchwyt w zmiennej $connection posłuży też Skryptowi 2, który na stronie stoi niżej i zamknie połączenie. Pod nagłówkiem „Średnie stany wód” czeka już pusty blok Skryptu 2. Od tego kroku podgląd to wynik prawdziwego uruchomienia strony po wybraniu „Wszystkie” i kliknięciu „Pokaż”.
poziomRzek.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt skojarzony z formularzem, po wysłaniu danych z formularza, wyświetla dane w tabeli w zależności od wybranego pola opcji: Wszystkie dane wodomierzy są uzyskane za pomocą zapytania 2 (patrz obraz 2)
„Po wysłaniu danych z formularza” to warunek isset($_POST["option"]): przy pierwszym wejściu na stronę nikt nic nie wysłał i tabela ma sam nagłówek. Wewnątrz zapytanie 2 bez średnika na końcu - za chwilę będzie do niego dopisywany drugi warunek. mysqli_query wysyła je do bazy, wynik czeka w $result. Apostrofy wokół daty siedzą wewnątrz napisu PHP w cudzysłowach, więc nie trzeba ich niczym poprzedzać.
poziomRzek.php PHP zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
$result = mysqli_query($connection, $query);
}
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 41.
Pozostałe wiersze wypełnione przez skrypt skojarzony z formularzem
mysqli_fetch_row oddaje kolejny wiersz wyniku jako tablicę numerowaną od zera (w kolejności pól z SELECT), a po ostatnim zwraca null i pętla while się kończy. Na razie jedna komórka - widać 17 nazw wodowskazów, od Lubachowa do Ślęży.
poziomRzek.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$row[0]</td></tr>";
}
}
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Wszystkie dane wodomierzy są uzyskane za pomocą zapytania 2 (patrz obraz 2)
Pozostałe komórki: rzeka, stan ostrzegawczy, alarmowy i aktualny. Podgląd wygląda jak blok lewy na obrazie 2 - 17 wierszy w kolejności zapytania 2 (R.5.4), a tabela ma pięć kolumn ze znaczników table, tr i td (R.2.6).
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
$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><td>$row[4]</td></tr>";
}
}
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Dane wodomierzy z przekroczonym stanem ostrzegawczym są uzyskane za pomocą zapytania 3 lub alternatywnie za pomocą zapytania 2 i odpowiednio przygotowanego warunku (patrz obraz 3)
Zapytanie 3 to zapytanie 2 z dopisanym warunkiem, więc zamiast przepisywać je drugi raz, wystarczy dokleić warunek operatorem . (łączenie napisów w PHP). Spacja na początku dopisku jest konieczna - bez niej powstałoby '2022-05-05'AND. Podgląd pokazuje stronę po wybraniu „Ponad stan ostrzegawczy”: 5 wierszy, jak na obrazie 3.
poziomRzek.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
if ($_POST["option"] == "warning") {
$query = $query . " AND stanWody > stanOstrzegawczy";
}
$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><td>$row[4]</td></tr>";
}
}
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Dane wodomierzy z przekroczonym stanem alarmowym są uzyskane za pomocą zmodyfikowanego zapytania 3 lub alternatywnie za pomocą zapytania 2 i odpowiednio przygotowanego warunku (patrz obraz 4)
Druga gałąź elseif dokleja warunek ze stanem alarmowym. Dla wartości all żaden warunek nie pasuje i zostaje samo zapytanie 2. Podgląd po wybraniu „Ponad stan alarmowy”: tylko Łazany (300 przy stanie alarmowym 240), jak na obrazie 4.
poziomRzek.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
if ($_POST["option"] == "warning") {
$query = $query . " AND stanWody > stanOstrzegawczy";
} elseif ($_POST["option"] == "alarm") {
$query = $query . " AND stanWody > stanAlarmowy";
}
$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><td>$row[4]</td></tr>";
}
}
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Wysyła do bazy danych zapytanie 4
Skrypt 2 korzysta z połączenia otwartego w skrypcie formularza. Zmienne $query i $result są użyte ponownie - tabela jest już wypisana.
poziomRzek.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
if ($_POST["option"] == "warning") {
$query = $query . " AND stanWody > stanOstrzegawczy";
} elseif ($_POST["option"] == "alarm") {
$query = $query . " AND stanWody > stanAlarmowy";
}
$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><td>$row[4]</td></tr>";
}
}
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
$query = "SELECT dataPomiaru, AVG(stanWody) FROM pomiary GROUP BY dataPomiaru;";
$result = mysqli_query($connection, $query);
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Każdy zwrócony zapytaniem wiersz jest wyświetlany w paragrafie o treści: „<data>: <średnia>”, gdzie dane zapisane w <> są pobierane z bazy danych
Każdy wiersz zapytania 4 to jeden <p> z datą, dwukropkiem i średnią. Podgląd: „2022-05-05: 167.6471” i „2022-05-06: 179.5882” - jak na obrazie 2. Ten skrypt wypisuje się zawsze, niezależnie od formularza.
poziomRzek.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
if ($_POST["option"] == "warning") {
$query = $query . " AND stanWody > stanOstrzegawczy";
} elseif ($_POST["option"] == "alarm") {
$query = $query . " AND stanWody > stanAlarmowy";
}
$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><td>$row[4]</td></tr>";
}
}
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
$query = "SELECT dataPomiaru, AVG(stanWody) FROM pomiary GROUP BY dataPomiaru;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<p>$row[0]: $row[1]</p>";
}
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Na końcu jest zamykane połączenie z serwerem.
Skrypt 2 jest ostatnim blokiem PHP na stronie, więc tu stoi mysqli_close - ostatnia operacja na bazie (R.5.2). Wszystkie zmienne mają nazwy mówiące, co przechowują ($connection, $query, $result, $row) - to kryterium R.5.8.
poziomRzek.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
if ($_POST["option"] == "warning") {
$query = $query . " AND stanWody > stanOstrzegawczy";
} elseif ($_POST["option"] == "alarm") {
$query = $query . " AND stanWody > stanAlarmowy";
}
$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><td>$row[4]</td></tr>";
}
}
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
$query = "SELECT dataPomiaru, AVG(stanWody) FROM pomiary GROUP BY dataPomiaru;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<p>$row[0]: $row[1]</p>";
}
mysqli_close($connection);
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 48.
Kroki 50-52 · po tym etapie masz 39 z 39 kryteriów (pkt)
Skrypt skojarzony z formularzem, po wysłaniu danych z formularza, wyświetla dane w tabeli w zależności od wybranego pola opcji: Wszystkie dane wodomierzy są uzyskane za pomocą zapytania 2 (patrz obraz 2)
Wersja egzaminacyjna przy pierwszym wejściu pokazuje pustą tabelę - użytkownik musi najpierw kliknąć „Pokaż”. Arkusz tego nie zabrania, ale stany wody są najważniejszą treścią strony. Operator ?? przyjmuje all, gdy formularza jeszcze nie wysłano. Drabinkę if/elseif zastępuje tablica warunków: klucz to wartość pola opcji, wartość - dopisek do zapytania. Wartość spoza tablicy (np. xyz wysłane z pominięciem formularza) też daje all - do zapytania trafia tylko tekst z tablicy, nigdy tekst od użytkownika. Dodanie czwartej opcji to jedna linia w tablicy. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
poziomRzek.php PHP zmienione: 16 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all">
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning">
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm">
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
$conditions = [
"all" => "",
"warning" => " AND stanWody > stanOstrzegawczy",
"alarm" => " AND stanWody > stanAlarmowy"
];
$option = $_POST["option"] ?? "all";
if (!isset($conditions[$option])) {
$option = "all";
}
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'" . $conditions[$option];
$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><td>$row[4]</td></tr>";
}
/* Wersja z egzaminu:
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
if ($_POST["option"] == "warning") {
$query = $query . " AND stanWody > stanOstrzegawczy";
} elseif ($_POST["option"] == "alarm") {
$query = $query . " AND stanWody > stanAlarmowy";
}
$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><td>$row[4]</td></tr>";
}
}
*/
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
$query = "SELECT dataPomiaru, AVG(stanWody) FROM pomiary GROUP BY dataPomiaru;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<p>$row[0]: $row[1]</p>";
}
mysqli_close($connection);
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 48.
Obok siebie 3 pola opcji (radio) zgrupowane, tak aby było możliwe jednoczesne wybranie tylko jednego pola. Etykiety przy polach opcji: „Wszystkie”, „Ponad stan ostrzegawczy”, „Ponad stan alarmowy” (pola opcji będą formatowane jedną klasą CSS)
Na obrazach 3 i 4 po wysłaniu formularza zaznaczone jest pole, które wybrano - w wersji egzaminacyjnej strona ładuje się od nowa i wszystkie pola są puste, więc nie widać, który filtr działa. Krótki PHP w każdym polu dopisuje atrybut checked, gdy wartość pola zgadza się z wyborem. Formularz stoi na stronie przed skryptem z tablicą warunków, dlatego linia z $option przenosi się ze skryptu do osobnego bloku PHP na samym początku pliku (przed <!DOCTYPE html> - blok niczego nie wypisuje, więc dokument zaczyna się poprawnie); sprawdzenie w tablicy warunków zostaje w skrypcie. Podgląd: po wybraniu „Ponad stan ostrzegawczy” to pole zostaje zaznaczone, a w tabeli jest 5 wierszy. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
poziomRzek.php PHP zmienione: 6 linii <?php
$option = $_POST["option"] ?? "all";
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all" <?php if ($option == "all") echo "checked"; ?>>
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning" <?php if ($option == "warning") echo "checked"; ?>>
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm" <?php if ($option == "alarm") echo "checked"; ?>>
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
$conditions = [
"all" => "",
"warning" => " AND stanWody > stanOstrzegawczy",
"alarm" => " AND stanWody > stanAlarmowy"
];
if (!isset($conditions[$option])) {
$option = "all";
}
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'" . $conditions[$option];
$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><td>$row[4]</td></tr>";
}
/* Wersja z egzaminu:
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
if ($_POST["option"] == "warning") {
$query = $query . " AND stanWody > stanOstrzegawczy";
} elseif ($_POST["option"] == "alarm") {
$query = $query . " AND stanWody > stanAlarmowy";
}
$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><td>$row[4]</td></tr>";
}
}
*/
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
$query = "SELECT dataPomiaru, AVG(stanWody) FROM pomiary GROUP BY dataPomiaru;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<p>$row[0]: $row[1]</p>";
}
mysqli_close($connection);
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Każdy zwrócony zapytaniem wiersz jest wyświetlany w paragrafie o treści: „<data>: <średnia>”, gdzie dane zapisane w <> są pobierane z bazy danych
Trzy poprawki wyświetlania. Pięć komórek wypisuje pętla foreach po wartościach wiersza - zmiana liczby kolumn w zapytaniu nie wymaga zmian w echo. Każda wartość przechodzi przez htmlspecialchars, więc nazwa z < albo & w bazie nie rozbije tabeli. Średnia „167.6471” ma cztery miejsca po przecinku i kropkę dziesiętną - number_format zaokrągla ją do dwóch miejsc z polskim przecinkiem („167,65”). Dopisek „cm” to założenie tego rozwiązania: stany wody na wodowskazach podaje się w centymetrach, ale baza i arkusz jednostki nie podają - w razie wątpliwości lepiej go pominąć. Na egzaminie wystarczy wersja wcześniejsza - klucz sprawdza średnią z bazy „z dowolną dokładnością”, ale bez dopisków.
poziomRzek.php PHP zmienione: 6 linii <?php
$option = $_POST["option"] ?? "all";
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poziomy rzek</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header id="map">
<img src="obraz1.png" alt="Mapa Polski">
</header>
<header id="title">
<h1>Rzeki w województwie dolnośląskim</h1>
</header>
<nav>
<form method="post">
<input type="radio" id="all" name="option" value="all" <?php if ($option == "all") echo "checked"; ?>>
<label for="all" class="radio-label">Wszystkie</label>
<input type="radio" id="warning" name="option" value="warning" <?php if ($option == "warning") echo "checked"; ?>>
<label for="warning" class="radio-label">Ponad stan ostrzegawczy</label>
<input type="radio" id="alarm" name="option" value="alarm" <?php if ($option == "alarm") echo "checked"; ?>>
<label for="alarm" class="radio-label">Ponad stan alarmowy</label>
<button>Pokaż</button>
</form>
</nav>
<main>
<h3>Stany na dzień 2022-05-05</h3>
<table>
<tr>
<th>Wodomierz</th>
<th>Rzeka</th>
<th>Ostrzegawczy</th>
<th>Alarmowy</th>
<th>Aktualny</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "rzeki");
$conditions = [
"all" => "",
"warning" => " AND stanWody > stanOstrzegawczy",
"alarm" => " AND stanWody > stanAlarmowy"
];
if (!isset($conditions[$option])) {
$option = "all";
}
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'" . $conditions[$option];
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<tr>";
foreach ($row as $value) {
echo "<td>" . htmlspecialchars($value) . "</td>";
}
echo "</tr>";
}
/* Wersja z egzaminu:
if (isset($_POST["option"])) {
$query = "SELECT nazwa, rzeka, stanOstrzegawczy, stanAlarmowy, stanWody FROM wodowskazy JOIN pomiary ON wodowskazy.id = pomiary.wodowskazy_id WHERE dataPomiaru = '2022-05-05'";
if ($_POST["option"] == "warning") {
$query = $query . " AND stanWody > stanOstrzegawczy";
} elseif ($_POST["option"] == "alarm") {
$query = $query . " AND stanWody > stanAlarmowy";
}
$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><td>$row[4]</td></tr>";
}
}
*/
?>
</table>
</main>
<aside>
<h3>Informacje</h3>
<ul>
<li>Brak ostrzeżeń o burzach z gradem</li>
<li>Smog w mieście Wrocław</li>
<li>Silny wiatr w Karkonoszach</li>
</ul>
<h3>Średnie stany wód</h3>
<?php
$query = "SELECT dataPomiaru, AVG(stanWody) FROM pomiary GROUP BY dataPomiaru;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<p>$row[0]: " . number_format($row[1], 2, ",", " ") . " cm</p>"; // było: "<p>$row[0]: $row[1]</p>"
}
mysqli_close($connection);
?>
<a href="https://komunikaty.pl">Dowiedz się więcej</a>
<img src="obraz2.jpg" alt="rzeka">
</aside>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 53 · po tym etapie masz 39 z 39 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. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wystarczy nazwa przeglądarki, w której była sprawdzana strona.
W folderze z numerem zdającego: import.png, kw1.jpg - kw4.jpg, kwerendy.txt, obraz1.png (po obróbce), obraz2.jpg, poziomRzek.php, przeglądarka.txt, styl.css i rozpakowany baza.sql. Po nagraniu płyty trzeba sprawdzić jej odczyt i opisać ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 52.
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.