Файл: Применение средств создания серверного программного обеспечения ( АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ И ФОРМИРОВАНИЕ ТРЕБОВАНИЙ К ИНФОРМАЦИОННОЙ СИСТЕМЕ ).pdf

Структуру программного обеспечения можно представить с помощью Диаграммы классов (class diagram UML). Классы в данном случае представляют собой строительные блоки нашей структуры. Они описывают массив объектов с их общими атрибутами, а также отношениями и операциям.

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

В нашем случае диаграмма классов выглядит так (Рисунок 12). Она демонстрирует нам три основные части программного обеспечения проекта при помощи вложенности компонентов.

Рисунок 12 – Диаграмма классов программного обеспечения^[14]

Спецификация программных модулей делит их на несколько типов:

• модуль клиентской части информационной системы (Front end) – весь программный код пишется для этого модуля;
• модуль серверной части информационной системы (Back end) – база данных новостей хранится здесь.

Сформируем блок-схемы (activity diagram UML) основных программных модулей. Для того чтобы наглядно описать последовательность выполнения определенной задачи, можно пользоваться блок-схемами. Во время формирования алгоритма конструируемых модулей, не всегда достаточно нарисовать процесс изменения их состояний. Есть необходимость описать подробности операций, выполняемых внутри системы. Для этой задачи хорошо подходят блок-схемы алгоритмов. В UML для такой задачи придумали диаграмму деятельности, которая является подвидом диаграмм состояний. Диаграммы деятельности применяются для наглядного представления алгоритмов, на основе которых работают операции классов.

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

Рисунок 13 – Диаграмма активности модуля клиентской части^[15]

Модуль серверной части системы (Back-end) позволяет редактировать и публиковать новости в базе данных. После того как пользователь внесет изменения в предоставленные формы, система проверяет их на соответствие заранее заданным типам форм. Например форме «title» присвоен тип varchar(255), где 255 – это количество символов, которые влезут в форму [29]. Тип формы «int(11)» не позволит ввести в нее что-то кроме чисел и цифр. Диаграмма активности модуля серверной части системы (Back end) будет выглядеть так (Рисунок 14).

Рисунок 14 – Диаграмма активности модуля серверной части^[16]

Далее рассмотрим схемы настройки готовых программных решений. Для начала возьмем программу Atom, в которой писался весь html, css и php код. Во время курсовой работы, структура информационной системы писалась на отдельных файлах-страницах с исходным программным кодом, которые все вместе лежали внутри одного архива, а Atom использовался как текстовый редактор для этих страниц. К таким страницам относятся:

• main.html, листинг в приложении А;
• contacts.php, листинг в приложении Б;
• news.php, листинг в приложении В;
• newsPage.php, листинг в приложении Г.

Таким образом, каждый из этих файлов отвечает за разметку основных страниц информационной системы: Главная, Контакты, Список последних новостей, Страница новости.

Помимо этого, в архиве есть еще файлы. Файл «.htaccess» задает тип кодировки всем страницам и состоит всего из одной строки: «AddDefaultCharset UTF-8» [30].

В файле «my.css» прописаны все необходимые стили для разметки страниц [7, с. 47], а также путь к некоторым изображениям, которые используются в дизайне информационной системы. Сами изображения хранятся внутри архива в отдельных папках. Часть из этих изображений можно увидеть в приложениях Д и Е.

Теперь рассмотрим настройки программ, отвечающих за базу данных. К таким программам относятся phpMyAdmin, и Open Server. Дело в том, что страницы News.php и NewsPage.php генерируют новости из базы данных через php и не смогут работать, если заранее не подключится к СУБД (phpMyAdmin) и локальному серверу (Open Server). Если для запуска локального сервера достаточно двух кликов, то с phpMyAdmin необходимо произвести ряд дополнительных операций. Во-первых, phpMyAdmin запускается из интерфейса локального сервера Open Server, поэтому его нужно запустить в первую очередь. Далее, во время открытия phpMyAdmin, нас попросят войти в систему через логин и пароль. Так как у нас запущен локальный сервер, используется стандартный логин «root» и пустой пароль. Все настройки подключения к базе данных «"localhost"; "root"; без пароля» прописаны в отдельном файле «db.php»:

Листинг 1. Исходный код файла «db.php»

<?php

$host = "localhost";

$dbuser = "root";

$dbpassword = "";

$dbname = "test1base"; // Имя базы данных

$dbarticles = "news"; // Имя таблицы

$connection = mysqli_connect("$host", "$dbuser", "$dbpassword", "$dbname");

?>

А вот так страница со списком последних новостей подключается к базе данных через файл «db.php» и оформляет полученную информацию в html код:

Листинг 2. Часть исходного кода из файла «News.php»

<!-- <body> -->

<?php

/* Подключение к базе данных */

require_once("db.php");

if($connection == false){

echo "Error!";

echo mysqli_connect_errno();

exit();

}

/* Запрос данных */

$query = mysqli_query($connection, "SELECT * FROM $dbarticles ORDER BY id DESC ");

while($article = mysqli_fetch_assoc($query))

{

/* Оформление данных в html разметку */

echo '<div class="MyeTitle" style="text-align:left;"><a href=NewsPage.php?id='

.$article['id'].'>'.$article['title'].'</a></div>';

echo '<span class="e-date"><span class="ed-value">'.$article['data'].'</span></span>';

echo '<div class="eMessage" style="text-align:left;clear:both;padding-bottom:2px;">'.$article['preview'].'</div>';

echo '<div style="margin:5px 0 15px 0;" align="center" class="Readnext"><a href=NewsPage.php?id='.$article['id'].'>Читать далее</a>&nbsp;&nbsp;&nbsp;&nbsp;</div></td></tr></tbody></table><br><br>';

}

?>

<!-- </body> -->

Пример того, как данные о мета-тегах прописываются в страницу новости с помощью языка PHP:

Листинг 3. Часть исходного кода из файла «NewsPage.php»

<head>

<meta charset="utf-8">

<title><?php echo $article['title'] ?> | Школа Ателье</title> // Мета-тег title

<link type="text/css" rel="StyleSheet" href="my.css" />

<meta name="description" content="<?php echo $article['description'] ?>"> // Мета-тег description

<meta name="keywords" content="<?php echo $article['Keywords'] ?>"> // Мета-тег keywords

</head>

Фрагмент кода, который отвечает за показ краткого списка последних новостей в правой части некоторых страниц:

Листинг 4. Часть исходного кода из файла «Contacts.php»

<!--<INFORMER>-->

<?php

/* Подключение к базе данных */

require_once("db.php");

if($connection == false){

echo "Error!";

echo mysqli_connect_errno();

exit();

}

/* Запрос данных */

$query = mysqli_query($connection, "SELECT * FROM $dbarticles ORDER BY id DESC LIMIT 4");

while($article = mysqli_fetch_assoc($query))

{

/* Оформление данных в html разметку */

echo '<a href=NewsPage.php?id='

.$article['id'].'>'.$article['title'].'</a></td></tr><br><tr><td width="50%" style="padding-left:2px;font-size:11px;color:#7C7C7C;">';

echo '<i>'.$article['data'].'</i></td></tr></table><hr style="padding:5px 0 0;margin:0 10px 7px 0;border-bottom:1px dashed #999999;">';

}

?>

<!-- </INFORMER> -->

После того как администратор войдет в интерфейс phpMyAdmin, ему понадобится импортировать готовую базу данных. Для этого используется файл «test1base.sql», который написан на языке SQL. Листинг на этот файл можно посмотреть в приложении Ж.

Далее следует описание интерфейса для импорта файла: Верхняя панель навигации - Импорт - Импортируемый файл «test1base.sql» - Кодировка файла «utf-8» - Формат «sql» - Вперед. В текущей базе данных хранится две статьи по тематике курсов шитья. «Test1base» - это название базы данных, а «news» - название таблицы в ней. На этом моменте клиент-серверная информационная система полностью готова к работе.

2.3 ТЕХНИЧЕСКОЕ ОБЕСПЕЧЕНИЕ

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

Проект в целом представляет из себя исходные файлы для клиент-серверной информационной системы и хранится в одном архиве. Внутри архива содержатся все необходимые системные файлы и папки. Разные файлы отвечают за разметку html страницы, css стили этой разметки, включают в себя исполняемый php код. Также есть дополнительные файлы-инструкции, без которых система не сможет работать нормально. Целый архив с файлами проекта для работы информационной системы выглядит так (Рисунок 15).

Рисунок 15 – Архив с фалами проекта для работы информационной системы^[17]

Main.html, Contacts.php, News.php, NewsPage.php - это страницы клиентской части информационной системы (Главная, Контакты, Последние новости, Страница конкретной новости). В исходном коде этих файлов используется язык разметки html, а также исполняемый php код в некоторых из них.

В файле «my.css» прописаны css стили для разметки этих страниц. Он задает цвет и шрифт тексту, оформление ссылок, размер отступов у ряда элементов, которые используются в конструкции системы. Помимо этого, в нем прописаны пути к изображениям. Таким образом файл «my.css» влияет на остальные четыре файла страниц системы: Main.html, Contacts.php, News.php, NewsPage.php.

Построим диаграмму компонентов с отношениями зависимости между ними (Рисунок 16). Подобная зависимость указывает, что процесс внесения изменений в исходный код «my.css» спровоцирует неизбежные изменения в работе остальных четырех зависимых страницах.

Рисунок 16 – Диаграмма компонентов с отношениями зависимости «my.css»^[18]

Файл-инструкция «.htaccess» задает тип кодировки всем страницам информационной системы, и имеет такое же влияние, как и «my.css» (Рисунок 17).

Рисунок 17 – Диаграмма компонентов с отношениями зависимости «.htaccess»^[19]

В папках «Bloks» и «Materials» содержатся изображения. Они используются как в дизайне информационной системы, так и внутри новостей.

Упомянутые ранее страницы «News.php» и «NewsPage.php» генерируют новости из базы данных. Файл с базой данных имеет название «test1base.sql» и вместе со всеми лежит внутри архива проекта. Файл «test1base.sql» не сможет нормально работать без еще одного дополнительного файла-инструкции «db.php». Внутри файла-инструкции «db.php» прописаны настройки подключения к базе данных: "localhost"; "root"; без пароля. Таким образом файлы «test1base.sql» и «db.php» дополняют друг друга, а их изменения необратимо повлияют на страницы «News.php» и «NewsPage.php» (Рисунок 18).

Рисунок 18 – Диаграмма компонентов с отношениями зависимости «test1base.sql» и «db.php»^[20]

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

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

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

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