Frontend разработка курсовая работа

Разработка front-end части веб-приложения c блочным подходом к формированию html структуры документа

Министерство
образования и науки, молодёжи и спорта Украины

Донецкий
национальный техничный университет

Институт
информатики и искусственного интеллекта

Кафедра
систем искусственного интеллекта

Курсовая работа

Разработка
front-end части веб-приложения c блочным подходом к формированию html структуры
документа

Задание выдала:

доц. Егошина А.А.

Консультант:

ас. Чубатов Р.Е.

Разработал:

ст. гр. СШИ-11 Домбровский Д.А.

Задание на курсовую работу

1.      Тема курсовой работи:

Разработка front-end части веб-приложения c блочным подходом к
формированию html структуры документа

.        Входные данные:

Шаблоны PSD, литература

.        Перечень вопросов, которые подлежат разработке:

Описание средств реализации сайта, программная реализация

4.      Рекомендованые средства:

Средство разработки:, CSS

5.      Рекомендованная литература:

Дубаков М. — Создание Web-страниц: искусство вёрстки — Мн.: Новое знание,
2004. — 287 с.

6.      Содержание пояснительной записки: типичный, согласно стандартам

7.      Термин сдачи работы на кафедру:

.        Дата защиты работы по графику: 10/01/2013

Задание выдано 05/10/2012

Задание выдала доц. Егошина А.А.

Консультант асс. Чубатов Р.Е.

Реферат

Пояснительная записка: 40 с., 4 рис., прилож. 2

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

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

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

Перечень
условных обозначений, символов, единиц и терминов

ВБС —
веб-базовая система

ПЗ —
пояснительная записка

ЭФ — экранная форма- PHP: Hypertext Preprocessor

КР — курсовая
работа

КС —
компьютерная система

WWW
— World Wide Web- HyperText Markup Language

CSS —
Cascading Style Sheets

Содержание

Введение

. Техническое
задание

.1 Назначение
сайта

.2 Цели
создания сайта

.3 Требования
к сайту

.4
Технические показатели

.
Теоретическая часть

.1
Определение HTML как языка разметки

.2 Структура
HTML документа

.3 Основные
элементы HTML

.4 Стили CSS

.
Практическая часть

.1 Среда
разработки

.2
Практическая реализация

Заключение

Список
литературы

Приложение 1

Введение

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

Основными свойствами таблиц являются:

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

·        возможность сохранять установленные верстальщиком размеры
одних ячеек и при этом делать растяжимыми другие.

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

Однако он имеет ряд минусов:

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

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

·        Структура кода при табличной верстке такова, что поисковый
робот начинает читать код страницы, а не контент. Из-за этого страница хуже
проходит индексацию поисковиками, чем при блочной вёрстке.

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

Ввиду этих проблем большинство верстальщиков перешли от табличной верстке
к блочной.

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

Тег div — главное преимущество блочной верстки сайта над табличной. Он
может обозначать и разные функциональные области (меню навигации, шапка,
основной блок, подвал), и отдельные их элементы. В HTML теги, как правило,
жестко привязаны к своему содержимому. Например, в тег <image> вы никогда
не сможете вписать текст, только изображение.

Главными плюсами блочной верстки можно назвать:

·        соответствие кода современным стандартам;

·        удобочитаемость кода;

·        семантически верный код;

·        минимальное время загрузки страницы;

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

1. Техническое задание

.1 Назначение сайта

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

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

.2 Цели создания сайта

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

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

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

.3 Требования к сайту

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

Требования к языкам программирования. Для статических страниц и шаблонов
используются технологии HTML и CSS. HTML (HyperText Markup Language, язык
разметки гипертекста) — специальные инструкции браузера, с помощью которых
создаются веб-страницы. То, что отображается при просмотре страницы в Internet,
— это интерпретация браузером HTML-текста. CSS (Cascading Style Sheets,
каскадные таблицы стилей) — это набор параметров форматирования, который
применяется к элементам веб-страницы для управления их видом и положением.
Стили являются удобным, практичным и эффективным инструментом при верстке
веб-страниц и оформлении текста, ссылок, изображений и других элементов.

Требования к организации гиперссылок. Все ссылки на сайте являются
относительными (за исключением внешних). Относительные ссылки ведут отсчет от
корня сайта или текущего документа, а абсолютные адреса начинаться с указания
протокола (обычно #»787562.files/image001.gif»>

·        padding

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

Синтаксис: padding: [значение | проценты] {1, 4} | inherittop — отступ
сверху; padding-left — отступ слева;right — отступ справа; padding-bottom —
отступ снизу.

Кроссбраузерность:

·        font

Описание: универсальное свойство, которое позволяет одновременно задать
несколько характеристик шрифта и текста.

Синтаксис: font: [font-style||font-variant||font-weight] font-size [/line-height]
font-family | inherit

Значения:family — устанавливает семейство шрифта, которое будет
использоваться для оформления текста содержимого. Список шрифтов может включать
одно или несколько названий, разделенных запятой. Если в имени шрифта
содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные
или двойные кавычки.size — jпределяет размер шрифта элемента. Размер может быть
установлен несколькими способами. Набор констант (xx-small, x-small, small,
medium, large, x-large, xx-large) задает размер, который называется абсолютным.
По правде говоря, они не совсем абсолютны, поскольку зависят от настроек
браузера и операционной системы.style — определяет начертание шрифта — обычное,
курсивное или наклонное. Когда для текста установлено курсивное или наклонное
начертание, браузер обращается к системе для поиска подходящего шрифта. Если
заданный шрифт не найден, браузер использует специальный алгоритм для имитации
нужного вида текста. Результат и качество при этом могут получиться
неудовлетворительными, особенно при печати документа.weight — устанавливает
насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100.
Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100,
а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по
умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Кроссбраузерность:

сайт поиск работа зарегистрированный

·        border

Описание: универсальное свойство border позволяет одновременно установить
толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом
порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует
нужному свойству. Для установки границы только на определенных сторонах
элемента используются свойства border-top, border-bottom, border-left, border-right.

Синтаксис: border: [border-width || border-style || border-color] | inherit

Кроссбраузерность:

·        background

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

Синтаксис:.1 background: [background-attachment || background-color ||
background-image || background-position || background-repeat] | inherit

CSS3 background: [<фон>,]* <последний_фон>color — определяет
цвет фона элемента. Хотя это свойство не наследует свойства своего родителя,
из-за того, что начальное значение устанавливается прозрачным, цвет фона
дочерних элементов совпадает с цветом фона родительского элемента.position —
задает начальное положение фонового изображения, установленного с помощью
свойства background-image. В CSS3 допустимо указывать несколько значений для
каждого фона, перечисляя значения через запятую.repeat — определяет, как будет
повторяться фоновое изображение, установленное с помощью
свойстваbackground-image. Можно установить повторение рисунка только по
горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать
несколько значений для каждого фона, перечисляя значения через запятую.: url —
устанавливает фоновое изображение для элемента. Если одновременно для элемента
задан цвет фона, он будет показан, пока фоновая картинка не загрузится
полностью. То же произойдет, если изображения не доступны или их показ в браузере
отключен. В случае наличия в рисунке прозрачных областей, через них будет
проглядывать фоновый цвет.

Кроссбраузерность:

·        list-style

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

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

Синтаксис: list-style: list-style-type || list-style-position || list-style-image
| inherit

Кроссбраузерность:

·        text-align

Описание: определяет горизонтальное выравнивание текста в пределах
элемента.

Синтаксис: text-align: center | justify | left | right | start | end

Кроссбраузерность:

·        text-decoration

Описание: добавляет оформление текста в виде его подчеркивания,
перечеркивания, линии над текстом и мигания.

Одновременно можно применить более одного стиля, перечисляя значения
через пробел.

Синтаксис: text-decoration: [blink | line-through | overline | underline] | none |
inherit

Кроссбраузерность:

·        position

Описание: устанавливает способ позиционирования элемента относительно
окна браузера или других объектов на веб-странице.

Синтаксис: position: absolute | fixed | relative | static | inherit

Значения:- казывает, что элемент абсолютно позиционирован, при этом
другие элементы отображаются на веб-странице словно абсолютно
позиционированного элемента и нет.

Положение элемента задается свойствами left, top, right и bottom, также
на положение влияет значение свойства position родительского элемента. Так,
если у родителя значение position установлено как static или родителя нет, то
отсчет координат ведется от края окна браузера.

Если у родителя значение position задано как fixed, relative или
absolute, то отсчет координат ведется от края родительского элемента.-
положение элемента устанавливается относительно его исходного места.

Добавление свойств left, top, right и bottom изменяет позицию элемента и
сдвигает его в ту или иную сторону от первоначального расположения.

Кроссбраузерность:

3. Практическая часть

.1 Среда разработки

Документы HTML являются обычными текстовыми ASCII-файлами. Это означает,
что для их создания можно использовать любой текстовый редактор, даже с
минимальными возможностями. Существуют средства редактирования, разработанные
специально для написания HTML. Они позволяют экономить время, так как содержат
клавиши быстрого доступа для выполнения повторяющихся операций, например,
задания начальных установок документов, таблиц или просто применения стилей к
тексту. Редакторы HTML отличаются от авторского WYSIWYG-инструментария
(рассматриваемого далее) тем, что требуют знания правил составления HTML
вручную, редакторы лишь упрощают и ускоряют этот процесс.

Для разработки сайта портфолио было средство разработки Adobe
Dreamweaver. WYSIWYG HTML-редактор компании Adobe. Изначально разработан и
поддерживался компанией Macromedia, вплоть до 8-й версии (2005 год). Следующие
версии, начиная с Dreamweaver CS3 (2007), выпускает Adobe. Богатый
инструментарий, открытость приложения для всевозможных настроек, удобный
интерфейс и другие особенности сделали Dreamweaver одним из наиболее популярных
HTML-редакторов в мире. Его особенность состоит в том что при верстке страницы
можно сразу видеть результат изменения кода. Так же полезная функция —
подсвечивание вариантов тэга во время его написания. Это позволяет быстро
набирать длинные названия тэгов, а так же

Особенности Adobe Dreamweaver:

Html код, создаваемый программой, проходит проверку на валидность, а это
значит что не будет проблем с отображением сайта в разных браузерах и с
индексацией сайта;

три режима создания сайта;

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

мастер создания стилей в css;

возможность создания визуальных эффектов;

поддержка самых современных стандартов;

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

Для работы с графикой был использован графический
редактор Adobe Photoshop. Adobe Photoshop — многофункциональный графический
редактор, разработанный и распространяемый фирмой Adobe Systems. В основном
работает с растровыми изображениями, однако имеет некоторые векторные
инструменты. Продукт является лидером рынка в области коммерческих средств
редактирования растровых изображений, и наиболее известным продуктом фирмы
Adobe. Часто эту программу называют просто Photoshop. Исходные данные к проекту
были в формате PNG, этот формат принадлежит программе Photoshop. Благодаря
разумному подходу к возможностям это программы, можно создавать качественные
шаблоны для разработки сайтов. Так же ряд дополнительных возможностей
,позволяющие мгновенно исправить графические недочеты в изображениях на
создаваемом сайте, помогают корректно отображать всю задумку дизайнера сайта.

3.2 Практическая реализация

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

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

При создании меню сайта использовались списки <li>. За счет этого
удалось сделать так, что меню находилось в одной строчке и одновременно имело
свои собственные спецификации. Для каждого уникального <li>
использовались классы (class). Так в стиле css удалось задать параметры для
замены фона при наведении курсора.

·        text-decoration: none; — отменяет все эффекты, в том числе и
подчеркивания у ссылок, которое задано по умолчанию;

·        class id=»***» — устанавливает класс для каждого
<li>, что позволяет определять уникальные настройки;

·        list-style: none; — отменяет маркеры для списка;

·        position: relative; — положение элемента устанавливается
относительно его исходного места и в дальнейшем изменяется при помощи
координат.

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

Необходимо учесть и то, что удобно размещать объекты на странице при помощи
position: relative; Это свойство заключает в себе особенность размещать объект
в заданной структуре или блоке исключительно по пиксельным координатам, что
позволяет точно настраивать размещение того или иного объекта. Единственным
негативным явлением при использовании такого типа размещения — при заключении
рядом нескольких таких объектов, или при изменении их размеров, вся структура
сдвинется на определенное расстояние, равное самими изменениям элементов.

Заключение

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

В результате этой работы, мне удалось на хорошем уровне многие тонкости языка
разметки HTML, а так же прилегающий к нему, и как неотъемлемую его часть CSS.
Язык разметки HTML имеет просто огромный ряд особенностей, которые позволяют
создавать очень красивые сайты. Помимо всего, мне удалось освоить рабочие
программы Adobe Photoshop, Adobe Dreamweaver, и специальный блокнот с
подсветкой кода NotePad++. Все эти программы имеют свои спецификации, которые
по разному помогают создавать сайты. Так же я научился работать с разными
форматами документов, к примеру: PNG, PDF и так далее. Это умения очень ценны,
и помогут при разработке сайтов в дальнейшем.

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

Список литературы

1.      #»787562.files/image010.gif»>

Возможность вводить информацию:


< Программирование, компьютеры и кибернетика

Поиск на сайте math-solution.ru рефератов, курсовых, дипломных и контрольных работ, презентаций и т.д.

курсовая работа на тему:

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

Категория: Программирование, компьютеры и кибернетика
Предмет: Web-технологии и web-дизайн
Вид: курсовая работа

< Программирование, компьютеры и кибернетика

Документ HTML разделяется на две основные части: заголовок — head и тело — body.XHTML же является приложением XML.Документы HTML являются обычными текстовыми ASCII-файлами.Пример структуры документа.Корректная блочная верстка соответствует всем стандартам html.В наше время самой популярным методом вёрстки является блочное создание страниц основанное на CSS.Из-за этого страница хуже проходит индексацию поисковиками, чем при блочной вёрстке.Ввиду этих проблем большинство верстальщиков перешли от табличной верстке к блочной.Тег div — главное преимущество блочной верстки сайта над табличной.В HTML теги, как правило, жестко привязаны к своему содержимому.

Скачать Разработка front-end части веб-приложения c блочным подходом к формированию html структуры документа

Скачать документ

(Если ссылка на скачивание файла не доступна — дайте нам знать об этом в комментариях либо через форму обратной связи)

Похожие материалы

Комментарии (0)

В течение последних десяти лет на рынке интернет-приложений наблюдался значительный рост среди так называемых приложений-посредников. Такие приложения сильно облегчают коммуникацию между продавцами и покупателями. К таким приложениям относятся как классические онлайн биржи для продажи и покупки товаров общего пользования: eBay, Craigslist; так и менее традиционные: Airbnb, Aviasales.

Введение

Актуальность исследования

В течение последних десяти лет на рынке интернет-приложений наблюдался значительный рост среди так называемых приложений-посредников. Такие приложения сильно облегчают коммуникацию между продавцами и покупателями. К таким приложениям относятся как классические онлайн биржи для продажи и покупки товаров общего пользования: eBay, Craigslist; так и менее традиционные: Airbnb, Aviasales. Особенно заметна тенденция к «уберизации» многих традиционных сервисов: то есть перехода от модели традиционных объявлений к более чистой версии биржи, где большую часть тяжелой работы по связыванию покупателя и продавца берет на себя сам сервис. В качестве примера можно привести отечественные remontnik.ru и repetitor.ru. На этих сайтах продавцам, в данных случаях ремонтникам и репетиторам, не требуется единолично просматривать всех потенциальных покупателей. Веб-сервис автоматически рекомендует наиболее подходящих потенциальных клиентов с учетом ключевых характеристик: местоположения обоих агентов и соответствие требований покупателя и навыков продавца.

Российский рынок IT по исторически сложившимся обстоятельствам всегда развивался обособленно от традиционных IT гигантов: Google, Facebook и Amazon. Их функционал в той или иной степени практически заменяют Yandex, Vk и Ozon соответственно. Не чужды Российскому веб-маркету и интернет-биржи: Avito и недавно появившаяся Ula. Тем не менее до этого момента в Российском сегменте не был представлен веб-сайт для перепродажи электронных билетов. Единственная международная компания, которая занимает собой достаточный сегмент рынка, чтобы рассматривать расширение в СНГ, Viagogo до сих пор ничего не предприняла предположительно из-за проблем с локализацией и с юридическими нюансами, несмотря на то, что в 2014 году Timepad оценил Российский рынок электронных билетов в 4.1 миллиард долларов (Timepad, 2014).

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

Все это обуславливает выбор в пользу разработки именно веб-приложения.

Практическое применение

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

Формализация

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Цена диплома

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

Объект исследования: процесс разработки веб-приложений.

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

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

Задачи исследования:

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

Выбрать необходимый инструментарий разработки.

Обосновать сделанный выбор

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Определить конкретную логику бизнес-процессов.

Разработать минимально жизнеспособный продукт.

Структура работы

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

В Главе 2 будет уделено внимание описанию бизнес-процессов и логики системы. Эта глава ответит на следующие вопросы: на какие роли делятся пользователи, какие действия пользователи могут принимать, чем ограничены действия пользователей, как непосредственно должен будет происходить процесс взаимодействия пользователей друг с другом. То есть в этой главе будет описан процесс привлечения пользователей на сайт; сформулирован процесс загрузки билетов на сайт и процесс покупки; какие меры будут приниматься для предупреждения оппортунистического поведения. Также в этой главе мы коснемся состояние потенциального рынка электронных билетов в России; затронем то, как юридически сейчас регулируется распространение билетов на мероприятия в России. Не останется без внимания вопрос работы с клиентами: каких подходов следует придерживаться, а каких избегать. Техническая составляющая перечисленных в этой главе вопросов будет рассмотрена в Главе 1.

Ключевые термины- серверная часть веб-приложения.- часть веб-приложения, которая запускается на машине клиента.framework — полноценный продукт, на основе которого можно разрабатывать веб-приложение, следуемое принципам MVC.(model view controller) — методология разработки веб-приложений, согласно которой приложение разбивается на независимые части. Model описывает объектную форму бизнес-логики и является интерфейсом в базе-данных. View — генерирует отображения веб-страниц на основе предоставляемой ей модели. Controller — управляет веб-запросами и определяет, как на них отвечать.(Object-Relational Mapping) — программный объектно-ориентированный интерфейс к базе данных, который автоматически заменяет реляционные связи на объектные.API (application programming interface) — интерфейс, как правило, реализуемый с помощью HTTP запросов, который предоставляет доступ к данным веб-сервиса.

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

Глава 1

Основные принципы работы веб-сайта не претерпели сильных изменений за последние 20 лет. Клиент все так же отправляет HTTP запрос на сервер и сервер возвращает ему некоторый ответ. Это может быть HTML-страница или JSON-объект. Однако за время развития интернета этот простой функционал стал обрастать новыми дополнениями. JavaScript превращал статичные страницы в сложные интерфейсы и все это запускалось примерно-одинаково на всех машинах, где был установлен браузер, что в свое время было революционно. С появлением асинхронных ajax-запросов сложность интерфейсов возросла еще больше. Возрастающая сложность явилась причиной появления спроса на фронтенд-фреймворки, а забота о безопасности и желание использовать шаблонную разработку — бэкенд-фреймворки.

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Цена диплома

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

Выбор инструментов

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

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

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

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

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

Перед тем, как выбрать бэкенд фреймворк приложения, необходимо определиться с языком программирования. Из все характеристик языка программирования нас интересует, является ли язык интерпретируемым или компилируемым. По определению, компилируемые языки программирования задачи выполняют быстрее, чем интерпретируемые, и есть много решений на базе компилируемо-интерпретируемых языков: Java и C#. Учитывая значительный опыт работы с языком C#, казалось, должно было быть принято решение использовать ASP.NET в качестве веб-фреймворка, но как раз компилируемость языка стала решающим фактором. Дело в том, что, не имея за плечами опыт разработки таких масштабных продуктов, хотелось иметь возможность быстро проектировать и тестировать небольшие части программы, но так как для того, чтобы изменения кода вступили в силу, приходится ждать значительное время до завершения компиляции проекта, пришлось отказаться от языков требующих предварительной компиляции.

С интерпретируемыми языками ситуация проще. Для того, чтобы протестировать изменения достаточно всего лишь обновить страницу в браузере, тем более, что этот процесс можно автоматизировать, подключив инструмент, который при изменении файлов разработки, сам обновляет страницу. Также опять из-за отсутствия опыта работы с бэкенд фреймоврками, необходим был продукт с низким порогом входа, доступной документацией и обучающим сообществом. Laravel framework включает в себя все эти характеристики, плюс удовлетворяет второму пункту из требований к системе — безопасности. Laravel имеет встроенные системы для работы с базами данных, аутентификацией, регистрацией и управлением ролями пользователей (Stauffer, 2016; Malatesta 2015).

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Архитектура приложений Laravelопределяют как full-stack фреймворк, поскольку он может работать со всеми возможными частями веб-приложения. К таким частям можно отнести: веб-сервисы, управление базами данных, генерация HMTL, маршрутизация, кеширование, аутентификация, локализация, управление группами пользователей, сборка css и js файлов, инкапсуляция ресурсов и многое другое. Таким образом вертикально интегрированная среда веб-разработки обеспечивает лучший опыт для разработчика. С Laravel разработчик может взаимодействовать как через встроенную утилиту командной строки, которая управляет средой проекта Laravel, так и просто с помощью настройки конфигурационных файлов вручную. Как правило оба этих способа используются вместе.

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

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

Рисунок 1. Файловая структура

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

/app/ Состоит из контроллеров MVC модели, моделей ORM и утилит консоли.
/bootstrap/ Содержит в себе файлы, которые необходимы для запуска и работы ядра Laravel.
/config/ Только по названию можно определить, что в этой папке хранятся файлы для настройки всевозможных модулей Laravel: начиная с базы данных и кеширования, заканчивая модулем отправки писем и файловой системой.
/database/ В этой папке хранятся файлы миграций, сидирования и генерации баз данных из моделей.
/node_modules/ Папка, в которой хранятся подключаемые JS модули, установленные с помощью утилиты nvm.
/public/ Только эта папка на сервере доступна внешнему миру. На этот каталог должен ссылаться веб-сервер. Он содержит загрузочный файл index.php, который запускает ядро Laravel. Этот каталог также может быть использован для хранения любых общедоступных статических файлов, таких как CSS, JavaScript, изображения и другие.
/python/ Папка, созданная для хранения в ней python-утилит, предназначенных для работы с API Kudago.
/resources/ В этой папке находятся ресурсы для работы с фронтендом: исходные JavaScript и css файлы для сборок, файлы локализации и файлы представлений.
/routes/ Здесь хранятся файлы для конфигурации модуля маршрутизации, а именно web.php, работа которого будет подробно описана.
/storage/ Эта папка предназначена для хранения генерируемых работой Laravel файлов: сессий, кеша и логов.
/tests/ Как следует из названия, в этой папке хранятся файлы модульных тестов.
/vendor/ Это место для всех сторонних частей программы. В типичном приложении Laravel в него включается исходный код Laravel, его зависимости, а также плагины, содержащие дополнительные предварительно упакованные функции.
.env Из этого файла Laravel берет environment-переменные, например, здесь, с помощью изменения значения переменной DEBUG, можно задать состояние Laravel приложения — production или debug.
gulpfile.js Файл настройки модуля автоматизации задач сборки Gulp. В этом файле находится конфигурация виртуальной машины для разработки для Vagrant.

Model-View-Controller, как и подавляющее большинство вертикально интегрированных фреймворков следует архитектурному паттерну MVC (Model-View-Controller), или Модель-Представление-Контроллер по-русски, который обеспечивает разделений бизнес-логики от логики представления, связанной с графическим пользовательским интерфейсом (GUI — graphical user interface). В случае с веб-приложениями Laravel бизнес-логика обычно состоит из моделей данных для таких вещей, как пользователи, сообщения в блогах, а GUI, это просто веб-страница в веб-браузере. Шаблон проектирования MVC очень популярен в пространстве веб-разработки.

В шаблоне MVC существует три компонента:

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

Представление — визуальное представление модели с учетом какого-либо контекста. Обычно это результирующая разметка, которую фреймворк передает браузеру, например, HTML страница, представляющая собой отображение информации о билете в браузере. Уровень представления отвечает за создание пользовательского интерфейса, обычно на основе данных в модели. Например, в интернет-магазине будет список продуктов, которые будут отображаться на экране каталога. Этот список будет доступен через модель, но это будет представление, которое обращается к списку из модели и форматирует его для конечного пользователя. Хотя представление может предоставлять пользователю различные способы ввода данных, само представление никогда не обрабатывает поступающие данные. Работа представления закончена после отображения данных. Однако, стоит заметить, что это правило в паттерне MVC нарушается чаще всего. Как правило, представление еще участвует в валидации вводимых данных, просто потому что, валидация на машине клиента будет происходить быстрее.

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

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Типичное Laravel приложение состоит из вышеперечисленных компонентов MVC как указано ниже.

Рисунок 2. MVC

При взаимодействии с приложением Laravel браузер отправляет запрос, который принимается веб-сервером и передается в механизм маршрутизации Laravel. Маршрутизатор (Router) Laravel получает запрос и перенаправляет его на соответствующий метод класса контроллера, основанный на шаблоне URL маршрутизации.

Затем управляет передается в класс контроллера. В некоторых случаях контроллер немедленно выдает представление, которое является шаблоном, который преобразуется в HTML и отправляется обратно в браузер. Чаще всего для динамических сайтов контроллер взаимодействует с моделью, которая представляет собой объект PHP, который в свою очередь представляет элемент приложения (например, пользователя, мероприятие) и отвечает за связь с базой данных. После вызова модели контроллер затем отображает окончательный вид (HTML, CSS и изображения) и возвращает полную веб-страницу в браузер пользователя.продвигает идею о том, что модели, представления и контроллеры должны быть отделены друг от друга, сохраняя код для каждого из этих элементов в виде отдельных файлов в отдельных каталогах. Здесь вступает в действие структура каталогов Laravel. Шаблоны проектирования, такие как MVC, создаются для облегчения жизни разработчика. В этой области Laravel в разы обходит чистый PHP-код, который не следует какой-либо парадигме, и таким образом оправдывает свое существование.

Модель использованной базы данных

В качестве базы данных была выбрана реализация SQL от Oracle: MySQL. За последнее время в моду вошли нереляционные базы данных, такие как MongoDB и NoSQL. Следует отметить, что нереляционные базы данных очень хорошо применимы к узкому спектру задач, но значительно уступают реляционным, если речь заходит о «классических» базах данных. Такая база разрабатывается без знаний обо всех возможных применениях в программе. Правила нормализации как раз призваны подготовить базу данных к любым запросам от пользователя с наименьшими затратами по времени и памяти.

Отдельно хочется упомянуть разработанную систему для заполнения базы данных информацией о предстоящий событиях. Ручное заполнение информации о каждом мероприятия оказывается неэффективным. Поэтому было принято решение разработать скрипт, который бы автоматически загружал данные из открытого доступа. KudaGo — это веб-сайт, который предоставляет информацию обо всех предстоящих событиях. Предоставленное на данном веб-сайте API распространяется в свободном доступе, что облегчает разработку скрипта, который бы каждый день автоматически загружал в базу данных информацию о мероприятиях из KudaGo. Соответственно, была разработана база данных, диаграмма которой представлена на Рисунке 1. Стоит отметить встроенный в Laravel инструментарий для работы с базами данных с помощью миграций. Это ставит плюс в копилку Laravel за счет выполнения первого требования к продукту: масштабируемости. На Рисунке 2 можно увидеть пример строк из таблицы events.

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

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Ниже представлены скриншоты из MySQL Workbench Tool — графического интерфейса для управления баз данных.

Рисунок 3. Схема базы данных

Рисунок 4. Вывод записей из таблицы с событиями

Заполнение базы данных

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

Вводимую информацию нужно модерировать вручную.

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

Сайт Kudago представляет из себя агрегатор событий из следующих городов России и ближнего зарубежья: Москва, Санкт-Петербург, Екатеринбург, Новосибирск, Казань, Краснодар, Красноярск, Нижний-Новгород, Сама, Сочи, Уфа, Выборг и Киев. Каждое событие сопровождается описанием и фотографиями. API Kudago — это база событий и мест, распространяемая с открытой лицензией.

В базе данных, предоставляемой Kudago, имеются следующие объекты:

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Категории объектов

Города

События

Категории событий

Новости

Подборки

Места

Фильмы

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Показы

Агенты

Роли

В разрабатываемом приложении требуются только Города, Места, События и Категории событий.не предоставляет библиотеки для работы с API, поэтому необходимо было разработать функции для работы с REST-запросами Kudago. Рассмотрим необходимые REST-запросы и параметры, которые они могут принимать.

Для получения Событий предоставляется запрос:

/public-api/{version}/events/{?lang,fields,expand,order_by,text_format,ids,location,actual_since,actual_until,is_free,categories,lon,lat,radius}

Опишем параметры, которые принимает этот запрос.

Имя По умолчанию Описание
version обяз. версия API Варианты: v1 v1.1 v1.2 v1.3
lang ru язык ответа Варианты: ru en
page 1 выдать указанную страницу пагинатора
page_size 20 число отдаваемых объектов на странице. Максимальное значение — 100
fields id, title, slug включить в выдачу только указанные поля, можно несколько через запятую список полей после таблицы
expand необ. включить в выдачу более подробную информацию для указанных полей, можно несколько через запятую Варианты: images place location dates participants
order_by необ. сортировать выдачу по указанным полям, можно несколько через запятую; если поле указано со знаком минус, то происходит сортировка по убыванию Варианты: id publication_date title slug place description body_textlocation tagline age_restriction price is_free favorites_countcomments_count short_title
text_format html html — текст с тэгами text — текст без тегов, от ссылок остается только название
ids необ.
location необ. включить в выдачу события только из указанного города (каждому городу соответствует укрощенное название на латинице — слаг
actual_since необ. включить в выдачу только те события, которые начались после указанного момента времени (в формате UNIX timestamp или ISO 8601, в любом случае время считается в UTC)
actual_until необ. включить в выдачу только те события, которые закончились до указанного момента времени (в формате UNIX timestamp или ISO 8601, в любом случае время считается в UTC)
place_id необ. включить в выдачу события только для указанного места
parent_id необ. включить в выдачу события, дочерние к указанному событию
is_free необ. включить в выдачу только бесплатные события Варианты: 1 0 true false
categories необ. включить в выдачу события из указанных категорий, можно несколько через запятую; если категория указана со знаком минус, то события с такой категорией будут выключены из выдачи
tags необ. включить выдачу только события с указанными слагами тэгов, можно несколько через запятую; если тэг указан со знаком минус, то события с таким тэгом будут выключены из выдачи
lon, lat, radius необ. lat, lon и radius вместе фильтруют события вокруг указанных координат; радиус указывается в метрах

Список полей, которые можно запросить через атрибут fields.- идентификатор_date — дата публикации- даты проведения- название_title — короткое название- слаг- место проведения- описание_text — полное описание- город проведения- список категорий- тэглайн_restriction — возрастное ограничение- стоимость_free — бесплатное ли событие- картинки_count — количество добавлений в «избранное»_count — число комментариев к событию_url — адрес события на сайте kudago.com- тэги события- агенты события

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

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Разработанный на Python скрипт запускается раз в сутки и обновляет информацию в базе данных, осуществляя запросы в API Kudago.

Поисковая часть приложения

Так как приложение представляет из себя в каком-то роде агрегатор документов, то есть билетов, то в нем должна присутствовать система для быстрого осуществления поиска по всей базе данных. Эта система должна быть быстрой, масштабируемой и обладать функцией автодополнения запросов. Все эти требования выполняет Elasticsearch- это открыто распространяемый поисковый движок. Документы в этой системе хранятся в формате JSON. Продукт разработан на основе фреймворка для создания распределенных программ Java Hadoop. В Laravel встроен модуль для подключения поисковых движков, в том числе и Elasticsearch.

Для понимания работы Elasticsearch, необходимо разобрать следующие понятия. Кластер — это коллекция одного или нескольких узлов (серверов), в которых хранится вся проиндексированная информация. Узел представляет из себя сервер с уникальным именем, в котором могут хранится несколько индексов. В свою очередь, индекс — это коллекция документов, которые разделяют друг с другом похожие характеристики. В одном кластере можно объявить сколько угодно индексов. Внутри типа можно объявить типы. Тип — это логическое разделение индекса на группы документов, которые имеют набор общих полей. Документом является минимальный юнит информации, который может быть проиндексирован.

В одном индексе потенциально может храниться очень много информации. Настолько много, что объем информации будет превышать доступный объем жесткого диска сервера. Для решения этой проблемы Elasticsearch предоставляет возможность разбить индекс на несколько частей, называемых осколки (shards). Каждый осколок — это полноценно функциональный и независимый индекс, который может базироваться на любом узле в кластере. Разбиение очень важно по двум причинам:

Оно позволяет горизонтально масштабировать объем хранимой информации

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

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

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Подробнее

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

Эта система важна по следующим причинам:

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

Она позволяет увеличить пропускную способность и скорость выполнения поиска, поскольку поиск может выполняться сразу на всех репликах параллельно.

Итак, каждый индекс можно разбить на несколько осколков. У индекса может быть создана одна и несколько резервных копий (реплик). Число осколков и реплик может быть определено для каждого индекса во создания ин время создания индекса. После создания индекса можно изменять количество реплик, но количество осколков индекса после создания изменить невозможно. По умолчанию, индекс создается с 5 осколками.

Ниже представлен результат выполнения следующего HTTP запроса:/_cat/health?v

Рисунок 5. Состояние кластера Elasticsearch

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

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Консольные команды Laravel

Вместе с Laravel поставляется консольный инструмент для работы с фреймворком под названием Artisan. В него входят модули для генерации всевозможных файлов в фреймворке, программа для консольной работы со встроенной ORM, которая называется Tinker и многие другие. Также очень важным преимуществом этого инструмента является возможность создавать кастомные команды. Эта возможность была использована для создания команды es:fill. Эта команда заполняет и обновляет индекс поискового движка Elasticsearch. Необходимость в переносе этой задачи в отдельную команду обусловливается тем, что эта команда должна вызваться каждый раз, когда обновляется информация о событиях в базе данных, или как минимум раз в сутки. Вынеся подпрограмму, которая обновляет индекс поискового движка, мы упрощаем последующую автоматизацию этого процесса.

Миграции

Часто в ходе разработки и во время жизненного цикла приложения к нему могут добавляться новые требования и функционал. С изменением запросов к приложению, могут меняться требования к структуре базы данных. Структуру базы данных можно редактировать вручную «на ходу», но это может быть чревато последствиями. Одна ошибка, допущенная по невнимательности, может стоить десятки часов и сотни упущенных пользователей. Очевидно, необходим инструмент, интерфейс, который бы давал доступ к системе базы-данных, связанный с моделью приложения. Такой инструмент называется миграции. Миграция представляет из себя по сути контроль версий для базы данных. Встроенные системы миграций есть у всех больших реализаций SQL: Oracle, MySQL, MSSQL и т.д. Laravel предоставляет «из коробки» интерфейс для работы с миграциями всех движков баз-данных. Таким образом поддерживается подход loose coupling: миграции связаны с логический моделью приложения и есть возможность менять движки баз-данных, без потери этих миграций. Миграции создаются с помощью встроенного в Laravel консольного интерфейса, под названием Artisan, а именно с помощью команды php artisan make:migration, после которой с помощью аргументов можно задать параметры. Например -create=$name создает файл миграции для создания таблицы, где $name это желаемое имя таблицы. Как уже было сказано, это команда создает php файл, в котором задаются атрибуты таблицы: типы столбцов, правила, внешние связи. В этом файле задаются команды, которые будут выполнены при вызове команды migration:rollback, то есть «отката» к старой версии. Также стоит отметить, что при генерации файла, в конце названия приписывается timestamp, время создания. На это время и ориентируется программа, при вызове миграции, для сохранения последовательности миграций.

Выше была рассмотрена серверная составляющая проекта — та часть приложения, которая обрабатывает запросы от клиентов и возвращает ответы. Ответы могут быть разных типов. Они могут зависеть от того, кто выполняет запрос, с какой машины и в какое время. Этим ответом может быть статическая страница, взятая из кэша; сгенерированная страница, или просто JSON-объект.

Здесь необходимо отметить, что сейчас понятие Frontend можно интерпретировать по-разному. Фронтендом могут называть только то, что выполняется на машине клиента. В этой работе в фронтенд часть приложения входят все модули, которые так или иначе непосредственно генерируют и влияют на работу интерфейса приложения, то есть на то, как себя ведет HTML страница. К этим модулям относятся встроенный в Laravel шаблонизатор, JavaScript и CSS библиотеки.

Шаблонизатор

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

Было бы проще и правильней с точки зрения архитектуры, вынести повторяющиеся блоки в отдельные файлы или классы. К сожалению, HTML разметка по определению не может предоставить такой функционал. Инструмент, который позволяет использовать модули, или шаблоны, при разработке веб-страниц, называется шаблонизатор. Laravel поставляется с предустановленным шаблонизатором, носящим название Blade. Файлы, которые используют Blade, имеют расширение .blade.php и как правило хранятся в папке resources/views.

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Цена диплома

Страницы в Blade генерируются по принципу наследования. То есть, имеется страница-родитель с именованными секциями, например, с секцией ‘content’. С помощью так называемых директив можно задавать куски кода, которые будут использованы как модули. Например, директива @extends(‘layouts.master) указывает, какой макет страница должна унаследовать. В этом родительском макете будет расписан header, навигационная панель и footer.

На скриншоте ниже представлен пример файла с представлением страницы входа в систему.

Рисунок 6. login.blade.php

Blade реализует на своей основе также инструмент шаблонизации, под названием Mustache, что переводится как «усы». Такое странное на первый взгляд название можно объяснить тем, что этот язык «разметки» использует в качестве управляющего символа символы ‘{‘ и ‘}’, которые могут быть использованы при написании эмотикона с усами.

Валидация форм

Валидация форм является самой старой и тривиальной задачей, для решения которой и использовался изначально встроенный в браузер JavaScript. Естественно, что для решения этой задачи существует множество решений и библиотек. Мое внимание остановилось на плагине к библиотеке jQuery, самой распространенной библиотеке JavaScript, под названием jQuery Validation. Это очень удобный инструмент по следующим причинам:

Гибкая система

Простая система добавления кастомных правил

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

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Цена диплома

Рисунок 7. Личный кабинет

Каскадные таблицы стилей

Современные дизайн стандарты очень требовательны к разработчикам. Для того, чтобы добиться от обычных стандартов CSS и HTML поведения, которое ожидает пользователь, нужно досконально разбираться во всех нюансах реализаций этих технологий на каждом браузере. К счастью, для тех, кто не может позволить себе выделять столько ресурсов, сколько требуют современные методологии разработки пользовательских интерфейсов, существуют так называемые CSS библиотеки, фреймворки и препроцессоры. Препроцессоры, такие как SASS и LESS, это надстройки над CSS, которые добавляют функционал из языков программирования: модульность и переменные. Браузеры не реализуют в себе интерпретаторы этих препроцессоров, именно поэтому они так и называются, и для того, чтобы разрабатываемый код выполнялся на машине клиента, код препроцессоров нужно компилировать в чистый CSS. С этой задачей отлично справляются таск-менеджеры, такие как Grunt и Gulp. В качестве CSS фреймворка был выбран самый популярный вариант — Bootstrap.

Структура сайта

Главная страница

Регистрации

Вывода информации о мероприятиях

Логина

Личный кабинет

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Загрузка билета

Вывод информации о билете

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

Рисунок 8. Макет главной страницы

Процесс разработки

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

Среда разработки

Во времена становления интернета исходный код многих веб-приложений зачастую редактировался в обычном текстовом редакторе. Сейчас, когда каждый аспект веб-разработки оброс десятками подходов, расширений и инструментов это трудно представить. Сейчас проекты принято разрабатывать в так называемых средах разработки. Среды разработки чаще поставлялись вместе с компилируемыми языками, но за последние два десятилетия все интерпретируемые языки обзавелись своими средами разработки. В качестве основной среды разработки был выбрана программа PhpStorm от JetBrains. Это полноценная среда для работы с файлами всех расширений, которые могут быть задействованы в веб-разработке, включая PHP. К поддерживаемым расширениям также относятся: .js, .html, .css, .yaml, .json, .xml, .md, а также всевозможные вариации .js и .css файлов: препроцессоры и расширения, компилируемые в чистый JavaScript.

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Цена диплома

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

Таск-менеджер

В ходе разработки часто нужно выполнять типовые задачи. Такие как минификация, сборка и тестирование. Поэтому программы, позволяющие автоматизировать эти задачи, справедливо считаются очень полезными и используются повсеместно. Такие программы носят название таск-менеджеров. В ходе разработки был выбран таск-менеджер Gulp. Это свободно распространяемое ответвление проекта Grunt, другого таск-менеджера. Работа может осуществляться как через командную строку, так и через встроенный модуль в PhpStorm. от своего аналога, Grunt, отличается тем, что в Gulp код задач записывается на JavaScript коде, а не в конфигурационном файле.

Виртуальная машинапредоставляет удобный способ настройки и управления виртуальными машинами. Vagrant может работать с так называемыми коробками (boxes). Это заранее упакованные и сконфигурированные образы виртуальных машин. Прямо на сайте Vagrant можно выбрать среди списка загруженных коробок подходящую себе. (Mitchell Hashimoto, 2013)Homestead это официальная, предварительно упакованная коробка Vagrant, которая предоставляет среду разработки без необходимости установки PHP, настройки веб-сервера и любого другого программного обеспечения на локальную машину. Если что-то пойдет не так, коробку можно быстро снести и поставить новую. Это значительно упрощает процесс разработки.

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

Развертывание

Как сказано выше, было принято решение хранить проект на репозитории GitHub. Это заметно упростило процесс развертывания на сервере, так как процесс копирования проекта на сервер укладывалось в несколько консольных команд.

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

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

Работа с серверов производится посредством протокола SSH.

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Цена диплома

Глава 2. Постановка решаемых задач

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

Попытаться продать билет друзьям.

Попытаться продать билет лично через социальные сети.

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

Человек, который хочет купить билет «с рук», рискует быть обманутым мошенником. Такого рода сделку необходимо гарантировать третьей стороной.

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

При проработке бизнес-модели любого подобного проекта, следует решить следующие вопросы:

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Подробнее

Как предупредить оппортунистическое поведение пользователей?

Как набрать критическую массу пользователей и поддержать соотношение спроса и предложения?

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

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

Маркетинг

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

Продавцы

Покупатели

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Официальные распространители

Продавец — это любой, кто хочет продать свой билет. Это может быть профессиональный скупщик билетов или же обычный человек. Подход к привлечению этих пользователей от этого не будет меняться. Так как подобного сервиса в русскоязычном сегменте не существует, продвижение через контекстную рекламу будет не рентабельно. Контекстная реклама подразумевает то, что целевая аудитория знает, чего хочет, ведь для того, чтобы сделать поисковый запрос, его нужно сформулировать. Таргетированная реклама, напротив, должна работать намного эффективней. Фильтровать целевую аудиторию в социальных сетях можно будет по состоянию в группе мероприятия или по комментариям, содержащим вариации фразы «продам билет». Сейчас довольно популярно использовать в качестве площадки по продаже билетов тематические форумы. По этому признаку также можно будет искать целевую аудиторию для группы продавцов.

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

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

Юридический аспект

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

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

Бизнес-модель

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Цена диплома

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

Покупатели

Продавцы

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

Рисунок 9. Бизнес-модель

Рисунок 10. Бизнес-модель

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

Выставление билета на продажу

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

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

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

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

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

Рисунок 11. Выбор события

Рисунок 12. Ввод информации о билете

Покупка билета

Покупка билета начинается с главной страницы. На этой странице представлена подборка популярных мероприятий (мероприятия фильтруются по полю из API Kudago — количеству добавлений в «избранное»), типы мероприятий на выбор и поисковая строка. Нажав на кнопку с типом мероприятия, пользователю будут выведены все события, связанные с выбранной тематикой (концерт, театр или спорт). То, к какой категории относится мероприятие, определяется из API Kudago.

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Подробнее

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

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

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

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

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

Монетизация

Система монетизации в разработанном приложении основана на сборе комиссии с успешной транзакции. Если сделка была проведена успешно, комиссия, которая рассчитывается на основе суммы сделки, будет снята.

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

Заключение

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

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

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

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

Литература

1.      Bean, Martin (2015). Laravel 5 Essentials

2.      Cassio de Sousa Antonio (2015). Pro React. Apress.

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Заказать диплом

3.      Flanagan, David (2011). JavaScript: The Definitive Guide (6th ed.). O’Reilly & Associates.

4.      Goodman, Danny; Eich, Brendan (2001). JavaScript Bible. John Wiley & Sons.

.        Laravel Documentation (version 5.4)

6.      Malatesta, Frank. (2015). Learning Laravel’s Eloquent. Packt Publishing.

7.      Maynard, Travis (2015). Getting Started with Gulp. Packt Publishing Ltd.

8.      McFarland, David (2014). JavaScript & jQuery: The Missing Manual (3rd ed.) O’Reilly Media

9.      Mitchell Hashimoto (2013). Vagrant: Up and Running (PDF). O’Reilly Media.

.        Sheldon, Robert; Moye, Jeoffrey (2007) MySQL 5: базовый курс «Диалектика»

11.    Stauffer, Max. (2016). Laravel: Up and Running. O’Reilly Media.

12.    TimePad (2014). The market of electronic tickets for events in Russia

13.    Кузнецов Максим, Симдянов Игорь. (2006) Самоучитель MySQL 5. «БХВ-Петербург»

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Подробнее

.        Джейсон Ленгсторф (2010). PHP и jQuery для профессионалов. «Вильямс»

.        Стив Суэринг, Тим Конверс, Джойс Парк. (2010). PHP и MySQL = PHP 6 and MySQL 6 Bible. «Диалектика»

.        Кузнецов Максим, Симдянов Игорь. (2007). Объектно-ориентированное программирование на PHP. СПб.: «БХВ-Петербург»

.        Кристиан Дари, Эмилиан Баланеску.(2010). PHP и MySQL: создание интернет-магазина «Вильямс»

18.    Lockhart, J. (2015). Modern PHP New Features and Good Practices. O’Reilly Media

19.    Dow, J. (2015). Learning Application Deployment with Laravel Packt Publishing

.        Christopher John Pecoraro (2015). Mastering Laravel Packt Publishing

.        Arda Kilicdagi, H. Ibrahim YILMAZ. (2014). Laravel Design Patterns and Best Practices Packt Publishing

.        Matula, T. (2013). Laravel Application Development Cookbook. Packt Publishing

.        Copeland, R. (2008) Essential SQLAlchemy. O’Reilly

24.    Lutz, Mark. (2013). Learning Python (5th ed.). O’Reilly Media

25.    Summerfield, Mark (2009). Programming in Python 3 (2nd ed.). Addison-Wesley Professional.

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Подробнее

.        Артем А. (2015). Сенаторов. Битва за подписчика «ВКонтакте»: SMM-руководство. Альпина Паблишер

.        Севостьянов, И. (2010). Поисковая оптимизация. Практическое руководство по продвижению сайта в Интернете. «Питер»

.        Юрасов А.В. (2008). Основы электронной коммерции. Горячая линия Телеком

.        Нейл Ботвик. (2015). Ubuntu — 10!. Linux Format.

30.    Grant, Rickford; Bull, Phil (2010). Ubuntu for Non-Geeks: A Pain-Free, Get-Things-Done Guide (4th ed.). No Starch Press.

31.    Hudson, Andrew; Hudson, Paul; Helmke, Matthew; Troy, Ryan (2009). Ubuntu Unleashed 2010 Edition: Covering 9.10 and 10.4 (5th ed.).

32.    Leff, Avraham; Rayfield, James T. (2001). Web-Application Development Using the Model/View/Controller Design Pattern. IEEE Enterprise Distributed Object Computing Conference.

.        Эд Титтел, Джефф Ноубл. (2011). HTML, XHTML и CSS для чайников, 7-е издание. «Диалектика»

.        Стивен Шафер.(2011). HTML, XHTML и CSS. Библия пользователя, 5-е издание. «Диалектика»,

.        Кристофер Шмитт. (2007). CSS. Рецепты программирования. БХВ-Петербург

Приложение

Ниже представлена ссылка на репозиторий с проектом:

Нужна помощь в написании диплома?

Мы — биржа профессиональных авторов (преподавателей и доцентов вузов). Сдача работы по главам. Уникальность более 70%. Правки вносим бесплатно.

Цена диплома

github.com/artemmnad/tickethand

 руб. цена работы

+ руб. комиссия сервиса

Комиссия сервиса является гарантией качества полученного вами результата

Если вас по какой-либо причине не устроит полученная работа — мы вернем вам деньги.
Наша служба поддержки всегда поможет решить любую проблему.

Для того, чтобы купить готовую работу, необходимо иметь на балансе достаточную сумму денег. Все загруженные работы имеют уникальность не менее 50% в общедоступной системе Антиплагиат.ру (модуль интернет). Сразу после покупки работы вы получите ссылку на скачивание файла. Срок скачивания не ограничен по времени. Если работа не соответствует описанию, вы сможете подать жалобу. Гарантийный период 7 дней.

На указанный адрес электронной почты будет отправлена купленная вами готовая работа.

Email

Введите почту получателя купленной работы

Ваша работа успешно отправлена

Нажимая кнопку «Пожаловаться», Вы подтверждаете, что ознакомлены с правилами проверки уникальности готовых работ на сайте. Проверка уникальности работ проводится в общедоступной системе Антиплагиат.ру (модуль Интернет). Пожалуйста, удостоверьтесь, что проверяете уникальность именно в этой системе. Если процент уникальности ниже 50%, то возможен частичный возврат средств пропорционально недостающему проценту. Жалобы о проверке уникальности в другой системе рассматриваться не будут.

Препод24 - онлайн-биржа учебных работ

Сложная и многоуровневая структура современных веб-приложений требует иерархического разделения процесса их разработки. Исторически этот процесс разделяется на две части: front-end (клиентская) и back-end (серверная). Оценка 5. НГТУ им Р.Е. Алексеева.

  • Введение
  • Содержание
  • Список литературы
  • Отрывок из работы

Введение

Актуальность: Давно остались в прошлом времена, когда мир веб-страниц был прост и понятен, а сайты были наборами статических страниц с табличной разметкой. Веб-разработка прошла быстрый, яркий и насыщенный путь развития. Появились новые языки, техники, технологии и парадигмы. Сегодня это одно из самых перспективных и высокооплачиваемых IT-направлений.
Сложная и многоуровневая структура современных веб-приложений требует иерархического разделения процесса их разработки. Исторически этот процесс разделяется на две части: front-end (клиентская) и back-end (серверная).
Цель данной работы: рассмотреть front-end и back-end, поговорить об их различиях, схожих чертах и зонах ответственности.
Для достижения цели, необходимо решить следующие задачи:
• изучить back-end часть;
• изучить front-end часть;
• выявить их различия, точки соприкосновения.

Содержание

Введение
1. Понятие backend (серверная) и его основные свойства
1.1 Аутентификация
1.2 Роли, разрешения и контроль доступа
1.3 CRUD — Create, Read, Update and Delete
1.4 REST
1.5 Формы и состояния
1.6 API
1.7 Уведомление по Email, SMS и Webhooks
1.8 Подписка и тарифные планы
1.9 Взаимодействие с платёжным шлюзом
1.10 Загрузка файлов
1.11 Строение API, фреймворки и пакеты
1.12 Работа с Open Source
1.13 Интерфейс для управления
1.14 Кэширование
1.15 Компоненты
1.16 Системы управления версиями
1.17 Командная строка
2. Понятие frontend (клиентская) и его основные свойства
2.1 Процессоры и сборщики
2.1.1 HTML (HyperText Markup Language)
2.1.2 CSS (Cascading Style Sheets)
2.1.3 JavaScript
2.1.4 jQuery
2.1.5 MVC (модель-представление-контроллер)
2.1.6 Технология Ajax
2.1.7 Менеджеры пакетов
2.1.8 Менеджеры задач
2.2 Компонентная архитектура
2.2.1 React
2.2.2 Управление состоянием
2.2.3 Vue.js
2.2.4 Изоморфные приложения и SSR (Server-Side Rendering)

Список литературы

1. Web-разработка: кто такой Frontend, Backend и Full Stack разработчик [Электронный ресурс]. – Режим доступа: https://itstep.dp.ua;
2. Технология AJAX [Электронный ресурс]. – Режим доступа: http://bourabai.kz/php/ajax;
3. Технологии World Wide Web: основы HTML и CSS [Электронный ресурс]. – Режим доступа: http://referatbox.com;
4. Выбираем профессию frontend и backend разработчика: принципы и отличия [Электронный ресурс]. – Режим доступа: https://skillbox.ru/media/code/frontend_i_backend_razrabotka;
5. По пунктам: что нужно знать о backend новичку в web-разработке [Электронный ресурс]. – Режим доступа: https://tproger.ru/translations/backend-web-development;
6. Frontend разработка [Электронный ресурс]. – Режим доступа: http://masters.donntu.org/2018/fknt/kovalev/ind/index.htm;
7. Хочу стать frontend разработчиком: базовые знания и план обучения [Электронный ресурс]. – Режим доступа: https://tproger.ru/curriculum/intro-to-frontend-development/#3;
8. Простыми словами о frontend и backend: что это такое и как они взаимодействуют [Электронный ресурс]. – Режим доступа: https://tproger.ru/translations/frontend-backend-interaction.

Отрывок из работы

Front-end — это разработка, связанная с созданием дизайна и веб-интерфейсов.
Все, что видит пользователь на сайте от шрифта, фона, выпадающего меню, слайдера создано с помощью HTML, CSS и JavaScript, контролируется браузером, который установлен на компьютере пользователя.
Front-end-разработчики несут ответственность за создание «клиентской» части в веб-приложениях, то есть они имеют дело со всем, с чем взаимодействует пользователь. Они определяют, как все это будет работать с основной программно-аппаратной частью, которую готовит back-end разработчик (описанные выше). Также они учитывают опыт взаимодействия пользователей с сайтами. Чтобы пользователь был доволен всем и понимал, как работать с сайтом, разработчику необходимо знать языки программирования HTML, CSS и JavaScript, а также уметь работать с фреймворками Bootstrap, AngularJS, библиотеками типа jQuery и технологией Ajax, которая позволяет обращаться к серверу без перезагрузки страницы, а это живой поиск, элементы интерфейса, динамическая подгрузка сайтов.

Не смогли найти подходящую работу?

Вы можете заказать учебную работу от 100 рублей у наших авторов.

Оформите заказ и авторы начнут откликаться уже через 5 мин!

Был(а) на сайте 29 минут назад

Антиплагиат

70%

Антиплагиат.РУ (модуль - Интернет)

Основная суть — это сделать самый простой веб-редактор, где будет все, что указано на скрине.

Объем работы 30 страниц, 70% оригинальности по бесплатному антиплагиат.ру, не более 30% заимствований из одного источника.

Это фронтэнд для языка Java, писать на языке Python

  • Разместите заказ
  • Выберите исполнителя
  • Получите результат
Гарантия на работу 1 год
Средний балл 4.96
Стоимость Назначаете сами
Эксперт Выбираете сами
Уникальность работы от 70%

Нужна аналогичная работа?

Оформи быстрый заказ и узнай стоимость

Гарантированные бесплатные доработки

Быстрое выполнение от 2 часов

Проверка работы на плагиат

Продать

Добавил:

CanyonE

СПбГУТ * ИКСС * Программная инженерия

Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Предмет:

Файл:

Скачиваний:

83

Добавлен:

29.01.2021

Размер:

2.74 Mб

Скачать

Федеральное агентство связи ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ

ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М. А. БОНЧ-БРУЕВИЧА» (СПбГУТ)

Факультет инфокоммуникационных сетей и систем Кафедра программной инженерии и вычислительной техники

КУРСОВАЯ РАБОТА

по дисциплине «Разработка Java-приложений управления телекоммуникациями»

на тему «Популярное программное обеспечение»

Выполнил: студент 3-го курса дневного отделения группы ИКПИ-85

Коваленко Леонид Александрович Преподаватель:

доцент кафедры ПИиВТ Белая Татьяна Иоанновна

Санкт-Петербург

2020

Оглавление

1.

Введение…………………………………………………………………………………………………

3

2.

Постановка задачи…………………………………………………………………………………..

3

3.

Используемые технологии……………………………………………………………………….

4

3.1

Front-end……………………………………………………………………………………………

4

3.1.1 HTML………………………………………………………………………………………….

4

3.1.2 CSS……………………………………………………………………………………………..

4

3.1.3 JavaScript…………………………………………………………………………………….

4

3.2

Back-end…………………………………………………………………………………………….

4

3.2.1 Spring Framework…………………………………………………………………………

5

3.2.2 Maven………………………………………………………………………………………….

5

3.2.3 Веб-сервер и СУБД……………………………………………………………………..

6

4.

Планирование…………………………………………………………………………………………

6

4.1

Создание идеи……………………………………………………………………………………

6

4.2

Разработка структуры проекта……………………………………………………………

7

4.3

Проработка макета проекта………………………………………………………………..

7

5.

Страницы веб-приложения………………………………………………………………………

8

6.

Заключение……………………………………………………………………………………………

14

7.

Библиографический список……………………………………………………………………

14

8.

Приложения………………………………………………………………………………………….

15

2

1. Введение Целью работы является изучение литературы по заданной теме и

формирование веб-приложения на основе собранного материала.

В процессе достижения цели необходимо решить ряд следующих задач:

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

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

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

ознакомиться с основными правилами и рекомендациями по разработке и созданию веб-приложений и принципиально следовать им в своей практике;

определиться со структурой веб-страниц;

выбрать стратегию разработки и создания веб-приложения.

2. Постановка задачи Задача курсового проекта заключается в разработке веб-приложения,

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

главная страница с каталогами-категориями программного обеспечения;

динамическая страница каталога-категории с соответствующим ей списком программных обеспечений;

динамическая страница программного обеспечения с информацией по нему.

Атакже на каждой странице будут присутствовать:

верхняя навигационная панель (меню сайта) с поиском и переходом к каталогам-категориям по операционным системам или к списку всех программных обеспечений;

3

нижняя панель (подвал сайта) с email-адресом для обратной связи и копирайтом.

3.1Front-end

3.1.1 HTML

При помощи текстового редактора Sublime Text 3 создается абстрактная модель на основе тегов HTML.

3.1.2 CSS

После создания абстрактной модели можно перейти к назначению каждому элементу некоторых классов CSS, которые могут быть как уже готовыми (Bootstrap Framework, см. ниже), так и ещё не разработанными.

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

После прописывания каждому элементу некоторых классов CSS можно переходить к написанию тех стилей CSS, что ещё не были разработаны. Для этого также используется текстовый редактор Sublime Text 3.

3.1.3 JavaScript

После создания статичных страниц можно добавить некоторую динамику. Например, коллапсирующую динамику «аккордеон» (раскрывающийся список) в меню сайта для удобной навигации с телефона. Для этого потребуется javascript-библиотека jQuery.

3.2 Back-end

После реализации front-end части веб-сайта можно добавить back-end часть на Java.

Для реализации back-end части будем использовать Spring Framework с Maven.

4

3.2.1 Spring Framework

Воспользуемся следующими подфреймворками Spring Framework:

Spring Web позволяет создавать веб-приложения, в том числе RESTful, с использованием Spring MVC. Spring Web использует Apache Tomcat в качестве встроенного контейнера по умолчанию.

JPA позволяет сохранять данные в хранилищах SQL с помощью Java Persistence API с использованием Spring Data и Hibernate.

Thymeleaf — современный серверный движок шаблонов Java как для веб-, так и для автономных сред. Позволяет корректно отображать

HTML-код в браузерах и в виде статических прототипов.

Spring Web включает в себя фреймворк Spring MVC (Spring Model- View-Controller), который позволяет разделять данные приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: модель, представление и контроллер — таким образом, что модификация каждого компонента может осуществляться независимо.

Модель (Model) предоставляет данные и реагирует на команды контроллера, изменяя своё состояние. (К модели относится база данных.)

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

Контроллер (Controller) интерпретирует действия пользователя, оповещая модель о необходимости изменений (К контроллеру относятся http-запросы пользователя.).

3.2.2 Maven

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

5

В нашем случае воспользуемся следующими библиотеками, доступными в Maven-репозитории:

MySQL Connector/J — драйвер JDBC типа 4 для MySQL.

JSON.simple — простой набор инструментов Java для JSON.

Lombok — библиотека аннотаций Java, которая помогает уменьшить

шаблонный код.

3.2.3 Веб-сервер и СУБД Используемый веб-сервер: Apache/2.4.25 (Debian). Используемая СУБД: MySQL 8.0.22.

4. Планирование Сайт ориентирован на ту часть целевой аудитории, которой нужно

скачать определенное программное обеспечение или получить какую-либо информацию по нему (в том числе перейти на страницу разработчика).

Основная функция сайта — удовлетворять информационные запросы пользователя, поэтому потребуется удобное навигационное меню и функция поиска.

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

Этап планирования можно разделить на несколько пунктов:

создание идеи;

разработка структуры проекта;

проработка макета проекта.

4.1 Создание идеи На данном этапе выбрана тема проекта «Популярное программное

обеспечение». Далее, в соответствии с выбранной темой, собраны соответствующие материалы: текстовые и графические.

6

4.2 Разработка структуры проекта Структура проекта подразумевает под собой разделы сайта, в

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

index.html — главная страница с каталогами-категориями программного обеспечения;

catalog.html — страница каталога-категории с соответствующим ей списком программных обеспечений;

software.html — страница программного обеспечения с информацией

по нему.

Также вспомогательные файлы, которые подключаются во всех основных страницах сайта:

файл меню сайта;

файл подвала сайта.

4.3 Проработка макета проекта Макет может быть фиксированным и адаптивным. Фиксированный

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

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

7

5. Страницы веб-приложения Главная страница веб-приложения приведена на рис. 5.1.

Рисунок 5.1 — Главная страница Каталог «Офисное ПО» приведен на рис. 5.2.

Рисунок 5.2 — Каталог «Офисное ПО»

8

Каталог «Мультимедиа» приведен на рис. 5.3.

Рисунок 5.3 — Каталог «Мультимедиа» Каталог «Разработка» приведен на рис. 5.4.

Рисунок 5.4 — Каталог «Разработка»

9

Каталог «Интернет» приведен на рис. 5.5.

Рисунок 5.5 — Каталог «Интернет» Каталог «Безопасность» приведен на рис. 5.6.

Рисунок 5.6 — Каталог «Безопасность»

10

Каталог «Утилиты» приведен на рис. 5.7.

Рисунок 5.7 — Каталог «Утилиты» Страница программного обеспечения (пример) приведена на рис. 5.8.

Рисунок 5.8 — Страница программного обеспечения «CCleaner Portable» Пример поиска по запросу приведен на рис. 5.9.

11

Рисунок 5.9 — Пример поиска «Linux Бесплатная [лицензия]» Пример поиска по запросу с исключением приведен на рис. 5.10.

Рисунок 5.10 — Пример поиска «Linux Бесплатная -Discord»

12

Выпадающий список в меню сайта позволяет посмотреть приложения определенной операционной системы (рис. 5.11).

Рисунок 5.11 — Выбор в выпадающем списке пункта «Linux»

В панели меню можно выбрать «Все приложения», чтобы посмотреть всё ПО, что присутствует на сайте (рис. 5.12).

Рисунок 5.12 — Все приложения

13

Соседние файлы в папке Готовые отчеты (2020)

  • #
  • #
  • #
  • #
  • #
  • #

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *