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

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

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После построения 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 - ключ товара,_tovar - тип товара,_tovar - модель товара, - количество товара,

money - цена,

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

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

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

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

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

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

money - цена.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблица 1

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

.2 CSS верстка

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

<?_START();_once('connect.php');(!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>

<div>

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

<div>Поиск</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>

<div>

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

<div>

</div>

</div>

<!-- end of oferte_content-->

</div>

<div id="main_content">

<div id="menu_tab">

<div>

<ul>

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

<li>

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

<li>

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

<li>

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

<li>

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

<li>

</ul>

<div>

</div>

…

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

Пример CSS

body

{:url(images/bg.jpg) no-repeat #fff center top;:0;family:Arial, Helvetica, sans-serif;size:11px;:0px auto auto auto;:#000;

}{:2px;:0px;

}

#main_container{:1000px;:auto;:auto;:0px;

}

.top_bar{:1000px;:38px;color:#4a4a4a;

}

.top_search{:370px;:32px;:0px 20px 0 0;

_margin:0px 10px 0 0;:right;:url(images/top_search_bg.gif) no-repeat center;

}

…

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

.3.1 Блок актуализации

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

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

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

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

{(($_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);('location:adm.php');

}

{("Введите данные!<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("Введите значение");}}

<?_once('connect.php');(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);('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.2 Функции WEB-интерфейса

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

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

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

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

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

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

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

Таблица 2

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

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

, (1)

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

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

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

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

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

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

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

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

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

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

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

Таблица 3

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

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

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

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

,(2)

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

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

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

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

 (3)

 (4)

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

(5)

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

(6)

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

(7)

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

(8)

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

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

(9)

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

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

 (10)

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

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

 (11)

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

 (12)

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

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

Таблица 4

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

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

(руб.)(13)

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

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

(14)

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

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

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

Таблица 5

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

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

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

Таблица 6

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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