Aby połączyć bazę danych z HTML, należy skorzystać z języka programowania po stronie serwera, który umożliwia komunikację między stroną internetową a systemem obsługi baz danych. Najczęściej wykorzystywane są tu rozwiązania oparte o PHP i bazę danych MySQL. Sam HTML nie jest w stanie samodzielnie obsługiwać operacji na bazie danych – jest językiem prezentacji, a logika realizowana jest w kodzie serwerowym.
Podstawowe założenia
- HTML służy do tworzenia interfejsu (np. formularzy);
- PHP (lub inne języki serwerowe, np. Python, Node.js) pośredniczy w przesyłaniu, pobieraniu, aktualizowaniu i kasowaniu danych w bazie;
- MySQL to jedna z najpopularniejszych baz danych do zastosowań webowych.
Przykładowy scenariusz – dodawanie danych z formularza HTML do bazy danych
Tworzenie formularza HTML
Formularz pozwala użytkownikowi wprowadzić dane, które zostaną przesłane do pliku PHP zajmującego się zapisaniem ich w bazie.
<!DOCTYPE html>
<html>
<head>
<title>Formularz rejestracji</title>
</head>
<body>
<form action="insert.php" method="post">
<div>
<label>Imię:</label>
<input type="text" name="name" required>
</div>
<div>
<label>Email:</label>
<input type="email" name="email" required>
</div>
<div>
<label>Telefon:</label>
<input type="text" name="mobile" required>
</div>
<input type="submit" name="submit" value="Wyślij">
</form>
</body>
</html>
Obsługa danych w PHP i połączenie z bazą MySQL
Plik insert.php przyjmuje dane z formularza, łączy się z bazą i wykonuje zapytanie SQL.
Najpierw plik połączenia z bazą, np. db.php:
<?php
$servername = "localhost";
$username = "nazwa_uzytkownika";
$password = "haslo";
$dbname = "nazwa_bazy";
// Nawiązanie połączenia
$conn = new mysqli($servername, $username, $password, $dbname);
// Sprawdzenie połączenia
if ($conn->connect_error) {
die("Połączenie nieudane: " . $conn->connect_error);
}
?>
Następnie logika dodawania danych w insert.php:
<?php
include_once 'db.php';
if(isset($_POST['submit'])) {
// Odczyt danych z formularza
$name = $_POST['name'];
$email = $_POST['email'];
$mobile = $_POST['mobile'];
$sql = "INSERT INTO users (name, email, mobile) VALUES ('$name','$email','$mobile')";
if (mysqli_query($conn, $sql)) {
echo "Rekord został dodany poprawnie!";
} else {
echo "Błąd: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
?>
Uwaga!
W praktycznych zastosowaniach konieczne jest dodatkowe zabezpieczenie kodu przed atakami typu SQL Injection, np. poprzez stosowanie zapytań przygotowanych (prepared statements).
Przykłady zastosowań
- Systemy rejestracji – przechowywanie zgłoszeń użytkowników w bazie danych z formularza kontaktowego;
- Tablice ogłoszeń – użytkownik dodaje nowe ogłoszenie, które jest od razu zapisywane i wyświetlane;
- Panele administracyjne – zarządzanie informacjami (dodawanie, edycja i usuwanie) poprzez interfejs WWW;
- Bazy produktów w e-commerce – administrator lub klient może dodać/wyświetlić produkt.
Wyświetlanie danych z bazy w kodzie HTML
Analogicznie, dane z bazy można wyświetlać na stronie przechodząc przez 3 etapy:
- Nawiązanie połączenia z bazą dzięki PHP,
- wykonanie zapytania SELECT,
- wstawienie danych do kodu HTML.
Przykład (fragment):
<?php
include_once 'db.php';
$sql = "SELECT id, name, email, mobile FROM users";
$result = $conn->query($sql);
echo "<table>";
echo "<tr><th>Imię</th><th>Email</th><th>Telefon</th></tr>";
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>".$row["name"]."</td>";
echo "<td>".$row["email"]."</td>";
echo "<td>".$row["mobile"]."</td>";
echo "</tr>";
}
echo "</table>";
$conn->close();
?>
Inne technologie i alternatywy
- Możesz skorzystać z innych języków po stronie serwera (Python z Flask/Django, Node.js z Express),
- połączenie przez JavaScript wymaga zastosowania technologii takich jak AJAX (z użyciem backendu) lub API REST/GraphQL,
- nowoczesne aplikacje często realizują komunikację HTML ↔ baza danych poprzez backend jako interfejs API.
Podsumowując – połączenie bazy danych z HTML wymaga wykorzystania języka serwerowego (najczęściej PHP) oraz odpowiednich funkcji do obsługi bazy danych. Sam HTML służy tylko do prezentacji i przesyłania danych, za całą logikę odpowiada kod serwera. Ten schemat znajduje zastosowanie wszędzie tam, gdzie wymagana jest interakcja użytkownika z danymi przechowywanymi w bazie, np. sklepy internetowe, systemy rejestracji, panele administracyjne.
