Egzamin INF.03: Kompletny Projekt Egzaminacyjny Krok po Kroku

Egzamin zawodowy INF.03 (Tworzenie i administrowanie stronami i bazami danych oraz aplikacjami internetowymi) trwa 150 minut, a próg zaliczenia części praktycznej wynosi aż 75% punktów.

Nie ma tu miejsca na przypadek ani eksperymenty – arkusz egzaminacyjny jest niezwykle schematyczny. Jeśli opanujesz poniższy 5-etapowy proces, zdasz ten egzamin z wynikiem bliskim 100%!

1. Krok 0: Błyskawiczny start środowiska (Pierwsze 5 minut)

Gdy usiądziesz do stanowiska egzaminacyjnego, nie otwieraj od razu edytora kodu. Najpierw przygotuj fundamenty:

Uruchom XAMPP Control Panel:
- Włącz moduł Apache (przycisk Start -> musi zmienić kolor na zielony).
- Włącz moduł MySQL (przycisk Start -> musi zmienić kolor na zielony).
Katalog roboczy:
- Przejdź do folderu C:\xampp\htdocs\ i utwórz folder o numerze PESEL lub nazwie wskazanej w arkuszu (np. C:\xampp\htdocs\pesel\).
- Skopiuj tam wszystkie pliki z pendrive'a/płyty egzaminacyjnej (grafiki, plik .sql).
Import bazy danych w phpMyAdmin:
- Otwórz przeglądarkę i wejdź pod adres: http://localhost/phpmyadmin/.
- W menu po lewej kliknij Nowa (New).
- Wpisz nazwę bazy podaną w treści arkusza (np. warsztat) i kliknij Utwórz.
- Przejdź do zakładki Import (Importuj), wybierz plik .sql z Twojego folderu i kliknij Wykonaj na dole strony.
- Upewnij się, że tabele pojawiły się w bazie.

2. Krok 1: Kwerendy SQL (`kwerendy.txt`)

W pierwszym etapie arkusz zawsze wymaga zapisania 4 kwerend SQL do pliku tekstowego kwerendy.txt.

[!TIP] Złota zasada: Testuj każdą kwerendę bezpośrednio w zakładce SQL w phpMyAdminie! Dopiero gdy zobaczysz poprawne wyniki w tabeli, skopiuj jej treść do pliku kwerendy.txt.

-- Kwerenda 1: Zwykłe pobranie z warunkiem i sortowaniem
SELECT nazwisko, imie, telefon FROM klienci WHERE miasto = 'Poznań' ORDER BY nazwisko ASC;

-- Kwerenda 2: Łączenie tabel (INNER JOIN)
SELECT samochody.marka, samochody.model, naprawy.koszt 
FROM samochody 
INNER JOIN naprawy ON samochody.id = naprawy.samochody_id 
WHERE naprawy.stan = 'zakończona';

-- Kwerenda 3: Funkcja agregująca (zliczanie, suma, średnia)
SELECT marka, COUNT(*) AS ilosc FROM samochody GROUP BY marka HAVING COUNT(*) > 2;

-- Kwerenda 4: Dodawanie lub aktualizacja rekordu
INSERT INTO uslugi (nazwa, cena) VALUES ('Wymiana oleju', 150.00);

3. Krok 2: Struktura HTML5 i Szablon Strony

Strona w arkuszu zazwyczaj nosi nazwę index.php (lub index.html, jeśli nie wymaga PHP). Składa się ze standardowego układu bloków semantycznych:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Warsztat Samochodowy</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>

    <!-- Baner / Nagłówek -->
    <header>
        <h1>Auto-Serwis: Kompleksowa Naprawa</h1>
    </header>

    <div class="kontener">
        <!-- Panel Lewy: Menu lub Grafika -->
        <aside id="lewy">
            <h2>Nasza oferta</h2>
            <ul>
                <li>Diagnostyka komputerowa</li>
                <li>Wymiana opon</li>
                <li>Klimatyzacja</li>
            </ul>
            <img src="auto.png" alt="Samochód serwisowany">
        </aside>

        <!-- Panel Prawy: Formularz i Wyniki PHP -->
        <main id="prawy">
            <h2>Zgłoś naprawę</h2>
            <form action="index.php" method="post">
                <label for="klient">Imię i nazwisko:</label><br>
                <input type="text" id="klient" name="klient" required><br><br>

                <label for="usluga">Rodzaj usługi:</label><br>
                <select id="usluga" name="usluga">
                    <option value="1">Przegląd (100 zł)</option>
                    <option value="2">Hamulce (250 zł)</option>
                    <option value="3">Zawieszenie (400 zł)</option>
                </select><br><br>

                <button type="submit" name="wyslij">Zatwierdź zgłoszenie</button>
            </form>

            <!-- Miejsce na skrypt PHP generujący dynamiczną treść -->
            <div id="wynik-php">
                <!-- Tu kod PHP -->
            </div>
        </main>
    </div>

    <!-- Stopka strony -->
    <footer>
        <p>Stronę internetową opracował: PESEL_ZDAJĄCEGO</p>
    </footer>

    <script src="skrypt.js"></script>
</body>
</html>

4. Krok 3: Stylizacja arkuszem CSS (`styl.css`)

Egzaminatorzy CKE sprawdzają kod CSS co do jednego piksela i koloru HEX. Przepisuj wartości dokładnie z tabeli wymagań arkusza!

/* 1. Reset podstawowy */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* 2. Baner / Header */
header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px;
}

/* 3. Układ dwóch kolumn obok siebie */
.kontener {
    display: flex;
    min-height: 500px;
}

#lewy {
    width: 35%;
    background-color: #ecf0f1;
    padding: 20px;
}

#prawy {
    width: 65%;
    background-color: #ffffff;
    padding: 20px;
}

/* 4. Formularz */
input[type="text"], select {
    width: 80%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
}

button {
    background-color: #27ae60;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: #219150;
}

/* 5. Stopka */
footer {
    background-color: #2c3e50;
    color: white;
    text-align: right;
    padding: 15px 30px;
}

5. Krok 4: Backend PHP z obsługą MySQL (`mysqli`)

Na egzaminie INF.03 standardem jest biblioteka mysqli. Pamiętaj o 5 żelaznych krokach każdego skryptu PHP:

<?php
// 1. Odbiór danych z formularza po kliknięciu przycisku submit
if (isset($_POST['wyslij'])) {
    $klient = trim($_POST['klient']);
    $usluga_id = intval($_POST['usluga']);

    // 2. Połączenie z bazą danych MySQL (host, user, pass, db)
    $polaczenie = mysqli_connect('localhost', 'root', '', 'warsztat');

    // Sprawdzenie, czy połączenie się udało
    if (!$polaczenie) {
        die("Błąd połączenia z bazą: " . mysqli_connect_error());
    }

    // Opcjonalnie: ustawienie kodowania polskich znaków
    mysqli_set_charset($polaczenie, "utf8");

    // 3. Wstawienie nowego rekordu do bazy (Zabezpieczenie przed błędami)
    $klient_bezpieczny = mysqli_real_escape_string($polaczenie, $klient);
    $kwerenda_insert = "INSERT INTO zgloszenia (klient, usluga_id, data_wpisu) VALUES ('$klient_bezpieczny', $usluga_id, NOW())";
    mysqli_query($polaczenie, $kwerenda_insert);

    // 4. Pobranie i wyświetlenie listy wszystkich aktualnych zgłoszeń
    $kwerenda_select = "SELECT zgloszenia.id, zgloszenia.klient, uslugi.nazwa, uslugi.cena 
                        FROM zgloszenia 
                        JOIN uslugi ON zgloszenia.usluga_id = uslugi.id 
                        ORDER BY zgloszenia.id DESC";
    
    $wynik = mysqli_query($polaczenie, $kwerenda_select);

    echo "<h3>Aktualna lista zleceń:</h3>";
    echo "<table border='1' style='width: 100%; border-collapse: collapse; margin-top: 15px;'>";
    echo "<tr style='background-color: #ecf0f1;'><th>Nr</th><th>Klient</th><th>Usługa</th><th>Cena</th></tr>";

    // Pętla pobierająca wiersze z bazy
    while ($wiersz = mysqli_fetch_assoc($wynik)) {
        echo "<tr>";
        echo "<td>" . $wiersz['id'] . "</td>";
        echo "<td>" . htmlspecialchars($wiersz['klient']) . "</td>";
        echo "<td>" . $wiersz['nazwa'] . "</td>";
        echo "<td>" . $wiersz['cena'] . " zł</td>";
        echo "</tr>";
    }
    echo "</table>";

    // 5. ZAWSZE zamknij połączenie z bazą!
    mysqli_close($polaczenie);
}
?>

6. Krok 5: Skrypt JavaScript po stronie klienta (`skrypt.js`)

Często arkusz wymaga dynamicznej kalkulacji w JS bez przeładowywania strony (np. obliczenie rabatu lub kosztu przed wysłaniem):

// Przykład: Automatyczne przeliczenie kosztu z rabatem
function obliczKoszt() {
    const selectUsluga = document.getElementById("usluga");
    const wybranaOpcja = selectUsluga.options[selectUsluga.selectedIndex].text;
    
    // Pobranie wartości
    let cena = 0;
    if (selectUsluga.value === "1") cena = 100;
    else if (selectUsluga.value === "2") cena = 250;
    else if (selectUsluga.value === "3") cena = 400;

    const czyStalyKlient = document.getElementById("staly_klient")?.checked;
    if (czyStalyKlient) {
        cena = cena * 0.8; // 20% rabatu
    }

    const wynikDiv = document.getElementById("koszt-info");
    if (wynikDiv) {
        wynikDiv.innerHTML = `Szacowany koszt usługi: <strong>${cena.toFixed(2)} zł</strong>`;
    }
}

7. Ostateczna Checklista Przed Zakończeniem Egzaminu

Przed zgłoszeniem zakończenia pracy upewnij się:

Ścieżki i nazwy plików: Czy pliki nazywają się DOKŁADNIE tak, jak w treści (index.php, styl.css, skrypt.js, kwerendy.txt)? Pamiętaj: wielkość liter w systemach serwerowych ma znaczenie!
PESEL w stopce: Czy w stopce strony znajduje się Twój poprawny numer PESEL?
Działanie w przeglądarce: Otwórz stronę przez adres http://localhost/pesel/index.php (NIGDY nie otwieraj pliku PHP przez dwuklik jako file:///...!).
Zamknięcie połączenia bazy: Czy każdy skrypt PHP kończy się wywołaniem mysqli_close($polaczenie);?
Kwerendy w pliku: Czy w kwerendy.txt znajduje się dokładnie tyle zapytań, ile wymagał arkusz?