МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ

ВЫСШЕГО ОБРАЗОВАНИЯ
«БРЯНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ИМЕНИ АКАДЕМИКА И.Г.
ПЕТРОВСКОГО»

Институт естественно-научный
Факультет физико-математический
Кафедра информатики и прикладной математики

ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА

Разработка программного модуля «Универсальный калькулятор

расчета строительных материалов» для системы 1С-Битрикс

Выполнил:
Слепцов Даниил Викторович
студент 4 курса, 1 группы
01.03.02 ПМИ
направление:
Прикладная математика и информатика
профиль: Системное программирование и
компьютерные технологии
очной формы обучения
________________________________
(Подпись)
Научный руководитель:
Иванова Наталья Александровна
к.т.н., доцент кафедры ИПМ
________________________________
(Подпись)

Брянск 2021
 Содержание

Введение.......................................................................................................................................................3

§1 Анализ требований к современным интернет – магазинам по продаже напольных

покрытий.....................................................................................................................................................6

§2 Анализ макетов модулей пересчета в карточках товара на примере реальных интернет -

магазинов..................................................................................................................................................16

§3 Разработка графического макета модуля пересчета для стандартных мониторов

компьютера...............................................................................................................................................20

§4 Разработка графического макета модуля пересчета для мобильных устройств...................28

 Введение

В современном мире Интернет-магазины, доступ к которым возможен из

любой точки мира с помощью устройства с выходом в сеть Интернет, играют
огромную роль в жизни человека. Одна из самых популярных систем для
больших Интернет-магазинов является платформа «1С-Битрикс: Управление
сайтом». Главная особенность платформы 1С-Битрикс – это большое
количество готовых решений для работы Интернет-магазина, а также
возможность разработки собственных модулей, которые позволяют
расширять функционал сайта.
Не смотря на большое количество и разнообразие готовых модулей для
Интернет-магазинов на платформе 1С-Битрикс, не всегда есть возможность
выбрать подходящее решение и гибко его использовать, а иногда приходится
устанавливать несколько модулей для решения одной задачи, что
сказывается на удобстве их использования и работоспособности сайта. Так,
например, на данный нет готового решения, которое бы подошло для расчета
строительных материалов при покупке в Интернет-магазине. Этим
обусловлен выбор темы ВКР.
Целью ВКР является разработка модуля пересчета напольных покрытий
для интернет - магазинов, который поможет пользователям интернет -
магазина рассчитать необходимое количество напольных покрытий для
помещения.
Объектом исследования является платформа «1С-Битрикс: Управление
сайтом», как самая популярная CMS для современного интернет - магазина.
Предметом исследования является программная часть модуля
пересчета напольных покрытий для интернет - магазинов.
Задачи, решаемые в ходе работы
1) изучить историю создания платформы «1С-Битрикс: Управление
сайтом» и ее основных характеристик;
2) изучить принципы веб-программирования на платформе «1С-Битрикс:
Управление сайтом»;
3) проанализировать готовые решения для строительных Интернет-
магазинов;
4) составить техническое задание для разработки калькулятора расчета
строительных материалов;
5) рассмотреть этапы разработки калькулятора расчета строительных
материалов;
6) произвести тестирование.
Методами исследования являются:
– анализ (разложение исследуемого объекта на составляющие и
изучение каждой из них);
– синтез (самостоятельное исследование, которое объединяет
характеристики объекта по различным критериям);
– классификация (разбивка процессов и предметов на группы по
общим признакам);
– эксперимент (исследование в особых условиях, которые создаются
для изучения определенных характеристик явления или предмета);
– сравнение (выявление подобий и отличий между объектом изучения
и уже известными системами, предметами или явлениями).
Выпускная квалификационная работа состоит из введения, двух глав,
выводов по ним, заключения и списка используемых источников. Первая
глава содержит информацию о платформе «1С-Битрикс: Управление
сайтом». В первом пункте рассматривается основной функционал платформы
и история ее создания. Второй пункт посвящен принципам веб-
программирования для 1С-Битрикс. Сравнительный анализ и обзор готовых
модулей для Интернет-магазинов по продаже строительных материалов
содержится в третьем пункте главы.
Вторая глава посвящена разработке модуля «Универсальный
калькулятор расчета строительных материалов». В первом пункте содержатся
техническое задание и требования к разработке модуля. Второй пункт главы
посвящен этапам разработки. Тестирование и отладка полученного модуля
описаны в третьем пункте.
В заключении анализируются полученные результаты и оценка
выполнения поставленных задач
Список используемых источников состоит из 10 учебных пособий и 5
Интернет-ресурсов.
 Глава 1. «1С-Битрикс: Управление сайтом» как платформа для
современных Интернет-магазинов.

1.1 История создания и основной функционал платформы

Эффективное функционирование и своевременное развитие Интернет-

магазина обеспечивает целый ряд различных параметров, в том числе и
качественная оптимизация сайта. Это удобный и запоминающийся веб-
дизайн, четкая структура, правильно подобранное доменное имя и, конечно
же, система администрирования сайтами. Именно она определяет круг
возможностей владельца сайта: размещение каталогов продукции, баннерой
системы, обновление модулей и т.д. Сегодня конкуренция на данном рынке
очень высока. Каждая компания готова предложить свою собственную CMS.
Некоторые из них созданы буквально вчера, а некоторые успели преодолеть
порог в десять лет успешного существования. Как, например, 1С-Битрикс.
«1С-Битрикс: Управление сайтом» — система управления контентом
веб-проекта (CMS) от российской компании «1С-Битрикс». Компания
«Битрикс» основана в 1998 году Сергеем Рыжиковым вместе совместно с
группой единомышленников. В 2003 году компания выпустила коммерчески
успешную платформу «Битрикс: Управление сайтом 3.0». «1С-Битрикс»
написан на PHP с использованием MVC-архитектуры. За несколько месяцев
компания привлекла около 300 партнёров в партнёрскую сеть.
По данным digital-журнала «CMS Magazine», который проводит
исследования в области CMS, используемых в России, CMS «1С-Битрикс:
Управление сайтом» заняла первое место по использованию за 2020 год.[]
На данный момент платформа «1С-Битрикс: Управление сайтом»
имеет 5 лицензий:
– «Старт» стоимостью 5 400 рублей;
– «Стандарт» стоимостью 15 900 рублей;
– «Малый бизнес» стоимостью 35 900 рублей;
– «Бизнес» стоимостью 72 900 рублей;
 – «Энтерпрайз» стоимостью от 399 000 рублей.
Эти тарифы отличаются функциональными возможностями и уровнем
техподдержки. Для Интернет-магазина подойдет лицензии «Малый бизнес» и
выше. Остальные редакции не поддерживают модули и функции
необходимые для Интернет-магазина.
Начиная с лицензии «Малый бизнес» в Битрикс включен весь
необходимый функционал, который важен для любого интернет-магазина.
– удобное управление каталогом товаров, ценами, продажами;
– разные единицы измерения (килограммы, литры, метры и т.д.);
– поддержка торговых предложений;
– несколько типов цен (розничные и оптовые);
– функционал наборов и комплектов товаров для роста среднего чека;
– встроенные платежные системы;
– поддержка служб доставки;
– складской учет (учет поставщиков, складов и документов, учет
прихода товара с штрихкодами, возврат, резервирование и автоматическое
снятие резерва, списание бракованного товара и многое другое);
– возможность формировать отчёты о прибыльности конкретного товара
или покупателя.
В Bitrix легко управлять ценами и скидками. К примеру, можно:
– типизировать цены по группам пользователей;
– выгружать типы цен из 1С;
– генерировать скидки для товаров, торговых марок, пользователей;
– давать скидки за действия (при покупке определенного количества
товаров, заказа на заданную сумму и т.д.).
Безусловно, любую из вышеперечисленных функциональных
возможностей, можно реализовать на любой CMS, но важно при прочих
равных соизмерять трудозатраты.
Данная CMS отлично подходит для Интернет-магазина напольных
материалов, так как имеет большой и гибкий функционал по работе с
товарами, а также широко используется разработчиками веб – проектов для
создания и улучшения модулей для Интернет-магазинов.
Для торговли с помощью Интернет-магазина платформа «1С-Битрикс:
Управление сайтом» имеет следующий функционал:
1) Корзина товаров и услуг. Покупатель может не только добавить в
корзину любые товары и услуги, но и в любое время изменить свой выбор,
находясь в корзине. Например, непосредственно перед заказом клиент может
изменить любое свойство торгового предложения. Выбрать другой цвет,
размер товара и т.д. Итоговая сумма в корзине пересчитывается на глазах у
клиента, стоит ему изменить вариант торгового предложения, количество
товара или применить купон.
2) Личный кабинет. В своем персональном разделе покупатель
отслеживает все свои заказы и полностью управляет своим внутренним
счетом. В своем кабинете клиент изменяет личную информацию и подписку
на новости магазина. Для доступа в персональный раздел достаточно
авторизоваться на сайте интернет-магазина.
3) Оформление заказа. Клиентам Интернет-магазина не придется
заполнять избыточную информацию при оформлении заказа. В зависимости
от выбранного способа доставки и региона, с которым работает магазин,
система запрашивает только необходимые в данный момент данные. В
любой момент существует возможность распечатать для клиента документы
по заказу. Также менеджер магазина может добавлять новые и править
существующие заказы прямо из административной части.
4) Адаптивные формы. Владелец магазина сам решает, какая
информация ему нужна от клиента. Система подстраивается под эту схему -
клиенту при заполнении форм предлагаются только нужные в данный
момент поля.
5) Гибкая работа со скидками. В карточке управления заказами можно
увидеть полную информацию о скидках. В отдельном блоке выводятся все
скидки, которые применились к заказу. Менеджер видит, что это за скидка:
откуда она появилась, как применилась, как называется, какой процент или
сумму содержит. Может перейти на страницу этой скидки и посмотреть ее
подробности.
6) Единицы измерения. С помощью этой возможности можно создать
любые интернет-магазины: продуктов питания, лекарственных средств,
стройматериалов и т.д. Возможно продажа любые товаров - в любых
единицах измерения. Для каждого своего интернет-магазина вы можете
задать индивидуальные настройки единиц измерения. Это возможно
благодаря концепции единиц измерения, внедренной во все компоненты
интернет-магазина и торгового каталога.
7) Статистика и отчеты. Для получения статистики по заказам и
товарам служат отчеты и графики. Необходимые поля для отчетов можно
легко настроить. Сами отчеты можно выгрузить в таблицу MS Excel для
дальнейшего использования. Доступна следующая статистика: отчет по
заказам, отчет по продуктам, графики динамики заказов, графики по деньгам.

Сфера услуг в настоящее время является одной из важных отраслей

интернет пользователя призванной удовлетворять индивидуальные запросы и
потребности группы людей в различных видах услуг.
Интернет - магазин как разновидность веб-сервисов представляет собой
совокупность сайтов, цель которых – продажа разнообразных продуктов и
платных услуг по индивидуальным заказам пользователя [9].
Таким образом, интернет - магазин является важнейшим инструментом
продажи в современном мире, и значение таких ресурсов в интернете
неуклонно возрастает и набирает популярность.
 Для компании уже не достаточно просто создать и поместить в Интернет
статический сайт, может быть даже, с современным дизайном, но с
устаревшей информацией. Такой сайт не может привлечь поток целевых
посетителей. В связи с этим, компании, стремящейся занять лидирующие
позиции в бизнесе, необходимо перевести свой сайт на Систему Управления
Контентом. Система управления содержимым (Content Management System)
— информационная система или компьютерная программа, используемая для
обеспечения и организации совместного процесса создания, редактирования
и управления содержимым, иначе — контентом.[] Система управления
позволит оперативно и гибко наполнить и обновлять сайт актуальным
содержанием, проводить поисковую оптимизацию, существенно снижать
затраты на поддержку сайта. Если при этом компания занимается торговлей,
то подключение к сайту Интернет-магазина предоставит ей дополнительное
конкурентное преимущество. Сайт перестанет быть затратным, он станет
эффективным инструментом продаж, приносящим доход.
Торговля в Интернете имеет свои преимущества, основные из которых:
– стоимость организации торговли в Интернете меньше, чем в офлайне
при прочих равных условиях;
– интернет-магазин работает 24 часа в сутки, 7 дней в неделю;
– при правильной организации интернет-магазина затраты на
привлечение покупателя существенно снижаются;
– стоимость рекламной кампании в Интернете значительно ниже
офлайновой;
– охват аудитории в географическом масштабе не сопоставим с обычной
торговой точкой.
Рассмотрим общие принципы торговли через Интернет-магазин, а также
взаимоотношения, возникающие между торговой компанией и покупателем.
Чтобы понять, что такое Интернет-магазин, необходимо рассмотреть
основные этапы сделки (коммуникации) покупатель - продавец в Интернете.
Обычно принято выделять пять основных этапов:
 – привлечение и информирование;
– формирование и прием заказа;
– обработка заказа;
– оплата;
– доставка.

Надо иметь в виду, что каждый из этих этапов может проходить как в
Интернете, так и в офлайновом режиме.
Привлечение и информирование потенциального покупателя
(посетителя сайта) может происходить как непосредственно в сети Интернет,
так и в офлайне, при помощи традиционных маркетинговых приемов, для
этих целей достаточно иметь сайт-витрину, на котором представлена
максимально полная информация о товарах и услугах.
Интернет-магазин отличается от сайта-витрины проведением второго
этапа сделки, то есть он позволяет сформировать заказ и отправить его в
торговую компанию непосредственно на сайте, причем так, чтобы
минимизировать вероятность ошибок покупателя в выборе товара и ошибок
менеджеров торговой компании в понимании сути принятого заказа. В
зависимости от особенностей товара прием заказа осуществляется при
помощи простой формы или при помощи «корзины».
Под обработкой заказа здесь понимается взаимодействие покупателя и
компании, которое бывает необходимо для согласования дополнительных
параметров сделки. К ним может относиться: место, время, уточненный
перечень товаров и т.д. Кроме того, для Интернет-торговли очень важны
бизнес процессы, проходящие внутри компании (резервирование товара,
тестирование, упаковка, отгрузка, контроль оплаты и т.д.), но мы их сейчас
рассматривать не будем, так как эти процессы обычно проходят без
применения Интернета, и они выходят за рамки данной статьи. Этот этап
взаимодействия покупателя и компании даже в очень хорошо
организованных магазинах проходит в комбинированном режиме, то есть
часть параметров уточняются при помощи интерактивных средств сайта, а
другая часть при помощи электронной почты, телефона, факса и даже
личного контакта.
Для совершения оплаты в сети Интернет, существует множество
электронных платежных систем (Webmoney, Яндекс-деньги, КиберПлат и
т.д.). Кроме того, используются традиционные механизмы оплаты: наличные,
банковский перевод и кредитные карточки. Банковский перевод является
абсолютным лидером в схеме B2B.
Доставка товара, приобретенного в Интернет-магазине, чаще всего
происходит офлайн. Онлайновая доставка покупок применяется только для
продажи файлов, в которых могут находиться: данные, мультимедиа
сообщения и т.д.
Систему Интернет-торговли, условно, можно разделить на три типа:
– сайт-витрина;
– снтернет-магазин;
– торговая Интернет Система (ТИС).
С точки зрения посетителя сайта все три решения могут выглядеть
одинаково. Связано это с тем, что посетитель имеет дело с внешним
оформлением сайта: каталогом товаров, системой навигации и поиска,
системой оформления заказов и т.д. Предпочтения покупателя зависят, в
большей степени, от удобства использования каталога и системы навигации.
Различия становятся заметными, как только покупатель начинает
оформлять заказ. Он убеждается в преимуществах Интернет-магазина.
Покупателю сразу выписывается счет с учетом налогов, скидки и стоимости
доставки, а так же предоставляется возможность оплатить покупку с
помощью систем онлайн оплаты. С точки зрения продавца различия
значительны и очевидны.
Сайт-витрина обходится торговым компаниям сравнительно дешево и
способен обеспечить проведение только первого этапа сделки. В
большинстве случаев, представляет из себя низко-технологичное и не гибкое
решение с точки зрения управления и организации маркетинговых акций и
процесса обновления информации. Компании, использующие витрину, в
качестве инструмента для прямых продаж и маркетинга не достаточно
заботятся о своем имидже. Более того, торговля в этом варианте оказывается
для компании менее эффективным и иногда даже не рентабельным делом.
Интернет-магазин обеспечивает в режиме онлайн проведение первых
трех этапов сделки. Кроме того, он может быть интегрирован с платежными
системами и позволяет рассчитать стоимость доставки товара. Магазин
существенно более выгоден торговой компании (особенно для малого и
среднего бизнеса), которая хочет управлять всем процессом Интернет-
торговли, различными маркетинговыми акциями и т.д. На создание
Интернет-магазина требуется больше затрат, чем на витрину, но вложения
будут более эффективными. Использование готовых решений
специализированной компании значительно ускоряет процесс создания
Интернет-магазина, позволяет снизить затраты на его поддержание и
модернизацию.
Торговая Интернет Система (ТИС) обеспечивает проведение всех
необходимых этапов сделки при помощи Интернета и интегрирована с
внутренней корпоративной системой управления движением товара.
Благодаря этому она позволяет в реальном времени отслеживать остатки
товара, формировать отчеты и запросы, исходя из текущего состояния
склада. Обычно такими системами пользуются компании, обладающие
развитой IT-структурой.
Процесс создания Интернет-магазина начинается с определения
предъявляемых к нему требований. Ни одно серьезное начинание не должно
обходиться без поддержки и совета экспертов из специализированной
компании. Консультирование обычно начинается с вопросов организации
бизнес-процессов Интернет-магазина, разработки технического задания с
составлением эффективной схемы и проработки организационных вопросов
проекта.
 Электронный бизнес подчиняется тем же законам, что и офлайновая
торговля. Очень важно правильно организовать процесс создания интернет-
магазина. Компания должна активно участвовать в создании Интернет-
проекта. Рекомендуется проводить следующие организационные
мероприятия:
– определить компанию разработчик;
– описать функции Интернет-магазина;
– выбрать варианты внешнего виду сайта;
– спланировать структуру и «дерево» разделов сайта;
– прописать этапы оформления заказа;
– прописать этапы движения товара до покупателя, после оформления
заказа;
– составить маркетинговую информацию для размещения в разделах
сайта;
– определить алгоритмы расчета стоимости доставки;
– выбрать приемлемые способы оплаты и платежные системы.
Одним из основных вопросов Интернет-торговли, является вопрос
привлечения покупателей (в данном случае посетителей интернет -
магазина). Этого можно достичь несколькими способами:
1) Реклама в сети Интернет. Она включает в себя различного вида
баннеры, контекстную рекламу, продвижение сайта, включение в
каталоги, рейтинги и т.д.
2) Реклама в офлайн. Это различные виды размещения рекламы в
СМИ, наружная реклама, BTL (непрямая реклама).
3) Поисковое продвижение. Это не реклама, а привлечение на сайт
целевых посетителей, которые ищут данный товар (услугу) или
Интернет-магазин.
В теме данной выпускной квалификационной работы будем
рассматривать не методы и способы различной рекламы, а ее результат.
Предположим, что реклама эффективна и пользователь посетил
рекламируемый интернет – магазин с нужным для него товаром. Для того,
чтобы он совершил покупку, необходимо, чтобы интерфейс интернет –
магазина был интуитивно понятен пользователю и его функционал был
максимально прост и полезен.
Особое внимание уделяется графическому интерфейсу интернет -
магазина. Графический пользовательский интерфейс (GUI) веб - сайта —
система средств для взаимодействия пользователя с сайтом, основанная на
представлении всех доступных пользователю системных объектов и функций
в виде графических компонентов экрана (окон, значков, меню, кнопок,
списков и т. п.) [3]. Главным преимуществом GUI является то, что этот
интерфейс, доступен для людей всех уровней знаний, от абсолютного
новичка до продвинутого разработчика или других технологов. Он позволяет
простым пользователям интернет - магазина открывать меню, перемещать
файлы, запускать программы или искать на сайте, не выполняя при этом
дополнительных подключений или действий.
Основные достоинства графического пользовательского интерфейса:
– гибкость (возможность учета возникающих в процессе разработки
требований);
– удобство эскизного и окончательного проектирования экранных
изображений;
– удобство предварительного просмотра поведения экранных
изображений;
– мобильность (простота переноса на другие платформы).
– гибкость (простота последующих расширений);
– удобство сопровождения (внесения небольших последующих
изменений);
– многократное использование элементов экранных изображений (схем);
– мобильность (удобство адаптации к новым стандартам).
 Какие функции выполняет графический пользовательский интерфейс
для интернет – магазина:
1) Привлечение посетителей.
2) Ускорение превращения посетителя в клиента.
3) Адаптация под различные устройства.
4) Отображение информации в понятной для пользователя форме.
5) Повышение уровня доверия.
Интерфейс и функционал сайта решает проблему взаимодействия
пользователя с веб – ресурсом, а также делает это взаимодействие
максимально комфортным. Графический интерфейс сайта предназначен для
возможности ознакомления пользователя с интернет – магазином, понимания
его функционала и упрощения этапов оформления заказа для увеличения
продаж интернет – магазина. Также в свою очередь графический интерфейс
должен отображать необходимый функционал интернет – магазина для того,
чтобы пользователь понимал, какие возможности присутствуют на той или
иной странице сайта.
Для примера рассмотрим два варианта карточек товара:
1) Карточка товара с перегруженным интерфейсом и без интуитивно –
понятного функционала (рисунок 1).
2) Карточка товара с интуитивно понятным интерфейсом и функциями
сайта (рисунки 2, 3).
 Рис. 1 – Карточка товара с перегруженным интерфейсом и без
интуитивно – понятного функционала

Рис. 2 – Карточка товара с интуитивно понятным интерфейсом и

функциями сайта
 Рис. 3 – Карточка товара с интуитивно понятным интерфейсом

Таким образом, задача разработчика модулей для интернет - магазинов

состоит в том, чтобы донести нужную информацию для пользователя
интернет – магазина, реализовать необходимый функционал,
визуализировать разработанные функциональные возможности в виде
понятных элементов, не перезагружая интерфейс сайта.
Одним из интернет – магазинов является интернет – магазин по
продаже напольных покрытий.
Рассмотрим распространенные проблемы, связанные с продажей
напольных покрытий с помощью интернет-магазина:
 – у каждого товара показывается цена за квадратный метр, а продажа
осуществляется только упаковками;
– квадратура упаковки для каждого товара разная;
– визуализация цены за квадратный метр, цены за упаковку и их
соотношение в карточке товара интернет-магазина;
– автоматический пересчет нужного количества упаковок напольного
покрытия исходя из площади помещения.
Модуль пересчета товара, продаваемого упаковками, должен быть
интуитивно понятен для посетителя интернет – магазина, чтобы упростить
расчет требуемого количества товара и увеличить вероятность покупки
пользователя в конкретном интернет – магазине.
При проектировании модуля расчета напольных покрытий будем
придерживаться следующих правил и инструкций:
– Согласованность: взаимодействие с карточкой товара должно
происходить всегда похожим образом;
– Понятная визуализация требуемого функционала: необходимо с
помощью графического интерфейса предусмотреть поля, формы, кнопки для
выполнения дальнейших функций в карточке товара;
– Разработка функционала: необходимо написать функции модуля таким
образом, чтобы при выполнении кода модуля, страница интернет – магазина
быстро загружалась
– Неперегруженный интерфейс: при посещении карточки товара каждый
пользователь должен понимать функционал, не совершая дополнительных
действий.
Проектирование модуля расчета напольных покрытий даст возможность
сэкономить время пользователя, поможет структурировать всю дальнейшую
работу и уменьшит вероятность дополнительных денежных вложений, а
также поможет привлечь новых клиентов для интернет - магазина.
 §2 Анализ макетов модулей пересчета в карточках товара на примере
реальных интернет - магазинов

Для наглядности рассмотрим несколько самых популярных интернет –

магазинов напольных покрытий в Брянске.

1. Интернет – магазин «СтройлоН» (веб-адрес: https://td32.ru/)

Данный интернет магазин продает ламинат и линолеум. Для примера

возьмем карточку ламината.

Рис. 1 – Карточка ламината в интернет – магазине «СтройлоН»

В карточке товара указана только цена за квадратный метр. На странице

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

В карточке товара отсутствуют какие-либо поля для пересчета

необходимого количества материала. После нажатия на кнопку «Купить»
появляется окно, в котором отображена уже корзина пользователя и только в
ней можно редактировать нужное для покупателя количество напольного
покрытия. Данный подход является не оптимальным, потому что
графический интерфейс карточки товара нефункционален и непонятен для
посетителя этого интернет – магазина:
– нельзя рассчитать стоимость нужного напольного покрытия;
– отсутствует расчет нужного количества упаковок и итоговой
стоимости;
– итоговая стоимость заказа после оформления будет изменена, так как
данный продукт продается упаковками.

Рис. 2 – Окно с корзиной в интернет – магазине «СтройлоН»

2. Интернет – магазин «Мегастрой» (веб-адрес: https://megastroy32.ru/)

Данный интернет магазин продает ламинат, линолеум, ковролин и

аксессуары для этих напольных покрытий. Для примера возьмем карточку
ламината.
 Рис. 3 – Карточка ламината в интернет – магазине «Мегастрой»

В карточке товара пользователю предлагается выбрать фасовку для

этого напольного покрытия: «1 кв.м» или «1 упаковка=1,253м2».
При выборе значения «1 кв.м» появляется надпись «Нет в наличии», поле
для ввода необходимого количества становится неактивным и все
дальнейшие действия с этим товаром заблокированы.
При выборе значения «1 упаковка=1,253м2» появляется цена за
упаковку, становится активное поле для ввода нужного количества и
активируется кнопка «В корзину». После ввода нужного количества
упаковок цена не изменяется и остается прежней.
Графический интерфейс карточки товара в этом интернет магазине также
является неудобным, потому что:
– отсутствует возможность автоматического расчета стоимости материала
исходя из нужной квадратуры пользователя;
– пользователю самому нужно рассчитать стоимость заказа.

Анализ этих двух магазинов показал необходимость создания модуля

для интернет – магазинов, продающих напольные покрытия, и определил
требуемые функции и поля.
 1) Поля для ввода площади помещения;
2) Варианты укладки напольного покрытия;
3) Расчет нужного количества упаковок с учетом их
кратности;
4) Моментальное отображение количества упаковок и общей
стоимости;
5) Кнопка «В корзину».
Данный модуль реализует графический интерфейс и функционал
карточки товара, предназначенный для продажи напольных покрытий, а
также облегчает их расчет. Различные поля позволяют производить ввод,
редактирование площади помещения, для которого будут рассчитываться
напольные покрытия, просмотр цены и количества необходимого материала
для данного помещения.
Данный модуль может применяться пользователем, который точно не
знает, сколько определенного напольного покрытия ему нужно. Он легок в
обращении, позволяет моментально посмотреть итоговую стоимость и
количество материала, экономит рабочее время за счет автоматизации
некоторых процессов таких, как пересчет квадратных метров в количество
упаковок. Поэтому предлагаемый модуль должен существенно упростить
покупку и выбор напольных покрытий.
 §3 Разработка графического макета модуля пересчета для стандартных
мониторов компьютера

В нашем случае будем использовать «1С-Битрикс: Управление сайтом»

в качестве CMS для интернет – магазина напольных материалов. По данным
digital-журнала «CMS Magazine», который проводит исследования в области
CMS, используемых в России, CMS «1С-Битрикс: Управление сайтом»
заняла первое место по использованию за 2020 год.[]
В Битрикс включен весь необходимый функционал, который важен для
любого интернет-магазина.
– удобное управление каталогом товаров, ценами, продажами;
– разные единицы измерения (килограммы, литры, метры и т.д.);
– поддержка торговых предложений;
– несколько типов цен (розничные и оптовые);
– функционал наборов и комплектов товаров для роста среднего чека;
– встроенные платежные системы;
– поддержка служб доставки;
– складской учет (учет поставщиков, складов и документов, учет
прихода товара с штрихкодами, возврат, резервирование и автоматическое
снятие резерва, списание бракованного товара и многое другое);
– возможность формировать отчёты о прибыльности конкретного товара
или покупателя.
В Bitrix легко управлять ценами и скидками. К примеру, можно:
– типизировать цены по группам пользователей;
– выгружать типы цен из 1С;
– генерировать скидки для товаров, торговых марок, пользователей;
– давать скидки за действия (при покупке определенного количества
товаров, заказа на заданную сумму и т.д.).
 Безусловно, любую из вышеперечисленных функциональностей, можно
реализовать на любой CMS, но важно при прочих равных соизмерять
трудозатраты.
Данная CMS отлично подходит для интернет – магазина напольных
материалов, так как имеет большой и гибкий функционал по работе с
товарами, а также широко используется разработчиками веб – проектов для
создания и улучшения модулей для интернет – магазинов.

В нашем случае нас будет интересовать этапы привлечения и

информирования клиентов, формирования и приема заказа. Модуль
пересчета напольных покрытий в карточке товара интернет – магазина будет
способствовать информированию посетителей о том, какое количество
товара им необходимо приобрести и какова будет итоговая сумма. Такой
функционал позволит увеличить количество привлеченных клиентов, потому
что исключит этап пересчета требуемого количества товара вручную.
 Глава 2

Для разработки интерфейса модуля пересчета напольных покрытий

будем использовать программу AdobePhotoshop. Она позволяет создавать
макет интерфейса, добавлять и редактировать поля, а также выгружать макет
в любом удобном формате.
В первую очередь разработаем макет для стандартных мониторов
компьютеров. Модуль пересчета будет горизонтальный. Так его можно
вставлять в любую часть карточки товара интернет – магазина и таким
образомон не будет занимать много места. Для разработки будем
использовать размер 900х400 пикселей (Рисунок 4). В дальнейшем этот
размер можно будет масштабировать в зависимости от дизайна интернет –
магазина.

Рис. 4 – Исходный блок размером 900х400 пикселей

 Добавим поля для ввода площади помещения. Здесь предусмотрены два
варианта:
1) Ввод площади помещения сразу в квадратных метрах;
2) Два поля: длина и ширина помещения.

Эти три поля позволяют сделать модуль удобнее для пользователя,

потому что не каждый посетитель интернет - магазина знает конечную
площадь нужного помещения или помещение нестандартной формы и
известна только конечная его площадь(Рисунок 5).

Рис. 5 – Введены три поля ввода площади

Для этих полей добавим подписи, чтобы пользователь понимал, что они
означают, а также единицы измерения, в которых модуль производит расчет
(Рисунок 6).
 Рис. 6 – Добавлены подписи к полям ввода и единицы измерения

Следующим шагом добавим поля для вывода общей суммы и итогового

количества упаковок. Их расположим внизу макета (Рисунок 7).

Рис. 7 – Поля вывода общей суммы и количества упаковок

 Для многих напольных покрытий, например, ламинат или паркетная
доска существует два наиболее популярных способа укладки:
1) Укладка по прямой;
2) Укладка по диагонали.
Эти два способа отличаются друг от друга тем, что для укладки по
диагонали требуется большее количество материала. Эта разница составляет
примерно 10% от укладки по прямой. Поэтому следующим шагом добавим
возможность выбрать пользователю, каким способом укладки он будет
пользоваться. Эту возможность реализуем переключателями, только один из
которых может быть выбран (Рисунок 8).

Рис. 8 – Добавлены переключатели для вариантов укладки

При укладке напольных покрытий бывают случаи, когда купленного

материала не хватает. Как правило, не хватает одной упаковки для
завершения укладки в помещении. Этараспространеннаяситуация при
ремонте создает сложность покупателю в том, что докупать одну упаковку
того же напольного покрытия выходит дороже, а также не каждый магазин
может продать только одну упаковку нужного напольного покрытия.
Чтобы избежать данную ситуацию, введем в модуле пункт для выбора
покупки материала с учетом запаса (Рисунок 9).

Рис. 9 – Добавленопункт выбора учета запаса материала

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

заголовка и описания модуля, чтобы посетитель, заходя в карточку товара,
понимал, что обозначают данные поля и для чего они нужны. Тексты для
заголовка и описания могут меняться в зависимости от карточки напольного
покрытия, в котором они отображаются (Рисунок 10).
 Рис. 10 – Подписи для заголовка и описания модуля

После того, как пользователь выбрал нужное количество материала,

варианты укладки и учет запаса, для удобства добавим кнопку добавления в
корзину. Так посетитель интернет – магазина может сразу добавить нужное
количество материала в корзину и продолжить посещать сайт без
дополнительных действий (Рисунок 11).

Рис. 11 – Добавлена кнопка «В корзину»

 §4 Разработка графического макета модуля пересчета для мобильных
устройств

Для реализации макета модуля расчета напольных покрытий для

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

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

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

В рамках курсовой работы разработан макет модуля пересчета

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

Разработанный графический интерфейс выполняет 3 основные

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

1. Алиев В. С. Технологии и системы финансового менеджмента:

учебное пособие - М.: «ФОРУМ»: ИНФРА-М, 2017. - С. 128.
2. Бикнер К. Экономичный web-дизайн / К. Бикнер; пер. с англ. Д.
С. Ремизова – М.: НТ Пресс, 2015. – С. 248.
3. Брезгунова И. В. Основы веб-проектирования: учеб-метод.
пособие – Минск: РИВШ, 2018. – С. 125.
4. Грабауров В. А. Информационные технологии для менеджеров –
М.: Финансы и статистика, 2015. – С. 368.
5. Евсеев Д. А. Web-дизайн в примерах и задачах: учеб. пособие –
М.: Кнорус, 2016. – С. 263.
6. Измайлов В. Г. Проектирование web-приложений и программных
систем в Open Source: учеб. пособие / В. Г. Измайлов, Г. А. Лисьев, М. Ю.
Озерова, А. Л. Трейбач; под ред. проф. Г. А. Лисьева - М.: ФЛИНТА, 2017. -
С. 98.
7. Кияев В. И. Информационные технологии в управлении.
БИНОМ. Лаборатория знаний, Интернет-университет информационных
технологий - М.: ИНТУИТ.ру, 2019. – С. 176.
8. Кэмпбел М. Разработка, дизайн, программирование,
тестирование и раскрутка web-сайта – М.: Триумф, 2017. – С. 480.
9. Немцова Т. И. Практикум по информатике. Ч. 2. Компьют.
графика и Web-дизайн. Практ.: Уч. пос. / Т.И.Немцова и др.; Под ред.
Л.Г.Гагариной - М.: ИД ФОРУМ: ИНФРА-М, 2018. - С. 288.
10. Пирогов В. Ю. Информационные системы и базы данных:
организация и проектирование: учеб. пособие - СПб.: БХВ-Петербург, 2019. -
С. 528.
11. Плюснина И. В. Разработка информационной системы: учебное
пособие – М.: Котлас, 2016. – С. 62.
 12. Пушкарев Н. Н. Управление человеческими ресурсами на основе
компьютерных технологий – М: Финансы и статистика, 2019. – С. 176.
13. Розенфельд Л. Информационная архитектура в интернете; 2-е
изд.; пер. с англ. / Л. Розенфельд, П. Морвиль. – СПб.: Символ-Плюс, 2015. –
С. 544.
14. Сырых Ю. А. Современный веб-дизайн. Настольный и
мобильный – М.: Диалектика, 2018. – С. 381.