Приём заказов:
Круглосуточно
Москва
ул. Никольская, д. 10.
Ежедневно 8:00–20:00
Звонок бесплатный

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

Диплом777
Email: info@diplom777.ru
Phone: +7 (800) 707-84-52
Url:
Логотип сайта компании Диплом777
Никольская 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-ключ,

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 с.

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

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

Читать полностью ➜
Задание на дипломную работу образец заполнения

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

Читать полностью ➜