— Игорь Колосов

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

Форма обратной связи с сохранением данных в 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);

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

Открыть index.html через поддомен
Заполнить форму
Обновить страницу
Убедиться, что сообщения сохраняются
Проверить наличие файла feedback.sqlite