Простой MVC c AJAX

Данная статья описывает процесс создания простого минималистичного веб-приложения, построенного в парадигме Модель-Вид-Контроллер (MVC) с использованием технологий HTML, jQuery, AJAX, PHP.

Статья будет полезна начинающим программистам, желающим на практике изучить основы вышеперечисленных технологий, а также может послужить концептуальной основой для построения собственного веб-фреймворка, если добавить к описанному примеру:

Модель (Model)

Модель включает данные и методы работы с этими данными, но не содержит информации, как эти данные можно визуализировать.

Напишем на PHP примитивную модель, которая содержит единственный метод getData().

Этот метод будет возвращать необходимые приложению данные (в нашем случае, строку Hello World!).

Файл ExampleModel.php:

<?php
class ExampleModel {
    function getData() {return "Hello World!";}
}

Вид (View)

Вид (представление) отвечает за отображение информации (визуализацию).

В нашем случае, представлением будет простой HTML файл, который будет загружать и отображать данные посредством AJAX.

Концепция использования HTML файла, вместо PHP шаблона очень удобна в учебных целях. HTML файл легко открывается двойным щелчком мыши, не требуя наличия веб-сервера. Добавив заглушку, написанную на Javascript, можно производить отладку HTML-представления данных отдельно от логики приложения.

Также этот подход может быть полезен для того, чтобы отдать HTML-файлы стороннему дизайнеру, не передавая ему основных кодов приложения.

Минус такого подхода в некотором усложнении построения графического интерфейса. Впрочем, нет ничего такого, что бы не мог сделать Javascript, но чуть большим количеством строк кода.

Другим минусом является проблема добавления динамических метаданных страницы, но в большинстве случаев приложению достаточно статичных метаданных.

Файл ExampleView.html:

<html><body>
<h1 id="result">Loading...</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
$.get("Framework.php?controller=Example&action=Main",
    function(data)
    {
        $("#result").text(data);
    });
</script>
</body></html>

Контроллер (Controller)

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

Как правило, контроллер содержит несколько действий (Actions).

Создадим тестовый контроллер ExampleController с единственным действием Main (метод actionMain).

В нашем случае контроллер будет просто инициализировать модель и выводить данные.

Файл ExampleController.php:

<?php
require_once "ExampleModel.php";
class ExampleController {
    function actionMain() {
        $model = new ExampleModel();
        echo $model->getData();
    }
}

Фреймворк (Framework)

Остался последний штрих. Нам необходим фреймворк, который будет загружать контроллеры и вызывать нужные действия по их имени.

Ко всем контроллерам мы будем добавлять суффикс Controller, чтобы не путать их с другими PHP файлами, которые наш фреймворк загружать не должен.

Ко всем действиям мы будем добавлять префикс action, чтобы не путать их с обычными методами, которые в целях безопасности не должны быть доступны через публичный API.

Файл Framework.php:

<?php
$controller = @$_GET["controller"];
$action = @$_GET["action"];
if($controller && $action) {
    $controller .= "Controller";
    require_once __DIR__ . "/$controller.php";
    $x = new $controller();
    $x->{"action" . $action}();
} else {
    die("Framework usage error");
}

Это, наверное, самый маленький MVC фреймворк в мире, всего 10 строк кода )

Демонстрация

Скачать приложение, описанное в данной статье можно на GitHub

Загружаем всё это на сервер и смотрим, что у нас получилось.

Открываем ExampleView.html