Файл: Разработка сайта компании по ремонту квартир и коттеджей».pdf

На основе блочной структуры был создан шаблон главной страницы web-сайта c использованием языка HTML и разметки CSS. Позже, на основе этого шаблона, был разработан общий шаблон для других страниц. В качестве текстового редактора для разработки HTML и CSS кода web-сайта сначала был выбран текстовый редактор Notepad++, свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Интерфейс текстового редактора Notepad++ представлен на рисунке 10.

Рисунок 10 – Интерфейс текстового редактора Notepad++

Но затем предпочтение было отдано в пользу Sublime Text 3 версии. К его преимуществам можно отнести следующие функции:

• подсветка синтаксиса;
• миникарта;
• подсветка парных скобок;
• кодкомплит.

Интерфейс текстового редактора Sublime Text 3 представлен на рисунке 11.

После этого началась работа по установке системы управления контентом 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

Следующим шагом было создание базы данных в приложении 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].

---

Рисунок 14 – Интерфейс настройки локального сервера Open Server

После настройки панели управления началась работа над внедрением шаблона главной страницы. Для этого были созданы два ресурса «Главная» и «Ремонт квартир», а так же импортированы ранее созданные шаблоны «Home Page» для стартовой страницы, и «Base template» для других страниц.

Для оптимизации кода шаблонов повторяющиеся блоки были вынесены в отдельные чанки [19]. Первыми были созданы следующие чанки:

• Includes [[$includes]] – служебные теги, подключение скриптов и стилей;
• Header [[$header]] – шапка сайта и навигация;
• Footer [[$footer]] – подвал сайта;
• Top_nav [[$top_nav]] – «хлебные крошки».

Далее во вкладке ресурсы были созданы еще несколько документов: «Ремонт коттеджей», «Ремонт офисов», «Дизайн-проект», «О компании» c вложенными страницами «Почему мы» и «О нас в цифрах», «Портфолио», «Отзывы» и «Контакты». Им были назначены соответствующие шаблоны.

Структура страниц веб-сайта представлена на рисунке 15.

Рисунок 15 – Структура ресурсов web-сайта

Следующим этапом разработки было наполнение контентом страниц web-сайта. Для реализации некоторых функций на web-сайте использовались следующее приложения:

• MIGX (MultiItemsGridtv for MODX) – приложение для организации дополнительных полей (TV), созданный для того чтобы объединить несколько разных TV в один. Такая система объединенных полей очень сильно упрощает администрирование сайта, когда есть необходимость заполнять много информации. Поля ввода в MIGX могут быть всеми стандартными типами: текст, цифры, выпадающие списки, изображения, chekbox и прочее.

Приложение дает возможность пользователю гибко произвести настройку структуры и набор используемых полей ввода в рамках одного MIGX-поля. Приложение устанавливается со сниппетом getImageList, который позволяет быстро вывести данные из заполненного TV MIGX [18];

AjaxForm – служит для отправки любых форм через ajax;

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

---

Управление приложениями производилось с помощью панели «Приложения» расположенной в верхней части панели управления CMS MODx. Панель «Приложения» представлена на рисунке 16.

Рисунок 16 – Панель «Приложения»

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

Для классификации чанков и TV полей во вкладке «Элементы» – «Категории» были созданы следующие категории:

Template – для повторяющихся блоков исходного кода встречающихся во всех шаблонах;

• Выполненные работы – для блока с галереей; • Контент – для блоков с контентом на страницах; • Карусели – для блоков со слайдером.

Система управления контентом MODx является SEO-ориентированной. Для обозначения ключевых слов использовались поля «Описание» и «Аннотация». Создание ключевых слов для web-сайта представлено на рисунке 17.

Рисунок 17 – Ключевые слова

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

При настройке безопасности конечной целью является дать каждому пользователю соответвующий набор привилегий – разрешить ему совершать определенные действия в системе. Действия могут совершаться над различными объектами: страницами (resource), контекстами (context), чанками (chunk), переменными шаблонов (TV) и так далее. Сами действия могут быть очень разными, в простейшем случае это создание, просмотр, редактирование и удаление. Таким образом, задача настройки безопасности сводится к заданию отношений между пользователями, объектами и привилегиями.

В CMS MODx реализована возможность разграничения прав пользователей [15]. В режиме администратора пользователю доступны все операции: создание, редактирование, настройка и удаление ресурсов;

• установка и удаление приложений;
• создание, редактирование, настройка и удаление шаблонов;
• настройка системы панели управления;
• настройка параметров сайта;
• создание, редактирование, настройка и удаление чанков.

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

Рисунок 18 – Панель настройки прав доступа

---

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

Рисунок 19 – Страница с описанием продукции

Страница «О компании» и вложенные страницы «Почему мы» и «О нас в цифрах» содержат обращение директора компании к посетителям ресурса, а так же общую информацию компании, включают в себя элементы текста, изображения и таблицы. Страница «О компании» представлена на рисунке 20.

Рисунок 20 – Страница «О компании»

Страница «Портфолио» содержит галерею с альбомами изображений готовых проектов с краткой информацией. Страница «Портфолио» представлена на рисунке 21.

Рисунок 21 – Страница «Портфолио»

Страница «Контакты» содержит полную контактную информацию о компании, реквизиты и карту с месторасположением компании. Страница с контактной информацией, реквизитами и схемой проезда представлена на рисунке 22.

Рисунок 22 – Страница «Контакты»

С помощью формы обратно связи можно запросить звонок от менеджера компании. Форма обратной связи представлена на рисунке 23.

Рисунок 23 – Форма обратной связи

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

Рисунок 24 – «Подвал» web-сайта

2.4 Тестирование веб-сайта

Тестирование web-сайта заказчиком проводилось по следующим параметрам:

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

Так же заказчиком была проведена проверка работоспособности webсайта в разных web-браузерах таких как: Google Chrome, Mozilla Firefox, Safari, 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, DELETE, 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 МБ.

Рекомендуемые системные требования:

• веб-сервер – Apache 2.2.x или IIS 7.0;
• базы данных – MySQL 5.1.x (последний релиз). Кодировка таблиц по умолчанию – UTF-8 BOM. Плюс должны быть разрешены команды SELECT, 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 или выше.

ЗАКЛЮЧЕНИЕ

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

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

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

---