E.14-02-21.01-SGStyczeń 2021 · 23 kroki · ok. 57 min · 34 kryteria z klucza

Rozwiązanie krok po kroku: Kręgowce - atlas gatunków (Nowoczesny kod (flex, PDO))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza baza zaimportowana z pliku baza2.sql, cztery zapytania i witryna zwierzeta.php z trzema podstronami, listą ssaków i opisami zwierząt - i tak samo spełnia każde kryterium klucza. Inna jest droga:

semantyczne znaczniki: górny rząd w <header>, menu w <nav>, bloki główne w <main>,
flex zamiast float: <header> i <main> układają swoje bloki w rzędzie, a stopka nie potrzebuje clear. Szerokości 30% i 70% zostają na blokach, bo tam sprawdza je klucz,
zmienne CSS dla dwóch odcieni zieleni z arkusza, menu wyśrodkowane przez align-items,
zapytania z JOIN po nazwie gromady zamiast numerów i z ORDER BY, więc kolejność wierszy jest pewna,
PHP na PDO na górze pliku, przed HTML-em - w treści strony zostają tylko pętle, a każda dana z bazy przechodzi przez htmlspecialchars.

To arkusz E.14 ze stycznia 2021 - kwalifikacji formuły 2012, którą zastąpiła INF.03. Archiwum materialy-02.zip jest do pobrania na stronie arkusza (szczegóły we wstępie wersji podstawowej). Zapytania są wykonane na MariaDB 10.4, a podgląd od kroków z PHP to wynik prawdziwego uruchomienia kodu w PHP 8.2.

Jak liczą się punkty. Klucz ma 34 kryteria (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 26 punktów. Przy każdym kroku jest napisane, które kryteria spełnia; klucz uznaje zarówno MySQLi, jak i PDO.

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

Etap 1: Baza danych

Kroki 1-5 · po tym etapie masz 6 z 34 kryteriów (pkt)

Krok 1: Folder zdającego, archiwum i import bazy baza

Kryteria:

R.1.1 Wykonano import tabel do bazy danych baza , czynność udokumentowano plikiem o nazwie import w formacie PNG. Zrzut zawiera cały obszar ekranu z widocznym paskiem zadań

ok. 4 min

Polecenie z arkusza

Do bazy zaimportuj tabele z pliku baza2.sql z rozpakowanego archiwum. Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL, w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel

Folder na pulpicie nazwany numerem PESEL (w tym rozwiązaniu w jego miejscu stoi Bartosz Bryniarski), do niego archiwum materialy-02.zip rozpakowane z hasłem Zwi3rz@ki. W phpMyAdmin nowa baza baza, karta Import, plik baza2.sql. Plik to wspólny zrzut CKE do kilku zadań - powstaje 12 tabel, a zadanie korzysta z trzech z obrazu 1: zwierzeta, gromady i odzywianie. Zrzut całego ekranu z komunikatem o udanym imporcie zapisz jako import.png (R.1.1).

Relacje z obrazu 1 są w pliku tylko umowne: baza2.sql nie zakłada ograniczeń FOREIGN KEY. Dla zapytań to bez znaczenia - JOIN łączy tabele po wartościach kolumn, a nie po ograniczeniach.

baza2.sql SQL nowy plik

-- phpMyAdmin SQL Dump
-- version 4.7.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Czas generowania: 13 Lis 2017, 10:09
-- Wersja serwera: 10.1.28-MariaDB
-- Wersja PHP: 7.1.10

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Baza danych: `baza`
--

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `dania`
--

CREATE TABLE `dania` (
  `id` int(10) UNSIGNED NOT NULL,
  `typ` int(10) UNSIGNED DEFAULT NULL,
  `nazwa` text,
  `cena` int(10) UNSIGNED DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `dania`
--

INSERT INTO `dania` (`id`, `typ`, `nazwa`, `cena`) VALUES
(1, 1, 'Gazpacho', 20),
(2, 1, 'Krem z warzyw', 25),
(3, 1, 'Gulaszowa ostra', 30),
(4, 2, 'Kaczka i owoc', 30),
(5, 2, 'Kurczak pieczony', 40),
(6, 2, 'wieprzowy przysmak', 35),
(7, 2, 'Mintaj w panierce', 30),
(8, 2, 'Alle kotlet', 30),
(9, 3, 'Owoce morza', 20),
(10, 3, 'Grzybki, warzywka, sos', 15),
(11, 3, 'Orzechy i chipsy', 10),
(12, 3, 'Tatar i jajo', 15),
(13, 3, 'Bukiet warzyw', 10),
(14, 4, 'Sok porzeczkowy', 3),
(15, 4, 'Cola', 3),
(16, 4, 'Woda', 2);

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `gromady`
--

CREATE TABLE `gromady` (
  `id` int(10) UNSIGNED NOT NULL,
  `nazwa` text,
  `opis` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `gromady`
--

INSERT INTO `gromady` (`id`, `nazwa`, `opis`) VALUES
(1, 'ryby', ''),
(2, 'plazy', ''),
(3, 'gady', ''),
(4, 'ptaki', ''),
(5, 'ssaki', '');

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `odzywianie`
--

CREATE TABLE `odzywianie` (
  `id` int(10) UNSIGNED NOT NULL,
  `rodzaj` text,
  `informacja` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `odzywianie`
--

INSERT INTO `odzywianie` (`id`, `rodzaj`, `informacja`) VALUES
(1, 'drapieznik', ''),
(2, 'roslinozerny', ''),
(3, 'padlinozerny', ''),
(4, 'wszystkozerny', '');


-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `ogloszenie`
--

CREATE TABLE `ogloszenie` (
  `id` int(10) UNSIGNED NOT NULL,
  `uzytkownik_id` int(10) UNSIGNED NOT NULL,
  `kategoria` int(10) UNSIGNED DEFAULT NULL,
  `podkategoria` int(10) UNSIGNED DEFAULT NULL,
  `tytul` text,
  `tresc` text
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `ogloszenie`
--

INSERT INTO `ogloszenie` (`id`, `uzytkownik_id`, `kategoria`, `podkategoria`, `tytul`, `tresc`) VALUES
(1, 1, 1, 12, 'Daniel Craig. Biografia', 'Biografia Daniela Craiga, niedrogo sprzedam'),
(2, 1, 1, 13, 'Selekcja', 'Sprzedam: \"Selekcja\" J. Kellermana, niezniszczona'),
(3, 2, 1, 13, 'Buick', 'Sprzedam horror Stephena Kinga w dobrym stanie'),
(4, 2, 1, 14, 'Tytus, Romek i Atomek', 'Ks. IV do sprzedania, stan dobry'),
(5, 2, 2, 0, 'Imagine Dragons', 'Sprzedam dwa CD Imagine Dragons');

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `podzespoly`
--

CREATE TABLE `podzespoly` (
  `id` int(10) UNSIGNED NOT NULL,
  `typy_id` int(10) UNSIGNED NOT NULL,
  `producenci_id` int(10) UNSIGNED NOT NULL,
  `nazwa` text,
  `opis` text,
  `dostepnosc` tinyint(1) DEFAULT NULL,
  `cena` float NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `podzespoly`
--

INSERT INTO `podzespoly` (`id`, `typy_id`, `producenci_id`, `nazwa`, `opis`, `dostepnosc`, `cena`) VALUES
(1, 1, 1, 'Core i5-7640X', 'Procesor Intel Core i5-7640X 4,2 GHz LGA 2066 Box', 1, 1000),
(2, 1, 1, 'Core i3-6300', 'Procesor Intel Core i3-6300 3,8 GHz 4MB cache s. 1151 Box', 1, 575),
(3, 1, 1, 'Core i7-6700K', 'Procesor Intel Core i7-6700K 4,0 GHz 8MB cache s. 1151 Box', 0, 1400),
(4, 1, 2, 'X6 FX-6350', 'Procesor AMD X6 FX-6350 s.AM3+ BOX', 1, 380),
(5, 2, 7, 'Savage', 'RAM HyperX 16GB (2x8GB) DDR3-1866 Dual Chanel Kit Non-ECC CL9 XMP Savage Series HX318C9SRK2/16', 1, 535),
(6, 2, 7, 'Savage', 'HyperX 4GB DDR3-1600 Non-ECC CL9 XMP Savage Series HX316C9SR/4', 0, 150),
(7, 2, 8, 'Signature', 'RAM Patriot Signature DDR3 8GB (2x4GB) 1600 CL9 PSD38G1600KH', 0, 250),
(8, 5, 9, 'GTX 1060', 'Karta graficzna Asus DUAL NVIDIA GeForce GTX 1060 3072MB GDDR5 192b PCI-E x16 v. 3.0 (1594MHz/8008MHz) OC Edition', 1, 1189),
(9, 5, 9, 'GeForce 210', 'Karta graficzna ASUS GeForce 210 1024MB 64bit PCI-E', 0, 145),
(10, 6, 6, 'WD Black', 'Dysk WD Black WD1003FZEX 1TB sATA III 64MB', 0, 315),
(11, 6, 6, 'WD Blue', 'Dysk WD Blue WD10EZEX 1TB sATA III 64MB', 1, 195),
(12, 6, 5, 'AHD650-1TU3-CBK', 'Dysk USB ADATA AHD650-1TU3-CBK 1TB 2.5\' HD650 USB 3.0 Czarny', 1, 210);

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `pracownicy`
--

CREATE TABLE `pracownicy` (
  `id` int(10) UNSIGNED NOT NULL,
  `imie` text,
  `nazwisko` text,
  `stanowisko` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `pracownicy`
--

INSERT INTO `pracownicy` (`id`, `imie`, `nazwisko`, `stanowisko`) VALUES
(1, 'Anna', 'Kowalska', 1),
(2, 'Monika', 'Nowak', 2),
(3, 'Ewelina', 'Nowakowska', 2),
(4, 'Anna', 'Przybylska', 3),
(5, 'Maria', 'Kowal', 3),
(6, 'Ewa', 'Nowacka', 4);

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `typy`
--

CREATE TABLE `typy` (
  `id` int(10) UNSIGNED NOT NULL,
  `kategoria` text,
  `opis` text
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `typy`
--

INSERT INTO `typy` (`id`, `kategoria`, `opis`) VALUES
(1, 'Procesor', NULL),
(2, 'RAM', NULL),
(5, 'karta graficzna', NULL),
(6, 'HDD', NULL);

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `uczniowie`
--

CREATE TABLE `uczniowie` (
  `imie` text,
  `nazwisko` text,
  `wiek` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `uczniowie`
--

INSERT INTO `uczniowie` (`imie`, `nazwisko`, `wiek`) VALUES
('Kamil', 'Ryba', 11),
('Karolina', 'Witecka', 8),
('Karol', 'Rybacki', 9),
('Marina', 'Damiencka', 9);

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `uzytkownik`
--

CREATE TABLE `uzytkownik` (
  `id` int(10) UNSIGNED NOT NULL,
  `imie` text,
  `nazwisko` text,
  `telefon` text,
  `email` text
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `uzytkownik`
--

INSERT INTO `uzytkownik` (`id`, `imie`, `nazwisko`, `telefon`, `email`) VALUES
(1, 'Anna', 'Kowalska', '601601601', '[email protected]'),
(2, 'Jan', 'Nowak', '608608608', '[email protected]'),
(3, 'Jolanta', 'Jasny', '606606606', '[email protected]'),
(4, 'qqq', 'www', '345', 'dsfsdklfs@daskl');

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `wyniki`
--

CREATE TABLE `wyniki` (
  `id` int(10) UNSIGNED NOT NULL,
  `dyscyplina_id` int(10) UNSIGNED NOT NULL,
  `sportowiec_id` int(10) UNSIGNED NOT NULL,
  `wynik` decimal(5,2) DEFAULT NULL,
  `dataUstanowienia` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `wyniki`
--

INSERT INTO `wyniki` (`id`, `dyscyplina_id`, `sportowiec_id`, `wynik`, `dataUstanowienia`) VALUES
(1, 1, 1, '12.40', '2015-10-14'),
(2, 1, 1, '12.00', '2015-10-06'),
(3, 1, 2, '11.80', '2015-10-14'),
(4, 1, 2, '11.90', '2015-10-06'),
(5, 1, 3, '11.50', '2015-10-14'),
(6, 1, 3, '11.56', '2015-10-06'),
(7, 1, 4, '11.70', '2015-10-14'),
(8, 1, 4, '11.67', '2015-10-06'),
(9, 1, 5, '11.30', '2015-10-14'),
(10, 1, 5, '11.52', '2015-10-06'),
(11, 1, 6, '12.10', '2015-10-14'),
(12, 1, 6, '12.00', '2015-10-06'),
(13, 3, 1, '63.00', '2015-11-11'),
(14, 3, 1, '63.60', '2015-10-13'),
(15, 3, 2, '64.00', '2015-11-11'),
(16, 3, 2, '63.60', '2015-10-13'),
(17, 3, 3, '60.00', '2015-11-11'),
(18, 3, 3, '61.60', '2015-10-13'),
(19, 3, 4, '63.50', '2015-11-11'),
(20, 3, 4, '63.60', '2015-10-13'),
(21, 3, 5, '70.00', '2015-10-07'),
(22, 3, 6, '68.00', '2015-10-07');

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `zamowienia`
--

CREATE TABLE `zamowienia` (
  `id` int(10) UNSIGNED NOT NULL,
  `Samochody_id` int(10) UNSIGNED NOT NULL,
  `Klient` text,
  `telefon` text,
  `dataZam` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `zamowienia`
--

INSERT INTO `zamowienia` (`id`, `Samochody_id`, `Klient`, `telefon`, `dataZam`) VALUES
(1, 3, 'Anna Kowalska', '111222333', '2016-02-15'),
(2, 6, 'Jan Nowakowski', '222111333', '2016-02-15'),
(3, 8, 'Marcin Kolwal', '333111222', '2016-02-15');

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `zwierzeta`
--

CREATE TABLE `zwierzeta` (
  `id` int(10) UNSIGNED NOT NULL,
  `Gromady_id` int(10) UNSIGNED NOT NULL,
  `Odzywianie_id` int(10) UNSIGNED NOT NULL,
  `gatunek` text,
  `wystepowanie` text,
  `czy_zagrozony` tinyint(1) DEFAULT NULL,
  `obraz` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `zwierzeta`
--

INSERT INTO `zwierzeta` (`id`, `Gromady_id`, `Odzywianie_id`, `gatunek`, `wystepowanie`, `czy_zagrozony`, `obraz`) VALUES
(1, 1, 1, 'Sum pospolity', 'Eurazja', 0, 'sum.jpg'),
(2, 1, 1, 'Jesiotr zachodni', 'Europa', 1, 'jesiotr.jpg'),
(3, 4, 4, 'Wrona siwa', 'Europa', 0, 'wrona.jpg'),
(4, 4, 1, 'Puszczyk zwyczajny', 'Eurazja', 0, 'puszczyk.jpg'),
(5, 4, 4, 'Sroka zwyczajna', 'Eurazja', 0, 'sroka.jpg'),
(6, 5, 1, 'Wilk szary', 'Europa, Ameryka', 0, 'wilk.jpg'),
(7, 5, 3, 'Hiena brunatna', 'Afryka', 0, 'hiena.jpg'),
(8, 5, 2, 'Sarna europejska', 'Europa', 0, 'sarna.jpg'),
(9, 5, 1, 'Dingo australijski', 'Australia', 1, 'dingo.jpg');

--
-- Indeksy dla zrzutów tabel
--

--
-- Indexes for table `dania`
--
ALTER TABLE `dania`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `gromady`
--
ALTER TABLE `gromady`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `odzywianie`
--
ALTER TABLE `odzywianie`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `ogloszenie`
--
ALTER TABLE `ogloszenie`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `podzespoly`
--
ALTER TABLE `podzespoly`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `pracownicy`
--
ALTER TABLE `pracownicy`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `typy`
--
ALTER TABLE `typy`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `uzytkownik`
--
ALTER TABLE `uzytkownik`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `wyniki`
--
ALTER TABLE `wyniki`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `zamowienia`
--
ALTER TABLE `zamowienia`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `zwierzeta`
--
ALTER TABLE `zwierzeta`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT dla tabeli `dania`
--
ALTER TABLE `dania`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=17;

--
-- AUTO_INCREMENT dla tabeli `gromady`
--
ALTER TABLE `gromady`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

--
-- AUTO_INCREMENT dla tabeli `odzywianie`
--
ALTER TABLE `odzywianie`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

--
-- AUTO_INCREMENT dla tabeli `ogloszenie`
--
ALTER TABLE `ogloszenie`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

--
-- AUTO_INCREMENT dla tabeli `podzespoly`
--
ALTER TABLE `podzespoly`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=13;

--
-- AUTO_INCREMENT dla tabeli `pracownicy`
--
ALTER TABLE `pracownicy`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

--
-- AUTO_INCREMENT dla tabeli `typy`
--
ALTER TABLE `typy`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

--
-- AUTO_INCREMENT dla tabeli `uzytkownik`
--
ALTER TABLE `uzytkownik`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

--
-- AUTO_INCREMENT dla tabeli `wyniki`
--
ALTER TABLE `wyniki`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=23;

--
-- AUTO_INCREMENT dla tabeli `zamowienia`
--
ALTER TABLE `zamowienia`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

--
-- AUTO_INCREMENT dla tabeli `zwierzeta`
--
ALTER TABLE `zwierzeta`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Podgląd strony po tym kroku

Krok 2: Zapytanie 1: ssaki po nazwie gromady
Kryteria: ,
R.1.2 Zapisano plik kwerendy.txt z zapytaniami SQL, zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania
R.1.3 Utworzono zapytanie 1 wybierające jedynie pola gatunek i obraz z tabeli zwierzeta jedynie dla ssaków. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5; możliwe również z JOIN do gromady i warunkiem gromady.id = 5 lub nazwa = "ssaki" oraz wynik działania udokumentowano zrzutem, na którym widoczne są dokładnie 4 rekordy dla wilka, hieny, sarny, dingo, wyświetlone jedynie kolumny gatunek, obraz
ok. 3 min
Polecenie z arkusza
Zapytanie 1: wybierające jedynie pola gatunek i obraz z tabeli zwierzeta jedynie dla ssaków
FROM zwierzeta AS z INNER JOIN gromady AS g ON g.id = z.Gromady_id - każde zwierzę z jego gromadą; aliasy z i g skracają nazwy tabel w całym zapytaniu,
WHERE g.nazwa = 'ssaki' - warunek po nazwie gromady, a nie po numerze 5: zapytanie czyta się bez zaglądania do tabeli gromady,
SELECT z.gatunek, z.obraz - jedynie dwa pola z tabeli zwierzeta,
ORDER BY z.id - bez sortowania kolejność wierszy złączenia zależy od planu wykonania i może się zmienić.
Wynik: Wilk szary, Hiena brunatna, Sarna europejska, Dingo australijski z plikami zdjęć (R.1.3). Zapytanie trafia do nowego pliku kwerendy.txt (R.1.2), a zrzut do kw1.png. Klucz dopuszcza wprost zarówno warunek Gromady_id = 5, jak i JOIN z warunkiem na nazwie.
kwerendy.txt Tekst nowy plik
-- Zapytanie 1 SELECT z.gatunek, z.obraz FROM zwierzeta AS z INNER JOIN gromady AS g ON g.id = z.Gromady_id WHERE g.nazwa = 'ssaki' ORDER BY z.id;
Podgląd strony po tym kroku
Krok 3: Zapytanie 2: ryby, ptaki i ssaki
Kryteria:
R.1.4 Utworzono zapytanie 2 wybierające jedynie pola gatunek, wystepowanie, czy_zagrozony z tabeli zwierzeta dla tych zwierząt, które są rybami lub ptakami lub ssakami. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5; możliwe również z JOIN do gromady i warunek na polu gromady.id lub nazwa oraz wynik działania udokumentowano zrzutem, na którym widoczne są wszystkie (9) rekordy tabeli zwierzeta ; jedynie pola gatunek, wystepowanie, czy_zagrozony
ok. 2 min
Polecenie z arkusza
Zapytanie 2: wybierające jedynie pola gatunek, wystepowanie, czy_zagrozony z tabeli zwierzeta dla tych zwierząt, które są rybami lub ptakami lub ssakami
To samo złączenie, a warunek g.nazwa IN ('ryby', 'ptaki', 'ssaki') - zapis „lub, lub, lub” w jednym wyrażeniu, krótszy niż trzy warunki z OR. Wynik: wszystkie 9 zwierząt tabeli, bo w bazie nie ma płazów ani gadów (R.1.4). Zrzut: kw2.png.
kwerendy.txt Tekst zmienione: 7 linii
-- Zapytanie 1 SELECT z.gatunek, z.obraz FROM zwierzeta AS z INNER JOIN gromady AS g ON g.id = z.Gromady_id WHERE g.nazwa = 'ssaki' ORDER BY z.id; -- Zapytanie 2 SELECT z.gatunek, z.wystepowanie, z.czy_zagrozony FROM zwierzeta AS z INNER JOIN gromady AS g ON g.id = z.Gromady_id WHERE g.nazwa IN ('ryby', 'ptaki', 'ssaki') ORDER BY z.id;
Podgląd strony po tym kroku
Krok 4: Zapytanie 3: gatunek z nazwą gromady
Kryteria:
R.1.5 Utworzono zapytanie 3 wybierające jedynie pola id i gatunek z tabeli zwierzeta oraz odpowiadające im pole nazwa z tabeli gromady . W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT zwierzeta.id, gatunek, nazwa FROM zwierzeta JOIN gromady ON gromady.id = gromady_id; możliwe też INNER JOIN lub SELECT zwierzeta.id, gatunek, nazwa FROM zwierzeta, gromady WHERE gromady.id = gromady_id; oraz wynik działania udokumentowano zrzutem, na którym widoczne są jedynie pola id, gatunek, nazwa, jest dokładnie 9 rekordów o id 1-9
ok. 2 min
Polecenie z arkusza
Zapytanie 3: wybierające jedynie pola id i gatunek z tabeli zwierzeta oraz odpowiadające im pole nazwa z tabeli gromady. Należy posłużyć się relacją
SELECT z.id, z.gatunek, g.nazwa z tym samym INNER JOIN - relacja zwierzę → gromada. Przy aliasach każda kolumna ma przedrostek tabeli, więc nie ma pytania, z której tabeli pochodzi id. Wynik: 9 rekordów o id 1-9 z nazwami gromad (R.1.5). Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 6 linii
-- Zapytanie 1 SELECT z.gatunek, z.obraz FROM zwierzeta AS z INNER JOIN gromady AS g ON g.id = z.Gromady_id WHERE g.nazwa = 'ssaki' ORDER BY z.id; -- Zapytanie 2 SELECT z.gatunek, z.wystepowanie, z.czy_zagrozony FROM zwierzeta AS z INNER JOIN gromady AS g ON g.id = z.Gromady_id WHERE g.nazwa IN ('ryby', 'ptaki', 'ssaki') ORDER BY z.id; -- Zapytanie 3 SELECT z.id, z.gatunek, g.nazwa FROM zwierzeta AS z INNER JOIN gromady AS g ON g.id = z.Gromady_id ORDER BY z.id;
Podgląd strony po tym kroku
Krok 5: Zapytanie 4: usunięcie kolumny opis
Kryteria:
R.1.6 Utworzono zapytanie 4 usuwające kolumnę opis z tabeli gromady . W pliku z kwerendami lub na zrzucie istnieje zapis np.: ALTER TABLE gromady DROP COLUMN opis; możliwe również bez COLUMN oraz wynik działania zapytania udokumentowano zrzutem z widocznym poprawnym zapytaniem lub strukturą tabeli z usuniętą kolumną
ok. 2 min
Polecenie z arkusza
Zapytanie 4: usuwające kolumnę opis z tabeli gromady
ALTER TABLE gromady DROP COLUMN opis; - zmiana struktury tabeli. Słowo COLUMN jest opcjonalne, ale czytelniej mówi, co usuwasz. Na zrzucie kw4.png zapytanie z komunikatem o wykonaniu albo struktura tabeli z kolumnami id i nazwa (R.1.6). Zapytania 1-3 nie korzystają z kolumny opis, więc działają dalej.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT z.gatunek, z.obraz FROM zwierzeta AS z INNER JOIN gromady AS g ON g.id = z.Gromady_id WHERE g.nazwa = 'ssaki' ORDER BY z.id; -- Zapytanie 2 SELECT z.gatunek, z.wystepowanie, z.czy_zagrozony FROM zwierzeta AS z INNER JOIN gromady AS g ON g.id = z.Gromady_id WHERE g.nazwa IN ('ryby', 'ptaki', 'ssaki') ORDER BY z.id; -- Zapytanie 3 SELECT z.id, z.gatunek, g.nazwa FROM zwierzeta AS z INNER JOIN gromady AS g ON g.id = z.Gromady_id ORDER BY z.id; -- Zapytanie 4 ALTER TABLE gromady DROP COLUMN opis;
Podgląd strony po tym kroku
Etap 2: Strona zwierzeta.php
Kroki 6-10 · po tym etapie masz 16 z 34 kryteriów (pkt)
Krok 6: Szkielet zwierzeta.php: kodowanie, tytuł i arkusz stylów
Kryteria: , ,
R.2.2 Witrynę internetową zapisano w pliku zwierzeta.php oraz zastosowano właściwy standard kodowania polskich znaków
R.2.3 Nadano tytuł strony: "Zwierzęta”
R.3.4 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl2.css, formatowanie pochodzi jedynie z tego arkusza Uwaga: kryterium to nie jest spełnione również, gdy zdający źle przypisał co najmniej jeden selektor do bloku (np. kropka zamiast #)
ok. 2 min
Polecenie z arkusza
Składa się ze stron o nazwach zwierzeta.php oraz ptaki.html, ryby.html, ssaki.html Zastosowany właściwy standard kodowania polskich znaków Tytuł strony widoczny na karcie przeglądarki: „Zwierzęta” Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony
plik zwierzeta.php z <meta charset="UTF-8"> - kodowanie polskich znaków (R.2.2),
<meta name="viewport"> - na telefonie strona nie udaje szerokiego ekranu,
<title>Zwierzęta</title> - napis na karcie (R.2.3),
<link rel="stylesheet" href="styl2.css"> - całe formatowanie z pliku CSS, bez atrybutów style w HTML-u (R.3.4).
zwierzeta.php PHP nowy plik
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Zwierzęta</title> <link rel="stylesheet" href="styl2.css"> </head> <body> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)
Krok 7: Podstrony w budowie
Kryteria:
R.2.1 Zapisano pliki ptaki.html , ryby.html , ssaki.html z tekstem "Strona w trakcie budowy"
ok. 2 min
Polecenie z arkusza
W plikach ptaki.html, ryby.html, ssaki.html należy umieścić tekst „Strona w trakcie budowy”, bez jakichkolwiek znaczników HTML
Trzy pliki z jednym zdaniem Strona w trakcie budowy i niczym więcej - arkusz zabrania znaczników, więc nie ma nawet <!DOCTYPE> (R.2.1). Przeglądarka pokaże sam tekst. Podgląd: ryby.html.
ptaki.html HTML nowy plik
Strona w trakcie budowy
ryby.html HTML nowy plik
Strona w trakcie budowy
ssaki.html HTML nowy plik
Strona w trakcie budowy
Podgląd strony po tym kroku (ryby.html)
Krok 8: Górny rząd w header, bloki główne w main
Kryteria: ,
R.2.4 Wygląd strony zdefiniowano dzieląc ją na bloki: na górze blok logo i blok menu, poniżej dwa bloki główne: lewy i prawy, na dole blok stopki. Zastosowano znaczniki sekcji
R.3.2 W bloku menu zapisano trzy odnośniki, kliknięcie odnośnika „RYBY” powoduje otworzenie podstrony ryby.html , „PTAKI” - ptaki.html oraz „SSAKI” - ssaki.html (wystarczą 2 odnośniki z trzech)
ok. 3 min
Polecenie z arkusza
Podział strony na bloki: na górze blok logo i blok menu, poniżej dwa bloki główne: lewy i prawy, na dole blok stopki. Podział zrealizowany za pomocą znaczników sekcji tak, aby wygląd układu bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2
Każdy blok ma znacznik, który mówi, czym jest:
<header> - nagłówek strony, a w nim blok logo (<section id="logo"> z <h1>) i <nav id="menu"> - znacznik przeznaczony właśnie na menu nawigacyjne,
<main> - główna treść strony z blokami left i right,
<footer> - stopka (R.2.4).
<header> i <main> są zarazem pojemnikami rzędów - w CSS każdy ułoży swoje dwa bloki obok siebie. Odnośniki menu prowadzą do trzech podstron z poprzedniego kroku (R.3.2).
zwierzeta.php PHP zmienione: 18 linii
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Zwierzęta</title> <link rel="stylesheet" href="styl2.css"> </head> <body> <header> <section id="logo"> <h1>KRĘGOWCE</h1> </section> <nav id="menu"> <a href="ryby.html">RYBY</a> <a href="ptaki.html">PTAKI</a> <a href="ssaki.html">SSAKI</a> </nav> </header> <main> <section id="left"> </section> <section id="right"> </section> </main> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)
Krok 9: Blok lewy: nagłówek, lista i obraz
Kryteria: , ,
R.2.5 W bloku logo zapisano nagłówek h1: "KRĘGOWCE" oraz w bloku głównym - lewym zapisano nagłówek h2: "SSAKI"
R.2.6 W bloku głównym - lewym umieszczono obraz wilk.jpg z tekstem alternatywnym "Wilk szary, gromada ssaki"
R.2.7 W bloku głównym - lewym zapisano listę punktowaną (nieuporządkowaną) (w skrypcie lub HTML), zastosowano znaczniki <ul> i <li> oraz ich zamknięcia
ok. 2 min
Polecenie z arkusza
Zawartość bloku głównego – lewego: Nagłówek drugiego stopnia o treści: „SSAKI” Lista punktowana (nieuporządkowana) a w niej efekt wykonania skryptu nr 1 Obraz wilk.jpg z rozpakowanego wcześniej archiwum, z tekstem alternatywnym: „Wilk szary, gromada ssaki”
<h2>SSAKI</h2> - razem z <h1>KRĘGOWCE</h1> daje R.2.5,
pusta lista <ul> - elementy <li> wypisze skrypt (R.2.7),
<img> z tekstem alternatywnym z arkusza (R.2.6) oraz width i height - przeglądarka zna proporcje obrazu, zanim go pobierze, i rezerwuje na niego miejsce, więc treść nie podskakuje przy ładowaniu.
zwierzeta.php PHP zmienione: 4 linie
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Zwierzęta</title> <link rel="stylesheet" href="styl2.css"> </head> <body> <header> <section id="logo"> <h1>KRĘGOWCE</h1> </section> <nav id="menu"> <a href="ryby.html">RYBY</a> <a href="ptaki.html">PTAKI</a> <a href="ssaki.html">SSAKI</a> </nav> </header> <main> <section id="left"> <h2>SSAKI</h2> <ul> </ul> <img src="wilk.jpg" alt="Wilk szary, gromada ssaki" width="480" height="283"> </section> <section id="right"> </section> </main> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)

Krok 10: Stopka

Kryteria:

R.2.8 W stopce zapisano tekst "Stronę o zwierzętach przygotował: " oraz wstawiono numer PESEL

ok. 1 min

Polecenie z arkusza

Zawartość stopki: napis o treści „Stronę o zwierzętach przygotował: ”, dalej wstawiony numer PESEL zdającego

Na egzaminie po dwukropku stoi numer PESEL, tu imię i nazwisko autora - Bartosz Bryniarski (R.2.8).

zwierzeta.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <section id="logo">
            <h1>KRĘGOWCE</h1>
        </section>
        <nav id="menu">
            <a href="ryby.html">RYBY</a>
            <a href="ptaki.html">PTAKI</a>
            <a href="ssaki.html">SSAKI</a>
        </nav>
    </header>
    <main>
        <section id="left">
            <h2>SSAKI</h2>
            <ul>
            </ul>
            <img src="wilk.jpg" alt="Wilk szary, gromada ssaki" width="480" height="283">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Etap 3: Styl CSS
Kroki 11-16 · po tym etapie masz 26 z 34 kryteriów (pkt)
Krok 11: Zmienne z kolorami i krój Tahoma
Kryteria:
R.4.1 Ustawiono domyślny krój czcionki dla całej strony na Tahoma (dla selektora * lub body, lub html, lub kontenera całej strony)
ok. 2 min
Polecenie z arkusza
Domyślne dla całej strony: krój czcionki Tahoma
Arkusz używa dwóch odcieni zieleni, każdego w dwóch blokach. Zmienne CSS w selektorze :root nazywają je raz, a reguły odczytują je funkcją var(--dark-green) - zmiana odcienia to jeden wpis.
font-family: Tahoma, sans-serif w body - krój dla całej strony (R.4.1) z zapasowym krojem bezszeryfowym na systemach bez Tahomy.
styl2.css CSS nowy plik
:root { --dark-green: #28C7A8; --light-green: #78E3CE; } body { font-family: Tahoma, sans-serif; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 12: Górny rząd: logo i menu obok siebie
ok. 2 min
Polecenie z arkusza
Dla bloku logo: kolor tła #28C7A8, wyrównanie tekstu do środka, wysokość 100 px, szerokość 30% Dla bloku menu: kolor tła #78E3CE, wysokość 100 px, szerokość 70%
display: flex na <header> (i od razu na <main>) ustawia bloki pojemnika w jednym rzędzie - bez float, więc nic nie trzeba potem „czyścić”.
Szerokości 30% i 70% stoją na blokach, bo tam sprawdza je klucz. Siatka (grid-template-columns: 30% 70%) dałaby ten sam wygląd, ale klucz z 2021 roku ocenia szerokość bloku - stąd flex, który tylko układa.
styl2.css CSS zmienione: 18 linii
:root { --dark-green: #28C7A8; --light-green: #78E3CE; } body { font-family: Tahoma, sans-serif; } header, main { display: flex; } #logo { background-color: var(--dark-green); text-align: center; height: 100px; width: 30%; } #menu { background-color: var(--light-green); height: 100px; width: 70%; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 13: Bloki główne
Kryteria: , ,
R.3.1 Wygląd układu bloków po uruchomieniu strony w przeglądarce jest w pełni zgodny z Obrazem 2 w arkuszu egzaminacyjnym
R.4.4 Ustawiono wysokość obu górnych bloków na 100px oraz obu głównych bloków na 850px
R.4.5 Ustawiono szerokość bloku logo i bloku głównego lewego na 30% oraz bloku menu i głównego prawego na 70%
ok. 2 min
Polecenie z arkusza
Dla bloku głównego – lewego: kolor tła #78E3CE, wysokość 850 px, szerokość 30% Dla bloku głównego – prawego: kolor tła #28C7A8, wysokość 850 px, szerokość 70%
Bloki w <main> stoją w rzędzie, tak jak logo i menu. Wysokości 100 i 850 px (R.4.4), szerokości 30% i 70% (R.4.5), układ jak na obrazie 2 (R.3.1).
styl2.css CSS zmienione: 12 linii
:root { --dark-green: #28C7A8; --light-green: #78E3CE; } body { font-family: Tahoma, sans-serif; } header, main { display: flex; } #logo { background-color: var(--dark-green); text-align: center; height: 100px; width: 30%; } #menu { background-color: var(--light-green); height: 100px; width: 70%; } #left { background-color: var(--light-green); height: 850px; width: 30%; } #right { background-color: var(--dark-green); height: 850px; width: 70%; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 14: Stopka
Kryteria: , ,
R.4.2 Ustawiono kolor tła #28C7A8 dla bloku logo i głównego - prawego oraz #78E3CE dla bloku menu i głównego - lewego oraz czarny dla stopki
R.4.3 Ustawiono biały kolor czcionki dla stopki
R.4.6 Ustawiono wyrównanie tekstu do środka dla bloku logo oraz wyrównanie tekstu do prawej strony dla stopki
ok. 1 min
Polecenie z arkusza
Dla stopki: czarny kolor tła, biały kolor czcionki, wyrównanie tekstu do prawej strony
Stopka stoi pod <main> sama z siebie. Kolory tła wszystkich bloków (R.4.2), biała czcionka stopki (R.4.3), wyrównanie w logo i stopce (R.4.6).
styl2.css CSS zmienione: 6 linii
:root { --dark-green: #28C7A8; --light-green: #78E3CE; } body { font-family: Tahoma, sans-serif; } header, main { display: flex; } #logo { background-color: var(--dark-green); text-align: center; height: 100px; width: 30%; } #menu { background-color: var(--light-green); height: 100px; width: 70%; } #left { background-color: var(--light-green); height: 850px; width: 30%; } #right { background-color: var(--dark-green); height: 850px; width: 70%; } footer { background-color: black; color: white; text-align: right; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 15: Menu: odnośniki wyśrodkowane w pionie, kolory i najechanie kursorem
Kryteria: , ,
R.4.7 Ustawiono styl jedynie dla odnośników z bloku menu (np. za pomocą klasy lub potomka tego bloku): zielony kolor tła, pomarańczowy kolor czcionki, marginesy wewnętrzne (padding): 10px, 40px, 10px, 40px (poprawne również padding: 10px 40px;)
R.4.8 Odnośniki w bloku menu są wyśrodkowane w pionie względem bloku (np. line-height: 100px; lub innym sposobem)
R.4.9 Po najechaniu kursorem na odnośnik menu jego tło zmienia się na kolor pomarańczowy, a czcionka na kolor zielony (np. za pomocą pseudoklasy hover)
ok. 3 min
Polecenie z arkusza
Dla odnośników stanowiących menu (inne odnośniki pozostają bez zmian): zielony kolor tła, pomarańczowy kolor czcionki, marginesy wewnętrzne, kolejno: 10 px, 40 px, 10 px, 40 px. Odnośniki powinny być wyśrodkowane w pionie względem bloku menu. Po najechaniu kursorem na odnośnik stanowiący menu jego tło zmienia się na kolor pomarańczowy, a czcionka na kolor zielony
<nav id="menu"> też staje się pojemnikiem flex, a align-items: center wyśrodkowuje odnośniki w pionie w bloku o wysokości 100 px (R.4.8). Nie trzeba dobierać line-height do wysokości bloku,
gap: 5px - odstęp między odnośnikami, niezależny od spacji w kodzie HTML,
#menu a - selektor potomka, tylko odnośniki menu (odnośniki ssaków zostają domyślne); padding: 10px 40px to krótszy zapis 10, 40, 10, 40 px (R.4.7),
:hover zamienia kolory miejscami (R.4.9).
styl2.css CSS zmienione: 14 linii
:root { --dark-green: #28C7A8; --light-green: #78E3CE; } body { font-family: Tahoma, sans-serif; } header, main { display: flex; } #logo { background-color: var(--dark-green); text-align: center; height: 100px; width: 30%; } #menu { background-color: var(--light-green); height: 100px; width: 70%; display: flex; align-items: center; gap: 5px; } #left { background-color: var(--light-green); height: 850px; width: 30%; } #right { background-color: var(--dark-green); height: 850px; width: 70%; } footer { background-color: black; color: white; text-align: right; } #menu a { background-color: green; color: orange; padding: 10px 40px; } #menu a:hover { background-color: orange; color: green; }
Podgląd strony po tym kroku (zwierzeta.php)

Krok 16: Obraz dopasowany do bloku (poza arkuszem)

ok. 1 min

wilk.jpg ma 480 px szerokości, a blok lewy przy ekranie 1280 px - ok. 380 px. max-width: 100% nie pozwala obrazowi wyjść poza blok, a height: auto przelicza wysokość z proporcji (bez tego atrybut height="283" zostawiłby obraz spłaszczony). Klucz tego nie ocenia.

styl2.css CSS zmienione: 5 linii

:root {
    --dark-green: #28C7A8;
    --light-green: #78E3CE;
}

body {
    font-family: Tahoma, sans-serif;
}

header,
main {
    display: flex;
}

#logo {
    background-color: var(--dark-green);
    text-align: center;
    height: 100px;
    width: 30%;
}

#menu {
    background-color: var(--light-green);
    height: 100px;
    width: 70%;
    display: flex;
    align-items: center;
    gap: 5px;
}

#left {
    background-color: var(--light-green);
    height: 850px;
    width: 30%;
}

#right {
    background-color: var(--dark-green);
    height: 850px;
    width: 70%;
}

footer {
    background-color: black;
    color: white;
    text-align: right;
}

#menu a {
    background-color: green;
    color: orange;
    padding: 10px 40px;
}

#menu a:hover {
    background-color: orange;
    color: green;
}

#left img {
    max-width: 100%;
    height: auto;
}

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

Etap 4: Skrypty PHP

Kroki 17-21 · po tym etapie masz 34 z 34 kryteriów (pkt)

Krok 17: Skrypt na górze pliku i połączenie PDO z bazą baza

Kryteria:

R.5.1 Skrypt realizuje połączenie z serwerem bazy danych i wybór bazy o nazwie baza

ok. 4 min

Polecenie z arkusza

Napisany w języku PHP, umieszczony w pliku zwierzeta.php Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie baza

Cały kod PHP stoi na samej górze zwierzeta.php, przed <!DOCTYPE html>: najpierw pobiera dane, a HTML tylko je wypisuje.

e() - krótka funkcja z htmlspecialchars, przez którą przejdzie każdy tekst z bazy wypisany na stronie; ?string i rzutowanie (string) przyjmują też puste pole (NULL),
new PDO(...) - serwer localhost, baza baza w parametrze dbname, kodowanie utf8mb4, użytkownik root i puste hasło: połączenie z serwerem i wybór bazy w jednym wywołaniu (R.5.1),
ERRMODE_EXCEPTION - każdy błąd bazy rzuca wyjątek; try / catch zamienia go na zwykłe zdanie zamiast komunikatu PHP z danymi serwera,
FETCH_ASSOC - wiersze jako tablice z nazwami kolumn: $row['gatunek'] zamiast $row[0].

Klucz uznaje zarówno MySQLi, jak i PDO. Od tego kroku podgląd to wynik prawdziwego uruchomienia w PHP 8.2.

zwierzeta.php PHP zmienione: 16 linii

<?php
function e(?string $text): string
{
    return htmlspecialchars((string) $text, ENT_QUOTES, 'UTF-8');
}

$message = '';
try {
    $pdo = new PDO('mysql:host=localhost;dbname=baza;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    $message = 'Nie udało się pobrać danych z bazy, spróbuj ponownie za chwilę.';
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <section id="logo">
            <h1>KRĘGOWCE</h1>
        </section>
        <nav id="menu">
            <a href="ryby.html">RYBY</a>
            <a href="ptaki.html">PTAKI</a>
            <a href="ssaki.html">SSAKI</a>
        </nav>
    </header>
    <main>
        <section id="left">
            <h2>SSAKI</h2>
            <ul>
            </ul>
            <img src="wilk.jpg" alt="Wilk szary, gromada ssaki" width="480" height="283">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Krok 18: Skrypt 1: zapytanie 1 i lista odnośników

Kryteria: , ,

R.3.3 Lista z bloku głównego - lewego zawiera odnośniki, kliknięcie przynajmniej jednego powoduje wyświetlenie obrazu

R.5.3 Skrypt nr 1 wysyła do bazy zapytanie 1

R.5.4 Skrypt nr 1 wyświetla w elementach listy nazwy gatunków zwrócone zapytaniem 1, które są odnośnikami do odpowiadających im obrazów. Kliknięcie elementu "Wilk szary" otwiera obraz wilk.jpg , "Hiena brunatna" - hiena.jpg , "Sarna europejska" - sarna.jpg , "Dingo australijski" - dingo.jpg . Zarówno nazwy gatunków jak i nazwy plików muszą być pobrane z bazy danych

ok. 4 min

Polecenie z arkusza

Skrypt wykorzystuje obrazy z rozpakowanego archiwum Skrypt wysyła do bazy zapytanie numer 1 z pliku kwerendy.txt Następnie wypisuje w elementach listy z bloku głównego – lewego zwrócone zapytaniem nazwy gatunków, które są odnośnikami do odpowiadających im obrazów. Na przykład dla wyników SQL: Wilk szary, wilk.jpg, zostanie zapisany odnośnik do pliku wilk.jpg o treści „Wilk szary” w elemencie listy

$pdo->query(...) - zapytanie 1 z kwerendy.txt bez żadnych danych z zewnątrz, więc nie musi być przygotowane (R.5.3). Napisy połączone kropką to te same wiersze zapytania co w pliku,
fetchAll() - od razu wszystkie wiersze w tablicy $mammals.

W liście <ul> pętla foreach wypisuje każdy wiersz jako <li> z odnośnikiem: plik zdjęcia w href, gatunek jako treść - oba z bazy, przez e() (R.5.4). Zapis <?= … ?> to skrót od <?php echo … ?>, a składnia foreach (...): / endforeach; czyta się w HTML-u łatwiej niż nawiasy klamrowe. Zdjęcia z archiwum leżą obok strony, więc kliknięcie gatunku otwiera jego zdjęcie (R.3.3).

zwierzeta.php PHP zmienione: 9 linii

<?php
function e(?string $text): string
{
    return htmlspecialchars((string) $text, ENT_QUOTES, 'UTF-8');
}

$mammals = [];
$message = '';
try {
    $pdo = new PDO('mysql:host=localhost;dbname=baza;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
    $mammals = $pdo->query("SELECT z.gatunek, z.obraz"
        . " FROM zwierzeta AS z"
        . " INNER JOIN gromady AS g ON g.id = z.Gromady_id"
        . " WHERE g.nazwa = 'ssaki'"
        . " ORDER BY z.id;")->fetchAll();
} catch (PDOException $exception) {
    $message = 'Nie udało się pobrać danych z bazy, spróbuj ponownie za chwilę.';
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <section id="logo">
            <h1>KRĘGOWCE</h1>
        </section>
        <nav id="menu">
            <a href="ryby.html">RYBY</a>
            <a href="ptaki.html">PTAKI</a>
            <a href="ssaki.html">SSAKI</a>
        </nav>
    </header>
    <main>
        <section id="left">
            <h2>SSAKI</h2>
            <ul>
                <?php foreach ($mammals as $mammal): ?>
                <li><a href="<?= e($mammal['obraz']) ?>"><?= e($mammal['gatunek']) ?></a></li>
                <?php endforeach; ?>
            </ul>
            <img src="wilk.jpg" alt="Wilk szary, gromada ssaki" width="480" height="283">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Krok 19: Skrypt 2: zapytanie 2 i dwa akapity o każdym zwierzęciu

Kryteria: ,

R.5.5 Skrypt nr 2 wysyła do bazy zapytanie 2

R.5.6 Skrypt nr 2 wyświetla w bloku głównym – prawym zwrócone zapytaniem dane w dwóch akapitach wg wzorca: <nazwa gatunku> Występowanie: <wystepowanie>, <informacja o zagrożeniu> <informacja o zagrożeniu> to tekst „gatunek nie jest zagrożony” lub „gatunek jest zagrożony”. Wszystkie dane są pobrane z bazy danych

ok. 4 min

Polecenie z arkusza

Skrypt wysyła do bazy zapytanie numer 2 z pliku kwerendy.txt Następnie wypisuje w bloku głównym – prawym zwrócone zapytaniem dane w sposób: W akapicie pierwszym (paragrafie) jest wypisywana nazwa gatunku W akapicie drugim jest wypisywany tekst: „Występowanie: <wystepowanie>, <informacja o zagrożeniu>”, gdzie <wystepowanie> oznacza wartość pola wystepowanie tabeli zwierzeta, natomiast <informacja o zagrożeniu> oznacza tekst: „gatunek nie jest zagrożony” lub „gatunek jest zagrożony” w zależności od wartości pola czy_zagrozony

Drugie zapytanie w tym samym bloku try - wynik w tablicy $animals (R.5.5). W bloku prawym pętla foreach wypisuje o każdym zwierzęciu dwa akapity:

gatunek,
„Występowanie: ” z wartością pola i informacją o zagrożeniu. Operator warunkowy warunek ? a : b wybiera jeden z dwóch tekstów w miejscu wypisania: 1 w czy_zagrozony daje „gatunek jest zagrożony”, 0 (i puste pole) - „gatunek nie jest zagrożony”.

Podgląd: zagrożone są Jesiotr zachodni i Dingo australijski (R.5.6).

zwierzeta.php PHP zmienione: 10 linii

<?php
function e(?string $text): string
{
    return htmlspecialchars((string) $text, ENT_QUOTES, 'UTF-8');
}

$mammals = [];
$animals = [];
$message = '';
try {
    $pdo = new PDO('mysql:host=localhost;dbname=baza;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
    $mammals = $pdo->query("SELECT z.gatunek, z.obraz"
        . " FROM zwierzeta AS z"
        . " INNER JOIN gromady AS g ON g.id = z.Gromady_id"
        . " WHERE g.nazwa = 'ssaki'"
        . " ORDER BY z.id;")->fetchAll();
    $animals = $pdo->query("SELECT z.gatunek, z.wystepowanie, z.czy_zagrozony"
        . " FROM zwierzeta AS z"
        . " INNER JOIN gromady AS g ON g.id = z.Gromady_id"
        . " WHERE g.nazwa IN ('ryby', 'ptaki', 'ssaki')"
        . " ORDER BY z.id;")->fetchAll();
} catch (PDOException $exception) {
    $message = 'Nie udało się pobrać danych z bazy, spróbuj ponownie za chwilę.';
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <section id="logo">
            <h1>KRĘGOWCE</h1>
        </section>
        <nav id="menu">
            <a href="ryby.html">RYBY</a>
            <a href="ptaki.html">PTAKI</a>
            <a href="ssaki.html">SSAKI</a>
        </nav>
    </header>
    <main>
        <section id="left">
            <h2>SSAKI</h2>
            <ul>
                <?php foreach ($mammals as $mammal): ?>
                <li><a href="<?= e($mammal['obraz']) ?>"><?= e($mammal['gatunek']) ?></a></li>
                <?php endforeach; ?>
            </ul>
            <img src="wilk.jpg" alt="Wilk szary, gromada ssaki" width="480" height="283">
        </section>
        <section id="right">
            <?php foreach ($animals as $animal): ?>
            <p><?= e($animal['gatunek']) ?></p>
            <p>Występowanie: <?= e($animal['wystepowanie']) ?>, <?= $animal['czy_zagrozony'] ? 'gatunek jest zagrożony' : 'gatunek nie jest zagrożony' ?></p>
            <?php endforeach; ?>
        </section>
    </main>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Krok 20: Skrypt 2: linia pozioma po każdym zwierzęciu

Kryteria:

R.5.7 Skrypt 2 wyświetla po każdej porcji danych z R.5.6 linię horyzontalną

ok. 1 min

Polecenie z arkusza

Na końcu wstawiona jest linia pozioma. Przykład przedstawiono na obrazie 3

<hr> wewnątrz pętli, po drugim akapicie - oddziela kolejne zwierzęta (R.5.7).

zwierzeta.php PHP zmienione: 1 linia

<?php
function e(?string $text): string
{
    return htmlspecialchars((string) $text, ENT_QUOTES, 'UTF-8');
}

$mammals = [];
$animals = [];
$message = '';
try {
    $pdo = new PDO('mysql:host=localhost;dbname=baza;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
    $mammals = $pdo->query("SELECT z.gatunek, z.obraz"
        . " FROM zwierzeta AS z"
        . " INNER JOIN gromady AS g ON g.id = z.Gromady_id"
        . " WHERE g.nazwa = 'ssaki'"
        . " ORDER BY z.id;")->fetchAll();
    $animals = $pdo->query("SELECT z.gatunek, z.wystepowanie, z.czy_zagrozony"
        . " FROM zwierzeta AS z"
        . " INNER JOIN gromady AS g ON g.id = z.Gromady_id"
        . " WHERE g.nazwa IN ('ryby', 'ptaki', 'ssaki')"
        . " ORDER BY z.id;")->fetchAll();
} catch (PDOException $exception) {
    $message = 'Nie udało się pobrać danych z bazy, spróbuj ponownie za chwilę.';
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <section id="logo">
            <h1>KRĘGOWCE</h1>
        </section>
        <nav id="menu">
            <a href="ryby.html">RYBY</a>
            <a href="ptaki.html">PTAKI</a>
            <a href="ssaki.html">SSAKI</a>
        </nav>
    </header>
    <main>
        <section id="left">
            <h2>SSAKI</h2>
            <ul>
                <?php foreach ($mammals as $mammal): ?>
                <li><a href="<?= e($mammal['obraz']) ?>"><?= e($mammal['gatunek']) ?></a></li>
                <?php endforeach; ?>
            </ul>
            <img src="wilk.jpg" alt="Wilk szary, gromada ssaki" width="480" height="283">
        </section>
        <section id="right">
            <?php foreach ($animals as $animal): ?>
            <p><?= e($animal['gatunek']) ?></p>
            <p>Występowanie: <?= e($animal['wystepowanie']) ?>, <?= $animal['czy_zagrozony'] ? 'gatunek jest zagrożony' : 'gatunek nie jest zagrożony' ?></p>
            <hr>
            <?php endforeach; ?>
        </section>
    </main>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Krok 21: Zamknięcie połączenia i komunikat o błędzie bazy

Kryteria:

R.5.2 Po wykonaniu operacji na bazie zastosowano funkcję zamknięcia bazy

ok. 2 min

Polecenie z arkusza

Na końcu działania skrypt zamyka połączenie z serwerem.

PDO nie ma funkcji close - połączenie zamyka się, gdy znika ostatnie odwołanie do obiektu, czyli po $pdo = null. Stoi w bloku finally, który wykona się zawsze po try - po udanych zapytaniach i po wyjątku (R.5.2). To ostatnia operacja na bazie: HTML pod spodem korzysta już tylko z tablic $mammals i $animals.

W bloku prawym jest też miejsce na komunikat, gdy serwer bazy nie działa - strona zostaje cała, z menu i stopką, zamiast błędu PHP.

zwierzeta.php PHP zmienione: 5 linii

<?php
function e(?string $text): string
{
    return htmlspecialchars((string) $text, ENT_QUOTES, 'UTF-8');
}

$mammals = [];
$animals = [];
$message = '';
try {
    $pdo = new PDO('mysql:host=localhost;dbname=baza;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
    $mammals = $pdo->query("SELECT z.gatunek, z.obraz"
        . " FROM zwierzeta AS z"
        . " INNER JOIN gromady AS g ON g.id = z.Gromady_id"
        . " WHERE g.nazwa = 'ssaki'"
        . " ORDER BY z.id;")->fetchAll();
    $animals = $pdo->query("SELECT z.gatunek, z.wystepowanie, z.czy_zagrozony"
        . " FROM zwierzeta AS z"
        . " INNER JOIN gromady AS g ON g.id = z.Gromady_id"
        . " WHERE g.nazwa IN ('ryby', 'ptaki', 'ssaki')"
        . " ORDER BY z.id;")->fetchAll();
} catch (PDOException $exception) {
    $message = 'Nie udało się pobrać danych z bazy, spróbuj ponownie za chwilę.';
} finally {
    $pdo = null;
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <header>
        <section id="logo">
            <h1>KRĘGOWCE</h1>
        </section>
        <nav id="menu">
            <a href="ryby.html">RYBY</a>
            <a href="ptaki.html">PTAKI</a>
            <a href="ssaki.html">SSAKI</a>
        </nav>
    </header>
    <main>
        <section id="left">
            <h2>SSAKI</h2>
            <ul>
                <?php foreach ($mammals as $mammal): ?>
                <li><a href="<?= e($mammal['obraz']) ?>"><?= e($mammal['gatunek']) ?></a></li>
                <?php endforeach; ?>
            </ul>
            <img src="wilk.jpg" alt="Wilk szary, gromada ssaki" width="480" height="283">
        </section>
        <section id="right">
            <?php foreach ($animals as $animal): ?>
            <p><?= e($animal['gatunek']) ?></p>
            <p>Występowanie: <?= e($animal['wystepowanie']) ?>, <?= $animal['czy_zagrozony'] ? 'gatunek jest zagrożony' : 'gatunek nie jest zagrożony' ?></p>
            <hr>
            <?php endforeach; ?>
            <?php if ($message !== ''): ?>
            <p><?= e($message) ?></p>
            <?php endif; ?>
        </section>
    </main>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Etap 5: Porównanie z wersją podstawową

Krok 22 · po tym etapie masz 34 z 34 kryteriów (pkt)

Krok 22: Co jest inaczej i którą wersję wybrać na egzaminie

ok. 3 min

Obie wersje dają komplet 34 punktów. Różnice:

	wersja podstawowa	wersja nowoczesna
znaczniki	pięć bloków `<section>` i `<footer>`	`<header>` z logo i `<nav>`, `<main>`, `<footer>`
układ	`float: left` sekcji, `clear` stopki	`display: flex` na `<header>` i `<main>`
szerokości 30/70%	`width` na blokach	`width` na blokach (tak ocenia klucz)
menu w pionie	`line-height: 100px`	`align-items: center`
kolory	wpisane w każdej regule	zmienne `--dark-green`, `--light-green`
zapytania	numery gromad (5; 1, 4, 5)	`JOIN` z nazwą gromady i `ORDER BY`
biblioteka	`mysqli` (tabela 1 arkusza)	PDO z wyjątkami
gdzie jest kod PHP	w trzech miejscach strony	na górze pliku, w HTML-u tylko pętle
wypisywanie	`echo` wprost z bazy	`e()` z `htmlspecialchars`
zamknięcie bazy	`mysqli_close` na końcu	`$pdo = null` w `finally`

Sprawdzone na tej wersji: zwierzę z nazwą zawierającą znaczniki i z nazwą pliku zamykającą cudzysłów href wyświetla się jako zwykły tekst, a przy złym haśle do bazy strona pokazuje komunikat zamiast błędu PHP.

Na egzaminie wersja podstawowa trzyma się funkcji z tabeli 1 i łatwiej ją napisać bez dokumentacji. Nowoczesna jest odporna na dane, które psują stronę, a zapytania po nazwie gromady nie zależą od numerów w tabeli gromady - klucz przyjmuje obie.

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

Etap 6: Oddanie pracy
Krok 23 · po tym etapie masz 34 z 34 kryteriów (pkt)
Krok 23: Plik przeglądarka.txt i nagranie płyty
ok. 5 min
Polecenie z arkusza
UWAGA: po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Umieść go w folderze z numerem PESEL. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt nazwa przeglądarki. W folderze z numerem zdającego: dingo.jpg, hiena.jpg, sarna.jpg, wilk.jpg, import.png, kw1.png - kw4.png, kwerendy.txt, przeglądarka.txt, ryby.html, ptaki.html, ssaki.html, styl2.css, zwierzeta.php (i rozpakowany baza2.sql). 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 21.

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: Kręgowce - atlas gatunków (Nowoczesny kod (flex, PDO))

Etap 1: Baza danych

Krok 1: Folder zdającego, archiwum i import bazy baza

Krok 2: Zapytanie 1: ssaki po nazwie gromady

Krok 3: Zapytanie 2: ryby, ptaki i ssaki

Krok 4: Zapytanie 3: gatunek z nazwą gromady

Krok 5: Zapytanie 4: usunięcie kolumny opis

Etap 2: Strona zwierzeta.php

Krok 6: Szkielet zwierzeta.php: kodowanie, tytuł i arkusz stylów

Krok 7: Podstrony w budowie

Krok 8: Górny rząd w header, bloki główne w main

Krok 9: Blok lewy: nagłówek, lista i obraz

Krok 10: Stopka

Etap 3: Styl CSS

Krok 11: Zmienne z kolorami i krój Tahoma

Krok 12: Górny rząd: logo i menu obok siebie

Krok 13: Bloki główne

Krok 14: Stopka

Krok 15: Menu: odnośniki wyśrodkowane w pionie, kolory i najechanie kursorem

Krok 16: Obraz dopasowany do bloku (poza arkuszem)

Etap 4: Skrypty PHP

Krok 17: Skrypt na górze pliku i połączenie PDO z bazą baza

Krok 18: Skrypt 1: zapytanie 1 i lista odnośników

Krok 19: Skrypt 2: zapytanie 2 i dwa akapity o każdym zwierzęciu

Krok 20: Skrypt 2: linia pozioma po każdym zwierzęciu

Krok 21: Zamknięcie połączenia i komunikat o błędzie bazy

Etap 5: Porównanie z wersją podstawową

Krok 22: Co jest inaczej i którą wersję wybrać na egzaminie

Etap 6: Oddanie pracy

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

Podgląd

Podgląd

Potwierdzenie

Informacja