ВКР (Информационное веб-приложение для ООО Двадцать семь)

Министерство транспорта Российской федерации

Федеральное агентство железнодорожного транспорта

Федеральное государственное бюджетное

образовательное учреждение высшего образования

«Дальневосточный государственный университет путей сообщения»

Кафедра «Вычислительная техника и компьютерная графика»

К защите допустить

Заведующий кафедрой

________ О.А. Графский

«___» ___________ 2017

Информационное веб-приложение для ооо «Двадцать семь»

Выпускная квалификационная работа

ВКР 09.03.03.ПрИ.08.00.941 – ПЗ

Студент 941 гр. ________________________________________ А.К. Левченко

Руководитель

ст. преподаватель ______________________________________ П.С. Тимош

Нормоконтролёр

к.т.н., доцент __________________________________________ Е.В. Буняева

Хабаровск 2017

Содержание

Введение 3

1 Теоретические основы и методы разработки веб-приложения 5

1.1 Обзор задачи, поставленной предприятием 5

1.1.1 Предприятие и его цели 5

1.1.2 Требования к веб-приложению 6

1.2 Актуальность создания веб-приложения 8

1.3 Этапы разработки веб-приложения 9

1.3.1 Определение основных функций приложения и разработка его _____структуры 9

1.3.2 Разработка дизайна приложения 9

1.3.3 Разработка базы данных 11

1.3.4 Программирование 12

1.4 Основные технологии по созданию веб-приложения 13

1.4.1 Обзор основных технологий 13

1.4.2 Методы решения поставленной задачи 16

2 Дизайн веб-приложения 22

2.1 Уровни разработки 22

2.1.1 Уровень стратегии 23

2.1.2 Уровень набора возможностей 23

2.1.3 Уровень структуры 24

2.1.5 Уровень компоновки 27

2.1.5 Уровень поверхности 29

2.2 Основные принципы веб-дизайна 30

2.2.1 Акцентирование 30

2.2.2 Контрастирование 31

2.2.3 Балансировка 32

2.2.4 Выравнивание 32

2.2.5 Повторение 33

2.2.6 Удобство восприятия 34

2.3 Описание дизайна веб-приложения 34

3 Программная реализация 41

4 Технико-экономическое обоснование 45

Заключение 47

Список использованных источников 48

Приложение А Обработка загружаемого файла на JavaScript 51

Приложение Б Фрагмент CSS кода 52

Введение

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

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

Данный вид приложений имеет множество особенностей, которые накладывают отпечаток на процессы их функционирования, разработки и поддержки [3].

Целью выпускной квалификационной работы является разработка веб-приложения для ООО «Двадцать семь».

В соответствии с указанной целью поставлены следующие задачи:

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

– выбрать технологии реализации;

– спроектировать дизайн приложения;

– создать базу данных, на основе которой будет работать приложение;

– выполнить процесс построения функциональных инструментов для наполнения и обработки базы данных.

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

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

Выпускная квалификационная работа выполнена в соответствии с методическими указаниями [1].

Разработанное веб-приложение будет передано предприятию ООО «Двадцать семь» и использовано в целях развития, расширения и улучшения предприятия, а также в дальнейшем использовано как часть более обширного проекта предприятия.

1 Теоретические основы и методы разработки
веб-приложения

1.1 Обзор задачи, поставленной предприятием

В данной работе рассматривается задача по развитию предприятия, поставленная обществом с ограниченной ответственностью «Двадцать семь».

1.1.1 Предприятие и его цели

Основной деятельностью компании ООО «Двадцать семь» на данный момент является электромонтаж аппаратуры, а также ремонт и обслуживание электротехники. Компания основана относительно недавно, в 2015 году, а потому находится на стадии активного развития. В связи с этим встал вопрос о расширении видов деятельности предприятия, и было принято решение о развитии деятельности по созданию и использованию баз данных и информационных ресурсов.

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

Веб-приложение – это прикладное программное обеспечение, логика которого распределена между сервером и клиентом, а обмен информацией происходит по сети. Клиентская часть реализует пользовательский интерфейс, а серверная – получает и обрабатывает запросы от клиента, выполняет вычисления, формирует веб-страницу и отправляет её клиенту согласно протоколу HTTP [3].

Создание веб-приложения для предприятия рассчитано на реализацию следующих целей:

– организация новых видов деятельности предприятия;

– расширение ассортимента предоставляемых услуг;

– распространение информации о предприятии;

– привлечение новых клиентов;

– увеличение прибыли.

Таким образом, реализация поставленной задачи направлена на многостороннее развитие компании.

1.1.2 Требования к веб-приложению

Веб-приложение, разрабатываемое по заказу ООО «Двадцать семь» должно разрабатывается на основе технического задания, предоставленного предприятием.

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

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

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

На главной странице можно просмотреть все объявления что выводятся в бегущей строке, причем их можно выводить по категориям «Куплю», «Продам» и «Другое», а также по тематическим разделам: «Автотехника», «Бытовая техника», «Мебель», «Недвижимость», «Одежда» и «Прочее». Также должна существовать строка поиска.

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

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

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

Так же должны быть размещены условия использования приложения.

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

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

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

Доменное имя, на котором должно располагаться веб-приложение – «obstrok».

Приложение должно иметь свой логотип.

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

Стиль оформления веб-приложения должен быть простым, без особых излишеств.

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

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

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

1.2 Актуальность создания веб-приложения

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

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

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

1.3 Этапы разработки веб-приложения

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

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

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

1.3.2 Разработка дизайна приложения

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

Дизайн-макет – это графическое, наглядное изображение основных элементов приложения. Дизайн-макет полностью воплощает визуальную концепцию приложения. Его разработка выполняется в одной из графических программ. Чаще всего для этого используется программа Adobe Photoshop. В процессе разработки дизайнер руководствуется пожеланиями заказчика: предпочтительные цвета, наличие тех или иных графических элементов и прочее.

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

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

Важным элементом веб-дизайна является графика, которую условно можно разделить на три категории:

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

– функциональная графика – кнопки навигации, счётчики и другие элементы управления сайтом;