Введение CockpitCMS — CMS для разработчиков

В этой статье мы увидим, как использовать CockpitCMS, установку CMS на бэкенд и использование интерфейса API, который предоставляет Cockpit для создания специальных функций интерфейса.

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

Установка

CockpitCMS можно скачать здесь. После загрузки, просто распакуйте архив в папку на вашем веб-сервере. В моем случае, это HTTP: http://test.webtoks.ru/cockpit/

Затем, переходим на страницу установки CMS: http://test.webtoks.ru/cockpit/install, чтобы начать процесс установки.

ПРИМЕЧАНИЕ: Кокпит использует SQLite в качестве базы данных по умолчанию. Если вы еще не установили SQLite, сделайте это перед установкой.

ПРИМЕЧАНИЕ: Кокпит также требует, чтобы каталог /storage/data был доступен.

Установка одним кликом, когда установка будет завершена, вам увидите эту страницу:

1419552599installation[1]
image-827

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

INAZu7P6PSs[1]
image-828

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

Модули в Cockpit

Два наиболее важных модулей в Cockpit являются: коллекции и галереи.

Мы можем относиться к «коллекциям» как связке таблиц. Все коллекции определяется в Cockpit с различными полями практически всех типов. Коллекции заполняется «Элементами», который похож на запись в таблице.

Галереи являются «Фотоальбомами». Пользователь создает фотоальбом, который может содержать фотографии, которые могут быть использованы в дальнейшем.

Cockpit также имеет и другие модули: формы, области(своего рода сниппеты для фронтэнд страниц), медиа менеджер(модуль для управления всеми медиа-файлы на сайте). Подробная документация для этих модулей (в том числе для коллекций и галерей) можно найти на официальном сайте.

Создать первую коллекцию

Для начала, я создам простую коллекцию. Мы должны написать имя для коллекции (Путешествия) и определить, какие поля она будет содержать:

l6DqDPmrNeU[1]
image-829

Это простая структура состоит из следующих полей:

  • name: текстовое поле
  • date: поле дата
  • location: текстовое поле
  • diary: поле markdown, чтобы записать некоторые основные моменты поездки
  • pic: текстовое поле, чтобы связать в галерею изображений

ПРИМЕЧАНИЕ: Cockpit также создает несколько другие полей автоматически, чтобы хранить информацию, такую id, дата создания, дата изменения и т.д. Мы также можем использовать эти мета поля в нашем коде.

Вы также можете заметить, что, хотя Cockpit поддерживает тип поля «Галерея», мы до сих пор используете поле «Текст». Это потому, что Cockpit пока не может связать существующую галерею в записи коллекции. Позже мы увидим, как обойти это. Мы можем создавать много коллекций, галерей.

rIhsjT-nINE[1]
image-830

Теперь, давайте перейдем к фронтенду.

Фронтенд

ПРИМЕЧАНИЕ: Мы будем использовать фреймворк Silex с Twig для фронтенда, но вы можете выбрать любой другой фреймворк, логика останется схожей.
После того как скачали Selix у нас получится следующая структура папок:

public_html/
├── cockpit/
├── silex/
├── views/
└── index.php

В папке views будут хранится наши шаблоны.

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

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

ПРИМЕЧАНИЕ: Для использования API Cockpit, необходимо подключить require_once __DIR__. '/../cockpit/bootstrap.php';

f9XINXQ8b1U[1]
image-831

Код приведен ниже:

$app->get('/', function () use ($app) {
    $collections = cockpit('collections:collections', []);
    $galleries = cockpit('galleries:galleries', []);
    return $app['twig']->render('index.html.twig', ['collections' => $collections, 'galleries' => $galleries]);
})->bind('home');

Мы получаем все коллекции и галереи с помощью API. Это очень просто.

Раздел коллекции могут быть отображены с помощью Twig:

<h2>Collections</h2>
<p>There are total <strong>{{collections|length}}</strong> collection(s) in the CMS:</p>
<ul>
{% for col in collections|keys %}
    <li>
        <a href="{{ url('collection', {col: col})}}">{{col}}</a>
    </li>
{% endfor %}
</ul>

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

ПРИМЕЧАНИЕ: VarDumper могут быть использованы в Silex. Чтобы использовать его, необходимо использовать Symfony\VarDumper; и добавить одну строку в composer.json

"symfony/var-dumper": "3.0.*@dev"

Получение Коллекций

$app->get('/', function () use ($app) {
    $collections = cockpit('collections:collections', []);
    $galleries = cockpit('galleries:galleries', []);
    return $app['twig']->render('index.html.twig', ['collections' => $collections, 'galleries' => $galleries]);
})->bind('home');
$app->get('/collection/{col}', function ($col) use ($app) {
    $entries = collection($col)->find()->toArray();
    foreach ($entries as &$entry) {
        $text = $entry['diary'];
        $html = MarkdownExtra::defaultTransform($text);
        $entry['diary'] = $html;
    }
    return $app['twig']->render('entries.html.twig', ['collection' => $col, 'entries' => $entries]);
}
)->bind('collection');

Получение галерей

$app->get('/gallery/{gal}', function ($gal) use ($app) {
    $images = cockpit("galleries")->gallery($gal);
    foreach ($images as &$img) {
        $image = $img['path'];
        $imgurl = cockpit('mediamanager:thumbnail', $image, 200, 200);
        $img['cache']=$imgurl;
        $path=$img['path'];
        $url=str_replace('site:', 'http://'.$app['request']->getHost().'/', $path);
        $img['url']=$url;
    }
    return $app['twig']->render('gallery.html.twig', ['images'=>$images, 'gal'=>$gal]);
}
)->bind('gallery');

Вывод

Cockpit легкая, простая в установке и настройке CMS. Создавать коллекций и галерей, заполнение запись в коллекции и загрузка изображений в галерее все очень просто.

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

Демонстрационный код для этой статьи можете посмотреть здесь.

  • Игорь Терентьев

    Почему то не могу установить… При переходе по demo.ru/cockpit/install/ появляется абсолютно пустая страница (даже если исходный код посмотреть) добавление index.php тоже не помогает. Если перейти например по demo.ru/cockpit/install/success.php то страница подтверждения нормально отображается.

    • Добавление index.php? В папке install уже должен быть такой файл. Вот содержание этой папки https://github.com/aheinze/cockpit/tree/master/install

      • Игорь Терентьев

        Неправильно написал.. Добавление в путь index.php т.е. demo.ru/cockpit/install/index.php
        На третьем хостинге с грехом пополам запустилась установка)

        • В примере http://getcockpit.com/docs#!tutorials/simple_blog в views/index.php есть ошибка, перед $post[‘title’]; не должно быть знака равно. И в админке кокпита необходима создать коллекцию blog с полями title, content, public(тип boolean), если вы этого еще не сделали.

      • Игорь Терентьев

        Но если делаю пример блога, как в документации http://getcockpit.com/docs#!tutorials/simple_blog
        То появляется ошибка:
        { «type»: 1, «message»: «Call to a member function find() on a non-object», «file»: «/httpdocs/demo.ru/index.php», «line»: 12 }

        Строка 12:
        $posts = collection(‘blog’)->find([«public»=>true])->sort([«created»=>1])->toArray();

  • 27NataRUS

    Здравствуйте!
    Не могли бы подсказать, как добавить страницу в Cockpit? Сайт предполагается из двух страниц: русская версия и английская. С локализацией регионов разобралась, но не знаю, как их отобразить по адресу http://url_sute/en.html
    Использую Lime из сборки.
    Спасибо.