Разработка динамического сайта для расчета физико-химических свойств элементов периодической системы Д.И. Менделева



COДEРЖAНИE СТР.

ВВЕДЕНИЕ 6

  1. ОПИСАНИЕ ТЕМЫ 9
    1. Теоретическое описание 9
    2. Практическое описание 11
    3. Сравнение с похожими проектами 11
    1. ХОД РЕШЕНИЯ ЗАДАЧИ 16
      1. Организация информационного обеспечения 19
      2. Организация программного обеспечения 20
      3. Организация технического обеспечения 24
      1. ОПИСАНИЕ ИНТEРФEЙCA 25
        1. ИНТЕРФЕЙС ПОЛЬЗОВАТЕЛЯ 25
        1. ЭКОНОМИЧЕСКАЯ ЭФФЕКТИВНОСТЬ 30
          1. Эффeктивнocть прoeктa 30
          2. Рacчeт ceбecтoимocти прoeктa 31
          1. РЕЗУЛЬТАТЫ ПРАКТИЧЕСКОГО ИСПОЛЬЗОВАНИЯ 35

ЗАКЛЮЧЕНИЕ 39

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

ВВЕДЕНИЕ

Химические связи возникают, когда электроны в атомах взаимодействуют друг с другом. Определения типа связи химических элементов по электроотрицательности является одним из ключевых моментов в химии. Для определения типа связи химических элементов по электроотрицательности [1] нужно выполнить определенный алгоритм для нахождения каждого химического элемента в периодической таблицы Д.И. Менделеева. Процесс определения тип химической связи по электроотрицательности занимает много времени. Для автоматизации данного процесса поставлена задача разработки информационной системы, которая должна быть удобной и доступной в использовании пользователями, независимой и удобным в редактировании исходного кода администратором сайта.

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

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

«Динамического сайта для расчета физико-химических свойств элементов периодической системы Д.И. Менделева», посетитель сайта может контактировать с администратором сайта.

Администратор сайта имеет возможность отвечать посетителям сайта, просматривать список пользователей, которые зарегистрировались, администратор может добавить, изменить или удалить химические элементы. Администратор сайта также может воспользоваться информационной системой Google для просмотра и анализа  статистики. Система «Google» выявляет

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

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

Данная работа отличается от большинства веб-пролежений в глобальной сети интернет благодаря разработки веб-приложения по технологии  Model  View Controller(MVC)[2-4], кросплатформенному шаблону и независимости от Content Management System (CMS) [2]. Преимущество, которое мы получаем от использования концепции MVC — это чёткое разделение логики представления и логики приложения.

Благодаря такому разделению, концепция MVC существенно уменьшает сложность больших приложений[5]. Код получается гораздо более структурированным, и тем самым, облегчается поддержка, тестирование и повторное использование решений, то есть администратор сайта может в любое время добавлять к сайту новые модули, создавая классы с помощью О бъектно ориентированное программирование или же редактировать шаблон сайта.

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

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

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

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

приложения для определения типа химических элементов по электроотрицательности. Рассчитаны себестоимость проекта, издержки и приведена эффективность проекта.

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

На данную тему научно-исследовательской работы со стороны автора сделаны 2 публикации, одна из которых опубликована на « XI Ежегодной научной сессии аспирантов и молодых ученых» и на «Международной научно - технической конференции молодых ученых БГТУ им. В.Г. Шухова».

Автор выражает благодарность своему научному руководителю заведующему кафедрой «Информационных систем и технологий» доктору физико-математических наук, профессору Горбунову  Вячеславу  Алексеевичу за поддержку выполнения выпускной квалификационной работы и определение её актуальности в направлении мобильности для различных операционных систем.

1 ОПИСАНИЕ ТЕМЫ

Тема выпускной квалификационной работы – Создание кроссплатформенного динамического сайта для расчета физико-химических свойств элементов периодической системы Дмитрия Ивановича Менделеева с использованием технологии MVC[2-4], интегрирование с информационной системой Википедия[6], Google и создание шаблона для просмотра веб- страницы сайта на любых гаджетах и платформах.

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

Формулируются требования к техническому обеспечению для тестирования и разработки динамического веб-приложения.

  1. Теоретическое описание

Электроотрицательность одно из важнейших понятий в органической химии. Определение термину дал Лайнус Полинг [1] в своей книге о природе химической связи. По словам Лайнуса Полинга электроотрицательность это способность атома в молекуле смещать к себе электроны. Изучая свойства молекул можно сравнивать электроотрицательность для определения характеристик атомов в её  составе. Лайнус Полинг рассчитал значение электроотрицательности элементов и поместил их в таблицу, которая приведена на рисунке 1.1. Данная таблица позволяет сравнивать разные элементы друг с другом.

Рисунок 1.1- Относительная электроотрицательность атомов элементов по Полингу[16]

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

Рисунок 1.2- Концептуальная схема шаблона MVC [4]

Разработка веб-приложения по  принципу Model View Controller (MVC) [4] и создание кроссплатформенного шаблона для интерфейса пользователя является важным этапом для автоматизации данного процесса и администрирования для систем на базе объектно-ориентированного программирования с использованием скриптового языка программирования Personal Home Page Tools (PHP). Любое ошибочное разделение ответственности за различное функционирование модели, представления и логики, приведет к неправильной функциональности веб-приложения в целом.

  1. Практическое описание

Для разработки динамического веб-приложения определения типа химических элементов по электроотрицательности необходимы технические, программные средства и математическое обеспечение. Для обеспечения технических средств необходим компьютер, профессиональный фотоаппарат, съемный носитель, планшет, мобильные телефоны  с разными платформами (IOS, Android & Windows Phone) и модем с доступом в интернет. Компьютер необходим для установки программного обеспечения, которое позволит разработчику создать динамическое веб-приложение для определения типа химических элементов по электроотрицательности. Профессиональный фотоаппарат позволяет сделать яркие и качественные снимки. Съемный носитель нужен для передачи информации с одного компьютера на другой. Планшет и мобильные телефоны с разными платформами необходимы, для тестирования мобильных версий сайта во время разработки веб-приложения. Математическое обеспечение необходимо для создания алгоритмов обработки информации, используемых при решении функциональных и проектных задач в ИС и моделирования процессов управления.

  1. Сравнение с похожими проектами

Чтобы проектировать динамическое веб-приложения «Определения тип химических элементов по электроотрицательности» проведен анализ структуры

и дизайн похожих веб-приложений. Каждый сайт уникален по-своему, например, на сайте «www.resy.ru» решение задачи, группировки, сортировки химических элементов и разделение по цветам. Для просмотра и нахождения химических элементов шаблон сайта удобен.

Рисунок 1.3- Периодическая система химических элементов Дмитрия Ивановича Менделеева на сайте «www.resy.ru»

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

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

Рисунок 1.4- Главная страница “Xumuk.ru”

На сайте XuMuK(сайт о химии) являющимся одним из самых популярных химических сайтов Рунета[ ], домен «www.xumuk.ru» особое внимание уделено на модельную структуру сайта. Разработан на языке php и JavaScript. Данные

хранятся в базе данных. На сайте имеется модуль «Поделится» для социальной сети «Facebook», «Майл», «Вконтакте», «Twitter», «Одноклассники» и

«Google+».

Рисунок 1.5- Страница цен для публикации рекламы на сайте “Xumuk.ru”

На “footer”-е сайта размещены ссылки: на разработчика сайта раздел

«Дизайн», на обратную связь с администратором сайта раздел «Обратная связь», информация на стоимость размещения рекламы и статистика сайта на сайте «XuMuK(сайт о химии)». На страничке реклама размещена информация о статистике посещения сайта и стоимость публикации рекламы на страницы сайта «XuMuK.ru».

Недостатком сайта XuMuK(сайт о химии) можно отнести не работающую ссылку «Обратная связь», что достаточно негативно влияет на дальнейшее функционирование сайта. Справа слишком много свободного место на сайте, шаблон сайта не динамический, на мобильных устройствах пользоваться

«Основным меню» неудобно. На сайте XuMuK(сайт о химии) много багов[ ], например на разделе «Уравнение химических реакций» не работает ссылка «К разделу помощи» и т.д.

  1. ХОД РЕШЕНИЯ ЗАДАЧИ

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

Рисунок 2.1- Структура файлов и папок

В папке core будут храниться базовые классы Model, View и Controller. Их наследники  будут  храниться  в  директориях  controllers,  models   и   views. Файл index.php это точка в входа в приложение. Ниже приведен код для файла "index.php".

ini_set('display_errors', 1); require_once 'lib/conn_class.php';

require_once 'application/bootstrap.php';

Файл bootstrap.php инициирует загрузку приложения, подключая все необходимые модули. Нижеприведенкоддляфайла "bootstrap.php".

require_once 'core/model.php'; require_once 'core/view.php'; require_once 'core/controller.php'; require_once 'core/route.php'; Route::start();

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

Маршрутизацию поместим в отдельный файл route.php в директорию core. В этом файле опишем класс Route, который будет запускать методы контроллеров, которые в свою очередь будут генерировать вид страниц.

В элементе глобального массива $_SERVER['REQUEST_URI'] содержится полный адрес по которому обратился пользователь.

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

Перейдем в  папку  core  и  добавим  к  файлу  route.php  еще  три файла: model.php, view.php и controller.php.

Рисунок 2.2- Структура файлов и папок.

Внутри файла model.php создадим базовый класс model.

<?php

class Model {

public function get_data() {

}

}

?>

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

Далее создадим базовый класс "View".

<?php class View

{

function generate($content_view,$template_view,$data=null)

{

include "application/views/".$template_view;

}

}

?>

Метод generate предназначен для формирования вида. В него передаются следующие параметры:

Функцией include динамически подключается общий шаблон (вид), внутри которого будет встраиваться вид для отображения контента конкретной страницы.

Теперь создадим базовый класс controller.

<?php

class Controller{ public $model; public $view;

function __construct()

{

$this->view=new View();

}

//действие (action)

//вызываемоепоумолчанию

function action_index()

{

}}?>

Метод action_index — это действие, вызываемое по умолчанию, его мы перекроем при реализации классов потомков.

  1. Организация информационного обеспечения

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

Рисунок 2.1 - Экспортированная база данных «electrootric»

База данных веб-приложения «Определение тип химических элементов по

электроотрицательности» экспортирован в корневой папке « MVC», названием

«electrootric» и расширением «sql».

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

«Определения тип химических элементов по электроотрицательности». Для создания СУБД использован тип данных MyIsam, кодировка utf-8.

Наполнение различных сайтов, функционирование которых

поддерживается одной и той же инсталляцией системы, должно храниться под управлением единой СУБД.

Для реализации статических страниц и шаблонов должны использоваться языки HTML и CSS. Исходный код должен разрабатываться в соответствии со стандартами W3C (HTML 4.0).

Для реализации интерактивных элементов  клиентской части должны использоваться языки JavaScript и DHTML. Для реализации динамических страниц использовалась скриптовый язык PHP.

Все рисунки на веб-приложении определение типа химических элементов по электроотрицательности в формате png и jpg. Объем одной стандартной загружаемой страницы сайта в среднем не превышает 93 kb. Данные таблицы веб-приложения для определения типа химических элементов по электроотрицательности заполнялись из таблицы Дмитрия Ивановича Менделеева и значение электроотрицательности из таблицы  Лайнуса Полинга. В контенте главной страницы сайта размещена таблица химических элементов.

  1. Организация программного обеспечения

Работоспособность системы зависит от программного обеспечения , технического оборудования. Для разработки веб-приложения, разработчику нужны соответствующие программные продукты:

Серверная часть:

Браузер для просмотра веб-страницы (Google chrome, Opera, Safari, Firefox и т.д.) с включенным интерпретатором JavaScript:

Adobe Flash Player версии 9 и выше. Сайт должен быть работоспособен (информация, расположенная на нем, должна быть доступна) даже при отключении в браузере поддержки flash и JavaScript.

Приложение «google analitycs» позволяет анализировать статистику посещение пользователей к сайту и с каких устройств посетители зашли на динамическое веб-приложение для определения типа химических элементов по электроотрицательности. Для того чтобы подключить приложение google analitycs написан код на объектно-ориентированном языке программирования и регистрирация на сайте ИС «Google» для получения уникального кода (UA), который дается каждому пользователю отдельно. Ниже приведен код модуля Google для сбора статистики в "views":

$this->widget('ext.googleAnalytics.EGoogleAnalyticsWidget', array('account'=>'UA-62307819-1', 'domainName'=>'elec.comxa.com'));

В данном коде подключается созданный виджет «google analitycs», далее с помощью массива вводятся параметры подключение к аккаунту разработчика. Ниже приведен код модуля Google для сбора статистики в "extensions":

class EGoogleAnalyticsWidget extends CWidget { public $searchSystems = array(

'mail.ru'=>'q','rambler.ru'=>'words','nigma.ru'=>'s',

'aport.ru'=>'r','blogs.yandex.ru'=>'text','meta.ua'=>'q',

'bigmir.net'=>'q','i.ua'=>'q','online.ua'=>'q', 'ukr.net'=>'search_query','liveinternet.ru'=>'q',

'search.ua'=>'query',); public $account;

public $domainName  = ""; public function run() {$gaq = "";

if (!empty($this->searchSystems)){

if (!is_array($this->searchSystems)){throw new Exception('Additional search systems in GoogleAnalytics widget must be specified as array(\'domainName\'=>\'queryParameter\')');} foreach ($this->searchSystems as

$domain=>$queryParametr){$gaq.= "_gaq.push(['_addOrganic','$domain', '$queryParametr']);\n";}}

if (!empty($this->domainName)){ $gaq .= "_gaq.push(['_setDomainName','$this->domainName']);\n";} Yii::app()->clientScript->registerScript('GoogleAnalytics'," var _gaq = _gaq || [];

_gaq.push(['_setAccount', '$this->account']);

$gaq_gaq.push(['_setAllowHash', false]);

_gaq.push(['_setAllowLinker', true]);

_gaq.push(['_trackPageview']);

function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();",CClientScript::POS_END);}}

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

<?php class LanguageSelector extends CWidget

{public function run()

{$currentLang = app()->language;

$languages = app()->params->languages;

$this->render('languageSelector', array('currentLang' => $currentLang, 'languages'=>$languages));}}

?>

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

<?php class LanguageSelector extends CWidget

{public function run()

{$currentLang = app()->language;

$languages = app()->params->languages;

$this->render('languageSelector', array('currentLang' => $currentLang, 'languages'=>$languages)); }}?>

<?php echo CHtml::form(); ?>

<div id="language-select">

<?php

if(sizeof($languages) < 4) {

$lastElement = end($languages); foreach($languages as $key=>$lang) { if($key !=$currentLang) {

echo CHtml::ajaxLink($lang,'', array('type'=>'post','data'=>'_lang='.$key.'&YII_CSRF_TOKEN='. app()-

>request->csrfToken,'success' => 'function(data) {window.location.reload();}'), array());} else echo '<b>'.$lang.'</b>';

if($lang  != $lastElement)   echo ' | '; } }

else  {echo  CHtml::dropDownList('_lang',  $currentLang,

$languages,array('submit'    => '','csrf'=>true,)); }?></div>

<?php echo CHtml::endForm(); ?>

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

  1. Организация технического обеспечения

Техническое обеспечения — это оборудование, с помощью которого будет размещено динамическое веб-приложение для сайта для расчета физико- химических свойств элементов периодической системы Д.И. Менделеева. Указаны минимальные системные требования.

Серверная часть:

Клиентская часть:

  1. ОПИСАНИЕ ИНТEРФEЙCA

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

3.1 ИНТЕРФЕЙС ПОЛЬЗОВАТЕЛЯ

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

Рисунок 3.1 - Интерфейс пользователя

Пользователь динамического веб-приложения для определения типа

химических элементов по электроотрицательности имеет возможность получить информацию о химических элементах: свойства атома, химические свойства, распространённость, получение, изотопы, свойства изотопов и т.д. Провести расчет для определения типа химических элементов по электроотрицательности. Блок схема "Определение тип связи химических элементов по ЭО" приведена на рисунке 3.2.

Рисунок 3.2- Блок-схема алгоритма «Определение тип связи химических элементов по ЭО»

Электроотрицательность химического элемента определяется согласно алгоритму [7], а тип связи определяется из полученного значения:

  1. Меньше 0,5 связь «Ковалентная неполярная»;
  2. В пределах 0,5 – 1,6 связь «Ковалентная полярная»;
  3. Больше 2 связь «Ионная».

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

Рисунок 3.3- Статистика электроотрицательности химических элементов [6]

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

Рисунок 3.4 - Мобильная версия сайта, тип устройства Iphone 5/SE

Шаблон сайта поддерживает любые современные гаджеты, благодаря кросплатформенному шаблону, который позволяет посетителям сайта зайти с любого устройства, который имеет доступ к интернету. На рисунке 3.2 приведен дисплей телефона Iphone 5/SE в виде изображения с домена на котором был размещен сайт для тестирования "elec.comxa.com".

Также шаблон веб-приложения протестирован на разрешение дисплея для Iphone 6 plus, Iphone 7 plus и Iphone 8 plus.

Рисунок 3.5 - Мобильная версия сайта, тип устройства Iphone 6/7/8 plus

Рисунок 3.6 - Обратная связь