INF.03 – Zadanie egzaminacyjne

1. 🚗 Zadanie – Wypożyczalnia „AutoRent”

1.1 Wymagania SQL i baza danych

Utwórz bazę danych autorent zawierającą tabele samochody i klienci. W tabeli samochody umieść co najmniej 5 pojazdów przeznaczonych do wypożyczenia.

Wykonaj następujące kwerendy:

KW1 (SELECT z warunkiem): Wyświetl markę, model i cenę za dobę dla samochodów, których cena za dobę jest poniżej 200 zł.
KW2 (ORDER BY): Wyświetl markę, model, rok produkcji i stan techniczny, sortując malejąco po roku produkcji, a następnie rosnąco po cenie za dobę.
KW3/KW4 (Uprawnienia): Utwórz użytkownika Recepcja (Auto_2026) i nadaj mu prawa SELECT i INSERT do tabeli klienci.

1.2 Wymagania CSS (`styl_autorent.css`)

Utwórz arkusz stylów dla serwisu AutoRent. Zadbaj o poniższe wymagania:

Tło strony: #f4f4f9; nagłówek i stopka: tło #2980b9, biała czcionka.
Tabela: obramowanie 1px solid #2980b9, szerokość 90%, nagłówki <th> tło #21618c.
Klasa .input-pole ma mieć szerokość 80% oraz padding: 8px.

1.3 Wymagania HTML i JavaScript

W projekcie mają znajdować się dwa pliki HTML i jeden skrypt JS.

oferta.html: Tabela z co najmniej 5 samochodami (marka, model, rok, cena za dobę, skrzynia biegów), lista kontaktowa wypożyczalni oraz stopka z numerem zdającego.
kalkulator.html: Formularz wyliczania kosztu wypożyczenia z polami: Imię i nazwisko, lista rozwijana samochodów (wartość = cena za dobę), liczba dni wypożyczenia, checkbox „Ubezpieczenie pełne (+30 zł za dobę)”, checkbox „Samochód zastępczy (+15% wartości wypożyczenia)”. Przycisk wywołuje funkcję obliczKoszt().
Skrypt JS: Ma obliczać koszt wypożyczenia według wzoru: kwota podstawowa = cena za dobę × liczba dni; następnie dodać 30 zł × liczba dni, jeśli wybrano ubezpieczenie oraz powiększyć wynik o 15%, jeśli wybrano samochód zastępczy. Walidacja ma sprawdzać, czy podano imię i nazwisko oraz czy liczba dni > 0.

1.4 Wymagania PHP – formularz rejestracji klienta (`rejestracja.php`)

Utwórz plik rejestracja.php umożliwiający dodanie nowego klienta do tabeli klienci w bazie autorent.

Formularz ma zawierać pola: Imię i nazwisko, Telefon, Adres e‑mail oraz przycisk „Zarejestruj klienta”.
Skrypt PHP powinien:
- sprawdzić, czy wszystkie pola są wypełnione,
- sprawdzić poprawność adresu e‑mail,
- po poprawnej walidacji połączyć się z bazą autorent i dodać nowy rekord do tabeli klienci,
- wyświetlić komunikat o powodzeniu lub o błędzie (brak danych, błędny e‑mail lub błąd połączenia).

2. 💾 Gotowe kody źródłowe – AutoRent

2.1 Kod SQL i kwerendy (`baza_autorent.sql`)

CREATE DATABASE `autorent` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8_general_ci;
USE `autorent`;

CREATE TABLE `samochody` (
  `id_samochodu` int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `marka` varchar(40) NOT NULL,
  `model` varchar(40) NOT NULL,
  `rok_produkcji` int(4) NOT NULL,
  `cena_za_dobe` float(10,2) NOT NULL,
  `skrzynia` varchar(15) NOT NULL
);

INSERT INTO `samochody` (`marka`, `model`, `rok_produkcji`, `cena_za_dobe`, `skrzynia`) VALUES
('Toyota', 'Corolla', 2021, 180.00, 'automat'),
('Skoda', 'Octavia', 2019, 150.00, 'manual'),
('Volkswagen', 'Golf', 2020, 170.00, 'manual'),
('Kia', 'Sportage', 2022, 220.00, 'automat'),
('Hyundai', 'i30', 2018, 140.00, 'manual');

CREATE TABLE `klienci` (
  `id_klienta` int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `imie_nazwisko` varchar(80) NOT NULL,
  `telefon` varchar(20),
  `email` varchar(80)
);

-- KW1: samochody poniżej 200 zł za dobę
SELECT marka, model, cena_za_dobe
FROM samochody
WHERE cena_za_dobe < 200;

-- KW2: sortowanie po roku i cenie
SELECT marka, model, rok_produkcji, cena_za_dobe
FROM samochody
ORDER BY rok_produkcji DESC, cena_za_dobe ASC;

-- KW3/KW4: użytkownik Recepcja
CREATE USER 'Recepcja'@'localhost' IDENTIFIED BY 'Auto_2026';
GRANT SELECT, INSERT ON autorent.klienci TO 'Recepcja'@'localhost';

2.2 Kod CSS (`styl_autorent.css`)

:root {
  --color-primary: #2980b9;
  --color-accent: #e74c3c;
  --color-light-bg: #f4f4f9;
  --color-dark: #2c3e50;
  --color-header-bg: #21618c;
  --color-white: #ffffff;
}
* { font-family: 'Verdana', sans-serif; box-sizing: border-box; }
body { background-color: var(--color-light-bg); color: var(--color-dark); margin:0; line-height: 1.5; text-align: center;}
header, footer { background-color: var(--color-primary); color: var(--color-white); text-align: center; padding: 15px 0; }
nav { background-color: var(--color-primary); padding: 5px 0; margin-bottom: 20px; }
nav a { color: var(--color-white); padding: 8px 12px; text-decoration: none; font-weight: bold; }
nav a:hover { background-color: var(--color-accent); }
table { border: 1px solid var(--color-primary); width: 90%; margin: 20px auto; text-align: left; border-collapse: collapse;}
th { background: var(--color-header-bg); color: var(--color-white); padding: 10px; border: 1px solid #ccc;}
td { border: 1px solid #ccc; padding: 10px;}
.input-pole {
  width: 80%; padding: 8px; margin: 5px auto 15px auto;
  border: 1px solid var(--color-primary); display: block; box-sizing: border-box;
}
.form-box { background: #ffffff; padding: 20px; border-radius: 8px; max-width: 500px; margin: 20px auto; text-align: left;}
#wynik { margin-top: 20px; padding: 12px; border: 2px solid var(--color-accent); background: #ffe6e6; border-radius: 4px; text-align: center;}

2.3 Kod `oferta.html`

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>AutoRent - Oferta samochodów</title>
  <link rel="stylesheet" href="styl_autorent.css">
</head>
<body>
<header><h1>🚗 Oferta wypożyczalni AutoRent</h1></header>
<nav>
  <a href="oferta.html">Oferta samochodów</a>
  <a href="kalkulator.html">Kalkulator wypożyczenia</a>
</nav>

<div class="container">
  <h2>Dostępne samochody</h2>
  <table>
    <tr>
      <th>Marka</th>
      <th>Model</th>
      <th>Rok produkcji</th>
      <th>Cena za dobę (zł)</th>
      <th>Skrzynia biegów</th>
    </tr>
    <tr><td>Toyota</td><td>Corolla</td><td>2021</td><td>180.00</td><td>automat</td></tr>
    <tr><td>Skoda</td><td>Octavia</td><td>2019</td><td>150.00</td><td>manual</td></tr>
    <tr><td>Volkswagen</td><td>Golf</td><td>2020</td><td>170.00</td><td>manual</td></tr>
    <tr><td>Kia</td><td>Sportage</td><td>2022</td><td>220.00</td><td>automat</td></tr>
    <tr><td>Hyundai</td><td>i30</td><td>2018</td><td>140.00</td><td>manual</td></tr>
  </table>

  <h3>Dane kontaktowe</h3>
  <ul>
    <li>Nazwa: AutoRent Sp. z o.o.</li>
    <li>Adres: ul. Samochodowa 5, 00-000 Warszawa</li>
    <li>Telefon: +48 987 654 321</li>
    <li>Email: <a href="mailto:biuro@autorent.pl">biuro@autorent.pl</a></li>
  </ul>
</div>

<footer><p>Przygotował: [NUMER ZDAJĄCEGO] | INF.03</p></footer>
</body>
</html>

2.4 Kod `kalkulator.html` (formularz + JS)

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>AutoRent – Kalkulator wypożyczenia</title>
  <link rel="stylesheet" href="styl_autorent.css">
</head>
<body>
<header><h1>🧮 Kalkulator kosztu wypożyczenia</h1></header>
<nav>
  <a href="oferta.html">Oferta samochodów</a>
  <a href="kalkulator.html">Kalkulator wypożyczenia</a>
</nav>

<div class="container">
  <div class="form-box">
    <h2 style="text-align:center;">Formularz wyliczania kosztu</h2>

    <label for="imie_nazwisko"><strong>Imię i nazwisko klienta:</strong></label>
    <input type="text" id="imie_nazwisko" class="input-pole" required>

    <label for="samochod"><strong>Wybierz samochód:</strong></label>
    <select id="samochod" class="input-pole">
      <option value="180" data-opis="Toyota Corolla">Toyota Corolla (180 zł / doba)</option>
      <option value="150" data-opis="Skoda Octavia">Skoda Octavia (150 zł / doba)</option>
      <option value="170" data-opis="Volkswagen Golf">Volkswagen Golf (170 zł / doba)</option>
      <option value="220" data-opis="Kia Sportage">Kia Sportage (220 zł / doba)</option>
      <option value="140" data-opis="Hyundai i30">Hyundai i30 (140 zł / doba)</option>
    </select>

    <label for="dni"><strong>Liczba dni wypożyczenia:</strong></label>
    <input type="number" id="dni" class="input-pole" value="1" min="1">

    <label>
      <input type="checkbox" id="ubezpieczenie">
      <strong>Ubezpieczenie pełne (+30 zł za dobę)</strong>
    </label>

    <label>
      <input type="checkbox" id="zastepczy">
      <strong>Samochód zastępczy (+15% wartości wypożyczenia)</strong>
    </label>

    <button onclick="obliczKoszt()" style="margin-top:15px; padding:10px 20px; background:#2980b9; color:#fff; border:none; border-radius:4px; width:100%; cursor:pointer;">
      Oblicz koszt wypożyczenia
    </button>

    <p id="wynik">Wynik kalkulacji pojawi się tutaj...</p>
  </div>
</div>

<footer><p>Przygotował: [NUMER ZDAJĄCEGO] | INF.03</p></footer>

<script>
function obliczKoszt() {
  const imieNazwisko = document.getElementById('imie_nazwisko').value.trim();
  const selectSamochod = document.getElementById('samochod');
  const cenaDoba = parseFloat(selectSamochod.value);
  const opisSamochodu = selectSamochod.options[selectSamochod.selectedIndex].getAttribute('data-opis');
  const dni = parseInt(document.getElementById('dni').value, 10);
  const czyUbezpieczenie = document.getElementById('ubezpieczenie').checked;
  const czyZastepczy = document.getElementById('zastepczy').checked;
  const paragrafWynik = document.getElementById('wynik');

  if (imieNazwisko === "" || isNaN(dni) || dni < 1) {
    paragrafWynik.innerHTML = "❌ BŁĄD: Podaj imię i nazwisko oraz poprawną liczbę dni (min. 1).";
    paragrafWynik.style.backgroundColor = "#ffc0c0";
    paragrafWynik.style.borderColor = "red";
    return;
  }

  let kwota = cenaDoba * dni;
  let doplataUbezp = 0;

  if (czyUbezpieczenie) {
    doplataUbezp = 30 * dni;
    kwota += doplataUbezp;
  }
  if (czyZastepczy) {
    kwota *= 1.15;
  }

  const infoUbezp = czyUbezpieczenie ? `TAK (+${doplataUbezp.toFixed(2)} zł)` : "NIE";
  const infoZast = czyZastepczy ? "TAK (+15%)" : "NIE";

  paragrafWynik.innerHTML = `
✅ Wycena dla <strong>${imieNazwisko}</strong>
<br>Samochód: <strong>${opisSamochodu}</strong>
<br>Cena za dobę: ${cenaDoba.toFixed(2)} zł
<br>Liczba dni: <strong>${dni}</strong>
<br>Ubezpieczenie pełne: <strong>${infoUbezp}</strong>
<br>Samochód zastępczy: <strong>${infoZast}</strong>
<br>***
<br>Łączny koszt wypożyczenia: <strong>${kwota.toFixed(2)} zł</strong>
  `;
  paragrafWynik.style.backgroundColor = "#d4edda";
  paragrafWynik.style.border = "2px solid #155724";
}
</script>
</body>
</html>

2.5 Kod `rejestracja.php` (formularz + obsługa PHP)

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>AutoRent – Rejestracja klienta</title>
  <link rel="stylesheet" href="styl_autorent.css">
</head>
<body>
<header><h1>📋 Rejestracja nowego klienta AutoRent</h1></header>
<nav>
  <a href="oferta.html">Oferta samochodów</a>
  <a href="kalkulator.html">Kalkulator wypożyczenia</a>
  <a href="rejestracja.php">Rejestracja klienta</a>
</nav>

<div class="container">
  <div class="form-box">
    <h2 style="text-align:center;">Formularz rejestracji klienta</h2>

    <?php
    $komunikat = "";
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $imie_nazwisko = trim($_POST['imie_nazwisko'] ?? "");
        $telefon = trim($_POST['telefon'] ?? "");
        $email = trim($_POST['email'] ?? "");

        if ($imie_nazwisko === "" || $telefon === "" || $email === "") {
            $komunikat = "<span style='color:red;'>❌ BŁĄD: Wszystkie pola są wymagane.</span>";
        } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $komunikat = "<span style='color:red;'>❌ BŁĄD: Podano niepoprawny adres e‑mail.</span>";
        } else {
            $conn = @new mysqli("localhost", "root", "", "autorent");
            if ($conn->connect_error) {
                $komunikat = "<span style='color:red;'>❌ BŁĄD połączenia z bazą danych.</span>";
            } else {
                $imie_nazwisko_db = $conn->real_escape_string($imie_nazwisko);
                $telefon_db = $conn->real_escape_string($telefon);
                $email_db = $conn->real_escape_string($email);

                $sql = "INSERT INTO klienci (imie_nazwisko, telefon, email)
                        VALUES ('$imie_nazwisko_db', '$telefon_db', '$email_db')";
                if ($conn->query($sql)) {
                    $komunikat = "<span style='color:green;'>✅ Klient został poprawnie zarejestrowany.</span>";
                } else {
                    $komunikat = "<span style='color:red;'>❌ BŁĄD: Nie udało się dodać klienta.</span>";
                }
                $conn->close();
            }
        }
    }
    ?>

    <form method="post" action="rejestracja.php">
      <label for="imie_nazwisko"><strong>Imię i nazwisko:</strong></label>
      <input type="text" id="imie_nazwisko" name="imie_nazwisko" class="input-pole">

      <label for="telefon"><strong>Telefon:</strong></label>
      <input type="text" id="telefon" name="telefon" class="input-pole">

      <label for="email"><strong>Adres e‑mail:</strong></label>
      <input type="text" id="email" name="email" class="input-pole">

      <button type="submit" style="margin-top:15px; padding:10px 20px; background:#2980b9; color:#fff; border:none; border-radius:4px; width:100%; cursor:pointer;">
        Zarejestruj klienta
      </button>
    </form>

    <p id="wynik"><?php echo $komunikat; ?></p>
  </div>
</div>

<footer><p>Przygotował: [NUMER ZDAJĄCEGO] | INF.03</p></footer>
</body>
</html>

3. 👀 Podgląd gotowych stron AutoRent

Po zapisaniu plików oferta.html, kalkulator.html, styl_autorent.css i baza_autorent.sql w tym samym folderze możesz uruchomić poniższe podglądy.

[INF.03] PEŁNY ARKUSZ EGZAMINACYJNY

1. 🚗 Zadanie – Wypożyczalnia „AutoRent”

1.1 Wymagania SQL i baza danych

1.2 Wymagania CSS (`styl_autorent.css`)

1.3 Wymagania HTML i JavaScript

1.4 Wymagania PHP – formularz rejestracji klienta (`rejestracja.php`)

2. 💾 Gotowe kody źródłowe – AutoRent

2.1 Kod SQL i kwerendy (`baza_autorent.sql`)

2.2 Kod CSS (`styl_autorent.css`)

2.3 Kod `oferta.html`

2.4 Kod `kalkulator.html` (formularz + JS)

2.5 Kod `rejestracja.php` (formularz + obsługa PHP)

3. 👀 Podgląd gotowych stron AutoRent

3.1 Podgląd strony oferty (`oferta.html`)

3.2 Podgląd strony kalkulatora (`kalkulator.html`)

3.3 Podgląd strony rejestracji klienta (`rejestracja.php`)

1. 🚗 Zadanie – Wypożyczalnia „AutoRent”

1.1 Wymagania SQL i baza danych

1.2 Wymagania CSS (styl_autorent.css)

1.3 Wymagania HTML i JavaScript

1.4 Wymagania PHP – formularz rejestracji klienta (rejestracja.php)

2. 💾 Gotowe kody źródłowe – AutoRent

2.1 Kod SQL i kwerendy (baza_autorent.sql)

2.2 Kod CSS (styl_autorent.css)

2.3 Kod oferta.html

2.4 Kod kalkulator.html (formularz + JS)

2.5 Kod rejestracja.php (formularz + obsługa PHP)

3. 👀 Podgląd gotowych stron AutoRent

3.1 Podgląd strony oferty (oferta.html)

3.2 Podgląd strony kalkulatora (kalkulator.html)

3.3 Podgląd strony rejestracji klienta (rejestracja.php)

1.2 Wymagania CSS (`styl_autorent.css`)

1.4 Wymagania PHP – formularz rejestracji klienta (`rejestracja.php`)

2.1 Kod SQL i kwerendy (`baza_autorent.sql`)

2.2 Kod CSS (`styl_autorent.css`)

2.3 Kod `oferta.html`

2.4 Kod `kalkulator.html` (formularz + JS)

2.5 Kod `rejestracja.php` (formularz + obsługa PHP)

3.1 Podgląd strony oferty (`oferta.html`)

3.2 Podgląd strony kalkulatora (`kalkulator.html`)

3.3 Podgląd strony rejestracji klienta (`rejestracja.php`)