Проектирование интернет-магазина по продаже шин

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

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

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

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

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

Предметная область квалификационной работы Интернет-торговля.

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

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

Задачи исследования для работы:

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

1 Постановка задач

1.1 Техническое задание на разработку интернет-магазина

1. Общие сведения.

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

2. Язык отображения информации на сайте:

Преимущественно русский (одноязычный сайт) язык.

3. Структура сайта.

Структура сайта предусматривает создание и введение следующих разделов:

Главная.

Каталог товаров.

О нас.

Акции.

Новости.

Контакты.

Корзина.

Дополнительное горизонтальное меню:

3 последние новости.

3 последние акции.

Недавно просмотренные товары.

4. Детализация структуры.

На главной странице (переход через логотип) — будут находиться:

«Шапка» - верхняя часть сайта:

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

Контентная зона:

Новинки, Товары со скидкой! Топ продаж.

Блок новостей: название, аннотация, дата, новость.

Блок с последними статьями на сайте: название, дата.

«Подвал» - нижняя часть сайта:

         Знак копирайта, текущий год и название сайта.

Раздел «О нас» — общая информация об интернет-магазине с фото и видео.

Раздел «Каталог товаров» — список всех товаров и их категорий.

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

Раздел «Акции» — последние акции интернет-магазина: название акции, текст.

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

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

Страница товара будет содержать:

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

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

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

Покупка товаров на сайте Интернет магазина будет осуществляться без регистрации (Быстрый заказ). Вся информация о заказе будет приходить Заказчику на электронную почту.

5. Особенности функционала

Покупка без регистрации.

Привязка цен на сайте к доллару (ввод цен товаров в долларе и пересчет по курсу заданному в админке).

Система наценок/скидок.

Каждому товару на сайте соответствует своя цена.

Всплывающее окно «Перейти в корзину» или «Продолжить покупки» после отправки товара в корзину.

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

7. Дизайн сайта.

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

Фон сайта: светлый.

Цвета сайта: Коричневый, белый, черный, синий.

Индивидуальные графические элементы и иллюстрации: на усмотрение дизайнера.

8. Технические характеристики программных средств и среды функционирования

Реализация программной части веб-системы будет осуществляться с применением CMS Joomla с дополнением virtuemart, которая позволит обеспечить высокую скорость работы динамических частей веб-системы. В качестве используемого сервера БД будет использоваться сервер MySQL, обладающий достаточным быстродействием и отказоустойчивостью.

1.2 Постановка задачи на разработку сайта

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

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

1. Большая часть страниц интернет-магазина генерируются серверными программами. Статичные страницы присутствуют, однако составляют крайне незначительный процент и содержат сведения, никак не меняющиеся с течением времени, к примеру, данные о собственнике интернет-магазина либо ссылочные сведения о использовании интернет-магазина.
2. Сведения с целью генерации страниц, как правило, берутся с баз данных. Базы данных почти постоянно функционируют под управлением сервера и весьма зачастую – на отдельном серверном компьютере. Зачастую также применяется сохранение данных в текстовых файлах, однако это объективно, в основном, для фрагментов Web-страниц (серверные введения).
3. Применение разграничение доступа к интернет-магазину. Разграничение доступа предполагает, что различные посетители интернет-магазина располагают разнообразными полномочиями на доступ к тем или иным данным, опубликованным в интернет-магазине. Таким образом, простые посетители могут только просматривать сведения, в то время как администратор интернет-магазина имеет возможность управления сайтом.
4. Интернет-магазин, использующий разграничение доступа, обязан также учитывать возможность регистрации посетителя. Как правило на интернет-магазинах, посетитель регистрируется на нем, вводя данные о себе на особой странице регистрации, после чего они помещаются в список посетителей Web-сайта.
5. Интернет-магазин, использующий разграничение доступа, обяхан, кроме того учитывать возможность выхода с Web-сайта. При этом серверная программа «забывает», то, что этот посетитель вошел на web-сайт, освобождая память, отведенную для хранения данных, хотя соответствующая запись в списке посетителей, конечно же, сохраняется. Любой посетитель, вошедший на web-сайт, непременно должен с него выйти, для того чтобы освободить системные ресурсы серверного компьютера для других посетителей.

2 Проектирование интернет-магазина

2.1 Выбор инструментов разработки

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

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

Преимуществами языка HTML являются:

• Простота кода - за счет небольшого набора структурных элементов – тегов. Они все пишутся в угловых скобках, напр. <img> и несут некоторую смысловую нагрузку
• Так же очень полезной является возможность форматировать документ без привязки к средствам отображения (это могут быть как монитор компьютера, так экран телефона, или планшет).

Технология DOM являться неотъемлемой частью спецификации HTML5.

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

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

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

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

1. Разметка веб документа
2. Языки программирования и базы данных
3. Графика и файловая система
4. Программы и инструменты

К разметке веб-документа относятся следующие технологии:

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

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

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

1. Барнс Д. Практикум по программированию на JavaScript [Текст] /

Джо Барнс. – Москва: НОУ «Интуит», 2019. – 160 с.

2. Бретт М. PHP и MySQL. Исчерпывающее руководство [Текст] / Бретт Маклафлин. – Санкт-Петербург: Питер, 2012. – 512 с.
3. Быстрое создание сайта [Электронный ресурс]. – Режим доступа: http://modx-forum.ru/blogs/entry/3-быстрое-создание-сайта/ (дата обращения: 10.09.19).
4. Веру Л. Секреты CSS. Идеальные решения ежедневных задач [Текст] / Веру Л. – Санкт-Петербург: Питер, 2016. – 336 с.
5. Виды и типы сайтов – узнайте какой сайт необходим под ваши потребности [Электронный     ресурс]. – Режим доступа: http://webmastermix.ru/raznoe/273-vidy-i-tipy-sajtov.html(дата    обращения: 01.09.2019).               
6. Галерея в MODx. Вывести обложки альбомов и фотографии [Элек- тронный ресурс]. – Режим доступа: https://webstool.ru/galereya-v-modx- vyivesti-oblozhki-albomov-i-fotografii.html (дата обращения: 11.2019).
7. Гизберт Д. PHP и MySQL [Текст] / Гизберт Дамашке. – Москва: НТ Пресс, 2012. – 320 с.
8. Голдстайн А. HTML5 и CSS3 для всех [Текст] / Голдстайн А., Лаза- рис Л., Уэйл Э. – Москва: Вильямс, 2012 – 368 с.
9. Джон Дэкетт HTML и CSS. Разработка и создание веб-сайтов [Текст] / Джон Дэкетт. – Москва: Эксмо, 2014. – 480 с.
10. Дэвид Макфарланд. Большая книга CSS [Текст] / Дэвид Макфар- ланд. – Санкт-Петербург: Питер, 2012. – 560 с.
11. История создания и развития веб-сайтов [Электронный ресурс]. – Режим доступа: http://adminu.ru/2011/11/istoriya-sozdaniya-razvitiya-veb-sajtov/ (дата обращения: 12.19).

12. Как задать смещение между колонками в Bootstrap, поменять их местами и вложить друг в друга [Электронный ресурс]. – Режим доступа: http://ktonanovenkogo.ru/html/bootstrap/kak-zadat-smeshhenie-mezhdu- kolonkami-bootstrap-3-bolshoj-centralnyj-blok.html (дата обращения: 10.19).
13. Лоусон Б. Изучаем HTML5. Библиотека специалиста [Текст] /Б. Лоусон, Р. Шарп. – Санкт-Петербург: Питер, 2013 – 286 с.
14. Настройка прав доступа для контент-менеджера в MODX Revolution [Электронный ресурс]. – Режим доступа: http://webdesign- master.ru/blog/modx/2016-04-04-modx-permissions.html (дата обращения: 20.11.19).
15. Обзор и классификация CMS по категориям [Электронный ресурс].

– Режим доступа: https://habrahabr.ru/post/193168/ (дата обращения: 29.11.19).

16. Основы CSS [Электронный ресурс]. – Режим доступа: http://htmlbook.ru/content/osnovy-css (дата обращения: 25.11.19).
17. Посадка типовой секции Landing Page на MODx с использованием MIGX (добавляемые поля) [Электронный ресурс].Режим доступа:http://webdesign-master.ru/blog/modx/2016-04-21-modx-migx-landing-page- section.html (дата обращения: 11.19).
18. Разбиваем шаблон на чанки в MODx Revolution [Электронный ре- сурс]. – Режим доступа: https://marabar.ru/ustanovka-modx-revolution-i- nastrojka.html (дата обращения: 09.2019).
19. Смирнов Н. Правила создания красивого сайта [Электронный ресурс]. – Режим доступа: http://seoklub.ru/kak_sdelat_krasivyi_sait.html (дата обращения: 11.19).