Build a selling course website using reactjs and springboot

HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATIONFACULTY OF INFORMATION TECHNOLOGY  GRADUATION THESIS BUILDING A SELL COURSE WEBSITE USING REACTJS AND SPRINGBOOT Instructor: Vinh Thinh L

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 group Quyet Sinh Nguyen Chu 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 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.

We created an online teaching website to offer an effective and reliable learning environment, ensuring the best learning experience for all users The platform includes various features designed to enhance the educational journey.

 Buy and learn the course

 Read and write knowledge-sharing blogs

 Comments on the course/blog

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 21 : Edit personal account information UI description 109

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 article presents a comprehensive overview of various user interface (UI) elements related to course management and blogging features Key components include the course purchase UI, a list of purchased courses, and options for editing personal account information, changing passwords, and updating avatars Additionally, it covers the blog UI, detailing functionalities such as writing and managing blogs, as well as handling access errors The learning course UI and overview course UI are also highlighted, alongside tools for note-taking and certificate issuance, ensuring a user-friendly experience for learners and content creators alike.

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 has expanded online learning beyond just college and university students to include all educational levels, from elementary to high school, as well as professional training centers By effectively utilizing technology and virtual environments, 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 offer students a convenient, fast, and effective learning experience.

- 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 the instructors will strive to enhance the website despite its limitations.

THEORETICAL BASIS

Advantages of Springboot

The user interface (UI) for course management includes features such as course purchase, a list of purchased courses, and options to edit personal account information Users can easily change their passwords and avatars, while also accessing and writing blogs The blog UI provides detailed views and personal blog management Additionally, the learning course UI offers an overview of courses, note-taking capabilities, and access to learning tools Finally, users can view and manage their certificates through the dedicated certificate UI.

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.

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

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 designed with the principle of "Write Once, Run Anywhere" (WORA), allowing software programs to operate on various platforms This versatility is made possible by the execution environment, which must be compatible with the specific platform to run Java applications seamlessly.

Features of the Java language

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

In Java, pointer manipulation is intentionally excluded to enhance safety and simplify usage Additionally, features such as action overloading, goto statements, and structures like structs and unions are not present 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 created Compiling the source code transforms it into bytecode The Java Virtual Machine then converts this bytecode 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 development 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 memory area This automatic process eliminates the need for manual memory management, enhancing efficiency and reducing the risk of memory leaks.

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 each value or create a custom class that encapsulates the values and return an instance of that class, as opposed to using pointers or reference parameters commonly found in 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

Distinguish Springboot, SpringMVC and Spring

Disadvantages of ReactJS

We created an online teaching website to offer an effective and reliable learning environment, ensuring the best learning experience for everyone The site includes various features designed to enhance the educational process.

The user interface (UI) for course management includes various features such as the course purchase UI, which allows users to buy courses, and a list of purchased courses UI for easy access to their selections Users can edit their personal account information and change their passwords through dedicated UIs Additionally, the platform offers options to change avatars and access a blog UI, which includes detailed blog views, writing capabilities, and personal blog management Error handling is addressed with an access error UI, while blog management features include options to unlock or lock posts The learning experience is enhanced with a learning course UI, an overview course UI, and a note-taking UI Finally, users can access learning tools and obtain certificates through the respective UIs.

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, from elementary to 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 offer students a convenient, fast, and effective learning experience.

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

Java was designed with the principle of "Write Once, Run Anywhere" (WORA), allowing software programs to operate on various platforms This versatility is made possible by the execution environment, which must support the specific platform for seamless execution of Java applications.

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.

Java's memory management simplifies the programming process by eliminating the need for manual memory allocation and deallocation The Java garbage collector automatically monitors allocated resources and reclaims memory when there are no remaining references to a particular memory area.

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

CURRENT STATUS SURVEY

SYSTEM ANALYSIS AND DESIGN

INSTALL AND TEST

ADVANTAGES

ASSESSMENT FORM OF INSTRUCTOR Student name: Quyet Sinh Nguyen ID: 18110354

Student name: Chu Thanh Thong ID: 18110365

Project title: Build a selling course website using ReactJS and Springboot

Name of instructor: Vinh Thinh Le Ph.D

DISADVANTAGES

4 Recommend for defense or not?

HCM University of Technology and Education

SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness

ASSESSMENT FORM OF REVIEWER Student name: Quyet Sinh Nguyen ID: 18110354

Student name: Chu Thanh Thong ID: 18110365

Project title: Build a selling course website using ReactJS and Springboot

Name of reviewer: Xuan Phung Huynh Ph.D

1 On content of topic & workload done:

4 Recommend for defense or not?

HCMC University of Technology and Education

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

Project name: Build a selling course website using ReactJS and Springboot

Instructor: Vinh Thinh Le Ph.D

1 Learn about ReactJS and Springboot

2 Build a website to sell courses

Outline of the graduation thesis:

1.1.2 Features of the Java language

DEVELOPMENT DIRECTION

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

The user interface (UI) for course management includes features such as course purchase, a list of purchased courses, and options to edit personal account information Users can easily change their passwords and avatars, while also accessing the blog section, which includes a detailed blog view and a writing interface The "My Blog" section allows for personal content management, and users can encounter an access error UI if issues arise Additionally, the platform provides functionalities to unlock or lock blogs, manage learning courses, and view course overviews Users can take notes and utilize learning tools, culminating in the ability to access their 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 has expanded online learning beyond just college and university students to include all educational levels, from elementary to high school, as well as professional training centers By effectively utilizing technology and virtual environments, learning has become more accessible and efficient for everyone.

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.

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

Java was designed with the principle of "Write Once, Run Anywhere" (WORA), allowing software programs to operate on various platforms This versatility is made possible by the execution environment, which must be compatible with the specific platform to run Java applications seamlessly.

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 are not included in Java.

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 enhances efficiency and reduces the risk of memory leaks.

In Java, when you need 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 opposed to using pointers or reference parameters commonly found in C#.

Tiêu đề	Build a Selling Course Website Using ReactJS And Springboot
Tác giả	Nguyen Quyet Sinh Thong, 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 project
Năm xuất bản	2022
Thành phố	Ho Chi Minh City

Định dạng
Số trang	153
Dung lượng	8,25 MB