МИНОБРНАУКИ РОССИИ

Федеральное государственное бюджетное образовательное учреждение

высшего образования
«ХАКАССКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
им. Н.Ф. КАТАНОВА»

Инженерно-технологический институт

Кафедра цифровых технологий и дизайна

Направление подготовки 09.03.02 «Информационные системы и технологии»

РАЗРАБОТКА ИНФОРМАЦИОННОЙ СИСТЕМЫ ВИРТУАЛЬНОГО МУЗЕЯ НА

ОСНОВЕ МЕТОДОЛОГИИ СТРУКТУРНО-ФУНКЦИОНАЛЬНОГО АНАЛИЗА
Курсовая работа
по дисциплине Инструментальные средства информационных систем

Выполнил(а)
Беккер В.Э _____________________________
(Фамилия И.О. обучающегося, подпись)
Группа 49______________________________
Курс 4_________________________________
Форма обучения очная___________________
Научный руководитель: ст. преподаватель
кафедры ЦТиД Яковлев Д.А._

Абакан 2022
РЕФЕРАТ
 Пояснительная записка 34 с. без учета приложений, 3 главы, 16 рис., 9
табл., 16 источников, 2 приложения.
Курсовая работа:
Тема курсовой работы: разработка информационной системы
виртуального музея на основе методологии структурно-функционального
анализа.
Объект исследования курсовой работы: процесс просмотра экспонатов:
их фотографии, 3D-модели, новости, информацию проводимых раскопок, их
видео и фото материалы.
Предмет исследования: разработка информационной системы
виртуального музея на основе методологии структурно-функционального
анализа.
Цель работы – создание информационного ресурса вириального музея
«Истории, археологии и этнографии».
В процессе выполнения использовались методы: эмпирические
(описание), теоретические (анализ, сравнительный анализ, моделирование). В
Главе 1 рассматривается организация для внедрения информационной
системы, выбор средств для программирования и языка программирования и
описания технического задания. В Главе 2 проводится разработка базы
данных, прототипов страниц веб-сайта. В Главе 3 проводиться разработка
интерфейса сайта, описание плагинов, использованных во время разработки
и представлена часть кода верстки и javascript функций.
Содержание включает: введение, наименование всех разделов и
подразделов, заключение, список использованных источников, наименование
приложений с указанием номеров страниц, с которых начинаются данные
элементы.

3
 СОДЕРЖАНИЕ
ВВЕДЕНИЕ..............................................................................................................5

1 Описание департамента, обоснование темы и выбор средств разработки.....7

1.1 Выбор и обоснование темы проекта.............................................................7

1.2 Сбор и анализ исходных данных предметной области..............................7

1.3 Наименование, территориальное расположение и основные виды

деятельности музея..............................................................................................7

1.4 Выбор современной СУБД для создания БД проекта................................8

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

проекта..................................................................................................................9

1.6 Выбор фреймворка для разработки фронтенда сайта...............................11

1.7 Техническое задание на разработку виртуального музея........................13

1.8 Построение контекстной диаграммы.........................................................14

2 Реализация физической модели данных и интерфейса проекта....................17

2.1 Реализация физической модели данных....................................................17

2.2 Прототипирование интерфейса сайта........................................................21

3 Разработка Веб-сайта.........................................................................................25

3.1 Дизайн сайта.................................................................................................25

3.2 Использованные плагины при разработке проекта..................................27

3.3 Верстка страниц и реализация JavaScript кода..........................................28

ЗАКЛЮЧЕНИЕ.....................................................................................................32

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ............................................33

ПРИЛОЖЕНИЕ А.................................................................................................35

ПРИЛОЖЕНИЕ Б..................................................................................................55

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

6
 1 Описание департамента, обоснование темы и выбор средств
разработки
1.1 Выбор и обоснование темы проекта
Музей истории, археологии и этнографии» основан 9 октября 2003
года. Музей ИИП ХГУ им. Н.Ф. Катанова имеет статус учебного музея.
Главная задача музея – обеспечение многообразия содержания
образовательного процесса [1].
Одной из главных ролей музея – это подготовка студентов по
историческому направлению, для которых он является необходимой учебной
и научной базой, а также для других студентов. В музее проводятся лекции,
семинарские и лабораторные занятия по археологии, этнографии и
историческому краеведению.
Музей «Истории, археологии и этнографии» имеет в своем активе
множество экспонатов, которые в данный момент обычные обыватели не
могут посмотреть. Также данные экспонаты хранятся на кафедре не более 3
лет, а затем сдаются в Краеведческий музей, поэтому студенты не могут все
их осмотреть, что решает сайт с 3D-моделями
1.2 Сбор и анализ исходных данных предметной области
В музее представлены артефакты в хронологическом диапазоне от
эпохи каменного века и до середины ХХ века. Все археологические и
этнографические экспонаты собраны преподавателями и студентами ИИиП
ХГУ во время летних полевых практик. Работа музея направлена на
приобщение студентов к традиционным культурным ценностям нашего
региона. Посетители музея знакомятся с хакасскими национальными
традициями, убранством юрты, хакасским музыкальным творчеством,
самобытным национальным костюмом [1].
1.3 Наименование, территориальное расположение и основные
виды деятельности музея
Федеральное государственное бюджетное образовательное учреждение
высшего образования «Хакасский государственный университет им. Н. Ф.
7
Катанова», Институт истории и права.
Территориальное расположение организации: 655017, Республика
Хакасия, город Абакан, проспект Ленина, д. 92/1, каб. 510, 512, 514, 516, 521,
421
Музей является учебным структурным подразделением Института,
выполняющим учебные функции. Музей создан на основании Решения
Ученого Совета Хакасского государственного университета им. Н.Ф.
Катанова.
1.4 Выбор современной СУБД для создания БД проекта
MySQL – это система управления реляционными базами данных с
открытым исходным кодом (СУРБД) с моделью клиент-сервер. СУРБД —
это программное обеспечение или служба, используемая для создания и
управления базами данных на основе реляционной модели [2].
SQL Server является одной из наиболее популярных систем управления
базами данных (СУБД) в мире. Данная СУБД подходит для самых различных
проектов: от небольших приложений до больших высоконагруженных
проектов [3].
IBM Db2 — это семейство продуктов для управления данными,
включающее реляционную базу данных Db2. В продуктах реализованы
функции на основе ИИ, помогающие управлять как структурированной, так и
неструктурированной информацией в локальных и мультиоблачных средах
[4].
SQLite — это быстрая и легкая встраиваемая однофайловая СУБД на
языке C, которая не имеет сервера и позволяет хранить всю базу локально на
одном устройстве. Для работы SQLite не нужны сторонние библиотеки или
службы [5].
Access – это еляционная система управления базами данных
корпорации Microsoft. Входит в состав пакета Microsoft Office. Имеет
широкий спектр функций, включая связанные запросы, связь с внешними
таблицами и базами данных [6].
8
Таблица 1.1 – Сравнительная характеристика наиболее известных систем
управления базами данных
Характеристики MySQL MS SQL IBM DB2 SQLite MS Access
Server
Язык
Си, C++ Java, SQL SQL,
программирован Transact-SQL Си
2000 XQuery
ия
Объектно-
ориентированно
е Да Нет Да Нет Да
проектирование
БД
Мультимедийны Ограниче Ограничен
Да Ограниченно Да
е типы данных нно но
Макс. Размер
4 Гб Не огр. 64 Гбайт 140 Тбайт 2 ГБ
таблиц
Макс. Число Практически
Не Не
таблиц в БД не Не огр. 2048
ограничено ограничено
ограничено
Макс. Число Практически
пользователей 10 000 Не огр. не Не огр. 255
БД ограничено
Цена MySQL SQL Server SQLite
Community 2019 Express От 18 480 является От
является является руб бесплатно 2763 руб.
бесплатной бесплатной й
Проанализировав выше изложенную таблицу, пришел к выводу того,
что самая подходящая СУБД для данного проекта, является СУБД MySQL,
так как она распространяется бесплатно и при этом легко изучаема.
1.5 Выбор среды программирования для создания клиентской
части проекта
Список программных средств для разработки WEB-сайта:
Eclipse – одна из самых популярных мультиязычных сред.
Ориентирована преимущественно на разработку Java-приложений, но
полезна и для кодов на JavaScript, имеющая следующие плюсы [7]:
 Множество плагинов. У Eclipse едва ли не самое большое число
надстроек — «на все случаи жизни»;
 Активное сообщество. Помогает быстрее освоить среду разработки,
выпускает новые плагины;
 Отличные компилятор и отладчик. Первый работает на порядок
9
быстрее, чем у конкурентов, второй — показывает потоки, пересечения,
позволяет гибко управлять ходом отладки;
 Кастомизация. Благодаря плагинам и настройкам можно полностью
персонализировать Eclipse;
 Бесплатность. Это open-source проект, абсолютно бесплатный;
 Высокая функциональность. Благодаря разработчикам-официалам и
членам сообщества с помощью Eclipse можно провести любой C#-продукт по
полному циклу разработки.
MonoDevelop – свободная среда разработки от Xamarin для создания
приложений и сайтов на множестве языков, в том числе на JavaScript,
имеющая следующие плюсы [8]:
 Мультиплатформенность. Поддерживает Linux, Windows и Mac OS;
 Кастомизация. На рабочем столе можно расположить функции и
окна по своему усмотрению;
 Unity 3D. Полноценная поддержка популярной платформы для
разработки игр;
 Бесплатность.
Visual Studio – интегрированная среда разработки (IDE) от Microsoft,
имеющая следующие плюсы [9]:
 Официальная, так как и язык, и среда разработки созданы в
Microsoft, что позволяет использовать, например, технологии UWP и WPF;
 Бесплатная. Версии «Community edition» для рядового пользователя
будет достаточно. Тем более, теперь можно подключать плагины;
 Функциональная. В Visual Studio множество качественных плагинов.
С их помощью можно расширить функциональность приложения и
подключить другие языки;
 Поддерживает платформы .NET. Visual Studio имеет широкие
возможности по разработке приложений под Windows, в том числе в .NET-
сегменте;

10
  Облачные хранилища. Возможность получить доступ к облачному
хранилищу, зарегистрировавшись в сообществе Visual Studio, где сможете
располагать файлы проектов;
 Корпоративность. Технология бэклога позволяет членам команды
взаимодействовать при гибкой методологии разработки.
Проанализировав данные программные средства, взята Visual Studio,
так как данная IDE удобна и понятна разработчику, при этом в самой среде
можно установить все недостающие плагины для разработки от визуальных,
до помощников-конструкторов, что позволяет по-максимуму упростить этап
разработки.
1.6 Выбор фреймворка для разработки фронтенда сайта
Для реализации обмена данных внутри сайта используются
фреймворки. На базе javascript существует несколько фреймворков, самые
популярные именуются следующим образом: Vue.js, React и Angular.
В следующей таблице представлена сравнительная характеристика
данных фреймворков [10].
Таблица 1.2 – Сравнительная характеристика наиболее известных
фреймворков
Рендеринг – Архитектура Направленност Обратная
отображени компонентов ь и классы совместимость
е конечного зависимостей
результата
Angu Разделение Высокоуровнев Поддержка MV Полноценный
lar на два ый API VM (Model- фреймворк.
потока, обеспечивает View- Абсолютная
причем за обратную ViewModel) зависимость от
рендеринг совместимость допускает предыдущих
DOM для всех решение версий и
«отвечает» библиотек. Это разных задач в компонентов.
браузер позволяет одном разделе Прямой переход с
(клиентская подключиться к приложения с 4.0 на 5.0
часть), а за проекту использование невозможен,
создание стороннему м одного придется
директив, программисту набора данных. последовательно
загрузку без длительного Зависимость устанавливать все
кода и изучения функций обновления
сервисов – архитектуры определяет между версиями.
11
 общий приложения. двустороннюю Это приведет к
поток направленность необоснованному
(серверная передачи увеличению
часть). данных. объема
Каждая приложения.
процедура
может
запустить
другой
процесс.

Reac Создают Модифицирован Поддерживают Библиотека.

t копию ная библиотека, только Полная
DOM, заточенная односторонню совместимость
обрабатыва под MVC (Model ю передачу между версиями.
ют ее, а -View-Controller, данных. При Возможно
затем где Модель этом в React подключение к
результат отвечает за объекты приложению
сравниваетс предоставление инкапсулирова библиотек разных
я с данных, Вид – ны версий,
исходной отображает обновление
версией. В данные Модели устаревших с
конечном пользователю, а наследованием
документе Контроллер свойств.
(то есть на интерпретирует
экране действия
пользовател пользователя и
я) заставляет
заменяются Модель вносить
только те изменения).
Vue.j части Высокоуровнев Прогрессивный
s страницы, ый API фреймворк.
которые обеспечивает Модульная
отличаются обратную система
от совместимость аналогична React,
результатов для всех но включающая в
обработки. библиотек. Это себя все атрибуты
позволяет JS-фреймворка,
подключиться к работающих с
проекту полной обратной
стороннему совместимостью.
программисту
без длительного
изучения
архитектуры
12
 приложения
Проанализировав js фреймворки, выбран Vue.js введу того, что он
прост в изучении, также в данном фреймворке модульная разработка, что
позволяет просто и без глобальных ошибок внедрять новые функции, при
этом смена программиста не повлияет на разработку в целом.
1.7 Техническое задание на разработку виртуального музея
В данном пункте описано краткое техническое задание, полное
содержание находится в приложении А.
1 Общие сведения.
1.1 Название организации-заказчика.
ФГБОУ ВО «ХГУ им. Н.Ф. Катанова» институт «Истории и права»
1.2 Название продукта разработки (проектирования).
Разработка сайта для «Музея истории, археологии и этнографии».
1.3 Назначение продукта.
Цель сайта – предоставить образовательные программы посетителям
сайта, экспонаты музея, предоставить информацию о музее.
Необходимо, чтобы пользователь в результате посещения сайта:
Увидел - специалистов, контакты, список услуг.
Почувствовал - доступность и удобство пользования. Сделал -
записался на процедуру.
1.4 Целевая аудитория.
Студенты и школьники, ориентирующиеся на изучение истории
Хакасии.
2 Требования к продукту разработки.
2.1 Требования к продукту в целом.
Программный продукт должен быть разработан на языке высокого
уровня программирования.
Программа должна обеспечивать:
 удобный интерфейс;
 лёгкость в использовании;
13
14
 2.2 Аппаратные требования.
Аппаратное обеспечение серверной части должно удовлетворять
следующим требованиям: Аппаратное обеспечение клиентской части должно
обеспечивать поддержку программного обеспечения клиентской части,
которое указано ниже:
 Веб-браузер: Internet Explorer 8.0 и выше, или Firefox 3.5 и выше, или
Opera 9.5 и выше, или Safari 3.2.1 и выше, или Chrome 2 и выше;
 Включенная поддержка javascript, Flash и cookies.
3 Требования к пользовательскому интерфейсу.
3.1 Размещение информации на экране, дизайн экрана.
Оформление сайта должно быть читаемое. Рекомендуемые подборки
цветов следующие: серо-бежевая цветовая гамма.
3.2 Стиль сайт
Сайта должен быть в историко-хакасском стиле.
3.3 Структура разделов сайта
 Главная страница
 Новости
 Экспонаты
 Видеоматериалы
1.8 Построение контекстной диаграммы
Создадим контекстную диаграмму. В данном случае она представляет
собой самое общее описание системы.
Для построения контекстной диаграммы необходимо определить
входную информацию, которая преобразуется в процессе для получения
результата; выходную информацию - готовый результат; управление, которое
влияет на процесс, но не преобразуется процессом; механизмы, которые
выполняют процесс.
Представим полученную контекстную диаграмму на рисунке 1.1.

15
 Рисунок 1.1 – Контекстная диаграмма
В таблице № 1.3 представлена характеристика для каждой стрелки,
расположенной в контекстной диаграмме
Таблица № 1.3 – Стрелки на контекстной диаграмме
Имя стрелки Определение стрелки Тип стрелки
Материалы для HTML- Информация для внедрения в HTML- Вход
разметки разметку
Материалы новых экспонатов Материалы экспонатов, включающие в себя Вход
заголовок, краткое и полное описание,
аудиозапись, фотографию и 3D-модель
Материалы новых новостей Материалы новостей, включающие в себя Вход
заголовок, краткое и полное описание,
фотографию
Материалы новых Материалы видеоматериалов, включающие в Вход
видеоматериалов себя заголовок, краткое и полное описание,
фотографию и видеоролик
Веб-контент основной Информация расположенная в HTML- Выход
информации сайта разметке
Отредактированный веб- Страницы сайта, заполненные новой Выход
контент заполненных страниц информацией
Отчеты по работоспособности Отчеты по выполненной работе Выход
сайта администратора
Руководство администратора Руководство работы с сайтом для Контроль
администратора
Информационная система Веб-сайт с интерфейсом и базой-данных Механизм
Персональный компьютер Техническое устройство для работы с Механизм
информационной системой
Администратор Работник, администрирующий Механизм
информационную систему

16
 Декомпозиция – принцип, применяемый при разбиении сложного
процесса на составляющие его функции, при этом уровень детализации
процесса определяется непосредственно разработчиком модели [11].
Результатом декомпозиции представлен на рисунке 1.2.

Рисунок 1.2 – Декомпозиция процесса «Заполнение сайта материалами»

Выводы:
 В результате анализа предметной области была выявлена
потребность в создании информационной системы, а именно WEB-сайта для
просмотра экспонатов и другой информации в «Музеи истории, археологии и
этнографии»;
 Выбрана СУБД MySQL для создания базы данных, т.к. она обладает
многими функциями для создания БД, достаточно проста в освоении;
 Выбрано программное средство для разработки ПО – Visual Studio,
так как проста и удобна, имеет множество плагинов для улучшения процесса
разработки;
 Выбран фреймворк Vue.js, который является лучшим для разработки
однострочного сайта, при этом занимающий минимальные ресурсы
разработки;
 Построена контекстная диаграмма и декомпозиция для бизнес-
процесса «Заполнение сайта материалами»
17
 2 Реализация физической модели данных и интерфейса проекта
2.1 Реализация физической модели данных
Физическая модель БД определяет способ размещения данных в среде
хранения и способы доступа к этим данным, которые поддерживаются на
физическом уровне.
В физической модели базы данных содержится необходимые для
работы СУБД компоненты: название таблиц и столбцов, типы данных
столбцов, первичные и внешние ключи и другое.
Все связи физической модели данного проекта, реализованного в
MySQL, показаны на схеме данных, которая расположена на рисунке 2.1.

Рисунок 2.1 – Схема данных

На данном этапе в СУБД создаются таблицы с определенными
атрибутами, которые имеют соответствующие типы данных и свойства.
Таблица «exhibits» имеет 7 полей и предназначена для хранения
данных об экспонатах, их фотографиях, описанию, 3D-моделях и
аудиозаписях. Состав и свойства полей для таблицы представлены в таблице
2.1.
Таблица 2.1 – Состав полей и их свойств для таблицы «exhibits»
Наименование Назначение Тип поля Свойства поля,
поля таблицы отличные от
заданных по
умолчанию
id_exhibits Первичный ключ Счётчик
title Заголовок TINYTEXT Совпадения не
экспоната допускаются
short_descriptio Короткое MEDIUMTEXT Совпадения
18
 n описание допускаются
экспоната
description Полное описание LONGTEXT Совпадения
экспоната допускаются
3D_model Номер региона в LONGBLOB Совпадения не
стране допускаются
photo Фотография MEDIUMBLOB Совпадения не
экспоната допускаются
sound Аудиозапись про MEDIUMBLOB Совпадения не
экспонат допускаются
SQL листинг представлен ниже:
CREATE TABLE IF NOT EXISTS `museum`.`exhibits` (
`id_exhibits` INT NOT NULL AUTO_INCREMENT,
`title` TINYTEXT NOT NULL,
`short_description` MEDIUMTEXT NOT NULL,
`description` LONGTEXT NOT NULL,
`3D_model` LONGBLOB NOT NULL,
`photo` MEDIUMBLOB NOT NULL,
`sound` MEDIUMBLOB NULL,
PRIMARY KEY (`id_exhibits`),
UNIQUE INDEX `title_UNIQUE` (`title` ASC) VISIBLE,
UNIQUE INDEX `3D_model_UNIQUE` (`3D_model` ASC) VISIBLE,
UNIQUE INDEX `photo_UNIQUE` (`photo` ASC) VISIBLE,
UNIQUE INDEX `sound_UNIQUE` (`sound` ASC) VISIBLE)
ENGINE = InnoDB;
Таблица «news» имеет 5 полей и предназначена для хранения данных
об новостной ленте, в которой находятся фотографии, описание и
видеофайлы. Состав и свойства полей для таблицы представлены в таблице
2.2.
Таблица 2.2 – Состав полей и их свойств для таблицы «news»
Наименование Назначение Тип поля Свойства поля,
поля таблицы отличные от
заданных по
умолчанию
19
 id_news Первичный ключ Счётчик
title Заголовок новости TINYTEXT Совпадения не
допускаются
description Полное описание LONGTEXT Совпадения
новости допускаются
photo Фотографии MEDIUMBLOB Совпадения
новости допускаются
video Видеоматериал LONGBLOB Совпадения
допускаются
SQL листинг представлен ниже:
CREATE TABLE IF NOT EXISTS `museum`.`news` (
`id_news` INT NOT NULL AUTO_INCREMENT,
`title` TINYTEXT NOT NULL,
`description` LONGTEXT NOT NULL,
`photo` MEDIUMBLOB NOT NULL,
`video` LONGBLOB NULL,
PRIMARY KEY (`id_news`),
UNIQUE INDEX `title_UNIQUE` (`title` ASC) VISIBLE)
ENGINE = InnoDB;
Таблица «videos» имеет 5 полей и предназначена для хранения данных
об видеоматериалах, таких как: лекционные материалы, видео с раскопок,
интервью. Состав и свойства полей для таблицы представлены в таблице 2.3.
Таблица 2.3 – Состав полей и их свойств для таблицы «videos»
Наименование Назначение Тип поля Свойства поля,
поля таблицы отличные от
заданных по
умолчанию
id_videos Первичный ключ Счётчик
title Заголовок TINYTEXT Совпадения не
экспоната допускаются
description Полное описание LONGTEXT Совпадения
экспоната допускаются
ID_type_video Внешний ключ VARCHAR(45) Совпадения
для связи с допускаются
таблицей
«Т_пунктов»
video Видеоматериал LONGBLOB Совпадения
20
 допускаются
SQL листинг представлен ниже:
CREATE TABLE IF NOT EXISTS `museum`.`videos` (
`id_videos` INT NOT NULL AUTO_INCREMENT,
`title` TINYTEXT NOT NULL,
`description` LONGTEXT NOT NULL,
`ID_type_video` VARCHAR(45) NOT NULL,
`video` LONGBLOB NOT NULL,
PRIMARY KEY (`id_videos`),
INDEX `type_video_idx` (`ID_type_video` ASC) VISIBLE,
CONSTRAINT `type_video`
FOREIGN KEY (`ID_type_video`)
REFERENCES `museum`.`type_video` (`type_video`)
ON DELETE CASCADE
ON UPDATE CASCADE)
ENGINE = InnoDB;
Таблица «type_video» имеет 1 поле и предназначена для хранения
данных об типе видео. Состав и свойства полей для таблицы представлены в
таблице 2.3.
Таблица 2.3 – Состав полей и их свойств для таблицы «type_video»
Наименование Назначение Тип поля Свойства поля,
поля таблицы отличные от
заданных по
умолчанию
id_videos Первичный ключ VARCHAR(45) Совпадения не
допускаются
SQL листинг представлен ниже:
CREATE TABLE IF NOT EXISTS `museum`.`type_video` (
`type_video` VARCHAR(45) NOT NULL,
PRIMARY KEY (`type_video`),
UNIQUE INDEX `type_video_UNIQUE` (`type_video` ASC) VISIBLE)
ENGINE = InnoDB;
21
 2.2 Прототипирование интерфейса сайта
Структурная схема и карта навигации ИС:
Пользователь, зайдя на сайт, сразу попадает на главную страницу,
которая будет называться «новости» на данной странице находится вся
актуальная информация о музеи и событиях.
Через верхнее меню, состоящее из четырех текстовых ссылок, а
именно: «Новости», «Экспонаты», «Видеоматериалы» и «О нас»;
пользователь может перемещаться между соответствующими страницами
web-сайта.

Рисунок 2.2 – Карта навигации ИС

Ссылка «Экспонаты» переводит пользователя на страницу с
экспонатами, где находится галерея с картинками экспонатам, нажав на
которые открывается окно с 3D-моделью.
На странице «Видеоматериалы» пользователь может выбрать
интересующий его видеоролик, изучить интересующую информацию.
Страница «О нас» содержит всю информацию о музее, контактах,
местоположении и т.д.
Таблица 2.4 – Характеристика информационной системы
Название Характеристика Основные функции
информационной информационной системы информационной
системы системы
Структурированная
Информирование
информация о новостях:
Новости пользователей о новых
Заголовок, фотографии, видео,
событиях
текст
22
 Структурированная
информация об экспонатах:
Экспонаты Просмотр экспонатов
Заголовок, фотография, аудио,
текст, 3D-модель
Структурированная
информация о
Просмотр разных
Видеоматериалы видеоматериалах:
видеоматериалов
Заголовок, видеоматериал,
текст.
Основная информации
О нас Информация о музее
о сайте и музее

Таблица 2.5 – Разделы информационной системы и описание переходов

между ними
Роль Разделы, доступные для Описание условий
информационной выделенной роли перехода между
системы разделами
Новости
Экспонаты
Видеоматериалы Доступны всем пользователям Условий нет
О нас

23
 Рисунок 2.3 – Прототип вкладки «Новости»

Рисунок 2.4 – Прототип вкладки «Экспонаты»

Рисунок 2.5 – Прототип вкладки «Видеоматериалы»

Рисунок 2.6 – Прототип вкладки «Новости»

24
Таблица 2.6 – Описание элементов управления макета информационной
системы
Название элемента Условия
Тип Условия видимости
управления доступности
Кнопка перехода Ссылка перехода Виден всем Доступен всем
«Новости» по вкладкам пользователям пользователям
Кнопка перехода Ссылка перехода Виден всем Доступен всем
«Экспонаты» по вкладкам пользователям пользователям
Кнопка перехода Ссылка перехода Виден всем Доступен всем
«Видеоматериалы» по вкладкам пользователям пользователям
Кнопка перехода «О Ссылка перехода Виден всем Доступен всем
нас» по вкладкам пользователям пользователям
Выводы:
 Построена физическая модель данных. Нормализованная схема
данных состоит из 4 таблиц;
 Созданы карта навигации и 4 прототипа каждой страницы сайта
согласно техническому заданию.

25
 3 Разработка Веб-сайта
3.1 Дизайн сайта
Самое главное для сайта – это разработать удобный, понятный и
красивый интерфейс. Интерфейс – это то, что видит пользователь в браузере:
рамки, изображения, ссылки, надписи и т.д. В целях привлечения большего
числа клиентов и лучшего визуального восприятия сайта, необходимо
создать интерфейс максимально привлекательным и в то же время
максимально простым, чтобы комфортно пользоваться сайтом могли даже
неопытные пользователи. Также необходимо наполнить сайт информацией и
соответствующим контентом, для того, чтобы сделать сайт наиболее
информативным и привлекательным. Страницы создавались с помощью
редактора Visual code.
Начнём создание сайта с главной страницы. Главная страница - это
страница, на которую попадает пользователь, как только входит на сайт,
дизайн показан на рисунке 3.1. На ней должна предоставляться информация
о музее, о том, что есть на данном сайте. Также информация должна быть
подана в надлежащем виде.
Рисунок 3.1 – Главная страница сайта
Как видно, на главной странице сайта содержится самая главная
информация о центре фитнеса и красоты и её услугах
Следующая страница сайта - это страница «Новости», что показано на
рисунке 3.2. На этой странице располагается информация о новостях. Цель
данной страницы - познакомить клиента с последними новостями музея,
например, добавление нового экспоната, новости раскопок и т.д.
Рисунок 3.2 – Страница «Новости»
Следующая страница сайта «Экспонаты», представлена на рисунке 3.3.
На этой странице располагается галерея экспонатов, при нажатии на
экспонат, открывается его 3D-модель, что показано на рисунке 3.4. Цель
данной страницы - познакомить клиента с экспонатами, изучить их и другое.
Рисунок 3.3 – Страница «Экспонаты»
26
 Рисунок 3.4 – Модально окно с экспонатом
Последняя страница сайта «Видеоматериалы», представлена на
рисунке 3.5. На этой странице располагаются различные видеоматериалы,
такие как: лекции, видео с раскопок, интервью и другое. Цель данной
страницы – познакомить клиента с разными аспектами музея, особенно в
образовательной сфере.
Рисунок 3.5 – Страница «Видеоматериалы»
3.2 Использованные плагины при разработке проекта
Для верстки сайта использованы следующие плагины:
1) TailwindCSS – фреймворк для работы с CSS, позволяющий вносить
изменение в CSS прямо в HTML-разметке, при этом не используя тег <style>,
что упрощает верстку проектов [12].
2) Swiper.js – это сенсорный слайдер с аппаратным ускорением
переходов и нативным поведением, который позволяет создавать слайдеры
на странице сайта [13].
3) PostCSS – это инструмент Node.js который берет валидный CSS и
улучшает его. PostCSS – это синтаксический разборщик, который
токенизирует код CSS для создания абстрактного синтаксического дерева.
Плагины могут обработать это дерево и соответствующим образом обновить
свойства [14].
Для работы с JavaScript использованы следующие плагины:
1) Node.js – это приложение C++, которое получает на входе код
JavaScript и выполняет его. Чтобы взаимодействовать с устройствами ввода-
вывода на компьютере, в платформе предусмотрен собственный интерфейс
на C++. Таким образом, платформа превращает специализированный
скриптовый язык JavaScript в язык общего назначения, поэтому на Node.js
можно писать любые компьютерные программы. Node.js позволяет
пользоваться единым языком JavaScript для написания кода и на стороне
клиента, и на сервере [15].
2) Three.js – это кроссбраузерная JavaScript библиотека и API,
27
используемая для создания и отображения анимированной трехмерной
компьютерной графики в веб-браузере [16].
3.3 Верстка страниц и реализация JavaScript кода
В данной главе представлен основной код разработки проекта
С помощью фреймворка Vue3.js разработан скелет сайта с помощью
компонентов, в которых находится HTML и JavaScript, как показано на
рисунке 3.6.

Рисунок 3.6 – Скелет проекта на Vue.js

Основным компонентом является «App.vue», так как к ему
подключаются все остальные компоненты, на рисунке 3.7 представлен его
код.
Следующие компоненты являются страницами, на которых
располагается вся информация, листинг данных компонентов представлен в
приложении Б:
 BodyExhibitsPage – страница с экспонатами;

28
  BodyHomePage – главная страница;
 BodyNewsPage – страница с новостями;
 BodyVideoPage – страница с видеоматериалами.
SwiperComponent – компонент для реализации слайдера на странице
BodyHomePage.
Loading – компонент появляющийся при загрузке ModalWindow.
Exhibit – компонент для формирования галереи с 3D-моделями на
странице BodyExhibitsPage.
ModalVideoWindow – компонент для воспроизведения видеоролика

29
 Рисунок 3.7 – Листинг компонента «App.vue»
Header и Footer являются шапкой и подвалом сайта соответственно.
ModalWindow – компонент для реализации обработки 3D-моделей,
часть кода функции представлен на рисунке 3.8.

30
 Рисунок 3.8 – Листинг части кода для обработки 3D-моделей

Выводы:
 Разработан дизайн сайта, который соответствует техническому
заданию;
 Описаны плагины, использованные в разработке сайта, такие как:
TailwindCSS, Swiper.js, PostCSS, Node.js, Three.js;
 Описана часть кода HTML и JavaScript.

31
 ЗАКЛЮЧЕНИЕ
Поставленная в данной работе цель достигнута – разработан
информационный ресурс «Вириальный музей «Истории, археологии и
этнографии» на основе методологии функционального-структурного анализа
разработан и находится в рабочем состоянии, но для внедрения
информационный ресурс ещё не готов.
Все поставленные задачи выполнены:
1) Составлено техническое задание на выполнение курсовой работы. В
результате анализа предметной области была выявлена потребность в
создании информационной системы.
2) Построен бизнес-процесс «Заполнение сайта материалами», который
описывает модель работы с данными администратором сайта.
3) Собран материал по предметной области и проведен анализ по теме.
Определены границы информационной системы.
4) Реализована физическая модель: построены 4 таблицы с
измененными свойствами полей для того, чтобы улучшить работу и
уменьшить использования ресурсов памяти;
5) Созданы карта навигации сайта и прототипы страниц, по которым
последствии происходит разработка сайта. Разработан дизайн сайта по
техническому заданию, описаны все плагины, использованные в разработке
сайта и части кода HTML и JavaScript.

32
 СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1) Музей истории, археологии и этнографии [Электронный ресурс]
URL: http://iip.khsu.ru/structure/museum/ (дата обращения: 21.11.2022).
2) Что Такое MySQL: Объяснение MySQL Для Начинающих
[Электронный ресурс] URL: https://www.hostinger.ru/rukovodstva/shto-takoje-
mysql/ (дата обращения: 21.11.2022).
3) Введение в MS SQL Server и T-SQL: Что такое SQL Server и T-SQL
[Электронный ресурс] URL: https://metanit.com/sql/sqlserver/1.1.php (дата
обращения: 18.12.2022).
4) Что такое IBM® Db2®? [Электронный ресурс] URL:
https://www.ibm.com/ru-ru/analytics/db2 (дата обращения: 19.12.2022).
5) Skillfactory.БЛОГ: SQLite [Электронный ресурс] URL:
https://blog.skillfactory.ru/glossary/sqlite/ (дата обращения: 19.12.2022).
6) Compos: Microsoft Access для чайников – что это за программа и как
ей пользоваться [Электронный ресурс] URL: http://composs.ru/access-chto-eto-
za-programma/ (дата обращения: 20.12.2022).
7) Proglib: ТОП-10 IDE для Java-разработки [Электронный ресурс]
URL: https://proglib.io/p/top-10-ide-dlya-java-razrabotki-2022-10-20 (дата
обращения: 20.12.2022).
8) Континентсвободы.рф: MonoDevelop - Интегрированная Среда
Разработки [Электронный ресурс] URL:https://xn--90abhbolvbbfgb9aje4m.xn--
p1ai/monodevelop-integrirovannaya-sreda-razrabotki/ (дата обращения:
21.12.2022).
9) Microsoft: Добро пожаловать в интегрированную среду разработки
Visual Studio [Электронный ресурс] URL:
https://learn.microsoft.com/ru-ru/visualstudio/get-started/visual-studio-ide?
view=vs-2022 (дата обращения: 22.12.2022).
10) Mkdev Personal: Сравнение JavaScript фреймворков Vue.js, React и
Angular (2019) [Электронный ресурс] URL:

33
https://mkdev.me/ru/posts/sravnenie-javascript-freymvorkov-vue-js-react-i-
angular-2019 (дата обращения: 22.12.2022).
11) Верников Г. Основные методологии обследования организаций.
Стандарт IDEF0. [Электронный текст] / Г. Верников – URL:
https://www.cfin.ru/vernikov/idef/idef0.shtml (дата обращения: 23.12.2022).
12) Хабр: TailwindCSS – очередной фреймворк или новый шаг
эволюции? [Электронный ресурс] URL: https://habr.com/ru/post/508844/ (дата
обращения: 23.12.2022).
13) Хабр: Несколько интересностей и полезностей для веб-
разработчика #40 [Электронный ресурс] URL:
https://habr.com/ru/post/251759/ (дата обращения: 23.12.2022).
14) Teletype: Введение в PostCSS [Электронный ресурс] URL:
https://teletype.in/@budnifronta/ZYpNqR9Z1sl (дата обращения: 24.12.2022).
15) Skillfactory.БЛОГ: Node.js [Электронный ресурс] URL:
https://blog.skillfactory.ru/glossary/node-js/ (дата обращения: 24.12.2022).
16) Customizer Github: three.js справочное руководство [Электронный
ресурс] URL: https://customizer.github.io/three.js-doc.ru/three.js-ru.htm (дата
обращения: 25.12.2022).

34
ПРИЛОЖЕНИЕ А
Техническое задание

35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 ПРИЛОЖЕНИЕ Б
Листинг
1 листинг App:
<template>
<div class="bg-beige">
<GeneralHeader />
<GeneralFooter />
</div>
</template>

<script>
import GeneralHeader from "./components/Header.vue";
import GeneralFooter from "./components/Footer.vue";

export default {
name: "App",
components: {
GeneralHeader,
GeneralFooter,
},
};
</script>
2 листинг BodyExhibitsPage:
<template>
<section class="text-gray-600 body-font">
<div class="container px-5 py-6 mx-auto">
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
<exhibit
v-for="exhibit in exhibits"
:key="exhibit.id"
:exhibit_data="exhibit"
@showModalExhibit="showModal"
>
</exhibit>
</div>
</div>
</section>
<Suspense v-if="VisibleModal">
<template #default>
<ModalWindow @close="closeModal" :model="modelSrc" />
</template>
<template #fallback>
<Loading />
</template>
</Suspense>
</template>

<script>
55
import Loading from "./Loading.vue";
import { defineAsyncComponent } from "vue";
import Exhibit from "./Exhibit.vue";
import axios from "axios";

const ModalWindow = defineAsyncComponent({

loader: () => import("./ModalWindow.vue"),
loadingComponent: Loading,
});
export default {
name: "BodyExhibitsPage",

components: {
ModalWindow,
Loading,
Exhibit,
},
data() {
return {
VisibleModal: false,
exhibits: null,
modelSrc: null,
};
},
methods: {
showModal(model) {
this.VisibleModal = true;
this.modelSrc = model;
},
closeModal() {
this.VisibleModal = false;
},
},
created() {
axios
.get("http://localhost:3000/exhibits")
.then((response) => {
this.exhibits = response.data;
console.log(this.exhibits);
})
.catch((error) => {
console.log(error);
});
},
};
</script>
3 листинг BodyHomePage:
<template>
<section class="text-gray-600 body-font">
<SwiperComponent />
56
 </section>
<div class="container max-w-4xl mx-auto py-20 px-5 md:py-5">
<ul>
<li>
<p class="pt-4 md:pt-2 text-xl">
Музей истории, археологии и этнографии каб. 510, 512, 514, 516, 521,
421
</p>
</li>
<li>
<p class="pt-4 md:pt-2 text-xl">Заказ экскурсий: 8-961-740-58-22</p>
</li>
<li>
<p class="pt-4 md:pt-2 text-xl">E-mail: apograv@yandex.ru</p>
</li>
<li>
<p class="pt-4 md:pt-2 text-xl">
Заведующий музеем – Поселянин Александр Иванович, кандидат
исторических наук, доцент кафедры всеобщей истории.
</p>
</li>
</ul>
<p class="pt-4 md:pt-2 text-xl">
Музей истории, археологии и этнографии был основан 9 октября 2003 года
сотрудниками кафедры археологии, этнографии и исторического краеведения.
Музей ИИП ХГУ им. Н.Ф. Катанова имеет статус учебного музея. Главная
задача учебного историко-этнографического музея – обеспечение многообразия
содержания образовательного процесса.
</p>
</div>
<section>
<div
class="bg-fixed"
style="background-image: url('img/Петроглифы/Петроглифы.jpg')"
>
<ul
class="py-20 px-32 flex justify-between md:flex-none items-center
invisible md:visible"
>
<li
class="h-36 w-36 md:h-20 md:w-20"
style="
background-image: url('img/Петроглифы/free-icon-lightning.png');
background-size: cover;
"
></li>
<li
class="h-36 w-36 md:h-20 md:w-20"
style="
background-image: url('img/Петроглифы/free-icon-sun.png');
background-size: cover;
57
 "
></li>
<li
class="h-36 w-36 md:h-20 md:w-20"
style="
background-image: url('img/Петроглифы/free-icon-triskele.png');
background-size: cover;
"
></li>
<li
class="h-36 w-36 md:h-20 md:w-20"
style="
background-image: url('img/Петроглифы/free-icon-wind.png');
background-size: cover;
"
></li>
</ul>
</div>
</section>
<div class="container max-w-4xl mx-auto py-20 px-5 md:py-10">
<p class="pt-4 md:pt-2 text-xl">
Музей истории, археологии и этнографии был основан 9 октября 2003 года
сотрудниками кафедры археологии, этнографии и исторического краеведения.
Музей ИИП ХГУ им. Н.Ф. Катанова имеет статус учебного музея. Главная
задача учебного историко-этнографического музея – обеспечение многообразия
содержания образовательного процесса.
</p>
<p class="pt-4 md:pt-2 text-xl">
Особую роль музей играет в подготовке студентов направления «История», для
которых он является необходимой учебной и научной базой, а также для
других студентов ХГУ, проявляющих повышенный интерес к истории региона. В
музее проводятся лекции, семинарские и лабораторные занятия по археологии,
этнографии и историческому краеведению. Представленные в музее экспонаты
уникальны и являются необходимым наглядным материалом в учебном процессе.
</p>
<p class="pt-4 md:pt-2 text-xl">
В музее представлены артефакты в хронологическом диапазоне от эпохи
каменного века и до середины ХХ века. Все археологические и
этнографические экспонаты собраны преподавателями и студентами ИИП ХГУ во
время летних полевых практик. Работа музея направлена на приобщение
студентов к традиционным культурным ценностям нашего региона. Посетители
музея знакомятся с хакасскими национальными традициями, убранством юрты,
хакасским музыкальным творчеством, самобытным национальным костюмом.
</p>
<p class="pt-4 md:pt-2 text-xl">
На базе музея открылся и стабильно функционирует этнографо-археологический
кружок. На заседаниях кружка со студентами углубленно изучаются методы
формально-типологического анализа археологических материалов. Также
проводятся практические занятия по камеральной обработке полевых
материалов. Музей привлекает внимание не только представителей науки
Республики Хакасия, но и студентов ведущих российских вузов, таких как
58
 СПГУ, ТГУ, МГИМО, а так же ученых из-за рубежа – Голландии, Турции, Китая,
посетивших музей и оставивших положительные отзывы. В настоящее время
проводится работа по обновлению экспозиций музея, приданию музею статуса
структурного подразделения при Институте истории и права, включению
экспонатов в Государственную часть Музейного фонда РФ.
</p>
</div>
</template>

<script>
import SwiperComponent from "./SwiperComponent.vue";

export default {
name: "BodyHomePage",
components: {
SwiperComponent,
},
};
</script>
4 листинг BodyNewsPage:
<template>
<div class="container px-5 py-5 mx-auto">
<article class="flex my-6 py-2 bg-white transition hover:shadow-xl">
<div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
<time
datetime="2022-10-10"
class="flex items-center justify-between gap-4 text-xs font-bold
uppercase text-gray-900"
>
<span>2022</span>
<span class="w-px flex-1 bg-gray-900/10"></span>
<span>Окт 10</span>
</time>
</div>

<div class="hidden sm:block sm:basis-56">

<img
alt="Guitar"
src="/img/News/Новость 3.jpg"
class="aspect-square h-full w-full object-cover"
/>
</div>

<div class="flex flex-1 flex-col justify-between">

<div class="p-4 sm:p-6">
<a href="#">
<h3 class="font-bold uppercase text-gray-900">
Хакасия в составе Российской империи
</h3>
</a>
59
 <p class="mt-2 text-sm leading-relaxed text-gray-700 line-clamp-3">
В XVII веке русские застали Хонгорай в виде конфедерации, состоящей
из четырёх улусов: Алтырского, Алтысарского, Исарского (Езерского) и
Тубинского, населённых предками современных хакасов, шорцев,
телеутов, алтайцев и тувинцев. Другая часть кыргызов несколькими
волнами мигрировала на Тянь-Шань начиная с середины IX века, с эпохи
Кыргызского великодержавия, вплоть до середины XIII века.
</p>
</div>
<div class="sm:flex sm:items-end sm:justify-end">
<button
@click="showModal"
class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold
uppercase text-gray-900 transition hover:bg-yellow-400"
>
Посмотреть видео
</button>
</div>
</div>
</article>
<article class="flex my-6 py-2 bg-white transition hover:shadow-xl">
<div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
<time
datetime="2022-10-10"
class="flex items-center justify-between gap-4 text-xs font-bold
uppercase text-gray-900"
>
<span>2022</span>
<span class="w-px flex-1 bg-gray-900/10"></span>
<span>Окт 10</span>
</time>
</div>

<div class="hidden sm:block sm:basis-56">

<img
alt="Guitar"
src="/img/News/Новость 1.jpg"
class="aspect-square h-full w-full object-cover"
/>
</div>

<div class="flex flex-1 flex-col justify-between">

<div class="p-4 sm:p-6">
<a href="#">
<h3 class="font-bold uppercase text-gray-900">
Интересные факты о Хакасии
</h3>
</a>

<p class="mt-2 text-sm leading-relaxed text-gray-700 line-clamp-3">

60
 Площадь Хакасии лишь слегка превышает 61.500 км², что меньше
площади, скажем, Индии, примерно в 50 раз. Да и народу тут живёт
мало, немногим более 500.000 человек, примерно столько же, сколько в
Астрахани или в Пензе. Просто две трети территории республики
приходится на Саянские горы, в которых населения практически нет.
</p>
</div>
<div class="sm:flex sm:items-end sm:justify-end">
<button
@click="showModal"
class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold
uppercase text-gray-900 transition hover:bg-yellow-400"
>
Посмотреть видео
</button>
</div>
</div>
</article>
<article class="flex my-6 py-2 bg-white transition hover:shadow-xl">
<div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
<time
datetime="2022-10-10"
class="flex items-center justify-between gap-4 text-xs font-bold
uppercase text-gray-900"
>
<span>2022</span>
<span class="w-px flex-1 bg-gray-900/10"></span>
<span>Окт 10</span>
</time>
</div>

<div class="hidden sm:block sm:basis-56">

<img
alt="Guitar"
src="/img/News/Новость 2.jpg"
class="aspect-square h-full w-full object-cover"
/>
</div>

<div class="flex flex-1 flex-col justify-between">

<div class="p-4 sm:p-6">
<a href="#">
<h3 class="font-bold uppercase text-gray-900">
Историческое развитие
</h3>
</a>

<p class="mt-2 text-sm leading-relaxed text-gray-700 line-clamp-3">

Историческое развитие народов Хакасии протекало в относительно
благоприятных климатических условиях, в его ходе создано уникальное
культурное наследие, представляющее бесценный ресурс для развития
61
 региона. Основу культурного наследия Хакасии составляют
природно-археологические ландшафты, составленные из десятков тысяч
археологических объектов.
</p>
</div>
<div class="sm:flex sm:items-end sm:justify-end">
<button
class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold
uppercase text-gray-900 transition hover:bg-yellow-400"
>
Посмотреть видео
</button>
</div>
</div>
</article>
</div>
</template>

<script>
export default {
name: "BodyNewsPage",
};
</script>
5 листинг BodyVideoPage:
<template>
<div class="container px-5 py-5 mx-auto">
<article class="flex my-6 py-2 bg-white transition hover:shadow-xl">
<div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
<time
datetime="2022-10-10"
class="flex items-center justify-between gap-4 text-xs font-bold
uppercase text-gray-900"
>
<span>2022</span>
<span class="w-px flex-1 bg-gray-900/10"></span>
<span>Окт 10</span>
</time>
</div>

<div class="hidden sm:block sm:basis-56">

<img
alt="Guitar"
src="/img/News/Новость 1.jpg"
class="aspect-square h-full w-full object-cover"
/>
</div>

<div class="flex flex-1 flex-col justify-between">

<div class="p-4 sm:p-6">
<a href="#">
62
 <h3 class="font-bold uppercase text-gray-900">
Интересные факты о Хакасии
</h3>
</a>

<p class="mt-2 text-sm leading-relaxed text-gray-700 line-clamp-3">

Площадь Хакасии лишь слегка превышает 61.500 км², что меньше
площади, скажем, Индии, примерно в 50 раз. Да и народу тут живёт
мало, немногим более 500.000 человек, примерно столько же, сколько в
Астрахани или в Пензе. Просто две трети территории республики
приходится на Саянские горы, в которых населения практически нет.
</p>
</div>
<div class="sm:flex sm:items-end sm:justify-end">
<button
@click="showModal"
class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold
uppercase text-gray-900 transition hover:bg-yellow-400"
>
Посмотреть видео
</button>
</div>
</div>
</article>
<article class="flex my-6 py-2 bg-white transition hover:shadow-xl">
<div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
<time
datetime="2022-10-10"
class="flex items-center justify-between gap-4 text-xs font-bold
uppercase text-gray-900"
>
<span>2022</span>
<span class="w-px flex-1 bg-gray-900/10"></span>
<span>Окт 10</span>
</time>
</div>

<div class="hidden sm:block sm:basis-56">

<img
alt="Guitar"
src="/img/News/Новость 2.jpg"
class="aspect-square h-full w-full object-cover"
/>
</div>

<div class="flex flex-1 flex-col justify-between">

<div class="p-4 sm:p-6">
<a href="#">
<h3 class="font-bold uppercase text-gray-900">
Историческое развитие
</h3>
63
 </a>

<p class="mt-2 text-sm leading-relaxed text-gray-700 line-clamp-3">

Историческое развитие народов Хакасии протекало в относительно
благоприятных климатических условиях, в его ходе создано уникальное
культурное наследие, представляющее бесценный ресурс для развития
региона. Основу культурного наследия Хакасии составляют
природно-археологические ландшафты, составленные из десятков тысяч
археологических объектов.
</p>
</div>
<div class="sm:flex sm:items-end sm:justify-end">
<button
@click="showModal"
class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold
uppercase text-gray-900 transition hover:bg-yellow-400"
>
Посмотреть видео
</button>
</div>
</div>
</article>
<article class="flex my-6 py-2 bg-white transition hover:shadow-xl">
<div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
<time
datetime="2022-10-10"
class="flex items-center justify-between gap-4 text-xs font-bold
uppercase text-gray-900"
>
<span>2022</span>
<span class="w-px flex-1 bg-gray-900/10"></span>
<span>Окт 10</span>
</time>
</div>

<div class="hidden sm:block sm:basis-56">

<img
alt="Guitar"
src="/img/News/Новость 3.jpg"
class="aspect-square h-full w-full object-cover"
/>
</div>

<div class="flex flex-1 flex-col justify-between">

<div class="p-4 sm:p-6">
<a href="#">
<h3 class="font-bold uppercase text-gray-900">
Хакасия в составе Российской империи
</h3>
</a>

64
 <p class="mt-2 text-sm leading-relaxed text-gray-700 line-clamp-3">
В XVII веке русские застали Хонгорай в виде конфедерации, состоящей
из четырёх улусов: Алтырского, Алтысарского, Исарского (Езерского) и
Тубинского, населённых предками современных хакасов, шорцев,
телеутов, алтайцев и тувинцев. Другая часть кыргызов несколькими
волнами мигрировала на Тянь-Шань начиная с середины IX века, с эпохи
Кыргызского великодержавия, вплоть до середины XIII века.
</p>
</div>
<div class="sm:flex sm:items-end sm:justify-end">
<button
@click="showModal"
class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold
uppercase text-gray-900 transition hover:bg-yellow-400"
>
Посмотреть видео
</button>
</div>
</div>
</article>
</div>
<Suspense v-if="VisibleModal">
<template #default>
<ModalVideoWindow @close="closeModal" :model="modelSrc" />
</template>
<template #fallback>
<Loading />
</template>
</Suspense>
</template>

<script>
import Loading from "./Loading.vue";
import { defineAsyncComponent } from "vue";

const ModalVideoWindow = defineAsyncComponent({

loader: () => import("./ModalVideoWindow.vue"),
loadingComponent: Loading,
});
export default {
name: "BodyVideoPage",
components: {
ModalVideoWindow,
Loading,
},
data() {
return {
VisibleModal: false,
};
},
methods: {
65
 showModal() {
this.VisibleModal = true;
},
closeModal() {
this.VisibleModal = false;
},
},
};
</script>
6 листинг SwiperComponent:
<template>
<swiper
class="swiper mt-5"
:modules="modules"
:swiper-component="3"
:space-between="30"
:centered-slides="true"
:navigation="true"
:autoplay="{
delay: 2500,
disableOnInteraction: false,
}"
>
<swiper-slide>
<img
class="w-full m-0 p-0 bg-cover bg-bottom"
src="/img/Swiper 1.jpg"
alt="альтернативный текст"
/>
</swiper-slide>
<swiper-slide>
<img
class="w-full m-0 p-0 bg-cover bg-bottom"
src="/img/Swiper 2.jpg"
alt="альтернативный текст"
/>
</swiper-slide>
<swiper-slide>
<img
class="w-full m-0 p-0 bg-cover bg-bottom"
src="/img/Swiper 3.jpg"
alt="альтернативный текст"
/>
</swiper-slide>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Autoplay } from "swiper";

66
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
export default {
name: "SwiperComponent",
components: {
Swiper,
SwiperSlide,
},
setup() {
return {
modules: [Navigation, Autoplay],
};
},
};
</script>
7 листинг Loading:
<template>
<div
class="m-auto h-full w-full fixed flex items-center z-1 inset-0 bg-black bg-
opacity-50"
>
<div class="container m-auto h-5/6 w-5/6 flex z-2 inset-0 bg-[#CCCCCC]">
<p>Loading</p>
</div>
</div>
</template>

<script>
export default {
name: "GeneralLoading",
};
</script>
8 листинг Exhibit:
<template>
<div class="p-4 md:w-1/3 sm:mb-0 mb-6">
<button
@click="showModalExhibit"
class="rounded-lg h-64 w-full overflow-hidden"
>
<img
alt="content"
class="object-cover object-center h-full w-full"
:src="exhibit_data.image"
/>
</button>
<h2 class="text-xl font-medium title-font text-gray-900 mt-5">
{{ exhibit_data.title }}
</h2>
67
 <p class="text-base leading-relaxed mt-2">
{{ exhibit_data.description }}
</p>
<a class="text-indigo-500 inline-flex items-center mt-3"
>Узнать больше
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</template>

<script>
export default {
name: "ExhibitId",
props: {
exhibit_data: {
type: Object,
required: true,
},
},
methods: {
showModalExhibit() {
this.$emit("showModalExhibit", this.exhibit_data.model);
},
},
};
</script>
9 листинг ModalWindow:
<template>
<div
class="m-auto h-full w-full fixed flex items-center z-1 inset-0 bg-black bg-
opacity-50"
type="button"
@click.self="close"
>
<div class="container m-auto h-5/6 w-5/6 flex z-2 inset-0 bg-[#CCCCCC]">
<div id="containerthree"></div>
</div>
</div>
</template>

68
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";

export default {
name: "ModalWindow",
props: {
model: {
type: String,
required: true,
},
},
methods: {
close() {
this.$emit("close");
},
init() {
const container = document.getElementById("containerthree");
const scene = new THREE.Scene();

//const light = new THREE.PointLight();

//light.position.set(2, 7, 4);
//scene.add(light);

const ambientLight = new THREE.AmbientLight(0xffffff, 4);

scene.add(ambientLight);

const camera = new THREE.PerspectiveCamera(

90,
container.clientWidth / container.clientHeight,
1,
300
);
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

controls.enableDamping = true;
controls.target.set(0, 0, 0);

var sizeBound = new THREE.Vector3(20, 20, 20);

const Loader = new FBXLoader();

Loader.load(
this.model,
(object) => {
scaleToFit(object, sizeBound); // умещаем в заданные размеры
69
 let b = new THREE.Box3().setFromObject(object);
object.position.sub(b.getCenter(sizeBound)); // центрируем

scene.add(object);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
(error) => {
console.log(error);
}
);
scene.background = new THREE.Color("#CCCCCC");

container.addEventListener("resize", onWindowResize, false);

function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
render();
}

function scaleToFit(obj, bound) {

let box = new THREE.Box3().setFromObject(obj);
let size = new THREE.Vector3();
box.getSize(size);
let vScale = new THREE.Vector3().copy(bound).divide(size);
let scale = Math.min(vScale.x, Math.min(vScale.y, vScale.z));
obj.scale.setScalar(scale);
}
function animate() {
requestAnimationFrame(animate);

controls.update();

render();
}

function render() {
renderer.render(scene, camera);
}

animate();
},
},
mounted() {
this.init();
},
};
</script>
70
<style scoped>
#containerthree {
height: 100%;
width: 100%;
}
</style>
10 листинг Header:
<template>
<div
class="w-full m-0 p-0 bg-cover bg-bottom"
style="
background-image: url('img/hakasiya.jpg');
height: 60vh;
max-height: 300px;
"
>
<div
class="container max-w-4xl mx-auto pt-28 md:pt-14 text-center break-
normal"
>
<!--Title-->
<div class="text-white font-extrabold text-3xl md:text-5xl">
Музей истории, археологии и этнографии
</div>
</div>
</div>

<!--Container-->
<div class="container -mt-16 md:px-0 max-w-6xl mx-auto">
<div class="mx-0 sm:mx-6">
<!--Nav-->
<nav class="mt-0 w-full">
<div
class="container bg-white mx-auto flex items-center justify-center
text-sm rounded-lg"
>
<ul
class="my-2 list-reset flex justify-between flex-1 md:flex-none
items-center"
>
<button
class="inline-block py-2 px-2 text-gray-600 hover:text-gray-400
no-underline hover:underline"
v-for="navs in nav_sel"
:key="navs.id"
@click="selected = navs.nsel"
>
{{ navs.title }}
</button>
</ul>
71
 </div>
</nav>
</div>
</div>
<BodyHomePage v-if="selected === 'BodyHomePage'" />
<BodyNewsPage v-if="selected === 'BodyNewsPage'" />
<BodyExhibitsPage v-if="selected === 'BodyExhibitsPage'" />
<BodyVideoPage v-if="selected === 'BodyVideoPage'" />
</template>

<script>
import BodyHomePage from "./BodyHomePage.vue";
import BodyNewsPage from "./BodyNewsPage.vue";
import BodyVideoPage from "./BodyVideoPage.vue";
import BodyExhibitsPage from "./BodyExhibitsPage.vue";

export default {
name: "GeneralHeader",
components: {
BodyHomePage,
BodyNewsPage,
BodyVideoPage,
BodyExhibitsPage,
},
data() {
return {
selected: "BodyHomePage",
nav_sel: [
{ id: 1, title: "Главная", nsel: "BodyHomePage" },
{ id: 2, title: "Новости", nsel: "BodyNewsPage" },
{ id: 3, title: "Экспонаты", nsel: "BodyExhibitsPage" },
{ id: 4, title: "Видеоматериалы", nsel: "BodyVideoPage" },
],
};
},
};
</script>
11 листинг Footer:
<template>
<footer class="text-gray-600 body-font">
<div
class="container px-5 pb-4 pt-8 mx-auto flex flex-center justify-center
md:items-center lg:items-center md:flex-center"
>
<div
class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:items-center"
>
<a
class="flex title-font font-medium items-center md:justify-center
justify-center text-gray-900"
72
 >
<span class="text-xl">
<font style="vertical-align: inherit">
<font style="vertical-align: inherit"
>Музей истории, археологии и этнографии</font
>
</font>
</span>
</a>
</div>
</div>
<div class="bg-gray-100">
<div
class="container mx-auto py-4 px-10 flex flex-wrap flex-col sm:flex-row"
>
<p class="text-gray-500 text-sm text-center sm:text-left">
<font style="vertical-align: inherit">
<font style="vertical-align: inherit">© 2022 ХГУ — </font>
</font>
<a
href="https://twitter.com/knyttneve"
rel="noopener noreferrer"
class="text-gray-600 ml-1"
target="_blank"
>
<font style="vertical-align: inherit">
<font style="vertical-align: inherit">apograv@yandex.ru</font>
</font>
</a>
</p>
<span
class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-
start"
>
<a class="text-gray-500">
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path
d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-
1h3z"
></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg
73
 fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66
10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0
00-.08-.83A7.72 7.72 0 0023 3z"
></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path
d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"
></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg
fill="currentColor"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="0"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path
stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6
6 0 016-6zM2 9h4v12H2z"
></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</div>
74
 </footer>
</template>

<script>
export default {
name: "GeneralFooter",
};
</script>
12 листинг ModalVideoWindow:
<template>
<div
class="m-auto h-full w-full fixed flex items-center z-1 inset-0 bg-black bg-
opacity-50"
type="button"
@click.self="close"
>
<div class="container m-auto h-5/6 w-5/6 flex z-2 inset-0">
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/uGkDlDe6BbM?autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</template>

<script>
export default {
name: "ModalVideoWindow",
methods: {
close() {
this.$emit("close");
},
},
};
</script>

75