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

Рис. 3.10 – Макет страницы «Контакты»В разделе «Контакты» представлена контактная информация компании «ЭкоФуд».3.4. Разработка карты сайтаБольшинство современных сайтов состоят из страниц, созданных по единому шаблону, который содержитиз одних и тех же элементов: заголовка, боковых панелей, нижней части (подвала), основной информационной области и т.д. [3] Каждая такая область служит определенной цели. В заголовке, к примеру, пользователь видит название сайта, основное меню, контакты и прочую общую для всех страниц информацию. В боковых панелях часто размещают контекстные навигационные меню, содержимое которых зависит от выбранного пользователем раздела или просто рекламу. В нижней части сайта может быть информация об авторе и авторском праве, а также ссылки на наиболее популярные разделы сайта или что-то в этом рода. В основной части страницы содержится то самое информационное наполнение, отличающее эту страницу от всех остальных. На рис. 3.11 приведена структура трехколоночного макета.Рис. 3.11 - Общий вид трехколоночного макета сайтаМакеты друг от друга могут отличаться набором элементов, к примеру, количеством тех же колонок, а также тем, как ведет себя основная область при изменении ширины окна интернет браузера. Если ее ширина всегда остается постоянной, то такой макет называют макетом с фиксированной шириной. Если ширина основной области динамически меняется вместе с шириной окна браузера, то такой макет часто называют «резиновым» макетом [6]. Примеры макетов приведены на рис. 3.12.Рис. 3.12 - Примеры макетовНа рисунке приведены следующие макеты:а) трехколоночный макет с фиксированной шириной основной области. б) трехколоночный макет с резиновой шириной основной области. в) двухколоночный макет с боковой панелью справа. г) двухколоночный макет с боковой панелью слева.Макет сайта – это трафарет, по которому будут создаваться все основные страницы сайта. Способы создания макета сайта:Создание с помощью CMS - макет сайта выбирается из набора шаблонов для данной CMS. Создание собственного макета средствами cms и html. Создание новой страницы будет сводиться к копированию макета и его информационному наполнению.Определение структуры сайтаСтруктура сайта – это способ организации связей между различными разделами интернет ресурса, которые представлены отдельными веб-страницами [15]. Структура сайта является иерархической структурой, начинающейся с главной страницы. Уровень раздела или уровень страницы в структуре сайта определяется минимальным количеством переходов по ссылкам, которые необходимо выполнить пользователю, чтобы попасть на данную страницу с главной страницы сайта. Уровень страницы в структуре сайта не следует путать с уровнем вложенности файла, представляющего страницу в папках на диске, где размещен ваш сайт. Страница может находиться в корневом каталоге, но быть недосягаемой с главной станицы, и наоборот – находиться глубоко в подкаталогах на диске, но при этом с главной страницы сайта на нее будет прямая ссылка. Вот так выглядит обобщенная структура сайта до разделов 1-го уровня.Рис. 3.13 - Обобщенная структура сайтаПри разработке структуры сайта следует учитывать то обстоятельство, что пользователь не всегда будет начинать навигацию по вашему сайту с главной страницы. Поисковые системы в ответ на запросы пользователя довольно часто формируют ссылки на страницы, соответствующие далеко не 1-му, а то и не 2-му уровню структуры вашего веб-ресурса. В этой связи необходимо сделать все возможное, чтобы пользователь, перейдя по ссылке поисковой системы к вам на сайт, имел возможность вернуться в основной раздел, а также перейти на главную страницу. Таким образом, создавая структуру сайта, вы должны заботиться не только о ссылках, ведущих «вниз», но и о ссылках, ведущих «вверх» по структуре вашего веб-ресурса в направлении основных разделов и его главной страницы. Структуру раздела, представленного основной страницей и набором тематически связанных с ней страниц можно организовать одним из следующих способов [11].На рис. 3.14-3.15 представлены структуры разделов сайта «дерево» и «кольцо».Рис. 3.14 - Структура раздела сайта «дерево»Рис. 3.15 - Структура раздела сайта «кольцо»Выбор: Для реализации структуры страницы будет использован двухколоночный макет с боковой панелью слева. Структура разделов сайта «Дерево».Карта сайта отображает структуру страниц сайта, глубину вложенности. Данное представление позволяет оценить структурированность разделов сайта и сложность посика информации пользователем.На рис. 3.16 приведена карта сайта компании «ЭкоФуд».Рис. 3.16 – Карта сайта3.5. Разработка программных модулейПакет включает в себя набор статичных html-страниц с информацией, а также программные скрипты для работы с БД сайта.На рис. 3.17 приведено дерево программных модулей системы.Рис. 3.17 - Дерево программных модулей системы3.6. Разработка руководства по установке и работе системы, инструкции пользователяДля начала работы с сайтом его необходимо сначала установить на интернет-хост или на локальный web-сервер.Рассмотрим порядок установки системы на локальный сервер. Данный способ установки наиболее удобен, так как позволяет демонстрировать работу сайта, не имея доступа в интернет, и является бесплатным.Для установки необходимо скопировать папку WebServersна диск С:\.Далее войти в раздел denwer.Рис. 3.18 – Копирование WebServersна диск С:\Далее необходимо запустить локальный сервер, запустив приложение run.exe. При этом по завершении работы с сайтом необходимо запустить утилиту stop.exe.Рис. 3.19 – Запуск локального сервераПосле запуска локального сервера можно перейти запуску самого сайта.Для этого необходимо запустить любой браузер и адресной строке ввести: http://eko-foog.ru/.Рис. 3.20 – Запуск сайта в браузереДалее перейдем в раздел «Продукты».В данном разделе продукция компании сгруппирована по категориям:Злаковые продукты.Натуральные масла.Фитопродукция.Медовая продукция.Рис. 3.21 – Каталог продукцииДалее прейдем для примера в раздел «Злаковые продукты».В разделе будут представлены злаковые продукты с описаниями, с указанием артикула и цены.Рис. 3.22 – Злаковые продуктыДалее перейдем в раздел «Заказать». В данном разделе представлена электронная форма заказа продукции.Для заказа наименования необходимо заполнить форму и нажать на кнопкуОтправить.После этого заказа отобразится у менеджера и начнется его обработка.Рис. 3.23 – Форма заказаРис. 3.24 – Заполнение формыПосле отправки заказа менеджеру система выдаст пользователю уведомление.Рис. 3.25 – Уведомление клиентуОзнакомиться с условиями доставки товаров клиентам можно в разделе «Условия доставки».Рис. 3.26 – Условия доставкиОзнакомиться с контактной информацией можно в разделе «Контакты».Рис. 3.27 – КонтактыПосле работы с приложением клиента, перейдем в приложение менеджера.Данное приложение предназначено только для сотрудников компании и требует прохождения процедуры авторизации.Для запуска приложения менеджера необходимо ввести в адресной строке браузера: http://eko-foog.ru/admin.php.Для входа в систему введем учетную запись user | user.Рис. 3.28 – Страница авторизацииРис. 3.29 – Ввод учетной записиПосле запуска приложения менеджера отобразятся все заказы клиентов.Рис. 3.30 – Заказы от клиентовОбоснование экономической эффективности4. Экономическая частьРезультаты проекта внедрения web-приложения для организации продаж в компании ООО «ЭкоФуд»:Обеспечение возможности просмотра каталога продукции компании на сайте;Обеспечение возможности онлайн заказ продукции через интернет; Обеспечение возможности просмотра информации об условиях доставки на сайте компании; Обеспечение охвата новых сегментов рынка через интернет.Результаты проекта в цифрах:Снижение трудоемкости обработки заказов на 70%;Повышение потока заказов на 30%;Повышение оперативности обработки заказа на 30%.В таблице 4.1 приведены оценки трудозатрат на выполнение комплекса задач процесса до и после внедрения web-приложения.Таблица 4.1Сравнение затрат до и после внедрения ИСПоказательДо внедренияПосле внедренияКонсультация клиента30 мин0-5 минПрием заказа по телефону25 мин0-5 минПередача заказа в работу20 мин0-5 минКоличество заказов в месяц340490Из таблицы 4.1 видно, что трудозатраты на выполнение комплекса задач процесса в значительной степени сократились. Освободившихся сотрудников можно задействовать на других участках работ.Также произошло повышение потока заказов за счет привлечения новых клиентов через интернет, при дальнейшем продвижении сайта поток заказов будет увеличиваться. Так же необходимо учитывать и издержки на разработку web-приложения. Все капитальные затраты приведены в табл. 4.2.Таблица 4.2Капитальные затратыПоказательСтоимость, руб.ПримечаниеЗатраты на заработную плату разработчика и проектировщика80000Стоимость разработки, согласно коммерческого предложения компании WebMasterПокупка доменного имени10000Регистрация доменного имени сайтаЗатраты на продвижение в год100000Стоимость разработки, согласно коммерческого предложения компании WebMasterЗатраты на сопровождение в год60000Стоимость разработки, согласно коммерческого предложения компании WebMasterНакладные расходы4800060% от заработной платы персоналаВсего капитальных затрат298000ЗаключениеЦелью настоящей работыявляется разработка web-приложения для компании «ЭкоФуд».В первой главе дипломного проекта рассмотрено состояние интернет-коммерции в России, рассмотрены перспективы и проблемы дальнейшего развития.Во второй главе дано описание деятельности компании «ЭкоФуд».Также осуществлен анализ существующего бизнес-процесса. Анализ процесса показал, что ряд задач процесса требует автоматизации.Осуществлено моделирование процесса с применением интернет-сайта.В третьей главе представленоописание программной реализации интернет-сайта. Разработаны проектные решения по видам обеспечения.Внедрение интернет-сайта позволит:повысить уровень продаж за счет привлечения новых клиентов через интернет;повысить уровень сервиса для клиентов;снизить нагрузку на сотрудников компании;повысить оперативность обработки заказов;обеспечить контроль выполнения заказов.Дальнейшим направлением развития системы возможно:разработка мобильного приложения;интеграция платежного модуля;интеграция модуля SMS-оповещения;разработка личного кабинета для клиента.Библиографический списокВеллинг, Л. Разработка веб-приложений с помощью PHP и MySQL/Л.Веллинг, М.: Вильямс, 2010 – 848. Варфел, Т.З. Прототипирование. Практическое руководство/Т.З.Варфел, М.: Вильямс, 2011 – 456.Голубков, Е.П. Основы маркетинга / Е. П. Голубков. – М.: Фин-Пресс, 2003. – 688 с. Гарднер, Л. Разработка веб-сайтов для мобильных устройств/Л.Гарднер, Спб.: Питер, 2013 – 448.Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов/В.Дронов, БВХ-Петербург, 2011 – 416.Джонсон, Д. Умный дизайн. Простые приемы разработки пользовательских интерфейсов/Д.Джонсон, Спб.: Питер, 2012 – 224.Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов/Д.Дакетт, М.: Эксмо, 2013 – 480.Зандстра, М. PHP. Объекты, шаблоны и методики программирования/М.Зандстра, М.: Вильямс, 2011 – 560.Кедлек, Т. Адаптивный дизайн. Делаем сайты для любых устройств/Т.Кедлек, Спб.: Питер, 2013 – 288.Кузнецов, М. PHP на примерах/М.Кузнецов, Спб.: БВХ-Петербург, 2012 – 400.Квинт, И. Создаем сайты с помощью HTML, XHTML и CSS на 100%/И.Квинт, Спб.: Питер, 2012 – 448.Крокфорд, Д. JavaScript. Сильные стороны/Д.Крокфорд, Спб.: Питер, 2013 – 176.Катернюк, А.В. Практическая реклама/А.В. Катернюк, М.: Феникс, 2008 – 432.Ленгсторф, Д. PHP и jQuery для профессионалов/Д.Ленгсторф, Ллойд, Й. Создай свой веб-сайт с помощью HTML и CSS/Й.Ллойд, Спб.: Питер, 2013 – 449.Мак-Дональд, М. Создание Web-сайта. Недостающее руководство/М.Мак-Дональд, Спб.: БВХ-Петербург, 2013 – 624.