[Qt C++] QTableView Model-View simple application P2

In the las part we have created some basic GUI for our application.....now I'm going to put some code into it so that can be start to be useful....the plan is to link our database with the model and then link the model with our "View" widget.

by the end of this part of the tutorial you will end with something like this...

Because we are going to store some data in a database I'm going to use a SQLite database because its very simple to use and very powerful, yo can go to https://www.sqlite.org/ and download the console program to create a SQLite database, but I'm going for the easy way and download DB Browser for SQLite, it is a simple SQLite browser, that lets you create and modify your database file...

when you have installed, open and Create a new database...store it on your projects folder

when the database is created the new prompt window lets you create the table and the fields.

I'm going to create a table named "borrow" with the fields (id, device, quantity, name, descriptionout, dateout, state, datein and descriptionin), pay attention to the types of each field...

if you like that piece of code....

CREATE TABLE `borrow` (
`id` INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE,
`device` TEXT NOT NULL,
`quantity` INTEGER NOT NULL,
`name` TEXT NOT NULL,
`descriptionout` TEXT,
`dateout` TEXT NOT NULL,
`state` TEXT NOT NULL,
`datein` TEXT,
`descriptionin` TEXT
);

clic on "Write Changes"...... with the database created we can start creating our model...

Because we are going to use QtSql capabilities first we need to search for borrowingmanager.pro and add QT += sql, then run qmake (right clic on the project folder and hit "run q make") and rebuild.

now go to you mainwindow.h and include <QSqlDatabase>, <QSql>,<QSqlQuery>, <QSqlError> and <QSqlTableModel>. after that create a QSqlDatabase object called "db" and a QSqlQuery called query (pretty original names right?...).....and for testing also include <QDebug>

so your mainwindow.h should look something like this...

now I'm going to add the reference path of the database I have created to the QSqlDatabase object...note that I'm using QApplication::applicationDirPath to search for the database so you have to copy your database file along with the executable of the program...

   db=QSqlDatabase::addDatabase("QSQLITE");
db.setDatabaseName(QString("%1/database.db").arg(QApplication::applicationDirPath()));

and also test the connection to it,

          if(db.open()) qDebug()<<"database is open";
else qDebug()<<"databaase not open "<<db.lastError().text();

if everything is ok when you run your project you should see on the console output the message "database open" .

now go to mainwindow.h and create a QSqlTableModel object called borrowModel;

    QSqlTableModel *borrowModel;

and then instantiate it on your mainwindow.cpp file......you have to add its parent, and also the database connection.

    borrowModel = new QSqlTableModel(this, db);

I'm going to tell borrowModel that it will use the table "borrow" of the database, and also that I can edit when I double clic some of its fields, and populate the table model using "select()"

   borrowModel = new QSqlTableModel(this,db);
   borrowModel->setTable("borrow"); borrowModel->setEditStrategy(QSqlTableModel::OnFieldChange); borrowModel->select();

finally I'm going to link this model to the Table View Widget....and also I'm going to enable its sorting function.

   ui->tableView->setModel(borrowModel);
   ui->tableView->setSortingEnabled(true);

now you can run it and you will see the names of the columns of our database...you can even add some records to the database using DB Browser and see how the table gets populated....

I'm going to give that table some look by hiding the id column because I don't really need to show it, also I'm going to change the names of the columns...also I was thinking to add some functionality to those columns by let them arrange as the users wants...

   borrowModel->setHeaderData(1, Qt::Horizontal, tr("Device"));
   borrowModel->setHeaderData(2, Qt::Horizontal, tr("Quantity"));
   borrowModel->setHeaderData(3, Qt::Horizontal, tr("Name"));
   borrowModel->setHeaderData(4, Qt::Horizontal, tr("Out Description"));
   borrowModel->setHeaderData(5, Qt::Horizontal, tr("Date Out"));
   borrowModel->setHeaderData(6, Qt::Horizontal, tr("State"));
   borrowModel->setHeaderData(7, Qt::Horizontal, tr("Date In"));
   borrowModel->setHeaderData(8, Qt::Horizontal, tr("Description In"));

ui->tableView->hideColumn(0); ui->tableView->horizontalHeader()->setSectionsMovable(true);
ui->tableView->horizontalHeader()->setMaximumSectionSize(400);

I was thinking that the table needs some color, so lets change its stylesheet....

there are two ways of changing the stylesheet of a widget in Qt....1 is by calling the "setStylesheet" function and the other one is using Qt Creator Design mode, so I'm going to show you how to do it using Qt Creator Design..

first go to the Table View Widget, right clic, and then select Change Stylesheet.

there you can add gradients, colors, backgrounds, etc to any widget on Qt, we are going to do some basics modifications but if you want more information about Stylesheets on Qt please visit Qt Stylesheet 5.10

so here I'm adding just a background color to the table and some color to the header section...feel free to modify it as you want and also for the other widgets too...

so by the end of this part you will end with something like this....

so at this point he have linked to Model to the View...the next step is to add some functionality to our program, like de add and modify buttons, but that will be covered on Part 3....

you can have this code by cloning its repo on GIT hub...Borrowing Manager Repo