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

ООО "Диплом777"

8:00–20:00 Ежедневно

Никольская, д. 10, оф. 118

Дипломная работа на тему Проектирование и разработка интернет-магазина “Компьютерная техника”

Введение

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

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

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

Статьи по дипломным