1. Расчѐтная работа
по дисциплине «Моделирование и анализ ПО»
Пр. О «Инфомаяк электронного меню блюд»
студента группы ПОС – 10а
Келембета Сергея

2. Интерфейс Windows-приложения
На форме изображено окно регистрации пользователя для получения меню.

3. При входе в систему происходит переход к управлению меню. В нем можно добавлять или удалять
на страницу информацию, связанную с блюдами.

4. Главное меню программы предназначено для получения, управления меню и регистрации
пользователя .

5. При нажатии на главной форме кнопки «Загрузить меню» файл меню загружается с сервера. Далее
можно управлять меню нажав на кнопку «Управление меню»

6. При нажатии кнопки «Автор» открывается окно информации о разработчике.

7. Тема: «Построение концептуальной модели заданной
функциональности.
Цель: Составить концептуальную модель заданной
функциональности компьютерной системы.
Выполнил: студент ДонНТУ
Группы ПОС-10А
Келембет Сергей

8. ИНФОМАЯК ЭЛЕКТРОННОГО МЕНЮ БЛЮД
Класс ПО: Мобильная система КлиентГенератор.
Ник: Инфомаяк электронного меню блюд.
Тема: Генерация сервером кодированного маркерами электронное
меню блюд в виде многостраничного графического изображения для
отображения слайдером и распознаванием мобильным клиентом.
Назначение: Беспроводная, несетевая передача объективной
информация о блюдах с последующим сохранение в памяти состава
заказа и интерактивным контролем формирования суммы заказа.

9. ФУНКЦИИ
Сервер является хранилищем и генератором многостраничных плакатов электронного меню
блюд. Служба с Web-интерфейсом регистрирует владельца меню, реализует ввод полей
меню для хранения в базе данных, редактирует художественный шаблон титульного листа
плаката меню, генерирует многостраничный анимированный SVG-плакат меню. Сервер
выдает владельцу меню общедоступную URL-ссылку на SVG-плакат. Для проигрывания SVGплаката на фоторамке существует функция конвертирования плаката в серию растровых
изображений формата JPG заданного пользователем разрешения. Владелец меню
собственными техническими средствами реализует показ анимированного плаката в
витрине заведения. Посетитель заведения, без подключения к сети, считывает серию
страниц меню блюд фотокамерой на мобильный телефон, КПК или планшет. Мобильное
приложение клиента распознает код меню, сохраняет меню в базу данных и реализует
интерактивный интерфейс формирования заказа по базе данных блюд.

10. КОНЦЕПТУАЛЬНАЯ МОДЕЛЬ

11. ОПИСАНИЕ
Главными сущностями проекта «Инфомаяк электронного меню блюд» являются:
«Электронное меню блюд», «Устройства», «Web-сервер», «SVG-документ».
«SVG документ» - в таком виде хранится файл меню на сервере.
«Устройства» - это устройства для работы системы, в них входят устройства
для считывания слайдов с фоторамок, так и сами устройства(фоторамки) на
которых и отображаются слайды. «Web-сервер» - сервер, на котором
владельцы кафе и прочих заведений создают свое меню, которое в
дальнейшем и будет храниться там. «Электронное меню блюд» - меню которое
будет представляться пользователям.

12. SVG документ

13. SVG ДОКУМЕНТ
SVG-плакат
меню
генерируется
службой
веб-сервера
при
создание
электронного меню владельцем кафе. Для проигрывания SVG-плаката на
фоторамке
растровых
разрешения.
существует
функция
изображений
конвертирования
формата
Многостраничный
JPG
SVG-документ
плаката
заданного
содержит
в
серию
пользователем
художественно
оформленный титульный лист меню с реквизитами кафе и технической
рекомендацией по считыванию мобильным клиентом кодов меню, содержит
страницы зашифрованного маркерами меню и команды SMIL сценария
анимации слайдшоу. На страницах с кодами меню нанесен номер текущей
страницы, общее количество страниц, время показа текущей страницы в
секундах. Поля электронного меню, по сравнению с печатным меню,
существенно расширяют информационное поле за счѐт перекрестных
ссылок, возможности группировки по весу или цене блюда.

14. СЕРВЕР

15. СЕРВЕР
На Web-сервер владельцы кафе регистрируются и создают
свое меню. Затем они получают постоянную URL ссылку на
свое меню, которой они могут воспользоваться при
установке анимированного плаката в витрине заведения.
На сервере электронное меню хранится в SVG формате,
для проигрывания SVG-плаката на фоторамке существует
функция конвертирования плаката в серию растровых
изображений формата JPG заданного пользователем
разрешения.

16. УСТРОЙСТВА

17. ОПИСАНИЕ
Устройства для распознавания слайдов это те
устройства которые при наведении их камеры на
фоторамку с слайдами будут делать снимок и после
этого распознавать снимок. Необходимо учесть что на
устройствах
должна
быть
установлено
ПО
поддерживающее такую функцию.
После того как посетитель определился с заказом он
подходит к кассиру и либо вслух говорит коды блюд,
либо передает ли посредством Wi-Fi либо Bluetooth.

18. ЭЛЕКТРОННОЕ МЕНЮ БЛЮД

19. МЕНЮ
Каждое электронное меню блюд созданное
владельцем кафе на web-сервере имеет свою
постоянную
url-ссылку
и
непосредственно
владельца. Меню состоит из полей, которые
заполняет
владелец.
На
каждой
странице
приводится номер текущей страницы, общее
кол-во
страниц
страницы.
и
Перечень
время
полей
интеллектуальной карте.
показа
текущей
приведен
на

20. ЛАБОРАТОРНАЯ РАБОТА №3
Тема:
Разработка
информационных потоков.
структурно-функциональной
модели.
Схема
Цель: Изучить принципы построения структурно-функциональной
модели заданной системы в формате IDEF0. Приобрести навыки разработки схем
информационных потоков DFD средствами инструмента визуального
моделирования «BPwin».
Выполнил: студент гр. Пос-10А
Келембет Сергей

21. Задание:
1. При помощи инструмента визуального моделирования «BPwin»
разработать структурно-функциональную модель заданного бизнеспроцесса системы в нотации IDEF0. Уровень детализации не менее 2
и не менее 6 страниц.
2. 2. Ознакомиться с основами построения DFD-диаграмм.
3. 3. Согласно индивидуальному варианту задания разработать
диаграмму информационных потоков системы DFD, не менее трех
страниц.
4. 4. Описать каждую страницу диаграмм IDEF0, DFD текстом из 5
предложений.
5. 5. Разработать презентацию по страницам IDEF0, DFD, чередуя
страницы диаграмм с текстом еѐ описания. Формат презентации
будет необходим при оформлении расчѐтной работы.

22. Диаграмма IDEF0

23. Описание
Данная диаграмма показывает, что входным
данным работы с SVG-документами является «Серия
растровых изображений», а выходными
данными
«Экран».
На ряд процессов и данных накладывается
ограничения, такие как: «один код меню», «маркеры меню
не более 5 на страницу», «не более 20 страниц». И все
процессы в системе осуществляются под управлением
мобильного приложения.

24. Декомпозиция диаграммы IDEF0

25. Описание
Данная диаграмма показывает на какие процессы
разделяется контекстная диаграмма, а именно: «считать код»,
«составить документ», «вывести на экран». Также на данной
диаграмме отображены все входные, выходные данные,
ограничения и механизмы из контекстной диаграммы.

26. Диаграмма IDEF0

27. Описание
Данная диаграмма показывает, что входным данным
работы со службой с Web-приложением является
«изображение», а выходными данными «SVG-плакат».
На ряд процессов и данных накладывается
ограничения, такие как: «поля меню не более 20
символов», «количество листов более одного», «формат
изображения jpg», «пользовательское расширение». И все
процессы в системе осуществляются под управлением
Web-приложения, менеджера кафе и фоторамки.

28. Декомпозиция диаграммы
IDEF0

29. Описание
Данная диаграмма показывает что процесс
формирования работы со службой с Web-приложением
состоит
из ряда процессов: «сгенерировать плакат»,
«редактировать плакат», «показать анимированный плакат.
Первыми двумя процессами управляет менеджер
кафе, а последним процессом – Web- приложение и
фоторамка.

30. Диаграмма IDEF0

31. Описание
Данная диаграмма показывает, что входным данным
формирования ИБЭМ является «Серия изображений», а
выходными данными «заказ».
На ряд процессов и
данных накладывается ограничения, такие как: «не менее 5
маркеров меню», «онтологический словарь не менее 3-х
категорий», «перекрестные ссылки на каждое блюдо», «по
одному коду на каждое блюдо». И все процессы в системе
осуществляются под управлением пользователя с помощью
мобильного телефона, КПК или планшета, в который
встроены фотокамера, Bluetooth и/или Wi-Fi.

32. Контекстная DFD диаграмма

33. Описание
Данная диаграмма показывает под процессы
связанные с процессом формирования ИБЭМ. К таким под
процесса
относятся
процесс
«распознать
код»,
«реализовать интерфейс формирования заказа», и
«отправка заказа».
Для распознавания кода нужно мобильное
устройство, оснащенное камерой, для реализации
интерфейса заказа нужно мобильное приложение, а для
отправки заказа нужен Bluetooth и /или Wi-Fi.

34. Контекстная DFD диаграмма

35. Описание
Данная диаграмма какие входные потоки данных,
связанные с «системой формирования SVG-анимации», а
именно: «размер изображений» и «серия изображений»
идущие от внешней сущности «пользователь» и «сервер».
Выходным потоком является «ссылка на SVG- анимацию».
Данная диаграмма является контекстной, на ней
показаны потоки данных самого верхнего уровня.

36. Контекстная DFD диаграмма

37. Описание
Данная
диаграмма
является
декомпозицией
контекстной DFD-диаграммы, и показывает разбиение
системы
на
отдельные
процессы
«генерация
изображений», «сформировать ссылку» и потоки данных
между ними. В результате выполнения процесса «генерация
изображений» образуется хранилище данных «сохраненные
плакаты на сервере». Все процессы выполняются сущность
«Web приложение».

38. Контекстная DFD диаграмма

39. Описание
Данная диаграмма является декомпозицией
процесса декомпозиции контекстной DFD-диаграммы
«генерация изображений», и показывает разбиение
процесса
на отдельные подпроцессы: «считать
изображения», «распознать изображения», «закодировать
информацию», «сохранить изображение на сервере», за
которые отвечает сущность «web-приложение» и
«редактировать изображения», за который отвечает
сущность «менеджер кафе».

40. ЛАБОРАТОРНАЯ РАБОТА 4
ТЕМА: «ОБЪЕКТНОЕ МОДЕЛИРОВАНИЕ
ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ С ПОМОЩЬЮ
СПЕЦИФИКАЦИИ UML. ПОСТРОЕНИЕ UML
ДИАГРАММ».
Выполнил:
ст. гр. ПОС-10А
Келембет с.в.

41. Задание
1. В соответствии с индивидуальным вариантом задания для заданной
системы при помощи UML/MDA платформы «StarUML» произвести построение
следующих UML-диаграмм:
– диаграмма деятельности;
– диаграмма взаимодействия;
– диаграмма компонентов;
– диаграмма последовательности;
– диаграмма классов (3 ≤ кол-во классов ≤ 8).
2. Описать каждую UML-диаграмму текстом из 5 предложений.
3. Разработать презентацию по страницам UML-диаграмм, чередуя страницы
диаграмм с текстом её описания. Формат презентации будет необходим при
оформлении расчётной работы.

42. ДИАГРАММА ВАРИАНТОВ
ИСПОЛЬЗОВАНИЯ

43. ДИАГРАММА ВАРИАНТОВ ИСПОЛЬЗОВАНИЯ
На
слайде
отображена
диаграмма
вариантов
использования. При редактировании изображения менеджер
имеет доступ к созданию и редактированию цифрового коллажа,
который храниться на сервере, все остальные действия исполняет
приложение автоматически.

44. ДИАГРАММА КЛАССОВ
UML

45. Диаграмма классов UML
На слайде изображена диаграмма классов UML.
Инфомаяк имеет сервер, на котором хранятся SVGплакаты, которые содержат ссылку на SVG-плакат, службу с
Web-интерфейсом, на которой хранится SVG-документ
меню, которые содержат серии изображений и мобильное
приложение пользователя, в котором хранятся коды меню,
база данных которого хранит в себе непосредственно
меню.

46. ДИАГРАММА
КОМПОНЕНТОВ

47. ДИАГРАММА КОМПОНЕНТОВ
На слайде изображена диаграмма компонентов
проектируемой системы. В систему поступает файлы
растровых изображений. Система содержит модули
пользователя, рамки и стиля. В системе присутствуют базы
данных меню, SVG-плакатов.
На выходе получаем
рабочий инфомаяк меню блюд.

48. ДИАГРАММА ДЕЯТЕЛЬНОСТИ

49. Диаграмма деятельности
На слайде показана диаграмма деятельности. На
ней
отображена
последовательность
с
которой
пользователь может работать с системой. Приложение
пользователя осуществляет следующие работы: «запустить
приложение»,
«сфотографировать
SVG-плакат»,
«распознать код», «вывести на экран меню», «сохранить в
БД», «сформировать заказ» и «отправить заказ».

50. ДИАГРАММА
ПОСЛЕДОВАТЕЛЬНОСТИ

51. ДИАГРАММА
ПОСЛЕДОВАТЕЛЬНОСТИ
На слайде показана диаграмма последовательности.
Она отображает последовательность взаимодействия
пользователя и классов программы между собой. При
запуске мобильного приложения пользователь запускает
камеру, фотографирует код меню, приложение сохраняет его
в БД, пользовать формирует заказ и отправляет его на кассу.

52. Лабораторная работа №5
Тема. Разработка графического пользовательского
интерфейса.
Подготовил ст. гр. ПО-10а
Келембет С.В.

53. Цель.
Разработка
пользовательского
интерфейса
при
специализированного графического инструмента «GUI Design Studio».
помощи
Задание:.
1. Согласно индивидуальному варианту задания при помощи «GUI Design Studio»
разработать прототип интерфейса программы.
2. Описать каждую логически законченную часть интерфейса текстом из 5
предложений.
3. Разработать презентацию по интерфейсу, чередуя логические части
интерфейса слайдами с текстом её описания. Формат презентации будет необходим при
оформлении расчётной работы.
Примечание: прототип программы должен охватывать весь функционал
программы.

54. Интерфейс Windows-приложения
На форме изображено окно регистрации пользователя для получения меню.

55. Главное меню программы предназначено для получения, управления меню и регистрации
пользователя .

56. При нажатии на главной форме кнопки «Загрузить меню» файл меню загружается с сервера. Далее
можно управлять меню нажав на кнопку «Управление меню»

57. При входе в систему происходит переход к управлению меню. В нем можно добавлять или удалять
на страницу информацию, связанную с блюдами.

58. При нажатии кнопки «Автор» открывается окно информации о разработчике.

59. Листинг
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>Регистрация</title>
<style>
#j {border:1px solid #e1e1e1; margin-left:500px; margin-top:50px;
background-color:#efefef; text-align:justify; padding:3px; width:330px;}
#q {border:1px solid #e1e1e1; background-color:#ffffff; text-align:justify;
padding:3px;}
html,body{font-family:Tahoma;}
#recom {width:220px;padding:10px; position:absolute; text-align:justify}
fieldset {border:0;margin:0;padding:10;}fieldset b{font-size:90%}
label {display:block;}
input,textarea {width:300px;padding:3px;margin:1px 0;border:solid 1px #000}
body
{
background-image:url(mybackground3.jpg);
}
</style>
</head>
<body>
<div id="j"><div id="q"><b>Регистрация</b></div>
<p id="emailSuccess"><strong style="color:green;"><?php echo $statusSuccess.$r0;
?></strong></p>
<p id="emailError"><strong style="color:red;"><?php echo $statusError.$r1; ?></strong></p>
<div id="recom"></div>
<div id="q"><form action="form.php" method="post" id="cForm">
<input type="hidden" name="act" value="y" />
<fieldset>
<label for="posName"><b>Имя:</b></label>
<input class="inputIE" type="text" size="47" name="posName" id="posName" />
<label for="posEmail"><b>Фамилия:</b></label>
<input class="inputIE" type="text" size="47" name="posEmail" id="posEmail" />
<label for="posRegard"><b>Номер телефона:</b></label>
<input class="inputIE" type="text" size="47" name="posRegard" id="posRegard" />
<div id="q"><label for="posCaptcha"><b>Цифры на картинке</b>:</label><br /><br />
<img
src="kcaptcha/index.php?<?php
echo
session_name()?>=<?php
echo
session_id()?>"><?php echo $r1; ?><br>
<input class="inputIE" type="text" size="47" name="keystring" id="keystring" /></div>
<div id="q"><label><input class="inputIE" type="submit" name="selfCC" value=" Регистрация "
/></label>
</fieldset>
</form></div></div>
<a style = "margin-left:500px;" href="http://ks-stomatologiya.com.ua"> Вернуться на главную
</a>
</body>
</html>

60. Листинг
<?
include('kcaptcha/kcaptcha.php');
session_start();
require_once("config.php");
require_once("kcaptcha/util/script.php");
if ($_POST['act']== "y")
{
if(isset($_SESSION['captcha_keystring']) && $_SESSION['captcha_keystring']
== $_POST['keystring'])
{
if (isset($_POST['posName']) && $_POST['posName'] == "")
{
$statusError = "$errors_name";
}
/*elseif (isset($_POST['posEmail']) && $_POST['posEmail'] == "")
{
$statusError = "$errors_mailfrom";
}*/
/*elseif(isset($_POST['posEmail']) && !preg_match("/^([a-z,._,0-9])+@([az,._,0-9])+(.([a-z])+)+$/", $_POST['posEmail']))
{
$statusError = "$errors_incorrect";
elseif (isset($_POST['posRegard']) && $_POST['posRegard'] == "")
{
$statusError = "$errors_subject";
}
elseif (isset($_POST['posText']) && $_POST['posText'] == "")
{
$statusError = "$errors_message";
}
elseif (!empty($_POST))
{
$headers = "MIME-Version: 1.0rn";
$headers .= "Content-Type: $content charset=$charsetrn";
$headers .= "Date: ".date("Y-m-d (H:i:s)",time())."rn";
$headers .= "From: "".$_POST['posName']."" <".$_POST['posEmail'].">rn";
$headers .= "X-Mailer: My Send E-mailrn";
mail("$mailto","$subject","$message","$headers");
unset($name, $posText, $mailto, $subject, $posRegard, $message);
$statusSuccess = "Сообщение отправлено";
}
}else{
$statusError = "Сообщение не отправлено";
unset($_SESSION['captcha_keystring']);
}
unset($_POST['posEmail']);
}*/
}
?>