Адаптивный web-интерфейс для работы с таблицами принятия решений

Размещено на http://www.allbest.ru/

Министерство образования и науки Российской Федерации

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

"КУБАНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ"

Кафедра математического моделирования

КУРСОВАЯ РАБОТА

Адаптивный web-интерфейс для работы с таблицами принятия решений

Краснодар 2012

Реферат

Курсовая работа 33 с., 27 рис., 5 табл., 7 источников, 1прил.

Объектом исследования являются таблицы принятия решений и возможности их применения в инструментальных средствах.

Цель работы

- Реализовать интерфейс пользователя для инструментального средства, обеспечивающего работу с таблицами принятия решений, встроенными в СУБД Oracle

Исследования проводились с помощью технологий HTML5, CSS3, JavaScript, JSON, PHP.

С использованием указанных технологий был реализован адаптивный WEB-интерфейс пользователя.

Содержание

Введение

1. Таблицы принятия решений

2. Архитектура инструментального средства

3. Интерфейс

3.1 Технологии и методы

3.2 Реализация

4. Экспериментальные данные

Заключение

Список использованных источников

Приложение

интерфейс пользователь решение архитектура

Введение

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

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

Несмотря на простоту представления таблиц, работа с большим их количеством может быть неудобной для человека. Для облегчения восприятия и обработки я и Зубко Марина реализовали инструментальное средство для работы с таблицами принятия решений.

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

1. Таблицы принятия решений

Таблица решений -- способ представления модели со сложной логикой. Аналогично условным операторам в языках программирования, они устанавливают связь между условиями и действиями. Но, в отличие от традиционных языков программирования, таблицы решений в простой форме могут представлять связь между множеством независимых условий и действий. Таблицы решений представляют собой частный случай так называемых продукционных систем. В этих системах правила вычислений представляются в виде продукций. Продукции представляют собой операторы специального вида и состоят из двух основных частей, для краткости называемых обычно "ситуация -- действие". "Ситуация" содержит описание ситуации, в которой применима продукция. Это описание задается в виде условий, называемых посылками продукции. "Действие" -- это набор инструкций, подлежащих выполнению в случае применимости продукции. В общем случае таблица принятия решений, предназначенная для восприятия человеком, разделяется на четыре области.

Таблица 1

Условия	Комбинации выполнения условий
Действия	Выполняемые действия

Для иллюстрации рассмотрим таблицу решений из Википедии.

Таблица 2

Свет в соседней комнате горит	Да	Нет	Нет
Свет у соседей горит	-	Да	Нет
Поменять лампочку	Х
Проверить пробки		Х
Позвонить электрику		Х	Х
Позвонить диспетчеру			Х

Две верхних строки относятся к условиям, остальные четыре - к действиям.

Для хранения таблицы решений в базе данных реляционного типа, транспонируем представляющую матрицу.

Таблица 3

Свет в соседней комнате горит	Свет у соседей горит	Поменять лампочку	Проверить пробки	Позвонить электрику	Позвонить диспетчеру
Да	-	Х
Нет	Да		Х	Х
Нет	Нет			Х	Х

Получилась реляционная таблица с шестью столбцами и тремя строками.

Каждой строке данной таблицы соответствует продукция. Например, для первой строки:

Свет_в_соседней_комнате_горит(Да) ? Свет_у_соседей_горит(Безразлично) => Поменять_лампочку(Да)

Тип таблицы принятия решений зависит от количества возможных вариантов выполнения условий. Бинарные варианты (например, да / нет) называют условиями с ограниченным входом. Как правило, добавляется третье значение - безразлично. Варианты выполнения условия, которые могут учитывать большее количество возможных исходов, называют условиями с расширенным входом. Таблица принятия решений, которые сочетают в себе как условия с ограниченным входом, так и с расширенным входом, называется таблицей принятия решения со смешанным входом.

Данное инструментальное средство используют условия с расширенным входом.

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

Универсальность интерфейса была получена за счет использования универсальной модели данных [1]. Это делает интерфейс независимым от решаемой задачи.

2. Архитектура инструментального средства для работы с таблицами решений

Рисунок 2.1

Разработанный прототип инструментального средства, представленный на рисунке 2.1 состоит из следующих модулей:

- Интерфейс пользователя

- Интерфейс базы данных

- База данных

Прототип интерфейса создан Семенютиной Л.

Мною реализован интерфейс пользователя и интерфейс базы данных.

Используемые таблицы решений хранятся в базе данных, схема базы показана на рисунке 2.2. Модель данных разработана Зубко М.



Рисунок 2.2

Таблица DECISION - таблица принятия решений, в которой определённому набору ответов соответствуют действия и последействия.

Рисунок 2.3

Таблица DATA_USERS содержит информацию о пользователях: имя, адрес, идентификатор, названия системы, области и подобласти, с которыми работает данный пользователь, а также логин и пароль для входа в систему. Данные заносятся в таблицу при регистрации пользователя.



Рисунок 2.4

Таблица METADATA содержит список условий и действий для данной системы, области, подобласти, таблицы, а также поле TYPE_СON, определяющее способ получения ответа от клиента: ввод собственного значения (text) или выбор из списка предложенных (checkbox).

Рисунок 2.5

Таблица DATA - содержит имя системы, область, подобласть, номер и название таблицы, с которой работает клиент, идентификационный номер клиента, номера и названия условий, а также ответы на поставленные условия. Данные в таблицу заносятся автоматически, в процессе работы с системой.



Рисунок 2.6

Таблица DATA_CLIENTS содержит информацию о клиентах (адрес, имя и т.д.), номер пользователя, к которому привязан этот клиент, названия системы, области, подобласти, с которыми этот клиент работает, а также данные о номере текущей таблицы решения. Информация о клиенте добавляется пользователем (user), данные о текущей таблице решения заносятся автоматически.

Рисунок 2.7

Таблица History содержит историю переходов клиентов пользователя по таблицам принятия решений.



Рисунок 2.8

3. Интерфейс пользователя

Разработанный WEB - интерфейс является частью инструментального средства для работы с таблицами принятия решений.

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

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

3.1 Технологии и методы

Архитектура интерфейса представлена на рисунке 3.1.

Рисунок 3.1

Интерфейс базы данных представляет собой набор PHP скриптов, осуществляющих подключение к базе данных, отправку запроса, преобразование и вывод полученных данных.

Для подключения к СУБД Oracle используются расширение OCI8 и библиотеки Oracle Database Instant Client. Расширение позволяет работать с базой данных Oracle 11g, 10g, 9i и 8i, поддерживать SQL и PL/SQL-выражения. Основной функционал представляет собой поддержку транзакций, привязку переменных PHP к соответствующим плейсхолдерам Oracle.

Пример PHP скрипта изображен на рисунке 3.2.

Рисунок 3.2

Обмен данными между клиентом и сервером происходит по технологии AJAX. Она не является самостоятельной, и представляет собой концепцию использования нескольких смежных технологий. AJAX базируется на двух основных принципах:

- использование технологии динамического обращения к серверу "на лету", без перезагрузки всей страницы полностью

- использование DHTML (CSS, DOM и JavaScript) для динамического изменения содержания страницы

Итак, рассмотрим, что же Ajax по существу делает. Он помещает технологию JavaScript и объект XMLHttpRequest между Web-формой и сервером. Когда пользователи заполняют формы, данные передаются в какой-то JavaScript-код, а не прямо на сервер. Вместо этого JavaScript-код собирает данные формы и передает запрос на сервер. Пока это происходит, форма на экране пользователя не мелькает, не мигает, не исчезает и не блокируется. Другими словами, код JavaScript передает запрос в фоновом режиме; пользователь даже не замечает, что происходит запрос на сервер. Более того, запрос передается асинхронно, а это означает, что JavaScript-код (и пользователь) не ожидают ответа сервера. То есть, пользователи могут продолжать вводить данные, прокручивать страницу и работать с приложением. Затем сервер передает данные обратно в JavaScript-код (все еще находящийся в Web-форме), который решает, что делать с данными. Он может обновить поля формы "на лету", придавая приложению свойство немедленности - пользователи получают новые данные без подтверждения или обновления их форм.

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

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

JSON представляет собой комбинацию массивов и объектов и предназначен только для хранения данных. Как следствие, JSON не может иметь переменных и не допускает никаких операций над ними. Вот пример объекта с использованием синтаксиса JSON:

{

"firm":["BMW", "Audi", "Volkswagen"],

"model":["X5", "A6", "Touareg 7L"],

"year":[2007, 2008, 2006],

"price":[99000, 78000, 45000]

}

Передача такого объекта с использованием HTTP-протокола будет происходить очень быстро, поскольку содержит минимум символов. JSON не требуют дополнительного синтаксического анализа на стороне клиента, что является очевидным его преимуществом перед XML в аспекте передачи данных от сервера клиенту.

В PHP, для представления данных в формате JSON служит расширение JSON extension. В версиях PHP старше 5.2.0 поддержка JSON встроена в ядро, в более ранних версиях необходимо подключать к скрипту дополнительный файл с функциями.

Итак, в PHP за работу с данными в формате JSON отвечают две функции: json_encode() и json_decode().

Первая - преобразует структуру PHP (объект, массив или ассоциативный массив) в данные формата JSON. Вторая реализует обратное преобразование. Интересно, что функции json_encode и json_decode работают корректно только с кодировкой UTF-8.

Реализация Ajax и поддержка JSON в интерфейсе пользователя обеспечивается использованием библиотеки jQuery. Из многочисленных методов этой библиотеки в разработанном интерфейсе используются ajax() и getJSON(). Первый метод удобно использовать для получения данных из одного столбца. Синтаксис метода выглядит так: jQuery.ajax(settings).

Используемые настройки для вызова:

Таблица 4

Название	Описание
type: string("GET")	Определяет тип выполняемого запроса (GET или POST). Можно использовать также типы PUT и DELETE, но нужно помнить, что их поддерживают не все браузеры.
url: string(адрес текущей страницы)	Определяет адрес, на который будет отправлен запрос.
data: object, string	Данные, которые будут отправлены на сервер. Если они заданы не строчным значением, то будут предварительно преобразованы в строку.
success(data, textStatus): function, array	Функция, которая будет вызвана в случае удачного завершения запроса к серверу. Ей будут переданы два параметра: данные, присланные сервером и уже прошедшие предварительную обработку и строка со статусом выполнения.

Пример использования метода представлен на рисунке 3.3.

Рисунок 3.3

Метод getJSON() удобен для получения данных из многостолбцовой выборки. Полученные в результате запроса JSON данные будут автоматически преобразованы в массив javascript-объектов. Одна строчка выборки соответствует одному объекту из массива. Доступ к полям объекта осуществляется по названию столбца или его псевдонима.

Запрос json-данных у сервера производится методом GET, т.е. без перезагрузки страницы.

Синтаксис данного метода: jQuery.getJSON(url,[data],[callback]).

Используемые параметры для вызова.

Таблица 5

Параметры	Описание
url	url-адрес, по которому будет отправлен запрос
data	данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: {fName1:value1, fName2:value2, ...}
callback(data, textStatus)	пользовательская функция, которая будет вызвана после ответа сервера
	data	данные, присланные с сервера
	textStatus	статус того, как был выполнен запрос

3.2 Реализация

Главная страница интерфейса представляет собой меню, с помощью которого пользователь может войти в систему и выбрать соответствующие область и подобласть знаний. Новые пользователи имеют возможность зарегистрироваться. При желании пользователь может загрузить обучающие материалы и по таблицам принятия решений, и работе интерфейса

Рисунок 3.4

Рисунок 3.5

Рисунок 3.6

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



Рисунок 3.7

Так выглядит регистрационная форма (рис). Обязательными являются только три поля: имя, логин и пароль.

Рисунок 3.8

Если аутентификация пройдена успешно, то пользователь попадает на вторую страницу. На ней находится динамически построенный список его клиентов. Для обеспечения динамики необходимые параметры (имя системы, область, подобласть, идентификатор пользователя) передаются странице в адресной строке.



Рисунок 3.9

Рисунок 3.10

При необходимости пользователь может добавлять и удалять клиентов. Данные манипуляции проводятся с таблицей Data_Clients.

Рисунок 3.11

В таблице в столбце CURRENT_PROGRESS находится номер следующей таблицы решений. И при нажатии на ссылку происходит переход на страницу заполнения. В качестве параметров выступают: имя системы, область, подобласть знаний, номер таблицы и идентификатор клиента.



Рисунок 3.12

Рисунок 3.13

В первой вкладке при загрузке создается форма для заполнения текущей таблицы решений. При нажатии на кнопке Submit происходит вставка сформированных из выбора пользователя строк в таблицу DATA. Во второй вкладке находится таблица с данными о предыдущих заполнениях таблиц для данного клиента, эта информация находится в таблице DATA.

Рисунок 3.14

В третьей вкладке приводится таблица принятия решений для текущей заполняемой формы. Верхняя часть таблицы - условия и комбинации условий, нижняя - действия и комбинации действий. Данные запрашиваются из временной таблицы, созданной процедурой TRANS().

А при нажатии на зеленый домик пользователь всегда может вернуться на главную страницу.

4. Экспериментальные данные

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

Рисунок 4.1

Проведем диагностику у пациента Tim Balm c id = 46.

Рисунок 4.2

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



Рисунок 4.3

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

Рисунок 4.4

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



Рисунок 4.5

Заключение

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

С использованием полученных знаний был реализован адаптивный WEB интерфейс инструментального средства для работы с таблицами принятия решений.

В дальнейшем планируется реализовать интерфейс администратора, а также экспорт и импорт данных для взаимодействия с внешними приложениями.

Список использованных источников

1 Бессарабов Н.В., Муса-Оглы Е.С. Универсальная модель данных. RSDN, 2011, №3. С. 51-55

2 Хамби Э. Программирование таблиц решений. Москва: Мир, 1976. - 86 с.

3 Jones C., Holloway A. The underground PHP and Oracle manual. Oracle, 2012. - 362 с.

4 Документация jQuery Tools [Электронный ресурс]. URL: http://jquerytools.org

5 Документация PHP [Электронный ресурс]. URL: http://www.php.net

6 Русская документация по jQuery [Электронный ресурс]. URL: http://jquery-docs.ru

7 Документация Oracle [Электронный ресурс]. URL: http://oracle.com

Приложение

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>БЗ</title>

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

<link rel="stylesheet" href="style3.css">

<link rel="stylesheet" href="accord2.css">

<script type="text/javascript" src="jquery.tools.min.js" ></script>

<script type="text/javascript" src="progress_scen.js"></script>

</head>

<body>

<div id='header'>

<a href='index.htm'><img class='home' src='images/h1.png' ></a>

<div class='ithink'>IThink. Progress</div>

</div>

<div id='wrap'>

<div>

<div id="accordion">

<div class='head'><br><br>T e s t </div>

<div style="width:650px; display:block" class='pane'>

<div id='test'></div> <br><br>

<div id='test_ok'>Submit<img id='rabbit'

src="images/rabbit.png" /></div>

</div>

<div class='head'><br><br>T a b l e</div>

<div class='pane'>

<div id='data_pane'></div>

</div>

<div class='head'><br>S o l u t i o n<br><br>T a b </div>

<div class='pane'>

<div id ='sol_tab'></div>

</div></div></div>

<div class='tooltip' id='rab'>Follow the white rabbit...</div>

</div>

<div id='footer'>footer</div>

</body>

$(function() {

var tableno = parseInt(param('Tableno'));

var sysname = param("Sysname");

var domain = param("Domain");

var subdomain = param("Subdomain");

var cli_id = param("Client_id");

//alert(tableno);

$("#accordion").tabs(".pane", {

tabs: '.head',

effect: 'horizontal'

});

$.getJSON("index3.php","col=select condition,type_con from metadata "

+"where tableno="+tableno+" and sysname='"+sysname+"' and domain='"+domain+"' and subdomain='"+subdomain

+"' and condition is not null order by condition_id",

function(data,textStatus){

$.each(data,function(i,res){

$('#test').append("<div class='test_div'><input class='test_inp ' type="

+res[1]+" name='row'>"+res[0]+"</input></div>");

});

});

$.getJSON("index3.php",

"col=select rownum,tableno,condition_name,answer from data "

+"where client_id="+cli_id+" and sysname='"+sysname

+"' and domain='"+domain+"' and subdomain='"+subdomain+"'",

function(data,textStatus){

$.each(data,function(i,res){

$('#data_pane').append("<tr class='test_div'><td class='sol_tab_cell'>"

+res[0]+"</td><td class='sol_tab_cell'>"+res[1]+"</td><td class='sol_tab_cell'>"

+res[2]+"</td><td class='sol_tab_cell'>"+res[3]+"</td></tr>")});

$('#data_pane tr:even').addClass('first');

});

$.ajax({

type:'GET',

url:'index4.php',

data: "col=select * from decision_"+tableno

+"&num="+tableno+"&col1=begin trans('"+sysname+"','"+domain+"','"+subdomain+"',"+tableno+"); end;",

dataType:'json',

success: function(data,textStatus){var m = 0;

$.each(data,function(i,res){

$('#sol_tab').append('<tr id = "sol_tab_'+m+'"></tr>');

for (var key in res) {

if (key == 0)

$('#sol_tab tr:last').append('<td class="sol_tab_cell">'+res[key]+'</td>');

else $('#sol_tab tr:last').append(

'<td class="sol_tab_cell">'+res[key]+'</td>');

}

m++;});

for(var m = 0;m < data.length/2;m++)

$('#sol_tab_'+m+' td:first').addClass('first');

for(var m = data.length/2;m < data.length;m++){

$('#sol_tab_'+m+' td:not(:first)').addClass('first');

}}

});

$("#rabbit").tooltip({

tip: '#rab',

effect: 'fade',

fadeOutSpeed: 100,

predelay: 400,

position: "bottom right",

offset: [-50, -80] });

$('#test_ok').click(function(){

var div = $('#test').children();

var m = 1;

var answer ='yes';

$.each(div,function(i,res){

if ($(res).find('.test_inp').prop("checked")) answer ='yes';

else answer ='no';

$.ajax({

type:'GET',

url:'index2.php',

data: "col=insert into data (sysname,domain,subdomain,tableno,client_id,condition_id,condition_name,answer) values ('"

+sysname+"','"+domain+"','"+subdomain+"',"

+tableno+","+cli_id+","+m+",'"+$(res).text()+"','"+answer+"') ",

async: false,

success: function(data,textStatus){

//alert(textStatus);

}

});

m++;});

$.ajax({

type:'GET',

url:'index5.php',

data: "col=select current_progress from data_clients where client_id="+cli_id+"&num="+tableno+"&col1=begin go('"+sysname+"','"

+domain+"','"+subdomain+"',"+tableno+","+cli_id+"); end;",

dataType:'json',

async: false,

success: function(data,textStatus){

document.location.href = 'progress.htm?Sysname='+sysname

+'&Domain='+domain+'&Subdomain='+subdomain+'&Tableno='+data

+'&Client_id='+cli_id;

}

});

});

$('#rabbit').click(function(){

document.location.href = 'result.htm?Sysname='+sysname

+'&Domain='+domain+'&Subdomain='+subdomain+'&Client_id='+cli_id;

});

});

function template(row,data){

for (var key in data) {

alert(key+':'+data[key])

}

row.text(data[0]);

return row;}

function template_inp(row,data){

row.append("<input type="+data[1]+" name='row'>"+data[0]+"</input>");

return row;}

function param(Name)

{ var Params = location.search.substring(1).split("&");

var variable = "";

for (var i = 0; i < Params.length; i++)

{

if(Params[i].split("=")[0] == Name)

{

if (Params[i].split("=").length > 1)

variable = Params[i].split("=")[1];

variable = replaceAll(variable,'%20',' ');

return variable;

}}

return "";}

function replaceAll(str, what, to) {

return str.split(what).join(to);

}

Размещено на Allbest.ru