Formularz kontaktowy - bazy danych
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
Budowa portalu kontaktowego
Operacje na bazie danych (SQL)
W narzędziu phpMyAdmin wykonaj następujące kroki:
Utwórz bazę danych o nazwie
firma_kontakt.Utwórz tabelę
zgloszeniaz kolumnami:id: INT, klucz podstawowy, Auto Increment.imie_nazwisko: VARCHAR(100).email: VARCHAR(50).telefon: VARCHAR(15).wiadomosc: TEXT.
Struktura witryny (HTML5)
Stwórz plik kontakt.php. Witryna musi składać się z następujących sekcji:
Nagłówek (Header): Ma zawierać dowolny obrazek (np. logo lub ikonę koperty) oraz napis „Formularz kontaktowy” w nagłówku H1.
Główna część (Main/Body):
Podzielona na dwie kolumny (użyj CSS, np. Flexbox lub Float).
Lewa kolumna: Osadź mapę Google (iframe) wskazującą dowolną lokalizację (np. Twoją szkołę).
Prawa kolumna: Formularz z polami: Imię i Nazwisko, E-mail, Telefon, Treść wiadomości (użyj znacznika
<textarea>) oraz przycisk „Wyślij”.
Stopka (Footer): Szeroka na 100% okna, z tekstem „Stronę wykonał: [Twoje Imię i Nazwisko]” wyśrodkowanym w poziomie.
Logika aplikacji (PHP)
Skrypt PHP umieszczony w pliku kontakt.php musi:
Połączyć się z bazą danych
firma_kontakt.Odebrać dane z formularza metodą POST.
Zabezpieczyć prostym warunkiem, aby skrypt uruchamiał się tylko po kliknięciu przycisku.
Wykonać zapytanie INSERT, zapisując wszystkie dane do tabeli
zgloszenia.Po udanym zapisie wyświetlić komunikat: „Dziękujemy za wiadomość! Skontaktujemy się z Tobą”.
Przykładowy kod
Plik kontakt.php (Struktura i PHP)
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<title>Kontakt – Nasza Firma</title>
<link rel=”stylesheet” href=”styl_kontakt.css”>
</head>
<body>
<header>
<img src=”ikona.png” alt=”logo” style=”height: 50px;”>
<h1>Formularz kontaktowy</h1>
</header>
<main>
<div id=”lewy”>
<iframe>
TU KOD WKLEAMY SAMODZIELNIE Z GOOGLE MAPS
</iframe>
</div>
<div id=”prawy”>
<form method=”POST”>
<label>Imię i Nazwisko:</label><br>
<input type=”text” name=”osoba” required><br>
<label>E-mail:</label><br>
<input type=”email” name=”mail” required><br>
<label>Telefon:</label><br>
<input type=”text” name=”tel”><br>
<label>Wiadomość:</label><br>
<textarea name=”tresc” rows=”5″></textarea><br>
<input type=”submit” name=”wyslij” value=”Wyślij”>
</form>
<?php
if(isset($_POST[’wyslij’])) {
$c = mysqli_connect(„localhost”, „root”, „”, „firma_kontakt”);
$osoba = $_POST[’osoba’];
$mail = $_POST[’mail’];
$tel = $_POST[’tel’];
$tresc = $_POST[’tresc’];
$sql = „INSERT INTO zgloszenia (imie_nazwisko, email, telefon, wiadomosc)
VALUES (’$osoba’, '$mail’, '$tel’, '$tresc’)”;
if(mysqli_query($c, $sql)) {
echo „<p>Dziękujemy za wiadomość!</p>”;
}
mysqli_close($c);
}
?>
</div>
</main>
<footer>
<p>Stronę wykonał: Jan Kowalski</p>
</footer>
</body>
</html>
Przykład końcowy rozwiązania zadania:
