Rozwiązanie buduje stronę mieszalni farb: baza mieszalnia z klientami i zamówieniami (kod koloru, pojemność, data odbioru) i cztery zapytania - zliczanie, złączenie z sortowaniem, to samo złączenie z zakresem dat oraz prosty warunek, potem baner złożony z tła i napisu, okrągły favicon wycięty z tekstury, strona index.php z formularzem dat i tabelą zamówień oraz style w style.css. Skrypt PHP wybiera zapytanie: bez dat pokazuje wszystkie zamówienia, z datami - tylko te z wybranego okresu, a komórce z kolorem nadaje tło według kodu z bazy.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest najpierw pisany najprościej (mysqli_query, mysqli_fetch_row), a na końcu zostaje przerobiony na wersję z prawdziwych projektów: zapytanie przygotowane, sprawdzenie dat i kodu koloru oraz htmlspecialchars.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (PDO, walidacja dat)” jest drugi sposób rozwiązania tego samego arkusza: PHP na PDO z zapytaniem przygotowanym, sprawdzeniem dat i koloru od pierwszej linii oraz formularzem, który pamięta wybrane daty - obie wersje są zgodne z kluczem.
Baza i grafiki pochodzą z prawdziwego archiwum pliki7 (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: najpierw bez filtra (23 zamówienia), a od kroku z formularzem - po wybraniu dat od 2021-11-06 do 2021-11-10, jak na ilustracji 5.
Jak liczą się punkty. Klucz ma 37 kryteriów (R.1.1 - R.5.8), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 28 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 37 kryteriów (pkt)
Utwórz bazę danych o nazwie mieszalnia, z zestawem polskich znaków (np. utf8_unicode_ci).
Rozpakuj pliki7.7z z pulpitu (hasło Miesz@nie&F@rB) do folderu z numerem zdającego: mieszalnia.sql, tlo.jpg, nazwa.png i fav.jpg. W phpMyAdmin: Nowa, nazwa mieszalnia, porównywanie np. utf8_unicode_ci.
Do utworzonej bazy zaimportuj tabele z pliku mieszalnia.sql z rozpakowanego archiwum.
Import → mieszalnia.sql. Dwie tabele w relacji jeden do wielu: klienci (17) i zamowienia (23, pole id_klienta). Kod koloru zapisano bez znaku #, np. 1b69aa - dopiszesz go w skrypcie.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie JPEG 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, zapis jako import.jpg - import w JPEG, zrzuty zapytań w PNG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: zliczające liczbę klientów mieszalni farb.
COUNT(*) liczy wszystkie wiersze tabeli. Wynik: 17. Zapytanie do kwerendy.txt, zrzut kw1.png.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT COUNT(*) FROM klienci;
Zapytanie 2: wybierające jedynie nazwiska, imiona klientów oraz odpowiadające im numery zamówień (pole id), kody kolorów, pojemności i daty odbioru zamówień posortowane rosnąco po dacie odbioru. Należy posłużyć się relacją.
zamowienia.id - pole id jest w obu tabelach, więc z nazwą tabeli (numer zamówienia, nie klienta),JOIN zamowienia ON klienci.id = id_klienta - relacja,ORDER BY data_odbioru - rosnąco.Wynik: 23 wiersze. Zrzut: kw2.png. To zapytanie wyśle skrypt, gdy formularz jest pusty.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT COUNT(*) FROM klienci;
-- Zapytanie 2
SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta ORDER BY data_odbioru;
Zapytanie 3: wybierające jedynie nazwiska, imiona klientów oraz odpowiadające im numery zamówień (pole id), kody kolorów, pojemności i daty odbioru zamówień posortowane rosnąco po dacie odbioru, jedynie dla zamówień, w których data odbioru jest od 5 listopada do 7 listopada 2021 roku. Należy posłużyć się relacją.
To samo co zapytanie 2 plus BETWEEN "2021-11-05" AND "2021-11-07" - zakres włącznie z obiema datami (równoważnie >= i <=). Wynik: dwa zamówienia, id 7 i 1. Zrzut: kw3.png. W skrypcie w miejscu dat staną wartości z formularza.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT COUNT(*) FROM klienci;
-- Zapytanie 2
SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta ORDER BY data_odbioru;
-- Zapytanie 3
SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta WHERE data_odbioru BETWEEN "2021-11-05" AND "2021-11-07" ORDER BY data_odbioru;
Zapytanie 4: wybierające jedynie imiona i nazwiska kobiet, które są klientami mieszalni farb.
Płeć zapisano jedną literą w polu plec: "k". Wynik: Joanna, Katarzyna, Karolina, Wiktoria, Ilona. Zrzut: kw4.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT COUNT(*) FROM klienci;
-- Zapytanie 2
SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta ORDER BY data_odbioru;
-- Zapytanie 3
SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta WHERE data_odbioru BETWEEN "2021-11-05" AND "2021-11-07" ORDER BY data_odbioru;
-- Zapytanie 4
SELECT imie, nazwisko FROM klienci WHERE plec = "k";
Kroki 8-19 · po tym etapie masz 20 z 37 kryteriów (pkt)
Na potrzeby strony należy przygotować grafikę z banerem o nazwie baner.png i cechach: grafika z pliku tlo.jpg, wypakowanego z archiwum, w całości stanowi tło banera. Szerokość banera 1000 px, wysokość 270 px. Zawartość pliku nazwa.png, wypakowanego z archiwum, stanowi pierwszy plan banera. Napis musi być widoczny w całości.
tlo.jpg (3840 × 1200) Obraz → Skaluj obraz do 1000 × 270 z rozpiętym łańcuchem - „w całości stanowi tło”, więc skalujesz cały obraz, a nie wycinasz fragment,nazwa.png - napis na przezroczystym tle; skalujesz warstwę (Warstwa → Skaluj warstwę), żeby napis zajął prawie całą szerokość, i ustawiasz go tak, żeby był widoczny w całości,Kadrowanie tła do 1000 × 270 zamiast skalowania pokazuje tylko fragment tlo.jpg - klucz wymaga, żeby tło wypełniało cały obraz w całości.
Na potrzeby strony należy przygotować favicon o nazwie fav.png i cechach: rozmiary 64 px na 64 px, tło przezroczyste, z grafiki fav.jpg należy wyciąć koło, i przygotować tak aby wypełniało cały obraz favicona.
fav.jpg ma 100 × 100. Dodaj kanał alfa, narzędzie Zaznaczenie eliptyczne od narożnika do narożnika z wciśniętym Shift (koło na cały obraz), Zaznaczenie → Odwróć i Delete - poza kołem zostaje przezroczystość. Potem Obraz → Skaluj obraz do 64 × 64 i Eksportuj jako fav.png (R.2.1, R.2.3).
Cechy witryny: Składa się ze strony o nazwie index.php. Zapisana w języku HTML5.
Jedna strona, index.php. Bez PHP podgląd pokazuje ją wprost.
index.php PHP nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków.
<meta charset="UTF-8">.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny.
lang="pl".
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony „Mieszalnia farb” oraz grafika fav.png umieszczona jako favicon witryny, widoczne na karcie przeglądarki.
<title> i <link rel="icon" href="fav.png"> (R.2.5).
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie style.css prawidłowo połączony z kodem strony.
Nazwa: style.css.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Podział strony na znajdujące się jeden pod drugim bloki: nagłówkowy, formularz, główny, stopka. 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ą 4.
<header>, <section id="search"> na formularz, <main> i <footer>. Bloki stoją jeden pod drugim bez żadnego pozycjonowania (R.2.6, R.3.1).
index.php PHP zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<section id="search">
</section>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: obraz z pliku baner.png z tekstem alternatywnym „Mieszalnia farb”.
Obraz z tekstem alternatywnym (R.2.7).
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="Mieszalnia farb">
</header>
<section id="search">
</section>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku formularza: Formularz wysyłający dane metodą bezpieczną do tego samego pliku, o elementach: Pole edycyjne przeznaczone do wybrania daty, poprzedzone etykietą: „Data odbioru od: ”. Pole edycyjne przeznaczone do wybrania daty, poprzedzone etykietą: „do: ”. Przycisk „Wyszukaj” wysyłający dane z formularza do skryptu.
method="post" bez action - dane wracają do tego samego pliku (R.3.2). „Metoda bezpieczna” w rozumieniu arkusza to POST (tak ocenia klucz R.3.2): 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". Pola type="date" z kalendarzem; przeglądarka wysyła datę w formacie RRRR-MM-DD, czyli dokładnie takim, jakiego potrzebuje SQL. Nazwy from i to - pod nimi daty trafią do $_POST (R.2.8, R.3.3).
index.php PHP zmienione: 7 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="Mieszalnia farb">
</header>
<section id="search">
<form method="post">
<label for="from">Data odbioru od: </label>
<input type="date" id="from" name="from">
<label for="to">do: </label>
<input type="date" id="to" name="to">
<button type="submit">Wyszukaj</button>
</form>
</section>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku głównego: Tabela o sześciu kolumnach. Pierwszy wiersz zawiera komórki nagłówkowe: „Nr zamówienia”, „Nazwisko”, „Imię”, „Kolor”, „Pojemność [ml]”, „Data odbioru”. Zawartość tabeli jest generowana skryptem.
Wiersz nagłówkowy wpisujesz w HTML-u; wiersze z danymi dopisze skrypt wewnątrz tej samej tabeli.
index.php PHP zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="Mieszalnia farb">
</header>
<section id="search">
<form method="post">
<label for="from">Data odbioru od: </label>
<input type="date" id="from" name="from">
<label for="to">do: </label>
<input type="date" id="to" name="to">
<button type="submit">Wyszukaj</button>
</form>
</section>
<main>
<table>
<tr>
<th>Nr zamówienia</th>
<th>Nazwisko</th>
<th>Imię</th>
<th>Kolor</th>
<th>Pojemność [ml]</th>
<th>Data odbioru</th>
</tr>
</table>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku stopki: Nagłówek trzeciego stopnia o treści: „Egzamin INF.03”. Akapit z napisem „Autor: ”, dalej wstawiony numer zdającego.
<h3> i <p>. Na egzaminie po „Autor:” wpisujesz swój numer zdającego (PESEL).
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="Mieszalnia farb">
</header>
<section id="search">
<form method="post">
<label for="from">Data odbioru od: </label>
<input type="date" id="from" name="from">
<label for="to">do: </label>
<input type="date" id="to" name="to">
<button type="submit">Wyszukaj</button>
</form>
</section>
<main>
<table>
<tr>
<th>Nr zamówienia</th>
<th>Nazwisko</th>
<th>Imię</th>
<th>Kolor</th>
<th>Pojemność [ml]</th>
<th>Data odbioru</th>
</tr>
</table>
</main>
<footer>
<h3>Egzamin INF.03</h3>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 20-22 · po tym etapie masz 29 z 37 kryteriów (pkt)
Dla ciała strony: krój czcionki Georgia, tekst wyśrodkowany, kolor tła LightSteelBlue.
Jedna reguła body (R.4.1).
style.css CSS nowy plik body {
font-family: Georgia;
text-align: center;
background-color: LightSteelBlue;
}Dla bloku formularza: margines wewnętrzny górny 20 px. Dla bloku głównego: pasek przewijania pojawiający się tylko w przypadku, gdy treść nie mieści się w bloku, marginesy wewnętrzne 30 px, wysokość 400 px. Dla bloku stopki: kolor tła Orange, marginesy wewnętrzne 10 px.
padding-top - tylko górny margines; overflow: auto - pasek tylko przy dłuższej tabeli (23 zamówienia się nie zmieszczą) (R.4.2, R.4.4, R.4.5, R.4.7).
style.css CSS zmienione: 12 linii body {
font-family: Georgia;
text-align: center;
background-color: LightSteelBlue;
}
#search {
padding-top: 20px;
}
main {
overflow: auto;
padding: 30px;
height: 400px;
}
footer {
background-color: Orange;
padding: 10px;
}Dla selektora obrazu: szerokość 80%. Dla selektora tabeli: szerokość 70%, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, obramowana linią kropkowaną o szerokości 1 px i kolorze Maroon. Gdy kursor znajdzie się na wierszu tabeli kolor tła zmienia się na SteelBlue, a kolor czcionki na biały.
margin: auto wyśrodkowuje tabelę o szerokości 70%. tr:hover - pod kursorem zmienia się cały wiersz, jak przy zamówieniu Wiktorii na ilustracji 4 (R.4.3, R.4.6, R.4.8, R.4.9).
style.css CSS zmienione: 12 linii body {
font-family: Georgia;
text-align: center;
background-color: LightSteelBlue;
}
#search {
padding-top: 20px;
}
main {
overflow: auto;
padding: 30px;
height: 400px;
}
footer {
background-color: Orange;
padding: 10px;
}
img {
width: 80%;
}
table {
width: 70%;
margin: auto;
border: 1px dotted Maroon;
}
tr:hover {
background-color: SteelBlue;
color: white;
}Kroki 23-27 · po tym etapie masz 37 z 37 kryteriów (pkt)
Łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie mieszalnia. Na końcu skrypt zamyka połączenie z serwerem.
Skrypt piszesz wewnątrz tabeli, pod wierszem nagłówkowym - to, co wypisze, staną się kolejne wiersze. Połączenie na początku, mysqli_close na końcu (R.5.1, R.5.2, R.5.3). Od tego kroku podgląd to wynik prawdziwego uruchomienia w PHP.
index.php PHP zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="Mieszalnia farb">
</header>
<section id="search">
<form method="post">
<label for="from">Data odbioru od: </label>
<input type="date" id="from" name="from">
<label for="to">do: </label>
<input type="date" id="to" name="to">
<button type="submit">Wyszukaj</button>
</form>
</section>
<main>
<table>
<tr>
<th>Nr zamówienia</th>
<th>Nazwisko</th>
<th>Imię</th>
<th>Kolor</th>
<th>Pojemność [ml]</th>
<th>Data odbioru</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "mieszalnia");
mysqli_close($connection);
?>
</table>
</main>
<footer>
<h3>Egzamin INF.03</h3>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Gdy nie wypełniono formularza, wysyła zapytanie 2.
Na razie zawsze zapytanie 2 - warunek z formularzem dołożysz za chwilę.
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="Mieszalnia farb">
</header>
<section id="search">
<form method="post">
<label for="from">Data odbioru od: </label>
<input type="date" id="from" name="from">
<label for="to">do: </label>
<input type="date" id="to" name="to">
<button type="submit">Wyszukaj</button>
</form>
</section>
<main>
<table>
<tr>
<th>Nr zamówienia</th>
<th>Nazwisko</th>
<th>Imię</th>
<th>Kolor</th>
<th>Pojemność [ml]</th>
<th>Data odbioru</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "mieszalnia");
$query = "SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta ORDER BY data_odbioru;";
$result = mysqli_query($connection, $query);
mysqli_close($connection);
?>
</table>
</main>
<footer>
<h3>Egzamin INF.03</h3>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 23.
Poszczególne wiersze zwrócone zapytaniem są wyświetlane w odpowiednich kolumnach tabeli, w bloku głównym.
Kolejność kolumn tabeli (nr, nazwisko, imię, kolor, pojemność, data) różni się od kolejności w SELECT (nazwisko, imię, id…), więc pierwszą komórką jest $row[2] - numer zamówienia, potem $row[0] i $row[1]. Podgląd: 23 zamówienia od 2021-08-18 (R.2.9, R.5.6).
index.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="Mieszalnia farb">
</header>
<section id="search">
<form method="post">
<label for="from">Data odbioru od: </label>
<input type="date" id="from" name="from">
<label for="to">do: </label>
<input type="date" id="to" name="to">
<button type="submit">Wyszukaj</button>
</form>
</section>
<main>
<table>
<tr>
<th>Nr zamówienia</th>
<th>Nazwisko</th>
<th>Imię</th>
<th>Kolor</th>
<th>Pojemność [ml]</th>
<th>Data odbioru</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "mieszalnia");
$query = "SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta ORDER BY data_odbioru;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$row[2]</td><td>$row[0]</td><td>$row[1]</td><td>$row[3]</td><td>$row[4]</td><td>$row[5]</td></tr>";
}
mysqli_close($connection);
?>
</table>
</main>
<footer>
<h3>Egzamin INF.03</h3>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Tło komórek w kolumnie z kolorem farby ustawiane jest zgodnie z kodem szesnastkowym koloru zapisanym dla tego wiersza w bazie.
Komórka koloru dostaje styl w atrybucie: style="background-color: #1b69aa". W bazie kod jest bez #, więc dopisujesz go przed zmienną. Cudzysłowy atrybutu w napisie PHP poprzedzasz ukośnikiem. Każdy wiersz pokazuje teraz próbkę swojej farby, jak na ilustracji 4 (R.5.7).
Bez # przed kodem (background-color: 1b69aa) przeglądarka odrzuca wartość i komórka zostaje bez koloru.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="Mieszalnia farb">
</header>
<section id="search">
<form method="post">
<label for="from">Data odbioru od: </label>
<input type="date" id="from" name="from">
<label for="to">do: </label>
<input type="date" id="to" name="to">
<button type="submit">Wyszukaj</button>
</form>
</section>
<main>
<table>
<tr>
<th>Nr zamówienia</th>
<th>Nazwisko</th>
<th>Imię</th>
<th>Kolor</th>
<th>Pojemność [ml]</th>
<th>Data odbioru</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "mieszalnia");
$query = "SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta ORDER BY data_odbioru;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$row[2]</td><td>$row[0]</td><td>$row[1]</td><td style=\"background-color: #$row[3]\">$row[3]</td><td>$row[4]</td><td>$row[5]</td></tr>";
}
mysqli_close($connection);
?>
</table>
</main>
<footer>
<h3>Egzamin INF.03</h3>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Gdy nie wypełniono formularza, wysyła zapytanie 2, w przeciwnym wypadku wysyła zmodyfikowane zapytanie 3, w ten sposób, że do zapytania pobierane są daty z formularza.
!empty sprawdza, czy pole istnieje i nie jest puste - po kliknięciu „Wyszukaj” bez dat pola przychodzą jako puste napisy i wtedy też zostaje zapytanie 2. Gdy obie daty są wpisane, odczytujesz je z $_POST i wstawiasz w zapytanie 3 zamiast stałych dat. Reszta skryptu (pętla, tło komórki) działa dla obu zapytań bez zmian. Podgląd pokazuje stan po wybraniu dat od 2021-11-06 do 2021-11-10: trzy zamówienia - jak na ilustracji 5 (R.5.4, R.5.5, R.5.8).
isset zamiast !empty przepuszcza puste daty: zapytanie z BETWEEN '' AND '' zwraca pustą tabelę zamiast wszystkich zamówień.
index.php PHP zmienione: 7 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="Mieszalnia farb">
</header>
<section id="search">
<form method="post">
<label for="from">Data odbioru od: </label>
<input type="date" id="from" name="from">
<label for="to">do: </label>
<input type="date" id="to" name="to">
<button type="submit">Wyszukaj</button>
</form>
</section>
<main>
<table>
<tr>
<th>Nr zamówienia</th>
<th>Nazwisko</th>
<th>Imię</th>
<th>Kolor</th>
<th>Pojemność [ml]</th>
<th>Data odbioru</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "mieszalnia");
if (!empty($_POST["from"]) && !empty($_POST["to"])) {
$from = $_POST["from"];
$to = $_POST["to"];
$query = "SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta WHERE data_odbioru BETWEEN '$from' AND '$to' ORDER BY data_odbioru;";
} else {
$query = "SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta ORDER BY data_odbioru;";
}
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$row[2]</td><td>$row[0]</td><td>$row[1]</td><td style=\"background-color: #$row[3]\">$row[3]</td><td>$row[4]</td><td>$row[5]</td></tr>";
}
mysqli_close($connection);
?>
</table>
</main>
<footer>
<h3>Egzamin INF.03</h3>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 28 · po tym etapie masz 37 z 37 kryteriów (pkt)
W przeciwnym wypadku wysyła zmodyfikowane zapytanie 3, w ten sposób, że do zapytania pobierane są daty z formularza.
Pole type="date" przyjmuje w przeglądarce tylko datę, ale żądanie da się wysłać z pominięciem formularza - z dowolnym tekstem w from i to, który w wersji z egzaminu trafia wprost do zapytania (to samo SQL injection co w wyszukiwarkach z innych arkuszy). Poprawki:
DateTime::createFromFormat("Y-m-d", ...) z porównaniem z powrotem - tylko poprawna, istniejąca data włącza filtr; inaczej wszystkie zamówienia,? i typami "ss",style przepuszczasz tylko, gdy to dokładnie sześć cyfr szesnastkowych - inaczej ktoś, kto zmieni dane w bazie, mógłby wstrzyknąć własny styl albo zamknąć atrybut,mysqli_fetch_assoc, (int) dla liczb i htmlspecialchars dla tekstów.Podgląd po zmianie wygląda tak samo (te same daty z formularza). Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
index.php PHP zmienione: 13 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Mieszalnia farb</title>
<link rel="icon" href="fav.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="Mieszalnia farb">
</header>
<section id="search">
<form method="post">
<label for="from">Data odbioru od: </label>
<input type="date" id="from" name="from">
<label for="to">do: </label>
<input type="date" id="to" name="to">
<button type="submit">Wyszukaj</button>
</form>
</section>
<main>
<table>
<tr>
<th>Nr zamówienia</th>
<th>Nazwisko</th>
<th>Imię</th>
<th>Kolor</th>
<th>Pojemność [ml]</th>
<th>Data odbioru</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "mieszalnia");
$from = $_POST["from"] ?? "";
$to = $_POST["to"] ?? "";
$isDate = fn($d) => ($p = DateTime::createFromFormat("Y-m-d", $d)) && $p->format("Y-m-d") === $d;
if ($isDate($from) && $isDate($to)) {
$statement = mysqli_prepare($connection, "SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta WHERE data_odbioru BETWEEN ? AND ? ORDER BY data_odbioru");
mysqli_stmt_bind_param($statement, "ss", $from, $to);
mysqli_stmt_execute($statement);
$result = mysqli_stmt_get_result($statement);
} else {
$result = mysqli_query($connection, "SELECT nazwisko, imie, zamowienia.id, kod_koloru, pojemnosc, data_odbioru FROM klienci JOIN zamowienia ON klienci.id = id_klienta ORDER BY data_odbioru");
}
while ($order = mysqli_fetch_assoc($result)) {
$color = preg_match('/^[0-9a-fA-F]{6}$/', $order["kod_koloru"]) ? $order["kod_koloru"] : "ffffff";
echo "<tr><td>" . (int) $order["id"] . "</td><td>" . htmlspecialchars($order["nazwisko"]) . "</td><td>" . htmlspecialchars($order["imie"]) . "</td>";
echo "<td style=\"background-color: #$color\">$color</td><td>" . (int) $order["pojemnosc"] . "</td><td>" . htmlspecialchars($order["data_odbioru"]) . "</td></tr>";
}
mysqli_close($connection);
?>
</table>
</main>
<footer>
<h3>Egzamin INF.03</h3>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 27.
Krok 29 · po tym etapie masz 37 z 37 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: index.php, style.css, kwerendy.txt, import.jpg, kw1.png - kw4.png, baner.png, fav.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 27.
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.