CENTURION UNIVERSITY OF TECHNOLOGY AND MANAGEMENT

A project report submitted For

ANGULAR
on the topic

“PRODUCT CATALOGUE”
Submitted in partial fulfillments for the
MASTER IN COMPUTER APPLICATION
Third Semester
(2024-25)

SCHOOL OF APPLIED SCIENCE

Submitted By
RAJESH CHANDRA SAHU

Under the guidance of

(Lecture in MCA)

CENTURION UNIVERSITY OF TECHNOLOGY AND MANAGEMENT

CENTURION UNIVERSITY OF TECHNOLOGY AND MANAGEMENT

SCHOOL OF APPLIED SCIENCE

CERTIFICATE

This is to certify that the project entitled “PRODUCT CATALOGUE”, is a bona

fide work carried out by PRAKASH CHANDRA SAHU (234420100033) in partial
fulfillment of the Master In Computer Application In Centurion University Of
Technology And Management, during the year 2024- 2025.

It is certified that all corrections/suggestions indicated during reviews have been

incorporated in the report. The project report satisfies the academic requirements
in respect of the Phase I project work prescribed for the said Degree.

Signature of Lecture Signature of Principal

 CENTURION UNIVERSITY OF TECHNOLOGY AND MANAGEMENT

SCHOOL OF APPLIED SCIENCE

DECLARATION

I, PRAKASH CHANDRA SAHU(234420100033), bonafide students of Centurion

University Of Technology And Management, hereby declare that the dissertation
entitled “PRODUCT CATALOGUE”, has been carried out by us under the guidance
of RAKESH KUMAR DHALA(Lecture in MCA), in partial fulfillment of the
requirements for the Master of Computer Application, of the Centurion University
Of Technology And Management, Chatrapur during the academic year 2024-2025.

Signature of Lecture Signature of Principal

(Signature of Student)
CENTURION UNIVERSITY OF TECHNOLOGY AND MANAGEMENT

SCHOOL OF APPLIED SCIENCE

ACKNOWLEDGEMENT
The satisfaction and euphoria that accompany a successful completion of any task
would be incomplete without the mention of people who made it possible, success is
the epitome of hard work and perseverance, but steadfast of all is encouraging
guidance. So, it is with gratitude that we acknowledge all those whose guidance and
encouragement served as beacon of light and crowned our effort with success. We
would like to thank JYOTI PRAKASH DAS , Principal of CUTM, chatrapur, for
providing an excellent academic environment in the college and his never-ending
support for the MASTER IN COMPUTER APPLICATION program. We consider
it a privilege and honour to express our sincere gratitude to our internal guide
RAKESH KUMAR DHALA(Lecture in MCA) , School of Applied Science (MCA)
for their valuable guidance throughout the tenure of this project work. We would
also like to thank all the faculty members who have always been very Co- operative
and generous. Conclusively, we also thank all the non-teaching staff and all others
who have done immense help directly or indirectly during our project.

Prakash Chandra Sahu

(234420100033)

Signature of Lecture Signature of Principal

.
TABLE OF CONTENT

SL NO INDEX PAGE NO
1 Introduction 1
2 Objective 3
3 Angular 4
Native script 5
Html 6
CSS 7
Js 8
4 Product Catalogue 10
5 Implementing 11
Module 12
Components 13
6 Output 14
7 Conclusion 19
8 Reference 20
 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.

VI
 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.
o According t the latest data
approximately 90% of customers want a smooth
and interactive experience across multiple channels and highlighting the
screens, importance of Omnichannel in today's business.

Using the right technology means giving consumers not only y want when they
what the want it, but also
e when they want it.
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
 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

Methodology

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.

Angular
Angular is an open-source web application framework designed by a group
of people and companies and the Angular Team atg G oo le. It is based on
typescript which is superset of JavaScript and is rewritten by the same
team that bui lt AngularJS i.e. angular AngularJS was a
version 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.
S . All other angular versions are named as Angular 2, Angular 3,
AngularJ
and so on. Angular 9 is the latest version.

Fig 1.3 : Angular Logo

3
 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.

NativeScript:

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
Angular CLI from routing support to code generati on
via CLI, web packs, etc.

4
Why we should use Angular together with NativeScript ?

 Application Structure and Lumbering - Angular concepts such as

n ding of data, dependency injection, angular
bi
services, and routing to build native mobilecapps are
reused. Also ode and skill is re sed.
u
 Native Mobile Performance - Create mobile apps without any
compromise using Angular that provides y native UI and
trul performance.
 Angular Community - Huge Angular developer
community, to get extra help.

Fig 1.5: NativeScript with Angular

Tchnology 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.
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 5

 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

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

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

Fig 1.9: Bootstrap Logo

IDE, Softwares , OS, Libraries and Plugins

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.

7
 Fig 1.10: Visual Studio code

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

8
 PRODUCT CATALOGUE

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.

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.
9
 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.

Fig 4.1: Screenshot of Users and products data

10
 Fig 4.2: Screenshot of Cart data
Modules

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.
5. Login Module – This module contains login component and register component.
6. View Product Module – This module contains header
component, products component and product-detail
component.
7. Cart Module – This module contains viewCart/ReviewOrder
component, selectAddress Component, AddNewAddress
component, OrderHistory component

11
 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 ”

Components
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

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

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

13
OUTPUT:

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

14
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.

15
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

16
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

17
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

18
 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

19
 REFERENCES

1. http s://acquire.io/b log /technology-drive-learning-success/

2. http s://en.wi kipedia. org/wiki/Angular_(web_framework)

3. http s://www.nativescript.org/nativescript-is-how-you- build-native-

mobile-apps-with- angular
4. http s://developer.mozi lla.org/en-US /docs /Web/JavaS cript

5. https://www.tutorialrepublic.com/css-tutorial/,

http s://www.tutorialrepu bli c.com/javascript-tutorial/

6. http s://getbootstrap.com/

7. http s://www.int ertech.com/Blog/a ngular-module-tutorial- applicati on-

structure-us ing- modules /
8. https://dzone.com/art icles/what-is-a-service-in-angular-js-why-to-use- it

9. http s://angular.io/ ,

http s://material.angula r.io/

10. https://www.whizlabs.com/blog/p roject-life-cycles-in-project-management/

Rubrics

Concept 10
Planning and Execution/ 10
Practical Simulation/ Programming
Result and Interpretation 10
Record of Applied and Action Learning 10
Viva 10
Total 50

Signature of the Student:

Signature of the Faculty: