ДИПЛОМ

Федеральное государственное бюджетное образовательное учреждение
высшего образования
«ХАКАССКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ им. Н.Ф. КАТАНОВА»
Инженерно-технологический институт
Кафедра цифровых технологий и дизайна
Направление подготовки 09.03.02 «Информационные системы и технологии»

Профиль «Информационные и коммуникационные системы»
РАЗРАБОТКА САЙТА ВИРТУАЛЬНОГО МУЗЕЯ ИСТОРИИ, АРХЕОЛОГИИ И

ЭТНОГРАФИИ ФГБОУ ВО ХГУ ИМ. Н.Ф. КАТАНОВА
ВЫПУСКНАЯ
КВАЛИФИКАЦИОННАЯ РАБОТА
Обучающийся Беккер Валентин Эдуардович

(ФИО)
Научный руководитель
Яковлев Дмитрий Александрович, старший
преподаватель
(ФИО, ученая степень, ученое звание)
Абакан, 2023
«ХАКАССКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ им. Н.Ф. КАТАНОВА»
Направление подготовки 09.03.02 «Информационные системы и технологии»

Профиль «Информационные и коммуникационные системы»
РАЗРАБОТКА САЙТА ВИРТУАЛЬНОГО МУЗЕЯ ИСТОРИИ, АРХЕОЛОГИИ И

ЭТНОГРАФИИ ФГБОУ ВО ХГУ ИМ. Н.Ф. КАТАНОВА
ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА
Обучающийся-дипломник _____________ В.Э. Беккер

(подпись) (ФИО)
Научный руководитель _____________ Д.А. Яковлев

Нормоконтролер _____________ О.Л. Мельникова

«ДОПУСТИТЬ К ЗАЩИТЕ»
И.о. зав. кафедрой ЦТиД
_____________ О.Л. Мельникова
«_____» _________________2023г.
Абакан, 2023
РЕФЕРАТ
Пояснительная записка КР 51 с. без учета приложений, 20 рис., 14
табл., 20 источников, 5 прил.
ВИРТУАЛЬНЫЙ МУЗЕЙ, САЙТ, ИНСТИТУТ,
Объект исследования: процесс просмотра экспонатов: их фотографии и
3D-модели, новости, информацию проводимых раскопок, их видео и фото
материалы. Предмет исследования: разработка информационной системы
виртуального музея на основе методологии структурно-функционального
анализа. Цель курсовой работы: развитие электронно-информационно-
образовательной среды вуза за счет разработки и внедрения вириального
музея. Методы исследования: наблюдение за процессом работы,
сравнительный анализ ПО, анализ предметной области, моделирование
бизнес-процессов. Результаты, полученные в ходе выполнения работы, могут
использованы любым человеком.
ABSTRACT
Explanatory note CW 51 p. excluding applications, 20 drawings, 14 tables,
20 sources, 5 appendix.
VIRTUAL MUSEUM, SITE, INSTITUTE,
Object of study: the process of viewing exhibits: their photographs and 3D
models, news, information about ongoing excavations, their video and photo
materials. Subject of study: development of an information system for a virtual
museum based on the methodology of structural and functional analysis. The
purpose of the course work: the development of the electronic information and
educational environment of the university through the development and
implementation of the virial museum. Research methods: monitoring the process
of work, comparative analysis of software, analysis of the subject area, modeling
of business processes. The results obtained in the course of the work can be used
by anyone.
ПЕРЕЧЕНЬ УСЛОВНЫХ ОБОЗНАЧЕНИЙ, СИМВОЛОВ,
СКОРАЩЕНИЙ, ТЕРМИНОВ
API – Application Programming Interface
CSS – Cascading Style Sheets
DOM – Document Object Model
HTML – HyperText Markup Language
JS – JavaScript
MS – Microsoft
MVVM – Model-View-ViewModel
PHP – Personal Home Page
SQL – Structured Query Language
БД – База данных
СУБД – Система управления базами данных
СУРБД – Система управления распределенными базами данных
СОДЕРЖАНИЕ
ВВЕДЕНИЕ..............................................................................................................6
1 АНАЛИЗ ИНФОРМАЦИОННОЙ СИСТЕМЫ МУЗЕЯ ИСТОРИИ,
АРХЕОЛОГИИ И ЭТНОГРАФИИ........................................................................8
1.1 Характеристика организации музей истории, археологии и
этнографии...............................................................................................................8
1.2 Анализ информационных технологий и инструментальных средств
реализации проекта...............................................................................................12
1.3 Анализ бизнес-процесса «Проведение экскурсии в музее истории,
археологии и этнографии»....................................................................................17
2 РАЗРАБОТКА САЙТА ВИРТУАЛЬНОГО МУЗЕЯ ИСТОРИИ,
АРХЕОЛОГИИ И ЭТНОГРАФИИ......................................................................22
2.1 Постановка задачи проектирования и обоснование проектных
решений..................................................................................................................22
2.2 Разработка информационной системы виртуального музея...............25
2.3 Смета затрат.............................................................................................40
ЗАКЛЮЧЕНИЕ.....................................................................................................43
БИБЛИОГРАФИЧЕСКИЙ СПИСОК..................................................................44
ПРИЛОЖЕНИЕ А.................................................................................................46
ПРИЛОЖЕНИЕ Б..................................................................................................48
ПРИЛОЖЕНИЕ В.................................................................................................69
ПРИЛОЖЕНИЕ Г..................................................................................................90
ПРИЛОЖЕНИЕ Д.................................................................................................93
7
ВВЕДЕНИЕ
В наше время представить любое предприятие, организацию,
популярную личность без своего сайта, профиля в соцсетях или
мессенджеров невозможно, они позволяют увеличить охват
потребительского спроса и оставить постоянный контакт.
В нашем случае необходим ресурс для музея «Истории, археологии и
этнографии», чтобы демонстрировать 3D-модели экспонатов, а также другие
материалы из музея, например, фотографии экспонатов древних культур,
новости, информацию проводимых раскопок, их видео и фото материалы.
Основываясь на вышесказанном – сайт является одним из самых
многофункциональных систем, так как на нём можно размещать всю
необходимую информацию, а также внедрять js-код для разных
функциональных возможностей, которые нельзя сделать в соцсетях и
мессенджерах.
Актуальность темы заключается в том, что разработанный
виртуальный музей демонстрирует и сохраняет в базе данных 3D-модели
экспонатов музея и информацию о них, что позволяет хранить большое
количество времени, так как экспонаты в музее института находятся не более
трех лет, а также данный сайт демонстрирует иную информацию такую, как
новости, данные проводимых раскопок, разные видео и фото материалы.
Объектом исследования является процесс просмотра экспонатов, их
фотографии и 3D-модели, новости, информацию проводимых раскопок, их
видео и фото материалы.
Предметом исследования является разработка сайта виртуального
музея на основе методологии структурно-функционального анализа.
Цель: развитие электронно-информационно-образовательной среды
вуза за счет разработки и внедрения вириального музея.
В соответствии с целью были поставлены следующие задачи:
8
1) собрать и изучить информацию о предметной области;
2) реализовать физическую модель базы данных и разработать веб-
сайта виртуального музея;
3) составить экономическую эффективность разработанного
программного продукта.
При изучении и обработке данных использовались такие методы
исследования:
Эмпирические: наблюдение за процессом работы «Музея истории,
археологии и этнографии», сравнительный анализ ПО, изучение источников
литературы.
Теоретические: анализ предметной области по теме курсовой работы,
моделирование бизнес-процессов.
Практическая значимость заключается в том, что созданный
виртуальный музей будет содержать в себе фотографии экспонатов древних
культур, их 3D-модели, новости, проводимые раскопки, видео и фото
материалы, что обеспечит развитие информационно-образовательной седы
вуза, так же позволит обеспечить новый уровень информационного
обеспечения учебного процесса.
В качестве внедрения базы планируются Институт истории и права
(ИИиП).
9
1 АНАЛИЗ ИНФОРМАЦИОННОЙ СИСТЕМЫ МУЗЕЯ ИСТОРИИ,
АРХЕОЛОГИИ И ЭТНОГРАФИИ
1.1 Характеристика организации музей истории, археологии и
этнографии
высшего образования «Хакасский государственный университет им. Н. Ф.
Катанова», Институт истории и права, музей истории, археологии и
этнографии.
Территориальное расположение организации: 655017, Республика
Хакасия, город Абакан, проспект Ленина, д. 92/1, каб. 510, 512, 514, 516, 521,
421
Музей является учебным структурным подразделением Института,
выполняющим учебные функции. Музей создан на основании Решения
Ученого Совета Хакасского государственного университета им. Н.Ф.
Катанова [1].
Организационная структура и задачи функционирования
На рисунке 1.1 представлена организационная структура музея, в
которой указаны основные структурные подразделения, взаимодействующие
с музеем.
Дирекция ИИиП
Директор
Музей истории, археологии и этнографии
Заведующий музеем
Представители музея (преподаватели, лаборанты, студенты)
Рисунок 1.1 – Организационная структуры музея истории, археологии и

этнографии
10
В таблице 1.1 представлены функции должностных лиц, которые
расположены в организационной структуре.
Таблица 1.1 – Функции должностных лиц
Должность Функция
Директор высшая административная должность факультета в
учреждении высшего образования; непосредственно руководит
административной организационной деятельностью по
ведению учебной, воспитательной и научной работы на
кафедре.
Заведующий музеем руководитель музея. Заведующий музеем несёт персональную
ответственность за организацию различных мероприятий и
иных работ в музее, подчиняется напрямую директору
института
Рредставители музея коллектив наполняющий базу музея экспонатами
(преподаватели,
лаборанты, студенты)
Внешние связи
Бухгалтерия и отдел кадров Университета

Административные органы Университета
Образовательные учреждения Хакасии и других субъе
Колледжи и институты университета
Рисунок 1.2 – Внешние связи музея истории, археологии и этнографии

Внешняя связь с Бухгалтерией, которая выделяет необходимые
денежные средства для музея истории, археологии и этнографии, а отдел
кадров урегулирует нормативно-правовые договора между сотрудниками и
Университетом. Студенты колледжей и институтов университета
пользуются материальной базой музея. Связь с административными
органами университета, необходима для урегулирования прав и
обязанностей внутри вуза, а также иных функций.
11
Внешняя связь с Образовательными учреждениями Хакасии и
других субъектов РФ:
Необходима для привлечения школьников и студентов в
университет, путем организации экскурсий или иных мероприятий на базе
музея истории, археологии и этнографии.
В рамках курсовой работы рассмотрим следующий бизнес-процесс
организации «Просмотр экспонатов». Данный бизнес-процесс выполняется
музеем в рамках экскурсий.
В данном бизнес-процессе участвует заведующий музеем, который
организует различные экскурсии.
Функции заведующего музеем:
 организует планирование деятельности Музея,
 принимает участие в развитии и укреплении учебно-материальной
базы Музея,
 ежегодно отчитывается о деятельности Музея перед Ученым советом
Института,
 обеспечивает меры по соблюдению требований правил по охране
труда и пожарной безопасности,
 представляет музей в пределах своей компетенции в университете и
за его пределами.
В данном проекте необходимо разработать образовательный сайт –
виртуальный музей, который является электронным средством обучения –
программное средство, в которых отражается некоторая предметная область,
в той или иной мере реализуется технология ее изучения средствами
информационно-коммуникационных технологий, обеспечиваются условия
для осуществления различных видов учебной деятельности.
К Электронным средствам обучения относятся такие программные
средства:
12
− электронные учебники,
− электронные учебные пособия,
− образовательные сайты Интернета,
− электронные книги (издания).
Виртуальный музей является сайтом – это структурированная
специальным образом информация, которая размещена на сервере и является
открытой пользователям сети как для свободного, так и для авторизуемого
или ограниченного доступа.
Сам виртуальный музей является собранием Web-страниц,
расположенных на одном или нескольких Web-серверах, содержащих
каталоги и фотографии экспонатов из различных художественных собраний.
Виртуальный музей может быть плоским и трехмерным.
Достоинства виртуальных музеев:
− создание новых творческих проектов,
− быстрое получение обратной связи,
− показ экспонатов, которые нельзя показывать по причинам старости
и т.д.,
− посещение из любой точки земного шара.
Недостатки виртуальных музеев:
− снижение двигательной активности и ухудшение зрения,
− невозможность задействовать все каналы восприятия человека для
получения полного образа восприятия человека,
− существующие аналоги виртуальных музеев.
Виды виртуальных музеев:
− галерея с 2D-изображением,
− галерея с 3D-моделями,
− виртуальные туры (360-выставки),
− аудио-видео гиды,
13
− комбинированные.
Для создания сайта, необходимо проанализировать аналогичные
виртуальные музеи:
− «Пермского университета». Данный сайт имеет большой каталог
навигации, таких как: новости, музеи, проекты, устная история, персоналии,
поддержать, а самое главное виртуальный музей, котором расположены
описания разных экспонатов, 3D-модели, которые подгружаются с внешнего
сайта, а также 360-экскурсия.
− «Красноярский художественный музей имени В.И. Сурикова».
Данный музей почти ничем не отличается от предыдущего кроме, лучшего
дизайна в целом и отсутствием выставок 3D-моделей.
− Другие виртуальные музеи России также ничем не отличаются от
рассмотренных ранее за исключением некоторых мелких деталей.
1.2 Анализ информационных технологий и инструментальных
средств реализации проекта
Анализ современной СУБД для создания БД проекта.
MySQL – это система управления реляционными базами данных с
открытым исходным кодом (СУРБД) с моделью клиент-сервер. СУРБД —
это программное обеспечение или служба, используемая для создания и
управления базами данных на основе реляционной модели [2].
SQL Server является одной из наиболее популярных систем управления
базами данных (СУБД) в мире. Данная СУБД подходит для самых различных
проектов: от небольших приложений до больших высоконагруженных
проектов [3].
IBM Db2 — это семейство продуктов для управления данными,
включающее реляционную базу данных Db2. В продуктах реализованы
функции на основе ИИ, помогающие управлять как структурированной, так и
неструктурированной информацией в локальных и мультиоблачных средах
14
[4].
SQLite — это быстрая и легкая встраиваемая однофайловая СУБД на
языке C, которая не имеет сервера и позволяет хранить всю базу локально на
одном устройстве. Для работы SQLite не нужны сторонние библиотеки или
службы [5].
Access – это реляционная система управления базами данных
корпорации Microsoft. Входит в состав пакета Microsoft Office. Имеет
широкий спектр функций, включая связанные запросы, связь с внешними
таблицами и базами данных [6].
Таблица 1.1 – Сравнительная характеристика наиболее известных систем
управления базами данных
Характерис MySQL MS SQL IBM DB2 SQLite MS Access
тики Server
Язык Си, C++ Transact- Java, SQL 2000 Си SQL,
программи SQL XQuery
рования
Объектно- Да Нет Да Нет Да
ориентиров
анное
проектиров
ание БД
Мультимед Да Ограничен Да Ограниче Ограничен
ийные но нно но
типы
данных
Макс. 4 Гб Не огр. 64 Гбайт 140 Тбайт 2 ГБ
Размер
таблиц
Макс. Не ограничено Не Практически не Не огр. 2048
Число ограничено ограничено
таблиц в
БД
Макс. 10 000 Не огр. Практически не Не огр. 255
Число ограничено
пользовате
лей БД
Цена MySQL SQL Server От 18 480 руб SQLite От
Community 2019 является 2763 руб.
является Express бесплатно
бесплатной является й
бесплатной
15
Анализ среды программирования для создания клиентской части
проекта.
Список программных средств для разработки WEB-сайта:
Eclipse – одна из самых популярных мультиязычных сред.
Ориентирована преимущественно на разработку Java-приложений, но
полезна и для кодов на JavaScript, имеющая следующие плюсы [7]:
 Множество плагинов. У Eclipse едва ли не самое большое число
надстроек — «на все случаи жизни»;
 Активное сообщество. Помогает быстрее освоить среду разработки,
выпускает новые плагины;
 Отличные компилятор и отладчик. Первый работает на порядок
быстрее, чем у конкурентов, второй — показывает потоки, пересечения,
позволяет гибко управлять ходом отладки;
 Кастомизация. Благодаря плагинам и настройкам можно полностью
персонализировать Eclipse;
 Бесплатность. Это open-source проект, абсолютно бесплатный;
 Высокая функциональность. Благодаря разработчикам-официалам и
членам сообщества с помощью Eclipse можно провести любой C#-продукт по
полному циклу разработки.
MonoDevelop – свободная среда разработки от Xamarin для создания
приложений и сайтов на множестве языков, в том числе на JavaScript,
имеющая следующие плюсы [8]:
 Мультиплатформенность. Поддерживает Linux, Windows и Mac OS;
 Кастомизация. На рабочем столе можно расположить функции и
окна по своему усмотрению;
 Unity 3D. Полноценная поддержка популярной платформы для
16
разработки игр;
 Бесплатность.
Visual Studio Code – редактор исходного кода, разработанный
Microsoft для Windows, Linux и macOS [9]:
 Кросс-платформенный редактор, который работает на Windows,
Linux и macOS.
 Поддерживает множество языков программирования, например,
такие как Python, JavaScript, HTML, CSS, TypeScript, C++, Java, PHP, Go, C#,
PHP, SQL, Ruby, Objective-C и многое другое.
 VSCode поставляется со встроенным отладчиком, который также
является одной из его ключевых функций. Это помогает ускорить цикл
редактирования, компиляции и отладки любого программиста.
 Visual Studio Code предоставляет полную интеграцию Git,
позволяющую программистам мгновенно видеть изменения, не выходя из
редактора.
 IntelliSense – это функция, которая используется программистами
для интеллектуального завершения кода, информации о параметрах, помощи
контенту, быстрой информации и намеков на код.
 Visual Studio Code также предоставляет функции для управления
кодом, такие как Go to Definition, Peek Definition, Find all References и rename
Symbol.
Анализ фреймворка для разработки фронтенда сайта
Для реализации обмена данных внутри сайта используются
фреймворки. На базе javascript существует несколько фреймворков, самые
популярные именуются следующим образом: Vue.js, React и Angular.
В следующей таблице представлена сравнительная характеристика
данных фреймворков [10].
17
Таблица 1.2 – Сравнительная характеристика наиболее известных
фреймворков
Рендеринг – Архитектура Направленност Обратная
отображение компонентов ь и классы совместимость
конечного зависимостей
результата
Angular Разделение на два Высокоуровневый Поддержка MV Полноценный
потока, причем за API обеспечивает VM (Model- фреймворк.
рендеринг DOM обратную View- Абсолютная
«отвечает» совместимость для ViewModel) зависимость от
браузер всех библиотек. допускает предыдущих
(клиентская Это позволяет решение версий и
часть), а за подключиться к разных задач в компонентов.
создание проекту одном разделе Прямой переход
директив, стороннему приложения с с 4.0 на 5.0
загрузку кода и программисту без использование невозможен,
сервисов – общий длительного м одного придется
поток (серверная изучения набора данных. последовательно
часть). архитектуры Зависимость устанавливать
приложения. функций все обновления
определяет между версиями.
двустороннюю Это приведет к
направленност необоснованном
ь передачи у увеличению
данных. объема
Каждая приложения.
процедура
может
запустить
другой
процесс.
React Создают копию Модифицированна Поддерживают Библиотека.

DOM, я библиотека, только Полная
обрабатывают ее, заточенная односторонню совместимость
а затем результат под MVC (Model- ю передачу между версиями.
сравнивается с View-Controller, где данных. При Возможно
исходной версией. Модель отвечает за этом в React подключение к
В конечном предоставление объекты приложению
документе (то данных, Вид – инкапсулирова библиотек
есть на экране отображает данные ны разных версий,
пользователя) Модели обновление
заменяются пользователю, а устаревших с
только те части Контроллер наследованием
страницы, интерпретирует свойств.
которые действия
отличаются от пользователя и
18
Окончание таблицы 1.2
Vue.js результатов Высокоуровневый Прогрессивный
обработки. API обеспечивает фреймворк.
обратную Модульная
совместимость система
для всех аналогична
библиотек. Это React, но
позволяет включающая в
подключиться к себя все
проекту атрибуты JS-
стороннему фреймворка,
программисту без работающих с
длительного полной обратной
изучения совместимостью
архитектуры .
приложения
1.3 Анализ бизнес-процесса «Проведение экскурсии в музее
истории, археологии и этнографии»
Бизнес-процесс «Проведение экскурсии в музее истории, археологии и
этнографии». Рассматривается с точки зрения директора института.
Заместитель музея истории, археологии и этнографии согласуется с
директором института о проведении экскурсии и далее оформляет новый
план экскурсии.
Документ: Положение о музеи истории, археологии и этнографии,
регламентирующую деятельность музея.
Участники: директор института, заместитель музея истории,
археологии и этнографии.
Заместитель музея истории, археологии и этнографии, основываясь на
плане проведения экскурсии, организует экскурсию.
Документы: план проведения экскурсии.
Участники: заместитель музея истории, археологии и этнографии.
Во время проведения экскурсии приходят посетители, смотрят
экспонаты, а заместитель музея истории, археологии и этнографии
рассказывает лекцию основываясь на экскурсионном докладе, в который
19
включены исторические факты и истории экспонатов и исторических
периодов.
Документы: экскурсионный доклад.
Участники: заместитель музея истории, археологии и этнографии,
посетители.
После проведения экскурсии заместитель музея истории, археологии и
этнографии по итогам выполненных работ составляет отчет, в котором
указывает информацию о проделанной работе и предоставляет его директору
института.
Документы: отчет о проведенной экскурсии.
Участники: директор института, заместитель музея истории,
археологии и этнографии.
После описания процесса необходимо создать контекстную диаграмму.
В данном случае она представляет собой самое общее описание системы.
Для построения контекстной диаграммы необходимо определить
входную информацию, которая преобразуется в процессе для получения
результата; выходную информацию – готовый результат; управление,
которое влияет на процесс, но не преобразуется процессом; механизмы,
которые выполняют процесс.
Представим полученную контекстную диаграмму на рисунке 1.3.
В таблице 1.3 представлена характеристика для каждой стрелки,
расположенной в контекстной диаграмме
Таблица 1.3 – Стрелки на контекстной диаграмме
Имя стрелки Определение стрелки Тип стрелки
Данные об экспонате информация об экспонате: вход
предположительная дата создания, место
положение, создавший народ и т.д.
Информация об информация о исторический событиях вход
исторических связанные с экспонатами и их периодом
событиях создания
20
План проведения план грядущего мероприятия, по выход
экскурсии которому формируется экскурсионный
доклад и подготавливается весь ход
экскурсии
Отчет о информация о прошедшем мероприятии выход
мероприятии
Заведующий музеем руководит работой музея истории, механизм
истории, археологии археологии и этнографии
и этнографии
ПК персональный компьютер необходим для механизм
написания различных документов и
отчетов
MS Word программное обеспечение для механизм
формирования документов
Положение о музее документ подтверждающий наличие контроль
истории, археологии законности наличия музея, описывающий
и этнографии основные функции музея
Должностные документ описывающий основные контроль
инструкции функции заведующего музея истории,
заведующего музея археологии и этнографии
истории, археологии
и этнографии
Рисунок 1.3 – Контекстная диаграмма бизнес-процесса «Проведение

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

«Проведение экскурсии в музее истории, археологии и этнографии»
В ходе анализа процесса проведение экскурсии в музее истории,
археологии и этнографии был выявлен следующий недостаток, для обучения
студентов необходимо проводить экскурсии в музее, что негативно влияет на
оперативное получение информации, что влияет на общий образовательный
процесс. Потому что студентам или иные лицам, которым необходимо
изучить информацию, необходимо договариваться о проведении экскурсии,
22
что не всегда происходит, а также данные экскурсии нужно ждать некоторое
время.
Решением выявленной проблемы является разработка виртуального
музея.
Выводы:
Проведен анализ организации, расписана организационная структура
самой организации, проведен анализ информационной системы музея
истории, археологии и этнографии, составлены IDEF0 диаграммы «AS-IS»
процесса «Проведение экскурсии в музее истории, археологии и
этнографии»;
В ходе анализа был выявлен существенный недостаток в процессе –
при организации мероприятия уходим много времени, что влияет на весь
процесс целиком, уменьшая количество возможных экскурсий в музей;
Проведен сравнительный анализ СУБД, фреймворков и сред
программирования для реализации программного продукта для дальнейшего
выбора технологий.
23
2 РАЗРАБОТКА САЙТА ВИРТУАЛЬНОГО МУЗЕЯ ИСТОРИИ,
АРХЕОЛОГИИ И ЭТНОГРАФИИ
2.1 Постановка задачи проектирования и обоснование проектных
решений
Анализ выявленных в первом разделе узких мест позволяет
сформулировать постановку следующей задачи: разработать
образовательный сайт музея с функциями системы управления контента,
который позволит:
 оперативно опубликовывать различные материалы (новости, 3D-
модели экспонатов, видеоматериалы, объявления, и прочую информацию)
«Музея истории, археологии и этнографии» для общественности;
 осуществлять процесс сбора статистических данных о посещаемости
сайта и просмотра материалов сайта.
Постановка задачи выполнена в связи с письмом заказом в
Приложении А.
Для разработки образовательного сайта потребуется решить данные
задачи:
1) проанализировать рынок подобных уже имеющихся продуктов,
учесть их преимущества и недостатки;
2) спроектировать новую модель с множеством категорий, меток и
прочих инструментов;
3) предложить функциональный дизайн веб–сайта, и интуитивный
интерфейс управления данным веб-сайтом;
4) собрать необходимую информацию по музею, и изложить ее на веб-
сайте в удобном виде;
5) арендовать веб-сервер в интернете, и произвести его настройку для
работы веб-сайта.
Для реализации данных задач необходимо сформулировать общие
24
требования к системе, а также требования со стороны заказчика, что
показано в техническом задании в приложении Б.
Перед реализацией разработки, необходимо построить контекстную
диаграмму (TO-BE). Данная диаграмма представлена на рисунке 2.1.
В таблице 2.1 представлена характеристика для каждой стрелки,
расположенной в контекстной диаграмме
Таблица 2.1 – Стрелки на контекстной диаграмме
Имя стрелки Определение стрелки Тип стрелки
3D-модель экспоната информация об экспонате: 3d-модель, вход
и его описание заголовок, описание, фотография, аудиозапись
Веб-контент страниц HTML-разметка с информацией вход
Новости информация о новостях: заголовок, описание, вход
фотография
Видеоматериалы информация о видеоматериалах: заголовок, вход
описание, фотография, видео
Отчет о посещаемости информация о посещаемости сайта выход
сайта пользователей
Сайт информационная система для накапливания механизм
данных и их просмотра
Персональный персональный компьютер необходим для механизм
компьютер работы с сайтом
Руководство документ по использованию сайта контроль
пользователя сайта
25
Рисунок 2.1 – Декомпозиционная диаграмма первого уровня модели TO-BE
«Просмотр сайта «Музей истории, археологии и этнографии»
Исходя из данных, представленных на рисунке 2.1, наблюдается
изменения в виде того, что блоки с 1 по 3, функционал, который показаны на
рисунке 1.3, объединились в единый процесс, 1 блок, то есть виртуальный
музей позволит убрать процесс планирования и организации экскурсии, что
уменьшит нагрузку на работников музеев и позволит увеличить количество
людей, которые изучают историю, благодаря тому, что экскурсии на сайте не
нужно планировать на определенный день.
Детально процесс данного блока «Просмотр сайта «Музей истории,
археологии и этнографии», реализовано на рисунке 2.2.
26
Рисунок 2.2 – Декомпозиционная диаграмма второго уровня модели TO-BE
«Просмотр сайта «Музей истории, археологии и этнографии»
Данный процесс реализован по следующему алгоритму:
1) сайт начинает работать сразу же после того, как посетитель запустил
его;
2) после, посетитель самостоятельно проводит экскурсию по сайту,
например, просматривает 3D-модели экспонатов, новости и видеоматериалы;
3) так же после просмотров различных материалов, возможно
сформировать отчет о посещаемости.
Проанализировав в разделе 1.2 информацию о технологиях разработки
пришел к выводу того, что самая подходящая СУБД для данного проекта,
является СУБД MySQL, так как она распространяется бесплатно и при этом
легко изучаема. Взята Visual Studio Code, так как в самой среде можно
установить все недостающие плагины для разработки от визуальных, до
помощников-конструкторов, что позволяет по-максимуму упростить этап
разработки. Выбран Vue.js введу того, что в данном фреймворке модульная
разработка, что позволяет просто и без глобальных ошибок внедрять новые
функции, при этом смена программиста не повлияет на разработку в целом.
2.2 Разработка информационной системы виртуального музея
Данный программный продукт реализован путем использования
фреймворка Vue.js. Который позволяет модульно конструировать сайт и
разделять функции, такие как рендеринг 3D-моделей, загрузка видео и
новостей.
Физическая модель БД определяет способ размещения данных в среде
хранения и способы доступа к этим данным, которые поддерживаются на
физическом уровне.
В физической модели базы данных содержится необходимые для
работы СУБД компоненты: название таблиц и столбцов, типы данных
столбцов, первичные и внешние ключи и другое.
27
Все связи физической модели данного проекта, реализованного в
MySQL, показаны на схеме данных, которая расположена на рисунке 2.1.
Рисунок 2.1 – Схема данных

На данном этапе в СУБД создаются таблицы с определенными
атрибутами, которые имеют соответствующие типы данных и свойства.
Таблица «type_video» имеет 1 поле и предназначена для хранения
данных об типе видео. Состав и свойства полей для таблицы представлены в
таблице 2.2.
Таблица 2.2 – Состав полей и их свойств для таблицы «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;
Таблица «exhibits» имеет 7 полей и предназначена для хранения
данных об экспонатах, их фотографиях, описанию, 3D-моделях и
28
аудиозаписях. Состав и свойства полей для таблицы представлены в таблице
2.3.
Таблица 2.3 – Состав полей и их свойств для таблицы «exhibits»
Наименование Назначение Тип поля Свойства поля, отличные от
поля таблицы заданных по умолчанию
id_exhibits первичный ключ счётчик
title заголовок экспоната tinytext совпадения не допускаются
short_description короткое описание mediumtext совпадения допускаются
экспоната
description полное описание longtext совпадения допускаются
экспоната
3d_model номер региона в longblob совпадения не допускаются
стране
photo фотография mediumblob совпадения не допускаются
экспоната
sound аудиозапись про mediumblob совпадения не допускаются
экспонат
CREATE TABLE IF NOT EXISTS `museum`.èxhibits` (
ìd_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 (ìd_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 полей и предназначена для хранения данных
об новостной ленте, в которой находятся фотографии, описание и
29
видеофайлы. Состав и свойства полей для таблицы представлены в таблице
2.4.
Таблица 2.4 – Состав полей и их свойств для таблицы «news»

Наименование Назначение Тип поля Свойства поля, отличные
поля таблицы от заданных по умолчанию
id_news первичный ключ счётчик
title заголовок новости TINYTEXT совпадения не
допускаются
description полное описание LONGTEXT совпадения допускаются
новости
photo фотографии новости MEDIUMBLOB совпадения допускаются
video видеоматериал LONGBLOB совпадения допускаются

CREATE TABLE IF NOT EXISTS `museum`.`news` (
ìd_news` INT NOT NULL AUTO_INCREMENT,
`photo` MEDIUMBLOB NOT NULL,
`video` LONGBLOB NULL,
PRIMARY KEY (ìd_news`),
UNIQUE INDEX `title_UNIQUE` (`title` ASC) VISIBLE)
ENGINE = InnoDB;
Таблица «videos» имеет 5 полей и предназначена для хранения данных
об видеоматериалах, таких как: лекционные материалы, видео с раскопок,
интервью. Состав и свойства полей для таблицы представлены в таблице 2.5.
Таблица 2.5 – Состав полей и их свойств для таблицы «videos»
Наименование Назначение Тип поля Свойства поля, отличные от
поля таблицы заданных по умолчанию
id_videos первичный ключ счётчик
title заголовок экспоната TINYTEXT совпадения не допускаются
description полное описание LONGTEXT совпадения допускаются
30
экспоната
ID_type_video внешний ключ для VARCHAR(45) совпадения допускаются
связи с таблицей
«т_пунктов»
video видеоматериал LONGBLOB совпадения допускаются

CREATE TABLE IF NOT EXISTS `museum`.`videos` (
ìd_videos` INT NOT NULL AUTO_INCREMENT,
ÌD_type_video` VARCHAR(45) NOT NULL,
`video` LONGBLOB NOT NULL,
PRIMARY KEY (ìd_videos`),
INDEX `type_video_idx` (ÌD_type_video` ASC) VISIBLE,
CONSTRAINT `type_video`
FOREIGN KEY (ÌD_type_video`)
REFERENCES `museum`.`type_video` (`type_video`)
ON DELETE CASCADE
ON UPDATE CASCADE)
ENGINE = InnoDB;
Далее необходимо прототипирование интерфейса сайта и разработка
структурной схемы, и карта навигации ИС показана на рисунке 2.2:
Пользователь, зайдя на сайт, сразу попадает на главную страницу,
которая будет называться «Главная» на данной странице находится вся
актуальная информация о музеи и событиях.
31
Рисунок 2.2 – Карта навигации ИС
Через верхнее меню, состоящее из четырех текстовых ссылок, а
именно: «Новости», «Экспонаты», «Видеоматериалы» и «О нас»;
пользователь может перемещаться между соответствующими страницами
web-сайта, что показано в таблице 2.6.
Таблица 2.6 – Разделы информационной системы и описание переходов
между ними
Роль Разделы, доступные для Описание условий
информационной выделенной роли перехода между разделами
системы
Новости
Экспонаты
Доступны всем пользователям Условий нет
Видеоматериалы
О нас
Ссылка «Экспонаты» переводит пользователя на страницу с
экспонатами, где находится галерея с экспонатами, нажав на которые
открывается окно с 3D-моделью.
На странице «Видеоматериалы» пользователь может выбрать
интересующий его видеоролик, изучить интересующую информацию.
Страница «Новости» содержит различные новости музея и института
Истории и Права.
Страница «Главная» содержит всю информацию о музее, контактах,
местоположении и т.д.
Характеристика данных страниц представлена в таблице 2.7.
Таблица 2.7 – Характеристика информационной системы
Название Характеристика информационной Основные функции
32
информационной системы информационной
системы системы
Структурированная информация о Информирование
Новости новостях: пользователей о новых
Заголовок, фотографии, видео, текст событиях
Структурированная информация об
экспонатах:
Экспонаты Просмотр экспонатов
Заголовок, фотография, аудио, текст, 3D-
модель
Структурированная информация о
Просмотр разных
Видеоматериалы видеоматериалах:
видеоматериалов
Заголовок, видеоматериал, текст.
Основная информации
Главная Информация о музее
о сайте и музее
После формирования структурной схемы сайта, необходимо

разработать прототипы страниц, для упрощения работы дизайнера, данные
прототипы показаны на рисунках 2.3, 2.4, 2.5, 2.6.
Рисунок 2.3 – Прототип вкладки «Новости»
33
Рисунок 2.4 – Прототип вкладки «Экспонаты»
Рисунок 2.5 – Прототип вкладки «Видеоматериалы»
34
Рисунок 2.6 – Прототип вкладки «Новости»
Разработка Веб-сайта
Основное для сайта, это разработать удобный, понятный интерфейс.
Интерфейс – это то, что видит пользователь в браузере: рамки, изображения,
ссылки, надписи и т.д. В целях привлечения большего числа клиентов и
лучшего визуального восприятия сайта, необходимо создать интерфейс
максимально привлекательным и в то же время максимально простым, чтобы
комфортно пользоваться сайтом могли даже неопытные пользователи. Также
необходимо наполнить сайт информацией и соответствующим контентом,
для того, чтобы сделать сайт наиболее информативным и привлекательным.
Страницы создавались с помощью редактора Visual code.
В первую очередь создание сайта начинается с главной страницы.
Главная страница - это страница, на которую попадает пользователь, как
только входит на сайт, дизайн показан на рисунке 2.7. На ней должна
предоставляться информация о музее, о том, что есть на данном сайте. Также
35
информация должна быть подана в надлежащем виде.
Рисунок 2.7 – Главная страница сайта

Как видно, на главной странице сайта содержится самая главная
информация о центре фитнеса и красоты и её услугах
Следующая страница сайта - это страница «Новости», что показано на
рисунке 2.8. На этой странице располагается информация о новостях. Цель
данной страницы - познакомить клиента с последними новостями музея,
например, добавление нового экспоната, новости раскопок и т.д.
Рисунок 2.8 – Страница «Новости»
36
Следующая страница сайта «Экспонаты», представлена на рисунке 2.9.
На этой странице располагается галерея экспонатов, при нажатии на
экспонат, открывается его 3D-модель, что показано на рисунке 2.10. Цель
данной страницы - познакомить клиента с экспонатами, изучить их и другое.
Рисунок 2.9 – Страница «Экспонаты»
Рисунок 2.10 – Модально окно с экспонатом

Последняя страница сайта «Видеоматериалы», представлена на
рисунке 2.11. На этой странице располагаются различные видеоматериалы,
такие как: лекции, видео с раскопок, интервью и другое. Цель данной
37
страницы – познакомить клиента с разными аспектами музея, особенно в
образовательной сфере.
Рисунок 2.11 – Страница «Видеоматериалы»

Использованные плагины при разработке проекта
Для верстки сайта использованы следующие плагины:
1) TailwindCSS – фреймворк для работы с CSS, позволяющий вносить
изменение в CSS прямо в HTML-разметке, при этом не используя тег <style>,
что упрощает верстку проектов [12].
2) Swiper.js – это сенсорный слайдер с аппаратным ускорением
переходов и нативным поведением, который позволяет создавать слайдеры
на странице сайта [13].
3) PostCSS – это инструмент Node.js который берет валидный CSS и
улучшает его. PostCSS – это синтаксический разборщик, который
токенизирует код CSS для создания абстрактного синтаксического дерева.
Плагины могут обработать это дерево и соответствующим образом обновить
свойства [14].
Для работы с JavaScript использованы следующие плагины:
38
1) Node.js – это приложение C++, которое получает на входе код
JavaScript и выполняет его. Чтобы взаимодействовать с устройствами ввода-
вывода на компьютере, в платформе предусмотрен собственный интерфейс
на C++. Таким образом, платформа превращает специализированный
скриптовый язык JavaScript в язык общего назначения, поэтому на Node.js
можно писать любые компьютерные программы. Node.js позволяет
пользоваться единым языком JavaScript для написания кода и на стороне
клиента, и на сервере [15].
2) Three.js – это кроссбраузерная JavaScript библиотека и API,
используемая для создания и отображения анимированной трехмерной
компьютерной графики в веб-браузере [16].
Верстка страниц и реализация JavaScript кода
В данной разделе представлен основной код разработки проекта
С помощью фреймворка Vue3.js разработан скелет сайта с помощью
компонентов, в которых находится HTML и JavaScript, как показано на
рисунке 2.12.
39
Рисунок 2.12 – Скелет проекта на Vue.js
Основным компонентом является «App.vue», так как к ему
подключаются все остальные компоненты, на рисунке 2.13 представлен его
код.
Следующие компоненты являются страницами, на которых
располагается вся информация, листинг данных компонентов представлен в
приложении В:
 BodyExhibitsPage – страница с экспонатами;
 BodyHomePage – главная страница;
 BodyNewsPage – страница с новостями;
 BodyVideoPage – страница с видеоматериалами.
SwiperComponent – компонент для реализации слайдера на странице
BodyHomePage.
Loading – компонент появляющийся при загрузке ModalWindow.
Exhibit – компонент для формирования галереи с 3D-моделями на
40
странице BodyExhibitsPage.
ModalVideoWindow – компонент для воспроизведения видеоролика
Рисунок 2.13 – Листинг компонента «App.vue»

Header и Footer являются шапкой и подвалом сайта соответственно.
ModalWindow – компонент для реализации обработки 3D-моделей,
часть кода функции представлен на рисунке 2.14.
41
Рисунок 2.14 – Листинг части кода для обработки 3D-моделей
Так же проведено функциональное тестирование, тест-кейсы которого
находятся в приложении Г
2.3 Расчет экономической эффективности
42
Для расчета экономической эффективности внедрения, разработанного
сайтв воспользуемся исходными данными, приведенными в таблице 2.8.
Таблица 2.8 – Расчет экономической эффективности внедрения
разработанного сайта
Виды работ в Время операции до Время операции Экономия времени
операции автоматизации, после на операции,
мин. автоматизации, мин.
мин.
Формирование 40 0 40
плана экскурсий
Организация
60 30 30
экскурсии
Проведение
90 0 90
экскурсии
Подготовка отчета 25 10 15
ИТОГО 215 40 175
Исходя из расчетов, продемонстрированных в таблице 3.4, количество
минут, сэкономленных сотрудником, который занимается организацией и
проведением экскурсии в музее составляет 135 минут.
В среднем, сотруднику Музея удается провести 4 экскурсии в месяц.
Совокупное освободившееся время, которое сотрудник потратит в
течении рабочего времени на дополнительные операции в освободившееся
время, повышая тем самым общую эффективность [9] всего
производственного процесса, можно определить по формуле (1):
Экономия времени = Эо*m*n, (1)
где:
Эо – экономия времени по одной автоматизируемой операции, включая
все виды работ, мин;
m – количество операций в день, шт;
n – количество сотрудников, выполняющих операцию, чел.
Таким образом, в результате внедрения программного продукта общая
экономия времени в день составит:
43
Экономия времени = 175*8/28*2 = 100 минут в день;
Экономия времени в часах = 100/60 = 1,4 часов.
Месячный фонд оплаты труда сотрудников складывается из
должностного оклада, премий, районных коэффициентов и набавок, а также
отчислений во внебюджетные фонды.
Расчет месячного фонда оплаты труда сотрудников представлен в
таблице 2.9.
Таблица 2.9 – Расчет месячного фонда оплаты труда, без страховых взносов
во внебюджетные фонды.
Наименовани Количество Оклад Премия Районный Северная ФОТ, без
е должности сотрудников (руб.) (50% от коэффициент надбавка страховых
сотрудника оклада, (30% от (30% от взносов
руб.) оклада, руб.) оклада, (руб.)
руб.)
Заведующий 1 30000 15000 9000 9000 63000
Музеем
Работник 1 24000 12000 7200 7200 50400
Музея
Итого 2 54000 27000 16200 16200 113400
Таким образом, месячный фонд оплаты труда сотрудников составляет
123900 рублей. С учетом страховых взносов во внебюджетные фонды 30,2%
фонд оплаты труда будет равен:
ФОТ мес. = 113400+ 113400*30,2% = 147646,8 рублей.
Определим стоимость одного часа работы сотрудника.
Стоимость одного дня работы [10] (среднедневная заработная плата)
сотрудников определяется по формуле (2):
Ч=ФОТ мес./Т, (2)
где:
Ч – стоимость часа работы n сотрудников;
ФОТ мес. – месячный фонд оплаты труда n сотрудников;
T – количество дней работы n сотрудников в месяц.
44
В соответствии с условиями трудового договора сотрудники работают
6 дней в неделю, в среднем 24 дня в месяц. Таким образом, n сотрудников в
месяц работают 24*n дней, т.е., в нашем примере, 24*3=72 дня.
Один рабочий день: 147646,8/72 = 2050,65 руб.
При средней продолжительности рабочего дня 8 часов стоимость
одного часа работы сотрудников составит: 2050,65/8 = 256,33 руб.
Учитывая, что в среднем в день, в результате внедрения программного
продукта на автоматизируемых операциях, будет достигнута 1,4 часам
работы в месяц на сотрудника, рассчитаем экономический эффект от
внедрения программного продукта в месяц:
Экономический эффект за день = 256,33125*1,4 = 358,86 руб.
Экономический эффект в месяц = 358,86*24 = 8612,64 руб.
Разработка программного продукта требует 3 месяца рабочего времени
и вложения средств в сумме согласно смете 176243 рублей. Ежемесячно
получаемый эффект от внедрения составит 8612,64 рублей. В таблице 2.10
Представлен расчет срока окупаемости предлагаемого решения.
Таблица 2.10 – Расчет срока окупаемости предлагаемого решения
Порядковый Денежный поток Кумулятивный
номер по проекту, руб. Расчет, руб. денежный поток по
месяца проекту, руб.
0 -176243 -176243 -176243
1 8612,64 -176243+8612,64 -167630,4
2 8612,64 -167630,4+8612,64 -159017,7
3 8612,64 -159017,7+8612,64 -150405,1
4 8612,64 -150405,1+8612,64 -141792,4
5 8612,64 -141792,4+8612,64 -133179,8
6 8612,64 -133179,8+8612,64 -124567,2
7 8612,64 -124567,2+8612,64 -115954,5
8 8612,64 -115954,5+8612,64 -107341,9
9 8612,64 -107341,9+8612,64 -98729,24
10 8612,64 -98729,24+8612,64 -90116,6
11 8612,64 -90116,6+8612,64 -81503,96
12 8612,64 -81503,96+8612,64 -72891,32
13 8612,64 -72891,32+8612,64 -64278,68
14 8612,64 -64278,68+8612,64 -55666,04
15 8612,64 -55666,04+8612,64 -47053,4
45
16 8612,64 -47053,4+8612,64 -38440,76
17 8612,64 -38440,76+8612,64 -29828,12
18 8612,64 -29828,12+8612,64 -21215,48
19 8612,64 -21215,48+8612,64 -12602,84
20 8612,64 -12602,84+8612,64 -3990,2
21 8612,64 -3990,2+8612,64 4622,44
22 8612,64 4622,44+8612,64 13235,08
23 8612,64 13235,08+8612,64 21847,72
24 8612,64 21847,72+8612,64 30460,36
Таким образом, из таблицы видно, что, начиная с 21-го месяца работы
сотрудников с разработанным сайтом, произойдет полная окупаемость
затрат, связанных с его внедрением.
Формула расчета дисконтированного потока [11] по проекту (NPV)
имеет следующий вид (3):
, (3)
где:
CFi – экономический эффект от внедрения программного решения i-ого
периода;
IC – сумма первоначальных вложений на внедрение программного
решения;
r – ставка дисконтирования в i-й период.
Прежде чем производить расчет NPV необходимо узнать r – ставку
дисконтирования.
Прежде чем перейти к расчету NPV определим ставку
дисконтирования. В основе определения ставки дисконтирования лежит
формула:
r = ключевая ставка Банка России + Прогнозируемый уровень
инфляции.
46
Прежде чем перейти к расчету NPV определим ставку
дисконтирования. В основе определения ставки дисконтирования лежит
формула: r = ключевая ставка Банка России + Прогнозируемый уровень
инфляции. С 19 сентября 2022 года ключевая ставка установлена на уровне
7,5%, уровень инфляции, определенный в федеральном бюджете на 2023 год
4%, таким образом годовая ставка дисконтирования составляет: r = 7,5+4 =
11,5%. [12] Для удобства расчетов округлим данную ставку до 12% в год,
таким образом ставка дисконтирования в месяц составляет 1%, расчет
приведён в таблице 2.11.
Таблица 2.11 – Расчет чистого приведённого эффекта от предлагаемого
решения
Порядковый Денежный поток Расчет ставки Дисконтированный поток
номер месяца по проекту дисконтирования по проекту (2*3)
0 -176243 1/(1+0,01)0 = 1 -176243
1 8612,64 1/(1+0,01)1 = 0,99 8527,36634
2 8612,64 1/(1+0,01)2 = 0,98 8442,93697
3 8612,64 1/(1+0,01)3 = 0,97 8359,34353
4 8612,64 1/(1+0,01)4 = 0,961 8276,57775
5 8612,64 1/(1+0,01)5 = 0,951 8194,63144
6 8612,64 1/(1+0,01)6 = 0,942 8113,49647
7 8612,64 1/(1+0,01)7 = 0,933 8033,16483
8 8612,64 1/(1+0,01)8 = 0,923 7953,62854
9 8612,64 1/(1+0,01)9 = 0,914 7874,87974
10 8612,64 1/(1+0,01)10 = 0,905 7796,91064
11 8612,64 1/(1+0,01)11 = 0,896 7719,7135
12 8612,64 1/(1+0,01)12 = 0,887 7643,2807
13 8612,64 1/(1+0,01)13 = 0,879 7567,60465
14 8612,64 1/(1+0,01)14 = 0,87 7492,67787
15 8612,64 1/(1+0,01)15 = 0,861 7418,49294
16 8612,64 1/(1+0,01)16 = 0,853 7345,04252
17 8612,64 1/(1+0,01)17 = 0,844 7272,31932
18 8612,64 1/(1+0,01)18 = 0,836 7200,31616
19 8612,64 1/(1+0,01)19 = 0,828 7129,0259
20 8612,64 1/(1+0,01)20 = 0,82 7058,44149
21 8612,64 1/(1+0,01)21 = 0,811 6988,55593
22 8612,64 1/(1+0,01)22 = 0,803 6919,3623
23 8612,64 1/(1+0,01)23 = 0,795 6850,85377
24 8612,64 1/(1+0,01)24 = 0,788 6783,02353
Итого NPV 6718,64683
Из расчета, приведенного в таблице 3.10 видно, что NPV
47
предлагаемого к внедрению решения составляет 6718,65 рубля, что больше 0,
следовательно, решение экономически эффективно.
Выводы:
Предложено решение с бизнес-процессом, которым является
разработка сайта виртуального музея. Также были определены основные
требования заказчика, согласно техническому заданию в приложение Б;
по итогу принято решение использовать для разработки СУБД –
MySQL, Фреймворк – Vue.js, среда программирования – Visual Code;
Представлен TO-BE процесса «Просмотр сайта «Музей истории,
археологии и этнографии» после внедрения сайта виртуального музея;
Разработан виртуальный музей для хранения и просмотра материалов
музея, описаны основные его функции и проведено функциональное
тестирование.
Просчитана экономическая эффективность проекта, срок окупаемости
которого наступит с 21 месяца его использования.
48
ЗАКЛЮЧЕНИЕ
Актуальность темы курсовой работы подтверждена письмом-заказом
от предприятия, представленным в приложении А. В результате
проведенного исследования поставленные задачи решены в полном объеме,
цель достигнута.
Задачи решены в полном объеме в соответствии с выданным заданием.
Описана структура «Музея истории, археологии и этнографии»
института Истории и Права и его внешние связи. Построена контекстная
диаграмма управления информационной политикой.
Описана технология и проведен анализ процесса работы музея, в
частности проведения экскурсий в музее. Составлена декомпозиция
контекстной диаграммы модели «AS-IS» для более детального понимания
решаемой проблемы.
В ходе анализа работы музея, выявлен существенный недостаток. Для
проведения экскурсии необходимо разработать план, затем организовать
экскурсию, что отрицательно влияет на работу всего музея в целом, при этом
мероприятии проходят не каждый день, а самое главное то, что
материальную базу каждые 3 года забирают в краеведческий музей.
Рассмотрены современные технологии для разработки проекта,
проведен сравнительный анализ, рассмотрены их достоинства и недостатки,
по итогу, принято решение использовать для разработки СУБД – MySQL,
Фреймворк – Vue.js, среда программирования – Visual Code.
Разработанный сайт позволит демонстрировать и сохранять в базе
данных 3D-модели экспонатов музея и информацию о них, а также данный
сайт демонстрирует иную информацию такую, как новости, данные
проводимых раскопок, разные видео и фото материалы
49
Просчитана экономическая эффективность проекта, срок окупаемости
которого наступит с 21 месяца его использования. Также данный сайт
внедрен, что подтверждается справкой о внедрении в приложении Д.
БИБЛИОГРАФИЧЕСКИЙ СПИСОК
1. Музей истории, археологии и этнографии [Электронный ресурс]
URL: http://iip.khsu.ru/structure/museum/ (дата обращения: 21.03.2023).
2. Что Такое MySQL: Объяснение MySQL Для Начинающих
[Электронный ресурс] URL: https://www.hostinger.ru/rukovodstva/shto-takoje-
mysql/ (дата обращения: 25.03.2023).
3. Введение в MS SQL Server и T-SQL: Что такое SQL Server и T-SQL
[Электронный ресурс] URL: https://metanit.com/sql/sqlserver/1.1.php (дата
обращения: 26.03.2023).
4. Что такое IBM® Db2®? [Электронный ресурс] URL:
https://www.ibm.com/ru-ru/analytics/db2 (дата обращения: 01.04.2023).
5. Skillfactory.БЛОГ: SQLite [Электронный ресурс] URL:
https://blog.skillfactory.ru/glossary/sqlite/ (дата обращения: 03.04.2023).
6. Compos: Microsoft Access для чайников – что это за программа и как
ей пользоваться [Электронный ресурс] URL: http://composs.ru/access-chto-eto-
za-programma/ (дата обращения: 04.04.2023).
7. Proglib: ТОП-10 IDE для Java-разработки [Электронный ресурс]
URL: https://proglib.io/p/top-10-ide-dlya-java-razrabotki-2022-10-20 (дата
обращения: 05.04.2023).
8. Континентсвободы.рф: MonoDevelop - Интегрированная Среда
Разработки [Электронный ресурс] URL:https://xn--90abhbolvbbfgb9aje4m.xn--
p1ai/monodevelop-integrirovannaya-sreda-razrabotki/ (дата обращения:
05.04.2023).
9. Microsoft: Добро пожаловать в интегрированную среду разработки
Visual Studio [Электронный ресурс] URL:
50
https://learn.microsoft.com/ru-ru/visualstudio/get-started/visual-studio-ide?
view=vs-2022 (дата обращения: 06.04.2023).
10. Mkdev Personal: Сравнение JavaScript фреймворков Vue.js, React и
Angular (2019) [Электронный ресурс] URL:
https://mkdev.me/ru/posts/sravnenie-javascript-freymvorkov-vue-js-react-i-
angular-2019 (дата обращения: 07.04.2023).
11. Верников Г. Основные методологии обследования организаций.
Стандарт IDEF0. [Электронный текст] / Г. Верников – URL:
https://www.cfin.ru/vernikov/idef/idef0.shtml (дата обращения: 08.04.2023).
12. Хабр: TailwindCSS – очередной фреймворк или новый шаг
эволюции? [Электронный ресурс] URL: https://habr.com/ru/post/508844/ (дата
обращения: 10.04.2023).
13. Хабр: Несколько интересностей и полезностей для веб-
разработчика #40 [Электронный ресурс] URL:
https://habr.com/ru/post/251759/ (дата обращения: 11.04.2023).
14. Teletype: Введение в PostCSS [Электронный ресурс] URL:
https://teletype.in/@budnifronta/ZYpNqR9Z1sl (дата обращения: 12.04.2023).
15. Skillfactory.БЛОГ: Node.js [Электронный ресурс] URL:
https://blog.skillfactory.ru/glossary/node-js/ (дата обращения: 13.04.2023).
16. Customizer Github: three.js справочное руководство [Электронный
ресурс] URL: https://customizer.github.io/three.js-doc.ru/three.js-ru.htm (дата
обращения: 15.04.2023).
17. Формула для расчета экономической эффективности на
предприятии [Электронный ресурс]. – URL: https://finzz.ru/raschet-
ekonomicheskoj-effektivnosti-kratko.html (Дата обращения: 17.05.2023).
18. Пример расчета зарплаты из нормы рабочих часов [Электронный
ресурс]. – URL: https://delovoymir.biz/kak-rasschitat-chasovuyu-stavku-
rabotnika-primery.html (Дата обращения: 17.05.2023).
51
19. Дисконтирование денежных потоков (DCF). Формула.
[Электронный ресурс]. – URL: https://finzz.ru/diskontirovanie-denezhnyx-
potokov-dcf-formula-raschet-v-excel.html (Дата обращения: 17.05.2023).
20. NVP формула расчёта пример. NVP инвестиционного проекта.
[Электронный ресурс]. – URL: http://msfo-dipifr.ru/formula-rascheta-npv-
investitsionnogo-proekta-eto-prosto/ (Дата обращения: 17.05.2023).
52
ПРИЛОЖЕНИЕ А
«Письмо заказ»
53
Федеральное государственное бюджетное
образовательное учреждение высшего
образования «Хакасский государственный
университет им. Н.Ф. Катанова»
Институт истории и права
Письмо-заказ
Организации на разработку выпускной квалификационной работы
Организация
Федеральное государственное бюджетное образовательное учреждение высшего
образования «Хакасский государственный университет им. Н.Ф. Катанова», 655017, РХ, г.
Абакан, пр. Ленина 92/1, 8 (3902)226-236
(полное наименование, юридический адрес, телефон)
просит поручить обучающемуся Беккер Валентин Эдуардович, группы 49_____________
(ФИО полностью, специальность/направление подготовки)
разработать курсовую работу на тему:
Проект виртуального музея для института истории
Руководитель
Организации (подразделения) __________________ /_______________________________/
М.П.
54
ПРИЛОЖЕНИЕ Б
«Техническое задание»
55
МИНОБРНАУКИ РОССИИ
«ХАКАССКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
им. Н.Ф. КАТАНОВА»
Наименование организации – разработчика ТЗ на АС
УТВЕРЖДАЮ
Директор Института истории и
права «ХГУ им. Н.Ф. Катанова»
_________ _________________
Личная Расшифровка
подпись подписи
М.П.
Дата__________
Справочно-поисковая система
Наименование вида АС
САЙТА ВИРТУАЛЬНОГО МУЗЕЯ ИСТОРИИ,
АРХЕОЛОГИИ И ЭНОГРАФИИ
Наименование объекта автоматизации
ТЕХНИЧЕСКОЕ ЗАДАНИЕ
На 20 листах
Действует с
СОГЛАСОВАНО
Директор Института истории и права

«ХГУ им. Н.Ф. Катанова»
_________ _________________
Личная Расшифровка
подпись подписи
М.П.
Дата__________
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ПРИЛОЖЕНИЕ В
Программный код приложения
75
Листинг А (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>
Листинг Б (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>
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,
76
});
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>
Листинг В (BodyHomePage):
<template>
<section class="text-gray-600 body-font">
<SwiperComponent />
</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>
77
<p class="pt-4 md:pt-2 text-xl">E-mail: apograv@yandex.ru</p>
</li>
<li>
Заведующий музеем – Поселянин Александр Иванович, кандидат
исторических наук, доцент кафедры всеобщей истории.
</p>
</li>
</ul>
Музей истории, археологии и этнографии был основан 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');
"
></li>
<li
class="h-36 w-36 md:h-20 md:w-20"
style="
background-image: url('img/Петроглифы/free-icon-triskele.png');
"
></li>
<li
class="h-36 w-36 md:h-20 md:w-20"
style="
background-image: url('img/Петроглифы/free-icon-wind.png');
"
></li>
</ul>
78
</div>
</section>
<div class="container max-w-4xl mx-auto py-20 px-5 md:py-10">
Музей истории, археологии и этнографии был основан 9 октября 2003 года
сотрудниками кафедры археологии, этнографии и исторического краеведения.
Музей ИИП ХГУ им. Н.Ф. Катанова имеет статус учебного музея. Главная
задача учебного историко-этнографического музея – обеспечение многообразия
содержания образовательного процесса.
</p>
Особую роль музей играет в подготовке студентов направления «История», для
которых он является необходимой учебной и научной базой, а также для
других студентов ХГУ, проявляющих повышенный интерес к истории региона. В
музее проводятся лекции, семинарские и лабораторные занятия по археологии,
этнографии и историческому краеведению. Представленные в музее экспонаты
уникальны и являются необходимым наглядным материалом в учебном процессе.
</p>
В музее представлены артефакты в хронологическом диапазоне от эпохи
каменного века и до середины ХХ века. Все археологические и
этнографические экспонаты собраны преподавателями и студентами ИИП ХГУ во
время летних полевых практик. Работа музея направлена на приобщение
студентов к традиционным культурным ценностям нашего региона. Посетители
музея знакомятся с хакасскими национальными традициями, убранством юрты,
хакасским музыкальным творчеством, самобытным национальным костюмом.
</p>
На базе музея открылся и стабильно функционирует этнографо-археологический
кружок. На заседаниях кружка со студентами углубленно изучаются методы
формально-типологического анализа археологических материалов. Также
проводятся практические занятия по камеральной обработке полевых
материалов. Музей привлекает внимание не только представителей науки
Республики Хакасия, но и студентов ведущих российских вузов, таких как
СПГУ, ТГУ, МГИМО, а так же ученых из-за рубежа – Голландии, Турции, Китая,
посетивших музей и оставивших положительные отзывы. В настоящее время
проводится работа по обновлению экспозиций музея, приданию музею статуса
структурного подразделения при Институте истории и права, включению
экспонатов в Государственную часть Музейного фонда РФ.
</p>
</div>
</template>
<script>
import SwiperComponent from "./SwiperComponent.vue";
export default {
name: "BodyHomePage",
components: {
SwiperComponent,
},
};
</script>
Листинг Г (BodyNewsPage):
<template>
79
<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>
<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>
<time
datetime="2022-10-10"
80
>
<span>2022</span>
</time>
</div>

<img
alt="Guitar"
/>
</div>

<a href="#">
Интересные факты о Хакасии
</h3>
</a>

Площадь Хакасии лишь слегка превышает 61.500 км², что меньше
площади, скажем, Индии, примерно в 50 раз. Да и народу тут живёт
мало, немногим более 500.000 человек, примерно столько же, сколько в
Астрахани или в Пензе. Просто две трети территории республики
приходится на Саянские горы, в которых населения практически нет.
</p>
</div>
<button
@click="showModal"
>
</button>
</div>
</div>
</article>
<time
datetime="2022-10-10"
>
<span>2022</span>
</time>
81
</div>

<img
alt="Guitar"
/>
</div>

<a href="#">
Историческое развитие
</h3>
</a>

Историческое развитие народов Хакасии протекало в относительно
благоприятных климатических условиях, в его ходе создано уникальное
культурное наследие, представляющее бесценный ресурс для развития
региона. Основу культурного наследия Хакасии составляют
природно-археологические ландшафты, составленные из десятков тысяч
археологических объектов.
</p>
</div>
<button
>
</button>
</div>
</div>
</article>
</div>
</template>
<script>
export default {
name: "BodyNewsPage",
};
</script>
Листинг Д (BodyVideoPage):
<template>
<time
datetime="2022-10-10"
>
82
<span>2022</span>
</time>
</div>

<img
alt="Guitar"
/>
</div>

<a href="#">
Интересные факты о Хакасии
</h3>
</a>

Площадь Хакасии лишь слегка превышает 61.500 км², что меньше
площади, скажем, Индии, примерно в 50 раз. Да и народу тут живёт
мало, немногим более 500.000 человек, примерно столько же, сколько в
Астрахани или в Пензе. Просто две трети территории республики
приходится на Саянские горы, в которых населения практически нет.
</p>
</div>
<button
@click="showModal"
>
</button>
</div>
</div>
</article>
<time
datetime="2022-10-10"
>
<span>2022</span>
</time>
</div>
83
<img
alt="Guitar"
/>
</div>

<a href="#">
Историческое развитие
</h3>
</a>

Историческое развитие народов Хакасии протекало в относительно
благоприятных климатических условиях, в его ходе создано уникальное
культурное наследие, представляющее бесценный ресурс для развития
региона. Основу культурного наследия Хакасии составляют
природно-археологические ландшафты, составленные из десятков тысяч
археологических объектов.
</p>
</div>
<button
@click="showModal"
>
</button>
</div>
</div>
</article>
<time
datetime="2022-10-10"
>
<span>2022</span>
</time>
</div>

<img
alt="Guitar"
/>
</div>
84
<a href="#">
Хакасия в составе Российской империи
</h3>
</a>

В XVII веке русские застали Хонгорай в виде конфедерации, состоящей
из четырёх улусов: Алтырского, Алтысарского, Исарского (Езерского) и
Тубинского, населённых предками современных хакасов, шорцев,
телеутов, алтайцев и тувинцев. Другая часть кыргызов несколькими
волнами мигрировала на Тянь-Шань начиная с середины IX века, с эпохи
Кыргызского великодержавия, вплоть до середины XIII века.
</p>
</div>
<button
@click="showModal"
>
</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() {
85
return {
VisibleModal: false,
};
},
methods: {
showModal() {
this.VisibleModal = true;
},
closeModal() {
this.VisibleModal = false;
},
},
};
</script>
Листинг Е (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
/>
</swiper-slide>
<swiper-slide>
<img
/>
</swiper-slide>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Autoplay } from "swiper";
86
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
export default {
name: "SwiperComponent",
components: {
Swiper,
SwiperSlide,
},
setup() {
return {
modules: [Navigation, Autoplay],
};
},
};
</script>
Листинг Ж (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>
Листинг З (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>
<p class="text-base leading-relaxed mt-2">
{{ exhibit_data.description }}
</p>
<a class="text-indigo-500 inline-flex items-center mt-3"
>Узнать больше
<svg
87
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>
Листинг И (ModalWindow):
<template>
<div
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>
<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,
88
},
},
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); // умещаем в заданные размеры
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");
89
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>
<style scoped>
#containerthree {
height: 100%;
width: 100%;
}
</style>
Листинг К (Header):
<template>
<div
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"
90
>

<div class="text-white font-extrabold text-3xl md:text-5xl">
</div>
</div>
</div>

<div class="container -mt-16 md:px-0 max-w-6xl mx-auto">
<div class="mx-0 sm:mx-6">

<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>
</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,
},
91
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>
Листинг Л (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"
>
<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">© 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">apograv@yandex.ru</font>
</font>
</a>
92
</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-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
fill="currentColor"
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>
<svg
fill="none"
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>
<svg
fill="currentColor"
93
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>
</footer>
</template>
<script>
export default {
name: "GeneralFooter",
};
</script>
Листинг М (ModalVideoWindow):
<template>
<div
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");
94
},
},
};
</script>
95
ПРИЛОЖЕНИЕ Г
Отчет о тестировании
96
МИНОБРНАУКИ РОССИИ
«ХАКАССКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
им. Н.Ф. КАТАНОВА»
САЙТА ВИРТУАЛЬНОГО МУЗЕЯ ИСТОРИИ,

АРХЕОЛОГИИ И ЭНОГРАФИИ
Наименование объекта Тестирование
ОТЧЕТ О ТЕСТИРОВАНИИ
На 1 листах
М.П.
97
Замечания
№ Тест- и
Название проверки Результат
кейса рекомендац
ии
Кроссбраузерное тестирование
Приложение корректно отображается и Отрицательно Отсутствует
функционирует во всех актуальных эффект
1
браузерах (IE, Edge, Chrome, Firefox, скроллинга в
Safari,...). браузере IE
Приложение корректно отображается и Отрицательно Отсутствует
функционирует во всех актуальных эффект
2
версиях браузеров. скроллинга в
браузере IE
Авторизация и работа с профилем
Авторизуйтесь с существующим Положительно
3
аккаунтом.
При вводе неверного пароля Положительно
отображается сообщение об ошибке и
4
ссылка на страницу восстановления
пароля.
Работа с материалами сайта
5 Корректная прогрузка 3D-модели Положительно
6 Корректная прогрузка видеоролика Положительно
7 Корректная прогрузка новости Положительно
Всплывающие уведомления об ошибке Положительно
8
и предупреждения работают корректно.
Загрузка и скачивание файлов
Файлы успешно загружаются. Функционал не
9
реализован
Слишком тяжелые файлы не Функционал не
10 загружаются, и отображается реализован
сообщение об ошибке.
Файлы ошибочного формата не Функционал не
Файлы недопустимого формата не Функционал не
Файлы успешно скачиваются. Функционал не
13
реализован
98
ПРИЛОЖЕНИЕ Д
Справка о внедрении
99
Федеральное государственное бюджетное
образовательное учреждение высшего
образования «Хакасский государственный
университет им. Н.Ф. Катанова»
Справка о внедрении результатов выпускной квалификационной работы
В процессе выполнения выпускной квалификационной работы по теме:

______Проект виртуального музея для института истории
Обучающийся
Беккер Валентин Эдуардович, 09.03.02/Информационные системы и технологии
(ФИО полностью, специальность/направление подготовки)
Принял непосредственное участие в разработке следующих вопросов:
Разработан сайт, позволяющий визуализировать 3 D-модели экспонатов и

демонстрировать другие материалы, необходимые в образовательном процессе.
(перечень разработанных вопросов)

Полученные результаты_________________________________________________________
(находится на стадии внедрения, внедрены, приняты к рассмотрению, включены в инструктивные материалы)
Федеральное государственное бюджетное образовательное учреждение высшего

образования «Хакасский государственный университет им. Н.Ф. Катанова»
_____________________________________________________________________________
(наименование организации, предприятия)
М.П.
100

ДИПЛОМ

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

ДИПЛОМ

Загружено:

Авторское право:

Доступные форматы

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

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

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

РАЗРАБОТКА САЙТА ВИРТУАЛЬНОГО МУЗЕЯ ИСТОРИИ, АРХЕОЛОГИИ И

Обучающийся Беккер Валентин Эдуардович

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

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

РАЗРАБОТКА САЙТА ВИРТУАЛЬНОГО МУЗЕЯ ИСТОРИИ, АРХЕОЛОГИИ И

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

Обучающийся-дипломник _____________ В.Э. Беккер

Научный руководитель _____________ Д.А. Яковлев

Нормоконтролер _____________ О.Л. Мельникова

Музей истории, археологии и этнографии

Представители музея (преподаватели, лаборанты, студенты)

Рисунок 1.1 – Организационная структуры музея истории, археологии и

Музей истории, археологии и этнографии

Бухгалтерия и отдел кадров Университета

Колледжи и институты университета

Рисунок 1.2 – Внешние связи музея истории, археологии и этнографии

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

Рисунок 1.3 – Контекстная диаграмма бизнес-процесса «Проведение

Рисунок 1.4 – Декомпозиция контекстной диаграммы бизнес-процесса

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

Таблица 2.4 – Состав полей и их свойств для таблицы «news»

SQL листинг представлен ниже:

SQL листинг представлен ниже:

После формирования структурной схемы сайта, необходимо

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

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

Рисунок 2.7 – Главная страница сайта

Рисунок 2.8 – Страница «Новости»

Рисунок 2.9 – Страница «Экспонаты»

Рисунок 2.10 – Модально окно с экспонатом

Рисунок 2.11 – Страница «Видеоматериалы»

Рисунок 2.13 – Листинг компонента «App.vue»

Директор Института истории и права

const ModalWindow = defineAsyncComponent({

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

const ModalVideoWindow = defineAsyncComponent({

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

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

const camera = new THREE.PerspectiveCamera(

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

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

const Loader = new FBXLoader();

let b = new THREE.Box3().setFromObject(object);

function scaleToFit(obj, bound) {

САЙТА ВИРТУАЛЬНОГО МУЗЕЯ ИСТОРИИ,