Tạo Mã Nguồn Ứng Dụng Web Dựa Trên Cơ Sở Dữ Liệu Hiện Có

Chuyên khảo phân tích Source code generator for web application based on the existing database, đánh giá các khía cạnh quan trọng, đề xuất hướng nghiên cứu tiếp theo.

• Tác giả: Phan Son
• Người hướng dẫn: MSc. Nguyen Duc Khoan
• Trường học: Ho Chi Minh City University of Technology and Education
• Chuyên ngành: Information Technology
• Đề tài: Source Code Generator For Web Application Based On The Existing Database
• Loại tài liệu: Graduation Thesis
• Năm xuất bản: 2021
• Địa điểm: Ho Chi Minh City

Mục lục chi tiết

• ACKNOWLEDGEMENTS
• TABLE OF CONTENTS
• 1. CHAPTER 1: Review current solutions
• 1.1. Visual Studio’s MVC Web Application Generator
• 1.2. Microsoft SQL Server 2019
• 1.3. Actor of system
• 1.4. Use case diagram
• 1.5. Use case specification
• 1.6. Use case description
• 1.7. Unauthorized user - Use case description
• 1.8. Authorized user - Use case description
• 1.9. Non-functional requirement
• 1.10. Entity Relationship diagram
• 1.11. SYSTEM DESIGN AND IMPLEMENTATION
• 1.12. Source code generator framework
• 1.13. The process to create a website from an existed database
• 1.14. Class diagram for Easy-Web’s System
• 1.15. Class diagram description for class User
• 1.16. Class diagram description for class BaseEntity
• 1.17. Class diagram description for class UserDatabaseInfo
• 1.18. Class diagram description for class WebGeneratedHistory
• 1.19. Class diagram use for Source code generates framework system
• 1.20. Class diagram description for class SystemMasterConfig
• 1.21. Class diagram description for class SystemTableConfig
• 1.22. Class diagram description for class SystemTableColumnConfig
• 1.23. Class diagram description for class SystemTableForeignKeyConfig
• 1.24. Generate a website from an existed database
• 1.25. Back-end source code generator
• 1.26. Front-end source code generator
• 1.27. Website source code generator framework
• 1.28. User interface design
• 1.29. System - UI for the unauthenticated user
• 1.30. SCA_017 Homepage system – Easy-Web Blog
• 1.31. SCA_014 Register database connection string
• 1.32. SCA_13 Configure tables
• 1.33. SCA_015 Configure Columns
• 1.34. SCA_016 Fill out Information & Preview
• 1.35. SCA_005 Login page
• 1.36. SCA_004 Register page
• 1.37. SCA_003 View demo table management screen
• 1.38. SCA_001 Create data demo screen
• 1.39. Database Physical Diagram
• 1.40. Software development environment
• 1.41. Source code management
• 1.42. Easy-Web web user interface
• 1.43. Website source code generates framework
• 1.44. User ’s Generated website
• 1.45. List of stages of testing
• 1.46. List of test types
• 1.47. Items to be tested
• 1.48. Features to be tested
• 1.49. Test case of check login function
• 1.50. Test case register function
• 1.51. Test case register database connection string
• 1.52. Test case config table
• 1.53. Test case config column
• 2. CHAPTER 2: Technologies
• 2.1. Python Flask
• 2.2. RQ Worker
• 2.3. .NET Core
• 2.4. Entity Framework Core 5.0 with:
• 2.4.1. SQL Server Driver (Microsoft.0)
• 2.4.2. MySQL Driver (MySql.0 Preview 4)
• 2.4.3. PostgreSQL Driver (Npgsql 5.7)
• 2.4.4. EF Core Reverse Engineering tool (Scaffold-DbContext Command)
• 2.5. Framework Angular 12 with an additional library:
• 2.5.1. Font Awesome
• 2.5.2. Bootstrap 4
• 2.5.3. Toast
• 2.5.4. Material UI
• 2.6. Cloudinary third party
• 2.7. FileStack third party
• 2.8. SQL Server
• 2.9. PostgreSQL
• 2.10. MySQL
• 2.11. MEAN Stack
• 2.12. .NET Core logo
• 2.13. Python Flask logo
• 2.14. Microsoft SQL Server 2019
• 2.15. Redis Queue model
• LIST OF ABBREVIATIONS
• LIST OF TABLES
• LIST OF FIGURES

Tóm tắt

I. Giới Thiệu Tạo Ứng Dụng Web Từ Database Giải Pháp Nhanh

Trong bối cảnh công nghệ thông tin phát triển nhanh chóng, nhu cầu tạo ứng dụng web ngày càng tăng cao. Tuy nhiên, nguồn lực lập trình viên còn hạn chế. Việc xây dựng website lặp đi lặp lại có thể gây nhàm chán và tốn thời gian. Dự án Easy-Web ra đời nhằm giải quyết vấn đề này, giúp người dùng tự động tạo ứng dụng web từ cơ sở dữ liệu hiện có. Người dùng chỉ cần đăng ký database vào hệ thống, hệ thống sẽ phân tích và sinh mã nguồn web từ database. Sau bốn bước cấu hình, người dùng sẽ nhận được một website hoàn chỉnh với đầy đủ mã nguồn backend và frontend. Mã nguồn này có thể được tùy chỉnh và sử dụng theo nhu cầu. "Với Easy-Web, người dùng có thể tạo một ứng dụng web quản lý tự động bằng cách đăng ký cơ sở dữ liệu của họ trong hệ thống."

1.1. Tổng Quan Về Ứng Dụng Web Tự Động Từ Database

Easy-Web là một giải pháp tạo ứng dụng web tự động từ database. Nó cho phép người dùng tạo ra các ứng dụng web quản lý dữ liệu một cách nhanh chóng và dễ dàng. Hệ thống đọc các bảng, cột và dữ liệu từ database do người dùng cung cấp. Sau đó, nó tạo ra một website với đầy đủ chức năng dựa trên cấu trúc của database. Người dùng có thể tải xuống và tùy chỉnh mã nguồn của website này. Ứng dụng web tự động từ database giúp tiết kiệm thời gian và công sức cho các nhà phát triển.

1.2. Lợi Ích Của Việc Tạo Ứng Dụng Web Từ Database

Việc tạo ứng dụng web từ database mang lại nhiều lợi ích. Thứ nhất, nó giúp tiết kiệm thời gian và công sức phát triển. Thay vì phải viết code từ đầu, người dùng có thể sử dụng các công cụ để sinh mã nguồn web từ database. Thứ hai, nó giảm thiểu rủi ro sai sót trong quá trình lập trình. Các công cụ code generator ứng dụng web từ database thường được kiểm tra kỹ lưỡng và đảm bảo tính chính xác. Thứ ba, nó cho phép người dùng tập trung vào các khía cạnh quan trọng hơn của ứng dụng, chẳng hạn như thiết kế giao diện và trải nghiệm người dùng.

II. Thách Thức Khó Khăn Khi Phát Triển Web Từ Database Thủ Công

Phát triển ứng dụng web từ database theo cách thủ công thường gặp nhiều khó khăn. Quá trình này đòi hỏi kiến thức chuyên sâu về lập trình web, quản lý database và các công nghệ liên quan. Việc viết code cho từng chức năng, từ CRUD application từ database đến tạo API từ database, tốn rất nhiều thời gian và công sức. Hơn nữa, việc duy trì và cập nhật code cũng là một thách thức lớn. Các lỗi có thể xảy ra trong quá trình lập trình và cần được sửa chữa kịp thời. "Khi thực hiện cùng một công việc lặp đi lặp lại, có thể gây nhàm chán và tốn thời gian."

2.1. Yêu Cầu Kỹ Năng Cao Khi Lập Trình Web Từ Database

Để phát triển một ứng dụng web từ database, lập trình viên cần có kiến thức vững chắc về các ngôn ngữ lập trình như ASP.NET, Python, và các framework như Angular, React. Họ cũng cần hiểu rõ về cấu trúc database, các truy vấn SQL và các giao thức truyền dữ liệu. Ngoài ra, kinh nghiệm làm việc với các công cụ phát triển web và quản lý database cũng rất quan trọng. Việc thiếu hụt kỹ năng có thể dẫn đến các lỗi trong quá trình lập trình và ảnh hưởng đến hiệu suất của ứng dụng.

2.2. Tốn Thời Gian Và Công Sức Cho Các Tác Vụ Lặp Đi Lặp Lại

Trong quá trình phát triển ứng dụng web từ database, có nhiều tác vụ lặp đi lặp lại, chẳng hạn như tạo form từ database, tạo trang web từ database, và tạo báo cáo từ database. Việc thực hiện các tác vụ này theo cách thủ công tốn rất nhiều thời gian và công sức. Các lập trình viên phải viết code cho từng form, từng trang web và từng báo cáo. Điều này không chỉ làm chậm tiến độ dự án mà còn làm tăng nguy cơ sai sót. Do đó, việc tự động tạo ứng dụng web từ database là một giải pháp hiệu quả để giảm thiểu thời gian và công sức cho các tác vụ lặp đi lặp lại.

III. Giải Pháp Sử Dụng Code Generator Tạo Web Từ Database Nhanh

Để giải quyết các thách thức trên, giải pháp code generator ứng dụng web từ database nổi lên như một công cụ hữu hiệu. Các công cụ này cho phép người dùng chuyển đổi database thành ứng dụng web một cách nhanh chóng và dễ dàng. Người dùng chỉ cần cung cấp thông tin về database, các công cụ sẽ tự động sinh mã nguồn web từ database. Mã nguồn này có thể được tùy chỉnh và sử dụng để xây dựng các ứng dụng web phức tạp. "Với Easy-Web, người dùng có thể tạo một ứng dụng web quản lý tự động bằng cách đăng ký cơ sở dữ liệu của họ trong hệ thống."

3.1. Ưu Điểm Của Code Generator Ứng Dụng Web Từ Database

Các công cụ tạo ứng dụng web từ database mang lại nhiều ưu điểm. Thứ nhất, chúng giúp tiết kiệm thời gian và công sức phát triển. Thứ hai, chúng giảm thiểu rủi ro sai sót trong quá trình lập trình. Thứ ba, chúng cho phép người dùng tập trung vào các khía cạnh quan trọng hơn của ứng dụng. Thứ tư, chúng giúp tạo ra các ứng dụng web có tính nhất quán và dễ bảo trì. Cuối cùng, chúng cho phép người dùng tạo ứng dụng web không cần code hoặc với rất ít code.

3.2. Các Tính Năng Quan Trọng Của Code Generator Web Từ Database

Một code generator ứng dụng web từ database tốt cần có các tính năng sau: Khả năng kết nối với nhiều loại database khác nhau (SQL Server, MySQL, PostgreSQL,...). Khả năng phân tích cấu trúc database và tạo ra các model tương ứng. Khả năng tạo API từ database để truy cập dữ liệu. Khả năng tạo frontend từ database với giao diện người dùng thân thiện. Khả năng tùy chỉnh mã nguồn được tạo ra. Khả năng tạo admin panel từ database để quản lý dữ liệu.

IV. Easy Web Nền Tảng Tạo Ứng Dụng Web Từ Database Đơn Giản

Easy-Web là một nền tảng tạo ứng dụng web từ database mã nguồn mở, cho phép người dùng tạo ứng dụng web nhanh chóng bằng cách đăng ký database của họ vào hệ thống. Hệ thống sẽ phân tích các thực thể trong database và hướng dẫn người dùng qua các bước cấu hình. Cuối cùng, Easy-Web sẽ trả về một website hoàn chỉnh với mã nguồn đầy đủ. Người dùng có thể sử dụng mã nguồn này dựa trên hướng dẫn của Easy-Web. Easy-Web hướng đến các nhà phát triển sử dụng Angular, .NET Core và SQL Server, giúp họ tiết kiệm thời gian xây dựng website quản lý.

4.1. Quy Trình Tạo Ứng Dụng Web Với Easy Web

Quy trình tạo ứng dụng web với Easy-Web bao gồm các bước sau: Đăng ký database vào hệ thống. Hệ thống phân tích cấu trúc database. Người dùng cấu hình các bảng và cột. Hệ thống sinh mã nguồn web từ database. Người dùng tải xuống và tùy chỉnh mã nguồn. Mã nguồn được tạo ra bao gồm cả backend và frontend, với đầy đủ các chức năng CRUD (Create, Read, Update, Delete).

4.2. Các Công Nghệ Sử Dụng Trong Easy Web

Easy-Web sử dụng các công nghệ sau: Angular cho frontend, .NET Core cho backend, Microsoft SQL Server cho database, Python Flask cho website generate framework, và Redis Queue cho xử lý các tác vụ nền. Việc sử dụng các công nghệ này giúp Easy-Web có hiệu suất cao, khả năng mở rộng tốt và dễ dàng bảo trì. Easy-Web cũng hỗ trợ nhiều loại database khác nhau, bao gồm SQL Server, PostgreSQL và MySQL.

V. Ứng Dụng Thực Tế Tạo Web Quản Lý Cho Doanh Nghiệp Từ DB

Việc tạo ứng dụng web cho doanh nghiệp từ database có thể được ứng dụng trong nhiều lĩnh vực khác nhau. Ví dụ, có thể tạo ứng dụng web cho quản lý kho, tạo ứng dụng web cho nhân sự, tạo ứng dụng web cho kế toán, hoặc tạo ứng dụng web cho CRM. Các ứng dụng này giúp doanh nghiệp quản lý dữ liệu một cách hiệu quả hơn, cải thiện quy trình làm việc và tăng năng suất. "Dựa trên cơ sở dữ liệu mà người dùng đã cung cấp, hệ thống sẽ có thể đọc các bảng, cột và dữ liệu chứa trong cơ sở dữ liệu đó."

5.1. Ví Dụ Về Ứng Dụng Web Quản Lý Khách Hàng CRM

Một ứng dụng web quản lý khách hàng (CRM) có thể được tạo từ database chứa thông tin về khách hàng, sản phẩm, đơn hàng và các tương tác với khách hàng. Ứng dụng này cho phép nhân viên bán hàng và marketing theo dõi thông tin khách hàng, quản lý các chiến dịch marketing, và tạo báo cáo về doanh số bán hàng. Việc tạo ứng dụng web cho CRM giúp doanh nghiệp cải thiện quan hệ với khách hàng và tăng doanh thu.

5.2. Ví Dụ Về Ứng Dụng Web Quản Lý Kho Hàng

Một ứng dụng web quản lý kho hàng có thể được tạo từ database chứa thông tin về sản phẩm, số lượng tồn kho, vị trí lưu trữ và các giao dịch nhập xuất kho. Ứng dụng này cho phép nhân viên kho theo dõi số lượng tồn kho, quản lý các đơn hàng nhập xuất kho, và tạo báo cáo về tình hình kho hàng. Việc tạo ứng dụng web cho kho giúp doanh nghiệp quản lý kho hàng một cách hiệu quả hơn và giảm thiểu thất thoát.

VI. Kết Luận Tương Lai Của Phát Triển Web Từ Database Tự Động

Việc tạo ứng dụng web từ database tự động là một xu hướng tất yếu trong tương lai. Các công cụ low-code platform web application database và no-code platform web application database ngày càng trở nên phổ biến, cho phép người dùng tạo ứng dụng web dễ dàng mà không cần kiến thức chuyên sâu về lập trình. Xu hướng này sẽ giúp giảm chi phí phát triển ứng dụng web, tăng tốc độ phát triển và cho phép người dùng tập trung vào các khía cạnh quan trọng hơn của ứng dụng. "Thông qua việc xây dựng Easy Web, nhóm cũng đã bổ sung kiến thức mới để áp dụng bao gồm: Biết tiến trình cơ bản để xây dựng một sản phẩm Open-Source."

6.1. Sự Phát Triển Của Các Nền Tảng Low Code Và No Code

Các nền tảng low-code và no-code đang phát triển mạnh mẽ, cho phép người dùng tạo ứng dụng web kéo thả một cách dễ dàng. Các nền tảng này cung cấp các công cụ trực quan để thiết kế giao diện người dùng, xây dựng logic nghiệp vụ và kết nối với các database. Việc sử dụng các nền tảng này giúp giảm đáng kể thời gian và chi phí phát triển ứng dụng web.

6.2. Tầm Quan Trọng Của Tùy Biến Và Mở Rộng Trong Tương Lai

Trong tương lai, khả năng tùy biến và mở rộng sẽ trở nên quan trọng hơn đối với các công cụ tạo ứng dụng web từ database. Người dùng cần có khả năng tùy chỉnh giao diện người dùng, thêm các chức năng mới và tích hợp với các hệ thống khác. Các công cụ tạo ứng dụng web tùy chỉnh sẽ giúp người dùng đáp ứng các nhu cầu cụ thể của doanh nghiệp và tạo ra các ứng dụng web độc đáo.

Trích đoạn nội dung tài liệu

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING CAPSTONE PROJECT INFORMATION TECHNOLOGY SOURCE  CODE GENERATOR FOR WEB APPLICATION BASED ON THE EXISTING DATABASE LECTURERMSc. NGUYEN DUC KHOAN 6TUDENT PHAN SON HUYNH QUOC HOANG VUONG S K L0 0 8 0 9 0 Ho Chi Minh City, July 2021 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 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -------- Ho Chi Minh City, July 20, 2021 GRADUATION PROJECT ASSIGNMENT Student name: PHAN SON Student ID: 17110216 Student name: HUYNH QUOC HOANG VUONG Student ID: 17110256 Major: INFORMATION TECHNOLOGY Class: 17110CLST Advisor: MSc. NGUYEN DUC KHOAN.

Phone number: Date of assignment: 15/03/2021 Date of submission: 19/07/2021 1. Project title: SOURCE CODE GENERATOR FOR WEB APPLICATION BASED ON THE EXISTING DATABASE. Initial materials provided by the advisor: Implementation using, ASP.1, Python Flask, SQL Server, MEAN Stack. Content of the project: Easy Web is an Open-Source website that allows users to register their database.

From there, the system will analyze the entities in the user's database. Go through the steps of registering the user's database and adjusting the entities in the Easy Web system. Finally, Easy Web will return to the user. From there the end-user can use it based on the instructions that Easy Web.

Final product: Web application that includes both front-end and back-end. CHAIR OF THE PROGRAM ADVISOR (Sign with full name) (Sign with full name) i THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -------- Ho Chi Minh City, July 20, 2021 GRADUATION PROJECT ASSIGNMENT Student name: PHAN SON Student ID: 17110216 Student name: HUYNH QUOC HOANG VUONG Student ID: 17110256 Major: INFORMATION TECHNOLOGY Class: 17110CLST Project title: SOURCE CODE GENERATOR FOR WEB APPLICATION BASED ON THE EXISTING DATABASE. Advisor: NGUYEN DUC KHOAN, MSc. Content of the project: …………………………………………………………………………………… …………………………………………………………………………………… 2.

Approval for oral defense? (Approved or denied) …………………………………………………………………………………… …………………………………………………………………………………… 5.in words: …………………………………………… Ho Chi Minh City, July 2021 ADVISOR (Sign with full name) ii THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -------- Ho Chi Minh City, July 20, 2021 PRE-DEFENSE EVALUATION SHEET Student name: PHAN SON Student ID: 17110216 Student name: HUYNH QUOC HOANG VUONG Student ID: 17110256 Major: INFORMATION TECHNOLOGY Class: 17110CLST Project title: SOURCE CODE GENERATOR FOR WEB APPLICATION BASED ON THE EXISTING DATABASE. Name of Reviewer: NGUYEN DUC KHOAN, MSc. Content of the project:. Approval for oral defense? (Approved or denied) .) Ho Chi Minh City, July 2021.

REVIEWER (Sign with full name) iii 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. iv TABLE OF CONTENTS CHAPTER 1. Review current solutions……………………………………………….

Visual Studio’s MVC Web Application Generator.5 Microsoft SQL Server 2019…………………………………………. Actor of system. Use case diagram. Use case specification.

Use case description. Unauthorized user - Use case description. Authorized user - Use case description. Non-functional requirement.

Entity Relationship diagram. SYSTEM DESIGN AND IMPLEMENTATION. Source code generator framework. The process to create a website from an existed database.

Class diagram for Easy-Web’s System. Class diagram description for class User. Class diagram description for class BaseEntity. Class diagram description for class UserDatabaseInfo.

Class diagram description for class WebGeneratedHistory. Class diagram use for Source code generates framework system. Class diagram description for class BaseEntity. Class diagram description for class SystemMasterConfig.

Class diagram description for class SystemTableConfig. Class diagram description for class SystemTableColumnConfig. Class diagram description for class SystemTableForeignKeyConfig. Generate a website from an existed database.

Back-end source code generator. Front-end source code generator. Website source code generator framework. User interface design………………………………………………….

System - UI for the unauthenticated user. SCA_017 Homepage system – Easy-Web Blog. SCA_014 Register database connection string. SCA_13 Configure tables.

SCA_015 Configure Columns. SCA_016 Fill out Information & Preview. SCA_005 Login page. SCA_004 Register page.

SCA_003 View demo table management screen. SCA_001 Create data demo screen. Database Physical Diagram. Software development environment………………………………….

Source code management……………………………………………. Easy-Web web user interface. Website source code generates framework. User’s Generated website.

List of stages of testing. List of test types. Items to be tested. Features to be tested.

Test case of check login function. Test case register function. Test case register database connection string. Test case config table.

Test case config column. 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. Use case specification. Use case uc_01.

Use case uc_02. Use case uc_03. Use case uc_04. Use case uc_05.

Use case uc_06. Use case uc_07. Use case uc_08. Use case uc_09.

Use case uc_10. Use case uc_11. Use case uc_12. Use case uc_13.

Use case uc_14. Use case uc_16. Description for class User. Description for class BaseEntity.

Description for class UserDatabaseInfo. Description for class WebGenetatedHistory. Description for class BaseEntity. Description for class SystemMasterConfig.

Description for class SystemTableConfig. Description for class SystemTableColumnConfig. Description for class SystemTableForeignKeyConfig. Screen flow description.

Homepage screen description. Blog screen description. Table register database screen connection. Configure table screen description.

Config columns screen. Generate website step 04 screen description. Demo Login page screen. Demo Register UI screen description.

View detail UI screen description. Create a new entity screen description. Description for tables of Web Application. Description for tables of Website generated.

Software development environment. Test case check login. Test case register function. Test case register database.

Test case config table. Test case config column. Team member tasks assignment and working schedule. 92 xii LIST OF FIGURES Figure 2.NET Core logo.

Python Flask logo. Microsoft SQL Server logo. Redis Queue model. MEAN Stack model.

Easy-Web – use case diagram. Use case register account. Use case login. Use case view demo login page.

View demo register page.6 Use case view demo page view detail. Use case view demo update page. View demo creates page create data. Use case view all websites generated.

Use case download source code generated. Use case view all tables fetched. Use case change table display name. Use case hide table.

Use case register database connection string. View all columns in the table. Use case hide column. ERD Diagram for EasyWeb Web Application.

ERD for generating websites. System architecture diagram. Web application Back-end component diagram. Web application Angular component diagram.

Source code generator component diagram. Activity diagram for creates a website from an existed database. Class diagram for Web Application.7 Class diagram for web generate. Sequence diagram for the login function.

Sequence diagram for generate website from an existed database. Sequence diagram for generate back-end of the web generated. Sequence diagram for generate front-end of the web generated. Sequence diagram for the web generator.

Screen flow Easy-Web. Homepage Easy-Web screen. Homepage Easy-Web Blog screen. Register database connection string steps 01 screens.

Generate website step 02 screen. Generate website step 03 screen. Generate website step 04 screen. Demo Login page screen.

Demo Register screen. Demo View detail screen. Create a new entity screen. Database physical diagram for Web Application.

Database physical diagram for a website generated. Generated website overview model. 82 xiv Graduation Thesis CHAPTER 1. 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. Review current solutions. 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. 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.

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. 2 Graduation Thesis ● Created both client and system UI with Angular, Bootstrap.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 .