Rozwiązanie buduje stronę konkursu szkolnego koła wolontariatu, która losuje nagrody: baza konkurs z jedną tabelą nagrody i cztery zapytania - losowanie (ORDER BY RAND()), przedział z warunkiem (BETWEEN i AND), usuwanie DELETE z warunkiem na brak wartości (IS NULL) i filtr dat z sortowaniem, potem puchar z przezroczystym tłem i cieniem, strona konkurs.php z tabelą pięciu losowych nagród i przyciskiem „Losuj nowe nagrody” oraz style w styles.css. Jeden skrypt PHP wypełnia tabelę i sam numeruje wiersze.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest najpierw pisany najprościej (mysqli_query, mysqli_fetch_row), a na końcu zostaje przerobiony na wersję z prawdziwych projektów.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: bloki na siatce CSS, kolory w zmiennych i PHP na PDO z danymi pobranymi przed HTML-em, z ceną po polsku i obsługą nagród bez ceny - obie wersje są zgodne z kluczem.
Baza i grafika pochodzą z prawdziwego archiwum pliki2 (załącznik do arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP. Podgląd strony to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2. Jedyna podmiana dotyczy losowania: żeby podgląd był zawsze taki sam, na czas uruchomienia zamiast pięciu losowych nagród wybrane są te z ilustracji 2, w tej samej kolejności.
Jak liczą się punkty. Klucz ma 37 kryteriów (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 28 punktów - można stracić 9 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 6 z 37 kryteriów (pkt)
Utwórz bazę danych o nazwie konkurs, z zestawem polskich znaków (np. utf8_unicode_ci).
Rozpakuj pliki2.7z z pulpitu (hasło ^WolonTari@t) do folderu z numerem zdającego: baza.sql i puchar.bmp. W phpMyAdmin: Nowa, nazwa konkurs, porównywanie np. utf8_unicode_ci.
Z rozpakowanego archiwum zaimportuj tabelę z pliku baza.sql do utworzonej bazy.
Import → baza.sql. Tabela nagrody z ilustracji 1: 25 nagród z nazwą, opisem, ceną (decimal(19,2) - liczba z dwoma miejscami po przecinku), liczbą sztuk i datą dodania.
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 i zapis jako import.png - na zrzucie komunikat phpMyAdmin o udanym imporcie albo tabela nagrody w drzewku bazy.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające losowo dokładnie pięć rekordów z tabeli nagrody zawierających jedynie pola nazwa, opis i cena.
Zapytanie czytasz klauzula po klauzuli:
SELECT nazwa, opis, cena - tylko trzy kolumny,FROM nagrody - z jedynej tabeli bazy,ORDER BY RAND() - każdy wiersz dostaje losową liczbę i tabela jest po niej sortowana, czyli tasowana,LIMIT 5 - z potasowanej tabeli bierzesz pięć pierwszych wierszy.Każde wykonanie daje inne nagrody - klucz to przewiduje („5 dowolnych rekordów”). Zapytanie do kwerendy.txt, zrzut kw1.png. To zapytanie wyśle skrypt na stronie.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT nazwa, opis, cena FROM nagrody ORDER BY RAND() LIMIT 5;
Zapytanie 2: wybierające wszystkie pola z tabeli nagrody, dla których cena mieści się w przedziale <100, 1000>, oraz których ilość jest równa 2 sztuki.
SELECT * - „wszystkie pola”,cena BETWEEN 100 AND 1000 - przedział domknięty z obu stron: nawiasy ostre <100, 1000> w zapisie przedziału oznaczają, że 100 i 1000 też się mieszczą, a BETWEEN właśnie tak działa (to samo co cena >= 100 AND cena <= 1000),AND ilosc_sztuk = 2 - oba warunki muszą być spełnione naraz.Wynik: dwie nagrody o id 7 i 14 (głośnik BIASS 3000 i słuchawki EEAR), jak w kluczu. Zrzut: kw2.png.
cena > 100 AND cena < 1000 pomija granice przedziału - przy cenie dokładnie 100 albo 1000 zł wynik różniłby się od wymaganego.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, opis, cena FROM nagrody ORDER BY RAND() LIMIT 5;
-- Zapytanie 2
SELECT * FROM nagrody WHERE cena BETWEEN 100 AND 1000 AND ilosc_sztuk = 2;
Zapytanie 3: usuwające te rekordy, w których cena nie została wpisana lub wynosi 0 zł.
DELETE FROM nagrody - usuwasz całe wiersze tabeli,cena IS NULL - „cena nie została wpisana”: brak wartości to w SQL NULL, a z NULL nie da się porównać znakiem = - służy do tego IS NULL,OR cena = 0 - albo cena wynosi zero.phpMyAdmin pokazuje komunikat o liczbie usuniętych wierszy - tu 5: Zatyczki do uszu (0,00 zł), Skarpety ALPAKA (brak ceny), Maszynka MEAT (brak ceny), Żelazko SLIDER (brak ceny), Puzzle 1000 Zgierz (brak ceny). Zostaje 20 nagród. Zrzut: kw3.png.
WHERE cena = NULL nie usuwa niczego - porównanie z NULL nigdy nie jest prawdziwe. Samo cena = 0 usunie tylko jeden rekord zamiast pięciu.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, opis, cena FROM nagrody ORDER BY RAND() LIMIT 5;
-- Zapytanie 2
SELECT * FROM nagrody WHERE cena BETWEEN 100 AND 1000 AND ilosc_sztuk = 2;
-- Zapytanie 3
DELETE FROM nagrody WHERE cena IS NULL OR cena = 0;
Zapytanie 4: wybierające jedynie nazwę, cenę i datę dodania nagród, które zostały dodane w sierpniu 2021 roku. Wyniki powinny być posortowane rosnąco według daty.
WHERE data_dodania LIKE '2021-08-%' - data jest zapisana jako RRRR-MM-DD, więc „sierpień 2021” to każda data zaczynająca się od 2021-08-; znak % zastępuje dowolną resztę,ORDER BY data_dodania ASC - rosnąco, od najwcześniejszej (ASC można pominąć - to domyślny kierunek).Wynik zależy od tego, czy wcześniej wykonano zapytanie 3: przed nim 14 nagród, po nim 10 - klucz przyjmuje oba warianty. Zrzut: kw4.png (po zapytaniu 3). Działa też YEAR(data_dodania) = 2021 AND MONTH(data_dodania) = 8 albo BETWEEN '2021-08-01' AND '2021-08-31'.
Samo MONTH(data_dodania) = 8 łapie sierpień z każdego roku - arkusz wymaga sierpnia 2021.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, opis, cena FROM nagrody ORDER BY RAND() LIMIT 5;
-- Zapytanie 2
SELECT * FROM nagrody WHERE cena BETWEEN 100 AND 1000 AND ilosc_sztuk = 2;
-- Zapytanie 3
DELETE FROM nagrody WHERE cena IS NULL OR cena = 0;
-- Zapytanie 4
SELECT nazwa, cena, data_dodania FROM nagrody WHERE data_dodania LIKE '2021-08-%' ORDER BY data_dodania ASC;
Kroki 8-22 · po tym etapie masz 18 z 37 kryteriów (pkt)
Cechy grafiki: Nazwa pliku puchar.png. Tło przezroczyste. Puchar rzuca cień przesunięty jednocześnie w prawo i w dół. Przeskalowana do rozmiaru 260 px na 260 px.
W GIMP-ie, na puchar.bmp:
Ujemne przesunięcie cienia (w lewo lub w górę) nie spełnia R.2.1. Eksport do JPG traci przezroczystość.
Cechy witryny: Składa się ze strony o nazwie konkurs.php. Zapisana w języku HTML5.
Jedna strona, konkurs.php, zaczyna się deklaracją <!DOCTYPE html>. Dopóki nie ma w niej kodu PHP, podgląd pokazuje ją wprost.
konkurs.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>.
konkurs.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>.
konkurs.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony „WOLONTARIAT SZKOLNY” widoczny na karcie przeglądarki.
<title> w <head> - tekst na karcie przeglądarki, nie na stronie.
konkurs.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styles.css prawidłowo połączony z kodem strony.
<link rel="stylesheet"> - uwaga na nazwę: styles.css, z „s” na końcu.
style.css albo styl.css (jak w innych arkuszach) odcina wszystkie style, a razem z nimi kryterium R.3.2.
konkurs.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy, poniżej lewy i prawy, na dole blok stopki. Podział zrealizowany za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 2.
<header> na nagłówek, dwie <section> z identyfikatorami left i right na bloki boczne, <footer> na stopkę. Ustawienie bloków obok siebie zrobisz w CSS.
konkurs.php PHP zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
</header>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: Nagłówek pierwszego stopnia o treści: „KONKURS - WOLONTARIAT SZKOLNY”.
<h1>.
konkurs.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku lewego: Nagłówek trzeciego stopnia o treści: „Konkursowe nagrody”.
<h3>.
konkurs.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Przycisk o treści „Losuj nowe nagrody”, jego wybranie przeładowuje stronę.
Najprostszy sposób bez JavaScriptu: formularz bez atrybutów i przycisk type="submit". Formularz bez action wysyła się pod adres tej samej strony, a bez method - metodą GET, czyli przeglądarka po prostu pobiera konkurs.php jeszcze raz. Serwer ponownie wykonuje skrypt PHP, a ten losuje nowe nagrody.
Działa też <button onclick="location.reload()"> - klucz sprawdza tylko, czy kliknięcie przeładowuje stronę.
konkurs.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Tabela o czterech kolumnach, z wierszem nagłówkowym o komórkach: „Nr”, „Nazwa”, „Opis”, „Wartość”. Wypełniona przez skrypt.
Pierwszy wiersz z czterema <th>. Kolumna „Nr” nie ma odpowiednika w bazie - numer policzy skrypt, a „Wartość” to cena z bazy. Pozostałe wiersze dopisze skrypt.
konkurs.php PHP zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
<tr>
<th>Nr</th>
<th>Nazwa</th>
<th>Opis</th>
<th>Wartość</th>
</tr>
</table>
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku prawego: Grafika puchar.png z tekstem alternatywnym o treści: „Puchar dla wolontariusza”.
Obraz z atrybutem alt.
konkurs.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
<tr>
<th>Nr</th>
<th>Nazwa</th>
<th>Opis</th>
<th>Wartość</th>
</tr>
</table>
</section>
<section id="right">
<img src="puchar.png" alt="Puchar dla wolontariusza">
</section>
<footer>
</footer>
</body>
</html>Nagłówek czwartego stopnia o treści: „Polecane linki”.
<h4> pod obrazem.
konkurs.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
<tr>
<th>Nr</th>
<th>Nazwa</th>
<th>Opis</th>
<th>Wartość</th>
</tr>
</table>
</section>
<section id="right">
<img src="puchar.png" alt="Puchar dla wolontariusza">
<h4>Polecane linki</h4>
</section>
<footer>
</footer>
</body>
</html>Lista punktowana (nieuporządkowana), której poszczególne elementy: „Kwerenda1”, „Kwerenda2”, „Kwerenda3”, „Kwerenda4” są odnośnikami do plików zawierających zrzuty ekranu wykonanych kwerend.
<ul> z czterema <li>, a w każdym <a> do zrzutu. Zrzuty kw1.png - kw4.png leżą w tym samym folderze co strona, więc w href wystarczy sama nazwa pliku - kliknięcie otworzy obraz w przeglądarce. W podglądzie kliknięcia są zablokowane.
konkurs.php PHP zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
<tr>
<th>Nr</th>
<th>Nazwa</th>
<th>Opis</th>
<th>Wartość</th>
</tr>
</table>
</section>
<section id="right">
<img src="puchar.png" alt="Puchar dla wolontariusza">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">Kwerenda1</a></li>
<li><a href="kw2.png">Kwerenda2</a></li>
<li><a href="kw3.png">Kwerenda3</a></li>
<li><a href="kw4.png">Kwerenda4</a></li>
</ul>
</section>
<footer>
</footer>
</body>
</html>Zawartość stopki: paragraf o treści „Numer zdającego: ”, dalej wstawiony numer zdającego.
Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL); tu - autor rozwiązania.
konkurs.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
<tr>
<th>Nr</th>
<th>Nazwa</th>
<th>Opis</th>
<th>Wartość</th>
</tr>
</table>
</section>
<section id="right">
<img src="puchar.png" alt="Puchar dla wolontariusza">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">Kwerenda1</a></li>
<li><a href="kw2.png">Kwerenda2</a></li>
<li><a href="kw3.png">Kwerenda3</a></li>
<li><a href="kw4.png">Kwerenda4</a></li>
</ul>
</section>
<footer>
<p>Numer zdającego: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 23-34 · po tym etapie masz 29 z 37 kryteriów (pkt)
Dla ciała strony: krój czcionki Verdana, wyrównanie tekstu do środka, marginesy wewnętrzne górny i dolny 0, prawy i lewy 3%.
Skrót padding z dwiema wartościami: pierwsza to góra i dół, druga - prawa i lewa strona, czyli padding: 0 3%. Procent liczy się od szerokości okna, więc strona ma po bokach wąskie pasy.
styles.css CSS nowy plik body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}Dla bloku nagłówkowego: kolor tła #FDFAAA, kolor czcionki #5BBB77, marginesy wewnętrzne 10 px, cień tekstu o cechach: przesunięcie w poziomie i pionie: 5 px, promień rozmycia: 10 px, czarny kolor cienia.
text-shadow przyjmuje wartości w kolejności z tabeli 2 arkusza: przesunięcie poziome, pionowe, promień rozmycia, kolor - 5px 5px 10px black.
styles.css CSS zmienione: 6 linii body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}Dla bloku lewego: kolor tła #FFA6A6, szerokość 79%, wysokość 600 px, marginesy zewnętrzne górny i dolny 15 px, prawy i lewy 0, cień bloku o cechach: przesunięcie w poziomie 5 px, w pionie 6 px, promień rozmycia: 10 px, kolor czarny.
margin: 15px 0 - ten sam skrót co przy padding: góra i dół 15 px, boki 0. box-shadow - cień całego bloku, wartości jak w tabeli 2: 5px 6px 10px black. Selektor #left - z krzyżykiem, bo w HTML użyto id.
.left (kropka) przy id="left" nie trafia w blok - klucz odbiera wtedy także R.3.2 („źle przypisany selektor”).
styles.css CSS zmienione: 7 linii body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}
#left {
background-color: #FFA6A6;
width: 79%;
height: 600px;
margin: 15px 0;
box-shadow: 5px 6px 10px black;
}Dla bloku prawego: tło będące gradientem liniowym od koloru #FDFAAA do koloru #5BBB77, szerokość 20%, wysokość 630 px.
linear-gradient to obraz tła, więc zapisujesz go we właściwości background (albo background-image), nie background-color. Bez kierunku gradient biegnie z góry na dół - od żółtego do zielonego, jak na ilustracji 2. Wysokość 630 px = 600 px bloku lewego + jego marginesy 2 × 15 px, dlatego oba bloki kończą się równo.
background-color: linear-gradient(...) jest błędne - przeglądarka zignoruje całą deklarację.
styles.css CSS zmienione: 5 linii body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}
#left {
background-color: #FFA6A6;
width: 79%;
height: 600px;
margin: 15px 0;
box-shadow: 5px 6px 10px black;
}
#right {
background: linear-gradient(#FDFAAA, #5BBB77);
width: 20%;
height: 630px;
}Dla bloku stopki: kolor tła #5BBB77, kolor czcionki #FFF555, czcionka pogrubiona w rozmiarze 120%, marginesy wewnętrzne 15 px.
Pogrubienie to font-weight: bold.
styles.css CSS zmienione: 7 linii body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}
#left {
background-color: #FFA6A6;
width: 79%;
height: 600px;
margin: 15px 0;
box-shadow: 5px 6px 10px black;
}
#right {
background: linear-gradient(#FDFAAA, #5BBB77);
width: 20%;
height: 630px;
}
footer {
background-color: #5BBB77;
color: #FFF555;
font-weight: bold;
font-size: 120%;
padding: 15px;
}Dla selektora tabeli: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość: 80%.
margin: auto - przeglądarka dzieli wolne miejsce po równo na lewy i prawy margines, więc tabela stoi na środku bloku. Selektor znacznika table, jak wymaga arkusz.
styles.css CSS zmienione: 4 linie body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}
#left {
background-color: #FFA6A6;
width: 79%;
height: 600px;
margin: 15px 0;
box-shadow: 5px 6px 10px black;
}
#right {
background: linear-gradient(#FDFAAA, #5BBB77);
width: 20%;
height: 630px;
}
footer {
background-color: #5BBB77;
color: #FFF555;
font-weight: bold;
font-size: 120%;
padding: 15px;
}
table {
margin: auto;
width: 80%;
}Dla komórek nagłówkowych tabeli: kolor tła #5BBB77, rozmiar czcionki 16 px, wysokość komórki 40 px.
Selektor th - komórki pierwszego wiersza.
styles.css CSS zmienione: 5 linii body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}
#left {
background-color: #FFA6A6;
width: 79%;
height: 600px;
margin: 15px 0;
box-shadow: 5px 6px 10px black;
}
#right {
background: linear-gradient(#FDFAAA, #5BBB77);
width: 20%;
height: 630px;
}
footer {
background-color: #5BBB77;
color: #FFF555;
font-weight: bold;
font-size: 120%;
padding: 15px;
}
table {
margin: auto;
width: 80%;
}
th {
background-color: #5BBB77;
font-size: 16px;
height: 40px;
}Dla parzystych wierszy tabeli: kolor tła #FDFAAA.
Pseudoklasa :nth-child(even) wybiera co drugi wiersz - drugi, czwarty, szósty. Wiersz nagłówkowy jest pierwszy, więc żółte tło dostają pierwsza, trzecia i piąta nagroda, a druga i czwarta mają różowe tło bloku - dokładnie jak na ilustracji 2.
styles.css CSS zmienione: 3 linie body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}
#left {
background-color: #FFA6A6;
width: 79%;
height: 600px;
margin: 15px 0;
box-shadow: 5px 6px 10px black;
}
#right {
background: linear-gradient(#FDFAAA, #5BBB77);
width: 20%;
height: 630px;
}
footer {
background-color: #5BBB77;
color: #FFF555;
font-weight: bold;
font-size: 120%;
padding: 15px;
}
table {
margin: auto;
width: 80%;
}
th {
background-color: #5BBB77;
font-size: 16px;
height: 40px;
}
tr:nth-child(even) {
background-color: #FDFAAA;
}Dla selektora listy punktowanej: typ punktora kwadrat, interlinia 1.5.
Selektor znacznika ul. Punktor kwadrat to square, interlinia 1.5 to line-height: 1.5 (bez jednostki - półtora rozmiaru czcionki).
Styl listy zapisany dla klasy albo przez #right ul nie spełnia R.4.4 - klucz uznaje tylko selektor znacznika.
styles.css CSS zmienione: 4 linie body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}
#left {
background-color: #FFA6A6;
width: 79%;
height: 600px;
margin: 15px 0;
box-shadow: 5px 6px 10px black;
}
#right {
background: linear-gradient(#FDFAAA, #5BBB77);
width: 20%;
height: 630px;
}
footer {
background-color: #5BBB77;
color: #FFF555;
font-weight: bold;
font-size: 120%;
padding: 15px;
}
table {
margin: auto;
width: 80%;
}
th {
background-color: #5BBB77;
font-size: 16px;
height: 40px;
}
tr:nth-child(even) {
background-color: #FDFAAA;
}
ul {
list-style-type: square;
line-height: 1.5;
}Dla selektora odnośnika: kolor czcionki #680808.
Selektor a.
styles.css CSS zmienione: 3 linie body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}
#left {
background-color: #FFA6A6;
width: 79%;
height: 600px;
margin: 15px 0;
box-shadow: 5px 6px 10px black;
}
#right {
background: linear-gradient(#FDFAAA, #5BBB77);
width: 20%;
height: 630px;
}
footer {
background-color: #5BBB77;
color: #FFF555;
font-weight: bold;
font-size: 120%;
padding: 15px;
}
table {
margin: auto;
width: 80%;
}
th {
background-color: #5BBB77;
font-size: 16px;
height: 40px;
}
tr:nth-child(even) {
background-color: #FDFAAA;
}
ul {
list-style-type: square;
line-height: 1.5;
}
a {
color: #680808;
}Dla selektora nagłówka czwartego stopnia: zielony kolor czcionki.
Nazwa koloru green.
styles.css CSS zmienione: 3 linie body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}
#left {
background-color: #FFA6A6;
width: 79%;
height: 600px;
margin: 15px 0;
box-shadow: 5px 6px 10px black;
}
#right {
background: linear-gradient(#FDFAAA, #5BBB77);
width: 20%;
height: 630px;
}
footer {
background-color: #5BBB77;
color: #FFF555;
font-weight: bold;
font-size: 120%;
padding: 15px;
}
table {
margin: auto;
width: 80%;
}
th {
background-color: #5BBB77;
font-size: 16px;
height: 40px;
}
tr:nth-child(even) {
background-color: #FDFAAA;
}
ul {
list-style-type: square;
line-height: 1.5;
}
a {
color: #680808;
}
h4 {
color: green;
}Podział strony na bloki: nagłówkowy, poniżej lewy i prawy, na dole blok stopki, tak aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 2.
float: left dla obu sekcji ustawia je obok siebie (79% + 20% = 99% - zostaje 1% zapasu), a clear: both w stopce sprowadza ją pod oba bloki.
Dodatkowy padding albo border dla sekcji powiększa ich szerokość ponad 100% - blok prawy spada pod lewy.
styles.css CSS zmienione: 6 linii body {
font-family: Verdana;
text-align: center;
padding: 0 3%;
}
header {
background-color: #FDFAAA;
color: #5BBB77;
padding: 10px;
text-shadow: 5px 5px 10px black;
}
#left {
background-color: #FFA6A6;
width: 79%;
height: 600px;
margin: 15px 0;
box-shadow: 5px 6px 10px black;
}
#right {
background: linear-gradient(#FDFAAA, #5BBB77);
width: 20%;
height: 630px;
}
footer {
background-color: #5BBB77;
color: #FFF555;
font-weight: bold;
font-size: 120%;
padding: 15px;
}
table {
margin: auto;
width: 80%;
}
th {
background-color: #5BBB77;
font-size: 16px;
height: 40px;
}
tr:nth-child(even) {
background-color: #FDFAAA;
}
ul {
list-style-type: square;
line-height: 1.5;
}
a {
color: #680808;
}
h4 {
color: green;
}
section {
float: left;
}
footer {
clear: both;
}Kroki 35-38 · po tym etapie masz 37 z 37 kryteriów (pkt)
Łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie konkurs. Na końcu zamykane jest połączenie z serwerem.
Skrypt stoi w tabeli, pod wierszem nagłówkowym - tam, gdzie mają się pojawić wiersze z nagrodami. Na razie dwie linie: mysqli_connect z serwerem localhost, użytkownikiem root, pustym hasłem i bazą konkurs oraz mysqli_close - zamknięcie połączenia, które zostanie ostatnią instrukcją skryptu. Kolejne linie dopisujesz między nimi.
Podgląd jest już wynikiem uruchomienia strony: skrypt jeszcze niczego nie wypisuje.
konkurs.php PHP zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
<tr>
<th>Nr</th>
<th>Nazwa</th>
<th>Opis</th>
<th>Wartość</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "konkurs");
mysqli_close($connection);
?>
</table>
</section>
<section id="right">
<img src="puchar.png" alt="Puchar dla wolontariusza">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">Kwerenda1</a></li>
<li><a href="kw2.png">Kwerenda2</a></li>
<li><a href="kw3.png">Kwerenda3</a></li>
<li><a href="kw4.png">Kwerenda4</a></li>
</ul>
</section>
<footer>
<p>Numer zdającego: Bartosz Bryniarski</p>
</footer>
</body>
</html>Wysyła do bazy danych zapytanie 1.
Zapytanie 1 w zmiennej $query i mysqli_query - wynik (jeszcze nie wiersze, tylko „uchwyt” do nich) trafia do $result. Na stronie nic się nie zmienia: wiersze trzeba dopiero pobrać i wypisać.
konkurs.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
<tr>
<th>Nr</th>
<th>Nazwa</th>
<th>Opis</th>
<th>Wartość</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "konkurs");
$query = "SELECT nazwa, opis, cena FROM nagrody ORDER BY RAND() LIMIT 5;";
$result = mysqli_query($connection, $query);
mysqli_close($connection);
?>
</table>
</section>
<section id="right">
<img src="puchar.png" alt="Puchar dla wolontariusza">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">Kwerenda1</a></li>
<li><a href="kw2.png">Kwerenda2</a></li>
<li><a href="kw3.png">Kwerenda3</a></li>
<li><a href="kw4.png">Kwerenda4</a></li>
</ul>
</section>
<footer>
<p>Numer zdającego: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 35.
W każdym wierszu tabeli wpisywany jest obliczony przez skrypt kolejny numer wiersza począwszy od 1.
$number = 1 - licznik startuje od 1, przed pętlą,while ($row = mysqli_fetch_row($result)) - każde przejście pętli pobiera kolejny wiersz wyniku jako tablicę numeryczną; gdy wierszy zabraknie, funkcja zwraca null i pętla się kończy,$number++.Podgląd: pięć wierszy z numerami 1-5 - na razie tylko pierwsza kolumna.
$number = 1 wewnątrz pętli - licznik zeruje się przy każdym wierszu i wszędzie wychodzi 1.
konkurs.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
<tr>
<th>Nr</th>
<th>Nazwa</th>
<th>Opis</th>
<th>Wartość</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "konkurs");
$query = "SELECT nazwa, opis, cena FROM nagrody ORDER BY RAND() LIMIT 5;";
$result = mysqli_query($connection, $query);
$number = 1;
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$number</td></tr>";
$number++;
}
mysqli_close($connection);
?>
</table>
</section>
<section id="right">
<img src="puchar.png" alt="Puchar dla wolontariusza">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">Kwerenda1</a></li>
<li><a href="kw2.png">Kwerenda2</a></li>
<li><a href="kw3.png">Kwerenda3</a></li>
<li><a href="kw4.png">Kwerenda4</a></li>
</ul>
</section>
<footer>
<p>Numer zdającego: Bartosz Bryniarski</p>
</footer>
</body>
</html>W każdym wierszu tabeli wpisywany jest obliczony przez skrypt kolejny numer wiersza począwszy od 1 oraz zwrócone zapytaniem pola kolejnego rekordu.
Po numerze trzy komórki <td> z $row[0] - $row[2], w kolejności kolumn z SELECT: nazwa, opis, cena. Podgląd: tabela jak na ilustracji 2 - co drugi wiersz na żółtym tle z reguły tr:nth-child(even).
konkurs.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
<tr>
<th>Nr</th>
<th>Nazwa</th>
<th>Opis</th>
<th>Wartość</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "konkurs");
$query = "SELECT nazwa, opis, cena FROM nagrody ORDER BY RAND() LIMIT 5;";
$result = mysqli_query($connection, $query);
$number = 1;
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$number</td><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";
$number++;
}
mysqli_close($connection);
?>
</table>
</section>
<section id="right">
<img src="puchar.png" alt="Puchar dla wolontariusza">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">Kwerenda1</a></li>
<li><a href="kw2.png">Kwerenda2</a></li>
<li><a href="kw3.png">Kwerenda3</a></li>
<li><a href="kw4.png">Kwerenda4</a></li>
</ul>
</section>
<footer>
<p>Numer zdającego: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 39 · po tym etapie masz 37 z 37 kryteriów (pkt)
W każdym wierszu tabeli wpisywany jest obliczony przez skrypt kolejny numer wiersza począwszy od 1 oraz zwrócone zapytaniem pola kolejnego rekordu.
Trzy poprawki, które warto znać z prawdziwych projektów:
mysqli_fetch_assoc - kolumny po nazwach ($row["nazwa"]) zamiast numerów; dopisanie kolumny do SELECT nie przesunie wtedy danych do złych komórek,htmlspecialchars - opis nagrody wpisuje człowiek; znak < albo & w opisie przeglądarka potraktowałaby jak początek znacznika HTML. Funkcja zamienia je na encje i tekst wyświetla się dosłownie,number_format($row["cena"], 2, ",", " ") - baza zwraca cenę w zapisie programisty (1230.00), a na stronie dla ludzi lepiej po polsku: przecinek dziesiętny, spacja między tysiącami i waluta - 1 230,00 zł.Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
Bez zapytania 3 w bazie zostają nagrody bez ceny (NULL) - number_format(null, ...) wypisze wtedy „0,00 zł”, jakby nagroda była darmowa (a PHP 8.1+ zgłasza przy tym ostrzeżenie Deprecated, które XAMPP domyślnie ukrywa). Jeśli taki rekord może się trafić, sprawdź $row["cena"] === null i wypisz np. „brak ceny”.
konkurs.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>WOLONTARIAT SZKOLNY</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<section id="left">
<h3>Konkursowe nagrody</h3>
<form>
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
<tr>
<th>Nr</th>
<th>Nazwa</th>
<th>Opis</th>
<th>Wartość</th>
</tr>
<?php
$connection = mysqli_connect("localhost", "root", "", "konkurs");
$query = "SELECT nazwa, opis, cena FROM nagrody ORDER BY RAND() LIMIT 5;";
$result = mysqli_query($connection, $query);
$number = 1;
while ($row = mysqli_fetch_assoc($result)) {
$name = htmlspecialchars($row["nazwa"]);
$description = htmlspecialchars($row["opis"]);
$price = number_format($row["cena"], 2, ",", " ") . " zł";
echo "<tr><td>$number</td><td>$name</td><td>$description</td><td>$price</td></tr>";
$number++;
}
mysqli_close($connection);
?>
</table>
</section>
<section id="right">
<img src="puchar.png" alt="Puchar dla wolontariusza">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">Kwerenda1</a></li>
<li><a href="kw2.png">Kwerenda2</a></li>
<li><a href="kw3.png">Kwerenda3</a></li>
<li><a href="kw4.png">Kwerenda4</a></li>
</ul>
</section>
<footer>
<p>Numer zdającego: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 40 · po tym etapie masz 37 z 37 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego.
W przeglądarka.txt wpisujesz nazwę przeglądarki.
W folderze: konkurs.php, styles.css, kwerendy.txt, import.png, kw1.png - kw4.png (do nich prowadzą odnośniki z listy), puchar.png i przeglądarka.txt. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 39.
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.