- ✓
Nazwa kwalifikacji: Tworzenie i administrowanie stronami oraz aplikacjami internetowymi.
- ✓
Próg zdawalności: 50% z teorii (20 pytań) i 75% z praktyki (to tutaj odpada najwięcej osób!).
- ✓
Kluczowe technologie: HTML5, CSS3, JavaScript, PHP, SQL (MySQL/MariaDB).
- ✓
Środowisko: Zazwyczaj XAMPP na Windowsie.
- ✓
Największa dźwignia: nie nowa wiedza, tylko rutyna — ten sam szablon startowy, ta sama kolejność pracy, ta sama checklista na koniec.
Egzamin INF.03 nie sprawdza, czy umiesz napisać nowoczesną aplikację. Sprawdza, czy w 150 minut, na cudzym komputerze, doprowadzisz do końca zestaw drobnych zadań: stronę, arkusz stylów, kilka skryptów, bazę danych, grafikę i zrzuty ekranu w odpowiednim folderze. Praktyka jest schematyczna — i właśnie dlatego można się jej nauczyć na pamięć.
Znajdziesz tu cztery rzeczy, które realnie zmieniają wynik: budżet czasu na całe 150 minut, gotowy szablon startowy HTML i CSS, wzorce kodu PHP i SQL wracające niemal w każdej sesji oraz listę pułapek organizacyjnych — tych, przez które traci się punkty mimo działającego kodu.
Struktura egzaminu: Teoria vs Praktyka#
Egzamin składa się z dwóch niezależnych części. Aby uzyskać dyplom technika, musisz zdać obie. Poniższa tabela przedstawia różnice:
| Cecha | Część Teoretyczna | Część Praktyczna |
|---|---|---|
| Czas trwania | 60 minut | 150 minut |
| Forma | Test wyboru (40 pytań) | Zadanie wykonane na komputerze |
| Wymagany wynik | 50% (20 z 40 pytań) | 75% punktów |
| Zakres | Ogólna wiedza IT, sieci, grafika | Kodowanie strony + Baza danych + Grafika |
Różnica progów nie jest kosmetyczna. Na teorii wystarczy połowa punktów, na praktyce trzy czwarte — możesz oddać zadanie prawie skończone i mimo to nie zdać. Stąd cała strategia w jednym zdaniu: lepiej mieć wszystkie elementy zrobione poprawnie w wersji minimalnej niż jeden dopieszczony, a trzy nietknięte.
150 minut praktyki – budżet czasu krok po kroku#
Największa część strat nie wynika z niewiedzy, tylko z rozłożenia czasu. Uczeń siada, otwiera edytor, spędza czterdzieści minut na wyśrodkowaniu menu i nie zdąża zaimportować bazy — a baza to osobna, dobrze punktowana część zadania.
Poniższy plan traktuj jak rozkład jazdy. Kolejność ma znaczenie: najpierw to, co punktowane binarnie i szybkie do udowodnienia (folder, baza, zrzuty), potem to, co można poprawiać w nieskończoność (wygląd).
| Minuty | Etap | Co robisz |
|---|---|---|
| 0–10 | Rozpoznanie | Czytasz CAŁE polecenie, podkreślasz nazwy plików, nazwę bazy i kolory. Tworzysz folder zdającego i podfoldery. Zero kodu. |
| 10–25 | Baza danych | Apache i MySQL w XAMPP, import pliku .sql, brakujące tabele i relacje. |
| 25–45 | Kwerendy | Zapytania po kolei; po każdym zrzut ekranu z widoczną treścią zapytania i wynikiem. |
| 45–65 | Grafika | GIMP lub Inkscape: kadrowanie, skalowanie, kanał alfa, eksport pod wymaganą nazwą. |
| 65–95 | Szkielet HTML | Szablon startowy, treści z plików tekstowych, obrazy z atrybutem alt. |
| 95–120 | Arkusz stylów | Kolory, układ (Grid), obramowania, marginesy, media query. |
| 120–140 | PHP i JS | Połączenie z bazą, pętla wypisująca rekordy, walidacja formularza. |
| 140–150 | Domknięcie | Eksport bazy do .sql, plik z nazwą przeglądarki, checklista, zgłoszenie gotowości. |
Dwie rzeczy warto wyćwiczyć w domu z zegarkiem. Pierwsze dziesięć minut bez
dotykania klawiatury — to jedyny moment, w którym wychwycisz, że polecenie każe
zapisać obraz jako logo.png, a nie logo.jpg. I ostatnie dziesięć minut jako
święte: nie zaczynasz w nich nowego elementu, tylko domykasz istniejące.
Szablon startowy: od czego zaczynasz każde zadanie#
Na egzaminie nie masz internetu, więc nie skopiujesz szkieletu z sieci. Naucz się poniższego zestawu tak, żeby przepisać go z pamięci w pięć minut. Zawiera dokładnie to, czego wymaga niemal każdy arkusz: deklarację typu dokumentu, kodowanie UTF-8, podpięty arkusz stylów, znaczniki semantyczne i miejsce na skrypt.
Szablon startowy – index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tytul z polecenia</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Naglowek strony</h1>
</header>
<main>
<section class="lewy">
<h2>Sekcja lewa</h2>
<p>Tresc wklejona z pliku tekstowego.</p>
<img src="obrazy/logo.png" alt="Logo firmy">
</section>
<section class="prawy">
<h2>Sekcja prawa</h2>
<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
</ul>
</section>
</main>
<footer>
<p>Autor: numer zdajacego</p>
</footer>
<script src="skrypt.js"></script>
</body>
</html>Do tego jeden arkusz stylów obsługujący najczęstszy układ z arkuszy: nagłówek,
dwie kolumny, stopka. Zamiast walczyć z float, używasz Grida — jest krótszy
i łatwiej go debugować, gdy coś się rozjedzie.
Szablon startowy – styl.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
color: #222222;
}
/* Naglowek i stopka na calej szerokosci */
header, footer {
background-color: #333333;
color: #ffffff;
text-align: center;
padding: 20px;
}
/* Uklad dwukolumnowy 30 / 70 */
main {
display: grid;
grid-template-columns: 30% 70%;
min-height: 500px;
}
.lewy { background-color: #dddddd; padding: 20px; }
.prawy { background-color: #eeeeee; padding: 20px; }
img { max-width: 100%; display: block; }
/* Responsywnosc - wymog pojawiajacy sie niemal zawsze */
@media (max-width: 600px) {
main { grid-template-columns: 1fr; }
}Te dwa pliki to twoja pozycja wyjściowa: masz już działającą, poprawnie zakodowaną stronę z układem, a dalej tylko podmieniasz treści i kolory. Więcej ćwiczeń na sam układ i selektory znajdziesz w bazie wiedzy do INF.03.
Frontend: HTML, CSS i JavaScript – Pewniaki#
Na egzaminie zawsze otrzymujesz surowe pliki (teksty, grafiki). Twoim zadaniem jest zbudowanie struktury. Musisz znać na pamięć Flexboxa lub Grid, aby ułożyć layout (często 2 lub 3 kolumny). Jednak najwięcej punktów traci się na JavaScript — nie dlatego, że zadania są trudne, tylko dlatego, że skrypt trzeba jeszcze poprawnie podpiąć i wywołać zdarzeniem.
Zadanie typu Must-Know: Prosta walidacja formularza w JS
function sprawdz() {
let haslo1 = document.getElementById('pass1').value;
let haslo2 = document.getElementById('pass2').value;
let wynik = document.getElementById('wynik');
if (haslo1 === "" || haslo2 === "") {
wynik.innerHTML = "Wypelnij oba pola!";
wynik.style.color = "red";
} else if (haslo1 === haslo2) {
wynik.innerHTML = "Hasla sa zgodne";
wynik.style.color = "green";
} else {
wynik.innerHTML = "Hasla sa rozne";
wynik.style.color = "red";
}
}Sam skrypt to połowa zadania — druga połowa to HTML, który go uruchamia: dwa pola
z identyfikatorami pass1 i pass2, przycisk z onclick="sprawdz()" i pusty
akapit id="wynik" na komunikat. Najczęstsza przyczyna niedziałającej walidacji
to rozjazd nazw: w skrypcie pass1, a w formularzu haslo1.
Poza walidacją wracają jeszcze dwa motywy: zmiana wyglądu elementu po kliknięciu
(element.style.backgroundColor) oraz pętla wypisująca coś do elementu — liczby
parzyste albo tabliczkę mnożenia doklejaną do innerHTML. Oba sprowadzają się
do tego samego wzorca: pobierz element, policz, wpisz wynik.
Backend: PHP i MySQL – Gdzie leżą punkty?#
Połączenie z bazą to serce egzaminu INF.03. Musisz umieć napisać skrypt PHP, który połączy się z bazą, pobierze dane i wyświetli je w tabeli lub liście. Błąd w połączeniu często zeruje punkty za całą sekcję skryptową — jeśli skrypt nie wypisze rekordów, egzaminator nie ma czego oceniać.
Wzorcowe połączenie z bazą (mysqli) z obsługą błędu
<?php
// 1. Polaczenie: serwer, uzytkownik, haslo, nazwa bazy
$conn = mysqli_connect('localhost', 'root', '', 'egzamin');
// 2. Blad polaczenia - sprawdzasz PRZED czymkolwiek innym
if (!$conn) {
die('Blad polaczenia z baza: ' . mysqli_connect_error());
}
// 3. Kodowanie - bez tego polskie znaki to krzaki
mysqli_set_charset($conn, 'utf8');
$sql = "SELECT nazwa, cena FROM produkty WHERE kategoria = 'Podzespoly'";
$result = mysqli_query($conn, $sql);
// 4. Blad zapytania - tutaj konczy sie literowka w nazwie kolumny
if (!$result) {
die('Blad zapytania: ' . mysqli_error($conn));
}
// 5. Wypisanie wynikow
if (mysqli_num_rows($result) > 0) {
echo "<table>";
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr><td>" . $row['nazwa'] . "</td><td>" . $row['cena'] . " zl</td></tr>";
}
echo "</table>";
} else {
echo "<p>Brak rekordow spelniajacych warunek.</p>";
}
mysqli_close($conn);
?>Dwie uwagi praktyczne do tego kodu:
- Plik musi mieć rozszerzenie
.php, leżeć w katalogu serwera i być otwierany przezlocalhost/.... Otwarty podwójnym kliknięciem pokaże surowy kod. - Nazwa bazy i kolumn musi być identyczna jak w poleceniu, łącznie z wielkością
liter.
mysqli_errorwypisze ci literówkę zamiast pokazać białą stronę.
Bazy Danych – Czysty SQL i Relacje#
PHP to tylko klej. Fundamentem jest baza danych. Na egzaminie musisz nie tylko zaimportować gotowy plik .sql, ale często stworzyć własne tabele i relacje między nimi. Najważniejszym pojęciem jest tutaj Klucz Obcy (Foreign Key).
- ✓
Relacje 1:N: Np. Jeden autor ma wiele książek. Musisz umieć połączyć tabele
AutorzyiKsiazkiw zakładce 'Relacje' lub kodem SQL. - ✓
Zapytania (Kwerendy): Egzaminator ocenia zrzuty ekranu zapytań. Najczęściej pojawiają się:
SELECT ... WHERE ... LIKE 'A%'(zaczyna się na A) oraz funkcje liczące:COUNT,AVG,SUM. - ✓
Użytkownicy: Stworzenie użytkownika 'redaktor' z dostępem tylko do
SELECT. Robisz to w zakładce 'Uprawnienia'.
Zestaw zapytań, które wracają niemal w każdej sesji
Cztery poniższe wzorce pokrywają większość poleceń bazodanowych. Ucz się schematu, nie nazw tabel — na egzaminie zmienią się tylko nazwy.
1. SELECT z łączeniem tabel (INNER JOIN)
-- Nazwa produktu wraz z nazwa producenta
SELECT produkty.nazwa AS produkt,
producenci.nazwa AS producent,
produkty.cena
FROM produkty
INNER JOIN producenci
ON produkty.producent_id = producenci.id
WHERE produkty.cena > 50
ORDER BY produkty.cena DESC;2. Grupowanie i liczenie (GROUP BY)
-- Ile produktow ma kazdy producent i jaka jest srednia cena
SELECT producenci.nazwa,
COUNT(produkty.id) AS liczba_produktow,
AVG(produkty.cena) AS srednia_cena
FROM producenci
INNER JOIN produkty
ON produkty.producent_id = producenci.id
GROUP BY producenci.nazwa
HAVING COUNT(produkty.id) > 2;3. Dodawanie rekordu (INSERT)
-- Jeden rekord
INSERT INTO produkty (nazwa, cena, kategoria, producent_id)
VALUES ('Klawiatura mechaniczna', 249.99, 'Peryferia', 3);
-- Kilka rekordow jednym poleceniem
INSERT INTO produkty (nazwa, cena, kategoria)
VALUES ('Mysz optyczna', 79.00, 'Peryferia'),
('Podkladka XL', 39.00, 'Peryferia');4. Modyfikacja i usuwanie (UPDATE, DELETE)
-- Podwyzka ceny o 10 procent w jednej kategorii
UPDATE produkty
SET cena = cena * 1.10
WHERE kategoria = 'Peryferia';
-- Zmiana kilku kolumn naraz
UPDATE produkty
SET nazwa = 'Mysz bezprzewodowa', cena = 99.00
WHERE id = 12;
DELETE FROM produkty WHERE id = 12;Zadania do przećwiczenia tych zapytań na własnych danych znajdziesz w teorii do INF.03, a szybkie sprawdzenie, czy schemat się utrwalił — w quizach.
Grafika: Wektory (Inkscape) vs Rastry (GIMP)#
Grafika na INF.03 to nie tylko przycinanie zdjęć. Musisz rozróżniać dwa światy: grafikę rastrową i wektorową. W zadaniu będziesz miał podane, którego programu użyć, ale musisz znać teorię.
| Cecha | Rastrowa (GIMP/Photoshop) | Wektorowa (Inkscape/Illustrator) |
|---|---|---|
| Budowa | Siatka pikseli (traci jakość przy powiększaniu) | Krzywe matematyczne (idealna jakość zawsze) |
| Typowe zadanie | Korekcja barw, skalowanie zdjęcia, kadrowanie | Projekt logo, ikony, proste kształty geometryczne |
| Format zapisu | JPG (kompresja stratna), PNG (przezroczystość) | SVG (skalowalny wektor) |
| Teoria Koloru | RGB (do monitora) - to ustawiasz w pliku! | CMYK (do druku) - rzadziej, ale może się trafić |
Największa pułapka tej części to eksport. W GIMP-ie Zapisz jako tworzy plik
.xcf — format roboczy, którego nikt nie oceni jako obrazu na stronie; do PNG
czy JPG prowadzi Plik → Wyeksportuj jako. Druga pułapka to wymiary: jeśli
polecenie każe przeskalować obraz do konkretnej szerokości, robisz to w programie
graficznym, a nie atrybutem width w HTML-u — ocenie podlega plik, nie sposób
jego wyświetlenia.
Gdzie najczęściej giną punkty w części praktycznej#
Żadna z poniższych strat nie wynika z braku wiedzy — wszystkie z pośpiechu albo z pominięcia jednego zdania w poleceniu.
| Obszar | Co się dzieje | Jak temu zapobiec |
|---|---|---|
| Kodowanie znaków | Polskie znaki jako krzaczki — na stronie i w danych z bazy | meta charset utf-8 ORAZ mysqli_set_charset, nie jedno z dwóch |
| Atrybut alt | Obrazy bez opisu alternatywnego | Wpisuj alt od razu przy dodawaniu obrazu, nigdy później |
| Nazwy plików | W poleceniu styl.css, w projekcie style.css — arkusz się nie podpina | Nazwy z polecenia podkreśl na starcie i przepisz dosłownie |
| Ścieżki | Obraz działa tylko u ciebie, bo ścieżka prowadzi na pulpit | Zasoby wewnątrz folderu zdającego, ścieżki typu obrazy/logo.png |
| Zrzuty ekranu | Widać wynik, nie widać treści zapytania — nie da się ocenić | Kadruj tak, by na jednym obrazie było zapytanie i wynik |
| Eksport bazy | Tabele powstały, pliku .sql brak — praca wygląda na niewykonaną | Eksport robisz zawsze, nawet gdy baza jest niedokończona |
Czego NIE robić: pułapki organizacyjne#
Kod to jedno, procedura egzaminacyjna to drugie. Poniższe potrafi skasować punkty za pracę, która merytorycznie była w porządku.
- ✓
Nie zapisujesz zrzutów w złym formacie. Jeśli polecenie mówi o pliku JPG, to plik PNG ani dokument z wklejonym obrazem nie jest tym samym. Format zapisu jest częścią treści zadania.
- ✓
Nie zapominasz o pliku z nazwą przeglądarki. Wiele arkuszy wymaga pliku tekstowego z nazwą przeglądarki, w której testowałeś stronę (czasem też edytora). Piętnaście sekund pracy, osobno punktowane.
- ✓
Nie kończysz bez zgłoszenia gotowości. Egzamin praktyczny kończy się zgłoszeniem zakończenia pracy egzaminatorowi — pominięcia tego kroku nie da się już naprawić.
- ✓
Nie zostawiasz niezapisanych plików ani nie zmieniasz ustawień stanowiska. Edytor z niezapisanym buforem wygląda identycznie jak zapisany, a instalowanie własnych narzędzi to strata czasu i ryzyko, że przestanie działać coś, co działało.
- ✓
Nie zaczynasz nowego elementu w ostatnich dziesięciu minutach. Rozgrzebany element wygląda gorzej niż jego brak, a czas na domknięcie reszty właśnie się skończył.
- ✓
Folder Główny: Na pulpicie tworzysz folder o nazwie Twój NUMER PESEL (lub numer stanowiska, zależnie od instrukcji).
- ✓
Podfoldery: Wewnątrz głównego folderu stwórz osobne katalogi:
strona,grafika,baza. - ✓
Zrzuty Ekranu: To najważniejszy dowód Twojej pracy! Każdy zrzut (np. z kwerendy SQL) zapisuj jako
jpgw głównym folderze PESEL. Nie wklejaj ich do Worda, chyba że polecenie mówi inaczej. - ✓
Export: Na koniec exportuj bazę danych do pliku
.sqli zapisz w folderzebaza. Bez tego egzaminator nie sprawdzi, czy stworzyłeś tabele!
Checklista ostatnich dziesięciu minut#
Przerabiaj ją przy każdym arkuszu próbnym, żeby na egzaminie wykonać ją automatycznie. Kolejność jest celowa — najpierw to, czego brak zeruje całe sekcje.
- Baza wyeksportowana do
.sqli zapisana we wskazanym folderze. - Zrzuty ekranu na miejscu, w wymaganym formacie, z widoczną treścią zapytań.
- Plik z nazwą przeglądarki (i edytora, jeśli wymagany) utworzony.
- Strona otwarta przez
localhost— PHP faktycznie się wykonuje. - Polskie znaki poprawne na stronie i w danych z bazy.
- Każdy obraz ma
alti faktycznie się wyświetla. - Zwężenie okna do szerokości telefonu — układ przechodzi na jedną kolumnę.
- Nazwy plików zgodne z poleceniem, co do znaku.
- Wszystko zapisane i wszystko wewnątrz folderu zdającego.
- Zgłoszenie gotowości egzaminatorowi.
Najczęściej zadawane pytania (FAQ) - Egzamin INF.03#
Odpowiedzi na pytania, które dostajemy od uczniów technikum.
Czy mogę korzystać z internetu na egzaminie?
Nie masz internetu, ale masz dokumentację offline! Zazwyczaj na pulpicie lub w folderze XAMPP znajduje się folder manual z dokumentacją PHP. Naucz się z niej korzystać (szukanie po Ctrl+F), żeby nie musieć kuć na pamięć kolejności parametrów w mysqli_query.
Co jeśli skrypt PHP nie działa?
Sprawdź, czy uruchomiłeś moduły Apache i MySQL w panelu XAMPP. To najczęstszy błąd stresowy – uczniowie piszą kod, ale zapominają włączyć serwer. Drugi w kolejności: plik otwarty prosto z dysku zamiast przez localhost. Trzeci: literówka w nazwie bazy albo kolumny — właśnie po to w szablonie połączenia jest mysqli_error.
Czy muszę znać obiektowy PHP?
Na poziomie INF.03 zazwyczaj wystarcza programowanie proceduralne (mysqli_connect), które jest prostsze do nauczenia. Obiektowość jest mile widziana, ale nie jest konieczna do zdobycia kompletu punktów.
Ile arkuszy próbnych trzeba zrobić?
Nie ma magicznej liczby, jest sensowny próg: rób arkusze do momentu, w którym szablon startowy piszesz z pamięci, a połączenie z bazą nie wymaga zaglądania do notatek. Gotowe zestawy znajdziesz w bazie arkuszy — rozwiązuj je w pełnym czasie 150 minut i bez pauz, inaczej nie przetestujesz tego, co zawodzi najczęściej, czyli rozłożenia czasu.
Co, jeśli nie skończę wszystkiego?
Oddajesz to, co działa — element zrobiony minimalnie, ale poprawnie, jest wart więcej niż rozgrzebany. Jeśli gubisz się w JavaScripcie albo PHP i chcesz przerobić pewniaki z korepetytorem, napisz do nas.
🎯
Jak zdać za pierwszym razem?
Pamiętaj: Egzamin INF.03 jest bardzo schematyczny. Kolejne arkusze różnią się głównie danymi, a logika zadań pozostaje ta sama.
Kluczem jest rutyna: ten sam szablon startowy, ten sam podział 150 minut i ta sama checklista na koniec.
Gubisz się w JavaScript lub PHP?
Nie ryzykuj poprawki. Przerobimy pewniaki egzaminacyjne razem.
Powodzenia!
Ten kod wydaje się trudny? 🤯
Na egzaminie nie ma czasu na zastanawianie się. Uczymy gotowych schematów w PHP i SQL, które działają zawsze. Zapisz się na darmową konsultację, a opiszemy Ci plan działania w 15 minut.
🚀 Umów konsultacjęAutor: PROkorepetycje
