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

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

FACULTY FOR HIGH QUALITY TRAINING

GRADUATION THESIS

SOURCE CODE GENERATOR FOR WEB

APPLICATION BASED ON THE EXISTING

DATABASE

Advisor: NGUYEN DUC KHOAN, MSc

Course: 2017

iv

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

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

vi

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

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

viii

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

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

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

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

xii

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

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

xiv

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

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

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

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

● Created both client and system UI with Angular, Bootstrap

● 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

● 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

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

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]

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 micro-service 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]

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

2.5 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]

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]

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

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

● 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

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

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

3.2 System requirement

3.2.1 Actor of system

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

Table 2 Actor description

Unauthenticated User The user is not logged in to the website

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

3.2.2 Use case diagram

Figure 3.1 Easy-Web – use case diagram

3.2.3 Use case specification

Table 3 Use case specification

Functions Use case description Use case #

The function of “Unauthenticated user”

Register new account UC_01 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 Hide table UC_12 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 Use case description

3.2.4.1 Unauthorized user - Use case description

Figure 3.2 Use case register account

Table 4 Use case uc_01

USE CASE – UC_01

Use Case No UC_01 Use case version 1.0

Use case name Register new account

• Succeeded: Redirect user to the login page

• Failed: Show a failed toast message

Main Success Scenario:

1

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

[Fail]: System will show a failed toast

Alternative Scenario:

1 User can change the URL to

“register-account” Navigate users to the register page

[Fail]: System will show a failed toast

Exceptions:

1

Empty at least on field

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

Relationships:

Business Rules:

• 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

Figure 3.3 Use case login

Table 5 Use case uc_02

USE CASE – UC_02

Use Case No UC_02 Use case version 1.0

Use case name Login to the Easy-Web

• Succeeded: Redirect user to the dashboard page

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

Main Success Scenario:

2

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

[Success]: User will be redirected

to the index dashboard of Web

Easy-[Fail]: System will notify a warning toast message

Alternative Scenario:

1 User can change the URL to

“login” Navigate the user to the login page

2

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

Exceptions:

1

Empty at least on field

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

Relationships: N/A

Business Rules:

• Username & password: must be correct

Table 6 Use case uc_03

USE CASE – UC_03

Use Case No UC_03 Use case version 1.0

Use case name View demo page login demo

Post conditions: N/A

Main Success Scenario:

1

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

Table 7 Use case uc_04

USE CASE – UC_04

Use Case No UC_04 Use case version 1.0

Use case name View demo page register

• Succeeded: Redirect user to the page demo register

Main Success Scenario:

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

Table 8 Use case uc_05

USE CASE – UC_05

Use Case No UC_05 Use case version 1.0

Use case name View demo page detail table

• Succeeded: Redirect user to the page demo view

Main Success Scenario:

The system will navigate the user

to the login page

2 User clicks on button “Login”

The system will navigate the user

to the index data table

3

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

Table 9 Use case uc_06

USE CASE – UC_06

Use Case No UC_06 Use case version 1.0

Use case name View page demo update data

Actor:

• Unauthenticated user

Summary:

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

Main Success Scenario:

The system will navigate the user

to the login page

2

User clicks on the button

“Login” The system will navigate the user

to the index data table

3

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

Table 10 Use case uc_07

USE CASE – UC_07

Use Case No UC_07 Use case version 1.0

Use case name View page demo creates data in table

Actor:

• Unauthenticated user

Post conditions: N/A

Main Success Scenario: N/A

Alternative Scenario: N/A

Exceptions: N/A

Relationships: N/A

Business Rules: N/A

3.2.4.2 Authorized user - Use case description

Figure 3.9 Use case view all websites generated

Table 11 Use case uc_08

USE CASE – UC_08

Use Case No UC_08 Use case version 1.0

Use case name View list websites generated

• Users must be logged in

• The user has successfully created at least one website before

Post conditions:

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

Main Success Scenario:

Alternative Scenario: N/A

Exceptions: N/A

Relationships: N/A

Business Rules: N/A

Figure 3.10 Use case download source code generated

Table 12 Use case uc_09

USE CASE – UC_09

Use Case No UC_09 Use case version 1.0

Use case name Download source code generated

Actor:

• Unauthenticated user

• Users must be logged in

• The user has successfully created at least one website before

Post conditions:

• Succeeded: Redirect user to the dashboard page

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

Main Success Scenario:

Table 13 Use case uc_10

USE CASE – UC_10

Use Case No UC_10 Use case version 1.0

Use case name View all tables fetched from the database

Actor:

• Authenticated user

Summary:

• 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

Goal:

• Help users check if the system is missing any tables

• Users can configure the information in those tables

Preconditions:

• 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

Post conditions:

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

• Failed: There will be an empty data table

Main Success Scenario:

1

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