Разработка интернет-магазина для компании

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

Вот так должна выглядеть структура сайта:

§ Домашняя страница.

§ Страница категорий (рубрик).

§ Страница вывода товаров.

§ Страница сравнения товаров.

§ Страница результатов поиска.

§ «Мой аккаунт» с вложенными страницами:

§ мои финансы;

§ история заказов;

§ персональная информация.

§ «Моя корзина».

§ Страница аутентификации.

§ Создание учетной записи.

§ Страница оформления заказа:

§ cписок адресов;

§ cтоимость доставки;

§ cпособ платежа.

§ оформление заказа на одной страничке.

§ Добавление адреса.

§ Страница доставки.

§ Страница технического обслуживания (сервиса).

§ Список производителей и страничка создания производителя.

§ Список поставщиков и страничка создания поставщика.

§ Страница 404 («Страница не найдена»).

§ «Лидеры продаж».

§ «Новинки».

§ «Текущие акции».

§ Восстановление пароля.

§ Правовое соглашение.

§ Карта сайта.

§ Страница магазинов.

§ Контактная форма.

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

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

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

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

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

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



Рисунок 3.14 - Макет главной страницы сайта.

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



3.3 Разработка сайта на основе CMS

3.3.1 Описание установки CMS PrestaShop

Перед началом установки CMS Prestashop 1.6, на виртуальном хостинге необходимо чтобы некоторые директивы были в следующих состояниях (в файле php.ini):

· register_globals - Off:

· safe_mode - Off;

· upload_max_filesize - "16M";

· magic_quotes_ - Off;

· allow_url_fopen - On.

А также наличие некоторых дополнений к PHP и MySQL, чтобы CMS могла полноценна работать:

o библиотеки GD;

o расширение DOM;

Наличие библиотеки GD позволит Prestashop переработать загружаемые изображения, особенно изменение их размера.

DOM позволяет анализировать XML файлы.

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

Установка происходит с помощью “мастера установщика CMS”, логически простым и понятным, где предлагается заполнить все необходимы поля формы установщика, а также ввести данные (наименование БД, логин, пароль) созданной нами базы данных.

После успешной установки появиться соответствующее сообщение об этом.



3.3.2 Настройка Presta Shop

По умолчанию, настройки CMS не дают выводить сообщения об ошибках и другой отладочной информации пользователю. При разработке нашего интернет-магазина без этого никак и чтобы видеть всю отладочную информацию, необходимо включить режим отладки - изменить значение константы _PS_MODE_DEV_ в файле defines.inc.php на TRUE (DEFINE ( '_PS_MODE_DEV_ ", true ).

CMS Prestashop 1.6 имеет и свои собственные методы отладки, которые позволяют проверить состояние определенной переменной в коде. Чтобы их активировать, необходимо изменить все в том же файле значение константы - _PS_MODE_DEV_ на true. Использование p($variable) и d($variable), является своего рода оберткой метода print_r().

Prestashop имеет три основных конфигурационных файла:

· config.inc.php - основной конфигурационный файл;

· defines.inc.php - содержит постоянные значения CMS, а так же расположение всех папок, файлов;

· smarty.config.inc.php - содержит все настройки Smart связанные с CMS. В виду несовместимости с Prestashop, система кеширования должна всегда отключена($smarty->caching = false;).

3.3.3 Техническая архитектура PrestaShop

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

· объект или данные;

· управление данными;

· дизайн.

Объект - с помощью файлов папки “classes” контролируется доступ к базе данных. Можно представить по следующей структуре (рис 4.5).



Рисунок 3.15 Структура CMS

Принцип архитектуры MVC(Model-View-Controller), только более простой.

Такая архитектура имеет ряд преимуществ, к примеру:

· читабельность кода;

· добавлять и редактировать код намного быстрее;

· графический дизайнер без понимания PHP и верстальщик HTML могут работать с папкой \themes.

MVC представляет собой как “Модель - Вид - Контроллер”, где модель - это взаимодействие с базой данных, вид - интерфейс с которым работает пользователь, его главная задача отобразить данные обработанные моделью, контроллер - это синхронизация между моделью и представлением, занимается обработкой всех пользовательских событий.

3.4 Разработка интерфейса web-сайта

3.4.1 Дизайн web-сайта

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

К таким принципам построения сайта можно отнести как балансировку основных элементов на картинке (фокусирование внимания, контрастность и т.д.).

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

Дизайн веб сайта будет выполнен по маркетинговой формуле “AIDA” - внимание, заинтересованность, желание, действие. Данная формула будет применена не только к сайту целиком, а также к его отдельным страницам, элементам.

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

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

3.4.2 Структура и принцип реализации элементов дизайна сайта

Сайт создавался при помощи html, css, php, javascript, ajax,mysql.

Javascript применялся в тех местах где было необходимо динамически изменять данные. Возможности css позволили придать красивый вид элементам, правила которого описаны в файле stylesheet.css.

При написание программного кода использованы общепринятые “стандарты написания кода для Prestashop”, которые помогли написать код читабельным образом, быть валидным и легко сопровождаемым.



Рисунок 3.16 - файловая структура приложения.

В папке “\image” расположены картинки сайта интернет-магазина Powermatrix54.ru.

В папке “\stylesheet” находится файл с таблицей описанием стилей сайта, в котором описаны все стили (цвет фона сайта, размер шрифта и многое другое). Подключается данный файл с помощью “<link href="catalog/view/theme/next-default/stylesheet/stylesheet.css" rel="stylesheet">” в файле header.tpl. Например, размер шрифта для тегов h1, h2, h3 и т.д зададим в свойствах font-size в пикселях:

h1 {

font-size: 33px;

}

h2 {

font-size: 27px;

}

h3 {

font-size: 21px;

}

h4 {

font-size: 15px;

43

}

h5 {

font-size: 12px;

}

h6 {

font-size: 10.2px;

}

В папке “\template” имеются следующие директории, так сказать скелет сайта:

· account - в котором расположены файлы пользователя:

o account.tpl-страница личного кабинета покупателя;

o address_form.tpl-страница редактирования адреса;

o address_list.tpl-страница адресов;

o download.tpl-страница файлов для скачивания;

o edit.tpl-страница редактирования личной информации покупателя;

o forgotten.tpl-страница восстановления забытого пароля покупателя;

o login.tpl-страница входа / регистрации покупателя;

o newsletter.tpl-страница E-Mail рассылки;

o order_info.tpl-страница просмотра заказа;

o order_list.tpl-страница истории заказов;

o password.tpl-страница изменения пароля;

o register.tpl-страница регистрации;

o return_form.tpl-страница оформления возврата товара;

o return_info.tpl-страница с информацией об определённом возврате;

o return_list.tpl-страница с информацией о совершённых возвратах;

o reward.tpl-страница бонусных баллов;

o transaction.tpl-страница истории финансовых операций покупателя;

o voucher.tpl-страница подарочных сертификатов;

o wishlist.tpl-страница закладок;

· affiliate- в котором расположены файлы партнеров компании:

o account.tpl-страница личного кабинета партнёра;

o edit.tpl-страница редактирования личной информации партнёра;

o forgotten.tpl-страница восстановления забытого пароля партнёра;

o login.tpl-страница входа / регистрации партнёра;

o password.tpl-восстановление пароля партнёра;

o payment.tpl-способы оплаты;

o register.tpl-регистрация нового партнёра;

o tracking.tpl-страница реферальных ссылок партнёра;

o transaction.tpl-история выплат партнёра;

· checkout- в котором расположены файлы корзины и оформления заказа:

o cart.tpl-страница корзины;

o checkout.tpl-оформление заказа;

o confirm.tpl-подтверждение заказа;

o guest.tpl-гостевое оформление заказа;

o guest_shipping.tpl;

o login.tpl-выбор способа оформления заказа;

o payment_method.tpl-способ оплаты;

o register.tpl-страница регистрации через ссылку в корзине;

· common- в котором расположены файлы самого сайта:

o column_left.tpl-левая колонка нашего сайта;

o column_right.tpl-правая колонка нашего сайта;

o content_bottom.tpl-низ средней колонки нашего сайта;

o content_top.tpl-верх средней колонки нашего сайта;

o footer.tpl-низ-подвал;

o header.tpl-верх- шапка нашего сайта;

o home.tlp-главная страница;

o maintenance.tpl-данная страница выводится, когда магазин закрыт;

o success.tpl-выводится после успешной регистрации в магазине и после успешного оформления заказа;

· error- в котором расположен файл об ошибках:

o not_found-запрашиваемая страница не найдена;

· information- в котором расположены файлы с контактной информацией и информационные статьи:

o contact.tpl-контакты -- связаться с нами;

o information.tpl-информационные страницы -- статьи;

o sitemap.tpl-карта сайта;

· product- в котором расположены файлы с каталогом продукции и производителя:

o category.tpl-вывод товарной группы;

o manufacturer.tpl-вывод товаров по производителю;

o product.tpl-вывод одного товара;

o review.tpl-вывод отзывов о товаре на сайте

o search.tpl-поиск и результаты поиска;

o special.tpl-выбор специальных предложений (Special Offers);

· mail- в котором расположен файл об отчетах отправки писем:

o order_confirm.tpl-письмо о подтверждении;

· module- в котором расположены файлы входа в личный кабинет, баннеров, хитов продаж и т.д:

o account.tpl-вход в личный кабинет;

o banner.tpl-отвечает за вывод баннеров;

o bestseller.tpl-выводит хиты продаж;

o carousel.tpl-карусель из баннеров;

o cart.tpl-блок входа в корзину;

o category.tpl-блок со списком категорий;

o currency.tpl-блок с выбором валюты;

o featured.tpl-рекомендуемые товары;

o information.tpl-список ссылок на статьи на сайте, ссылки на карту сайта и контакты;

o latest.tpl-выводит последние поступления;

o slideshow.tpl-слайд шоу из баннеров;

o special.tpl-выводит товар с акциями;

o store.tpl -история посящения;

o welcome.tpl-выводит текст приветствия.

Откуда брать информацию, отвечают контроллеры, расположенные в папке “\catalog\controller\”

Главная страница сайта файл home.tpl, в который подключены все остальные страницы - шапка, левая, правая колонка, тело, подвал сайта:

<?php echo $header; ?>

<div class="container">

<div class="row"><?php echo $column_left; ?>

<?php if ($column_left && $column_right) { ?>

<?php $class = 'col-sm-6'; ?>

<?php } elseif ($column_left || $column_right) { ?>

<?php $class = 'col-sm-9'; ?>

<?php } else { ?>

<?php $class = 'col-sm-12'; ?>

<?php } ?>

<div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?><?php echo $content_bottom; ?></div>

<?php echo $column_right; ?></div>

</div>

<?php echo $footer; ?>

3.4.3 Основные переменные

Все переменные начинаются со слова с подчеркивание, то есть “text”_.

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

· $ base_dir -корневая папка нашего магазина;

· $ base_dir_ssl - корневая папка нашего магазина с использованием протокола HTTPS;

· $ content_dir - корневая папка нашего магазина в зависимости от настроек SSL;

· $ img_ps_dir -корневая папка с изображениями "/ IMG /";

· $ img_dir -папка изображений в текущей директории;

· $ css_dir -CSS папки внутри текущей папки;

· $ js_dir -JavaScript внутри папки нашего сайта;

· $ tpl_dir -тема корневой папки;

· $ modules_dir -модули корневой папки;

· $ MAIL_DIR -корневая папка почты;

· $ lang_iso -текущий язык ISO код;

· $ come_from -предыдущий адрес страницы [абсолютный];

· $ shop_name -название нашего магазина;

· $ cart_qties -общее число товаров в корзине;

· $ сart - содержание корзины;

· $ cookie -cookie;

· $ logged -проверяет зарегистрирован ли пользователь;

· $ page_name -имя текущей страницы;

· $ CustomerName -имя клиента [зависит от cookie];

Переменные категорий:

· $category->name -название текущей категории сайта;

· $category->description -описание текущей категории;

· $category->id_image -id изображения текущей категории;

· $category->link_rewrite -ссылка текущей категории;

· $category->id -id текущей категории;

· $category->id_parent -id вложенных категорий;

· $category->active -активная категория;

· $category->position -позиция категории;

· $category->level_depth -уровень вложенности категории;

· $category->meta_title -meta title категории;

· $category->meta_keywords -ключевые слова категории;

· $category->meta_description -meta описания категории;

· $category->date_add -дата создания категории;

Переменные доступные в header.tpl, которые инициализированы в контроллере - controller\common\header.php

· $title - название магазина;

· $base - адрес сайта;

· $description - описание документа;

· $log_url - адрес текущей страницы, автоматическое формирование значения;

· $logo - адрес логотипа(url);

· $name -- название нашего магазина;

· $home -ссылка на главную страницу;

· $cart - переменная содержащая код модуля cart, которая находится в module/cart. Его HTML код состоит из двух частей:

o Heading -корзина покупок, с обработчиком событий по клику;

o Content - “ничего не куплено(отключена в css файле(“#header #cart.content { display: none }”))”;

· $logged - переменная проверяет зашел ли пользователь или нет (true or false);

· $text_welcome - приглашает войти или зарегистрироваться;

· $account - личный кабинет пользователя;

Переменные доступные “подвалу веб сайта” - footer:

· $informations- состоит из следующих элементов - $informations[$i][`href']-ссылка на статью;

$informations[$i][`title']-название статьи;

(многомерный массив);

· $contact- контакты;

· $voucher -подарочный сертификат;

· $affiliate - партнерская программа, содержит ссылку на страницу “affiliate/account”(форма обратной связи);

· $order - история заказов, при котором если не произведен вход, то будет выполнен редирект на страницу входа пользователя;

3.4.4 Управление cookies

Система управления контентом, для хранения информации о сессии клиентов, администраторов, посетителей использует зашифрованные “куки”. Для чтения и записи используется класс Cookie (/classes/Cookie.php). Для получения доступа внутри CMS, используется $this->context->cookie, с помощью данного кода можно сохранить всю информацию - $this->context->cookie->variable.

Данные хранящиеся в сookie - посетитель/клиент:

· ajax_blockcart_display-работа с блоком корзины;

· checkedTOS- флаг, условия предоставления услуг, принимает аргументы 1 или 0;

· checksum- контрольная сумма cookies;

· customer_firstname- имя клиента;

· customer_lastname- фамилия клиента;

· date_add- время создания cookies;

· email-email клиента;

· id_cart-id корзины клиента;

· id_connections-id соединения клиента;

· id_customer-id клиента когда он вошел в систему;

· id_guest-id клиента когда он не вошел в систему;

· id_wishlist -id желаний клиента, отображается в блоке желаний;

· last_visited_category-id последней посещенной категории;

· logged-вошел ли клиент в систему;

· passwd-MD5 хэш _COOKIE_KEY_ в config/settings.inc.php и пароль клиента используется для входа;

· Viewed-идентификаторы недавно просмотренных товаров в виде списка разделенного запятыми;

Данные хранящиеся в сookie - администратора, работника сайта интернет магазина:

· Passwd-MD5 хэш _COOKIE_KEY_ в config/settings.inc.php и пароль администратора используется для входа;

· Lastname-фамилия администратора;

· Profile-ID профиля, который определяет, к каким вкладкам сотрудник может получить доступ;

· id_employee-ID сотрудника;

· Firstname-имя сотрудника;

· Email-email сотрудника используется для входа;

· date_add-дата создания cookies (YYYY-MM-DD HH:MM:SS формат);

· Checksum-контрольная сумма cookies;

3.5 Описание структуры хранения данных

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

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

В моей базе данных сайта таблицы начинаются с префикса “oc_”, все имена таблиц в нижнем регистре. Для каждой директории создана своя таблица в базе данных с определенными настройками.

Например, таблица при заказе пользователем товара, информация отображается в таблице oc_addres (рис 4.8):



Рисунок 3.17 - Таблица

Рисунок 3.18 - таблица oc_addres.



Рисунок 3.19 - Структура таблицы oc_addres.

Таблица зарегистрированных пользователей, логин, дата, с какого IP адреса происходила регистрация на нашем сайте, находится в oc_customer_login:

Рисунок 3.20 - Таблица зарегистрированных пользователей.

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



Рисунок 3.21 - Пользователи и статистика.

3.6 Классификация пользователей проекта

На разработанный сайт могут войти три типа пользователей:

1) Гость сайта.

2) Зарегистрированный пользователь сайта.

3) Зарегистрированный пользователь сайта в качестве партнера компании.

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

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

Зарегистрированный пользователь сайта в качестве партнера компании, может по партнерской программе интернет-магазина Powermatrix54.ru совершенно бесплатно получать дополнительный доход путём размещения ссылок (привлечение клиентов) как на весь наш интернет-магазин Powermatrix54.ru, так и на отдельные товары. Каждая покупка, совершённая по партнерской ссылке, принесёт доход пользователю. Стандартный размер комиссии-составляет определенный процент. В своем личном кабинете “партнер” может просматривать свою историю выплат, рефералы и другое.

Управлением сайтом (наполнение контентом, фотографиями, описанием, условием, редактированием отдельных категории и много другое) может заниматься только администратор сайта, через систему управления контентом, вход, который осуществляется через административную панель “powermatrix54.ru/admin/”.



4. Описание разработанного приложения

4.1 Описание интерфейса пользователя

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

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

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

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



Рисунок 4.1 - Главная страница_1

Далее, в виде двух картинок - “акции и скидки”, которые представляют собой ссылки на страницы с описанием проводимых акций и скидок.

Под картинками на странице сайта находятся два блока по четыре позиции товара в каждом, это “Рекомендуемые товары” и ”Хиты продаж”. С картинкой о товаре, цене и кратким описанием данной продукции

Рисунок 4.2 - Главная страница_2



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

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

Рисунок 4.3 - Главная страница_3. 57

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



Рисунок 4.4 - Описание товар.

После того как добавили товар в корзину, можно ее открыть и выбрать меню “оформить заказ” (рис. 4.5- Корзина), заполнив нужные поля (рис. 4.6 - Оформление заказа) или же зарегистрироваться в личном кабинете.

Рисунок 4.5 - Корзина покупателя. 58



Рисунок 4.6. - Оформление заказа.

Перейдя по ссылки “личный кабинет”, в котором предоставляется возможность - отслеживать заказы, смотреть различные истории (платежей и т.д.). А также, если вы зарегистрированы, пройти авторизацию (рис. 4.7- Личный кабинет).

Рисунок 4.7 - Личный кабинет.

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

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

Рисунок 4.8 - Карта сайта.

В интернет - магазине реализован механизм дарения подарочного сертификата будь то на день рождения, рождество и т.д., сайт предлагает посетителю перейти по ссылки “Подарочные сертификаты” и заполнить нужные поля помеченные красной звездочкой. Далее, после оплаты, подарочный сертификат отправиться на почту своего обладателя. Такая технология, выделяет сайт по сравнению с другими, что делает его более современным (рис 4.9 - подарочный сертификат).



Рисунок 4.9 - подарочный сертификат.

4.2 Описание интерфейса администратора сайта

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

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



Рисунок 4.10 - Администраторская панель управления.

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

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

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

На вкладке “Продажи”, администратор полностью контролирует процесс обработки заказов, может изменять статус “доставлено” на “в процессе” и другое, изменять информацию о владельце товара (его ФИО, адрес т.д.), просмотреть перечень заказанных товаров, на какую сумму, распечатать квитанцию о покупки (Рис 4.12 - Продажи), контролировать возвраты.



Рисунок. 4.11 - Каталог товаров.

Рисунок 4.12 - Продажи.



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

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

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

Одним из главных и полезных для администратора является так же осуществления “бэкапа” или восстановления базы данных сайта всех таблиц, или же выбрать только необходимые (поставить, убрать галочку с нужной таблицы) в автоматическом режиме (Рисунок 6.4 - Бэкап/Восстановление данных).

Рисунок 4.13 - Покупатели.



Рисунок 4.14 - Бэкап/Восстановление данных.

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

Формирование отчетов о продажи, возвратов, купленных товаров, администратору поможет вкладка “Отчеты”, в которой интуитивно просто представлено, что сколько куплено товаров, в каком количестве, наименование, на какую сумму (рис 4.15 - Отчеты). Так же видеть полную картину происходящего, какие и откуда посетители находятся на нашем сайте в онлайн, его IP адрес, откуда с какого интернет ресурса перешел, его последняя страница нашего сайта, с которой он покинул магазин.

Рисунок 4.15 - Отчеты.



Хотел обратить внимание на визуальный “виджет отчет” в процентном соотношении, который находится постоянно на виду и работает в онлайн режиме, сигнализируя о заказах, которые находятся в обработке, выполненных заказов (рис. 4.16 - Виджет заказов).

Рисунок. 4.16 - Виджет заказов.

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



Заключение

сайт интернет интерфейс архитектура

Выпускная квалификационная работа бакалавра “разработка и реализация сайта интернет-магазин” компании “Powermatrix54” по продаже БАД (биологически активные добавки), ставил целью информирование и реализацию товаров через интернет.

В ходе выполнение работы, поставленные цели и задачи были полностью выполнены:

1) создан удобный и интуитивно-понятный интерфейс интернет - магазина;

2) по итогам проведенного анализа ведущих сайтов России, принципов построения информационных систем, сайт спроектирован с учетом требований современных стандартов и правилам разработки web-приложений, маркетинга, ведение бизнеса в интернете;

3) оценены затраты на создание и размещение данного ресурса;

4) осуществлен анализ программных средств построения web сайта;

5) разработана структура хранения данных;

6) детально изучена и реализована система управления контентом;

7) подробно описан интерфейс пользователя, а так же администратора сайта;

В процессе выполнения поставленных задач, дополнительно потребовалось изучение как:

- информационный маркетинг, изучение рынка;

- производство товаров главной компании “Powermatrix”;

- реклама, сервис и послепродажная деятельность;

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

Для управление содержимым сайта выбрана современная и гибкая CMS “Prestashop”, использование которой у администратора магазина не вызовет трудностей, а разработчику позволит легко встраивать дополнения, быстрая и удобная обработка заказов, формирование отчетов о купленных, доставленных товарах, о всех действиях клиентов сайта.

В целях обеспечения безопасности от несанкционированного доступа к сайту, а так же его круглосуточной бесперебойной работы, размещён на платном хостинге “shneider-host.ru”, выбор которого осуществлялся согласно техническим и финансовым требованиям.

В настоящее время в результате работы интернет - магазина “Powermatrix54.ru”, исходя из статистики сайта - продано 23 штуки различного вида товара. Компания “Powermatrix54” имеет 15 зарегистрированных пользователя в базе данных сайта, а так же посещаемость в среднем 5-7 человек за сутки. Так же планируется привлечение еще большего количества посещения пользователей, за счет продвижения интернет - магазина с помощью социальных сетей, выведение в лидирующие позиции по определенным запросам поисковых систем как Яндекс, Гугл, Рамблер.



Список использованных источников

1. Web Database Application with PHP and MySQL, 2nd Edition By David Lane, Hugh E. Williams. © O'Reilly, May 2004. ISBN: 0-596-00543-1.

2. Кузнецов М. В., Симдянов И. В. PHP 5/6. - СПб.: БХВ - Петербург, 2010. - 1024с.

3. Дмитриева М. В. JavaScript. Быстрый старт. - СПб.: БХВ - Петербург, 2002. - 336с.

4. Роберт И.В. Современные информационные технологии в образовании: дидактические проблемы, перспективы использования.- М.: Школа-Пресс, 1994. - 205с.

5. Концепция информатизации и развития системы образования Республики Казахстан на рубеже веков.- Алматы, 1997.- 48с.

6. Пауэлл Т.А. Полное руководство по HTML.- Мн.: Попурри, - 2001. - 912с.

7. Крамер Э. HTML. - СПб: «Диалектика», 2001. - 426c.

8. Николенко Д.В. Практические занятия по Java Script.- М.: Наука и техника, 2000. - 128с.

9. Глушаков С.В., Ломотько Д.В., Мельников И.В. Работа в сети Internet. - Харьков: Фолиант, - 2000. - 346с.

10. Дьяконов В.П. Internet Настольная книга пользователя. - М.: АСТ-Пресс, 2000. - 640с.

11. Шапошников И.В. Интернет программирование. - СПб.: BHV, - 2000. - 224с.

12. Бад Смит, Артур Бибек. Создание Web-страниц для «чайников». - М.: изд-во «Диалектика», 2001. - 398с.

13. Люк Веллинг, Лора Томсон “Разработка Web - приложений с помощью PHP и MySQL”. Издательство “Вильямс” 2003г. Москва Санкт - Петербург, Киев.

14. Джон Дакетт «Основы веб-программирования с использованием HTML, XHTML и CSS» 2010 г. Издательство: Эксмо, - 768 с.

15. Робин Никсон. Создаем вебсайты с помощью PHP, MySQL и JS. - М.: O'reilly, 2011г. - 497с. Издательство: Эксмо, - 768 с.



Приложение А

Главная страница сайта:

<?php echo $header; ?>

<div class="container">

<div class="row"><?php echo $column_left; ?>

<?php if ($column_left && $column_right) { ?>

<?php $class = 'col-sm-6'; ?>

<?php } elseif ($column_left || $column_right) { ?>

<?php $class = 'col-sm-9'; ?>

<?php } else { ?>

<?php $class = 'col-sm-12'; ?>

<?php } ?>

<div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?><?php echo $content_bottom; ?></div>

<?php echo $column_right; ?></div>

</div>

<?php echo $footer; ?>

Тело сайта:

<!DOCTYPE html>

<!--[if IE]><![endif]-->

<!--[if IE 8 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie8"><![endif]-->

<!--[if IE 9 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie9"><![endif]-->

<!--[if (gt IE 9)|!(IE)]><!-->

<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">

<!--<![endif]-->

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title><?php echo $title; if (isset($_GET['page'])) { echo " - ". ((int) $_GET['page'])." ".$text_page;} ?></title>

<base href="<?php echo $base; ?>" />

<?php if ($description) { ?>

<meta name="description" content="<?php echo $description; if (isset($_GET['page'])) { echo " - ". ((int) $_GET['page'])." ".$text_page;} ?>" />

<?php } ?>

<?php if ($keywords) { ?>

<meta name="keywords" content= "<?php echo $keywords; ?>" />

<?php } ?>

<meta property="og:title" content="<?php echo $title; if (isset($_GET['page'])) { echo " - ". ((int) $_GET['page'])." ".$text_page;} ?>" />

<meta property="og:type" content="website" />

<meta property="og:url" content="<?php echo $og_url; ?>" />

<?php if ($og_image) { ?>

<meta property="og:image" content="<?php echo $og_image; ?>" />

<?php } else { ?>

<meta property="og:image" content="<?php echo $logo; ?>" />

<?php } ?>

<meta property="og:site_name" content="<?php echo $name; ?>" />

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />

<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />

<link href="catalog/view/theme/next-default/stylesheet/stylesheet.css" rel="stylesheet">

<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

<script type="text/javascript" src="catalog/view/javascript/fast_order.js"></script>

<link rel="stylesheet" type="text/css" href="catalog/view/theme/fancycart/stylesheet/stylesheet.css" />

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/fast_order.css" />

<?php foreach ($styles as $style) { ?>

<link href="<?php echo $style['href']; ?>" type="text/css" rel="<?php echo $style['rel']; ?>" media="<?php echo $style['media']; ?>" />

<?php } ?>

<script src="catalog/view/javascript/common.js" type="text/javascript"></script>

<?php foreach ($links as $link) { ?>

<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />

<?php } ?>

<?php foreach ($scripts as $script) { ?>

<script src="<?php echo $script; ?>" type="text/javascript"></script>

<?php } ?>

<?php foreach ($analytics as $analytic) { ?>

<?php echo $analytic; ?>

<?php } ?>

<script src="catalog/view/javascript/next-default/nextmenufix.js" type="text/javascript"></script>

</head>

<div id="my_cart"><?php echo $cart; ?></div>

<nav id="top">

<div class="container">

<?php echo $currency; ?>

<?php echo $language; ?>

<div id="top-link" class="nav pull-left">

<ul class="list-inline">

<li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm"><?php echo $text_account; ?></span> <span class="caret"></span></a>

<ul class="dropdown-menu dropdown-menu-left">

<?php if ($logged) { ?>

<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>

<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>

<li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>

<li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>

<li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>

<?php } else { ?>

<li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>

<li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>

<?php } ?>

</ul>

</ul>

</div>

<div id="top-links" class="nav pull-right">

<ul class="list-inline">

<li><a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_wishlist; ?></span></a></li>

<li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_shopping_cart; ?></span></a></li>

<li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_checkout; ?></span></a></li>

</ul>

</div>

</div>

</nav>

<header>

<div id="top2">

<div class="container">

<div class="row">

<div class="col-sm-3">

<div id="logo">

<?php if ($logo) { ?>

<?php if ($home == $og_url) { ?>

<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />

<?php } else { ?>

<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>

<?php } ?>

<?php } else { ?>

<!--h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1-->

<?php } ?>

<div class='data_name tagline'><span class="name tagline"><?php echo $comment; ?></span></div>

</div>

</div>

<div class="col-sm-3">

<div class='phone'><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class=""><?php echo $telephone; ?></span></div>

<div class='data_open'><i class="fa fa-clock-o" aria-hidden="true"></i> <span class=""><?php echo $open; ?></span></div>

</div>

<div id="md-size" class="col-sm-3"><?php echo $search; ?>

</div>

</div>

</div>

</div>

<link rel="stylesheet" href="https://cdn.callbackkiller.com/widget/cbk.css">

<script type="text/javascript" src="https://cdn.callbackkiller.com/widget/cbk.js?wcb_code=4e2f8729aac86cbb1f0cf083732a2e9a" charset="UTF-8" async></script>

<!-- Cleversite chat button -->

<script type='text/javascript'>

(function() {

var s = document.createElement('script');

s.type = 'text/javascript';

s.async = true;

s.charset = 'utf-8';

s.src = '//cleversite.ru/cleversite/widget_new.php?supercode=1&referer_main='+encodeURIComponent(document.referrer)+'&clid=26079kRdDH&siteNew=34254';

var ss = document.getElementsByTagName('script')[0];

ss.parentNode.insertBefore(s, ss);

})();

</script>

<!-- / End of Cleversite chat button -->

</header>

<?php if ($categories) { ?>

<div id="top3">

<div class="container">

<nav id="menu" class="navbar">

<div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>

<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>

</div>

<div class="collapse navbar-collapse navbar-ex1-collapse">

<ul class="nav navbar-nav">

<?php foreach ($categories as $category) { ?>

<?php if ($category['children']) { ?>

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>

<div class="dropdown-menu">

<div class="dropdown-inner">

<?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>

<ul class="list-unstyled">

<?php foreach ($children as $child) { ?>

<li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>

<?php } ?>

73

</ul>

<?php } ?>

</div>

<a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>

</li>

<?php } else { ?>

<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>

<?php } ?>

<?php } ?>

</ul>

</div>

</nav>

</div>

</div>

<?php } ?>

<div id="top4">

<div class="slayders">

<?php global $registry; $elements_places = $registry->get('elements_places'); if (!empty($elements_places['post_header'])) { ?>

<?php echo implode('', $elements_places['post_header']); ?>

<?php } ?>

</div>

</div>

<!-- BEGIN JIVOSITE CODE {literal} -->

<script type='text/javascript'>

(function(){ var widget_id = 'lQIKwqIolc';var d=document;var w=window;function l(){

var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>

<!-- {/literal} END JIVOSITE CODE -->

Подвал сайта:

<div id="next-map">

<div class="maps">

<?php global $registry; $elements_places = $registry->get('elements_places'); if

(!empty($elements_places['pre_footer'])) { ?>

<?php echo implode('', $elements_places['pre_footer']); ?>

<?php } ?>

</div>

</div>

<footer>

<div class="container">

<div class="row">

<?php if ($informations) { ?>

<div class="col-sm-3">

<h5><?php echo $text_information; ?></h5>

<ul class="list-unstyled">

<?php foreach ($informations as $information) { ?>

<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>

<?php } ?>

</ul>

</div>

<?php } ?>

<div class="col-sm-3">

<h5><?php echo $text_extra; ?></h5>

<ul class="list-unstyled">

<li><a href="<?php echo $search; ?>"><?php echo $text_search; ?></a></li>

<li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>

<li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>

<li><a href="<?php echo $compare; ?>"><?php echo $text_compare; ?></a></li>

<li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>

<li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>

<li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>

</ul>

</div>

<div class="col-sm-3">

<h5><?php echo $text_account; ?></h5>

<ul class="list-unstyled">

<li><a href="<?php echo $account; ?>"><?php echo $text_account;

?></a></li>

<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>

<li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>

<li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>

</ul>

<h5><?php echo $text_service; ?></h5>

<ul class="list-unstyled">

<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>

<li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>

</ul>

</div>

<div class="col-sm-3">

<h5><?php echo $meta_title; ?></h5>

<div class="data-footer">

<strong><!--?php echo $text_telephone; ?--></strong>

<p><i class="fa fa-phone"></i> <?php echo $telephone; ?></p>

<strong><!--?php echo $text_address; ?--></strong>

<p><i class="fa fa-globe"></i> <?php echo $address; ?></p>

<strong><!--?php echo $text_email; ?--></strong>

<p><a target="_blank" href="mailto:<?php echo $email; ?>"><i class="fa fa-envelope"></i> <?php echo $email; ?></a></p>

<strong><!--?php echo $text_open; ?--></strong>

<!--p><i class="fa fa-clock-o"></i> <?php echo $open; ?></p-->

<p class="short-description"><?php echo $meta_description; ?></p>

</div>

</div>

</div>

<hr>

<p>"Интернет-магазин "PowerMatrix"

<br> "Новосибирск 2016"

</br>

</p>

<div id='updown' class="hidden-xs">

<button id="up" class='updown' title='Вверх'><i class="fa fa-angle-up" aria-hidden="true"></i></button>

<button id="down" class='updown' title='Обратно'><i class="fa fa-angle-down" aria-hidden="true"></i></button>

</div>

</div>

</footer>

<!--

</body></html>



Приложение B

Корзина покупателя:

<div id="cart" class="btn-group btn-block">

<button type="button" data-toggle="dropdown" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total"><?php echo $text_items; ?></span></button>

<ul class="dropdown-menu pull-right">

<?php if ($products || $vouchers) { ?>

<li>

<table class="table table-striped">

<?php foreach ($products as $product) { ?>

<tr>

<td class="text-center"><?php if ($product['thumb']) { ?>

<a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-thumbnail" /></a>

<?php } ?></td>

<td class="text-left"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>

<?php if ($product['option']) { ?>

<?php foreach ($product['option'] as $option) { ?>

...