INF.03-04-26.01-SGStyczeń 2026 · 51 kroków · ok. 93 min · 40 kryteriów z klucza

Rozwiązanie krok po kroku: Portal dla maturzystów (Wersja podstawowa)

Rozwiązanie buduje portal dla maturzystów: baza matura (uczniowie, arkusze maturalne i tabela wynik, która łączy ucznia z arkuszem i punktami) i pięć zapytań - sortowanie, DISTINCT, MIN/MAX, średnia AVG z GROUP BY, aliasem i LIMIT 1 oraz złączenie tabel JOIN - potem dwie strony z blokiem bocznym, dwiema sekcjami i czterema kafelkami statystyk oraz trzy skrypty PHP: statystyki z bazy (te same na obu stronach), lista uczniów jako odnośniki przekazujące id, imię i nazwisko metodą GET i strona wynik.php z wynikami wybranego ucznia.

Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypty są najpierw pisane najprościej, funkcjami z tabeli 1 arkusza (mysqli_query, mysqli_fetch_row), a na końcu zostają przerobione na wersję z prawdziwych projektów: jeden plik ze statystykami dołączany do obu stron, poprawnie zakodowane adresy, liczba zamiast surowego tekstu z adresu i imię ucznia brane z bazy, a nie z adresu.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: układ na siatce CSS, kolory w zmiennych, PHP na PDO z zapytaniami przygotowanymi i wspólne części obu stron w osobnych plikach od pierwszej linii - obie wersje są zgodne z kluczem.

Baza i grafiki pochodzą z prawdziwego archiwum pliki3-2 (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; wynik.php pokazuje ucznia z ilustracji 4, Aleksandra Kosińskiego (id 44).

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.

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

Etap 1: Baza danych
Kroki 1-8 · po tym etapie masz 7 z 40 kryteriów (pkt)

Krok 1: Baza danych matura
ok. 2 min
Polecenie z arkusza
Utwórz bazę danych o nazwie matura, z zestawem polskich znaków (np. utf8_polish_ci)
Rozpakuj pliki3-2.7z z pulpitu (hasło Z@Rok!Matur@ - dwie małpy i wykrzyknik, wielkość liter ma znaczenie) i załóż folder z numerem zdającego. W phpMyAdmin: Nowa, nazwa matura, porównywanie utf8_polish_ci. Porównywanie wybrane przy bazie dziedziczą tabele zakładane później bez własnego ustawienia. Tabele z egzamin.sql mają je zapisane w definicji (COLLATE=utf8_polish_ci), więc i tak sortują po polsku - ustawienie bazy jest tu wymaganiem arkusza, a nie warunkiem poprawnej kolejności w zapytaniu 1.
Typowe błędy
Nazwa bazy musi brzmieć dokładnie matura - skrypty łączą się z bazą po nazwie, więc literówka zabiera też punkty za skrypty (R.5.1).
Krok 2: Import tabel z pliku egzamin.sql
ok. 2 min
Polecenie z arkusza
Z rozpakowanego archiwum zaimportuj tabele z pliku egzamin.sql do utworzonej bazy
Zaznacz bazę matura, potem Import → egzamin.sql → Wykonaj. Powstają trzy tabele z ilustracji 1: maturzysta (uczniowie i ich szkoła), arkusz (symbol, rok, przedmiot, sesja) i wynik, który kluczami obcymi łączy ucznia (maturzysta_id) z arkuszem (symbol) i zapisuje punkty.
Krok 3: Zrzut ekranu import.jpg
Kryteria:
R.1.1 Wykonany import tabel do bazy danych matura - plik import w formacie JPEG
ok. 2 min
Polecenie z arkusza
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie JPEG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel
Print Screen, wklejasz do edytora grafiki i zapisujesz jako import.jpg. Import idzie do JPEG, zrzuty zapytań do PNG - formaty są różne.
Typowe błędy
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Krok 4: Zapytanie 1: uczniowie szkoły T3 według nazwiska
Kryteria: ,
R.1.2 W pliku kwerendy.txt zapisane co najmniej jedno zapytanie SQL, wynikające z treści zadania
R.1.3 Wykonane zapytanie 1 wybierające jedynie id, imię i nazwisko maturzystów ze szkoły „T3”, posortowane rosnąco według nazwiska. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = "T3" ORDER BY nazwisko; (opcjonalnie ASC) oraz na zrzucie widocznych jest dokładnie 13 rekordów.
ok. 2 min
Polecenie z arkusza
Zapytanie 1: wybierające jedynie id, imię i nazwisko maturzystów ze szkoły „T3”, posortowane rosnąco według nazwiska
SELECT id, imie, nazwisko - trzy pola, bez szkoły,
FROM maturzysta,
WHERE szkola = 'T3' - kod szkoły to tekst, więc w apostrofach,
ORDER BY nazwisko - sortowanie rosnące jest domyślne (ASC można dopisać, nie trzeba).
Wynik: 13 wierszy, od Grzegorza Anaka (29) przez Jakuba Biczaka i Witolda Bińskiego - ta sama kolejność co na ilustracji 2. Zapytania zapisujesz w kwerendy.txt, zrzut jako kw1.png.
kwerendy.txt Tekst nowy plik
-- Zapytanie 1 SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = 'T3' ORDER BY nazwisko;
Podgląd strony po tym kroku
Krok 5: Zapytanie 2: przedmioty bez powtórzeń
Kryteria:
R.1.4 Wykonane zapytanie 2 wybierające jedynie nazwy przedmiotów maturalnych z tabeli arkusz. Nazwy przedmiotów nie mogą się powtarzać. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT DISTINCT przedmiot FROM arkusz; oraz na zrzucie widoczne są dokładnie 4 rekordy: biologia, matematyka, fizyka, geografia
ok. 1 min
Polecenie z arkusza
Zapytanie 2: wybierające jedynie nazwy przedmiotów maturalnych z tabeli arkusz. Nazwy przedmiotów nie mogą się powtarzać
DISTINCT zaraz po SELECT usuwa z wyniku powtarzające się wiersze. Tabela arkusz ma 18 arkuszy, ale tylko cztery różne przedmioty: biologia, matematyka, fizyka, geografia - dokładnie jak w kluczu. Zrzut: kw2.png.
Typowe błędy
Bez DISTINCT zrzut pokazuje 18 wierszy z powtórzeniami - klucz wymaga dokładnie 4 rekordów.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = 'T3' ORDER BY nazwisko; -- Zapytanie 2 SELECT DISTINCT przedmiot FROM arkusz;
Podgląd strony po tym kroku
Krok 6: Zapytanie 3: najstarszy i najmłodszy rok
Kryteria:
R.1.5 Wykonane zapytanie 3 wybierające jedynie minimalny i maksymalny rok arkusza. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT MIN(rok), MAX(rok) FROM arkusz; oraz na zrzucie widoczne są dokładnie 2 wartości: 2000 i 2006
ok. 1 min
Polecenie z arkusza
Zapytanie 3: wybierające jedynie rok dla najstarszego i najmłodszego arkusza maturalnego
Funkcje agregujące MIN i MAX przeglądają całą kolumnę i zwracają jedną wartość - najmniejszy i największy rok. Wynik: jeden wiersz, 2000 i 2006. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = 'T3' ORDER BY nazwisko; -- Zapytanie 2 SELECT DISTINCT przedmiot FROM arkusz; -- Zapytanie 3 SELECT MIN(rok), MAX(rok) FROM arkusz;
Podgląd strony po tym kroku
Krok 7: Zapytanie 4: uczeń z najlepszą średnią
Kryteria:
R.1.6 Wykonane zapytanie 4 wybierające jedynie id maturzysty oraz średnią ze wszystkich punktów otrzymanych przez tego maturzystę, alias „Wynik”; posortowane malejąco według obliczonej średniej, zapytanie powinno wyświetlić tylko 1 rekord. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT maturzysta_id, AVG(punkty) AS "Wynik" FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1; (AS nieobowiązkowe) oraz na zrzucie widoczne są dane 19, 99.0000 (dowolne zaokrąglenie)
ok. 3 min
Polecenie z arkusza
Zapytanie 4: wybierające jedynie id maturzysty oraz średnią ze wszystkich punktów otrzymanych przez tego maturzystę. Średnia punktów ma nazwę kolumny (alias) „Wynik”. Dane należy posortować malejąco według obliczonej średniej i wyświetlić tylko 1 rekord. Zapytanie jest grupujące i wybiera maturzystę z najlepszym średnim wynikiem punktów
SELECT maturzysta_id, AVG(punkty) AS Wynik - AVG liczy średnią, AS nadaje kolumnie nazwę „Wynik”,
FROM wynik,
GROUP BY maturzysta_id - średnia liczy się osobno dla każdego ucznia, a nie dla całej tabeli,
ORDER BY Wynik DESC - po aliasie, od największej średniej,
LIMIT 1 - zostaje tylko pierwszy wiersz.
Wynik: 19, 99.0000 - jak w kluczu. MariaDB wypisuje średnią z czterema miejscami po przecinku i tak samo pojawi się na stronie. Zrzut: kw4.png.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = 'T3' ORDER BY nazwisko; -- Zapytanie 2 SELECT DISTINCT przedmiot FROM arkusz; -- Zapytanie 3 SELECT MIN(rok), MAX(rok) FROM arkusz; -- Zapytanie 4 SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;
Podgląd strony po tym kroku
Krok 8: Zapytanie 5: wyniki ucznia 31 ze złączeniem tabel
Kryteria:
R.1.7 Wykonane zapytanie 5 wybierające jedynie rok, sesję i przedmiot z tabeli arkusz oraz odpowiadające temu punkty z tabeli wynik dla id maturzysty 31. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT rok, sesja, przedmiot, punkty FROM arkusz JOIN wynik USING(symbol) WHERE maturzysta_id = 31; (możliwe również INNER JOIN, porównanie kluczy po WHERE lub po ON) oraz na zrzucie widoczne są dokładnie 3 rekordy: 2000 lato biologia 25, 2000 lato matematyka 25, 2001 lato biologia 29
ok. 3 min
Polecenie z arkusza
Zapytanie 5: wybierające jedynie rok, sesję i przedmiot z tabeli arkusz oraz odpowiadające temu punkty z tabeli wynik dla id maturzysty 31. Należy posłużyć się relacją
SELECT rok, sesja, przedmiot, punkty - trzy pola z arkusz, jedno z wynik,
FROM arkusz JOIN wynik USING (symbol) - złączenie po relacji: wiersz wyniku łączy się z arkuszem o tym samym symbolu; USING (symbol) to krótszy zapis ON arkusz.symbol = wynik.symbol, gdy kolumna nazywa się w obu tabelach tak samo,
WHERE maturzysta_id = 31 - wyniki jednego ucznia.
Wynik: trzy wiersze - 2000 lato biologia 25, 2000 lato matematyka 25, 2001 lato biologia 29. Zrzut: kw5.png. W Skrypcie 3 w miejscu 31 stanie identyfikator z adresu strony.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = 'T3' ORDER BY nazwisko; -- Zapytanie 2 SELECT DISTINCT przedmiot FROM arkusz; -- Zapytanie 3 SELECT MIN(rok), MAX(rok) FROM arkusz; -- Zapytanie 4 SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1; -- Zapytanie 5 SELECT rok, sesja, przedmiot, punkty FROM arkusz JOIN wynik USING (symbol) WHERE maturzysta_id = 31;
Podgląd strony po tym kroku
Etap 2: Strona HTML
Kroki 9-19 · po tym etapie masz 14 z 40 kryteriów (pkt)
Krok 9: Plik index.php w HTML5
ok. 2 min
Polecenie z arkusza
Cechy wspólne dla obu stron: zapisane w języku HTML5
Zacznij od index.php: deklaracja <!DOCTYPE html> i szkielet strony. Drugą stronę, wynik.php, zrobisz na końcu jako kopię gotowej pierwszej - obie mają ten sam nagłówek, blok boczny, kafelki statystyk i stopkę, więc nie ma sensu pisać tego dwa razy.
index.php PHP nowy plik
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.php)
Krok 10: Język strony
Kryteria:
R.2.2 W pliku znajduje się deklaracja HTML5 <!DOCTYPE HTML> i deklaracja języka zawartości witryny: polski np. <html lang="pl">
ok. 1 min
Polecenie z arkusza
Zadeklarowany polski język zawartości witryny
Atrybut lang="pl" w znaczniku <html> - razem z deklaracją HTML5 to jedno kryterium klucza.
index.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.php)
Krok 11: Kodowanie polskich znaków
ok. 1 min
Polecenie z arkusza
Jawnie zastosowany właściwy standard kodowania polskich znaków
<meta charset="UTF-8"> jako pierwszy element <head> - bez niego „maturzystów” i „Kosiński” mogą wyświetlić się krzakami.
index.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.php)
Krok 12: Tytuł strony
Kryteria:
R.2.3 W sekcji head znajduje się jawnie podany standard kodowania polskich znaków i tytuł strony „Matura”
ok. 1 min
Polecenie z arkusza
Tytuł strony „Matura”
<title> w <head> - widać go na karcie przeglądarki. Z kodowaniem to drugie kryterium nagłówka strony.
index.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Matura</title> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.php)
Krok 13: Podpięcie arkusza stylów
Kryteria:
R.3.2 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl.css formatowanie CSS pochodzi jedynie z tego arkusza
ok. 1 min
Polecenie z arkusza
Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Nazwa pliku: styl.css (nie style.css). Całe formatowanie ma pochodzić z tego pliku - żadnych atrybutów style w HTML-u.
index.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Matura</title> <link rel="stylesheet" href="styl.css"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.php)
Krok 14: Bloki: nagłówek, boczny, dwie sekcje, stopka
Kryteria:
R.2.4 W sekcji body zdefiniowany jest podział na bloki za pomocą semantycznych znaczników HTML5: header, aside, section, section, footer (dopuszcza się zastosowanie bloków pomocniczych)
ok. 2 min
Polecenie z arkusza
Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 3
Klucz wymaga wprost header, aside, dwóch section i footer (R.2.4). Na ilustracji 3 blok boczny stoi po lewej przez całą wysokość, a obie sekcje jedna nad drugą po prawej - w HTML-u wystarczy taka kolejność, ułożenie zrobisz w CSS.
index.php PHP zmienione: 10 linii
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Matura</title> <link rel="stylesheet" href="styl.css"> </head> <body> <header> </header> <aside> </aside> <section> </section> <section> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (index.php)

Krok 15: Nagłówek strony

ok. 1 min

Polecenie z arkusza

Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści „System informacji dla maturzystów”

Pierwszego stopnia, czyli <h1>.

index.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
    </aside>
    <section>
    </section>
    <section>
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 16: Blok boczny: trzy grafiki

ok. 2 min

Polecenie z arkusza

Zawartość bloku bocznego trzy grafiki: ma.jpg, poniżej tu.jpg, poniżej ra.jpg, każda z tekstem alternatywnym „Matura”.

Trzy <img> w kolejności z arkusza - czytane z góry na dół dają słowo „Matura”. Każda ma alt="Matura". Grafiki mają po 200 × 200 px i na razie stoją obok siebie; zmniejszysz je i ustawisz jedna pod drugą w CSS.

index.php PHP zmienione: 3 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
    </section>
    <section>
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 17: Druga sekcja: cztery bloki z tą samą klasą

Kryteria:

R.2.7 W drugim bloku sekcji umieszczone cztery bloki z zawartością. Bloki mają przypisaną tą samą klasę

ok. 2 min

Polecenie z arkusza

Zawartość drugiego bloku sekcji: cztery bloki, w każdym nagłówek czwartego stopnia o treści, kolejno „Przedmioty”, „Lata”, „Najlepszy wynik”, „Najgorszy wynik”. Wszystkie bloki mają przypisaną tę samą klasę

Kafelki to bloki pomocnicze <div> - klucz je dopuszcza. Wszystkie dostają class="block": klasa (w przeciwieństwie do identyfikatora) może być przypisana wielu elementom, więc jedną regułą .block w CSS ostylujesz cztery kafelki naraz. W każdym <h4> z nazwą, a pod nim miejsce na wynik Skryptu 1.

index.php PHP zmienione: 12 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
        </div>
        <div class="block">
            <h4>Lata</h4>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
        </div>
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 18: Stopka

Kryteria:

R.2.5 W bloku nagłówkowym znajduje się <h1>: „System informacji dla maturzystów”, w drugim bloku sekcji <h4>: „Przedmioty”, „Lata”, " Najlepszy wynik”, „Najgorszy wynik” oraz w stopce <p> z numerem zdającego

ok. 1 min

Polecenie z arkusza

Zawartość stopki: paragraf o treści „Stronę wykonał: ”, dalej wstawiony numer zdającego

Akapit w <footer>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania. Z tym krokiem są już elementy z kryterium R.2.5: <h1>, cztery <h4> i <p> w stopce.

index.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
        </div>
        <div class="block">
            <h4>Lata</h4>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
        </div>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 19: Pierwsza sekcja strony głównej

Kryteria:

R.2.8 Na stronie głównej umieszczony <h3>: „Wybierz ucznia z listy:”

ok. 1 min

Polecenie z arkusza

Zawartość pierwszego bloku sekcji dla strony index.php: Nagłówek trzeciego stopnia o treści: „Wybierz ucznia z listy:”

<h3> na początku pierwszej sekcji. Pod nim Skrypt 2 wypisze odnośniki do uczniów.

index.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
        </div>
        <div class="block">
            <h4>Lata</h4>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
        </div>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Etap 3: Styl CSS
Kroki 20-30 · po tym etapie masz 27 z 40 kryteriów (pkt)
Krok 20: Plik styl.css: ciało strony
Kryteria:
R.4.1 dla selektora body: krój czcionki cursive, sans-serif (dozwolona tylko taka kolejność) , kolor tła #4682B4
ok. 1 min
Polecenie z arkusza
Dla selektora ciała strony: krój czcionki cursive, w przypadku braku sans-serif, kolor tła #4682B4
Selektor znacznika body (uwaga arkusza: ciało strony, obraz, h4 i odnośnik - tylko selektorem znacznika). Kolejność krojów ma znaczenie: najpierw cursive, potem zapasowy sans-serif - klucz dopuszcza tylko taką.
styl.css CSS nowy plik
body { font-family: cursive, sans-serif; background-color: #4682B4; }
Podgląd strony po tym kroku (index.php)
Krok 21: Nagłówek i stopka
Kryteria:
R.4.2 kolor tła: blok nagłówkowy i stopka - #0F0F64
ok. 1 min
Polecenie z arkusza
Wspólne dla bloków nagłówkowego i stopki: kolor tła #0F0F64, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 3 px
Jedna reguła dla dwóch selektorów po przecinku. Marginesy wewnętrzne to padding.
styl.css CSS zmienione: 6 linii
body { font-family: cursive, sans-serif; background-color: #4682B4; } header, footer { background-color: #0F0F64; color: white; text-align: center; padding: 3px; }
Podgląd strony po tym kroku (index.php)
Krok 22: Blok boczny
ok. 1 min
Polecenie z arkusza
Dla bloku bocznego: szerokość 20%, wysokość 500 px
Wysokość 500 px to dokładnie dwie sekcje po 250 px - blok boczny sięgnie od nagłówka do stopki.
styl.css CSS zmienione: 4 linie
body { font-family: cursive, sans-serif; background-color: #4682B4; } header, footer { background-color: #0F0F64; color: white; text-align: center; padding: 3px; } aside { width: 20%; height: 500px; }
Podgląd strony po tym kroku (index.php)
Krok 23: Sekcje: wymiary i paski przewijania
Kryteria:
R.4.7 paski przewijania: dla obu bloków sekcji - overflow: auto;
ok. 2 min
Polecenie z arkusza
Wspólne dla bloków sekcji: szerokość 80%, wysokość 250 px, paski przewijania tylko w przypadku przepełnienia
overflow: auto - pasek pojawi się tylko wtedy, gdy treść nie zmieści się w 250 px (scroll pokazywałby go zawsze). Lista 13 uczniów się nie zmieści, więc pierwsza sekcja dostanie pasek, jak na ilustracji 2.
styl.css CSS zmienione: 5 linii
body { font-family: cursive, sans-serif; background-color: #4682B4; } header, footer { background-color: #0F0F64; color: white; text-align: center; padding: 3px; } aside { width: 20%; height: 500px; } section { width: 80%; height: 250px; overflow: auto; }
Podgląd strony po tym kroku (index.php)
Krok 24: Obrazy
Kryteria: ,
R.4.4 wysokość: blok boczny - 500px, oba bloki sekcji - 250px szerokość: blok boczny - 20%, oba bloki sekcji - 80% (width lub grid-template-columns lub flex) , oraz selektor img - 150px
R.4.6 marginesy wewnętrzne (padding) : blok nagłówkowy, stopka - 3px, dla obrazu - 2px
ok. 1 min
Polecenie z arkusza
Dla selektora obrazu: szerokość 150 px, marginesy wewnętrzne 2 px
Sama szerokość wystarczy - wysokość przeskaluje się proporcjonalnie (200 × 200 → 150 × 150). Ta reguła zamyka kryteria wymiarów i marginesów wewnętrznych.
styl.css CSS zmienione: 4 linie
body { font-family: cursive, sans-serif; background-color: #4682B4; } header, footer { background-color: #0F0F64; color: white; text-align: center; padding: 3px; } aside { width: 20%; height: 500px; } section { width: 80%; height: 250px; overflow: auto; } img { width: 150px; padding: 2px; }
Podgląd strony po tym kroku (index.php)
Krok 25: Grafiki jedna pod drugą
Kryteria:
R.2.6 W bloku bocznym umieszczone 3 grafiki ma.jpg , tu.jpg , ra.jpg , każdy z tekstem alternatywnym „Matura”, grafiki są ułożone jedna pod drugą (w HTML lub CSS)
ok. 1 min
Polecenie z arkusza
Zawartość bloku bocznego trzy grafiki: ma.jpg, poniżej tu.jpg, poniżej ra.jpg, każda z tekstem alternatywnym „Matura”.
Obrazy są elementami liniowymi i stają obok siebie, jeśli zmieszczą się w linii. Blok boczny ma 20% szerokości - na szerokim monitorze to ponad 300 px, czyli miejsce na dwa obrazy po 150 px. display: block sprawia, że każdy obraz zajmuje własną linię niezależnie od ekranu, więc „Ma”, „tu”, „ra” zawsze stoją jedna pod drugą (klucz: „w HTML lub CSS”).
styl.css CSS zmienione: 1 linia
body { font-family: cursive, sans-serif; background-color: #4682B4; } header, footer { background-color: #0F0F64; color: white; text-align: center; padding: 3px; } aside { width: 20%; height: 500px; } section { width: 80%; height: 250px; overflow: auto; } img { width: 150px; padding: 2px; display: block; }
Podgląd strony po tym kroku (index.php)

Krok 26: Nagłówki kafelków wyśrodkowane

Kryteria:

R.4.5 wyrównanie tekstu do środka: blok nagłówkowy, stopka, selektor h4

ok. 1 min

Polecenie z arkusza

Dla selektora nagłówka czwartego stopnia: wyrównanie tekstu do środka

Selektor znacznika h4. Z wyrównaniem nagłówka i stopki to komplet kryterium R.4.5.

styl.css CSS zmienione: 3 linie

body {
    font-family: cursive, sans-serif;
    background-color: #4682B4;
}
header, footer {
    background-color: #0F0F64;
    color: white;
    text-align: center;
    padding: 3px;
}
aside {
    width: 20%;
    height: 500px;
}
section {
    width: 80%;
    height: 250px;
    overflow: auto;
}
img {
    width: 150px;
    padding: 2px;
    display: block;
}
h4 {
    text-align: center;
}

Podgląd strony po tym kroku (index.php)

Krok 27: Odnośniki

Kryteria: ,

R.4.3 kolor czcionki: blok nagłówkowy, stopka, selektor a - biały

R.4.8 tekst bez podkreślenia: dla odnośnika - text-decoration: none;

ok. 1 min

Polecenie z arkusza

Dla selektora odnośnika: biały kolor czcionki, tekst bez podkreślenia

text-decoration: none usuwa podkreślenie. Odnośników jeszcze nie ma - wypisze je Skrypt 2.

styl.css CSS zmienione: 4 linie

body {
    font-family: cursive, sans-serif;
    background-color: #4682B4;
}
header, footer {
    background-color: #0F0F64;
    color: white;
    text-align: center;
    padding: 3px;
}
aside {
    width: 20%;
    height: 500px;
}
section {
    width: 80%;
    height: 250px;
    overflow: auto;
}
img {
    width: 150px;
    padding: 2px;
    display: block;
}
h4 {
    text-align: center;
}
a {
    color: white;
    text-decoration: none;
}

Podgląd strony po tym kroku (index.php)

Krok 28: Odnośnik pod kursorem

Kryteria:

R.4.10 gdy kursor znajdzie się na odnośniku jego kolor tła zmienia się na #12538A

ok. 1 min

Polecenie z arkusza

Gdy kursor znajdzie się na odnośniku jego kolor tła zmienia się na #12538A (jak na ilustracji 2)

Pseudoklasa :hover. Odnośnik jest elementem liniowym, więc tło dostaje tylko jego tekst - na ilustracji 2 podświetlony jest sam napis „44. Aleksander Kosiński”.

styl.css CSS zmienione: 3 linie

body {
    font-family: cursive, sans-serif;
    background-color: #4682B4;
}
header, footer {
    background-color: #0F0F64;
    color: white;
    text-align: center;
    padding: 3px;
}
aside {
    width: 20%;
    height: 500px;
}
section {
    width: 80%;
    height: 250px;
    overflow: auto;
}
img {
    width: 150px;
    padding: 2px;
    display: block;
}
h4 {
    text-align: center;
}
a {
    color: white;
    text-decoration: none;
}
a:hover {
    background-color: #12538A;
}

Podgląd strony po tym kroku (index.php)

Krok 29: Kafelki: kolory, wymiary, cień, obok siebie
Kryteria: ,
R.4.9 dla klasy przypisanej do bloków z drugiego bloku sekcji: kolor tła - #2B6BA0, kolor czcionki - biały, szerokość i wysokość - 150px, marginesy zewnętrzne - 10px, wewnętrzne - 5px, zaokrąglenie rogów - 10px, cień bloku box shadow: 3px 3px 5px black; (wystarczy 5 cech z 8)
R.3.5 Bloki z sekcji drugiej są ułożone obok siebie w poziomie
ok. 3 min
Polecenie z arkusza
Dla klasy przypisanej do bloków z drugiego bloku sekcji: kolor tła #2B6BA0, biały kolor czcionki, szerokość i wysokość 150 px, marginesy zewnętrzne 10 px, wewnętrzne 5 px, zaokrąglenie rogów 10 px, cień bloku o przesunięciu 3 px w obu osiach, rozmyciu 5 px i kolorze czarnym, bloki powinny być ustawione obok siebie
Selektor klasy zaczyna się kropką: .block. Cień box-shadow: 3px 3px 5px black to kolejno przesunięcie w poziomie, w pionie, rozmycie i kolor. Bloki <div> domyślnie stoją jeden pod drugim - float: left ustawia je obok siebie (R.3.5). Sekcja ma overflow: auto, więc obejmuje pływające kafelki i nie wypuszcza ich na stopkę.
styl.css CSS zmienione: 11 linii
body { font-family: cursive, sans-serif; background-color: #4682B4; } header, footer { background-color: #0F0F64; color: white; text-align: center; padding: 3px; } aside { width: 20%; height: 500px; } section { width: 80%; height: 250px; overflow: auto; } img { width: 150px; padding: 2px; display: block; } h4 { text-align: center; } a { color: white; text-decoration: none; } a:hover { background-color: #12538A; } .block { background-color: #2B6BA0; color: white; width: 150px; height: 150px; margin: 10px; padding: 5px; border-radius: 10px; box-shadow: 3px 3px 5px black; float: left; }
Podgląd strony po tym kroku (index.php)
Krok 30: Układ bloków zgodny z ilustracją 3
Kryteria:
R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z ilustracją 3 w arkuszu egzaminacyjnym (prawidłowo zastosowane właściwości CSS decydujące o układzie bloków na stronie, np. float i clear albo display flex albo grid albo position)
ok. 3 min
Polecenie z arkusza
Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 3
Arkusz nie mówi, jak ułożyć bloki - wybierasz float: left dla bloku bocznego i obu sekcji. Blok boczny staje przy lewej krawędzi, pierwsza sekcja obok niego (20% + 80% = cała szerokość), a druga nie mieści się już w tym rzędzie, więc spada niżej - ale wciąż na prawo od bloku bocznego, który sięga 500 px w dół. Stopka dostaje clear: both: bez tego wjechałaby pod pływające bloki (R.3.1).
Typowe błędy
Bez clear: both stopka podjeżdża pod blok boczny i sekcje - układ niezgodny z ilustracją 3 zabiera punkt R.3.1.
styl.css CSS zmienione: 6 linii
body { font-family: cursive, sans-serif; background-color: #4682B4; } header, footer { background-color: #0F0F64; color: white; text-align: center; padding: 3px; } aside { width: 20%; height: 500px; } section { width: 80%; height: 250px; overflow: auto; } img { width: 150px; padding: 2px; display: block; } h4 { text-align: center; } a { color: white; text-decoration: none; } a:hover { background-color: #12538A; } .block { background-color: #2B6BA0; color: white; width: 150px; height: 150px; margin: 10px; padding: 5px; border-radius: 10px; box-shadow: 3px 3px 5px black; float: left; } aside, section { float: left; } footer { clear: both; }
Podgląd strony po tym kroku (index.php)

Etap 4: Skrypty PHP

Kroki 31-46 · po tym etapie masz 40 z 40 kryteriów (pkt)

Krok 31: Połączenie z bazą i zamknięcie na końcu

Kryteria:

R.5.1 Skrypt realizuje połączenie z serwerem bazy danych i wybór bazy matura oraz ostatnią operacją na bazie jest jej zamknięcie

ok. 2 min

Polecenie z arkusza

Łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie matura. Na końcu zamykane jest połączenie z serwerem

Pierwszy kod PHP na stronie stoi w pierwszej sekcji, pod nagłówkiem <h3>, 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 obu skryptom. Ostatni blok PHP, za czwartym kafelkiem, tylko zamyka połączenie - to ostatnia operacja na bazie (R.5.1). Od tego kroku podgląd to wynik prawdziwego uruchomienia strony.

index.php PHP zmienione: 6 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
        </div>
        <div class="block">
            <h4>Lata</h4>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 32: Skrypt 1, Przedmioty: zapytanie 2

Kryteria:

R.5.2 Przynajmniej jedno zapytanie zostało wysłane do bazy

ok. 2 min

Polecenie z arkusza

Skrypt 1 w bloku „Przedmioty”: wysyła do bazy danych zapytanie 2

Skrypt 1 to cztery krótkie bloki PHP - każdy w swoim kafelku, pod nagłówkiem <h4>, żeby wynik pojawił się we właściwym miejscu. Pierwszy: zapytanie 2 w zmiennej, mysqli_query wysyła je do bazy, wynik czeka w $result.

index.php PHP zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 33: Skrypt 1, Przedmioty: nazwy oddzielone spacją

Kryteria:

R.5.3 Skrypt 1 wyświetla w pierwszym bloku dane zwrócone zapytaniem 2

ok. 2 min

Polecenie z arkusza

Skrypt 1 w bloku „Przedmioty”: wyświetla dane zwrócone zapytaniem oddzielone spacją

Zapytanie zwraca cztery wiersze po jednym polu. mysqli_fetch_row oddaje kolejny wiersz jako tablicę ($row[0] - nazwa przedmiotu), a pętla while kończy się po ostatnim. Za każdą nazwą wypisujesz spację. W podglądzie: „biologia matematyka fizyka geografia” - kafelek ma 150 px szerokości, więc tekst łamie się jak na ilustracji 2.

index.php PHP zmienione: 3 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 34: Skrypt 1, Lata: zapytanie 3

ok. 1 min

Polecenie z arkusza

Skrypt 1 w bloku „Lata”: wysyła do bazy danych zapytanie 3

Te same zmienne $query i $result - wynik Przedmiotów jest już wypisany i nie będzie potrzebny.

index.php PHP zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 35: Skrypt 1, Lata: dwa lata z myślnikiem

Kryteria:

R.5.4 Skrypt 1 wyświetla w drugim bloku napis "<rok1> - <rok2>" dla lat zwróconych zapytaniem 3

ok. 2 min

Polecenie z arkusza

Skrypt 1 w bloku „Lata”: wyświetla dane zwrócone zapytaniem oddzielone spacjami i myślnikiem

Zapytanie z MIN i MAX zawsze zwraca jeden wiersz z dwoma polami, więc pętla nie jest potrzebna - wystarczy jedno mysqli_fetch_row. Między latami wstawiasz „spacja, myślnik, spacja”: podgląd pokazuje „2000 - 2006”.

index.php PHP zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 36: Skrypt 1, Najlepszy wynik: zapytanie 4

ok. 1 min

Polecenie z arkusza

Skrypt 1 w bloku „Najlepszy wynik”: wysyła do bazy danych zapytanie 4

Zapytanie 4 bez zmian. Zwraca jeden wiersz (LIMIT 1) z dwoma polami: identyfikatorem ucznia i średnią. Na stronie ma się pojawić sama średnia, więc w tym kafelku przyda się $row[1].

index.php PHP zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 37: Skrypt 1, Najlepszy wynik: średnia ze znakiem %

Kryteria:

R.5.5 Skrypt 1 wyświetla w trzecim bloku najlepszy wynik z symbolem % zwrócony zapytaniem 4

ok. 1 min

Polecenie z arkusza

Skrypt 1 w bloku „Najlepszy wynik”: wyświetla daną zwróconą zapytaniem, za wynikiem wstawiony znak %

Jeden wiersz, więc jedno mysqli_fetch_row; wypisujesz drugie pole ($row[1], średnia) i zaraz za nim znak procentu. Podgląd: 99.0000%, jak na ilustracji 2.

index.php PHP zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 38: Skrypt 1, Najgorszy wynik: zapytanie 4 z sortowaniem rosnącym

ok. 2 min

Polecenie z arkusza

Skrypt 1 w bloku „Najgorszy wynik”: wysyła do bazy danych zmodyfikowane zapytanie 4 (należy zmienić sposób sortowania na rosnący)

Jedyna zmiana w zapytaniu 4: ASC zamiast DESC. Po sortowaniu rosnącym na początku stoi najniższa średnia, a LIMIT 1 zostawia właśnie ją.

index.php PHP zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
            ?>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 39: Skrypt 1, Najgorszy wynik: średnia ze znakiem %

Kryteria:

R.5.6 Skrypt 1 wyświetla w czwartym bloku najgorszy wynik z symbolem % zwrócony zmodyfikowanym zapytaniem 4 (sortowanie rosnące)

ok. 1 min

Polecenie z arkusza

Skrypt 1 w bloku „Najgorszy wynik”: wyświetla daną zwróconą zapytaniem, za wynikiem wstawiony znak %

Jeden wiersz, więc jedno mysqli_fetch_row; wypisujesz drugie pole ($row[1], średnia) i zaraz za nim znak procentu. Podgląd: 9.2857%, jak na ilustracji 2. Komplet kafelków - wszystkie cztery pokazują to samo co na ilustracji.

index.php PHP zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 40: Skrypt 2: zapytanie 1

ok. 1 min

Polecenie z arkusza

Skrypt 2, w pliku index.php: wysyła do bazy zapytanie 1

Skrypt 2 dopisujesz do bloku z połączeniem w pierwszej sekcji, pod <h3>. Apostrofy wokół T3 siedzą wewnątrz napisu PHP w cudzysłowach, więc nie trzeba ich niczym poprzedzać.

index.php PHP zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
            $query = "SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = 'T3' ORDER BY nazwisko;";
            $result = mysqli_query($connection, $query);
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony bez zmian - taki jak po kroku 39.

Krok 41: Skrypt 2: odnośnik z treścią „id. imię nazwisko”

Kryteria:

R.5.7 Skrypt 2 na stronie głównej generuje odnośniki na podstawie wierszy zwróconych zapytaniem 1. Wyświetlone jest tyle odnośników ile zwróconych wierszy

ok. 3 min

Polecenie z arkusza

Skrypt 2 dla każdego zwróconego wiersza definiuje odnośnik, którego treścią jest „<id>. <imie> <nazwisko>”, gdzie pola są zwrócone z bazy (jak na ilustracji 2)

Jeden odnośnik na wiersz: identyfikator, kropka, spacja, imię, spacja, nazwisko. Wartość atrybutu href piszesz w apostrofach, bo cały napis PHP jest w cudzysłowach (inaczej trzeba by pisać \"). Odnośnik jest elementem liniowym, więc po każdym stawiasz <br> - na ilustracji 2 każdy uczeń stoi w osobnym wierszu. Podgląd: 13 odnośników, od „29. Grzegorz Anak”, i pasek przewijania, bo lista nie mieści się w 250 px.

index.php PHP zmienione: 3 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
            $query = "SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = 'T3' ORDER BY nazwisko;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                echo "<a href='wynik.php'>$row[0]. $row[1] $row[2]</a><br>";
            }
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 42: Skrypt 2: adres wynik.php z parametrami GET

Kryteria: ,

R.3.3 Utworzony przynajmniej jeden odnośnik z treścią: numer id, imię i nazwisko (w HTML lub skrypcie) . Po wybraniu odnośnika otwiera się strona wynik.php

R.3.4 W adresie przynajmniej jednego odnośnika przesyłane są dane: id, imię, nazwisko w formacie np. ?id=...&imie=...&nazwisko=… (w HTML lub skrypcie) . Dane są zgodne z treścią odnośnika

ok. 2 min

Polecenie z arkusza

Adres odnośnika: strona wynik.php i przesłane metodą GET parametry id, imię i nazwisko zwrócone z bazy

Parametry GET dopisujesz do adresu po znaku ?, a kolejne oddzielasz znakiem &: wynik.php?id=44&imie=Aleksander&nazwisko=Kosiński. Nazwy parametrów (id, imie, nazwisko) wybierasz sam - Skrypt 3 odczyta je z tablicy $_GET pod tymi samymi nazwami. Dane w adresie są te same co w treści odnośnika (R.3.4), a kliknięcie otwiera wynik.php (R.3.3).

index.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
            $query = "SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = 'T3' ORDER BY nazwisko;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                echo "<a href='wynik.php?id=$row[0]&imie=$row[1]&nazwisko=$row[2]'>$row[0]. $row[1] $row[2]</a><br>";
            }
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 43: Strona wynik.php jako kopia index.php

Kryteria:

R.2.1 Witryna internetowa zapisana w plikach index.php i wynik.php

ok. 2 min

Polecenie z arkusza

Składa się ze stron index.php i wynik.php. Zawartość pierwszego bloku sekcji dla strony wynik.php: efekt działania skryptu 3

Zapisz index.php jako wynik.php - przychodzą razem wszystkie cechy wspólne dla obu stron: nagłówek strony, styl, blok boczny, cztery kafelki ze Skryptem 1 i zamknięcie połączenia. W pierwszej sekcji zostawiasz tylko blok z połączeniem: nagłówek „Wybierz ucznia z listy:” i Skrypt 2 należą wyłącznie do strony głównej. Teraz kliknięcie ucznia na index.php otwiera tę stronę.

wynik.php PHP nowy plik

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (wynik.php)

Krok 44: Skrypt 3: imię i nazwisko z adresu w nagłówku

Kryteria:

R.5.8 Skrypt 3 na podstronie stosuje metodę $_GET, aby pobrać parametry przesłane do strony

ok. 2 min

Polecenie z arkusza

Skrypt 3, w pliku wynik.php: w nagłówku drugiego stopnia wyświetla imię i nazwisko, które zostało przesłane do strony metodą GET

Parametry z adresu czekają w tablicy $_GET pod nazwami nadanymi w Skrypcie 2. Przepisz je do zmiennych o czytelnych nazwach (identyfikator przyda się w następnym kroku) i wypisz imię z nazwiskiem w <h2>. Podgląd: strona po kliknięciu „44. Aleksander Kosiński”, nagłówek jak na ilustracji 4.

Typowe błędy

Otwarcie wynik.php bez parametrów w adresie daje ostrzeżenia „Undefined array key” dla id, imie i nazwisko, a zapytanie z pustym identyfikatorem kończy się wyjątkiem „Uncaught mysqli_sql_exception” (sprawdzone w PHP 8.2). Klucz tego nie sprawdza - zabezpieczenie jest w etapie „Dobre praktyki”.

wynik.php PHP zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
            $id = $_GET["id"];
            $name = $_GET["imie"];
            $surname = $_GET["nazwisko"];
            echo "<h2>$name $surname</h2>";
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (wynik.php)

Krok 45: Skrypt 3: zapytanie 5 dla ucznia z adresu

ok. 2 min

Polecenie z arkusza

Wysyła do bazy danych zmodyfikowane zapytanie 5, tak że wybierane są dane dla ucznia o id przesłanym do strony metodą GET

Zapytanie 5, w którym zamiast 31 stoi zmienna $id - PHP wstawi jej wartość do napisu w cudzysłowach. Identyfikator to liczba, więc w SQL bez apostrofów.

wynik.php PHP zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
            $id = $_GET["id"];
            $name = $_GET["imie"];
            $surname = $_GET["nazwisko"];
            echo "<h2>$name $surname</h2>";
            $query = "SELECT rok, sesja, przedmiot, punkty FROM arkusz JOIN wynik USING (symbol) WHERE maturzysta_id = $id;";
            $result = mysqli_query($connection, $query);
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony bez zmian - taki jak po kroku 44.

Krok 46: Skrypt 3: rok i sesja, przedmiot i punkty

Kryteria: ,

R.5.9 Skrypt 3 wyświetla dane zwrócone zmodyfikowanym zapytaniem 5, dotyczące ucznia, którego id przesłano do strony: rok i sesję oraz przedmiot i punkty. Skrypt wyświetla wszystkie zawrócone zapytaniem rekordy

R.5.10 W skryptach zastosowana przynajmniej jedna zmienna oraz nazwy wszystkich zmiennych są w języku polskim lub angielskim i odzwierciedlają cel zastosowania

ok. 3 min

Polecenie z arkusza

Dla każdego wiersza zwróconego z bazy wyświetla: w nagłówku trzeciego stopnia rok i sesję oddzielone spacją, w paragrafie nazwę przedmiotu i punkty oddzielone dwukropkiem i spacją

Pętla po wszystkich wierszach: na każdy dwa elementy - <h3> z rokiem i sesją ($row[0], $row[1]) i <p> z przedmiotem, dwukropkiem i punktami. Podgląd zaczyna się jak ilustracja 4: „2000 lato”, „biologia: 25”, „2000 lato”, „matematyka: 17” - a niżej, po przewinięciu sekcji, reszta z 10 wyników ucznia. Wszystkie zmienne w skryptach mają nazwy mówiące, co przechowują ($connection, $query, $result, $row, $id, $name, $surname) - to kryterium R.5.10.

wynik.php PHP zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
            $id = $_GET["id"];
            $name = $_GET["imie"];
            $surname = $_GET["nazwisko"];
            echo "<h2>$name $surname</h2>";
            $query = "SELECT rok, sesja, przedmiot, punkty FROM arkusz JOIN wynik USING (symbol) WHERE maturzysta_id = $id;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                echo "<h3>$row[0] $row[1]</h3>";
                echo "<p>$row[2]: $row[3]</p>";
            }
        ?>
    </section>
    <section>
        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (wynik.php)

Etap 5: Dobre praktyki (poza kluczem)

Kroki 47-50 · po tym etapie masz 40 z 40 kryteriów (pkt)

Krok 47: Kafelki statystyk w jednym pliku bloki.php

ok. 3 min

Polecenie z arkusza

Zawartość drugiego bloku sekcji: cztery bloki, w każdym efekt działania skryptu 1

Skrypt 1 stoi teraz w dwóch plikach - poprawka w jednym (np. zaokrąglenie średniej) wymaga pamiętania o drugim. Wytnij cztery kafelki do osobnego pliku bloki.php, a w obu stronach zostaw jedną linię include "bloki.php";. Gdy wykonanie dojdzie do tej linii, PHP wczytuje i wykonuje bloki.php tak, jakby jego kod stał dokładnie w tym miejscu - dlatego kafelki widzą zmienną $connection otwartą wyżej, a zamknięcie połączenia nadal jest ostatnie. Podgląd wygląda tak samo. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

bloki.php PHP nowy plik

        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[1]%";
            ?>
        </div>

index.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
            $query = "SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = 'T3' ORDER BY nazwisko;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                echo "<a href='wynik.php?id=$row[0]&imie=$row[1]&nazwisko=$row[2]'>$row[0]. $row[1] $row[2]</a><br>";
            }
        ?>
    </section>
    <section>
    <?php include "bloki.php"; ?>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

wynik.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
            $id = $_GET["id"];
            $name = $_GET["imie"];
            $surname = $_GET["nazwisko"];
            echo "<h2>$name $surname</h2>";
            $query = "SELECT rok, sesja, przedmiot, punkty FROM arkusz JOIN wynik USING (symbol) WHERE maturzysta_id = $id;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                echo "<h3>$row[0] $row[1]</h3>";
                echo "<p>$row[2]: $row[3]</p>";
            }
        ?>
    </section>
    <section>
    <?php include "bloki.php"; ?>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 48: Średnia zaokrąglona do dwóch miejsc

ok. 2 min

Polecenie z arkusza

Skrypt 1 w bloku „Najlepszy wynik”: wyświetla daną zwróconą zapytaniem, za wynikiem wstawiony znak %

„99.0000%” i „9.2857%” to surowy format średniej z MariaDB. Funkcja round($row[1], 2) zaokrągla do dwóch miejsc po przecinku i obcina zbędne zera: kafelki pokazują „99%” i „9.29%”. Zmiana w jednym pliku bloki.php działa od razu na obu stronach - po to był poprzedni krok. Na egzaminie zostaw wersję wcześniejszą: klucz dopuszcza dowolne zaokrąglenie, ale ilustracja pokazuje surową wartość.

bloki.php PHP zmienione: 4 linie

        <div class="block">
            <h4>Przedmioty</h4>
            <?php
                $query = "SELECT DISTINCT przedmiot FROM arkusz;";
                $result = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_row($result)) {
                    echo "$row[0] ";
                }
            ?>
        </div>
        <div class="block">
            <h4>Lata</h4>
            <?php
                $query = "SELECT MIN(rok), MAX(rok) FROM arkusz;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "$row[0] - $row[1]";
            ?>
        </div>
        <div class="block">
            <h4>Najlepszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik DESC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo round($row[1], 2) . "%";
                // echo "$row[1]%";
            ?>
        </div>
        <div class="block">
            <h4>Najgorszy wynik</h4>
            <?php
                $query = "SELECT maturzysta_id, AVG(punkty) AS Wynik FROM wynik GROUP BY maturzysta_id ORDER BY Wynik ASC LIMIT 1;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo round($row[1], 2) . "%";
                // echo "$row[1]%";
            ?>
        </div>

Podgląd strony po tym kroku (index.php)

Krok 49: Adresy odnośników poprawnie zakodowane

ok. 3 min

Polecenie z arkusza

Adres odnośnika: strona wynik.php i przesłane metodą GET parametry id, imię i nazwisko zwrócone z bazy

W adresie URL dozwolone są tylko litery łacińskie, cyfry i kilka znaków - przeglądarka sama koduje „ń” w „Kosiński”, ale nazwisko z & albo spacją rozbiłoby parametry. urlencode zamienia takie znaki na kody %.. (w podglądzie: nazwisko=Kosi%C5%84ski), a htmlspecialchars zamienia & w atrybucie na &, jak wymaga HTML. Po kliknięciu PHP sam odkoduje parametry - $_GET["nazwisko"] znów zawiera „Kosiński”. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

index.php PHP zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <h3>Wybierz ucznia z listy:</h3>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
            $query = "SELECT id, imie, nazwisko FROM maturzysta WHERE szkola = 'T3' ORDER BY nazwisko;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                $address = "wynik.php?id=" . $row[0] . "&imie=" . urlencode($row[1]) . "&nazwisko=" . urlencode($row[2]);
                $label = $row[0] . ". " . $row[1] . " " . $row[2];
                echo "<a href='" . htmlspecialchars($address) . "'>" . htmlspecialchars($label) . "</a><br>";
                // echo "<a href='wynik.php?id=$row[0]&imie=$row[1]&nazwisko=$row[2]'>$row[0]. $row[1] $row[2]</a><br>";
            }
        ?>
    </section>
    <section>
    <?php include "bloki.php"; ?>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.php)

Krok 50: Strona wyniku: identyfikator jako liczba, imię z bazy

ok. 4 min

Polecenie z arkusza

Skrypt 3, w pliku wynik.php: w nagłówku drugiego stopnia wyświetla imię i nazwisko, które zostało przesłane do strony metodą GET

Wersja z egzaminu sprawdzona trzema adresami. Wejście na wynik.php bez parametrów daje ostrzeżenia „Undefined array key” i stronę urwaną błędem SQL (WHERE maturzysta_id = ;). Adres wynik.php?id=44&imie=Jan&nazwisko=Kowalski pokazuje nagłówek „Jan Kowalski” nad wynikami Kosińskiego - strona wierzy w to, co stoi w adresie. A Oliwier Danek (38) nie ma w bazie żadnego wyniku i widzi sam nagłówek. Poprawki: (int) z ?? 0, imię i nazwisko pobrane z bazy po identyfikatorze (zapytanie przygotowane mysqli_prepare + mysqli_stmt_bind_param), komunikat „Nie ma takiego ucznia” i „Brak wyników matur tego ucznia”. Podgląd: ten sam Kosiński co wcześniej. Na egzaminie zostaw wersję wcześniejszą - arkusz każe wziąć imię i nazwisko z adresu i tak sprawdza to klucz.

wynik.php PHP zmienione: 23 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Matura</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>System informacji dla maturzystów</h1>
    </header>
    <aside>
        <img src="ma.jpg" alt="Matura">
        <img src="tu.jpg" alt="Matura">
        <img src="ra.jpg" alt="Matura">
    </aside>
    <section>
        <?php
            $connection = mysqli_connect("localhost", "root", "", "matura");
            $id = (int) ($_GET["id"] ?? 0);
            $statement = mysqli_prepare($connection, "SELECT imie, nazwisko FROM maturzysta WHERE id = ?");
            mysqli_stmt_bind_param($statement, "i", $id);
            mysqli_stmt_execute($statement);
            $student = mysqli_fetch_row(mysqli_stmt_get_result($statement));
            if ($student) {
                echo "<h2>" . htmlspecialchars($student[0] . " " . $student[1]) . "</h2>";
                $statement = mysqli_prepare($connection, "SELECT rok, sesja, przedmiot, punkty FROM arkusz JOIN wynik USING (symbol) WHERE maturzysta_id = ?");
                mysqli_stmt_bind_param($statement, "i", $id);
                mysqli_stmt_execute($statement);
                $result = mysqli_stmt_get_result($statement);
                if (mysqli_num_rows($result) == 0) {
                    echo "<p>Brak wyników matur tego ucznia.</p>";
                }
                while ($row = mysqli_fetch_row($result)) {
                    echo "<h3>$row[0] $row[1]</h3>";
                    echo "<p>$row[2]: $row[3]</p>";
                }
            } else {
                echo "<h2>Nie ma takiego ucznia</h2>";
            }
            /* Wersja z egzaminu:
            $id = $_GET["id"];
            $name = $_GET["imie"];
            $surname = $_GET["nazwisko"];
            echo "<h2>$name $surname</h2>";
            $query = "SELECT rok, sesja, przedmiot, punkty FROM arkusz JOIN wynik USING (symbol) WHERE maturzysta_id = $id;";
            $result = mysqli_query($connection, $query);
            while ($row = mysqli_fetch_row($result)) {
                echo "<h3>$row[0] $row[1]</h3>";
                echo "<p>$row[2]: $row[3]</p>";
            }
            */
        ?>
    </section>
    <section>
    <?php include "bloki.php"; ?>
        <?php
            mysqli_close($connection);
        ?>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (wynik.php)

Etap 6: Oddanie pracy
Krok 51 · po tym etapie masz 40 z 40 kryteriów (pkt)
Krok 51: Plik przeglądarka.txt i nagranie płyty
ok. 5 min
Polecenie z arkusza
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.
W folderze z numerem zdającego: import.jpg, index.php, kw1.png - kw5.png, kwerendy.txt, ma.jpg, przeglądarka.txt, ra.jpg, styl.css, tu.jpg, wynik.php (i bloki.php, jeśli zostawiasz wersję z dobrych praktyk). Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik
Google Chrome
Podgląd strony bez zmian - taki jak po kroku 50.

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.

Rozwiązanie krok po kroku: Portal dla maturzystów (Wersja podstawowa)

Etap 1: Baza danych

Krok 1: Baza danych matura

Krok 2: Import tabel z pliku egzamin.sql

Krok 3: Zrzut ekranu import.jpg

Krok 4: Zapytanie 1: uczniowie szkoły T3 według nazwiska

Krok 5: Zapytanie 2: przedmioty bez powtórzeń

Krok 6: Zapytanie 3: najstarszy i najmłodszy rok

Krok 7: Zapytanie 4: uczeń z najlepszą średnią

Krok 8: Zapytanie 5: wyniki ucznia 31 ze złączeniem tabel

Etap 2: Strona HTML

Krok 9: Plik index.php w HTML5

Krok 10: Język strony

Krok 11: Kodowanie polskich znaków

Krok 12: Tytuł strony

Krok 13: Podpięcie arkusza stylów

Krok 14: Bloki: nagłówek, boczny, dwie sekcje, stopka

Krok 15: Nagłówek strony

Krok 16: Blok boczny: trzy grafiki

Krok 17: Druga sekcja: cztery bloki z tą samą klasą

Krok 18: Stopka

Krok 19: Pierwsza sekcja strony głównej

Etap 3: Styl CSS

Krok 20: Plik styl.css: ciało strony

Krok 21: Nagłówek i stopka

Krok 22: Blok boczny

Krok 23: Sekcje: wymiary i paski przewijania

Krok 24: Obrazy

Krok 25: Grafiki jedna pod drugą

Krok 26: Nagłówki kafelków wyśrodkowane

Krok 27: Odnośniki

Krok 28: Odnośnik pod kursorem

Krok 29: Kafelki: kolory, wymiary, cień, obok siebie

Krok 30: Układ bloków zgodny z ilustracją 3

Etap 4: Skrypty PHP

Krok 31: Połączenie z bazą i zamknięcie na końcu

Krok 32: Skrypt 1, Przedmioty: zapytanie 2

Krok 33: Skrypt 1, Przedmioty: nazwy oddzielone spacją

Krok 34: Skrypt 1, Lata: zapytanie 3

Krok 35: Skrypt 1, Lata: dwa lata z myślnikiem

Krok 36: Skrypt 1, Najlepszy wynik: zapytanie 4

Krok 37: Skrypt 1, Najlepszy wynik: średnia ze znakiem %

Krok 38: Skrypt 1, Najgorszy wynik: zapytanie 4 z sortowaniem rosnącym

Krok 39: Skrypt 1, Najgorszy wynik: średnia ze znakiem %

Krok 40: Skrypt 2: zapytanie 1

Krok 41: Skrypt 2: odnośnik z treścią „id. imię nazwisko”

Krok 42: Skrypt 2: adres wynik.php z parametrami GET

Krok 43: Strona wynik.php jako kopia index.php

Krok 44: Skrypt 3: imię i nazwisko z adresu w nagłówku

Krok 45: Skrypt 3: zapytanie 5 dla ucznia z adresu

Krok 46: Skrypt 3: rok i sesja, przedmiot i punkty

Etap 5: Dobre praktyki (poza kluczem)

Krok 47: Kafelki statystyk w jednym pliku bloki.php

Krok 48: Średnia zaokrąglona do dwóch miejsc

Krok 49: Adresy odnośników poprawnie zakodowane

Krok 50: Strona wyniku: identyfikator jako liczba, imię z bazy

Etap 6: Oddanie pracy

Krok 51: Plik przeglądarka.txt i nagranie płyty

Podgląd