Как создать простую CMS, упрощающую редактирование?

В этой статье мы рассмотрим простой способ создания собственной системы управления контентом, которая упрощает редактирование и обновление вашего веб-сайта.

Мы создали эту статью в партнерстве с Froala. Спасибо за поддержку партнеров, которые делают SitePoint возможным.

Что такое CMS

Системы управления контентом (CMS) — это мощные и популярные инструменты для создания платформ, сильно зависящих от контента. Они предоставляют пользователям простые способы создания, публикации, просмотра и редактирования контента.

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

CMS используются для разных целей в разных областях. Например, их можно использовать для поддержки блогов, веб-сайтов компаний или фрилансеров, образовательных веб-сайтов или даже платформ электронной коммерции. Из-за этого использование CMS остается популярным и актуальным вариантом, закрепив за собой место в веб-разработке на долгие годы.

На рынке существует множество доступных CMS. Некоторые из них с открытым исходным кодом, в то время как другие могут быть использованы по цене. Как платные, так и открытые CMS являются жизнеспособным выбором и имеют свои преимущества. Также могут быть случаи, когда вы хотите создать свою собственную CMS.

Вы можете быть разработчиком, ищущим вызов, студентом, которому поручено создать CMS, или бизнесом, который стремится стать известным в индустрии CMS. Если вы хотите создать систему управления контентом, то эта статья для вас.

Подготовка к созданию собственной CMS

Мы будем делать базовую (т.е. достаточно удобную) CMS, используя следующие инструменты:

• HTML/CSS/JavaScript/jQuery для интерфейса
• Bootstrap для отзывчивости и простого дизайна
• PHP для бэкенда
• MS SQL Server (или аналогичный) для хранения данных
• SSMS (SQL Server Management Studio или эквивалент) для создания базы данных и таблиц.
• Froala, HTML-редактор WYSIWYG (что видишь, то и получаешь) для редактирования контента.

Хотя CMS, которую мы будем делать, является базовой, она также будет довольно надежной. Это связано с тем, что Froala, редактор WYSIWYG, который мы будем использовать, имеет большинство функций, которые вы хотите иметь в редакторе CMS. Эта статья должна указать вам правильный путь, какой бы ни была конечная цель вашей CMS.

Кроме того, обратите внимание, что СУБД (система управления базами данных), которую я буду использовать, — это Microsoft SQL Server, потому что это то, с чем я лучше всего знаком. Вы можете легко заменить его на предпочитаемую СУБД, например MySQL или MariaDB. Так как ничего особенно сложного с базой данных мы не делаем, выбор СУБД здесь не имеет большого значения.

Прежде чем мы продолжим, давайте предположим, что у вас уже установлены PHP, выбранная вами СУБД и Froala. Если вы еще этого не сделали, вы можете установить их, посетив соответствующие веб-сайты и следуя инструкциям.

Что в CMS?

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

Конечные пользователи, с другой стороны, взаимодействуют со страницами и компонентами веб-сайта на базе CMS для создания, редактирования и потребления контента. Оба пользователя обычно взаимодействуют с редактором WYSIWYG в CMS для создания и редактирования контента.

В демонстрационных целях и для простоты мы реализуем одностраничную CMS только для администраторов. В производственной CMS нам нужно будет учитывать множество других факторов, которые выходят за рамки этого руководства. К ним относятся управление пользователями и правами доступа, безопасность (очистка ввода, параметризованные запросы и т. д.), производительность и многое другое.

В нашей простой CMS администраторы должны иметь возможность выполнять следующие задачи:

• взаимодействовать с панелью инструментов для создания компонентов страницы, таких как заголовки, текст, ссылки и экземпляр редактора Froala
• взаимодействовать с экземпляром Froala для публикации контента, который будет отображаться
• просматривать размещенный контент
• войти в режим просмотра, который скрывает панель инструментов

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

Настройка базы данных

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

• почта
  • post_id: int, identity(1,1), not null, первичный ключ
  • post_content: varchar(max), не ноль
  • posted_on: datetime2(7), не нуль
• составная часть
  • component_id: int, identity(1,1), not null, первичный ключ
  • component_type: char(8), не нуль
  • component_content: varchar(255), обнуляемый
  • created_on: datetime2(7), не нуль

В первой таблице postбудет храниться контент из компонента редактора, а в componentтаблице будут храниться элементы страницы, сгенерированные с помощью панели инструментов.

Обратите внимание, что максимальная длина URL-адресов в большинстве браузеров составляет 2048 символов, но в нашей базе данных мы установим ее только на 255 символов. Кроме того, вы также можете изменить столбцы идентификаторов обеих таблиц на рандомизированные строки для вашего приложения.

Создание интерфейса

Мы добавим ссылки CDN для Bootstrap, значков Bootstrap и файлов CSS и JS Froala. У нас также будут наши пользовательские файлы CSS и JS:

<!--Include Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<!--Include Bootstrap Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

<!--Include Froala Editor CSS-->
<link href="css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />    

<!--Include Custom CSS-->
<link href="css/index.css" rel="stylesheet" type="text/css" />

<!--Include Popper JS-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>

<!--Include Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

<!--Include jQuery-->
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>

<!--Include Froala JS-->
<script type="text/javascript" src="js/froala_editor.pkgd.min.js"></script>

<!--Include Custom JS-->
<script type="text/javascript" src="js/index.js"></script>

Следующие компоненты, над которыми мы будем работать, — это панель навигации и панель инструментов. Панель навигации содержит название или бренд сайта и кнопку со значком для переключения видимости панели инструментов (подумайте об этом как о кнопке «переключить вид администратора»).

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

Приведенный выше код создает панель навигации и компоненты. Фоновый цвет навигационной панели имеет #0098F7синий оттенок. Событие toggleToolbar()onclick отвечает за скрытие элементов панели инструментов. Далее напишите код для панели инструментов:

Мы используем отображение сетки Bootstrap (нажмите здесь, чтобы узнать больше) и параметры изменения размера, чтобы сделать кнопки компонентами нашей панели инструментов. Мы также используем значки Bootstrap вместе с метками кнопок для лучшей читабельности. При создании собственной CMS существует множество способов представления панели инструментов.

Обычными вариантами являются навигационная панель, карты или элементы вне холста. В этом случае мы представляем их с помощью прямоугольников, похожих на карточки, каждый из которых ведет себя как кнопка.

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

Каждый содержит поле ввода (два для ссылок, одно для текста и одно для URL). Наконец, мы вызовем createComponentфункцию для инициализации нашего HTML-редактора WYSIWYG для CMS :

В приведенном выше коде показано одно из модальных окон, а именно то, которое используется для добавления нового заголовка на страницу. Это модальное окно отображается, когда пользователь нажимает кнопку/карточку «Заголовок». Он закрывается при нажатии кнопки выхода или отмены или при добавлении заголовка.

Другие модальные окна работают аналогично, но обратите внимание, что правильный ввод ссылки должен иметь два поля ввода для текста и URL-адреса (сейчас мы будем использовать только одно):

.toolbarBox:hover *, .toolbarBox:hover{
  background-color:rgb(228, 228, 228);
  cursor: pointer;
}

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

Теперь, когда мы настроили интерфейс, пришло время добавить функциональность с помощью JavaScript.

Отправка данных

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

1. createComponent(componentType)

Мы будем использовать эту функцию для отправки созданных компонентов в базу данных. В качестве параметра принимает componentType, который описывает тип компонента (ссылка, заголовок, текст, редактор). Во-первых, мы должны определить тип компонента с помощью switch-caseинструкции. Для заголовков, текстов и ссылок мы просто отправим их содержимое вместе с типом компонента с php/add.phpпомощью запроса AJAX. С другой стороны, для редакторов нам нужно будет отправить только тип компонента. После того, как содержимое будет успешно сохранено, мы вызовем getComponents()функцию для «обновления» отображаемых компонентов.

2. toggleToolbar()

Эта функция просто добавляет или удаляет классы d-flexи d-noneс панели инструментов по мере необходимости.

3. resetValue(componentType)

Функция, имеющая componentTypeпараметр, resetValueповторно инициализирует значение полей ввода, получая каждый элемент по идентификатору и устанавливая его значение в пустую строку.

4. getComponents()

Эта функция сначала делает HTTP-запрос Ajax для php/load.phpполучения данных компонентов из базы данных. В случае успеха он динамически генерирует HTML в соответствии с компонентами, полученными из базы данных (например,

элемент для компонентов заголовка). После этого для каждого компонента редактора инициализируется экземпляр Froala вместе с кнопкой сохранения. Наконец, clickк кнопкам для сохранения сообщений, написанных в редакторах, добавлен прослушиватель событий. В случае успеха getPosts()функция вызывается для «обновления» списка сообщений.

5. getPosts()

Функция getPosts()состоит из запроса Ajax, который извлекает все сообщения из базы данных через php/loadPosts.php. Подобно getComponents(), эта функция динамически генерирует HTML для отображения сообщений.

При загрузке документа вызываются обе функции и getComponents(). getPosts()Теперь, когда у вас есть необходимый JS-код для отправки данных на сервер, осталось обработать его в бэкенде.

Подготовка бэкенда

Как вы могли заметить ранее, у нас есть четыре PHP-файла — два для добавления компонентов и постов и два для их загрузки. Они состоят из похожего кода, начиная с подключения к базе данных с помощью sqlsrv_connect, получения $_POSTпеременных (если они есть) и определения и выполнения запроса. Ниже перечислены запросы, связанные с этими файлами:

1. load.php:

  $query = "SELECT component_id, component_type, component_content FROM component ORDER BY created_on ";

2. loadPosts.php:

  $query = "SELECT post_id, post_content, posted_on FROM post ORDER BY posted_on ";

3. add.php:

  $query = "INSERT INTO component (component_type, component_content, created_on) VALUES (?, ?, GETDATE())";

4. addPost.php:

  $query = "INSERT INTO post (post_content, posted_on) VALUES (?, GETDATE())";

После того, как вы настроите эти файлы PHP, вы сможете выполнять все основные функции CMS с помощью редактора WYSIWYG. При создании собственной CMS не забудьте дезинфицировать ввод и параметризовать запросы, помимо других мер безопасности, чтобы защитить своих пользователей и приложения от определенных уязвимостей.

Хотите увидеть нашу базовую CMS в действии? Давайте проверим это!

Во-первых, давайте создадим некоторые компоненты страницы, используя созданную нами панель инструментов.

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

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

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

После сохранения содержимого мы видим, что оно отображается чуть ниже редактора. Возможно, вы захотите добавить больше отступов и дизайна или полностью изменить отображение своих сообщений, но пока этого достаточно.

Froala предоставляет более сотни функций, которые могут улучшить редактирование контента и пользовательский опыт. Они также хорошо подходят для предотвращения чрезмерного количества пользователей. Редактор настраивается, поэтому вы можете включать только те функции, которые должны использовать ваши пользователи.

Сохранив содержимое нашего поста, теперь мы можем проверить таблицу базы данных.

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

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

Наконец, давайте посмотрим, как конечные пользователи просматривают страницу с помощью нашей кнопки-переключателя на панели инструментов.

Вот и все — CMS, на которой вы можете работать; прочная основа для сложных проектов CMS в будущем.

Заключение

Теперь, когда у вас есть необходимые инструменты и знания для создания простой, но надежной CMS, пришло время определить ваши следующие шаги. Вы можете сделать множество улучшений, превратив эту CMS в полноценную.

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

Еще одно очевидное улучшение, которое вы можете сделать, — это безопасность. С его помощью вы можете защитить свою CMS, сервер, данные, пользователей и свой бизнес.