Building a sell course website with 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

TECHNOLOGY AND EDUCATION

S K L 0 0 8 5 7 3

BUILDING A SELL COURSE WEBSITE WITH REACTJS

AND SPRINGBOOT

THONG CHU THANH

LECTURER: Ph.D LE VINH THINH STUDENT: NGUYEN QUYET SINH GRADUATION THESIS

INFORMATION TECHNOLOGY

HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY OF INFORMATION TECHNOLOGY

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

GRADUATION THESIS TASK

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

HEAD OF INFORMATION TECHNOLOGY

(Name and signature)

Ho Chi Minh, June 2022

INSTRUCTOR

(Name and signature)

HCM University of Technology and Education

FACULTY OF INFORMATION TECHNOLOGY

_

SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness

HCM University of Technology and Education

FACULTY OF INFORMATION TECHNOLOGY

_

SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness

1 On content of topic & workload done:

2 Advantage

ASSESSMENT FORM OF INSTRUCTOR

Major: Information Technology

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

Name of instructor: Vinh Thinh Le Ph.D

Commentary:

3 Disadvantage:

4 Recommend for defense or not?

5 Rating type

6 Mark:

Ho Chi Minh, June 2022

Instructor

HCM University of Technology and Education

FACULTY OF INFORMATION TECHNOLOGY

_

SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness

ASSESSMENT FORM OF REVIEWER

Major: Information Technology

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

Name of reviewer: Xuan Phung Huynh Ph.D

Commentary:

1 On content of topic & workload done:

2 Advantage

3 Disadvantage:

4 Recommend for defense or not?

5 Rating type

6 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 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.D

Thesis task:

1 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.1 Purpose

2.2 Task

3 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

2.5 CODELEARN

2.6 FUNIX

CHAPTER 3: SYSTEM ANALYSIS AND DESIGN

3.1 SYSTEM ANALYSIS

3.1.1 Client side feature

3.1.2 Admin side feature

3.2 USE CASE DIAGRAM AND USE CASE DESCRIPTION

3.2.1 Use case diagram

3.2.2 Use case description

5 DEVELOPMENT DIRECTION

REFERENCES

IMPLEMENTATION PLAN

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

Sincerely thanks

Thesis implementation group Quyet Sinh Nguyen Chu Thanh Thong

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

TABLE OF CONTENT

PREFACE 1

1 REASON FOR CHOOSING THE TOPIC 1

2 PURPOSE AND TASKS PERFORMED 2

2.1 Purpose 2

2.2 Tasks 2

3 RESEARCH METHODS 2

4 EXPECTED RESULTS ACHIEVED 2

CHAPTER 1: THEORETICAL BASIS 3

JAVA LANGUAGE 3

What is Java language? 3

Features of the Java language 3

Advantages of Java 5

Disadvantages of Java 5

JAVASCRIPT LANGUAGE 6

What is JavaScript? 6

Advantages of JavaScript 6

Disadvantages of JavaScript 6

How JavaScript works 6

SPRINGBOOT 7

1.3.1 What is Spring? 7

1.3.2 Advantages of Spring? 7

1.3.3 What is Springboot? 8

1.3.4 Features of Springboot 9

1.3.5 Advantages of Springboot 10

1.3.6 Disadvantage of Springboot 10

1.3.7 Distinguish Springboot, SpringMVC and Spring 11

REACTJS 15

1.4.1 What is ReactJS? 15

1.4.2 Features of ReactJS 15

1.4.3 Advantages of ReactJS 16

1.4.4 Disadvantages of ReactJS 16

1.4.5 Difference between Angular and React 17

MYSQ 18

1.5.1 What is MySQL? 18

1.5.2 Advantages of MySQL 18

1.5.3 Disadvantages of MySQL 19

CHAPTER 2: CURRENT STATUS SURVEY 20

2.1 OVERVIEW 20

2.2 UDEMY 20

2.3 F8 21

2.4 W3 SCHOOLS 22

2.5 CODELEARN 23

2.6 FUNIX 24

CHAPTER 3: SYSTEM ANALYSIS AND DESIGN 26

SYSTEM ANALYSIS 26

Client side feature 26

Admin side feature 31

USE CASE DIAGRAM AND USE CASE DESCRIPTION 34

Use case diagram 34

Use case description 34

SYSTEM DESIGN 66

Class diagram 66

Sequence Diagram 67

DATABASE DESIGN 85

ERD diagram 85

Database Model 86

UI DESIGN 87

Login, Register UI 87

UI Admin 89

Customer UI 100

CHAPTER 4: INSTALL AND TEST 122

INSTALL 122

TEST 122

CONCLUSION 128

1 THESE ACHIEVEMENTS 128

2 ADVANTAGES 128

3 DISADVANTAGES 128

4 COMPARE WITH REFERENCED WEBSITES 129

5 DEVELOPMENT DIRECTION 129

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 20

Image 2 : F8 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 121

PREFACE

1 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 teaching, 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 The website will provide online courses in many fields, and at the same time support students to learn in a convenient, fast, and effective way

2 PURPOSE AND TASKS PERFORMED

2.1 Purpose

- Learn about ReactJS

- Learn about Springboot

- Apply knowledge to build a website that sells courses

2.2 Tasks

- Learn about ReactJS

- Learn about Springboot

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

- Develop a website to sell online courses

3 RESEARCH METHODS

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 implementation of the website, If there are any questions, the group will refer to resources from the internet and the instructors will try to perfect the website despite its limitations

4 EXPECTED RESULTS ACHIEVED

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

What is 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

 Completely object-oriented.

In the process of creating a new language that would be cross-platform, Sun Micro-system engineers wanted to create a language that was easy to learn and familiar to many programmers So they reused the syntax of C and C++ However, in Java, pointer manipulation is omitted for safety purposes and is easier to use Overloading of action, goto, or structs like struct and union are also removed from Java

 Language of interpretation:

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

When writing the code, the system generates a java file When compiling the source code of the program will be compiled into bytecode code The Java Virtual Machine translates this encoded bytecode into machine code (or native code) when it receives a request to run the program

 Multi-thread:

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 )

 Automatic garbage collection mechanism:

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

Java Language setting supports the memory that you do you have a level play, which means you don't have to call abort the memory yourself Java garbage collection keeps track of allocated resources When there is no reference to the memory area, the garbage collector will proceed to reclaim the allocated memory

 Safety and security:

Java Language setting has strict requirements on data types

Data must be explicitly declared

Do not use pointers and operations with pointers

Java strict check starting on arrays, and strings Technical overflow is not allowed Do that the access will not exceed the size of the array or string The process of releasing and releasing memory is done automatically

The mechanism that makes error handling and error recovery easier

Advantages of Java

 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

of that class

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

JAVASCRIPT LANGUAGE

What is JavaScript?

 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

Advantages of JavaScript

 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

Disadvantages of JavaScript

 Easily exploited

 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

How JavaScript works

 JavaScript is usually embedded directly into a website or referenced via a separate js file It is a client-side language, that is, the script is downloaded

to the visitor's machine and processed there instead of the server-side processing on the server and then giving the result 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

SPRINGBOOT

1.3.1 What is Spring?

 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 core features of Spring Framework can be used in developing any Java application Besides, the extension is used to build web applications on the Java EE platform The goal of Spring Framework is to make J2EE application development easier and promote better programming using the POJO-based model

1.3.2 Advantages of Spring?

 Spring allows developers to create Enterprise-grade applications using POJOs The benefit of using POJOs is that you don't need an EJB container product like an application server, you can just use a powerful servlet container like Tomcat or some other commercial product

 Spring is organized in a modular fashion Although the number of packages and classes is quite large, you only need to care about what you need and don't care about the rest

 Spring uses several existing technologies such as some ORM Frameworks, logging frameworks, JEE, Quartz, JDK timers and other View technologies

 Easy to test a program written in Spring

 Spring's Web framework is a well-designed Web MVC framework that is a great alternative to Struts and other less popular technologies

 Spring provides a convenient API to translate technology-specific exceptions (thrown by JDBC, Hibernate, or JDO, for example) into consistent, unchecked exceptions

 IoC Container is light in weight This is beneficial for developing and deploying applications on computers with limited memory and CPU resources

 Spring provides a consistent transaction management interface that can extend to a local transaction (using a database, for example) and to global transactions (using JTA)

1.3.3 What is Springboot?

 Spring Boot is a module of Spring Framework, providing RAD (Rapid Application Development) feature – Rapid application development

 Spring Boot is used to create standalone applications based on Spring

 Spring Boot requires no XML configuration

 It is a standard for software design configuration, increasing developer productivity

1.3.4 Features of Springboot

 Auto Config: Auto configuration is a core Spring Boot approach to reduce

the number of actions developers have to perform It automatically configures

a Spring application based on the dependencies you added earlier Spring Boot autoconfiguration provides powerful default features and great flexibility

 SpringApplication: SpringApplication is a class that makes it convenient to

launch applications from the main function To start the application, you simply call the run methods

 Embedded Servers: Embedded servers are part of the application That

means you don't have to pre-install it in the deployment environment Spring Boot provides an embedded Tomcat server by default, but you can change it

to Jetty or Undertow Embedded servers make deployment more efficient and reduce application restart times

 Externalized Configuration: Externalized Configuration allows you to have

external configurability So a built application can be run and work on many different environments To perform Externalized Configuration you can use properties files, YAML, command line parameters or environment variables

 Profiles: Spring Boot Profiles will provide a way to split the profiles for each

environment Annotations that are @Component or @Configuration may be

marked with profiles to limit when or environments will be uploaded

 Not only those features, with Spring Boot, you can also develop web Applications, Caching, send Email, Validation, work with SQL technology, etc.…

1.3.5 Advantages of Springboot

 Has Spring Framework features

 Create a stand-alone application that can be run with java -jar (for java web)

 Directly embed server applications (Tomcat, Jetty ) so there is no need to deploy WAR files

 Less configuration, auto-configure whenever possible (Reduce coding time, increase productivity)

 No XML config required…

 Easy to integrate related modules such as Spring-MVC, Spring Data, Spring Security, Spring Cloud, etc

 Provides many plugins

 Standard for Micro-services (Cloud support; reduce setup, config; support libraries )

1.3.7 Distinguish Springboot, SpringMVC and Spring

Table 1: Difference between Springboot and Spring

For building or developing applications, the

Spring framework is considered to be the

most widely used Java EE framework

For developing REST APIs Spring Boot framework is widely used

Developers have become more productive as

this framework has made Java EE

development is simple

It is the easiest framework for developing web applications as the code length is reduced when using this framework

Dependency Injection Auto configuration: Based on the

requirement, the classes are automatically configured by Spring Boot

This framework helps make things simpler

by allowing us to build loosely coupled

applications

Stand-alone applications can be built using this Spring Boot framework with minimal

or fewer configurations

For doing a minimal task, the developer

needs to write a huge amount of code or,

more specifically, boilerplate code

The boilerplate code is reduced to an extent

If we use Spring Boot

The server needs to be set up explicitly for

the testing purpose of the Spring Project

Embedded servers like Jetty, Tomcat, etc., are offered by the Spring Boot framework

This framework does not provide in-memory

database support

It offers several plugins for working with an embedded and in-memory database such as H2

In pom.xml, the dependencies of our Spring

project are manually defined by the

developers

There is a concept of starter in the pom.xml file of our Spring Boot which is used for internally taking care of downloading Dependency JARs based on the Spring Boot Requirement

Deployment descriptor is required for

running Spring applications

Deployment descriptor is not required for Spring Boot

In the Spring framework, the configurations

need to be built manually

For Spring Boot, there are default configurations for which faster bootstrapping is allowed

Due to a large amount of source code, testing

in Spring is more difficult than testing in

Spring Boot

Due to the reduced amount of code, testing

is easier in Spring Boot

In Spring, XML configuration is required In Spring Boot, XML configuration is not

For developing and testing applications, no

CLI tool is provided by Spring Framework

Spring Boot provides the CLI tool for developing and testing applications

HTTP authentication enables security

authentication Several configurations and

dependencies are needed to enable security

The standard dependencies

spring-security-Only the dependency of security is needed to be defined because all the relevant dependencies will be automatically added to the classpath

spring-boot-starter-config and spring-security-web are required

to set up security in the application

For the next step, a class that extends

WebSecurityConfigurerAdapter needs to be

added

Table 2: Difference between Springboot and SpringMVC

Spring Boot is considered a module of the

Spring framework for packaging the

Spring-based application with sensible defaults

Spring MVC is considered to be the model view controller-based web framework under the Spring framework

For building a Spring-powered framework,

default configurations are provided by it

For building web applications, ready-to-use features are provided by it

Developers do not need to build the

configurations manually

In Spring MVC, the configurations are required to be built manually

The boilerplate code is avoided, and the

dependencies are wrapped together in a

single unit

Each dependency is specified separately by

it

A deployment descriptor is not required in

the case of Spring Boot

A deployment descriptor is required in the case of Spring MVC

It is very efficient to use The development

time is reduced with this framework, thereby

increasing the productivity of engineers

In the case of Spring MVC, much more time

is required for achieving the same

Powerful batch processing is provided by it Powerful batch processing is not provided by

it

There are four types of presentation

layers: Presentation layer, Business layer,

Persistence layer, and the Database layer

There are four components in MVC such as Model, View, Controller, Front Controller,

or DispatcherServlet Class

Along with dynamic web pages and

RESTFUL web services, Spring Boot can

also develop other applications

Dynamic web pages and RESTFUL web services are developed using Spring MVC

REACTJS

1.4.1 What is ReactJS?

 ReactJS is an open source JavaScript library designed by Facebook to create attractive, fast and efficient web applications with minimal coding The core purpose of ReactJS is not only to make the website smooth, but also to be fast, highly extensible and simple

 Its strength comes from focusing on the individual ingredients Therefore, instead of working on the entire web application, ReactJS allows a developer

to break complex user interfaces into simpler components

1.4.2 Features of ReactJS

 JSX: is an extended syntax for JavaScript, which is a combination of

JavaScript and XML It converts the almost XML syntax into JavaScript, making it possible to code ReactJS using XML syntax instead of using JavaScript

 Component: is a place to render pure html code, another important thing is

that it allows us to break up the UI code into independent parts, for the purpose of easy management and reuse

 Props: stands for Properties, we can understand it as properties of a

Component If Component is considered as an object in OOP programming, then Props are like descriptions of the properties and characteristics of an object

 State: is used to represent the state of the Component That is, the value of

State is mutable, in stark contrast to Props which is an immutable value.

1.4.3 Advantages of ReactJS

 Uses the virtual DOM which is a JavaScript object This will improve application performance, as the JavaScript virtual DOM is faster than the regular DOM

 Can be used on clients and servers as well as with other frameworks

 Component and data templates improve readability, helping to maintain larger applications

1.4.4 Disadvantages of ReactJS

 Reactjs only serves the View layer React is just a View Library, it's not an MVC framework like other frameworks This is just a Facebook library to help render the view So React will not have a Model and Controller part, but must combine with other libraries React also won't have 2-way binding or Ajax

 React is quite heavy compared to other frameworks React is similar in size to Angular (About 35kb compared to 39kb of Angular) Whereas Angular is a complete framework

 Difficult to access for newbies to learn the Web

1.4.5 Difference between Angular and React

Table 3: Difference between Angular and React

Full-featured Framework – provides a

strong opinion on how your application

should be designed, as well as a number of

tiny libraries that aid in the development of

complex applications

The library is only concerned with UI components MVC design requires Flux to implement, but it provides you more flexibility in how you wish to organize your code

Supports both one way and two way data

binding ,two-way data binding means that If

we modify the UI input, the model state will

change, and vice versa

One-way data binding means that a UI element can’t affect a component’s state

TypeScript is a statically typed language

that is a superset of JavaScript

TypeScript can write JavaScript XML (JSX), although it isn’t included by default

Material Design Components – Angular

includes a number of material design

components that make UI configuration a

breeze

Material-UI Library & Dependencies – Community-developed UI tools provide a wide range of UI components

Dependency injection is supported,

allowing for separate life cycles for

different stores

React does not fully enable dependency injection because each component has its own global state

Incremental DOM – when a new DOM is

created, it compares it to the previous one

and applies the differences to the “actual”

DOM, only allocating memory If

necessary

Virtual DOM – anytime the DOM changes,

a new virtual DOM is created, compared to the previous one, and only the differences are modified in the “real” DOM

MYSQ

1.5.1 What is MySQL?

 MySQL is an open source relational database management system(RDBMS) supported by Oracle based on Structured Query Language (SQL), which is a stable, high-speed database management system and easy

to use, portable, works on many operating systems providing a large set of very powerful utility functions With high speed and security, MySQL is well suited for applications that access databases on the internet

 MySQL runs on virtually all platforms, including Linux, Windows, and Unix Today, MySQL is the RDBMS behind many of the top websites in the world and countless business and consumer web-based applications, including Facebook, Twitter, and YouTube

1.5.2 Advantages of MySQL

 Easy to use: MySQL is a high-speed, stable, easy-to-use and cross-operating

database that provides a large system of very powerful utility functions

 High Security: MySQL is very suitable for applications that access

databases on the Internet when possessing many security features even at high level

 Multiple features: MySQL supports a lot of SQL functions expected from a

relational database management system both directly and indirectly

 Scalable and powerful: MySQL can handle a lot of data and moreover it

can be extended If necessary

 Fast: The introduction of several standards allows MySQL to work very

efficiently and cost-effectively, thus increasing the execution speed