Создание простой CMS с WYSIWYG редактором
Данный урок расскажет Вам о том как создать простую CMS с WYSIWIG редактором.
Превратите ваш PHP сайт в полноценную CMS! Возможность редактировать Ваши текст в стиле WYSIWYG сделать намного проще, чем Вы думаете. Именно об этом пойдет речь в нашем уроке. Вам больше не придется загружать измененные файлы к себе на хостинг, все тексты Вы сможете поменять из любого места, где есть Интернет.
Забрать исходники
Этот урок расскажет Вам об основах разделения Ваших текстов и дизайна, а также о том, как добавить WYSIWYG редактор для внесения изменений в текст.
Чтобы лучше понять этот урок Вам необходимо иметь базовые знания:
- HTML
- PHP Основы
- Формы (и POSTing)
- Строки запросов($_GET)
Этот урок расскажет Вам о:
- Отделении шапки и футера от общего содержания страницы
- Создании шаблона странички с текстом
- Добавлении javascript WYSIWYG редактора.
Было рассмотрено множество разных javascript редакторов, но больше всех мне понравился TinyMCE. Он бесплатен и может быть добавлен к любому текстовому полю. После добавления все содержимое поля можно редактировать в стиле MS Word. Данный редактор очень гибок и функционален и при более глубоком изучении все это можно реализовать. В нем множество встроенных функций, вплоть до создания таблиц и редактирования во весь экран.
Часть №1 - Отделение шапки и футера от основной части страницы
Многие из Вас уже проделывали эту операцию. Главная задача всего этого - это создание отдельных файлов для шапки и футера, что в дальнейшем существенно поможет Вам при внесении изменений во все страницы сайта (особенно, если их много). В шапке обычно находится красивая картинка и элементы навигации, также иногда разные DIVы для правильной компоновки частей сайта. В футере все DIVы обычно закрываются и часто вставлятеся информация о копирайтах.
Пример шапки:
header.html
Заметьте, что теги DIV, BODY и HTML не закрыты. Это будет сделано в футере.
Пример футера:
footer.html
===========
</div>
<p style="text-align: center">Сайт создан специально для урока командой <a href"http://ruseller.com">Ruseller.com</a></p>
</html>
Теперь для использования этих файлов на сайте нам необходимо создать еще один файл:
index.php
===========
<?php
include("header.html");
// Сюда вставляем содержание страницы
include("footer.html");
?>
Если Вы будете использовать такую структуру для всех страничек сайта, тогда его будет намного проще содержать и обновлять. Если Вы захотите внести изменения в дизайн или добавить новую ссылку в навигацию, Вам необходимо изменить только header.html и изменения вступят в силу на всех страницах сайта.
Часть №2 - Создание шаблона страницы с контентом
Поскольку большинство страниц на многих сайтах идентичны (различия только в контенте), зачем нам множество php файлов? Для каждой страницы на нашем сайте, у нас теперь есть функция "include" для шапки, футера и место для контента. Это нормально, если у Вас всего несколько страниц. Но что если мы начнем создавать сотни страниц с разным контентом? Создание множества таких файлов может занять у Вас много времени. Фокус заключается в том, чтобы у Вас была одна страница с контентом и множество текстовых файлов (1 файл = 1 страница). Создайте папку под названием "pages" или что-то в этом роде и поместите туда .txt файлы с наполнением для страниц. Убедитесь в том, чтобы в этих файлах не было ничего, что касается хедера и футера.
Пример такого текстового файла:
Как же мы это будем использовать на нашем сайте? Ответ очень прост: передавая строки запроса, которые будут сообщать скрипту о намерении просмотреть определенную страницу. Взгляните на нашу обновленную станицу index.php:
index.php
===========
<?php
include('header.html');
// Установить $page на "home.txt" если другой параметр не передан
if ($_GET['page']) {
$page = $_GET['page'] . '.txt';
} else {
$page = 'home.txt';
}
// Проверить на существование файла и включить его.
if (file_exists("pages/$page")) {
include("pages/$page");
// Если файла нет - выдать сообщение об ошибке.
} else {
echo("<h1 align="center">Страница не может быть найдена</h1>n");
}
include('footer.html');
?>
Ничего сложного в этом нет, не правда ли? Теперь у нас множество текстовых (в которых хранится только контент, который можно по желанию легко отредактировать) и всего один PHP файл.
Очень полезной фишкой была бы функция, которая будет разбивать объемные текстовые файлы на несколько страниц, при это добавляя ссылки "Предыдущая" и "Следущая". Давайте ее сделаем! Следующий блок кода можно, по желанию, вставить сразу после 'include("pages/$page")'. Данный скрипт ищет файл с окончанием в названии _страница(цифра) (например, news_1.txt, news_2.txt, news_3.txt и т.д. - это создаст 3 страницы перелинкованых между собой кнопками "Предыдущая" и "Следущая")
if (preg_match("/^(.*_page)(d+)/", $page], $matches)) {
$prev_page = $matches[2] - 1;
$next_page = $matches[2] + 1;
echo("<p style="text-align: center">");
if (file_exists("pages/" . $matches[1] . $prev_page . ".php")) {
echo("<a href="{$_SERVER['PHP_SELF']}" .
"?page={$matches[1]}$prev_page">Предыдущая страница</a>");
$prev = 1;
}
if (file_exists("pages/" . $matches[1] . $next_page . ".php")) {
if ($prev) {
echo(" ");
}
echo("<a href="{$_SERVER['PHP_SELF']}" .
"?page={$matches[1]}$next_page">Следующая страница</a>");
}
echo("</p>");
}
Забрать исходники
Часть № 3 - Добавление javascript WYSIWYG редактора
Поскольку в следующем файле довольно много кода, мы его разобъем на несколько частей, и каждую часть детально разложим по полочкам.
secure/index.php
============
<?php
include("../header.html");
// Получите название страницы со строки запроса
$page = $_GET['page'] . '.txt';
if (!$_GET['page']) {
echo("<h1>Старница не указана</h1>n");
include("../footer.html");
exit;
}
Пока все выглядит знакомо. Мы считываем хедер и получаем название страницы. Посколько мы находимся в другой папке (secure) нам необходимо немного модифицировать пути к шапке и футеру.
if ($_POST['page']) {
$handle = fopen("../pages/$page", 'w');
fwrite($handle, $_POST['page']);
fclose($handle);
echo($_POST['page']);
include("../footer.html");
exit;
}
Поскольку редактор позволяет нам редактировать и тот же скрипт будет обрабатывать результат, код выше проверяет публиковали ли мы страницу. Если публиковали страницу с контентом - тогда скрипт открывает файл (указаный в запросе), переписывает его, закрывает и показывает нам обновленный файл. И в конце, выходит.
if (file_exists("../pages/$page")) {
$FILE = fopen("../pages/$page", "rt");
while (!feof($FILE)) {
$text .= fgets($FILE);
}
fclose($FILE);
} else {
echo("<h1>Новая страница: $page</h1>n");
$text = "<p></p>";
}
Если мы указали страницу, которая существует, тогда скрипт преобразует текст в переменную $text. Если не существует, скрипт предупреждает, что мы создаем новую страницу и переменная $text приобретает вид пустого параграфа ().
Далее мы подключаем TinyMCE javascript редактор. Важно при подключении следить за правильностью путей к самому редактору.
echo <<< EOM
<script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom"
});
</script>
EOM;
Обычно все javascript мы подгружаем в шапке нашей страницы. Однако в нашем случае за шапку отвечает 1 файл, который подгружается ко всем страницам сайта. Секция "init" содержит все настройки редактора. Поле "mode: textareas" означает, что все текстовые поля на странице станут TinyMCE WYSIWYG полями (то есть их можно будет редактировать в стиле WYSIWYG). На официальном сайте TinyMCE множество информации о возможных настройках.
$this_page = $_SERVER['PHP_SELF'];
$query_string = $_SERVER['QUERY_STRING'];
echo("<form method="post" action="$this_page$query_string">n");
echo("<textarea id="page" name="page" rows=25 cols=80>n");
echo(htmlspecialchars($text));
echo("</textarea>n");
echo("<input type="submit" value="Сохранить">n");
echo("</form>n");
Код выше создает форму, текстовое поле и кнопку "Сохранить". "htmlspecialchars($text)" извлекает из переменной $text весь текст и преобразовует все специальные символы в HTML коды. Это делается для того, чтоб HTML, который находится в текстовых файлах не конфликтовал с HTML самой странички. После этого полученный текст передается в текстовое поле. После нажатия "Сохранить", скрипт обращается к этой же странице с таким же запросом, но в этот раз уже с изменненой текстовой информацией.
include("../footer.html");
?>
И в конце не забываем про футер.
Заключение
Вот мы и создали простую CMS на файлах. Она не совершенна и требует доработки, но для простых сайтов сгодится. Надеюсь, данный урок Вам понравился! Жду Ваших комментариев и вопросов. Всегда рад на них ответить.
Превратите ваш PHP сайт в полноценную CMS! Возможность редактировать Ваши текст в стиле WYSIWYG сделать намного проще, чем Вы думаете. Именно об этом пойдет речь в нашем уроке. Вам больше не придется загружать измененные файлы к себе на хостинг, все тексты Вы сможете поменять из любого места, где есть Интернет.
Забрать исходники
Этот урок расскажет Вам об основах разделения Ваших текстов и дизайна, а также о том, как добавить WYSIWYG редактор для внесения изменений в текст.
Чтобы лучше понять этот урок Вам необходимо иметь базовые знания:
- HTML
- PHP Основы
- Формы (и POSTing)
- Строки запросов($_GET)
Этот урок расскажет Вам о:
- Отделении шапки и футера от общего содержания страницы
- Создании шаблона странички с текстом
- Добавлении javascript WYSIWYG редактора.
Было рассмотрено множество разных javascript редакторов, но больше всех мне понравился TinyMCE. Он бесплатен и может быть добавлен к любому текстовому полю. После добавления все содержимое поля можно редактировать в стиле MS Word. Данный редактор очень гибок и функционален и при более глубоком изучении все это можно реализовать. В нем множество встроенных функций, вплоть до создания таблиц и редактирования во весь экран.
Часть №1 - Отделение шапки и футера от основной части страницы
Многие из Вас уже проделывали эту операцию. Главная задача всего этого - это создание отдельных файлов для шапки и футера, что в дальнейшем существенно поможет Вам при внесении изменений во все страницы сайта (особенно, если их много). В шапке обычно находится красивая картинка и элементы навигации, также иногда разные DIVы для правильной компоновки частей сайта. В футере все DIVы обычно закрываются и часто вставлятеся информация о копирайтах.
Пример шапки:
header.html
===========
<html>
<head>
<!-- Все что касается тега head идет сюда -->
</head>
<body>
<div style="width: 800px">
<!-- Картинка в шапке -->
<img src="header.jpg" /><br />
<!-- Навигация -->
<p style="text-align: center">
<a href="link1.php">Link 1</a> |
<a href="link2.php">Link 2</a> |
<a href="link3.php">Link 3</a> |
<a href="link4.php">Link 4</a>
</p>
<html>
<head>
<!-- Все что касается тега head идет сюда -->
</head>
<body>
<div style="width: 800px">
<!-- Картинка в шапке -->
<img src="header.jpg" /><br />
<!-- Навигация -->
<p style="text-align: center">
<a href="link1.php">Link 1</a> |
<a href="link2.php">Link 2</a> |
<a href="link3.php">Link 3</a> |
<a href="link4.php">Link 4</a>
</p>
Заметьте, что теги DIV, BODY и HTML не закрыты. Это будет сделано в футере.
Пример футера:
footer.html
===========
</div>
<p style="text-align: center">Сайт создан специально для урока командой <a href"http://ruseller.com">Ruseller.com</a></p>
</html>
Теперь для использования этих файлов на сайте нам необходимо создать еще один файл:
index.php
===========
<?php
include("header.html");
// Сюда вставляем содержание страницы
include("footer.html");
?>
Если Вы будете использовать такую структуру для всех страничек сайта, тогда его будет намного проще содержать и обновлять. Если Вы захотите внести изменения в дизайн или добавить новую ссылку в навигацию, Вам необходимо изменить только header.html и изменения вступят в силу на всех страницах сайта.
Часть №2 - Создание шаблона страницы с контентом
Поскольку большинство страниц на многих сайтах идентичны (различия только в контенте), зачем нам множество php файлов? Для каждой страницы на нашем сайте, у нас теперь есть функция "include" для шапки, футера и место для контента. Это нормально, если у Вас всего несколько страниц. Но что если мы начнем создавать сотни страниц с разным контентом? Создание множества таких файлов может занять у Вас много времени. Фокус заключается в том, чтобы у Вас была одна страница с контентом и множество текстовых файлов (1 файл = 1 страница). Создайте папку под названием "pages" или что-то в этом роде и поместите туда .txt файлы с наполнением для страниц. Убедитесь в том, чтобы в этих файлах не было ничего, что касается хедера и футера.
Пример такого текстового файла:
news.txt
===========
<h1 align="center">Новости</h1>
<p>Сегодня, 18 мая, торги межбанковском валютном рынке завершились в диапазоне 10,234-10,258 грн за евро.
Так, согласно данным компании ИнтерБизнесКонсалтинг, торги по доллару завершились в диапазоне 7,6025-7,615 грн за доллар.
Как сообщается, торги по рублю завершились в диапазоне 0,2352-0,2185 грн за рубль. Национальный банк покупал и продавал доллары по курсу 7,62-7,7 грн за доллар.</p>
===========
<h1 align="center">Новости</h1>
<p>Сегодня, 18 мая, торги межбанковском валютном рынке завершились в диапазоне 10,234-10,258 грн за евро.
Так, согласно данным компании ИнтерБизнесКонсалтинг, торги по доллару завершились в диапазоне 7,6025-7,615 грн за доллар.
Как сообщается, торги по рублю завершились в диапазоне 0,2352-0,2185 грн за рубль. Национальный банк покупал и продавал доллары по курсу 7,62-7,7 грн за доллар.</p>
Как же мы это будем использовать на нашем сайте? Ответ очень прост: передавая строки запроса, которые будут сообщать скрипту о намерении просмотреть определенную страницу. Взгляните на нашу обновленную станицу index.php:
index.php
===========
<?php
include('header.html');
// Установить $page на "home.txt" если другой параметр не передан
if ($_GET['page']) {
$page = $_GET['page'] . '.txt';
} else {
$page = 'home.txt';
}
// Проверить на существование файла и включить его.
if (file_exists("pages/$page")) {
include("pages/$page");
// Если файла нет - выдать сообщение об ошибке.
} else {
echo("<h1 align="center">Страница не может быть найдена</h1>n");
}
include('footer.html');
?>
Ничего сложного в этом нет, не правда ли? Теперь у нас множество текстовых (в которых хранится только контент, который можно по желанию легко отредактировать) и всего один PHP файл.
Очень полезной фишкой была бы функция, которая будет разбивать объемные текстовые файлы на несколько страниц, при это добавляя ссылки "Предыдущая" и "Следущая". Давайте ее сделаем! Следующий блок кода можно, по желанию, вставить сразу после 'include("pages/$page")'. Данный скрипт ищет файл с окончанием в названии _страница(цифра) (например, news_1.txt, news_2.txt, news_3.txt и т.д. - это создаст 3 страницы перелинкованых между собой кнопками "Предыдущая" и "Следущая")
if (preg_match("/^(.*_page)(d+)/", $page], $matches)) {
$prev_page = $matches[2] - 1;
$next_page = $matches[2] + 1;
echo("<p style="text-align: center">");
if (file_exists("pages/" . $matches[1] . $prev_page . ".php")) {
echo("<a href="{$_SERVER['PHP_SELF']}" .
"?page={$matches[1]}$prev_page">Предыдущая страница</a>");
$prev = 1;
}
if (file_exists("pages/" . $matches[1] . $next_page . ".php")) {
if ($prev) {
echo(" ");
}
echo("<a href="{$_SERVER['PHP_SELF']}" .
"?page={$matches[1]}$next_page">Следующая страница</a>");
}
echo("</p>");
}
Забрать исходники
[attachment=326]
Часть № 3 - Добавление javascript WYSIWYG редактора
Поскольку в следующем файле довольно много кода, мы его разобъем на несколько частей, и каждую часть детально разложим по полочкам.
secure/index.php
============
<?php
include("../header.html");
// Получите название страницы со строки запроса
$page = $_GET['page'] . '.txt';
if (!$_GET['page']) {
echo("<h1>Старница не указана</h1>n");
include("../footer.html");
exit;
}
Пока все выглядит знакомо. Мы считываем хедер и получаем название страницы. Посколько мы находимся в другой папке (secure) нам необходимо немного модифицировать пути к шапке и футеру.
if ($_POST['page']) {
$handle = fopen("../pages/$page", 'w');
fwrite($handle, $_POST['page']);
fclose($handle);
echo($_POST['page']);
include("../footer.html");
exit;
}
Поскольку редактор позволяет нам редактировать и тот же скрипт будет обрабатывать результат, код выше проверяет публиковали ли мы страницу. Если публиковали страницу с контентом - тогда скрипт открывает файл (указаный в запросе), переписывает его, закрывает и показывает нам обновленный файл. И в конце, выходит.
if (file_exists("../pages/$page")) {
$FILE = fopen("../pages/$page", "rt");
while (!feof($FILE)) {
$text .= fgets($FILE);
}
fclose($FILE);
} else {
echo("<h1>Новая страница: $page</h1>n");
$text = "<p></p>";
}
Если мы указали страницу, которая существует, тогда скрипт преобразует текст в переменную $text. Если не существует, скрипт предупреждает, что мы создаем новую страницу и переменная $text приобретает вид пустого параграфа ().
Далее мы подключаем TinyMCE javascript редактор. Важно при подключении следить за правильностью путей к самому редактору.
echo <<< EOM
<script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom"
});
</script>
EOM;
Обычно все javascript мы подгружаем в шапке нашей страницы. Однако в нашем случае за шапку отвечает 1 файл, который подгружается ко всем страницам сайта. Секция "init" содержит все настройки редактора. Поле "mode: textareas" означает, что все текстовые поля на странице станут TinyMCE WYSIWYG полями (то есть их можно будет редактировать в стиле WYSIWYG). На официальном сайте TinyMCE множество информации о возможных настройках.
$this_page = $_SERVER['PHP_SELF'];
$query_string = $_SERVER['QUERY_STRING'];
echo("<form method="post" action="$this_page$query_string">n");
echo("<textarea id="page" name="page" rows=25 cols=80>n");
echo(htmlspecialchars($text));
echo("</textarea>n");
echo("<input type="submit" value="Сохранить">n");
echo("</form>n");
Код выше создает форму, текстовое поле и кнопку "Сохранить". "htmlspecialchars($text)" извлекает из переменной $text весь текст и преобразовует все специальные символы в HTML коды. Это делается для того, чтоб HTML, который находится в текстовых файлах не конфликтовал с HTML самой странички. После этого полученный текст передается в текстовое поле. После нажатия "Сохранить", скрипт обращается к этой же странице с таким же запросом, но в этот раз уже с изменненой текстовой информацией.
include("../footer.html");
?>
И в конце не забываем про футер.
Заключение
Вот мы и создали простую CMS на файлах. Она не совершенна и требует доработки, но для простых сайтов сгодится. Надеюсь, данный урок Вам понравился! Жду Ваших комментариев и вопросов. Всегда рад на них ответить.