Arkusz, w którym pierwszy rezultat robi się w phpMyAdmin

Styczeń 2025 to klasyczny układ INF.03: pięć ocenianych rezultatów, a pierwszy z nich to operacje na bazie danych. Zanim napiszesz choćby jeden znacznik HTML, musisz założyć bazę, zaimportować zrzut, wykonać cztery kwerendy i udokumentować je zrzutami ekranu. Skrypt jest tu za to najprostszy z możliwych wariantów — działa po stronie klienta, w czystym JavaScripcie, bez PHP i bez połączenia z bazą.

Jak korzystać z tego rozbioru

Każdy etap zaczyna się od karty „Czego wymaga arkusz" — ta jest widoczna od razu. Rozwiązanie jest schowane pod przyciskiem. Zanim je odsłonisz, spróbuj napisać kod samodzielnie: czytanie cudzego rozwiązania nie przygotowuje do egzaminu, na którym trzeba wyprodukować je z głowy w 150 minut, z zegarem nad głową.

📋 Spis treści

Przygotowanie

1 Metryka arkusza i klucz oceniania
2 Plan czasowy na 150 minut
3 Operacje na bazie danych
4 Zawartość witryny internetowej

Kodowanie i oddanie

5 Działanie witryny internetowej
6 Styl CSS witryny internetowej
7 Skrypt JavaScript
8 Checklista przed oddaniem

Metryka arkusza i klucz oceniania

Dane arkusza

Kwalifikacja: INF.03 — tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Sesja: styczeń 2025, zadanie 01, wersja arkusza SG
Czas: 150 minut, plus 10 minut na zapoznanie się z zadaniem (niewliczane)
Próg zdania: 75% punktów
Temat: aplikacja internetowa firmy szkoleniowej
Narzędzia: edytor grafiki rastrowej, pakiet XAMPP, edytor zaznaczający składnię

Oceniane rezultaty

Arkusz wymienia pięć rezultatów. To dosłownie lista, po której idzie egzaminator:

operacje na bazie danych
zawartość witryny internetowej
działanie witryny internetowej
styl CSS witryny internetowej
skrypt

Zwróć uwagę: grafika nie jest osobnym rezultatem, choć baner trzeba wykonać. Ocenia się go pośrednio — jako element zawartości i wyglądu strony.

Co musi znaleźć się w folderze

Archiwum pliki10.7z z pulpitu (hasło podane w arkuszu) rozpakowujesz do folderu nazwanego numerem zdającego. Tam też lądują wszystkie wyniki:

import.jpg          zrzut ekranu po imporcie tabel (format JPEG)
kwerendy.txt        tresc czterech zapytan SQL
kw1.png             wynik zapytania 1
kw2.png             wynik zapytania 2
kw3.png             wynik zapytania 3
kw4.png             wynik zapytania 4
baner.png           baner 1000 x 100 px z napisem "Kursy komputerowe"
index.html          strona glowna
raty.html           podstrona z kalkulatorem rat
style.css           arkusz stylow (uwaga: style.css, nie styl.css)
przegladarka.txt    nazwa przegladarki, w ktorej testowano witryne

Plik z nazwą przeglądarki arkusz każe nazwać z polskimi znakami — przeglądarka z „ą". Nazwy pozostałych plików przepisz znak w znak; zrzuty kwerend są w PNG, a zrzut po imporcie w JPEG i to nie jest przypadek, tylko osobno sprawdzane wymaganie.

Skrypt kliencki czy serwerowy? Arkusz rozstrzyga to jednym zdaniem: skrypt jest „wykonywany po stronie klienta, na stronie raty.html po kliknięciu przycisku Oblicz", a na ostatniej stronie dostajesz tabelę wybranych pól i metod modelu DOM języka JavaScript. To znaczy: żadnego PHP, żadnego łączenia się z bazą ze strony. Baza żyje tu własnym życiem — jest osobnym rezultatem, wykonywanym w całości w phpMyAdmin. Zawsze szukaj tych dwóch sygnałów: sformułowania „po stronie klienta/serwera" oraz tego, jaką tabelę funkcji dołączono na końcu arkusza.

Plan czasowy na 150 minut

Ten egzamin oblewa się przez zegar, nie przez brak wiedzy. Pięć rezultatów waży podobnie, więc porzucona baza kosztuje mniej więcej tyle, co porzucony skrypt. Baza jest przy tym najszybszym punktem w całym arkuszu: cztery krótkie zapytania i kilka zrzutów ekranu. Dlatego robisz ją pierwszą, na świeżej głowie.

Etap	Czas	Uwagi
Rozpakowanie archiwum, folder, przeglądarka.txt	5 min	darmowe punkty, zrób od razu
Baza: utworzenie, import, zrzut import.jpg	15 min	uruchom XAMPP zanim zaczniesz cokolwiek innego
Cztery kwerendy, kwerendy.txt, kw1–kw4.png	20 min	zrzut robisz od razu po każdym zapytaniu
Baner baner.png w edytorze grafiki	15 min	kadr co do piksela: 1000 × 100
index.html i raty.html	35 min	napisz index, skopiuj, podmień blok główny
style.css	25 min	idź po kolei po liście z arkusza
Skrypt JavaScript	20 min	osobny rezultat, nie zostawiaj na ostatnie 5 minut
Sprawdzenie, płyta, opis	15 min	rezerwa, nigdy jej nie tnij

Zasada, która ratuje egzamin: kiedy etap przekroczy swój limit o więcej niż 5 minut, zostaw go w stanie „działa częściowo" i przejdź dalej. Trzy rezultaty zrobione w 90% dają więcej punktów niż jeden dopieszczony i dwa puste. Jeśli musisz coś odpuścić, odpuszczaj kosmetykę CSS — nigdy kwerend, bo tam każde zapytanie to jedna linijka za komplet punktów.

Operacje na bazie danych

Czego wymaga arkusz

Utworzyć w phpMyAdmin bazę obuwie z zestawem polskich znaków (np. utf8_unicode_ci).
Zaimportować do niej tabele z pliku baza.sql z rozpakowanego archiwum.
Wykonać zrzut całego ekranu po imporcie, zapisać jako import.jpg w formacie JPEG, bez kadrowania, z widocznym paskiem zadań i elementami świadczącymi o poprawnym imporcie.
Zapisać treść zapytań w pliku kwerendy.txt, a wyniki ich działania w zrzutach kw1.png … kw4.png.
Zapytanie 1: wybierające jedynie kolor i materiał produktów, których wysokość buta jest większa niż 10.
Zapytanie 2: wybierające jedynie nazwę i cenę buta oraz odpowiadającą im nazwę kategorii — z użyciem relacji.
Zapytanie 3: tworzące konto użytkownika Marek na localhost z hasłem M@reK.
Zapytanie 4: nadające kontu Marek prawa jedynie do przeglądania i aktualizacji danych, jedynie w bazie obuwie, w tabeli produkt.

Napisz te cztery zapytania sam, zanim odsłonisz rozwiązanie — to najbardziej opłacalne 20 minut na całym egzaminie.

Pokaż rozwiązanieUtworzenie bazy, import i zrzut import.jpg

Uruchom panel XAMPP i wystartuj moduły Apache oraz MySQL. Bez Apache nie otworzysz phpMyAdmin, bez MySQL nie założysz bazy.
Wejdź na localhost/phpmyadmin, zakładka Bazy danych, nazwa obuwie, metoda porównywania napisów utf8_unicode_ci (albo utf8mb4_unicode_ci) — arkusz żąda zestawu polskich znaków, więc to nie jest opcja do pominięcia.
Zaznacz bazę obuwie po lewej stronie, zakładka Import, wskaż baza.sql z rozpakowanego archiwum, Wykonaj.
Po imporcie rozwiń bazę tak, żeby na ekranie było widać listę zaimportowanych tabel i zielony komunikat o powodzeniu. Dopiero teraz zrzut ekranu.
Wklej zrzut do edytora grafiki i zapisz jako import.jpg — format JPEG, cały ekran, pasek zadań widoczny, bez kadrowania.

Jeśli import się wywali

Najczęstsza przyczyna to plik SQL zawierający własne polecenie utworzenia bazy albo wybór złej bazy przed importem. Sprawdź, czy przed kliknięciem zakładki Import w panelu po lewej podświetlona jest baza obuwie — import zrobiony „z poziomu serwera" trafia tam, gdzie każe go umieścić zawartość pliku, a nie tam, gdzie chce arkusz.

Gdzie się traci punkty: zrzut zapisany w PNG zamiast JPEG (arkusz podaje formaty osobno dla importu i osobno dla kwerend), zrzut wykadrowany do samego okna przeglądarki oraz zrzut zrobiony przed importem, na którym nie widać żadnej tabeli. Egzaminator szuka na obrazku dowodu, że tabele naprawdę są w bazie.

Pokaż rozwiązanieCztery kwerendy SQL — plik kwerendy.txt

Nazwy kolumn bierzesz z ilustracji 1 w arkuszu i z tabel, które właśnie zaimportowałeś — poniżej użyto typowego nazewnictwa z tego zadania. Zanim przepiszesz zapytanie, kliknij tabelę produkt w phpMyAdmin i sprawdź, jak dokładnie nazywają się kolumny u Ciebie.

-- Zapytanie 1: kolor i material butow o wysokosci wiekszej niz 10
SELECT kolor, material
FROM produkt
WHERE wysokosc_buta > 10;

-- Zapytanie 2: nazwa i cena buta oraz nazwa jego kategorii (relacja)
SELECT produkt.nazwa, produkt.cena, kategoria.nazwa
FROM produkt
JOIN kategoria ON produkt.id_kategorii = kategoria.id;

-- Zapytanie 3: utworzenie konta uzytkownika
CREATE USER 'Marek'@'localhost' IDENTIFIED BY 'M@reK';

-- Zapytanie 4: prawa tylko do odczytu i aktualizacji, tylko w obuwie.produkt
GRANT SELECT, UPDATE ON obuwie.produkt TO 'Marek'@'localhost';

Rozbiór sformułowań arkusza

Zapis w arkuszu	Co to znaczy w SQL
„wybierające jedynie kolor i materiał"	dwie kolumny po SELECT, nigdy `SELECT *`
„należy posłużyć się relacją"	`JOIN ... ON` po kluczu obcym (dopuszczalna też składnia z przecinkiem i warunkiem w WHERE)
„tworzące konto Marek na localhost"	`CREATE USER` z jawnym hostem, hasło w apostrofach
„prawa jedynie do przeglądania i aktualizacji"	`GRANT SELECT, UPDATE` — bez INSERT, DELETE i bez ALL PRIVILEGES

Jak dokumentować wyniki

Zapytania wklejasz do zakładki SQL phpMyAdmin pojedynczo i po każdym robisz zrzut całego ekranu: kw1, kw2, kw3, kw4 — PNG.
Kwerendy 3 i 4 nie zwracają tabeli wyników, tylko komunikat o powodzeniu. To normalne — na zrzucie ma być widoczna treść zapytania i zielony komunikat.
Kolejność ma znaczenie: GRANT dla nieistniejącego użytkownika zwróci błąd, więc zapytanie 3 wykonaj przed zapytaniem 4.
Do kwerendy.txt wklej treść wszystkich czterech zapytań, każde w osobnej linii. Plik tekstowy, nie .docx.

Gdzie się traci punkty: GRANT ALL PRIVILEGES ON . zamiast dwóch konkretnych uprawnień na jednej tabeli — słowo „jedynie" pada w arkuszu dwa razy w jednym zdaniu i oba razy jest punktowane. Drugi klasyk to pominięcie hosta ('Marek' bez @'localhost') oraz zapisanie hasła bez apostrofów — znak @ w haśle wtedy wysypie składnię. Trzeci: zrzuty zapisane jako JPG, choć arkusz żąda PNG.

Zawartość witryny internetowej

Czego wymaga arkusz

Dwie podstrony: index.html i raty.html, HTML5, zadeklarowany polski język zawartości, jawne kodowanie polskich znaków, tytuł na karcie przeglądarki „Kursy komputerowe", dołączony style.css.
Podział na cztery bloki semantycznymi znacznikami sekcji HTML5: nagłówkowy, poniżej menu, poniżej główny, na dole stopka.
Blok nagłówkowy: obraz baner.png z tekstem alternatywnym „kursy komputerowe".
Menu: „Strona główna" → index.html, „Koszt rat" → raty.html, „Nasz partner" → https://moje-szkolenia.pl/
Stopka: paragraf „Autor strony: " i dalej numer zdającego.
index.html: nagłówek h3 „Kursy komputerowe - programowanie", tabela 3 × 3 (pierwszy wiersz nagłówkowy), nagłówek h3 „Adres do korespondencji", lista punktowana z adresem, telefonem i odnośnikiem pocztowym „skontaktuj się" na kursy@komputerowe.pl
raty.html: nagłówek h3 „Oblicz miesięczną ratę", dwa pola wyboru z etykietami „Kurs React.js" i „Kurs JavaScript", pole numeryczne z etykietą „Liczba rat: ", lista rozwijana Warszawa / Katowice / Gdańsk, przycisk „Oblicz" i pusty paragraf na wynik.
Baner: z pliku klawiatura.jpg wykadrowany do 1000 × 100 px, na środku napis „Kursy komputerowe" czcionką Arial, pochyloną i pogrubioną, rozmiar 60, kolor biały.

Napisz index.html sam, a dopiero potem sprawdź się z rozwiązaniem.

Pokaż rozwiązanieindex.html — szkielet wspólny dla obu podstron

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Kursy komputerowe</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
      <img src="baner.png" alt="kursy komputerowe">
  </header>
  <nav>
      <a href="index.html">Strona główna</a>
      <a href="raty.html">Koszt rat</a>
      <a href="https://moje-szkolenia.pl/">Nasz partner</a>
  </nav>
  <main>
      <h3>Kursy komputerowe - programowanie</h3>
      <table>
          <tr>
              <th>Kurs</th>
              <th>Czas trwania</th>
              <th>Cena</th>
          </tr>
          <tr>
              <td>Kurs React.js</td>
              <td>30 h</td>
              <td>1200 zł</td>
          </tr>
          <tr>
              <td>Kurs JavaScript</td>
              <td>20 h</td>
              <td>800 zł</td>
          </tr>
      </table>
      <h3>Adres do korespondencji</h3>
      <ul>
          <li>Adres: Katowice, ul. Mariacka 5</li>
          <li>Telefon: 32 888 88 88</li>
          <li><a href="mailto:kursy@komputerowe.pl">skontaktuj się</a></li>
      </ul>
  </main>
  <footer>
      <p>Autor strony: PESEL</p>
  </footer>
</body>
</html>

Dlaczego akurat tak

W miejscu PESEL wpisujesz swój numer zdającego — ten sam, którym nazwany jest folder i którym opisujesz płytę.
Zawartość tabeli przepisz z ilustracji 4 w arkuszu. Wartości powyżej to przykład o poprawnej strukturze: 3 kolumny, 3 wiersze, pierwszy wiersz z <th>. Ceny z tej tabeli wykorzysta potem skrypt, więc muszą się zgadzać z arkuszem.
lang="pl" realizuje wymóg „zadeklarowany polski język zawartości", a meta charset — „jawnie zastosowany właściwy standard kodowania polskich znaków". To dwa osobne punkty za dwie linijki.
Bloki muszą być semantyczne: <header>, <nav>, <main>, <footer>. Cztery <div> dają identyczny wygląd i zero punktów za ten wymóg.
Odnośnik pocztowy to href="mailto:...", a nie sam adres wpisany jako tekst.

Baner w edytorze grafiki

Otwórz klawiatura.jpg i użyj narzędzia kadrowania z ustaloną wielkością 1000 × 100 px, wpisaną w polach narzędzia — nie „na oko". Ramkę ustaw zgodnie z kadrem z ilustracji 2.
Narzędzie tekstowe: napis „Kursy komputerowe" na środku kadru, czcionka Arial, styl Bold Italic (pochylona i pogrubiona to dwie osobne cechy), rozmiar 60, kolor biały.
Plik → Wyeksportuj jako → baner.png. Zapis przez „Zapisz" daje plik .xcf, którego egzaminator nie zaliczy.
Sprawdź na końcu we właściwościach pliku, czy obraz ma naprawdę 1000 × 100 pikseli.

Gdzie się traci punkty: tekst alternatywny banera jest w arkuszu podany małymi literami („kursy komputerowe"), a tytuł strony wielką („Kursy komputerowe") — przepisuj je znak w znak, razem z wielkością liter. Drugi klasyk to przeskalowanie obrazu zamiast wykadrowania: wymiary się zgadzają, ale kadr nie odpowiada ilustracji 2.

Pokaż rozwiązanieraty.html — blok główny z kontrolkami

Nagłówek, menu i stopkę kopiujesz z index.html. Zmienia się wyłącznie zawartość bloku głównego:

<main>
  <h3>Oblicz miesięczną ratę</h3>

  <input type="checkbox" id="react" class="kontrolki">
  <label for="react">Kurs React.js</label>

  <input type="checkbox" id="js" class="kontrolki">
  <label for="js">Kurs JavaScript</label>

  <label for="raty">Liczba rat: </label>
  <input type="number" id="raty" class="kontrolki">

  <select id="miasto" class="kontrolki">
      <option>Warszawa</option>
      <option>Katowice</option>
      <option>Gdańsk</option>
  </select>

  <button class="kontrolki" onclick="oblicz()">Oblicz</button>

  <p id="wynik"></p>
</main>

Na co uważać

Klasa kontrolki musi być przy wszystkich pięciu kontrolkach: obu polach wyboru, polu numerycznym, liście rozwijanej i przycisku. Arkusz wymienia je po kolei.
Etykieta pola numerycznego poprzedza pole — kolejność w kodzie jest częścią wymagania. Etykiety pól wyboru arkusz pokazuje na ilustracji 5 po prawej stronie kontrolki.
Pole edycyjne ma być typu numerycznego: type="number", nie text.
Pusty paragraf <p id="wynik"></p> musi być pod przyciskiem — tam skrypt wypisze komunikat.
Zamiast <button> możesz użyć <input type="button" value="Oblicz"> — oba są przyciskiem o treści „Oblicz".

Gdzie się traci punkty: lista rozwijana zrobiona jako trzy przyciski opcji zamiast <select>, brak któregoś miasta oraz literówka w „Gdańsk" bez polskiego znaku. Skrypt wypisuje potem tę nazwę do komunikatu, więc błąd tutaj psuje dwa rezultaty naraz.

Działanie witryny internetowej

Czego wymaga arkusz

To rezultat, którego nie da się „napisać" — sprawdza się go w przeglądarce. Egzaminator otwiera Twoje pliki i klika. Ocenia:

czy obie podstrony w ogóle się otwierają i czy układ bloków odpowiada ilustracji 3 (nagłówek, pod nim menu, pod nim blok główny, na dole stopka),
czy odnośnik „Strona główna" prowadzi do index.html, a „Koszt rat" do raty.html — w obie strony, z każdej podstrony,
czy „Nasz partner" otwiera zewnętrzny adres https://moje-szkolenia.pl/,
czy „skontaktuj się" uruchamia tworzenie wiadomości na kursy@komputerowe.pl,
czy baner faktycznie się wyświetla (plik istnieje i ma poprawną nazwę),
czy polskie znaki wyglądają poprawnie, a nie jako krzaki,
czy przycisk „Oblicz" uruchamia skrypt.

Zanim odsłonisz procedurę testu, przejdź własną witrynę klikając wszystko, co się da — dokładnie tak zrobi egzaminator.

Pokaż rozwiązanieTest klikalności i typowe pułapki odnośników

Menu jest identyczne na obu stronach — to jedyny sposób, żeby nawigacja działała w obie strony:

<nav>
  <a href="index.html">Strona główna</a>
  <a href="raty.html">Koszt rat</a>
  <a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>

<!-- odnosnik pocztowy w liscie na index.html -->
<li><a href="mailto:kursy@komputerowe.pl">skontaktuj się</a></li>

Procedura sprawdzenia w 3 minuty

Otwórz index.html podwójnym kliknięciem z folderu — tak jak zrobi to egzaminator, nie przez serwer.
Kliknij „Koszt rat", potem na raty.html kliknij „Strona główna". Wracasz? Dobrze.
Kliknij „Nasz partner" — musi otworzyć się strona zewnętrzna, a nie plik lokalny o takiej nazwie.
Kliknij „skontaktuj się" — system powinien zaproponować program pocztowy. Jeśli nic się nie dzieje, sprawdź, czy nie zgubiłeś przedrostka mailto:.
Sprawdź, czy baner się rysuje. Pusta ikonka to zły plik albo zła nazwa: baner.png, w tym samym folderze co strony.
Na raty.html zaznacz kurs, wpisz liczbę rat, wybierz miasto, kliknij „Oblicz". Komunikat pojawia się pod przyciskiem.
Zapisz nazwę przeglądarki, w której to sprawdziłeś, do pliku przeglądarka.txt.

Gdzie się traci punkty: adres zewnętrzny wpisany bez https:// — przeglądarka potraktuje go wtedy jako plik lokalny i odnośnik nie zadziała. Dalej: pliki zapisane w różnych folderach (strona nie znajdzie ani banera, ani stylu), literówka w nazwie style.css (bardzo częste: styl.css z pamięci innych arkuszy) oraz strona zapisana w kodowaniu innym niż UTF-8 mimo poprawnej deklaracji meta — wtedy polskie znaki rozsypią się mimo dobrego kodu.

Styl CSS witryny internetowej

Czego wymaga arkusz

Domyślnie dla wszystkich selektorów: krój czcionki Helvetica.
Ciało strony: kolor tła #EAEAEA.
Wspólne dla menu i stopki: tło #625B5B, biała czcionka, marginesy wewnętrzne 20 px, tekst wyśrodkowany.
Obraz: szerokość 100%.
Lista punktowana: margines zewnętrzny lewy 40 px, punktor typu okrąg.
Odsyłacze tylko w menu: pogrubione, tło #EAEAEA, czcionka #625B5B, margines wewnętrzny 10 px, zewnętrzny 50 px, zaokrąglenie rogów 20 px.
Odsyłacz menu pod kursorem: tło #625B5B, czcionka #EAEAEA, obramowanie ciągłe 1 px w kolorze #EAEAEA.
Tabela: obramowanie kreskowe 1 px #625B5B, szerokość 60%, margines zewnętrzny lewy 40 px, tekst wyśrodkowany.
Klasa kontrolki: marginesy zewnętrzne 5 px.
Uwaga z arkusza: styl ciała strony, obrazu, listy i tabeli zdefiniuj wyłącznie selektorem tych znaczników.

Napisz arkusz stylów, idąc po tej liście od góry — potem porównaj.

Pokaż rozwiązanieKompletny plik style.css

* {
  font-family: Helvetica;
}

body {
  background-color: #EAEAEA;
}

nav, footer {
  background-color: #625B5B;
  color: white;
  padding: 20px;
  text-align: center;
}

img {
  width: 100%;
}

ul {
  margin-left: 40px;
  list-style-type: circle;
}

nav a {
  font-weight: bold;
  background-color: #EAEAEA;
  color: #625B5B;
  padding: 10px;
  margin: 50px;
  border-radius: 20px;
}

nav a:hover {
  background-color: #625B5B;
  color: #EAEAEA;
  border: 1px solid #EAEAEA;
}

table {
  border: 1px dashed #625B5B;
  width: 60%;
  margin-left: 40px;
  text-align: center;
}

.kontrolki {
  margin: 5px;
}

Rozbiór sformułowań arkusza

Zapis w arkuszu	Co to znaczy w CSS
„domyślnie dla wszystkich selektorów"	selektor uniwersalny `*`
„wspólne dla bloków menu i stopki"	jedna reguła z listą selektorów: `nav, footer` — nie dwie osobne kopie
„typ punktora okrąg"	`list-style-type: circle` (pusty okrąg), nie disc
„obramowanie linią kreskową"	`dashed`, a linia ciągła to `solid`
„zaokrąglenie rogów 20 px"	`border-radius: 20px`
„gdy kursor myszy znajdzie się na odsyłaczu"	pseudoklasa `nav a:hover`

Uwaga wprost z arkusza: styl ciała strony, obrazu, listy i tabeli ma być zdefiniowany wyłącznie przy pomocy selektora tych znaczników. Czyli body, img, ul, table — bez klas, bez identyfikatorów, bez header img. Rozwiązanie przez .baner da ten sam wygląd i zero punktów. Arkusz nawet tłumaczy, dlaczego: projekt zakłada późniejszą rozbudowę witryny.

Dwa miejsca, gdzie ludzie się przewracają

Formatowanie odsyłaczy dotyczy jedynie bloku menu. Sam selektor a pokoloruje też odnośnik pocztowy na index.html i punkt przepada.
Marginesy: „wewnętrzne" to padding, „zewnętrzne" to margin. W jednej regule menu występują oba (10 px i 50 px) — pomylenie ich to strata dwóch cech naraz.

Skrypt JavaScript

Czego wymaga arkusz

Wykonywany po stronie klienta, na stronie raty.html, po kliknięciu przycisku „Oblicz". To JavaScript w przeglądarce — nie PHP.
Znaczące nazwy zmiennych i funkcji, po polsku lub po angielsku.
Pobiera dane z kontrolek.
Ustala całkowitą kwotę za wybrane kursy na podstawie cen z tabeli z ilustracji 4.
Oblicza koszt jednej raty: kwota całkowita dzielona przez podaną liczbę rat.
Wyświetla pod przyciskiem, w paragrafie, treść: „Kurs odbędzie się w <miasto>. Koszt całkowity: <kwota> zł. Płacisz <liczba> rat po <rata> zł".

To najkrótszy etap i najczęściej porzucany z braku czasu. Spróbuj napisać go w 20 minut, zanim odsłonisz rozwiązanie.

Pokaż rozwiązanieFunkcja oblicz() z rozbiorem wymagań na linijki

Skrypt wstawiasz w znaczniku <script> na końcu pliku raty.html, tuż przed zamknięciem body. Ceny podstaw dokładnie takie, jakie widnieją w tabeli z ilustracji 4.

<script>
function oblicz() {
  // ceny przepisane z tabeli na stronie index.html (ilustracja 4)
  var cenaReact = 1200;
  var cenaJS = 800;

  var wybranyReact = document.getElementById("react").checked;
  var wybranyJS = document.getElementById("js").checked;
  var liczbaRat = parseInt(document.getElementById("raty").value);
  var miasto = document.getElementById("miasto").value;

  var kwota = 0;
  if (wybranyReact) {
      kwota = kwota + cenaReact;
  }
  if (wybranyJS) {
      kwota = kwota + cenaJS;
  }

  var rata = kwota / liczbaRat;

  document.getElementById("wynik").innerHTML =
      "Kurs odbędzie się w " + miasto +
      ". Koszt całkowity: " + kwota +
      " zł. Płacisz " + liczbaRat +
      " rat po " + rata + " zł";
}
</script>

Rozbiór wymagań na linijki kodu

Zapis w arkuszu	Co to znaczy w kodzie
„po kliknięciu przycisku Oblicz"	`onclick="oblicz()"` na przycisku
„pobiera dane z kontrolek"	`.checked` dla pól wyboru, `.value` dla pola liczbowego i listy
„ustala całkowitą kwotę za wybrane kursy"	suma warunkowa: dwa `if`, każdy dokłada cenę jednego kursu
„kwota całkowita dzielona przez liczbę rat"	zwykłe dzielenie, bez zaokrągleń — arkusz pisze „dla uproszczenia"
„wyświetla pod przyciskiem w paragrafie"	pusty `<p id="wynik">` pod przyciskiem + `innerHTML`
„znaczące nazewnictwo zmiennych"	kwota, rata, liczbaRat, miasto — nie a, b, x1

Dwie pułapki techniczne

parseInt jest konieczny: bez niego value pola numerycznego to tekst, a dzielenie tekstu przez liczbę zadziała, ale dodawanie już nie. Jeśli w Twojej wersji skryptu liczba rat gdziekolwiek się dodaje, brak konwersji da wynik w rodzaju „5001200".
Dla listy rozwijanej bez atrybutów value odczyt przez .value zwraca tekst opcji — czyli „Katowice". Gdybyś dopisał w opcjach własne wartości, użyj select.options[select.selectedIndex].text, bo w komunikacie ma pojawić się nazwa miasta.

Gdzie się traci punkty: treść komunikatu przepisana z pamięci zamiast z arkusza. Kropki, dwukropki i słowo „zł" po każdej kwocie są częścią wymagania — sprawdzany jest dokładny format zdania. Drugi klasyk to napisanie skryptu w PHP, bo „na egzaminie zawsze jest PHP": ten arkusz wprost mówi „po stronie klienta", a plik ma rozszerzenie .html, więc kod PHP nawet się nie wykona. Trzeci: zaszycie ceny jednego kursu bez sprawdzania, który został zaznaczony — skrypt musi obsłużyć wybór obu kursów naraz.

Checklista przed oddaniem

Folder na pulpicie nazwany numerem zdającego, a w nim wszystkie wymienione pliki i rozpakowane materiały.
Baza obuwie istnieje, ma polskie kodowanie i zaimportowane tabele.
import.jpg w JPEG, cały ekran, pasek zadań widoczny, tabele widoczne.
Cztery zrzuty kw1–kw4 w PNG, każdy pokazuje zapytanie i jego wynik lub komunikat.
kwerendy.txt zawiera treść wszystkich czterech zapytań.
Zapytanie 4 ogranicza się do SELECT i UPDATE na obuwie.produkt.
baner.png ma dokładnie 1000 × 100 px, napis Arial, pochylony, pogrubiony, biały.
Obie strony otwierają się, menu działa w obie strony, odnośnik zewnętrzny i pocztowy reagują.
Na karcie przeglądarki widać tytuł „Kursy komputerowe", polskie znaki są poprawne.
Tabela na index.html ma dokładnie 3 kolumny i 3 wiersze, pierwszy z komórkami nagłówkowymi.
Wszystkie pięć kontrolek na raty.html ma klasę kontrolki.
Skrypt sprawdzony w kilku wariantach: jeden kurs, oba kursy, różne miasta i liczby rat.
Stopka zawiera „Autor strony: " i Twój numer zdającego — na obu podstronach.
Plik przeglądarka.txt utworzony i zawiera nazwę przeglądarki.
Płyta nagrana, sprawdzona po nagraniu, opisana numerem zdającego i zapakowana w pudełku.

Przećwicz to na czas

Przeczytanie rozwiązania to nie to samo, co napisanie go w 150 minut. Otwórz oryginalny arkusz, ustaw stoper i zrób zadanie od zera — razem z bazą, zrzutami ekranu i płytą. Dopiero wynik takiej próby pokaże, gdzie naprawdę stoisz.

Testy z INF.03 🚀

Pozostałe arkusze

INF.03 styczeń 2025 — aplikacja firmy szkoleniowej z bazą danych

Oryginalny arkusz CKE (PDF)

Pozostałe arkusze INF.03