ВКР Нартова (1195826), страница 4
Текст из файла (страница 4)
В ходе анализа области решения поставленной задачи необходимо предложить прототипы окон разрабатываемого программного средства.
Интерфейс главного окна содержит вкладки основных таблиц, кнопки добавить, редактировать и удалить запись (рисунок 5).
Рисунок 5 – Интерфейс главного окна
На рисунке 6 представлен интерфейс окон отображения записей.
Рисунок 6 – Отображение записей
При добавлении записи появляется следующее окно (рисунок 7).
Рисунок 7 – Окно добавления записи
В появившемся окне редактирования в форме уже находятся текущие данные (рисунок 8).
Рисунок 8 – Окно редактирования записи
2.7 Иконки
Средствами программного обеспечения Adobe Photoshop создана иконка данного приложения (рисунок 9).
Рисунок 9 – Иконка
На рисунке 10 представлены изображения кнопок «добавить», «редактировать» и «удалить».
Рисунок 10 – Кнопки «добавить», «редактировать» и «удалить»
Таким образом, в данной главе рассмотрены основные правила, стандарты, необходимые для создания эргономичного интерфейса, предложен прототип решения поставленной задачи.
3 РЕАЛИЗАЦИЯ
В данной главе выпускной квалификационной работы необходимо реализовать интерфейс информационной системы для предприятия по пошиву детской одежды. Для этого необходимо разработать базу данных, рассмотреть ее структуру, настроить связь базы данных со средой разработки приложения, создать интерфейс программного средства.
3.1 Структура базы данных
База данных предприятия имеет структуру, представленную на рисунке 11.
Рисунок 11 – Структура базы данных
На рисунке 11 показаны таблицы с названиями полей, в которых пользователи данного программного продукта намерены хранить определенную информацию, связи между таблицами, а также таблицы, которые являются основными и вспомогательными.
Данная база данных создана в программе MySQL.
3.2 Шаблон проектирования MVC
Для создания данного программного средства необходимо использовать шаблон проектирования Model-View-Controller (MVC).
Шаблон MVC предполагает разделение данных приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: модель, представление и контроллер – таким образом, что модификация каждого компонента может осуществляться независимо [10].
На рисунке 12 представлена схема шаблона Model-View-Controller.
Рисунок 12 – MVC
Модель (Model) предоставляет данные предметной области представлению и реагирует на команды контроллера, изменяя свое состояние. Представление (View) отвечает за отображение данных предметной области (модели) пользователю, реагируя на изменения модели. Контроллер (Controller) интерпретирует действия пользователя, оповещая модель о необходимости изменений.
Таким образом, моделями в данном приложении являются таблицы базы данных, в них прописаны функции, которые необходимо производить над записями базы данных, то есть их обновление, добавление, редактирование и удаление.
В представлении пользователь получает формы, кнопки, отображение записей, работает с ними.
Контроллер реагирует на действия пользователя и в зависимости от необходимой функции запускает код программы.
3.3 Реализация в среде разработки
База данных разрабатывалась в программе MySQL, приложение – в программной среде Qt Creator [11, 12]. Далее необходимо показать процесс создания приложения.
3.3.1 Подключение к базе данных
Связь базы данных с программной средой разработки приложения устанавливалась путем вызова функций установки хоста, порта, названия базы данных, ввода имени пользователя и пароля (листинг 1), полный код представлен в приложении А.
bool DB::conection(const QString &s)
{
db_ = new QSqlDatabase;
*db_ = QSqlDatabase::addDatabase("QMYSQL");
db_->setHostName("127.0.0.1");
db_->setPort(3306);
db_->setDatabaseName(s);
db_->setUserName("root");
db_->setPassword("vista937");
return db_->open();
}
Листинг 1 – Подключение к базе данных
3.3.2 Реализация моделей таблиц
Код для отображения записей таблицы с использованием команд обращения к базе данных представлен в листинге 2.
QString queryStr = " SELECT IDaddress, CityName, StreetName, HouseNumber, FlatNumber, CityID, StreetID"
" FROM address"
" INNER JOIN city "
" On address.CityID = city.IDcity "
" INNER JOIN street "
" On address.StreetID = street.IDstreet "
" ;";
setQuery(queryStr, DB::db());
Листинг 2 – Отображение записей таблицы
Для добавления записи в таблицу необходимо выполнить SQL-запрос и извлечь данные, которые ввел пользователь в форму, а также привести эти данные к нужному типу (листинг 3).
QString queryStr = "INSERT INTO address ( "
"CityID, StreetID, HouseNumber, FlatNumber ) "
"VALUES ( ? , ? , ? , ? );";
QSqlQuery query(DB::db());
query.prepare(queryStr);
query.addBindValue(rc.value("CityID").toInt());
query.addBindValue(rc.value("StreetID").toInt());
query.addBindValue(rc.value("HouseNumber").toInt());
query.addBindValue(rc.value("FlatNumber").toInt());
bool r = query.exec();
Листинг 3 – Команда добавления записи
Изменение записи отличается от добавления только SQL-запросом (листинг 4).
QString queryStr = "UPDATE address SET "
"CityID = ?, "
"StreetID = ?, "
"HouseNumber = ?, "
"FlatNumber = ? "
"WHERE IDaddress = ?; ";
Листинг 4 – Команда изменения записи
Удаление записи происходит с помощью SQL-запроса, представленного в листинге 5.
QString queryStr = " DELETE FROM address "
" WHERE IDaddress = ? ; ";
QSqlQuery query(DB::db());
query.prepare(queryStr);
query.addBindValue(record(id).value("IDaddress").toInt());
return query.exec();
Листинг 5 – Удаление записи
В случае, когда запись из одной таблице используется в другой таблице, тогда при удалении записи из одной таблицы или при ее редактировании, необходимо сначала удалить или изменить ее в другой, где она используется. Чтобы упростить данную задачу при создании структуры базы данных в программе MySQL использовалась команда, представленная в листинге 6.
alter table product add foreign key (TextileID) references textile (IDtextile) on delete cascade on update cascade;
Листинг 6 – Команда каскадного редактирования и удаления записи
Полный код одной модели приведен в приложении Б.
3.3.3 Диалоги
В листинге 7 представлен код программы, необходимый для отображения таблицы в приложении. В нем установлена связь данного диалогового окна с необходимой моделью, заданы названия колонок таблицы, а также скрыты ненужные колонки (полный код представлен в приложении В).
model_ = new AddressModel(this);
model_->refresh();
ui->tableView->setModel(model_);
ui->tableView->setColumnHidden(0, true);
model_->setHeaderData(1,Qt::Horizontal, tr("Населенный пункт"));
model_->setHeaderData(2,Qt::Horizontal, tr("Улица"));
model_->setHeaderData(3,Qt::Horizontal, tr("Номер дома"));
model_->setHeaderData(4,Qt::Horizontal, tr("Номер квартиры"));
ui->tableView->setColumnHidden(5, true);
ui->tableView->setColumnHidden(6, true);
Листинг 7 – Отображение таблицы в приложении
Добавление записи происходит по нажатию на соответствующую кнопку (код представлен в приложении В), после чего вызывается новое диалоговое окно, которое выполняет код, представленный в листинге 8.
ui->leFlatNumber->setText(data_.value("FlatNumber").toString());
ui->leHouseNumber->setText(data_.value("HouseNumber").toString());
CityModel cityModel;
cityModel.refresh();
for(int i = 0; i < cityModel.rowCount(); ++i){
QSqlRecord sqlRc = cityModel.record(i);
ui->cbCity->insertItem(i,sqlRc.value("CityName").toString(), sqlRc.value("IDcity"));
}
ui->cbCity->setCurrentIndex(ui->cbCity->findText(data_.value("CityName").toString()));
StreetModel streetModel;
streetModel.refresh();
for(int i = 0; i < streetModel.rowCount(); ++i){
QSqlRecord sqlRc = streetModel.record(i);
ui->cbStreet->insertItem(i,sqlRc.value("StreetName").toString(), sqlRc.value("IDstreet"));
}
ui->cbStreet->setCurrentIndex(ui->cbStreet->findText(data_.value("StreetName").toString()));
Листинг 8 – Добавление записи
В данном коде устанавливается тип полей, необходимых для заполнения пользователем, и в поля, где используются записи из других таблиц, заносятся соответствующие варианты.
Редактирование записи отличается от добавления лишь тем, что в форме уже занесены параметры выбранной записи, а также SQL-запросом, описанным в модели ранее. Код установки значений выбранной записи представлен в листинге 9.
data_.setValue("FlatNumber", ui->leFlatNumber->text());
data_.setValue("HouseNumber", ui->leHouseNumber->text());
data_.setValue("CityID", ui->cbCity->currentData());
data_.setValue("StreetID", ui->cbStreet->currentData());
return data_;
Листинг 9 – Установка значений выбранной записи
При выборе записи и нажатии на кнопку «Удалить» запускается код, представленный в листинге 10.
void ShowAddress::on_deleteButton_clicked()
{
model_->remove(ui->tableView->currentIndex().row());
model_->refresh();
}
Листинг 10 – Удаление записи
При нажатии на кнопку считывается номер выбранной записи и запускается команда удаления, описанная в модели.
Полный код окна редактирования записи представлен в приложении Г.
4 ОЦЕНКА РЕЗУЛЬТАТА
В данной главе выпускной квалификационной работы необходимо оценить получившийся интерфейс информационной системы для предприятия по пошиву детской одежды. Для этого необходимо рассмотреть методы оценки пользовательского интерфейса, выбрать удобный, провести исследование и подвести итог проделанной работе.














