Проектирование и разработка интернет-магазина «Компьютерная техника»
WEB-интерфейс (или клиентская часть) предоставляет доступ к основным функциям интернет — магазина посредством активных гиперссылок. Используя визуальный интерфейс приложения, пользователь может производить просмотр товара, поиск товара, добавление товара в корзину. Однако, несмотря на общие черты, Интернет — магазины все же отличаются друг от друга. Владелец каждого магазина стремится сделать… Читать ещё >
Проектирование и разработка интернет-магазина «Компьютерная техника» (реферат, курсовая, диплом, контрольная)
Введение
Разработка сайтов для компаний является актуальной и востребованной сферой деятельности, т.к. сайт фирмы в сети Интернет представляет собой достаточно дешевый и массовый способ рекламы, дает возможность потенциальным и существующим клиентам легко получать информацию о товарах и услугах компании, ее деловых интересах, что может помочь найти новых заказчиков и партнеров по бизнесу, а следовательно, способствует увеличению объема продаж и рентабельности предприятия.
Объект исследования интернет магазина «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']))
{
?>