INF.03: zadanie praktyczne z SQL, HTML i CSS

Zapytanie zwraca dobre rekordy, ale strona pokazuje co innego? Rozdziel trzy etapy: przygotowanie danych, sprawdzenie SQL i prezentację wyniku. W tym autorskim warsztacie wykonasz mały projekt katalogu biblioteki. Paczka zawiera dane, polecenia i działający statyczny wzorzec strony, który możesz porównać z własną pracą.

Co budujesz i w jakim środowisku

Informator CKE technika informatyka oddziela INF.03, dotyczącą stron, aplikacji internetowych i baz danych, od INF.02. Ten warsztat ćwiczy tylko wybrane elementy: SELECT, filtrowanie, grupowanie oraz semantyczny HTML i CSS. Nie zastępuje całej kwalifikacji, programowania backendu ani wyposażenia konkretnej sesji.

Pobierz projekt z danymi i rozwiązaniem. Archiwum zawiera schema.sql, zadania.sql, rozwiazania.sql, index.html, style.css i instrukcję. Dane są fikcyjne. Strona wzorcowa działa po otwarciu index.html i pokazuje ustalony wynik, nie łączy się z serwerem bazy. Zapytania wykonaj osobno w swoim środowisku SQL. Użyte polecenia mają prosty wspólny zakres SQLite i MySQL; ustawienia konkretnej sesji egzaminu sprawdź u prowadzącego.

Tabela i polecenia

Tabela ksiazki ma kolumny: id, tytul, dzial, rok, dostepne. dostepne oznacza liczbę egzemplarzy możliwych do wypożyczenia, nie wartość logiczną. Nie myl liczby tytułów z sumą egzemplarzy.

Wykonaj zadania:

1. Wypisz tytuł i liczbę dostępnych egzemplarzy książek IT, które mają co najmniej jeden egzemplarz. Posortuj tytuły rosnąco.
2. Dla każdego działu oblicz liczbę tytułów i sumę dostępnych egzemplarzy. Posortuj po nazwie działu.
3. Wypisz książki wydane od 2023 roku włącznie, od najnowszej.
4. Przygotuj stronę z nagłówkiem, krótkim wprowadzeniem, tabelą wyniku zadania 1 i stopką. Tabela ma mieć nagłówki kolumn i podpis. Na telefonie treść ma pozostać czytelna.

Zapytania i wyniki kontrolne

Najpierw uruchom schema.sql w pustej bazie ćwiczeniowej. Plik tworzy i wypełnia jedną tabelę. Nie importuj go do bazy z własnymi danymi.

SELECT tytul, dostepne
FROM ksiazki
WHERE dzial = 'IT' AND dostepne > 0
ORDER BY LOWER(tytul), id;

SELECT dzial, COUNT(*) AS tytuly, SUM(dostepne) AS egzemplarze
FROM ksiazki
GROUP BY dzial
ORDER BY dzial;

SELECT tytul, rok
FROM ksiazki
WHERE rok >= 2023
ORDER BY rok DESC, id;

Wynik 1: Sieci od podstaw: 3; SQL w przykładach: 2. Książka z zerem dostępnych egzemplarzy odpada.

Wynik 2: IT: 3 tytuły i 5 egzemplarzy; Podróże: 2 tytuły i 5 egzemplarzy. COUNT(*) liczy wiersze, a SUM(dostepne) dodaje wartości.

Wynik 3: Atlas wycieczek: 2025; Pierwsza strona WWW: 2024; SQL w przykładach: 2023. Znak >= obejmuje rok graniczny.

HTML, CSS i kontrola wyniku

Zacznij od struktury dokumentu: język pl, kodowanie UTF-8, tytuł strony i viewport. W treści użyj header, main, table z caption, thead i tbody, a następnie footer. Nie zastępuj tabeli spacjami ani zrzutem ekranu wyniku SQL.

W style.css ustaw czytelny rozmiar tekstu, odstępy i szerokość strony zależną od ekranu. Sprawdź wariant około 390 pikseli. Jeżeli tabela jest szersza, zapewnij jej lokalne przewijanie, zamiast rozszerzać cały dokument.

Strona wzorcowa zawiera dwa wiersze wyniku 1 i liczbę 5 jako sumę dostępnych egzemplarzy IT. Gdy później dodasz rzeczywiste połączenie z bazą, wynik powinien pochodzić z zapytania. Dane wejściowe przekazuj parametrami, zgodnie z dokumentacją przygotowanych zapytań PDO; tekst wyświetlany w HTML wymaga odpowiedniego kodowania, na przykład htmlspecialchars w PHP. To dwa różne zadania: ochrona zapytania i poprawna prezentacja tekstu.

Próba zmiany danych i lista błędów

Zmień w bazie dostepne dla książki 2 z 0 na 1 i ponów zapytanie 1. Powinny pojawić się trzy tytuły IT, a suma dostępnych egzemplarzy IT w zapytaniu 2 wzrośnie do 6. Statyczny wzorzec HTML nie zmieni się sam. To celowy punkt kontrolny pokazujący różnicę między zapisanym wynikiem a aplikacją połączoną z bazą.

Jeśli wynik się nie zgadza, sprawdź kolejno nazwę bazy, dane po imporcie, warunek AND, granicę >= i kolejność sortowania. Dopiero potem szukaj problemu w CSS. Zachowaj zapytanie, wynik i opis oczekiwania jako dowód wykonania.

Do następnej próby dodaj jeden fikcyjny tytuł z innego działu i przewidź, jak zmieni grupowanie. Materiał INF.02 dotyczy innej kwalifikacji; nie traktuj poprawnego SQL jako sprawdzenia adresacji sieci.