61
- Сохранить – сохранение внесенных изменений
- Отмена – отмена изменений и возврат в основное меню
- Удалить – удаление сервера из проекта
Разрабатываемая система, помимо служебных функций взаимодействия с
серверами должна также иметь интуитивно понятный пользовательский
интерфейс, работа с которым не вызовет осложнений у сотрудников IT-
подразделений. Сценарий диалога с пользователем показан на рисунке 11.
62
Начало
Проект
существует ?
Да
Создание
нового
проекта
Выбор
проекта
Все необходимые
серверы добавлены в
проект ?
Да
Нет
Добавление
сервера в
проект
Набор команд и скриптов
содержит необходимое
действие ?
Выбор
серверов
Да
Добавление
скрипта в
проект
Нет
Выбор
скрипта или
команды
Подтверждение
действия
Завершение
Нет
Авторизация
Авторизация
успешна ?
Да
Нет
Завершение
Результат
выполнения
Рисунок 11. Сценарий диалога с пользователем
63
2.3.2 Характеристика базы данных
Схема базы данных разработанного приложения представлена на рисунке 12.
auth_user
PK id
password
last_login
is_superuser
username
first_name
last_name
email
is_staff
is_active
date_joined
permissions
spo_project
PK id
date
name
desc
slug
FK1 user_id
spo_script
PK id
date
file
flnm
desc
body
FK2 proj_id
FK1 user_id
spo_history
PK id
date
http
name
uniq
exit
desc
FK3 proj_id
FK2 serv_id
FK1 user_id
spo_server
PK id
date
port
addr
name
desc
FK1 proj_id
FK2 user_id
login
password
Рисунок 12 - Схема базы данных
Подробная структура таблиц базы данных описана в таблицах 9 – 13.
Таблица 9.
Описание структуры записей таблицы «spo_project»
Наименование поля
Идентификатор
поля
Тип поля
Длина
поля
Прочее
Идентификатор
id
число
5
Первичный
ключ
Дата создания
date
дата
6
Имя проекта
name
строка
255
Описание проекта
desc
текст
-
Имя для ссылки
slug
строка
64
Идентификатор
пользователя
user_id
число
5
Внешний
ключ
64
Таблица 10.
Описание структуры записей таблицы «spo_script»
Наименование поля
Идентификатор
поля
Тип поля
Длина поля
Прочее
Идентификатор
id
число
5
Первичный
ключ
Дата создания
date
дата
6
Путь к файлу
file
строка
100
Имя файла
flnm
строка
255
Описание
desc
текст
-
Тело скрипта
body
текст
-
Идентификатор
проекта
proj_id
число
8
Внешний
ключ
Идентификатор
пользователя
user_id
число
8
Внешний
ключ
Таблица 11.
Описание структуры записей таблицы «spo_server»
Наименование поля
Идентификатор
поля
Тип поля
Длина
поля
Прочее
Идентификатор
id
число
5
Первичный
ключ
Дата создания
date
дата
6
SSH порт
port
строка
5
Адрес для
подключения
addr
строка
255
Имя сервера
name
строка
255
Описание
desc
текст
-
Идентификатор
проекта
proj_id
число
8
Внешний
ключ
Идентификатор
пользователя
user_id
число
8
Внешний
ключ
Имя пользователя
login
строка
20
Пароль пользователя
password
строка
50
65
Таблица12.
Описание структуры записей таблицы «spo_history»
Наименование поля
Идентификатор
поля
Тип поля
Длина
поля
Прочее
Идентификатор
id
число
5
Первичный
ключ
Дата создания
date
дата
6
http адрес
http
строка
999
Действие (запуск,
редактирование и
т.д.)
name
строка
255
Идентификатор
uniq
строка
255
Код выхода
exit
строка
10
Описание
desc
текст
-
Идентификатор
проекта
proj_id
число
8
Внешний
ключ
Идентификатор
сервера
serv_id
число
8
Внешний
ключ
Идентификатор
пользователя
user_id
число
8
Внешний
ключ
Таблица 13.
Описание структуры записей таблицы «auth_user»
Наименование поля
Идентификатор
поля
Тип поля
Длина
поля
Прочее
Идентификатор
пользователя
id
число
5
Первичный
ключ
Пароль пользователя
password
строка
128
Время последнего
входа
last_login
дата
Суперпользователь
is_superuser
логический
1
Имя пользователя
username
строка
150
Имя
first_name
строка
30
Фамилия
last_name
строка
30
Адрес почты
email
строка
254
Доступ в
административную
часть
is_staff
логический
1
Активирован
is_active
логический
1
Дата регистрации
data_joined
дата
-
Права на объекты
permissions
строка
-
66
2.3.3 Структурная схема пакета (дерево вызова процедур и программ)
Работа пользователя заключается в интерактивном взаимодействии с вэб-
интерфейсом программы и формами ввода-вывода, которые при определённых
условиях вызывают на стороне браузера, либо сервера необходимые функции.
Дерево вызова процедур и программ показано на рисунке 13.
Форма авторизации / регистрации
Форма выбора проекта
Страница
управления
проектом
Раздел
управления
скриптами
Раздел
управления
серверами
Форма
просмотра
истории
действий
Форма
добавления
скрипта из файла
Форма
редактирования
скрипта
Форма ввода
дополнительных
параметров
скрипта
Форма
просмотра
результата
выполнения
скрипта
Форма
добавления
сервера
Форма
редактирования
сервера
Модуль авторизации
Функция
выбора
сервера и
выполняемых
действий
Функция
выполнения
действий на
сервере
Функция
записи
результата в
базу данных
Форма создания
скрипта
Раздел выбора
команд
Рисунок 13. Дерево вызова процедур и программ
Описание функций вышеперечисленных модулей приведено в таблице 14.
Таблица 14.
Описание функций модулей приложения
№
п/п
Наименование
модуля
Функции модуля
1
Форма авторизации /
регистрации
Предоставляет пользователю интерфейс ввода
логина/пароля для входа в систему или регистрации
67
№
п/п
Наименование
модуля
Функции модуля
2
Модуль авторизации
Стандартный модуль Django, обеспечивающий
проверку учетных данных, регистрацию и
обработку прав пользователя на объекты
3
Форма выбора
проекта
Интерфейс для создания, выбора и редактирования
описания проекта
4
Страница управления
проектом
Основная страница управления проектом
5
Вход в
административную
часть приложения
Ссылка на вход в раздел управления приложением
(редактирование пользователей, содержимого
справочников, назначение прав)
6
Раздел управления
серверами
Составляющая страницы управления проектом.
Предназначена для добавления, редактирования,
просмотра, фильтрации и выбора серверов
7
Форма добавления
сервера
Форма для добавления сервера в проект. Здесь
указываются имя, и данные для подключения к
серверу
8
Форма
редактирования
сервера
Форма для редактирования имеющейся информации
о сервере
9
Раздел управления
скриптами
Составляющая страницы управления проектом.
Предназначена для добавления, создания,
редактирования, просмотра, фильтрации и выбора
скриптов
10
Форма добавления
скрипта из файла
Форма для загрузки файла скрипта в проект. Здесь
производится выбор файла на локальном
компьютере и добавляется его описание
11
Форма создания
скрипта
Форма для добавления скрипта в проект. Здесь
указываются имя файла, тело скрипта и его
описание
12
Форма
редактирования
скрипта
Форма для редактирования тела скрипта и его
описания
13
Форма ввода
дополнительных
параметров скрипта
Форма для передачи в скрипт дополнительных
аргументов, а также просмотра информации о
скрипте
14
Страница просмотра
истории действий
Страница просмотра истории действий
15
Раздел выбора команд
Составляющая страницы управления проектом.
Предназначена для выбора команд. Список команд
статический и доступен по умолчанию в каждом
создаваемом проекте
68
№
п/п
Наименование
модуля
Функции модуля
16
Функция выбора
сервера и
выполняемых
действий
Выбор серверов, скриптов / команд для выполнения.
Функция формирует GET запрос к HTTP серверу и
передаёт необходимые параметры функции
выполнения действий на сервере
17
Функция выполнения
действий на сервере
Принимает в качестве параметров список серверов,
данные для подключения и имя скрипта или
команды. Устанавливает подключение, выполняет
необходимые действия и возвращает результат
18
Функция записи
результата в базу
данных
Записывает результат выполнения в базу данных
19
Страница просмотра
результата
выполнения скрипта
Страница для просмотра результата выполнения
скрипта
Важную роль в разрабатываемой системе играет вэб-интерфейс,
формирующийся за счет использования таких средств как:
Модуль Django, обеспечивающий маршрутизацию поступающих запросов
(файл urls.py). Данный файл описывает шаблоны HTTP запроса и при совпадении
по регулярному выражению
15
передает поступивший запрос в соответствующий
ему обработчик. Функции обработки, как правило, располагаются в файле urls.py
Содержимое файла urls.py приведено в приложении 4.
Модуль Django, обеспечивающий обработку поступающих запросов –
файл views.py, содержащий функции на языке Python. После выполнения всех
необходимых функций полученный результат передается в шаблонизатор.
Содержимое файла views.py приведено в приложении 5.
Шаблонизатор Django - динамически формирует HTML страницы,
добавляя в них данные, полученные на предыдущих этапах. HTML шаблоны, как
правило, создаются в папке Templates приложения.
Примеры основных шаблонов приведены в приложении 6.
Файл forms.py - помогает быстро и эффективно создавать HTML формы,
например форма авторизации, форма для заполнения данных о сервере, форма
15
Регуля
рные выраже
ния (англ. regular expressions) — формальный язык поиска и осуществления
манипуляций с подстроками в тексте, основанный на использовании метасимволов (англ. wildcard
characters). Для поиска используется строка-образец (англ. pattern, по-русски её часто называют
«шаблоном», «маской»), состоящая из символов и метасимволов и задающая правило поиска.
69
просмотра информации и т.д.
Для создания простой формы достаточно лишь указать, какие поля и из каких
таблиц необходимо разместить на форме.
Примеры основных, использующихся форм приведены в приложении 7.
JavaScript и библиотека Jquery – необходимы для обработки действий
пользователя, нажатий кнопки мыши и формирования параметров HTTP запроса на
основе активированных элементов. Так же, благодаря Jquery и JavaScript
становится возможным выводить в вэб-интерфейс данные в реальном времени без
полной перезагрузки всей страницы.
2.3.4 Описание программных модулей
1. Начальная загрузка страницы
При открытии страницы проекта запускается встроенная в JavaScript
функция «window.onload»[2], которая предназначена для ожидания полной
прогрузки DOM
16
. Помимо ожидания загрузки страницы, данная функция
выполняет еще несколько важных задач:
Сворачивание всех элементов, находящихся в блоках «Скрипты»,
«Серверы» и части блока «Команды». Это действие необходимо для экономии
места на экране и обрабатывается на JavaScript, так как стандартный язык разметки
HTML не имеет таких возможностей и по умолчанию все элементы вэб-страницы
отображаются в развёрнутом виде.
Включает в себя пользовательский код, который не выполнится до
полной загрузки страницы. В данном случае пользовательский код представлен
набором переменных, которые создаются динамически, в зависимости от
содержимого страницы. Например, список серверов, скриптов и команд.
Включает в себя пользовательские функции, описывающие ожидаемые
действия пользователя и реакцию на них.
После выполнения всех внутренних инструкций начинает отслеживание
действий пользователя
16
DOM (от англ. Document Object Model — «объектная модель документа») — это не зависящий от
платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к
содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление
таких документов.
70
Код функции «window.onload»:
window.onload = function() {
var roller_list = Array.from(document.getElementsByClassName('roller'));
var run_cmnd = document.getElementById('run_cmnd');
var updown = document.getElementById('updown');
var tabs = document.getElementById('id_tab');
var hash = window.location.hash;
// Свернуть всё при загрузке
select_all('selected_scripts', 'script-body', false, 'SX');
select_all('selected_servers', 'server-body', false, 'SS');
// Пустое значение run_cmnd
if (run_cmnd) { run_cmnd.value = ''; }
// Кнопки перемотки
window.onscroll = function() { if (document.body.scrollTop > 10) {
updown.classList.remove('hidden'); }
else { updown.classList.add('hidden'); } }
roller_list.forEach( function(item) { item.onscroll = function() {
if (item.scrollTop > 10) { updown.classList.remove('hidden'); }
else { updown.classList.add('hidden'); } }});
// Активация табов (на будущее)
if (!hash) { hash = '#scripts'; }
if (tabs) {
tabs.value = hash.replace('#', '');
show_commands(tabs.value + '_commands');
go_up();
}
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
// Показать/Скрыть подробную информацию
if (document.getElementById('id_server_info')) {
if (document.getElementById('id_server_info').checked) {
show_or_hide_all('id_server_info', 'server-panel', 'sshow', 'show'); }
else { show_or_hide_all('id_server_info', 'server-panel', 'sshow', 'hide'); }
if (document.getElementById('id_script_info').checked) {
show_or_hide_all('id_script_info', 'script-panel', 'xshow', 'show'); }
else { show_or_hide_all('id_script_info', 'script-panel', 'xshow', 'hide'); }
}
}
2. Выбор элементов на странице
При выборе элементов из блока «Скрипты», «Серверы» или «Команды»
выполняется встроенный в JavaScript метод «.oncliсk», который вызывает
пользовательскую функцию «selector». Назначение функции «selector»: