ПРОЕКТИРОВАНИЕ ИНФОРМАЦИОННОЙ СИСТЕМЫ ДЛЯ АНОНСА КУЛЬТУРНЫХ МЕРОПРИЯТИЙ

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

Разработка прототипа информационной системы

1.1 Выбор инструментов разработки

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

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

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

Адаптивная верстка становится одним из самых используемых методов верстки, потому что она совмещает в себе макет на основе пропорций, предоставляет изображения, которые могут подстраиваться под родительский блок. И одно из самых важных свойств этого метода - использование стилей в зависимости от разрешений. Сейчас в разработке используют метод mobile first. Это подразумевает, что стили для мобильных устройств разрабатываются в первую очередь, а затем добавляются стили для более крупных экранов, обеспечивая оптимальное отображение на всех устройствах.

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

При разработке клиентской части системы в выпускной квалификационной работе использовались HTML, CSS, JavaScript.

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

Второй шаг использовать CSS, чтобы задать стили для сайта. Описать размер, форму, цвет элементов.

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

Для реализации карусели на главной странице системы использовался плагин jQuery, это библиотека JavaScript. Ее можно использовать для создания интерактивных веб-страниц или элементов на странице.

Для создания клиентской части информационной системы был использован фреймворк Bootstrap. Использование этого инструмента помогает ускорить процесс верстки и делает сайт более адаптивным к разным форматам экрана.

Существует большое количество фреймворков CSS, которые разработчики используют во фронтенд-разработке. Часто используют фреймворк Foundation, он включает в себя готовые компоненты и гибкую систему сетки. Фреймворк Materialize позволяет оптимизировать компоненты и страницу под мобильные устройства и свободно кастомизировать элементы. Еще один фреймворк с схожим функционалом – Bulma. Как ранее было обозначено мною был выбран самый популярный – Bootstrap, потому что у него большая документация на русском языке.

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

В данной подглаве рассмотрим реализацию отдельных элементов клиентской части информационной системы.

Первый элемент – это карусель событий. Она реализована с помощью плагина Slick Slider библиотеки jQuery. Она необходима, чтобы показывать пользователю ближайшие 6 событий, на которые он сможет купить билет или зарегистрироваться. Каждый элемент карусели – это отдельный блок, который включает в себя название мероприятия, дату, место, время, цену. Технически каждый блок реализован с помощью HTML, CSS и JavaScript. HTML необходим, чтобы задать структуру для каждой карточки, CSS для стилизации карточек в карусели и JavaScript (в частности, библиотека jQuery) управляет поведением карусели через плагин Slick Slider. Что при нажатии на кнопку в карусели,

карточки с мероприятиями меняются (рис. 1). Код представлен в приложении С.1.

Рисунок 1. Карусель событий

Следующий элемент – выпадающий список (рис. 2). Этот элемент (dropdown menu) позволяет пользователям выбрать категорию, по которой они хотят отфильтровать события. Он реализован с помощью HTML и CSS из библиотеки Bootstrap.

Рисунок 2. Выпадающий список с категориями

Каждый элемент из списка option обозначает категорию: еда, вечеринки, образование и т.д. Элемент select позволяет выбрать категорию и используется для фильтрации контента на странице, в данном случае для отображения мероприятий по выбранной категории. Код можно увидеть на рисунке ниже (рис. 3).

Рисунок 3. Код для выпадающего меню с категориями

Следующий элемент – модальное окно. Данное модальное окно реализовано для службы поддержки. Когда пользователь зарегистрирован, он может зайти на главную страницу, в футере нажать на кнопку «поддержка», появится модальное окно (рис.4).

Рисунок 4. Модальное окно со службой поддержки

Элемент модальное окно форма стилизован с использованием классов Bootstrap. Данное окно работает как форма сбора данных. HTML нужен для структуры формы, элементы input и textarea нужны, чтобы пользователь вводил данные, а с помощью JavaScript происходила отправка формы. Форма отправляется методом POST (рис.5). Кнопка отправки реализуется через ссылку на другую страницу, на которой написано, что сообщение доставлено, поэтому это реализовано через тег «a», а не через button (рис.4).

Рисунок 5. Страница с текстом для пользователя

Рисунок 6. Код для модального окна со службой поддержки

Элемент модальное окно для запуска рекламной кампании запускается при нажатии соответствующей кнопки в кабинете организатора (рис. 7). Организатор может ввести название рекламной кампании, ее краткое описание, бюджет для рекламной кампании, выбрать целевую аудиторию и выбрать метрики для отчета. Выбор целевой аудитории реализуется с помощью выпадающего списка, описание этого элемента можно посмотреть на рисунке 3. В этой форме есть элемент для выбора метрик для рекламной кампании – чекбоксы. Каждый чекбокс реализован с помощью элемента input, с типом checkbox. Некоторые чекбоксы уже отмечены по умолчанию (атрибут checked), что указывает на стандартные опции отчета для рекламной кампании. Программный код для создания чекбоксов представлен на рисунке.

Форма отправляется методом POST. Кнопка должна через API подключаться к сервису Яндекс.метрика и создавать отчет там. Полноценный программный код можно посмотреть в приложении С.2

Рисунок 7. Модальное окне для запуска рекламной кампании

Рисунок 8. Код для создания чекбоксов

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

Программный код для создания страницы администратора можно посмотреть в приложении С.3.

Рисунок 9. Личный кабинет администратора

Следующий элемент — это создание отдельной карточки. Опишу создание одной карточки мероприятия, все остальные создаются по аналогии. В карточке мероприятия отражена основная информация о событии. Каркас карточки описывается с помощью HTML. Используется класс “d-flex” из Bootstrap, чтобы элементы внутри этого блока размещались друг напротив друга. На карточке есть кнопка «Бесплатно», при нажатии человек переходит на новую страницу информационной системы, где дана подробная информация о мероприятии и где можно купить билет или зарегистрироваться. Кнопка «Бесплатно» реализована с помощью тега «а», чтобы перейти на следующую страницу. С помощью JavaScript событие обрабатывается и клик работает. Также, на данном элементе интерфейса есть иконка сердце. Это реализовано с помощью библиотеки FontAwesome, используется иконка fa-heart. Код представлен ниже (рис.10).

Рисунок 10. Карточка мероприятия

Рисунок 11. Код Карточки мероприятия

Еще один элемент, который важен для реализации – модальное окно с отчетом о рекламной компании (рис.12). Выше уже был разобран элемент модальное окно, но это модальное окно подгружает вордовский документ в PDF, дает возможность пользователям его скачать и распечатать. Реализован он с помощью тега embed, который позволяет вставлять документы в HTML. Программный код представлен на рисунке 13.

Рисунок 12. Модальное окно «Отчет о рекламной кампании»

Рисунок 13. Программный код для модального окна «Отчет о рекламной кампании»

Список литературы:

1. Вигерс, Карл. Разработка требований к программному обеспечению/ Пер, с англ. — М.: Издательсш-торговый дом «Русская Редакция», 2004. —576с. —URL:https://datafinder.ru/img/bi_portal/Razrabotka_trebovanii_Karl_Vigers.pdf (дата обращения: 14.04.2024)
2. Пьюривал, С. Основы разработки веб-приложений //СПб.: Питер. – 2015. – 272 с. (дата обращения: 25.04.2024)
3. Сукиасян, В.М., Придиус Е. С. Современные принципы и подходы к frontend архитектуре веб-приложений // Наука, техника и образование. – 2019. – №. 10 (63). – 54-57 с. — URL:https://cyberleninka.ru/article/n/sovremennye-printsipyi-podhody-k-frontend-arhitekture-veb-prilozheniy/viewer (дата обращения: 26.04.2024)
4. Компания RB.RU: независимое издание о технологиях и бизнесе, организатор мероприятий: сайт. Москва : Сетевое издание RB.RU, 2012 - URL:https://rb.ru/story/user-journey-map-i-user-flow/ (дата обращения: 06.04.2024)
5. Белов, В.В., Чистякова, В.И. Проектирование информационных систем: учебник для студ. учреждений высш. проф. Образования: Издательский центр «Академия», 2013. — 352 с. — URL:https://academiamoscow.ru/ftp_share/_books/fragments/fragment_22893.pdf (дата обращения: 15.04.2024)
6. Грибков, Е. Основы правил проектирования базы данных // Habr. - 2020. — URL: https://habr.com/ru/articles/514364/ (дата обращения: 25.04.2024)