Заключение
В ходе выполнения курсовой работы был разработан web-сервис «Записная книжка», позволяющий его пользователям добавлять различные заметки, события, получать уведомления, хранить различные файлы и т.д.
В рамках индивидуального задания был разработан front-end web-сервиса «Записная книжка».
Были приобретены практические навыки разработки web-систем.
Список источников
1. Электронная энциклопедия Википедия [Электронный ресурс]: RedmineURL: https://ru.wikipedia.org/wiki/Redmine (дата обращения 06.01.2016).
2. Современный учебник JavaScript [Электронный ресурс]: URL: https://learn.javascript.ru (дата обращения 07.01.2016).
3. Фрайн Б. Разработка сайтов для любых браузеров и устройств. Пер. с англ. - СПб.: Питер, 2013. - 304 с.
4. Джереми К. HTML5 для веб-дизайнеров. Пер. с англ. - М.:Манн, Иванов и Фербер, 2013. - 450 с.
5. Сидерхолм Д. CSS3 для веб-дизайнеров. Пер. с англ. - М.:Манн, Иванов и Фербер, 2013. - 324 с.
Приложение. Исходный текст программы
<!DOCTYPEhtml>
<htmllang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>Application - приложение ASP.NET</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/jasny-bootstrap.min.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/jasny-bootstrap.min.js"></script>
<script src="/Scripts/respond.js"></script>
</head>
<body>
<div class="navbarnavbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Noter</a>
</div>
<div class="navbar-collapse collapse">
<ul class="navnavbar-nav">
<li><ahref="/">Домашняя страница</a></li>
<li><a href="/Help">API</a></li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post">
<input name="__RequestVerificationToken" type="hidden" value="UopJ_zxl_Ash_BEr3Uv55FXPxd4aFcYTS0eBG9f_GEMhnNnRTG7zYr5joaJbugNKLxbS1aqBJNv3mTvw-jBPPFwqN8RFmErRS7aPx77bS7LdYHp6dMC88GuHyufuXq7RnwNqTNalvUNxtOOmH6pq5Q2" /><ul class="navnavbar-navnavbar-right">
<li>
<a href="/Manage" title="Manage">Здравствуйте, umed48@gmail.com!</a>
</li>
<li><a href="javascript:sessionStorage.removeItem(accessToken);$(#logoutForm).submit();">Выйти</a></li>
</ul>
</form>
</div>
</div>
</div>
<div class="container-fluid body-content">
<div class="col-lg-3">
<div class="navmenunavmenu-default @*navmenu-fixed-left offcanvas-sm*@" role="navigation">
<a class="navmenu-brand" href="#">Brand</a>
<ul class="navnavmenu-nav @*nav-pills nav-stacked*@">
<li class="active">
<a data-toggle="pill" href="#notes">
<span class="glyphiconglyphicon-list-alt"></span>Заметки
<span class="badge pull-right" data-bind="text: $root.noteViewModel.notes().length"></span>
</a>
</li>
<li>
<a data-toggle="pill" href="#notifications">
<span class="glyphiconglyphicon-bell"></span>Напоминания
<span class="badge pull-right" data-bind="text: $root.noteViewModel.notifications().length">4</span>
</a>
</li>
<li>
<a data-toggle="pill" href="#tags">
<span class="glyphiconglyphicon-tags"></span>Теги
<span class="badge pull-right" data-bind="text: $root.tagViewModel.tags().length"></span>
</a>
</li>
<li>
<a data-toggle="pill" href="#files">
<span class="glyphiconglyphicon-folder-open"></span>Моифайлы
<span class="badge pull-right" data-bind="text: $root.fileViewModel.files().length"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-9">
<div class="tab-content" style="padding-top:20px;">
<div id="notes" class="tab-pane fade in active">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btnbtn-default" data-bind="click: $root.noteViewModel.showAddForm"><span class="glyphiconglyphicon-file"></span></button>
<button class="btnbtn-default">Удалитьвсё</button>
<button class="btnbtn-default"><span class="glyphiconglyphicon-refresh"></span></button>
</div>
<div class="pull-right">
<form class="form-inline">
<label>Фильтрпотегу: </label>
<select data-bind="options: $root.tagViewModel.tags, optionsCaption: Все, optionsText: name, optionsValue: id, value: $root.noteViewModel.filter" class="form-control"></select>
</form>
</div>
<hr />
<div data-bind="foreach: noteViewModel.filterNotes">
<section data-bind="click: $root.noteViewModel.show">
<div class="well">
<div class="btn-group pull-right">
<button class="btnbtn-smbtn-default" data-bind="click: $root.noteViewModel.showAddNotification, clickBubble: false"><span class="glyphiconglyphicon-bell" aria-hidden="true"></span></button>
<button class="btnbtn-smbtn-default" data-bind="click: $root.noteViewModel.showAddTag, clickBubble: false"><span class="glyphiconglyphicon-tag" aria-hidden="true"></span></button>
<button class="btnbtn-smbtn-default" data-bind="click: $root.noteViewModel.showEdit, clickBubble: false"><span class="glyphiconglyphicon-pencil" aria-hidden="true"></span></button>
<button class="btnbtn-smbtn-default" data-bind="click: $root.noteViewModel.remove, clickBubble: false"><span class="glyphiconglyphicon-remove" aria-hidden="true"></span></button>
</div>
<h3>
<span data-bind="text: title"></span><br />
<small><span data-bind="text: created"></span></small>
</h3>
<div data-bind="foreach: tags">
<span class="label label-default" data-bind="text: name, style: {backgoundColor: color}"></span>
</div>
</div>
<hr />
</section>
</div>
<div class="modal fade" id="noteShow">
<div class="modal-dialog modal-lg">
<div class="modal-content" data-bind="with: $root.noteViewModel.choosen">
<div class="modal-header">
<h4 class="modal-title"><span data-bind="text: title"></span></h4>
</div>
<div class="modal-body">
<p data-bind="html: content"></p>
</div>
<div class="modal-footer">
<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<link href="/Content/font-awesome.min.css" rel="stylesheet" />
<link href="/Scripts/summernote/summernote.css" rel="stylesheet" />
<script src="/Scripts/summernote/summernote.min.js"></script>
<div class="modal fade" id="noteAdd">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Новаязаметка</h4>
<button class="close" data-dismiss="modal"></button>
</div>
<div class="modal-body">
<form data-bind="with: $root.noteViewModel.added">
<div class="form-group">
<label for="noteTitle">Заголовок</label>
<input class="form-control" id="noteTitle" placeholder="Заголовок" data-bind="value: title" />
</div>
<div class="form-group">
<label for="noteContent">Содержимое</label>
<div class="form-control" id="noteContent" placeholder="Содержимое..."></div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>
<button class="btnbtn-primary" data-bind="click: $root.noteViewModel.add">Сохранить</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () { $(#noteContent).summernote({ height: 300 }); });
</script>
<div class="modal fade" id="noteTagAdd">
<div class="modal-dialog">
<div class="modal-content" data-bind="with: $root.noteViewModel.choosen">
<div class="modal-header">
<h4 class="modal-title"><span data-bind="text: title"></span></h4>
</div>
<div class="modal-body">
<label>Фильтр по тегу: </label>
<select data-bind="
options: $root.tagViewModel.tags,
optionsCaption: Все,
optionsText: name,
optionsValue: id,
value: $root.noteViewModel.choosenTag" class="form-control"></select>
</div>
<div class="modal-footer">
<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>
<button class="btnbtn-primary" data-bind="click: $root.noteViewModel.addTag">Добавить</button>
</div>
</div>
</div>
</div>
<script src="/Scripts/moment.min.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>
<div class="modal fade" id="noteNotificationAdd">
<div class="modal-dialog">
<div class="modal-content" data-bind="with: $root.noteViewModel.choosen">
<div class="modal-header">
<h4 class="modal-title"><span data-bind="text: title"></span></h4>
</div>
<div class="modal-body">
<label>Напоминание: </label>
<div class="form-group">
<div class="input-group date" id="myDateTime">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphiconglyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>
<button class="btnbtn-primary" data-bind="click: $root.noteViewModel.addNotification">Добавить</button>
</div>
</div>
</div>
</div>
<link href="/Content/font-awesome.min.css" rel="stylesheet" />
<link href="/Scripts/summernote/summernote.css" rel="stylesheet" />
<script src="/Scripts/summernote/summernote.min.js"></script>
<div class="modal fade" id="noteEdit">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Новаязаметка</h4>
<button class="close" data-dismiss="modal"></button>
</div>
<div class="modal-body">
<form data-bind="with: $root.noteViewModel.edited">
<div class="form-group">
<label for="noteTitleEdit">Заголовок</label>
<input class="form-control" id="noteTitleEdit" placeholder="Заголовок" data-bind="value: title" />
</div>
<div class="form-group">
<label for="noteContentEdit">Содержимое</label>
<div class="form-control" id="noteContentEdit" placeholder="Содержимое..." data-bind="html: content"></div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>
<button class="btnbtn-primary" data-bind="click: $root.noteViewModel.edit">Добавить</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(#noteContentEdit).summernote(
{
height: 300
});
});
</script>
</div>
<div id="notifications" class="tab-pane fade">
<table class="table table-hover">
<thead>
<tr>
<th>Название</th>
<th>Время напоминания</th>
</tr>
</thead>
<tbody data-bind="foreach: $root.noteViewModel.notifications">
<tr>
<td data-bind="text: title"></td>
<td data-bind="text: created"></td>
</tr>
</tbody>
</table>
</div>
<div id="calendar" class="tab-pane fade">
</div>
<div id="tags" class="tab-pane fade">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btnbtn-default" data-bind="click: $root.tagViewModel.showAddForm">
<span class="glyphiconglyphicon-file"></span>
</button>
<button class="btnbtn-default">Удалитьвсё</button>
<button class="btnbtn-default">
<span class="glyphiconglyphicon-refresh"></span>
</button>
</div>
</div>
<hr />
<div data-bind="foreach: tagViewModel.tags">
<section class="well" data-bind="click: $root.tagViewModel.show">
<div class="btn-group pull-right">
<button class="btnbtn-smbtn-default" data-bind="click: $root.tagViewModel.remove, clickBubble: false"><span class="glyphiconglyphicon-remove" aria-hidden="true"></span></button>
<h3 data-bind="text: name, style: {backgoundColor: color}"></h3>
</section>
</div>
<link href="/Content/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" />
<script src="/Scripts/bootstrap-colorpicker.min.js"></script>
<div class="modal fade" id="myTagAdd">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Новаяметка</h4>
<button class="close" data-dismiss="modal"></button>
</div>
<div class="modal-body">
<form data-bind="with: $root.tagViewModel.added">
<div class="form-group">
<label for="myTagName">Название</label>
<input id="myTagName" class="form-control" type="text" placeholder="Название" data-bind="value: name" />
</div>
<div class="form-group">
<label for="myTagColorPicker">Цвет</label>
<div id="myTagColorPicker" class="input-group" data-bind="value: color">
<span class="input-group-addon"><i></i></span>
<input id="myTagColor" type="color" class="form-control" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>
<button class="btnbtn-primary" data-bind="click: $root.tagViewModel.add">Добавить</button>
</div>
</div>
</div>
</div>
</div>
<div id="files" class="tab-pane fade">
<div class="fileinputfileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphiconglyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addonbtnbtn-default btn-file">
<span class="fileinput-new">Выбратьфайл</span>
<span class="fileinput-exists">Изменитьвыбор</span>
<input id="fileUpload" type="file" name="..." />
</span>
<a href="#" class="input-group-addonbtnbtn-default fileinput-exists" data-dismiss="fileinput"
data-bind="click: $root.fileViewModel.upload">Загрузить</a>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>Id</th>
<th>Название</th>
<th>Тип</th>
<th>URL</th>
</tr>
</thead>
<tbody data-bind="foreach: $root.fileViewModel.files">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td data-bind="text: type"></td>
<td>
<input class="form-control" data-bind="value: location" />
</td>
<td>
<button class="btnbtn-smbtn-default" data-bind="click: $root.fileViewModel.remove, clickBubble: false"><span class="glyphiconglyphicon-remove" aria-hidden="true"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="/Scripts/knockout-2.3.0.debug.js"></script>
<script src="/Scripts/knockout.validation.debug.js"></script>
<script src="/Scripts/knockout.mapping-latest.debug.js"></script>
<script src="/Scripts/myapp/FileViewModel.js"></script>
<script src="/Scripts/myapp/NoteViewModel.js"></script>
<script src="/Scripts/myapp/TagViewModel.js"></script>
<script src="/Scripts/myapp/AppModel.js"></script>
<div class="container">
</div>
<hr />
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"34afcd51b8cb4591ab29be8c9b09149e"}
</script>
<script type="text/javascript" src="http://localhost:63854/0a4f85abd86844158d4ae925531ab235/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
- Введение
- 1. Техническое задание
- 1.1 Характеристики предметной области
- 1.1.1 Основные понятия предметной области
- 1.1.2 Описание предметной области
- 1.2 Цели и задачи системы
- 1.2.1 Цели системы
- 1.2.2 Задачи системы
- 1.3 Требования к системе
- 1.3.1 Функциональные требования
- 1.3.2 Нефункциональные требования
- 1.4 Характеристика пользователей
- 1.5 Диаграмма вариантов использования
- 1.6 Функции системы
- 2. Управление проектом
- 2.1 Проектная команда
- 2.2 Система управления проектом
- 2.2.1 Краткие теоретические сведения
- 2.2.2 Redmine
- 2.3 Планирование проекта
- 2.3.1 Методология разработки
- 2.3.2 Первый спринт
- 2.3.3 Второй спринт
- 2.3.4 Третий спринт
- 2.3.5 Четвертый спринт
- 3. Макет сайта
- 3.1 Платформа разработки
- 3.2 Карта сайта
- 4. Реализация логики работы системы
- 4.1 Использование web-сервисов
- Заключение