(Đồ án tốt nghiệp) Source code generator for web application based on the existing database

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION
FACULTY FOR HIGH QUALITY TRAINING

GRADUATION THESIS

SOURCE CODE GENERATOR FOR WEB
APPLICATION BASED ON THE EXISTING
DATABASE

Advisor: NGUYEN DUC KHOAN, MSc.
Student Name:

Student ID:

PHAN SON

17110216

HUYNH QUOC HOANG VUONG

17110256

Course: 2017

Ho Chi Minh City, July 2021


ACKNOWLEDGEMENTS
First, the team would like to sincerely thank the teachers, departments, and related
people in the high-quality training department and the University of Technology and
Education in general. Thanks to that, the team could approach, learn, and explore and

apply the acquired knowledge.
The team was very sincere to Mr. Nguyen Duc Khoan who played the role of both
a lecturer and a mentor during the process of this graduating session. His enthusiastic
guidance helped the team a lot in posing problems and solving problems that the group
encountered. Finally helped the team complete this Easy-Web web application.

Student implementation.

iv


TABLE OF CONTENTS
CHAPTER 1.

INTRODUCTION. ............................................................................... 1

1.1.

Current situation………………………………………………………... 1

1.2.

Review current solutions……………………………………………….. 1

1.2.1. Visual Studio’s MVC Web Application Generator. ........................... 1
1.3.

Proposed solution………………………………………………………. 2

1.4.

Scope…………………………………………………………………… 2

CHAPTER 2.

TECHNOLOGIES. ............................................................................... 4

2.1

Technologies…………………………………………………………….4

2.2

NET Core………………………………………………………………..5

2.3

Python…………………………………………………………………... 6

2.4

Python Flask……………………………………………………………. 7

2.5

Microsoft SQL Server 2019…………………………………………..... 8

2.6

Redis queue (RQ)………………………………………………………. 9

2.7

Angular Framework……………………………………………………10

2.7.1 Overview. ........................................................................................... 10
2.7.2 MEAN Stack. ..................................................................................... 11
CHAPTER 3.

REQUIREMENT SPECIFICATION. ................................................ 13

3.1

User requirement……………………………………………………… 13

3.2.

System requirement…………………………………………………… 14

3.2.1. Actor of system. ................................................................................ 14
3.2.2. Use case diagram. ............................................................................. 14
3.2.3. Use case specification. ...................................................................... 15
v


3.2.4. Use case description. ......................................................................... 16
3.2.4.1. Unauthorized user - Use case description. ................................. 16
3.2.4.2. Authorized user - Use case description. ..................................... 25
3.2.5. Non-functional requirement. ............................................................. 38
3.2.5.1. Usability ..................................................................................... 38

3.2.5.2. Reliability ................................................................................... 38
3.2.5.3. Availability ................................................................................ 39
3.2.5.4. Security ...................................................................................... 39
3.2.5.5. Durability ................................................................................... 39
3.2.5.6. Ability ........................................................................................ 39
3.2.6. Entity Relationship diagram. ............................................................ 39
CHAPTER 4.

SYSTEM DESIGN AND IMPLEMENTATION. .............................. 41

4.1.

System Architecture…………………………………………………... 41

4.2.

Component Diagram………………………………………………….. 42

4.2.1. Back-end ........................................................................................... 42
4.2.2. Front-end. .......................................................................................... 43
4.2.3. Source code generator framework .................................................... 44
4.3.

Activity Diagram……………………………………………………… 45

4.3.1. The process to create a website from an existed database. ............... 45
4.4.

Class Diagram………………………………………………………… 46

4.4.1. Class diagram for Easy-Web’s System. ............................................ 46
4.4.1.1. Class diagram description for class User. .................................. 47
4.4.1.2. Class diagram description for class BaseEntity. ........................ 47
4.4.1.3. Class diagram description for class UserDatabaseInfo.............. 47
vi


4.4.1.4. Class diagram description for class WebGeneratedHistory. ..... 48
4.4.2. Class diagram use for Source code generates framework system. ... 49
4.4.2.1. Class diagram description for class BaseEntity. ........................ 49
4.4.2.2. Class diagram description for class SystemMasterConfig. ....... 50
4.4.2.3. Class diagram description for class SystemTableConfig. ......... 50
4.4.2.4. Class diagram description for class SystemTableColumnConfig.
…………………………………………………………………51
4.4.2.5. Class

diagram

description

for

class

SystemTableForeignKeyConfig. ........................................................................ 52
4.5.

Sequence Diagram…………………………………………………….. 53

4.5.1. Login. ................................................................................................ 53

4.5.2. Register. ............................................................................................ 54
4.5.3. Generate a website from an existed database. .................................. 55
4.5.4. Back-end source code generator. ...................................................... 56
4.5.5. Front-end source code generator. ...................................................... 57
4.5.6. Website source code generator framework. ...................................... 57
4.6.

User interface design………………………………………………….. 58

4.6.1. Project prototype. .............................................................................. 58
4.6.1.1. System - UI for the unauthenticated user. .................................. 61
4.6.1.1.1. SCA_008 Homepage. ......................................................... 62
4.6.1.1.2. SCA_017 Homepage system – Easy-Web Blog. ................ 64
4.6.1.1.3. SCA_014 Register database connection string. .................. 66
4.6.1.1.4. SCA_13 Configure tables. .................................................. 68
4.6.1.1.5. SCA_015 Configure Columns. ........................................... 69
vii


4.6.1.1.6. SCA_016 Fill out Information & Preview. ......................... 70
4.6.1.1.7. SCA_005 Login page. ......................................................... 71
4.6.1.1.8. SCA_004 Register page. ..................................................... 72
4.6.1.1.9. SCA_003 View demo table management screen. ............... 73
4.6.1.1.10. SCA_001 Create data demo screen. ................................. 75
4.7.

Database Design………………………………………………………. 76

4.7.1. Database Physical Diagram. ............................................................. 76
CHAPTER 5.

SYSTEM IMPLEMENTATION. ....................................................... 80

5.1.

Software development environment………………………………….. 80

5.2.

Source code management……………………………………………... 80

5.3.

System Implementation……………………………………………….. 81

5.3.1. Easy-Web web user interface............................................................ 81
5.3.2. Website source code generates framework. ...................................... 81
5.3.3. User’s Generated website. ................................................................ 82
5.4.

Test Plan………………………………………………………………. 83

5.4.1. List of stages of testing. .................................................................... 83
5.4.2. List of test types. ............................................................................... 83
5.4.3. Constraints. ....................................................................................... 83
5.4.4. Plan defect. ........................................................................................ 83
5.5.

Test Design……………………………………………………………. 84

5.5.1. Items to be tested............................................................................... 84
5.5.2. Features to be tested. ......................................................................... 84
5.6.

Test Case……………………………………………………………… 84

5.6.1. Test case of check login function...................................................... 84
viii


5.6.2. Test case register function. ............................................................... 85
5.6.3. Test case register database connection string. .................................. 86
5.6.4. Test case config table. ....................................................................... 87
5.6.5. Test case config column.................................................................... 88
CHAPTER 6.

CONCLUSION. .................................................................................. 89

6.1.

Conclusion……………………………………………………………. 89

6.2.

Advantage……………………………………………………………... 89

6.3.

Disadvantage………………………………………………………….. 89

6.4.

Future planning………………………………………………………...89

REFERENCES. .............................................................................................................. 90
APPENDICES................................................................................................................ 91
TABLE OF TASKS. ...................................................................................................... 92

ix


LIST OF ABBREVIATIONS
Table 1. List of Abbreviations.

Term

Definition

DB

Database

RQ

Redis Queue

API

Application Programming Interface

MEAN

MongoDB, Express.js, Angular, NodeJS

HTTP

Hyper Text Transfer Protocol

CMS

Content Management System

FE

Front-end

BE

Back-end

DBMS

Database Management System

CRUD

Create – Read – Update - Delete

IDE

Integrated development environment

NPM

Node Package Manager

VPS

Virtual Private Server

x


LIST OF TABLES
Table 1. List of Abbreviations. ................................................................................ x
Table 2. Actor description ..................................................................................... 14
Table 3. Use case specification. ............................................................................ 15
Table 4. Use case uc_01. ....................................................................................... 16
Table 5. Use case uc_02. ....................................................................................... 18
Table 6. Use case uc_03. ....................................................................................... 20
Table 7. Use case uc_04. ....................................................................................... 21
Table 8. Use case uc_05. ....................................................................................... 22
Table 9. Use case uc_06. ....................................................................................... 23
Table 10. Use case uc_07. ..................................................................................... 24
Table 11. Use case uc_08. ..................................................................................... 25
Table 12. Use case uc_09. ..................................................................................... 26
Table 13. Use case uc_10. ..................................................................................... 28
Table 14. Use case uc_11. ..................................................................................... 29
Table 15. Use case uc_12. ..................................................................................... 31
Table 16. Use case uc_13. ..................................................................................... 33

Table 17. Use case uc_14. ..................................................................................... 35
Table 18. Use case uc_16. ..................................................................................... 37
Table 19. Component Description......................................................................... 41
Table 20. Description for class User. .................................................................... 47
Table 21. Description for class BaseEntity. .......................................................... 47
Table 22. Description for class UserDatabaseInfo. ............................................... 47
Table 23. Description for class WebGenetatedHistory. ........................................ 48
Table 24. Description for class BaseEntity. .......................................................... 49
Table 25. Description for class SystemMasterConfig. .......................................... 50
Table 26. Description for class SystemTableConfig. ............................................ 50
Table 27. Description for class SystemTableColumnConfig. ............................... 51
xi


Table 28. Description for class SystemTableForeignKeyConfig.......................... 52
Table 29. Screen flow description. ........................................................................ 59
Table 30. Homepage screen description................................................................ 63
Table 31. Blog screen description. ........................................................................ 65
Table 32. Table register database screen connection. ........................................... 66
Table 33. Configure table screen description. ....................................................... 68
Table 34. Config columns screen. ......................................................................... 69
Table 35. Generate website step 04 screen description. ........................................ 70
Table 36. Demo Login page screen. ...................................................................... 71
Table 37. Demo Register UI screen description. .................................................. 72
Table 38. View detail UI screen description. ........................................................ 73
Table 39. Create a new entity screen description. ................................................. 75
Table 40. Description for tables of Web Application. .......................................... 76
Table 41. Description for tables of Website generated. ........................................ 78
Table 42. Software development environment. .................................................... 80
Table 43. Test case check login............................................................................. 84

Table 44. Test case register function. .................................................................... 85
Table 45. Test case register database. ................................................................... 86
Table 46. Test case config table. ........................................................................... 87
Table 47. Test case config column. ....................................................................... 88
Table 48. Team member tasks assignment and working schedule. ...................... 92

xii


LIST OF FIGURES
Figure 2.1. .NET Core logo. .................................................................................... 5
Figure 2.2. Python logo. .......................................................................................... 6
Figure 2.3. Python Flask logo. ................................................................................ 7
Figure 2.4. Microsoft SQL Server logo ................................................................... 8
Figure 2.5. Redis Queue model ............................................................................... 9
Figure 2.6. Angular 12 .......................................................................................... 10
Figure 2.7. MEAN Stack model ............................................................................ 11
Figure 3.1. Easy-Web – use case diagram............................................................. 14
Figure 3.2. Use case register account. ................................................................... 16
Figure 3.3. Use case login. .................................................................................... 18
Figure 3.4. Use case view demo login page. ......................................................... 19
Figure 3.5. View demo register page. ................................................................... 20
Figure 3.6 Use case view demo page view detail. ................................................ 22
Figure 3.7. Use case view demo update page. ...................................................... 23
Figure 3.8. View demo creates page create data. .................................................. 24
Figure 3.9. Use case view all websites generated. ................................................ 25
Figure 3.10. Use case download source code generated. ...................................... 26
Figure 3.11. Use case view all tables fetched. ...................................................... 27
Figure 3.12. Use case change table display name. ................................................ 29
Figure 3.13. Use case hide table. ........................................................................... 31

Figure 3.14. Use case register database connection string. ................................... 33
Figure 3.15. View all columns in the table. .......................................................... 35
Figure 3.16. Use case hide column........................................................................ 37
Figure 3.17. ERD Diagram for EasyWeb Web Application. ................................ 39
Figure 3.18. ERD for generating websites. ........................................................... 40
Figure 4.1. System architecture diagram. .............................................................. 41
Figure 4.2. Web application Back-end component diagram. ................................ 42
xiii


Figure 4.3. Web application Angular component diagram. .................................. 43
Figure 4.4. Source code generator component diagram. ....................................... 44
Figure 4.5. Activity diagram for creates a website from an existed database. ...... 45
Figure 4.6. Class diagram for Web Application.................................................... 46
Figure 4.7 Class diagram for web generate. .......................................................... 49
Figure 4.8. Sequence diagram for the login function ............................................ 53
Figure 4.9. Sequence diagram for generate website from an existed database. .... 55
Figure 4.10. Sequence diagram for generate back-end of the web generated....... 56
Figure 4.11. Sequence diagram for generate front-end of the web generated. ..... 57
Figure 4.12. Sequence diagram for the web generator .......................................... 57
Figure 4.15. Screen flow Easy-Web. ..................................................................... 58
Figure 4.16. Homepage Easy-Web screen. ........................................................... 62
Figure 4.17. Homepage Easy-Web Blog screen. .................................................. 64
Figure 4.18. Register database connection string steps 01 screens. ...................... 66
Figure 4.19. Generate website step 02 screen. ...................................................... 68
Figure 4.20. Generate website step 03 screen. ...................................................... 69
Figure 4.21. Generate website step 04 screen. ...................................................... 70
Figure 4.22. Demo Login page screen. ................................................................. 71
Figure 4.23. Demo Register screen. ...................................................................... 72
Figure 4.24. Demo View detail screen. ................................................................. 73

Figure 4.25. Create a new entity screen. ............................................................... 75
Figure 4.13. Database physical diagram for Web Application. ............................ 76
Figure 4.14. Database physical diagram for a website generated. ........................ 78
Figure 5.1. Generated website overview model. ................................................... 82

xiv


Graduation Thesis

CHAPTER 1.

INTRODUCTION.

1.1. Current situation.
Nowadays, with the rapid development of the information technology industry, to keep
up with the demand, technology must change continuously. Especially in the web
application industry, which is growing stronger, but human resources are still limited.
Programmers in general, especially website developers, when to have experience in
creating a website, the same goes for other websites. When doing the same job repeatedly,
can be boring and time-consuming. Because of that, the team decided to build Easy-Web
to build a website automatically. So, the team came up with an idea to shorten the time it
takes to build a website.
With Easy-Web, users can create a web management application automatically by
registering their database in the system. Based on the database that the user has provided,
the system will be able to read the tables, columns, and data contained in that database.
After four steps of configuration, users will be able to get a website with full source code
BE & FE. Based on the source code of the generated website, it will have functions of a
website based on the tables in the user's database, they can download and use it or customize
the code inside.

1.2. Review current solutions.
1.2.1.

Visual Studio’s MVC Web Application Generator.

This is a build-in feature included with Visual Studio 2017 and after. Using MVC,
Entity Framework, and ASP.NET Scaffolding tool, we can create a web application that
provides an interface to an existing database.
• Function:
o Create an MVC Web Application and Data model based on a user’s provided
database.
o Generate a view for each table of the existing database.
• Advantages:
o Since it’s a built-in feature of Visual Studio, users can easily access it.
o There are plenty of detailed instructions and manuals both from Microsoft and
Internet’s author about how to use this.
• Disadvantages:

Chapter 01: Introduction.

1


Graduation Thesis

o The user must have some base knowledge about .NET programming, Entity
Framework command-line tool, and ASP.NET MVC Pattern.
o Only generate MVC web applications.
o Need extra time and effort for fine-tuning and customizing generated Web

Applications to the usable level.
o Hard to deploy.
o Hard to use.

1.3. Proposed solution.
Through the survey of related products, the group draws out the required functions:
●
●
●
●

User-friendly, minimal step and effort to create a website.
No coding involved.
Building an Ecosystem for users of Easy-Web.
Let user customize their website:
○ Choose what table will be displayed and what name it will be called.
○ Choose what columns of a table will display and what name it will be
called.
○ Choose what action (Create - Delete - Update) that the user can perform
in a table.
○ Choose the name, logo, contact info of the website.
● Provide for the user a tool to instantly deploy the generated website to their server
with minimum effort and setting.
● The website created must be responsive to a variety of screens.

1.4.

Scope.

The Easy-Web allows users to choose the databases to use in the system such as SQL

Server, PostgreSQL, and MySQL. The team's current product is aimed at developers who
have been building their websites according to the architecture including Angular, .NET
Core, and SQL Server. Thanks to Easy Web, they can save time building a management
website for themselves, they will focus full time on building the website on the client-side.
Through the construction of Easy Web, the team also added new knowledge to apply
including:
● Knowing basic progress to build an Open-Source product.
● Created, configured, and published the NPM library for reusable purposes.

Chapter 01: Introduction.

2


Graduation Thesis

● Created both client and system UI with Angular, Bootstrap.
● Python Flask
● .NET Core
● Node.js
The Easy-Web’s system has two main parts:
● Easy-Web’s website:
○ Front-end: Powered by Angular, where the user interacts with Easy-Web to
create their website with a pre-existed database.
○ Backend: Powered by .NET Core, Microsoft SQL Server, where handles all
logic which is requested by the front-end.
● The website generates Framework:
○ Client App (Front-end) Generator: Powered by Python. Used to generate the
Angular front-end of the website based on user-provided schema settings and
the database.

○ API Client Generator (Middleware): Powered by Python and Swagger – Code
generation. Used to generate the middleware for back-end and front-end
communication. The generate will base on the generated API’s endpoints.
○ API (Back-end) Generator: Powered by Python. Used to generate the
ASP.NET Core RESTFUL API of the website based on user-provided
schema settings and the database.
○ Website Generate Framework API: Powered by Python, Flask, and Redis.
Used to combine three modules above to generate a fully functional website
base on the user-provided database and settings. It’s also capable of managing
all requested generated jobs sent from the Easy-Web system.

Chapter 01: Introduction.

3


Graduation Thesis

CHAPTER 2.
2.1

TECHNOLOGIES.

Technologies.

● Python Flask
● RQ Worker
● .NET Core 3.1
● Entity Framework Core 5.0 with:
o SQL Server Driver (Microsoft.EntityFrameworkCore.SqlServer 5.0.0)

o MySQL Driver (MySql.Data.MySqlClient 5.0 Preview 4)
o PostgreSQL Driver (Npgsql 5.0.7)
o EF Core Reverse Engineering tool (Scaffold-DbContext Command)
● Framework Angular 12 with an additional library:
o Font Awesome
o Bootstrap 4
o Toast
o Material UI
● Cloudinary third party.
● FileStack third party
● SQL Server
● PostgreSQL
● MySQL
● MEAN Stack.

Chapter 2: Technologies

4


Graduation Thesis

2.2

NET Core.

Figure 2.1. .NET Core logo.

ASP.NET extends the .NET platform with tools and libraries specifically for building
web apps [1]. These are some things that ASP.NET adds to the .NET platform:

● Base framework for processing web requests in C# or F# [1].
● Web-page templating syntax, known as Razor, for building dynamic web pages
using C# [1].
● Libraries for common web patterns, such as Model View Controller (MVC) [1].
● An authentication system that includes libraries, a database, and template pages
for handling logins, including multi-factor authentication and external
authentication with Google, Twitter, and more [1].
● Editor extensions to provide syntax highlighting, code completion, and other
functionality specifically for developing web pages [1].
With the Code First approach, Entity Framework creates database table objects based
on the model the programmer creates to represent application data.
Pros: Very universal, full control over model code, super easy to add - remove - edit
properties without thinking about DB.

Chapter 2: Technologies

5


Graduation Thesis

Cons: Direct structural changes to the DB will be difficult to control with the columns
that will be created on the DB, a bit difficult to combine with an existing DB.

2.3

Python.

Figure 2.2. Python logo.

Python is an interpreted, object-oriented, high-level programming language with
dynamic semantics. Its high-level built-in data structures, combined with dynamic typing
and dynamic binding, make it very attractive for Rapid Application Development, as well
as for use as a scripting or glue language to connect existing components. Python's simple,
easy-to-learn syntax emphasizes readability and therefore reduces the cost of program
maintenance. Python supports modules and packages, which encourages program
modularity and code reuse. The Python interpreter and the extensive standard library are
available in source or binary form without charge for all major platforms and can be freely
distributed [2].
Advantages of Python:
•
•
•
•
•

Easy to Read, Learn and Write. [3]
Interpreted Language. [3]
Dynamically Typed. [3]
Vast Libraries Support.
Portability. [3]

Chapter 2: Technologies

6


Graduation Thesis

Since the website source code generator must do very heavy tasks like file operation,

string operation and execute a shell script, dynamically type, will deploy it as a microservice in Linux based server and not do any heavy database access task, we decided to use
Python to implement the Framework.

2.4

Python Flask.

Figure 2.3. Python Flask logo.

Flask is a micro web framework written in Python. It is classified as a
microframework because it does not require tools or libraries. It has no database abstraction
layer, form validation, or any other components where pre-existing third-party libraries
provide common functions. However, Flask supports extensions that can add application
features as if they were implemented in Flask itself. Extensions exist for object-relational
mappers, form validation, upload handling, various open authentication technologies, and
several common framework-related tools. [4]
Applications that use the Flask framework include Pinterest and LinkedIn [5]. Below
is the main feature of Flask:
• Development server and debugger. [6]

Chapter 2: Technologies

7


Graduation Thesis

•
•
•

•
•
•
•
•
•

2.5

Integrated support for unit testing. [6]
RESTful request dispatching. [6]
Uses Jinja templating. [6]
Support for secure cookies (client-side sessions). [6]
100% WSGI 1.0 compliant. [6]
Unicode-based. [6]
Extensive documentation. [6]
Google App Engine compatibility. [6]
Extensions are available to enhance the features desired. [6]

Microsoft SQL Server 2019.

Figure 2.4. Microsoft SQL Server logo

Microsoft SQL Server is a relational database management system developed by
Microsoft. As a database server, it is a software product with the primary function of storing
and retrieving data as requested by other software applications — which may run either on
the same computer or on another computer across a network (including the Internet).
Microsoft markets at least a dozen different editions of Microsoft SQL Server, aimed at
different audiences and for workloads ranging from small single-machine applications to
large Internet-facing applications with many concurrent users. [7]

Chapter 2: Technologies

8


Graduation Thesis

SQL Server 2019 represents a major step towards making SQL Server a platform that
gives you choices of development languages, data types, on-premises or cloud, and
operating systems by bringing the power of SQL Server to Linux, Linux-based Docker
containers, and Windows. [7]
Advantage:
● Cross-Platform Compatibility. [8]
● Reduction of Total Cost of Ownership. [8]
● Better Statistical and Data Science Analysis Services. [8]
● Better Performance. [8]
● Best-in-Class Security. [8]
● Cross-Platform Visual Studio. [8]
● Linux Support. [8]

2.6

Redis queue (RQ).

Figure 2.5. Redis Queue model

Redis Queue is a python library for queueing jobs for background processing. Since
many hosting services will time out on long HTTP requests, it is best to design APIs to
close requests as quickly as possible. Redis Queue allows us to do this by pushing tasks to

a queue and then to a worker for processing. [9]

Chapter 2: Technologies

9


Graduation Thesis

Using Redis in conjunction with Redis Queue allows you to request input from the
user, return a validation response to the user, and queue up processes in the background.
All without the front-end user having to wait for those processes to complete. Processes
could be anything from Machine Learning models, to duplicating an image to complex
simulations. [9]
Since the CMS Source code generator framework takes too much time to generate a
CMS source code (After some measurement, it’s taken a total of about 1 min and 15 seconds
for each request), we use RQ as a scheduler for the framework.

2.7

Angular Framework.
2.7.1 Overview.

Instead of building and structuring an end-to-end working front-end structure, the
team chose the Angular Framework for the project.

Figure 2.6. Angular 12

Features of Angular Framework:
● Two-way data binding is automatically updated when there are changes in the

model.
● TypeScript - It improved the way of writing JavaScript, the advantage of TypeScript

Chapter 2: Technologies

10


Graduation Thesis

is that it is more specific than JavaScript, which helps front-end data to be properly
bound and easier to map to models.
● SCSS- The improvement in UI layout organization, SCSS has many advantages
compared to normal CSS, one of the differences is allowing users to reusable the
styles contained in other SCSS files, changing the layout between components will
take place in a more convenient and orderly way.
Advantages of Angular Framework:
● Components - divide the features in the project into small parts, components handle
logic independently or can create links to different components.
● Code generation - Angular turns templates into code that's highly optimized for
today's JavaScript virtual machines, giving all the benefits of hand-written code with
the productivity of a framework.
● Templates - quickly create UI views with simple and powerful template syntax.

2.7.2 MEAN Stack.
MEAN Stack is often labeled as “instant noodles” when working on projects. Indeed,
for short-term development projects, the top priority is efficiency in terms of project
completion. And thanks to MEAN Stack, the team has built for Easy-Web a small
community that has the basic functions of a regular blog.

Figure 2.7. MEAN Stack model

Chapter 2: Technologies

11


Graduation Thesis

• MongoDB: This is a document-oriented database - belongs to the NoSQL Database
group. Thanks to the flexibility of MongoDB, it is possible to change the project
during project construction, saving a lot of time, and so the system can scale up later.
• Express.js: It's a web framework for NodeJS, with HTTP and middleware helping
build API strongly.
• NodeJS: It is a language built on top of C++ and JavaScript. With the early of
acquaintance JavaScript, the team can also be convenient in developing a Blog.

Chapter 2: Technologies

12


Graduation Thesis

CHAPTER 3. REQUIREMENT
SPECIFICATION.
3.1 User requirement
The Easy-Web website has the common construct below:
• Unauthorized user: They can try the Easy-Web beta version, with this beta
version they can view the structure of the website interface created in dark mode

and white mode, view the login and registration page UI, try out functions such
as creating a new entity, updating, viewing details, or deleting. Besides they can
also register an account, log in to the system, or view the blog post.
• Authorized user: For this user, there will be more options such as creating a
website in the system:
o Users can manage all their databases on Easy-Web System.
o They can import their database to the system.
o Users can create a website from their imported database.
o Users can customize the website that will be creating:
o Users can configure what table and the name of the database will be
displayed on the website.
o Users can configure what action (Create – Read – Update - Delete) can be
done to a table by the website.
o Users can configure what column of a table and its name that will be
displayed on the website.
o Users can choose what component that will be used for a column of a table
that will be displayed on the website.
o Users can set the name, logo, and contact info for the website.
o Users can redownload the created website of the imported database.

Chapter 03: Requirement specification

13