MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING A SELL COURSE WEBSITE USING REACTJS AND SPRINGBOOT LECTURER: Ph.D LE VINH THINH STUDENT: NGUYEN QUYET SINH THONG CHU THANH SKL 009499 Ho Chi Minh City, July 2022 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY GRADUATION THESIS BUILDING A SELL COURSE WEBSITE WITH REACTJS AND SPRINGBOOT Instructor: Vinh Thinh Le, Ph. Student Name: Quyet Sinh Nguyen ID: 18110354 Student Name: Chu Thanh Thong ID: 18110365 Ho Chi Minh City, June 2022 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY GRADUATION THESIS BUILDING A SELL COURSE WEBSITE USING REACTJS AND SPRINGBOOT Instructor: Vinh Thinh Le, Ph. Student Name: Quyet Sinh Nguyen ID: 18110354 Student Name: Chu Thanh Thong ID: 18110365 Ho Chi Minh City, June 2022 HCM University of Technology and Education SOCIALIST REPUBLIC OF VIETNAM FACULTY OF INFORMATION TECHNOLOGY Independence – Freedom - Happiness _______________ ________________ GRADUATION THESIS TASK Student name: Quyet Sinh Nguyen ID: 18110354 Student name: Chu Thanh Thong ID: 18110365 Major: Information Technology Project title: Build a selling course website using ReactJS and Springboot Content: Theory: -Learn the Java programming language -Learn the Java Script programming language -Learn about ReactJS technology -Learn about Springboot technology Practice: - Build a website with some basic features as follows: Purchase courses and learn online Write and read blogs Admin's management Statistics Execution time: from February 22, 2021, to June 30, 2021 Signature of student:. Signature of student:.
Ho Chi Minh, June 2022 HEAD OF INFORMATION TECHNOLOGY INSTRUCTOR (Name and signature) (Name and signature) HCM University of Technology and Education SOCIALIST REPUBLIC OF VIETNAM FACULTY OF INFORMATION TECHNOLOGY Independence – Freedom - Happiness _______________ ________________ ASSESSMENT FORM OF INSTRUCTOR Student name: Quyet Sinh Nguyen ID: 18110354 Student name: Chu Thanh Thong ID: 18110365 Major: Information Technology. Project title: Build a selling course website using ReactJS and Springboot Name of instructor: Vinh Thinh Le Ph. On content of topic & workload done:. Recommend for defense or not? 5.
Mark: Ho Chi Minh, June 2022 Instructor HCM University of Technology and Education SOCIALIST REPUBLIC OF VIETNAM FACULTY OF INFORMATION TECHNOLOGY Independence – Freedom - Happiness _______________ ________________ ASSESSMENT FORM OF REVIEWER Student name: Quyet Sinh Nguyen ID: 18110354 Student name: Chu Thanh Thong ID: 18110365 Major: Information Technology. Project title: Build a selling course website using ReactJS and Springboot Name of reviewer: Xuan Phung Huynh Ph. On content of topic & workload done:. Recommend for defense or not? 5.
Mark: Ho Chi Minh, June 2022 Reviewer HCMC University of Technology and Education Faculty of Information Technology OUTLINE OF THE GRADUATION THESIS Full name of the first student: Quyet Sinh Nguyen ID: 18110354 Full name of the second student: Chu Thanh Thong ID: 18110365 Dissertation time: From: To: Specialized: Software Technology Project name: Build a selling course website using ReactJS and Springboot Instructor: Vinh Thinh Le Ph. Learn about ReactJS and Springboot 2. Build a website to sell courses Outline of the graduation thesis: TABLE OF CONTENT PREFACE 1. REASON FOR CHOOSING THE TOPIC 2.
PURPOSE AND TASKS PERFORMED 2. EXPECTED RESULTS ACHIEVED CHAPTER 1: THEORETICAL BASIS 1. What is Java language? 1. Features of the Java language 1.
Advantages of Java 1. Disadvantages of Java 1. What is JavaScript? 1. Advantages of JavaScript 1.
Disadvantages of JavaScript 1. How JavaScript works 1. What is Spring? 1. Advantages of Spring 1.
What is Springboot? 1. Features of Springboot 1. Advantages of Springboot 1.6 Disadvantages of Springboot 1. Distinguish Springboot, SpringMVC and Spring 1.
What is ReactJS? 1. Features of ReactJS 1. Advantages of ReactJS 1. Disadvantages of ReactJS 1.
What is MySQL? 1. Advantages of MySQL 1. Disadvantages of MySQL CHAPTER 2: CURRENT STATUS SURVEY 2. FUNIX CHAPTER 3: SYSTEM ANALYSIS AND DESIGN 3.
Client side feature 3. Admin side feature 3. USE CASE DIAGRAM AND USE CASE DESCRIPTION 3. Use case diagram 3.
Use case description 3. Login, Register UI 3.3 Customer UI CHAPTER 4: INSTALL AND TEST 4. COMPARE WITH REFERENCED WEBSITES 5. DEVELOPMENT DIRECTION REFERENCES IMPLEMENTATION PLAN Number Time Task Note Ho Chi Minh City, Jan 2022 Outline writer Quyet Sinh Nguyen Opinion of instructor (Name and signature) ACKNOWLEDGMENTS With our deepest gratitude, we would like to thank Mr.Vinh Thinh Le, the lecturer at the Faculty of Information Technology, Ho Chi Minh City University of Technology and Education, who enthusiastically guided and gave suggestions during the process of making this thesis.
Although he was quite busy, he did not hesitate to guide and give us suggestions. His comments helped us a lot in orienting and completing our thesis. However, because of the limited professional knowledge and the lack of practical experience, the content of the report cannot avoid errors, we would like to receive suggestions, guidance, and criticism from the instructors and reviewers to make the software better. Thesis implementation group Quyet Sinh Nguyen Chu Thanh Thong SUMARY With the development of the Internet, the development of online teaching solutions has become a joy for many people with limited time.
The development of the internet along with that applied to learning became much easier. So we can study anywhere, anytime according to our needs. Almost everyone learns to take advantage of their free time, to arrange their study to become the most convenient and effective way. Accordingly, online learning has gradually become an inevitable trend in all fields and all levels.
For that reason, we decided to build an online teaching website to provide everyone with an effective, reliable learning environment, providing the best learning experience. The website has several functions: Customer site: Login Register Account Management Buy and learn the course Read and write knowledge-sharing blogs Comments on the course/blog course assessment Create notes Book a class schedule Admin site: Login Order management User management Course Management Blog management Statistics The tools are used: Frontend: ReactJS Backend: Springboot Database: MySQL TABLE OF CONTENT PREFACE. REASON FOR CHOOSING THE TOPIC. PURPOSE AND TASKS PERFORMED.
EXPECTED RESULTS ACHIEVED. 2 CHAPTER 1: THEORETICAL BASIS. 3 What is Java language?. 3 Features of the Java language.
3 Advantages of Java. 5 Disadvantages of Java. 6 What is JavaScript?. 6 Advantages of JavaScript.
6 Disadvantages of JavaScript. 6 How JavaScript works. What is Spring?. Advantages of Spring?.
What is Springboot?. Features of Springboot. Advantages of Springboot. Disadvantage of Springboot.
Distinguish Springboot, SpringMVC and Spring. What is ReactJS?. Features of ReactJS. Advantages of ReactJS.
Disadvantages of ReactJS. Difference between Angular and React. What is MySQL?. Advantages of MySQL.
Disadvantages of MySQL. 19 CHAPTER 2: CURRENT STATUS SURVEY. 24 CHAPTER 3: SYSTEM ANALYSIS AND DESIGN. 26 Client side feature.
26 Admin side feature. 31 USE CASE DIAGRAM AND USE CASE DESCRIPTION. 34 Use case diagram. 34 Use case description.
87 Login, Register UI. 100 CHAPTER 4: INSTALL AND TEST. COMPARE WITH REFERENCED WEBSITES. 130 LIST OF TABLE Table 1 : Difference between Springboot and Spring.
11 Table 2 : Difference between Springboot and SpringMVC. 13 Table 3 : Difference between Angular and React. 17 Table 4 : Client side feature. 26 Table 5 : Admin side feature.
31 Table 6 : Login UI description. 87 Table 7 : UI Sign up description. 88 Table 8 : Dashboard UI description. 89 Table 9 : Order management UI description.
91 Table 10 : Course management UI description. 92 Table 11 : Add new course UI description. 94 Table 12 : Edit course UI description. 95 Table 13 : Video management UI description.
97 Table 14 : Blog management UI description. 97 Table 15 : Customer management UI description. 99 Table 16 : Customer homepage UI description. 102 Table 17 : Course list UI description.
104 Table 18 : Course details UI description. 107 Table 19 : Course purchase description. 108 Table 20 : List of purchased courses UI description. 108 Table 21 : Edit personal account information UI description.
109 Table 22 : Password change description. 110 Table 23 : Change avatar UI description. 111 Table 24 : Blog UI description. 111 Table 25 : Detail blog UI description.
113 Table 26 : Write blog UI description. 114 Table 27 : My Blog UI description. 115 Table 28 : Access error UI description. 115 Table 29 : Unlock/ Lock Blog UI description.
116 Table 30 : Learning course UI description. 117 Table 31 : Note UI description. 119 Table 32 : Learning Tools UI description. 120 Table 33 : Certificate UI description.
121 Table 34 : Test Case System. 122 LIST OF IMAGE Image 1 : Udemy website. 21 Image 3 : W3 Schools website. 22 Image 4 : Codelearn website.
23 Image 5 : Funix website. 24 Image 6 : Use case diagram. 34 Image 7 : Class diagram. 66 Image 8 : ERD Diagram.
85 Image 9 : Database Model. 86 Image 10 : Login UI. 87 Image 11 : Sign up UI. 88 Image 12 : Dashboard UI.
89 Image 13 : Order management UI. 91 Image 14 : Course management UI. 92 Image 15 : Add new course UI. 93 Image 16 : Edit course UI.
95 Image 17 : Video management UI. 96 Image 18 : Blog management UI. 97 Image 19 : Customer management UI. 98 Image 20 : Customer homepage UI.
102 Image 21 : Course list UI. 104 Image 22 : Course details UI. 106 Image 23 : Course purchase UI. 107 Image 24 : List of purchased courses UI.
108 Image 25 : Edit personal account information UI. 109 Image 26 : Password change UI. 110 Image 27 : Change avatar UI. 110 Image 28 : Blog UI.
111 Image 29 : Detail blog UI. 112 Image 30 : Write blog UI. 113 Image 31 : My Blog UI. 114 Image 32 : Access error UI.
115 Image 33 : Unlock/ Lock Blog UI. 116 Image 34 : Learning course UI. 117 Image 35 : Overview course UI. 118 Image 36 : Note UI.
119 Image 37 : Learning Tools UI. 120 Image 38 : Certificate UI. REASON FOR CHOOSING THE TOPIC With the development of the Internet and modern technology, the educational process is increasingly developing, especially online education models. In many developed countries in the world such as the US, Korea, and Japan.
the form of E- Learning education is increasingly developing. In Vietnam, in the context of the whole country towards the 4.0 revolution, the application of modern technology in education is increasingly focused. Smart learning models through the online environment are strongly developed. Students only need to register as a member via devices connected to the Internet to be able to study anywhere.
No need to go to class every day, wait for the teacher, or have to arrange a time to travel to class. Online learning is no longer confined to college and university students, but also extends to all levels from elementary to junior high, and high school, at professional training centers, and leaders. Learning becomes simple and effective when you know how to use technology devices and a virtual Internet environment to absorb real knowledge. For that reason, my group decided to choose the topic of building a website to sell courses.