ELearning Website – Angular

Project report submitted in partial fulfillment of the requirement for

the degree of Bachelor of Technology
in
Computer Science and Engineering/Information Technology
By
Karamjit Verma
(171270)

Under the supervision of

(Mr. Amit Bansal )
To

Department of Computer Science & Engineering and Information

Technology
Jaypee University of Information Technology Waknaghat,
Solan-173234, Himachal Pradesh
i
 Candidate’s Declaration

I hereby declare that the work presented in this report entitled “ ELearning Website –
Angular ” in partial fulfillment of the requirements for the award of the degree of
Bachelor of Technology in Computer Science and Engineering/Information
Technology submitted in the department of Computer Science & Engineering and
Information Technology, Jaypee University of Information Technology Waknaghat is an
authentic record of my own work carried out over a period from Feb 2021 to May 2021
under the supervision of Mr. Amit Bansal .
The matter embodied in the report has not been submitted for the award of any other
degree or diploma.

(Student Signature)
Karamjit Verma
(171270)

This is to certify that the above statement made by the candidate is true to the best of my
knowledge.

(Supervisor Signature)
Mr. Amit Bansal

Dated: 21/05/2021

i
 ACKNOWLEDGMENT

First and foremost, I would like to express my gratefulness to Head, Department of Computer
Science & Engineering and Information Technology, Jaypee University of Information
Technology and Mr. Pankaj Kumar, Training and Placement Officer, Jaypee University of
Information Technology for providing me the opportunity to work with such passionate
organization like Ameha technologies in my final semester of bachelors course. As always
said hard work is the key to success but it’s not just hard work that pays off but what matters
most is the right guidance and also the right attitude to grab the opportunity. It gives me
immense pleasure to express my guidance and respect to Mr. Amit Bansal for always being a
great manager and support whenever required. I would also like thank entire team for not only
imparting their knowledge but also their constant supervision, advise and guidance whenever
required, without which this internship wouldn’t have been possible.
I would also like to thank all other department faculty at Jaypee University of Information
Technology. Not only did they taught me and made me capable enough to undergo this
industrial experience but were always there at the need of the hour and provided with all the
help, facilities and co-operation, which was much required to reach this level.

ii
 TABLE OF CONTENT

Chapter No age No
P

1. Chapter-1 INTRODUCTION 1
1.1. Introduction 1
1.2. Problem Statement 2
1.3. Objectives 3
1.4. Methodology 3
1.4.1. Frameworks 3
1.4.1.1 Angular 4
1.4.1.2 NativeScript 5
1.4.2. Technology and Languages 7
1.4.2.1 HTML 7
1.4.2.2 CSS 8
1.4.2.3 JS 9
1.4.2.4 Bootstrap 9
1.4.3. Libraries, Softwares, OS, IDE and Plugins 10
1.4.3.1 Visual Studio Code 10
1.4.3.2 Angular Material 11
1.4.3.3 Git 12
1.4.3.4 Json-Server 13
1.5. Organization 13

2. Chapter-2 LITERATURE SURVEY 14

2.1.How Web Browser work? 14
2.1.1 Rendering Engine 16
2.2. Angular Observables 17
2.3. Angular Interceptors 18

iii
 TABLE OF CONTENT

Chapter No g age No
a
P

3. Chapter-3 SYSTEM DEVELOPMENT 20

3.1. Software Requirements 20
3.2. Hardware Requirements 21
3.3. Functional Requirements 21
3.3.1 Register 21
3.3.2 User 21
3.3.3 UI 21
3.3.4 Sprint Work 22
3.4.Setting Json-Server 23

4. Chapter – 4 PROJECT DEVELOPMENT 24

4.1. Database Implementation 24
4.2. Modules 27
4.3. Components 28
4.4. Services 30
4.5. Route Guards 31

5. Chapter – 5 RESULTS 33

6. Chapter – 6 CONCLUSIONS AND FUTURE SCOPE 42

6.1.Conclusion 42
6.2. Future Scope 43

iv
ABBREVATIONS LIST

V
 LIST OF FIGURES

Fi gur e No C a p t i o n [ Re f e r e n c e ] P a g e No

1.1 Omni channel [1] 1

1.2 Phases of Project Management [10] 2

1.3 Angular Logo [2] 4

1.4 Angular + NativeScript [3] 6

1.5 NativeScript with Angular [3] 6

1.6 HTML5 Logo [4] 7

1.7 CSS illustration [5] 8

1.8 JavaScript illustration [5] 9

1.9 Bootstrap Logo [6] 10

1.10 Visual Studio code [11] 11

1.11 Angular Material [9] 12

1.12 Git 12

2.1 7 Key Components of Web Browser [12] 15

2.2 Steps followed by Rendering Engine [12] 16

2.3 HTML Tree [12] 16

2.4 Observer and Observable [13] 18

2.5 Interceptor Flow Diagram [14] 19

3.1 Agile Methodology [15] 20

3.2 Sample Json Data [16] 23

3.3 Sample Json Output [16] 23

VI
Fi gur e No C a p t i o n [ Re f e r e n c e ] P a g e No

4.1 Screenshot of users and products data 26

4.2 Screenshot of cart data 26

4.3 Angular Module Tree [7] 27

4.4 Angular Components 28

4.5 Service Illustration [9] 31

4.6 Code Screenshot of resolve guard 32

5.1 Login Profile 33

5.2 Register Profile 34

5.3 Register Profile with validations 34

5.4 Product Dashboard 35

5.5 Product Details 36

5.6 User Cart 37

5.7 Add New Address 38

5.8 Edit Address 38

5.9 Select Delivery Address 39

5.10 Review Order 40

5.11 Orders History 40

5.12 Angular Loader 41

VII
 ABSTRACT

Innovative headways have affected the eLearning world, changing the manner in which
customers connect with items and empowering them to purchase all the more
productively. With the comfort of getting items conveyed to your entryway, eLearning
has now become a piece of regular day to day existence. Clients can purchase things from
their homes, their or working environment according to their comfort. Today web
shopping has made it simpler and helpful for the client as it spares their time and exertion.
Clients can check an assortment of things, can without much of a stretch drop exchanges
and As the present innovation has gained a quick and speedy advancement of applications
and website pages, so front end includes a fundamental layman design for clients to
utilize the highlights and capacity making everyday work simple. Remembering this,
utilizing the essential innovation of Front End Development an ELearning Website in
Angular was planned as a major aspect of a quarter of a year of preparing at Paxcom
India Pvt Ltd, Gurgaon.

As a development trainee student we exceeded expectations in JavaScript, TypeScript,

Angular and Native Scripts alongside important GIT and Routing conventions. Spilling of
live venture and conveyance of items to clients incorporated wide information on DOM
control and specialized execution of the front end advancement dialects and apparatuses
learned.

VIII
 CHAPTER – 1 INTRODUCTION

1.1 Introduction

Advancements in technology have a huge impact on the e-learning world, which

has changed the way consumers nowadays interact with products which enables them
to buy the products more efficiently. With the ease of delivering products to your
door, e-learning nowadays has become an integral part of a person’s everyday life.

Today e-learning organizations expected to regularly update themselves with the

latest technologies with the help of effective strategies, competitive marketing, and
skilled laborers aside. These advancements in technology have helped people to meet
their shopping needs easily, and as a result, it helps in growth and strengthing of the e-
learning sector.

Nowadays e-learning is faster providing a smooth shopping experience to its

customers, using the latest technology buyers can find anything with just the click of a
button. Also, customers can keep track of their orders, find the best deals, check out
the latest offers, and much more. With all this development, new business
opportunities are emerging, which is a boon to the e-learning sector.

Fig 1.1: Omni channel

1
Modern methods of purchasing include the process of channel research , speculation, and
acquisition. According t o the latest data approximately 90% of customers want a smooth
and interactive experience across multiple channels and screens, highlighting the
importance of Omnichannel in today's business.

Using the right technology means giving consumers not only what the y want when they
e want it.
want it, but also when they

1.2 Problem Statement

The framework we choose was Angular 9 together with the MDC web. This was a
great idea but the challenge here was that the framework we were going to learn was
completely new and developing a whole new product from scratch was also a big
challenge. The entire project was divided into three modules and each of the interns
was working on a different module. This was a team task and the main problem which
we faced as a team was to learn how to work in a team task. The application was
regularly synced and updated using Git. Before starting the project development we
planned the different phases of the project, its database, backend server to be used,
project flow, etc.

Fig 1.2 Phases of Project Management

2
1.3 Objectives

The basic objective of this project was to get familiar with concepts such as:
• User Authentication
• Angular Modules
• Angular Components
• Angular Services
• Use of database
• Http Requests – GET, PUT, POST, DELETE
• Auth Guards in Angular
• Dynamic Header
• Angular Http Interceptor
• Angular Material
• MDC Framework

1.4 Methodolo gy

The various methodologies involved in this project are, frameworks such as Angular
9, NativeScript. The different technologies and languages used are HTML5, CSS3,
Bootstrap4, JS, Angular material library, Angular Web MDC library. For interaction
with database JSON Server is used. The code was regularly updated and synced with
git.

1.4.1 Fram eworks

In the computer, the software framework is Abstraction software to supply

standard functionality which will be selected by modifying the extra code written
by the user, thus providing direct use of application software. It provides the user
with a standard way of designing and deploying applications. It is a valid and

3
efficient software platform that provides specific functionality as part of a larger
software platform to provide performance improvements, different products, and
software solutions. These advanced frameworks include support systems,
compilers, toolsets, libraries, and API’s that compile all the various components to
start a project or program development.

To build and deploy any application software we use frameworks as they are
universal in working and their standards are maintained. To develop different
software-products, applications, etc frameworks reused for developing high-end
applications providing a particular functionality as a part of high-end and large
software platforms. Today there are various frameworks used while I am using
Angular for frontend development.

1.4.1.1 Angu lar

Angular i s an open-source web application framework designed by a group
of people and companies and the Angular Team at G oogle. It is based on
typescript which is superset of JavaScript and is rewritten by the same
team that bui lt AngularJS i.e. angular version AngularJS was a
1.0.
popular client-side framework used by JavaScript engineers for a long
time. Angular is nothing new but is an improved version Angular 1 i.e.
AngularJS. All other angular versions are named as Angular 2, Angular 3,
and so on. Angular 9 is the latest version.

Fig 1.3 : Angular Logo

4
 The latest angular version being used today is Angular 9.0. Version 9
moves all applications to use the Ivy compiler and run time by default.
Angular 9.0 uses the Angular CLI to create a new project, generate new
modules, components, services, and automatically links and declare the
create modules, components, etc. The user needs to write one simple
command, and entire work from creating a new component to declaring
that component is done by Angular CLI. It also provides the user with an
option to enable angular routing while creating a new project. If the user
does not enable routing while project creation, routing can be enabled
manually from within the project. Applications can be made browser and
device friendly with the help of NativeScript that works with Angular and
other frameworks.
As mentioned one among the feature of Angular CLI is code reusability,
one code is often used for both mobile and desktop application
development. Angular unlike AngularJS, works on the concept of
Promises, Observables which make data fetch from API even faster and
hence increase the performance of the SPA. Angular provides it’s plugins
for nearly every ide and hence also allows performing on a local server
with an auto-refresh feature. As AngularJS it also extends the HTML
vocabulary but now we make use of our components and also make use of
several other existing components.

1.4.1.2 Na tiveScript:

NativeScript is an open-source cross-platform framework employed for

building native iOS and Android apps using JavaScript,
Typescript, Angular, or Vue.js. It makes use of Typescript when used
with Angular and JavaScript also can be used for development, but just
in case of JavaScript the developer should be well known worth
XML. NativeScript with Angular integration has all the features of

5
Angular CLI from routing support to code generati o n via CLI, web
packs, etc.

Fig 1 .4 : An gul a r + Na tive Script

Why we should use Angular together with NativeScript ?

• Application Structure and Lumbering - Angular concepts such as

binding of data, dependency injection, angular services, and routing
to build native mobile apps are reused. Also ode
c and skill is
reused.
• Native Mobile Performance - Create mobile apps without any
compromise using Angular that provides trul y native UI and
performance.
• An gular Community - Huge Angular developer community, to get
ext ra help.

Fig 1.5: NativeScript with Angular

6
1.4.2 T
echnology and Languages:
As in regular everyday practice, to speak with one another dialect is a
significant medium, correspondingly to cooperate with the framework;
programming dialects are a significant vehicle for the engineer. As, all things
considered, there, individuals speak with various dialects, correspondingly, for
driving with gadgets there are various dialects accessible, for example, C, C#,
C++, Java, Python, and so on.

The first and significant stage an individual or a group needs to perform before
dealing with a particular venture is to choose a lot of advancements that will be
utilized for building up the product or an application. For creating, the backend
innovation stack incorporates web structures and after that the programming
dialects come and servers to send the product application on the overall web.
1.4.2.1 HTML
HTML stands for Hypertext Markup Language. It is the standard markup
language that describes the structure of a web page. It consists of a series
of elements that tell the browser how to display the content and these
elements are represented by tags. The browser doesn’t display the tags on
the screen but uses the HTML tags to render the content of the web page.
HTML is the root of any web-based application which is easy to learn and
use, therefore it is not always considered as an important language. As
many other applications work in a standard format, therefore it is very
important to use the language in a standard format.

Fig 1.6: HTML 5 Logo

7
 HTML5 is the latest evolution of the standard that defines HTML. The
term represents two different concepts. It is a new version of the
language HTML, with new elements, attributes, and behaviors, and a
larger set of technologies that allows the building of more diverse and
powerful Web sites and applications.

1.4.2.2 CSS
Cascading Style Sheets (CSS) are used for designing and presenting the
HTML page, describes how HTML elements are to be displayed on
different devices, and directly controls the layout of site on multiple screen
sizes. It manipulates the text colors, fonts, background colors, layout, etc.
The latest flexbox and grid concept in css has made it easier to layout the
document. CSS can be embedded in HTML in three ways, i.e. inline css,
internal css and external css. To add css internally <style> tag is used.
IT is recommended to make an external css file as it keeps the code clean
and makes it understandable.

Fig 1.7: CSS illustration

8
1.4.2.3 JS
JavaScript (JS) is a structured language that is lightweight, translated or
has recently been integrated into functional tasks in the first grade. Js is
popular and well known for writing Web pages; many non-browser sites
also use it, as Node.js, Apache-CouchDB, and Adobe Acrobat. It is a style-
based, elementary, series, language based, supported object based,
essential, and dictionary (e.g. functional programs). Toda JavaScript latest
level is ECMAScript. ECMAScript 5.1 is supported by all modern
browsers and at least ECMAScript 3 is supported by older browsers. With
the help of JavaScript one can manipulate Dom from manage static forms
to dynamic, the language is so vast and widely used that it is not only
supported by all browsers but also helps debugging it.

Fig 1.8: JavaScript illustration

1.4.2.4 Bootstrap
Bootstrap is a collection of free and open-source tools for building
responsive websites and web applications. An immense framework for
HTML, CSS, and JavaScript for developing responsive websites. It solves
many problems we used to have, one of which is a browser compatibility
problem. Today, websites are ready for all browsers (IE, Firefox, and
Chrome) and in all screen sizes (Desktop, Tablets, Phones). To include
bootstrap in the website include it from bootstrap CDN link or download it
form bootstrap site. Bootstrap 4 is the latest stable version of bootstrap.

9
 Fig 1.9: Bootstrap Logo

1.4.3 IDE, Softwares , OS, Libraries and Plugins

1.4.3.1 Visual Studio Code

VS code is a free & open source code editor made by Microsoft for
Windows, Linux and macOxS. Its features include debugging support,
syntax highlighting, intelligent code elimination, captions, code retrieval,
and Git embedding. In visual studio code users can change the display
theme, update keyboard shortcuts, preferences, and can install extensions
that adds extra functionality.

10
 Fig 1.10: Visual Studio code

1.4.3.2 Angular Material

Angular Material is a library that is part of the UI for Angular developers.
While adhering to modern web design principles such as browser
portability, application independence and good scalability, angular
Material components help to create attractive, consistent and effective web
pages and web applications It helps to create fast, beautiful and responsive
websites.

11
 Fig 1.11 Angular Material

1.4.3.3 Git
Git is popularly used system software where there are large numbers of
people work together on one project in parallel. It is a distributed version
control system that tracks all code changes over time process entire
software development. The motivation behind this program is to speed the
development process across the team, supporting non-linear workflow &
maintaining data integrity. It is mind-based & therefore easy to use and
understand & work on, working with the mind branches, reunions,
reunions and more. It keeps the work local on our system and global as
well as at the origin.

Fig 1.12 Git

12
 1.4.3.4 Json-Server
A common task for front – End developers is to use the REST backend
service to deliver some data in the JSON format to the previous application
and make sure everything is working as expected. You can also set up a
full backend server, e.g. using Node.js, Express and MongoDB. However
this takes time and a very simple method can help speed up the
development time before the end.

JSON Server is a simple project that helps you set up a REST API with
CRUD functions very quickly. It is available as NPM Package. It can be
installed using the Node.js package Manager
$ npm install -g json-server

1.5 Organisati on

The way in which this project report is organized is that:

1. In 1st Chapter problem statement is covered along with basic introduction of entire
system, major technologies, libraries and frameworks given.
2. In 2nd Chapter about the literature survey and the study that was done before
starting the development process. Brief introduction is given about rendering of
HTML, working of web browsers, angular observables and interceptors.
3. Chapter 3 describes about software and hardware requirements, architecture of the
application and flow chart.
4. Chapter 4 describes everything about project development i.e. its database
schema, modules , component , services , auth guards that are used in the entire
project
5. Chapter 5 includes all the screenshot of the project. The entire project completed
till date is concluded in this chapter and also throws light on the project’s future
scope of the project and other features that are in the process of being
development.

13
 CHAPTER – 2 LITERATURE SURVEY

It's consistently a smart thought to know precisely what subject to chip away at. A similar
practice is to be considered on account of improvement. Further turn of events and
information on the underlying foundations of innovation and sees how it functions, the
more gifted the architect will have the option to play out, the simpler the designer will
have the option to discover an answer for the issues they are looking, in actuality, work.
For this reason all understudies who joined the organization must be taught with the goal
that experts know about the issues that engineers are looking in their day by day lives.
Not exclusively was this however was the kind of issues the learners are approached to
discover an answer for and to unravel as assignments. In this section I portrayed all the
exploration work I did during preparing and at the hour of advancement experience when
I involved with a mistake, or creation issue.

So here the primary spotlight is on a couple of essential thoughts that one neglects to
perceive in light of theoretical layers of new structures. Commonly it is discovered that
the issue happens on the grounds that the designer doesn't know about how the stream
functions and how things are coming in the image. Consequently it is first critical to
concentrate on fundamental dialects and essential ideas of those dialects, so that
regardless of whether we don't coexist well with the system we're chipping away at, we
despite everything can take care of the issue with the information and comprehension of
the essential indigenous dialects. Along these lines the preparation procedure depended
on handy information and comprehension.

How web browsers work? [12]

The main function of a web browser is to request resources on the web and display them
inside a browser window. Usually the browser will request HTML, CSS, JavaScript and
image content on the server and translate it based on web standards and specifications.
Browsers follow standards because it allows websites to behave in the same way across
browsers, and creates less performance and fewer headaches for web developers.

14
7 key components of any web browser are:

• Layout Engi ne – It takes input from browser in the form of U RL bar, search box,
mouse click, key presses etc and transfers it to rendering engine.
• Rendering Engine – This takes HTML code and translates it to what you see.
For example, a tag was interpreted by a translator engine as a set of instructions
for making te xt within a part bold.
• User interface - This is a visual presentation of the browser co ntrols, for example
the back and front buttons, bookmarks, and all the chrome that appears around the
browser wind ow where web pages display.
• JavaScript Engine - This engine takes JavaScript code exec utes it, and returns
results.
• Network Layer - This is a browser function that occurs behind the scenes and
handles netw ork functions such as encryption, http and ftp requests, and all
network settings such as expiry and HTTP status codes.
• Storage - The browser must store specific information that may include cached
files, cookies, and newly updated browsers to be able to store data and objects in
JavaScript.
• Operating S ystem Operations - The browser must work with the operating
system to draw several page objects such as boxes and window elements (close,
expand, and minimize buttons).

Fig 2.1: 7 Key Components of Web Browser

15
2.1.1 Renderi ng Engine
The rende ring engine plays a very important role as it reflects what you see on
your screen. It communicates with the browser's browsing network to hold
HTML code and other objects passed to the remote server.

Fig 2.2 Steps followed by rendering engine

Rendering engine follow these steps:

1. Parsing HTML to construct the DOM tree – HTML elements are
passed and converted into DOM tree.
2. Render tree construction – Parsing of CSS attributes is done and
combined with DOM tree to create render tree.
3. Layout of the render tree – After construction of render tree HTML
elements and attributes are mapped to screen coordinates, starting
from position 0, 0.
4. Painting the render tree – With the help of OS interface each node of
the render tree is drawn out on the screen.

Fig 2.3 HTML Tree

16
2.2 Angular Observables [9][13]
Observables are widely used in Angular for handling a variety of common asynchronous
operations. To understand why we need to use asynchronous code instead of empty
JavaScript, consider the code waiting for a response from a remote server. There is no
way to know when the answer will come back, we don’t know whether we will get any
reply or not, or when will the reply come. So it is not a good idea to stop executing the
script until the response is received. Asynchronous code is the best solution, and the way
Angular chooses to handle asynchronous code is obvious. Angular’s Http
Client returns observables from HTTP method calls.

Observables Working

1. Observer and Observable

• Data is fired by the observable in response to an event. Event can be a
button clicked by the user or new page load or response to the data that is
received from the remote server.
• Observer subscribes to receive the data sent by the observable. To use the
data Observer has three handle:
▪ onNext that handles the requested data.
▪ onError to handle errors if any.
▪ onComplete - used on process completion

2. HTTP
Angular’s Http Client returns observables from HTTP method calls. For
instance, http.get(‘/api’) returns an observable. To cancel HTTP
requests unsubscribe() method is used.
3. Async Pipe
The Async Pipe subscribes to an observable and returns the latest value
it has emitted. Async pipe marks the component to be checked for
changes, every time when a new value is emitted.

17
 4. Router
To provide events as observables use Router.events.
The filter() operator from RxJS can also be used to look for events of
interest, and subscribe to these events in order to make decisions based
on the sequence of events in the navigation process. T o get information
about a route path use an injected route service that is A cti va te dRo ute
that uses observables

5. Reactive Forms
Reactive forms have FormControl properties such as valueChanges and
statusCha n ges that use observables to monitor form c ontrol values and
raise events. Subscribing to an angular observable form-control
property is a way of triggering app. logic within the co m ponent class.

Fig 2 .4 Observe r and Obse rva bl e

2.3 A ngular Interceptors [14]

Interceptors on Angu lar, as the name suggests, is an easy way given the framework to
extract and modify global http requests before they are deployed t o the server. That
comes with the utility, which allows us to configure authentic ation tokens, add
application logs, add customization topics that may need to be used and much more.

18
Interceptors can perform a variety of tasks, from authentication to encryption, in a
standard, standard, to every HTTP request / response. Without exception, developers will
need to use this function explicitly for each HttpClient call.

Since interceptors are HttpClient dependent, you should add them in the same provider
(or parent) that provides HttpClient. For example, if you think you have your
HttpClientModule imported into AppModule, you should add patches to providers there
too. The multi: true option provided tells Angular that you provide multiple interceptors
and that is necessary if so.
It is also important to note that Angular uses interceptors in such a way that you assign
them to your module providers.

Fig 2.5: Interceptor Flow Diagram

19
 CHAPTER – 3 SYSTEM DEVELOPMENTS

The entire website was designed and developed using Angular Framework
for frontend and fake rest API called Json Server was used for backend. This
project is done by splitting it into 3 modules. The tool used was Visual
Studio Code Version 1.45 and database was in the form of Json format.
Agile Methodology was used for website development.

Fig 3.1 Agile Methodology

3.1 Software Requirements

Client Side : Internet Explorer, Google Chrome, Operating system

(Windows)
Developer Side : Angular CLI, VS Code (Recommended), Operating
system (Windows)
Servers : Json Server, Microsoft Windows

20
3.2 Hardware Requirements

Processor/RAMs (Client Side) : 2 GB (Min)

Processor/RAM (Developer Side) : 4 GB (Recommended)
Web Server : Any suitable sever
Primary Memory : 2GB or Higher RAM

3.3 Functional Requirements

3.3.1 Register Panel

• User can register using Google or registration form
• Only registered users can do shopping.
• Every user has to provide name, email id, phone No, address details
before adding products to cart.

3.3.2 User (Buyer)

• Buyer can login through Google.
• Buyer can filter products depending on category.
• Buyer can add products to cart. The product quantity for a particular
product is capped to 5.
• Buyer can move products from cart to save for later items wish list.
• Buyer can send products to different address with same or different
billing address.
• Buyer can reorder a particular order from orders history page.

3.3.3 User Interface(UI)

• The website is user friendly
• The website is device friendly i.e. interface adapts to different screen
sizes.

21
3.3.4 Sprint Work
The website contains following pages
1. Login Page
2. Registration Page
3. Products Dashboard Page
4. View Cart Page
5. Shipping Address Page
6. Billing Address Page
7. Add/Edit Address Page
8. Review Order Page
9. Orders History Page

In any project it is important to fulfill all the requirements of the user.

Following are the User tasks that need to be accomplished in this project.
• As a customer, I should be able to register.
• As a customer, I should be able to login.
• As a customer, I should be able to view all products and their
categories
• As a customer, I should be able to add product to cart.
• As a customer, I should be able to increase product quantity.
• As a customer, I should be able to modify cart items, add more
products to cart
• As a customer, I should be able to add cart items to save for later
items WishList.
• As a customer, I should be able to select delivery and billing
address.
• As a customer, I should be able to add new address or edit
existing address.
• As a customer, I should be able to review my order, check total
price.

22
 • As a customer, I should be able to check my previous orders.
3.4 Setting JSON-Server [16]

Json-server is a part of npm package. To install Json-server, a fake rest API

locally on your system run this command.

npm install –g json-server

• Create database.json file with some data

Fig 3.2 Sample Json Data

• Start json server with this command.

json-server –watch database.json

• Now on your system browse to “

http://localhost:3000/posts/1, you” get

Fig 3.2 Sample Json Output

• If POST, PUT, GET, DELETE http requests are made then

changes will automatically be saved to database.json file.

23
 CHAPTER – 4 PROJECT DEVELOPMENT

4.1 Implementing Database

JSON allows developers store data as JSON documents in a database which is a great
deal of simplicity and flexibility, and in some cases it may be more practical to. JSON
documents required a NoSQL database in the past. Class and interface is made as a
part of software design pattern for better layout of application code. Interface is an
abstract type, it does not contain any code and it is used with a class to define custom
data types. Data security and validation can be maintained with the help of classes
and interfaces.

1. Users Interface

o userId – It is of integer type and is a primary key used for

indentifying each user.
o Name – It is of string type and is used to get name of the user.
o Email - It is of string type and is used to get email id of the user.
o Address - It is an array of addresses and is used to get address
details of the user.

2. Products Interface

o productId - It is of integer type and is a primary key used for

indentifying each product.
o productName - It is of string type and is used to get name of the
product.
o productPrice - It is of integer type and is used to get price of the
product.
o productQuantity – It is of integer type and is used to get maximum
quantity of particular product.

24
 o productDetails – It of string type and is used to get details of the
product.
o productImage – It is of string type and is used to get product image
for display.
o Product category – It is of string type and is used to define category
of the product.

3. Cart Interface

o cartId – Unique integer cart id.

o userId – Id of registered user.
o saveForLaterItems – It is an array of products saved for later.
o cartOrder – It is an array of items selected for buying.

4. Address Interface

o addressed – It is string type unique address id used for identifying

each project.
o Name – It is of string type and is used to get name of the user.
o Email - It is of string type and is used to get email id of the user.
o phoneNo – It is of integer type and must of 10 digits starting with
+91.
o Street – It is of string type.
o Pincode - It is of integer type and must of 6 digits.
o City - It is of string type.
o State - It is of string type.

25
Fig 4.1: Screenshot of Users and products data

Fig 4.2: Screenshot of Cart data

26
4.2 Modul es

In Angular, the module is a way of grouping components, directories, pipes, and related
services, in a way that can be integrated with other application programming modules.
The Angular app can be thought of as a puzzle where each piece (or module) is required
to be able to see the full picture. The application is divided into three modules and
different components.

1. Login Module – This module contains login component and register component.
2. View Product Module – This module contains header component, products
component and product-detail component.
3. Cart Module – This module contains viewCart/ReviewOrder component,
selectAddress Component, AddNewAddress component, OrderHistory component

Fig 4.3 Angular Module Tree

To create a new module we need to make use of angular CLI. The command for the same
is “ ng g module ModuleName ”.

27
4.3 Com ponents

In Angular Components are the basic building blocks of UI. It has a selector, template
(.html), style (.css, .sass, .scss) and other properties and method using which it specifies
the metadata required for processing.

Fig 4.4: Angular Component

1. Login Component - This component is part of the login Module. It allows us to

either log in through goggle or log in with email id and password. If the User is
not registered he/she can register himself using the register button.

2. Register Component – This component is part of the login Module. It allows us

to register by adding user details.

3. View Products Component – This component is part of the View Product

Module. It shows all the products and different categories of products. Users can
select a particular category to filter products according to the category. Users can
also add a product to the cart from the product dashboard.

28
4. View Product Details Component – This component is part of the View Product
Module. It shows detail of a particular product selected from the View Products
Component. Users can increase the quantity of a product and add it to the cart.

5. Header Component – This component is part of the View Product Module. It

shows the top header bar which dynamically changes its layout depending on the
current page on which the user is.

6. View Cart/Review Order Component – This component is part of the Cart

Module. It dynamically changes its layout depending on the current URL. The
DOM renders itself based on the current URL and the user will see only the
required data. If the URL is:-

• ViewCart - The user can add more items to cart, move items to Save For
Later WishList, and can proceed further to buy items.

• ReviewOrder – The user can review his order, Shipping Address, Billing
Address, order total and precede further to place the order.

7. Select Address Component – This component is part of the Cart Module. It

allows the user to select his delivery address and billing address.

8. Add New Address/ Edit Address Component - This component is part of the
cart Module. It also dynamically changes its layout depending on the current
URL. The DOM renders itself based on the current URL and the user will see only
the required data. If the URL is:-
• AddNewAddress - The user can add a new address by filling his address
details according to the validations set.

29
 • EditAddress – User's Address will be prefetch from the database and will
be filled automatically. Then the user can edit a particular address filed
and update his address.

9. Orders History Component - This component is part of the Cart Module. It

allows the user to check his latest orders placed.

To create a new component we need to make use of angular CLI. The command for the
same is “ ng g compoent ComponentName ”.

4.4 Services [8]

In angular when we want to reuse the same code or data that needs to be shared among
different components we use services. Services are singleton objects that are instantiated
only once during the lifetime of an angular application. It helps us to access methods and
properties across other components in the entire project. Its main objective is to organize
and share business logic, models, or data and functions with different components of an
Angular application.

The separation of concerns is the main reason why Angular services came into being.
Angular service is countless and offers some very useful functions. These functions can
be requested from any Angular component, such as controllers, controls, etc. This helps
in dividing the web application into smaller, different logical units that can be used again.

Services deals with GET, POST, PUT, DELETE operations by performing http requests
with the server.

Services used in ELearning project are:

• Authentication Service – It contains logical functions like

checkEmailAlreadyExists() , registerUser(), getRegisteredUserData().

• View Product Service - It contains logical functions like viewProducts() ,

viewProductDetails(), updateHeader().

30
 • Cart Service - It contains logical functions like getCartData() , updateCartData(),
deleteCartData(), getUserId(), getUserAddressData(), deleteUserAddressData(),
getOrderDetails().

Fig 4.5: Service Illustration

To create a new service we need to make use of angular CLI. The command for the same
is “ ng g service ServiceName ”.

4.5 Route Guards

Angular route gurads are interfaces that can tell the router whether it should allow
navigation on the requested route or not. They make this decision by looking for a
true or false return value for the class using the given guard indicator.
There are five types of guards and each of them is named after a specific order. The
behavior of the router is changed differently depending on which guard is used.

31
The guards are:
• canActivate
• canActivateChild
• canDeactivate
• canLoad
• canResolve

In this project only resolve guard was used. A service class is used with router to
resolve data during navigation. A resolve() method is defined by the interface and
it will be invoked when the navigation starts. Before the final activation of the
route, the router waits for the data to be resolved.

Fig 4.6 Code Screenshot of resolve guard

32
 CHAPTER – 5 RESULTS

5.1 Screensho ts

5.1.1 Login Page

This page comprises of login with Google button, email, and password field which
is set by the user while registering him as a new user and an option to create a new
account. On this page header will show only register button.

Fig 5.1: Login Profile

33
5.1.2 Register Page
This page allows the user to register as a new user by filling the following details.
After Successful registration user will be redirected to Login Page. On this page,
the same header will dynamically change itself and will show only the Login
button.

Fig 5.2: Register Profile

Fig 5.3: Register Profile with validations.

34
5.1.3 Products Dashboard
This page shows all the products and different categories of products. On this
page, the header will dynamically change itself and will show only the name of
user login, cart button, orders button and logout button. User can add products to
cart with their quantity by default set to 1.

Fig 5.4: Product Dashboard

35
5.1.4 Products Details

Here Users can see product details, change the quantity, and add the product to
cart. Maximum quantity for a product is capped to 5.

Fig 5.5: Product Details

36
5.1.5 User Cart Details
This page shows all the items in the cart added by a user. Here user can vary the
item quantity, add it to Save For Later WishList, add more products to the cart,
and at last, can proceed to buy. The data is shown based on user id set while user
logins or registers himself. This page is part of a single component i.e. viewCart
component explained above, that dynamically changes its view based on URL. If
the shopping cart is empty, then proceed to buy button will be disabled.
Pagination is used to show more products to the user.

Fig 5.6 User Cart

37
5.1.6 Angular Loader
Loader is shown whenever there is any http request made to the server
which indicates that server is fetching data from the database or
making changes to the database.
If there is a button click event performed to proceed to next page,
loader is shown which indicates that resolve guards used are resolving
the data with the services used from database. After data is received
the loader automatically hides and we move to the next page.
Preloading of data prevents rendering of html first while there is delay
in receiving the data from the server.

Fig 5.12: Angular Loader

38
 CHAPTER 6 – CONCLUSIONS

6.1 Conclusion

The fundamental motivation behind the proposed task is to build up a web application
that can give a smooth encounter to the client while shopping through this website. With
the assistance of this venture I had the option to get profound information on Angular
structure, how it works, different modules, segments, administrations included while
building the application. The hands-on understanding on innovation and confronting
genuine issues made my learning much all the more fascinating.

Generally, I will depict my preparation as a positive and educational experience. In the

main stage I experienced a couple of issues, since it was an entirely different field for me.
After some time I calculated my issues lastly begin with it. Continually evaluating this
task by my guide and giving satisfactory criticisms helped me a ton and It further
improved my learning experience.

The workplace was very spurring and it was a lot of rousing to perceive how a portion of
the engineers had the option to autonomously execute their inclinations and plan, and
perform and execute their own tests. It was an astonishing encounter to be a piece of
building the application that we use and learning the foundation usefulness of how the
client takes a gander at things and what the dynamic hand is returning to.

It was likewise energizing to locate another IT stage, where numerous engineers were
effectively adding to one another and helping each other accomplish the organization's
long and transient objectives. Then again, getting the chance to take a shot at a live
venture was one of the most energizing and testing encounters. It makes me enormous
pleased to introduce this task report which shows all the difficult work and endeavors that
I had set up during my 3 months mechanical preparing. On the off chance that I needed to

39
summarize my whole training period on a solitary line, I would state this was the start of
reinforcing my profession.

6.2 Future Scope

• As per now the user must be logged in to view the product dashboard but there
should be an option of login as a guest or skip sign which will allow users to add
items to cart without signing in, as seen in other eLearning applications.

• Currently, the admin panel is under construction which is very important to

manage the site.

• The layout can be improved by integrating MDC which will help in building
device-friendly sites compatible with devices of different screen sizes such as
phones, laptops, etc.

• There must be a feature that keeps track of no of users who are logged in as guests
and at a particular time how many users are accessing this site.

• Application’s performance can be increased by using more route guards which

will lead to better and smooth user experience.

• Different deals can be added on the website that will attract more no of customers,
increasing the scalability of our site.

40
 REFE RENCES

1. http s://a cqui re.io/b log /technolog y-drive-learning-s uccess/

2. http s://en.wi kipedia. org /wi ki/Ang ular_( web_framework)
3. http s://www.nati ve script.org /native script-is-ho w-you- build-na tive- mobile-apps-wi th-
an gular
4. http s://developer.mozi lla. org/en-US /docs /Web/JavaS cript
5. http s://www.tutorialrepu bli c.com /css-t utorial / ,
http s://www.tutorialrepu bli c.com /ja va script-tutorial/
6. http s://get boots trap.com/
7. http s://www. int ertech.com/Blog/a ngular-module-tutorial- applicati on-structure -us ing-
modules /
8. http s://dz one.co m/art icles /what- is-a-s er vice-in-a ngul ar-js-why-to-us e- it
9. http s://angular.io/ ,
http s://ma terial.angula r.io/
10. http s://www.whizl abs.com/blog /p roje ct -l ife-cycles -in-pr oje ct- management/
11. http s://code. visualstudi o.c om/
12. http s://www. pathinte racti ve. com/blog /de sign-de velopment/re ndering-a-webpa ge-with-
go ogle-webmas ter-t ool s/
13. http s://phpent husia st.com /blog /what -is-obs ervable- in-ang ular
14. http s://me dium .com/ co mpute-a nd-be yond/ wo r king- wit h-http-interceptors- ang ula r-
31067ffaeb2f ,
http s://it next.i o/unde rstandi ng-angular-inte rce ptors -405 b84d7ad69
15. http s://che rcher.tech/jira /a gile-methodology
16. http s://www.npmjs .co m/packa ge/js on-s er ver# gett ing-sta rted
17. http s://me dium .com/@r ya nchen kie_409 35/ang ular-a uthen tication-us ing- route-g uard s-
bf7 a4ca13ae3
Paper
ORIGINALITY REPORT

17 %
SIMILARITY INDEX
12%
INTERNET SOURCES
1%
PUBLICATIONS
11%
STUDENT PAPERS

PRIMARY SOURCES

Subm itted to Jaypee University of Information

1
Technology
5%
Student Paper

www.pathinteractive.com
2 Internet Source 3%
m edium .com
3 Internet Source 1%
phpenthusiast.com
4 Internet Source 1%
dzone.com
5 Internet Source 1%
Subm itted to University of Greenwich
6 Student Paper 1%
www.am sivedigital.com
7 Internet Source <1%
Subm itted to National College of Ireland
8 Student Paper <1%
Subm itted to Southern New Hampshire
9
University - Continuing Education <1%
 Student Paper

<1%
Subm itted to University of Wales Swansea
10 Student Paper

<1%
Subm itted to TED Universitesi
11 Student Paper

<1%
12
www.studym ode.com
Internet Source

<1%
awesom eopensource.com
13 Internet Source

<1%
14
Subm itted to Laureate Higher Education
Group
Student Paper

<1%
www.coursehero.com
15 Internet Source

<1%
16
www.freelancer.co.kr
Internet Source

<1%
17
www.npm js.com
Internet Source

<1%
18
Subm itted to Australian Institute of Higher
Education
Student Paper

<1%
19
Subm itted to Shri Guru Gobind Singhji
Institute of Engineering and Technology
Student Paper

20
Subm itted to AUT University
 JAYPEE UNIVERSITY OF INFORMATION TECHNOLOGY, WAKNAGHAT
PLAGIARISM VERIFICATION REPORT
Date: 24/06/2021
Type of Document (Tick): PhD Thesis M.Tech Dissertation/ Report B.Tech Project Report Paper

Name: KARAMJIT VERMA Department: CSE Enrolment No 171270

Contact No. 9411874482 E-mail. [email protected]
Name of the Supervisor: Vivek Sehgal
Title of the Thesis/Dissertation/Project Report/Paper (In Capital letters): e-Learning Website (Angular)
Medhasvi

UNDERTAKING
I undertake that I am aware of the plagiarism related norms/ regulations, if I found guilty of any plagiarism and
copyright violations in the above thesis/report even after award of degree, the University reserves the rights to
withdraw/revoke my degree/report. Kindly allow me to avail Plagiarism verification report for the document
mentioned above.
Complete Thesis/Report Pages Detail:
− Total No. of Pages = 51
− Total No. of Preliminary pages = 8
− Total No. of pages accommodate bibliography/references = 01
(Signature of Student)
FOR DEPARTMENT USE
We have checked the thesis/report as per norms and found Similarity Index at 17 (%). Therefore, we
are forwarding the complete thesis/report for final plagiarism check. The plagiarism verification report may be
handed over to the candidate.

(Signature of Guide/Supervisor) Signature of HOD

FOR LRC USE
The above document was scanned for plagiarism check. The outcome of the same is reported below:
Copy Received on Excluded Similarity Index Generated Plagiarism Report Details
(%) (Title, Abstract & Chapters)

Word Counts
• All Preliminary
Pages
Report Generated on • Bibliography/Ima Character Counts
ges/Quotes
Submission ID Total Pages Scanned
• 14 Words String
File Size

Checked by
Name & Signature Librarian
……………………………………………………………………………………………………………………………………………………………………………
Please send your complete thesis/report in (PDF) with Title Page, Abstract and Chapters in (Word File)
through the supervisor at [email protected]