Разработка интернет-ресурса для работы с клиентами ООО "КСС-СЕРВИС"

Размещено на http://www.allbest.ru/

Введение

Предприятие ООО «КСС-СЕРВИС» занимается продажей туристического оборудования в г. Череповце. В связи с этим одной из основных функций работников предприятия является работа с клиентами, прием от них заявок и дальнейшая обработка этих заявок. В настоящее время информирование клиентов и прием заявок различными предприятиями все чаще происходит через некоторый ресурс сети Интернет.

Целью дипломной работы является разработка интернет - ресурса для работы с клиентами ООО «КСС-СЕРВИС».

На этапе проектирования:

­ проведение анализа предметной области;

­ выбор технологии и среды разработки;

­ разработка основных алгоритмов решения задач, хранения данных;

­ определение требований к программному обеспечению;

­ проектирование структуры программного обеспечения;

­ проектирование интерфейса пользователя.

На этапе реализации:

­ разработка основных форм;

­ реализация кода программы;

­ разработка руководства пользователя;

­ разработка руководства системного программиста.

Актуальность проекта состоит в использовании современных средств и оборудования, таких как язык программирования PHP, CSS, HTML.

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

1. Общая часть

1.1 Описание предметной области

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

В частности, компания ООО «КСС-СЕРВИС»

Общество с ограниченной ответственностью «КСС-СЕРВИС» зарегистрировано 10.06.2014 году.

На данный момент предприятие ООО «КСС-СЕРВИС» занимается продажей туристического оборудования в г. Череповце.

Основным видом деятельности компании является продажа различного оборудования и снаряжения для туристических походов:

ѕ туристические палатки;

ѕ газовое оборудование;

ѕ одежда и рюкзаки для походов;

ѕ продажа расходных материалов.

Организационная структура предприятия выглядит следующим образом:

Рисунок 1 - Организационная структура предприятия

1.2 Анализ существующей ситуации

Компания ООО «КСС-СЕРВИС» оповещает клиентов о наличии- отсутствии существующего товара, а также поступлениях нового товара следующим образом: администратор принимает звонки от покупателей с интересующими их вопросами, вручную ищет ответ в базе данных и сообщает найденную информацию клиенту. Данный метод работы, на сегодняшний день является весьма неудобным вариантом для ведения уведомлений клиентов.

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

1.3 Обзор существующих информационных систем

На данный момент на рынке уже имеются сайты фирм, которые продают туристическое оборудование.

Одна из таких фирм является «РыбакProfi» - сайт по продаже рыболовно-туристических товаров.

Такой сайт сокращает время для клиента, а также улучшает и упрощает работу администратора магазина с клиентом. Интерфейс сайта предоставлен на рисунке 2.

Рисунок 2 - Интерфейс сайта «РыбакProfi»

Достоинства сайта:

ѕ возможность просмотра цен;

ѕ возможность обратиться с вопросом;

ѕ просмотр адресов магазинов и номера;

ѕ получение информации о новых товарах и скидках.

Недостатки сайта:

ѕ отсутствует возможности онлайн заказа;

ѕ отсутствие личного кабинета;

ѕ возможность более подробного просмотра товара.

Так же существует «Робинзон» - сайт по продаже туристических товаров и товаров для охоты.

Такой сайт так же сокращает время для клиента, а также улучшает и упрощает работу администратора магазина с клиентом. Интерфейс сайта предоставлен на рисунке 3.

Рисунок 3 - Интерфейс сайта «Робинзон»

Достоинства сайта:

ѕ возможность фирмы товара;

ѕ возможность оставить отзыв;

ѕ быстрый поиск по сайту;

ѕ новостная лента.

Недостатки сайта:

ѕ отсутствует возможности регистрации;

ѕ отсутствие личного кабинета;

ѕ отсутствие цен на сайте.



1.4 Постановка задачи на выпускную квалификационную работу

С точки зрения программной реализации, должны быть исполнены следующие общие требования:

программный код должен быть написан по общепринятым стандартам;

в необходимых местах код должен быть прокомментирован; важные данные, такие как пароли и т.д., должны быть зашифрованы в базе данных;

при передаче личных данных, должны использоваться только безопасные методы;

программа должна иметь возможность расширения, посредством модулей.

Специальные требования:

Программное обеспечение должно реализовать следующий функционал:

ѕ в Web-интерфейсе должно быть предусмотрено 2 группы пользователей - администраторы, клиенты;

ѕ для каждой из групп пользователей будет предоставлен различный функционал и интерфейс;

ѕ клиенты смогут просматривать открытую часть сайта, проводить заказ и покупку товара, просматривать информацию и точную стоимость товара, просматривать новостной портал о новиках магазина;

ѕ администратор будет иметь полный доступ к функционалу и управлению сайта.



2. Специальная часть

2.1 Обоснование необходимости разработки программного обеспечения

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

Для выполнения поставленной задачи необходимо:

ѕ провести анализ предметной области;

ѕ выбрать метод разработки;

ѕ выполнить проектирование разрабатываемого интернет ресурса;

ѕ реализовать интернет ресурс;

ѕ протестировать и отладить проект;

ѕ выполнить процедуру внедрения.

2.1.1 Определение требований к функциональным характеристикам

Исходя из сложившейся ситуации, было принято решение о разработке своего интернет приложения с таким функционалом как:

ѕ каталог товаров с подробным описанием и информацией о товаре;

ѕ возможность оставлять комментарии;

ѕ возможность регистрации на сайте;

ѕ возможность быстрого заполнения сайта товаром;

ѕ создание новостной ленты.

2.2 Проектирование программного обеспечения

2.2.1 Разработка контекстной диаграммы

Контекстная диаграмма - это модель, которая представляет систему как набор действий, в которые каждое действие преобразует некоторый объект или набор объектов. Модель представляется как набор иерархических действий. Высшее действие иерархии называется действием контекста. Это самый высокий уровень, который непосредственно описывает систему. Уровни ниже называются порожденными декомпозициями и представляют подпроцессы родительского действия.

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

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

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

Каждый блок должен иметь, по крайней мере, одну стрелку контроля (управления). Управление всегда входит в вершину блока. Управление представляется в виде правил, инструкций, политики, процедур и стандартов.

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

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

Контекстная диаграмма изображена на рисунке. Декомпозиция контекстной диаграммы изображена на рисунке. Описание контекстной диаграммы выполненного в таблице.

Рисунок 4 - Контекстная диаграмма

Рисунок 5 - Декомпозиция контекстной диаграммы

Описание контекстной диаграммы

Наименование	Описание
Входные данные
Данные для входа	Данные для входа на сайт, пара (логин, пароль)
Данные о товарах	Данные о товара, которые продает фирма, их выбирает пользователь для покупки
Данные о заказах	Данные о заказах, которые администратор подтверждает для оформления заказа и дальнейшего составления документов к ним (чек, гарантия и д.т.)
Управляющая информация
Инструкция	Правила пользования сайтом
Выходные данные
Оформленный заказ	Данные о заказе, который сделал пользователь
Механизм реализации
Пользователь	Пользователь - клиент фирмы
Администратор	Администратор - работник фирмы
ЭВМ	Компьютер выполняющий операции

2.2.2 Разработка структуры сайта

Проведем анализ существующих структур сайтов.

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

Линейная с ответвлениями. Принцип тот же, но здесь вы можете использовать несколько продуктов на одном сайте, с которыми будете знакомить так же постранично. Например, это может быть онлайн-библиотека какого-то автора с несколькими книгами. Здесь вес опять же передается от главной к последней странице, правда таких страниц уже несколько.

Блочная структура. Здесь все страницы ссылаются на несколько других, которые равнозначны между собой. Такую структуру неплохо применять для конкретного продукта, когда каждую страницу можно использовать, как описание какого-то отдельного свойства/достоинства и их совокупностей. С распределением веса здесь все вполне неплохо, страницы уже перелинкованы и отдают свой вес на главную, что позволяет продвигать ее более эффективно. Но такая структура весьма специфична и применять ее можно далеко не везде.

Древовидная структура. Именно древовидная структура является наиболее универсальным вариантом и именно ее вы будете применять в 99% случаев. Смысл в том, что для каждого направления будет своя ветка, для каждой услуги или товара будет отдельное ответвление. То есть, те самые привычные разделы и подразделы. Эта структура позволяет передавать дополнительный вес как на главную, так и на разделы (каждая страница раздела будет ссылаться не только на главную, но и на свой раздел, достаточно настроитьвсе грамотно настроить.

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

Рисунок 6 - Структурная схема

Интернет приложение включает в себя следующие модули:

1. модуль панели администратора, который включает в себя:

ѕ работу с клиентами;

ѕ работу с отзывами;

ѕ работу с заказами.

2. web-ресурс, который включает в себя:

ѕ главное окно

ѕ инструктаж;

3. модуль панели клиента, который включает в себя:

ѕ каталог товаров,

ѕ авторизация на сайте после прохождения которой открываются возможности добавления товаров в корзину и оформления заказов.

2.2.3 Разработка функциональной схемы

Функциональная схема разрабатываемого программного продукта отражает взаимодействие его компонентов с описанием информационных потоков, состава данных в потоках и указанием используемых файлов и устройств. На рисунке представлена функциональная схема разрабатываемого программного продукта.

Рисунок 7 - Функциональная схема программного продукта

2.2.4 Проектирование пользовательского интерфейса

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

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

Существуют следующие виды интерфейсов:

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

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

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

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

Интерфейс адаптирован как под персональные компьютеры с высоким разрешением, так и под мобильные устройства и планшеты разных диагоналей экрана. В интерфейсе использована технологияBootstrap 3.

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов.

Bootstrap использует самые современные технологии CSS и HTML. Предназначен для всех, во всем мире.

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

Рассмотрим спроектированный интерфейс интернет приложения.



Рисунок 8 - Страница каталога товаров

Рисунок 9 - Страница инструкции к продаваемым товарам

Рисунок 10 - Страница фотогалереи

Рисунок 11 - Страница добавления отзыва



Рисунок 12 - Страница связи с магазином

Рисунок 13 - Интерфейс корзины

Рисунок 14 - Интерфейс главной страницы

Рисунок 15 - Интерфейс страницы «О нас»

2.2.5 Разработка алгоритмов

Рассмотрим алгоритм работы программы

Пользователь вводит данные для авторизации, система организовывает решение «проверка данных для авторизации», Если данные не верны, то выдается сообщение о неверных данных, если данные введены правильно, то происходит процесс «авторизация пользователя», после прохождения авторизации пользователь может выбирать товары, после выбора товаров происходит вывод выбранных товаров в корзине. После всех совершенных действий происходит проверка товаров в корзине, если список товаров не удовлетворяет требования пользователя то пользователь может его изменить, если список товаров составлен правильно то пользователь оформляет заказ. После оформления заказа пользователем администратор рассматривает заказ и делает его подтверждение.

Рисунок 16 - Общий алгоритм работы сайта

Пользователь запускает главное окно отзывов, система заполняет табличную часть товаров, пользователь выбирает товар. Система создает решение «создание отзыва», Если отзыв не создается, то пользователь может просматривать список всех отзывов. Если пользователь все таки создает отзыв, то происходит ввод данных и публикация отзыва.

Рисунок 17 - Алгоритм оставления комментария к выбранному товару

3. Программная реализация приложения

3.1 Выбор подхода к разработке

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

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

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

Для разработки приложения выбран объектно-ориентированный подход, поскольку он позволяет сильно распределить разработку крупного приложения. Использование данного подхода является общепринятым для Line-Off-Business приложений.

3.2 Выбор языка и средств разработки

Для выбора языка и средства разработки требуется провести сравнительный анализ.

HTML

Язык разметки гипертекста (HypertextMarkupLanguage), или, как его чаще называют, HTML, -- это компьютерный язык, лежащий в основе WorldWideWeb (Всемирной Паутины). Благодаря языку HTML любой текст можно разметить, преобразовав его в гипертекст с последующей публикацией в Web.

Язык HTML имеет собственный набор символов, с помощью которых Web-браузеры отображают страницу. Эти символы, называемые дескрипторами, включают в себя элементы, необходимые для создания гиперссылок [3].

Одной из отличительных особенностей HTML-документов является то, что сам документ содержит только текст, а все остальные объекты встраиваются в документ в момент его отображения Браузером с помощью специальных тэгов и хранятся отдельно. При сохранении HTML-файла в месте размещения документа создается папка, в которую помещаются сопутствующие ему графические элементы оформления [10].

PHP

В первую очередь PHP используется для создания скриптов, работающих на стороне сервера, для этого его, собственно, и придумали. PHP способен решать те же задачи, что и любые другие CGI-скрипты, в том числе обрабатывать данные html-форм, динамически генерировать html страницы и тому подобное. Но есть и другие области, где может использоваться PHP.

Вторая область - это создание скриптов, выполняющихся в командной строке. То есть с помощью PHP можно создавать такие скрипты, которые будут исполняться, вне зависимости от web-сервера и браузера, на конкретной машине.

И последняя область - это создание GUI-приложений (графических интерфейсов), выполняющихся на стороне клиента [7].

Ajax

Ajax расшифровывается как AsynchronousJavascriptAnd XML (Асинхронные Javascript и XML) и технологией в строгом смысле слова не является. Если в стандартном web-приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML, то в Ajax-приложении между пользователем и сервером появляется еще один посредник - движок Ajax. Он определяет, какие запросы можно обработать "на месте", а за какими необходимо обращаться на сервер.

Поведение сервера тоже изменилось. Если раньше на каждый запрос сервер выдавал новую страницу, то теперь он отсылает лишь те данные, которые нужны клиенту, а HTML из них прямо в браузере формирует движок Ajax.

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

Где стоит использовать Ajax:

ѕ формы. они очень медленны. если асинхронно передавать данные, страница не перезагружается;

ѕ навигация в виде "дерева". вообще, такая навигация - ужас. простая топология намного удобнее, но если уж до этого дошло, лучше использовать ajax;

ѕ голосования. пользователю будет приятней оставить свой голос за несколько секунд, чем за 30-40;

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

JavaScript

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис Java - поэтому его называют - Java-подобным.

Основные области применения JavaScript делятся на следующие категории:

ѕ динамическое создание документа с помощью сценария;

ѕ оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер;

ѕ создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа;

ѕ взаимодействие с пользователем при решении "локальных" задач, решаемых приложением JavaScript, встроенном в HTML-страницу [4].

VBScript

Язык создания сценариев VBScript разработан фирмой Microsoft, является подмножеством достаточно распространенного в среде программистов языка VisualBasic разработки прикладных программ Windows-приложений. Как и его родитель, язык VBScript достаточно прост и лёгок в изучении.

Преимуществом его применения для создания сценариев является возможность использования, с небольшими корректировками, ранее написанных процедур на языках VisualBasic и VisualBasicforApplication.

Функциональные возможности сценариев, написанных на VBScript, ничем не отличаются от возможностей сценариев JavaScript: динамические создание документа или его частей, перехват и обработка событий и так далее.

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

Для создания сценариев клиента используется набор объектов, аналогичный набору JavaScript. Объекты клиента и сервера отличаются друг от друга, но существует общая часть (ядро) объектов, используемых при разработке как сценариев клиент, так и сценариев сервера [11].

Perl

Наиболее широко Perl используется для разработки инструментов системного администрирования, однако в последнее время он получил огромную популярность в области разработки Интернет-приложений: CGI-сценариев, систем автоматической обработки электронной почты и поддержки узлов Web.

Вот некоторые примеры задач, которые можно решать с помощью Perl:

ѕ проверка пользователей Windows NT на несоответствие их статуса и возможностей;

ѕ управление NT-сервисами из командной строки и дистанционно с локальной машины получение статистических данных на отдельной машине;

ѕ может работать и с протоколом FTP;

ѕ системная поддержка UNIX и Windows.

Сравнительный анализ сред создания Web-приложений

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

MacromediaDreamweaver

Компания Macromedia продолжает делать Dreamweaver интуитивно понятной и простой в использовании программой. Мощные средства с одной стороны и простота в использовании - с другой, делают продукты Macromedia идеальными программным пакетом, как для профессиональных web-дизайнеров, так и для новичков. Продукты, входящие в пакет Macromedia, такие как: Flash, Firework, Dreamweaver - сделают работу более продуктивной, и при этом могут заменять друг друга (так, например, в любой из них можно создать кнопки). Такие продукты как: Sitespring, FreeHand - добавит эффективности при работе с клиентом.

У Dreamweaver множество плюсов:

Программа Dreamweaver поддерживает "чистый" HTML код, а также последние расширения DHTML и CSS.

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

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

Применяется "Динамическая проверка для различных браузеров".

Поддерживает расширения, как сторонних разработчиков, так и самой Macromedia (более 500).

С Dreamweaver поставляется библиотека элементов, которые можно применять на WEB-страницах, например, панель навигации, дескриптор авторского права и др.

Применяется для добавления мультимедийных средств на web-страницы и различных типов файлов от Flash и Java до RealAudio, интерактивных элементов, таких как поисковые системы, форумы, системы электронной коммерции.

Программа Dreamweaver не имеет собственных средств создания изображений. В ней представлены лишь простейшие инструменты редактирования, поэтому для создания и редактирования изображений нам понадобятся специальные графические редакторы.

Dreamweaver позволяет убрать лишний код из приложений Microsoft, после чего страницы станут быстрее грузиться и лучше отображаться в разных браузерах.

MacromediaFireworks

Fireworks это редактор графики с возможностью её дальнейшей оптимизации и размещения в сети. Используя большое разнообразие инструментальных средств, мы можем создавать и редактировать как векторную, так и растровую графику в пределах одного файла вместо того, чтобы переходить из одной программы в другую. Fireworks генерирует HTML - код и JavaScript и может легко создавать динамические меню и навигационные панели для наших интернет страниц. Эффективная оптимизация графических файлов позволяет максимально уменьшить их размер без потери качества.

Кроме этого имеется возможность редактировать макеты WEB-страниц. Например, в Fireworks 8 можно открыть графический файл на всю ширину будущего сайта, нарисовать необходимое графическое оформление, а затем разрезать его инструментом SliceTool так, как должна выглядеть будущая таблица HTML-документа. После этого можно начинать доработку отдельных графических элементов и, в том числе, создавать активную графику, реагирующую на курсор, совсем не зная языка программирования (JavaScript).

MacromediaFreeHand

Один из трех профессиональных графических редакторов, ведущих с переменным успехом борьбу за первенство в работе с векторной графикой. FreeHand гораздо быстрее и проще своих конкурентов - CorelDraw и AdobeIllustrator. FreeHand прекрасно подходит для создания логотипов, рекламы, Web-графики и анимации.

Изготовители программы приложили немало усилий, чтобы максимально облегчить жизнь пользователям: интерфейс программы прост и нагляден, имеется множество "примочек", позволяющих быстро и легко выполнять сложные преобразования объектов или достичь самых разных художественных эффектов. FreeHand умеет экспортировать и импортировать файлы практически во всех широко распространенных форматах. Более того, в его состав входят настройки "горячих клавиш", эмулирующие другие распространенные программы (AdobeIllustrator, CorelDraw). Так что не надо переучиваться, переходя на FreeHand.

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

Документы FreeHand легко превращаются в web-страницы. Конечно, FreeHand - не HTML-редактор, но поддерживает базовые элементы HTML. С помощью FreeHand WEB-страницы легко снабдить Flash-анимацией. В анимационный клип вставляются текстовые блоки, группы объектов, а также объекты с контурами. Небольшой клип из объектов FreeHand создается буквально одной командой - остается лишь проследить за некоторыми настройками. Каждый кадр клипа помещается на отдельный слой; анимационный эффект достигается последовательным воспроизведением содержимого отдельных слоев. Но средства FreeHand не заменят редактор MacromediaFlash.

Macromedia FLASH

Создаёт привлекательные интерактивные мультимедийные презентации, для WEB-сайтов. Для Flash характерна векторная графика и анимация, хотя эта программа может быть также использована для манипулирования или отображения растровой графики, монтажа видеоматериала и даже для манипулирования звуковыми файлами.

Flаsh-содержимое публикуется в компактных файлах формата SWF для последующего показа на самых разных платформах с помощью Flаsh-проигрывателя. Во время воспроизведения файла формата SWF в оперативном режиме в него можно динамически загружать такое содержимое, как звуковые файлы формата МР3, Flash-видео и изображения формата JPEG. Flash-проигрыватель позволяет подключаться к источникам данных, чтобы объединить их с базой данных, XML или web-службами. Благодаря всем этим возможностям привлекательные фрагменты анимации и эффекты могут быть введены в приложения, управляемые данными. Flash имеет поддержку антиалайсинг (сглаживание контуров с помощью смешения соседних цветов). Так как этот формат файла основан на векторной графике, объект сохраняет качество изображения при любом разрешении и идеален для создания кадров анимации.

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

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

MacromediaHomeSite

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

Гибкость интерфейса - это одна из сильнейших сторон продукта. Любой пользователь с легкостью сможет настроить интерфейс HomeSite в соответствии со своими предпочтениями и потребностями.

В процессе работы пользователь может видеть рабочую область с двумя вкладками - Browse и Edit. То есть программирование происходит во вкладке Edit, а результат можно увидеть, если выбрать вкладку Browse. При создании новой страницы на поле редактирования автоматически появляются некоторые теги вроде HTML и BODY. Это шаблон, загружаемый при создании новой страницы. Его содержание можно менять.

В HomeSite очень легко строить архитектуру сайта. Этому способствует панель QuickBar с системой вкладок с готовыми тегами. Теги в этих вкладках самые разные - от простых вроде параграфа до java-скриптов. Можно вообще оставить одну вкладку, добавив в нее все необходимые теги через меню Customize. Также можно самому создавать теги или их комбинации. При нажатии на кнопку с определенным тегом появляется окно, где можно настроить опции тега и указать его атрибуты. Поддерживает режим WYSIWYG со всеми его плюсами и минусами.

Для скорости работы здесь имеется множество средств редактирования тегов. Это, например, такие функции, как TagCompletion, TagEditors и TagInsight. Они существенно облегчают редактирование тегов и их атрибутов. Так же есть заготовки кода (CodeSnippets).

HomeSite легко интегрируется со средствами управления исходным кодом и системами управления проектами, а также предлагает широкие возможности работы с протоколом FTP, благодаря чему мы сможем быстро выполнить развертывание сайта и организовать его эффективное обслуживание [9].

MicrosoftFrontPage

Является наиболее популярным HTML-редактором на рынке, главным образом за счёт популярности пакета MicrosoftOffice. В программе предлагаются мощные функции и привлекательный пакет программ, включая ImageComposer, который предназначен для создания изображений (Приложение В). Во FrontPage также содержатся WEB-компоненты, необходимые для добавления интерактивных свойств web-узлу. MicrosoftFrontPage является классическим WYSIWYG-редактором, в котором, однако, присутствует возможность ручной правки кода [6].

В программе имеется три режима работы с документом: Normal, HTML и Preview.

В режиме Normal, web-страницы представляют собой обычный текстовый файл с возможностью редактирования всех элементов - от текста до картинок.

В режиме HTML осуществляется подсветка синтаксиса, однако довольно посредственную - дескрипторы выделены, синим цветом, все остальное - черного цвета.

В режиме Preview можно посмотреть, как будет выглядеть ваша страница в окне браузера.

FrontPage имеет конструктор таблиц, существенно облегчающий их создание. Одним из основных преимуществ программы является большое количество имеющихся шаблонов, позволяющих пользователю не ломать голову над дизайном своего проекта. Выбрав необходимый шаблон, можем приступать непосредственно к наполнению страницы контентом. Вот тут то и ощущается вся прелесть FrontPage: процесс создания HTML-страницы ничем не отличается от создания обычного текстового документа в MicrosoftWord. Нам доступны те же средства для редактирования текста, смены его форматирования, создания и редактирования таблиц, вставки различных объектов и изображений и всё это без знания HTML. FrontPage делит рабочую область на несколько блоков, содержащих определенные элементы страницы - рисунки, текст, заголовки и проч. Для каждого блока можно назначить свои параметры форматирования и расположения его относительно страницы.

Минусы: небольшой набор инструментов разработки, невозможность отдельного приобретения программы. MicrosoftFrontPage неплохо подойдет в качестве HTML-редактора на первое время, однако с ростом потребностей его возможностей может не хватить. Есть и обратная сторона медали - сложность и громоздкость полученного кода, что естественно, сказывается на конечном размере документа. Также в дальнейшем будет весьма сложно вносить изменения в подобный документ. Но это скорее недостаток не конкретного продукта, а практически всех WYSIWYG-редакторов (WhatYouSeeIsWhatYouGet - "что видите, то и получите").

Web-компоненты работают только в том случае, если на web-сервере, который используется, присутствуют соответствующие им программы.

MicrosoftWord

Не смотря на то, что MicrosoftWord является текстовым редактором и по существу не считается HTML-редактором. Он имеет возможность сохранять файлы в формате HTML. В результате мы можем столкнуться со страницами которые тем или иным способом были созданы в MicrosoftWord. Проблемы в HTML-коде, полученном из редактора аналогичны проблемам FrontPage: обе эти программы создают избыточный код, который не во всём соответствует HTML-стандарта. Огромное количество людей, использующих Word в своей повседневной работе, становятся потенциальными разработчиками HTML-документов.

Создать web-станицу в Word можно двумя способами: с помощью Мастера либо преобразовав существующий документ Word в формат HTML. При этом Word сам генерирует тэги HTML, хотя и не оптимальным образом. Преобразование естественно приводит к тому, что какие-то элементы оформления документа будут утрачены или изменены. При необходимости вставить на HTML-страницу собственные тэги, в Word предусмотрено непосредственное редактирование HTML-кода.

AdobeIllustrator

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

Web-страницы могут содержать много элементов - текст HTML, растровые изображения, векторную графику. В Illustrator можно использовать фрагменты для определения границ различных web-элементов в объекте. Web-страница делится на ячейки которые представляются в трёх типах: изображения, без изображения, HTML-текст.

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

Карты ссылок позволяют связать одну или несколько областей изображения (так называемых активных областей) с URL-адресом. Когда щелкаем по активной области, web-браузер загружает связанный с ней файл.

Основная разница между использованием карт ссылок и фрагментов для создания связей состоит в том, как объект экспортируется на web-страницу. Использование карт ссылок сохраняет объект в виде единого файла изображения, а в случае использования фрагментов объект делится на несколько отдельных файлов. Еще одна разница между картами ссылок и фрагментами состоит в том, что карты позволяют связывать многоугольные или прямоугольные области в объекте, а фрагменты - только прямоугольные [1].

AdobePhotoshop

Самая популярная и широко распространенная программа редактирования изображений. С её помощью можно создавать высокохудожественные изображения. Она содержит всё необходимое для создания и редактирования профессиональной графики.

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

При всей простоте основных инструментов Photoshop пользователь может к тому же настраивать их "под себя". А это равносильно наличию бесконечного разнообразия мелков. Поскольку программы рисования полагаются при своей работе на пиксели, они идеально подходят для работы с электронными (цифровыми) фотографиями цветных карандашей, пульверизаторов, акварельных и масляных красок и многого другого. Photoshop предоставляет полный контроль над каждым пикселем изображения. Недостаток программ рисования в ограниченном разрешении. Поскольку битовый рисунок состоит из фиксированного количества пикселей [8].

CorelDraw

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

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

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

CorelDraw демонстрирует качества мощного визуального редактора web-страниц: пользователь получает возможность генерировать развитые HTML-документы, которые могут включать сценарии JavaScript и таблицы стилей CSS.

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

При размещении изображений на странице одна из наиболее важных задач - оптимизация размера файлов изображений. Рекомендуемый "потолок" общего размера страницы - от 100 до 150 кбайт. Уменьшение размера файлов изображений выполняется сжатием файлов и уменьшением количества цветов. Эти задачи доступны для любой из графических программ, перечисленных выше [2].

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

3.3 Проектирование базы данных

В разрабатываемом программном продукте будет использоваться база данных MySqlServer. Структура базы данных продемонстрирована на рисунке. Описание сущностей и связей представлено в таблицах

Описание сущностей

Наименование сущности	Описание смысла сущности
1	Tovars_video	Содержитвидео о товаре
2	Tovars_img	Содержит картинку о товаре
3	Tovars	Содержит данные о товарах
4	Main	Формирует реквизиты анкетных данных
5	tovars	Содержит анкетные данные сотрудников предприятия
6	tovars_com	Содержит комментарии оставленными пользователем к определенному товару
7	tovars_img	Содержит библиотеку с картинками о товарах
8	tovars_video	Содержит библиотеку с видео файлами о товарах
9	reviews	Содержит данные об отзыве
10	revirws_temp	Содержит данные для подтверждения отзыва
11	Soc	Содержит данные о социальных сетях
12	Tovar	Содержит заполненные заявки с товарами
13	Users	Содержит данные о всех зарегистрированных пользователях
14	Zay	Содержит данные о заявках

Описание атрибутов сущностей информационной модели базы данных представлено в таблице. Графа «Определенность значения атрибутов» может принимать значение 1, если значение атрибута обязательно должно быть определено и 0, если значение атрибута не может быть определено.

Описание атрибутов сущностей

Наименование сущности	Название атрибута	Определенность значения атрибута	Шифр домена
1	tovars_video	video_id	1	D35
		tovar_id	1	D2
		video	1	D34
2	tovars_img	img_id	1	D33
		tovar_id	1	D2
		img	1	D1
3	tovars	tovar_id	1	D2
		news_zagolovok	1	D3
		news_text	1	D4
		lon	1	D5
4	tovar	tovar_id	1	D2
		zay_id	1	D6
5	tovar_com	tovar_com_id	1	D7
		tovat_id	1	D2
		user_id	1	D8
		text	1	D9
6	users	user_id	1	D8
		name	1	D10
		photo	1	D11
		hash	1	D12
7	zay	zay_id	1	D6
		name	1	D10
		phone	1	D13
		email	1	D14
		check	1	D15
8	contacts	contact_id	1	D16
		name	1	D10
		vk_id	1	D17
		phone	1	D13
		info	1	D18
9	about	tex_tab_1	1	D19
		text_tab_2	1	D20
		url_tab_1_button	1	D21
		url_tab_2_button	1	D22
10	main	text_tab_1	1	D19
		text_tab_2	1	D20
		url_tab_1_button	1	D21
		url_tab_2_button	1	D22
11	admins	admin_id	1	D23
		vk_id	1	D17
		name	1	D10
12	reviews_temp	reviews_temp_id	1	D24
		name	1	D10
12	reviews_temp	text	1	D9
		user_id	1	D8
13	reviews	review_id	1	D25
		user_id	1	D8
		user_name	1	D26
		review_text	1	D27
14	soc	instagarm	1	D28
		facebook	1	D29
		twitter	1	D30
		vk	1	D31
		mail	1	D32

Множество допустимых значений атрибутов называется доменом. Описание доменов атрибутов сущностей информационной модели базы данных конфигурации представлено в таблице.

Описание доменов атрибутов базы данных

Шифр домена	Наименование	Тип данных	Размер	Пример
D1	img	Строка	20	1.PNG
D2	tovat_id	Число	20	1
D3	news_zagolovok	Строка	60	Куртка
D4	news_text	Строка	20	Хорошего дня
D5	lon	Число	20	8999
D6	zay_id	Число	20	1
D7	tovar_com_id	Число	20	1
D8	user_id	Число	20	1
D9	text	Строка	20	Акция
D10	name	Строка	20	Иван
D11	photo	Строка	20	1.PNG
D12	hash	Число	20	[1,20]
D13	phone	Строка	20	89001234567
D14	email	Строка	10	Ivan@mail.ru
D15	check	Строка	10	Отправлено
D16	contact_id	Число	20	1
D17	vk_id	Число	20	1
D18	info	Строка	20	У нас скидки
D19	text_tab_1	Строка	50	Хорошего дня
D20	text_tab_2	Строка	50	Доброго вечера
D21	url_tab_1_button	Строка	50	Ссылка на кнопку
D22	url_tab_2_button	Строка	50	Ссылка на кнопку
D23	admin_id	Число	20	1
D24	reviews_temp_id	Число	20	1
D25	review_id	Число	20	1
D26	user_name	Строка	20	Виктор
D27	review_text	Строка	50	Хороший товар
D28	instagarm	Строка	50	Ссылка на соц сети
D29	facebook	Строка	50	Ссылка на соц сети
D30	twitter	Строка	50	Ссылка на соц сети
D31	vk	Строка	50	Ссылка на соц сети
D32	mail	Строка	50	Ссылка на почту
D33	img_id	Число	20	1
D34	video	Строка	50	Ссылка на видео
D35	Video_id	Число	20	1

Рисунок 18 - Структура базы данных

3.4 Реализация программы

Разработанный сайт состоит из несколькихразделов.

Главная - раздел носит в себе общую информацию о магазине.

Каталог - раздел содержит в себе информацию о товарах, которые можно заказать на сайте, цена наименование товара, описание.

Инструктаж - раздел содержит в себе инструкции к товарам.

Фотогалерея - раздел фотогалерея содержит в себе наглядную информацию о продаваемых продуктах и фотографиях с демонстрацией товара. Отзывы - раздел отзывы содержит в себе отзывы клиентов.

О нас - раздел о нас содержит в себе информацию о магазине.

Авторизация - раздел авторизация дает возможность авторизоваться пользователю для совершения заказа и администратору для подтверждения заказа и обновления ассортимента.

Корзина - раздел корзина содержит в себе информацию о покупаемых товарах пользователем.

Поиск - раздел поиск помогает найти нужный товар на сайте.



4. Разработка методик и проведение тестирования программного обеспечения

4.1 Выбор стратегии тестирования

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

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

Функциональных подход основывается на том, что структура ПО неизвестна (чёрный ящик). В этом случае тесты строят, опираясь на функциональные спецификации.

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

5. Экономика производства

5.1 Расчет затрат

5.1.1 Расчет трудозатрат на разработку программного продукта

Основными трудозатратами являются затраты на исследование алгоритма решения задачи, на разработку блок схемы и алгоритма программы, на программирование, на отладку программы на персональном компьютере и на подготовку документации. Трудозатраты измеряются в человеко-часах (чел-час). Расчет производится по формуле 1

T = tи + tа + tп + tотл + tд,(1)

где t_и- затраты труда на исследование алгоритма решения задачи, чел-час;

tа - затраты на разработку блок-схемы алгоритма, чел-час;

tп - затраты на программирование, чел-час;

tотл - затраты на отладку программы на ПК, чел-час;

tд- затраты на подготовку документации, чел-час.

Затраты труда на исследование алгоритма решения задачи с учетом уточнения описания и квалификации программиста вычисляются по формуле 2

tи = (Q • B) / 80 • k,(2)

где Q - условное число операторов в программе;

В - коэффициент увеличения затрат в зависимости от сложности

программного продукта;

k - коэффициент квалификации разработчика.

Условное число операторов в программе «Q» можно определить по формуле 3

Q = q •c • (1 + p),(3)

где q - предполагаемое число операторов;

с - коэффициент новизны и сложности программы;

р - коэффициент коррекции программы в ходе ее разработки.

Предполагаемое число операторов выбирается из таблицы

Предполагаемое число операторов в зависимости от типа задач

Тип задачи	Пределы изменений коэффициента
Задачи учета	от 1400 до 1500
Задачи оперативного управления	от 1500 до 1700
Задачи планирования	от 3000 до 3500
Многовариантные задачи	от 4500 до 5000
Комплексные задачи	от 5000 до 5500

Коэффициент новизны и сложности программ выбирается из таблиц

Группы новизны программных продуктов

Группа новизны	Содержание работ
А	разработка принципиально новых задач
Б	разработка оригинальных программ
В	разработка программ с использованием типовых решений
Г	разовая типовая задача

Группы сложности программных продуктов

Группа сложности	Содержание работ
1	алгоритмы оптимизации и моделирования систем
2	задачи учета, отчетности и статистики
3	стандартные алгоритмы

Коэффициенты новизны и сложности программы

Уровень языка программирования	Группа сложности	Степень новизны
		А	Б	В	Г
Высокий	1	1,38	1,26	1,15	0,69
	2	1,30	1,19	1,08	0,65
	3	1,20	1,10	1,00	0,60
Низкий	1	1,58	1,45	1,32	0,79
	2	1,49	1,37	1,24	0,74
	3	1,38	1,26	1,15	0,69

Так как в разрабатываемом программном продукте группа новизны программы В, группа сложности 2, уровень языка программирования высокий, то коэффициент выберется 1,08.

Расчет затрат на разработку блок-схемы алгоритмапроизводится по формуле 4

ta = Q / 70 •k, (4)

где Q - условное число операторов;

k - коэффициент квалификации разработчика.

Затраты на программирование составляют примерно 20 - 30 % от общих трудозатрат на остальные этапы разработки программы.

В данном дипломном проекте затраты на программирование принимаются равными 25% от общих трудозатрат на остальные этапы разработки программы.