Building a sell course website using reactjs and springboot

MINISTRY OF EDUCATION AND TRAININGHO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING A SELL COURSE WEBSITE USING REACTJS AND SPRING

PURPOSE AND TASKS PERFORMED

RESEARCH METHODS

1.1.2 Features of the Java language

1.3.7 Distinguish Springboot, SpringMVC and Spring

CHAPTER 3: SYSTEM ANALYSIS AND DESIGN

3.2 USE CASE DIAGRAM AND USE CASE DESCRIPTION

Ho Chi Minh City, Jan 2022

Outline writer Quyet Sinh Nguyen

We extend our heartfelt thanks to Mr Vinh Thinh Le, a dedicated lecturer at the Faculty of Information Technology, Ho Chi Minh City University of Technology and Education Despite his busy schedule, he generously provided guidance and valuable suggestions throughout the thesis process His insightful comments were instrumental in shaping and finalizing our work.

Due to limited professional knowledge and practical experience, the report may contain errors We welcome suggestions, guidance, and constructive criticism from instructors and reviewers to enhance the software.

Thesis implementation groupQuyet Sinh NguyenChu Thanh Thong

With the development of the Internet, the development of online teaching solutions has become a joy for many people with limited time.

The evolution of the internet has significantly simplified the learning process, allowing individuals to study anytime and anywhere based on their needs Many people are now utilizing their free time to optimize their study methods for maximum convenience and effectiveness As a result, online learning has emerged as an essential trend across various fields and educational 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:

 Buy and learn the course

 Read and write knowledge-sharing blogs

 Comments on the course/blog

Order management User management Course Management Blog management Statistics

1 REASON FOR CHOOSING THE TOPIC 1

Features of the Java language 3

1.3.7 Distinguish Springboot, SpringMVC and Spring 11

1.4.5 Difference between Angular and React 17

CHAPTER 3: SYSTEM ANALYSIS AND DESIGN 26

USE CASE DIAGRAM AND USE CASE DESCRIPTION 34

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 7 : UI Sign up description 88

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 20 : List of purchased courses UI description 108

Table 23 : Change avatar 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 32 : Learning Tools UI description 120

Image 15 : Add new course UI 93

The user interface for course management includes features such as purchasing courses, viewing a list of purchased courses, and editing personal account information Users can easily change their passwords and avatars, as well as access the blog section, which includes detailed blog views and options to write and manage personal blogs Additionally, the interface provides error notifications for access issues and options to unlock or lock blogs For learning, users can navigate through course overviews, take notes, utilize learning tools, and obtain certificates upon completion.

1 REASON FOR CHOOSING THE TOPIC

The rise of the Internet and modern technology has significantly transformed the educational landscape, particularly through the growth of online education models Countries like the US, Korea, and Japan are leading in E-Learning advancements, while Vietnam is embracing these changes as part of its 4.0 revolution The focus on integrating modern technology in education has led to the emergence of smart learning models that allow students to access courses from anywhere with an Internet connection This shift means that education is no longer limited to college and university students; it now encompasses all levels, including elementary, junior high, and high school, as well as professional training centers By effectively utilizing technology and the virtual environment, learning has become simpler and more efficient.

My group has chosen to create a website dedicated to selling online courses across various fields This platform aims to facilitate convenient, fast, and effective learning for students.

2 PURPOSE AND TASKS PERFORMED 2.1 Purpose

- Apply knowledge to build a website that sells courses.

- Learn about how to build a website that sells online courses through materials on the internet.

- Develop a website to sell online courses.

We first learned from the theory with materials about Springboot and ReactJS in online classes as well as video tutorials on Youtube.

 Implement the code, small and basic exercises to get used to the new way of programming.

 Refer to websites that sell courses on the internet to apply in their work.

 Planning to build a website to sell courses.

During the website implementation, the team will consult online resources for any questions, while instructors strive to enhance the website despite its limitations.

THEORETICAL BASIS

Advantages of Spring?

Advantages of Springboot

1.3.7 Distinguish Springboot, SpringMVC and Spring

The evolution of the internet has significantly simplified the learning process, allowing individuals to study anytime and anywhere based on their needs Many people utilize their free time to optimize their study schedules for maximum convenience and effectiveness As a result, online learning has emerged as an essential trend across various fields and educational levels.

The user interface for course management includes various features such as the course purchase UI, which allows users to buy courses, and a list of purchased courses for easy access Users can edit their personal account information, change their password, and update their avatar through dedicated UIs The blog section features a UI for viewing details, writing new posts, and managing personal blogs, including options to unlock or lock content Additionally, the learning course UI provides an overview of courses, note-taking capabilities, and access to learning tools, culminating in a certificate UI for course completion.

The rise of the Internet and modern technology has significantly transformed the educational landscape, particularly through the growth of online education models Countries like the US, Korea, and Japan are leading in E-Learning advancements, while Vietnam is embracing these changes as part of its 4.0 revolution The focus on integrating modern technology in education has led to the emergence of smart learning models that allow students to access courses from anywhere with an Internet connection This shift has expanded online learning beyond just college and university students to include elementary, junior high, and high school levels, as well as professional training centers By effectively utilizing technology and the virtual environment, learning has become simpler and more efficient for all.

My group has chosen to create a website dedicated to selling online courses across various fields, aiming to offer students a convenient, fast, and effective learning experience.

In theory: Understand the components, structure, and operation of Springboot and ReactJS.

About practice: Build a website selling courses using Springboot technology combined with ReactJS.

CHAPTER 1: THEORETICAL BASIS JAVA LANGUAGE

 Java is one of the object-oriented programming languages It is used in the development of software, websites, games, or applications on mobile devices.

 Java was started by James Gosling and colleagues at Sun Microsystem in

1991 Java was originally created for the purpose of writing software for household products and was named Oak.

 Java was released in 1994, and in 2010 was acquired by Oracle from Sun Microsystem.

 Java was created with the criterion of “Write Once, Execute Anywhere”

(Write Once, Run Anywhere – WORA) Software programs written in Java can run on any different platform through an execution environment provided the appropriate execution environment supports that platform.

Features of the Java language

Sun Microsystems engineers aimed to develop a cross-platform programming language that was easy to learn and familiar to a wide range of programmers, leading them to incorporate the syntax of C and C++.

Java prioritizes safety and ease of use by omitting pointer manipulation Additionally, features such as action overloading, goto statements, and structures like structs and unions are not included in the language.

Language setting Java belongs to the translation language category More precisely, Java is a kind of a compiled language As follows

When code is written, a java file is generated by the system Compiling the source code transforms it into bytecode, which the Java Virtual Machine then translates into machine code upon receiving a request to execute the program.

Java supports the multipath Process (multi thread) to execute work concurrently At the same time, it provides a synchronous solution between processes (priority to use solution ).

When creating objects in Java, the JRE automatically allocates space for objects on the heap.

Java's memory management simplifies the programming process by automatically handling memory allocation and deallocation The Java garbage collector monitors allocated resources and reclaims memory when there are no remaining references to a particular memory area This automatic memory management feature allows developers to focus on coding without the need to manually manage memory.

Java Language setting has strict requirements on data types Data must be explicitly declared.

Do not use pointers and operations with pointers.

Java enforces strict checks on arrays and strings to prevent technical overflow, ensuring that access does not exceed their size Memory management, including allocation and deallocation, is handled automatically.

The mechanism that makes error handling and error recovery easier.

 Easy to learn, easy to read

 Most cross-platform since it was designed for it and Sun makes JRE and JDK for most platforms

 Everything is passed by reference except value types, by default

 Easy to create multiple threads and you can declare functions to be synchronized so that only one thread can be in a thread (IIRC)

 Various free IDEs available on all platforms, such as Eclipse

 Uses more memory than c++ or c#

In Java, to return multiple values from a function, you typically use an array to hold the values or define a class that encapsulates the values and return an instance of that class, as Java does not support pointers or reference parameters like C#.

 Requires JRE to be installed to run the program, downloads a few hours on dial-up…

 JavaScript is a website programming language, integrated and embedded in HTML to make the website more vivid JavaScript allows better control over web page behavior than using HTML alone.

 JavaScript is a programming language that is supported on almost all browsers such as Firefox, Chrome, … even browsers on mobile devices.

 You don't need a compiler because the web browser can compile it with HTML.

 It is easier to learn than other programming languages.

 Errors are easier to spot and therefore easier to fix.

 It can be mounted on some web page element or web page event such as through mouse click or hover.

 JS works cross-browser, platform, etc.

 You can use JavaScript to check the input and minimize manual checking when accessing through the database.

 It helps the website interact better with visitors.

 It's faster and lighter than other programming languages.

 Can be used to execute malicious code on the user's computer.

 Sometimes not supported on all browsers.

 JS code snippets are large.

 May be deployed differently from device to device resulting in inconsistency.

JavaScript is typically integrated directly into a website or linked through an external js file As a client-side language, it is downloaded to the user's device for processing, rather than being executed on the server and sending the results back to the visitor.

 Note that popular web browsers also support whether or not the user wants to disable JavaScript That's why you should know how your website would work without JavaScript.

 Spring framework is an open source Java Platform, a lightweight solution for Java Enterprise With Spring Framework developers can create highly performance, testable and reusable code.

The Spring Framework offers essential features for developing Java applications and is particularly effective for building web applications on the Java EE platform Its primary aim is to simplify J2EE application development while encouraging improved programming practices through a POJO-based model.

Distinguish Springboot, SpringMVC and Spring

Disadvantages of ReactJS

We extend our heartfelt thanks to Mr Vinh Thinh Le, a dedicated lecturer at the Faculty of Information Technology, Ho Chi Minh City University of Technology and Education Despite his busy schedule, he generously provided guidance and valuable suggestions throughout the thesis development process His insightful comments were instrumental in shaping and finalizing our work.

The evolution of the internet has significantly simplified the learning process, allowing individuals to study anytime and anywhere based on their needs Many people utilize their free time to optimize their study schedules for maximum convenience and effectiveness As a result, online learning has emerged as an essential trend across various fields and educational levels.

The user interface for course management includes features such as purchasing courses, viewing a list of purchased courses, and editing personal account information Users can easily change their passwords and avatars, as well as access the blog section, which includes detailed blog views and options to write and manage personal blogs Additionally, the platform provides error handling for access issues and options to unlock or lock blogs The learning experience is enhanced with a dedicated learning course UI, an overview of courses, note-taking capabilities, and access to various learning tools Finally, users can obtain certificates upon course completion.

The rise of the Internet and modern technology has significantly transformed the educational landscape, particularly through the growth of online education models Countries like the US, Korea, and Japan are leading in E-Learning advancements, while Vietnam is embracing these changes as part of its 4.0 revolution The focus on integrating modern technology in education has led to the emergence of smart learning models that allow students to access courses from anywhere with an Internet connection This shift means that attending physical classes is no longer necessary, as learners can engage in education at all levels—from elementary to high school and professional training—simply by utilizing technology and the virtual environment to acquire knowledge effectively.

My group has chosen to create a website dedicated to selling online courses across various fields This platform aims to facilitate convenient, fast, and effective learning for students.

Java prioritizes safety by omitting pointer manipulation, making it easier to use Additionally, features such as action overloading, goto statements, and structures like structs and unions have been removed from the language.

When code is written, a java file is generated, which is then compiled into bytecode The Java Virtual Machine (JVM) translates this bytecode into machine code upon receiving a request to execute the program.

In Java, to return multiple values from a function, you typically use an array to hold the values or define a class that encapsulates the values and return an instance of that class, as Java does not support pointers or reference parameters like C#.

JavaScript is typically integrated directly into a website or linked through an external js file As a client-side language, it is downloaded to the user's device for processing, rather than being executed on the server and sending the results back to the visitor.

CURRENT STATUS SURVEY

UDEMY

The evolution of the internet has significantly simplified the learning process, allowing individuals to study anytime and anywhere based on their needs Many people utilize their free time to optimize their study methods for maximum convenience and effectiveness As a result, online learning has emerged as an essential trend across various fields and educational levels.

The user interface for course management includes features such as purchasing courses, viewing a list of purchased courses, and editing personal account information Users can easily change their passwords and avatars, as well as access the blog section, which includes options for viewing detailed blog posts, writing new blogs, and managing personal blogs Additionally, the interface provides error notifications for access issues and options to unlock or lock blog content For learning, users can navigate through course overviews, take notes, utilize learning tools, and obtain certificates upon course completion.

The rise of the Internet and modern technology has significantly transformed the educational landscape, particularly through the growth of online education models Countries like the US, Korea, and Japan are leading in E-Learning advancements, while Vietnam is embracing these changes as part of its 4.0 revolution The focus on integrating modern technology in education has led to the emergence of smart learning models that allow students to access courses from anywhere with an Internet connection This shift means that attending physical classes is no longer necessary, as learners can engage in education at all levels—from elementary to high school, as well as in professional training centers By effectively utilizing technology and the virtual environment, education becomes more accessible and efficient for everyone.

My group has chosen to create a website dedicated to selling online courses across various fields, aiming to offer students a convenient, fast, and effective learning experience.

In Java, pointer manipulation is intentionally excluded to enhance safety and simplify usage Additionally, features such as action overloading, goto statements, and data structures like structs and unions are not present in the language.

When code is written, a java file is created Compiling the source code transforms it into bytecode, which the Java Virtual Machine then converts into machine code upon execution.

In Java, to return multiple values from a function, you typically use an array to hold the values or define a class that encapsulates the values and return an instance of that class, unlike C# which allows the use of pointers and reference parameters.

JavaScript is typically integrated directly into a website or linked through an external js file As a client-side language, it is downloaded to the user's device for processing, rather than being executed on the server and sending the results back to the user.

F8

We provide free access to valuable programming knowledge, catering to beginners by offering essential lessons Our platform allows users to take notes for future review, complete exams after each video, and contribute articles to enhance the learning experience.

Focusing on some content, not yet diverse, only the website owner can post the courses.

INSTALL AND TEST

Tiêu đề	Building a Sell Course Website Using ReactJS and Springboot
Tác giả	Quyet Sinh Nguyen, Chu Thanh Thong
Người hướng dẫn	Vinh Thinh Le, Ph.D
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation thesis
Năm xuất bản	2022
Thành phố	Ho Chi Minh City

Định dạng
Số trang	159
Dung lượng	10,13 MB