Разработка сайта с модулем учета гостиничной информации

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Введение

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

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

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

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



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

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

1.1 Основные понятия и определения

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

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

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

CMS -- система управления содержимым (контентом) -- программное средство, устанавливаемое на сервере, упрощающее размещение и редактирование контента на сайте.

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

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

Верстка -- разработка структуры HTML-разметки, которая располагает элементы веб-страницы (изображения, текст и т. д.), согласно дизайн-макету.

Веб-сервер -- сервер, принимающий HTTP-запросы от клиентов, обычно веб-браузеров, и выдающий им HTTP-ответы, как правило, вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными [2].

Фронтэнд - компоненты, выполняющиеся на стороне клиента (веб-браузера).

Бэкэнд - основная программного-аппаратная часть, находящаяся на стороне сервера.

1.2 Общее описание разрабатываемого веб-сайта

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

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

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

1.3 Аналитический обзор существующих аналогов

На сегодняшний день существует множество веб-сайтов гостиниц. Для сравнения в городе Вологда были выбраны сайты таких гостиниц как: сеть гостевых домов «Горница» (vologda-hotel.com) и гостиничный комплекс «Усадьба» (www.vologda-usadba.ru).

Сравнительный анализ веб-сайтов выбранных для сравнения гостиниц представлен в таблице 1.

Таблица 1 - Сравнительный анализ аналогов

Название	Сеть гостевых домов «Горница»	Гостиничный комплекс «Усадьба»
Домен	vologda-hotel.com	www.vologda-usadba.ru
Адаптивность	Поддерживается	Не поддерживается
Информативность	Вся необходимая информация есть на сайте	Вся необходимая информация есть на сайте
Интерфейс	Интуитивно понятный, современный, очень удобный	Интуитивно понятный, устаревший, имеются плохо отображаемые элементы
Дополнительный функционал	Есть модуль бронирования	Есть модуль бронирования
Удобство использования модуля бронирования	Высокий уровень удобства использования	Низкий уровень удобства использования
Рейтинг продвижения сайта	Входит в первую тройку	Входит в первую десятку
Спрос на услуги	Высокий	Средний

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

1) Интуитивно понятный современный интерфейс

2) Адаптивность

3) Наличие дополнительного функционала, например, модуля учета или бронирования

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



2. Анализ и выбор программных средств для разработки программного продукта

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

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

Таблица 2 - Анализ графических редакторов

Название	Adobe Photoshop	GIMP	Paint.NET
Платформы	Windows и MacOS	Windows, MacOS, Linux	Windows и Linux
Свободное распространение	Нет	Да	Да
Работа со слоями	Да	Да	Да
Интерфейс	Интуитивно понятный	Интуитивно понятный	Интуитивно понятный
Поддержка форматов изображений	PSD BMP Cineon Photoshop DCS JPEG и др.	TIFF JPEG (JPG) PNG PSD (в некоторых версиях) SVG GIMP	BMP GIF PNG JPG TIFF PND
Особенности	Огромный инструментарий	Малые затраты вычислительной мощности компьютера	Сохранение истории действий пользователя



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

На этапе разработки разметки страницы разработчик сталкивается с необходимостью выбора подходящего текстового редактора, удовлетворяющего требованиям разработчика. На данный момент существует огромное количество текстовых редакторов, от простейших типа «Блокнот» до ориентированных на решение определённых задач с возможностями удобного редактирования написанного. Например, редакторы, подобные «Notepad++» подсвечивают парные скобки в коде, по-разному отображают виды разных языков программирования, «MSOffice» и «OpenOffice» удобны для создания документации, форматирования текста. В таблице 3 представлены результаты сравнения текстовых редакторов.

Таблица 3 - Анализ текстовых редакторов

Название	Sublime Text 3	Atom	Brackets
Платформы	Windows, MacOS, Linux	Windows, MacOS, Linux	Windows, MacOS, Linux
Свободное распространение	Платный, но есть ознакомительный период	Бесплатный	Бесплатный
Установка плагинов	Через Package Control	Из визуального интерфейса	Через Package Control
Выбор плагинов	Обширный	Большой, есть возможность добавления своих плагинов	Большой, есть возможность добавления своих плагинов
Скорость работы	Очень высокая	Средняя	Малая при наличии сразу многих плагинов
Мини-карта кода	Есть	Есть	Есть
Множественное редактирование	Да	Нет	Да

Из тестовых редакторов был выбран Sublime Text 3, заметно ускоряющий процесс вёрстки благодаря возможности множественного редактирования и обширному выбору плагинов [1].

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

Было произведено сравнение таких популярных в настоящее время фреймворков как Twitter Bootstrap 3, Amazium и Skeleton. Результаты анализа представлены в таблице 4.

Таблица 4 - Анализ фреймворков

Название	Twitter Bootstrap 3	Amazium	Skeleton
Сложность использования	Простая	Средняя	Простая
Поддержка адаптивности	Да	Да	Да
Шаблоны	Огромное количество	Отсутствуют	Малое количество
Поддерживаемые языки	CSS, Sass и Less	CSS и Sass	CSS, Sass и Less
Базовая ширина контейнера	1200 пикселей	960 пикселей	960 пикселей
Поддержка браузерами	IE 8+ и прочие	IE 9+ и прочие	IE 7+ и прочие

В результате проведённого сравнения для разработки был выбран фреймворк Twitter Bootstrap 3 из-за удобной стандартной базовой ширины контейнера, простоты использования, огромного количества шаблонов и функционалов.

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

Для интеграции сверстанного дизайн-макета в CMS используются серверные языки программирования, например, при разработке веб-сайта на фреймворке (то есть более широконаправленной CMS) Django, в качестве сереверного языка используется язык Python. При выборе же, например, CMS Wordpress в качестве серверного уже выступает язык программирования PHP.

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

В качестве сборки компонентов, необходимых для обработки серверного языка программирования можно использовать такие среды разработки как: XAMPP, Open Server, Denwer и прочие.

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

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

Таблица 5 - Анализ сред разработки PHP (локальных серверов)

Название	XAMPP	Open Server	Denwer
Размер	110 Мб	1093 Мб	8.2 Мб
Состав	Apache, MariaDB, MySQL, PHP, Perl	Apache, PHP, PostgreSQL, MySQL, Nginx	Apache, PHP, MySQL, Perl
Сложность установки и настройки	Просто	Средняя сложность	Просто
Быстродействие	Быстрый	Средняя скорость	Средняя скорость
Операционные системы	Windows, Linux, OS X	Windows	Windows (до Windows 10)
Скорость запуска	Быстро	Медленно	Быстро
Максимальные поддерживаемые версии ПО	PHP 7.1.4, MySQL 5.6.16	PHP 7.1.00, MySQL 5.7.16	PHP 5.3.13, MySQL 5.5

2.1 Теоретические основы

Разработка веб-сайта начинается с определения требований к продукту.

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

В данном проекте было решено реализовать сайт с разделами:

1) Главная;

2) О гостинице;

3) Номера;

4) Услуги;

5) Прайс;

6) Отзывы;

7) Контакты.

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

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

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

Четвертым этапом является разработка модуля учета.

Заключительный пятый этап - тестирование работоспособности и правильности отображение всех элементов веб-ресурса.

2.2 Анализ и выбор систем управления контентом

Система управления контентом (CMS) -- это программное средство, устанавливаемое на сервере, упрощающее размещение и редактирование контента на сайте.

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

Для выбора подходящей CMS был произведён сравнительный анализ наиболее популярных CMS, среди которых: Joomla, Drupal, MODX, OpenСart, WordPress.

Анализ систем управления контентом представлены в таблице 6.

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

Таблица 6 - Анализ систем управления контентом

Название	Joomla	Drupal	MODX	WordPress
Настройка русской локализации	Установка дополнительного файла	Установка дополнительного файла обязательно при первой установке CMS	Выбор русского интерфейса при установке	Установка русской версии установщика
Сложность создания страниц/рубрик/меню	Просто/просто/просто	Просто/средняя сложность/просто	Сложно/средняя сложность/средняя сложность	Просто/просто/просто
Сложность размещения информации	Средняя сложность		Сложно	Просто
Сложность настройки страниц/рубрик/главной	Правка в коде (возможна через админ. панель)	Правка в коде (возможна через админ. панель)	Правка в коде (возможна через админ. панель)	Правка в коде (возможна через админ. панель)
Настройка для SEO	Установка плагина. Средняя сложность настройки	Установка плагина. Средняя сложность настройки	Готовый функционал «из коробки». Низкая сложность настройки	Установка стандартного бесплатного плагина. Низкая сложность настройки
Стоимость	Бесплатная	Бесплатная	Бесплатная	Бесплатная

2.3 Анализ и выбор СУБД

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

Таблица 7 - Анализ систем управления базами данных

Название	Oracle	MySQL	PostgreSQL
Скорость работы	Быстрая	Быстрая	Средняя
Функционал	Мощный	Мощный	Мощный
Надежность	Высокая	Малая	Высокая
Поддержка ОС	Windows, Unix, Linux, MacOS	AIX, BSDi, FreeBSD, HP-UX, Linux, Mac OS X, NetBSD, OpenBSD, OS/2 Warp, SGI IRIX, Solaris, SunOS, SCO OpenServer, UnixWare, Tru64, Windows 95 - 10	Linux, Solaris/OpenSolaris, Win32, Win x86-64, Mac OS X, FreeBSD, QNX 4.25, QNX 6
Стоимость	Очень дорого	Бесплатная	Бесплатная

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

3. Разработка веб-сайта

3.1 Разработка структурной схемы веб-сайта

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

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

Структурная схема разрабатываемого в ходе данной выпускной квалификационной работы веб-сайта представлена на рисунке 1.

Рисунок 1 - Структурная схема веб-сайта

3.2 Разработка дизайна

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

Стандартная ширина дизайн-макета 1920 пикселей, основной контент на котором центрируется в контейнер, шириной 1200 пикселей. При разработке стандартных (типовых) сайтов дизайнеры обычно разрабатывают дизайн-макет для персональных компьютеров, с максимальной шириной мониторов - 1920 пикселей. Дальнейшее преобразование в адаптивную версию под устройства с меньшим разрешением производятся непосредственно самим разработчиком либо по собственному усмотрению, если речь идёт об опытном разработчике, либо с согласованием с разрабатывающим макет дизайнером. Если разработка дизайн-макета производится для оригинального сайта с нетипичными и сложными элементами, то дизайнеры отрисовывают макеты на несколько разрешений различных устройств, например, для персональных компьютеров с шириной экрана 1920 пикселей, планшетов с шириной экрана 1024 пикселя и мобильных устройств, минимальный размер которых взят по стандарту за 320 пикселей.

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

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

Рисунок 2 - Блок дизайн-макета «шапка» для большого и среднего разрешений



В изображенном на рисунке 2 блоке «шапка» (по англ. header) присутствуют основные элементы, типичные (стандартные) для данного блока, к которым относятся: логотип организации, при клике на который с любой страницы сайта пользователь возвращается на Главную; навигационное меню, как основное, так и выпадающее меню второго порядка; блок контактов с номером телефона. Также в блоке контактов располагается кнопка «Заказать звонок», при клике на которую пользователю предлагается заполнить заявку на заказ звонка за счет организации.

Рисунок 3 - Блок дизайн-макета «шапка» для минимального разрешения: а - начальный вид «шапки»; б - вид «шапки» с развернутым меню

На рисунке 3 изображен макет блока «шапка» для минимального разрешения - 320 пикселей в ширину.

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

Рисунок 4 - Блок дизайн-макета «главная» для большого и среднего разрешений

При большом разрешении экрана блок дизайн-макета «главная» принимает вид, изображенный на рисунке 4.

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

Рисунок 5 - Блок дизайн-макета «главная» для минимального разрешения: а - информационный баннер; б - популярные номера; в - форма обратной связи

На рисунке 5 изображена мобильная версия главной страницы разрабатываемого веб-сайта, разбитая на части: а - информационный баннер; б - популярные номера; в - форма обратной связи.

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

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



Рисунок 6 - Блок дизайн-макета «подвал» для большого и среднего разрешений

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

Данный блок, так же как и блок «шапка», присутствует на всех страницах одного веб-ресурса.

Рисунок 7 - Блок дизайн-макета «подвал» для минимального разрешения



На рисунке 7 изображен блок «подвал» для минимального разрешения экрана - 320 пикселей.

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

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

3.3 Разработка веб-сайта

Первым этапом разработки веб-сайта является верстка страниц веб-сайта в соответствии с дизайн макетом.

В настоящее время для верстки применяется язык разметки гипертекста HTML - стандартизированный язык разметки документов во Всемирной паутине. Последний вышедший стандарт языка HTML - HTML5. От предыдущих версий языка HTML, версия HTML5 отличается тем, что в ней реализовано улучшение поддержки мультимедиа-технологий, с сохранением удобочитаемости кода для человека и простоты анализа для парсеров [4].

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

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

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

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

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

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

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

HTML-разметка и CSS-стили для блока главной страницы «Отзывы» представлены на рисунке 9.



Рисунок 8 - Корневая директория разрабатываемого проекта на этапе верстки

Рисунок 9 - HTML-разметка и CSS-стили

На представленном рисунке 9 приведен пример кода верстки блока «Отзывы», располагающегося на Главной странице.

Для задания адаптивности веб-страницы используется фреймворк Twitter Bootstrap 3, использование которого предполагает оборачивание основных преобразуемых блоков в дополнительные блоки-элементы сетки. Для приведенного на рисунке 9 примера, преобразуемый логический блок «Отзывы» был обернут в блок <div></div>, с CSS-классами (один из возможных вариантов CSS-селекторов, наиболее часто используемый для применения стилей) col-**-*.

Разработчиками фреймворка Twitter Bootstrap 3 были созданы четыре класса с различной шириной контейнеров, предназначенных для размещения контента, и, соответственно, с различной шириной колонок модульной сетки. В соответствии с разрешением экранов устройств, для которых предназначается веб-ресурс, разработчик размечает на скольких колонках будет располагаться определенный логический блок, т.е. какую ширину он будет занимать при том или ином разрешении экрана. Максимальное число колонок для каждой ширины экрана одинаковое - двенадцать штук. В приведенном на рисунке 9 примере, логический блок «Отзывы» помещен в дополнительный блок с определением ширины расположения контента <div class="col-lg-4 col-sm-4 col-xs-12"></div>. Здесь класс col-lg-4 обозначает, что данный блок будет расположен на ширине 4 колонок или трети ширины экрана устройства с большим разрешением, т.е. более 1200 пикселей в ширину, к которым, например, относятся настольные компьютеры. Класс col-sm-4 располагает блок на ширине 4 колонок или трети ширины экрана устройства со средним разрешением, т.е. более 768 писклей в ширину, к которым, например, относятся планшеты. Класс col-xs-12 располагает блок на ширине 12 колонок или полной ширины экрана устройства с малым разрешением, т.е. менее 767 писклей в ширину, к которым, например, относятся смартфоны. Минимальным разрешением, под которое ведется разработка веб-сайтов, на данный момент является ширина 320 пикселей - это ширина самого узкого из популярным смартфонов, - смартфона iPhone 5. Существует ещё один класс - col-md-* - этот класс используется для разрешений экранов ноутбуков, максимальная ширина которых берется за 1199 пикселей, а минимальная - 992 пикселя.

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

Все отображаемые на Главной отзывы оборачиваются в тег <div class="opinions"></div>, в котором находится дополнительный блок, необходимый для добавления фона блоку с отзывами <div class="point_bg"></div>, наименование раздела<p class="the_title">Отзывы</p>, а также блоки с отдельными отзывами <div class="opinion"></div>, внутри которых расположена разбитая на отдельные элементы информация:

ѕ Блок <div class="opinion_reporter"> </div> нужен для определения информации о клиенте, размещающем отзыв.

ѕ Внутри блока <div class="opinion_reporter"> </div> расположен элемент <img src="/images/man1.png"> - фотография клиента.

ѕ Внутри блока <div class="opinion_reporter"> </div> расположен элемент <span>20.03.2017</span> - дата размещения отзыва.

ѕ Блок <div class="opinion_text"></div> нужен для размещения имени клиента и самого текста отзыва.

ѕ Внутри блока < div class="opinion_text"></div> расположен элемент <i>Олег,</i> - имя клиента.

ѕ Внутри блока < div class="opinion_text"></div> расположен элемент <b>Рязань</b> - город клиента.

ѕ Внутри блока < div class="opinion_text"></div> расположен элемент <span>Гостиница просто отличная! Номера удобные, вид неплох. Добираться в любое место удобно. Совсем рядом детская площадка, кафе. Обслуживание достойное: персонал всегда вежлив и отзывчив, настроение после посещения данного заведения - крайне позитивное. Если едешь в Вологду - советую остановиться именно здесь!</span> - текст отзыва.

На рисунке 9 помимо HTML-разметки также представлен файл с CSS-стилями, в котором задано оформление для каждого элемента представленной HTML-структуры.

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

Например, в представленном на рисунке 9 коде HTML, почти у каждого тега имеется атрибут class, к которому, в основном, и производится обращение CSS-правил. CSS-правила имеют определенную структуру, изображенную на рисунке 9:

ѕ Обращение к тегу производится по его имени, например: h1, span, img и проч.

ѕ Обращение к классу производится по названию класса, с добавлением впереди названия класса точки, например:.point-bg,.opinions,.opinion и проч.

ѕ Обращение к идентификатору производится по названию идентификатора, с добавлением впереди названия идентификатора значка «октоторп» (решетка), например: #identifier, #text и проч.

Идентификаторы предпочтительнее использовать для JavaScript-скриптов, в то время как для CSS-правил лучше использовать классы.

Примеры задания CSS-правил, а также пояснение их действия для рисунка 9:

ѕ .point-bg - класс для задания фона блока «Отзывы». Фон задается нестандартно, так как он должен заполнить всю правую сторону окна браузера, независимо от того, что данный блок находится в модульной сетке. Для этого мы задаем изображение фона в качестве фоновой картинки в CSS, задаем ему ширину 9000 пикселей (если вдруг пользователь зайдет, например, со смарт-телевизора с разрешением экрана более 1920 пикселей, то данный фон будет также заполнять всю правую часть экрана), позиционируем начало блока относительно блока «Отзывы» в крайнее правое и верхнее положение высотой 100 процентов и отправляем его на задний план.

ѕ .opinions - класс блока размещения всех отзывов. Относительно него выравнивается фон данного блока (.point-bg), а также задается нижний отступ блока для визуального отделения данного блока от следующего.

ѕ .opinions h1 - групповое обращение к элементу HTML-разметки, включающее в себя класс блока, в котором находится тег. Задает отступы, размер, жирность шрифта и расстояние между буквами.

ѕ .about_company.opinion_reporter img - групповое обращение к изображению клиента, задающее высоту и ширину, скругление и цвет границ, а также отступы.

ѕ .about_company.opinion_reporter span - обращение к тексту отзыва. Задает цвет, семейство, размер и жирность шрифта, а также отступы.

ѕ .opinion_text - задает ширину блоку с текстом отзыва, а также отступы для него.

Для реализации выпадающего списка был использован скрипт, написанный на клиентском языке JavaScript, который обрабатывает событие «клик» на заданный элемент, определённый с помощью класса menu-item-has-children. Код данного скрипта приведен на рисунке 10.

Рисунок 10 - Реализация выпадающего меню с помощью скрипта

На рисунке 10 изображен код скрипта, отвечаюшего за работу выпадающего меню. При клике на элемент с классом menu-item-has-children, элемент sub-menu плавно выезжает с помощью функции slideToggle(). Функция stop() останавливает действие анимации.

Для того, чтобы данный скрипт мог работать, необходимо подключить библиотеку jQuery языка JavaScript.

Таким же образом была разработана вся остальная разметка и её стилизация.

Для проверки правильности верстки относительно дизайн-макетов, существуют расширения для браузеров, которые позволяют накладывать картинку дизайн-макета поверх страницы в браузере, что позволяет производить верстку, и, соответственно, проверку верстки с точностью до пикселя. Таким расширением для одного из самых популярных веб-браузеров Google Chrome является расширение PerfectPixel. Пример использования данного расширения представлен на рисунке 11 (для наглядности эффекта наложения, накладываемое изображение было подвинуто на несколько пикселей относительно веб-страницы).

Рисунок 11 - Использование расширения PerfectPixel

Следующим этапом была произведена интеграция веб-сайта в систему управления контентом. Для этой цели разметка страниц разбивается на отдельные типовые блоки, которые будут использоваться для формирования отдельных страниц и записей, после чего в данные блоки к разметке дописывают код PHP, который и будет определять использование блоков. PHP (Hypertext Preprocessor) - это распространенный язык программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения Web-разработок и его код может внедряться непосредственно в HTML[5].

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

Полный код интегрированной в CMS «главной» представлен в приложении 1.

Рисунок 12 - Готовый код шаблона страницы

Построчное пояснение кода, представленного на рисунке 12 приведено ниже:

ѕ <?php get_header(); ?> - отвечает за вызов повторяющегося на каждой странице блока «шапка», который описан в отдельном PHP-файле.

ѕ <div class="wrapper"></div> необходим для того, чтобы при отсутствии контента на странице (т.е. в случае, когда на странице находятся только блок «шапка» и блок «подвал») блок «подвал» находился внизу экрана, а не сливался с блоком «шапка».

ѕ <section class="page"> - определяет блок страницы, к которому применяется стилизация, обращающаяся к элементам с помощью класса page.

ѕ Блок, определяющий ширину расположения контента <div class="col-xs-12"> необходимо оборачивать в два дополнительных блока <div class="container"> и <div class="row"> для того, чтобы убрать лишние отсупы, т.е. для «схлопывая» отступов.

ѕ <div class="breadcrumbs clearfix"><ul><?php bcn_display(); ?></ul></div> - внутренняя функция CMS Wordpress, которая отвечает за вывод «хлебных крошек», т.е. пути до страницы или записи, на которой в данный момент находится пользователь.

ѕ Код, находящийся на строках 14-42 определяет идентификационный номер страницы, если номер совпадает с заявленным в PHP-скрипте на строке 14 - формируем страницу «контакты», на которой выводится контактная информация в сворачивающемся/разворачивающемся блоке и карта расположения организации. Также на строке 42 написан PHP-скрипт, позволяющий выводить на данной странице контент любого типа, перечень которого представлен на рисунке 13.

ѕ В случае, если идентификационный номер страницы не совпадает с заданным на строке 14 - PHP-скрипт осуществляет переход на строку 44, и выполняется условие «else» цикла «if-else» и формируется новая страница, на которую можно добавлять контент любого типа, перечень которого представлен на рисунке 13, за что отвечает PHP-скрипт <?php the_flex(); ?>.



Рисунок 13 - Перечень реализованных блоков контента определенного типа

Для реализации возможности размещения на страницах блоков, определенных в перечне на рисунке 13, был использован плагин для CMS Wordpress - ACF Pro. Данный плагин позволяет создавать произвольные поля для вывода определенных блоков на заданных страницах.

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

Реализация функций вывода блоков группы «контент» описана в файле functions.php, часть кода которого представлена на рисунке 14, и разобрана на примере реализации блока «сотрудник».



Рисунок 14 - Код, задающий произвольные поля для блока «сотрудник»

На строке 125 кода файла functions.php располагается определение функции flex, отвечающей за вывод полей группы «контент». Затем следует проверка циклом «while» на наличие рядов типа flex. Циклом «if-else» проверяется выбор какой блок был выбран для добавления на страницу. В данном случае предполагаем, что был выбран блок «сотрудник» (т.е. flex_agent). После чего задаем ширину, на которой будет располагаться данный блок, - в данном случае это половина ширины области контента для устройств, с большим и средним разрешением, и вся ширина области контента для устройств, с маленьким разрешением экрана. Далее добавляем в панель администрирования сайта поле для загрузки изображения сотрудника (для чего используется функция get_sub_field('agent_img');) и производим проверку на заполнение данного поля: если поле заполнено - выводим выбранное изображение сотрудника, иначе выводим стандартное заданное изображение--заглушку. После чего в панели администрирования создаются для ввода имени, должности, если есть телефона и электронной почты сотрудника.



3.4 Создание модуля учета

В основе модуля учета (бронирования) лежит база данных (БД) booking_last, в которой содержится информация о гостиницах, номерах, их категориях, клиентах, а также о самом бронировании. Данная БД была разработана в соответствии с описанными в книге «БАЗЫ ДАННЫХ. ЯЗЫК SQL»[7] рекомендациями к проектированию баз данных.

Схема базы данных booking_last представлена на рисунке 15.

Рисунок 15 - Схема базы данных booking_last

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

Основным компонентом для разработки модуля выступает Composer. Composer -- это пакетный менеджер уровня приложений для языка программирования PHP, который предоставляет средства по управлению зависимостями в PHP-приложении [6]. Composer является кроссплатформенным программным обеспечением, т.е. работает под разными операционными системами.

Composer работает через интерфейс командной строки и устанавливает зависимости (например библиотеки) для приложения. Он также позволяет пользователям устанавливать PHP-приложения, которые доступны на packagist.org, который является его основным репозиторием, где содержатся все доступные пакеты [6].

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

ѕ AltoRouter - маленькая мощная библиотека для создания маршрутов URL-адресов с использованием HTTP методов. Для корректной и полной работы представленного модуля учета было реализовано три вида HTTP методов, среди которых метод GET (получение данных), POST (добавление данных) и DELETE (удаление данных)

ѕ colshrapnel/safemysql - средство для удобного и безопасного управления запросами к базам данных. Его удобство обусловлено тем, что с помощью данного класса код минимализируется и избавляется от излишних повторений

ѕ monolog - запись идентификационных данных в файлы.

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

С помощью пакетного менеджера Composer устанавливаются библиотеки и классы AltoRouter, safemysql и monolog.

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

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

Заголовки наиболее значимых для просмотра, добавления и удаления данных в таблицах базы booking_last прописаны в отдельном файле routing.php, код которого представлен на рисунке 16.

Рисунок 16 - Заголовки наиболее значимых маршрутов

Ключевым моментом работы с модулем является авторизация пользователей, реализованная с помощью проверки введенных в заголовке данных на совпадение с данными, находящимися в таблице users. В случае если введенные в заголовке данные совпадают с данными из таблицы - пользователь получает доступ к данным из БД, иначе выводится сообщение о 401 ошибке «Не авторизованный пользователь» и доступ к данным не допускается.

3.5 Разработка методических указаний для продукта

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

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

Для входа в панель администрирования сайта в адресной строке браузера вводится URL-адрес веб-сайта и фраза для входа в админ. панель, отделяется от URL символом «слэш». В данном проекте адрес для входа в админ. панель выглядит следующим образом: http://localhost/wordpress/wp-admin

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

Рисунок 17 - Форма авторизации пользователя в CMS Wordpress



Внешний вид панели администрирования сайта на CMS Wordpress представлен на рисунке 18.

Рисунок 18 - Внешний вид панели администрирования сайта на CMS Wordpress

Весь контент на сайте располагается на типовых страницах, для создания которых в админ. панели нужно выбрать пункт меню «Страницы», затем «Добавить новую». Для новой страницы нужно указать её название, а также наполнить контентом из предложенного списка, выпадающего при клике на кнопку «Add row». В зависимости от выбранного из предложенного списка блока с контентом, на странице отобразятся поля, предложенные к заполнению, что отображено на рисунке 19.



Рисунок 19 - Пример наполнения страницы через админ. панель

Сохранение внесенных изменений производится кликом на кнопку «Опубликовать», если действие - создание новой страницы, или «Обновить», если страница уже была создана, но информация на ней редактируется. Помимо публикации страниц или записей в CMS Wordpress существует возможность сохранить их в качестве черновика: такая страница или запись будет находиться в админ. панели, однако на сайте отображаться не будет. Также можно отложить время публикации страницы или записи на определенный срок.

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

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

Редактирование страницы «контакты» выглядит так, как представлено на рисунке 20.

Рисунок 20 - Редактирование страницы «контакты»

Также редактирование страницы «главная» производится с помощью клика на пункт меню «главная» в основном меню панели администрирования сайта и выглядит как представлено на рисунке 21.



Рисунок 21 - Редактирование страницы «главная»



4. Тестирование

4.1 Обоснование методики тестирования

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

ѕ Проверку отображения всех страниц;

ѕ Тестирование работоспособности форм обратной связи;

ѕ Проверка и поиск нерабочих гиперссылок;

ѕ Проверка загрузки файлов на сервер;

ѕ Корректность работы модуля учета и бронирования.

2) Тестирование верстки -- при проверке верстки первым делом тестировщик проверяет расположения элементов, соответствие их позиций предоставленным макетам, а также проверяет оптимизацию изображений и графики. Далее осуществляется проверка валидности кода. В процессе вёрстки важно соблюдать корректную иерархию объектов, и важно удостовериться в её валидности по факту завершения работ. Браузеры, несмотря на явно неверный код, в любом случае постараются отобразить веб-страницу. Но поскольку не существует единого регламента о том, как же должен быть показан «кривой» документ, каждый браузер пытается сделать это по-своему. А это в свою очередь приводит к тому, что один и тот же документ может выглядеть по-разному в различных браузерах. Исправление явных промахов и систематизация кода приводит, как правило, к стабильному результату. Завершив проверку на валидность, специалист приступает к проверке на кроссбраузерность, т.е. проверяет работоспособность сайта в различных браузерах, а так же при различных параметрах настройки экрана [8].

3) Usability тестирование -- проводится для оценки удобства продукта в использовании, основанный на привлечении пользователей в качестве тестировщиков и анализ полученных результатов.

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

Тестирование проводится с участием нескольких человек из целевой аудитории, так называемых респондентов. Для проведения тестирования достаточно 4-6 человек. Существует правило 80/20, которое гласит, что 20% пользователей дают 80% результата. Поэтому такое количество респондентов максимально эффективно с точки зрения экономии времени и затрат [8].

4.2 Результаты тестирования

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

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

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

Usability тестирование выявило некоторые неудобства для пользователя. Основные неудобства были устранены.



Заключение

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

Для удобства редактирования представленного веб-сайта, в CMS Worspress был приобретен и внедрен плагин ACF Pro, позволяющий создавать произвольные поля и выводить их на нужных страницах.

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



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

1. Токач, Д. Ю. Окружение верстальщика / Д. Ю. Токач / Материалы межрегиональной научной конференции Х ежегодной научной сессии аспирантов и молодых ученых: в 4 т. / М-во образ. и науки РФ; Вологод. гос. ун-т. - Вологда, 2016. - Т. 1. - с 107-110.

2. Веб-сервер [Электронный ресурс]: Википедия / Веб-сервер - Режим доступа: https://ru.wikipedia.org/wiki/Веб-сервер

3. HTML, CSS, PHP, JavaScript, SQL - что и зачем? [Электронный ресурс]: Codeharmony.ru / HTML, CSS, PHP, JavaScript, SQL - что и зачем?