Онлайн-сервіс для бронювання квитків
Розробка на 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, онлайн-платформа готова до зростання бізнесу. Її модульна архітектура дозволяє додавати нових перевізників, способи оплати та функції без болючих перероблень у майбутньому. Такий підхід ми переносимо й на інші напрями галузі гостинності — з індивідуальними добірками апартаментів, бронюванням номерів і навіть квест-кімнат.
Комментарии