Проектирование модуля информационной системы предприятия "Минскводоканал" "Заявка на закупку"

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

Рубрика Программирование, компьютеры и кибернетика
Вид дипломная работа
Язык русский
Дата добавления 12.05.2018
Размер файла 3,7 M

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

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

Запросы на языке JavaScriptи библиотека jQuery будут использоваться для управления элементами страниц. Разработка интерфейса состоит из следующих этапов: создание страницы с главным меню; создание основных страниц. Разработка главного меню.

Начать разработку интерфейса необходимо с создания главного меню. При переходе по пунктам меню страницы должны перезагружаться т.к. данные, отображаемые на страницах, меняются в зависимости от конкретного пункта меню. Главное меню при этом должно оставаться на своём месте, т.к. оно статическое (неизменное). Главное меню будет содержать в себе пункты: «Заявки», «Подразделения», «Размеры», «Роста», «Спецодежда», «ОМТС», «Руководство пользователя».Так же на блоке главного меню будет отображается логотип предприятия. Меню будет расположено на отдельной странице «Layout». На этой же странице будет описано подключение ко всем необходимым библиотекам, используемым в проекте. Код страницы «Layuout»представлен в листинге 4.

<!DOCTYPE html>

@RenderSection("scripts", false)

<html>

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

/* Подключаемые библиотеки */

/* подключение библиотеки bootstrap */

<linkhref="~/Content/bootstrap.min.css" rel="stylesheet" />

<scriptsrc="~/Scripts/bootstrap.min.js"></script>

/* подключениефайласостилями */

<link href="~/Content/Site.css" rel="stylesheet" />

/* подключениефайла для поддержки запросов (jquery) */

<scriptsrc="~/Scripts/jquery-1.10.2.min.js"></script>

<scriptsrc="~/Scripts/jquery-1.10.2.intellisense.js"></script>

/* подключениебиблиотеки для отображения иконок */

<link href="~/Content/font-awesome.css" rel="stylesheet" />

</head>

/* Стили для фона окон */

<body style="background-color: rgb(0, 144, 214); color: white; padding: 0px;">

/* Блок для логотипа предприятия и названия модуля */

<div class="navbar-header">

<a href="@Url.Action("SelectDepartment","Request")" class="navbar-brand logo" style="line-height:20px;padding-top:15px;">

/* Ссылка на логотип предприятия */

<imgsrc="@Url.Content("~/Images/logo_white.png")" alt="logo" /></a>

/* Блок названия модуля */

<divclass="col-md-5" align="right">

<h3>Заявка на спецодежду</h3>

</div></div></div>

<div class="container" id="footer">

/* Главное меню модуля */

<nav>

<ul class="menu" style="font-size:large">

/* Пункт меню Заявки */

<li style="font-size:large;">@Html.ActionLink("Заявки", "SelectDepartment", "Request")</li>&nbsp;

/* ПунктменюПодразделения*/

<li style="font-size:large;">@Html.ActionLink("Подразделения", "Index", "Department")</li>&nbsp;

<li style="font-size:large;">@Html.ActionLink("Размеры", "ChoiceSize", "Size")</li>&nbsp;

<li style="font-size:large;">@Html.ActionLink("Роста", "Index", "Growth")</li>&nbsp;

<li style="font-size:large;">@Html.ActionLink("Спецодежда", "Index", "SpecialClothe")</li>&nbsp;

<li style="font-size:large;">@Html.ActionLink("ОМТС", "Index", "OMTS")</li>&nbsp;

<li style="font-size: large">@Html.ActionLink("Руководствопользователя", "GetReadme", "Readme")</li>

</ul>

<hr />

</nav>

/* Страница, которая будет отображаться после меню */

@RenderBody()

</div></body></html>

Листинг 4 - Код страницы с главным меню

Разработка основных страниц модуля.

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

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

«divclass=”row”»«divclass=”col-md” »«tableclass=”tabletable-hover”»«buttonclass=”button”»«inputclass=”form-control”»«label»«select class=”form-control” »и другие.

Основные элементы страниц буду располагаться по центру страницы. Используется табличная вёрстка. Будут созданы строки «divclass=”row» и в них помещены ячейки«divclass=”col-md»В ячейках буду располагаться элементы управления такие как: кнопки (button), выпадающие списки (select), поля для ввода (input),таблицы (table), ссылки (ahref).Для отображения информации из базы данных на форме будет указана соответствующая модель, в которой в дальнейшем будет храниться информация.

Разработаем страницу, где будет отображаться список спецодежды. На основании модели необходимо отобразить наименование спецодежды, единицу измерения, параметр (размер/размер+рост/-). Код страницы со спецодеждой представлен в листинге 5.

/* Доступ к моделям web-приложения*/

@usingSpecialClothes.Models

/* Модель данных спецодежды получаемая от сервера */

@modelPagedList.IPagedList<SpecialClothe>

/* Отображение главного меню*/

@{Layout = "~/Views/Shared/_layout.cshtml";}

<div class="row">

<div class="col-md-9">

<h2>Спецодежда</h2>

</div></div>

<div class="row">

<divclass="col-md-3">

/* Кнопка для добавления новой спецодежды */

<button type="button" class="btnbtn-secondary btn-sm" onclick="location.href='@Url.Action("AddSpecialClothe","SpecialClothe")';return false;">

Добавить спецодежду

</button></div>

@using (Html.BeginForm()){

/* Таблица со списком спецодежды */

<tableclass="tabletable-hover" >

<thead><tr>

/* Заголовок таблицы с возможность сортировки по всем полям таблицы */

<thclass="menu">@Html.ActionLink("Наименованиеспецодежды", "Index", new { sortOrder = ViewBag.NameSortParam, currentFilter = ViewBag.CurrentFilter })</th>

<th class="menu" style="width:5%">@Html.ActionLink("Ед. изм.", "Index", new { sortOrder = ViewBag.UnitSortParam, currentFilter = ViewBag.CurrentFilter })</th>

<th class="menu" style="width:5%">@Html.ActionLink("Параметр", "Index", new { sortOrder = ViewBag.ParametrSortParam, currentFilter = ViewBag.CurrentFilter })</th>

</tr></thead>

/* Тело таблицы*/

<tbody>

/* Цикл по всей спецодежде (модели)*/

@foreach (var record in Model){

<tr id="@record.Id">

<td>@record.Name</td>

<td>@record.Unit.Value</td>

/* Если кол-во параметров=2 то отбразитьРазмер+рост*/

@if(record.specialClotheParametrList.Count==2)

{<td>Размер+рост</td> }Else

/* Если параметр= прочерк то отобразить прочерк*/

if(record.specialClotheParametrList.FirstOrDefault().Parametr.Value=="-"){ <td>-</td> } else

/* Если параметр=Размер отобразить размер*/

if(record.specialClotheParametrList.FirstOrDefault().Parametr.Value == "Размер")

{ <td>Размер</td>}

/* Кнопка редактирования спецодежды*/

<td class="menu">

<a href="@Url.Action("EditSpecialClothe", "SpecialClothe", new { id = record.Id })">

/* Иконка “карандаш”*/

<iclass="fafa-pencilfa-lg "></i></a></td>

/* Кнопка удаления спецодежды*/

<tdclass="menu">

/* Иконка“урна”*/

<i class="fafa-trash-o fa-lgselectRecord"id="@record.Id"></i></td></tr>

</tbody>

</table>

Листинг 5 - основная страница со спецодеждой

3.3 Разработка серверной части модуля

За серверную часть модуля будут отвечать контроллеры. Каждый контроллер отвечает за взаимодействие между моделями данных и клиентской частью (страницами, которые отображаются в браузере). Каждый контроллер отвечает за работу с конкретной моделью. Контроллер Special Clothe Control ler отвечает за модель спецодежды.

Основные методы работы со спецодеждой контроллера Special Clothe Controller являются: отображение (Index);добавление (Add Special Clothe), редактирование (Edit Special Clothe), удаление (Delete Special Clothe). Рассмотрим алгоритм работы контроллеров на примере методов отображения и добавления спецодежды.

На главной странице пользователь нажимает на пункт меню «Спецодежда» и тем самым выполняется строка “Html.ActionLink ("Спецодежда", "Index", "Special Clothe")”. Исполняется метод Indexконтроллера Special Clothe. Код метода Index представлена листинге 7.

publicActionResult Index()

{

//Контекст модели спецодежды

varspecialClotheRepository = new SpecialClothes.Models.SQL.SQLRepository<SpecialClothe>(new SpecialClothesContext());

IEnumerable<SpecialClothe>specialClotheList;

//Выбираем всю спецодеждусвязанную с таблицей Параметры спецодежды, отсортировав список по полю Name

specialClotheList = _specialClotheRepository.Table.Include(x =>x.specialClotheParametrList).ToList().OrderBy(x=>x.Name);

}//На странице будет отображаться таблица с 11 записями на листе.

intpageSize = 11;

//На странице будет отображаться 1-ая страница.

intpageIndex = (page ?? 1);

//Разграничение доступа (Если пользователи отдела ОМТС или администратор, то возвращать представление с полным функционалом, если другие, то вернуть страницу для просмотра)

if (User.Identity.Name.ToUpper() == @"MVK2000\MTS_11" ||

User.Identity.Name.ToUpper() == @"MVK2000\OMTS3R16" ||

User.Identity.Name.ToUpper() == @"MVK2000\Avdeev_V")

return View("Index", specialClotheList.ToPagedList(pageIndex, pageSize));

else

return View("Guest/IndexGuest", specialClotheList.ToPagedList(pageIndex, pageSize));

Листинг 6 - КодметодаIndexконтроллераSpecialClotheController

Метод добавления спецодежды в базу данных исполняется при нажатии на кнопку «Сохранить» на окне добавления спецодежды. Наокнеприсутствуетэлемент «<buttonclass="form-control" id="add" onclick="add()">Добавить</button>» который запускает функцию «add()». Кодфункциипредставленв листинге 8. Функция в свою очередь передаёт данные в контроллер спецодежды.

function add() {

$.ajax({

type: "Post",

/* Запускаемметоддобавления (Add) контроллера спецодежды */

url: "@Url.Action("Add", "SpecialClothe")",

/* Передаём в метод контроллера данные спецодежды (наименование, idединицы измерения, параметр) */

data: { "name": Name,"unitId":UnitId,"parametr":Parametr },

/* При успешном выполнении отобразить сообщение "Добавлено" */

success: function (data) {

if (data.toString() != "Error")

alert("Добавлено");

},

/* При возникновении ошибки в ходе выполнения метода отобразить сообщение "Данная спецодежда уже существует" */

error: function (xhr, ajaxOptions, thrownError) {

alert('Данная спецодежда уже существует');

$("#name").focus();

}})}

Листинг 7 - Код функции отправки данных в контроллер.

Для того что бы создать заявку на закупку спецодежды необходимо от каждого подразделения получить заявки на закупку. Алгоритм создания заявки следующий: пользователь выбирает главное подразделение; пользователь выбирает подчинённое подразделение которое принадлежит к главному; пользователь добавляет спецодежду в заявку.

За получение всех главных подразделений отвечает метод SelectDepartment. Код метода представлен в листинге 8.

publicActionResultSelectDepartment()

{//Получаем список подразделений, у которых нету вышестоящих подразделений (Department.department==null)

vardepartmentList = _departmentRepository.Table.Where(x =>x.department == null).OrderBy(x=>x.Name).ToList();

//Возвращаем представление и передаём ему модель с полученным списком подразделений

returnView(departmentList); }

Листинг 8 - КодметодаSelectSubDepartment

На экране отображается представление, на котором отображены главные подразделения. Код представления приведён в листинге 9.

/* Получаем от сервера модель со списком подразделений */

@modelIEnumerable<SpecialClothes.Models.Department>

/*Блокзаголовка представления*/

<divclass="row"><divclass="col-md-12">

<h2>Выберите подразделение:</h2>

</div></div><p></p>

<divclass="row">

/* Цикл по всем подразделениям в модели. В каждую ячйку равную 3 колонкам записываем наименование подразделения. Наименование делаем как ссылку, которая будет вызывать метод выбора подчинённого подразделения и передавать ему idглавного подразделения*/

@foreach(variteminModel) {

<divclass="col-md-3>

<h3><a href="@Url.Action("SelectSubDepartment","Request", new { id=item.Id})">

@item.Name

</a></h3></div></div>}

Листинг 9 - Код представления выбора главного подразделения

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

//Получаем от представления idглавного подразделения

publicActionResultSelectSubDepartment(int id)

//Получаем из БД главное подразделение поегоid

varmainDepartment = _departmentRepository.Get(id);

//Получаем массив починных подразделений по idглавного и сортируем его по имени

varsubDepartmentList = _departmentRepository.Table.Include(x =>x.department).Where(x =>x.department.Id == id).OrderBy(x=>x.Name).ToList();

//Получаем текущую дату на сервере

var date = System.DateTime.Now;

//Получаем название месяца следующего за текущим, т.к. заявка оформляется на следующий за текущим месяц.

stringmonthName = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(date.Month+1)+" " + date.Year.ToString(); ;

//Передаёмнапредставлениеназваниемесяца

ViewData["requestMonth"] = monthName;

//Создаём модель, которая содержит главное и подчинённые подразделения

vardepartmentInfo = new DepartmentInfo(mainDepartment, subDepartmentList);

//Передаём представление и модель

returnView(departmentInfo);}

Листинг 10 - Код метода получения подчинённых подразделений

На экране отображается представление, на котором необходимо выбрать подчинённое подразделение. Код представления отображён в листинге 11.

/*Получаем модель от сервера с главным и подчинёнными подразделениями*/

@model SpecialClothes.Models.DepartmentInfo

<div class="row"><div class="col-md-12">

/*Заголовком представления служит наименование главного подразделения */

<h2>@Model.MainDepartment.Name</h2>

</div><div class="col-md-3">

/*Кнопка просмотра заявки по главному подразделению*/

<button type="button" class="btnbtn-secondary btn-sm"

onclick="location.href='@Url.Action("DepartmentRequestInfo", "Request", new { id = Model.MainDepartment.Id })';return false;">

Просмотретьзаявку</button></div>

<div class="row"><div class="col-md-5">

<hr /></div></div>

<div class="row"><div class="col-md-12">

<h2>Выберите подразделение:</h2>

</div></div><p></p>

<divclass="row">

/* Цикл по подчинённым подразделениям в модели. В каждую ячейку равную 3 колонкам записываем наименование подчинённого подразделения. Наименование делаем как ссылку, которая будет вызывать метод, который вернёт представление с возможность добавления заявки. Методу передаём как параметр idподчинёного подразделения*/

@foreach (variteminModel.SubDepartmentList) {

<div class="col-md-3 menu" style="border-bottom-color:white; padding:15px;padding-bottom:20px"><h3>

<a href="@Url.Action("AboutRequest", "Request", new { id = item.Id })">@item.Name</a></h3></div>

}</div>

Листинг 11 - Код представления выбора подчинённого подразделения

После выбора подчинённого подразделения инициируется запуск метода AboutRequestконтроллера Request. Данный метод, как параметр получает idподчинённого подразделения и должен вернуть представления с возможностью добавления заявки. Так же на представлении должен отображаться список спецодежды, который уже добавлен в заявку. Код метода представлен в листинге 12.

//Метод получает как параметр idподчинённого подразделения

publicActionResultAboutRequest(int id)

//Получаем дату, увеличенную на 1 месяц

{var date = DateTime.Today;

date = date.AddMonths(1);

varsubDepartment = _departmentRepository.Get(id);

//Получаем название месяца и годдля отображения на представлении

stringmonthName = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(date.Month) + " " + date.Year.ToString();

//уменьшаем дату на 1 месяц для получения позиций в заявке

date=date.AddMonths(-1);

//Получаем список позиций по текущему подразделению и текущему месяцу

varpositionList = _positionRepository.Table.Include(x =>x.Request).Include(x=>x.Records).Where(x =>x.Request.DepartmentId == id).Where(x=>x.Request.DateCreate.Month==date.Month).ToList();

//Получаем заявку на текущий месяц

var request = GetRequest(subDepartment, date.Date);

//Создаём модель в которой будет хранится заявка и лист позиций для последующей работы с ней на представлении

varrequestInfo = new RequestInfoForAdd(request, positionList);

//Передаём представлению название месяца и год

ViewData["requestMonth"] = monthName;

//Возвращаем представление с созданной моделью

returnView(requestInfo);}

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

/*Получаем созданную модель от сервера */

@model SpecialClothes.Models.RequestInfoForAdd

<div class="row"><div class="col-md-5">

/*Заголовок представления название подразделения */

<h2>@Model.Request.Department.Name</h2></div>

<div class="col-md-1">

</div>

<div class="row"><div class="col-md-3">

/*Получаем от сервера название даты и год */

<label>Заявкана&nbsp; @ViewData["requestMonth"] </label>

</div></div><div class="row">

<divclass="col-md-3">

//Кнопку для добавления позиций в заявку

<button type="button" class="btnbtn-secondary btn-smtoHide" onclick="location.href='@Url.Action("AddRecords", "Request", new { id = Model.Request.DepartmentId })';return false;">

Добавитьпозицию

</button>

/*Цикл по уже добавленным позициям в заявке*/

@foreach (var item in Model.PositionList){

<trid="@item.Id"> /*idпозиции */

<td>@item.SpecialClothe.Name</td>/*Наименование спецодежды */

<td>@item.SpecialClothe.Unit.Value</td> /*Ед. измерения */

/*Если 2 записи в таблице Recordсвязанных с данной позицией, то параметр размер+рост */

@if(item.Records.Count==2){

/*Выводим значение размера

<td>@item.Records.Where(x=>x.SpecialClotheParametr.Parametr.Value=="Размер").Select(x=>x.Value).FirstOrDefault()</td>

/*Выводим значение роста*/<td>@item.Records.Where(x=>x.SpecialClotheParametr.Parametr.Value=="Рост").Select(x=>x.Value).FirstOrDefault()</td>}else

/*Еслизначениепараметраравнопрочерк */ if (item.Records.FirstOrDefault().SpecialClotheParametr.Parametr.Value=="-")

/*Выводим 2 прочерка т.к. спецодежда не имеет параметров */

<td>-</td><td>-</td> }Else

/*Если значение параметра равно размер */ if (item.Records.FirstOrDefault().SpecialClotheParametr.Parametr.Value == "Размер")/*выводим значение размера */

{<td>@item.Records.Where(x=>x.SpecialClotheParametr.Parametr.Value=="Размер").Select(x=>x.Value).FirstOrDefault()</td>

<td>-</td>}

Листинг 12 -Код представления отображения заявки

После нажатия на кнопку «Добавить позицию» открывается окно для ввода спецодежды. Наименование спецодежды вводится в текстовое поле, указанное ниже.

<inputclass="form-control" id="textSearch" oninput="search()" />

Каждый ввод символа вызывает функцию поиска спецодежды, представленную в листинге 13.

functionsearch() {

/*Объявляем переменную nameи записываем в ней наименование спецодежды, которое ввели в поле*/

varName = $("#textSearch").val();

/*Создаём Ajaxзапрос для отправки данных на сервер */

$.ajax({

type: "Post",

/*Вызываем метод JsonSearch в контроллереRequest */

url: "@Url.Action("JsonSearch", "Request")",

/*Передаём методу наименование спецодежды */

data: { "name": Name },

/*При успешном выполении */

success: function (data) {

/*Если результатов нет, скрываем таблицу результатов */

if (data.toString() == "")

$("#table").hide();else {

/*Если результаты поиска есть, то отображаем таблицу результатов */

$("#table").show();$("#main-block").empty();var index;

/*Цикл по результатам поиска */

for (index = 0; index<data.length; ++index) {

/*Динамически отрисовываем строки с результатми, таким образов что бы можно было выбрать спецодежду */

varstr = "<tr id=" + data[index].Id + ">"

+ "<td class='specName'>" + data[index].Name + "</td>"

+ "<td><button class='select form-control' id=" + data[index].Id + ">Добавить</button></td>"+ "</tr>";

/*Добавляем в блок результатов поиска отрисованную таблицу */

$("#main-block").append(str);}

Код вызываемого метода для поиска спецодежды представлен в листинге.

//Метод поиска спецодежды, принимающий наименование как параметр

publicJsonResultJsonSearch(string name)

//Создаём список спецодежды, который содержит наименование, принятое от представления

{ varjsondata = _specialClotheRepository.Table.Where(x =>x.Name.Contains(name)).OrderBy(x=>x.Name).ToList();

//Возвращаем список спецодежды представлению

returnJson(jsondata, JsonRequestBehavior.AllowGet); }

Листинг 13 - Код функции поиска спецодежды

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

//Параметр принимает idспецодежды и idзаявки

publicActionResultPartResult(intspecialClotheId, intrequestId){

//получаем спецодежду по id спецодежды

varspecialClothe = _specialClotheRepository.Table.Include(x =>x.specialClotheParametrList).Include(x =>x.Unit)

.Where(x =>x.Id == specialClotheId).FirstOrDefault();

//Получаем кол-во параметров спецодежды


Подобные документы

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.