ПРОЕКТИРОВАНИЕ ВЕБ-ПРИЛОЖЕНИЯ «ЖИВОПИСНЕЙШИЕ МЕСТА УРАЛА»

Аннотация: Статья рассматривает технологию проектирования туристического веб-приложения «Живописнейшие места Урала». Авторы проводят анализ предметной области и определяют функциональные требования к веб-приложению. В статье построена uml-модель веб-приложения в виде диаграммы вариантов использования и диаграмм последовательности. Спроектирована база данных средствами ER-модели. Представлена физическая модель базы данных в среде PhpMyAdmin. В статье определена структура приложения.
Выпуск: №4 / 2018 (октябрь-декабрь)
УДК: 004.9
Автор(ы): Васева Елена Сергеевна
кандидат педагогических наук, доцент кафедры информационных технологий, Нижнетагильский государственный социально-педагогический институт (филиал Российского государственного профессионально-педагогического университета), г. Нижний Тагил.

Шутько Александр Васильевич
студент, Нижнетагильский государственный социально-педагогический институт (филиал Российского государственного профессионально-педагогического университета), г. Нижний Тагил.
Страна: Россия
Библиографическое описание статьи для цитирования: Васева Е. С. Проектирование веб-приложения
«Живописнейшие места Урала» [Электронный ресурс] / Е. С. Васева, А. В. Шутько // Научное обозрение : электрон. журн. – 2018. – № 4. – 1 электрон. опт. диск (CD-ROM). – Систем. требования: Pentium III, процессор с тактовой частотой 800 МГц ; 128 Мб ; 10 Мб ; Windows XP/Vista/7/8/10 ; Acrobat 6 х.
image_pdfimage_print

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

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

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

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

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

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

На языке UML функциональные требования к системе описываются с помощью диаграммы вариантов использования. Основными элементами диаграммы являются действующие лица, варианты использования и отношения между ними (рис. 1) [2].

Рис. 1. Диаграмма вариантов использования веб-приложения

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

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

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

  1. Форма входа/регистрации в систему.
  2. Главная страница с кратким описанием возможностей веб-приложения и меню.
  3. Страница со списком всех туристических мест, представленных в базе данных с возможностью сортировки, формой поиска мест по заданным параметрам и формой ввода информации о новом туристическом месте.
  4. Страницей с описанием выбранного туристического места с возможностью просмотра фотографий, отзывов о месте, а также с формой добавления комментария.
  5. Страница со списком названий групп, которые создают пользователи для коллективного посещения туристических мест.
  6. Описание выбранной группы с указанием планируемой даты похода, цели и условий посещения.

В серверной части (back-end) должна быть реализована база данных, в которой будет хранится необходимая информация. База данных должна обеспечивать:

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

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

  1. Вариант использования «Зарегистрироваться».

Краткое описание: пользователь открывает веб-приложение, указывая его адрес в сети Интернет. Он попадает на страницу авторизации со ссылками на формы регистрации и входа. Нажимает на ссылку «Регистрация» и открывает форму с полями «Логин», «Пароль», «ФИО», «Номер телефона», «Адрес электронной почты», «Туристический опыт». Вводит логин, пароль и другую контактную информацию и нажимает на кнопку «Зарегистрироваться». После нажатия кнопки происходит проверка доступности логина (поиск совпадающего логина в базе данных), если логин свободен, то данные пользователя сохраняются в базе данных, и он может войти в веб-приложение используя свой логин и пароль.

Рис. 2. Диаграмма последовательности «Зарегистрироваться»

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

  1. Вариант использования «Войти в систему».

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

  1. Вариант использования «Просмотреть сведения о местах».

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

Рис. 3. Диаграмма последовательности «Просмотреть сведения о местах»

  1. Вариант использования «Найти место».

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

  1. Вариант использования «Найти туриста».

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

  1. Вариант использования «Оставить комментарий».

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

  1. Вариант использования «Добавить описание места».

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

  1. Вариант использования «Создать общую группу для похода».

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

  1. Вариант использования «Пригласить другого пользователя в группу».

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

  1. Вариант использования «Связаться с администратором».

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

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

Рис. 4. ER-диаграмма базы данных

Для разработки базы данных для Web-приложения выбрана система управления базами данных MySQL, визуальная оболочка phpMyAdmin. Физическая модель базы данных представлена на рисунке 5.

Рис. 5. Физическая модель базы данных

Мы описали порядок взаимодействия пользователя с веб-приложением и спроектировали базу данных как основу приложения «Живописнейшие места Урала».

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

Рис. 6. Структура веб-приложения

Таким образом, был проведен анализ предметной области и определены функциональные требования к веб-приложению «Живописнейшие места Урала», построена uml-модель веб-приложения в виде диаграммы вариантов использования и диаграмм последовательности. Спроектирована база данных средствами ER-модели. Физическая модель базы данных реализована в среде PhpMyAdmin. Определена структура приложения.

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

 

  

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

 

  1. Сысолетин Е. Г., Ростунцев С. Д. Проектирование интернет-приложений. Екатеринбург : Изд-во Урал. ун-та, 2015. 92 с.
  2. Бенкен Е. С. Разработка Web-приложений на РНР и MySQL. СПб. : Авалон. 2013. 139 с.

 


 

Vaseva Elena

Doctor of pedagogical sciences, associate professor, Department of information technologies, Nizhny Tagil state social pedagogical Institute (branch of Russian state vocational pedagogical University), Nizhny Tagil

 

Shutko Aleksandr

student, Nizhny Tagil state social pedagogical Institute (branch of Russian state vocational pedagogical University), Nizhny Tagil

 

«THE PICTURESQUE PLACES OF THE URALS» WEB APPLICATIONS DESIGNING

 

The article considers the technology of designing of a tourist web application «The Picturesque places of the Urals». The authors analyze the subject area and determine the functional requirements for the web application. The article builds an uml model of a web application in the form of a use case diagram and sequence diagrams. The database is designed by means of ER-model. The physical model of the database in PhpMyAdmin environment is presented. The article defines the structure of the application.

 

Keywords: web application, UML modeling language, use case diagram, sequence diagram, database, ER-diagram, physical database model.

 

© АНО СНОЛД «Партнёр», 2018

© Васева Е. С., 2018

© Шутько А. В., 2018

image_pdfimage_print