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

Размещено на http://www.allbest.ru/

Введение

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

Объект исследования интернет магазина «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-ключ,

login-логин,

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">

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="main_container">

<div class="top_bar">

<div class="top_search">

<form name="form1" method="POST" action="find.php">

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

<input type="text" name="search" />

<input type="submit" src="images/search.gif" name='find' value='search'/>

</form>

</div>

<div id="header">

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

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

<div class="oferte_content">

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

width="1" height="164" /></div>

<div class="oferta">

</div>

</div>

<!-- end of oferte_content-->

</div>

<div id="main_content">

<div id="menu_tab">

<div class="left_menu_corner"></div>

<ul class="menu">

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

<li class="divider"></li>

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

<li class="divider"></li>

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

<li class="divider"></li>

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

<li class="divider"></li>

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

<li class="divider"></li>

</ul>

<div class="right_menu_corner"></div>

</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;

}

p{

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"&nbsp;<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 с.

Размещено на Allbest.ru