Проектирование и разработка интернет-магазина «Компьютерная техника»

2020-03-26
Кирилл Кузнецов
Коммуникации, связь, цифровые приборы и радиоэлектроника

Диплом777

Email: info@diplom777.ru

Phone: +7 (800) 707-84-52

Url: https://diplom777.ru/

Никольская 10

Москва, RU 109012

Введение

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

Объект исследования интернет магазина «Electronix», занимающийся продажей компьютерной техники

Предмет процесс разработки интернет-магазина «Electronix»

Цель спроектировать и разработать интернет-магазин «Electronix» и рассмотреть структуру его работы

Для достижения поставленной цели необходимо решить следующие задачи:

1. Исследовать предметную область;

2. Проанализировать WEB-сайты аналогичной тематики;

3. Выбрать стратегию разработки;

4. Спроектировать модель сайта;

5. Разработать web — сайт с использованием PHP скриптинга;

6. Рассчитать финансовые затраты на создание проекта.

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

1. Аналитическая часть

1.1 Анализ предметной области

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

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

1.2 Анализ web-сайтов аналогичной тематики

Существует несколько типов интернет-магазинов:

— магазин, торгующий определенным видом товаров, представленными в небольшом ассортименте — например, интернет-магазин фирмы, продающей собственные программные продукты;

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

— электронные супермаркеты, в которых можно купить практически все от бытовой техники до одежды;

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

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

— Специализированный каталог с подразделами;

— Система регистрации пользователя;

— Система оплаты товара;

— Система доставки товара.

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

Архитектура интернет-магазина должна быть проста и интуитивно удобна.

Интернет магазин имеет следующие преимущества:

— помогает быстро сориентироваться в ассортименте и найти нужный товар или услугу (по тематике, названию, цене и т.п.);

— рассмотреть товар «со всех сторон», сравнить его характеристики, цену, внешний вид с другими товарами;

— посмотреть информацию о скидках, акциях и подобного рода мероприятиях;

— рассчитать точную стоимость заказа; отобрать товар в корзину, оформить заказ on-line, оформить доставку на дом;

— поддерживать контакты типа «продавец-покупатель», например:

— просматривать историю ранее сделанных заказов;

— просматривать информацию по текущему заказу;

— вести переписку и т.п.

2. Проектная часть

2.1 Проектирование структуры сайта (рис. 1)

Шапка сайта
Главная	Авторизация	Регистрация	Прайс-Лист
Навигация ссылка 7 ссылка 8 ссылка 9 ссылка 10 ссылка 11 Основной текст Реклама и корзина
Подвал сайта (копирайт)

Рисунок 1 — Структура сайта

2.2 Технология создания макета сайта

Сайт разрабатывается несколько этапами:

1 этап: — определение назначения и функций сайта;

2 этап: — выбор цветового и стилистического оформления;

3 этап: — определение страниц и содержание;

4 этап: — выбор языка программирования, удовлетворяющего функциям и назначениям сайта;

5 этап: — создание графических элементов сайта;

6 этап: — верстка сайта.

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

В данной программе были созданы следующие графические элементы:

— шапка (header) сайта (рис.2), выполнена с использованием градиентной заливки и наложения фигурных шрифтов;

Рисунок 2 — шапка (header)

— навигационная панель (navy panel), выполнена аналогично шапке, путем градиентной заливки того же цвета (рис. 3);

Рисунок 3 — навигационная панель (navy panel)

2.3 Информационное обеспечение сайта

На основе исследования предметной области был проведен анализ, в результате которого была построена DFD диаграмма потоков данных в приложении BPwin (рис. 4,5)

Рисунок 4 — DFD 0 уровня

Рисунок 5 — DFD-диаграмма 1-ого уровня (декомпозиция)

После построения DFD диаграммы, была создана ERD диаграмма (рис. 6).

Рисунок 6 — ERD диаграмма

На основе ERD диаграммы была сгенерирована база данных в приложении MySQL, состоящая из трёх таблиц.

База данных «inetm» имеет следующие таблицы:

Таблица «users» содержит поля: id, login, pass, role, FIO.

Таблица «tovars» содержит поля: id_tovar, tip_tovar, model_tovar, kol, money, a, b.

Таблица «Zakaz» содержит поля: id_zakaz, model_tovar, money.

Таблица «users» (рис. 7)

Рисунок 7 — Таблица «users»

Id-ключ,

pass-пароль,

role-роль,

FIO-ФИО

Таблица «tovars» (рис. 8)

Рисунок 8 — Таблица «tovars»

id_tovar — ключ товара,

tip_tovar — тип товара,

model_tovar — модель товара,

kol — количество товара,

money — цена,

a — количество товара в пункте А,

b — количество товара в пункте В.

Таблица «Zakaz» (рис. 9)

Рисунок 9 — Таблица «Zakaz»

id_zakaz — ключ заказа,

model_tovar — модель товара,

money — цена.

3. Разработка программного продукта

3.1 Функциональность работы сайта

При открытии сайта в браузере отображается главная страница (рис. 10), на шапке которой расположена некоторая контактная информация, а так же фирменное название сайта.

Рисунок 10 — главная страница

Ниже шапки расположена навигационная панель, содержащая ссылки:

— авторизация, при переходе по данной ссылке, открывается страница авторизации на сайте (рис. 11);

Рисунок 11 — авторизация

— ссылка «регистрация» направляет пользователя на страницу, для регистрации в интернет — магазине (рис.12);

Рисунок 12 — форма регистрации

— ссылка «прайс-лист» направляет пользователя на страницу информации о товарах и ценах (рис. 13);

Рисунок 13 — Прайс-лист

— Ссылка «обратная связь» дает возможность пользователю отправить сообщение с вопросами или предложением магазину (рис. 14);

Рисунок 14 — «Обратная связь»

Соответствие файлов функционалу приложения отображено в таблице 1.

Таблица 1

Соответствие файлов функционалу web-приложения

Файл	Соответствующая функция
index.php	Главная страница, доступ к функциям
find.php	Поиск товара
korz.php	Корзина
Login.php	Авторизация
Mail_index.php	Обратная связь
Registr.php	Регистрация
Tovars.php	Прайс-лист
Upravl.php	Редактирование БД

3.2 CSS верстка

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

HTML — код сайта

SESSION_START();

require_once(‘connect.php’);

if(!isset($_SESSION[‘autorized’]))

{

<html>

<head>

<title>Electronix Store</title>

<META http=equiv=»Content-Type» content=»text/html;charset=windows-

1251″>

</head>

<body>

<div class=»search_text»>Поиск</a></div>

</form>

</div>

<div id=»logo»> <a href=»index.php»><img src=»images/logo.png» alt=»»

border=»0″ width=»237″ height=»140″ /></a> </div>

<div class=»top_divider»><img src=»images/header_divider.png» alt=»»

width=»1″ height=»164″ /></div>

</div>

<!— end of oferte_content—>

</div>

<li><a href=»index.php» class=»nav1″> Главная</a></li>

<li><a href=»login.php» class=»nav2″>Авторизация</a></li>

<li><a href=»regist.php» class=»nav3″>Регистрация</a></li>

<li><a href=»tovars.php» class=»nav5″>Прайс-лист</a></li>

<li><a href=»mail_index.php» class=»nav4″>Сообщение</a></li>

</ul>

</div>

…

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

Пример CSS

body

{

background:url(images/bg.jpg) no-repeat #fff center top;

padding:0;

font-family:Arial, Helvetica, sans-serif;

font-size:11px;

margin:0px auto auto auto;

color:#000;

}

padding:2px;

margin:0px;

}

#main_container{

width:1000px;

height:auto;

margin:auto;

padding:0px;

}

.top_bar{

width:1000px;

height:38px;

background-color:#4a4a4a;

}

.top_search{

width:370px;

height:32px;

margin:0px 20px 0 0;

_margin:0px 10px 0 0;

float:right;

background:url(images/top_search_bg.gif) no-repeat center;

}

…

3.3 Разработка программного кода

3.3.1 Блок актуализации

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

На примере таблицы «Tovars» предоставлены операции добавления, редактирование и удаление информации.

Рисунок 15 — Форма добавление

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

require_once(‘connect.php’);

if(ISSET($_POST[‘enter’]))

{

if(($_POST[‘tip_tovar’]<>») or ($_POST[‘model_tovar’]<>») or

($_POST[‘kol’]<>») or ($_POST[‘money’]<>») or ($_POST[‘A’]<>») or

($_POST[‘B’]<>»))

{

$sqladd=»INSERT tovars SET

tip_tovar='».$_POST[‘tip_tovar’].»‘,model_tovar='».$_POST[‘model_tovar’].»

‘,kol='».$_POST[‘kol’].»‘,money='».$_POST[‘money’].»‘,a='».$_POST[‘A’].»‘,

b='».$_POST[‘B’].»‘»;

$dataadd=mysql_query($sqladd);

header(‘location:adm.php’);

}

else

{

die(«Введите данные!<br><a href=’upravl.php’>Назад</a>»);

}

Рисунок 16 — Форма редактирования

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

if(ISSET($_POST[‘adm_ed’])){if($_POST[‘adm_cond’]<>»){$sqled=»SELE

CT * From tovars WHERE

id_tovar=».$_POST[‘adm_cond’];$dataed=mysql_query($sqled);$line=mysq

l_fetch_array($dataed);$ided=$_POST[‘adm_cond’];echo»<form

name=’formed’ action=’edit.php’ method=’POST’>»;echo»<b>Код

фирмы</b>: «.$ided;echo»<p>»;?><table><?echo»<tr><td>Тип товара:

</td><td><input type=’text’ size=20 name=’tip_tovar’

value='».$line[‘tip_tovar’].»‘ /><BR></td></tr>»;echo»<tr><td>Модель:

</td><td><input type=’text’ size=20 name=’model_tovar’

value='».$line[‘model_tovar’].»‘

/><BR></td></tr>»;echo»<tr><td>Количество: </td><td><input type=’text’

size=20 name=’kol’ value='».$line[‘kol’].»‘

/><BR></td></tr>»;echo»<tr><td>Цена: </td><td><input type=’text’

size=20 name=’money’ value='».$line[‘money’].»‘

/><BR></td></tr>»;echo»<tr><td>A: </td><td><input type=’text’ size=20

name=’a’ value='».$line[‘a’].»‘ /><BR></td></tr>»;echo»<tr><td>B:

</td><td><input type=’text’ size=20 name=’b’ value='».$line[‘b’].»‘

/><BR></td></tr>»;?></table><?echo» <input type=’submit’

name=’edbt’ value=’Изменить’ /></p><input type=’hidden’ name=’key’

value='».$ided.»‘ /></form>»;}else{die(«Введите значение»);}}

require_once(‘connect.php’);

if(ISSET($_POST[‘edbt’]))

{

$sqlupd=»UPDATE tovars SET

tip_tovar='».$_POST[‘tip_tovar’].»‘,model_tovar='».$_POST[‘model_tovar’].»

‘,kol='».$_POST[‘kol’].»‘,money='».$_POST[‘money’].»‘,a='».$_POST[‘a’].»‘,b

='».$_POST[‘b’].»‘ WHERE id_tovar='».$_POST[‘key’].»‘»;

$data=mysql_query($sqlupd);

header(‘location:adm.php’);

}

интернет магазин архитектура сайт

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

if(ISSET($_POST[‘adm_del’])){$sqldel=»DELETE FROM tovars WHERE

id_tovar=».»‘».$_POST[‘adm_cond’].»‘»;$datadel=mysql_query($sqldel);echo

«<a href=’adm.php’>Назад</a>»;}

3.3.2 Функции WEB-интерфейса

WEB-интерфейс (или клиентская часть) предоставляет доступ к основным функциям интернет — магазина посредством активных гиперссылок. Используя визуальный интерфейс приложения, пользователь может производить просмотр товара, поиск товара, добавление товара в корзину.

4. Экономическая часть

После завершения работ по проектированию необходимо рассчитать экономическую эффективность проекта. Произведем расчет экономической эффективности проекта. Структура экономической части при создании программного обеспечения следующая (табл. 2):

— Технико-экономическое обоснование разработки ПО;

— Расчет затрат на разработку ПО;

— Стоимость внедрения ПО;

— Расходы при эксплуатации ПО.

Таблица 2

Фактическая трудоемкость по стадиям проектирования

Стадия НИР	Трудоёмкость
	Дней	%
1. Техническое задание	4	6,45
2. Эскизный проект	6	9,68
3. Технический проект	33	53,22
4. Рабочий проект	15	24,19
5. Внедрение	4	6,46
Итого:	62	100

Общая фактическая трудоемкость разработки ПО составляет формула (1):

, (1)

где — общая трудоемкость разработки, дни;

— трудоемкость по стадиям, дни.

В смету затрат на разработку ПО включаются:

— материальные затраты;

— основная и дополнительная зарплаты;

— отчисления на социальные нужды;

— амортизационные отчисления

— стоимость инструментальных средств;

— накладные расходы.

Материальные затраты

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

Таблица 3

Материалы и принадлежности, использованные в процессе разработки

Наименование	Количество, шт.	Цена, руб.	Стоимость, руб.
Бумага	150	1	150
Ручка	2	5	10
Карандаш простой	5	2	10
CD-RW диск	5	20	100
Папка для бумаг	2	15	30
Картридж	1	600	600
Транспортно — заготовительные расходы	1	10%	100
Итого:	1000

Основная и дополнительная заработные платы

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

Таким образом, основная заработная плата З_осн при выполнении НИР рассчитывается по формуле (2):

,(2)

где З_ср.дн.р — среднедневная зарплата j-го сотрудника, руб./день;

Т_об._j — общая трудоемкость проекта j-го сотрудника, дни;

n — количество сотрудников, принимающих непосредственное участие в разработке ПО, чел.

Основная зарплата разработчика определена из расчета 8000 руб. в месяц при среднем количестве рабочих дней, равных 21 (формула 3):

(3)

Заработная плата дипломного руководителя составляет 150 руб./час, причем на консультацию запланировано 23 часа. Следовательно, основная зарплата руководителя дипломного проекта за весь период разработки равна (формула 4):

(4)

Заработная плата консультанта по экономической части составляет 100 руб./час, причем на консультацию запланировано 0,5 часа. Следовательно, основная зарплата консультанта по экономике за весь период разработки равна (формула 5):

(5)

В итоге основная заработная плата при выполнении НИР равна (ф 6):

(6)

Дополнительная заработная плата равна 12% от основной (формула 7):

(7)

Итого основная и дополнительная заработная плата составляют (ф. 8):

(8)

Отчисления на социальные нужды

Отчисления на социальные нужды составляют на сегодняшний день 30% от общего фонда заработной платы, следовательно (формула 9):

(9)

Амортизационные отчисления

Затраты на оборудование, амортизационные отчисления (формула 10):

(10)

где А_М — амортизационные отчисления, руб.; О_ф — стоимость ЭВМ и оборудования, руб.; Н_ам— норма амортизации, %; Т_м — время использования оборудования, дни.

Время работы на ЭВМ и принтере равны соответственно (формула 11):

(11)

Затраты на электроэнергию (формула 12):

(12)

Стоимость инструментальных средств

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

Таблица 4

Стоимость СПО

Программное обеспечение	Стоимость, руб.
MS WINDOWS	2 690.00
Adobe Photoshop CS3	29 980.00
Microsoft Office	2 390.00
Apache/PHP/MySQL	—
Итого:	35060.00

Затраты на амортизацию инструментальных средств (формула 13):

(руб.)(13)

Накладные расходы

Накладные расходы составляют 15% от основной заработной платы разработчиков ПО, а значит (формула 14):

(14)

РН (районная надбавка) = (основная зарплата + дополнительная

зарплата)*0,15 = 26942,64*0,15=4041,4 (руб.)(15)

Итак, смета затрат на НИР приведена в таблице 5.

Таблица 5

Смета затрат на разработку ПО

Элемент затрат	Стоимость, руб.
Материальные затраты	1000
Основная и дополнительная зарплата	26943
Отчисления на социальные нужды	8083
Амортизационные отчисления	1110
Накладные расходы	4151
Районная надбавка	4041
Итого:	45328

Стоимость ЭВМ, прочих аппаратных средств и сетевого оборудования

Стоимость всего необходимого оборудования и годовых сумм амортизации приведены в таблице 6.

Таблица 6

Расчет стоимости и амортизационных отчислений оборудования

Наименование оборудования	Количество	Цена, руб.	Стоимость, руб.	Норма амортизации, %	Амортиз. отчисления, руб.
Компьютер Pentium	1 шт.	19500	19500.00	25	884,18
Принтер	1 шт.	5000	5000.00	25	226,71
Итого:			24500,00		1110,89

Выводы по главе

Данная глава была посвящена расчету затрат на разработку. В результате проделанных расчетов получены следующие результаты 45328 рублей 00 копеек.

Заключение

Цель дипломного проекта проектирование и разработка интернет — магазина «Electronix» предназначенного для покупателей. Цель достигнута, поставленные задачи выполнены:

1. Исследована предметная область;

2. Проанализирована WEB — сайты аналогичной тематики;

3. Выбрана стратегию разработки;

4. Спроектирована модель сайта;

5. Разработана web — сайт с использованием PHP скриптинга;

6. Рассчитана финансовые затраты на создание проекта.

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

Проект реализован с помощью среды PHP, которая работает в связке Apache/PHP/MySQL. Язык РНР способствовал уменьшению объема передаваемой информации по каналам связи, что особенно актуально среди сложившейся конкуренции.

Все цели и задачи были выполнены.

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

1. Бусик, Н.В. Методические рекомендации по выполнению курсовой работы предмета «РиЭАИС» / Н.В. Бусик — НТСТ, 2009г.

2. Попко, А.О. Требования по оформлению текстовых документов / А.О. Попко — НТСТ, 2007г.

3. htmlbook.ru — Для тех, кто делает сайты: портал [Электронный ресурс]

4. PHP — Руководство по PHP — Manual: портал [Электронный ресурс]

5. Бройдо, В.Л. Вычислительные системы, сети и телекоммуникации [Текст]: учебник / В.Л. Бройдо. — 2-е изд., перераб. и доп. — СПб.: Питер, 2004. — 704 с.

6. Голенищев, Э.П. Информационное обеспечение систем управления [Текст]: учеб. пособие для вузов / Э.П. Голенищев, И.В. Клименко. — Ростов н/Д: Феникс, 2003. — 352 с.

7. Колисниченко, Д.Н. Самоучитель PHP5 [Текст] / Д.Н. Колисниченко. — 3-е изд. — СПб.: Наука и Техника, 2006. — 576 с.

8. Кузнецов, М.В. РНР 5. Практика разработки Web-сайтов [Текст] / М.В. Кузнецов, И.В. Симдянов, С.В. Голышев. — СПб.: БХВ-Петербург, 2005. — 960 с.

Кирилл Кузнецов

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