ВЕБ-ПРИЛОЖЕНИЕ ДЛЯ ТУРИСТОВ С ПОЛЬЗОВАТЕЛЬСКИМ КОНТЕНТОМ: ТЕХНОЛОГИИ РАЗРАБОТКИ Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004

Васева Е. С.

к.п.н., доцент кафедры ИТ, Филиал РГППУ в г. Нижний Тагил г. Нижний Тагил, Россия

Шутько А. В.

студент факультета естествознания, математики и информатики Филиал РГППУ в г. Нижний Тагил г. Нижний Тагил, Россия

ВЕБ-ПРИЛОЖЕНИЕ ДЛЯ ТУРИСТОВ С ПОЛЬЗОВАТЕЛЬСКИМ КОНТЕНТОМ: ТЕХНОЛОГИИ РАЗРАБОТКИ

Аннотация

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

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

Vaseva E.S.

Ph. D., associate Professor of the Department of it Rgppu branch in Nizhny Tagil Nizhny Tagil, Russia Shutko A. V.

student Faculty of Natural Sciences, Mathematics

and computer science, Ph. D., associate Professor of the Department of it Rgppu branch in Nizhny Tagil Nizhny Tagil, Russia

WEB APPLICATION FOR TOURISTS WITH USER CONTENT: DEVELOPMENT TECHNOLOGIES

Abstract

The article discusses the technology of developing a web application for tourists, with which you can share reviews about the places visited, find like-minded people and choose tourist routes according to the criteria. The web application was created based on the web interface using the php programming language and the free relational database management system MySQL. The database structure is given, the main listings of web-interface forms and data-processing scripts are shown.

Keywords: web application with user content, database, web interface, listing.

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

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

В структуру разрабатываемого веб-приложения будут входить два основных компонента: база данных для хранения сведений о туристических местах и пользовательский веб-интерфейс [1, 2, 4].

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

- Туристы (id, логин, пароль, ФИО, телефон, email, туристический опыт, краткая информация о себе, фото).

- Туристические места (id, название места, краткая информация, длина маршрута, уровень маршрута, фотография).

- Отзывы (id, имя оставившего отзыв, emailдля связи, текст отзыва).

Созданная в визуальной среде PhpMyAdmin база данных представлена на

рисунке 1.

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

Для добавления данных используется конструкция INSERT (), в которой указываются имя полей таблицы и соответствующие данные, которые необходимо вставить (рис. 2).

(1, 1 Н:лжня:л Синячиха ' , 1 Памятник деревянному зодчеству. 1 ,

(2, 'Tops. Качканар - буддийский храм', 'Самая высокая точка з

(4, 'Аликаев каме:-:ь 1 , 1 Назван лс имени разбойника Аликая. 1 ,

Рис. 2. Листинг добавления данных в таблицу

После заполнения данными база данных готова к применению в веб-приложении. К заполненной таблице базы данных можно применять различные операции, основные из которых это: выборка данных, поиск данных по условию, отображение данных [5]. Вид заполненной таблицы в MySQL приведен на рисунке 3. Отметим, что в базе хранятся не сами фотографии мест, а ссылки на них. Это облегчает проблему загрузки и просмотра изображений, поскольку хранить изображения в самой базе данных трудоемко и нецелесообразно.

V id name about length foto level

В / Edit »¡Copy ( Delete 1 Нижняя Синячиха Памятник деревянному зодчеству. 27 ijpg 2

□ /Edit i¡Copy { Delete 2 Гора Качканар - буддийский храм Самая высокая точи в Свердловской области. 60 2,:pg 2

в /Edit *ÍCopy 4 ^ Delete 3 Порог Ревун Расположен в Свердловской области на реке Исеть. П... 87 3 jpg 3

□ /Edit ji Copy 3 j) Delete 4 Аликаев камень Назван по имени разбойника Аликая 117 ^JP3 2

t_ □ Check all Hiftsetected: /Edit ji Copy @ Delete |J Export

Рис. 3. Вид заполненной таблицы в MySQL

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

fart: "13pt Arial, Helvetica; sans-serif; /й: Шрифт теста */ fart-size: lSpx; !* Размер шрифта б заголовке */

margin: в auto; /* Быравнивнить весь Блок по центру */ background: =i-SfBf0; /* Цзет фона ,гевой колонки */

fort-size: ЗЗрк; /* Размер текста б шапке */ text-align: center; /* Выравнивание текст шапки по центру */ padding: 5рх; /* Отступы внутрн блока шапки */ background: ^336530; /* Цзет фона шапки */

padding: 0 10рх; /* Отступы внутрн левого блока */

Рис. 4. Фрагмент листа стилей css

Применение css позволяет разделить страницы веб-приложения на четыре блока: заголовок, основное содержание, меню навигации и подвал (рис. 5).

За взаимодействие базы данных и веб-страниц отвечают конструкции языка программирования PHP. Для установки связи между страницей и базой данных отвечает конструкция mysqli_connect(), в атрибутах которой указываются имя хоста, имя пользователя, пароль и имя базы данных.

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

К списку туристических мест

Рис. 5. Развертывание информации о выбранном месте

Добавим поиск маршрутов по таким критериям как длина маршрута и его уровень. Для этого создадим веб-форму с элементами управления, которые позволяют пользователю вводить максимально возможную длину маршрута и выбирать его уровень из выпадающего списка. Как видно из листинга 3, теги html вставляются в код PHP средствами оператора echo.

echo 1<tab1eborder="l"><td>" ;

echo "<br>";

echo 1<form acti on="sel ect. php" method="post">' ;

echo 'Максимальнаядинапути (в км.): <"input type="text" name="dli na" value="300"><Ьг><Ьг>'

echo 1УроЕеньсложности : ;

echo 'cselect name="uroven">';

echo ' <opt~i on>l</opti on>' ;

echo 1 <opt~i on>2</opti on>' ;

echo 1coptian>3</optior>' ;

echo ,</se1ect>";

echo '<pxinput type="subnrit" valие=|гПоиск"></р>' ;

echo 1 </f or rm> ' ;

echo ,</table>";

Рис. 6. Листинг «Внедрение веб-формы»

Вид формы поиска приведен на рисунке 7.

Рис. 7. Вид формы поиска

После нажатия на кнопку «Поиск» выполняется сценарий select.php, в котором на веб-страницу выводятся не все записи из таблицы, а лишь те, которые соответствуют условиям поиска. Это реализуется средствами запроса SQL, который получает значения переменных, которые ввел пользователь в форме и передают эти значения как условия поиска в базе данных. Результат выполнения запроса выводится в форме веб-приложения (рис. 8).

Навигация

Главная

Поиск маршрута

Войти или зарегистрироваться

Посмотреть/ оставить отзывы

Задать вопрос администратору

• Пагода Шедруб Линг

• Порог Ревун

Рис. 8. Результат выполнения поиска маршрута

Отправка информации пользователем о новом месте осуществляется с помощью формы обратной связи. Передача файлов (если, например пользователю нужно прикрепить фото туристического места) происходит с помощью класса class.phpmailer.php. Фрагмент обработки полученных данных из формы приведен на рисунке 9.

mail = new PHPMailerO; Jmai 1 ->From = t_REQUEST[ ' emai 1 ' ] ; Smai1->FromName = i_REQUEST[ " name ' ] ; îmai1->AddAddress С1tourizmnt@gmai1.com'); îmai 1->IsH"mL (true); îmai 1 ->subject = i_POET['title1]; ifCisset(i_FiLE5['files' ] )) i

if($_FILE£['files']['error'] —0) i

îmail ->AddATtachnerït(S_flles['f il es' ] ['ттр_пагпе ' ] , Î_files [ 'files ' ] ['name ' ] );

}

îmail->Body = îmessaqe;

if (!îmai1->send()) oie ("Mailer Error: '. 5mai"l->ErrorInfo); {

echo ' <centerxb>cnacn6o за отправку вашего соо&ценижЬгха href=index. php>Ha«wiiTe</a>, чтобы вернуться if (!empty(î_POST['submit'])) send_mai 1 () ;

Рис. 9. Код отправки письма на email

Разработанное веб-приложение было протестировано. Во время тестирования были выявлены и исправлены ошибки. Фрагмент чек-листа тестирования представлен в таблице 1.

Таблица 1

Чек лист тестирования

Название Описание Результат

Пользователь

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

Нажатие на ссылку для подробной информации о маршруте Открывается страница с описанием маршрута и фотографией Открывается страница с описанием маршрута и фотографией

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

Связаться с администратором Открывается страница с формой. После нажатия на кнопку письмо отправляется на почту tourizmnt@gmail.com Открывается страница с формой. После нажатия на кнопку письмо отправляется на почту tourizmnt@gmail. com

После успешного тестирования, веб-приложение опубликовано на бесплатном хостинге 000webhost по адресу: https://tourizmnt.000webhostapp.com Веб-приложения могут быть эффективно использованы для решения самых разнообразных задач. Представленное веб-приложение позволяет собирать, хранить и представлять информацию о живописных местах на Урале. Реализация предложенных в статье технологий позволила создать и внедрить веб-приложение с помощью которого туристы могут общаться, добавлять сведения о вновь открытых местах, делиться впечатлениями, оставлять

координаты. Веб-приложение может стать своеобразной площадкой для поиска единомышленников и распространения опыта путешествий по живописным местам Урала [3].

ЛИТЕРАТУРА

1. Васева Е. С., Шутько А. В. Проектирование веб-приложения «Живописнейшие места Урала» [Электронный ресурс] // Научное обозрение. 2018. №4. URL: https://srjournal.ru/2018/id139/ (дата обращения: 29.05.2020).

2. Гребнева Д. М., Медведев К. А. Проектирование веб-приложения «Skyinfo» для учета и напоминания приема лекарств // Научное обозрение. Технические науки. 2019. № 4. С. 5-10.

3. Демьянов С. А. Инновационные инструменты продвижения туристической фирмы в интернете // Туризм и гостеприимство. 2014. № 2. С. 38.

4. Кан В.А., Картанова А.Д. Разработка веб-приложения учета и контроля успеваемости студентов // Современные проблемы механики. 2019. № 35 (1). С. 79-87.

5. Тузовский А.Ф. Проектирование и разработка web-приложений : учебное пособие для вузов. Москва: Издательство Юрайт, 2020. 218 с.