Дипломная работа проектирование и разработка интернет-магазина «Колибри»

ДИПЛОМНАЯ РАБОТА


Проектирование и разработка интернет-магазина «Колибри»
Содержание

Введение……………………………………………………………………………...3

1 Обзор существующих решений по проектированию и разработке Web-интерфейса пользовательской системы……………………………………………5
1.1 Особенности современных пользовательских систем электронной коммерции………………………………………………………………………........5
2 Проектирование и разработка WEB-интерфейса………………………………..7
2.1 Разработка технического задания проекта……………………………………..7
2.1.1 Бланк технического задания………………………………………………….7
2.2.2 Технические требования………………………………………………….......9
2.2 Анализ и выбор программного обеспечения для реализации проекта…........9
2.3 Макет WEB-интерфейса……………………………………………………….11
2.4 Разработка динамических элементов…………………………………………15
Заключение…………………………………………………………………………17
Список использованной литературы и Интернет-ресурсов……………………..18

Введение

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

Электронная коммерция определяется как любая транзакция, совершаемая посредством сети связанных между собой компьютеров, по завершении которой происходит отторжение и передача права собственности или права пользования вещественным товаром или услугой.
Понятие электронная коммерция у многих ассоциируется с интернет-магазином. Первые интернет-магазины появились в США и распространились по сети Интернет из сферы весьма популярной на тот момент в Америке торговли по телефону и по почте. Удобства и преимущества торговли через Интернет быстро стали очевидными для предпринимателей, и электронный бизнес стал быстро развиваться. На сегодняшний день через Интернет можно купить практически все – от билета на киносеанс до велосипеда.
В России электронная коммерция сейчас находится на стадии активного развития – каждый день электронный бизнес, в том числе и рынок интернет-магазинов, пополняется новыми лицами, а войти в сферу интернет-торговли пока еще достаточно легко. Количество покупателей интернет-магазинов постоянно растет, во-первых, за счет роста численности пользователей сети Интернет, а во-вторых, за счет увеличения среди пользователей Интернет доли людей, совершающих online-покупки.
Покупателю интернет-магазины позволяют приобретать товар в удобное для него время, не испытывая при этом неудобств от отсутствия или, наоборот, чрезмерного внимания продавцов. Кроме того, отзывы, оставленные покупателями в интернет-магазине, зачастую более информативны, чем консультация продавца. Также в интернет-магазине можно заказать товар, которого просто нет в розничной сети.
С продвижением интернет-магазинов широкое распространение получили Web-интерфейсы, позволяющие взаимодействовать с различными программами через браузер. Web-интерфейсы (web-interfaces) удобны тем, что дают возможность вести совместную работу сотрудникам, не находящимся в одном офисе.
Преимуществами Web-интерфейсов являются:

• 
  Оперативность - доступ к информации компании практически из любой точки планеты круглосуточно (24 часа в сутки, 365 дней в году), при чем для этого достаточно иметь компьютер (ноутбук, КПК или другое устройство) подключенный к сети Интернет и Web-браузер;
  
• 
  Высокая скорость доступа, так как существующие системы уже обеспечивают средние скорости доступа в 256-1024Кбит/сек.;
  
• 
  Единая оболочка для всех пользователей с различными правами доступа (т.е. не нужно создавать несколько оболочек, как на локальных приложениях);
  
• 
  Привлекательный, удобный, дружественный и настраиваемый дизайн интерфейса, что очень трудно добиться в локальных программных оболочках.
  

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

• 
  Дать понятие электронного магазина и рассказать о его особенностях
  
• 
  Спроектировать архитектуру электронного магазина
  
• 
  Разработать алгоритм работы электронного магазина
  
• 
  Проанализировать систему оплаты и доставки
  
• 
  Разработать интерфейс интернет-магазина
  

1 Обзор существующих решений по проектированию и разработке Web-интерфейса пользовательской системы

1. 
   Особенности современных пользовательских систем электронной коммерции
   

Можно выделить пять различных направлений создания интернет-магазинов:

1. 
   Статический.
   
2. 
   Динамический «одностраничный».
   
3. 
   Динамический многостраничный витринами данных.
   
4. 
   Динамический с генерированием статических страниц.
   

Таблица 1 – Основные направления создания интернет-магазинов

Название направления	Понятие направления	Достоинства	Недостатки
Статический корпоративный сайт	Эти сайты представляют собой просто набор HTML-страниц (web-страниц) связанных между собой гиперссыл-ками. Сейчас они прак-тически не используют-ся, только иногда можно увидеть статические корпоративные сайты-визитки	1) простота 2) самый деше-вый хостинг	1) сложность обновления информации 2) необходи-мость владе-ния языком HTML
Динамический «одностранич-ный» сайт	Этот сайт имеет только одну физическую стра-ницу, но информация выводимая на нее зави-сит от того, с какой ссылки выводится страница. Точнее сама ссылка определяет выво-димую информацию.	возможность динамического обновления информации в простых и по-нятных фор-мах, не требу-ющих никаких познаний в программировании	1)сложность 2) более доро-гой хостинг 3) ненагляд-ность адреса страницы 4) более высо-кое время вы-вода страни-цы
Динамический многостранич-ный сайт витринами данных	Этот сайт имеет множество физических страниц, но на каждой странице содержится только информация для вывода страницы из базы данных. Эта технология заключается в том, что для вывода страниц создаются специальные таблицы максимально оптимизированные для максимальной скорости их вывода. Формирова-ние этих таблиц базы данных осуществляется с заданной периодич-ностью, т.е. мы имеем динамический сайт с таблицами базы данных, который время от времени автоматически обновляются. При этом мы можем не делать витрин данных для вывода часто обнов-ляемой информации, например, новостей	1) возможность динамического обновления ин-формации в простых и по-нятных фор-мах, не требу-ющих никаких познаний в программировании 2)наглядность адреса страниц 3) малое время вывода стра-ницы 4) возможность вывода быстро-изменяющейся информации в реальном времени	1)сложность 2)более доро-гой хостинг 3) большая загрузка сер-вера при об-новлении стат сайта, обнов-ление можно проводить в периоды малой актив-ности пользо-вателей
Динамический с генерированием статических страниц	Эта технология заклю-чается в том, что дина-мические страницы создаются не по одной при обращении к ним пользователя, а сразу все, с заданной перио-дичностью, например, один раз в сутки. Т.е. имеется динамический сайт, который время от времени автоматически обновляет статический сайт	малое время вывода страницы	1) задержка вывода новой информации 2) большая загрузка сер-вера при об-новлении стат сайта, но обновление можно прово-дить в перио-ды малой ак-тивности пользователей

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

1.2 Готовые решения на ASP.NET для создания web-сайтов

Часто к платформе ASP.NET предъявляют претензию об отсутствии готовых решений, на основе которых можно стоить корпоративные сайты, форумы, блоги и т.д. и т.п.

Таблица 2 – Список самых популярных web-приложений, написанных на ASP.NET. 

Название		Особенности		Официальный сайт
Блоги
BlogEngine.NET		Для BlogEngine.NET создано большое количество тем и расширений, есть возможность создавать собственные компоненты. Поддерживает SQL Compact и хранение данных в XML.		www.dotnetblogengine.net
dasBlog		Не требует использования СУБД, данные хранятся в XML файлах.		www.dasblog.info
Subtext		Простой в использовании движок блогов с красивой архитектурой. Один из создателей — член команды разработки ASP.NET MVC Фил Хаак.		www.subtextproject.com
AtomSite		Удобная платформа для блогов, схожа с популярным движком Wordpress.		www.atomsite.net
Системы управления контентом (CMS)
DotNetNuke		Одна из самых популярных CMS на .NET. Для DotNetNuke существует огромное количество разнообразных модулей и расширений.		www.dotnetnuke.com
Umbraco		Самая динамично развивающаяся CMS на .NET с открытым исходным кодом. Рассчитана для создания сайтов разной сложности — от промо-сайтов до крупных порталов.		www.umbraco.org
mojoPortal		Поддерживает большое количество СУБД MS SQL 2005/2008/SqlAzure, SQL CE, MySql, PostgreSql, SQLite, or Firbird Sql. Расширяется через механизм UserControl.		www.sourcetreesolutions.com
Kentico		Поддерживает расширенный функционал для создания социальных сетей.		www.kentico.com
Kooboo		CMS разработана на MVC Framework.		www.kooboo.com
N2 CMS		Проект с неплохой документацией в которой есть кросс-ссылки на более детальную информацию по платформе ASP.NET в MSDN. Может быть хорошим подспорьем при изучении ASP.NET.		www.n2cms.com
Orchard		Проект, создаваемый разработчиками из команды ASP.NET. Хороший пример расширяемой архитектуры.		www.orchardproject.net
Composite C1		Многофункциональная CMS. Удобный интерфейс управления контентом.		www.composite.net
Bitrix.NET		.NET версия самой популярной в России коммерческой CMS.		www.1c-bitrix.ru
AxCMS		CMS для создания крупных порталов.		www.axcms.net
Электронная коммерция
nopCommerce		Одно из самых популярных решений для электронной коммерции на .NET. Разрабатывается ребятами из Ярославля.		www.nopcommerce.com
Kartris		Движок интернет-магазина, написанный на VB.NET. Удобный интерфейс для пользователя сайта.		www.cactusoft.com
Форумы
YetAnotherForum.NET		Самый многофункциональный форум с открытым кодом на ASP.NET, простая система применения тем, возможность интеграции в существующий ASP.NET сайт.		www.yetanotherforum.net
Галереи
Gallery Server Pro		Движок для публикации галерей изображений, аудио и видео. Поддерживает Silverlight и Flash.		www.galleryserverpro.com
KiGG		Галерея новостей.		kigg.codeplex.com
Wiki-движки
ScrewTurn Wiki		Wiki-движок с поддержкой плагинов и тем. Возможность использования СУБД SQL Server или файлового хранилища.		www.threeplicate.com

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

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

2 Проектирование и разработка WEB-интерфейса

2.1 Разработка технического задания проекта

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

Основные функции информационной системы интернет-магазина:

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

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

1 Назначение интернет-магазина

1. 
   Цели
   

а) охват широкой аудитории, которой могут быть интересны подобные услуги и товары;

б) для рекламы on/offline услуг, оказания offline услуг и привлечения дополнительной клиентуры;
в) увеличение прибыли от продажи товара заказчика.

2. 
   Задачи проекта
   

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

3. 
   Целевая аудитория
   

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

4. 
   Сфера деятельности заказчика
   

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

2 Дизайн


1) Стиль WEB-дизайна 
Преобладают два стиля бионика (плавные, гибкие органические природные элементы) и барокко (использование виньеток и прочих легкомысленных визуалов).


2) WEB-проект по восприятию
а) спокойный 
б) отражающий специфику фирмы 
в) с уклоном в творческую деятельность (визуалы, формы, цвета, композиция) 

3) Использование бренда
Бренд должен быть основным элементом главной страницы (внутренних страниц).


4) Динамика композиции WEB-сайта
а) горизонтальная 
б) вертикальная 

5) Цветовая гамма и насыщенность
Цвета подходящие к стилю дизайна и тематике – была выбрана холодная цветовая гамма с элементами теплых оттенков, так как товар относится к авангардным, для которых характерны необычные цвета: сиреневый, фиолетовый, белый, серый, черный, сине-розовый, сине-фиолетовый. Холодная цветовая гамма – фиолетовый, сиреневый - оказывает тормозящее действие на нервную систему и успокаивает - используется в случае если покупатель должен подумать прежде чем сделать выбор дорогого товара. Тон: серый – работает нейтрально и все внимание уделяется товару, сочетается с любым цветом; черный - покой и постоянство.

6) Формообразование: только 2D графика.

7) Визуалы
а) абстракции 
б) животные 
в)растения 

9) Фон страницы: однотонный подходящий к дизайну.

2.1.2 Технические требования

Требования к программному обеспечению:
Операционная система: Microsoft Windows 2007. 
Веб-сервер: Apache 1.x, 2.x и другие.
Среда разработки: Microsoft Visual Studio 2010.
Платформа: ASP.NET на основе C#.
База данных: MySQL Server 2008.
Графический редактор: Adobe Photoshop CS5.
2.1.3 Структура веб-приложения
Клиентская часть веб-приложения – это графический интерфейс. Графический интерфейс отображается в браузере. Пользователь взаимодействует с веб-приложением именно через браузер, кликая по ссылкам и кнопкам.
Серверная часть веб-приложения - это программа или скрипт на сервере, обрабатывающая запросы браузера. При каждом переходе пользователя по ссылке браузер отправляет запрос к серверу. Сервер обрабатывает этот запрос, вызывая некоторый скрипт, который формирует веб-страницу и отсылает клиенту по сети. Браузер тут же отображает полученный результат в виде очередной веб-страницы.
База данных – программное обеспечение на сервере, занимающееся хранением данных и их выдачей в нужный момент. В случае форума или блога, хранимые в БД данные - это посты, комментарии, новости, и так далее. База данных располагается на сервере. Серверная часть веб-приложения обращается к базе данных, извлекая данные, которые необходимы для формирования страницы, запрошенной пользователем.

2.1.4 Динамические элементы

1) Реализация рассылка новостей.

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

2) Поиск по сайту.

В интернет-магазине реализован удобный и быстрый поиск необходимого пользователю товара, так как не все имеют неограниченный доступ в интернет, и многие оплачивают его по часам.
Варианты поисковых алгоритмов:
1. Сканирование каталогов.
Данный алгоритм имеет одно главное преимущество: отсутствует база страниц, по которым осуществляется поиск. Результат работы алгоритма формируется при последовательном (в более развитых алгоритмах - параллельном) просмотре файлов в искомых каталогах.
Для каждого найденного файла производятся 3 операции:
- чтение файла (x временных тактов); 
- удаление всех html-тегов (2x);
- поиск в оставшемся тексте целевого запроса по шаблону (2x).
Чем сложнее алгоритм, тем менее простым становится шаблон поиска. Например, производится поиск не только для полного посимвольного совпадения целевого запроса, но и морфологически близких словосочетаний.
2. Алгоритм поиска по индексной базе.
Данный алгоритм имеет единственный недостаток: индексная база занимает место. В зависимости от структуры индексной базы, она может занимать почти такой же объем, какой занимает сайт со всеми страницами. В пределе получаем удвоение размера на хостинговой площадке, что критично для сайтов с огромным количеством страниц (например, более 65000 страниц).
Для каждого найденного файла производятся 3 операции:
- чтение индексной базы (10x тактов, причем, всего 1 раз); 
- поиск в отдельных строках базы целевого запроса (2x).

Сравнительный анализ поисковых алгоритмов.

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

2. 
   Анализ и выбор программного обеспечения для реализации проекта
   

2.2.1 Преимущества ASP.NET от PHP

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

Этого не скажешь о PHP, языке программирования, который постепенно развивался из пары скриптов, написанных на языке Perl, который и стал собственно языком программирования только с 3-й его версии. В отличие от C# это скриптовый язык с вытекающими вопросами производительности. В нем все вопросы надежности возложены на программиста, и некоторые ошибки программирования могут быть выявлены только на этапе эксплуатации, когда они повлекут неприятные последствия.
Кроме указанных преимуществ ASP.NET-сайт имеет еще одно большое преимущество: в отличие от PHP в ASP.NET код сайта и дизайн сайта могут быть полностью разделены. Макет сайта может создаваться и отлаживаться без дизайна (и даже наполняться контентом), при этом будут полностью реализована вся структура, система навигации и т.д. Программист сайта может даже не знать HTML, а создатель дизайна сайта может вообще не владеть программированием (в PHP-сайтах верстка дизайна осуществляется программистом одновременно с программированием сайта). Поэтому создание ASP сайта намного технологичнее.
Это позволяет разделить работы по созданию макета сайта и его дизайна, поручая их узкоспециализированным профессионалам в своих областях, а также создавать дизайн сайта под действующий макет с учетом всех особенностей работы сайта.
Единственный недостаток технологии ASP.NET заключается в том, что переход на нее с технологии PHP достаточно сложен и еще недостаточно специалистов по созданию ASP.NET-сайтов.

2. 
   Достоинства MySQL Server 2008
   

• 
  Повышенная масштабируемость.
  
• 
  MS SQL Management Studio – интегрированная среда для создания баз данных и управления ими. Эта среда радикально отличается от старых приложений MS SQL Server: Enterprise Manager и Query Analyzer. Она более похожа на Visual Studio, и максимально адаптирована к ней.
  
• 
  Новые типы данных, в том числе не типизированные и типизированные XML. Развитая модель управления XML-данными, интеграция XML в SQL Server 2008.
  
• 
  Рекурсивные запросы, новые операторы и усовершенствование старых операторов, постраничный вывод данных.
  
• 
  Обработка исключений, которая практически отсутствовала в MS SQL Server 2000.
  
• 
  Интеграция многих новых и улучшенных средств повышения безопасности, среди которых:
  

1) Полная поддержка концепции схем, средств группировки объектов. Схема позволяет обращаться к группам объектов как к единому целому в части владения и прав.
2) Поддержка трех механизмов шифрования на базе сертификатов, ассиметричных ключей и симметричных ключей.
а) Microsoft SQL Server 2008 Transformation Serviсes – работа с данными, извлекаемыми в разных форматах и из разных источников.
б) Интегрированная поддержка HTTP и полнофункциональных Web-сервисов.
3) требования к оформлению

2.2.3 Преимущества Adobe Photoshop CS5 перед остальными графическими редакторами

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

2.3 Макет WEB-интерфейса

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

Интернет-магазин выполнен по классической схеме: меню каталога товаров и услуг и само представление товаров, представленное на отдельной странице, включающее описание и возможность положить данную позицию в корзину. На данном уровне функциональность нашего интернет-магазина достаточно часто повторяет функциональность остальных. Отличие большей частью заключается в дизайне интернет-магазина. Это не случайно, потому что дизайн интернет-магазина явление устоявшееся и многие клиенты привыкли к определенному представлению интернет-магазинов.
При создании интернет-магазина большое внимание уделяется его функциональности. То есть обеспечению надежной реализации полного цикла продажи и обслуживания клиентов.
1. Удобство навигации. Требование номер один - удобство навигации. Навигация по сайту должна быть прозрачной из любого раздела и удобной для пользователя. Меню и пункты каталога должны появляться таким образом, чтобы у пользователя не возникало вопросов, как перейти из одной точки сайта в другую.
2. Каталог товаров. Каталог товаров это тоже часть навигации сайта. Он должен обеспечивать не меньшую прозрачность отображения и иметь древообразную иерархичную структуру, с возможностью навигации по категориям товаров, списку товаров.
3. Новости сайта. Самый обновляемый раздел сайта - это новости. Новости, должны быть максимум автоматизированы по удобству администрирования, что достигается удобной системой управления сайтом.
4. Корзина покупок. При навигации по каталогу, часто удобно использовать виртуальную корзину покупок, для того чтобы посетитель мог отложить в нее товар по мере просмотра каталога товаров. Необходимо иметь возможность пересчета и удаления товаров из корзины на этапе просмотра корзины перед оформлением заказа.
5. Регистрация покупателей. Регистрация дает посетителю много возможностей: предоставление истории покупок, запоминание адресов доставки и т.д.