Онлайн-сервис для бронирования билетов
Разработка на Laravel открывает широкие возможности для создания сложных онлайн-сервисов — с разветвленной логикой и многочисленными интеграциями. Именно такой проект мы реализовали для украинской компании Rubikon, которая специализируется на международных автобусных перевозках. Мы создали полноценную платформу для бронирования билетов — с уникальным дизайном, личным кабинетом пользователя и удобной административной панелью.
Очередной пример сайта на Laravel в исполнении Webnauts демонстрирует, как мощный PHP-фреймворк справляется с реальными бизнес-задачами транспортной отрасли. Из нашего кейса вы узнаете о каждом этапе разработки — от проектирования структуры до внедрения функционала.
О проекте по созданию сайта на Laravel
Rubikon — украинский перевозчик, который соединяет Украину с городами Европы регулярными автобусными рейсами. Компания сотрудничает с более чем 50 партнерами-перевозчиками и предлагает маршруты в Польшу, Германию, Чехию, Румынию и другие страны. До обращения в компанию Webnauts бронирование билетов происходило преимущественно по телефону и через мессенджеры, что ограничивало масштабирование бизнеса.
Так что перед нами встала задача создать современный онлайн-сервис, который позволит пассажирам самостоятельно искать рейсы, бронировать билеты и управлять поездками.
Техническое задание на разработку сайта предусматривало:
- удобный поиск рейсов по направлениям и датам с разветвленной системой фильтров;
- пошаговое бронирование билета с возможностью оплаты онлайн или при посадке;
- создание личного кабинета для управления билетами и публикации отзывов;
- административная панель для управления заказами и не только;
- двуязычный интерфейс на украинском и русском языках;
- интеграция с платежными системами и сервисами перевозчиков.
Для реализации такого функционала мы выбрали Laravel — фреймворк, обеспечивающий надежную архитектуру и гибкость для дальнейшего развития платформы.
Читайте также:
Разработка e-commerce сайтов на LaravelUI/UX дизайн сайта на Laravel
Прежде чем приступить к созданию сайта на Laravel, UI/UX-дизайнер Webnauts проработала пользовательские сценарии и спроектировала интерфейс, ориентированный на четкое выполнение целевого действия — бронирование билета.
Фирменный стиль и цветовая палитра
Визуальную основу дизайна сформировали фирменные цвета Rubikon: белый для основного фона, желтый для акцентов и темно-серый для хедера и контрастных блоков.
Акцентный цвет выделяет ключевые элементы сайта — СТА-кнопки, активные вкладки и прогресс-бары. Такой контраст направляет внимание пользователя на важные элементы интерфейса и поддерживает узнаваемость бренда на каждой странице.
Шрифт без засечек e-Ukraine обеспечивает читабельность как на десктопе, так и на мобильных устройствах. Округлые углы карточек и кнопок придают интерфейсу современный вид без излишней декоративности.
Навигационное меню и структура сервиса
Навигация сайта компактна и понятна. Хедер не перегружен и содержит логотип с переключателем языков, контактные данные, кнопку поддержки и вход в личный кабинет. Меню сайта в футере дополнено основными разделами и самыми популярными направлениями.
Структура сайта подчинена главной цели — бронированию билетов. Поэтому форма поиска рейсов размещена на первом экране главной страницы. Пользователь сразу видит поля для ввода направления, даты и количества пассажиров. Под формой — лента с ключевым преимуществом сервиса «Оплата при посадке».
Главная страница сервиса в дизайн-макетах
Блоки, составляющие главную страницу, логично структурированы. После hero-секции с поиском размещен блок преимуществ Rubikon, каждое из которых сопровождает тематическая иллюстрация.
Ниже — раздел популярных направлений, разделенных на международные и внутренние перевозки. Карточки направлений содержат название и цену маршрута, а также фото города назначения.
Блок партнеров демонстрирует логотипы партнеров, а секция отзывов и развернутый футер с перечнем стран, направлений и разделов сайта завершают главную страницу.
Дизайн каталога рейсов
Страница сайта с результатами поиска разделена на две части. Слева расположена боковая панель с фильтрами, а справа — список найденных рейсов с возможностью сортировки по цене и валюте.
Карточка рейса содержит время отправления и прибытия, продолжительность поездки, название перевозчика, иконки доступных удобств, цену и кнопку бронирования. При развертывании карточки пользователь видит структурированную по вкладкам информацию, в том числе детали с фото, маршрут и скидки, правила перевозки и условия возврата билета. Фото транспорта открываются в модальном окне с функциональным слайдером.
Под каталогом рейсов размещена форма для связи, секция с преимуществами компании, таблицами цен и отзывами пассажиров, а также блоки допродажи «Похожие маршруты» и «Популярные рейсы».
Пошаговый процесс бронирования
Страница Check out разбита на три простых шага: выбор рейса, заполнение данных и оплата билета. Прогресс-бар вверху страницы подсказывает текущий этап бронирования.
На этапе заполнения данных пользователь вводит информацию о пассажирах и контакты для связи, после чего выбирает способ бронирования билетов (бесплатный или платный). Справа — сайдбар с общей стоимостью и маршрутом рейса.
После успешного бронирования пользователь попадает на страницу подтверждения с итоговой информацией о заказе, возможностью скачать билет в PDF и призывом создать личный кабинет.
Личный кабинет пользователя
Регистрация на сайте максимально упрощена: достаточно ввести email или номер телефона, либо авторизоваться через Google. Модальное окно сразу демонстрирует преимущества регистрации.
Личный кабинет пользователя содержит четыре вкладки.
- «Ваши билеты» — список активных бронирований с подробной информацией, которыми удобно управлять с помощью кнопок в зависимости от статуса заказа: подтвердить бронирование либо оплатить, вернуть или скачать билет.
- «Архив билетов» сохраняет историю завершенных и отмененных поездок.
- «Контактные данные» позволяют редактировать личную информацию, настроить мессенджеры для получения билетов и сохранить данные пассажира для быстрого бронирования.
- «Отзывы» — раздел для оценки поездок. Форма отзыва состоит из двух простых шагов: оценка по пятибалльной шкале и текстовый комментарий о впечатлениях для публикации на сайте.
Информационные страницы сайта
Раздел «О нас» рассказывает историю компании, объясняет преимущества сервиса и демонстрирует популярные направления.
Дополнительное доверие к сервису формирует раздел «СМИ о нас», который представляет публикации медиа о Rubikon в виде информативных карточек с логотипом издания, заголовком статьи и датой публикации.
Страница «Сотрудничество» адресована потенциальным партнерам: туристическим агентствам и компаниям-перевозчикам.
Блог сайта содержит статьи о путешествиях, правилах перевозки багажа и другие полезные материалы. Каждая карточка имеет изображение, дату, заголовок и краткий анонс.
На странице статьи реализован счетчик просмотров, расчет времени чтения текста, удобная навигация по разделам статьи и возможность оценить, распространить и прокомментировать материал.
Секция комментариев имеет древовидную структуру обсуждения, а блок «Рекомендуемые статьи» предлагает читателям релевантный контент для увеличения глубины просмотра сайта.
UХ UI дизайн админ-панели
Для менеджеров и партнеров-перевозчиков компании Rubikon мы спроектировали интерфейс административной части с акцентом на функциональность. Админка сайта позволяет управлять рейсами, обрабатывать бронирования, настраивать маршруты, модерировать отзывы и редактировать контент.
UI дизайн интерфейса админки
Дизайн админки выдержан в той же стилистике, что и клиентская часть: темно-серый сайдбар с логотипом, белое рабочее поле и желтые акценты на кнопках действий. Такой подход обеспечивает визуальное единство сервиса и облегчает ориентацию для пользователей, работающих с обеими частями системы.
Навигация сайта глазами менеджера
Навигация панели администратора организована через боковое меню, разделенное на две логические группы:
- «Меню», охватывающее управление данными сервиса,
- «Клиенты», переназначенная для работы с пассажирами.
Каждый раздел админки имеет поиск, пагинацию и функции фильтрации и сортировки по колонкам.
Управление географией перевозок
Раздел «Страны» содержит перечень государств, в которые выполняются рейсы, с флагами и перечнем валют. Форма создания новой страны содержит название на трех языках, место для загрузки флага, выбор валюты и текстовые блоки с условиями перевозки для пассажиров и животных. Редактор поддерживает форматирование текста, что позволяет структурировать правила, выделять важную информацию и добавлять гиперссылки.
Раздел «Города» дополняет географическую базу перечнем населенных пунктов с указанием региона и страны. Страница сайта с редактированием города позволяет настроить остановки с точными адресами, географическими координатами, пунктами пересечения границы и дополнительными комментариями. Здесь же можно добавить рекомендации для пассажиров по общественному транспорту, ориентирам возле остановки и т. д.
База перевозчиков и маршрутов
Раздел «Перевозчики» хранит информацию о партнерах онлайн-сервиса Rubikon. Форма создания нового перевозчика построена на аккордеонах, которые открывают/скрывают контент по клику. Например, в секции «Общие данные» можно ввести название и описание компании, загрузить логотип и отметить чекбокс «Рубикон рекомендует».
Раздел «Маршруты» позволяет создавать схемы движения со всеми остановками и пересадками. Редактирование маршрута начинается с названия и выбора перевозчика, после чего администратор формирует последовательность пунктов. Для каждого пункта указывается город и адрес, а внизу формы — интерактивная карта маршрута.
Гибкая настройка рейсов
Раздел «Рейсы» является центральным в работе админ-панели сайта и содержит все необходимые данные в табличном формате.
Форма создания нового рейса состоит из нескольких секций-аккордеонов. В базовых данных указывается название, тип транспорта и регулярность рейса. Секция «Маршрут и перевозчик» подтягивает ранее созданные сущности из списка.
Для регулярных рейсов доступны настройки расписания с toggle-переключателями, которые позволяют быстро закрывать продажи на конкретные даты.
В секции «Тип бронирования и оплаты» администратор выбирает доступные варианты для клиентов. Отдельно настраивается тип бронирования на определенный период (например, в праздники либо пиковые сезоны), по окончании которого применяется обычный тип бронирования.
Секция «Время отправления и прибытия» содержит перечень всех остановок маршрута с полями для ввода времени прибытия и отправления. Каждую остановку можно временно исключить до конкретного срока действия.
Секция «Цены» представляет собой таблицу, где по горизонтали размещены станции посадки, а по вертикали — станции высадки. Цены можно вносить в разных валютах через вкладки, что позволяет гибко управлять тарифами в зависимости от участка маршрута.
Система задач для операторов
Раздел «Задачи» с поиском, сортировкой и экспортом данных реализует внутреннюю коммуникацию между менеджерами.
При создании задачи оператор выбирает один или несколько заказов из списка, назначает ответственного, устанавливает приоритет и описывает детали в соответствующем поле.
Задачи привязываются к заказам и отображаются в карточке как текстовое уведомление с опциями «Выполнено / Не выполнено». Такой механизм позволяет координировать работу команды и отслеживать выполнение поручений.
Обработка заказов и работа с клиентами
Раздел «Заказы» обеспечивает полный контроль над бронированиями благодаря структурированной таблице с функциями поиска, фильтрации и сортировки. Для удобства менеджеров статусы заявок визуализированы цветными индикаторами.
Клик на запись открывает боковую панель с подробной информацией и панелью кнопок для быстрого администрирования заказа.
Раздел «Пользователи» отображает базу зарегистрированных клиентов с функциями поиска, сортировки, объединения и массового редактирования карточек.
Профиль клиента содержит общие данные, историю заказов и список пассажиров, а также UTM-метки переходов на сайт. Кнопка «Добавить заказ» позволяет оформить бронирование непосредственно из карточки клиента.
Модерация отзывов и комментариев
Раздел «Отзывы» собирает оценки пассажиров после поездок. Таблица с функцией поиска и сортировки содержит оценки, статусы и впечатления клиентов. Наведение курсора на запись вызывает pop-up с полным текстом, а клик на meatball меню — дополнительные действия с отзывом.
Боковая панель показывает все детали отзыва и позволяет написать ответ от имени компании через текстовый редактор.
Раздел «Комментарии» работает с обсуждениями на страницах в блоге. Таблица отображает данные автора, статус модерации, название статьи и текст комментария. Учитывая древовидную структуру комментариев, система поддерживает теги упоминаний, что позволяет строить диалоги между читателями. Модератор может опубликовать комментарий, ответить на него либо просто отклонить.
Управление контентом сайта
Раздел «Контент» охватывает редактирование шапки сайта, блога и секции наиболее распространенных вопросов и ответов.
Подраздел «Шапка сайта» позволяет настроить логотип, контактные данные и навигационные ссылки с URL-адресами для обеих языковых версий.
Подраздел «Блог» содержит настройки первого экрана (заголовок, описание и фото) и список статей, имеющих свой статус, дату публикации и функцию предварительного просмотра. Редактор статей построен на блоках, которые состоят из полей для ввода текста, цитат и изображений. Блоки можно добавлять и переставлять с помощью функции drag-and-drop.
Подраздел «Вопросы / Ответы» управляет подборкой FAQ, сгруппированной по категориям. Форма категории позволяет добавлять неограниченное количество вопросов и ответов с помощью текстовых блоков.
Разграничение доступа
Раздел «Пользователи системы» реализует ролевую модель доступа к системе, которая обеспечивает конфиденциальность бизнес-информации. База сотрудников содержит имя, e-mail и роль, которую легко изменить через выпадающий список прямо в таблице.
Для приглашения нового пользователя достаточно нажать соответствующую кнопку и заполнить два поля всплывающего окна.
Верстка веб-страниц онлайн-сервиса
Готовые дизайн-макеты мы превратили в интерактивный интерфейс с помощью современного стека технологий. Основой для верстки стал Nuxt.js — фреймворк на базе Vue.js, созданный для разработки таких высокопроизводительных веб-приложений, как Rubikon. Он поддерживает SSR (Server Side Rendering), что обеспечивает быструю загрузку и оптимальную индексацию страниц — критически важную для SEO-продвижения сервиса.
Весь код проекта написан на TypeScript — типизированной надстройке над JavaScript, которая позволяет четко определить структуру данных, в нашем случае рейсов, бронирований и пассажиров. Это минимизирует ошибки при разработке и упрощает поддержку сервиса в будущем.
Управление состоянием приложения
Для управления глобальным состоянием онлайн-сервиса со стороны фронтенда мы применили Pinia — современный state-менеджер для Vue и Nuxt. Он сохраняет выбранные фильтры, параметры поиска, данные пассажиров и содержимое корзины даже после перезагрузки страницы. Так, пользователь может начать поиск рейса, перейти на другую страницу сайта, вернуться — и увидеть сохраненные результаты.
Интерфейсные компоненты и библиотеки
Для реализации интерактивных элементов онлайн-сервиса Rubikon мы использовали несколько специализированных библиотек.
- Выбор даты поездки реализован через Vue Datepicker. Компонент отображает календарь с возможностью выбрать дату отправления и возвращения, поддерживает локализацию и блокировку прошедших дат.
- Пагинацию обеспечивает Vue Awesome Paginate — библиотека, которая генерирует навигацию по страницам с учетом общего количества найденных результатов.
- Слайдеры и галереи изображений построены на Splide.js. Эта библиотека отвечает за просмотр фотографий в карточках рейсов и отзывы клиентов на главной странице.
- Для просмотра изображений в полноэкранном режиме подключен Fancyapps UI — инструмент, который создает модальные окна с галереей и удобной навигацией между фотографиями.
- Кастомные скроллбары реализованы через SimpleBar. Библиотека заменяет стандартные браузерные полосы прокрутки на стилизованные, которые соответствуют дизайну сервиса.
- Директива Click-outside Vue3 обеспечивает корректное закрытие выпадающих списков и попапов при клике за их пределами — стандартная UX-практика для интуитивной навигации пользователей.
Проверка данных в формах бронирования
Для валидации форм пассажирских данных используется комбинация двух библиотек. Vee-Validate отслеживает введенные значения полей, а Yup проверяет их соответствие установленным требованиям (обязательность заполнения либо формат e-mail).
Стилизация, адаптивная верстка и кроссбраузерность
Стили проекта написаны на SCSS — препроцессоре, упрощающем работу с CSS благодаря использованию переменных и вложенных блоков кода. Структурированный подход к стилизации упрощает поддержку большой кодовой базы и обеспечивает консистентность элементов на всех страницах.
Адаптив сайта Rubikon построен по принципу mobile-first: сначала стили описывают мобильную версию, а затем расширяются для планшетов и десктопов. Определять тип устройства и реагировать на изменение размера окна помогают две библиотеки:
- VueUse — предоставляет набор инструментов для работы с экраном, событиями браузера и состоянием окна.
- Vue Screen — автоматически распознает мобильные устройства, планшеты и компьютеры.
Вместе эти инструменты позволяют показывать различные варианты элементов сайта в зависимости от экрана — развернутую систему фильтров на десктопах или компактные боковые панели на смартфонах.
Для кроссбраузерной совместимости мы применили PostCSS с плагином Autoprefixer, который автоматически добавляет вендорные префиксы к CSS-свойствам. Инструменты гарантируют корректное отображение интерфейса в Chrome, Firefox, Safari и Edge без ручного дублирования кода.
Оптимизация производительности сайта
Скорость загрузки критически важна для сервиса бронирования билетов, ведь каждая секунда ожидания снижает конверсию. Поэтому мы использовали модуль nuxt-delay-hydration, который сначала показывает содержимое страницы, и только после первого взаимодействия пользователя активирует интерактивные элементы. Это обеспечивает мгновенное отображение контента и отличные показатели скорости от Google (Core Web Vitals).
Модуль nuxt-lodash предоставляет оптимизированные функции для обработки списков рейсов, фильтрации результатов и преобразования данных от API.
JS-библиотека QS отвечает за корректную работу с параметрами запроса в URL — фильтрами, поиском и пагинацией. Благодаря этому пользователь может скопировать ссылку и поделиться результатами поиска.
Использование SVG-иконок оптимизировано через Nuxt Icon. Модуль позволяет добавлять иконки из популярных наборов Iconify без загрузки лишних файлов.
Для оптимизации и адаптации изображений мы применили модуль @nuxt/image, генерирующий различные варианты фото в зависимости от экрана, что уменьшает время загрузки и потребление трафика сайта.
Качество кода
Единые стандарты оформления кода обеспечивает связка инструментов ESLint и Prettier. ESLint проверяет код на потенциальные ошибки и отклонения от стиля, а Prettier автоматически форматирует файлы при сохранении. Это гарантирует, что код от разных разработчиков выглядит одинаково и соответствует лучшим практикам Vue и TypeScript.
Разработка сайта на Laravel
Для реализации серверной части сайта Rubikon мы выбрали PHP-фреймворк Laravel — инструмент, обеспечивающий чистую архитектуру кода, удобную работу с базами данных, а еще очередями, кэшированием и внешними API. Laravel разработка позволила построить систему, которая обрабатывает запросы пользователей, синхронизирует данные с перевозчиками и управляет бронированиями в реальном времени.
Архитектура и инфраструктура сайта
Бэкенд онлайн-сервиса развернут в контейнерах Docker, что упрощает настройку среды разработки и деплой программы на продакшн-сервер.
Для сохранения данных мы использовали PostgreSQL — реляционную базу данных с расширенными возможностями индексации и полнотекстового поиска. Она эффективно работает с большими объемами записей о рейсах, маршрутах, остановках и бронированиях. Сложные выборки с фильтрацией по датам, направлениям и ценам выполняются быстро благодаря оптимизированным запросам и правильно настроенным индексам.
Интеграция с API перевозчиков
Ключевая особенность онлайн-сервиса Rubikon — агрегация данных от десятков автобусных перевозчиков в едином интерфейсе. Для этого мы интегрировали сайт с Octobus API и Klr API, которые предоставляют информацию о локациях, маршрутах, расписаниях и наличии мест у перевозчиков-партнеров.
Синхронизация с API происходит по расписанию и по запросу пользователя. Когда пассажир ищет направление и рейс на определенную дату, система отправляет запросы к подключенным перевозчикам, получает актуальные данные о рейсах и формирует единый список результатов. Разработка на Laravel позволила организовать этот процесс через очереди и кэширование, что обеспечивает быстрый отклик интерфейса даже при задержках ответа от внешних сервисов.
Помимо агрегированных данных, администраторы Rubikon могут добавлять собственные рейсы через админ-панель. Они сохраняются в локальной базе PostgreSQL и отображаются вместе с результатами от перевозчиков-партнеров. Такой гибридный подход позволяет компании предлагать как партнерские, так и собственные маршруты в едином каталоге.
Обработка платежей через LiqPay
Разработка сайта на Laravel для транспортной компании Rubikon предусматривала интеграцию с платежными системами. Для обработки онлайн-оплаты билетов мы подключили украинский сервис от ПриватБанка LiqPay. Интеграция реализована через официальный API с поддержкой callback-сообщений о статусе транзакции.
Процесс оплаты работает так: после заполнения данных пассажиров пользователь переходит на защищенную страницу LiqPay, где вводит реквизиты карты. После успешной транзакции платежный сервис отправляет подтверждение на сервер Rubikon, и система автоматически меняет статус бронирования на «Оплачено». Кабинет пользователя сразу отображает обновленный статус билета, а пассажир получает подтверждение на e-mail или в мессенджер.
Для рейсов с бронированием без предоплаты платежная интеграция также запущена в действие: клиент может оплатить забронированный билет позже через личный кабинет пользователя либо по ссылке из сообщения.
Библиотеки для расширения функционала
Для создания сайта Laravel мы использовали несколько специализированных пакетов, которые ускорили разработку и обеспечили стабильность системы:
- spatie/laravel-translatable — реализует многоязычность контента. Каждая запись в базе данных — страна, город, маршрут или статья блога — сохраняет переводы в JSON-поле. Когда администраторы редактируют украинскую и русскую версии текста в единой форме, система автоматически подтягивает нужный перевод в зависимости от выбранного языка интерфейса.
- spatie/laravel-model-states — управляет состояниями заказов. Оплата билетов проходит через определенную последовательность этапов: без предоплаты — в ожидании — не оплачено, успешно. Заказы, в свою очередь, проходят свой путь от создания до завершения: новый — в обработке — в ожидании — в пути — успешный/пропущенный, с возможностью отмены на любом этапе. Также инструмент контролирует разрешенные переходы между состояниями и предотвращает такие некорректные операции, как оплата неподтвержденного заказа либо обозначение рейса выполненным задолго до даты отправления.
- pion/laravel-chunk-upload — обеспечивает загрузку больших файлов по частям. В админ-панели сайта Rubikon эта функция используется для импорта фотографий автобусов и карт маршрутов. Порционная загрузка предотвращает превышение лимитов сервера и позволяет восстанавливать передачу после обрыва соединения.
Результат — уникальный сайт на Laravel для пассажирских перевозок
Онлайн-сервис Rubikon стал полноценным решением для бронирования билетов и обработки заказов. Мы создали продукт, который сочетает в себе сложную бизнес-логику, быстрый интерфейс и безупречный опыт — от поиска рейса среди десятков перевозчиков до успешной оплаты через интеграцию с LiqPay. В итоге компания получила управляемый поток заявок, администраторы — понятную панель для наполнения сайта, а пассажиры — персональный кабинет, в котором удобно управлять бронированиями.
Построенная на Laravel и Nuxt.js, онлайн-платформа готова к росту бизнеса. Ее модульная архитектура позволяет добавлять новых перевозчиков, способы оплаты и функции без болезненных переделок в будущем. Такой подход мы переносим и на другие направления индустрии гостеприимства — с индивидуальными подборками апартаментов, бронированием номеров и даже квест-комнат.
Комментарии