Rozwiązanie obejmuje bazę hodowla (rasy i świnki morskie z datą urodzenia, miotem, opisem i ceną) z czterema zapytaniami - miesiąc z pola daty, DISTINCT ze złączeniem tabel, warunek na identyfikator rasy i prosty SELECT - potem zdjęcie świnki wykadrowane do 500 × 330 px, stronę peruwianka.php z banerem, menu, blokiem głównym, blokiem prawym i stopką, style w styl.css oraz trzy skrypty PHP: lista numerowana wszystkich ras, dane miotu i opisy świnek z tego miotu. Na końcu powstają dwie kopie strony, american.php i crested.php, które różnią się obrazem i identyfikatorem rasy w zapytaniach.
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 powstają najpierw w najprostszej postaci, funkcjami z tabeli 1 arkusza (mysqli_query, mysqli_fetch_row), a na końcu zostają przerobione na wersję z prawdziwych projektów: identyfikator rasy w jednej zmiennej, zapytania przygotowane, zabezpieczenie tekstów z bazy i komunikat dla rasy bez świnek.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: bloki na siatce CSS, dane pobierane przez PDO z zapytaniami przygotowanymi przed HTML-em, a kopie strony różnią się jedną zmienną - obie wersje są zgodne z kluczem.
Baza i zdjęcia pochodzą z prawdziwego archiwum pliki11 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. Podgląd strony od kroków z PHP to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2 na bazie z arkusza.
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 hodowla, z zestawem polskich znaków (np. utf8_unicode_ci)
Najpierw rozpakowanie pliki11.zip z pulpitu (hasło @Swinki-MorSkie! - małpa na początku, myślnik, wielkie S w środku i wykrzyknik na końcu) do folderu nazwanego numerem zdającego. W phpMyAdmin: Nowa, nazwa hodowla, porównywanie utf8_unicode_ci.
Skrypty łączą się z bazą po nazwie - literówka w nazwie bazy zabiera punkty za całą część PHP (R.5.1).
Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
Zaznacz bazę hodowla, potem Import → baza.sql → Wykonaj. Powstają dwie tabele z obrazu 1: rasy (13 ras) i swinki (data urodzenia, oznaczenie miotu, opis, imię, cena i klucz obcy rasy_id).
Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Print Screen, wklejenie do edytora grafiki i zapis jako import.png. Import idzie do PNG, a zrzuty zapytań do JPEG - i tym razem muszą pokazywać także treść wykonanego zapytania (phpMyAdmin wyświetla ją nad wynikiem).
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie pola imie i miot z tabeli swinki dla świnek morskich urodzonych w lipcu
SELECT imie, miot,FROM swinki,WHERE MONTH(data_ur) = 7 - funkcja MONTH wyciąga z daty numer miesiąca; lipiec to 7.Klucz uznaje też porównanie tekstu daty ze wzorcem, np. data_ur LIKE "%-07-%". Wynik: 3 wiersze - Ed, Tikka, Frania, wszystkie z miotu C4. Zapytania zapisujesz w kwerendy.txt, zrzut z treścią zapytania jako kw1.jpg.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT imie, miot FROM swinki WHERE MONTH(data_ur) = 7;
Zapytanie 2: wybierające niepowtarzające się wiersze z datą urodzenia i miotem z tabeli swinki oraz odpowiadającą im nazwą rasy z tabeli rasy dla id rasy równego 1. Należy posłużyć się relacją
SELECT DISTINCT data_ur, miot, rasa - DISTINCT usuwa powtórzone wiersze („niepowtarzające się”),FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id - złączenie przez relację z obrazu 1, bo nazwa rasy leży w drugiej tabeli,WHERE rasy.id = 1 - rasa peruwianka.Bez DISTINCT wyszłyby 4 identyczne wiersze (cztery świnki z jednego miotu), z nim zostaje dokładnie 1: 2022-06-02, I5, peruwianka. Skrypt 2 wypisze z tego nagłówek z rasą i dane miotu. Zrzut: kw2.jpg.
Bez DISTINCT zrzut pokazuje 4 wiersze - klucz wymaga dokładnie jednego.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, miot FROM swinki WHERE MONTH(data_ur) = 7;
-- Zapytanie 2
SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;
Zapytanie 3: wybierające jedynie imię, cenę i opis świnek morskich, których id rasy jest równe 1
Trzy pola z jednej tabeli i warunek na kluczu obcym rasy_id - złączenie nie jest potrzebne. Wynik: 4 wiersze - Cindy, Wendy, Mała, Lola z długimi opisami. Skrypt 3 zrobi z każdego wiersza nagłówek z imieniem i ceną oraz akapit z opisem. Zrzut: kw3.jpg.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, miot FROM swinki WHERE MONTH(data_ur) = 7;
-- Zapytanie 2
SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;
-- Zapytanie 3
SELECT imie, cena, opis FROM swinki WHERE rasy_id = 1;
Zapytanie 4: wybierające jedynie rasę z tabeli rasy
Jedno pole bez warunku: 13 wierszy, od peruwianki do skinny. Skrypt 1 zrobi z nich listę numerowaną w bloku prawym. Zrzut: kw4.jpg.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, miot FROM swinki WHERE MONTH(data_ur) = 7;
-- Zapytanie 2
SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;
-- Zapytanie 3
SELECT imie, cena, opis FROM swinki WHERE rasy_id = 1;
-- Zapytanie 4
SELECT rasa FROM rasy;
Kroki 8-23 · po tym etapie masz 17 z 40 kryteriów (pkt)
Grafikę crested.jpg, wypakowaną z archiwum, należy skadrować tak, aby rozmiar obrazu po kadrowaniu wynosił dokładnie 500 px szerokości na 330 px wysokości. Na skadrowanym obrazie musi być widoczny pysk zwierzęcia. Przykład kadru zaznaczono czarnym prostokątem na obrazie 3.
Oryginał ma 515 × 640 px. W GIMP-ie narzędzie Kadrowanie z ustawioną stałą wielkością 500 × 330 px; prostokąt przesuwasz tak, by obejmował głowę z uszami - tu od 95 px od góry, jak czarna ramka na obrazie 3. Obraz → Przytnij do zaznaczenia, eksport pod tą samą nazwą. To kadrowanie, nie skalowanie: piksele zostają te same, odcięte są tylko brzegi. Po lewej oryginał z ramką kadru, po prawej wynik.
Przeskalowanie obrazu do 500 × 330 zamiast kadrowania zniekształca proporcje (świnka robi się „spłaszczona”) - kryterium wymaga kadru.
Składa się ze stron o nazwach peruwianka.php, american.php, crested.php zapisanych w języku HTML5
Najpierw jedna strona, peruwianka.php - dwie pozostałe arkusz każe zrobić na końcu, kopiując gotową i przetestowaną stronę. Rozszerzenie .php, bo dojdą skrypty; na egzaminie plik leży w htdocs XAMPP-a i otwierasz go przez http://localhost/....
peruwianka.php PHP nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Ustawiony język zawartości strony na polski
Atrybut lang="pl" w znaczniku <html>.
peruwianka.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>. Z deklaracją HTML5, językiem i sekcjami head i body to jedno kryterium klucza.
peruwianka.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: „Hodowla świnek morskich”
<title> w <head>.
peruwianka.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Nazwa pliku: styl.css. Całe formatowanie ma pochodzić z tego pliku - żadnych atrybutów style w HTML-u (R.3.6).
peruwianka.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na bloki: baner, dwa bloki lewe: blok menu i blok główny, jeden blok prawy, na dole blok stopki. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
Znaczniki semantyczne (R.2.4): baner <header>, menu <nav>, blok główny <main>, blok prawy <aside>, stopka <footer>.
Kolejność w kodzie jest celowa: <aside> stoi przed menu. Blok prawy ma sięgać od menu aż do stopki, a będzie pływał (float: right) - element pływający zaczyna się na wysokości miejsca, w którym stoi w kodzie, więc postawiony za blokiem głównym zacząłby się dopiero na jego wysokości, poniżej menu.
peruwianka.php PHP zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<aside>
</aside>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość banera: nagłówek pierwszego stopnia o treści „Hodowla świnek morskich - zamów świnkowe maluszki”
Nagłówek <h1> z pełną treścią z arkusza.
peruwianka.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
</aside>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość lewego bloku menu: Odnośnik do pliku peruwianka.php, o treści „Rasa Peruwianka”
Odnośnik do tej samej strony - w menu powtarza się na wszystkich trzech stronach, więc z american.php i crested.php będzie prowadził z powrotem do peruwianki.
peruwianka.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Odnośnik do pliku american.php, o treści „Rasa American”. Odnośnik do pliku crested.php, o treści „Rasa Crested”
Dwa kolejne odnośniki w jednym wierszu menu. Plików american.php i crested.php jeszcze nie ma - klucz uznaje odnośnik nawet wtedy (R.3.3), a pliki powstaną na końcu.
peruwianka.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość prawego bloku: Nagłówek trzeciego stopnia o treści: „Poznaj wszystkie rasy świnek morskich”
Nagłówek <h3>.
peruwianka.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Lista numerowana (uporządkowana) wypełniona elementami przez skrypt 1
Lista uporządkowana to <ol> (numeruje elementy sama). Zostaje pusta - elementy <li> wypisze Skrypt 1 z bazy.
peruwianka.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość lewego bloku głównego: Obraz peruwianka.jpg z tekstem alternatywnym: „Świnka morska rasy peruwianka”
<img> ze zdjęciem z archiwum i tekstem alternatywnym. Za obrazem stanie wynik Skryptu 2.
peruwianka.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
</main>
<footer>
</footer>
</body>
</html>Linia pozioma
Linia pozioma to <hr>. W kodzie zostaje miejsce między obrazem a linią na Skrypt 2.
peruwianka.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<hr>
</main>
<footer>
</footer>
</body>
</html>Nagłówek drugiego stopnia o treści: „Świnki w tym miocie”
Nagłówek <h2>; pod nim Skrypt 3 wypisze świnki z miotu.
peruwianka.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<hr>
<h2>Świnki w tym miocie</h2>
</main>
<footer>
</footer>
</body>
</html>Zawartość stopki: Paragraf (akapit) 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. Z nagłówkami h1, h2, h3 to kryterium R.2.5.
peruwianka.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<hr>
<h2>Świnki w tym miocie</h2>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 24-32 · po tym etapie masz 28 z 40 kryteriów (pkt)
Domyślne formatowanie wszystkich selektorów: krój czcionki Helvetica
Selektor uniwersalny *. Arkusz nie podaje kroju zapasowego, więc wystarczy sama nazwa.
styl.css CSS nowy plik * {
font-family: Helvetica;
}Wspólne dla banera i stopki: kolor tła SaddleBrown, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 7 px
Jedna reguła dla dwóch selektorów po przecinku. Marginesy wewnętrzne to padding.
styl.css CSS zmienione: 6 linii * {
font-family: Helvetica;
}
header, footer {
background-color: SaddleBrown;
color: white;
text-align: center;
padding: 7px;
}Dla lewego bloku menu: kolor tła Peru, szerokość 80%, wysokość 40 px, margines wewnętrzny górny 20 px
Tylko górny margines wewnętrzny: padding-top. Razem z wysokością blok menu ma 60 px - to ważne przy układzie, bo 60 + 700 px bloku głównego daje dokładnie 760 px bloku prawego.
styl.css CSS zmienione: 6 linii * {
font-family: Helvetica;
}
header, footer {
background-color: SaddleBrown;
color: white;
text-align: center;
padding: 7px;
}
nav {
background-color: Peru;
width: 80%;
height: 40px;
padding-top: 20px;
}Dla lewego bloku głównego: szerokość 80%, wysokość 700 px, rozmiar czcionki 120%, paski przewijania pojawiające się tylko, gdy tekst nie mieści się w oknie
overflow: auto pokazuje pasek przewijania tylko wtedy, gdy treść jest wyższa niż 700 px (scroll pokazywałby go zawsze - klucz uznaje oba).
styl.css CSS zmienione: 6 linii * {
font-family: Helvetica;
}
header, footer {
background-color: SaddleBrown;
color: white;
text-align: center;
padding: 7px;
}
nav {
background-color: Peru;
width: 80%;
height: 40px;
padding-top: 20px;
}
main {
width: 80%;
height: 700px;
font-size: 120%;
overflow: auto;
}Dla bloku prawego: kolor tła Peru, biały kolor czcionki, szerokość 20%, wysokość 760 px
Ta reguła zamyka kryteria kolorów tła (baner, stopka, menu, prawy - R.4.2), wysokości (R.4.4) i szerokości bloków (R.4.5).
styl.css CSS zmienione: 6 linii * {
font-family: Helvetica;
}
header, footer {
background-color: SaddleBrown;
color: white;
text-align: center;
padding: 7px;
}
nav {
background-color: Peru;
width: 80%;
height: 40px;
padding-top: 20px;
}
main {
width: 80%;
height: 700px;
font-size: 120%;
overflow: auto;
}
aside {
background-color: Peru;
color: white;
width: 20%;
height: 760px;
}Dla selektora odnośnika: kolor czcionki #DDD, margines wewnętrzny lewy 90 px, rozmiar czcionki 140%, brak podkreślenia
Selektor znacznika a - uwaga w arkuszu: styl odnośnika wyłącznie selektorem znacznika. #DDD to skrócony zapis jasnoszarego #DDDDDD, brak podkreślenia - text-decoration: none. Biały tekst (baner, stopka, blok prawy) i #DDD odnośników to razem R.4.3, cechy tekstu - R.4.6.
Reguła nav a albo klasa odnośnika nie spełnia R.4.3 ani R.4.7 - klucz wymaga samego selektora a.
styl.css CSS zmienione: 6 linii * {
font-family: Helvetica;
}
header, footer {
background-color: SaddleBrown;
color: white;
text-align: center;
padding: 7px;
}
nav {
background-color: Peru;
width: 80%;
height: 40px;
padding-top: 20px;
}
main {
width: 80%;
height: 700px;
font-size: 120%;
overflow: auto;
}
aside {
background-color: Peru;
color: white;
width: 20%;
height: 760px;
}
a {
color: #DDD;
padding-left: 90px;
font-size: 140%;
text-decoration: none;
}W momencie gdy kursor znajdzie się na odnośniku, jego kolor czcionki zmienia się na biały
Pseudoklasa :hover - najedź w podglądzie na „Rasa Peruwianka”, jak na obrazie 2.
styl.css CSS zmienione: 3 linie * {
font-family: Helvetica;
}
header, footer {
background-color: SaddleBrown;
color: white;
text-align: center;
padding: 7px;
}
nav {
background-color: Peru;
width: 80%;
height: 40px;
padding-top: 20px;
}
main {
width: 80%;
height: 700px;
font-size: 120%;
overflow: auto;
}
aside {
background-color: Peru;
color: white;
width: 20%;
height: 760px;
}
a {
color: #DDD;
padding-left: 90px;
font-size: 140%;
text-decoration: none;
}
a:hover {
color: white;
}Dla selektora obrazu: opływanie tekstem po prawej stronie (obraz znajduje się po lewej stronie), marginesy zewnętrzne 30 px
Obraz po lewej, tekst po prawej - to float: left. Tekst Skryptów 2 i 3 będzie się układał obok zdjęcia, a gdy zejdzie poniżej, zajmie całą szerokość (jak opis Cindy na obrazie 2). Ta reguła kończy marginesy (R.4.7).
styl.css CSS zmienione: 4 linie * {
font-family: Helvetica;
}
header, footer {
background-color: SaddleBrown;
color: white;
text-align: center;
padding: 7px;
}
nav {
background-color: Peru;
width: 80%;
height: 40px;
padding-top: 20px;
}
main {
width: 80%;
height: 700px;
font-size: 120%;
overflow: auto;
}
aside {
background-color: Peru;
color: white;
width: 20%;
height: 760px;
}
a {
color: #DDD;
padding-left: 90px;
font-size: 140%;
text-decoration: none;
}
a:hover {
color: white;
}
img {
float: left;
margin: 30px;
}Podział strony na bloki: baner, dwa bloki lewe: blok menu i blok główny, jeden blok prawy, na dole blok stopki. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
Blok prawy pływa w prawo (float: right) i - stojąc w kodzie zaraz za banerem - zaczyna się tuż pod nim. Menu i blok główny pływają w lewo i układają się jeden pod drugim w pozostałych 80% szerokości. Stopka z clear: both schodzi pod wszystkie pływające bloki (R.3.1).
Bez clear: both stopka wsuwa się pod bloki pływające i ląduje pod banerem - układ jest niezgodny z obrazem 2.
styl.css CSS zmienione: 9 linii * {
font-family: Helvetica;
}
header, footer {
background-color: SaddleBrown;
color: white;
text-align: center;
padding: 7px;
}
nav {
background-color: Peru;
width: 80%;
height: 40px;
padding-top: 20px;
}
main {
width: 80%;
height: 700px;
font-size: 120%;
overflow: auto;
}
aside {
background-color: Peru;
color: white;
width: 20%;
height: 760px;
}
a {
color: #DDD;
padding-left: 90px;
font-size: 140%;
text-decoration: none;
}
a:hover {
color: white;
}
img {
float: left;
margin: 30px;
}
aside {
float: right;
}
nav, main {
float: left;
}
footer {
clear: both;
}Kroki 33-41 · po tym etapie masz 38 z 40 kryteriów (pkt)
Skrypty łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie hodowla
Pierwszym skryptem w kodzie jest Skrypt 1 w bloku prawym (blok prawy stoi przed blokiem głównym), więc tam otwierasz połączenie: mysqli_connect z czterema argumentami łączy się z serwerem i od razu wybiera bazę. Uchwyt w zmiennej $connection posłuży wszystkim skryptom. Na końcu bloku głównego, w miejscu Skryptu 3, stoi na razie samo zamknięcie - arkusz każe zamknąć połączenie na końcu Skryptu 3, czyli jako ostatnią operację na bazie (R.5.1, R.5.2). Od tego kroku podgląd to wynik prawdziwego uruchomienia strony.
peruwianka.php PHP zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<hr>
<h2>Świnki w tym miocie</h2>
<?php
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 1: Wysyła do bazy danych zapytanie 4
Treść zapytania w zmiennej $query, mysqli_query wysyła ją do bazy, a w $result zostaje wynik do odczytania wiersz po wierszu. Na stronie jeszcze nic nie widać.
peruwianka.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<hr>
<h2>Świnki w tym miocie</h2>
<?php
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 33.
Zwrócone zapytaniem rasy świnek morskich wypisuje jako elementy listy
Pętla while z mysqli_fetch_row wykonuje się tyle razy, ile wierszy zwróciło zapytanie - tu 13 (R.5.9). Każda rasa trafia do <li>, a ponieważ skrypt stoi wewnątrz <ol>, przeglądarka sama je ponumeruje: 1. peruwianka ... 13. skinny. W bazie rasa „ somali” ma spację na początku - w HTML-u nie jest widoczna.
peruwianka.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<hr>
<h2>Świnki w tym miocie</h2>
<?php
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 2: Wysyła do bazy danych zapytanie 2
Skrypt 2 stoi w bloku głównym między zdjęciem a linią poziomą - tam ma pojawić się jego wynik. Połączenie jest już otwarte w Skrypcie 1, więc tylko zapytanie i wynik.
peruwianka.php PHP zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<?php
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;";
$result = mysqli_query($connection, $query);
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Wyświetla dane pobrane z bazy danych, w następujący sposób: W nagłówku drugiego stopnia treść „Rasa: <rasa>”
Dzięki DISTINCT zapytanie zwraca jeden wiersz, więc wystarczy jedno mysqli_fetch_row bez pętli. Pola są w kolejności z SELECT: $row[0] - data, $row[1] - miot, $row[2] - rasa. Obok zdjęcia pojawia się „Rasa: peruwianka”.
peruwianka.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<?php
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>";
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>W paragrafie treść „Data urodzenia: <data-ur>”. W paragrafie treść „Oznaczenie miotu: <miot>”, gdzie dane zapisane w nawiasach <> wybrane zostały z bazy danych
Dwa akapity z tego samego wiersza: data 2022-06-02 (MariaDB zwraca datę w formacie RRRR-MM-DD, tak jak na obrazie 2) i miot I5.
peruwianka.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<?php
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>";
echo "<p>Data urodzenia: $row[0]</p>";
echo "<p>Oznaczenie miotu: $row[1]</p>";
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 3: Wysyła do bazy danych zapytanie 3
Zapytanie 3 przed zamknięciem połączenia - po mysqli_close żadne zapytanie już nie przejdzie.
peruwianka.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<?php
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>";
echo "<p>Data urodzenia: $row[0]</p>";
echo "<p>Oznaczenie miotu: $row[1]</p>";
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 1;";
$result = mysqli_query($connection, $query);
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 38.
Wyświetla dane pobrane z bazy danych, w następujący sposób: W nagłówku trzeciego stopnia treść „<imie> - <cena> zł”
Tym razem wierszy jest kilka, więc pętla. W nagłówku <h3> imię i cena: „Cindy - 200 zł”, „Wendy - 200 zł”, „Mała - 250 zł”, „Lola - 200 zł”.
peruwianka.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<?php
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>";
echo "<p>Data urodzenia: $row[0]</p>";
echo "<p>Oznaczenie miotu: $row[1]</p>";
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<h3>$row[0] - $row[1] zł</h3>";
}
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>W paragrafie zwrócony zapytaniem opis. Na końcu jest zamykane połączenie z serwerem.
Opis w akapicie pod nagłówkiem. Pierwszy opis układa się obok zdjęcia, dalsze - na całej szerokości, a blok główny dostaje pasek przewijania, jak na obrazie 2. Połączenie zamyka ostatnia linia skryptu. Nazwy zmiennych mówią, co przechowują: $connection, $query, $result, $row (R.5.10).
peruwianka.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<?php
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>";
echo "<p>Data urodzenia: $row[0]</p>";
echo "<p>Oznaczenie miotu: $row[1]</p>";
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<h3>$row[0] - $row[1] zł</h3>";
echo "<p>$row[2]</p>";
}
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 42-43 · po tym etapie masz 40 z 40 kryteriów (pkt)
Należy skopiować dwukrotnie dokument peruwianka.php i zmienić nazwy na american.php i crested.php. Zmiany, których należy dokonać w bloku głównym dokumentu american.php (obraz 4): Obraz: źródło american.jpg, tekst alternatywny „Świnka morska rasy american”. Skrypt 2: w zapytaniu 2 należy zmienić warunek zapytania, id rasy jest równe 6. Skrypt 3: w zapytaniu 3 należy zmienić warunek zapytania, id rasy jest równe 6
Kopia gotowej i sprawdzonej strony pod nazwą american.php i cztery zmiany w bloku głównym: plik obrazu, tekst alternatywny oraz 1 → 6 w warunkach zapytań 2 i 3. Menu, blok prawy i stopka zostają bez zmian. Podgląd (prawdziwe uruchomienie): rasa american, miot H4 z 2 czerwca, świnki Crejzy, Biała i Lucy - jak na obrazie 4.
american.php PHP nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="american.jpg" alt="Świnka morska rasy american">
<?php
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 6;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>";
echo "<p>Data urodzenia: $row[0]</p>";
echo "<p>Oznaczenie miotu: $row[1]</p>";
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 6;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<h3>$row[0] - $row[1] zł</h3>";
echo "<p>$row[2]</p>";
}
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Zmiany, których należy dokonać w bloku głównym dokumentu crested.php (obraz 5): Obraz: źródło crested.jpg, tekst alternatywny „Świnka morska rasy crested”. Skrypt 2: w zapytaniu 2 należy zmienić warunek zapytania, id rasy jest równe 7. Skrypt 3: w zapytaniu 3 należy zmienić warunek zapytania, id rasy jest równe 7
Druga kopia, crested.php: wykadrowane wcześniej zdjęcie crested.jpg, jego tekst alternatywny i identyfikator rasy 7 w obu zapytaniach. Podgląd: miot G3 z 30 czerwca, Bąbelek i Lulu po 150 zł - jak na obrazie 5. Teraz wszystkie trzy odnośniki menu prowadzą do istniejących stron.
crested.php PHP nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="crested.jpg" alt="Świnka morska rasy crested">
<?php
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 7;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>";
echo "<p>Data urodzenia: $row[0]</p>";
echo "<p>Oznaczenie miotu: $row[1]</p>";
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 7;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<h3>$row[0] - $row[1] zł</h3>";
echo "<p>$row[2]</p>";
}
mysqli_close($connection);
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 44-45 · po tym etapie masz 40 z 40 kryteriów (pkt)
Skrypt 2: w zapytaniu 2 należy zmienić warunek zapytania, id rasy jest równe 6. Skrypt 3: w zapytaniu 3 należy zmienić warunek zapytania, id rasy jest równe 6
W wersji z egzaminu każda kopia strony różni się w czterech miejscach, a łatwo poprawić jedno zapytanie i zapomnieć o drugim - strona pokaże wtedy rasę american ze świnkami peruwianki. Teraz identyfikator rasy stoi w jednej zmiennej $breedId na początku Skryptu 2, a oba zapytania biorą go przez mysqli_prepare + mysqli_stmt_bind_param. Kopie różnią się już tylko tą linią i obrazem. Przy okazji mysqli_fetch_assoc (pola po nazwach zamiast numerów) i htmlspecialchars przy tekstach z bazy - opis z apostrofem albo znakiem < nie rozbije strony. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
american.php PHP zmienione: 24 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="american.jpg" alt="Świnka morska rasy american">
<?php
$breedId = 6; // american
$statement = mysqli_prepare($connection, "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$litter = mysqli_fetch_assoc(mysqli_stmt_get_result($statement));
if ($litter) {
echo "<h2>Rasa: " . htmlspecialchars($litter["rasa"]) . "</h2>";
echo "<p>Data urodzenia: " . htmlspecialchars($litter["data_ur"]) . "</p>";
echo "<p>Oznaczenie miotu: " . htmlspecialchars($litter["miot"]) . "</p>";
}
/* Wersja z egzaminu:
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 6;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>"; ... */
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$statement = mysqli_prepare($connection, "SELECT imie, cena, opis FROM swinki WHERE rasy_id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$result = mysqli_stmt_get_result($statement);
while ($pig = mysqli_fetch_assoc($result)) {
echo "<h3>" . htmlspecialchars($pig["imie"]) . " - " . $pig["cena"] . " zł</h3>";
echo "<p>" . htmlspecialchars($pig["opis"]) . "</p>";
}
mysqli_close($connection);
/* Wersja z egzaminu:
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 6;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) { echo "<h3>$row[0] - $row[1] zł</h3>"; echo "<p>$row[2]</p>"; }
mysqli_close($connection); */
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>crested.php PHP zmienione: 24 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="crested.jpg" alt="Świnka morska rasy crested">
<?php
$breedId = 7; // crested
$statement = mysqli_prepare($connection, "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$litter = mysqli_fetch_assoc(mysqli_stmt_get_result($statement));
if ($litter) {
echo "<h2>Rasa: " . htmlspecialchars($litter["rasa"]) . "</h2>";
echo "<p>Data urodzenia: " . htmlspecialchars($litter["data_ur"]) . "</p>";
echo "<p>Oznaczenie miotu: " . htmlspecialchars($litter["miot"]) . "</p>";
}
/* Wersja z egzaminu:
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 7;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>"; ... */
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$statement = mysqli_prepare($connection, "SELECT imie, cena, opis FROM swinki WHERE rasy_id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$result = mysqli_stmt_get_result($statement);
while ($pig = mysqli_fetch_assoc($result)) {
echo "<h3>" . htmlspecialchars($pig["imie"]) . " - " . $pig["cena"] . " zł</h3>";
echo "<p>" . htmlspecialchars($pig["opis"]) . "</p>";
}
mysqli_close($connection);
/* Wersja z egzaminu:
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 7;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) { echo "<h3>$row[0] - $row[1] zł</h3>"; echo "<p>$row[2]</p>"; }
mysqli_close($connection); */
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>peruwianka.php PHP zmienione: 24 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<?php
$breedId = 1; // jedyna linia, która różni się w american.php (6) i crested.php (7)
$statement = mysqli_prepare($connection, "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$litter = mysqli_fetch_assoc(mysqli_stmt_get_result($statement));
if ($litter) {
echo "<h2>Rasa: " . htmlspecialchars($litter["rasa"]) . "</h2>";
echo "<p>Data urodzenia: " . htmlspecialchars($litter["data_ur"]) . "</p>";
echo "<p>Oznaczenie miotu: " . htmlspecialchars($litter["miot"]) . "</p>";
}
/* Wersja z egzaminu:
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>"; ... */
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$statement = mysqli_prepare($connection, "SELECT imie, cena, opis FROM swinki WHERE rasy_id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$result = mysqli_stmt_get_result($statement);
while ($pig = mysqli_fetch_assoc($result)) {
echo "<h3>" . htmlspecialchars($pig["imie"]) . " - " . $pig["cena"] . " zł</h3>";
echo "<p>" . htmlspecialchars($pig["opis"]) . "</p>";
}
mysqli_close($connection);
/* Wersja z egzaminu:
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) { echo "<h3>$row[0] - $row[1] zł</h3>"; echo "<p>$row[2]</p>"; }
mysqli_close($connection); */
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 2: Wysyła do bazy danych zapytanie 2. Skrypt 3: Wysyła do bazy danych zapytanie 3
Sprawdzone na prawdziwej bazie: wersja z egzaminu z identyfikatorem rasy 2 (szetlandzka - w tabeli swinki nie ma żadnej) wypisuje pusty nagłówek „Rasa: ”, puste akapity i ostrzeżenie PHP „Trying to access array offset on value of type null”, bo mysqli_fetch_row zwraca null. Teraz Skrypt 2 sprawdza, czy wiersz istnieje, a Skrypt 3 liczy wiersze (mysqli_num_rows, tabela 1 arkusza) i wypisuje komunikat zamiast pustej sekcji. Przy rasach 1, 6 i 7 strona wygląda tak samo jak wcześniej. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
american.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="american.jpg" alt="Świnka morska rasy american">
<?php
$breedId = 6; // american
$statement = mysqli_prepare($connection, "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$litter = mysqli_fetch_assoc(mysqli_stmt_get_result($statement));
if ($litter) {
echo "<h2>Rasa: " . htmlspecialchars($litter["rasa"]) . "</h2>";
echo "<p>Data urodzenia: " . htmlspecialchars($litter["data_ur"]) . "</p>";
echo "<p>Oznaczenie miotu: " . htmlspecialchars($litter["miot"]) . "</p>";
} else {
echo "<h2>Brak miotu tej rasy</h2>";
}
/* Wersja z egzaminu:
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 6;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>"; ... */
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$statement = mysqli_prepare($connection, "SELECT imie, cena, opis FROM swinki WHERE rasy_id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$result = mysqli_stmt_get_result($statement);
if (mysqli_num_rows($result) == 0) {
echo "<p>W tej chwili nie ma świnek tej rasy na sprzedaż.</p>";
}
while ($pig = mysqli_fetch_assoc($result)) {
echo "<h3>" . htmlspecialchars($pig["imie"]) . " - " . $pig["cena"] . " zł</h3>";
echo "<p>" . htmlspecialchars($pig["opis"]) . "</p>";
}
mysqli_close($connection);
/* Wersja z egzaminu:
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 6;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) { echo "<h3>$row[0] - $row[1] zł</h3>"; echo "<p>$row[2]</p>"; }
mysqli_close($connection); */
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>crested.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="crested.jpg" alt="Świnka morska rasy crested">
<?php
$breedId = 7; // crested
$statement = mysqli_prepare($connection, "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$litter = mysqli_fetch_assoc(mysqli_stmt_get_result($statement));
if ($litter) {
echo "<h2>Rasa: " . htmlspecialchars($litter["rasa"]) . "</h2>";
echo "<p>Data urodzenia: " . htmlspecialchars($litter["data_ur"]) . "</p>";
echo "<p>Oznaczenie miotu: " . htmlspecialchars($litter["miot"]) . "</p>";
} else {
echo "<h2>Brak miotu tej rasy</h2>";
}
/* Wersja z egzaminu:
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 7;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>"; ... */
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$statement = mysqli_prepare($connection, "SELECT imie, cena, opis FROM swinki WHERE rasy_id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$result = mysqli_stmt_get_result($statement);
if (mysqli_num_rows($result) == 0) {
echo "<p>W tej chwili nie ma świnek tej rasy na sprzedaż.</p>";
}
while ($pig = mysqli_fetch_assoc($result)) {
echo "<h3>" . htmlspecialchars($pig["imie"]) . " - " . $pig["cena"] . " zł</h3>";
echo "<p>" . htmlspecialchars($pig["opis"]) . "</p>";
}
mysqli_close($connection);
/* Wersja z egzaminu:
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 7;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) { echo "<h3>$row[0] - $row[1] zł</h3>"; echo "<p>$row[2]</p>"; }
mysqli_close($connection); */
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>peruwianka.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Hodowla świnek morskich</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Hodowla świnek morskich - zamów świnkowe maluszki</h1>
</header>
<aside>
<h3>Poznaj wszystkie rasy świnek morskich</h3>
<ol>
<?php
$connection = mysqli_connect("localhost", "root", "", "hodowla");
$query = "SELECT rasa FROM rasy;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<li>$row[0]</li>";
}
?>
</ol>
</aside>
<nav>
<a href="peruwianka.php">Rasa Peruwianka</a>
<a href="american.php">Rasa American</a>
<a href="crested.php">Rasa Crested</a>
</nav>
<main>
<img src="peruwianka.jpg" alt="Świnka morska rasy peruwianka">
<?php
$breedId = 1; // jedyna linia, która różni się w american.php (6) i crested.php (7)
$statement = mysqli_prepare($connection, "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$litter = mysqli_fetch_assoc(mysqli_stmt_get_result($statement));
if ($litter) {
echo "<h2>Rasa: " . htmlspecialchars($litter["rasa"]) . "</h2>";
echo "<p>Data urodzenia: " . htmlspecialchars($litter["data_ur"]) . "</p>";
echo "<p>Oznaczenie miotu: " . htmlspecialchars($litter["miot"]) . "</p>";
} else {
echo "<h2>Brak miotu tej rasy</h2>";
}
/* Wersja z egzaminu:
$query = "SELECT DISTINCT data_ur, miot, rasa FROM swinki JOIN rasy ON swinki.rasy_id = rasy.id WHERE rasy.id = 1;";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_row($result);
echo "<h2>Rasa: $row[2]</h2>"; ... */
?>
<hr>
<h2>Świnki w tym miocie</h2>
<?php
$statement = mysqli_prepare($connection, "SELECT imie, cena, opis FROM swinki WHERE rasy_id = ?");
mysqli_stmt_bind_param($statement, "i", $breedId);
mysqli_stmt_execute($statement);
$result = mysqli_stmt_get_result($statement);
if (mysqli_num_rows($result) == 0) {
echo "<p>W tej chwili nie ma świnek tej rasy na sprzedaż.</p>";
}
while ($pig = mysqli_fetch_assoc($result)) {
echo "<h3>" . htmlspecialchars($pig["imie"]) . " - " . $pig["cena"] . " zł</h3>";
echo "<p>" . htmlspecialchars($pig["opis"]) . "</p>";
}
mysqli_close($connection);
/* Wersja z egzaminu:
$query = "SELECT imie, cena, opis FROM swinki WHERE rasy_id = 1;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) { echo "<h3>$row[0] - $row[1] zł</h3>"; echo "<p>$row[2]</p>"; }
mysqli_close($connection); */
?>
</main>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 44.
Krok 46 · po tym etapie masz 40 z 40 kryteriów (pkt)
UWAGA: 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 sprawdzana była strona.
W folderze z numerem zdającego: american.jpg, american.php, crested.jpg, crested.php, import.png, kw1.jpg - kw4.jpg, kwerendy.txt, peruwianka.jpg, peruwianka.php, przeglądarka.txt, styl.css. Po nagraniu płyty 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 44.
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.