Rozwiązanie buduje witrynę sklepu z antykami: baza antyki (klienci, meble i tabela zakupy łącząca je w relacji m:n) i cztery zapytania - SELECT z warunkiem, INSERT z automatycznym kluczem, złączenie dwóch tabel i złączenie trzech tabel przez tabelę pośredniczącą - potem kadr fotela przeskalowany na płótno o zadanych wymiarach, strona index.php z blokiem sekcji i koszykiem, style w styl.css (obraz opływany tekstem, opis pod spodem dzięki clear) oraz trzy skrypty PHP: meble z bazy w trzech kategoriach, każdy z formularzem i przyciskiem „KUP”, zapis zakupu wysłanego tym przyciskiem i koszyk z listą numerowaną i kosztem całkowitym.
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 z tabeli 1 arkusza; Skrypt 1 występuje w trzech kopiach (1a, 1b, 1c), bo tak opisuje go arkusz. Na końcu całość zostaje przerobiona na wersję z prawdziwych projektów: jedna funkcja zamiast trzech kopii, zapytanie przygotowane z obsługą błędu i htmlspecialchars.
Obok jest druga wersja tego rozwiązania - zakładka Nowoczesny kod (grid, PDO): te same punkty, ale układ na siatce CSS, PHP na PDO z zapytaniami przygotowanymi od pierwszej linijki, logika oddzielona od HTML-u i przekierowanie po zakupie.
Baza i zdjęcia mebli pochodzą z prawdziwego archiwum pliki5 (załącznik do arkusza, hasło w treści zadania); obrazy zostają w folderach sofy/, fotele/ i komody/. 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: z pustym koszykiem jak na ilustracji 2, a od kroków z koszykiem - po kupieniu niebieskiego fotela, sofy 2-osobowej i barokowej komody, jak na ilustracji 6.
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 antyki, z zestawem polskich znaków (np. utf8_polish_ci)
Rozpakuj pliki5.7z z pulpitu (hasło Twoje@ntyki& - małpa zamiast „a” i znak & na końcu) i załóż folder z numerem zdającego. Arkusz zaznacza, że obrazy mają zostać w folderach - przenosisz foldery sofy, fotele i komody w całości. W phpMyAdmin: Nowa, nazwa antyki, porównywanie utf8_polish_ci.
Do utworzonej bazy zaimportuj tabele z pliku antyki.sql
Zaznacz bazę antyki, potem Import → antyki.sql → Wykonaj. Trzy tabele z ilustracji 1: klienci, meble (11 mebli, kategoria 1 - sofy, 2 - fotele, 3 - komody) i pusta zakupy, która łączy klientów z meblami w relacji m:n.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel
Print Screen, wklejasz do edytora grafiki i zapisujesz jako import.png - w tym arkuszu wszystkie zrzuty są w PNG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie pola idMeble, nazwa, plik, styl, cena i opis z tabeli meble dla kategorii 1
Sześć pól i warunek kategoria = 1. Wynik: trzy sofy o identyfikatorach 1, 2, 3. Z tego zapytania powstanie Skrypt 1 - w trzech wariantach, dla każdej kategorii. Zapytanie zapisujesz w kwerendy.txt, zrzut jako kw1.png.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;
Zapytanie 2: wstawiające rekord do tabeli zakupy o wartościach identyfikator klienta: 1, identyfikator mebla: 6, jedna sztuka. Klucz główny nadawany automatycznie
Wymień trzy kolumny, które wypełniasz, a klucz id pomiń - nada go baza (AUTO_INCREMENT): pierwszy zakup dostaje 1. Klientka 1 (Anna Kowalska) kupuje mebel 6, barokową komodę. Zrzut z komunikatem albo z tabelą po wstawieniu: kw2.png.
Klucz wpisany ręcznie (VALUES (1, 1, 6, 1)) przeczy wymaganiu „klucz główny nadawany automatycznie”.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;
-- Zapytanie 2
INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, 6, 1);
Zapytanie 3: wybierające jedynie nazwę i cenę mebli, które zostały zakupione przez klienta o identyfikatorze równym 1. Należy posłużyć się relacją
SELECT nazwa, cena - pola z tabeli meble,FROM zakupy JOIN meble USING(idMeble) - pole łączące ma tę samą nazwę w obu tabelach,WHERE idKlienci = 1 - tylko zakupy Anny Kowalskiej.Wynik zależy od zawartości zakupy - po zapytaniu 2 to jeden wiersz: Barokowa komoda, 4000. Z tego zapytania Skrypt 3 zbuduje koszyk. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;
-- Zapytanie 2
INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, 6, 1);
-- Zapytanie 3
SELECT nazwa, cena FROM zakupy JOIN meble USING(idMeble) WHERE idKlienci = 1;
Zapytanie 4: wybierające jedynie nazwę mebla oraz odpowiadające mu imię i nazwisko kupującego klienta. Należy posłużyć się relacją m:n
Relację m:n realizuje tabela pośrednicząca: zakupy łączysz z meble po idMeble i z klienci po idKlienci - dwa złączenia w jednym zapytaniu. Wynik: Barokowa komoda, Anna Kowalska. Zrzut: kw4.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;
-- Zapytanie 2
INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, 6, 1);
-- Zapytanie 3
SELECT nazwa, cena FROM zakupy JOIN meble USING(idMeble) WHERE idKlienci = 1;
-- Zapytanie 4
SELECT nazwa, imie, nazwisko FROM zakupy JOIN meble USING(idMeble) JOIN klienci USING(idKlienci);
Kroki 8-19 · po tym etapie masz 12 z 40 kryteriów (pkt)
Cechy grafiki f3.png: Grafikę należy skadrować tak, aby zawierała tylko czerwony fotel – trzeci od lewej strony
fotele/f3.png ma 1920 × 1027 px i trzy krzesła na przezroczystym tle. W GIMP-ie Zaznaczenie prostokątne wokół trzeciego, czerwonego fotela, Obraz → Przytnij do zaznaczenia, a potem Obraz → Przytnij do zawartości, które odcina pusty, przezroczysty margines. Kadr ma 604 × 1001 px.
Po skadrowaniu należy zmienić wymiary grafiki na 524 px szerokości i 640 px wysokości. Proporcje muszą być zachowane, fotel musi znajdować się na środku grafiki (np. poprzez przeskalowanie grafiki z zachowaniem proporcji do wysokości 640 px, a następnie zmianę wymiarów płótna do szerokości 524 px z wyśrodkowaniem)
Dwa kroki z podpowiedzi arkusza. Obraz → Skaluj obraz, wysokość 640 px przy zamkniętym łańcuchu: szerokość wychodzi 386 px. Potem Obraz → Rozmiar płótna, szerokość 524 px (łańcuch rozpięty) i przycisk Wyśrodkuj - po obu stronach przybywa po 69 px przezroczystego tła, a fotel zostaje na środku. Na koniec Warstwa → Warstwa do rozmiaru obrazu i eksport z nadpisaniem fotele/f3.png. Pozostałe zdjęcia mebli mają już 524 × 640 px - po tej zmianie fotel czerwony pasuje do nich na stronie.
Skalowanie od razu do 524 × 640 px przy rozpiętym łańcuchu rozciąga fotel na szerokość - klucz wymaga zachowanych proporcji.
Składa się ze strony o nazwie index.php. Zapisana w języku HTML5
Deklaracja <!DOCTYPE html> i szkielet strony. Plik leży w htdocs XAMPP-a razem z folderami obrazów.
index.php PHP nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny
Atrybut 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 „Sprzedaż antyków”
<title> w <head>.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Nazwa: styl.css.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy, główny i stopkę. Blok główny zawiera blok sekcji i blok boczny. Podział zrealizowany za pomocą semantycznych znaczników języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 4
Klucz wymaga header, main z section i aside w środku oraz footer (R.2.4). Sekcja i blok boczny staną obok siebie w CSS.
index.php PHP zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
<section>
</section>
<aside>
</aside>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: Nagłówek pierwszego stopnia o treści: „Najlepsze antyki w mieście”
<h1> w <header>.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
</section>
<aside>
</aside>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku sekcji: Nagłówek drugiego stopnia o treści: „- Sofy -”. Nagłówek drugiego stopnia o treści: „- Fotele -”. Nagłówek drugiego stopnia o treści: „- Komody -”
Trzy <h2> z myślnikami w treści - pod każdym stanie jeden wariant Skryptu 1, a pod ostatnim Skrypt 2.
index.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
</aside>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku bocznego: Nagłówek drugiego stopnia o treści: „Koszyk”. Paragraf o treści „Zalogowano: Anna Kowalska”
<h2> i akapit - pod nimi Skrypt 3 wypisze listę zakupów i koszt.
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
</aside>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloki stopki: paragraf o treści „Stronę wykonał: ”, 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. „Bloki” w poleceniu to literówka arkusza.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 20-33 · po tym etapie masz 23 z 40 kryteriów (pkt)
Domyślnie, dla wszystkich selektorów: krój czcionki Georgia
Selektor *.
styl.css CSS nowy plik * {
font-family: Georgia;
}Dla selektora ciała strony: kolor tła MistyRose
Selektor znacznika body - zgodnie z uwagą arkusza.
styl.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}Dla bloku nagłówkowego i stopki: wyrównanie tekstu do środka
Jedna reguła dla dwóch selektorów.
styl.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}Dla bloku sekcji: szerokość 70%, wysokość 700 px, suwaki do przewijania zawartości bloku zawsze widoczne
„Zawsze widoczne” to overflow: scroll - suwaki są nawet wtedy, gdy treść się mieści (auto pokazywałby je tylko w razie potrzeby). Na ilustracji 2 widać oba suwaki, także poziomy.
styl.css CSS zmienione: 5 linii * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}Dla bloku bocznego: szerokość 30%
Razem z sekcją 100% szerokości bloku głównego.
styl.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}
aside {
width: 30%;
}Podział zrealizowany za pomocą semantycznych znaczników języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 4
Arkusz nie mówi, jak postawić blok boczny obok sekcji - wybierasz display: flex na <main>: dzieci stają w rzędzie, 70% + 30% wypełnia szerokość, a stopka zostaje pod spodem bez clear. Pływające obrazy wewnątrz bloków mebli nie mają wpływu na ten układ (klucz każe ich nie oceniać przy R.3.1).
styl.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}
aside {
width: 30%;
}
main {
display: flex;
}Dla selektora obrazu: szerokość 90%, wyrównanie tekstu do środka
Selektor znacznika img. Szerokość w procentach liczy się od bloku obrazu (30% bloku mebla). Wyrównanie tekstu działa na treść wewnątrz elementu, a obraz nie ma treści - ta właściwość niczego tu nie przesuwa, ale arkusz ją wymienia, więc ją zapisujesz. Z tą regułą są wszystkie wymiary z klucza: sekcja, blok boczny i obrazy.
styl.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}
aside {
width: 30%;
}
main {
display: flex;
}
img {
width: 90%;
text-align: center;
}Dla klasy mebel (skrypt 1): marginesy zewnętrzne 5 px, wewnętrzne 10 px, kolor tła LightCoral, zaokrąglenie rogów 20 px
Styl bloków, które wygeneruje Skrypt 1 - na razie ich nie ma, więc w podglądzie nic się nie zmienia.
styl.css CSS zmienione: 6 linii * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}
aside {
width: 30%;
}
main {
display: flex;
}
img {
width: 90%;
text-align: center;
}
.mebel {
margin: 5px;
padding: 10px;
background-color: LightCoral;
border-radius: 20px;
}Dla klasy obraz (skrypt 1): szerokość 30%, opływanie z prawej strony
„Opływanie z prawej strony” znaczy, że tekst płynie po prawej stronie bloku obrazu - blok stoi więc po lewej: float: left (klucz podaje to wprost).
float: right postawi zdjęcie po prawej, a tekst po lewej - odwrotnie niż na ilustracji 5.
styl.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}
aside {
width: 30%;
}
main {
display: flex;
}
img {
width: 90%;
text-align: center;
}
.mebel {
margin: 5px;
padding: 10px;
background-color: LightCoral;
border-radius: 20px;
}
.obraz {
width: 30%;
float: left;
}Dla klasy opis (skrypt 1): znajduje się pod blokami obrazu i informacji, na całej szerokości bloku nadrzędnego
clear: both każe blokowi opisu zacząć się poniżej wszystkich elementów pływających - jest pod obrazem i pod informacjami, na całej szerokości bloku mebla. Przy okazji blok mebla obejmuje pływający obraz w całości, bo ostatnie dziecko stoi pod nim.
styl.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}
aside {
width: 30%;
}
main {
display: flex;
}
img {
width: 90%;
text-align: center;
}
.mebel {
margin: 5px;
padding: 10px;
background-color: LightCoral;
border-radius: 20px;
}
.obraz {
width: 30%;
float: left;
}
.opis {
clear: both;
}Dla przycisku: jedynie margines zewnętrzny lewy 30 px, marginesy wewnętrzne 20 px, kolor tła LightCoral, obramowanie linią kropkowaną o szerokości 2 px i kolorze Maroon, zaokrąglenie rogów 10 px
„Jedynie margines lewy” to margin-left, nie margin - pozostałe marginesy przycisku zostają domyślne.
styl.css CSS zmienione: 7 linii * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}
aside {
width: 30%;
}
main {
display: flex;
}
img {
width: 90%;
text-align: center;
}
.mebel {
margin: 5px;
padding: 10px;
background-color: LightCoral;
border-radius: 20px;
}
.obraz {
width: 30%;
float: left;
}
.opis {
clear: both;
}
button {
margin-left: 30px;
padding: 20px;
background-color: LightCoral;
border: 2px dotted Maroon;
border-radius: 10px;
}Dla selektora nagłówka drugiego i czwartego stopnia: czcionka pochylona
font-style: italic dla dwóch selektorów znaczników.
styl.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}
aside {
width: 30%;
}
main {
display: flex;
}
img {
width: 90%;
text-align: center;
}
.mebel {
margin: 5px;
padding: 10px;
background-color: LightCoral;
border-radius: 20px;
}
.obraz {
width: 30%;
float: left;
}
.opis {
clear: both;
}
button {
margin-left: 30px;
padding: 20px;
background-color: LightCoral;
border: 2px dotted Maroon;
border-radius: 10px;
}
h2, h4 {
font-style: italic;
}Dodatkowo dla selektora nagłówka drugiego stopnia: wyrównanie tekstu do środka
Osobna reguła dla h2 - „- Sofy -” i „Koszyk” stoją na środku swoich bloków.
styl.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}
aside {
width: 30%;
}
main {
display: flex;
}
img {
width: 90%;
text-align: center;
}
.mebel {
margin: 5px;
padding: 10px;
background-color: LightCoral;
border-radius: 20px;
}
.obraz {
width: 30%;
float: left;
}
.opis {
clear: both;
}
button {
margin-left: 30px;
padding: 20px;
background-color: LightCoral;
border: 2px dotted Maroon;
border-radius: 10px;
}
h2, h4 {
font-style: italic;
}
h2 {
text-align: center;
}Gdy kursor znajdzie się na elemencie z przypisaną klasą mebel, jego kolor tła zmienia się na Coral
Pseudoklasa :hover przy klasie mebel.
styl.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
background-color: MistyRose;
}
header, footer {
text-align: center;
}
section {
width: 70%;
height: 700px;
overflow: scroll;
}
aside {
width: 30%;
}
main {
display: flex;
}
img {
width: 90%;
text-align: center;
}
.mebel {
margin: 5px;
padding: 10px;
background-color: LightCoral;
border-radius: 20px;
}
.obraz {
width: 30%;
float: left;
}
.opis {
clear: both;
}
button {
margin-left: 30px;
padding: 20px;
background-color: LightCoral;
border: 2px dotted Maroon;
border-radius: 10px;
}
h2, h4 {
font-style: italic;
}
h2 {
text-align: center;
}
.mebel:hover {
background-color: Coral;
}Kroki 34-51 · 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 antyki. Na końcu należy zamknąć połączenie z bazą
Pierwszy skrypt na stronie to wariant 1a pod nagłówkiem „- Sofy -” - tam otwierasz połączenie, a uchwyt $connection posłuży wszystkim skryptom. Ostatni jest Skrypt 3 w koszyku, więc tam od razu zapisujesz zamknięcie mysqli_close - kod Skryptu 3 dopiszesz nad nim (R.5.1, R.5.2). Od tego kroku podgląd to wynik prawdziwego uruchomienia strony.
index.php PHP zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
?>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Pierwszy wariant skryptu – 1a – wysyła do bazy danych zapytanie 1
Zapytanie 1 bez zmian - sofy. Kolumny wyniku mają numery w kolejności z SELECT: $row[0] idMeble, [1] nazwa, [2] plik, [3] styl, [4] cena, [5] opis.
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
?>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 34.
Każdy zwrócony zapytaniem wiersz jest wypisywany w osobnym bloku formatowanym klasą mebel, według schematu (ilustracja 5)
Pętla while z mysqli_fetch_row i dla każdej sofy pusty blok <div class="mebel">. Styl czeka w CSS, więc w podglądzie widać trzy różowe paski z zaokrąglonymi rogami. Cudzysłowy atrybutów wewnątrz napisu PHP poprzedzasz ukośnikiem \".
index.php PHP zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Blok obrazu: Formatowany klasą obraz. Wyświetla obraz z pliku o nazwie pobranej z bazy danych i ścieżce dostępu odpowiednio do kategorii: sofy/, fotele/, komody/ oraz tekście alternatywnym „mebel”
W bazie jest sama nazwa pliku (s1.png), a obrazy leżą w folderach - ścieżkę doklejasz przed nazwą: sofy/$row[2]. Blok obrazu ma klasę obraz, więc zajmuje 30% szerokości i pływa po lewej.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Blok informacji wyświetla: W nagłówku trzeciego stopnia nazwę pobraną z bazy danych
Drugi blok (bez klasy) na informacje - stoi obok pływającego obrazu. Pierwsza informacja to nazwa w <h3>.
index.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>W nagłówku czwartego stopnia styl w postaci „styl <styl>”
Stały tekst „styl ” i wartość z bazy w jednym napisie. <h4> dostaje kursywę ze stylu.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>W nagłówku trzeciego stopnia cenę w postaci „CENA: <cena> zł”. Patrz ilustracje 2, 5
Cena jest w bazie liczbą całkowitą (decimal(10,0)), więc wypisuje się bez miejsc po przecinku: „CENA: 1000 zł”, jak na ilustracji 2.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Formularz wysyłający dane do tego samego pliku metodą bezpieczną z jednym przyciskiem „KUP”. Przycisk wysyła dane, ma przypisany atrybut wartości równy polu idMeble z zapytania. Patrz tabela 2.
Każdy mebel ma własny mały formularz method="post" bez action - wysyła dane do tej samej strony. Formularz nie ma pól: przycisk sam niesie wartość. Jak w tabeli 2 arkusza: name="buy" to klucz w $_POST, a value to identyfikator mebla z bazy. Po kliknięciu „KUP” przy brązowej sofie w $_POST["buy"] będzie 1. Zamknięcie </form> stoi zaraz za przyciskiem, jak wymaga klucz.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Blok opisu: Jest formatowany klasą opis. Wyświetla zwrócony z bazy danych opis
Trzeci blok z klasą opis - dzięki clear: both w stylu staje pod obrazem i informacjami. Podgląd pokazuje trzy sofy ułożone jak na ilustracji 2: zdjęcie po lewej, nazwa, styl, cena i przycisk po prawej, opis na dole.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Drugi wariant skryptu – 1b – wysyła do bazy danych zapytanie 1 zmodyfikowane tak, że sprawdzana jest kategoria równa 2
Kopia Skryptu 1a pod nagłówkiem „- Fotele -”, z dwiema zmianami: kategoria = 2 w zapytaniu i folder fotele/ w ścieżce obrazu. Połączenia nie otwierasz drugi raz - $connection z wariantu 1a nadal działa. W podglądzie trzy fotele, w tym czerwony po kadrowaniu.
index.php PHP zmienione: 16 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 2;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"fotele/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Komody -</h2>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Trzeci wariant skryptu – 1c – wysyła do bazy danych zapytanie 1 zmodyfikowane tak, że sprawdzana jest kategoria równa 3
Trzecia kopia: kategoria = 3 i folder komody/. Na stronie jest teraz wszystkie 11 mebli z bazy w trzech kategoriach, każdy z obrazem z właściwego folderu. Trzy prawie identyczne kopie to dużo powtórzeń - w dobrych praktykach zamienisz je na jedną funkcję.
index.php PHP zmienione: 16 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 2;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"fotele/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Komody -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 3;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"komody/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 2 obsługujący dane z formularza: Jeżeli zostały wysłane dane z formularza
Skrypt 2 stoi pod komodami, na końcu sekcji. Przy zwykłym wejściu na stronę $_POST jest pusta, po kliknięciu „KUP” ma klucz buy - to sprawdza isset.
index.php PHP zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 2;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"fotele/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Komody -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 3;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"komody/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<?php
if (isset($_POST["buy"])) {
}
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Wysyła do bazy danych zapytanie 2, zmodyfikowane w ten sposób, że w miejscu identyfikatora mebla zostanie umieszczona wartość atrybutu value z przycisku „KUP” (wciśnięty przycisk przy niebieskim fotelu – identyfikator 9), zostanie przesłana wartość 9. Zakupy są uproszczone – kupuje zawsze klient o identyfikatorze 1, kupowana jest zawsze 1 sztuka
Zapytanie 2, w którym zamiast 6 stoi wartość z przycisku. Klient i liczba sztuk zostają stałe (1 i 1). Podgląd to stan po kliknięciu „KUP” przy niebieskim fotelu: strona wygląda tak samo, ale w tabeli zakupy przybył rekord z idMeble = 9 (sprawdzone zapytaniem po uruchomieniu).
index.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 2;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"fotele/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Komody -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 3;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"komody/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<?php
if (isset($_POST["buy"])) {
$furnitureId = $_POST["buy"];
$query = "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, $furnitureId, 1);";
mysqli_query($connection, $query);
}
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 45.
Skrypt 3: Tworzy listę numerowaną (uporządkowaną)
Lista numerowana to <ol> (ordered list). Znacznik otwierający i zamykający wypisujesz przed pętlą i po niej, żeby elementy <li> trafiły do środka. Od tego kroku podgląd pokazuje stan z ilustracji 6: wcześniej kupiono niebieski fotel i sofę 2-osobową, a teraz kliknięto „KUP” przy barokowej komodzie.
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 2;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"fotele/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Komody -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 3;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"komody/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<?php
if (isset($_POST["buy"])) {
$furnitureId = $_POST["buy"];
$query = "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, $furnitureId, 1);";
mysqli_query($connection, $query);
}
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
echo "<ol>";
echo "</ol>";
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Wysyła do bazy danych zapytanie 3
Zapytanie 3 bez zmian - zakupy klienta 1. Skrypt 2 wykonał się wcześniej (stoi wyżej na stronie), więc właśnie kupiony mebel jest już w wyniku.
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 2;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"fotele/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Komody -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 3;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"komody/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<?php
if (isset($_POST["buy"])) {
$furnitureId = $_POST["buy"];
$query = "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, $furnitureId, 1);";
mysqli_query($connection, $query);
}
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
echo "<ol>";
$query = "SELECT nazwa, cena FROM zakupy JOIN meble USING(idMeble) WHERE idKlienci = 1;";
$result = mysqli_query($connection, $query);
echo "</ol>";
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 47.
Każdy zwrócony zapytaniem wiersz wypisuje jako element listy o treści „<nazwa>, cena: <cena>”, gdzie <> oznacza zwrócone dane.
Każdy zakup to <li>: „Fotel niebieski, cena: 800”, „Sofa 2-osobowa, cena: 1200”, „Barokowa komoda, cena: 4000” - jak na ilustracji 6. Kolejność to kolejność wpisów w zakupy: zapytanie nie ma ORDER BY, a MariaDB przegląda tu tabelę zakupy po kolei (sprawdzone poleceniem EXPLAIN).
index.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 2;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"fotele/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Komody -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 3;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"komody/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<?php
if (isset($_POST["buy"])) {
$furnitureId = $_POST["buy"];
$query = "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, $furnitureId, 1);";
mysqli_query($connection, $query);
}
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
echo "<ol>";
$query = "SELECT nazwa, cena FROM zakupy JOIN meble USING(idMeble) WHERE idKlienci = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0], cena: $row[1]</li>";
}
echo "</ol>";
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt na podstawie zwróconych cen oblicza koszt całkowity koszyka.
Zmienna $total będzie zbierać sumę cen. Nadaj jej 0 przed pętlą - bez tego pierwsze dodawanie odwołałoby się do zmiennej, której jeszcze nie ma.
Bez $total = 0 przed pętlą PHP 8.2 wypisuje ostrzeżenie „Undefined variable $total” - sprawdzone na pustym koszyku, gdzie zamiast „Koszt całkowity: 0” zostaje sam napis bez liczby.
index.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 2;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"fotele/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Komody -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 3;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"komody/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<?php
if (isset($_POST["buy"])) {
$furnitureId = $_POST["buy"];
$query = "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, $furnitureId, 1);";
mysqli_query($connection, $query);
}
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
$total = 0;
echo "<ol>";
$query = "SELECT nazwa, cena FROM zakupy JOIN meble USING(idMeble) WHERE idKlienci = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0], cena: $row[1]</li>";
}
echo "</ol>";
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 49.
Wartość jest wyświetlona pod listą, w postaci „Koszt całkowity: <koszt>” (ilustracja 6). Gdy koszyk jest pusty to koszt całkowity wynosi 0 (ilustracja 2).
W każdym obiegu pętli dodajesz cenę do $total, a po zamknięciu listy wypisujesz akapit z wynikiem: 800 + 1200 + 4000 = 6000, jak na ilustracji 6. Przy pustym koszyku pętla nie wykona się ani razu i zostaje 0 z poprzedniego kroku - sprawdzone na pustej tabeli zakupy (taki stan każe przygotować uwaga w kluczu): „Koszt całkowity: 0”, jak na ilustracji 2.
index.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Fotele -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 2;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"fotele/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<h2>- Komody -</h2>
<?php
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 3;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"komody/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
?>
<?php
if (isset($_POST["buy"])) {
$furnitureId = $_POST["buy"];
$query = "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, $furnitureId, 1);";
mysqli_query($connection, $query);
}
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
$total = 0;
echo "<ol>";
$query = "SELECT nazwa, cena FROM zakupy JOIN meble USING(idMeble) WHERE idKlienci = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0], cena: $row[1]</li>";
$total = $total + $row[1];
}
echo "</ol>";
echo "<p>Koszt całkowity: $total</p>";
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 52-54 · po tym etapie masz 40 z 40 kryteriów (pkt)
Pierwszy wariant skryptu – 1a – wysyła do bazy danych zapytanie 1
Trzy warianty Skryptu 1 różnią się tylko numerem kategorii i nazwą folderu - każdą poprawkę trzeba by wprowadzać trzy razy. Funkcja showFurniture($connection, $category, $folder) zawiera kod raz, a pod każdym nagłówkiem zostaje jedno wywołanie. Przy okazji mysqli_fetch_assoc (pola po nazwach: $furniture["nazwa"] zamiast $row[1]) i htmlspecialchars dla tekstów z bazy. Wersja z egzaminu zostaje w komentarzu. Podgląd pokazuje te same 11 mebli. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
index.php PHP zmienione: 32 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
function showFurniture($connection, $category, $folder) {
$result = mysqli_query($connection, "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = $category;");
while ($furniture = mysqli_fetch_assoc($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"$folder/" . htmlspecialchars($furniture["plik"]) . "\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>" . htmlspecialchars($furniture["nazwa"]) . "</h3>";
echo "<h4>styl " . htmlspecialchars($furniture["styl"]) . "</h4>";
echo "<h3>CENA: " . $furniture["cena"] . " zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"" . $furniture["idMeble"] . "\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">" . htmlspecialchars($furniture["opis"]) . "</div>";
echo "</div>";
}
}
showFurniture($connection, 1, "sofy");
/* Wersja z egzaminu (1a; warianty 1b i 1c różniły się tylko kategorią i folderem):
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
*/
?>
<h2>- Fotele -</h2>
<?php
showFurniture($connection, 2, "fotele");
?>
<h2>- Komody -</h2>
<?php
showFurniture($connection, 3, "komody");
?>
<?php
if (isset($_POST["buy"])) {
$furnitureId = $_POST["buy"];
$query = "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, $furnitureId, 1);";
mysqli_query($connection, $query);
}
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
$total = 0;
echo "<ol>";
$query = "SELECT nazwa, cena FROM zakupy JOIN meble USING(idMeble) WHERE idKlienci = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0], cena: $row[1]</li>";
$total = $total + $row[1];
}
echo "</ol>";
echo "<p>Koszt całkowity: $total</p>";
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Jeżeli zostały wysłane dane z formularza, wysyła do bazy danych zapytanie 2, zmodyfikowane w ten sposób, że w miejscu identyfikatora mebla zostanie umieszczona wartość atrybutu value z przycisku „KUP”
Wartość przycisku jest w kodzie strony, ale żądanie da się wysłać z dowolną wartością. Sprawdzone na wersji z egzaminu: buy=abc daje zapytanie VALUES (1, abc, 1) i stronę urwaną błędem „Uncaught mysqli_sql_exception”, a buy=99 - ten sam błąd z powodu klucza obcego (takiego mebla nie ma). Poprawki: rzutowanie (int), zapytanie przygotowane (mysqli_prepare, ?, mysqli_stmt_bind_param z typem "i") i try/catch z komunikatem zamiast błędu. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
index.php PHP zmienione: 12 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
function showFurniture($connection, $category, $folder) {
$result = mysqli_query($connection, "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = $category;");
while ($furniture = mysqli_fetch_assoc($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"$folder/" . htmlspecialchars($furniture["plik"]) . "\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>" . htmlspecialchars($furniture["nazwa"]) . "</h3>";
echo "<h4>styl " . htmlspecialchars($furniture["styl"]) . "</h4>";
echo "<h3>CENA: " . $furniture["cena"] . " zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"" . $furniture["idMeble"] . "\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">" . htmlspecialchars($furniture["opis"]) . "</div>";
echo "</div>";
}
}
showFurniture($connection, 1, "sofy");
/* Wersja z egzaminu (1a; warianty 1b i 1c różniły się tylko kategorią i folderem):
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
*/
?>
<h2>- Fotele -</h2>
<?php
showFurniture($connection, 2, "fotele");
?>
<h2>- Komody -</h2>
<?php
showFurniture($connection, 3, "komody");
?>
<?php
if (isset($_POST["buy"])) {
$furnitureId = (int) $_POST["buy"];
$statement = mysqli_prepare($connection, "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, ?, 1)");
mysqli_stmt_bind_param($statement, "i", $furnitureId);
try {
mysqli_stmt_execute($statement);
} catch (mysqli_sql_exception $error) {
echo "<p>Nie ma takiego mebla w ofercie.</p>";
}
}
/* Wersja z egzaminu:
if (isset($_POST["buy"])) {
$furnitureId = $_POST["buy"];
$query = "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, $furnitureId, 1);";
mysqli_query($connection, $query);
}
*/
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
$total = 0;
echo "<ol>";
$query = "SELECT nazwa, cena FROM zakupy JOIN meble USING(idMeble) WHERE idKlienci = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0], cena: $row[1]</li>";
$total = $total + $row[1];
}
echo "</ol>";
echo "<p>Koszt całkowity: $total</p>";
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt na podstawie zwróconych cen oblicza koszt całkowity koszyka.
Koszyk z ilustracji 6 pokazuje gołe liczby: „cena: 4000”, „Koszt całkowity: 6000”. W sklepie kwotę podaje się z jednostką i separatorem tysięcy - number_format($total, 0, ",", " ") daje „6 000”, a za liczbą dopisujesz „zł”. Do tego mysqli_fetch_assoc, skrócone dodawanie += i htmlspecialchars dla nazwy. Podgląd: „Koszt całkowity: 6 000 zł”. Na egzaminie wystarczy wersja wcześniejsza - arkusz każe wypisać sam koszt bez jednostki i tak to sprawdza klucz.
index.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sprzedaż antyków</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Najlepsze antyki w mieście</h1>
</header>
<main>
<section>
<h2>- Sofy -</h2>
<?php
$connection = mysqli_connect("localhost", "root", "", "antyki");
function showFurniture($connection, $category, $folder) {
$result = mysqli_query($connection, "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = $category;");
while ($furniture = mysqli_fetch_assoc($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"$folder/" . htmlspecialchars($furniture["plik"]) . "\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>" . htmlspecialchars($furniture["nazwa"]) . "</h3>";
echo "<h4>styl " . htmlspecialchars($furniture["styl"]) . "</h4>";
echo "<h3>CENA: " . $furniture["cena"] . " zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"" . $furniture["idMeble"] . "\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">" . htmlspecialchars($furniture["opis"]) . "</div>";
echo "</div>";
}
}
showFurniture($connection, 1, "sofy");
/* Wersja z egzaminu (1a; warianty 1b i 1c różniły się tylko kategorią i folderem):
$query = "SELECT idMeble, nazwa, plik, styl, cena, opis FROM meble WHERE kategoria = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<div class=\"mebel\">";
echo "<div class=\"obraz\"><img src=\"sofy/$row[2]\" alt=\"mebel\"></div>";
echo "<div>";
echo "<h3>$row[1]</h3>";
echo "<h4>styl $row[3]</h4>";
echo "<h3>CENA: $row[4] zł</h3>";
echo "<form method=\"post\"><button name=\"buy\" value=\"$row[0]\">KUP</button></form>";
echo "</div>";
echo "<div class=\"opis\">$row[5]</div>";
echo "</div>";
}
*/
?>
<h2>- Fotele -</h2>
<?php
showFurniture($connection, 2, "fotele");
?>
<h2>- Komody -</h2>
<?php
showFurniture($connection, 3, "komody");
?>
<?php
if (isset($_POST["buy"])) {
$furnitureId = (int) $_POST["buy"];
$statement = mysqli_prepare($connection, "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, ?, 1)");
mysqli_stmt_bind_param($statement, "i", $furnitureId);
try {
mysqli_stmt_execute($statement);
} catch (mysqli_sql_exception $error) {
echo "<p>Nie ma takiego mebla w ofercie.</p>";
}
}
/* Wersja z egzaminu:
if (isset($_POST["buy"])) {
$furnitureId = $_POST["buy"];
$query = "INSERT INTO zakupy (idKlienci, idMeble, sztuk) VALUES (1, $furnitureId, 1);";
mysqli_query($connection, $query);
}
*/
?>
</section>
<aside>
<h2>Koszyk</h2>
<p>Zalogowano: Anna Kowalska</p>
<?php
$total = 0;
echo "<ol>";
$query = "SELECT nazwa, cena FROM zakupy JOIN meble USING(idMeble) WHERE idKlienci = 1;";
$result = mysqli_query($connection, $query);
while ($item = mysqli_fetch_assoc($result)) {
echo "<li>" . htmlspecialchars($item["nazwa"]) . ", cena: " . number_format($item["cena"], 0, ",", " ") . " zł</li>";
$total += $item["cena"];
}
echo "</ol>";
echo "<p>Koszt całkowity: " . number_format($total, 0, ",", " ") . " zł</p>";
// while ($row = mysqli_fetch_row($result)) { echo "<li>$row[0], cena: $row[1]</li>"; $total = $total + $row[1]; }
mysqli_close($connection);
?>
</aside>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 55 · 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. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.
W folderze z numerem zdającego: trzy foldery z obrazami (sofy, fotele z przerobionym f3.png, komody) oraz import.png, index.php, kw1.png - kw4.png, kwerendy.txt, przeglądarka.txt, styl.css. 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 54.
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.