Разработка сайта интернет-магазина цветов

Содержание:

Введение

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

Из особенностей проекта, хотелось бы отметить:

1. Автономность сайта – web-страница способна окупать стоимость своего размещения, т.к. на нем предусмотрено платное место для рекламы.
2. Удобную и простую навигацию по сайту.
3. Использование CMS-технологии WordPress.
4. Использование бесплатных и удобных плагинов для CMSWordPress.
5. Использование баз данных, для автоматизации обновления каталога товаров

Основная часть

Назначение программы

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

Сайт должен обеспечивать реализацию следующих функций:

Информационная.

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

Рекламная.

Сайт должен содержать информацию для потенциального покупателя:

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

Коммерческая

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

Навигация по разделам и подразделам.

На данной странице осуществляется переход на различные разделы сайта.

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

Пользовательское меню представлено 5 страницами:

• Главная (Главная страница) – эта страница отображает новости, которые интернет-магазин хотел бы рассказать(рис.1).
• О нас – страница с информацией об интернет-магазине.
• Магазин – Страница, где пользователь просматривает каталог товаров, добавляет товар в «Корзину» (рис.2).
• Контакты – Страница, где описывается контактная информация библиотека, а также ее местоположение(рис.3).
• Вакансии – страница, где пользователь может посмотреть открытые вакансии.

рис.1

рис.2

рис.3

Общие требования к сайту

Стилистическое оформление

Стилистическое оформление сайта, соответствует информативному стилю. В основу взято 2 основных цвета:

• Белый;
• Чёрный;
• Серый;

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

Требования к браузеру:

Сайт должен обеспечивать корректное отображение данных в следующих браузерах: InternetExplorer 8.0 и выше (Microsoft), Opera 12.0 и выше (OperaSoftware), Netscape 11.0 и выше (AOLNetscape).

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

Сайт должен быть оптимизирован для просмотра при разрешении 1024*768, 1280*1024 без горизонтальной полосы прокрутки и без пустых (белых) полей для основных типов разрешения.

Мета-теги и контент сайта

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

Анализ исходных данных и выбора программного обеспечения

Анализ выбора программного обеспечения

HTML - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

CMS(Contentmanagementsystem) – это информационная система используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым сайта. Также CMS могут предоставлять набор инструментов для верстки сайта.

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

Так же при выборе ПО рассматривались полноценные среды для верстки, по типу AdobeDreamviewer, Bootstrapи другие, но из-за использования CMS-технологии отпала нужда в использовании дополнительных инструментов.

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

В выше перечисленных программах есть такие недостатки как:

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

Анализ исходных данных

Из собранных исходных данных для создания сайта «Интернет-магазин цветов» можно выделить собранные из интернета новости, которые размещены на странице «Главная». Собранный каталог товаров, имитирующий каталог товаров интернет магазина, на странице сайта «Магазин». Контакты и адрес существующегодистрибьютора для реализации раздела «Контакты». Так же была подготовлена статья о видах деятельности и продукции, продаваемой в интернет-магазине, написана на странице «О нас».

Разработка приложения

Разработка структуры web-страницы

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

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

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

Рисунок 4 Главная страница сайта.

На странице «О нас» размещена краткая информация о продукции и ассортименте интернет-магазина. Блок «О нас» представлен на рисунке 5.

Рисунок 5. О нас.

На странице «Вакансии» будут представлены открытые вакансии(рис.6-7).

Рисунок 6. Страница Вакансии.

Рисунок 7. Страница «Вакансии»(Продолжение).

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

Страница контакты показана на рисунке 8.

Рисунок 8. Страница контакты.

На странице «Магазин» будет отображен каталог товаров интернет-магазина. (Рисунок 9.). Также, при наведении на вкладку меню «Магазин», будет отображаться всплывающее меню, где будут расположены вкладки «Мой аккаунт» (Рисунок 10.), «Оформление заказа» (Рисунок 11-12.) и «Моя корзина» (Рисунок 13.), из которой так же можно будет оформить заказ.

Рисунок 9. «Магазин».

Рисунок 10. «Мой аккаунт».

Рисунок 11. «Оформление заказа».

Рисунок 12. «Оформление заказа» (Продолжение).

Рисунок 13. «Моя корзина».

Описание процесса создания сайта

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

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

• Сервер HTTPS.
• Сервер базы данных.
• Интерпретатор PHP.

В качестве HTTPS сервера будет использоваться Apache. В качестве сервера для базы данных MySQL. Так же будет использоваться готовая серверная сборка XAMPP, которая соответствует нашим требованиям.

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

Далее нам необходимо создать базу данных, со следюущей конфигурацией:

• Название:  своё название;
• Имя пользователя: root;
• Пароль: пустой;
• Сервер БД: localhost.

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

В каталоге уже локального сайта ищем файл wp-config-sample.php и открываем его в текстовом редакторе.

Пишем в этот файл данные созданной ранее базы данных. Файл сохраняем с новым названием wp-config.php.

Проверяем запуск XAMPP. В адресе браузера пишем localhost/install_p.

Видим окна установки WordPress, которые проходим заполняя необходимые поля и формы, как показано ни рисунках ниже:

Далее заходим в контрольную панель WordPress

Для удобства настройки сайта зайдем в коносль и в настройках блоков ставим отметку в поле «На виду», как это показано далее:

Далее нам нужно установить шаблон на наш сайт, для этого переходим во вкладку внешний вид, на контрольной панели WordPress, далее выбираем пункт «Загрузить тему» и перетаскиваем .zip-архив на поле загрузки темы.

Далее ожидаем завершения загрузки шаблона на сайт

Переходим к настройке нашего шаблона, для этого в контрольной панели WordPress, во вкладке «Внешний вид» выберем пункт «Настроить», как показано на рисунке ниже:

Более детальная настройка темы и шаблона находится во вкладке «Themesettings», панели внешнего вида шаблона:

После обработки сайта с помощью инструментов WordPressмы получили итоговый внешний вид:

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

Был изменен «Подвал»сайта (Рисунок 14.)

Рисунок 14. «Подвал» сайта

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

После чего в строке поиска пишем «WooCommerce» и устанавливаем плагин:

После установки нам нужно активировать и настроить плагин. Для этого жмем по кнопке «Активировать»:

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

Первоначальная настройка плагина «WooCommerce» завершена. Он автоматически создаст дополнительные необходимые для его работы страницы в меню сайта и заполнит их:

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

Для полной работоспособности плагина требуется настроить email-рассылку, по стандарту, если все шаги установки плагина и CMSбыли выполнены правильно, то рассылка будет выглядеть корректно, в противном случае, требуется настроить email-рассылку, следующим образом:

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

В итоге получаем красивое, всплывающее меню:

Для добавления товара в каталог требуется перейти во вкладку «Товары» панели WordPress, после чего нажать кнопку «Добавить новый», как это показано ни рисунках ниже:

После чего нужно будет заполнить карточку товара, которая будет содержать:

• Название товара
• Фото товара
• Артикул
• Состояние (В наличии\на складе\по заказу)
• Категория
• Краткое описание
• Цена
• Метки

После заполнения карты товара мы можем посмотреть его на сайте:

Так выглядит заполненная карта товара:

И его отображение на сайте, в каталоге товаров:

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

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

После добавления товаров в корзину, перейдем к оформлению заказа, для этого переходим во вкладку меню «Моя корзина», там будут отображены товары, которые Вы добавляли, следующим образом:

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

Для оформления заказа необходимо будет заполнить следующие поля:

Далее, если заказ принят в обработку, вы увидите электронный чек Вашего заказа:

Для отслеживания заказов внутри сайта, переходим во вкладку «WooCommerce»,где выбираем вложенную вкладку «Заказы». Там у нас отображается список всех заказов, сделанных на сайте.

Заключение

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

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

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

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

Список источников и литературы

Литература

Дуванов А. А. Web-конструирование. – Петербург: 2009. - 384 с.

Едомский Ю. Е. Техника Web-дизайна для студента. – Петербург: 2010. - 491 с.

Крамер Э. HTML: наглядный курс Web-дизайна. - Киев: 2009. - 304 с.

Леонтьев Б. Web-дизайн. Руководство пользователя. - Киев: 2011. - 384 с.

Печников В. Н. Создание Web-страниц и Web-сайтов. - М.: Триумф: 2010. - 370 с.

Роббинс Д. Web-дизайн. Справочник. - "КУДИЦ-ПРЕСС": 2009. - 816 с.

Смирнова И. Е. Начала web-дизайна. –Петербург: 2010. - 491 с.

Интернет-ресурсы

HTML и Web дизайн для начинающих: [Электронный ресурс]. -http://sovet.h1.ru (дата обращения: 29.03.2014)

Основы CSS и HTML: [Электронный ресурс]. - http://www.web-lesson.ru (дата обращения: 1.03.2014)

Создание шаблона сайта с помощью CSS: [Электронный ресурс]. -http://ruseller.com (дата обращения 1.05.2014)

Приложение

Исходный код

Ссылка на дистрибутив WordPress:

https://ru.wordpress.org/download/

Ссылка на дистрибутив XAMPP:

https://www.apachefriends.org/ru/index.html