Конфигуратор стоимости электрооборудования

Мои работы

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

Стэк проекта

Backend написан на php, БД в проекте используется MySQL, приложение развернуто на сервере с использованием Nginx.

Frontend реализован на Bootstrap 5 + jQuery и чистый JS для различных манипуляций с таблицами(поиск, drag-and-drop).

Описание функционала

Авторизация: Вход в систему по логину и паролю. Курс евро: Регулярное обновление курса евро через API. Конфигуратор: Интуитивный интерфейс для выбора компонентов и определения количества, использующий drag-and-drop для быстрого формирования конфигурации щита. Расчет стоимости происходит в режиме реального времени. Формирование заказа: После выбора компонентов, система перенаправляет пользователя на форму создания заказа, где необходимо указать данные заказчика и наименование заказа. Управление заказами: Просмотр, редактирование и удаление заказов, с возможностью быстрого поиска. Каталог деталей: Таблица компонентов с возможностью добавления, редактирования и поиска деталей с использованием JavaScript. Поддержка редактирования без перезагрузки страницы (AJAX). Реестр заказчиков: Добавление и изменение данных о заказчиках. Используется модальное окно для добавления новых заказчиков. Валидация данных: Встроенная валидация данных при добавлении новых элементов (заказчиков, деталей) с использованием возможностей Bootstrap 5, ну и конечно же валидация на стороне сервера. Мобильная адаптация: Система адаптирована для работы на смартфонах и планшетах.

Главная страница

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

Главный интерфейс программы


Конфигуратор

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

Таблица drag-n-drop


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

Заказы 

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

Каталог деталей

В этом разделе выводится таблица с компонентами, есть возможность добавить деталь, быстрый поиск с использованием JS и редактирование без обновления страницы с помощью jQuery TableEdit.

Заказчики

Раздел, в котором реализовано добавление и изменение данных заказчика. 

Добавление данных

Для удобного добавления данных вызывается модальное окно, так же происходит валидация данных (реализовано на стандартном функционале Bootstap 5)

Заключение

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

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

49 2024.12.13 21:43 php MySQL JS Bootstrap 5