Файл: Сайт компании по ремонту квартир и коттеджей.pdf

35
Окончание таблицы 4
Шаблон
(template)
Базовая сущность, определяющая отображение страницы в MODx.
Шаблоны обычно содержат HTML-теги разметки, которые определяют расположение и внешний вид вашего сайта. Когда страница сайта запрошена, MODx загружает документ или ресурс и его шаблон, затем
MODx находит дополнительные поля в шаблоне и заменяет их соответствующими значениями из документа перед отправкой страницы в браузер. Шаблон может быть назначен любому ресурсу и определяет по сути веб-страницу в которой будет выведено содержимое этого ресурса.
Component
(компонент)
Обеспечивает дополнительную функциональность для MODx в виде надстроек, шаблонов и дополнений.
Template
Variables, сокращенно TV
(переменные шаблона)
Особый вид ресурса поля, привязанный к шаблону, который используются для расширения стандартных полей, созданных пользователем. Вызывается следующим тегом: [[*tv]].
Chunk (чанк)
Блок html без исполняемых кодов, который можно использовать для встраивания в шаблоны, другие чанки, либо вызвать в снипете (TV).
Чанк можно вызвать при помощи метки в виде [[$ChunkName]]
Snippet
(сниппет)
PHP код, исполняемый во время обработки шаблона.
Category
(категория)
Необязательное имя классификации, которое можно присоединить к любому элементу, чтобы отделить его от других подобных объектов.
Плагин (plugin) Плагины также как и сниппеты представляют собой фрагменты кода, которые имеют доступ к MODx API. Однако в отличие от сниппетов плагины не требуется вызывать непосредственно в коде, т.к. они связаны с системными событиями, которые могут произойти на веб- странице. Т.е. код плагина выполняется только при наступлении какого- либо события на веб-страницы.
На основе блочной структуры был создан шаблон главной страницы web- сайта c использованием языка HTML и разметки CSS. Позже, на основе этого шаблона, был разработан общий шаблон для других страниц. В каче- стве текстового редактора для разработки HTML и CSS кода web-сайта сна-

36 чала был выбран текстовый редактор Notepad++, свободный текстовый ре- дактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Интерфейс тек- стового редактора Notepad++ представлен на рисунке 10.
Рисунок 10 – Интерфейс текстового редактора Notepad++
Но затем предпочтение было отдано в пользу Sublime Text 3 версии. К его преимуществам можно отнести следующие функции:
• подсветка синтаксиса;
• миникарта;
• подсветка парных скобок;
• кодкомплит.
Интерфейс текстового редактора Sublime Text 3 представлен на рисун- ке 11.

37
После этого началась работа по установке системы управления контен- том CMS MODx Revolution на локальный компьютер. С официального сайта www.modx.com был скачен дистрибутив MODX Revolution версии 2.5.0.
Рисунок 11 – Интерфейс текстового редактора Sublime Text 3
Проанализировав существующие локальные серверы, для работы над разработкой web-сайта был выбран Open Server версии 5.2.2, скаченный с официального сайта www.ospanel.io. Интерфейс меню локального сервера представлен на рисунке 12.
Рисунок 12 – Интерфейс меню локального сервера Open Server версии 5.2.2

38
Следующим шагом было создание базы данных в приложении
PhpMyAdmin.
Для этого на локальном сервере Open Server было запущено данное приложение, после чего там была создана база данных под названием
«euroremontural».
Кодировка установлена в значении «utf8_general_ci» [3].
Интерфейс приложения PhpMyAdmin представлен на рисунке 13.
Рисунок 13 – Интерфейс приложения PhpMyAdmin
После установки и настройки сервера [1], на нем был создан домен
«euroremontural».
Интерфейс настройки локального сервера Open Server представлен на рисунке 14. Далее, следуя инструкции, с помощью дистрибу- тива MODx Revolution, на данный домен была «посажена» панель управле- ния web-сайтом. База данных на PhpMyAdmin была автоматически заполнена
CMS MODx своими служебными таблицами. Затем была произведена пер- вичная настройка: указание имя сайта «Евроремонт Урал», настройка дру- жественных URL, а так же было отредактировано свойство ресурсов для их публикации по умолчанию [28].

39
Рисунок 14 – Интерфейс настройки локального сервера Open Server
После настройки панели управления началась работа над внедрением шаблона главной страницы. Для этого были созданы два ресурса «Главная» и «Ремонт квартир», а так же импортированы ранее созданные шаблоны
«Home Page» для стартовой страницы, и «Base template» для других страниц.
Для оптимизации кода шаблонов повторяющиеся блоки были вынесе- ны в отдельные чанки [19]. Первыми были созданы следующие чанки:
• Includes [[$includes]] – служебные теги, подключение скриптов и стилей;
• Header [[$header]] – шапка сайта и навигация;
• Footer [[$footer]] – подвал сайта;
• Top_nav [[$top_nav]] – «
хлебные крошки».
Далее во вкладке ресурсы были созданы еще несколько документов:
«Ремонт коттеджей», «Ремонт офисов», «Дизайн-проект», «О компании» c вложенными страницами «Почему мы» и «О нас в цифрах», «Портфолио»,
«Отзывы» и «Контакты». Им были назначены соответствующие шаблоны.

40
Структура страниц веб-сайта представлена на рисунке 15.
Рисунок 15 – Структура ресурсов web-сайта
Следующим этапом разработки было наполнение контентом страниц web- сайта. Для реализации некоторых функций на web-сайте использовались следующее приложения:
• MIGX (MultiItemsGridtv for MODX) – приложение для организации дополнительных полей (TV), созданный для того чтобы объединить несколь- ко разных TV в один. Такая система объединенных полей очень сильно упрощает администрирование сайта, когда есть необходимость заполнять много информации. Поля ввода в MIGX могут быть всеми стандартными ти- пами: текст, цифры, выпадающие списки, изображения, chekbox и прочее.
Приложение дает возможность пользователю гибко произвести настройку структуры и набор используемых полей ввода в рамках одного MIGX-поля.
Приложение устанавливается со сниппетом getImageList, который позволяет быстро вывести данные из заполненного TV MIGX [18];

41
• AjaxForm – служит для отправки любых форм через ajax;
• Collections – дополнение для modx, создающее отдельную вкладку на странице редактирования ресурса для отображения дочерних ресурсов в виде подробной таблички с выводом и удобными возможностями изменения всех нужных полей (и основных и дополнительных);
• Gallery – динамичное приложение для MODx Revolution. Позволяет создавать галереи картинок, сортировать и маркировать их, отображать их различными способами на фронтэнде («лицевой» части сайта)[7];
• PdoTools – набор необходимых для работы сниппетов, таких как pdoMenu для построения меню, pdoSitemap для быстрого создания карты сайта и pdoCrumbs для работы с «хлебными крошками».
Управление приложениями производилось с помощью панели «При- ложения» расположенной в верхней части панели управления CMS MODx.
Панель «Приложения» представлена на рисунке 16.
Рисунок 16 – Панель «Приложения»
При заполнении страниц контентом и при работе с приложениями бы- ли добавлены новые чанки и создавались дополнительные поля.
Для классификации чанков и TV полей во вкладке «Элементы» – «Ка- тегории» были созданы следующие категории:

42
• Template – для повторяющихся блоков исходного кода встречаю- щихся во всех шаблонах;
•
Выполненные работы – для блока с галереей;
•
Контент – для блоков с контентом на страницах;
•
Карусели – для блоков со слайдером.
Система управления контентом MODx является SEO-ориентированной.
Для обозначения ключевых слов использовались поля «Описание» и «Анно- тация». Создание ключевых слов для web-сайта представлено на рисунке 17.
Рисунок 17 – Ключевые слова
После наполнения страниц контентом, следующим этапом была настройка прав для пользователей панели управления.
При настройке безопасности конечной целью является дать каждому пользователю соответвующий набор привилегий – разрешить ему совершать определенные действия в системе. Действия могут совершаться над различ- ными объектами: страницами (resource), контекстами (context), чанками
(chunk)
, переменными шаблонов (TV) и так далее. Сами действия могут быть очень разными, в простейшем случае это создание, просмотр, редактирова- ние и удаление. Таким образом, задача настройки безопасности сводится к заданию отношений между пользователями, объектами и привилегиями.
В CMS MODx реализована возможность разграничения прав пользова- телей [15]. В режиме администратора пользователю доступны все операции:

43
• создание, редактирование, настройка и удаление ресурсов;
• установка и удаление приложений;
• создание, редактирование, настройка и удаление шаблонов;
• настройка системы панели управления;
• настройка параметров сайта;
• создание, редактирование, настройка и удаление чанков.
С помощью панели «Пользователи» создана учетная запись контент- менеджера «manager». Далее в панели «Настройки» – «Контроль доступа» для данного записи были ограниченны права. Панель настройки прав доступа представлена на рисунке 18.
Рисунок 18 – Панель настройки прав доступа
Итогом проделанной работы стала финальная версия продукта – web- сайта. На главной странице расположена навигационная панель, контент страницы с описанием деятельности компании, два слайдера с информацией

44 о сотрудниках и изображением отзывов и формой обратной связи. Главная страница веб-сайта представлена на рисунке 19.
Рисунок 19 – Главная страница

45
На странице «Ремонт квартир» так же расположены навигационная па- нель, контент страницы с описанием конкретной услуги, указан порядок ра- боты, имеется два слайдера и форма обратной связи для вызова инженера- сметчика. Так же на сайте имеются страницы «Ремонт коттеджей», «Ремонт офисов» и «Дизайн-проект» схожих по структуре. Страница с описанием услуги «Ремонт квартир» представлена на рисунке 20.
Рисунок 20 – Страница с описанием продукции

46
Страница «О компании» и вложенные страницы «Почему мы» и «О нас в цифрах» содержат обращение директора компании к посетителям ресурса, а так же общую информацию компании, включают в себя элементы текста, изображения и таблицы. Страница «О компании» представлена на рисун- ке 21.
Рисунок 21 – Страница «О компании»
Страница «Портфолио» содержит галерею с альбомами изображений готовых проектов с краткой информацией. Страница «Портфолио» представ- лена на рисунке 22.
Рисунок 22 – Страница «Портфолио»

47
Страница «Контакты» содержит полную контактную информацию о компании, реквизиты и карту с месторасположением компании. Страница с контактной информацией, реквизитами и схемой проезда представлена на рисунке 23.
Рисунок 23 – Страница «Контакты»
С помощью формы обратно связи можно запросить звонок от менедже- ра компании. Форма обратной связи представлена на рисунке 24.

48
Рисунок 24 – Форма обратной связи
В конце каждой странице расположен «подвал», где указаны контакт- ные данные, информация об авторских правах и карта сайта. Блок «подвал» представлен на рисунке 25.
Рисунок 25 – «Подвал» web-сайта

2.4
Тестирование веб-сайта
Тестирование web-сайта заказчиком проводилось по следующим пара- метрам:
• доступность всех страниц web-сайта;
• работа всех обязательных функций веб-сайта;

49
• работоспособность формы обратной связи;
• проверка гиперссылок, поиск не рабочих ссылок;
• просмотр соответствия контента страниц веб-сайта исходным предоставленным материалам.
Так же заказчиком была проведена проверка работоспособности web- сайта в разных web-браузерах таких как: Google Chrome, Mozilla Firefox, Sa- fari, Internet Explorer и Opera.
2.5
Технические требования к проекту
Для размещения web-сайта в сети Интернет необходимо выбрать хо- стинг провайдера и доменное имя.
Рекомендуемые системны требования для сервера.
В качестве серверной операционной системы рекомендуется применять
• Linux x86, x86-64;
• Windows Server 2012.
Минимальные системные требования:
• веб-сервер – Apache 1.3.x / Apache 2.2.x, IIS выше 6.0,
Zeus,
Cherokee, lighthttpd или nginx.;
• базы данных – MySQL 4.1.20 или выше (исключая версию 5.0.51), либо Microsoft SQL Server 2008. Кодировка таблиц по умолчанию – UTF-8.
Плюс должны быть разрешены команды SELECT, INSERT, UPDATE, DE-
LETE, CREATE, ALTER, INDEX, DROP.
Дополнительно должен поддержи- ваться механизм хранения под названием MyISAM;
•
PHP и его модули – PHP версии 5.1.1 или выше (исключая 5.1.6 /
5.2.0), запуск с FastCGI. Должны быть установлены FastCGI, JSON, cURL,
Imagemagick, GD lib, PDO с драйвером баз данных, SimpleXML. Также настройки php.ini должны быть следующими: safe_mode off, register_globals off, magic_quotes_gpc off.
Плюс memory_limit не меньше 24 МБ.

50
Рекомендуемые системные требования:
• веб-сервер – Apache 2.2.x или IIS 7.0;
• базы данных – MySQL 5.1.x (последний релиз). Кодировка таблиц по умолчанию – UTF-8 BOM. Плюс должны быть разрешены команды SE-
LECT, INSERT, UPDATE, DELETE, CREATE, ALTER, INDEX, DROP.
До- полнительно должен поддерживаться механизм хранения под названием
MyISAM;
•
PHP и его модули – PHP версии 5.1.1 или выше (исключая 5.1.6 /
5.2.0), запуск с FastCGI. Должны быть установлены Opcode cache (APC,
Wincache), FastCGI, JSON, cURL, Imagemagick, GD lib, PDO с драйвером баз данных, SimpleXML. Также настройки php.ini должны быть следующими: safe_mode off, register_globals off, magic_quotes_gpc off.
Плюс memory_limit от 64 МБ (а лучше больше).
MODx поддерживает такие браузеры:
• Google Chrome;
•
Safari 3.1.2 или выше;
•
Mozilla Firefox 3.0 или выше;
•
Microsoft IE 8 или выше.

51
ЗАКЛЮЧЕНИЕ
Глобальная информатизация общества привела к тому, что потребность в информации, растет с каждым новым пользователем сети. При этом задача специалистов в области информационных технологий обеспечить пользова- телей полной и достоверной информацией путем простого и удобного для пользователей доступа к накопленным массивам данных.
На рынке существует множество CMS, от простых в освоении и сво- бодно распространяемых, до систем профессионального уровня и требующих высоких навыков в сфере разработки. Как правило, более серьезные системы управления web-сайтами являются платными или имеют платные модули.
При разработке web-сайта особое внимание необходимо уделять его дизайну. Ведь у посетителя web-сайта сможет сложиться первое впечатление обо всей компании и важно, чтобы оно было положительным. Существуют различные правила выбора цветовой гаммы web-сайта, расположения основ- ных элементов на станицах web-сайта, а так же минимальные требования по функциональности web-сайта. Соблюдение всех правил и требований залог успешного создания web-сайта.
Результатом дипломной работы стало создание web-сайта для компа- нии «Евроремонт Урал», чья деятельность заключается в проведении ре- монтных работ в квартирах, коттеджах и офисах, а так же создание дизайн- проекта. Разработанный web-сайт позволяет автоматизировать процессы до- ступа к информационным ресурсам компании через Интернет и информаци- онный обмен между компанией и потенциальными клиентами.
В ходе дипломной работы был изучен процесс создания web-сайта с помощью системы управления, а так же сформированы общие навыки рабо- ты с CMS MODx Revolution.
Web- сайт, созданный во время выполнения дипломной работы, вклю- чает в себя полную информацию о компании, виде деятельности и оказывае-