Игорь Колосов.ru Личная база знаний

Практическая работа

Форма обратной связи с сохранением данных в SQLite

Цель работы

Создать страницу с формой обратной связи.
Данные формы сохраняются в SQLite-базу и выводятся на странице.

Итоговый результат

  • HTML-форма с полями

  • сохранение данных в SQLite

  • вывод списка сообщений

  • один проект, без фреймворков

Структура проекта

feedback/
index.html
app.js
api.php
data/
feedback.sqlite

Папку data создать заранее. Права на запись обязательны.

Описание формы

Поля формы:

  • Имя

  • Email

  • Сообщение

Файл index.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Форма обратной связи</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 40px auto;
}
label {
display: block;
margin-top: 12px;
}
input, textarea, button {
width: 100%;
padding: 8px;
margin-top: 4px;
}
.item {
border-bottom: 1px solid #ccc;
margin-top: 16px;
padding-bottom: 8px;
}
</style>
</head>
<body>

<h1>Обратная связь</h1>

<label>
Имя
<input id="name">
</label>

<label>
Email
<input id="email">
</label>

<label>
Сообщение
<textarea id="message"></textarea>
</label>

<button onclick="send()">Отправить</button>

<h2>Сообщения</h2>
<div id="list"></div>

<script src="app.js"></script>
</body>
</html>

Файл app.js

async function send() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;

await fetch('api.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name, email, message })
});

document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('message').value = '';

load();
}

async function load() {
const res = await fetch('api.php');
const data = await res.json();

const list = document.getElementById('list');
list.innerHTML = '';

data.forEach(item => {
const div = document.createElement('div');
div.className = 'item';
div.innerHTML = `
<strong>${item.name}</strong> (${item.email})<br>
${item.message}<br>
<small>${item.created_at}</small>
`;
list.appendChild(div);
});
}

load();

Файл api.php

<?php
header('Content-Type: application/json');

$db = new PDO(
'sqlite:' . __DIR__ . '/data/feedback.sqlite'
);
$db->setAttribute(
PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION
);

$db->exec("
CREATE TABLE IF NOT EXISTS feedback (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT,
email TEXT,
message TEXT,
created_at TEXT
)
");

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$data = json_decode(
file_get_contents('php://input'),
true
);

$stmt = $db->prepare("
INSERT INTO feedback (name, email, message, created_at)
VALUES (:name, :email, :message, :created_at)
");

$stmt->execute([
':name' => $data['name'],
':email' => $data['email'],
':message' => $data['message'],
':created_at' => date('Y-m-d H:i:s')
]);

echo json_encode(['status' => 'ok']);
exit;
}

$rows = $db->query("
SELECT * FROM feedback
ORDER BY id DESC
")->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($rows);

Проверка работы

  1. Открыть index.html через поддомен

  2. Заполнить форму

  3. Обновить страницу

  4. Убедиться, что сообщения сохраняются

  5. Проверить наличие файла feedback.sqlite