Как создать свой сайт с нуля с помощью Orchard CMS. Часть 1. Введение в Orchard CMS (cont)


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

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

Напомню, что автоматическая загрузка Orchard доступна из галереи приложений с помощью средства быстрого доступа к веб-инструментам Web Platform Installer (нажмите на эту ссылку, чтобы начать установку).

Управление Orchard CMS

Загруженная страница базового проекта Orchard CMS представляет собой симпатичный легкий и простой сайт с заголовком, панелью навигации, четырьмя текстовыми блоками и «подвалом», в котором есть ссылка Dashboard на панель администрирования проекта.

Редактирование содержимого

Обратите внимание, что каждый текстовый блок имеет в правом верхнем углу элемент Edit (Редактировать). Это свойство позволяет вам быстро изменять содержимое блоков. Если нажать на Edit у первого блока, то вы попадете на страницу редактирования содержимого в панели администрирования (рисунок 1.14).

clip_image002[5]
Рис. 1.14. Редактирование содержимого блока в панели администрирования

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

Теперь перейдите с главной страницы сайта обратно на панель администрирования через ссылку Dashboard в подвале. Вы увидите приветственную страницу панели администрирования (рисунок 1.15).

Добавление новой страницы

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

  • создавать и удалять страницы, разделы, блоги;
  • редактировать содержимое, загружать и управлять медиа-контентом;
  • загружать модули и управлять установленными модулями;
  • применять темы оформления;
  • управлять виджетами;
  • управлять ролями и пользователями;
  • конфигурировать массу системных параметров;
  • и многое другое…

clip_image004[4]
Рис. 1.15. Приветственная страница панели администрирования Orchard

В качестве введения в работу панели администрирования нажмите на ссылку Page (Страница) в разделе New (Новая). В появившемся редакторе вы можете создать новую страницу вашего сайта. Введите заголовок и какое-нибудь содержимое страницы. Обратите внимание на сформированную ссылку для вашего сайта. Запомните ее, и если хотите, поменяйте (рисунок 1.16).

clip_image006[4]
Рис. 1.16 Заголовок и ссылка для новой страницы

После этого нажмите кнопку Publish Now для создания и публикации новой страницы на сайт. Вы получите уведомление об успешном создании страницы (рис. 1.17).

clip_image008[4]
Рис. 1.17. Уведомление об успешном создании новой страницы

Теперь перейдите по ссылке Navigation (Навигация) для создания элемента навигации на нашу новую страницу. Введите данные в нижние поля в разделе Add New Item (Добавить новый элемент): текст отображения в поле навигации, позиция по очереди в поле навигации и ссылку на нашу страницу (с косой чертой впереди) (рисунок 1.18).

clip_image010[4]
Рис. 1.18. Заведение нового элемента навигации

Нажмите кнопку Add (Добавить) и убедитесь что новый элемент навигации добавился в верхнем списке. Теперь пора убедиться в изменениях на сайте.

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

clip_image012[4]
Рис. 1.19. Новый элемент навигации на странице сайта

Смена темы оформления

Теперь попробуем изменить тему оформления нашего сайта. Для этого вернитесь в панель администрирования Orchard CMS. Перейдите в раздел Themes (Темы) в котором пока отсутствуют загруженные темы и нажмите на кнопку Install a theme from the Gallery (Установить тему из галереи). Через некоторое время в панель администрирования загрузится список доступных тем оформления (рисунок 1.20).

clip_image014[4]
Рис. 1.20. Список тем оформления в панели администрирования Orchard CMS

Выберите понравившуюся тему, например вторую по списку (Association Dark Green — Version: 1.0) и нажмите на ссылку Install (Установить) напротив нее. Через некоторое время тема будет автоматически загружена на ваш сайт.

Теперь установка темы будет доступна из раздела Themes (рисунок 1.21). Перейдите в него.

clip_image016[4]
Рис. 1.21. Загруженная тема в разделе Themes

Чтобы установить загруженную тему как тему оформления нашего сайта нажмите на кнопку Set Current (Установить текущей). После этого вернитесь на главную страницу своего сайта, чтобы убедиться, что оформление сайта было изменено (рисунок 1.22).

clip_image018[4]
Рис. 1.22. Внешний вид сайта в браузере с новой темой оформления

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

Применение возможностей WebMatrix

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

Изучение запросов к сайту

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

В главном окне WebMatrix (рисунок 1.10) перейдите на список осуществленных запросов с помощью кнопки Requests (Запросы) на панели управления. Перед вами появится список запросов со статусами, временем выполнения и дополнительной информацией с описанием типа запроса и рекомендуемым действиям.

clip_image020[4]
Рис. 1.23. Список запросов к сайту за время работы приложения

С помощью этой функции WebMatrix разработчики легко могут отследить проблемы своего-сайта связанные с доступом к контенту: изображениям, скриптам, стилям и так далее. Неподготовленные специалисты могут прочитать описание статуса доступа к контенту и даже получить совет по решению проблемы, если она возникла.

Работа с кодом

Работа разработчика веб-приложений, так или иначе, всегда связана с написанием и редактированием кода. Таким кодом могут быть исходные файлы динамических страниц, файлы разметки и представления, стили оформления и javascript-скрипты.

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

Например, вы можете подкорректировать загруженную и установленную тему оформления для своего сайта. Открыв файл стилей Site.css, который расположен в папке Themes\ AssociationDarkGreen\Styles, вы сможете изменить определение стилей на свой вкус.

Например, если вы хотите переопределить шрифт, используемый в теме для заголовка сайта, то найдите в Styles.css определение стиля для элемента #branding. Отредактируйте его определение так, как захотите, например, укажите, что шрифт должен быть Segoe UI, установив значение CSS-элемента: font-family: “Segoe UI(рисунок 1.24).

clip_image022[4]
Рис. 1.24. Редактор кода WebMatrix

Сохраните файл и обновите главную страницу сайта в браузере. Вы убедитесь, что шрифт был изменен.

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

Работа с БД

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

WebMatrix предлагает полноценные встроенные инструменты для работы с базами данных. Откройте вкладку Databases (Базы данных). Слева вы получите список текущих элементов базы данных. Дважды щелкните по элементу Orchard.sdf. Это файл базы данных формата SQL Server Compact, который содержит все данные нашего сайта. Разверните элемент Tables и вы получите список всех таблиц, созданных в базе данных и доступных для редактирования.

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

Щелкните на поле с содержимым Home и отредактируйте его так, чтобы оно приняло значение Главная (рисунок 1.25).

clip_image024[4]
Рис. 1.25. Редактирование базы данных в WebMatrix

Теперь если вы обновите главную страницу сайта в браузере, то увидите изменение в панели навигации. Пункт Home стал пунктом Главная.

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

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

Анализ сайта на проблемы и ошибки

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

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

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

Откройте раздел Reports (Отчеты) и нажмите кнопку Create a report for the site, которая расположена посередине экрана. Вас попросят ввести имя отчета и ввести адрес, с которого нужно построить отчет. По умолчанию адрес установлен для вашего текущего сайта (рисунок 1.26).

clip_image025[4]
Рис. 1.26. Ввод параметров отчета

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

clip_image026[4]
Рис. 1.27. Фоновый анализ сайта и формирование отчета

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

clip_image028[4]
Рис. 1.28. Работа с результатами анализа и отчетом

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

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

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

clip_image030[4]
Рис. 1.29. Экран параметров производительности в отчете

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

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

Публикация проекта на сервер

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

Задача публикации данных на сервер повседневная, тривиальная и очень рутинная. При этом публикация обновлений на сервер – это ответственная задача, в которой ошибки могут дорого стоить. Каждый опытный веб-разработчик имеет в своем арсенале несколько практик и подходов к публикации данных на сервер: через протокол FTP, удаленные соединения RDP или наборы скриптов. Как бы там ни было, публикация данных и обновлений на сервер – это процесс, который может занять много времени у специалиста любого класса.

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

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

Для нашего руководства мы будем использовать специальный бесплатный (на 60 дней) хостинг для проектов WebMatrix, который расположен по адресу http://WebMatrixHosting.ru/. Этот ресурс позволяет бесплатно оценить все преимущества WebMatrix и научиться использовать их на практике перед покупкой платного хостинга для размещения реальных проектов.

WebMatrixHosting.ru

Для того чтобы начать использовать бесплатный хостинг на WebMatrixHosting.ru у вас уйдет всего несколько минут. Пройдите по ссылке http://WebMatrixHosting.ru/ и зарегистрируйтесь на сайте.

clip_image032[4]
Рис. 1.30. Внешний вид сайта webmatrixhosting.ru в браузере

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

Публикация сайта из WebMatrix

После регистрации все сразу же готово для публикации вашего сайта. Перейдите в WebMatrix на вкладку Site и нажмите в панели инструментов кнопку Publish (Опубликовать). Перед вами откроется окно параметров публикации сайта (рисунок 1.31).

clip_image034[4]
Рис. 1.31. Окно публикации сайта в WebMatrix

Вы можете заполнить данные параметров публикации руками, указав сервер, имя пользователя, пароль, имя сайта и адрес сайта. Но куда как правильнее, быстрее, надежнее использовать файл публикации, приложенный к вашему письму от WebMatrixHosting.ru.

Нажмите ссылку Import publish settings (импорт настроек публикации) и выберите XML-файл для загрузки настроек (вам может понадобиться смена типа файлов в окне выбора). Вы обнаружите, что все поля параметров автоматически заполнились.

Теперь вы можете проверить правильность параметров, нажав кнопку Validate Connection. Если все данные введены верно и соединение с сервером было установлено, то вам предложат установить сертификат (рисунок 1.32), отметьте галочку и нажмите Accept Certificate для того, чтобы иметь возможность пользоваться сервером.

clip_image036[4]
Рис. 1.32. Подтверждение установки сертификата

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

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

clip_image038[4]
Рис. 1.33. Просмотр списка ресурсов готовых для публикации

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

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

clip_image040[4]
Рис. 1.34. Автоматическая публикация изменений на сервер

Через некоторое время (зависит от размера изменений) WebMatrix сообщит о завершении публикации, что будет означать, что ваш сайт уже готов к работе в интернете (рисунок 1.35).

clip_image041[4]
Рис. 1.35. Публикация завершена, сайт готов к работе

Перейдите по ссылке на свой установленный в интернете сайт. В моем случае сайт расположен по адресу http://vyunev-2.hosting.parking.ru/.

WebMatrix предлагает простой и доступный каждому способ публикации веб-сайтов на сервер. Как вы можете убедиться, публикация сайта в интернете с помощью WebMatrix занимает всего несколько минут. Даже если у вас пока нет приобретенного хостинга, бесплатная регистрация на проекте http://WebMatrixHosting.ru позволит получить его за считанные минуты. Учтите только, что это предложение будет действовать 60 дней.

Заключение

В первой части руководства мы подробно познакомились с системой управления контентом Orchard CMS. Мы за несколько минут загрузили, автоматически установили и запустили сайт на базе Orchard с помощью WebMatrix.

С помощью консоли управления Orchard CMS мы осуществили ряд простых административных задач с сайтом и изменили тему оформления. WebMatrix позволил нам отредактировать файлы проекта и базу данных для внесения на сайт требуемых изменений. С помощью специальных возможностей WebMatrix мы проанализировали веб-сайт на ошибки и потенциальные проблемы.

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

От первой загрузки WebMatrix до работающего сайта в сети прошло не более 10 минут. Вот это эффективность!

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

Comments (6)

  1. Михаил Романов says:

    Владимир, спасибо за обзор.

    Мне он действительно помогает быстро осваивать и Orchard, и Web Matrix (например, до отчетов я бы просто не догодался добраться).

    Из того, что представляется сейчас насущной проблемой в работе с Orchard – невозможность выложить (простым способом) файлы на сайт под управлением Orchard для скачивания. Единственное, что видится – выкладывать их руками в неуправляемые папки прямо на хостинге и руками же делать ссылки на них. Решение представляется не очень красивым (как минимум из-за отсутствия отслеживания использования ссылок).

    Может есть варианты лучше?

  2. Михаил Романов says:

    Владимир, спасибо за обзор.

    Мне он действительно помогает быстро осваивать и Orchard, и Web Matrix (например, до отчетов я бы просто не догодался добраться).

    Из того, что представляется сейчас насущной проблемой в работе с Orchard – невозможность выложить (простым способом) файлы на сайт под управлением Orchard для скачивания. Единственное, что видится – выкладывать их руками в неуправляемые папки прямо на хостинге и руками же делать ссылки на них. Решение представляется не очень красивым (как минимум из-за отсутствия отслеживания использования ссылок).

    Может есть варианты лучше?

  3. Михаил файлы можно выложить. Для этого в панели управления зайдите в раздел Media и создайте папку. Зайдите в нее и добавьте файл. Обратите внимание, что вы можете добавить сразу несколько файлов если сожмете их зипом. Если просто добавляете архив, то уберите галочку "распаковывать zip". Короче, так вы сможете добавить файлы. Чтобы узнать адрес зайдите в файл.

  4. Lestat says:

    Мне было бы очень интересно, если бы вы создали на хабре пост, в котором описали бы создание НЕШАБЛОННОГО сайта на данной CMS.

    Допустим есть Сайт.. как. нить простенький… И покажите как его прикрутить к CMS самым наидоступнейшим образом.

  5. TiElkiPalki says:

    Отличный доклад!

    К стати, бесплатный хост продлили до 1 года!

  6. Артур Терегулов says:

    И html-редактор изменения не сохраняет. А мне клиенту через неделю работу сдавать, а тут приложение из галереи и не работает! На кого в суд подавать?