Przykładowy formularz zatwierdzania danych do bazy danych MySQL

przez

Jeśli kiedykolwiek tworzyłeś stronę internetową, to na pewno zetknąłeś się z sytuacją, w której użytkownik musi wprowadzić dane przez formularz – czy to przy rejestracji, logowaniu, wysyłaniu wiadomości, czy dodawaniu opinii. Ale co dzieje się z tymi danymi dalej?
Najczęściej trafiają one do bazy danych, takiej jak MySQL. Jednak zanim tam się znajdą, musimy je zatwierdzić, sprawdzić i bezpiecznie przesłać.

W tym artykule pokażę Ci, jak krok po kroku stworzyć przykładowy formularz zatwierdzania danych do bazy danych MySQL, który nie tylko działa, ale też jest bezpieczny, czytelny i zgodny z dobrymi praktykami programistycznymi.

Co to jest formularz zatwierdzania danych?

Formularz zatwierdzania danych to po prostu formularz HTML, który umożliwia użytkownikowi wpisanie pewnych informacji (np. imię, e-mail, komentarz itp.), a następnie przekazanie ich do skryptu backendowego (np. w PHP), który:

  1. Sprawdza poprawność danych (walidacja)
  2. Zatwierdza (czyli akceptuje lub odrzuca) dane
  3. Zapisuje je do bazy danych, jeśli wszystko jest w porządku

Takie rozwiązanie jest niezwykle popularne – od prostych formularzy kontaktowych, aż po systemy rejestracji użytkowników, ankiety i panele administracyjne.

Dlaczego warto zatwierdzać dane przed zapisaniem do bazy?

To pytanie wydaje się oczywiste, ale wiele osób (szczególnie początkujących) o tym zapomina.
Zatwierdzanie danych ma kilka kluczowych celów:

  • Bezpieczeństwo – unikamy ataków typu SQL Injection i XSS
  • Poprawność danych – użytkownicy nie zawsze wpisują dane prawidłowo (np. literówki w e-mailu)
  • Spójność bazy danych – zapobiegamy błędom, np. pustym polom lub danym o złym formacie
  • Lepsze doświadczenie użytkownika – można wyświetlić przyjazny komunikat o błędzie zamiast surowego błędu serwera

Czego potrzebujesz, żeby stworzyć taki formularz?

Zanim przejdziemy do kodu, przygotujmy środowisko.
Będziesz potrzebował:

  1. Serwera lokalnego (np. XAMPP, WAMP lub Laragon)
  2. Bazy danych MySQL
  3. Pliku PHP do obsługi danych z formularza
  4. Pliku HTML z samym formularzem

Krok 1: Tworzymy bazę danych i tabelę w MySQL

Zacznijmy od najważniejszego – gdzie nasze dane będą zapisane.
Otwórz phpMyAdmin (lub dowolne narzędzie do zarządzania MySQL) i utwórz nową bazę danych, np.:

CREATE DATABASE formularz_db;

Następnie utwórz tabelę do przechowywania danych. W naszym przykładzie załóżmy, że będziemy zapisywać imię, e-mail i wiadomość użytkownika:

CREATE TABLE dane_uzytkownikow (
    id INT AUTO_INCREMENT PRIMARY KEY,
    imie VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    wiadomosc TEXT NOT NULL,
    data_dodania TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Gotowe! Teraz mamy miejsce, w którym przechowamy zatwierdzone dane.

Krok 2: Tworzymy formularz HTML

Czas na prosty, ale estetyczny formularz. Oto przykładowy kod HTML (z lekkim stylem CSS, żeby wyglądał przyjemniej):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formularz zatwierdzania danych</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        form {
            background: white;
            padding: 20px 40px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        input, textarea {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            background: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background: #218838;
        }
    </style>
</head>
<body>
    <form action="zatwierdz.php" method="POST">
        <h2>Dodaj dane do bazy</h2>
        <input type="text" name="imie" placeholder="Imię" required>
        <input type="email" name="email" placeholder="E-mail" required>
        <textarea name="wiadomosc" placeholder="Twoja wiadomość..." rows="5" required></textarea>
        <button type="submit">Zatwierdź dane</button>
    </form>
</body>
</html>

Ten formularz przesyła dane metodą POST do pliku zatwierdz.php, który zaraz napiszemy.

Krok 3: Walidacja i zatwierdzanie danych w PHP

Teraz najważniejsza część – zatwierdzanie danych.
W pliku zatwierdz.php napiszmy kod, który:

  • Sprawdzi, czy wszystkie pola są wypełnione
  • Oczyści dane z potencjalnie niebezpiecznych znaków
  • Wprowadzi je do bazy danych przy użyciu przygotowanych zapytań (prepared statements) – to najlepszy sposób na ochronę przed SQL Injection

Oto gotowy kod:

<?php
$servername = "localhost";
$username = "root"; // domyślnie w XAMPP
$password = "";
$dbname = "formularz_db";

// Połączenie z bazą danych
$conn = new mysqli($servername, $username, $password, $dbname);

// Sprawdzenie połączenia
if ($conn->connect_error) {
    die("Błąd połączenia: " . $conn->connect_error);
}

// Pobranie danych z formularza
$imie = trim($_POST['imie']);
$email = trim($_POST['email']);
$wiadomosc = trim($_POST['wiadomosc']);

// Walidacja podstawowa
if (empty($imie) || empty($email) || empty($wiadomosc)) {
    die("Wszystkie pola są wymagane!");
}

// Walidacja adresu e-mail
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    die("Nieprawidłowy format adresu e-mail!");
}

// Przygotowanie zapytania
$stmt = $conn->prepare("INSERT INTO dane_uzytkownikow (imie, email, wiadomosc) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $imie, $email, $wiadomosc);

// Wykonanie zapytania
if ($stmt->execute()) {
    echo "<h2>Dane zostały zatwierdzone i zapisane w bazie!</h2>";
} else {
    echo "Błąd: " . $stmt->error;
}

$stmt->close();
$conn->close();
?>

Jak działa ten kod?

  1. Łączymy się z bazą danych za pomocą mysqli.
  2. Pobieramy dane z formularza przy użyciu $_POST.
  3. Czyścimy dane z niepotrzebnych spacji (trim()).
  4. Sprawdzamy, czy pola nie są puste.
  5. Weryfikujemy poprawność adresu e-mail przy pomocy filter_var().
  6. Używamy przygotowanego zapytania (prepare, bind_param, execute) – to chroni przed SQL Injection.
  7. Wyświetlamy komunikat o sukcesie lub błędzie.

Krok 4: Testujemy nasz formularz

Otwórz przeglądarkę i przejdź do adresu:

http://localhost/formularz/index.html

Wypełnij formularz, kliknij „Zatwierdź dane”, a następnie sprawdź w phpMyAdmin, czy dane trafiły do tabeli dane_uzytkownikow.

Jeśli wszystko działa – gratulacje! 🎉 Stworzyłeś swój pierwszy działający formularz zatwierdzania danych do MySQL.

Jak zwiększyć bezpieczeństwo?

Choć nasz przykład jest w pełni funkcjonalny, warto wprowadzić kilka dodatkowych zabezpieczeń:

  1. Ochrona przed spamem – dodaj Google reCAPTCHA
  2. Limit długości pól – np. maxlength w HTML i strlen() w PHP
  3. Filtrowanie HTML – aby uniknąć wstrzykiwania kodu JavaScript
  4. Obsługa wyjątków (try/catch) – zamiast die(), możesz używać bloków wyjątków, by lepiej zarządzać błędami
  5. HTTPS – zawsze używaj bezpiecznego połączenia przy przesyłaniu danych

Dodatkowe pomysły na rozwinięcie projektu

Kiedy już opanujesz podstawowy formularz, możesz dodać:

  • Edycję i usuwanie danych z bazy
  • Powiadomienie e-mail po zatwierdzeniu
  • Panel administratora z listą zgłoszeń
  • Walidację po stronie klienta (JavaScript)
  • Integrację z AJAX – by przesyłać dane bez przeładowania strony

Na przykład, prosta walidacja e-maila po stronie klienta w JavaScript może wyglądać tak:

<script>
document.querySelector("form").addEventListener("submit", function(e) {
    const email = document.querySelector("input[name='email']").value;
    const regex = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
    if (!regex.test(email)) {
        alert("Podaj poprawny adres e-mail!");
        e.preventDefault();
    }
});
</script>

Jak widzisz, stworzenie formularza zatwierdzania danych do bazy danych MySQL nie jest trudne — wystarczy kilka linijek kodu HTML i PHP, odrobina logiki walidacyjnej i gotowe!

Pro tip: Jeśli chcesz rozbudować ten projekt, spróbuj dodać logikę zatwierdzania przez administratora — np. użytkownik wypełnia formularz, a Ty możesz ręcznie zaakceptować wpis przed jego zapisaniem w bazie. To świetne ćwiczenie z zakresu CRUD (Create, Read, Update, Delete).

Szukasz taniego i dobrego hostingu dla swojej strony www? - Sprawdź Seohost.pl