Мой авто. Модуль объявлений для союза автолюбителей России на JS и PHP

Портал Союза автовладельцев России запланировал расширение возможностей веб-сайта и требовалось доработать функциональную часть.

Дизайн был предоставлен самим порталом и нам требовалось реализовать всю механику: интерактивное взаимодействие пользователя с интерфейсом (frontend) и обработка действий пользователя на стороне сервера (backend).

Будущий функционал:

  • Раздел с объявлениями будет состоять из двух частей — страница для подбора объявлений по параметрам (год выпуска, трансмиссия, цвет и т.д.) и выводом результата поиска, а также, страницы для создания и размещения объявления;
  • пользователь должен выбирать условия отбора объявлений без перезагрузки страницы;
  • процесс публикации и редактирования нового объявления должен быть максимально простым и понятным;
  • у каждого зарегистрированного на портале пользователя должна появиться возможность опубликовать собственное объявление.

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

Возможности 

Одни пользователи портала публикуют объявления о продаже автомобиля — будем называть их Продавцы, а другие хотят купить автомобиль и ищут выгодные предложения — назовём их Покупатели.

Инструменты покупателя

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

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

Интерфейс посетителя для выбора фильтрации объявлений
Рис. 1. Набор параметров, по которым Покупатель может подобрать объявление о продаже автомобиля

Инструменты Продавца

Продавцу важно выгодно продать свой автомобиль.

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

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

Интерфейс для редактирования и публикации объявления
Рис. 2. Продавец редактирует объявление в том же виде, в каком его увидит Покупатель.
Инструменты быстрого редактирования параметров объявления
Рис. 3. Рядом с каждой опцией автомобиля есть инструмент для редактирования.
Специальные элементы для редактирования дополнительных параметров объявлений
Рис. 4. Если автомобиль оборудован АБС или другой опцией, достаточно просто указать это, выбрав «Да»

Программная часть

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

Для написания программного кода использовался язык PHP.

 

Результат.

Для удобства управления функционалом блока объявлений были использованы:

  • интерактивное редактирование объявлений в таком виде, в каком видит предложение Покупатель;
  • привязка объявлений к личному кабинету каждого зарегистрированного на портале Союза автовладельцев России пользователя, каждый мог быстро и просто опубликовать сообщение о продаже своего авто;
  • упрощенное визуальное оформление  и стилистика портала;
  • всероссийский справочник КЛАДР для отображения списка городов.

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