Самоучитель по NetCat: первые шаги

Введение

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

Что сделать в первую очередь

В первую очередь нужно обзавестись дистрибутивом системы. Прежде чем приобретать лицензию вы можете поупражняться на демо-версии.

Скачать демо-версию: netcat.ru/democentre/demdownload/

Вы можете скачать полный дистрибутив (архив, содержащий все файлы системы) либо только файл install.php, который при запуске скачает все необходимые файлы на ваш сервер.

Для начала обучения будет достаточно редакции Standart.

Установка системы

Какой бы способ вы не выбрали, файл (или файлы) нужно загрузить на сервер в корневую папку вашего сайта.

Создайте базу.

Запустите установщик:

• если вы используете полный дистрибутив, к адресу сайта добавьте /install/
  //example.com/install/
• если используете файл install.php, запустите его
  //example.com/install.php

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

Пока можно установить чистую систему, то есть выбрать пункт «Установить минимальный набор».

Завершите установку.

Если сайт тестовый, папку /install/ или файл install.php удалять необязательно, они вам ещё могут пригодиться, если решите переустанавливать систему.

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

Сайт и его структура

Откройте административный раздел, введя логин admin и пароль, который вы ввели на этапе установки. Если вы ничего не вводили, значит пароля нет, заполните только логин.

Первое что вы увидите — рабочий стол с виджетами.

Количество виджетов отличается в зависимости от редакции.

Рабочее пространство подразделяется на:

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

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

Итак, создадим новый сайт:

Укажите название сайта и его домен.

Нажмите на кнопку «Добавить». Новый сайт добавлен и его содержимое появилось в карте сайта

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

Создайте структуру сайта. Наведите на любой из созданных разделов, вы увидите несколько иконок:

• переход на раздел на сайте
• добавление подраздела
• удаление раздела

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

Возьмём структуру простейшего сайта и добавим несколько разделов в корне сайта:

В окне добавления введите название и ключевое слово. Ключевое слово можно сгенерировать автоматически из названия:

Добавьте необходимое количество разделов. Пока вводите только название и ключевое слово, остальные настройки мы выставим позже.

Ключевое слово участвует в построении пути по сайту, другими словами – формирует URL конечной страницы.

Итак, структура создана:

Как видите, одни из иконок разделов серого цвета, другие синие. Синие обозначают активные (включенные) разделы, соответственно серые — выключенные. Активные разделы участвуют в построении навигации: меню, хлебные крошки и т. д. Неактивные разделы на сайте не отображаются, но на них можно попасть, используя прямой адрес (цепочку из ключевых слов разделов, разделённых символом «/»).

После того как структура создана, переходим к компонентам.

Компоненты

Компоненты — это контейнеры, в которых хранятся все данные, отображаемые на вашем сайте: тексты, новости, списки сотрудников, товары и т. д. Каждому компоненту соответствует своя таблица в базе данных.

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

Единица информации, создаваемая в разделе с помощью прикреплённого к нему компонента, называется объект.

Перейдите на страницу компонентов: меню «разработка» → «компоненты»:

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

В каждом разделе с прикреплённым к нему компонентом может находиться как один объект, так и несколько. Например:

• раздел «О компании» в самом простом исполнении будет содержать только один объект, в котором будет произвольный html-текст. Всего 1 поле.
• раздел «Новости» будет содержать список объектов. Каждый из объектов (новостей) будет содержать: заголовок, текст новости, изображение для списка и дату публикации. Всего 4 поля.

Таким образом, созданная нами ранее структура будет содержать:

• О компании: текст, один объект
• Каталог: список объектов
• Команда: список объектов
• Контакты: текст, один объект

Нам понадобится всего три компонента: «Текст», «Каталог» и «Команда». После создания компонентов мы будем их прикреплять к разделам, при этом один и тот же компонент можно использовать в разных разделах.

Добавим самый первый, простой компонент «Текст». Для этого нажмите на кнопку «Добавить компонент» и далее «Создать новый компонент с нуля». Заполните поля с информацией о компоненте:

• название
• группу, её название может быть произвольным. Как правило, в группу собирают компоненты одного сайта или одной темы

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

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

В только что созданный компонент необходимо добавить одно или несколько полей. В этих полях будут храниться данные компонента. В системе существует несколько типов полей и со всеми в подробностях вы можете ознакомиться позднее на странице документации //netcat.ru/developers/docs/components/types-of-fields/. Пока же мы рассмотрим только несколько типов: строка, текст, файл.

В компоненте «Текст» достаточно одного поля типа «Текст». В данное поле можно будет ввести любой html-код, или, используя визуальный редактор, работать с текстом и изображениями.

Перейдите на вкладку «Поля» и добавьте новое поле. Заполните название поля, описание, тип поля и настройки поля:

Остальные настройки пока можно не трогать. Добавьте поле. После добавления оно отобразится в таблице:

В этом компоненте поля добавлять больше не нужно. Перейдём к добавлению следующего: каталог. Это будет список продукции компании.

Добавьте новый компонент

Введите его название и добавьте поля:

В итоге у вас получится подобная таблица:

Самостоятельно добавьте третий компонент «Команда». Предполагаемые поля:

Таким образом, в списке компонентов отобразятся три ваших компонента:

Следующее что нужно сделать — внедрить html и php коды отображения введённой информации. Перейдите в компонент «Текст», вкладка «Редактирование компонента». Здесь вы увидите ряд полей:

• префикс списка объектов. Это то что отображается в самом верху: заголовок страницы, форма поиска или фильтров и т. д.
• объект в списке. Повторяющаяся область. Выводит один или несколько объектов на странице.
• суффикс списка объектов. Нижняя часть страницы. На ней, как правило, отображается постраничная навигация или иная дополнительная информация.
• отображение объекта. В том случае, если из списка объектов посетитель переходит на страницу полного просмотра (анонс новости и её полный текст), на ней отображается то, что введено в этом поле.

Для компонента «Текст» заполним поле «объект в списке». Вывод введённых данных производится при помощи переменной, сформированной следующим образом: $f_название_поля.

Если поле имеет название text, переменная для вывода содержимого будет писаться так $f_text.

Переменные $f_AdminCommon и $f_AdminButtons служебные и отвечают за вывод панелей управления объектами.

Сохраните изменения.

В каталоге код вывода может быть таким:

В общем, код вывода зависит только от вёрстки вашего шаблона. Принцип вывода данных един для всех компонентов. Ссылка на полный просмотр объекта формируется в переменной $fullLink. Например, для перехода на страницу продукта добавьте ссылку на заголовок: 

Если есть ссылка на полный просмотр, нужно заполнить поле «Отображение объекта». Делается это аналогично — смесь html и php кода.

Поупражняйтесь с компонентами, добавьте отображение для последнего компонента «Команда».

После того, как работа с компонентами завершена, перейдите в карту сайта. Эти компоненты теперь можно прикрепить к разделам и внести некоторые данные.

Перейдите на вкладку «Инфоблоки»

В выпадающем списке выберите соответствующий компонент, поля «Название» и «Ключевое слово» пока можно оставить по умолчанию:

Добавьте инфоблок. Инфоблоков в одном разделе может быть несколько, они могут работать в связке или просто выводиться на одной странице. Например, на странице «Контакты» может быть два инфоблока:

• текст с контактами
• форма обратной связи

После того как в разделы добавлены инфоблоки, можно наполнить их информацией. Перейдите на вкладку «Редактирование» и нажмите кнопку «Добавить». Заполните поле или поля:

Сохраните результат. Текст будет отображён здесь же, на странице редактирования:

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

Самое время перейти к внедрению шаблонов дизайна.

Макет дизайна

Начнём с того, что для NetCat не нужно создавать какой-то уникальный шаблон, подойдёт любой готовый чистый html-шаблон. Если вы работаете над каким-то новым сайтом, его внешний вид (макеты дизайна и html-шаблоны), как правило, делается уникальным.

В нашей документации уже собран раздел, в котором мы поэтапно рассказываем о внедрении шаблона в систему. Документация по внедрению макета дизайна можно посмотреть по ссылке //netcat.ru/developers/docs/design/

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

//netcat.ru/netcat_files/docs/15/nc_doc_template.zip

Что дальше?

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

• по быстрому старту //netcat.ru/developers/docs/faststart/. Это страница, на которой мы собрали наиболее важные ссылки на разделы документации.
• по работе с модулями //netcat.ru/developers/docs/modules/
• управлению пользователями //netcat.ru/developers/docs/users-and-rights/
• об инструментах системы //netcat.ru/developers/docs/system-tools/ и многом другом.
• Дополнительно можете почитать текстовые уроки по работе с системой //netcat.ru/support/uroki-po-rabote-cms-netcat/

Помимо этого вы можете изучать систему с помощью видеоуроков //youtube.com/channel/UCTVAaLj-KU_rd4lF78T0VNA

Справиться с возникающими проблемами вам поможет наша техническая поддержка: //netcat.ru/forclients/support/tickets/

Удачи в работе с NetCat!

Скачать эту страницу в PDF