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

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

[sociallocker]Скачать файл .docx[/sociallocker]

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шапка сайта

Главная

Авторизация

Регистрация

Прайс-Лист

Навигация ссылка 7 ссылка 8 ссылка 9 ссылка 10 ссылка 11 Основной текст Реклама и корзина

Подвал сайта (копирайт)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 — ключ товара,_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-приложения

Файл

Соответствующая функция

index.php

Главная страница, доступ к функциям

find.php

Поиск товара

korz.php

Корзина

Login.php

Авторизация

Mail_index.php

Обратная связь

Registr.php

Регистрация

Tovars.php

Прайс-лист

Upravl.php

Редактирование БД

.2 CSS верстка

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

HTML — код сайта

<?_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 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

{: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 — Форма добавление

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

<?_once(‘connect.php’);(ISSET($_POST[‘enter’]))

{(($_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. Техническое задание

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 — сайты аналогичной тематики;

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

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

. Разработана 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 с.