Building a sell course website with reactjs and springboot

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING A SELL COURSE WEBSITE WITH REACTJS AND SPRINGBOOT LECTURER: Ph.D LE VINH THINH STUDENT: NGUYEN QUYET SINH THONG CHU THANH SKL 008573 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.D 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.D 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 (Name and signature) INSTRUCTOR (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.D Commentary: On content of topic & workload done: Advantage Disadvantage: Recommend for defense or not? Rating type 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.D Commentary: On content of topic & workload done: Advantage Disadvantage: Recommend for defense or not? Rating type 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 Full name of the second student: Chu Thanh Thong Dissertation time: From: ID: 18110354 ID: 18110365 To: Specialized: Software Technology Project name: Build a selling course website using ReactJS and Springboot Instructor: Vinh Thinh Le Ph.D Thesis task: Learn about ReactJS and Springboot Build a website to sell courses Outline of the graduation thesis: TABLE OF CONTENT PREFACE REASON FOR CHOOSING THE TOPIC PURPOSE AND TASKS PERFORMED 2.1 Purpose 2.2 Task RESEARCH 2.4 EXPECTED RESULTS ACHIEVED CHAPTER 1: THEORETICAL BASIS 1.1 JAVA 1.1.1 What is Java language? 1.1.2 Features of the Java language 1.1.3 Advantages of Java 1.1.4 Disadvantages of Java 1.2 JAVASCRIPT LANGUAGE 1.2.1 What is JavaScript? 1.2.2 Advantages of JavaScript 1.2.3 Disadvantages of JavaScript 1.2.4 How JavaScript works 1.3 SPRINGBOOT 1.3.1 What is Spring? 1.3.2 Advantages of Spring 1.3.3 What is Springboot? 1.3.4 Features of Springboot 1.3.5 Advantages of Springboot 1.3.6 Disadvantages of Springboot 1.3.7 Distinguish Springboot, SpringMVC and Spring 1.4 REACTJS 1.4.1 What is ReactJS? 1.4.2 Features of ReactJS 1.4.3 Advantages of ReactJS 1.4.4 Disadvantages of ReactJS 1.5 MYSQL 1.5.1 What is MySQL? 1.5.2 Advantages of MySQL 1.5.3 Disadvantages of MySQL CHAPTER 2: CURRENT STATUS SURVEY 2.1 OVERVIEW 2.2 UDEMY 2.3 F8 2.4 W3 SCHOOLS Image 34: Learning course UI Table 30: Learning course UI description No Name Description Tutorial Bots Instructions on how to use Start/Pause Start and stop the video Volume Adjustment volume Duration video Adjust the time of the video Expand Full screen Overview Detailed course description Q&A Questions and answers Reviews View course reviews Notes Notes on my own course 117 10 Learning Tools Set a learning reminder timer 11 Get Certificate Get a certificate after completing the course 12 Open/Hide Open/ Hide the list of videos in the course 13 Button video Open video to learn 14 Final Exam Take the exam to get the certificate Image 35: Overview course UI 118 Image 36: Note UI Table 31: Note UI description No Name Description Open Note Open the notepad to take notes Edit Note Click to edit note details 119 Delete Note Click to delete the note Cancel Click to cancel writing notes Save note Click to save a note Image 37: Learning Tools UI Table 32: Learning Tools UI description No Name Description Title Enter the event title Content Enter the event content 120 Time Enter the event time Notice By Select notification via email or phone number By Email Enter the event email Save Click to save the event Close Cancel timer event Image 38: Certificate UI Table 33: Certificate UI description No Name Description Download Click to download the certificate 121 CHAPTER 4: INSTALL AND TEST INSTALL - Technology: Springboot, ReactJS - Tool:  MySQL – Database  Visual Studio Code  InterllJ Idea  Postman – Test API  GitHub – Manage source code TEST Table 34: Test Case System ID Test Case Test steps Test data Expected Actual Pass/ Result Result Fail Pass PT- Login -Go to https://st-school- Email: Login As 001 User with client.herokuapp.com/lo thongchut Success expected valid data gin hanh2000 -Enter email and @gmail.c password om - Then press the Sign In Password: button 123456 PT- Login -Go to https://st-school- Email: Show As 002 with client.herokuapp.com/lo thanh@g message: expected invalid gin mail.com Invalid data -Enter email and Password: username password 123456a or @ password 122 Pass - Then press the Sign In button PT- View all - Go to the homepage of Show 003 courses website's the website on the - Click on “Courses” website - https://st-school- the As Pass expected full course client.herokuapp.com/co urses PT- View all - Go to the homepage of Show 004 blog website's the on the website the As Pass expected full blog - Click on “Blog” website https://st-schoolclient.herokuapp.com/bl ogs PT- View - Go to the homepage of Show blog As 005 blog the website details details - Click on “Blog” page - Click on the blog you want to see details https://st-schoolclient.herokuapp.com/bl og/1 123 expected Pass PT- Write - Go to the homepage of Go to my As 006 blog the website blog page - Click on “Write Blog” https://st- https://st-school- school- client.herokuapp.com client.hero /blog/add kuapp.com Pass expected /my-blogs - Enter full title, content, and image for the blog -Press ‘Save’ PT- Buy 007 course the - Log in to the user account when you - Click on “Course” log in https://st-school- Success expected send email notificatio ns /courses - Choose the course to buy - Click on the 'Enroll' button to purchase the course Choose As orders and client.herokuapp.com - Create payment method - Choose “Order” 124 Pass https://st-schoolclient.herokuapp.com /checkout a -Click on “Course” PT- Buy Returns the As 007 course https://st-school- login page expected when client.herokuapp.com/co with you're not urses logged in - Choose the course to buy Pass the message "You need to login to order" - Press the 'Enroll' button to purchase the course PT- Change - Log in to the user -Success: As 008 password account Update expected -Choose “MyProfile” password “Change -Choose password” - Fill and display change message in all the information successful -Failure: - Choose “Change” Show error htps://st-school- message client.herokuapp.com/ac count/user/edit 125 Pass PT- Forgot - Go to the homepage of Email: The system As 009 password the website thongchut sends -Choose “Login” hanh2000 email with @gmail.c a link to om change the -Choose “Forgot password?” Pass an expected password -Enter registered email account - Press “Send” PT- Sign Up 010 - Go to the homepage of Create the website Success - Choose “Sign Up” account a As Pass expected and display - Import full information the - Choose “Register” message “Register Success” PT- Edit - Log in to the admin Edit As 012 Course account successful expected Pass - Choose “Course” - Choose “Edit” - Import full information - Choose “Save” PT- Search Log in to the admin Key word: Show 013 with account “springbo blogs with expected keywords - Choose “Blog” ot” titles found containing 126 As Pass PT- Search 014 with - Choose ‘title’ and enter the what you are looking for 'springboot - Choose button search ' word - Log in to the admin Key word: Content is As “angular” the account keyword not found displayed Pass expected blank - Choose “Blog” - Choose ‘title’ and enter what you are looking for - Choose button search PT015 Comment - Log in to User account Comments - Click on “Blog” that have expected just been https://st-school- added will client.herokuapp.com show /blog - Choose first blog to comment - Fill in the comment box - Choose “Comment” 127 up As Pass CONCLUSION THESE ACHIEVEMENTS  During the implementation of the project, we have basically achieved the goals set out earlier  Understanding Springboot and ReactJS components, structure, and operation Build a website that sells courses applying what you've learned about Springboot and ReactJS ADVANTAGES  Minimalist, accessible interface with support for switching to dark mode  Manipulating the website is simple and fast, anyone can use it  Supports login with Google and Facebook  There are full basic necessary functions so that users can buy and study the course they want, and there is a blog system to share knowledge and comment to exchange with each other in the learning process  The site has tutorials for newbies  Support for users to note down knowledge when learning  Has a learning reminder tool DISADVANTAGES - The UI is not beautiful, no animations - The site does not have a realtime feature - The site does not have a notification feature yet 128 COMPARE WITH REFERENCED WEBSITES Outstanding:  There is support to customize the light / dark mode, the color of the website according to the user's preferences  The site has tutorials for newbies  Support for users to note down knowledge when learning  Has a learning reminder tool Weak:  The site does not have animations  The site does not have a notification feature yet DEVELOPMENT DIRECTION  Develop a virtual assistant that helps guide users to use the website, accompanies users throughout the learning process, helping users to approach in the fastest and most intuitive way  Monitor the customer's learning progress to be able to give corresponding help and reminders  Add theoretical and practical exercises after each lesson and at the end of the course to help learners review and test the knowledge they have learned  Build a chat room for people studying the same course to discuss and exchange knowledge about that course  Add the feature to notify users when there are changes related to their account 129 REFERENCES [1] Spring.io (2022) Springboot [Online] Available: https://spring.io/projects/spring-boot [2] Reactjs.org (2022) Getting started [Online] Available: https://reactjs.org/docs/getting-started.html [3] Redux.js.org (2022) Getting started [Online] Available: https://redux.js.org/ [4] Interviewbit (2022) Angular Vs React: Difference Between Angular and React [Online] Available: https://www.interviewbit.com/blog/angular-vs-react/ [5] Simplilearn (2022) Key Differences Between Spring vs Spring Boot vs Spring MVC[Online] Available: https://www.simplilearn.com/tutorials/spring-boot-tutorial/spring-vs-spring-boot [6] Website Udemy [Online] Available: https://udemy.com/ [7] Website CodeLearn [Online] Available: https://codelearn.io/ [8] Website F8 [Online] Available: https://fullstack.edu.vn/ [9] Website W3School [Online] Available: https://www.w3schools.com/ [10] Website Funix [Online] Available: https://funix.edu.vn/ 130 S K L 0