Простой MVC c AJAX
Данная статья описывает процесс создания простого минималистичного веб-приложения, построенного в парадигме Модель-Вид-Контроллер (MVC) с использованием технологий HTML, jQuery, AJAX, PHP.
Статья будет полезна начинающим программистам, желающим на практике изучить основы вышеперечисленных технологий, а также может послужить концептуальной основой для построения собственного веб-фреймворка, если добавить к описанному примеру:
- обработку ошибок и валидацию данных,
- автозагрузку классов,
- базовые классы модели и контроллера,
- дополнительные средства работы с базами данных и ORM,
- систему авторизации и разграничения прав пользователей,
- систему настройки и установки приложения,
- и прочие пряности по вкусу...
Модель (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