Коммерческий ресурс для CMS 'MODX'

Выпускная квалификационная работа

На тему: "Коммерческий ресурс для CMS "MODX""

Содержание

Введение

. Теория разработки интернет-магазина

.1 Описание предметной области

.2 Понятие интернет магазин

.3 Сравнение систем управления контентом

.4 Обзор системы управления содержимым «MODX»

.5 Средства создания интернет-магазина

. Разработка интернет-магазина

.1 Составление технического задания

.2 Анализ сайтов конкурентов

.3 Установка локального сервера - «OpenServer»

.4 Установка CMS «MODX» на локальный сервер

.5 Разработка сайта

.6 Структура одной из страниц сайта

. Развертывание сайта на хостинге

.1 Регистрация хостинга и домена

.2 Перенос локального сайта на хостинг

Заключение

Список используемых источников

Приложения

Введение

Интернет-торговля - это отрасль которая развивается очень быстропо всему мира. Благодаря тому, что высокоскоростной доступ в интернет получил активное распространение на быстроразвивающихся рынках, таких стран как, Индия, Бразилия, Китай и Россия, перед компаниями,которые занимаются розничной торговлей, открывается совершенно новый рынок интернет-торговли. За последние несколько лет в России этот сектор начал очень активное развитие и выходит на один уровень, со странами Западной Европы или Северной Америки.

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

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

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

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

Объектом исследования дипломной работы являются - создание интернет-магазина.

Предметом исследования дипломной работы является - интернет-проект «Интернет-магазин цветочного салона «Знаки внимания»».

Целью дипломной работы является разработка интернет-магазина для цветочного салона - «Знаки внимания» с использованиемCMS «MODX».

Для достижения поставленной цели в работе ставятся следующие задачи:

.        Сравнить системы управления контентом.

.        Составить техническое задание на работу.

.        Проанализировать конкурентные сайты цветочных салонов в городе Благовещенск.

.        Установить и настроить систему управления контентом и ее компоненты для работы магазина на локальном веб-сервере.

.        Разработать прототип сайта.

.        Разработать макет сайта.

.        Сверстатьшаблон с макета сайта.

.        Перенести готовый проект на хостинг.

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

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

Во второй главе рассматриваются этапы разработки магазина, в частности: составление технического задания на разработку сайта, анализ сайтов конкурентов, установка и настройка CMS «MODX» и его компонентов на локальном веб-сервере,разработка прототипа сайта, разработка макета сайта, верстка с макета, приводится структура одной из страниц.

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

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

1. Теория разработки интернет-магазина

1.1 Описание предметной области

Интернет-магазин - сайт, торгующий товарами посредством сети Интернет. Позволяет пользователям онлайн, в своём браузере, сформировать заказ на покупку, выбрать способ оплаты и доставки заказа.

Интернет-магазин обладает следующими преимуществами по сравнению с обычным магазином:

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

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

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

интернет магазин не имеет ограничений на площадь. Можно разместить сколь угодно много товаров или описать любое количество услуг;

срок и стоимость создания Интернет-магазина намного ниже, чем обычного магазина;

для создания Интернет-магазина не требуется получения различных разрешений и лицензий. Его не будет проверять пожарный инспектор, санэпидемстанция и другие службы.

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

1.2 Понятие интернет магазин

Интернет-магазин (online shop) - это магазин, «витрина» которого расположена в сети Интернет и который дает возможность заказать товар через Интернет. На сайте магазина обычно представлен подробный каталог товаров с ценами, на основе которого пользователь формирует свой заказ. Заказывая товары в интернет-магазине, вы можете получать их по почте или с курьером, а оплачивать - непосредственно при получении или также через Интернет, например, при помощи систем «Webmoney» или «Яндекс.Деньги».

Оплата товара непосредственно при получении практикуется российскими интернет-магазинами, поскольку, на данный момент совершенно удобного, общедоступного и распространенного средства для онлайн-платежей в России пока нет и часто покупателю удобнее заплатить наличными непосредственно в момент доставки. Западные интернет-магазины (online shops), напротив, в основном принимают оплату именно через Интернет и для совершения покупки в таком магазине вам нужно иметь кредитную карточку. Также на Западе более распространены платежные интернет системы, например, «PayPal» и «e-gold». Для пользования интернет-магазинами, как правило, вам потребуется зарегистрироваться. [1]

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

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

.        Электронная витрина товаров.

.        Пользовательский поиск по сайту.

.        Корзина товаров.

.        Форма заказа.

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

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

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

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

1.3 Сравнение систем управления контентом

Общие сведения. Продавать и покупать товары и услуги через Интернет для многих стало гораздо удобней и выгодней, чем ходить в обычный магазин. Количество интернет-магазинов постоянно растет, но не все они могут похвастаться качественным дизайном и безопасностью, предприниматели понимают, что эти параметры имеют большое значение. Именно поэтому выбор CMS магазина так важен.(Content Management System) - система управления содержимым (контентом) - компьютерная программа или информационная система, которая используется для организации и обеспечения процесса по совместному созданию, управлению и редактированию содержимого сайта.[2], может быть очень простой: понятные детали, без сложных элементов, их относительно не много, запутаться достаточно трудно, а может быть и довольно сложной: масса различных деталей, которые соединить во что-то одно не так просто.

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

Далее будут рассмотрены несколько open-sourceCMS (бесплатных платформ с открытым исходным кодом). В данном сравнении будут как простые, так и сложные системы. Главная задача - определить платформу для разработки сайта.

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

По данным аналитического портала рынка веб-разработок - «CMSmagazine», на данный момент первые места из списка бесплатных систем управления контентом занимают: «Wordpress», «Joomla», «MODX», «Drupal», «OpenCart» (Рисунок 1).

Рисунок 1. Рейтинг систем управления контентом

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

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

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

«WordPress» - система управления содержимым с открытым исходным кодом; написана на PHP; сервер базы данных - MySQL; выпущена под лицензией GNU GPL версии 2. Сфера применения - от блогов до достаточно сложных новостных ресурсов и интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать проекты широкой функциональной сложности. [3]

Большую популярность данная CMS имеет в США, на ней построено шестидесяти миллионов сайтов, встроенный функционал системы достаточно ограничен, но за счет большого числа пакетов дополнений, позволяет создавать на этом «движке» не только обычные блоги, но и серьезные проекты, такие как интернет-магазины и новостные порталы.

Зачастую WordPress используется именно для разработки новостных порталов и интернет магазинов, для создания интернет магазина необходимы дополнительное расширение - WooComerce, это один из самых популярных модулей-расширений интернет-магазина, большинство магазинов на данной CMS используют именно этот модуль.

У WordPress есть особенность отличающая его от многих других современных CMS и фреймворков, он не поддерживает паттернMVC (ModelViewController), в то время как почтивсе остальные поддерживают. Такая реализация была сделана для совместимости с предыдущими версиями «движка», но не так давно появились пакеты расширений, такие как: «WPMVC», «TinaMVC», делающие для разработчиков доступной поддержку MVC, но даже с расширениями WordPress не является полноценным фреймворком, но может послужить отличной альтернативой.

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

Основные плюсы данной системы управления контентом:

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

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

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

Как и любая система управления контента «WordPress», не лишена недостатков, рассмотрим основные:

.        Низкая безопасность. Это самый основной минус данной CMS, который может стать ключевым факторов выбора другой системы управления контентом. Вирусный код зачастую может присутствовать даже, в пакетах расширений которые проходят модерацию в магазине плагинов «WordPress», это обусловлено, слишком высокой популярностью «движка», и многие могут воспользоваться уязвимостями системы, ради собственной выгоды.

.        Медленная работа и высокая нагрузка. Изначально после установки на хостинг, система работает быстро, но стоит установить несколько дополнений из магазина плагинов, и это очень сильно отразится на быстродействии, в пример можно привести плагин интернет магазина - «WooCommerce», после установки которого, загрузка страниц, как в административной так и в пользовательской частях сайта, заметно снижается, также, помимо медленной работы, на хостинг возникает большая нагрузка, и он не сможет ответить на запросы всех клиентов, если их будет слишком много.

.        Предвзятость поисковых систем. Иногда сайты на «WordPress», индексируются на много дольше, чем на других CMS. Причина так же связана с высокой популярностью системы. Тысячи сайтов, создаются на «WordPress» ежедневно, все сайты проверяются на плагиат, и сайты-копии отбрасываются на последние позиции, бывает так, что и сайты с нормальным контентом, так же попадают в конец поиска, приходится ждать некоторое время для перепроверки данных.

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

«Joomla!» - система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL или другие стандартные промышленные реляционные СУБД. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.[4]

«Joomla!» - Является второй по популярности CMS в мире, она также полностью бесплатная, как и «WordPress», главное отличие этих двух систем что с «Joomla!»более труднее справиться. Установка, настройка и наполнение контентом, отличается от того же «WordPress».

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

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

Ранее говорилось о том, что с «Joomla!» более труднее справиться, это связано с тем, что к созданию шаблонов и настройке модулей, тут другой подход, который отличается от «WordPress». Если в «WordPress», достаточно установить шаблон и включить необходимые модули в администраторской панели, то в «Joomla!», чтобы совершить все эти действия, каждому модулю необходимо в специальном конфигурационном файле прописать его позицию на странице, и сделать вызов уже на нужной странице в шаблоне, такой подход обусловлен тем, что CMS работает на основе шаблона проектирования MVC, именно поэтому данная система более трудная для освоения в отличии от более простого конкурента.

Рассмотрим основные плюсы CMS «Joomla!»:

.        Широкие возможно. «Joomla!», позволяет разрабатывать от одностраничных сайтов визиток до социальных сетей, все зависит лишь от навыков разработчика.

.        Большое количество расширений. Большой выбор компонентов, плагинов, модулей в официальном магазине дополнении, в отличии от «WordPress», для «Joomla!» больше платных дополнений такими модулями в основном являются дополнения для интернет-магазинов или системы для приема оплаты через платежного агрегатора на сайте.

.        Поддержка современных технологий. По умолчанию при первичной установке всегда загружается компонент, который изначально делает сайт мобильно-адаптирован и поддерживает стандартный интерфейс «Bootstrap-3», данное решение позволяет делать сайты по самым современным тенденциям веб-дизайна.

Рассмотрим основные минусы CMS «Joomla!»:

1.      SEO неадаптированность. Система не адаптирована для продвижения в поисковых системах, можно привести этому простой пример, для статей отсутствует тег <title>, а заголовок статей всегда использует тег <h2>, вместо <h1>. Для развернутой поддержки SEO приходится использовать модули сторонних разработчиков.

.        Сложности в изучении CMS. «Joomla!» не из самых простых для понимая CMS, структуру шаблонов и модулей работая с системой в первый раз понять не так просто.

.        Частые обновления версий. Обычно разработчики всегда улучшают свой продукт закрывая уязвимости и улучшая какие-либо системы, но от этого определенно могут страдать некоторые пользователи данной системы, в связи с очень частыми обновлениями сборок, очень часто разработчики сторонних модулей и дополнений не успевают обновить версии своих продуктов, страдают от этого в конечном итоге пользователи этих модулей. Многие модули «Joomla!» не поддерживают обратной совместимости предыдущих версий системы, это связанно с тем, что многие модули используют определенные системные функции CMS, а с обновлениями часто эти функции могут меняться, именно поэтому возникает проблема совместимости дополнений.

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

MODX - это бесплатная профессиональная система управления содержимым (CMS) и фреймворк для веб-приложений, предназначенная для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым) сайтов.распространяется бесплатно по лицензии GPL с открытым исходным программным кодом (Open Source). [9]

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

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

Данная систем отличается от многих других CMS тем, что она изначально является CMS/CMF (Content Management Framework), это означает что данная система поддерживает любые доработки на лету и доработать систему под свои нужды разработчику не составит труда, у таких решений намного больше плюсов чем минусов.

CMS «MODX», также как и все остальные поддерживает дополнительные плагины и расширения, помимо официального стандартного репозитория можно назначить и сторонние. В репозитории в наличии большое количество дополнений для системы, например, система управления интернет-магазином - «Minishop-2» которая адаптирована для России, а также множество других дополнений, которые могут превратить сайт в абсолютно любую платформу.

Рассмотрим основные плюсы CMS «MODX»:

.        Высокая безопасность. CMS «MODX» является одной из самых защищенных систем управления контентом.

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

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

Рассмотрим минусы CMS «MODX»:

1.      Время на обучение. Для разработки сложных и функциональных решений потребуется время на изучениеAPI, также, так как администраторская панель полностью использует «JavaScript» в своей основе, придется дополнительно изучить функции «ExtJS» - фреймворк, который используется для интерфейса «MODX».

.        Более низкая популярность. Несмотря на то, что система стоит на третьем месте рейтинга популярных систем управления контентом, разработчиков, использующих эту системой не так много, как для «WordPress» и «Joomla!», соответственно, цены на услуги таких разработчиков будут выше.

.        Отсутствие шаблонов. Для системы «MODX», нет шаблонов как таковых, так-как каждый проект на этой системе в некотором роде уникальный, нет общего стандарта для всех проектов. Это может стать серьезной проблемой для новичков в веб-разработке, но для профессиональных разработчиков это является плюсом, что никаких ограничивающих рамок нет.

Исходя из плюсов и минусов CMS «MODX», можно сделать вывод о том, что данная система подходит абсолютно для любых проектов, как очень сложных веб-приложений, так и для одностраничных сайтов, неоспоримым преимуществом является возможность проектирования своей CMS если существующий функционал не подходит под задачи пользователя.

«Drupal» - система управления содержимым (CMS), используемая также как каркас для веб-приложений (CMF), написанная на языке PHP и использующая в качестве хранилища данных реляционную базу данных (поддерживаются MySQL, PostgreSQL и другие). Drupal является свободным программным обеспечением, защищённым лицензией GPL, и развивается усилиями энтузиастов со всего мира.[6]

«Drupal» - это CMS совершенно другого уровня. Если «Joomla!» и «WordPress» - простые, но ограниченные решение, то «Drupal» - платформа, которая позволяет воплотить практически любой ваш замысел, но которая требует определенных навыков. Интернет-магазины, соцсети, крупные корпоративные сайты - все это и многое другое не первый год успешно создается на «Drupal».

Данная система используется для построения самых разнообразных средств массовой информации: форумов, блогов, новостных сайтов, информационных архивов. Причем функциональность ее по желанию увеличивается за счет дополнительных расширений - модулей. Наиболее значимые функции заложены в исходном пакете. [7]

Если «WordPress» можно сравнить с «Joomla!», то «Drupal» можно сравнить с «MODX». Обе системы имеют высокую безопасность, низкое потребление ресурсов системы, а также они обе могут масштабироваться ввиду того, что обе системы являются CMF. «Drupal», очень часто выбирают в качестве платформы для сайтов государственных структур, например, «Росприроднадзор», «Правительство Новосибирской области», «Молодая гвардия Единой России» и другие.

Рассмотрим основные плюсы CMS «Drupal»:

.        Для опытных разработчиков. CMS «Drupal» позиционируется как система для продвинутых разработчиков, которые хорошо знакомы с программированием, именно этот фактор влияет на выбор профессиональных программистов, этой платформы.

.        Высокая безопасность. Безопасность этой системы хорошо проработана, именно по этой причине CMS «Drupal» часто выбирают для разработки сайтов государственных структур.

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

Рассмотрим основные недостатки CMS «Drupal»:

.        Большое количество недоработок. Система имеет просто огромное количество недоработок, разработчики не успевают их постоянно исправлять в данных момент в баг-трекере системы насчитывается около трех тысяч недоработок. Ни одна из рассматриваемых в этом сравнении систем не имеет столько ошибок и недочетов, именно поэтому разработчики для «Drupal» оказывают самые дорогие услуги по доработке CMS и модулей для нее.

.        Не дружественный интерфейс. Так как система рассчитана на профессиональных разработчиков, интерфейс заметно отстает от рассматриваемых ранее CMS, тем не менее, c версии «Drupal 8», интерфейс стал поддерживать мобильную адаптацию.

.        Нет готовых решений. Готовых сайтов/шаблонов практически нет, так как в основном придется дорабатывать, как CMS, так и модули для нее.

Исходя из плюсов и минусов CMS «Dupal», можно сделать вывод о том, что данная система подходит для опытных разработчиков, готовых очень долго дорабатывать данную CMS и ее плагины, она подходит для всех проектов высокой сложности и с высокой нагрузкой, интернет-магазины, информационные порталы, социальные сети, итд. Учитывая то, что данная система насчитывает большое количество недоработок и сложностей в понимании архитектуры, а также не очень дружелюбна к конечному пользователю, принимая во внимание эти факторы, система найдет своего пользователя, только в лице опытного разработчика.

«OpenCart» - система управления контентом, которая специально ориентирована на создание интернет-магазинов. Является свободным программным обеспечением, распространяемым по лицензии GNU General Public License v3.[8]

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

Система стала достаточно популярной в России, многие компании строят на данной платформе свои магазины, также разработчики программных продуктов развивают в Российском регионе свои программные решения, которые позволяют упростить жизнь магазинов, при работе с товарами, так можно отметить, что для OpenCart, достаточно много решений для интеграции с 1C-предприятие, самого разного ценового сегмента, все зависит только от функциональности. Стоит отметить, что цены на плагины интеграций с различными CRM системами, бухгалтерскими системами, и системами учета, стоят на порядок выше чем в конкурентных системах рассматриваемых в этом рейтинге, конечно больше всего это связанно с тем, что разработчиков под «OpenCart» и стандарт «CommerceML», не так много в русскоязычном сегменте.

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

Рассмотрим основные плюсы CMS «OpenCart»:

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

.        Объемная функциональность. Определенно так как система ориентирована только на интернет-магазины, ее функционал статистики, и работы с клиентами намного шире в отличии от других CMS, это касается не только отслеживания и мониторинга заказов, но также возможность организации маркетинговых акций, работа с сертификатами и скидками, базовую интеграцию с некоторыми системами оплаты, такими как: «LiqPay», «PayPal».

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

Рассмотрим основные минусы CMS «OpenCart»:

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

.        Проблемы с индексацией и SEO. Для CMS «OpenCart», остро стоит также проблема индексации в поисковых системах, особенно это касается российских поисковых система, таких как «Яндекс», «Mail.ru», «Rambler». Поисковые системы отказываются индексировать сайты на «OpenCart», ссылаясь на то, что, имеется большое количество дублей страниц, эта проблема решается как дополнительными модулями, так и исправлением кода, но это не все проблемы работы с поисковыми системами, также имеется некорректный вид ссылок URL, которые изначально не являются ЧПУ (Человекопонятный URL), и из за них сайт может терять позиции в поисковых система так как в приоритете стоят сайты с использованием ЧПУ в ссылках, решаться проблема также может с помощью модулей.

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

Исходя из плюсов и минусов CMS «OpenCart», можно сделать вывод о том, что данная система отлично подходит для магазинов средних размеров, имеет отличные инструменты, для работы с покупателями и товарами, также система имеет низкий порог вхождения для разработчиков, поэтому она может потенциально привлечь, начинающих веб-мастеров. Учитывая, что данная CMS имеет жесткое направление только на работу с интернет-магазинами, система не подойдет крупным магазинам, которым для своего сайта нужен разнообразный контент, и возможность смены функционала на лету.

Составив рейтинг и проанализировав все плюсы и минусы самых популярных систем управления контентом, можно сказать о том, что каждая из систем имеет свои, определенные плюсы из-за которых можно выбрать ее для дальнейшей работы и доработать ее под свои нужды. Но если взять во внимание тот факт, что для многих магазинов через некоторое время нужно масштабироваться и постоянно их дорабатывать, более удачными вариантами выбора CMS будут: CMS «Drupal» и CMS «MODX», основными критериями выбора этих систем стали, масштабируемость, безопасность, многопрофильность. Для некоторых компаний, может быть недостаточно одного интернет-магазина. на данных платформах возможно построить несколько связанных сайтов, причем сайты могут быть совершенно разной направленности. Для интернет-магазинов, более актуальны, будут форумы и службы поддержи пользователей. Используя данные системы, можно воплотить любое техническое решение.Конечно необходимо провести сравнение всех систем на общие признаки, относящиеся ко всем системам управления контентом рассмотренные в данном рейтинге.

Таблица 1. Сравнение систем управления контентом

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

1.4 Обзор системы управления содержимым «MODX»

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

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

xPDO - это легковесная ORB-библиотека, которая работает на PHP 5.1 и выше, предоставляя преимущества нового стандарта доступа к базам данных в PHP 5.1 и выше - PDO. Она реализует очень простой, но эффективный паттерн Active Record для доступа к данным.xPDO позволяет использовать единый интерфейс для связи с различными типами баз данных. На данный момент доступны коннекторы для MySQL и SQLite.

Для создания новых таблиц в БД, используются специальные файлы схем, описанные какxPDOобъекты, для добавления новых полей в таблицах.

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

Ресурс - этонекоторый объект, который представляет страницу в MODX. Всего в MODX насчитывается 4 различных типа ресурсов: документы (documents), ссылки (weblinks), символические ссылки (symlinks) и статические ресурсы (Static Resources). По умолчанию ресурс имеет тип "Документ". Каждому ресурсу можно назначить определенный шаблон вывода.

Шаблон - это элемент MODX, представляющий собой заготовку, на основании которой может осуществляться вывод любого количества ресурсов. Для того чтобы шаблон использовался для вывода некоторого ресурса, он (шаблон) должен быть связан с ним (ресурсом).

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

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

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

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

Для вызова почти всех перечисленных выше элементов, необходимо использовать - теги.

Теги - это основные рабочие элементы MODX для пользователя сайта.

Указывая теги на странице, вы можете вызвать какой-то кусок HTML или PHP кода, текст из словаря, или переменные документа.

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

Для элементов и полей:

Шаблоны - вызываются непосредственно из ресурса, не имеют тега для вызова.

Поля ресурсов - вызываются специальным тегом [[*field]], так может быть вызван, например, заголовок страницы [[*pagetitle]].

Чанки - вызываются специальным тегом [[$chunk]], например так можно вызывать участок с htmlкодом шапки сайта [[$header]].

Сниппеты - вызывается просто без специальных знаков, в квадратных скобках [[snippet]].

Плагины - вызываются при наступлении определенного события, не имеют тега вызова.

Дополнительные поля - вызываются точно также как поля ресурсов[[*field]].

Для вывода контента:

Плейсхолдеры - вызывается как поле из сниппета, вызывается тегом [[+placeholder]], например, можно взывать id пользователя [[+modx.user.id]].

Ссылки - вызывается специальным тегом [[~link]], может использоваться, например, как ссылка на определенную страницу с ресурсом [[~1]].

Системные настройки - вызывается тегом [[++system_setting]], например, можно узнать idназначенной главной страницы [[++site_start]].

Языковые теги - для вызова языкового тега используется данная конструкция [[%language_string_key]].

Для системных значений парсера MODX:

Выводит время, потраченное на запросы к базе данных - [^qt^]

Выводит количество запросов к базе данных - [^q^]

Выводит время, потраченное на работу PHP скриптов - [^p^]

Выводит общее время, потраченное на генерацию страницы -[^t^]

Выводит источник содержимого (база данных или кэш) - [^s^]

1.5 Средства создания интернет-магазина

Локальный сервер «OpenServer» - это портативная серверная платформа и программная среда, созданная специально для веб-разработчиков с учётом их рекомендаций и пожеланий распространяется по лицензии -GNU GPL.

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

Хотя изначально программные продукты, входящие в состав комплекса, не разрабатывались специально для работы друг с другом, такая связка стала весьма популярной среди пользователей Windows, в первую очередь из-за того, что они получали бесплатный комплекс программ с надежностью на уровне Linux серверов.[9]

«OpenServer» - комплексное решения для профессиональных веб мастеров, программа поставляется в нескольких комплектациях, от стандартного набора основных программ серверного окружения, до расширенного, в который входят как программы для редактирования графики, так и система контроля версия - «Git».

Основные особенности пакета «OpenServer»:

.        Не требуется установка (Портативность).

.        Возможность работы с USB накопителя.

.        Одновременная работа с другими серверами «XAMP»/«Denwer».

.        Работа на внешнем IP.

.        Защита сервера от внешнего доступа.

Технические требования «OpenServer»:

Windows (32/64 бит): Windows 7 SP1 и более новые версии;

Обеспечена частичная поддержка WindowsXPSP3 и WindowsVista; Минимальные аппаратные требования: 500 МБ свободной RAM и 3 ГБ свободного места на HDD; Требуется наличие MicrosoftVisualC++ 2005-2015.[9]

В настоящий момент «OpenServer» является самым актуальным пакетом веб-окружения для разработки сайтов, для него выходят частые обновления, где все компоненты такие как Apach, Mysql, PHP, постоянно получают самые последние версии, ближайший конкурент «Denwer», очень давно остановился на старых версиях программного обеспечения, после чего и был разработан «OpenServer».

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

Рисунок 2. Интерфейс консоли локального веб-сервера «OpenServer»

Редактор кода SublimeText 3 - кроспротформенный проприетарный текстовый редактор. Поддерживает плагины на языке программирования «Python», распространяется как платное программное обеспечение, разработчик позволяет использовать его бесплатно, однако программа уведомляет о необходимости приобретения лицензии.[10]

«Sublime Text 3» - на данный момент является одним из самых популярных текстовых редакторов, используемых для веб-разработки, чаще всего он используется для редактирования HTML кода, но также поддерживает синтаксис большого количества других языков, таких как, CSS, PHP, Java, C++, Ruby и др.

Основные причины выбрать «Sublimetext 3»:

.        Быстрая реакция на события.

2.      Автозакрытие тегов, автоподставновка тегов.

.        22 цветовые схемы.

.        Поддержка синтаксиса 45 языков.

.        Использование плагинов различной направленности.

.        Быстрая индексация кода.

.        Гибкость настроек.

В связи с тем, что рынок сред разработки и редакторов кода постоянно развивается, появились такие амбициозные проекты, как, «VisualStudioCode» и «Brackets» они могут составить серьезную конкуренцию «Sublimetext 3» в будущем, но на данный момент, проекты находятся на начальной стадии, и только не давно вышли из статуса бета версии.

Внешний вид «Sublime» достаточно приятен, есть несколько цветовых схем в стандартной поставке, в колонке слева отображаются проекты, справа - что-то вроде эскиза кода (миникарта). Вверху - панель инструментов и вкладки, внизу - информативная полоса, сообщающая о количестве строк, определяющая язык программирования, количество пробелов в отступе, а также кодировку документа, если вы пожелаете это настроить (Рисунок 3).[11]

Рисунок 3. Интерфейс программы «Sublimetext 3»

Помимо стандартных функций подсветки кода, и авто-дополнения, программа также поддерживает сторонние плагины, устанавливаемые с помощью менеджера пакетов. Например, по умолчанию в «Sublimetext 3» не поддерживается синтаксис препроцессора - «SCSS», он является компилируемым, плагины позволяет исправить данную ситуацию и корректно поддерживать подсветку, аналогичная ситуация с расширенным синтаксисом языка «JavaScript». Помимо работы с синтаксисом, поддерживается работа множества сервисов, такими как Git-репозитории, работа на прямую с хостингом сайтов, и др.

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

Язык гипертектовой разметки HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991-1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов (размечаемых «тегами»), служащих для создания относительно простых, но красиво оформленных документов. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащенностью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако, современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы сейчас читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.[12](HyperText Markup Language, Язык гипертекстовой разметки) - язык, используемый для создания документов веб-страниц. В настоящее время используется несколько версий HTML: прочно утвердился HTML 4.01, а более новая и мощная, черновая спецификация HTML5 обретает популярность и получает все большую поддержку в браузерах. У этих двух версий есть более узкая реализация, называемая XHTML (extensible HTML, расширяемый HTML). Это, по существу, тот же самый язык HTML с более строгими правилами синтаксиса.- язык не программирования, а разметки, он создает систему для идентификации и описания различных компонентов документа, таких как заголовки, абзацы и списки. Разметка обозначает скрытую структуру документа (можно сказать, что это подробная машинно- считываемая схема). Чтобы написать HTML-код, вам не нужны навыки программирования - только терпение.[1; с. 27]

Для работы с языком гипертекстовой разметки, не требуется специализированных программ, достаточно обычного блокнота, но для профессиональной работы с документами, лучше всего использовать специализированные инструменты, например, редактор кода «Sublimetext 3», который был рассмотрен ранее, отличие будет состоять лишь в том, что в профессиональной среде разработки, код подсвечивается и дополняется, в отличии от стандартного приложения - блокнот.

Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют расширение «html» или «htm»), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые браузерами или интернет-обозревателями, обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, возможно, редактирования. Однако стоит помнить о том, что разные браузеры могут по-разному отображать информацию, в том числе и HTML код, для некоторых браузеров есть специальные дополнительные теги в оформлении кода, для корректного отображения.[1; с. 28]

Любой HTML документ состоит из обычного текста и разметочных тэгов. сайт хостинг домен локальный

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

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>. Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Контейнер <head> содержит информацию для браузеров и поисковых систем. Между парой тегов <body>...</body> хранится всё содержание web-страницы, которое отображается на экране монитора в окне браузера. Это может быть простой текст, списки, ссылки, изображения, таблицы и др.

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

CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) формальный язык описания внешнего вида html-документа.[14]- это широкий спектр технологий, который одобрен консорциумом WЗС и получил такое название, как «Web Стандарты». В 1990 г. возникла необходимость стандартизировать их в какие-то определенные единые правила, благодаря которым веб-дизайнеры и программисты проектировали бы сайты. Именно так и появились такие языки, как XHTML, HTML 4.01 и стандарт CSS.

В самом начале 1990 года, для того, чтобы отображать веб-страницы, разные браузеры обладали своими собственными стилями. Развитие HTML было очень быстрым и он был способен удовлетворять на тот момент все существовавшие потребности по оформлению информации, именно поэтому тогда и не получил широкого признания CSS.

И лишь Хокон Виум Ли в 1994 году предложил для HTML документов использование концепции «каскадные таблицы стилей». В то далекое время браузеры имели ограничение в функционале. А в 1990 году язык HTML, который создал Тим Бернерс-Ли, полагал сделать не визуальное, а структурное отображение документов.

Один из основателей Netscape, Марк Андреесен, в 1994 году 13 октября сообщил, что доступна для тестирования от Netscape Navigator первая версия. И за три дня до проведения тестирования, норвежский программист, сейчас он является сотрудником компании Opera Software, Хокон Виум Ли публикует черновой вариант CSS. На сегодняшний день он имеет слишком мало схожего с принятыми современными стандартами, но именно тогда был заложен общий смысл.

Самым первым, кто откликнулся на такую идею, был Берт Бос. В те времена он и создал новый браузер Argo. В визуальном оформлении была возможность использовать не только язык CSS, и консорциуму WЗС предоставили около 9 стилей языков.

В ноябре 1994 года в Чикаго на Веб-конференции, как и планировалось, был предоставлен первый черновик CSS. Дебаты различного политического характера и разрешение некоторых технических вопросов продолжались в течение двух лет, но 1996 года 17 декабря W3C официально зарекомендовал CSS1.

Уровень развития первый (CSS1).

На данном этапе имеется возможность задавать гарнитуру и размер шрифта, а еще изменять его стиль: обычный, курсив или полужирный. Благодаря спецификации имеется возможность определять рамки, фоны, цвета текста и другие элементы страницы. Можно задавать расстояние между словами, межстрочные отступы и межсимвольный интервал. А также производить выравнивание текста, таблиц, изображений. Имеются свойства внутренних и внешних отступов и рамок, ширины, высоты и блоков. А также входили в данную спецификацию ограниченные средства по позиционированию различных элементов, например, clear и float.

Самый первый браузер для использования являлся Microsoft Internet Explorer 3. Вышел 1996 года в августе, он то и поддерживал новый принятый стандарт. Microsoft Internet Explorer 3 понимает отлично все свойства текста, шрифта, фона, цвета, но использование блочной модели происходило лишь частично.

Уровень развития второй(CSS2).

Рекомендация от консорциума W3C, которую приняли 1998 году 12 мая. Она основана на CSS1, а также сохранила обратную совместимость с добавлением некоторых функций, а именно:

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

.        Для разных носителей возможность устанавливать разными стилями.

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

.        Позволяет устанавливать на нечетных и четных страницах во время печати различные элементы.

.        Расширился механизм селекторов.

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

На данный момент W3C не поддерживает CSS2 и настоятельно рекомендует применять CSS2.1.

Уровень второй, ревизия первая (CSS2.1).

Рекомендация принята 2011 года 7 июня. Она основывается на CSS.2. Исправлены ошибки и удалены некоторые функции.

Уровень третий (CSS3).

Очень сильно расширены функции. Введены нововведения, начиная от мелочей, заканчивая трансформацией, а также введение новых переменных. [15]

В то время как HTML используется, чтобы описать содержимое вебстраницы, именно каскадные таблицы стилей (Cascading Style Sheets, CSS) влияют на то, как выглядит контент. Говоря о веб-дизайне, способ, которым представлена страница, известен как ее представление. Это означает, что шрифтами, цветами, фоновыми изображениями, интервалами между строками, макетом страницы и прочим... управляют CSS. С помощью новейшей версии (CSS3) вы можете добавлять на страницу даже специальные эффекты и простую анимацию.

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

Таблицы стилей - отличный инструмент, позволяющий автоматизировать процесс разработки, потому что вы можете производить изменения, относящиеся ко всем страницам сайта, редактируя один-единственный документ таблицы стилей. Они в некоторой степени поддерживаются всеми современными браузерами.[13, c. 27]

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются - например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p. Так сделано в предположении, что обрамление всех-всех вложений в тег - менее тривиальная задача, чем задание одиночной рамки. А вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе, до тех пор, пока этому тегу не будет назначен свой цвет шрифта. Который, в свою очередь, будет теперь наследоваться всеми вложенными в него подэлементами, не распространяясь на элементы-соседи тега.

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

Чтобы разрешить такие конфликты, вводятся правила приоритета.

.        Наиболее низким приоритетом обладает стиль браузера;

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

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

.        Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;

.        Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;

.        Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей.

.        И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.

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

Фреймворк CSS - «Bootstrap 3» - представляет собой свободный фреймворк интерфейсов для быстрой и простой Web разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном» - сайты, которые одинаково хорошо выглядят на всех типах устройств, от небольших телефонов до настольных компьютеров.[16, с. 6]был разработан Марком Отто и Джейкобом Торнтон для Twitter, и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.

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

Табличная система Bootstrap, позволяет легко манипулировать пространством выделяемых колонок под секции, всего в одной строке может быть до 12 колонок, для разных разрешений экрана доступны для использования префиксы, которые определят для какого экрана будет назначено определенное количество столбцов (Рисунок 4).

Для разметки блоков используются разное количество колонок в одной строке, так например для того чтобы разделить страницу на две части при этом должны использоваться все ячейки, в данном случае, деление будет происходить на 8 и 4, что поделит страницу на 2 части, где первая часть будет больше второй, при этом в примере указывается размер - md ,что означает что верстка делается для среднего разрешения экрана, при этом помимо md, также существуют такие разрешения как, xs, sm, lg, что означает разрешение экрана по возрастанию.

1.      xs - для телефонов.

.        sm - для планшетов.

.        md - для обычных мониторов.

.        lg - для широкоформатных мониторов.

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

Рисунок 4. Разметка сетки «Bootstrap 3»

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

Язык программирования PHP (Hypertext Preprocessor) - это распространенный язык программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения Web-разработок и его код может внедряться непосредственно в HTML.[17]может все. Главная область применения PHP - написание скриптов, работающих на стороне сервера; таким образом, PHP способен выполнять все то, что выполняет любая другая программа CGI, например, обрабатывать данные форм, генерировать динамические страницы или отсылать и принимать cookies. Но PHP способен выполнять намного больше.

Существуют три основных области применения PHP:

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

.        Создание скриптов для выполнения в командной строке. Вы можете создать PHP-скрипт, способный запускаться без сервера или браузера. Все, что вам потребуется - парсер PHP. Такой способ использования PHP идеально подходит для скриптов, которые должны выполняться регулярно, например, с помощью cron (на платформах *nix или Linux) или с помощью планировщика задач (Task Scheduler) на платформах Windows. Эти скрипты также могут быть использованы в задачах простой обработки текстов. За дополнительной информацией обращайтесь к главе Использование PHP в среде командной строки.

.        Создание оконных приложений, выполняющихся на стороне клиента. Возможно, PHP является не самым лучшим языком для создания подобных приложений, но, если вы очень хорошо знаете PHP и хотели бы использовать некоторые его возможности в своих клиентских приложениях, вы можете использовать PHP-GTK для создания таких приложений. Подобным образом вы можете создавать и кроссплатформенные приложения.доступен для большинства операционных систем, включая Linux, многие модификации Unix (такие как HP-UX, Solaris и OpenBSD), Microsoft Windows, Mac OS X, RISC OS, и многие другие. Также в PHP включена поддержка большинства современных веб-серверов, таких как Apache, IIS и многих других. В принципе, подойдет любой веб-сервер, способный использовать бинарный файл FastCGI PHP, например, lighttpd или nginx. PHP может работать в качестве модуля или функционировать в качестве процессора CGI.

Таким образом, выбирая PHP, вы получаете свободу выбора операционной системы и веб-сервера. Более того, у вас появляется выбор между использованием процедурного или объектно-ориентированного программирования (ООП) или же их сочетания.способен генерировать не только HTML. Доступно формирование изображений, файлов PDF и даже роликов Flash (с использованием libswf и Ming), создаваемых «на лету». PHP также способен генерировать любые текстовые данные, такие, как XHTML и другие XML-файлы. PHP может осуществлять автоматическую генерацию таких файлов и сохранять их в файловой системе вашего сервера вместо того, чтобы отдавать клиенту, организуя, таким образом, серверный кэш для вашего динамического контента.

Одним из значительных преимуществ PHP является поддержка широкого круга баз данных. Создать скрипт, использующий базы данных, - невероятно просто. Можно воспользоваться расширением, специфичным для отдельной базы данных (таким как mysql) или использовать уровень абстракции от базы данных, такой как PDO, или подсоединиться к любой базе данных, поддерживающей Открытый Стандарт Соединения Баз Данных (ODBC), с помощью одноименного расширения ODBC. Для других баз данных, таких как CouchDB, можно воспользоваться cURL или сокетами.также поддерживает «общение» с другими сервисами через такие протоколы, как LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (на платформах Windows) и многих других. Кроме того, вы получаете возможность работать с сетевыми сокетами напрямую. PHP поддерживает стандарт обмена сложными структурами данных WDDX практически между всеми языками веб-программирования. Обращая внимание на взаимодействие между различными языками, следует упомянуть о поддержке объектов Java и возможности их использования в качестве объектов PHP.имеет много возможностей по обработке текста, включая регулярные выражения Perl (PCRE) и много других расширений и инструментов для обработки и доступа к XML документам. В PHP обработка XML-документов стандартизирована и происходит на базе мощной библиотеки libxml2, расширив возможности обработки XML добавлением новых расширений SimpleXML, XMLReader и XMLWriter.

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

Язык JavaScript - это клиентский язык web-программирования, который был создан в 1995 году, разработчиком Бренданом Айком.обычно применяется для манипулирования объектами в различных приложениях, но наибольшую популярность он приобрел как один из основных языков применяемых при создании сайтов (и как единственный клиентский язык web-программирования).

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

Интерпретатор языка JavaScript, является частью веб-браузера, когда веб браузер открывает страницу сатй, браузер создаёт объектную модель документов (DOM), интерпретатор JavaScript получает доступ к DOM и благодаря этому, вебмастера создавая различные скрипты (web-приложения) могут управлять и манипулировать объектами страницы (всеми тегами: абзацами, заголовками, таблицами, формами и т.д.).также как и языки HTML и CSS, принадлежит всему человечеству, им не владеет ни одна компания или персона. Однако само слово - «JavaScript», принадлежит компании Oracle Corporation и чтобы не иметь проблем с авторскими правами, ученые разрабатывающие данный язык в научных документах называют его ECMAscript.

В 1995 году компания Netscape, дала задание программисту Брендану Айку создать язык web-программирования, который можно было бы встраивать в HTML-документ и для работы с которым не нужен был web-server.

Вместе с Бренданом Айком в проекте участвовали и другие программисты:

Марк Андерссен (создал первый в мире браузер - Mosaic),

Билл Джой работник компании Sun (данная компания в 2010 году была куплена корпорацией Oracle).

В те далёкие времена, наиболее популярными языками программирования, были C и Java, поэтому при создании JavaScript, пытались делать так чтобы его синтаксис был на них немного похож.

Изначально язык JavaScript имел имя LiveScript, но ради популяризации языка (и в маркетинговых целях) его назвали JavaScript, что вызвало немало замешательств среди начинающих вебмастеров ибо языки Java и JavaScript абсолютно разные по отношению друг к другу (они лишь немного схожи синтаксически). Кстати сам язык Java принадлежит компании Sun.

Чтобы еще больше популяризировать язык JavaScript, его сделали открытым, общедоступным, а потом стандартизировали. Сам стандарт носит название ECMA-262, а имя языка JavaScript, в стандарте записывается как ECMAScript.

В 1996 г. компания Microsoft, на основе этого стандарта разработала свой язык сценариев и назвала его JScript.

Первые браузеры начали поддерживать JavaScript уже в 1996 году, это были: Netscape 2.0 и Internet Explorer 3.0

Характеристики JavaScript:

1.      Сценарный - при созданий программ, их ненужно компилировать (как например в языках Си, Си++, Паскаль или Бэйсик), просто создаёте скрипт-программу в текстовом редакторе, а интерпретатор JavaScript (который уже встроен в веб-браузер), потом этот скрипт обрабатывает и выполняет.

.        Клиентский - интерпретатор скриптов находится не на web-сервере (как например у серверных языков - PHP или Perl), а в веб-браузере, поэтому для создания и выполнения скриптов JavaScript, устанавливать веб-сервер не нужно, необходимы лишь текстовый редактор (например Блокнот или популярный нынче Sublime Text 3) и веб-браузер (например FireFox, Opera, IE или Chrome и т.д.).

.        Прототипно-ориентированный - JavaScript поддерживает создание и наследование объектов, однако классы в нём отсутствуют.

.        Динамическая типизация - в отличие от других языков программирования, таких как Си, Си++ или Паскаль, переменные в JavaScript во время исполнения программы, имеют возможность менять свой тип данных. Это происходит потому, что тип данных в JavaScript, присваивается не во время объявления переменной, а во время её инициализации.

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

.        Автоматическая очистка памяти - при исполнении программ, интерпретатор JavaScript самостоятельно очищает память от неиспользуемых элементов.

2.1 Составление технического задания

Для начала над проектом необходимо составить техническое задание.

Техническое задание - это документ, описывающий требование заказчика к конечному продукту.

В техническом задании представлена анкета заказчика, позволяющая более точно понять идею сайта (Приложение А).

Необходимо обратить внимание на то, что в данном разделе составляется только техническое задание, бриф в данном проекте отсутствует по той причине, что разработкой сайта занимается один человек, поэтому в нем нет необходимости.

2.2 Анализ сайтов конкурентов

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

Цветочный салон «Орхидея» - www.orhideya-flo.ru

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

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

Рисунок 4. Главная страница сайта цветочного салона «Орхидея»

Рисунок 5. Каталог сайта цветочного салона «Орхидея»

Цветочный салон «Диадема» - www.diadema-flowers.ru

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

Рисунок 6. Главная страница сайта цветочного салона «Диадема»

Цветочный салон «Белая роза» - www.belaya-roza.net

Сайт цветочного салона «Белая роза», представляет собой интернет-магазин и информационный блог. Дизайн сайта выполнен в минималистичном стиле, не имеет отвлекающих элементов, и позволяет быстро совершать покупки (Рисунок 7).

Рисунок 7. Главная страница сайта цветочного салона «Белая роза»

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

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

2.3 Установка локального сервера - «OpenServer»

Для разработки сайта, потребуется установка локального сервера, на котором будет происходить установка и конфигурация CMS «MODX». Для этого был выбран «OpenServer» в базовой редакции самой последней версии - 5.2.6, данная редакция не содержит никаких дополнительных элементов, кроме основного веб-окружения.

После запуска исполняемого файла установки, программа запросит папку распаковки (Рисунок 8).

Рисунок 8. Распаковка локального сервера «OpenServer»

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

При первом запуске сервера, будет запрошена информация о языке пользователя, и прислано уведомление о том, что данная программа первый раз запускается на данном компьютере, будет предложено установить пакет - «MicrosoftVisualC++ Runtime&Patches», однако от него можно отказаться.

Изначально при первом использовании у сервера настроены стандартные параметры, их необходимо скорректировать, для этого вызываем панель администрирования, и выбираем раздел «Модули», по умолчанию установлены: Apache 2.2, PHP 5.3. Для корректной работы всех функций, установим более новые версии данных обработчиков: Apache 2.4, PHP 5.6.

2.4 Установка CMS «MODX» на локальный сервер

После установки локального сервера, необходимо установить и настроить CMS «MODX» для работы.

Первым этапом нужно скачать сборку системы «MODX», с официального сайта разработчика - Modx.com, для этого была выбрана стандартная сборка - «Traditional» (Рисунок 9).

Рисунок 9. Страница скачивания CMS «MODX»

После этого необходимо создать директорию на локальном сервере. Все директории виртуальных доменов, хранятся в папке - domains, по умолчанию уже существует директория - localhost, мы можем создать свою например - znaki-vn.dev. После этого сервер необходимо перезагрузить для активации домена.

Так-как CMS «MODX» использует БД (базы данных), и для установки нам понадобятся данные БД, для подключения к ней и внесения изменений. Для работы с базами данных на локальном веб сервере используется - «phpMyAdmin».

«phpMyAdmin» - веб приложения для администрирования СУБД (Система Управления Базами Данных) MySQL.

Создадим новую базу данных. Для этого из панели администрирования сервером, перейдем в «phpMyAdmin» или по адресу - localhost/openserver/phpmyadmin. По умолчанию для доступа к базе установлен логин - root, пароль не задан (Рисунок 10).

Рисунок 10. Страница авторизации «phpMyAdmin»

После успешной авторизации, можно создать новую базу данных, нажав на кнопку «Создать БД», будет запрошено имя новой базы, назовем ее - flowers, после ввода данных база будет создана.

Далее можно распаковать скачанный архив с CMS, в ранее созданную директорию - znaki-vn.dev, после распаковки, можно начать установку, для этого необходимо перейти по адресу - znaki-vn.dev/setup/, запустится мастер установки. Система предложит выбрать язык и продолжить установку, после этого необходимо ввести данные ранее созданной базы (Рисунок 11).

Рисунок 11. Установка подключения к базе данных

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

Рисунок 12. Главная страница сайта на локальном сервере

Доступ в панель администратор можно получить по адресу - znaki-vn.dev/manager, введя ранее заданные логин и пароль, мы получим доступ к панели администрирования (Рисунок 13).

Рисунок 13. Панель администратора на локальном сайте

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

Для установки модулей необходимо перейти в административную панель, и выбрать пункт «Приложения», затем «Установщик». Система позволяет использовать не только установленный по умолчанию магазин модулей, но и подключать сторонние репозитории, таким репозиторием будет - modstore.pro/extras/, именно там находятся нужные модули для работы, добавляем поставщика, и теперь мы можем использовать данный репозиторий.

Список устанавливаемых модулей:

1.      Minishop 2 - Компонент магазина.

2.      ClientConfig - Компонент для создания пользовательских конфигураций.

3.      MIGX - Компонент объединяющий несколько дополнительных полей.

4.      CodeMirror - Компонент редактора кода.

5.      FormIt - Компонент для работы с формами.

6.      getPage - Компонент реализующий постраничную навигацию.

7.      getResourse-Компонент получения ресурсов.

8.      Translit - Компонент для транслитерации URL адресов.

9.      MinifyX - Компонент для сжатия ресурсов сайта

10.    PdoTools - Набор сниппетов.

11.    W1 - Компонент приема онлайн платежей.

12.    WayFinder - Компонент для создания меню.

После установки всех данных компонентов, система полностью готова к работе.

Задача по установке и настройке локального сервера и CMS «MODX», выполнена.

2.5 Разработка сайта

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

Рисунок 14. Структура страниц сайта.

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

Информационная страница - страница описания магазина.

Корзина товаров - корзина товара является совмещенной страницей совместно с оформлением заказа, и позволяет и управлять покупками и сразу сделать заказ (Приложение Б).

Для разработки прототипа был использован онлайн-сервис создания блок-схем - #"896829.files/image016.jpg">

Рисунок 15. Код шаблона главной страницы.

Далее после вынесения всех участков кода в отдельные чанки, можно приступить к подключению обработчика «minishop2». Вся верстка каталога была вынесена в чанк - [[$catalog]], рассмотрим его подробнее.

<sectionclass="catalog"><!-- Началосекциикаталога --!>

<divclass="container"><!-- Началоконтейнера каталога --!>

[[pdoResources?

&depth=`0` &includeContent=`0` &sortby=`menuindex` &sortdir=`ASC` &parents=`[[*id]]` &tpl=`catalog_category_tpl`

]]

</div><!-Конец контейнеракаталога --!>

</section><!-Конецсекциикаталога --!>

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

Чанк - [[$catalog]], содержит в себе некоторые основные теги верстки, а также вызов сниппета - [[pdoResources]], который содержит в себе которые параметры, рассмотрим данные параметры.

&depth - Целое число, указывающее глубину поиска для ресурсов от каждого из родителей. По умолчанию: 10.

&includeContent - Указывает, что содержание каждого ресурса должно возвращаться в результатах выборки. По умолчанию: 0.

&sortby - Сортировка по любому полю ресурса (за исключением переменных шаблона).

&sortdir - Порядок сортировки. По умолчанию: DESC.

&parents - Список идентификаторов родительских ресурсов, разделенных запятыми. Используется -1 для исключения родительских ресурсов. По умолчанию: currentResourceid.

&tpl - Имя чанка, выступающего в качестве шаблона для ресурса. Если не установлен, свойства выдаются в виде списка для каждого ресурса.

Таким образом кратко можно сказать, что будет вызван главный ресурс с нулевой глубиной просмотра родительских ресурсов, с сортировкой элементов по полю ресурса - menuindex (Позиция в меню) и типом сортировки по возрастанию, с шаблоном вывода для категорий - catalog_category_tpl.

Далее уже известно, что сниппетом был вызван шаблон - catalog_category_tpl, рассмотрим его структуру (Рисунок 16).

Рисунок 16. Кодчанкаcatalog_category_tpl

Как видно на рисунке выше, все теги, которые расставлены в коде верстки используют тег [[+placeholder]], это связано с тем, что данный шаблон вызывает именно сниппет, поэтому и все значения ресусрса будут вызываться из значений сниппета, в противном случае, если бы вызов полей ресурса был напрямую из шаблона, то он вызывался как - [[*field]].

Далее мы видим, что в некоторых значениях расставлены такие теги как:

[[+alias]], [[+pagetitle]], [[+id]], [[+introtext]]. Все данные плейсхолдеры вызывают определенную информацию из сниппета. Проще говоря плейсхолдер это переменная, которую генерирует сниппет.

Таким образом, для вывода на странице мы берем некоторые плейсхолдеры: [[+alias]], который нужен для привязки пунктов меню к разделу категорий на странице, [[+pagetitle]], необходим для вывода названия категории на странице, #collapseExample[[+id]], для создания открывающегося описания категории, внутри этого тега есть сам тег описания категории - [[+introtext]].

После этого идет вызов другого сниппета [[pdoPage]], который уже отвечает за вызов всех товаров определенной категории, восклицательный знак перед сниппетом говорит о том, что данный сниппет не будет кэшироваться.Как видим, некоторые параметры передаются такие же как были переданы в предыдущем сниппете [[pdoResourse]], отличается только один параметр &element - имя сниппета для запуска, по умолчанию: «pdoResources», но в данном случае нам нужно вызвать именно товары магазина, поэтому используем сниппет «msProducts», который содержит в себе описание структуру каталога.

3. Развертывание сайта на хостинге

3.1 Регистрация хостинга и домена

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

Для этого был выбран хостинг-провайдер - #"896829.files/image018.jpg">

Рисунок 17. Форма регистрации #"896829.files/image019.jpg">

Рисунок 18. Создание базы данных на хостинге

Итогом стало создание базы данных с именем p419895_flow, эту базу необходимо указать в настройках конфигурации движка по пути zn-vn.dev\core\config\config.inc.php, также необходимо изменить пути до основных каталоговMODX, и заменить локальный путь D:/OpenServer/domains/znaki-vn.dev/ на /home/p419895/www/znaki-vn.ru.

После замены всех необходимых параметров, сайт можно заархивировать, предварительно сбросив кэш сайта, в администраторской панели сайта - «Управление», «Очистить кэш», это необходимо для избегания некоторых проблем после установки сайта на хостинг, после установки на хостинг, сайт автоматически закэшируется и создаст необходимые для работы файлы.

Далее необходимо выгрузить базу данных, для этого перейдем в «phpMyAdmin» и выберем базу которая ранее использовалась на локальном проекте - flowers, далее необходимо экспортировать эту базу нажатием кнопки «Экспорт» (Рисунок 17).

Рисунок 17. Экспорт локальной базы данных flowers

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

Теперь если мы перейдем на сайт,то получим ошибку «500 internal server error», несмотря на то, что мы перенесли все файлы и дамп базы, необходимо обновить установку системы.

Для этого возьмем из стандартного дистрибутива папку «setup» и загрузим ее в основной каталог нашего сайта. Перейдя по адресу znaki-vn.ru/setup, начнется стандартная установка системы, но в отличии от обычной установки, на третьем этапе необходимо сменить тип установки с «Новая установка» на «Расширенное обновление» (Рисунок 18).

Рисунок 18. Этап обновления CMS на хостинге

После этого в настройках подключения к базе данных уже будут установлены все параметры, что ранее были изменены в файле конфигурации - сonfig.inc.php. Далее последует проверка подключения базы данных, после чего система сообщит, что установка успешно завершена, и папка setupбудет автоматически удалена.

Перенос сайта на хостинг был успешно завершен, он доступен по адресу znaki-vn.ru.

Заключение

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

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

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

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

Немаловажен тот факт, что сайт является полнофункциональным для любых мобильных устройств, что может повысить уровень конверсии и уменьшить отказы и «брошенные корзины» на определенных этапах работы с сайтом.

Касаясь технической стороны вопроса, так-как для разработки была выбрана именно CMS«MODX», открывающая широкие возможности для интернет-магазина, можно однозначно сказать, что магазин будет идти в ногу со временем, совершенствуя свои сервисы для удобного взаимодействия с клиентом.

Цель дипломной работы - разработка интернет-магазина для цветочного салона - «Знаки внимания» с использованием CMS «MODX» достигнута.

Список используемых источников

1.      Роббинс Дж. P 58 HTML5, CSS3 и JavaScript. Исчерпывающее руководство / Дженнифер Роббинс; [пер. с англ. М. А. Райтман]. - 4-е издание. - М.: Эксмо, 2014 - 528 с.

2.      Машнин Т. С. Bootstrap: Быстрое создание современных сайтов / Т. С. Машнин - «Издательские решения». - М.: Издательские решения, 2016 - 66 с.

.        «Словарь терминов». Статья «Интернет-магазин». [Электронный ресурс] - Режим доступа: #"896829.files/image022.jpg">

Главная страница сайта

Внутренняя страница товара

Внутренняя информационная страница

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

Приложение В

Макеты страниц сайта

Главная страница сайта

Внутренняя страница товара

Внутренняя информационная страница

Страница корзины и заказа

Приложение Г

Код верстки

HTML код

<!DOCTYPEhtml>

<htmllang="ru">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Заголовок </title>

<!-- ПОДКЛЮЧЕНИЕ СТИЛЕЙ -->

<link href="css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/font-awesome.min.css">

<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" />

</head>

<body data-target="mainNav">

<!-- НАЧАЛО ОБЕРТКИ -->

<divclass="wrapper">

<nav id="mainNav">

<div>

<!-- Brand and toggle get grouped for better mobile display -->

<div>

<button type="button">

<span>Мобильнаянавигация</span>

</button>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div>

<ul>

<li>Тюльпаны<span>

<li><a href="#">Розы</a></li>

</ul>

<hr>

<div>

<a href="http://vk.com"><img src="img/vk.png" alt="vk"></a>

<a href="#"><img src="img/ok.png" alt="ok"></a>

<a href="#"><img src="img/insta.png" alt="insta"></a>

</div>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

<sectinon>

<div>

<div>

<div>

<h1>44-52-92</h1>

<h2><strong>г. Благовещенск, ул. Зейская, 269</strong></h2>

</div>

<div>

<img>Цветочныйостров">

</div>

<div>

<!-- НАЧАЛОИКОНКИКОРЗИНЫ -->

<div>

<div>

<a>

<a>

<img src="img/minicart.png" alt="">

</div>

</div>

<!-- КОНЕЦ ИКОНКИ КОРЗИНЫ -->

</div>

</div>

</div>

</sectinon>

И далее 10 страниц.

LESS код{: relative;height: 100%;

}{color: #fff;x: hidden !important;bottom: 110px !important;top: 50px;

}

@pink: #fa9b47;

@hpink: #F28F2A;

@rnew: #c7112d;

@hrnew: #C71157;

@brown: #461F1B;

@CLB: 'CleanvertisingB';

@CLL: 'CleanvertisingL';

@ari: 'ariadna';

.wrapper {x: hidden !important;

.red-button {top: none;right: none;align: center;left: none;height: 40px;: @pink;radius: 5px;transform: uppercase;: 2px dashed @brown;: #fff;: 70%;left: 5px;right: 5px;: 43px;size: 17px;: block;: 15px auto;align: center;decoration: none;: pointer;

&:hover {: @hpink;

}

}

.blue-button {top: none;right: none;align: center;left: none;height: 40px;: @rnew;radius: 5px;transform: uppercase;: 2px dashed @brown;: #fff;: 70%;left: 5px;right: 5px;: 43px;size: 17px;: block;: 5px auto;align: center;decoration: none;: pointer;

&:hover {: @hrnew;

}

}

#cart-it {: 30%;

}

#btn-order {height: 0px;: 30%;

}

#btn-blue {height: 0px;: 60%;

}

.form-control:focus {color: #ff8f92;: 0;

webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,143,146,.6);shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,143,146,.6);

}

}

/*============ ПАНЕЛЬНАВИГАЦИИ ===========*/

#mainNav {

}

.navbar-default {family: @CLB;: rgb(255, 223, 188);bottom: 3px solid @pink;

.navbar-collapse {color: @pink;

}

.navbar-nav {{{: @brown;

}&:hover{color: @pink;

}

}

}

.social{align: right;right: 20px;top: 8px;{: 35px;

}

}

}

.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover,

.navbar-default .navbar-nav > .active > a:focus {: #000;color: @pink;

}

/*============ ШАПКА ===========*/

.land-head {family: @CLL;{: 80px;

}

.count {family: @CLL;: absolute;: #fff;: 23px;: 65px;radius: 100px;: 21px;: 21px;height: 21px;size: 12px;align: center;color: red;

}{shadow: 0px 3px 7px rgba(150, 150, 150, 1);size: 20px;family: @CLL;

}{shadow: 0px 3px 8px rgba(150, 150, 150, 1);top: 10px;

}

.logo {: 360px;: 100px;width: 100%;top: 15px;

}

.telephone {{family: @ari;size: 70px;: @pink;{: 30px;: 205px;

}&:focus {

border:none;

}

}

}

И далее 20 страниц.

Приложение Д

Код страниц сайта

Шаблон главной страницы

<!DOCTYPE html>

<html lang="ru">

<head>

[[$meta]]

</head>

<div id="p_prldr"><div>Подождите<br><small>идетзагрузка</small></div></div>

<body id="top" data-spy="scroll" data-target="#mainNav" data-offset="75">

<div>

[[$navigation]]

[[++anounceAlert:notempty=`[[$anounce]]`]]

<sectinon>

[[$header]]

</sectinon>

[[$baner]]

[[$about]]

[[$catalog]]

[[$footers]]

[[$modal]]

</div>

[[$scripts]]

<a href="#">Наверх</a>

</body>

[[$modal-script]]

<script type="text/javascript">$(window).on('load', function () {

var $preloader = $('#p_prldr'),

$svg_anm = $preloader.find('.svg_anm');

$svg_anm.fadeOut();

$preloader.delay(500).fadeOut('slow');

});</script>

</html>

Шаблон карточки товара

<!DOCTYPE html>

<html lang="ru">

<head>

[[$meta]]

</head>

<body>

<div>

[[++anounceAlert:notempty=`[[$anounce]]`]]

<sectinon>

[[$header]]

</sectinon>

<section>

[[$item-sell]]

</section>

[[$footers]]

[[$modal]]

</div>

[[$scripts]]

</body>

</html>

Шаблон страницы корзины

<!DOCTYPE html>

<html lang="ru">

<head>

[[$meta]]

</head>

<body>

<div>

[[++anounceAlert:notempty=`[[$anounce]]`]]

<sectinon>

[[$header]]

</sectinon>

[[$cart-full]]

[[$footers]]

[[$modal]]

</div>

</body>

</html>