Взаимодействие веб-интерфейса с базой данных: полный стек

Расширенные примеры интеграции

Пример 1. Полное CRUD приложение 'Список задач'

Серверный API (api.php) с роутингом:

// api.php
header('Content-Type: application/json');
$pdo = new PDO('mysql:host=localhost;dbname=todo;charset=utf8', 'user', 'pass');
$method = $_SERVER['REQUEST_METHOD'];
$uri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$parts = explode('/', trim($uri, '/'));
$resource = $parts[0] ?? '';
$id = $parts[1] ?? null;

switch ($method) {
  case 'GET':
    if ($resource === 'tasks' && $id) {
      $stmt = $pdo->prepare('SELECT * FROM tasks WHERE id = ?');
      $stmt->execute([$id]);
      echo json_encode($stmt->fetch(PDO::FETCH_ASSOC));
    } elseif ($resource === 'tasks') {
      $stmt = $pdo->query('SELECT * FROM tasks ORDER BY created_at DESC');
      echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
    }
    break;
  case 'POST':
    $input = json_decode(file_get_contents('php://input'), true);
    $stmt = $pdo->prepare('INSERT INTO tasks (title, completed) VALUES (?, 0)');
    $stmt->execute([$input['title']]);
    echo json_encode(['id' => $pdo->lastInsertId()]);
    break;
  case 'PUT':
    $input = json_decode(file_get_contents('php://input'), true);
    $stmt = $pdo->prepare('UPDATE tasks SET completed = ? WHERE id = ?');
    $stmt->execute([$input['completed'], $id]);
    echo json_encode(['updated' => true]);
    break;
  case 'DELETE':
    $stmt = $pdo->prepare('DELETE FROM tasks WHERE id = ?');
    $stmt->execute([$id]);
    echo json_encode(['deleted' => true]);
    break;
  default:
    http_response_code(405);
    echo json_encode(['error' => 'Method not allowed']);
}

Клиентский JavaScript (используя async/await):

const API = '/api/tasks';
async function loadTasks() {
  const resp = await fetch(API);
  if (!resp.ok) throw new Error('Не удалось загрузить задачи');
  const tasks = await resp.json();
  renderTasks(tasks);
}
async function addTask(title) {
  const resp = await fetch(API, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({title})
  });
  return resp.json();
}
async function toggleTask(id, completed) {
  await fetch(`${API}/${id}`, {
    method: 'PUT',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({completed})
  });
}
async function deleteTask(id) {
  await fetch(`${API}/${id}`, { method: 'DELETE' });
}
// Использование
loadTasks();

Результат: при загрузке страницы список задач появляется без перезагрузки, добавление и удаление происходят мгновенно.

Пример взаимодействия: GET /api/tasks -> JSON [...], POST /api/tasks -> {"id":42}, PUT /api/tasks/42 -> {"updated":true}

Пример 2. Постраничная навигация с AJAX

PHP (tasks_page.php):

$page = $_GET['page'] ?? 1;
$limit = 10;
$offset = ($page - 1) * $limit;
$total = $pdo->query('SELECT COUNT(*) FROM tasks')->fetchColumn();
$stmt = $pdo->prepare('SELECT * FROM tasks LIMIT ? OFFSET ?');
$stmt->bindValue(1, $limit, PDO::PARAM_INT);
$stmt->bindValue(2, $offset, PDO::PARAM_INT);
$stmt->execute();
$tasks = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode(['tasks' => $tasks, 'total' => $total, 'page' => $page]);

JavaScript:

function loadPage(page) {
  fetch('/tasks?page=' + page)
    .then(resp => resp.json())
    .then(data => {
      // отрисовка data.tasks и обновление пагинации с data.total
    });
}
document.getElementById('pagination').addEventListener('click', (e) => {
  if (e.target.dataset.page) loadPage(e.target.dataset.page);
});

Результат: клик по странице подгружает новые данные без перезагрузки.

Пример 3. Аутентификация с использованием сессий

PHP (login.php):

session_start();
$data = json_decode(file_get_contents('php://input'), true);
$stmt = $pdo->prepare('SELECT * FROM users WHERE login = ? AND password = SHA2(?,256)');
$stmt->execute([$data['login'], $data['password']]);
$user = $stmt->fetch();
if ($user) {
  $_SESSION['user_id'] = $user['id'];
  echo json_encode(['success' => true]);
} else {
  http_response_code(401);
  echo json_encode(['error' => 'Неверные данные']);
}

JavaScript при отправке формы входа:

fetch('/login', {
  method: 'POST',
  credentials: 'include',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({login, password})
}).then(resp => {
  if (resp.ok) window.location.href = '/dashboard';
});

Защищённые запросы (например, /profile) проверяют сессию:

session_start();
if (!isset($_SESSION['user_id'])) {
  http_response_code(401);
  exit;
}
// остальная логика

Проблемы: необходимость настройки CORS для credentials, защита от CSRF с помощью токенов.

Пример 4. Обработка ошибок и отладка

На сервере используйте try-catch:

try {
  // ... PDO операции
} catch (PDOException $e) {
  http_response_code(500);
  echo json_encode(['error' => 'Ошибка базы данных']);
  // можно логировать $e->getMessage()
}

На клиенте:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      return response.json().then(err => { throw new Error(err.error); });
    }
    return response.json();
  })
  .catch(error => {
    document.getElementById('error').textContent = error.message;
  });

Результат: пользователь видит понятное сообщение вместо непонятной ошибки.