Построение пользовательского интерфейса средствами PHP

Раздел: Веб-разработка на PHP -> Разработка веб-приложений

Основной подход: архитектура MVC в чистом PHP

Разработка веб-интерфейса на PHP предполагает генерацию HTML и обработку пользовательских запросов. Архитектура MVC (Model-View-Controller) позволяет разделить логику данных, представления и управления, что упрощает поддержку и масштабирование кода. Ниже приведена реализация на чистом PHP без фреймворков.

Пример: простой список задач

  1. Структура файлов: 
    project/
  index.php
  controller/
    TaskController.php
  model/
    Task.php
  view/
    taskList.php

    Php веб интерфейс (создание веб-интерфейса на php)

  2. index.php (точка входа): 
    <?php
require 'controller/TaskController.php';
$controller = new TaskController();
$controller->index();
?>

    разработка web приложений php (разработка веб-приложений на php)

  3. TaskController.php: 
    <?php
require 'model/Task.php';

class TaskController {
    public function index() {
        $tasks = Task::getAll();
        include 'view/taskList.php';
    }
}
?>

    управление сайтом php (управление сайтом на php)

  4. Task.php (модель): 
    <?php
class Task {
    public static function getAll() {
        // имитация данных из БД
        return ['Помыть посуду', 'Сделать уроки', 'Полить цветы'];
    }
}
?>
  5. view/taskList.php (представление): 
    <h1>Список задач</h1>
<ul>
<?php foreach ($tasks as $task): ?>
    <li><?= htmlspecialchars($task, ENT_QUOTES, 'UTF-8') ?></li>
<?php endforeach; ?>
</ul>

Пояснение: контроллер получает данные от модели и передаёт их в представление. Вывод экранируется функцией htmlspecialchars, чтобы избежать XSS-атак.

Типичные проблемы и их решения

  • Проблема: отсутствие экранирования вывода приводит к уязвимости XSS. Решение: всегда использовать htmlspecialchars.
  • Проблема: логика вычислений в представлении. Решение: выносить все вычисления и ветвления в контроллер или модель.
  • Проблема: жёсткая связь между файлами. Решение: использовать автозагрузку классов (spl_autoload_register).

Цель: создание поддерживаемого и безопасного веб-интерфейса. Подход подходит для проектов любого размера, где важна архитектурная чистота.

Варианты построения веб-интерфейса

Как создать интерфейс на чистом PHP без разделения на MVC?

Цель: быстрый прототип или одностраничный скрипт. Весь код в одном файле.

<?php
$tasks = ['Task1', 'Task2', 'Task3'];
?>
<!DOCTYPE html>
<html>
<body>
<h1>Мои задачи</h1>
<ul>
<?php foreach ($tasks as $task): ?>
    <li><?= $task ?></li>
<?php endforeach; ?>
</ul>
</body>
</html>

Проблемы: смешивание PHP и HTML усложняет поддержку; отсутствует экранирование; невозможно переиспользовать компоненты. Решение: использовать только для демонстраций или простых скриптов, не предназначенных для роста.

Как использовать шаблонизатор Twig для изоляции представления?

Цель: разделение логики и разметки, безопасный вывод, наследование шаблонов.

  1. Установка: composer require twig/twig
  2. Код PHP: 
    <?php
require 'vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('templates');
$twig = new \Twig\Environment($loader);
$tasks = ['Task1', 'Task2'];
echo $twig->render('tasks.html', ['tasks' => $tasks]);
?>
  3. Шаблон templates/tasks.html: 
    <h1>Список задач</h1>
<ul>
{% for task in tasks %}
    <li>{{ task }}</li>
{% endfor %}
</ul>

Проблемы: зависимость от внешней библиотеки; необходимость настройки путей. Решение: использовать Twig в средних и больших проектах, где важны сложные шаблоны и безопасность.

Как построить RESTful веб-интерфейс на микрофреймворке Slim?

Цель: создание API с минимальным кодом, легковесное приложение.

  1. Установка: composer require slim/slim
  2. Пример: 
    use Slim\Factory\AppFactory;
require 'vendor/autoload.php';
$app = AppFactory::create();
$app->get('/tasks', function ($request, $response) {
    $tasks = ['Task1', 'Task2'];
    $response->getBody()->write(json_encode($tasks));
    return $response->withHeader('Content-Type', 'application/json');
});
$app->run();

Проблемы: дополнительный уровень абстракции; для полноценного веб-интерфейса потребуется добавить шаблонизатор или отдельный клиент. Решение: идеально для API микросервисов или приложений с одностраничным фронтендом.

Каждый вариант имеет свою область применения: чистый PHP для малых задач, MVC или Twig для растущих проектов, Slim для API. Выбор зависит от требований к производительности, сложности и команде.

Расширенные примеры создания веб-интерфейса

1. Обработка формы с валидацией на чистом PHP

Создадим страницу добавления задачи с проверкой ввода. Файл add_task.php:

Пример 
<?php
$errors = [];
$task = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $task = trim($_POST['task'] ?? '');
    if ($task === '') {
        $errors[] = 'Название задачи не может быть пустым.';
    } elseif (mb_strlen($task) > 100) {
        $errors[] = 'Название не должно превышать 100 символов.';
    } else {
        // успешная обработка (сохранение в БД)
        $success = 'Задача добавлена.';
    }
}
?>
<!DOCTYPE html>
<html>
<body>
<h1>Добавить задачу</h1>
<?php if (!empty($errors)): ?>
    <ul style="color: red;">
    <?php foreach ($errors as $error): ?>
        <li><?= htmlspecialchars($error) ?></li>
    <?php endforeach; ?>
    </ul>
<?php endif; ?>
<?php if (isset($success)): ?>
    <p style="color: green;"><?= htmlspecialchars($success) ?></p>
<?php endif; ?>
<form method="post">
    <label>Название задачи:<br>
        <input type="text" name="task" value="<?= htmlspecialchars($task) ?>">
    </label><br>
    <button type="submit">Добавить</button>
</form>
</body>
</html>

Результат: при отправке пустой формы выводится сообщение об ошибке; после успешного добавления показывается зелёное сообщение. Значение поля сохраняется после ошибки.

[Страница с формой и сообщениями валидации]

2. Работа с базой данных через PDO в MVC

Модель, получающая задачи из MySQL:

Пример 
<?php
class Task {
    private static $pdo = null;

    private static function getDB() {
        if (self::$pdo === null) {
            self::$pdo = new PDO('mysql:host=localhost;dbname=tasks;charset=utf8', 'root', '', [
                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
            ]);
        }
        return self::$pdo;
    }

    public static function getAll(): array {
        $stmt = self::getDB()->query('SELECT id, title FROM tasks ORDER BY id DESC');
        return $stmt->fetchAll();
    }

    public static function add(string $title): bool {
        $stmt = self::getDB()->prepare('INSERT INTO tasks (title) VALUES (:title)');
        return $stmt->execute([':title' => $title]);
    }
}
?>

Контроллер использует этот класс для получения списка или добавления. Результат: данные динамически подгружаются из БД.

3. Наследование шаблонов в Twig

Базовый шаблон base.html:

Пример 
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Мой сайт{% endblock %}</title>
</head>
<body>
    <header>Шапка</header>
    <main>{% block content %}{% endblock %}</main>
    <footer>Подвал</footer>
</body>
</html>

Страница списка задач tasks.html:

Пример 
{% extends "base.html" %}
{% block title %}Список задач{% endblock %}
{% block content %}
<h1>Задачи</h1>
<ul>
{% for task in tasks %}
    <li>{{ task.title }}</li>
{% endfor %}
</ul>
{% endblock %}

PHP-вызов остаётся тем же: $twig->render('tasks.html', ['tasks' => $tasks]). Результат: итоговая страница содержит шапку, подвал и контент. Наследование упрощает поддержку общего оформления.

4. Slim + Twig для полноценного веб-интерфейса

Установка: composer require slim/slim slim/twig-view. Пример маршрута с рендерингом шаблона:

Пример 
use Slim\Factory\AppFactory;
use Slim\Views\Twig;
use Slim\Views\TwigMiddleware;

require 'vendor/autoload.php';

$app = AppFactory::create();

$twig = Twig::create('templates', ['cache' => false]);
$app->add(TwigMiddleware::create($app, $twig));

$app->get('/', function ($request, $response) {
    $tasks = ['Task1', 'Task2'];
    return $this->get('view')->render($response, 'tasks.html', ['tasks' => $tasks]);
});

$app->run();

Результат: при обращении к корню выводится страница с задачами. Slim обрабатывает маршруты, Twig отвечает за HTML. Такой подход подходит для приложений, где требуется как API, так и традиционные страницы.

Создание веб-интерфейса на PHP - comments

En
Php веб интерфейс (php)