Файл: Разработка интернет магазина.pdf

Введение

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

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

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

Цель курсовой работы — создание веб-сайта «Интернет-магазин футбольной атрибутики».

Объект данной работы — интернет-магазин футбольной атрибутики.

Предмет — разработка Интернет-магазина.

Исходя из данной цели необходимо решить такие задачи:

1) разработка структуры сайта;

2) проектирование сайта;

3) реализация сайта;

4) общие сведения о разрабатываемом веб-интерфейсе;

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

Глава 1. Аналитическое исследование

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

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

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

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

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

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

— футболки;

— футбольная форма;

— обувь;

— мячи;

— вратарская экипировка;

— верхняя одежда;

— специализированное оборудование;

— фанатская атрибутика;

— прочее.

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

Товары будут разделены на следующие категории:

— одежда, форма;

— обувь;

— мячи;

— аксессуары;

— клубная продукция;

— прочее.

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

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

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

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

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

1.2 Разработка структуры сайта

На основе результатов описания предметной области можно определить содержание веб-сайта.

Веб-сайт «Интернет-магазин футбольной атрибутики» должен содержать:

— информацию о товарах;

— список категорий товаров;

— информацию об Интернет-магазине;

— меню для регистрации пользователей;

— страница авторизации пользователей на сайте;

— карту сайта;

— инструкцию по работе с сайтом;

— корзину товаров;

— страницу оформления заказа;

— страницу обратной связи;

— контакты.

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

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

Рисунок 1 – Структура сайта

1.3 Анализ технологий

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

HTML 5.

HTML5 — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML, последняя (четвёртая) версия которого была стандартизирована в 1997 году. По состоянию на май 2014 года, HTML5 ещё находится в разработке, но, фактически, является рабочим стандартом. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий, сохраняя при этом удобочитаемость кода для человека и простоту анализа для парсеров.

Во всемирной паутине долгое время использовались стандарты HTML 4.01 и XHTML 1.1, и веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например, веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан, как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единое API для сложных веб-приложений. В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети, без необходимости использования сторонних API. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удален. Некоторые элементы, например, <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML5. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.

CSS3.

CSS3 — активно разрабатываемая спецификация CSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS, поддержка линейных и радиальных градиентов, теней, сглаживания и многое другое. Преимущественно используется как средство описания и оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

JavaScript.

JavaScript — прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

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

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

Глава 2. Проектирование

2.1 Общие положения

Наименование продукта: веб-сайт «Интернет-магазин футбольной атрибутики».

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

Состав работ по созданию системы:

— проектирование структуры веб-сайта;

— создание дизайна;

— верстка веб-сайта.

2.2 Требования к функциональным характеристикам

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

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

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

2.3 Требования к оформлению страниц

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

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

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

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

2.4 Требования к верстке страниц

Верстка должна быть валидной, проходить валидацию на веб-ресурсе www.validator.w3.org. Верстка должна быть кроссбраузерной. Содержимое веб-страниц должно одинаково отображаться в популярных браузерах, таких как:

Google Chrome;

Mozilla Firefox;

Internet Explorer (вплоть до версии 8.0);

Opera;

Safari;

Яндекс.Браузер.

На веб-сайте предполагается наличие одной языковой версии – русской.

2.5 Группы пользователей

Работу с веб-сайтом должны осуществлять следующие группы пользователей: пользователи (клиенты); администраторы; модераторы.

2.6 Технико-экономические показатели

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

2.7 Стадии и этапы разработки

В таблице 1 приведены основные этапы разработки проекта.

Таблица 1 – Основные этапы разработки веб-сайта