CC BY
13УДК 004.65
Информационные технологии
Смольянов Андрей Григорьевич, кандидат физико-математических наук,
доцент, ФГБОУ ВО «Национальный исследовательский Мордовский государственный университет имени Н. П. Огарёва», Россия, г. Саранск
К ВОПРОСУ ПРОГРАММИРОВАНИЯ БАЗ ДАННЫХ С ПОЛЯМИ ГРАФИЧЕСКИХ ИЗОБРАЖЕНИЙ
Аннотация: Современные системы управления базами данных и новые языки программирования создают принципиально новые возможности для создания прикладного программного обеспечения самого разного назначения. Такие возможности во многом относятся к web-платформе. Методика преподавания дисциплин, связанных с web-программированием, предполагает хорошую проработку дидактического материала, предполагающего изучение на лекционных и лабораторных занятиях широкого спектра вопросов - от основ конкретного языка программирования до специальных его возможностей, имеющих большое значение в сфере так называемого промышленного программирования. В статье рассматриваются методические аспекты, связанные с изучением возможностей современных СУБД и языка программирования PHP в связи с использованием графических изображений. Показаны некоторые приёмы применения языковых средств PHP для взаимодействия с базой данных, хранящей графическую информацию.
Ключевые слова: база данных, система управления базами данных, программирование, язык PHP, графическое изображение, графическое поле, браузер, буфер вывода.
Abstract: Modem database management systems and new programming languages create fundamentally new opportunities for creating application software for various purposes. Such features are largely related to the web platform. The
methodology of teaching disciplines related to web programming involves a good study of didactic material, which involves studying a wide range of issues at lectures and laboratory classes - from the basics of a particular programming language to its special features that are of great importance in the field of so-called industrial programming. The article discusses the methodological aspects associated with the study of the capabilities of modern DBMS and the programming language PHP in connection with the use of graphic images. Some methods of using PHP language tools to interact with a database that stores graphic information are shown.
Keywords: database, database management system, programming, PHP language, graphic image, graphic field, browser, output buffer.
Введение. Не один десяток лет в самых различных сферах деятельности людей используются базы данных (БД) с графическими объектами. Такие базы данных очень ценны и полезны, так как графическая информация, как известно, воспринимается человеком наиболее эффективно. Графические объекты в них, как правило, могут быть добавлены, отредактированы или удалены. Один из подходов к организации базы данных с графическими изображениями состоит в том, что входными данными в части изображений служат графические файлы, отнесенные к определенной существующей категории и размещенные в соответствующем каталоге, подчиненном основному каталогу базы данных. Однако системы управления базами данных (СУБД) разных лет, включая современные, имеют в своем инструментарии возможности описания и хранения графических объектов не на основе использования отдельных графических файлов, а на основе графических полей, позволяющих хранить графическую информация в двоичном представлении. Не смотря на такую интересную возможность в различных источниках можно найти рекомендацию не размещать в таблицах БД образов графических изображений. Так, к примеру, на ресурсе Интернет-агентства Inside.ru (компания «Инсайд») можно найти следующие рекомендации относительно использования графических полей в составе таблиц БД под заголовком «Оптимальное использование
MySQL»: «Не старайтесь поместить в базы данных всю информацию, которая у Вас есть. Например, не нужно хранить там картинки, хоть MySQL это и позволяет. Помещая в базу данных двоичные образы графических файлов, Вы только замедлите работу своего сервера. Прочитать файл с картинкой с диска гораздо проще и, с точки зрения потребляемых ресурсов, экономичнее, нежели соединиться из скрипта к SQL, сделать запрос, получить образ, обработать его и, выдав нужные http-заголовки, показать посетителю веб-сервера. Во втором случае операция выдачи картинки потребует в несколько раз больше ресурсов процессора, памяти и диска. Также стоит помнить о том, что существуют механизмы кэширования веб-документов, которые позволяют пользователю экономить на трафике, а при динамической генерации контента Вы фактически лишаете своих посетителей этой удобной возможности. Вместо картинок лучше хранить в MySQL информацию, на основе которой можно генерировать ссылки на статические картинки в динамически создаваемых скриптами документах» [1]. Несмотря на подобные рекомендации, у любого программиста может появиться соблазн познакомиться с технологией программирования приложений для работы с БД, имеющей в своих таблицах графические поля. Действительно, а что там за горизонтом папок с «картинками»? Так, к примеру, в рамках дисциплин «Технологии создания приложений БД» или «Работа с удаленными базами данных» [2] вполне логично рассмотреть практические аспекты разработки такого программного обеспечения. Выполнение лабораторных работ и индивидуальных заданий с подобной тематикой предполагает рассмотрение важных методологических и методических аспектов, связанных с изучением и применением языковых средств, предназначенных для работы с графическими полями и манипулирования значениями таких полей. Подобных тематических заданий можно предложить множество.
Материалы и результаты исследования. Пусть имеется некоторая база данных, которая постоянно модифицируется во времени. Требуется разработать приложение, которое позволяет в любой момент обработать некоторую часть
данных и зафиксировать результат обработки в графическом виде, например, в виде графика, диаграммы и т. п. Результат обработки предполагается сохранить в таблице базы данных. В качестве исходных данных задание предполагает использование БД со сведениями о доходах сотрудников некоторого учреждения. Пусть, к примеру, требуется построить 3D-диаграмму численности сотрудников учреждения в процентном отношении по отделам. С точки зрения методики такое задание полезно разделить на 3 этапа.
Этап 1 требует построения 3D-диаграммы на основе имеющихся данных. Результат построения такой диаграммы показан на рисунке 1. Задание предусматривает произвольное число отделов учреждения, а также решения вопроса цветовых гамм секторов круговой диаграммы с учетом её объёмности.
Отчет о численности сотрудников отделов
Общий - 5.26% Управления - 26.32% Технического обеспечения - 26.32% Безопасности труда - 42.11 %
Рисунок 1. Круговая диаграмма
Этап 2 предусматривает сохранение построенной круговой диаграммы в таблице БД. В таблице graph_table БД сохраняем: номер диаграммы (автоинкрементное значение), дату записи диаграммы, время записи диаграммы, изображение диаграммы. Фрагмент обзора таблицы в phpMyAdmin показан на рисунке 2.
«—» v id image DateDiagr TimeDiagr
□ - Edit »¿Copy Delete 7 09-11-2019 16:19:25
□ J? Edit »c Copy $ Delete 8 09-11-2019 16:59:58
□ ^ Edit i-c Copy ^ Delete 9 ^ 09-11-2019 17:02 41
Рисунок 2. Фрагмент обзора таблицы graph_table базы данных
Этап 3 предполагает написание web-приложения, которое выдает в окно браузера обзор таблицы graph_table.
Интерфейс приложения имеет вид, показанный на рисунках 3-4.
При нажатии на кнопку «Рисовать диаграмму» появляется часть web-формы, показывающая новую диаграмму (рисунок 3). При нажатии на кнопку «Показать диаграммы» появляется обзор содержимого таблицы graph_table (рисунок 4).
VIEW
Рисовать диаграмму Показать диаграммы
Отчет о численности сотрудников отделов
Общий - 5 26% Управления - 26.32% Технического обеспечения - 26.32% Безопасности труда - 42 11%
Рисунок 3. Результат рисования новой диаграммы
С точки зрения практики программирования полезно обратить внимание на различные методики к реализации заданных функций приложения.
Рассмотрим два разных подхода к реализации функции «Рисовать диаграмму» на языке PHP.
— s-s.
Рисовать диаграмму | VIEW \ Показать анаграммы |
Круговые диаграммы
50 te-u-ano М.щд . s УГоМГШчя 2flJ2% тиитческзг & - JZ* Глиочсчк^х ф,'ДЙ •41.11%
и ií.п.же угрмя^р M оСмповдмч - ^6.32% íWasiaoüCTii тТ'.л-j ■
33 IJI-CIOÍ УПжетвдан. 34 32% TtjmtiKpfv - JS УЛ БвМПМюГМTPÍW ■ -1? HS
Рисунок 4. Обзор содержимого таблицы graph_table
Вариант 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> </head>
<style type='text/css'>
.style0 { font-size: 16pt; color: yellow;
background-color: rgb(255,255,180); }
</style>
<body bgcolor="#da8947">
<form name = 'KrugDiagram' method = 'post'> <BR>
<table border="1" align="center" width="600"> <tr>
<td align="center" class="style0"> <img width="80" height="70" src="Start.jpg" href=""></td> <td align="center" class="style0"> <input type = "submit"
size ="20" name="form_select_button1" value="PHcoBaTb диаграмму"></td> <td align="center" class="style0">
<img width="80" height="70" src="View.png"X/td> <td align="center" class="style0"> <input type = "submit"
size ="20" name="form_select_button1" value="noKa3aTb диaгрaммы"></td>
</tr> <tr> </tr> </table> </form> </body> </html> <?php
function DrawDiagrScreen( ) {
echo "<style type='text/css'>";
echo ".style1 {font-size: 16pt; color: yellow;
background-color: rgb(128,155,250);}"; echo ".style2 {font-size: 16pt; color: navy;
background-color: rgb(128,200,155);}"; echo "</style>"; echo "<body>";
echo "<form name = 'Diagr' method = 'post'
action = 'KrugDiagramSaveToFile.php'>"; echo '<table border="0" align="center" width="600">'; echo '<tr><td>';
echo '<img src="KrugDiagram.php" width="598" height="200">'; echo '</tdX/tr>'; echo "</table>";
echo '<p>';
echo '<table border="0" align="center" width="600">'; echo "<tr>";
echo '<td align="center" class="style2"> <img width="80" height="70" src="Save.jpg"X/td>'; echo '<td align="center" class="style2">
<input type = "submit" Size = "20" name="form_select"
value= "Сохранить диaгрaмму"></td>,; echo "</tr>"; echo "</table>"; echo '</form>';
echo '<font face="Arial" size="4">';
echo '<p align="center">(C) Автор: А.Г. Смольянов, 2020 г.';
echo "</body>"; }
if (isset($_POST['form_select_button1'])) {
$action = $_POST['form_select_button1'];
switch ($action) {
case 'Рисовать диаграмму': {
DrawDiagrScreen(); break;
}
case "Показать диаграммы": {
ShowDiagrScreen(); break;
}
}
}
?>
В данном варианте решения задачи для построения и визуализации новой диаграммы используются тег <img> и программа построения диаграммы KrugDiagram.php.
Вариант 2. Фрагмент программы index.php.
<?php
if(isset($_POST['firstSubmit'])) { ob_start();
include("KrugDiagram.php "); $imageData = ob_get_contents(); ob_end_clean();
}
?>
<!DOCTYPE html> <html>
<head>
<title>KpyroBMe flMarpaMMM</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css"
href="style.css"> <style>
.firstContent { display: flex; flex-direction: column;
}
</style> </head> <body>
<div class="container">
<div class="firstPicture">
<img src="image/start.jpg" height="100" width="100">
</div>
<div class="firstButton">
<form method="post" action='index.php'> <button
type='submit' name='firstSubmit' >PMooBaTb fluarpaMMy</button> </form> </div> </div>
<div class="firstContainer" id='drawer'> <?php
If (isset($_POST['firstSubmit'])) { showfirstContainer();
}
If (isset($_POST['save'])) { showfirstContainer(); saveImage();
}
?> </div>
</body> </html> <?php
function showfirstContainer( ) { global $imageData; $style = '<style>
.firstContainer { display: inline }
.secondContainer { display: none }
</style>'; echo $style;
$showFirstContent = '<div class="firstContent">'; if(isset($_POST['save'])) { $showFirstContent .=
"<span>Диaгрaммa сохранилась в БД</span>";
}
$data = base64_encode($imageData); $showFirstContent .=
'<img src="data:image/gif;base64,' . $data . '"width="600" height="200"/>';
$showFirstContent .= '</div>'; echo $showFirstContent; echo '<div class="secondContent"> <div class="picture">
<img src="image/save.jpg"
height="100" width="100">
</div>
<div class="button">
<form method="post"
action="index.php"> <buttontype="submit" name="save">CoxpaHMTb</button> </form>
</div> </div>';
}
?>
Обратим внимание на тот факт, что во втором варианте решения использованы специальные функции:
ob_start () - включение буферизации вывода; ob_get_contents () - возвращение содержимого буфера вывода; ob_end_clean() - очистка буфера вывода и отключение буферизации вывода.
Использование этих функций позволяет сформировать буфер вывода в виде построенной диаграммы и вывести содержимое этого буфера в форму браузера с использованием метода кодировки base64_encode().
При подготовке данного материала была использована статья [3, с. 28-40]. Заключение. Рассмотренные в настоящем материале языковые средства PHP, возможности СУБД MySQL и примеры способствуют расширению представлений студентов о возможностях программирования приложений баз данных, использующих графические изображения. Настоящий материал может привлечь внимание студентов к рассмотренным инструментам с целью более глубокого изучения этой темы. Он также может помочь студенту в решении собственных учебных, производственных и исследовательских задач.
Библиографический список:
1. Оптимальное использование MySQL. URL: http://www.mysql.ru/docs/optimal.html (дата обращения: 16.11.2020).
2. Смольянов А.Г., Карьгин И.П., Смольянова Е.Г. Работа с удаленными базами данных средствами Web / А.Г. Смольянов, И.П. Карьгин, Е.Г. Смольянова. Саранск: Р-ИЦ Мордов. гос. пед. ин-та, 2017. 122 с.: ил.
3. Смольянов А. Г. Методические аспекты программирования круговых диаграмм на разных языках программирования // Научно-методический электронный журнал «Концепт». 2018. № V5. С. 28-40. URL: http://e-koncept.ru/2018/186044.htm (дата обращения: 13.11.2020).
