Разработка прототипа сайта Интернет-магазина средствами web-программирования

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

Рисунок 3.4 — Диаграмма вариантов использования для администратора.

Описание после прохождения авторизации на сайте:

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

Просмотр стартовой страницы заходя на сайт сразу попадаешь на стартовую страницу.

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

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

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

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

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

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

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

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

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

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

Редактирование раздела Админ-панель. Перейдя в данный раздел пользователь может поменять настройки всего сайта.

2. Диаграмма деятельности для прецедента «Редактирование раздела клиенты в Админ-панель» администратором Рисунок 3.5 — Диаграмма деятельности.

3. Диаграммы последовательностей для каждого прецедента.

4. Диаграмма компонентов Рисунок 3.6 — Диаграмма компонентов.

Описание компонентов:

Form1 — Стартовая страница.

Form2 — Раздел: Статистика.

Form3 — Раздел: Крупная техника.

Form4 — Раздел: Мелкая техника.

Form5 — Раздел: Все для кухни.

Form6 — Раздел: Заказы.

Form7 — Раздел: Админ-панель.

5. Диаграмма развертывания Рисунок 3.7 — Диаграмма развертывания.

3.

2. Разработка графического дизайна web сайта.

Рисунок 3.8 — Модель графического пользовательского интерфейса.

3.

3. Моделирование и создание web сайта.

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

Для начала зарегистрируемся на сайте: shneider-host.ru. На котором возьмём бесплатное имя сайта:

http://stud-test.shn-host.ru/, далее оплатим размещения на сайте.

Далее установим CMS Joomla 2.5 [44].

Рисунок 3.9 — Установка CMS Joomla.

Далее перейдет в админ. часть сайта.

Рисунок 3.10 — Админ. часть сайта.

Далее выберем понравившийся шаблонах Рисунок 3.11 — Выбор шаблона.

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

Рисунок 3.12 — Изменение дизайна.

Далее создадим материалы для нашего сайта через менеджер материалов.

Рисунок 3.13 — Размещение материалов.

После этого создадим меню и каждый его пункт привяжем к созданному материалу.

Рисунок 3.14 — Создание меню и привязка на материалы.

Далее нам необходимо установить модуль VirtueMart для нашего интетнет-магазина. Для этого скачаем модуль, установим и настроим его.

Рисунок 3.15 — VirtueMart.

Затем создадим группы товаров и добавим товар.

Рисунок 3.16 — Создание групп товаров и добавление товара.

После всех манипуляций у нас получился следующий вид сайта:

Рисунок 3.17 — Итог.

3.

4. Подключение системы электронных платежей Robokassa.

Существует два варианта подключения:

1. Полуавтоматический режим.

Очень простой способ, но имеет один существенный недостаток — после оплаты заказа покупателем статус товара не изменяется на «Оплачен» автоматически. Его должен изменить администратор магазина (после оплаты администратору магазина приходит на e-mail письмо от ROBOKASSA, что произведена оплата заказа с порядковым номером N. После этого администратор должен зайти в управление заказами, найти заказ N и изменить его статус на «Оплачен») [30]. С одной стороны, этот режим хорош тем, что все операции, связанные с деньгами и товаром, контролируются человеком, что, в целом, исключает возможность ошибки. С другой стороны, довольно неудобно постоянно менять статусы вручную. К тому же это нужно делать довольно оперативно, т.к. до смены статуса покупателю не придет письмо о подтверждении оплаты, и он может не понять прошла оплата удачно или нет.

В VirtueMart перейдем в «Магазин» -> «Способы оплаты». После чего появится список с доступными способами оплаты.

Рисунок 3.18 — Список способов оплаты.

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

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

Рисунок 3.19 — Добавления способа оплаты.

Заполняем ее следующим образом:

Название способа оплаты: ROBOKASSA.

Код: ROBO.

Класс имени платежа: ps_payment.

Способ оплаты: HTML-форма (например, для PayPal).

Группа покупателей: default.

Далее — по желанию.

После этого переходим на вкладку «Настройки» (смотрите самый верх заполняемой формы) и в поле «Дополнительная информация по платежу» вводим следующий код [25]:

<?

// 1.

// Оплата заданной суммы с выбором валюты на сайте мерчанта.

// Payment of the set sum with a choice of currency on merchant site.

// регистрационная информация (логин, пароль #1).

// registration info (login, password #1).

$mrh_login = «логин в ROBOKASSA» ;

$mrh_pass1 = «пароль#1 в ROBOKASSA» ;

// номер заказа.

// number of order.

$inv_id = $db->f («order_id»);

// описание заказа.

// order description.

$inv_desc = «ROBOKASSA Advanced User Guide» ;

// сумма заказа.

// sum of order.

$out_summ = $db->f («order_total»);

// тип товара.

// code of goods.

$shp_item = 1;

// предлагаемая валюта платежа.

// default payment e-currency.

$in_curr = «PCR» ;

// язык.

// language.

$culture = «ru» ;

// кодировка.

// encoding.

$encoding = «utf-8» ;

// формирование подписи.

// generate signature.

$crc = md5(«$mrh_login:$out_summ:$inv_id:$mrh_pass1:Shp_item=$shp_item»);

// HTML-страница с кассой.

// ROBOKASSA HTML-page.

print «<html><script language=JavaScript «.

" src='.

https://www.roboxchange.com/mrh_summpreview.asp?". «MrchLogin=$mrh_login&OutSum=$out_summ&InvId=$inv_id&IncCurrLabel=$in_curr» .

" &Desc=$inv_desc&SignatureValue=$crc&Shp_item=$shp_item" .

" &Culture=$culture&Encoding=$encoding'></script></html>" ;

?>

После этого сохраняем внесенные настройки. Все. Модуль оплаты через ROBOKASSA в полуавтоматическом режиме установлен.

Хочу заметить, что все будет работать корректно только после активации аккаунта в ROBOKASSA.

2. Автоматический режим.

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

При настройке модуля нам понадобятся следующие данные:

Пароль #1: пароль № 1 в личном кабинете ROBOKASSA

Пароль #2: пароль № 2 в личном кабинете ROBOKASSA.

При настройке ROBOKASSA следующие:

Result URL:

http:// stud-test.shn-host.ru/administrator/components/ com_virtuemart/notify_rk.php.

Success URL:

http:// stud-test.shn-host.ru/administrator/components/ com_virtuemart/succes_rk.php.

Fail URL:

http:// stud-test.shn-host.ru/administrator/components/ com_virtuemart/succes_rk.php.

Метод отсылки данных по Result URL: POST.

Метод отсылки данных по Success URL: POST.

Метод отсылки данных по Fail URL: POST.

Форма с заполняемыми данными показана на рисунке (раздел «Администрирование»).

Рисунок 3.20 — Мерчант.

После настройки аккаунта ROBOKASSA нужно внести данные для авторизации в файлы модуля:

notify_rk.php: пароль #2 в 3 и 260 строке.

succes_rk.php: пароль #1 в 4 строке и доменное имя в 28 строке.

ps_rk_out.php: логин и пароль #1 в 24 и 25 строках После того, как файлы отредактированы, их нужно добавить на сайт в соответствующие папки (можно просто скопировать папку Administrator в корень сайта. Файлы попадут на нужные места). Далее переходим к настройке модуля в VirtueMart.

Для настройки модуля переходим к списку модулей оплаты «Магазин» -> «Способы оплаты» и добавляем новый модуль. Форму заполняем следующим образом:

Название способа оплаты: ROBOKASSA.

Код: rk.

Класс имени платежа: ps_robokassa (появится после добавления файлов модуля на сайт) Способ оплаты: HTML-форма (например, для PayPal).

Группа покупателей: default.

Далее — по желанию.

После этого переходим на вкладку «Настройки» (смотрите самый верх заполняемой формы), заполняем появившиеся поля и в поле «Дополнительная информация по платежу» вводим следующий код:

<?php require_once (CLASSPATH. 'payment/ps_rk_out.php');?>

На этом настройка закончена. Остается только все проверить и протестировать оплату. Все будет работать корректно только после активации аккаунта в ROBOKASSA.

3.

5. Администрирование web сайта.

Администрирование осуществляется через раздел администратора, все это было показано при создании сайта. Через данную панель управления осуществляется настройка, удаление и добавление материалов/компонентов. Если же необходимо сделать бэкап сайта, то необходимо перейти в меню хостинга и уже там выбрать пункт бэкап. И уже там отдельно сохранить сайт и базу данных. Таким образом в случае сбоя можно легко восстановить все из бекапа. Так же при необходимости если сайт увеличится в объеме или же количество посещений сильно возрастет, что сайт временами станет недоступным, то на хостинге можно сменить текущий тариф и таким образом без перестройки сайта продолжить работу сайта без сбоев. В крайнем случае если качество предоставляемых услуг хостинга упадет, то можно переехать на новый хостинг.

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

Заключение

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

В первой главе были рассмотрены теоретические аспекты, касающиеся принципов построения интернет-магазина.

Во второй главе был проведен анализ средств и технологий разработки интернет-магазина.

В третей главе выполнены работы по созданию проекта сайта.

По итогам работы можно сформулировать следующие выводы:

Создание интернет-магазина на CMS Joomla позволяет разрабатывает и создавать системы с разным уровнем сложности. Также есть возможность подключения различных библиотек, делать вставка кода на php, java. То есть используя данную CMS можно создать практически любое Web-приложение.

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

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Боггс Уэнди, Боггс Майкл UML и Rational Rose; Лори —, 2015. — 600 c.

Буч, Г.; Рамбо, Д.; Джекобсон, А. UML. Руководство пользователя; М.: ДМК Пресс; Издание 2-е, стер. — Москва, 2014. — 432 c.

Вельбицкий И. В. Технология программирования. Киев, 1984.

Грейди Буч, Джеймс Рамбо, Айвар Джекобсон. UML руководство пользователя. М.: ДМ К, 2000.

Иванова Г. С. Технология программирования. М.: Изд-во МГТУ им. Баумана, 2002*.

Информационные технологии и управление предприятием [Электронный ресурс]. — 2014. — Режим доступа: [.

http://coollib.net/b/240 918/read].

История развития сайтостроения: Журнал СА 7.2015 — Режим доступа: [.

http://www.samag.ru/archive/article/2150].

Леоненков А. Самоучитель UML; БХВ-Петербург — Москва, 2014. — 432 c.

Леоненков Александр Самоучитель UML 2; БХВ-Петербург — Москва, 2015. — 576 c.

Леоненков.

А. В. Самоучитель UML. СПб.: BHV, 2006.

Мюллер, Р.Дж. Базы данных и UML. Проектирование; Лори, 2015. — 420 c.

Пайлон Д., Питмен Н. UML 2 для программистов; Питер — Москва, 2014. — 240 c.

Сайт студии WEB дизайна Divaew.ru. Создание и продвижение сайтов. — Режим доступа: [.

http://divaew.ru/].

Структура сайтов-Hostinfo — Режим доступа: [.

http://hostinfo.ru/articles/408].

What is Content Management System and what is a Content Management System or CMS? — Режим доступа: [.

http://www.contentmanager.eu.com /history.htm].

WordPress — Режим доступа: [.

http://ru.wordpress.org/].

Актив-веб/Разработка сайтов в Магнитогорске — Режим доступа: [.

http://aktiv-web.ru/].

Бизли, Дэвид Python. Подробный справочник/Дэвид Бизли. — М.: Символ-плюс, 2014. — 864 c.

Биржа сайтов и доменов Teldri — Режим доступа: [.

http://www.telderi.ru/ru/viewsite/100 644].

Веб дизайн студия Kolibri — Создание и продвижение сайтов, реклама в интернете — Режим доступа: [.

http://kolibri-group.ru/].

Веб студия PRO100Studio — Режим доступа: [.

http://pro100studio.ru/].

Веб-студия Prime — Режим доступа: [.

http://www.studio-web.ru/].

Веб-фреймворк: Zope (Zope Object Publishing Environment) среда публикации объектов Zope — объектно-ориентированный сервер приложений /Zope — Режим доступа: [.

http://zope.org/].

Всё о веб-дизайне — Режим доступа: [.

http://wseweb.ru/diz/obzorcms.htm].

Гилмор, В. PHP 4. Учебный курс: Учеб.

пособие/ В. Гилмор. — СПб. Питер, 2015.

Гифт, Н. Python в системном администрировании UNIX и Linux/Н. Гифт. — М.: Символ-плюс, 2014. — 345 c.

Головатый, А. Django. Подробное руководство/А. Головатый. — М.: Символ-плюс, 2014. — 535 c.

Дюбуа, П. MySQL: Учеб.

пособие/ П.Дюбуа. — М Вильямс, 2015.

Информационные технологии и управление предприятием [Электронный ресурс]. — 2014. — Режим доступа: [.

http://coollib.net/b/240 918/read].

История развития сайтостроения: Журнал СА 7.2015 — Режим доступа: [.

http://www.samag.ru/archive/article/2150].

Кодировка страниц. — Режим доступа: [.

http://www.antula.ru/pagecode.htm].

Косарев, А.Ф. PHP в веб-дизайне: Учебное пособие/ А. Ф. Косарев -СПб BHV, 2016.

Лаборатория Веб-программистов. — Режим доступа: [.

http://dklab.ru].

Марк, Лутц Изучаем Python/Лутц Марк. — М.: Символ-плюс, 2014. — 397 c.

Обзор CMS (систем управления контентом) — Режим доступа: [.

http://wseвеб.ru/diz/obzor-cms.htm].

Описание Wordpress. — Режим доступа: [.

http://www.advfor.ru/article/opisanie-cms-wordpress/].

Прохоренок, Н. А. Python. Самое необходимое (+ DVD-ROM)/Н.А. Прохоренок. — М.: БХВ-Петербург, 2014. — 416 c.

Разработка веб-сайта с использованием CMS Plone. — Режим доступа: [.

http://window.edu.ru/resource/385/57 385/files/Mbogo_Plone_web.pdf].

Рейтинг Рунета — для выбора лучших веб-студий, SEO-компаний, CMS — Режим доступа: [.

http://www.ratingruneta.ru/].

Россум, Г. Язык программирования Python/Г. Россум, Ф. Л. Дж. Дрейк, Д. С. Откидач и др. — М.: [не указано], 2015. — 169 c.

Сайт студии WEB дизайна Divaew.ru. Создание и продвижение сайтов. — Режим доступа: [.

http://divaew.ru/].

Саммерфилд, М. Программирование на Python 3. Подробное руководство/М. Саммерфилд. — М.: Символ-плюс, 2014. — 280 c.

Создание сайтов. Веб студия Prime./ Глава 1. Предисловие к PloneАвтор перевода Егор Шершнёв — Документация «Система управления сайтом» — Режим доступа: [.

http://www.studio-web.ru/about/dokumentaciya/doc/book1/].

Сравнение систем управления контентом с открытым исходным кодом: Joomla, Drupal и Plone. — Режим доступа: [.

http://www.z-iv.ru/articles/17.htm].

Средство сборки для программного обеспечения с открытым исходным кодом, написанное на языке программирования Python — Buildout/Buildout — режим доступа: [.

http://www.buildout.org/].

Структура сайтов-Hostinfo — Режим доступа: [.

http://hostinfo.ru/articles/408].

Форсье, Дж. Django. Разработка веб-приложений на Python/Дж. Форсье. — М.: Символ-плюс, 2014. — 964 c.

Форсье, Джефф Django. Разработка веб-приложений на Python/Джефф Форсье, Пол Биссекс, Уэсли Чан. — М.: Символ-плюс, 2014. — 456 c.

Хранилище Букета (Bitbucket) — веб-сервис для хостинга проектов и их совместной разработки/Bitbucket — режим доступа: [.

https://bitbucket.org/].

Гость.

Сайт.

Просмотр статистики.

Просмотр раздела Крупная техника.

Просмотр стартовой страницы.

Просмотр раздела Мелкая техника.

Просмотр раздела Все для кухни.

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

Сайт.

Просмотр статистики.

Просмотр раздела Крупная техника.

Просмотр стартовой страницы.

Просмотр раздела Мелкая техника.

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

Выбрать товар и отправить его в корзину Просмотр раздела Заказы.

Оплата заказа и выбор варианта доставки.

Сотрудник организации.

Сайт.

Просмотр статистики.

Просмотр раздела Крупная техника.

Просмотр стартовой страницы.

Просмотр раздела Мелкая техника.

Редактирование данных.

Редактирование данных.

Просмотр раздела Все для кухни.

Редактирование данных.

Просмотр раздела Заказы.

Исполнение заказов.

Редактирование рекламных объявлений.

Админист-ратор

Сайт.

Просмотр статистики.

Просмотр раздела Крупная техника.

Просмотр стартовой страницы.

Просмотр раздела Мелкая техника.

Редактирование данных.

Редактирование данных.

Просмотр раздела Все для кухни.

Редактирование данных.

Просмотр раздела Заказы.

Исполнение заказов.

Редактирование рекламных объявлений.

Просмотр раздела Админ-панель Редактирование раздела Админ-панель Открыть сайт.

Открыть стартовую страницу.

Пройти авторизацию.

Перейти в раздел Админ-панель.

Клиенты.

Выбрать нужного клиента, проверить наличие заказов.

Если в разделе не активные клиенты более 1 года?

нет.

да.

Удалить клиента из базы.

Раздел: Все для кухни.

Раздел: Мелкая техника.

Раздел: Крупная техника.

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

Гость.

Открыть страницу.

Открыть раздел.

Раздел Заказы.

Данные в разделе просмотрены.

Открыть раздел.

Данные в разделе просмотрены.

Открыть раздел.

Данные в разделе просмотрены.

Открыть раздел.

Данные в разделе просмотрены.

Раздел: статистики.

Открыть раздел.

Данные в разделе просмотрены.

Данные на странице просмотрены.

Раздел: Все для кухни.

Раздел: Мелкая техника.

Раздел: Крупная техника.

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

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

Открыть страницу.

Открыть раздел.

Раздел Заказы.

Выбран товар и отправлен в корзину Открыть раздел.

Выбран товар и отправлен в корзину Открыть раздел.

Выбран товар и отправлен в корзину Открыть раздел.

Выбран способ оплаты и выбран вариант доставки.

Раздел: статистики.

Открыть раздел.

Раздел просмотрен.

Данные на странице просмотрены.

Раздел: Все для кухни.

Раздел: Мелкая техника.

Раздел: Крупная техника.

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

Сотрудник организации.

Открыть страницу.

Открыть раздел.

Раздел Заказы.

Раздел просмотрен/ отредактированы данные.

Открыть раздел.

Раздел просмотрен/ отредактированы данные Открыть раздел.

Раздел просмотрен/ отредактированы данные Открыть раздел.

Раздел просмотрен/ отредактированы данные.

Раздел: статистики.

Открыть раздел.

Раздел просмотрен.

Данные на странице отредактированы.

Раздел: Все для кухни.

Раздел: Мелкая техника.

Раздел: Крупная техника.

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

Администратор

Открыть страницу.

Открыть раздел.

Раздел Заказы.

Раздел: Админ-панель.

Раздел просмотрен/ отредактирован.

Открыть раздел.

Раздел просмотрен/ отредактирован.

Открыть раздел.

Раздел просмотрен/ отредактирован.

Открыть раздел.

Раздел просмотрен/ отредактирован.

Открыть раздел.

Раздел просмотрен/ отредактирован.

Раздел: статистики.

Открыть раздел.

Раздел просмотрен/ отредактирован.

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

Form3.

Form4.

Form5.

Form6.

Form7.

Form1.

Form2.

Данные окна Строка меню.

Данные.

Строка меню.

Данные.

Футер

Раздел: Статистика Раздел: Крупная техника Раздел: Мелкая техника Раздел: Все для кухни Раздел: Админ-панель Раздел: Заказы Футер

Авторизация.