Создание простой CMS с WYSIWYG редактором

Данный урок расскажет Вам о том как создать простую CMS с WYSIWIG редактором.

Урок будет разбит на 2 части. Вашему вниманию представлена первая часть, вторую ожидайте завтра.

Превратите ваш 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>

Заметьте, что теги 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>

Как же мы это будем использовать на нашем сайте? Ответ очень прост: передавая строки запроса, которые будут сообщать скрипту о намерении просмотреть определенную страницу. Взгляните на нашу обновленную страницу 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("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
}
echo("<a href=\"{$_SERVER['PHP_SELF']}" .
"?page={$matches[1]}$next_page\">Следующая страница</a>");
}
echo("</p>");
}

На сегодня все! Ждите продолжения урока завтра.

Продолжение данного урока доступно здесь.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.teamwishbone.com
Перевел: Максим Шкурупий
Урок создан: 19 Мая 2009
Просмотров: 61398
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 19 Мая 2009 02:01
    anton
    С днем рождения! Всех благ в работе, счастья в семье, огромного здоровья!!! Спасибо! Вам!
  • 19 Мая 2009 05:07
    Андрей
    С Днём Рождения!)))
  • 19 Мая 2009 08:42
    Aleshka
    Ура! Наконец то нашел то чего искал! С днем варенья Евгений! Вы мне очень помогли =)
  • 19 Мая 2009 09:12
    Женек
    С днём рождения, Теска! :)
  • 19 Мая 2009 09:17
    alchimik
    C днем рождения!!!
  • 19 Мая 2009 10:35
    Виталий
    Присоединяюсь к поздравлениям! Евгений, Вы даже не представляете как Ваши уроки изменили мою жизнь. Спасибо Вам ОГРОМНОЕ! Здоровья, удачи и успехов в Вашем бизнесе. А по поводу урока - бравушки!!! Я давно этого ждал.
  • 19 Мая 2009 10:49
    dima
    с днюхой! салют=)
  • 19 Мая 2009 11:24
    kickerps
    С днюхой! =)
  • 19 Мая 2009 11:24
    zura
    C днем рождения Евгений!!! Всего тебе наилучшего !!!!!!!!
  • 19 Мая 2009 13:07
    budko
    Присоединяюсь ко всем поздравлениям!!! C днем рождения Евгений!!!
  • 19 Мая 2009 13:10
    Святослав
    С днем Рождения, Евгений!!! Желаю вам творческих и спортивных успехов!
  • 19 Мая 2009 13:27
    Святослав
    По поводу урока, буду задавать вопросы после изучения второй части=), но один сейчас, а тут будут значительные изменения если тексты у меня хранятся в MySQL базе?
  • 19 Мая 2009 13:49
    madjel
    С Днем Рождения Евгений.
  • 19 Мая 2009 14:10
    МаксимШкурупий
    Святослав, если тексты в базе данных, тогда все будет немного отличаться. По этому поводу сделаем отдельный урок немного позже!
  • 19 Мая 2009 14:27
    zura
    Урок про TinyMCE будет завтра ? Если сайт почти готов и готовы таблички где выводится текст, можно же добавит TinyMCE? Или многое надо менять ?
  • 19 Мая 2009 14:40
    МаксимШкурупий
    Урок про добавление редактора к нашей ЦМС будет сегодня! А урок про добавление редактора в других условиях - будет позже!
  • 19 Мая 2009 14:41
    Nikitka
    С днем рожденья!!!!!!!
  • 19 Мая 2009 15:18
    advokat
    Евгений поздравляю Вас с днем рождения, желаю здоровья, счастья. Пусть у Вас всегда все будет только на отлично!!!
  • 19 Мая 2009 15:32
    Святослав
    Подправь кстати заголовок - WYSIWIG на WYSIWYG
  • 19 Мая 2009 15:35
    Илья
    Евгений,поздравляю! Поповоду статьи: 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"); вот тут кроется достаточно серьезная ошибка безопастности: если я я создам у себя на сервере какой-нибудь файл с расширение .txt и напишу там код на пхп,то он исполнится,а встроке введу ?page=http:sitename.ru/ckack то запустит мне файл с расширение ckack.txt а внутири него написать удаление все БД.(если файл соединяется с БД,а думую,что соединятся будет). Тут вся надежда остается на сервер,он мог запретиь подключение через инструкцию include() файлов через http,но не все это делают....
  • 19 Мая 2009 16:35
    dima
    Илья, во-первых в текстовых файлах недолжно быть исполняемого кода, об этом максим писал. во-вторых некакого подключения к базе mysql нет, поскольку эта cms исключительно на текстовых файлах. а значения $_GET['page'] лучше хранить в массиве и перед запросом старанички проверять на допустимый формат с помощью регулярного выражения. Еще бы неплохо защитить каталог pages/ на прямое обращение к файлам.
  • 19 Мая 2009 16:59
    Святослав
    + А в отдельном уроке который обещал Максим =), можно сделать вывод в браузерную строку(GET) числа, как реализовано у Евгения и у меня собственно, и поставить запрет на содержание букв в массиве-переменной (например если вы введете http://ruseller.com/lessons.php?rub=28&id=http то вас не допустят), вот так =)
  • 19 Мая 2009 20:07
    Илья
    dima,а если я просто передам переменной page,ссылку на свой файл .txt на своём хосте? а в этот файл напишу,пхп код,например удаления всех файлов из папки pages?
  • 19 Мая 2009 20:31
    doctor
    так хватит о сайтостроении, сегодня отмечаем День рождения Евгения=) желаю Вам что бы 99% желаний записанных под Новый год, сбылись=)
  • 19 Мая 2009 20:58
    Святослав
    doctor +1, присоединяюсь насчет пожелания, я уж и забыл эту статью=)
  • 19 Мая 2009 21:14
    vahit
    Спасибо за урок!С днем Варенья тебя!!!Всего наилучшего!
  • 12 Июня 2009 19:03
    Алекс
    Так кого поздравляем ЕвгениЮ или ЕвгениЯ? ))))) ошибка закралась Было день рожденье Коли - Превратился в праздник Оли. Хороший урок.
  • 31 Августа 2009 17:55
    triholog
    Здравствуйте, Евгений! Было бы здорово посмотреть видеоурок WYSIWYG! Сделайте видеоурок! Очень многие Вам будут за это благодарны!
  • 26 Сентября 2009 19:43
    VALERI
    YO! Я все понял и сделал. Только не могу понять как сделать так чтобы footer не растягивался при большом кол.слов??? Ещё не ясно почему не как загрузить картинку??? Когда я все сохраняю она перестаёт отабражаться но в коде HTML она прописана! Читал и пробовал как тут. http://wiki.moxiecode.com/index.php/TinyMCE:Index Но не вышло! Как быть?
  • 12 Января 2010 18:18
    Всеволод
    Как сделать, чтобы последняя добавленная страница, например test_page3 выводилась стартовой, как последняя добавленная новость?
  • 12 Января 2010 18:28
    Всеволод
    Если быть более точным, нужно сделать, чтобы последняя добавленная страница, выводилась как первая. Отсчет с конца
  • 26 Января 2010 07:34
    oziris
    не понял. разжуйте. ну да, тупой, знаю, но можно подробней, пожалуйста. именно не понял каким образом ссылки из хедера открываются между header и footer. ну не въехал, звиняйте.
  • 22 Ноября 2010 03:13
    nethak
    Ахереть... Гавно код в своём расцвете...
  • 23 Ноября 2010 23:34
    PHPuser
    Исходники нескачиваются....
  • 25 Января 2011 18:31
    shooroop
    Сейчас будем восстанавливать исходники!
  • 25 Января 2011 18:51
    shooroop
    Можно качать :) все гуд!
  • 18 Февраля 2011 01:30
    fordecember
    Спасибо за урок. Вопрос: Как к ссылкам в header.html привязать наш контент из папки pages?
  • 27 Марта 2011 20:47
    KostyaKoz
    Здравствуйте! Не рабатает ссылка для скачивания исходников. Скажите, где скачать.
  • 13 Июня 2011 16:18
    IgorArhangel
    Как это все организовать с базой данных?
  • 9 Ноября 2012 21:45
    steppe
    Не могу скачать ссылка не работает.. Сделайте новую пожалуйста)
  • 15 Июня 2013 12:58
    shabda
    хотя бы напишите причину, по которой невозможна скачка. А то как-то несолидно
  • 14 Июля 2015 15:10
    АлексейНиколаевич
    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("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
    }
    echo("<a href=\"{$_SERVER['PHP_SELF']}" .
    "?page={$matches[1]}$next_page\">Следующая страница</a>");
    }
    echo("</p>");
    }
    
    Не пойму в чем дело! Код не срабатывает. Дримвьювер пишет синтаксическую ошибку -> $page], убрал скобку квадратную, создал 3 файла news_1.txt, news_2.txt, news_3.txt, но код на странице не отображает кнопок навигации, все остальное работает. В чем может быть дело?
^ Наверх ^