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

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

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

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

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

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

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

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

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

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

Рекламная.

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

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

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

Сайт должен осуществлять коммерческую деятельность. Оформлять заказы, информировать пользователей 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, во вкладке «Внешний вид» выберем пункт «Настроить», как показано на рисунке ниже: