Rozwiązanie buduje aplikację hurtowni obuwia męskiego: baza obuwie z kategoriami, butami i produktami (kolor, materiał, plik ze zdjęciem) i cztery zapytania - pojedyncza kolumna, dwa złączenia tabel JOIN ... USING (drugie z warunkiem na model) i wstawienie rekordu INSERT z kluczem nadawanym automatycznie, potem dwie strony PHP: index.php z formularzem zamówienia i blokami produktów generowanymi z bazy oraz zamow.php, która pokazuje wybrany but i liczy koszt zamówienia, i style w style.css - z blokami o zaokrąglonych rogach, zmieniającymi kolor pod kursorem.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypty są najpierw pisane najprościej, funkcjami mysqli_query i mysqli_fetch_row, a na końcu zostają przerobione na wersję z prawdziwych projektów: zapytanie przygotowane, sprawdzenie danych z formularza, mysqli_fetch_assoc i htmlspecialchars.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (PDO)” jest drugi sposób rozwiązania tego samego arkusza: kolory w zmiennych CSS, bloki produktów jako <article>, PDO z zapytaniami przygotowanymi, sprawdzenie danych z formularza i htmlspecialchars przy każdym wypisaniu od pierwszej linii - obie wersje są zgodne z kluczem.
Baza i zdjęcia butów pochodzą z prawdziwego archiwum pliki9 (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 stron PHP to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2 (tej samej wersji, w której sprawdza się egzamin) na bazie z arkusza; strona zamówienia pokazuje wynik dla modelu T-02-44, rozmiaru 42 i 4 par - jak na ilustracji 3.
Jak liczą się punkty. Klucz ma 40 kryteriów (R.1.1 - R.5.10), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów - można stracić 10 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 6 z 40 kryteriów (pkt)
Utwórz bazę danych o nazwie obuwie, z zestawem polskich znaków (np. utf8_unicode_ci).
Rozpakuj pliki9.7z z pulpitu (hasło *HurTowni@Buty$ - z gwiazdką na początku i dolarem na końcu) do folderu z numerem zdającego: obuwie.sql i cztery zdjęcia but1.png - but4.png. W phpMyAdmin: Nowa, nazwa obuwie, porównywanie z polskimi znakami, np. utf8_unicode_ci.
Do utworzonej bazy zaimportuj tabele z pliku obuwie.sql z rozpakowanego archiwum.
Wybierz bazę obuwie, potem Import → obuwie.sql → Wykonaj. Powstają trzy tabele z ilustracji 1: kategorie, buty (model, kategoria, nazwa, cena) i produkt (kod produktu, kolor, materiał, wysokość, plik ze zdjęciem). Tabele buty i produkt łączy pole model - ma tę samą nazwę w obu, co przyda się w zapytaniach 2 i 3.
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, wklejasz do edytora grafiki i zapisujesz 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: wybierające jedynie pole model z tabeli produkt.
Jedna kolumna, bez warunku. Wynik: O-23-45, P-59-03, T-02-44, T-03-32 - jak w kluczu. To zapytanie wypełni listę modeli w formularzu (Skrypt 1). Zapytanie zapisujesz w kwerendy.txt, zrzut jako kw1.png.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT model FROM produkt;
Zapytanie 2: wybierające jedynie pola model, nazwa, cena z tabeli buty oraz odpowiadające im pole nazwa_pliku z tabeli produkt. Należy posłużyć się relacją.
SELECT model, nazwa, cena, nazwa_pliku - trzy pola z buty i jedno z produkt,FROM buty JOIN produkt - złączenie tabel,USING(model) - pole łączące ma tę samą nazwę w obu tabelach; równoważnie ON buty.model = produkt.model. Przy USING kolumnę model można wypisać bez nazwy tabeli, bo w wyniku jest tylko raz.Wynik: cztery wiersze, po jednym dla każdego modelu. Zrzut: kw2.png. To zapytanie zbuduje bloki produktów (Skrypt 2).
ON model = model bez nazw tabel kończy się błędem „Column 'model' in on clause is ambiguous” - przy ON trzeba napisać buty.model = produkt.model.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT model FROM produkt;
-- Zapytanie 2
SELECT model, nazwa, cena, nazwa_pliku FROM buty JOIN produkt USING(model);
Zapytanie 3: wybierające jedynie pola nazwa, cena z tabeli buty i odpowiadające mu pola kolor, kod_produktu, material, nazwa_pliku z tabeli produkt dla modelu „P-59-03”. Należy posłużyć się relacją.
To samo złączenie, sześć pól i warunek WHERE model = "P-59-03". Wynik: jeden wiersz - PÓŁBUTY WIZYTOWE, 188.00, czarny, skóra naturalna. Zrzut: kw3.png. W Skrypcie 3 w miejscu P-59-03 stanie model wybrany w formularzu.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT model FROM produkt;
-- Zapytanie 2
SELECT model, nazwa, cena, nazwa_pliku FROM buty JOIN produkt USING(model);
-- Zapytanie 3
SELECT nazwa, cena, kolor, kod_produktu, material, nazwa_pliku FROM buty JOIN produkt USING(model) WHERE model = "P-59-03";
Zapytanie 4: wstawiające rekord z nazwą kategorii „Sandały” do tabeli kategorie. Klucz główny generowany automatycznie.
INSERT INTO kategorie VALUES (NULL, 'Sandały') - wartości w kolejności kolumn: NULL w miejscu klucza oznacza „nadaj sam” (pole ma AUTO_INCREMENT). Równoważnie: INSERT INTO kategorie (nazwa_kat) VALUES ('Sandały'). Ciekawostka z tej bazy: nowy rekord dostaje id_kat = 6, a nie 5 - plik obuwie.sql ustawia licznik AUTO_INCREMENT=6, więc baza pamięta, że numer 5 był już kiedyś użyty. Zrzut: kw4.png.
Wpisanie klucza ręcznie (VALUES (5, 'Sandały')) przeczy wymaganiu „klucz generowany automatycznie” - klucz musi zostać pominięty albo równy NULL.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT model FROM produkt;
-- Zapytanie 2
SELECT model, nazwa, cena, nazwa_pliku FROM buty JOIN produkt USING(model);
-- Zapytanie 3
SELECT nazwa, cena, kolor, kod_produktu, material, nazwa_pliku FROM buty JOIN produkt USING(model) WHERE model = "P-59-03";
-- Zapytanie 4
INSERT INTO kategorie VALUES (NULL, 'Sandały');
Kroki 8-21 · po tym etapie masz 17 z 40 kryteriów (pkt)
Składa się z dwóch stron o nazwach index.php, zamow.php. Cechy wspólne dla obu stron: Zapisane w języku HTML5.
Zbuduj index.php, a zamow.php powstanie z jej kopii - różnią się tylko blokiem głównym. Rozszerzenie .php, bo dojdą skrypty; na egzaminie pliki leżą w htdocs XAMPP-a i otwierasz je przez http://localhost/....
index.php PHP nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny.
lang="pl" w znaczniku <html>.
index.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>.
index.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: „Obuwie”.
<title> w <head>.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
</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>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy, poniżej główny, na dole 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ą 2.
<header>, <main> i <footer> - klucz wymaga wprost header i footer (R.2.3). Bloki stoją jeden pod drugim.
index.php PHP zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści „Obuwie męskie”.
<h1> w <header>.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość stopki: paragraf o treści: „Autor strony: ”, dalej wstawiony numer zdającego.
Akapit w <footer>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Zawartość bloku głównego strony index.php: Formularz wysyłający dane metodą bezpieczną do pliku zamow.php.
method="post" - „metoda bezpieczna” w rozumieniu arkusza: dane w treści żądania, nie w adresie. W specyfikacji HTTP „bezpieczne” są co prawda metody, które niczego nie zmieniają na serwerze (GET i HEAD), ale arkusz używa tego słowa w innym sensie, a klucz wymaga POST. action="zamow.php" - tym razem dane trafiają do innej strony, która je odczyta w Skrypcie 3 (R.2.5, R.3.2).
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
</form>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Listy rozwijanej, poprzedzonej etykietą „Model: ”, wypełnionej przez skrypt 1.
Etykieta <label for> powiązana z listą <select> po id. name="model" - pod tą nazwą wybrany model trafi do $_POST na stronie zamow.php. Klasę kontrolki dajesz od razu (R.3.4). Opcji na razie nie ma - wygeneruje je Skrypt 1 z bazy.
index.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
</select>
</form>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Listy rozwijanej, poprzedzonej etykietą: „Rozmiar: ”, wypełnionej liczbami od 40 do 43.
Cztery opcje wpisane ręcznie w HTML-u. Bez atrybutu value wartością opcji jest jej tekst, więc do formularza trafi np. 42 (R.2.6).
index.php PHP zmienione: 7 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
</select>
<label for="size">Rozmiar: </label>
<select id="size" name="size" class="kontrolki">
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
</select>
</form>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Pola edycyjnego przeznaczonego do wpisywania wartości liczbowych, poprzedzonego etykietą: „Liczba par: ”.
type="number" - pole na liczby (R.3.3).
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
</select>
<label for="size">Rozmiar: </label>
<select id="size" name="size" class="kontrolki">
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
</select>
<label for="pairs">Liczba par: </label>
<input type="number" id="pairs" name="pairs" class="kontrolki">
</form>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Przycisku o treści „Zamów”, który wysyła dane z formularza.
<button type="submit"> wysyła formularz do zamow.php (R.3.3). Klasa kontrolki - jak wszystkie elementy formularza (R.3.4).
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
</select>
<label for="size">Rozmiar: </label>
<select id="size" name="size" class="kontrolki">
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
</select>
<label for="pairs">Liczba par: </label>
<input type="number" id="pairs" name="pairs" class="kontrolki">
<button type="submit" class="kontrolki">Zamów</button>
</form>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Zawartość bloku głównego strony zamow.php: Nagłówek drugiego stopnia o treści „Zamówienie”. Odnośnik „Strona główna” prowadzący do strony index.php.
Zapisz index.php jako zamow.php i w bloku głównym zostaw <h2> i odnośnik do strony głównej (R.2.4, R.3.5). Między nimi stanie Skrypt 3.
zamow.php PHP nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<h2>Zamówienie</h2>
<a href="index.php">Strona główna</a>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 22-28 · po tym etapie masz 28 z 40 kryteriów (pkt)
Domyślnie, dla wszystkich selektorów: krój czcionki Cambria.
Selektor * (R.4.1).
style.css CSS nowy plik * {
font-family: Cambria;
}Wspólne dla bloku nagłówkowego i stopki: kolor tła Sienna, biały kolor czcionki, marginesy wewnętrzne 5 px, wyrównanie tekstu do środka.
Jedna reguła dla dwóch selektorów.
style.css CSS zmienione: 6 linii * {
font-family: Cambria;
}
header, footer {
background-color: Sienna;
color: white;
padding: 5px;
text-align: center;
}Dla bloku głównego: kolor tła AntiqueWhite, wysokość 700 px, rozmiar czcionki 120%, paski przewijania pojawiające się w przypadku gdy zawartość nie mieści się w bloku.
overflow: auto - pasek przewijania pojawia się tylko wtedy, gdy zawartość jest wyższa niż 700 px; przy krótkiej treści go nie ma (scroll pokazywałby go zawsze). Cztery bloki produktów nie zmieszczą się w 700 px, więc na ilustracji 2 widać pasek z prawej (R.4.2, R.4.4, R.4.5).
style.css CSS zmienione: 6 linii * {
font-family: Cambria;
}
header, footer {
background-color: Sienna;
color: white;
padding: 5px;
text-align: center;
}
main {
background-color: AntiqueWhite;
height: 700px;
font-size: 120%;
overflow: auto;
}Zdefiniowana klasa kontrolki o cechach: szerokość 150 px, marginesy zewnętrzne 10 px. Klasa jest przypisana do wszystkich elementów formularza (listy rozwijane, pole edycyjne, przycisk).
Selektor klasy z kropką. Wszystkie cztery kontrolki mają już klasę - teraz mają równą szerokość, jak na ilustracji 2 (R.4.8).
style.css CSS zmienione: 4 linie * {
font-family: Cambria;
}
header, footer {
background-color: Sienna;
color: white;
padding: 5px;
text-align: center;
}
main {
background-color: AntiqueWhite;
height: 700px;
font-size: 120%;
overflow: auto;
}
.kontrolki {
width: 150px;
margin: 10px;
}Zdefiniowana klasa buty o cechach: szerokość 70%, marginesy zewnętrzne 15 px, marginesy wewnętrzne 7 px, obramowanie linią ciągłą o szerokości 1 px i kolorze Sienna, zaokrąglenie rogów 30 px. Gdy kursor znajdzie się na bloku produktu (klasa buty) jego kolor tła zmienia się na Linen.
Styl bloków produktów, które wygeneruje Skrypt 2 - na razie nie ma ich na stronie, więc w podglądzie nic się nie zmienia. .buty:hover łączy klasę z pseudoklasą: zmiana tła tylko dla bloku pod kursorem (R.4.9, R.4.10).
style.css CSS zmienione: 10 linii * {
font-family: Cambria;
}
header, footer {
background-color: Sienna;
color: white;
padding: 5px;
text-align: center;
}
main {
background-color: AntiqueWhite;
height: 700px;
font-size: 120%;
overflow: auto;
}
.kontrolki {
width: 150px;
margin: 10px;
}
.buty {
width: 70%;
margin: 15px;
padding: 7px;
border: 1px solid Sienna;
border-radius: 30px;
}
.buty:hover {
background-color: Linen;
}Dla selektora obrazu: opływany po prawej stronie zawartością (obraz po lewej stronie), margines zewnętrzny prawy 30 px.
float: left - obraz przy lewej krawędzi bloku, a nagłówki stają po jego prawej stronie (R.3.1, R.4.6). Selektor znacznika img, jak wymaga uwaga arkusza.
style.css CSS zmienione: 4 linie * {
font-family: Cambria;
}
header, footer {
background-color: Sienna;
color: white;
padding: 5px;
text-align: center;
}
main {
background-color: AntiqueWhite;
height: 700px;
font-size: 120%;
overflow: auto;
}
.kontrolki {
width: 150px;
margin: 10px;
}
.buty {
width: 70%;
margin: 15px;
padding: 7px;
border: 1px solid Sienna;
border-radius: 30px;
}
.buty:hover {
background-color: Linen;
}
img {
float: left;
margin-right: 30px;
}Dla selektora nagłówka czwartego stopnia: kolor tła Sienna, biały kolor czcionki, wyrównanie tekstu do prawej.
W <h4> Skrypt 2 wypisze cenę - wyjdzie brązowy pasek z ceną przy prawej krawędzi bloku (R.4.2, R.4.3, R.4.7).
style.css CSS zmienione: 5 linii * {
font-family: Cambria;
}
header, footer {
background-color: Sienna;
color: white;
padding: 5px;
text-align: center;
}
main {
background-color: AntiqueWhite;
height: 700px;
font-size: 120%;
overflow: auto;
}
.kontrolki {
width: 150px;
margin: 10px;
}
.buty {
width: 70%;
margin: 15px;
padding: 7px;
border: 1px solid Sienna;
border-radius: 30px;
}
.buty:hover {
background-color: Linen;
}
img {
float: left;
margin-right: 30px;
}
h4 {
background-color: Sienna;
color: white;
text-align: right;
}Kroki 29-41 · po tym etapie masz 40 z 40 kryteriów (pkt)
Łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie obuwie.
Skrypt 1 piszesz wewnątrz <select> - to, co wypisze, stanie się opcjami listy. mysqli_connect z czterema argumentami łączy się z serwerem i wybiera bazę; uchwyt połączenia trzymasz w $connection, bo użyje go też Skrypt 2 (R.5.1, R.5.2). Podgląd od tego kroku to wynik prawdziwego uruchomienia strony w PHP.
index.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
?>
</select>
<label for="size">Rozmiar: </label>
<select id="size" name="size" class="kontrolki">
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
</select>
<label for="pairs">Liczba par: </label>
<input type="number" id="pairs" name="pairs" class="kontrolki">
<button type="submit" class="kontrolki">Zamów</button>
</form>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 1 w pliku index.php wysyła do bazy danych zapytanie 1.
Treść zapytania 1 w zmiennej, mysqli_query wysyła je do bazy, a w $result zostaje wynik - wiersze do odczytania (R.5.4).
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$query = "SELECT model FROM produkt;";
$result = mysqli_query($connection, $query);
?>
</select>
<label for="size">Rozmiar: </label>
<select id="size" name="size" class="kontrolki">
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
</select>
<label for="pairs">Liczba par: </label>
<input type="number" id="pairs" name="pairs" class="kontrolki">
<button type="submit" class="kontrolki">Zamów</button>
</form>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 29.
Wyświetla pobrane zapytaniem wartości jako elementy listy rozwijanej z modelami obuwia.
mysqli_fetch_row przy każdym wywołaniu oddaje kolejny wiersz jako tablicę, a gdy wierszy zabraknie - null, co kończy pętlę while. Dla każdego modelu wypisujesz <option> z jego nazwą. Rozwiń listę „Model” w podglądzie: cztery modele z bazy, pierwszy O-23-45 - jak na ilustracji 2 (R.5.6).
index.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$query = "SELECT model FROM produkt;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<option>$row[0]</option>";
}
?>
</select>
<label for="size">Rozmiar: </label>
<select id="size" name="size" class="kontrolki">
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
</select>
<label for="pairs">Liczba par: </label>
<input type="number" id="pairs" name="pairs" class="kontrolki">
<button type="submit" class="kontrolki">Zamów</button>
</form>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 2 w pliku index.php wysyła do bazy danych zapytanie 2. Na końcu zamykane jest połączenie z serwerem.
Skrypt 2 stoi pod formularzem i korzysta z tego samego połączenia $connection. Wysyła zapytanie 2, a na samym końcu mysqli_close zamyka połączenie - to ostatnia operacja na bazie na tej stronie (R.5.3, R.5.4).
index.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$query = "SELECT model FROM produkt;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<option>$row[0]</option>";
}
?>
</select>
<label for="size">Rozmiar: </label>
<select id="size" name="size" class="kontrolki">
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
</select>
<label for="pairs">Liczba par: </label>
<input type="number" id="pairs" name="pairs" class="kontrolki">
<button type="submit" class="kontrolki">Zamów</button>
</form>
<?php
$query = "SELECT model, nazwa, cena, nazwa_pliku FROM buty JOIN produkt USING(model);";
$result = mysqli_query($connection, $query);
mysqli_close($connection);
?>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Dla każdego zwróconego zapytaniem wiersza tworzy blok produktu, zawierający obraz o nazwie pliku pobranej zapytaniem i tekście alternatywnym „but męski”.
Dla każdego wiersza wypisujesz blok <div class="buty"> - styl tej klasy już czeka w CSS - a w nim obraz. Kolumny wyniku mają numery w kolejności z SELECT: $row[0] model, [1] nazwa, [2] cena, [3] nazwa pliku - ten ostatni idzie do atrybutu src. Cudzysłowy atrybutów HTML wewnątrz napisu PHP poprzedzasz ukośnikiem: \" (R.2.7, R.3.4). Najedź na blok w podglądzie - tło zmienia się na Linen.
index.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$query = "SELECT model FROM produkt;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<option>$row[0]</option>";
}
?>
</select>
<label for="size">Rozmiar: </label>
<select id="size" name="size" class="kontrolki">
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
</select>
<label for="pairs">Liczba par: </label>
<input type="number" id="pairs" name="pairs" class="kontrolki">
<button type="submit" class="kontrolki">Zamów</button>
</form>
<?php
$query = "SELECT model, nazwa, cena, nazwa_pliku FROM buty JOIN produkt USING(model);";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"buty\">";
echo "<img src=\"$row[3]\" alt=\"but męski\">";
echo "</div>";
}
mysqli_close($connection);
?>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Nagłówek drugiego stopnia zawierający zwróconą zapytaniem nazwę produktu. Nagłówek piątego stopnia o treści: „Model: <model>”. Nagłówek czwartego stopnia o treści: „Cena: <cena>”, gdzie wartość w nawiasach <> oznacza dane pobrane zapytaniem.
Trzy nagłówki w kolejności z arkusza: <h2> z nazwą, <h5> z modelem i <h4> z ceną - ten ostatni dostaje brązowy pasek ze stylu h4. Podgląd pokazuje cztery bloki: PÓŁBUTY WIZYTOWE, TRZEWIKI SZNUROWANE, TRAMPKI SLIP ON i OBUWIE TRENINGOWE; cena ma dwa miejsca po przecinku (188.00), bo tak przechowuje ją pole float(5,2) (R.2.8, R.5.7, R.5.10).
Kolejność bloków może się różnić od ilustracji 2: zapytanie nie ma ORDER BY, a bez niego baza nie gwarantuje kolejności wierszy złączenia - zależy ona od tego, którą tabelę serwer przegląda pierwszą. W tym podglądzie (prawdziwe uruchomienie w XAMPP) pierwsze są OBUWIE TRENINGOWE, na ilustracji PÓŁBUTY. Klucz sprawdza cztery bloki z danymi, nie ich kolejność; gdyby kolejność była wymagana, wystarczyłoby dopisać np. ORDER BY kod_produktu.
index.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$query = "SELECT model FROM produkt;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<option>$row[0]</option>";
}
?>
</select>
<label for="size">Rozmiar: </label>
<select id="size" name="size" class="kontrolki">
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
</select>
<label for="pairs">Liczba par: </label>
<input type="number" id="pairs" name="pairs" class="kontrolki">
<button type="submit" class="kontrolki">Zamów</button>
</form>
<?php
$query = "SELECT model, nazwa, cena, nazwa_pliku FROM buty JOIN produkt USING(model);";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"buty\">";
echo "<img src=\"$row[3]\" alt=\"but męski\">";
echo "<h2>$row[1]</h2>";
echo "<h5>Model: $row[0]</h5>";
echo "<h4>Cena: $row[2]</h4>";
echo "</div>";
}
mysqli_close($connection);
?>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podział zrealizowany za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 2.
Sprawdź całość: nagłówek, blok główny o wysokości 700 px z paskiem przewijania (cztery bloki się nie mieszczą), stopka. W blokach zdjęcia stoją po lewej, a nazwy po prawej - obraz opływany treścią, jak wymaga klucz (R.3.1).
Podgląd strony bez zmian - taki jak po kroku 34.
Skrypt 3 w pliku zamow.php. Na końcu zamykane jest połączenie z serwerem.
zamow.php to osobna strona - własne połączenie z bazą na początku Skryptu 3 i zamknięcie na końcu. Podgląd tej strony pokazuje stan po wysłaniu formularza z ilustracji 3: model T-02-44, rozmiar 42, 4 pary.
zamow.php PHP zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<h2>Zamówienie</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
mysqli_close($connection);
?>
<a href="index.php">Strona główna</a>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Wykorzystuje dane wysłane z formularza.
Formularz wysłał dane metodą POST, więc czekają w tablicy $_POST pod nazwami z atrybutów name: model, size, pairs.
Otwarcie zamow.php wprost z paska adresu, bez wysłania formularza, daje serię ostrzeżeń „Undefined array key” i „Trying to access array offset on value of type null” zamiast danych zamówienia (sprawdzone w PHP 8.2). Klucz tego nie sprawdza - zabezpieczenie jest w etapie „Dobre praktyki”.
zamow.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<h2>Zamówienie</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$model = $_POST["model"];
$size = $_POST["size"];
$pairs = $_POST["pairs"];
mysqli_close($connection);
?>
<a href="index.php">Strona główna</a>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 36.
Wysyła zmodyfikowane zapytanie 3, w ten sposób, że w warunku sprawdzany jest model buta wybrany w formularzu.
Zapytanie 3, w którym zamiast P-59-03 stoi $model - w apostrofach, bo w SQL porównujesz tekst. Wynik ma jeden wiersz, więc wystarczy jedno mysqli_fetch_row, bez pętli. Kolumny: $row[0] nazwa, [1] cena, [2] kolor, [3] kod, [4] materiał, [5] plik (R.5.5).
zamow.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<h2>Zamówienie</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$model = $_POST["model"];
$size = $_POST["size"];
$pairs = $_POST["pairs"];
$query = "SELECT nazwa, cena, kolor, kod_produktu, material, nazwa_pliku FROM buty JOIN produkt USING(model) WHERE model = '$model';";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
mysqli_close($connection);
?>
<a href="index.php">Strona główna</a>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 36.
Dane ze zwróconego zapytaniem wiersza są wyświetlane na stronie: obraz o nazwie pliku pobranej zapytaniem i tekście alternatywnym „but męski”, nagłówek drugiego stopnia z nazwą produktu pobraną z bazy.
Obraz z pliku z bazy ($row[5]) i nazwa w <h2> - dla T-02-44 to TRZEWIKI SZNUROWANE (R.5.8).
zamow.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<h2>Zamówienie</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$model = $_POST["model"];
$size = $_POST["size"];
$pairs = $_POST["pairs"];
$query = "SELECT nazwa, cena, kolor, kod_produktu, material, nazwa_pliku FROM buty JOIN produkt USING(model) WHERE model = '$model';";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<img src=\"$row[5]\" alt=\"but męski\">";
echo "<h2>$row[0]</h2>";
mysqli_close($connection);
?>
<a href="index.php">Strona główna</a>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Paragraf o treści: „cena za <liczbaPar> par: <wartośćCałkowita> zł", gdzie <liczbaPar> oznacza wartość pobraną z formularza, a <wartośćCałkowita> oznacza obliczony koszt za podaną liczbę par wybranego buta.
Cena z bazy razy liczba par z formularza. Obie wartości przychodzą jako tekst („399.00” i „4”), ale operator * w PHP zamienia je na liczby: 399 × 4 = 1596 - jak na ilustracji 3 (R.5.9).
Wysłanie formularza z pustym polem „Liczba par” kończy się w PHP 8 błędem krytycznym „Unsupported operand types: string * string” przy mnożeniu ceny przez liczbę par - strona urywa się po nazwie buta (sprawdzone w PHP 8.2). Klucz tego nie sprawdza - zabezpieczenie ((int)) jest w etapie „Dobre praktyki”.
zamow.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<h2>Zamówienie</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$model = $_POST["model"];
$size = $_POST["size"];
$pairs = $_POST["pairs"];
$query = "SELECT nazwa, cena, kolor, kod_produktu, material, nazwa_pliku FROM buty JOIN produkt USING(model) WHERE model = '$model';";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<img src=\"$row[5]\" alt=\"but męski\">";
echo "<h2>$row[0]</h2>";
$total = $row[1] * $pairs;
echo "<p>cena za $pairs par: $total zł</p>";
mysqli_close($connection);
?>
<a href="index.php">Strona główna</a>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Paragraf o treści: ”Szczegóły produktu: <kolor>, <materiał>”, gdzie wartości w nawiasach <> oznaczają dane pobrane zapytaniem. Paragraf o treści: „Rozmiar: <rozmiar>”, gdzie wartość w nawiasach <> oznacza dane pobrane z formularza.
Kolor i materiał z bazy ($row[2], $row[4]), rozmiar z formularza. Podgląd pokazuje komplet z ilustracji 3: brązowy, skóra naturalna - zamsz, rozmiar 42 (R.5.8, R.5.9, R.5.10).
zamow.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<h2>Zamówienie</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$model = $_POST["model"];
$size = $_POST["size"];
$pairs = $_POST["pairs"];
$query = "SELECT nazwa, cena, kolor, kod_produktu, material, nazwa_pliku FROM buty JOIN produkt USING(model) WHERE model = '$model';";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<img src=\"$row[5]\" alt=\"but męski\">";
echo "<h2>$row[0]</h2>";
$total = $row[1] * $pairs;
echo "<p>cena za $pairs par: $total zł</p>";
echo "<p>Szczegóły produktu: $row[2], $row[4]</p>";
echo "<p>Rozmiar: $size</p>";
mysqli_close($connection);
?>
<a href="index.php">Strona główna</a>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 42-43 · po tym etapie masz 40 z 40 kryteriów (pkt)
Wykorzystuje dane wysłane z formularza.
Wersja z egzaminu ufa wszystkiemu, co przyszło z formularza. Poprawki:
mysqli_prepare, ? w miejscu modelu, mysqli_stmt_bind_param z typem "s"): model idzie do bazy osobno od treści zapytania, więc tekst wpisany w żądanie nie zmieni zapytania,(int) na rozmiarze i liczbie par oraz warunek: rozmiar 40 - 43, co najmniej jedna para, a model musi istnieć w bazie - inaczej komunikat zamiast pustej strony z błędami,?? "" - brak pola w $_POST (wejście na zamow.php bez formularza) nie kończy się ostrzeżeniem,mysqli_fetch_assoc - pola po nazwach ($shoe["cena"]) zamiast numerów,htmlspecialchars przy wypisywaniu danych i number_format dla kwoty: 1 596,00 zł.Wersja z egzaminu zostaje w komentarzu. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
zamow.php PHP zmienione: 21 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<h2>Zamówienie</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$model = $_POST["model"] ?? "";
$size = (int) ($_POST["size"] ?? 0);
$pairs = (int) ($_POST["pairs"] ?? 0);
$statement = mysqli_prepare($connection, "SELECT nazwa, cena, kolor, material, nazwa_pliku FROM buty JOIN produkt USING(model) WHERE model = ?");
mysqli_stmt_bind_param($statement, "s", $model);
mysqli_stmt_execute($statement);
$shoe = mysqli_fetch_assoc(mysqli_stmt_get_result($statement));
if ($shoe && $pairs >= 1 && $size >= 40 && $size <= 43) {
$total = $shoe["cena"] * $pairs;
echo "<img src=\"" . htmlspecialchars($shoe["nazwa_pliku"]) . "\" alt=\"but męski\">";
echo "<h2>" . htmlspecialchars($shoe["nazwa"]) . "</h2>";
echo "<p>cena za $pairs par: " . number_format($total, 2, ",", " ") . " zł</p>";
echo "<p>Szczegóły produktu: " . htmlspecialchars($shoe["kolor"]) . ", " . htmlspecialchars($shoe["material"]) . "</p>";
echo "<p>Rozmiar: $size</p>";
} else {
echo "<p>Nie udało się złożyć zamówienia - wróć na stronę główną i sprawdź model, rozmiar i liczbę par.</p>";
}
mysqli_close($connection);
/* Wersja z egzaminu:
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$model = $_POST["model"];
$size = $_POST["size"];
$pairs = $_POST["pairs"];
$query = "SELECT nazwa, cena, kolor, kod_produktu, material, nazwa_pliku FROM buty JOIN produkt USING(model) WHERE model = '$model';";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<img src=\"$row[5]\" alt=\"but męski\">";
echo "<h2>$row[0]</h2>";
$total = $row[1] * $pairs;
echo "<p>cena za $pairs par: $total zł</p>";
echo "<p>Szczegóły produktu: $row[2], $row[4]</p>";
echo "<p>Rozmiar: $size</p>";
mysqli_close($connection);
*/
?>
<a href="index.php">Strona główna</a>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Dla każdego zwróconego zapytaniem wiersza tworzy blok produktu.
W Skrypcie 2 mysqli_fetch_assoc zamiast mysqli_fetch_row: $shoe["nazwa_pliku"] czyta się lepiej niż $row[3] i nie psuje się, gdy ktoś zmieni kolejność kolumn w SELECT. Wszystko, co przychodzi z bazy, wypisujesz przez htmlspecialchars - także w opcjach listy w Skrypcie 1. Podgląd wygląda tak samo jak wcześniej, bo dane są te same. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
index.php PHP zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obuwie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Obuwie męskie</h1>
</header>
<main>
<form action="zamow.php" method="post">
<label for="model">Model: </label>
<select id="model" name="model" class="kontrolki">
<?php
$connection = mysqli_connect("localhost", "root", "", "obuwie");
$query = "SELECT model FROM produkt;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<option>" . htmlspecialchars($row[0]) . "</option>";
// echo "<option>$row[0]</option>";
}
?>
</select>
<label for="size">Rozmiar: </label>
<select id="size" name="size" class="kontrolki">
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
</select>
<label for="pairs">Liczba par: </label>
<input type="number" id="pairs" name="pairs" class="kontrolki">
<button type="submit" class="kontrolki">Zamów</button>
</form>
<?php
$result = mysqli_query($connection, "SELECT model, nazwa, cena, nazwa_pliku FROM buty JOIN produkt USING(model);");
while ($shoe = mysqli_fetch_assoc($result)) {
echo "<div class=\"buty\">";
echo "<img src=\"" . htmlspecialchars($shoe["nazwa_pliku"]) . "\" alt=\"but męski\">";
echo "<h2>" . htmlspecialchars($shoe["nazwa"]) . "</h2>";
echo "<h5>Model: " . htmlspecialchars($shoe["model"]) . "</h5>";
echo "<h4>Cena: " . htmlspecialchars($shoe["cena"]) . "</h4>";
echo "</div>";
}
mysqli_close($connection);
// while ($row = mysqli_fetch_row($result)) { ... $row[3] ... }
?>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 44 · po tym etapie masz 40 z 40 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz strony.
W folderze z numerem zdającego: index.php, zamow.php, style.css, kwerendy.txt, import.jpg, kw1.png - kw4.png, zdjęcia butów 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 43.
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.