Source code generator for web application based on the existing database faculty of high quality training graduations thesis of the information technology

INTRODUCTION

Current situation

In today's fast-paced information technology landscape, continuous innovation is essential to meet growing demands, particularly in the expanding web application sector where skilled human resources are limited Website developers often find repetitive tasks tedious and time-consuming, which can hinder productivity To address this challenge, the team developed Easy-Web, a solution designed to automate the website creation process, significantly reducing the time required to build websites.

Easy-Web allows users to effortlessly create a web management application by simply registering their database within the system By analyzing the provided database, Easy-Web can access and interpret the tables, columns, and data it contains After completing four straightforward configuration steps, users will receive a fully functional website along with its complete source code.

The generated website's source code is designed to function based on the user's database tables, allowing users to download, utilize, or customize the code to meet their specific needs.

Review current solutions

1.2.1 Visual Studio’s MVC Web Application Generator

Visual Studio 2017 and later versions come with a built-in feature that allows developers to create web applications using MVC, Entity Framework, and the ASP.NET Scaffolding tool, providing a user-friendly interface for interacting with existing databases.

• 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

Visual Studio offers a built-in feature for generating MVC web applications, making it easily accessible for users with a foundational knowledge of NET programming, the Entity Framework command-line tool, and the ASP.NET MVC Pattern However, users should be prepared to invest additional time and effort into fine-tuning and customizing these generated applications to achieve a usable level Despite its advantages, the deployment process can be challenging, and many find the overall usability to be difficult.

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

● 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.

Scope

Easy-Web offers users the flexibility to select from various databases, including SQL Server, PostgreSQL, and MySQL Designed for developers utilizing architectures like Angular, NET Core, and SQL Server, Easy-Web streamlines the process of creating management websites This allows developers to save valuable time and concentrate entirely on enhancing the client-side of their projects.

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

● Created both client and system UI with Angular, Bootstrap

The Easy-Web’s system has two main parts:

○ 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

○ 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

The API Client Generator, a middleware solution powered by Python and Swagger, facilitates code generation for seamless communication between back-end and front-end systems This tool generates middleware based on the defined API endpoints, ensuring efficient integration and functionality.

○ 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

The Website Generate Framework API, built on Python, Flask, and Redis, seamlessly integrates these three modules to create fully functional websites tailored to user-provided databases and settings Additionally, it efficiently manages all generated job requests from the Easy-Web system.

TECHNOLOGIES

Technologies

● 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

NET Core

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

Direct structural changes to the database can be challenging to manage due to the newly created columns, making integration with an existing database somewhat complicated.

Python

Python is a high-level, interpreted programming language known for its object-oriented features and dynamic semantics Its built-in data structures, dynamic typing, and dynamic binding make it ideal for Rapid Application Development and serve as an effective scripting language for connecting components With a simple and readable syntax, Python reduces program maintenance costs and supports modularity through modules and packages, promoting code reuse The Python interpreter and its extensive standard library are freely available in both source and binary forms for all major platforms, allowing for easy distribution.

• Easy to Read, Learn and Write [3]

To efficiently handle resource-intensive tasks such as file operations, string manipulations, and shell script execution, we have chosen to implement the website source code generator framework in Python This microservice will be deployed on a Linux-based server, ensuring optimal performance without the need for heavy database access.

Python Flask

Flask is a lightweight micro web framework for Python, distinguished by its minimalistic approach that doesn't rely on built-in tools or libraries Lacking a database abstraction layer, form validation, and other components, Flask allows developers to integrate third-party libraries for common functionalities It also supports various extensions that can enhance the application's capabilities, including object-relational mappers, form validation, file upload handling, and open authentication technologies, making it a flexible choice for web development.

• Integrated support for unit testing [6]

• Support for secure cookies (client-side sessions) [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 created by Microsoft, designed primarily for storing and retrieving data as requested by various software applications It operates effectively on both local machines and across networks, including the Internet Microsoft offers multiple editions of SQL Server, catering to diverse audiences and accommodating workloads that range from small, single-machine applications to large-scale, Internet-facing solutions with numerous concurrent users.

SQL Server 2019 marks a significant advancement in providing flexibility for developers by supporting various programming languages, data types, and deployment options, including on-premises and cloud environments This version extends the capabilities of SQL Server to run on Linux, Linux-based Docker containers, and Windows, enhancing its versatility and accessibility for diverse applications.

● Reduction of Total Cost of Ownership [8]

● Better Statistical and Data Science Analysis Services [8]

Redis queue (RQ)

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

Integrating Redis with Redis Queue enables efficient user input handling by providing immediate validation responses while simultaneously queuing background processes This setup ensures that front-end users do not experience delays, allowing for tasks such as running Machine Learning models, duplicating images, or executing complex simulations to occur seamlessly in the background.

The CMS Source code generator framework experiences significant delays, taking approximately 1 minute and 15 seconds to generate CMS source code for each request To optimize this process, we have implemented RQ as a scheduling solution for the framework.

Angular Framework

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

● Two-way data binding is automatically updated when there are changes in the model

TypeScript enhances JavaScript by providing a more specific syntax, which facilitates better binding of front-end data and simplifies the mapping to models This improvement leads to more efficient and manageable code development.

SCSS enhances UI layout organization by offering significant advantages over traditional CSS, such as the ability to reuse styles from other SCSS files This feature allows for a more convenient and orderly adjustment of layouts between components.

● 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

The MEAN Stack is frequently referred to as "instant noodles" for project development due to its emphasis on efficiency and quick completion This approach has enabled the Easy-Web team to create a small community platform that incorporates essential features typical of a standard blog.

MongoDB is a document-oriented NoSQL database that offers remarkable flexibility, allowing for easy adjustments during project development This adaptability not only saves significant time but also facilitates future scalability of the system.

• 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.

REQUIREMENT SPECIFICATION

User requirement

The Easy-Web website has the common construct below:

Unauthorized users can explore the Easy-Web beta version, which showcases the website's interface in both dark and light modes They have the opportunity to experience the login and registration page UI, as well as test features like creating, updating, viewing, and deleting entities Additionally, users can register an account, log into the system, and access blog posts.

Authorized users on the Easy-Web System enjoy enhanced capabilities, including the ability to manage and import their databases seamlessly They can create websites from these imported databases and customize various elements such as the displayed database name and tables Users have control over the actions permitted on each table—Create, Read, Update, or Delete—and can select specific columns to display, along with their names Additionally, they can choose components for each table column, set the website's name, logo, and contact information, and even redownload the website created from their imported database.

System requirement

In Easy-Web, there are two types of actors:

Unauthenticated User The user is not logged in to the website

Authenticated User User registered for an account of the Easy-Web.

Figure 3.1 Easy-Web – use case diagram

Functions Use case description Use case #

The function of “Unauthenticated user”

Login to the system UC_02

View demo page login demo UC_03

View demo page register demo UC_04

View demo page detail table UC_05

View demo page update data in table UC_06

View demo page create data UC_07

The function of “Authenticated user”

View list websites generated UC_08

Re-download source code generated UC_09 View all tables fetched from the database UC_10

Change table display name UC_11

Register database connection string UC_13

View all columns in table UC_14

View detail column in table UC_15

Hide column in table UC_16

Set logo for website generated UC_17 Send source code generated to email UC_18

3.2.4.1 Unauthorized user - Use case description

Figure 3.2 Use case register account

Use Case No UC_01 Use case version 1.0

Use case name Register new account

• Allows an unauthenticated user to create a new account

• Unauthenticated users can log in to the system and use the Easy-Web functionalities

• The system will store new accounts created in the database

• Account doesn’t exist in the system

• Succeeded: Redirect user to the login page

• Failed: Show a failed toast message

Step Actor Action System Response

From the login page, the user clicks on “Don't have an account? Click here!”

The system will navigate the user to the register page

Upon completing all fields on the page and clicking submit, a success toast notification will appear, indicating that the submission was successful After a brief delay of 2 seconds, the system will automatically redirect the user back to the login page.

[Fail]: System will show a failed toast

1 User can change the URL to

“register-account” Navigate users to the register page

Upon completing all fields on the page and clicking submit, a success toast notification will appear, indicating that the action was successful After a brief delay of 2 seconds, the system will automatically redirect the user back to the login page.

[Fail]: System will show a failed toast

No Actor Action System Response

Empty at least on field

The system will show a warning message showing the field name is not valid

• Username: must be the only and have never been registered before

• Terms and conditions: Users must agree with the terms and conditions of the Easy-Web

Use case name Login to the Easy-Web

• Allows an unauthenticated user to log in to the Easy-Web

• The user is unauthenticated to log in to the system with a member role

• Succeeded: Redirect user to the dashboard page

• Failed: Show a warning toast message informing the wrong username or password

From the homepage, the user clicks on login The system will navigate the user to the login page

The user fills in the correct username, password, and clicks on submit

[Success]: User will be redirected to the index dashboard of Easy- Web

[Fail]: System will notify a warning toast message

“login” Navigate the user to the login page

The user fills in the correct user name, password, and clicks on submit.

[Success]: User will be redirected to the index dashboard of Easy-Web [Fail]: System will notify a warning toast message

Empty at least on field

The system will show a warning message showing the field name is not valid

• Username & password: must be correct

Use case name View demo page login demo

• Easy-Web allows unauthorized users to view a demo of the login of the website created

• An unauthenticated user can view the Easy-Web demo login page.

From the homepage, the user clicks on the “Discovery” button on the menu

Redirect the user to the demo login page

Figure 3.5 View demo register page

Use case name View demo page register

• Allows an unauthenticated user to view and use the functional of page demo register

• Succeeded: Redirect user to the page demo register

From the homepage of Easy- Web, the user clicks on the

“Discovery” button on the header

The system will navigate the user to the login page

User clicks on the “Create new account” The system will navigate users to the demo register page

Figure 3.6 Use case view demo page view detail

Use case name View demo page detail table

• Allows an unauthenticated user to view page demo view detail data

• Succeeded: Redirect user to the page demo view

From the homepage of Easy- Web, users click on the

2 User clicks on button “Login”

The system will navigate the user to the index data table

The user clicks on the button

“view detail” on the data row The system will navigate users to the page view demo with sample data displayed

Figure 3.7 Use case view demo update page

Use case name View page demo update data

• Users can view and use the function demo to create an update page

From the homepage of Easy- Web, users click on the

User clicks on the button

“Login” The system will navigate the user to the index data table

The user clicks on the button

“Update” on the data row The system will navigate users to the page update demo with sample data displayed

Figure 3.8 View demo creates page create data

Use case name View page demo creates data in table

• Allows an unauthenticated user to view the demo update data page

• Unauthenticated users can view the UI of the update data page

3.2.4.2 Authorized user - Use case description

Figure 3.9 Use case view all websites generated

Use case name View list websites generated

• After successfully registering the database into Easy-Web, the system will

• Users must be logged in

• The user has successfully created at least one website before

• Succeeded: Users can view a list of information about the websites that have been created from that database and click on the source code link to download the old code

• Failed: System will display the text “Empty data”

Click on the left navigation button name “Statistic”

The system will show page statistics with all the website creation displayed

Figure 3.10 Use case download source code generated

Use case name Download source code generated

• Users after creating a successful website, the system will save the history of their created websites In case the user wants to review the website, information is created

• Users can re-download the source code of the website they have created

• Users must be logged in

• The user has successfully created at least one website before

• Succeeded: Redirect user to the dashboard page

• Failed: Show a warning toast message informing the wrong username or password

Click on the left navigation button name “Statistic”

The system will show page statistics with all the website creation displayed.

Click on the field “Source code URL”, click on the link

The browser will execute the link and download the source code to the user's devices

Use case name View all tables fetched from the database

• After registering the user's database on Easy-Web, the system will fetch the user's database and return all the information about the tables

• Help users check if the system is missing any tables

• Users can configure the information in those tables

• Users must have logged in first

• Users who provide accounts in their database have read permissions

• Account access, port, database type, and database’s URL must be correct

• Succeeded: The data will be displayed as a table with pagination

• Failed: There will be an empty data table

From the page register database, fill in all information required Then submit that information

The system will display the loading icon while the data related to the table and columns are being fetched

[Success]: Then, the system will return all that information and display it in the table

[Fail]: There will be a warning message about the error field

In the status bar, steps to create a website The user clicks the second bar from left to right

Navigate users to the configure table page

• Username & password: must be correct

Figure 3.12 Use case change table display name

Use case name Change table display name

• For the names of the tables in the database, by default, the table names will be

• Change the display name of the management page in the created user's website

• The current data, the row containing the table's information will change the display name immediately

• The user must register the database in the first step successfully

• Succeeded: The data about the table name in the current user line will update according to the user input data

• Failed: System will show a warning message “Something wrong happened”

Each row of data will represent information about a table in the database The user clicks on the line to be renamed, then clicks the "Edit" button

A dialog pop-up displays the current name of the table

[Success]: Close dialog pop and show success toast message Then change the select display name of row data

[Fail]: There will be a warning message about an error

1 Empty field display name There will be a warning toast message shown

2 Display name changed is the type of number

There will be a warning toast message shown

• The display name of the table must be a character and is a camel case

• The display name of the table can’t be empty

Figure 3.13 Use case hide table

Use case name Hide table

• Hide the table so it won’t be generated

• Database of users registered successfully

• Succeeded: All the data in a row will be hidden

• Failed: Show a warning toast message

Users choose the data table row, then click on the “Hide” button

Each data in that row will be stroked

Navigate the user to the login page

The user fills in the correct username, password, and clicks on submit

[Success]: User will be redirected to the index dashboard of Easy- Web

Empty at least on field The system will show a warning message showing the field name is not valid

• Users can’t hide all the tables, show at least 5 tables

Figure 3.14 Use case register database connection string

Use case name Register database connection string

This operation enables users to register their databases, allowing the system to access information regarding the tables and columns within those databases To ensure compatibility, the existing database must be formatted in one of the three database types supported by Easy-Web.

• Users have to fill all the fields required

• Users have to provide account access to their database with at least read actions

• Succeeded: There will be a success toast message and then navigate users to the next step with all the data displayed in the table

• Failed: Show a warning toast message inform

1 From navigation on the left, click on “Create new website”

The system will navigate users to the create new website page

In the form below create a website status bar The user fills all the fields on the page, then clicks on the submit button

[Success]: Users will be redirected to the index dashboard of Easy- Web

On the status bar, click on step

Navigate the user to the login page

The user fills in the correct, password and clicks on submit

[Success]: Users will be redirected to the index dashboard of Easy- Web

Empty field or wrong database URL string

The system will show a warning message “User has not provided a connection link to Easy-Web”

2 Empty field or wrong username

The system will show a warning message “Authentication failed”

Empty field or wrong database port number The system will show a warning message “Can’t find the port of the database”

4 The wrong type of database connection

The system will show a warning message “Authentication failed”

• The database should be one of the following: SQL Server, PostgreSQL, MySQL

• Account access to the database has the right to read

Figure 3.15 View all columns in the table

Use case name View all columns in table

• In each table, there will be many different attributes, each attribute represents a data type

• The users can prescribe a list of properties, and whose calculations in that panel are, check if the Easy-Web reads the data in the right way

• Database of users registered successfully

• Succeeded: View all the columns corresponding to its table

• Failed: Show empty field data

After finishing the config table on step02, then click on the submit button

Navigate user to “Config column screen”

2 Click on the drop-down list Show a list of all tables

3 Select one table Display all the columns of that data on the table below

1 On the status bar, click on step

3 Select one table Display all the columns of that data on the table below

1 Table have no column inside The table displays the text of empty data

Figure 3.16 Use case hide column

Use case name Hide column in table

• In each table, there will be many different attributes, each attribute represents a data type Users who don’t want to use that column can hide it

• Hide column in the table, so data won’t display on the website generated

• The properties hidden in that column will change to true

• Succeeded: The properties hidden on that table will be true

• Failed: There will be a warning toast message

After finishing the config table on step02, then click on the submit button

Users choose a column to hide by clicking check on its row

Then click on the button

[Success]: The properties hidden will be true and there will be a success toast shown

[Fail]: There will be a warning toast message

1 On the status bar, click on step

Display all the columns of that data on the table below

1 User click hide column with its hidden properties is false

There will be a warning toast message

• Users can’t hide all the columns that belong to that table

Clear, modern interface, convenient, and easy for users

The user's data is permanently saved in the database and is secure

• The system is used and maintained once every 2 weeks

• If the system has any heavy problems, it will be maintained immediately

• If the system has an error, which must be small

Service is always available, 24/7 When users need to use the website, they are always ready

High security by using ASP.Net Core Identity service for authentication & authorization, and Entity Framework to access or communicate with the database

Built with a microservice model, easy to manage, scaling, deploy and maintain

At this moment, Easy-Web is just available as a desktop website

Figure 3.17 ERD Diagram for EasyWeb Web Application

Figure 3.18 ERD for generating websites.

SYSTEM DESIGN AND IMPLEMENTATION

System Architecture

A web application is essential for handling user requests to create websites, facilitating the configuration and management of necessary information to ensure the system operates effectively.

Component Diagram

Figure 4.2 Web application Back-end component diagram

Figure 4.3 Web application Angular component diagram

Figure 4.4 Source code generator component diagram.

Activity Diagram

4.3.1 The process to create a website from an existed database

Figure 4.5 Activity diagram for creates a website from an existed database.

Class Diagram

4.4.1 Class diagram for Easy-Web’s System

Figure 4.6 Class diagram for Web Application

4.4.1.1 Class diagram description for class User

Table 20 Description for class User

Property Type Access level Description

Id string public User’s GUID, generated by ASP.Net

Identity Service FirstName string public First name of the user

LastName string public Last name of the user

Dob datetime public Birthday of the user

UserName string public Username of the user

Password string public The password of the user email string public Email of the user

PhoneNumber string public Phone number of the user

4.4.1.2 Class diagram description for class BaseEntity

Table 21 Description for class BaseEntity

Id int public Act as identity property of an object

CreatedDate datetime public The date of the record that was created in the database

ModifiedDate datetime public The last date of the record was updated in the database

IsDeleted bool public Determine that the record was deleted or not, used for soft delete

4.4.1.3 Class diagram description for class UserDatabaseInfo

Table 22 Description for class UserDatabaseInfo

Guid string public Registered database’s GUID, set by system

DbType Enum public Type of the DBMS

Server string public The physical address of the registered database server UserName string public Username to access the registered database Password string public Password to access the registered database

InitialCatalog string public The name of the Catalog that the user wants to use to generate the website

ServerPort The port that the Database server exposed to the internet to access

4.4.1.4 Class diagram description for class WebGeneratedHistory

Table 23 Description for class WebGenetatedHistory

UserDbInfoId string public GUID of a registered database

GUID of the generated Front-end of the generated website, set by Source code generator framework

GUID of the generated Back end of the generated website, set by Source code generator framework

The download link for generated Back-end’s source code, set by Source code generator framework DownloadLinkClientApp string public

The download link for generated Front-end’s source code, set by Source code generator framework

Status string public Status of one source code generation session

4.4.2 Class diagram use for Source code generates framework system

Figure 4.7 Class diagram for web generate

4.4.2.1 Class diagram description for class BaseEntity

Table 24 Description for class BaseEntity

Id int public Act as identity property of an object

CreatedDate datetime public The date of the record that was created in the database

The config of the user to show/hide the table in the user interface of the generated website Set by the user through Easy- Web’s Web application

IsDeleted bool public Determine that the record was deleted or not, used for soft delete

4.4.2.2 Class diagram description for class SystemMasterConfig

Table 25 Description for class SystemMasterConfig

ConfigName string public The name of the config, use for the generator

ConfigValue string public The value of the config, use for the generator

4.4.2.3 Class diagram description for class SystemTableConfig

Table 26 Description for class SystemTableConfig

Name string public The name of the table in database level

The name of the table that the user wants to display in the user interface of the generated website Set by the user through Easy-Web’s Web application

The name of the generated back-end’s model class that mapping for its table at the database level Set by Source code generator framework

The user configuration determines the actions that can be performed on the table within the user interface of the generated website, and this setup is facilitated through Easy-Web’s web application.

4.4.2.4 Class diagram description for class SystemTableColumnConfig

Table 27 Description for class SystemTableColumnConfig

TableId int public Id of the belonged table

Name string public The name of the column in database level

The name of the column that the user wants to display in the user interface of the generated website Set by the user through Easy-Web’s Web application

DataType string public The data type of the column in database level

The data type of the column that the user wants to display in the user interface of the generated website Set by the user through Easy-Web’s Web application

The name of the property of the generated back-end’s model class that mapping for its table’s column at the database level Set by Source code generator framework

OrdinalPosition int public The position of the column in the table, count from 1, in database level

ColumnDefault string public The default value of the column

Length int public The maximum length of the data can be store in the column

The web component that the user wants to use represents the column in the generated

4.4.2.5 Class diagram description for class SystemTableForeignKeyConfig

Table 28 Description for class SystemTableForeignKeyConfig

FkName string public The name of the foreign key in database level

SourceTableName string public The name of the Source table of the foreign key

SourceColumnName string public The name of the Source table’s column of the foreign key SourceColumn

OrdinalPos int public The ordinal of the Source table’s column of the foreign key, count from 1 RefrencedTable

Name string public The name of the Target table of the foreign key RefrencedColumn

Name string public The name of the Target table’s column of the foreign key RefrencedColumn

OrdinalPos int public The ordinal of the Target table’s column of the foreign key, count from 1

The name of the Target table’s column will be mapped instead of the column declare on the foreign key Set by the user through Easy-Web’s Web application

In Easy-Web's web application, the ordinal position of the Target table's column is utilized for mapping instead of the column specified in the foreign key, with the counting starting from 1.

Sequence Diagram

Figure 4.8 Sequence diagram for the login function

Figure 4.8 Sequence diagram for Register function

4.5.3 Generate a website from an existed database

Figure 4.9 Sequence diagram for generate website from an existed database

4.5.4 Back-end source code generator

Figure 4.10 Sequence diagram for generate back-end of the web generated

4.5.5 Front-end source code generator

Figure 4.11 Sequence diagram for generate front-end of the web generated

4.5.6 Website source code generator framework.

User interface design

Figure 4.13 Screen flow Easy-Web

The SCA_001 page offers users a demonstration of how to create new data, showcasing the user interface, forms, and elements involved in the data creation process Meanwhile, the SCA_002 page provides an update data demonstration, allowing users to explore the UI, forms, and elements necessary for updating existing data.

The SCA_003 Management table data page provides a comprehensive overview of the data within any specified table and serves as the central component of the created website, linking to all other actions.

SCA_004 Page register demo On this page, users can view the UI, form, or element contained And learn about the flow of the register page

SCA_005 Page login demo On this page, users can view the UI, form, or element contained And learn about the flow of the login page

SCA_006 Page demo detail On this page, users can view the UI, form, or element contained And learn about the flow of viewing detailed data

SCA_008 Home page As the default page on the website, users when accessing the system will encounter this page first This page will display information about the website

SCA_009 Login screen Before users want to use the functions in Easy-Web, they must go through this step

SCA_010 Statistic screen This screen will display a list of websites that have been created by the user

SCA_011 Preview website This screen will update information about the user data being updated in the website config steps

SCA_012 Create new website The screen displays the status bar of creating the user's website, with details of each step shown below

SCA_013 Config table The screen displays the data of the tables in the database and actions such as search, view detail, edit

SCA_014 Register database connection string

This page enables users to input information for database registration The SCA_015 Config column screen showcases the data for each table's columns, along with options to search, view details, and edit the information.

SCA_016 Config website information The final step of website creation has filled all information

4.6.1.1 System - UI for the unauthenticated user

UI design is a crucial yet time-intensive aspect of project implementation, as it provides web developers with a clear understanding of the project's functionalities through effective prototyping.

Figure 4.14 Homepage Easy-Web screen

No Object name Format Reference Action Note

1 Menu item ul, li Navigate to target pages

2 Login Button Navigate to the Login page

3 Explore Button Go to the Easy-Web

Button Go to page login

4.6.1.1.2 SCA_017 Homepage system – Easy-Web Blog

Figure 4.15 Homepage Easy-Web Blog screen

1 Login Button Navigate to the

Mat-card, mat-card- title

3 The image represents for post

Go to view detail post

4 Title of post Mat-card- title

5 Name of author Tag a Fetched from API

Go to view detailed author

7 Title of post Mat-card- title

9 Name of author Tag a Fetched from API

Go to view detailed author

10 Date post Span Fetched from API

4.6.1.1.3 SCA_014 Register database connection string

Figure 4.16 Register database connection string steps 01 screens

Table 32 Table register database screen connection

1 Search bar Input type text

2 User avatar Image Fetched from API

Open dialog menu actions button

3 Icon Icon Navigate to the component page

4 Title of component Span Navigate to the component page

5 Title preview Span View only

6 Website status Span View only

H2 Display when data in part04 has

Tag a Display when data in part04 has been filled

9 Dialog of actions Button Show dialog of actions

11 Schema name Text After step

12 Show title of each step

Text Switch to that step

13 Icon information Icon Show tooltip display information about each step

14 Show select step Button Switch to the specific step

15 Title of part H3 View only

17 Input data Input type text

18 Drop down list show list of the database

Show list of the database type

19 Button action Button Reset data

Figure 4.17 Generate website step 02 screen

Table 33 Configure table screen description

1 Search bar Input type text

2 Button actions Button Remove data from the database

3 Button actions Button Submit data and navigate to step 02

4 Select data row Input type check

5 View detail data in row

Button Show dialog detail data of specific entities

1 Drop down list Select Show list all tables in the database

2 Button edit Button Edit column information

4.6.1.1.6 SCA_016 Fill out Information & Preview

Table 35 Generate website step 04 screen description

1 Image avatar Image Select and show an avatar for their business

2 Field label Text View only

3 Input data Input type text

Take data input from the user

4 Data description Text area Take data from users

Select authentication or not authentication

Send all data to the database

Figure 4.20 Demo Login page screen

Table 36 Demo Login page screen

1 Avatar of client Image View only

3 Greeting display Text Check from the current hour

4 Input text Input type text

Tag a Send all data to the database

Table 37 Demo Register UI screen description

1 Logo website Image View only

2 Button login Button Navigate to the login page

5 Field input text Input type text

6 Check to agree with terms and

Type check Check/ uncheck conditions

4.6.1.1.9 SCA_003 View demo table management screen

Figure 4.22 Demo View detail screen

Table 38 View detail UI screen description

1 Button menu Button Open page menu management

2 Button user profile Button Show dialog actions below

3 Button switch Button Switch mode UI to information detailed user information

5 Button logout Button Logout of system

6 Title of the table being used

7 Input search Input type text

Search for data in the table and display it in the table below

8 Button search Button Search for data in the table and display it in the table below

Button Navigate user to page create data

10 Title header of the table

11 The image represents in data

12 Display data in the table

Button Navigate to page view detail data

14 The image represents in data

Button Navigate to page view detail data

4.6.1.1.10 SCA_001 Create data demo screen

Figure 4.23 Create a new entity screen

Table 39 Create a new entity screen description

1 Title of page H2 View only

2 Image preview Image Display image user upload

3 Choose file Input type file

Upload image and display image on the image preview

4 Field label name Text View only

5 Field data input Input type text

7 Drop down list Select Choose an item in the list

8 Button submit data Button Submit data and save it to the database.

Database Design

Figure 4.24 Database physical diagram for Web Application

Table 40 Description for tables of Web Application

AspNetRoleClaims Auto-generated by ASP.NET Core Identity service Used for authentication

AspNetRoles Auto-generated by ASP.NET Core Identity service Used for authentication

AspNetUserClaims Auto-generated by ASP.NET Core Identity service Used for authentication

AspNetUserLogins Auto-generated by ASP.NET Core Identity service Used for authentication

AspNetUserRoles Auto-generated by ASP.NET Core Identity service Used for authentication

AspNetUsers Auto-generated by ASP.NET Core Identity service Used for authentication

AspNetUserTokens Auto-generated by ASP.NET Core Identity service Used for authentication

_EFMigrationHistory Auto-generated by Entity Framework Core Used for database migration

UserDatabaseInfos Use to store user’s registered database

WebGeneratedHistory Use to store the result of the user-generated website

Besides the pre-existed tables of the user’s database, Easy-Web will add these new tables to the user’s database

Figure 4.25 Database physical diagram for a website generated

Table 41 Description for tables of Website generated