ONLINE SHOPPING SYSTEM

PROJECT REPORT

18CSC202J - OBJECT ORIENTED DESIGN AND PROGRAMMING

LABORATORY
(2018 Regulation)
II Year/ III Semester
Academic Year: 2022 -2023
By

DHRUV ATRI (RA2111028010068)

RUPPA RANJIT RAJ (RA2111028010073)
Under the guidance of
Dr.L.N.B.Srinivas
Associate Professor
Department of Networking and Communication

FACULTY OF ENGINEERING AND TECHNOLOGY

SCHOOL OF COMPUTING
SRM INSTITUTE OF SCIENCE AND TECHNOLOGY
Kattankulathur, Kancheepuram
NOVEMBER 2022

1
 BONAFIDE

This is to certify that 18CSC202J - OBJECT ORIENTED DESIGN AND

PROGRAMMING LABORATORY project report titled “ONLINE

SHOPPING SYSTEM” is the bonafide work of RUPPA RANJIT RAJ
(RA2111028010073) and DHRUV ATRI (RA2111028010068)
who undertook the task of completing the project within the allotted time.

Signature of the Guide Signature of the II Year Academic Advisor

Dr.L.N.B.Srinivas -------------------------
Associate Professor Professor and Head
Department of NWC, Department of NWC
SRM Institute of Science and Technology SRM Institute of Science and Technology

2
About the course:-

18CSC202J- Object Oriented Design and Programming are 4 credit courses with LTP
C as 3-0-2-4 (Tutorial modified as Practical from 2018 Curriculum onwards)

Objectives:
The student should be made to:
• Learn the basics of OOP concepts in C++
• Learn the basics of OOP analysis and design skills.
• Be exposed to the UML design diagrams.
• Be familiar with the various testing techniques

Course Learning Rationale (CLR): The purpose of learning this course is to:

1. Utilize class and build domain model for real-time programs

2. Utilize method overloading and operator overloading for real-time application
development programs
3. Utilize inline, friend and virtual functions and create application development programs
4. Utilize exceptional handling and collections for real-time object-oriented programming
applications
5. Construct UML component diagram and deployment diagram for design of applications
6. Create programs using object-oriented approach and design methodologies for real-time
application development

Course Learning Outcomes (CLO): At the end of this course, learners will be able to:

1.Identify the class and build domain model

2.Construct programs using method overloading and operator overloading
3.Create programs using inline, friend and virtual functions, construct programs using
standard templates
4.Construct programs using exceptional handling and collections
5.Create UML component diagram and deployment diagram
6.Create programs using object oriented approach and design methodologies

3
 Table 1: Rubrics for Laboratory Exercises
(Internal Mark Splitup:- As per Curriculum)

CLAP-1 5=(2(E-lab Completion) + 2(Simple Exercises)( from Elab test

CodeZinger, and any other coding platform) +
1(HackerRank/Code chef/LeetCode Weekend
Challenge)
CLAP-2 7.5=(2.0(E-lab Completion)+ Elab test
2.0 (Simple Exercises)( from CodeZinger, and any
other coding platform) + 3.5 (HackerRank/Code
chef/LeetCode Weekend Challenge)
CLAP-3 7.5=(2.0(E-lab Completion(80 Pgms)+ 2 Mark - E-lab Completion 80
2.0 (Simple Exercises)( from CodeZinger, and any Program Completion from 10
Session (Each session min 8
other coding platform) + 3.5 (HackerRank/Code program)
chef/LeetCode Weekend Challenge) 2 Mark - Code to UML
conversion GCR Exercises
3.5 Mark - Hacker Rank
Coding challenge completion

CLAP-4 5= 3 ( Model Practical) + 2( Oral Viva) • 3 Mark – Model Test

• 2 Mark – Oral Viva

Total 25

4
 COURSE ASSESSMENT PLAN FOR OODP LAB
S.No List of Experiments Course Blooms Level PI No of
Learning Programs
Outcomes in each
(CLO) session
1. Implementation of I/O Operations in CLO-1 Understand 2.8.1 10
C++
2. Implementation of Classes and Objects CLO-1 Apply 2.6.1 10
in C++
3, To develop a problem statement. CLO-1 Analysis 4.6.1 Mini
1. From the problem statement, Identify Project
Use Cases and develop the Use Case Given
model.
2. From the problem statement, Identify
the conceptual classes and develop a
domain model with a UML Class
diagram.
4. Implementation of Constructor CLO-2 Apply 2.6.1 10
Overloading and Method Overloading
in C++
5. Implementation of Operator CLO-2 Apply 2.6.1 10
Overloading in C++
6. Using the identified scenarios, find the CLO-2 Analysis 4.6.1 Mini
interaction between objects and Project
represent them using UML Sequence Given
diagrams and Collaboration diagrams
7. Implementation of Inheritance concepts CLO-3 Apply 2.6.1 10
in C++
8. Implementation of Virtual function & CLO-3 Apply 2.6.1 10
interface concepts in C++
9. Using the identified scenarios in your CLO-3 Analysis 4.6.1 Mini
project, draw relevant state charts and Project
activity diagrams. Given
10. Implementation of Templates in C++ CLO-3 Apply 2.6.1 10
11. Implementation of Exception of CLO-4 Apply 2.6.1 10
Handling in C++
12. Identify the User Interface, Domain CLO-5 Analysis 4.6.1 Mini
objects, and Technical Services. Draw Project
the partial layered, logical architecture Given
diagram with UML package diagram
notation such as Component
Diagram, Deployment Diagram.
13. Implementation of STL Containers in CLO-6 Apply 2.6.1 10
C++
14. Implementation of STL associate CLO-6 Apply 2.6.1 10
containers and algorithms in C++
15. Implementation of Streams and File CLO-6 Apply 2.6.1 10
Handling in C++

5
LIST OF EXPERIMNENTS FOR UML DESIGN AND MODELLING:
To develop a mini-project by following the exercises listed below.
1. To develop a problem statement.
2. Identify Use Cases and develop the Use Case model.
3. Identify the conceptual classes and develop a domain model with UML Class diagram.
4. Using the identified scenarios, find the interaction between objects and represent them
using UML Sequence diagrams.
5. Draw relevant state charts and activity diagrams.
6. Identify the User Interface, Domain objects, and Technical services. Draw the partial
layered, logical architecture diagram with UML package diagram notation.

Suggested Software Tools for UML:

StarUML, Rational Suite, Argo UML (or) equivalent, Eclipse IDE and Junit

6
 ABSTRACT

The UML Diagrams for Online Shopping System are used to represent the
online shopping system as well as its primary users, roles, activities, artifacts,
or classes. The UML Diagrams are created to easily understand, update,
maintain, and document online shopping system information. UML diagrams
for online shopping system were used to visualize the project. It can be done
before the development begins or to document its progress once it is
completed. However, Online Shopping System UML Diagrams can be used in
any sector, not only in software engineering. Its overall objective is to help
teams or developers visualize what a project is or how it will work. In this
project multiple UML diagram for online shopping system are represented
which will help developers to develop link between different classes , and
connect backend to frontend as well as for creating multiple web pages
requires for different processes and time the occurrence of web pages as per
the processes , interact with various customer activities and represent how
web pages will communicate with each other as a part of a system . These UML
also represents and provide all necessary information for developer to
properly hide and encapsulate data and verify data as per needs. The UML
Diagrams are created to easily understand, update, maintain, and document
online shopping system information.

7
Table of contents

1) Use Case Diagram …9

2) Class Diagram … 12

3) Sequence Diagram … 15

4) Communication Diagram … 17

5) Collaboration Diagram … 19

6) Activity Diagram … 21

7) State Diagram … 22

8) Deployment Diagram … 23

9) Component Diagram … 24

10) Conclusion … 25

11) References … 26

8
 USE CASE DIAGRAM
We will have customer as actor which will be performing multiple tasks for shopping which
will be supported by multiple backend actors like service authenticator, identity provider ,
credit payment service , and credit provider like PayPal . Customer for online shopping first
needs to select item, for which he will get a functionality of view items. Then it will make
purchase, and checkout. These processes need not be assessed by all actor but some
specific actors which will have connection to that task, so we need to provide who can
access and see what. Thus this use case diagram depicts how online system works in
relation to process and actors.

9
Purpose:

Provide top level use cases for a web customer making purchases online.

ACTORS :

➢ Web Customer : It is a person who through internet is performing online shopping.

Thus web customer can be :
➢ Registered Customer : Customer who is already registered with website.
➢ New user : Customer who is new to use Website.
➢ Authentication : This is a service running in backend of website who will check if
user credentials are correct or not.
➢ Identity Provider : identity provider will authenticate the user to perform actions.
➢ Credit Payment Service : it is gateway between credit provider and website.
➢ Credit Provider : PayPal : it is the company in which user holds money and will
provide credit.
Processes:

Web Customer actor uses some web site to make purchases online. Top level use
cases are View Items, Make Purchase and Client Register. View Items use case could be used
by customer as top level use case if customer only wants to find and see some products.
This use case could also be used as a part of Make Purchase use case. Client Register use
case allows customer to register on the web site, for example to get some coupons or be
invited to private sales. Note, that Checkout use case is included use case not available by
itself - checkout is part of making purchase.
Except for the Web Customer actor there are several other actors which will be described
below with detailed use cases.

➢ View Items use case is extended by several optional use cases - customer may
search for items, browse catalogue, view items recommended for him/her, add
items to shopping cart or wish list. All these use cases are extending use cases
because they provide some optional functions allowing customer to find item.

➢ Customer Authentication use case is included in View Recommended Items and Add
to Wish List because both require the customer to be authenticated. At the same
time, item could be added to the shopping cart without user authentication .

10
 ➢ Checkout use case includes several required uses cases. Web customer should be
authenticated. It could be done through user login page, user authentication cookie
("Remember me") or Single Sign-On (SSO). Web site authentication service is used in
all these use cases, while SSO also requires participation of external identity
provider.

➢ Checkout use case also includes Payment use case which could be done either by
using credit card and external credit payment service or with PayPal.

Online shopping UML use case diagram - checkout, authentication and

payment use cases :

11
 CLASS DIAGRAM

PURPOSE:
The purpose of the diagram is to introduce some common terms, "dictionary" for online
shopping - Customer, Web User, Account, Shopping Cart, Product, Order, Payment, etc. and
relationships between. It could be used as a common ground between business analysts and
software developers.

DESCRIPTION:

Each customer has unique id and is linked to exactly one account. Account owns shopping
cart and orders. Customer could register as a web user to be able to buy items online.
Customer is not required to be a web user because purchases could also be made by phone
or by ordering from catalogues. Web user has login name which also serves as unique id.
Web user could be in several states - new, active, temporary blocked, or banned, and be
linked to a shopping cart. Shopping cart belongs to account. Account owns customer orders.
Customer may have no orders. Customer orders are sorted and unique. Each order could
refer to several payments, possibly none. Every payment has unique id and is related to
exactly one account.

Each order has current order status. Both order and shopping cart have line items linked to
a specific product. Each line item is related to exactly one product. A product could be
associated to many line items or no item at all.

CLASSES :

There are Multiple Classes connected to each other in different ways.

➢ Web User : This class will contain login id, password and current state of user that
could be new active blocked or banned.
➢ Customer : This class will contain customer details like id , address , phone , email
etc. A web user can be a customer , but the cutomer may or may not be a web user.
➢ Account : Account Class contains details about user account. Like billing address ,
opening and closing dates and user id , and weather account is banned or blocked.
Each customer can have only one account.

12
Detailed Class Diagram:

13
➢ Shopping cart :Will contain line items , and date of creation . Each account can have
just one shopping cart. Also , account without registration can have a shopping cart.
Each Shopping cart can have a unique line item.

➢ Line item :line item will have list of items , quantity and price of each item . Each line
item can have just 1 order and can be imported to only 1 shopping cart.
➢ Product :Product class will contain product id, product name and supplier
information . each product can be attached to multiple line item . But each line item
can have only 1 product.
➢ Order :Order class contains order id, order date , shipped date , ship to address ,
order status and total. Each order will be connected to payment class , each order
must have an account , and each account will have a unique order. Each order will
have a unique line item.
➢ Payment :Payment class will have a payment id . paid date , total and payment
details like gateway. Each payment can be done from 1 account and 1 order. Each
order will have a unique payment.

14
 SEQUENCE DIAGRAM
PURPOSE :

Sequence Diagram is made to understand the timing and sequences of messages sent and
processes and requests sent from one state to other to process and operate. So Sequence
Diagram mainly deals with timing of operations and is essential UML for smooth operation.

DESCRIPTION :

While some of these diagrams, such as class diagrams or object diagrams, are designed to
show the static structure of a system, a sequence diagram shows how the system behaves
over time and how the different parts of the system interact during that time frame.

This sequence diagram starts when a user adds an item to their card. When proceeding with
the purchase, the user can choose gift wrapping. When it comes to payment, they can have
two options: card payment and payment by Bank transfer. If the user chooses card
payment, they enter their card details and the online store sends the request to the
payment gateway. If the customer chooses payment by bank transfer, the online store
provides the transfer information to the user. The user pays the bills and gets payment
confirmation.

15
PROCESS TIMING :

The first stage in this is to type a forward slash followed by alt. Then enter the possible
messages that are sent. Following is the sequence of message and request sent from one
state to other :

➢ First, the user enters their card details on the online store. This sends a message
from the user to the store.
➢ The online store then needs to communicate with the payment gateway. This lets
the user pay with their card. This first part of the alternative frame is nicely boxed
off, but now we need to deal with the second part of the alternative, to cover a
customer who wants to pay by bank transfer.
➢ This uses an else label to show that it is selected if the first alternative is not used.
➢ The online store has to give the user the bank details they need to make the
transfer.
➢ This message will therefore go in the opposite direction from the previous messages
and go back to the user. This is known as a reply message and is shown with a
dotted line with an arrow. Just add a period after the hyphen in Gleek to create a
dotted line. You can read more about the types of messages in a sequence diagram
in our detailed page about creating sequence diagrams in Gleek.
➢ The user can then go ahead and complete the transfer.
➢ This will send a message to their bank.
➢ The final stage in the purchasing process is that the online store sends a
confirmation message to the user and this ends the part of the sequence diagram
that we want to model.

Thus in this way , the interaction between various actors take place from viewing items to
making purchase till order confirmation .

16
 COMMUNICATION DIAGRAM

The diagram depicts online shopping activities of a shopper as interactions with the
modelled system and the following reactions of particular system modules and parts.

Lifelines represent modules and system parts needed in the online shopping process within
modelled example e-shop solution:

➢ Shopper
➢ E-shop Module
➢ Product Cataloge.
➢ Product Page
➢ Shopping Cart
➢ Payment Gateway
➢ Order Controller
➢ Order
➢ Bill

17
Messages Between Lifelines

There are these interactions between system modules represented by lifelines:

• Login
• Choose Product
o Get Product
o View Details
• Add Product to Cart
o Add Product
• Remove Product from Cart
o Remove Product
• Confirm Order (by Shopper)
o Confirm Order (by Order Controller)
o Get Products
o Products
o Create Order
• Pay for Order
o Pay
o Payment Success / Fail
o Create Bill

Thus communication diagram depicts the activities of a customer as interactions with the
modelled system.

18
 COLLABOARTION DIAGRAM

UML Collaboration Diagram depicts the interactions between objects or parts in terms of
sequenced messages and describes both the static structure and dynamic behaviour of a
system.

PURPOSE :

Collaboration Diagrams focus mainly on processes between classes rather that sequence of
messages, thus depicting what will take place after/ before what. So thus it is helpful in
designing web pages accordingly of what process is likely to be done first.

DIAGRAM :

This diagram shows the concept of the online shopping and is used for the understanding of
the online shopping processes, of the online shops working processes, for projection and
creating of the online stores.

As collaboration diagrams are also known as communication diagrams, thus, they can
demonstrate how objects communicate to execute a specific use case's actions or an aspect
of a use case. We can use collaboration diagrams to explain and identify the roles of objects
performing a specific flow of events in a use case. They are the main information source
used to establish class roles and interfaces.

19
We can develop Collaboration diagrams by first determining the design elements required
to incorporate the functionality of interface features. The interactions among these
elements are then used to build a model. The aim of a collaboration diagram is to illustrate
the systemic dimensions of a structure, i.e., how various lifelines link within the structure.
Collaboration is a set of named actions and systems which have connections to them. They
work together to perform any task.

The process will be done in sequence :

1. Select Product
2. Input quantity
3. Check stock
4. Get stock by product id
5. If stock not available show error
6. If stock available add to shopping cart
7. Add item with given quantity
8. Update data
9. Display shopping cart
10. Make payment
11. Go to payment page
12. Return to shopping site
Through interacting together, objects may generate (usable) high-level functionalities. The
objects collaborate and operate together by communicating (passing messages) with each
other. The collaboration diagram represents the relationships between the objects. The
collaboration diagram illustrates how messages are exchanged between classes and objects
(instances). It is generated for each process of the system and relates to the existing
development phase.

20
 ACTIVITY DIAGRAM

This is a UML activity diagram for the online shopping process, in which online customers
can browse all items and add them to their shopping carts before checking out after signing
in.

PURPOSE :

Activity diagram is like a flowchart which shows how process will take place from start to
end and how all actions will be carried out.

This Online Shopping Management System's users are sellers and shoppers, which are
critical in creating its activity diagram. It will be much smoother to build the system's
interactions and activities when we determine who the system's users are. The Online
Shopping UML Activity Diagram for online shopping systems includes symbols such as actors
and arrows to help you understand the workflow of the online shopping management
system. Online customer can browse or search items, view specific item, add it to shopping
cart, view, and update shopping cart, do checkout. User can view shopping cart at any time.

21
 STATE DIAGRAM

This sample shows the work of the online store and can be used for the understanding of
the online shopping processes, for projection and creating of the online store.

PURPOSE :

The basic purpose of a state diagram is to portray various changes in state of the

class and not the processes or commands causing the changes.

The state diagram shows the state of each process when it is carried out . state diagram
mainly focuses on state of process rather than classes and processes. Online shopping or e-
shopping is a form of electronic commerce which allows consumers to directly buy goods or
services from a seller over the Internet using a web browser. Thus State diagram focuses in
states of events and thus tells us how system will behave in different states.

22
 DEPLOYMENT DIAGRAM
The online shopping system UML deployment diagram explains the sketched relationship
between software and hardware. This sketch also includes the software and hardware
components to clarify their part in the system’s operation. They were represented by nodes
and the connections were represented by labelled arrows. The admin’s PC has access to the
system’s back end and can monitor the systems’ server. The deployment diagram shows the
scenario when the system is deployed. It has 5 nodes represented with boxes and
components within.

The online shopping node has the component of several databases such as products, users,
and transactions. Then the sellers must have an internet connection (ISP) in order for them
to access the system’s database.

Additionally, the software is connected to ISP which enables it to pass data to the
webserver. Then the webserver will be accessed by the buyers thru browsers with the help
of URLs. The sellers and the buyers can communicate with the use of ISP. The UML
Deployment diagram for Online Shopping System is used to illustrate the system’s physical
architecture. In UML, deployment diagrams can show you how the software and hardware
of online shopping work together and where the processing takes place.

23
 COMPONENT DIAGRAM

Component diagram for online shopping. The diagram shows "white-box" view of the
internal structure of three related subsystems - Webstore, Warehouses, and Accounting. In
UML «Subsystem» is a standard component stereotype for larger components, usually
containing some smaller components.

Webstore subsystem contains three components related to online shopping - Search

Engine, Shopping Cart, and Authentication. Search Engine component allows to search or
browse items by exposing provided interface Product Search and uses required
interface Search Inventory provided by Inventory component. Shopping Cart component
uses Manage Orders interface provided by Orders component during
checkout. Authentication component allows customers to create account, login, or logout
and binds customer to some account.
Accounting subsystem provides two interfaces - Manage Orders and Manage
Customers. Delegation connectors link these external contracts of the subsystem to the
realization of the contracts by Orders and Customers components.
Warehouses subsystem provides two interfaces Search Inventory and Manage
Inventory used by other subsystems and wired through dependencies.

24
 CONCLUSION

Online shopping system is developed by using a proper channel. The objectives

of online shopping are pre-defined on which the whole system work to achieve
them by managing the details of all customers, payments, bills, products,
shopping, and so on. This system helps in boosting efficient services.

All in all, the UML Diagrams work together to achieve the most desired
functions of an Online Shopping System. All of these were designed to guide
programmers and beginners of what should be the behavior and structure of the
Online Shopping System.

By completing all the given Diagrams, the Online Shopping System

development would be much easier and more attainable. So those UML
diagrams were given to assist developer and guide through the project
development journey. All functions of the given UML diagrams can be used as
reference for project development. The ideas presented in UML Diagrams were
all based on Online Shopping System requirements.

UML diagrams can be used to envision the System before it begins or to

document it once was completed. However, UML diagrams can be used in any
sector, not only in software engineering. Its’ overall objective is to help teams to
visualize how the system works or will work.

The UML Diagrams are created to easily understand, update, maintain, and
document online shopping system information. UML diagrams for online
shopping system were used to visualize the project. It can be done before the
development begins or to document its progress once it is completed.

25
 REFERENCES

1 ) Online shopping UML interaction overview diagram example. (uml-diagrams.org)

2 ) Unified Modeling Language (UML) description, UML diagram examples, tutorials and
reference for all types of UML diagrams - use case diagrams, class, package, component,
composite structure diagrams, deployments, activities, interactions, profiles, etc. (uml-
diagrams.org).

3) {Wiring Diagram} Communication Diagram For Online Shopping (pplsmvmt.com).

4) UML class diagram example for online shopping domain ( https://www.uml-diagrams.org)

26