2019 International Electronics Symposium (IES)

Design an MVC Model using Python for Flask

Framework Development
Mohammad Robihul Mufid, Arif Basofi, M. Udin Indhi Farhandika Rochimansyah, Abdul rokhim
Harun Al Rasyid Akademi Komunitas Negeri Lamongan, Indonesia
Politeknik Elektronika Negeri Surabaya, Indonesia indhifarhandika@gmail.com, abd.rokhim@stmik-
mufid@pasca.student.pens.ac.id, {ariv, yadika.ac.id
udinharun}@pens.ac.id

Abstract— The Model-View-Controller (MVC) web developers who use framework flask, MVC is needed in
framework has become the standard in modern software the framework flask.
development, with the model layer, display layer, and There have been several previous studies on the use of
controller layer making it easier and faster. The Flask is a MVC, including Sarker et al. [1] proposed the MVC design to
framework that uses Python language with easy to be implemented in the Java Framework in developing desktop
understand code writing. But the Flask framework still application research. In the proposed MVC it can separate data,
doesn't use the MVC method, so files and codes are not display, control software, and can also achieve the separation
regular. The purpose of this study was to design a MVC of the business logic layer and presentation layer. The results of
for a framework that uses the Python programming the research conducted show that software can be developed
language. This system has a generator that can make MVC effectively using this MVC framework, and this framework is
folder structure easily and quickly, this system is also also stable, efficient, and able to develop high-quality
equipped with the Bootstrap framework, and this system is applications.
open source. The results showed that the presence of MVC Paul et al. [3] proposes a model for developing fast web
on the flask framework could make users easier in creating applications based on the Model-View-Controller (MVC)
new projects and have faster fully load time. architecture which has several useful components such as
security, form validation and creation, as well as database
Keywords— Framework, Model-View-Controller (MVC),
access and routing. The proposed MVC model uses the PHP
Python, genarator
programming language, but can be implemented in other
I. INTRODUCTION languages and development environments using the same
concept. The results show that this model can reduce web
Today, the development of websites has been going a long application development time, and allow developers to focus
way since the beginning of the World Wide Web (WWW), on application specific tasks, rather than wasting time trying to
many programming technologies and languages are now being apply well-known patterns and practices.
used to build web applications. One of the technologies for
building web applications is MVC. MVC is a method for Xu et al. [4] proposed a study of the application of the
building web by separating the model layer, controller layer, MVC-based Struts framework to be applied in the online rural
and display layer so that it is easier and faster. MVC has shown teacher training system in China. This system is based on the
its benefits for interactive web applications that allow multiple J2EE platform, which provides types of components and
representations of the same information, promote code reuse, containers for program development in carrying out MVC
and help developers focus on certain application features. The roles, and makes development easier and more efficient.
MVC framework has broadly become a standard in modern Wang et al. [5] proposed the implementation of the
software development [1]. application of code reuse technology based on the MVC
Framework Flask is a web framework from Python concept applied to a comprehensive fishing vessel inspection
language. Flask provides a library and a collection of codes that service system project. The results of the study indicate that a
can be used to build websites, without the need to do combination of code reuse and MVC framework can improve
everything from scratch. Because of its simple features, the the efficiency of code development and maintenance.
flask will be lighter and not dependent on many external Zhang et al. [6] proposed research on the design of a
libraries that need attention. In general, the flask provides lightweight MVC framework based on Spring MVC and
'Wekzeug' which is useful for receiving requests (url) and Mybatis. Spring MVC can do method-level interceptors for
responding [2]. But Framework flask still doesn't use the requests to improve operating efficiency, and completely
Model View Controller (MVC) method. So there are separate business logic and display layers. Whereas by using
weaknesses including the difficulty in making repetitive codes Mybatis as a persistence layer framework, it can increase the
and source code management. Therefore, to make it easier for

978-1-7281-4449-8/19/$31.00 ©2019 IEEE 214

Authorized licensed use limited to: PUC MG. Downloaded on April 24,2024 at 23:09:56 UTC from IEEE Xplore. Restrictions apply.
speed of development, database access, and bring more space a) Model : dealing directly with databases to manipulate
to improve system security, performance, and maintenance. data (insert, update, delete, search), handle validation from
Pan et al. [7] proposed a web application with the MVC controller parts, but cannot deal directly with the view
framework for IEEE floating-point standards using java section.
language. This system also uses several web optimization b) View : the part that handles the presentation logic. In
techniques to improve performance, such as RWD, AJAX, a web application this section is usually an HTML
HikariCP, and there are two software design patterns such as template file, which is set by the controller. View functions
DAO and DTO. The test results are determined by a simple to receive and represent data to the user. This section does
algorithm. not have direct access to the model section.
Singh et al. [8] proposed designing a lightweight MVC c) Controller : the part that regulates the relationship
framework for developing small to medium-size web between the part of the model and the part of view, the
applications, using java language. Java has many MVC controller functions to receive requests and data from the
frameworks, but two of them stand out in popularity like user then determine what the application will process.
Spring and Struts 2. Spring and Struts 2 still lack support for
the latest technology and are too complicated with steep III. OVERVIEW OF FRAMEWORK FLASK
learning curves, making Spring and Struts inadequate for Flask is a micro framework web written in the python
developing small web projects to medium. The results of this programming language, flask was created by Armin Ronacher
study the researchers created a framework such that it is in 2004. Flask is licensed under a three clause BSD License,
flexible, easy to learn and efficient at the same time. flask is designed to make web applications quickly and easily,
Wijaya et al. [9] implement the MVC method on the Bakti with the ability to improve complex applications. It started as
Prabumulih Vocational School website. This application is a simple wrapper around Werkzeug and Jinja and has become
made with the PHP programming language and uses MySql as one of the most popular Python web application frameworks.
its database. The results of this study make it easy to control Figure 2 shows an example of a flask script [2].
and process data information about schools.
The aim of this study was to design an MVC on the Flask
framework using Python language, to help developers improve
the speed and quality of work, and provide a Flask framework
that is better for both novice or experienced users. This system
has a project generator that will make folders and files
structured and automatic, so users don't need to create manual
folders and files.
II. OVERVIEW OF MODEL-VIEW-CONTROLLER (MVC) Fig. 2. A simple example of a flask script
In this section, the model-view-controller path will be used
in the framework flask. The model-view-controller method
was first introduced by Trygve Reenskaug in the 1970s. This IV. SYSTEM DESIGN
method is divided into three interconnected parts, namely the
model, view, and controller [1]. Figure 1 shows the flow of the In this section we will explain the system design to
model-view-controller. implement the MVC method on the framework flask. This
system design will create a folder that has an MVC structure
and there are important files. Figure 3 shows the system
process diagram.

Fig. 1. The MVC pattern Fig. 3. System Process Diagram

215
Authorized licensed use limited to: PUC MG. Downloaded on April 24,2024 at 23:09:56 UTC from IEEE Xplore. Restrictions apply.
 controller. The function of view block is to the user.
In this study to implement MVC on the framework flask, it Section views does not have direct access to the model
will be divided into the following stages: section.
• Model usually dealing directly with databases to
a) Create Project Generator manipulate data (insert, update, delete, search), handle
At this stage, this system has a project generator that will validation from controller parts, but it can’t deal directly
make folders and files structured and automatic, so users don't with the view section.
need to create manual folders and files. Figure 4 explains how • Controller is a part that regulates the relationship
to create a controller folder and create a __init__.py between the part of the model and the part of view, the
constructor file, to create a model folder, view, static, config is functions controller of is to receive requests and data
also the same as creating a controller folder, but the difference from the user then determine what the application will
in naming the variable. process.
• Static is for saving files css, javascript, and also to save
images.
• Config is part of managing database configuration and
other system configurations.

Fig. 4. Summary of Source Code Generator

b) Produce the MVC Structure

In this section we will explain our system design to
implement the MVC method on framework flask. Main
architectural concept in this system, has three components
such as Model, View and Controller. Figure 5 shows the MVC
pattern on the system to be created. First, the user sends a data Fig. 6. Project Folder Structure
request to the controller, then the controller receives the data
request from the user. If the data request from the user c) Generate Files CSS, Javascript, Python, and HTML
requires data access from the database, the controller will send The project generator also creates css, javascript, python,
to the model, then the model will retrieve the data needed and html files that are already in the folder.
from the database and will be sent to the controller after the • In the basic project folder there is 1 python file,
controller receives data from the model, the data will be sent namely: artisan.py which functions to run the server,
to view. create a controller and make a model.
• In the project folder there is 1 python file, namely:
__init __.Py is a file constructor that will
automatically run.
• In the CSS folder there are 2 css files, namely:
cover.css to design html files and bootstrap.min.css
are files from framework version 4.3
• In the js folder there are 2 javascript files, namely:
popper.min.js and bootstrap.min.js are javascript files
from the bootstrap framework version 4.3
• In the templates folder there are 3 html files, namely:
index.html, about.html, and contact.html are the web
start page when the generator creates a new project.
• In the model folder there are 2 python files, namely:
Fig. 5. The MVC Pattern in this system __init__.py is a file constructor that will read the
python file in the model folder. And hello.py is the
The following is the folder structure that has been initial python file to set the model.
generated by the MVC generator. Figure 6 explain about the • In the controllers folder there are 4 python files,
MVC folder structure that is in the python flask framework : namely: __init__.py is a constructor file that will read
• Templates or views, is the part that handles the files in the controller folder. Then there are index.py,
presentation logic. In a web application, this part is contact.py, and about.py are the initial python files
usually an HTML template file, which is set by the

216
Authorized licensed use limited to: PUC MG. Downloaded on April 24,2024 at 23:09:56 UTC from IEEE Xplore. Restrictions apply.
 created by the generator.
• In the config folder there are 2 python files, namely:
__init__.py is a constructor file that will read python
files that are in the config folder, and Database.py for
mysql database settings.

V. PERFORMANCE EVALUATION
In this section a testing process will be carried out to
determine the performance of the MVC model design on the
Flask framework using the Python language. In this test, it will
be divided into 2 parts, namely the implementation of website Fig. 9. Display Home
creation and analysis of the performance of Flask MVC.
Figure 10 is the display about connecting to controller
a) Implementation of website creation about.py.
To create a new website, using Flask MVC we just make it
from a project generator. the project generator will create
folders and files in a structured and automatic manner, so
users do not need to manually create folders and files. Figure 7
is a display of a generator project from Flask MVC. There is
one input to the project generator that is entering the name of
the project that we will create. After the project is created,
then the project will automatically have an MVC folder
structure that is also equipped with a web server named
Artisan.py. Figure 8 is the view to run the server, the user
must enter the project folder then open terminal / cmd, then
type "python artisan.py runserv", the system will run the Fig. 10. Display About
server and output the output to inform the user that the server
is running, then open the browser and enter the url http: // Figure 11 is the display contact connecting to controller
localhost: 8000 /. The system will look for a controller named contact.py.
index.py and will run it. Figure 9 is the start page view of a
website that is created automatically from the use of the MVC
Flask generator. The home view is connected to the index.py
controller.

Fig. 7. Display Generator Project

Fig. 11. Display Contact

b) Analysis of the performance of Flask MVC

System analysis is intended to analyze the performance of
the system that has been made if it is as expected, the
following are the results of the analysis of the performance of
the website using the GTmetrix tool. The website to be tested
Fig. 8. Display when running the server is a website that uses the Flask MVC framework with a
website that uses the Flask framework without MVC, with the
same file and server size. Metrics measured include
PageSpeed, YSlow Score, Full Load Time, Total Page Size,
and Relative Request. Figure 12 shows the PageSpeed and
YSlow scores, the results of the PageSpeed score and the
YSlow score on the MVC Flask with the same Flask. The
PageSpeed score is the result of analyzing web pages based on

217
Authorized licensed use limited to: PUC MG. Downloaded on April 24,2024 at 23:09:56 UTC from IEEE Xplore. Restrictions apply.
Google's rules. YSlow's score is the result of analyzing web
pages based on Yahoo's rules.

Fig. 15. Result Relative Request

Fig. 12. Result PageSpeed and YSlow Score

Figure 13 shows the results of Fully Loaded Time on VI. CONCLUSION

Flask MVC is 0.473 seconds and the results of Flask are 0.5
seconds. This result show that Flask MVC have time faster MVC is a method for making applications concise and fast,
but unfortunately, in framework Flask it still doesn't use the
than Flask in load total page. Figure 14 shown the result of
MVC method. In this study, we aim to provide easy website
total page size on Flask MVC and Flask. Total Page Size is the creation using the MVC method in framework flask with
total of files on the website. Figure 15 shown the result of the python language. Our system has been equipped with a project
score request that is in the MVC Flask and Flask. From the generator and is also equipped with a bootstrap framework
experiment above it can be concluded that the use of MVC in which will make it easier to design the appearance of the
the python flask framework greatly facilitates and speeds up website. Our system helps developers improve the speed and
performance when creating websites, website speed formatting quality of work, and provides a framework and work platform
when tested faster using MVC. that is good for novice or experienced users. For further
research, it is expected to add features that are still not
available on our system, like add JQuery Framework and
connect to the Oracle database.
REFERENCES

[1]. I. H. Sarker, K. Apu, “MVC Architecture Driven

Design and Implementation of Java Framework for
Developing Desktop Application,” International
Journal of Hybrid Information Technology, Vol.7,
No.5, pp. 317-322, 2014.
[2]. G. Miguel, “Flask Web Development,” O’Reilly Media,
Inc. 2014.

Fig. 13. Result Fully Loaded Time [3]. D. P. Pop, A. Altar, “Designing an MVC Model for
Rapid Web Application Development,” Elsevier Ltd,
Vol. 69, pp. 1172-1179, 2013.
[4]. S. Xu, T. Yang, “Application of Struts framework
based on MVC in Online Countryside Teachers’
Training System in China,” International Conference
on Multimedia Technology, IEEE, pp. 6252-6255,
2011.
[5]. X. Wang, B. Xu, R. Gu, “The Application of Code
Reuse Technology Based on the MVC Framework,”
International Conference on Computer Sciences and
Applications, IEEE, pp. 534-537, 2013.
[6]. D. Zhang, Z. Wei, Y. Yang, “Research on Lightweight
MVC Framework Based on Spring MVC and Mybatis,”

Fig. 14. Result Total Page Size

218
Authorized licensed use limited to: PUC MG. Downloaded on April 24,2024 at 23:09:56 UTC from IEEE Xplore. Restrictions apply.
 International Symposium on Computational Intelligence
and Design on IEEE, Vol.1, pp. 350-353, 2013.
[7]. C. C. Pan, C. C. Lin, “Designing and Implementing a
Computerized Adaptive Testing System with an MVC
Framework: A Case Study of the IEEE Floating-Point
Standard,” International Conference on Applied System
Invention (ICASI), pp. 609-612, 2018.
[8]. A. Singh, P. Chawla, K. Singh, A. K. Singh,
“Formulating an MVC Framework for Web Development
in JAVA,” International Conference on Trends in
Electronics and Informatics (ICOEI), pp. 926-929, 2018.
[9]. K. Wijaya, A. Christian, “Implementasi Metode Model
View Controller (MVC) Dalam Rancang Bangun Website
SMK Yayasan Bakti Prabumulih,” Paradigma-Jurnal
Komputer dan Informatika, Vol. 21, No. 1, pp. 95-102,
2019.

219
Authorized licensed use limited to: PUC MG. Downloaded on April 24,2024 at 23:09:56 UTC from IEEE Xplore. Restrictions apply.