Файл: Минобрнауки россии санктПетербургский государственный электротехнический университет лэти.pdf

30
Р
исунок 1.1
Запрос Google Maps Geocoding API имеет следующий вид: https://maps.googleapis.com/maps/api/geocode/outputFormat?parameters где outputFormat может принимать следующее значение: json – задает вывод в формате JavaScript Object Notation (JSON); https://maps.googleapis.com/maps/api/geocode/outputFormat?parameter
В результате получен доступ к картографическим средствам Google, которые будут использоваться на сайте.
Вывод: Выбранные технологии позволяют разрабатывать сайты с достаточно широкими возможностями. С их помощь могут быть решены поставленные задачи

31
4. РЕАЛИЗАЦИЯ
4.1 Использование WordPress
Разработка сайта ведется на локальном сервере. Я использовал
WampServer. Данный локальный сервер включает в себя установленный сервер Apache, базы данных MySQL, средство их администрирования phpMyAdmin, поддерживает работу с PHP файлами. Доступ к административной панели происходит по адресу http://localhost. Отсюда можно попасть в phpMyAdmin, посмотреть настройки, а также увидеть список созданных проектов .
Так как сайт будет работать под управлением WordPress необходимо для начала установить его. Для этого нужно выполнить шаги, которые предлагаются на официальном сайте:
1. Нужно скачать и распаковать архив, содержащий WordPress, с сайта https://ru.wordpress.org/
2. На следующем этапе требуется создать базу данных для
WordPress на локальном веб-сервере
3. Далее нужно сменить имя файла wp-config-sample.php на wp- config.php.
4. Открыв полученный файл wp-config.php в текстовом редакторе, я использовал в своей работе PHPStorm, следует вписать в него настройки подключения к базе.
Перейдя по ссылке http://localhost/wp-admin/install.php, можно попасть в интерфейс установки, результатом которой служит сайт с установленной
CMS.
4.2 Демонстрация модели хранения
В данном разделе приведены скриншоты, демонстрирующие реализацию записей в базе данных на конкретных реальных примерах. На

32
Рисунках 3.1 и 3.2 можно наблюдать SQL запрос к базе и результат его выполнения. Здесь можно увидеть какие метаданные характеризуют конкретный пост в базе данных.
Рисунок 4.1. SQL запрос
Рисунок 4.2 Результат запроса

33
Каждая запись таблицы wp_posts непосредственно связана с записью в таблице wp_postmeta, в которой и содержится основная информация. В частности, информация о местоположении, подробное описание, электронная почта автора, путь к изображению обложки, а так же путь к изображениями, которые будут отображаться на странице записи. Сами же записи хранятся в таблице wp_posts. Аналогичным образом в таблице wp_posts представлены статьи. Ниже можно видеть тот пост, данные из которого были представлены ранее.
Рисунок 4.3 - Запись в таблице wp_posts.
Пользовательские данные расположены таблице wp_users. Пароли пользователей в WordPress хешируются с помощью функции md5.
Таблица wp_users данного проекта представлена на рисунке 3.4
Рисунок 4.4 – Таблица users.
Доступные для выбора регионы, а так же категории объявлений, статей хранятся в таблице wp_terms. В Wordpress в этой таблицы хранятся термины для пользовательской сортировки данных, группировки во множества и подмножества.

34
4.3 Результат реализация пользовательского интерфейса
На главной странице сайта представлена возможность определения текущего местоположения пользователя для поиска текущих ближайших предложений.
Ниже располагается лента последних публикаций пользователей сайта. Страница сайта сверстана с учетом адаптивной верстки и принимает разный вид при использовании на устройствах с разным размером экрана.
Отображение на устройстве с маленьким экраном показано на рисунке 3.5
Рисунок 4.5 - Главная страница для мобильных устройств.

35
Страницы сайта могут отображаться в трех версиях – для мобильных устройств с достаточно небольшими экранами, для компьютеров и иной техники с большими экранами и разрешением до 1200px, и, наконец, в полной версии – для экранов более 1200px в ширину, большинство современных устройств обладают экранами с разрешениями превосходящими выбранное или близкими к нему.
На рисунке 4.6 демонстрируется главное меню сайта в своем наиболее широком варианте.
Рисунок 4.6 - Главная страница
Перейдя по кнопке «Приключения» пользователь попадает в раздел поиска предложений, который показан на рисунке 4.7 Предложения указаны на карте и при определении своего местоположения можно наблюдать ближайшие вокруг. На рисунке 4.8 показан результат поиска по местоположению и выбранной категории.
Так же существует возможность выбора радиуса поиска. Публикации делятся на несколько категорий: экскурсия, прогулка, активный отдых. В дальнейшем могут быть введены новые.

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

37
В данном примере выведено одно значение – предложение демонстрации памятников А.С. Пушкина вблизи метро Черная Речка города
Санкт-Петербург, а так же номер телефона создателя объявления.
Пользователь может связаться с автором по номеру телефона или написать ему в один из мессенджеров, если автор имеет таковые.
Рисунок 4.9

38
Рисунок 4.10
На рисунках 4.9 и 4.10 представлены функции поиска отображенные на устройстве с небольшим экраном. В данном представлении карта и отображение списка результатов поиска располагаются на разных экранах. А основные разделы сайта расположены во всплывающем меню, которое вызывается путем нажатия на кнопку «Меню».
Выбрав среди предложений, пользователь может перейти на интересующую страницу. Здесь он может прочить описание от автора, посмотреть фотографии, если они есть, а так же участвовать в обсуждении с другими пользователями. Если же автор заходит на странице своего объявления, то может он добавить фотографии или удалить запись.
Отображение записи продемонстрированно на Рисунке 4.11. Пользователи в

39 первую очередь обращают внимание на изображения, поэтому значительную часть страницы занимает область отображения прикрепленных фотографий, выполненная в формате «карусель». Среди таких изображений могут быть фотографии мест, относящихся к предложению, запечатлённые истории в этих местах.
Рисунок 4.11
Внизу страницы расположена карта с отмеченным местоположением, более подробные контактные данные, а так же возможность проложить маршрут до точки. В результате заполнения полей и подтверждения пользователь будет перенаправлен на сайт google.com/maps, где будет построен стандартный маршрут между точками, будет предложено выбрать способ перемещения. Это изображено на рисунке 4.12.
Там же находится область в которой отображены все фотографии, относящиеся к конкретной записи.

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

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

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

43
В разделе «Маршруты и достопримечательности» представлены карты с возможность определения пользовательского местоположения для того, чтобы предоставить интересные ближайшие достопримечательности и осмотреть их в наиболее рациональном порядке.
Рисунок 4.16 – Маршруты.
Так же на сайте пользователи могут читать тематические статьи, которые сгруппированы по типу. Список статей показан на рисунке 4.17
4.4 Установка сайта на хостинг
Для того, чтобы пользователи сети интернет имели доступ к сайту необходимо разместить его на одном из хостингов. Я в своей работе выбрал бесплатный тариф на hostinger.ru. А так же зарезервировал доменное имя meetify.xyz.

44
Управление осуществляется через cPanel (Рисунок 4.18)
Рисунок 4.18 cPanel —панель управления веб-хостингом.
Функционирует посредством отдельной копии веб-сервера. cPanel на Hostinger.ru в бесплатном тарифе позволяет перенести резервную копию базы данных, которая создавалась на локальном сервере, перенести файлы сайта на сервер при помощи FTP, также есть возможность создавать резервные копии сайта и базы. Управление MySQL осуществляется при помощь phpMyAdmin.
Вывод: В данном разделе были рассмотрены методы взаимодействия с пользовательским интерфейсом, продемонстрированы способы хранения информации в базе данных. Интерфейс разработанного сайта позволяет с удобством использовать его как на больших экранах, так и на мобильных устройствах. Цветовая гамма сайта достаточно яркая, что обеспечивает

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

46

5. ТЕХНИКО-ЭКОНОМИЧЕСКОЕ ОБОСНОВАНИЕ
Целью ВКР является разработка сайта для туристов.
Что делать если вы оказались в незнакомом городе? Будет полезен сервис, который покажет, что же происходит вокруг, даст связаться с теми, кто готов составить вам компанию или предоставить свои услуги.
Главную функцию, которую должен выполнять сайт являет поиск и налаживание контактов среди путешественников, для обоюдно полезного обмена информацией, распространение знаний об окружающем мире.
Составление технико-экономического обоснования позволяет закрепить знания и получить практические навыки экономической оценки, вычисления затрат и себестоимости проекта на конкретном примере.
5.1.План-график выполнения работ.
Процесс выполнения
ВКР
включает в
себя совокупность работ, выполняемых для осуществления поставленной задачи. Основная работа выполняется студентом, на которого возлагается ответственность за выполнение поставленных задач. Студент занимается анализом предметной области
,
проектированием,
разработкой программы и оформлением работы.
Месячная заработная плата студента (инженера) – 20000 руб.
Дневная заработная плата определяется как частное месячной заработной платы и количества рабочих дней в месяце (21 рабочий день).
В таблице 5.1. предоставлены данные (по факту) о длительности выполнения каждого этапа разработки исполнителем и дневная ставка заработной платы.

47
Таблица 5.1. – Данные о длительности выполнения работы
№ Этапы и содержание выполняемых работ
Исполнител ь
Длительност ь работ, дн.
Трудоемкост ь t
0
, ч-дн.
Ставка руб./дн.
1
Анализ поставленных задач
Студент
4 4
952.380 9
2
Изучение предметной области
Студент
7 7
952.380 9
3
Изучение средств разработки, выбор технологий для использования
Студент
0,5 0,5 952.380 9
4
Проектировани е проекта
Студент
10 10 952.380 9
5
Разработка
Web-сайта
Студент
15 15 952.380 9
6
Оформление документации
Студент
0,5 0,5 952.380 9
Итого:
37 37

48
5.2.Величина заработной платы и социальных отчислений
Данные о трудоемкости выполняемых работ и ставки каждого из исполнителей позволяют определить расходы на заработную плату и отчисления на страховые взносы на обязательное социальное, пенсионное и медицинское страхование вычисляются с помощью формул (5.1), (5.2), (5.3) соответственно. где З
осн
– расходы на основную заработную плату исполнителей(руб.); k
– количество исполнителей; T
i
–время, затраченное исполнителем на проведение исследования(дни); C
i
– ставка i-го исполнителя (руб./день). Так как в качестве исполнителя выступает один человек, будем считать только для i=1.
З
осн.з/пл
= ∑
????
????
∗ ????
????
????
????=1
, (5.1)
З
доп.з/пл
= З
осн.з/пл
∗
Н
доп
100
, (5.2)
З
соц
= (З
осн.з/пл
+ З
доп.з/пл
) ∗
Н
соц
100
, (5.3)
З
доп
– расходы на дополнительную заработную плату исполнителей(руб.);
Н
доп
–норматив дополнительной заработной платы(14%);
З
соц
– расходы на социальные нужды с заработной платы(руб.);
Н
соц
– норматив отчислений на страховые взносы на обязательное социальное, пенсионное и медицинское страхование. Этот норматив принимаем равным 30%.
Все данные о расходах на заработную плату и отчисления на страховые взносы на обязательное социальное, пенсионное и медицинское страхование представлены в таблице 5.2.