CC BY
38УДК 004
Информационные технологии
Данилова Дарья Дмитриевна, студент кафедры «Информационные системы», Институт информационных технологий, ФГАОУ ВО «Севастопольский государственный университет», г. Севастополь, Россия
Иванцова Юлия Александровна, кандидат филологических наук, доцент кафедры «Иностранные языки», Институт общественных наук и международных отношений ФГАОУ ВО «Севастопольский государственный
университет», г. Севастополь, Россия
РАЗРАБОТКА ВЕБ-САЙТА НА ПРИМЕРЕ СТУДИИ-КОНДИТЕРСКОЙ
Аннотация: В современных реалиях, когда цифровизация на прямую затрагивает все категории бизнеса, наличие представительного сайта является эффективным имиджевым и маркетинговым инструментом для продвижения самой компании и для реализации товаров и услуг. Тем не менее, при разнообразии технологий и инструментов в сфере веб-разработке возникает проблема их выбора и совместимости. В данной статье рассмотрено создание сайта с применением фреймворка Laravel на примере семейной студии-кондитерской. С целью создания оптимального алгоритма разработки сайта, автором изучены и проанализированы теоретические материалы в области веб-проектирования. В качестве практического результата исследования, предлагается готовый интернет-продукт для бизнес-коммуникации.
Ключевые слова: веб-разработка, веб-сайт, PHP, Laravel, css, интернет-магазин, кондитерская.
Abstract: Nowadays, when digitalization directly affects all business categories, having a prominent website is an efficient branding and marketing tool to advance the company itself and to sell goods and services. Nevertheless, with a variety of technologies and tools in the web development, there is a problem with
their choice and compatibility. This article describes how to create a website using the Laravel framework, taking a family confectionery as an example. To create an optimal algorithm for website development, the author studied and analyzed the theory in the web design process. As a result of the study, a ready-to-use Internet product for business communication is offered.
Keywords: web development, website, PHP, Laravel, css, online store, confectionery.
Современные требования к ведению индивидуальных бизнес-проектов требуют от предпринимателей высокой степени активности в рамках цифрового маркетинга. Прежде всего, это предполагает наличие официального интернет-сайта и открытых ресурсов в социальных онлайн-пространствах. Особенно важное место для малого бизнеса занимает веб-сайт, разработка которого помогает создать дополнительный информационно-рекламный канал, сформировать положительный имидж компании, разработать платформу для автоматизации работы с клиентами, а также решить ряд проблем, связанных с ограниченными стартовыми финансовыми возможностями предпринимателя, недостаточным уровнем известности компании и с текущими трудностями, возникающими при работе в социальных сетях.
В связи с этим представляется актуальной тема данной статьи, иллюстрирующая на примере создания реального веб-проекта теоретические и практические аспекты его разработки, что помогает обозначить основные этапы работы с бизнес-проектом с учетом его концептуальных особенностей.
Использование сети Интернет для ведения любых деловых вопросов значительно расширило возможности в сфере рекламного бизнеса и веб-разработки и спровоцировало появление широкого ряда сайтов, созданных с помощью различных онлайн-конструкторов. Конструктор сайтов - это система из набора визуальных инструментов, которая позволяет создавать сайты онлайн и администрировать их без каких-либо специализированных знаний [6]. К самым практичным и удобным веб-конструкторам можно отнести uCoz, uKit,
Wix и Tilda - быстрые и эффективные онлайн-сервисы для создания и запуска сайта. Несмотря на целый ряд их положительных качеств, главной проблемой большинства веб-конструкторов является ограниченный функционал. Такие конструкторы больше подходят для создания непрофессиональных одностраничных сайтов (лэндингов).
Помимо онлайн-конструкторов существуют различные фреймворки. Фреймворк - готовая модель, заготовка, шаблон для программной платформы, на основе которого можно дописать собственный код [8]. Наиболее популярными фреймворками являются Laravel и ASP.Net. Главное их преимущество в сравнении с конструкторами состоит в их универсальности и способности решать практически любые задачи для бизнеса. С помощью фреймворка можно разработать уникальный проект, который будет отличаться своей индивидуальностью, в то время как конструкторы сайтов предоставляют уже готовые стандартные шаблоны.
Представленное разнообразие разработок для создания онлайн-площадок в цифровом пространстве подтверждается многими научным исследователями, которые изучают вопросы веб-программирования в разностороннем аспекте.
В частности, Е.А. Дронова рассматривает основные типы сайтов и этапы разработки выгодные с маркетинговой точки зрения сайта [2].
Авторы Третьяковой О.В., Маковеева В.Н., Чугреева В.Л. считают, что для принятия решений по развитию и продвижению сайтов необходим их системный мониторинг, включающий оценку популярности веб-ресурсов, например через систему Piwik. Поскольку результаты проведенного анализа статистики сайтов позволят выделить направления, в рамках которых может быть организована работа по популяризации и продвижению сайтов [7].
Безусловно кроме маркетинговой составляющей важнейшим аспектом сайта является его визуальный элемент, именно это затрагивает в своей статье «Разработка интернет платформ с применением современных цифровых технологий» [1] Абдрахманов Т. Автор утверждает, что при разработке сайта необходимо учитывать все характеристики человеческого зрения, а также
психологические аспекты пользователя и выпускать эргономичный конечный продукт.
Такая вариативность в сфере веб-проектирования подтверждает актуальность рассматриваемого нами вопроса создания онлайн-ресурса. Однако, в ходе анализа существующих материалов в области разработки сайтов, нами отмечен факт недостаточной изученности самой методики создания веб-сайта в качестве готового продукта. В связи с этим было принято решение восполнить данный пробел исследуемой сферы и представить проект по разработке сайта с дружественным интерфейсом, отображающим главную концепцию бизнеса на примере студии-кондитерской.
Разработка сайта для продажи кондитерских изделий включает 7 основных этапов, каждый из которых представляет собой детальное описание работы с дополнительными рекомендациями как для веб-разработчика, так и заказчика сайта с иллюстрированием интерфейса и схематичным представлением функционала системы на примере проекта для продажи кондитерских изделий.
Предлагаем рассмотреть каждый этап отдельно.
Первый этап «Проведение встречи с заказчиком, уточнение наполнение сайта и дизайн». В ходе первого этапа разработки необходимо провести встречу с заказчиком. Перед интервью составить список вопросов, который поможет выявить потребности клиента и определить концепцию ведения бизнеса. Созданный опросник должен включать данные о цветовой гамме сайта, основных страницах, которые необходимо разработать, и их наполнении. Также следует определить тип разрабатываемого сайта: сайт-визитка, корпоративный информационный веб-сайт, интернет-магазин, информационный сайт, игровой портал, персональный проект, контент-проект, промо-сайт, сайт-форум, блог [3].
Второй этап «Разработка дизайна веб-сайта». В результате интервью с представителем организации разработать Ш-дизайн - внешний вид интерфейса с использованием возможностей графического редактора Figma. Разработанный
макет представлен на рисунках (см. Рисунки 1-4).
Рисунок 1 - Главная страница
ООО
Рисунок 2 - Страница «О Нас»
Рисунок 3 - Страница «Новости»
Рисунок 4 - Корзина
Третий этап «Выбор инструментов для разработки». Провести разработку с использованием таких инструментальных средств как IDE PhpStorm - интегрированная среда разработки, выбор которой обосновывается
удобством интерфейса среды. Важно отметить, что в данном проекте используется фреймворк Laravel для языка PHP, поскольку его основным преимуществом является создание ресурсной услуги, позволяющей обеспечить связь с клиентами, что необходимо при создании интернет-магазина. Фреймворк Laravel также позволяет упростить реализацию MVC (Model-viewcontroller) модели, которая разделяет данные приложения и управляющую логику на три отдельных компонента: модель, представление и контроллер, тем самым модификация каждого компонента может осуществляться независимо. Взаимодействие компонентов MVC модели продемонстрированно на рисунке (см. Рисунок 5).
Рисунок 5 - Взаимодействие компонентов MVC
Интегрировать систему авторизации и регистрации Laravel/ui и готовое решение корзины для надежного функционирования сайта. Для динамического вывода данных необходимо использовать базу данных MySQL - свободная реляционная система управления базами данных, которая является одной из самых популярных СУБД (Система управления базами данных) на сегодняшний день. Контроль над данными осуществляется администратором
посредствам подключенного администраторского интерфейса Voyager. Voyager - это пакет Laravel, который предоставляет полную систему администрирования для фреймворка [10].
Четвертый этап «Анализ предметной области и разработка базы данных веб-сайта». Необходимым условием любого сайта с динамическим контентом является наличие базы данных. Перед созданием базы данных необходимо располагать описанием выбранной предметной области, которое должно охватывать реальные объекты и процессы, иметь всю необходимую информацию для удовлетворения предполагаемых запросов пользователя и определить потребности в обработке данных [4, c. 15]. В результате анализа процессов деятельности бизнеса определяются основные сущности и роли. После этого, становится возможным построение диаграммы «сущность - связь» в нотации П. Чена пример которой приведен на рисунке (см. Рисунок 6).
Рисунок 6 - Диаграмма «сущность - связь» Дальнейшим этапом проектирования базы данных является построение, ЕЯ-диаграммы. Диаграммы «сущность - связь» - ЕЯС. С их помощью определяются важные для предметной области объекты (сущности), их свойства (атрибуты) и отношения друг с другом (связи). Первым этапом в построении диаграммы является нормализация базы данных. Нормализация -это метод проектирования базы данных, который позволяет привести базу данных к минимальной избыточности [5]. Избыточность устраняется, как правило, за счёт декомпозиции отношений, т. е. разбиения одной таблицы на несколько. Пример ЕЯ диаграммы представлен на рисунке (см. Рисунок 7).
Д permissions
^ id : bigint(20) unsigned key: varchar(255) table_name: varchar(255) Я created_at: timestamp Я updated_at: timestamp
До
catalogs
a id: int(11)
name: varchar(255) ¿1 img: varchar(255) В created_at: timestamp в updated_at: timestamp
Д permission_role
j permissionjd : bigint(20) unsigned i rolejd : bigint(20) unsigned
Д products
i id : int(10) unsigned name: varchar(255) a size: varchar(255) price: varchar(255) image: varchar(255) 4 n catalogjd : int(11) В created_at: timestamp 7i updatedat: timestamp
Д master_classes
g id : bigint(20) unsigned
date: varchar(255) Ф time: varchar(255) tittle: varchar(255) I s> info : longtext В created_at: timestamp s updated_at: timestamp
Qo mariose orders
j id : bigint(20) unsigned я userid : bigint(20) unsigned * items : longtext price: varchar(255) ii phone: varchar(255) ^ created_at: timestamp g updated_at: timestamp
old_orders
4 id : bigint(20) unsigned orderjd: varchar(255) it userjd : bigint(20) unsigned
items: longtext © price: varchar(255) В created_at: timestamp В updated at: timestamp
3 blogs
j id : bigint(20) unsigned tittle: varchar(255) text: longtext image: varchar(255) в created_at: timestamp В updated_at: timestamp
До user_roles
i user_id : bigint(20) unsigned 1 ( i rolejd : bigint(20) unsigned
roles
« id : bigint(20) unsigned 4 name: varchar(255)
display name: varchar(255) В created_at: timestamp в updated at: timestamp
users
t id : bigint(20) unsigned H rolejd : bigint(20) unsigned
name: varchar(255) j email: varchar(255) i avatar: varchar(255) j phone: varchar(255) B email verified at: timestamp password: varchar(255) > remember token : varchar(IOO) settings: text B created_at: timestamp B updated at: timestamp
Рисунок 7 - ER диаграмма
Пятый этап «Разработка пользовательской части веб-сайта». На этапе разработки пользовательской части сайта создаются страницы, макет которых разработан ранее, тестируются возможности сайта и проверяется соответствие доступного функционала возможностям, определенным роли обычного пользователя. Интерфейс пользователя в окне браузера приведен на рисунке (см. Рисунок 8).
Рисунок 8 - Сайт в браузере
Шестой этап «Разработка раздела администратора веб-сайта». В ходе шестого этапа разработки подключается пакет Voyager для упрощения реализации административной части. Администратор обладает теми же правами что и пользователь, а также имеет доступ к административной части Voyager, вход в которую осуществляется при соответствии логина и пароля роли администратора. Административный раздел предоставляет полнофункциональный медиа-менеджер, позволяет получать доступ к нашей базе данных и манипулировать ею непосредственно из панели администратора предоставляет механизм для просмотра, чтения, редактирования, добавления и удаления записей и представлений любой таблицы в нашей базе данных.
Седьмой этап «Оценка и оптимизация характеристик разработанного продукта». Как отмечалось выше, во время стремительного развития технологий скорость и адаптивность является одними из самых важных компонентов сайта. Именно поэтому необходимо сделать акцент на тестировании данных критериев, а именно: 1) корректность работы сайта во всех браузерах; 2) скорость загрузки страницы; 3) валидность кода в соответствии со стандартом W3C.
Разработанный сайт для продажи кондитерских изделий поддерживается всем распространенными браузерами (Opera, Google Chrome, Microsoft Edge), основные функции исправно работают. Кроме того, выполнено профилирование скорости производительности веб-сайта. Для профилирования использованы возможности браузера Google Chrome. Время загрузка страницы 1,12 секунда. Произведена W3C (World Wide Web Consortium) проверка основных страниц на валидность (см. Рисунки 9-10).
Рисунок 9 - W3C проверка css кода
Рисунок 10 - W3C проверка js кода
Основным результатом представленной работы является готовое решение интернет-магазина студии-кондитерской, обладающее базовым функционалом. В ходе разработки спроектирована база данных, учитывающая особенности предметной области, изучена литература в сфере веб-разработки и создан UI-дизайн для определение визуального компонента сайта. К преимуществам данного проекта относятся интуитивный интерфейс, адаптированный под требования и потребности заказчика; наличие маркетплейса для размещения продукции; динамичность контента и возможность контроля при помощи административного раздела.
Созданный интернет-магазин для продажи кондитерских изделий поддерживается всеми популярными браузерами. Время загрузки сайта составляет не более 1 секунды, что соответствует оптимальному времени загрузки для реакции пользователя. Использование фреймворка Laravel для PHP упрощает создание MVC-модели и взаимодействие с базой данных, а использование системы управления базами данных MySQL обеспечивает высокий уровень безопасности для хранения паролей пользователей. В ходе комплексного применения выбранных технологий не возникают проблемы совместимости компонентов реализации.
В перспективе планируется повысить надежность и безопасность сайта. Несмотря на наличие подтверждения регистрации по электронной почте данная аутентификация не является самой актуальной и безопасной, поэтому в дальнейшем есть необходимость добавить подтверждение регистрации по номеру телефона. Для учета особых пожеланий к заказу с опциональными характеристиками необходимо разработать «конструктор тортов». В созданном продукте процесс регистрации на мастер-классы не автоматизирован, в связи с этим необходимо включить в проект систему записи с ограниченным количеством мест. При соответствующей доработки сайт станет полноценным сервисом, который уменьшит нагрузку работников кондитерской и оптимизирует большинство организационных процессов.
Библиографический список:
1. Абдрахманов Т. Разработка интернет-платформ с применением современных цифровых технологий // Вестник КЭУ им. М. Рыскулбекова. С. 142-144.
2. Дронова Е.А. Разработка корпоративного сайта фирмы как эффективного инструмента маркетинга // Вестник академии: вопросы информатизации. 2011. Вып 1. C 142-144.
3. Какие бывают сайты [Электронный ресурс] // ВебРост. https://vebrost.ru/blog/kakie-byvayut-sayty/ (дата обращения 10.09.2022).
4. Лавренова О.А. Сетевые технологии и базы данных: курс лекций для студентов специальности 1-27 01 01 «Экономика и организация производства»: в 2 ч. Минск: БНТУ, 2009. 110 c.
5. Нормализация баз данных простыми словами [Электронный ресурс] // Заметки IT специалиста. Блог о компьютерах и программировании для начинающих. URL: https://info-comp.ru/database-normalization (дата обращения 20.09.2022).
6. Обзор онлайн конструкторов сайтов [Электронный ресурс] // StudFile. URL: https://studfile.net/preview/5317592/ (дата обращения 25.10.2022).
7. Третьякова О.В., Маковеев В.Н., Чугреев В.Л. Повышение посещаемости веб-сайтов научной организации и их продвижение в сети интерне // Социальное пространство. 2016. Вып. 5(07). С. 145-146.
8. Фреймворк [Электронный ресурс] // SkillFactory.Блог. URL: https://blog.skillfactory.ru/glossary/framework/ (дата обращения 20.09.2022).
9. About W3C [Электронный ресурс] // W3C. URL: https://www.w3.org/Consortium/ (дата обращения 14.10.2022).
10. Voyager - Может ли пользовательский интерфейс администратора сделать Laravel еще более доступным? [Электронный ресурс] // CoderLessons.com. URL: https://coderlessons.com/articles/php/voyager-mozhet-li-polzovatelskii-interfeis-administratora-sdelat-laravel-eshche-bolee-dostupnym (дата обращения 27.10.2022).
