Denisovanv_pin_2014 / Денисова антиплагиат

СОДЕРЖАНИЕ


ВВЕДЕНИЕ 3
Глава 1 Анализ структуры и сервисов сайтов ателье 5
Глава 2 Обзор современных технологий разработки сайтов 18
2.1 Сайты на HTML 18
2.2 Язык PHP 19
2.3 PHP + MySQL 19
2.4 CMS 20
Глава 3 Проектирование структуры и сервисов сайта ателье 24
3.1 Характеристика ателье «Диапазон-Театральный костюм» 24
3.2 Анализ требований заказчика 24
Глава 4 Реализация и внедрение сайта 34
4.1 Установка системы управления контентом Joomla 34
4.2 Конфигурация системы 35
4.3 Дизайн сайта 37
4.4 Модули, компоненты и плагины 40
4.5 Разработка приложения «Создание модели» 50
ЗАКЛЮЧЕНИЕ 53
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 55


ВВЕДЕНИЕ

Роль информационных систем в управлении предприятием за последние годы значительно изменилась. Информация охватила все стороны жизни общества. Информационная структура не обошла стороной и частные предприятия. В надежде стать более конкурентоспособными и «идущими в ногу со временем», предприятия создают сайты для продвижения своего бизнеса в интернете. Сайт ? это не только визитная карточка компании, но и один из маркетинговых инструментов.
На сегодняшний день в интернете представлен широкий спектр сайтов ателье, автоматизирующих систему принятия заказов и продвижения товара через интернет. Эти сайты различаются по уровню сложности структуры и технологиям создания.
Тема дипломной работы была выбрана в связи с актуальностью проблематики разработки web-сайтов. Целью данной работы стала разработка сайта для ателье-магазина тканей «Диапазон - Театральный костюм» г. Саратова.
Для достижения цели были поставлены следующие задачи:
• обзор сайтов схожей тематики;
• выполнение сравнительного анализа программных средств построения сайтов;
• проектирование структуры и сервисов сайта;
• реализация и внедрение сайта.
Данная работа состоит из четырех глав.
В первой главе дипломной работы определены цели создания сайта, а также проведен сравнительный анализ существующих и конкурентоспособных сайтов ателье - указаны их достоинства и недостатки, общие характеристики и различия в структуре. Также на основе анализа выявлены распространенные ошибки в дизайне сайтов.
Во второй главе данной работы проведен обзор современных технологий разработки сайтов – выявлены наиболее популярные технологии создания сайтов.
В третьей главе дипломной работы описывается проектирование структуры и сервисов сайта.
В четвертой главе данной работы описана реализация и внедрение сайта для ателье.
Результатом работы стал разработанный и внедренный сайт для предприятия ООО «Диапазон-Театральный костюм», отвечающий всем требованиям заказчика и современного web-дизайна.

Глава 1 Анализ структуры и сервисов сайтов ателье

Для подавляющего большинства компаний создание web-сайтов воспринимается лишь модной тенденцией. Почти все компании стремятся создать свой сайт, но далеко не все осознают, насколько важна разработка сайта для развития бизнеса.
Первый шаг на пути создания сайта – определение целей. Четко сформулированная цель может превратить сайт в эффективный инструмент, направленный на достижение целей его создателей [1].
Основная общая цель всех компаний, независимо от их особенностей и характеристик, извлечение прибыли. Получение прибыли от созданного сайта может происходить как за счет прямых продаж, так и опосредованно, за счет достижения целей второго уровня. К таким целям относятся:
• повышение имиджа организации;
• представление достоинств и преимуществ предлагаемых организацией услуг или товаров;
• привлечение внимания потенциальных потребителей к наиболее интересным предложениям организации;
• поддержка связи с постоянными клиентами;
• организация прямых продаж на сайте;
• создание и продвижение партнерской сети.
После того, как основные цели сформулированы, нужно определить необходимые ресурсы и сроки достижения целей. Здесь ресурсами выступают определенные знания и умения в области создания сайта, программные коды, базы данных, серверные технологии и многие другие вещи, без которых можно обойтись, но которые необходимы для воплощения оригинальных идей.
Обычно процесс создания сайта разбивается на несколько этапов, для каждого из которых устанавливается срок его выполнения, ответственное лицо и форма отчетности.
Также необходимо правильно оценить и обосновать цель. Постановка целей – это не просто полезное занятие, это совершенно необходимый элемент любой деятельности.
Прежде чем приступить к созданию самого сайта, необходимо собрать полную информацию о данной компании и услугах, которые она предоставляет; проработать концепцию сайта так, чтобы в результате пользователи сайта попали на удобный, красивый и функциональный ресурс.
Для достижения наилучших результатов необходимо провести исследование существующих сайтов потенциальных конкурентов с анализом их сильных и слабых сторон.
В ходе выполнения данной задачи были выбраны и проанализированы сайты исполнителей по следующим критериям:
• популярность в Саратове;
• привлекательность интерфейса;
• уровень сложности.
Для выбора наиболее популярных сайтов в Саратове, был задан соответствующий запрос в поисковой системе Google: «Ателье Саратов».
Подавляющее большинство саратовских ателье, информация о которых отображается на первых строках поиска, не имеют своего собственного сайта.
В тройке самых популярных сайтов оказались: авторское ателье «Золотое руно», ателье «Надежда» и ателье «Силуэт». Рассмотрим их более детально.
1. Авторское ателье «Золотое руно» [2].
В каталоге «Галерея работ» представлено 5 альбомов. Достоинства: сайт выдержан в едином стиле, необычный интерфейс, доступна вся основная информация о сайте ателье – «Услуги», «Ассортимент», «Галерея работ», «Контакты». Недостатки: по типу это сайт-визитка, не представлены какие-либо сложные структуры; некоторые страницы кажутся пустыми из-за малого объема текстовой информации. Пример главной страницы сайта приведен на рисунке 1.1.


Рисунок 1.1 - Стартовая страница сайта ателье «Золотое руно»

Также на рисунке 1.2 представлен один из каталогов сайта ателье «Золотое руно».


Рисунок 1.2 - Каталоги сайта ателье «Золотое руно»
2. Cайт ателье «Надежда» [3].
Здесь вниманию пользователя представлена богатая фотогалерея - 10 альбомов, в общей сложности около 300 фотографий выполненных работ. Достоинства: присутствуют дополнительные разделы - «Каталог тканей», «Награды», «Партнеры», «Вакансии». Вся нужная информация лежит в свободном доступе. Недостатки: пункты меню «Партнеры» и «Гардероб» - «Женская одежда» пусты. «Каталог тканей» на самом деле не представляет нашему вниманию какие-либо каталоги, фотографии. Пункт меню «Услуги» - «Ремонт» содержит в себе слишком много текста, размещенного на одной странице. Пример главной страницы сайта приведен на рисунке 1.3.


Рисунок 1.3 - Стартовая страница сайта ателье «Надежда»

Также на рисунке 1.4 представлен один из пунктов меню сайта ателье «Надежда» - «Награды». Это еще один достаточно эффективный способ привлечь клиента.

Рисунок 1.4 - Пункт меню сайта ателье «Надежда» - «Награды»

3. Сайт ателье «Силуэт» [4].
Здесь представлена достаточно интересная структура сайта. Достоинства: в разделе «Ремонт одежды» расположены фотографии «до» и «после» ремонта. Это интересный ход, рассказывающий пользователю о «второй» жизни старых вещей. В каждом разделе представлено еще около 15 подразделов, что говорит о том, что ателье старается предоставить пользователю как можно больше информации о своей деятельности. Недостатки: почти в каждом из 15 подразделов содержатся длинные текстовые страницы. С первого взгляда невозможно определить, в каком разделе можно найти фотогалерею. Пример главной страницы сайта приведен на рисунке 1.5.


Рисунок 1.5 - Стартовая страница сайта ателье «Силуэт»

Также на рисунке 1.6 представлен один из разделов меню сайта ателье «Силуэт» - «Ремонт одежды».


Рисунок 1.6 - Меню сайта ателье «Силуэт» - «Ремонт одежды»

Кроме сайтов саратовских ателье, были проанализированы также сайты других российских и зарубежных ателье. Для выбора таких сайтов, исходя из привлекательности интерфейса и уровня сложности, были изучены существующие сайты ателье расположенные как на первых, так и на последних страницах поиска. Были проанализированы их функциональность и презентабельный внешний вид. Таким образом, были выделены следующие сайты: ателье «Арт-Мода» (Новосибирск, Москва), сайт «Ателье в Челябинске», «Свободная торговая площадка в области портняжного дела», сайт «Одежда для танго».
Рассмотрим их более детально.
1. Cайт ателье «Арт-Мода» (Новосибирск, Москва) [5].
Достоинства: очень яркий, красочный, привлекательный интерфейс. Всегда под рукой находится каталог костюмов с представленной в данном разделе фотогалереей. Сайт выдержан в едином стиле. Имеется форма обратной связи с ателье. Недостатки: многие пункты меню остались пусты. Пример главной страницы сайта приведен на рисунке 1.7.

Рисунок 1.7 - Стартовая страница сайта ателье «Арт-Мода»

Также на рисунке 1.8 представлена форма обратной связи с сайтом ателье «Арт-Мода».


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

2. Сайт «Ателье в Челябинске» [6].
Достоинства: сайт имеет специальный раздел, в котором выражены все лучшие качества данного ателье – «Почему выбирают наше ателье?». Внизу страницы есть интеграция сайта с популярными социальными сетями. Также имеются специальный раздел «Отзывы и комментарии» и форма обратной связи. Есть специальная форма оформления заказа. Недостатки: небогатая фотогалерея – 1 альбом из 5 кадров. Непривлекательный интерфейс. В целом сайт раскрывает свою тематику в полном объеме. Пример главной страницы сайта приведен на рисунке 1.9.


Рисунок 1.9 - Стартовая страница сайта «Ателье в Челябинске»

На рисунке 1.10 представлена форма оформления заказа.

Рисунок 1.10 - Форма оформления заказа

Также на рисунке 1.11 представлена интеграция сайта с популярными социальными сетями.

Рисунок 1.11 - Интеграция сайта с популярными социальными сетями

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


Рисунок 1.12 - Стартовая страница сайта «Свободная торговая площадка в области портняжного дела»

Также на рисунке 1.13 представлена система рейтингов.

Рисунок 1.13 - Система рейтингов

4. Сайт «Одежда для танго» [8].
Достоинства: яркий красочный интерфейс. На сайте функционирует интересное приложение – пользователь может самостоятельно создать модель одежды для танго, выбрать ткань и оформить заказ на пошив изделия. Есть возможность просмотреть каталоги, которые открываются в формате PDF и представляют собой некое подобие книг о пошиве изделий. Недостатки: нет русскоязычной версии, представлены только английская и немецкая версии. Пример главной страницы сайта приведен на рисунке 1.14.


Рисунок 1.14 - Стартовая страница сайта «Одежда для танго»
Также на рисунке 1.15 представлено приложение для создания модели одежды.


Рисунок 1.15 - Приложение для создания модели одежды

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








Таблица 1.1 - Результат конкурентного анализа, разработанного в Государственном Университете Кента, США
«Золотое руно»
«Надежда»
«Силуэт»
«Арт-Мода»
«Ателье в Челябинске»
«Свободная торговая площадка в области портняжного дела»
«Одежда для танго»
Внешний вид
Flash элементы
- - - - - - +
Единый стиль + + + + + + +
Обратная связь - - - + + - +
Структура и навигация
Все ссылки работают верно + + + + - + +
Возможность вернуться на предыдущую страницу - - - - - - -
Юзабилити
Кроссбраузерность + + + + + + +
Корректность работы сайта - + + + - + +

При обзоре сайтов были выявлены распространенные ошибки в дизайне сайтов:
• некоторые страницы кажутся пустыми из-за малого объема текстовой информации;
• большой объем контента. Веб-страницы должны быть адаптированы для беглого просмотра;
• несоблюдение общепринятых представлений о том, как должны выглядеть ссылки;
• несовместимость браузеров.
Проведенный анализ существующих сайтов ателье также показал, что большинство сайтов имеют однотипные разделы:
• раздел «О нас» (о компании) - раздел представления компании;
• раздел «Портфолио» (фотографии) - раздел архива фотографий компании;
• раздел «Новости моды» - раздел важных новостей моды в регионе и в мире;
• раздел «Скидки» - акции, которые проходят в компании;
• раздел «Контакты» - адреса, телефоны компании;
• раздел «Гостевая книга» - обратная связь.
Заметим, что только один из рассмотренных сайтов содержит электронный магазин - «Свободная торговая площадка в области портняжного дела». И только один из сайтов – «Одежда для танго» - предоставляет пользователям интерактивную возможность создания моделей.
Для привлечения пользователей необходимо найти необычные решения реализации построения данных структур, в том числе дизайнерские.
Специальные сервисы сайта, такие как поиск тканей, стандартных моделей, подбор и комбинация моделей, интернет-магазин тканей, прием заказов, сервис рассылок - помогают выделить сайт ателье на фоне конкурентов и могут значительно повысить его посещаемость и эффективность.
Глава 2 Обзор современных технологий разработки сайтов

Современные сайты создаются с использованием множества различных технологий. К ним относятся:
• языки разметки гипертекста (HTML, XML);
• динамическая генерация web-страниц при помощи скрипов (например, на языке программирования PHP) на основе информации из баз данных;
• сценарии (реализуемые с помощью языка Java Script);
• системы управления контентом (CMS).
В ходе выполнения работы был проведен обзор различных современных технологий разработки сайтов и выявление среди них наиболее популярных.

2.1 Сайты на HTML
HTML язык (Hyper Text Markup Language) – это стандартный язык, предназначенный для создания гипертекстовых документов в среде WWW (World Wide Web).
Главное преимущество HTML заключается в том, что документ может быть просмотрен на Web-браузерах различных типов и на разных платформах [9].
При зарождении Интернета, в 90-е годы, сайты представляли собой набор статичных страниц и были, по сегодняшним меркам, очень примитивны.
Для каждой странички сайта создавался свой html-файл, который содержал определенный контент. Нужная информация добавлялась вручную, разметка страницы осуществлялась при помощи HTML-тегов. И такой файл загружался на сервер [10].
Вообще HTML прост и практически не претерпел никаких изменений за последние годы. Но, чтобы научиться делать красивые сайты, нужно знать, что такое верстка. А для того, чтобы делать сайты функциональные – нужно познакомиться с программированием и, в частности, с языком PHP.

2.2 Язык PHP
Несмотря на простоту разработки сайта на базе HTML, недостатки "ручного" создания страниц сайта очевидны: руками можно сделать 5-10 страниц, но когда их число достигает сотен - возникают проблемы. И сложность заключается скорее не в создании, сколько в управлении этими страницами. Ведь для правки какого-то повторяющегося блока на сайте, например части дизайна или элементов меню, придется дублировать изменения во всех файлах сайта [11].
На смену чистому HTML пришел язык программирования PHP, а с ним и новые возможности. Во-первых с приходом PHP появилась технология, при помощи которой конечная страница сайта собиралась из нескольких блоков. Можно было в одном файле описать элементы шапки сайта, в другом - меню, в третьем - подвал, а во всех остальных файлах описывать только суть - непосредственно контент страницы [12].
Однако недостатком подобного подхода было то, что работа с контентом сайта по-прежнему велась на уровне файлов. А это требовало, как минимум, хороших знаний HTML для корректного форматирования текста, и умений работать с файлами на хостинге.

2.3 PHP + MySQL
По-настоящему мощным инструментом программирования и создания сайтов является связка PHP + MySQL.
MySQL - это База Данных, набор таблиц, в которых хранится та или иная информация [13].
PHP выступает в качестве инструмента, который умеет читать из таблиц базы нужные данные и на их основе формировать HTML-код. Для отправки данных от пользователя используются HTML-формы и на PHP можно реализовать механизм обработки этих форм. Таким образом, после того, как пользователь заполнил форму и нажал кнопку "отправить" PHP-скрипт ловит данные из формы и выполняет вставку новой строки в базу.

2.4 CMS
Обладая достаточными знаниями PHP и MySQL, можно самостоятельно сделать полноценный механизм управления информацией. Ситуация осложняется тем, что одной таблицы для хранения данных явно недостаточно. В реальности их число обычно достигает нескольких десятков (таблица для хранения статей, комментариев, опросов, пользователей, меню, системных настроек и т.д.) [14].
Качественно выполнить такую работу с нуля - задача непростая. Сегодня на просторах интернета можно найти множество различных готовых вариантов систем управления контентом, или сокращенно CMS (Content Management System) [15].
В CMS все функции работы с БД уже запрограммированы, а интерфейс по работе с сайтом максимально прост и удобен [16]. Таким образом, администратор сайта видит лишь отдельные элементы управления (формы добавления статей, элементы управления меню и т.д.) и ему совершенно не нужно быть программистом, чтобы управлять сайтом. Он лишь задает команду, например, "создать статью", а движок выполняет всю механическую работу за него, а именно обрабатывает входные данные и вставляет их в нужные таблицы БД. И поэтому сегодня администратор сайта может быть совсем далек от программирования, но иметь возможность управлять контентом [17].
В сущности CMS - это набор PHP файлов, при помощи которых осуществляется управление базой данных (MySQL).
Рассмотрим подробнее наиболее популярные системы управления контентом. Отличительные особенности и характеристики наиболее популярных CMS приведены в таблице 2.4.1.
Таблица 2.4.1 - Наиболее популярные системы управления контентом
Название Отличия и характеристики Официальный сайт
Joomla Самая популярная и мощная система управления сайтом среди альтернативных бесплатных систем. Она проста в использовании и надежна. Представляет собой минимальный набор инструментов при начальной установке, который дополняется по мере необходимости.
1) Функциональность системы увеличивается при загрузке дополнительных расширений (компонентов, модулей, плагинов).
2) Присутствует модуль безопасности для многоуровневой аутентификации пользователей и администраторов.
3) Имеется возможность легко изменять внешний вид сайта, либо создать свой уникальный дизайн страницы.
4) Начиная с версии 2.5 расширена поддержка баз данных. http://www.joomla.ru, http://www.joomlaportal.ru
WordPress Система представляет собой мощную платформу для персонального блоггинга. Она способна максимально упростить процесс создания онлайн-публикаций, сделать его более удобным. Платформа предназначена для персонального блоггинга с практичными настройками и свойствами по умолчанию и с чрезвычайно гибким и настраиваемым ядром. http://www.mywordpress.ru




Продолжение таблицы 2.4.1
Название Отличия и характеристики Официальный сайт
Drupal Достаточно сложная и объемная система управления контентом. Имеет богатый набор модулей и дополнительных расширений. http://www.drupal.ru
MODx Система содержит минимальный набор стандартных функций и служит для управления проектами любой сложности.
Обладает рядом преимуществ:
1) Полный контроль над выводом HTML-кода, разделение логики работы CMS и дизайна.
2) Поддержка PHP 4.3.11 и выше.
3) Кроссбраузерность и кроссплатформенность работы. http://modx.ru
TYPO3 Система управления, содержащая многочисленные модули и обладающая удобным интерфейсом. Она дает возможность управлять несколькими сайтами в одном административном интерфейсе, а также использовать общий контент (новости, публикации, изображения) на этих сайтах. http://www.typo3.biz
ImageCMS С помощью данной системы можно создать проект любого уровня – от личного блога, до продвинутого корпоративного портала и интернет-магазина.
Преимущества:
1) движок написан на языке;
2) CMS является SEO-friendly, что говорит о том, что продвижение сайта на основе данной CMS будет гораздо более простым и поисковые системы лояльно отнесутся к данному ресурсу;
3) имеется встроенное кэширование, и возможность установки модулей прямо из административной части http://www.imagecms.net/

В результате обзора информационных технологий серверного программирования было решено разработать сайт с помощью системы управления контентом, т.к. CMS помогает создать функциональный сайт и значительно упрощает дальнейшую работу с ним.
В ходе рассмотрения и анализа различных CMS была выбрана CMS Joomla, так как она является оптимальной для выполнения всех требований к сайту.
Как и в других ситуациях, выбор той или иной CMS всегда зависит от требований к сайту, а также его тематики и функционала. Joomla предоставляет очень широкий функционал, позволяющий реализовать сайт любой сложности.
Joomla является бесплатно распространяемой CMS, причем с открытым исходным кодом, которая динамично развивается и становится популярнее и популярнее с каждым годом [18]. CMS Joomla имеет простой, понятный и легкоосваиваемый интерфейс. Для Joomla создано большое количество различных модулей и компонентов, которые расширяют функции сайтов, и шаблонов, с помощью которых можно легко изменить внешний вид сайта. Также большим плюсом является достаточно простое администрирование, что в дальнейшем позволит обычным пользователям редактировать материал и управлять контентом.
Глава 3 Проектирование структуры и сервисов сайта ателье
3.1 Характеристика ателье «Диапазон-Театральный костюм»
Общество с ограниченной ответственностью «Диапазон-Театральный костюм» является одним из ведущих профессиональных фирм Поволжья, работающих с 1995 года над производством следующих изделий:
• сценических, народных, танцевальных, исторических, эстрадных, карнавальных, цирковых костюмов;
• повседневных костюмов для детей и взрослых;
• головных уборов;
• корпоративной и форменной одежды;
• нарядной и вечерней одежды;
• свадебных платьев;
• "одежды" сцены и окон (занавесы, кулисы, ламбрекены и т.д.).
Кроме того, ателье «Диапазон-Театральный костюм» производит текстильное оформление помещений и имеет свой магазин, где реализуется продажа итальянских тканей – магазин «Браво». Территориально он расположен в Саратове.
Целевой аудиторией ателье, по большей части, являются клиенты возрастом 25 – 45 лет, преимущественно женского пола, со средним уровнем дохода, имеющие социальный статус выше среднего.

3.2 Анализ требований заказчика
При создании сайтов первым этапом можно назвать идею, концепцию создаваемого ресурса. В этом случае стоит определиться, как будет выглядеть сайт, какие задачи будут с помощью него решаться.
Чтобы оправдать ожидания заказчика, необходимо отталкиваться от его требований. Сбор требований, пожалуй, один из самых важных этапов создания интернет-сайтов. От того, насколько точно и полно будут учтены все пожелания заказчика в процессе проектирования сайта, и будет зависеть итоговый результат.
Основная цель создаваемого сайта ателье «Диапазон-Театральный костюм» – привлечение в ателье новых клиентов и установление долговременных отношений с уже существующими клиентами. Для достижения данной цели сайт должен решать следующие задачи.
1. Предоставление информации об ателье и его услугах
2. Развитие интернет-магазина с целью дальнейшей реализации товара (тканей). По требованию заказчика оплата товара, приобретенного через интернет-магазин, должна осуществляться наличными средствами по факту получения клиентом.
3. Привлечение внимания аудитории с помощью интерактивного приложения.
На основе проведенного анализа аналогичных сайтов и требований заказчика были выделены основные группы пользователей и функции, к которым они имеют доступ. Данные требования оформлены в виде диаграммы вариантов использования на языке UML (рисунок 3.2.1).


Рисунок 3.2.1 – Диаграмма вариантов использования для сайта ателье «Диапазон-Театральный костюм»
На диаграмме показаны три действующих лица:
• зарегистрированный пользователь;
• незарегистрированный пользователь;
• администратор.
Существует также десять основных действий, к которым действующие лица имеют доступ: авторизация, регистрация, оформление заказа, просмотр общей информации, поиск ткани по определенным критериям, управление личным кабинетом, возможность оставлять комментарии, редактирование информации на сайте и создание модели
Рассмотрим действия более подробно.
1. «Авторизация» - вход пользователя в систему.
• Система запрашивает имя пользователя и пароль.
• Пользователь вводит имя и пароль.
• Система проверяет имя и пароль, после чего открывается доступ в систему.
Если во время выполнения действия обнаружится, что пользователь ввел неправильное имя и/или пароль, система выводит сообщение об ошибке. Пользователь может вернуться к началу процедуры или отказаться от входа в систему.
2. «Регистрация» - процесс регистрации нового пользователя в системе.
• Система выводит форму для регистрации.
• Пользователь вводит данные.
• Система проверяет наличие всей необходимой информации для регистрации пользователя в системе, после чего открывается доступ в систему.
Если во время выполнения действия обнаружится, что пользователь ввел неполные данные, система выводит сообщение об ошибке. Пользователь может вернуться к началу процедуры или отказаться от регистрации в системе.
3. «Оформление заказа» - процесс оформления заказа через интернет.
• Система предлагает пользователю просмотреть один из двух каталогов тканей – «Новые ткани» и «Скидки».
• Пользователь выбирает интересующий его каталог.
• Система выводит ткани, представленные в выбранном каталоге, а также систему поиска ткани по следующим критериям: цена, тип, производитель, цвет, рисунок.
• Пользователь выбирает интересующие его характеристики и находит нужную ткань.
• Система добавляет ткань в корзину и выводит форму заказа.
• Пользователь проходит регистрацию (или авторизацию, если он уже зарегистрирован в системе) и заполняет необходимые данные (адрес доставки).
• Система проверяет наличие всей информации для совершения заказа и переходит к способу оплаты.
• Пользователь выбирает оплату «Наличными при получении».
• Система переходит к способу доставки.
• Пользователь выбирает «обычную» или «экспресс» доставку.
• Система выводит полную информацию о заказе.
• Пользователь подтверждает информацию и отправляет заказ администрации ателье.
• Далее администрация непосредственно связывается с заказчиком, и взаимодействие происходит вне разработанной системы.
Если процесс выполнен успешно, пользователь отправляет заказ в систему.
Если во время выполнения действия обнаружится, что пользователь ввел неполные данные, система выводит сообщение об ошибке. Пользователь может вернуться к началу процедуры или отказаться от совершения заказа.
4. «Просмотр общей информации» - процесс просмотра общей информации на сайте.
• Система представляет вниманию пользователя возможные для посещения страницы, ресурсы, галереи и приложения.
? Главная страница сайта, содержащая общую информацию.
? «Фотогалерея» – каталог работ ателье «Диапазон-Театральный костюм».
? «Создание модели» - возможность создать модель одежды для танго;
? «Наш магазин» - информация о магазине тканей.
? «Интернет-магазин», предоставляющий возможность незарегистрированным пользователям ознакомиться с ассортиментом тканей, а зарегистрированным пользователям – заказать интересующую ткань.
? «Доставка и оплата» - информация о сроках доставки товара и стоимости.
? «Контакты» - информация о месторасположении ателье, контактные адреса и телефоны.
• Пользователь просматривает информацию на сайте.
Если действие выполнено успешно, пользователь ознакомится со всей информацией, представленной на сайте.
5. «Поиск тканей по определенным критериям» - процесс просмотра каталога тканей по определенным критериям.
• Система выводит ткани, представленные в выбранном каталоге, а также систему поиска ткани по следующим критериям: цена (пользователь может прописать минимальную и максимальную стоимость ткани); тип (атлас, бархат, батист, вельвет, гипюр, джинса, жаккард, креп, кружево, лен, лорден, макраме, хлопок, шелк, шифон), производитель (Россия, Италия, Китай), цвет (светлый, яркий, темный), рисунок (с рисунком, без рисунка).
• Пользователь выбирает интересующие его характеристики и находит нужную ткань.
• Система формирует многообразие товара, исключая лишнее, т. е. вниманию пользователя представлены только те товары, которые он отметил.
Если вариант использования выполнен успешно, пользователь нашел интересующую его ткань методом исключения лишних товаров.
6. «Управление личным кабинетом» - процесс управления информацией, который осуществляет зарегистрированный пользователь.
• Система предлагает пользователь авторизоваться.
• Пользователь проходит авторизацию.
• Система открывает доступ пользователю в личный кабинет.
• Пользователь редактирует информацию в личном профиле и просматривает совершенные заказы.
Если вариант использования выполнен успешно, пользователь получил возможность редактировать личную информацию и состояние заказа.
7. «Возможность оставлять комментарии» - процесс комментирования представленных в интернет-магазине товаров.
• Система выводит информацию о товаре и форму для размещения отзыва.
• Пользователь заполняет необходимые поля и пишет комментарий.
• Система публикует комментарий пользователя.
Если пользователь не зарегистрирован в системе, он не сможет оставить отзыв. Если пользователь регистрируется как «Администратор», он имеет возможность удалить комментарий.
Если процесс выполнен успешно, пользователь опубликует отзыв в разделе «информация о товаре».
8. «Редактирование информации на сайте» - процесс редактирования информации на сайте администратором.
• Система предлагает пользователь авторизоваться.
• Пользователь авторизуется как «Администратор»
• Система выводит информацию на сайте, рядом с которой расположен значок редактирования.
• Пользователь редактирует нужную информацию и сохраняет.
• Система публикует обновленную информацию на сайте.
Если процесс выполнен успешно, пользователь будет иметь возможность редактировать информацию.
9. «Создание модели» - процесс создания модели одежды для танго. Для того, чтобы более детально рассмотреть этот процесс, была спроектирована UML диаграмма приложения «Создание модели» (рисунок 3.2.2).

Рисунок 3.2.2 – UML диаграмма приложения «Создание модели»
На диаграмме показано одно действующее лицо. Существует также пять основных действий, к которым пользователь имеют доступ: просмотр и выбор моделей топов, просмотр и выбор моделей юбок, возможность комбинировать цвета юбок и топов, печать готовой модели, отправка модели по электронной почте.
Рассмотрим действия более подробно.
1. «Просмотр и выбор моделей топов» - начинает выполняться, когда пользователь переходит на страницу с приложением.
• Система выводит возможные варианты топов.
• Пользователь выбирает интересующую его модель.
• Система отображает модель топа на девушке-модели.
Если процесс выполнен успешно, пользователь выбирает интересующий топ.
2. «Просмотр и выбор моделей юбок» - начинает выполняться, когда пользователь переходит на страницу с приложением.
• Система выводит возможные варианты юбок.
• Пользователь выбирает интересующую его модель.
• Система отображает модель юбки на девушке-модели.
Если процесс выполнен успешно, пользователь выбирает интересующую юбку.
3. «Возможность комбинировать цвета юбок и топов» - начинает выполняться, когда пользователь создал понравившуюся ему модель одежды для танго.
• Система предоставляет возможность выбрать цвета отдельно для топов и отдельно для юбок.
• Пользователь комбинирует различные цвета.
Если процесс выполнен успешно, пользователь получает готовую модель одежды для танго в понравившемся цвете.
4.«Печать готовой модели» - начинает выполняться, когда пользователь создал понравившуюся ему модель одежды для танго.
• Система предоставляет возможность распечатать результат.
• Пользователь распечатывает полученную модель.
Если процесс выполнен успешно, пользователь получает распечатанную модель одежды для танго.
5. «Отправка модели по электронной почте» - начинает выполняться, когда пользователь создал понравившуюся ему модель одежды для танго.
• Система предоставляет возможность отправить модель администрации ателье по электронной почте.
• Пользователь отправляет модель.
Если процесс выполнен успешно, пользователь отправляет по электронной почте модель одежды для танго.
На основе сформулированный требований к функциям сайта и информационному наполнению (см. вариант использования «Просмотр общей информации»), была спроектирована структура сайта (рисунок 3.2.3).






Рисунок 3.2.3 – Структура сайта
«Главная страница» - демонстрирует общую информацию об ателье и отображает блок авторизации для входа в личный кабинет.
«Фотогалерея» - демонстрирует пользователю галерею работ ателье.
«Создание модели» реализуется вариантом использования «Создание модели».
«Наш магазин» - отображает информации о магазине тканей.
«Контакты» - содержит информацию о месторасположении ателье, контактные адреса и телефоны.
«Карта сайта» - помогает пользователю сориентироваться на сайте и позволяет легко находить нужную информацию.
«Интернет-магазин тканей» реализуется вариантом использования «Оформление заказа».
«Доставка и оплата» - отображает информацию о сроках доставки товара и стоимости.

Глава 4 Реализация и внедрение сайта
4.1 Установка системы управления контентом Joomla
Начиная работу с выбранным программным обеспечением, важно устанавливать и использовать последнюю версию. Разработчики систем постоянно вносят изменения после выпуска заключительной версии продукта. Для разработки сайта ателье «Диапазон-Театральный костюм» была выбрана версия Joomla 3.1.5, которая установлена на локальном сервере Denwer сборки 3.
Для загрузки Joomla 3.1.5 необходимо зайти на официальный сайт Joomla (http://joomla.ru), выбрать необходимый дистрибутив в разделе «Скачать».
Локальный сервер позволяет разработчику создавать сложные сайты без использования Интернет. Для разработки сайта ателье «Диапазон-Театральный костюм» был выбран наиболее практичный сервер – Denwer. Он представляет собой набор дистрибутивов (Apache, PHP, MySQL, Perl и т.д.) и программнуя оболочку, которую используют Web-разработчики для создания сайтов на локальной Windows - машине без необходимости выхода в Интернет. Одной из важнейших особенностей Денвера является удобство при удаленной работе сразу над несколькими независимыми проектами и возможность размещения на Flash-накопителе. Denwer имеет нечто вроде «ядра» - некий «базовый пакет», занимающий около 5.5 MB. Базовый пакет содержит большинство необходимых программ и утилит:
• Инсталлятор (поддерживается также инсталляция на flash-накопитель).
• Apache, SSL, SSI, mod_rewrite, mod_php.
• PHP5 с поддержкой GD, MySQL, sqLite.
• MySQL5 с поддержкой транзакций.
• Система управления виртуальными хостами, основанная на шаблонах.
Denwer также включает в себя:
• Систему управления запуском и завершением всех компонентов Денвера.
• phpMyAdmin — система управления MySQL через Web-интерфейс.
• Эмулятор sendmail и SMTP-сервера (на localhost могут приходить письма в /tmp в формате .eml).
Версия Denwer была взята с официального сайта http://www.denwer.ru/.
После скачивания необходимо извлечь и запустить установочный файл.

4.2 Конфигурация системы
Конфигурация - это набор свойств и условий, которые выполняет система. Для настройки конфигурации необходимо выполнить процедуру авторизации и зайти в административный интерфейс управления по адресу http://localhost/Joomla/administrator/. Окно входа изображено на рисунке 4.2.1.


Рисунок 4.2.1 – Вход в административный интерфейс Joomla

В качестве имени пользователя и пароля вводим учетные данные, указанные при установке. В данном случае, именем пользователя является «admin», пароль – «288419qwer».
После ввода правильной комбинации имени пользователя и пароля, произойдет перенаправление на главную страницу административного интерфейса.
Система управления контентом обладает широким набором функций:
• создание, редактирование и публикация информационного материала;
• конфигурирование системы управления контентом;
• установка тем оформления, компонентов и модулей;
• статистика посещений, просмотров, пользователей;
• информация о системе, обновлениях и исправлениях.
Интерфейс администратора представлен на рисунке 4.2.2.


Рисунок 4.2.2 – Интерфейс администратора CMS Joomla.

Для входа в конфигурацию следует выбрать кнопку «Общие настройки». Меню конфигурации состоит из 5 пунктов:
• «Сайт» – общие настройки работы сайта (имя, описание, выключение, регистрация пользователей, визуальный редактор);
• «Система» – настройки пути к каталогу логов и серверу справки;
• «Сервер» – GZIP компрессия страниц, время жизни сессии cookie;
• «Права» - настройки прав доступа для групп пользователей.
• «Фильтры текста» - ограничения использования HTML тэгов и атрибутов.
Интерфейс конфигурирования представлен на рисунке 4.2.3.


Рисунок 4.2.3 – Настройка конфигурации CMS Joomla

4.3 Дизайн сайта
Для создания полноцветного конкурентоспособного сайта важно уделить должное внимание оформлению. Стандартный дизайн, который предлагает система Joomla идеально демонстрирует нам возможности системы, но совершенно не подходит для разработки нашего сайта.
Если мы используем другой шаблон, нам необходимо загрузить его в папку «/templates/». Чтобы применить данный шаблон, нужно обратиться к административной части интерфейса: «Расширения» - «Менеджер шаблонов». Интерфейс выбора шаблона представлен на рисунке 4.3.1.


Рисунок 4.3.1 – Выбор шаблона дизайна сайта

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




Рисунок 4.3.2 – Дизайн главной страницы сайта ателье «Диапазон-Театральный костюм»
4.4 Модули, компоненты и плагины
Система управления контентом Joomla имеет модульную структуру и в своем базовом варианте не обеспечивает всех необходимых возможностей, требуемых для реализации готового проекта.
В Joomla присутствует деление на модули и компоненты. «Компонентами» называются расширения, позволяющие добавлять дополнительный функционал к работе системы управления контентом. «Модулями» называются элементы вывода данных, отображение которых настраивается отдельно для каждой страницы веб-сайта.
При использовании стандартных шаблонов оформления, либо шаблонов на основании стандартных макетов дизайна – никаких изменений производить не нужно. Необходимость в изменениях возникает лишь в случаях, когда в шаблон добавляются дополнительные позиции для вывода модулей.
Компонентная структура позволяет обеспечить гибкость и высокие функциональные возможности системы. Используя только необходимые для работы сайта модули и компоненты, администраторы веб-ресурса защищают себя от узких мест и уязвимостей, имеющихся в незадействованных компонентах.
При построении сайта ателье «Диапазон-Театральный костюм» были использованы следующие расширения:
• Модуль «K2» - конструктор контента, который после установки на Joomla перехватывает у нее нити управления организацией материалов и фактически предоставляет собственную панель управления в качестве альтернативы админке Joomla (рисунок 4.4.1).

Рисунок 4.4.1 – Модуль К2

• Стандартный модуль «Меню» (рисунок 4.4.2).

Рисунок 4.4.2 – Модуль «Меню»

• ITPSocialButtons – модуль размещения социальных кнопок (рисунок 4.4.3).

Рисунок 4.4.3 – Модуль «ITPSocialButtons»

• 3DSheetGallery module flash – модуль фотогалереи (рисунок 4.4.4).

Рисунок 4.4.4 – Модуль «3DSheetGallery module flash»

• «Хлебные крошки» - навигатор сайта. Благодаря данному модулю пользователь не сможет потеряться и всегда может вернуться назад (рисунок 4.4.5).


Рисунок 4.4.5 – Модуль «Хлебные крошки»

• Быстрая форма связи – модуль для мгновенной отправки сообщения пользователем администратору (рисунок 4.4.6).


Рисунок 4.4.6 – Модуль «Быстрая форма связи»
• Call Back – модуль, позволяющий «заказать» обратный звонок на удобное для посетителя время (рисунок 4.4.7).

Рисунок 4.4.7 – Модуль «Call Back»

• Социальные группы – модуль, отображающий виджеты групп в социальных сетях (рисунок 4.4.8).


Рисунок 4.4.8 – Модуль «Социальные группы»

• Авторизация – модуль, позволяющий пользователю зарегистрироваться на сайте и совершать покупки в интернет-магазине (рисунок 4.4.9).

Рисунок 4.4.9 – Модуль «Авторизация»

Если пользователь еще не зарегистрирован на сайте, у него есть возможность пройти регистрацию (рисунок 4.4.10).


Рисунок 4.4.10 – Модуль «Авторизация» - регистрация нового пользователя
• Jshopping Filters – модуль, позволяющий фильтровать товары интернет-магазина исходя из интересов посетителя (рисунок 4.4.11).

Рисунок 4.4.11 – Модуль «Jshopping Filters»

Здесь можно отобрать товары, фильтруя их по типу, по производителю, по цвету, по наличию рисунка и по цене.
• DJ-ImageSlider – модуль, отвечающий за смену картинок в заголовке сайта (рисунок 4.4.12).


Рисунок 4.4.12 – Модуль «DJ-ImageSlider»

• Компонент «JoomShopping» - бесплатный компонент интернет-магазина (рисунок 4.4.13).


Рисунок 4.4.13 – Компонент «JoomShopping» - товары

В нашем интернет-магазине представлены новые ткани и товары со скидкой (рисунок 4.4.14).


Рисунок 4.4.14 – Компонент «JoomShopping» - категории
Зарегистрированный пользователь может совершить заказ интересующей его ткани. Для этого необходимо нажать кнопку «Купить» (рисунок 4.4.15).


Рисунок 4.4.15 – Компонент «JoomShopping» - покупка товара

Далее происходит оформление заказа (рисунок 4.4.16).


Рисунок 4.4.16 – Компонент «JoomShopping» - оформление заказа
Если вы оформили заказ, вы можете просмотреть его статус в личном кабинете: «Мой аккаунт» - «Посмотреть мои заказы» - «Детали» (рисунок 4.4.17).

Рисунок 4.4.17 – Компонент «JoomShopping» - детали заказа

• Компонент «Карта сайта» - с помощью нее пользователи определяют структуру сайта и быстро находят интересующую их информацию (рисунок 4.4.18).

Рисунок 4.4.18 – Компонент «Карта сайта»

• Расширение «Личный кабинет» - для зарегистрированного пользователя (рисунок 4.4.19).


Рисунок 4.4.19 – Вход в систему прошел успешно

При нажатии на ссылку «Мой аккаунт» - мы переходим в личный профиль (рисунок 4.4.20).

Рисунок 4.4.20 – Личный кабинет пользователя

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

4.5 Разработка приложения «Создание модели»

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

Рисунок 4.5.1 - Интерфейс интерактивного приложения создания моделей одежды

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


Рисунок 4.5.2 - Интерактивное приложение «Создание модели»
Данное приложение представляет собой не только некий интерактив Интернет-ресурса, но и эффективный инструмент, позволяющий значительно повысить лояльность посетителя сайта к компании, использующей подобные интерактивные элементы.

ЗАКЛЮЧЕНИЕ

В ходе выполнения дипломной работы были решены все поставленные задачи, а именно:
• анализ структуры и сервисов сайтов ателье;
• обзор современных технологий разработки сайтов;
• проектирование структуры и сервисов сайтов ателье;
• реализация и внедрение сайта ателье «Диапазон-Театральный костюм».
Проведенный анализ сайтов-конкурентов (авторское ателье «Золотое руно», ателье «Надежда», ателье «Силуэт», ателье «Арт-Мода», «Ателье в Челябинске», «Свободная торговая площадка в области портняжного дела», «Одежда для танго») выявил однотипную структуру данных сайтов, а большинстве случаев отсутствие интернет-магазина и других интерактивных элементов.
В рамках проделанной работы подробно изучены Интернет-технологии и способы их применения в веб-разработке, а именно HTML, PHP, PHP+MySQL, CMS.
На основе анализа сайтов-конкурентов и требований заказчика были выявлены основные функции сайта, представленные в работе в виде UML-диаграмм, а также спроектирована структура сайта.
Спроектированный сайт реализован в CMS Joomla 3.1.5. Особенностью сайта является наличие интерактивного приложения «Создание модели» и наличие интернет-магазина тканей.
Разработанный сайт был внедрен и используется в деятельности ателье «Диапазон-Театральный костюм» (г. Саратов), о чем свидетельствует акт о внедрении. Результаты работы докладывались на двух Всероссийских конференциях: IX Всероссийская научно-практическая конференция «Проблемы управления в социально-экономических и технических системах», X Всероссийская научно-практическая конференции «Проблемы управления в социально-экономических и технических системах». Имеются две публикации: «Анализ структуры и сервисов сайтов ателье» [19,87], «Разработка интерактивного приложения создания моделей одежды» [20, 49].