Lekcja 9: Obsługa Formularzy HTML i Przetwarzanie Danych

Do tej pory nasz kod działał w próżni. Teraz otworzymy go na świat i pozwolimy użytkownikom na interakcję. Stworzymy prosty formularz kontaktowy, który pobierze imię oraz wiadomość i wyświetli je na ekranie.

Krok 1: Tworzenie Formularza HTML

Najpierw potrzebujemy samego formularza. Stwórz nowy plik i nazwij go formularz.html.

Ważne: Ten plik będzie miał rozszerzenie .html, ponieważ na razie nie zawiera żadnego kodu PHP.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Formularz Kontaktowy</title>
    <style>
        body { font-family: sans-serif; }
        .container { width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; }
        input, textarea { width: 100%; margin-bottom: 10px; padding: 8px; box-sizing: border-box; }
        button { padding: 10px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>

    <div class="container">
        <h2>Napisz do nas!</h2>
        <form action="odbierz.php" method="POST">
            <label for="imie">Twoje imię:</label>
            <input type="text" id="imie" name="imie">

            <label for="wiadomosc">Twoja wiadomość:</label>
            <textarea id="wiadomosc" name="wiadomosc" rows="4"></textarea>

            <button type="submit">Wyślij</button>
        </form>
    </div>

</body>
</html>

Analiza kluczowych atrybutów formularza:

  • <form action="odbierz.php" method="POST">: To najważniejsza część.
    • action="odbierz.php": Określa, do którego pliku zostaną wysłane dane po kliknięciu przycisku „Wyślij”.
    • method="POST": Określa metodę wysyłki. POST wysyła dane w „tle”, w ciele żądania HTTP. Jest to standardowa i bezpieczniejsza metoda dla formularzy. Alternatywą jest GET, która wysyła dane w adresie URL (np. ?imie=Jan&...), co jest widoczne dla wszystkich.
  • name="imie" i name="wiadomosc": Atrybuty name są niezwykle ważne. To one stają się kluczami w tablicy, w której PHP otrzyma dane.

Krok 2: Tworzenie Skryptu PHP do Odbierania Danych

Teraz stwórz drugi plik, który nazwałeś w atrybucie action. Nazwij go odbierz.php i umieść w tym samym folderze (htdocs).

<?php

// Sprawdzamy, czy formularz został wysłany metodą POST
if ($_SERVER["REQUEST_METHOD"] === "POST") {

    // Sprawdzamy, czy dane zostały przesłane i nie są puste
    if (!empty($_POST['imie']) && !empty($_POST['wiadomosc'])) {

        // Odbieramy dane i zabezpieczamy je przed atakami XSS
        $imie = htmlspecialchars($_POST['imie']);
        $wiadomosc = htmlspecialchars($_POST['wiadomosc']);

        // Wyświetlamy powitanie i otrzymane dane
        echo "<h1>Dziękujemy za Twoją wiadomość, $imie!</h1>";
        echo "<p>Oto treść Twojej wiadomości:</p>";
        echo "<p><em>" . nl2br($wiadomosc) . "</em></p>"; // nl2br() zamienia znaki nowej linii na <br>

        echo '<a href="formularz.html">Wróć do formularza</a>';

    } else {
        // Jeśli któreś pole jest puste
        echo "<h1>Błąd!</h1>";
        echo "<p>Proszę wypełnić wszystkie pola formularza.</p>";
        echo '<a href="formularz.html">Wróć i spróbuj ponownie</a>';
    }

} else {
    // Jeśli ktoś spróbuje wejść na plik odbierz.php bezpośrednio
    echo "<h1>Błąd!</h1>";
    echo "<p>Formularz nie został wysłany.</p>";
}

?>

Jak to wszystko działa?

  1. Superglobalna tablica $_POST: Kiedy formularz jest wysyłany metodą POST, PHP automatycznie tworzy specjalną tablicę asocjacyjną o nazwie $_POST. Kluczami w tej tablicy są atrybuty name z pól formularza ('imie', 'wiadomosc'), a wartościami są dane wprowadzone przez użytkownika.
  2. if ($_SERVER["REQUEST_METHOD"] === "POST"): To jest zabezpieczenie. Sprawdzamy, czy użytkownik faktycznie wysłał formularz, a nie wszedł na stronę odbierz.php wpisując adres w przeglądarce.
  3. !empty($_POST['imie']): empty() to funkcja, która sprawdza, czy zmienna jest pusta. Używamy jej, aby upewnić się, że użytkownik wypełnił wymagane pola.
  4. htmlspecialchars() – KLUCZOWE ZABEZPIECZENIE: Ta funkcja jest absolutnie niezbędna. Zamienia ona znaki specjalne HTML (jak < i >) na ich bezpieczne odpowiedniki. Chroni to Twoją stronę przed atakami typu Cross-Site Scripting (XSS), gdzie złośliwy użytkownik mógłby w polu formularza wpisać kod JavaScript, który by się wykonał. Zawsze używaj htmlspecialchars() do wyświetlania danych wprowadzonych przez użytkownika!

Testowanie

  1. Upewnij się, że serwer Apache w XAMPP jest uruchomiony.
  2. Otwórz w przeglądarce plik z formularzem: http://localhost/formularz.html.
  3. Wpisz swoje imię i wiadomość, a następnie kliknij „Wyślij”.
  4. Powinieneś zostać przekierowany na stronę odbierz.php i zobaczyć spersonalizowaną wiadomość powitalną.

Podsumowanie

OGROMNE GRATULACJE! Stworzyłeś swoją pierwszą w pełni funkcjonalną, interaktywną aplikację webową. Połączyłeś w niej wszystko, czego się nauczyłeś, aby przetworzyć dane od użytkownika, a przy tym zadbałeś o podstawowe bezpieczeństwo. To gigantyczny krok w Twojej nauce programowania.

Przewijanie do góry