20 Июль 2011

Сохранение материала в БД и визуальный редактор. Часть 23

Добавление материала в БД и визуальный редактор CKEditor

Сегодня, уважаемый читатель, я предлагаю продолжить изучение программирования на php посредством фреймворка Kohana 3.1. Данную статью и видеоурок я посвящу теме публикации материалов из админки.

План действий на сегодня:

  • В админке создать форму добавления материалов. Форма добавления будет содержать выпадающий список с именами категорий (в выбранную категорию будет добавляться публикуемый материал) и область ввода текстового содержимого самого материала (textarea).
  • К области ввода содержимого материала прикрутить визуальный редактор CKEditor.
  • Обезопасить вводимый материал от внедрения JavaScript-сценариев. Есть специальная библиотека, очищающая контент от JavaScript, называется  HTML Purifier (проблема возможного внедрения вредоносного JavaScript в контент сайта описана ниже).

Видеоурок

Скачать видеоурок (39.86 МБ, *.wmv)

Скачать исходники (4.28 МБ, *.zip)

Скачать дамп базы данных (7.74 кБ, *.sql)

Начнем с редактирования структуры базы данных (БД).

Для последующей сортировки материалов по актуальности необходимо добавить два поля в таблицу materials БД:

  • Поле ctime для хранения даты и времени создания материала в Unix time формате.
  • Поле mtime для хранения даты и времени модификации материала.

Структура таблицы БД

Рис. 1. Структура таблицы materials.

В файл, отвечающий за логику отображения админки (kohana\www\application\views\adminview.php) нужно добавить HTML-код формы сохранения материала (листинг 1).

Листинг 1. HTML-код формы добавления материала

<div style="padding-top:50px;">
	<h2>Создать материал </h2>
	<form action="" method="post">
		<select name="categoryId">
            <?foreach($categories as $item) {?>
            <option value="<?=$item['id']?>"><?=str_repeat('&nbsp;', 4*$item['level']).htmlspecialchars($item['name'])?></option>
            <?}?>
        </select>
	<textarea name="content" id="editor"></textarea>
	<input type="submit" value="Сохранить" name="materialsavebtn">
	</form>
</div>

<script type="text/javascript">
	CKEDITOR.replace( 'editor' );
</script>

Событие нажатия на кнопку Сохранить (name =”materialsavebtn”) будет обрабатывать код контроллера kohana\www\application\classes\controller\admin\main.php, приведенный в листинге 2.

Строки с 14 по 16 осуществляют подключение визуального редактора CKEditor к области ввода текста с id=”editor” (к textarea в строке 9).

Однако, это не все, что потребуется для установки CKEditor. Нужно проделать еще два шага:

  • Скачать CKEditor с оф. сайта. Скачанный архив распаковать в kohana\www\ckeditor\.
  • В раздел <head> веб-страницы добавить инструкцию подключения JavaScript-кода CKEditor <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> (раздел <head> можно найти в файле базового HTML-шаблона kohana\www\application\views\basic.php

Кстати, CKEditor обладает большим количеством интересных настроек. Подробнее читайте в оф. документации.

На этом можно считать визуальный редактор подключенным.

С момента подключения визуального редактора возникает проблема возможного внедрения вредоносного JavaScript в контент. Дело в том, что визуальный редактор изменяет форматирование текста путем добавления HTML-тегов. Соответственно, для сохранения форматирования контента мы должны отправить в БД HTML-код, полученный в результате работы визуального редактора, без замены HTML-тегов текстовыми сущностями (иными словами без “прослешивания” PHP-функцией htmlspecialchars). На ряду с HTML-разметкой в БД запросто может быть отправлен вредоносный JavaScript, который успешно выполнится на странице отображения материала.

Решение проблемы внедрения JavaScript - подключение библиотеки фильтров HTML Purifier. Адаптированную версию Purifier для Kohana 3.1 можно скачать на GitHub.

Поясню процесс подключения HTML Purifier к Kohana 3.1:

  • Скачанный с GitHub архив необходимо распакавать в папку kohana\www\modules\htmlpurifier\
  • Скачать с оф. сайта HTML Purifier свежую версию библиотеки и скопировать ее содержимое в папку kohana\www\modules\htmlpurifier\vendor\htmlpurifier\
  • Добавить инструкцию по подключению нового модуля Purifier в файл bootstrap.php: найти код 'orm'        => MODPATH.'orm', и сразу под ним дописать строку 'htmlpurifier' => MODPATH.'htmlpurifier'.

Теперь мы получили возможность использовать метод Security::xss_clean($content) для очистки содержимого переменной $content от JavaScript. Данный метод непосредственно будет применен в листинге 3 модели Materials (см. ниже).

Листинг 2. Код контроллера, обрабатывающий сохранение материала в БД

if(isset($_POST['materialsavebtn']))
		{
			$categoryId = Arr::get($_POST, 'categoryId', '');
			$content = Arr::get($_POST, 'content', '');

			$material = ORM::factory('material');	
			$material->addMaterial($categoryId, $content);
			
			Request::initial()->redirect('admin');
		}

Как видно из строки 7, модель Material (которую мы создавали в уроке 18-2) должна быть дополнена методом addMaterial(), непосредственно осуществляющего сохранение материала в БД. Код метода addMaterial() приведен в листинге 3.

Листинг 3. Метод сохранения материала, расширяющий возможности модели Material

public function addMaterial($categoryId, $content)
	{
		$this->category_id = $categoryId;
		$this->content = Security::xss_clean($content);
		$this->save();
	}

Видите новый метод в строке 4? Это как раз та самая защита от внедрения JavaScript в контент сайта. Теперь любой код, написанный в тегах <script>...</script>, будет удален.

Пришло время показать очень удобный способ заполнения полей ctime и mtime таблицы materilals (поля хранят время создания и изменения материала соответственно).

Достаточно в начале объявления модели Material написать две строки:

protected $_created_column = array('column' => 'ctime', 'format' => TRUE);
protected $_updated_column = array('column' => 'mtime', 'format' => TRUE);

Kohana автоматически подставит время создания или модификации записи в БД в Unix time формате.

С уважением, Андрей Морковин.

<< Предыдущая публикация курса Следующая публикация курса >>

MAXCACHE: 0.87MB/0.00030 sec