PHP: гостевая книга
создаем гостевую книгу с помощью PHP
Реализуем гостевую книгу (книгу записей, guestbook) с помощью PHP, HTML, CSS, JavaScript и AJAX.
Создаем базу данных
Создаем базу данных guestbook_db с таблицей messages, в которой будут храниться записи:
CREATE DATABASE guestbook_db;
USE guestbook_db;
CREATE TABLE messages (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
message TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Определяем структуру проекта
guestbook-app/
├── config.php
├── db.php
├── index.html
├── submit.php
├── fetch.php
├── style.css
├── guestbook.sql
└── js/
└── main.js
Вносим параметры базы данных
config.php
<?php
$servername = "localhost";
$username = "yourusername";
$password = "yourpassword";
$dbname = "guestbook_db";
Настраиваем соединение с базой данных
db.php
<?php
include 'config.php';
// Database configuration
$dsn = 'mysql:host='.$host.';dbname='.$dbname;
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];
try {
$pdo = new PDO($dsn, $username, $password, $options);
} catch (PDOException $e) {
die('Database connection failed: ' . $e->getMessage());
}
Создаем структуру страницы
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Guestbook</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js" defer></script>
</head>
<body>
<div class="guestbook-container">
<h1>Guestbook</h1>
<form id="guestbook-form">
<input type="text" id="name" name="name" placeholder="Your Name" required>
<textarea id="message" name="message" placeholder="Your Message" required></textarea>
<button type="submit">Submit</button>
</form>
<div id="messages-container"></div>
</div>
</body>
</html>
Настраиваем отправку и извлечение данных
js/main.js
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('guestbook-form');
const messagesContainer = document.getElementById('messages-container');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
try {
const response = await fetch('submit.php', {
method: 'POST',
body: formData,
});
const result = await response.json();
if (result.success) {
form.reset();
fetchMessages();
} else {
alert(result.error);
}
} catch (error) {
console.error('Error:', error);
}
});
async function fetchMessages() {
try {
const response = await fetch('fetch.php');
const messages = await response.json();
messagesContainer.innerHTML = messages.map(msg => `
<div class="message">
<h3>${msg.name}</h3>
<p>${msg.message}</p>
<small>${msg.created_at}</small>
</div>
`).join('');
} catch (error) {
console.error('Error:', error);
}
}
fetchMessages();
});
ОБрабатываем отправку данных формы в базу данных
submit.php
<?php
require 'db.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = $_POST['name'];
$message = $_POST['message'];
if (!empty($name) && !empty($message)) {
try {
$stmt = $pdo->prepare('INSERT INTO messages (name, message) VALUES (:name, :message)');
$stmt->execute(['name' => $name, 'message' => $message]);
echo json_encode(['success' => true]);
} catch (PDOException $e) {
echo json_encode(['success' => false, 'error' => $e->getMessage()]);
}
} else {
echo json_encode(['success' => false, 'error' => 'All fields are required.']);
}
}
Извлекаем сообщения из базы данных
fetch.php
<?php
require 'db.php';
try {
$stmt = $pdo->query('SELECT name, message, created_at FROM messages ORDER BY created_at DESC');
$messages = $stmt->fetchAll();
echo json_encode($messages);
} catch (PDOException $e) {
echo json_encode([]);
}
Настраиваем стили
css/style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.guestbook-container {
max-width: 600px;
margin: auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
form input,
form textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
form button {
padding: 10px;
border: none;
background: #28a745;
color: white;
border-radius: 5px;
cursor: pointer;
}
form button:hover {
background: #218838;
}
#messages-container {
margin-top: 20px;
}
.message {
background: #f9f9f9;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.message h3 {
margin: 0;
color: #333;
}
.message p {
margin: 5px 0 10px;
color: #666;
}
.message small {
color: #aaa;
}
Объяснение:
- config.php: настраиваем соединение с базой данных через PDO. В случае неудачи выводим сообщение об ошибке.
- index.php: создаем HTML структуру страницы, включая форму для создания сообщения и контейнер для вывода сообщений.
- js/main.js: бесшовно (без перезагрузки страницы) отправляем новое сообщение. Извлекаем и выводим на экран сообщения из базы данных.
- submit.php: отправляем сообщения в базу данных. Формируем JSON, указывающий на успех или неудачу.
- fetch.php: извлекаем сообщения из базы данных и упаковываем их в JSON.
- css/style.css: стилизуем пользовательский интерфейс.
Спасибо за внимание.
Перевод статьи MD ARIFUL HAQUE “PHP crash course: Simple Guestbook”
