E.14-02-21.01-SGStyczeń 2021 · 41 kroków · ok. 76 min · 34 kryteria z klucza

Rozwiązanie krok po kroku: Kręgowce - atlas gatunków (Wersja podstawowa)

Witryna o kręgowcach: import gotowej bazy baza z pliku baza2.sql, cztery zapytania - ssaki z nazwami plików obrazów, zwierzęta trzech gromad, gatunek z nazwą gromady (połączenie dwóch tabel relacją) i usunięcie kolumny poleceniem ALTER TABLE - oraz strona zwierzeta.php z trzema podstronami w budowie. Strona ma blok logo i menu, dwa bloki główne i stopkę, style w styl2.css i dwa skrypty PHP: pierwszy wypisuje ssaki jako listę odnośników do ich zdjęć, drugi opisuje każde zwierzę w dwóch akapitach z informacją, czy gatunek jest zagrożony.

To arkusz E.14 ze stycznia 2021 - kwalifikacji formuły 2012, którą zastąpiła INF.03. Na tej samej bazie jest zbudowany pokrewny arkusz E.14-03-21.01 (atlas zwierząt), ale ma inne zapytania, układ i skrypty. 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 napisane najprościej, funkcjami mysqli z tabeli 1 arkusza, a na końcu sprawdzone na danych, które psują stronę, i zabezpieczone.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (flex, PDO)” jest drugi sposób rozwiązania tego samego arkusza: semantyczne znaczniki, układ na flex, zmienne CSS i PDO z zabezpieczonym wypisywaniem danych - obie wersje są zgodne z kluczem.

Materiały. Archiwum materialy-02.zip z arkusza (hasło jak w arkuszu) jest do pobrania na stronie arkusza. Plik baza2.sql jest identyczny z oryginalnym plikiem CKE, a zdjęcia zwierząt odpowiadają nazwom plików zapisanym w bazie. Zapytania wykonano na MariaDB 10.4 - tej samej, która jest w XAMPP. 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 - można stracić 8 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-7 · po tym etapie masz 6 z 34 kryteriów (pkt)

Krok 1: Folder zdającego i archiwum materialy-02.zip

ok. 2 min

Polecenie z arkusza

Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy-02.zip zabezpieczone hasłem: Zwi3rz@ki Archiwum należy rozpakować. Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Po skończonej pracy wyniki zapisz w tym folderze.

Na pulpicie tworzysz folder nazwany numerem PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum materialy-02.zip otwierasz programem 7-Zip i rozpakowujesz do tego folderu, podając hasło Zwi3rz@ki - cyfra 3 zamiast e i @ zamiast a mają znaczenie. W środku jest plik baza2.sql (tabele do zaimportowania) i cztery zdjęcia: wilk.jpg, hiena.jpg, sarna.jpg, dingo.jpg - z nich skorzysta strona.

Do tego samego folderu trafi wszystko, co powstanie: zrzuty, kwerendy.txt, strony i styl.

Typowe błędy

Pliki zapisane poza folderem zdającego (np. tylko w htdocs) nie trafią na płytę - a ocenia się wyłącznie to, co jest na płycie.

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 */;

Krok 2: Nowa baza danych o nazwie baza
ok. 2 min
Polecenie z arkusza
Za pomocą narzędzia phpMyAdmin wykonaj operacje na bazie danych: Utwórz nową bazę danych o nazwie baza
W XAMPP Control Panel klikasz Start przy Apache i MySQL, potem w przeglądarce otwierasz http://localhost/phpmyadmin. W lewym panelu Nowa, nazwa bazy baza, Utwórz. Porównywania napisów nie trzeba ustawiać - tabele z pliku mają własne kodowanie zapisane w poleceniach CREATE TABLE.
Typowe błędy
Nazwa bazy musi brzmieć dokładnie baza - skrypt PHP wybiera bazę po nazwie (R.5.1).
Krok 3: Import tabel z pliku baza2.sql i zrzut import.png
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. 3 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
Zaznacz bazę baza, karta Import, Wybierz plik - baza2.sql z folderu zdającego, Wykonaj (albo Importuj). Plik jest wspólnym zrzutem CKE do kilku zadań, więc tworzy 12 tabel - zadanie korzysta z trzech z obrazu 1: zwierzeta (9 wierszy), gromady (5) i odzywianie (4). Pozostałe tabele zostawiasz, nie przeszkadzają.
Po imporcie phpMyAdmin pokazuje zielony komunikat o sukcesie, a w lewym panelu pod bazą baza pojawiają się tabele - to są „elementy wskazujące na poprawnie wykonany import”. Wtedy Print Screen, wklejenie do edytora grafiki i zapis jako import.png (R.1.1). Podgląd: karta Struktura bazy po imporcie, narysowana z tej samej bazy.
Typowe błędy
Zrzut ma być w PNG, mieć nazwę import i obejmować cały ekran z paskiem zadań - wykadrowanego zrzutu egzaminator nie ocenia (uwaga przy R.1 w kluczu).
Podgląd strony po tym kroku
Krok 4: Zapytanie 1: gatunek i obraz ssaków
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
Zapisz i wykonaj zapytania SQL działające na bazie danych. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań. Zapytanie 1: wybierające jedynie pola gatunek i obraz z tabeli zwierzeta jedynie dla ssaków
Karta SQL bazy baza. Zapytanie klauzula po klauzuli:
SELECT gatunek, obraz - „jedynie” te dwa pola, bez *,
FROM zwierzeta,
WHERE Gromady_id = 5 - ssaki to gromada o id 5 (obraz 1 pokazuje zawartość tabeli gromady). Klucz obcy Gromady_id w tabeli zwierzeta przechowuje właśnie ten numer.
Wynik: cztery wiersze - Wilk szary, Hiena brunatna, Sarna europejska, Dingo australijski z nazwami plików wilk.jpg, hiena.jpg, sarna.jpg, dingo.jpg (R.1.3). Zapytanie kopiujesz do nowego pliku kwerendy.txt w folderze zdającego (R.1.2), a cały ekran z wynikiem zapisujesz jako kw1.png. To samo zapytanie wykona później skrypt 1.
Typowe błędy
Warunek WHERE nazwa = 'ssaki' bez połączenia z tabelą gromady kończy się błędem - w tabeli zwierzeta nie ma kolumny nazwa. Albo numer gromady, albo JOIN z tabelą gromady (klucz dopuszcza oba).
kwerendy.txt Tekst nowy plik
-- Zapytanie 1 SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5;
Podgląd strony po tym kroku
Krok 5: Zapytanie 2: zwierzęta trzech gromad
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. 3 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
SELECT gatunek, wystepowanie, czy_zagrozony - trzy pola z arkusza,
FROM zwierzeta,
WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5 - ryby (1), ptaki (4) i ssaki (5). Spójnik „lub” z arkusza to w SQL OR: wiersz przechodzi, gdy spełnia którykolwiek warunek. To samo można zapisać krócej: WHERE Gromady_id IN (1, 4, 5).
Wynik: wszystkie 9 rekordów tabeli - w bazie nie ma płazów ani gadów, więc warunek niczego nie odcina (R.1.4). Zapytanie jest jednak uniwersalne: płaz dopisany do bazy nie pojawi się w wyniku. Zrzut: kw2.png.
Typowe błędy
AND zamiast OR szuka zwierzęcia, które jest naraz rybą, ptakiem i ssakiem - wynik jest pusty. Samo SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta; daje te same 9 wierszy, ale bez warunku z arkusza; klucz wymaga zapytania „uniwersalnego dla każdego zestawu danych”.
kwerendy.txt Tekst zmienione: 4 linie
-- Zapytanie 1 SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5; -- Zapytanie 2 SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5;
Podgląd strony po tym kroku
Krok 6: 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. 4 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ą
Gatunek jest w tabeli zwierzeta, a nazwa gromady w tabeli gromady - zapytanie łączy obie relacją z obrazu 1:
SELECT zwierzeta.id, gatunek, nazwa - kolumna id jest w obu tabelach, więc trzeba wskazać, z której pochodzi; gatunek i nazwa są jednoznaczne,
FROM zwierzeta JOIN gromady - dwie tabele,
ON gromady.id = zwierzeta.Gromady_id - wiersz zwierzęcia łączy się z tą gromadą, której numer ma w kluczu obcym.
Wynik: 9 rekordów o id 1-9, każdy z nazwą gromady - dwie ryby, trzy ptaki, cztery ssaki (R.1.5). Zrzut: kw3.png.
Typowe błędy
Samo SELECT id, gatunek, nazwa FROM zwierzeta, gromady bez warunku łączenia daje iloczyn kartezjański - 45 wierszy (każde zwierzę z każdą gromadą), a id bez nazwy tabeli kończy się błędem „Column 'id' in field list is ambiguous”.
kwerendy.txt Tekst zmienione: 4 linie
-- Zapytanie 1 SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5; -- Zapytanie 2 SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5; -- Zapytanie 3 SELECT zwierzeta.id, gatunek, nazwa FROM zwierzeta JOIN gromady ON gromady.id = zwierzeta.Gromady_id;
Podgląd strony po tym kroku
Krok 7: 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
Zmiana struktury tabeli to polecenie ALTER TABLE:
ALTER TABLE gromady - która tabela,
DROP COLUMN opis - usuń kolumnę opis (słowo COLUMN można pominąć).
Zapytanie nie zwraca wierszy - phpMyAdmin pokazuje komunikat o wykonaniu, a w karcie Struktura tabeli gromady zostają dwie kolumny: id i nazwa. Zrzut z widocznym zapytaniem albo ze zmienioną strukturą: kw4.png (R.1.6). Plik kwerendy.txt ma komplet czterech zapytań. Kolumna opis była pusta i strona z niej nie korzysta.
Typowe błędy
DELETE usuwa wiersze, a nie kolumny - DELETE opis FROM gromady kończy się błędem. Drugie wykonanie DROP COLUMN też daje błąd („Can't DROP COLUMN opis; check that it exists”) - zrzut rób przy pierwszym, udanym wykonaniu.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5; -- Zapytanie 2 SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5; -- Zapytanie 3 SELECT zwierzeta.id, gatunek, nazwa FROM zwierzeta JOIN gromady ON gromady.id = zwierzeta.Gromady_id; -- Zapytanie 4 ALTER TABLE gromady DROP COLUMN opis;
Podgląd strony po tym kroku
Etap 2: Strona zwierzeta.php
Kroki 8-19 · po tym etapie masz 16 z 34 kryteriów (pkt)
Krok 8: Plik zwierzeta.php
ok. 1 min
Polecenie z arkusza
Cechy witryny: Składa się ze stron o nazwach zwierzeta.php oraz ptaki.html, ryby.html, ssaki.html
Główna strona to zwierzeta.php - z rozszerzeniem .php, bo staną na niej dwa skrypty; dopóki nie ma w niej kodu PHP, serwer odda ją przeglądarce jak zwykły HTML. <!DOCTYPE html> oznacza HTML5, lang="pl" mówi przeglądarce, że treść jest po polsku. Trzy podstrony powstaną w następnym kroku.
zwierzeta.php PHP nowy plik
<!DOCTYPE html> <html lang="pl"> <head> </head> <body> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)
Krok 9: Podstrony ryby.html, ptaki.html i ssaki.html
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 tekstowe z rozszerzeniem .html, w każdym jedno zdanie: Strona w trakcie budowy - bez <!DOCTYPE>, <html> i <p>, bo arkusz zabrania jakichkolwiek znaczników (R.2.1). Przeglądarka i tak wyświetli taki plik: tekst bez znaczników traktuje jak treść strony. Podgląd: ptaki.html.
Do tych plików poprowadzą odnośniki z menu.
Typowe błędy
Plik zapisany w Notatniku jako ptaki.html.txt (ukryte rozszerzenia w Windows) nie otworzy się z menu - sprawdź nazwę w folderze z włączonym widokiem rozszerzeń.
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 (ptaki.html)
Krok 10: Kodowanie polskich znaków
Kryteria:
R.2.2 Witrynę internetową zapisano w pliku zwierzeta.php oraz zastosowano właściwy standard kodowania polskich znaków
ok. 1 min
Polecenie z arkusza
Zastosowany właściwy standard kodowania polskich znaków
<meta charset="UTF-8"> jako pierwsza rzecz w <head>; plik zapisz w edytorze w kodowaniu UTF-8. Strona zwierzeta.php z właściwym kodowaniem daje R.2.2.
zwierzeta.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 (zwierzeta.php)
Krok 11: Tytuł strony
Kryteria:
R.2.3 Nadano tytuł strony: "Zwierzęta”
ok. 1 min
Polecenie z arkusza
Tytuł strony widoczny na karcie przeglądarki: „Zwierzęta”
<title> w <head> - napis na karcie przeglądarki (R.2.3). Litera „ę” wyświetli się poprawnie dzięki kodowaniu z poprzedniego kroku.
zwierzeta.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zwierzęta</title> </head> <body> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)
Krok 12: Podpięcie arkusza stylów styl2.css
Kryteria:
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. 1 min
Polecenie z arkusza
Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony
<link rel="stylesheet" href="styl2.css"> w <head> - nazwa z cyfrą 2, jak w arkuszu (R.3.4). Od tej chwili żadnych atrybutów style w HTML-u - klucz wymaga, żeby formatowanie pochodziło wyłącznie z pliku CSS.
Typowe błędy
href="styl.css" albo styl2.css zapisany w innym folderze niż strona - styl się nie wczyta, a z nim przepada R.3.4.
zwierzeta.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zwierzęta</title> <link rel="stylesheet" href="styl2.css"> </head> <body> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)
Krok 13: Bloki: logo, menu, lewy, prawy i stopka
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
ok. 2 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
Cztery bloki to znaczniki <section> z identyfikatorami logo, menu, left i right, a stopka - <footer> (R.2.4). Kolejność w kodzie odpowiada kolejności czytania obrazu 2: najpierw górny rząd (logo, menu), potem rząd główny (lewy, prawy), na końcu stopka. Identyfikatory przydadzą się w CSS - każdy blok ma inny kolor, wysokość i szerokość. Ułożenie bloków obok siebie ustawi styl.
zwierzeta.php PHP zmienione: 10 linii
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zwierzęta</title> <link rel="stylesheet" href="styl2.css"> </head> <body> <section id="logo"> </section> <section id="menu"> </section> <section id="left"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)
Krok 14: Blok logo: nagłówek pierwszego stopnia
ok. 1 min
Polecenie z arkusza
Zawartość bloku logo: nagłówek pierwszego stopnia o treści: „KRĘGOWCE”
<h1> w bloku logo - jedyny nagłówek pierwszego stopnia na stronie. Treść wielkimi literami, z „Ę”, tak jak w arkuszu.
zwierzeta.php PHP zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zwierzęta</title> <link rel="stylesheet" href="styl2.css"> </head> <body> <section id="logo"> <h1>KRĘGOWCE</h1> </section> <section id="menu"> </section> <section id="left"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)
Krok 15: Blok menu: trzy odnośniki
Kryteria:
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. 2 min
Polecenie z arkusza
Zawartość bloku menu: Odnośnik „RYBY” prowadzący do podstrony ryby.html Odnośnik „PTAKI” prowadzący do podstrony ptaki.html Odnośnik „SSAKI” prowadzący do podstrony ssaki.html
Odnośnik to znacznik <a> z adresem w atrybucie href. Nazwa pliku bez ścieżki oznacza plik w tym samym folderze co strona, więc ryby.html otworzy podstronę z poprzedniego kroku (R.3.2). Kolejność jak na obrazie 2: RYBY, PTAKI, SSAKI.
Odnośniki stoją w jednym wierszu, bo <a> jest elementem liniowym. Kolory, odstępy i wyśrodkowanie w pionie nada im styl.
Typowe błędy
Odnośnik do ryby.html przy pliku zapisanym jako Ryby.html zadziała w Windows, ale na serwerze z Linuksem już nie - nazwy plików pisz dokładnie jak w arkuszu, małymi literami.
zwierzeta.php PHP zmienione: 3 linie
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zwierzęta</title> <link rel="stylesheet" href="styl2.css"> </head> <body> <section id="logo"> <h1>KRĘGOWCE</h1> </section> <section id="menu"> <a href="ryby.html">RYBY</a> <a href="ptaki.html">PTAKI</a> <a href="ssaki.html">SSAKI</a> </section> <section id="left"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)

Krok 16: Blok lewy: nagłówek „SSAKI”

Kryteria:

R.2.5 W bloku logo zapisano nagłówek h1: "KRĘGOWCE" oraz w bloku głównym - lewym zapisano nagłówek h2: "SSAKI"

ok. 1 min

Polecenie z arkusza

Zawartość bloku głównego – lewego: Nagłówek drugiego stopnia o treści: „SSAKI”

<h2> - nagłówek drugiego stopnia. Razem z <h1> w bloku logo daje R.2.5.

zwierzeta.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <section id="logo">
        <h1>KRĘGOWCE</h1>
    </section>
    <section id="menu">
        <a href="ryby.html">RYBY</a>
        <a href="ptaki.html">PTAKI</a>
        <a href="ssaki.html">SSAKI</a>
    </section>
    <section id="left">
        <h2>SSAKI</h2>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

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

Krok 17: Blok lewy: lista punktowana
Kryteria:
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. 1 min
Polecenie z arkusza
Lista punktowana (nieuporządkowana) a w niej efekt wykonania skryptu nr 1
Lista punktowana to <ul> (unordered list) z zamknięciem </ul> (R.2.7). Na razie jest pusta - elementy <li> wypisze skrypt 1 z wyniku zapytania 1, więc każdy ssak dopisany do bazy pojawi się na liście bez zmiany strony.
zwierzeta.php PHP zmienione: 2 linie
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zwierzęta</title> <link rel="stylesheet" href="styl2.css"> </head> <body> <section id="logo"> <h1>KRĘGOWCE</h1> </section> <section id="menu"> <a href="ryby.html">RYBY</a> <a href="ptaki.html">PTAKI</a> <a href="ssaki.html">SSAKI</a> </section> <section id="left"> <h2>SSAKI</h2> <ul> </ul> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)

Krok 18: Blok lewy: obraz wilk.jpg

Kryteria:

R.2.6 W bloku głównym - lewym umieszczono obraz wilk.jpg z tekstem alternatywnym "Wilk szary, gromada ssaki"

ok. 1 min

Polecenie z arkusza

Obraz wilk.jpg z rozpakowanego wcześniej archiwum, z tekstem alternatywnym: „Wilk szary, gromada ssaki”

src - plik z archiwum, który leży w folderze strony, alt - tekst, który przeczyta czytnik ekranu albo pokaże przeglądarka, gdy obraz się nie wczyta (R.2.6). Obraz stoi pod listą, jak na obrazie 2.

zwierzeta.php PHP zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <section id="logo">
        <h1>KRĘGOWCE</h1>
    </section>
    <section id="menu">
        <a href="ryby.html">RYBY</a>
        <a href="ptaki.html">PTAKI</a>
        <a href="ssaki.html">SSAKI</a>
    </section>
    <section id="left">
        <h2>SSAKI</h2>
        <ul>
        </ul>
        <img src="wilk.jpg" alt="Wilk szary, gromada ssaki">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

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

Krok 19: Stopka: autor strony

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

Sam tekst w <footer>, bez nagłówka i akapitu - na obrazie 2 stopka jest wąskim paskiem. Na egzaminie po dwukropku wpisujesz swój numer PESEL; w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora: Bartosz Bryniarski (R.2.8). Blok prawy zostaje pusty - wypełni go skrypt 2.

zwierzeta.php PHP zmienione: 1 linia

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

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

Etap 3: Styl CSS
Kroki 20-30 · po tym etapie masz 26 z 34 kryteriów (pkt)
Krok 20: Plik styl2.css: krój Tahoma dla całej strony
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. 1 min
Polecenie z arkusza
Domyślne dla całej strony: krój czcionki Tahoma
Nowy plik styl2.css w folderze zdającego. Krój ustawiony dla body dziedziczą wszystkie elementy strony - nagłówki, lista, odnośniki i stopka (R.4.1). Tahoma jest w każdym Windows; poza nim można dopisać krój zapasowy: font-family: Tahoma, sans-serif;.
styl2.css CSS nowy plik
body { font-family: Tahoma; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 21: Blok logo
ok. 1 min
Polecenie z arkusza
Dla bloku logo: kolor tła #28C7A8, wyrównanie tekstu do środka, wysokość 100 px, szerokość 30%
Selektor identyfikatora #logo - z krzyżykiem, bo w HTML-u jest id="logo". Szerokość w procentach liczy się od szerokości strony. Bloki stoją jeszcze jeden pod drugim - obok siebie ustawi je reguła z końca tego etapu.
Typowe błędy
Kropka zamiast krzyżyka (.logo) to selektor klasy - reguła nie trafi w blok, a klucz przy R.3.4 uznaje wtedy połączenie ze stylem za niespełnione.
styl2.css CSS zmienione: 6 linii
body { font-family: Tahoma; } #logo { background-color: #28C7A8; text-align: center; height: 100px; width: 30%; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 22: Blok menu
ok. 1 min
Polecenie z arkusza
Dla bloku menu: kolor tła #78E3CE, wysokość 100 px, szerokość 70%
Jaśniejszy odcień zieleni. 30% + 70% = 100% - logo i menu wypełnią razem cały górny rząd.
styl2.css CSS zmienione: 5 linii
body { font-family: Tahoma; } #logo { background-color: #28C7A8; text-align: center; height: 100px; width: 30%; } #menu { background-color: #78E3CE; height: 100px; width: 70%; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 23: Blok główny lewy
ok. 1 min
Polecenie z arkusza
Dla bloku głównego – lewego: kolor tła #78E3CE, wysokość 850 px, szerokość 30%
Ten sam kolor co menu, ale pod blokiem logo - kolory bloków tworzą na obrazie 2 szachownicę.
styl2.css CSS zmienione: 5 linii
body { font-family: Tahoma; } #logo { background-color: #28C7A8; text-align: center; height: 100px; width: 30%; } #menu { background-color: #78E3CE; height: 100px; width: 70%; } #left { background-color: #78E3CE; height: 850px; width: 30%; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 24: Blok główny prawy
Kryteria: ,
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. 1 min
Polecenie z arkusza
Dla bloku głównego – prawego: kolor tła #28C7A8, wysokość 850 px, szerokość 70%
Wysokości 100 px w górnym rzędzie i 850 px w głównym (R.4.4), szerokości 30% dla logo i bloku lewego oraz 70% dla menu i bloku prawego (R.4.5).
styl2.css CSS zmienione: 5 linii
body { font-family: Tahoma; } #logo { background-color: #28C7A8; text-align: center; height: 100px; width: 30%; } #menu { background-color: #78E3CE; height: 100px; width: 70%; } #left { background-color: #78E3CE; height: 850px; width: 30%; } #right { background-color: #28C7A8; height: 850px; width: 70%; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 25: 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
Selektor znacznika footer. color to kolor czcionki, background-color - tła; nazwy kolorów black i white są równoważne zapisom #000000 i #FFFFFF. Kolory tła wszystkich bloków (R.4.2), biała czcionka stopki (R.4.3) oraz wyrównanie w logo i stopce (R.4.6) są ustawione.
styl2.css CSS zmienione: 5 linii
body { font-family: Tahoma; } #logo { background-color: #28C7A8; text-align: center; height: 100px; width: 30%; } #menu { background-color: #78E3CE; height: 100px; width: 70%; } #left { background-color: #78E3CE; height: 850px; width: 30%; } #right { background-color: #28C7A8; height: 850px; width: 70%; } footer { background-color: black; color: white; text-align: right; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 26: Odnośniki menu: kolory i marginesy wewnętrzne
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;)
ok. 2 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.
Selektor potomka #menu a trafia tylko w odnośniki wewnątrz bloku menu - odnośniki z listy ssaków w bloku lewym zostają domyślne, niebieskie i podkreślone (R.4.7). Sam selektor a pokolorowałby wszystkie odnośniki na stronie.
Margines wewnętrzny to padding, a cztery wartości idą w kolejności: góra, prawo, dół, lewo - 10, 40, 10, 40 px. Krócej to samo: padding: 10px 40px;.
styl2.css CSS zmienione: 5 linii
body { font-family: Tahoma; } #logo { background-color: #28C7A8; text-align: center; height: 100px; width: 30%; } #menu { background-color: #78E3CE; height: 100px; width: 70%; } #left { background-color: #78E3CE; height: 850px; width: 30%; } #right { background-color: #28C7A8; height: 850px; width: 70%; } footer { background-color: black; color: white; text-align: right; } #menu a { background-color: green; color: orange; padding: 10px 40px 10px 40px; }
Podgląd strony po tym kroku (zwierzeta.php)
Krok 27: Odnośniki wyśrodkowane w pionie
Kryteria:
R.4.8 Odnośniki w bloku menu są wyśrodkowane w pionie względem bloku (np. line-height: 100px; lub innym sposobem)
ok. 2 min
Polecenie z arkusza
Odnośniki powinny być wyśrodkowane w pionie względem bloku menu.
Odnośniki stoją w jednym wierszu tekstu, a tekst w wierszu jest zawsze wyśrodkowany w pionie względem jego wysokości. line-height: 100px w regule #menu ustawia wysokość wiersza równą wysokości bloku - wiersz wypełnia cały blok, a odnośniki z tłem stają na jego środku (R.4.8). padding odnośnika liniowego nie zmienia wysokości wiersza, więc tło wystaje w górę i w dół tylko o 10 px.
Typowe błędy
vertical-align: middle w bloku nie wyśrodkuje treści - działa w komórkach tabeli i względem sąsiadów w wierszu, a nie względem bloku.
styl2.css CSS zmienione: 1 linia
body { font-family: Tahoma; } #logo { background-color: #28C7A8; text-align: center; height: 100px; width: 30%; } #menu { background-color: #78E3CE; height: 100px; width: 70%; line-height: 100px; } #left { background-color: #78E3CE; height: 850px; width: 30%; } #right { background-color: #28C7A8; height: 850px; width: 70%; } footer { background-color: black; color: white; text-align: right; } #menu a { background-color: green; color: orange; padding: 10px 40px 10px 40px; }
Podgląd strony po tym kroku (zwierzeta.php)

Krok 28: Odnośniki menu po najechaniu kursorem

Kryteria:

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. 1 min

Polecenie z arkusza

Po najechaniu kursorem na odnośnik stanowiący menu jego tło zmienia się na kolor pomarańczowy, a czcionka na kolor zielony

Pseudoklasa :hover działa, gdy kursor jest nad elementem - kolory zamieniają się miejscami (R.4.9). Reguła stoi po #menu a, więc przy tej samej szczegółowości selektora wygrywa.

styl2.css CSS zmienione: 4 linie

body {
    font-family: Tahoma;
}
#logo {
    background-color: #28C7A8;
    text-align: center;
    height: 100px;
    width: 30%;
}
#menu {
    background-color: #78E3CE;
    height: 100px;
    width: 70%;
    line-height: 100px;
}
#left {
    background-color: #78E3CE;
    height: 850px;
    width: 30%;
}
#right {
    background-color: #28C7A8;
    height: 850px;
    width: 70%;
}
footer {
    background-color: black;
    color: white;
    text-align: right;
}
#menu a {
    background-color: green;
    color: orange;
    padding: 10px 40px 10px 40px;
}
#menu a:hover {
    background-color: orange;
    color: green;
}

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

Krok 29: Układ bloków zgodny z obrazem 2
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
ok. 2 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
Wszystkie cztery sekcje dostają float: left - stają kolejno od lewej krawędzi. Logo i menu mają razem 100% szerokości, więc blok lewy nie mieści się już obok nich i zaczyna nowy rząd; obok niego staje blok prawy. Stopka z clear: both zaczyna się dopiero pod blokami głównymi. Układ odpowiada obrazowi 2 (R.3.1).
Typowe błędy
Bloki o sumie szerokości 100% nie mogą mieć obramowań ani padding po bokach - każdy piksel więcej spycha blok prawy (albo menu) do następnego rzędu.
styl2.css CSS zmienione: 6 linii
body { font-family: Tahoma; } #logo { background-color: #28C7A8; text-align: center; height: 100px; width: 30%; } #menu { background-color: #78E3CE; height: 100px; width: 70%; line-height: 100px; } #left { background-color: #78E3CE; height: 850px; width: 30%; } #right { background-color: #28C7A8; height: 850px; width: 70%; } footer { background-color: black; color: white; text-align: right; } #menu a { background-color: green; color: orange; padding: 10px 40px 10px 40px; } #menu a:hover { background-color: orange; color: green; } section { float: left; } footer { clear: both; }
Podgląd strony po tym kroku (zwierzeta.php)

Krok 30: Obraz nie szerszy niż blok lewy (poza arkuszem)

ok. 1 min

wilk.jpg ma 480 px szerokości, a blok lewy - 30% strony, czyli przy ekranie szerokości 1280 px około 380 px. Szerszy obraz wystawałby z bloku i chował się pod blokiem prawym. max-width: 100% zmniejsza go do szerokości bloku z zachowaniem proporcji, a na szerokim ekranie (od ok. 1600 px) obraz ma swój naturalny rozmiar.

Arkusz tego nie wymaga i klucz tego nie ocenia - reguła tylko pilnuje, żeby układ z obrazu 2 nie rozjechał się na mniejszym ekranie. Formatowanie nadal pochodzi wyłącznie z pliku styl2.css.

styl2.css CSS zmienione: 3 linie

body {
    font-family: Tahoma;
}
#logo {
    background-color: #28C7A8;
    text-align: center;
    height: 100px;
    width: 30%;
}
#menu {
    background-color: #78E3CE;
    height: 100px;
    width: 70%;
    line-height: 100px;
}
#left {
    background-color: #78E3CE;
    height: 850px;
    width: 30%;
}
#right {
    background-color: #28C7A8;
    height: 850px;
    width: 70%;
}
footer {
    background-color: black;
    color: white;
    text-align: right;
}
#menu a {
    background-color: green;
    color: orange;
    padding: 10px 40px 10px 40px;
}
#menu a:hover {
    background-color: orange;
    color: green;
}
section {
    float: left;
}
footer {
    clear: both;
}
#left img {
    max-width: 100%;
}

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

Etap 4: Skrypty PHP
Kroki 31-38 · po tym etapie masz 34 z 34 kryteriów (pkt)
Krok 31: Połączenie z bazą baza na początku pliku
Kryteria:
R.5.1 Skrypt realizuje połączenie z serwerem bazy danych i wybór bazy o nazwie baza
ok. 3 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
Z bazy korzystają dwa skrypty w dwóch miejscach strony, a połączenie wystarczy jedno - dlatego blok PHP z połączeniem stoi na samym początku pliku, jeszcze przed <!DOCTYPE html>. Kod między <?php a ?> wykona serwer, zanim strona trafi do przeglądarki; sam niczego nie wypisuje, więc HTML zaczyna się jak dotąd.
mysqli_connect z tabeli 1 arkusza - kolejno serwer localhost, użytkownik root, puste hasło '' i nazwa bazy baza: jedno wywołanie łączy z serwerem i wybiera bazę (R.5.1), więc mysqli_select_db nie jest potrzebne. Połączenie trafia do zmiennej $connection, z której skorzystają oba skrypty i zamknięcie.
Od tego kroku podgląd to wynik działania strony po stronie serwera (prawdziwe uruchomienie w PHP 8.2). Stronę sprawdzasz przez http://localhost/…/zwierzeta.php, a nie otwierając plik z dysku: przeglądarka sama nie wykona PHP.
zwierzeta.php PHP zmienione: 3 linie
<?php $connection = mysqli_connect('localhost', 'root', '', 'baza'); ?> <!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zwierzęta</title> <link rel="stylesheet" href="styl2.css"> </head> <body> <section id="logo"> <h1>KRĘGOWCE</h1> </section> <section id="menu"> <a href="ryby.html">RYBY</a> <a href="ptaki.html">PTAKI</a> <a href="ssaki.html">SSAKI</a> </section> <section id="left"> <h2>SSAKI</h2> <ul> </ul> <img src="wilk.jpg" alt="Wilk szary, gromada ssaki"> </section> <section id="right"> </section> <footer> Stronę o zwierzętach przygotował: Bartosz Bryniarski </footer> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)

Krok 32: Skrypt 1: zapytanie 1

Kryteria:

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

ok. 2 min

Polecenie z arkusza

Skrypt wysyła do bazy zapytanie numer 1 z pliku kwerendy.txt

Skrypt 1 stoi wewnątrz <ul>, bo to, co wypisze, ma się znaleźć w liście. mysqli_query wysyła zapytanie 1 z kwerendy.txt przez połączenie $connection i zwraca wynik do $result (R.5.3). Zapytanie jest w apostrofach - nie ma w nim zmiennych, więc PHP niczego nie podstawia.

Podgląd: zapytanie wykonane, ale lista jest jeszcze pusta.

zwierzeta.php PHP zmienione: 3 linie

<?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <section id="logo">
        <h1>KRĘGOWCE</h1>
    </section>
    <section id="menu">
        <a href="ryby.html">RYBY</a>
        <a href="ptaki.html">PTAKI</a>
        <a href="ssaki.html">SSAKI</a>
    </section>
    <section id="left">
        <h2>SSAKI</h2>
        <ul>
<?php
$result = mysqli_query($connection, 'SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5;');
?>
        </ul>
        <img src="wilk.jpg" alt="Wilk szary, gromada ssaki">
    </section>
    <section id="right">
    </section>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Krok 33: Skrypt 1: gatunki jako odnośniki do obrazów
Kryteria: ,
R.3.3 Lista z bloku głównego - lewego zawiera odnośniki, kliknięcie przynajmniej jednego powoduje wyświetlenie obrazu
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
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
mysqli_fetch_row($result) zwraca kolejny wiersz wyniku jako tablicę numerowaną w kolejności pól z SELECT: $row[0] to gatunek, $row[1] to obraz. Gdy wierszy zabraknie, zwraca null i pętla while się kończy,
echo składa z kropek (łączenie napisów) element listy z odnośnikiem: <li><a href="wilk.jpg">Wilk szary</a></li> - nazwa pliku idzie do href, gatunek jest treścią odnośnika.
Cały napis jest w apostrofach, więc cudzysłowy atrybutu href można w nim pisać bez ucieczki. Podgląd: cztery ssaki jako odnośniki (R.5.4). Zdjęcia leżą w folderze strony - to obrazy „z rozpakowanego archiwum”, z których korzysta skrypt - więc kliknięcie gatunku otwiera jego zdjęcie (R.3.3).
Typowe błędy
$row[1] i $row[0] zamienione miejscami dadzą odnośnik o treści „wilk.jpg” prowadzący do nieistniejącego pliku „Wilk szary”. Kolejność indeksów wynika z kolejności pól w SELECT.
zwierzeta.php PHP zmienione: 3 linie
<?php $connection = mysqli_connect('localhost', 'root', '', 'baza'); ?> <!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zwierzęta</title> <link rel="stylesheet" href="styl2.css"> </head> <body> <section id="logo"> <h1>KRĘGOWCE</h1> </section> <section id="menu"> <a href="ryby.html">RYBY</a> <a href="ptaki.html">PTAKI</a> <a href="ssaki.html">SSAKI</a> </section> <section id="left"> <h2>SSAKI</h2> <ul> <?php $result = mysqli_query($connection, 'SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5;'); while ($row = mysqli_fetch_row($result)) { echo '<li><a href="' . $row[1] . '">' . $row[0] . '</a></li>'; } ?> </ul> <img src="wilk.jpg" alt="Wilk szary, gromada ssaki"> </section> <section id="right"> </section> <footer> Stronę o zwierzętach przygotował: Bartosz Bryniarski </footer> </body> </html>
Podgląd strony po tym kroku (zwierzeta.php)

Krok 34: Skrypt 2: zapytanie 2

Kryteria:

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

ok. 2 min

Polecenie z arkusza

Skrypt wysyła do bazy zapytanie numer 2 z pliku kwerendy.txt

Skrypt 2 stoi w bloku prawym. Zapytanie 2 jest długie, więc napis podzielono na dwie części połączone kropką - PHP skleja je w jedno zapytanie, a kod mieści się na ekranie. Wynik trafia do tej samej zmiennej $result: wynik zapytania 1 nie jest już potrzebny (R.5.5).

zwierzeta.php PHP zmienione: 4 linie

<?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <section id="logo">
        <h1>KRĘGOWCE</h1>
    </section>
    <section id="menu">
        <a href="ryby.html">RYBY</a>
        <a href="ptaki.html">PTAKI</a>
        <a href="ssaki.html">SSAKI</a>
    </section>
    <section id="left">
        <h2>SSAKI</h2>
        <ul>
<?php
$result = mysqli_query($connection, 'SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    echo '<li><a href="' . $row[1] . '">' . $row[0] . '</a></li>';
}
?>
        </ul>
        <img src="wilk.jpg" alt="Wilk szary, gromada ssaki">
    </section>
    <section id="right">
<?php
$result = mysqli_query($connection, 'SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta '
    . 'WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5;');
?>
    </section>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Krok 35: Skrypt 2: nazwa gatunku w pierwszym akapicie

ok. 2 min

Polecenie z arkusza

Następnie wypisuje w bloku głównym – prawym zwrócone zapytaniem dane w sposób: W akapicie pierwszym (paragrafie) jest wypisywana nazwa gatunku

Ta sama pętla co w skrypcie 1: $row[0] to gatunek, pierwsze pole zapytania 2. Każdy gatunek trafia do osobnego akapitu <p>. Podgląd: dziewięć nazw w bloku prawym.

zwierzeta.php PHP zmienione: 3 linie

<?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <section id="logo">
        <h1>KRĘGOWCE</h1>
    </section>
    <section id="menu">
        <a href="ryby.html">RYBY</a>
        <a href="ptaki.html">PTAKI</a>
        <a href="ssaki.html">SSAKI</a>
    </section>
    <section id="left">
        <h2>SSAKI</h2>
        <ul>
<?php
$result = mysqli_query($connection, 'SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    echo '<li><a href="' . $row[1] . '">' . $row[0] . '</a></li>';
}
?>
        </ul>
        <img src="wilk.jpg" alt="Wilk szary, gromada ssaki">
    </section>
    <section id="right">
<?php
$result = mysqli_query($connection, 'SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta '
    . 'WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    echo '<p>' . $row[0] . '</p>';
}
?>
    </section>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Krok 36: Skrypt 2: występowanie i informacja o zagrożeniu

Kryteria:

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. 3 min

Polecenie z arkusza

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

if ($row[2] == 1) - pole czy_zagrozony (trzecie w zapytaniu) ma 1 dla gatunku zagrożonego; wtedy do zmiennej $info trafia „gatunek jest zagrożony”, a w każdym innym przypadku (else) - „gatunek nie jest zagrożony”,
drugi akapit składa stały napis Występowanie:, wartość $row[1], przecinek ze spacją i $info.

Podgląd: Jesiotr zachodni i Dingo australijski są zagrożone, pozostałe siedem gatunków nie (R.5.6).

Typowe błędy

if ($row[2] = 1) z jednym znakiem równości to przypisanie, a nie porównanie - warunek jest zawsze prawdziwy i każde zwierzę wychodzi zagrożone.

zwierzeta.php PHP zmienione: 6 linii

<?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <section id="logo">
        <h1>KRĘGOWCE</h1>
    </section>
    <section id="menu">
        <a href="ryby.html">RYBY</a>
        <a href="ptaki.html">PTAKI</a>
        <a href="ssaki.html">SSAKI</a>
    </section>
    <section id="left">
        <h2>SSAKI</h2>
        <ul>
<?php
$result = mysqli_query($connection, 'SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    echo '<li><a href="' . $row[1] . '">' . $row[0] . '</a></li>';
}
?>
        </ul>
        <img src="wilk.jpg" alt="Wilk szary, gromada ssaki">
    </section>
    <section id="right">
<?php
$result = mysqli_query($connection, 'SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta '
    . 'WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    echo '<p>' . $row[0] . '</p>';
    if ($row[2] == 1) {
        $info = 'gatunek jest zagrożony';
    } else {
        $info = 'gatunek nie jest zagrożony';
    }
    echo '<p>Występowanie: ' . $row[1] . ', ' . $info . '</p>';
}
?>
    </section>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Krok 37: 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

Linia pozioma to znacznik <hr> (bez zamknięcia). Stoi wewnątrz pętli, po drugim akapicie - oddziela kolejne zwierzęta, a ostatnia linia zamyka listę, jak na obrazie 2 (R.5.7).

zwierzeta.php PHP zmienione: 1 linia

<?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <section id="logo">
        <h1>KRĘGOWCE</h1>
    </section>
    <section id="menu">
        <a href="ryby.html">RYBY</a>
        <a href="ptaki.html">PTAKI</a>
        <a href="ssaki.html">SSAKI</a>
    </section>
    <section id="left">
        <h2>SSAKI</h2>
        <ul>
<?php
$result = mysqli_query($connection, 'SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    echo '<li><a href="' . $row[1] . '">' . $row[0] . '</a></li>';
}
?>
        </ul>
        <img src="wilk.jpg" alt="Wilk szary, gromada ssaki">
    </section>
    <section id="right">
<?php
$result = mysqli_query($connection, 'SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta '
    . 'WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    echo '<p>' . $row[0] . '</p>';
    if ($row[2] == 1) {
        $info = 'gatunek jest zagrożony';
    } else {
        $info = 'gatunek nie jest zagrożony';
    }
    echo '<p>Występowanie: ' . $row[1] . ', ' . $info . '</p>';
    echo '<hr>';
}
?>
    </section>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Krok 38: Zamknięcie połączenia z bazą

Kryteria:

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

ok. 1 min

Polecenie z arkusza

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

mysqli_close($connection) na końcu skryptu 2, za pętlą - to ostatni kod PHP na stronie, więc połączenie zamyka się po obu skryptach (R.5.2). Strona spełnia wszystkie kryteria arkusza. Dalej dwa kroki o zabezpieczeniach - klucz ich nie wymaga.

Typowe błędy

mysqli_close w bloku skryptu 1 zamknie połączenie, zanim skrypt 2 wyśle zapytanie - w PHP 8 kończy się to błędem „mysqli object is already closed”.

zwierzeta.php PHP zmienione: 1 linia

<?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <section id="logo">
        <h1>KRĘGOWCE</h1>
    </section>
    <section id="menu">
        <a href="ryby.html">RYBY</a>
        <a href="ptaki.html">PTAKI</a>
        <a href="ssaki.html">SSAKI</a>
    </section>
    <section id="left">
        <h2>SSAKI</h2>
        <ul>
<?php
$result = mysqli_query($connection, 'SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    echo '<li><a href="' . $row[1] . '">' . $row[0] . '</a></li>';
}
?>
        </ul>
        <img src="wilk.jpg" alt="Wilk szary, gromada ssaki">
    </section>
    <section id="right">
<?php
$result = mysqli_query($connection, 'SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta '
    . 'WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    echo '<p>' . $row[0] . '</p>';
    if ($row[2] == 1) {
        $info = 'gatunek jest zagrożony';
    } else {
        $info = 'gatunek nie jest zagrożony';
    }
    echo '<p>Występowanie: ' . $row[1] . ', ' . $info . '</p>';
    echo '<hr>';
}
mysqli_close($connection);
?>
    </section>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Etap 5: Dobre praktyki (poza kluczem)

Kroki 39-40 · po tym etapie masz 34 z 34 kryteriów (pkt)

Krok 39: Zabezpieczenie: dane z bazy w odnośnikach

ok. 3 min

Polecenie z arkusza

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

Skrypty nie biorą niczego z formularza ani z adresu strony, więc wstrzyknięcie SQL im nie grozi - zapytania mają stałą treść i nie trzeba ich przygotowywać. Zagrożeniem są dane z bazy: bazę zapełnia ktoś inny niż skrypt, np. redaktor w panelu atlasu. Sprawdzone na wersji z poprzednich kroków, z dopisanym do bazy ssakiem:

gatunek Lis <b>rudy</b> wyświetla się pogrubiony - przeglądarka wykonała znacznik z bazy,
nazwa pliku lis.jpg" onmouseover="alert(1) zamyka cudzysłów atrybutu href i dopisuje do odnośnika atrybut ze skryptem - najechanie kursorem na „Lis” uruchamia kod JavaScript. Tak wygląda atak XSS.

htmlspecialchars() zamienia <, >, & i cudzysłowy na encje, więc znaczniki wyświetlą się jako tekst, a cudzysłów nie zamknie atrybutu. Stara linia zostaje w komentarzu. Podgląd bez zmian - zwykłe nazwy wyglądają tak samo.

zwierzeta.php PHP zmienione: 2 linie

<?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <section id="logo">
        <h1>KRĘGOWCE</h1>
    </section>
    <section id="menu">
        <a href="ryby.html">RYBY</a>
        <a href="ptaki.html">PTAKI</a>
        <a href="ssaki.html">SSAKI</a>
    </section>
    <section id="left">
        <h2>SSAKI</h2>
        <ul>
<?php
$result = mysqli_query($connection, 'SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    // echo '<li><a href="' . $row[1] . '">' . $row[0] . '</a></li>';
    echo '<li><a href="' . htmlspecialchars($row[1]) . '">' . htmlspecialchars($row[0]) . '</a></li>';
}
?>
        </ul>
        <img src="wilk.jpg" alt="Wilk szary, gromada ssaki">
    </section>
    <section id="right">
<?php
$result = mysqli_query($connection, 'SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta '
    . 'WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    echo '<p>' . $row[0] . '</p>';
    if ($row[2] == 1) {
        $info = 'gatunek jest zagrożony';
    } else {
        $info = 'gatunek nie jest zagrożony';
    }
    echo '<p>Występowanie: ' . $row[1] . ', ' . $info . '</p>';
    echo '<hr>';
}
mysqli_close($connection);
?>
    </section>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Krok 40: Zabezpieczenie: dane z bazy w akapitach

ok. 2 min

Polecenie z arkusza

Następnie wypisuje w bloku głównym – prawym zwrócone zapytaniem dane w sposób: W akapicie pierwszym (paragrafie) jest wypisywana nazwa gatunku

Ta sama zasada w skrypcie 2: gatunek i występowanie przechodzą przez htmlspecialchars(). Tekst $info nie wymaga zabezpieczenia - to stały napis wpisany w skrypcie, a nie dane z bazy. Ogólna reguła: wszystko, co wypisujesz z bazy lub z formularza, przechodzi przez htmlspecialchars, zawsze w chwili wypisywania.

Podgląd bez zmian. Stare linie zostają w komentarzu; na egzaminie wystarczy wersja z kroku „Zamknięcie połączenia z bazą”.

zwierzeta.php PHP zmienione: 4 linie

<?php
$connection = mysqli_connect('localhost', 'root', '', 'baza');
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zwierzęta</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <section id="logo">
        <h1>KRĘGOWCE</h1>
    </section>
    <section id="menu">
        <a href="ryby.html">RYBY</a>
        <a href="ptaki.html">PTAKI</a>
        <a href="ssaki.html">SSAKI</a>
    </section>
    <section id="left">
        <h2>SSAKI</h2>
        <ul>
<?php
$result = mysqli_query($connection, 'SELECT gatunek, obraz FROM zwierzeta WHERE Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    // echo '<li><a href="' . $row[1] . '">' . $row[0] . '</a></li>';
    echo '<li><a href="' . htmlspecialchars($row[1]) . '">' . htmlspecialchars($row[0]) . '</a></li>';
}
?>
        </ul>
        <img src="wilk.jpg" alt="Wilk szary, gromada ssaki">
    </section>
    <section id="right">
<?php
$result = mysqli_query($connection, 'SELECT gatunek, wystepowanie, czy_zagrozony FROM zwierzeta '
    . 'WHERE Gromady_id = 1 OR Gromady_id = 4 OR Gromady_id = 5;');
while ($row = mysqli_fetch_row($result)) {
    // echo '<p>' . $row[0] . '</p>';
    echo '<p>' . htmlspecialchars($row[0]) . '</p>';
    if ($row[2] == 1) {
        $info = 'gatunek jest zagrożony';
    } else {
        $info = 'gatunek nie jest zagrożony';
    }
    // echo '<p>Występowanie: ' . $row[1] . ', ' . $info . '</p>';
    echo '<p>Występowanie: ' . htmlspecialchars($row[1]) . ', ' . $info . '</p>';
    echo '<hr>';
}
mysqli_close($connection);
?>
    </section>
    <footer>
        Stronę o zwierzętach przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>

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

Etap 6: Oddanie pracy
Krok 41 · po tym etapie masz 34 z 34 kryteriów (pkt)
Krok 41: 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 wpisujesz nazwę przeglądarki, w której sprawdzasz stronę przez http://localhost/….
W folderze z numerem zdającego muszą być: dingo.jpg, hiena.jpg, import.png, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, przeglądarka.txt, ptaki.html, ryby.html, sarna.jpg, ssaki.html, styl2.css, wilk.jpg, zwierzeta.php - i może zostać rozpakowany baza2.sql. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
Typowe błędy
Płyta, której nie da się odczytać, to zero punktów za wszystkie pięć rezultatów - sprawdź ją, zanim oddasz.
przeglądarka.txt Tekst nowy plik
Google Chrome
Podgląd strony bez zmian - taki jak po kroku 37.

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 (Wersja podstawowa)

Etap 1: Baza danych

Krok 1: Folder zdającego i archiwum materialy-02.zip

Krok 2: Nowa baza danych o nazwie baza

Krok 3: Import tabel z pliku baza2.sql i zrzut import.png

Krok 4: Zapytanie 1: gatunek i obraz ssaków

Krok 5: Zapytanie 2: zwierzęta trzech gromad

Krok 6: Zapytanie 3: gatunek z nazwą gromady

Krok 7: Zapytanie 4: usunięcie kolumny opis

Etap 2: Strona zwierzeta.php

Krok 8: Plik zwierzeta.php

Krok 9: Podstrony ryby.html, ptaki.html i ssaki.html

Krok 10: Kodowanie polskich znaków

Krok 11: Tytuł strony

Krok 12: Podpięcie arkusza stylów styl2.css

Krok 13: Bloki: logo, menu, lewy, prawy i stopka

Krok 14: Blok logo: nagłówek pierwszego stopnia

Krok 15: Blok menu: trzy odnośniki

Krok 16: Blok lewy: nagłówek „SSAKI”

Krok 17: Blok lewy: lista punktowana

Krok 18: Blok lewy: obraz wilk.jpg

Krok 19: Stopka: autor strony

Etap 3: Styl CSS

Krok 20: Plik styl2.css: krój Tahoma dla całej strony

Krok 21: Blok logo

Krok 22: Blok menu

Krok 23: Blok główny lewy

Krok 24: Blok główny prawy

Krok 25: Stopka

Krok 26: Odnośniki menu: kolory i marginesy wewnętrzne

Krok 27: Odnośniki wyśrodkowane w pionie

Krok 28: Odnośniki menu po najechaniu kursorem

Krok 29: Układ bloków zgodny z obrazem 2

Krok 30: Obraz nie szerszy niż blok lewy (poza arkuszem)

Etap 4: Skrypty PHP

Krok 31: Połączenie z bazą baza na początku pliku

Krok 32: Skrypt 1: zapytanie 1

Krok 33: Skrypt 1: gatunki jako odnośniki do obrazów

Krok 34: Skrypt 2: zapytanie 2

Krok 35: Skrypt 2: nazwa gatunku w pierwszym akapicie

Krok 36: Skrypt 2: występowanie i informacja o zagrożeniu

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

Krok 38: Zamknięcie połączenia z bazą

Etap 5: Dobre praktyki (poza kluczem)

Krok 39: Zabezpieczenie: dane z bazy w odnośnikach

Krok 40: Zabezpieczenie: dane z bazy w akapitach

Etap 6: Oddanie pracy

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

Podgląd