Software Construction & Development

Project Design Document

12/9/2024

Submitted by:
(2021-SE-47) Rehan
(2021-SE-49) Mohammad Numan
(2021-SE-48) Sadam Hussain

Submitted to:
Ma’am Alina Munir

University of Engineering & Technology, Lahore

Department of Computer Science

1
 Table of Contents
Table of Contents ---------------------------------------------2
Table of Figures -----------------------------------------------3
Title --------------------------------------------------------------4
Document Authors -------------------------------------------4
Introduction ----------------------------------------------------4
Goals and Objectives ---------------------------------------5
Scope -------------------------------------------------------------5
Audience ---------------------------------------------------------6
Technology Stack ----------------------------------------------6
Functional Requirements ------------------------------------7
Non-Functional -Requirements -----------------------------8
Non-Functional -Requirements -----------------------------9
UML Diagrams -----------------------------------------------10
ER Diagram ---------------------------------------------------24
Wireframes -Diagram ---------------------------------------24
3NF DB Design -----------------------------------------------27

2
 Table of Figures
UML Diagrams ------------------------------------------------------------------------10
1. Use case Diagram -----------------------------------------------------------------11
2. Activity Diagram ------------------------------------------------------------------11
Activity Diagram for Customer Side ------------------------------------------12
a.
b. Activity Diagram for Admin Side ----------------------------------------------13
c. Activity Diagram for Dermatologist Side ------------------------------------14
3. State Diagram ---------------------------------------------------------------------------------15
a. State Diagram for Customer Side ---------------------------------------------15
b. State Diagram for Admin Side -------------------------------------------------16
c. State Diagram for Dermatologist Side ---------------------------------------17
4. Sequence Diagram ---------------------------------------------------------------18
a. Sequence Diagram for Customer Side ---------------------------------------18
b. Sequence Diagram for Admin Side -------------------------------------------19
c. Sequence Diagram for Dermatologist Side ----------------------------------19
5. Communication Diagram ------------------------------------------------------ 20
6. Component Diagram -------------------------------------------------------------21
7. Deployment Diagram ------------------------------------------------------------22
8. Class Diagram ---------------------------------------------------------------------23
ER Diagram ----------------------------------------------------------------------------24
Wireframes Diagram -----------------------------------------------------------------24
• Sign up ------------------------------------------------------------------------------------------24
• Login --------------------------------------------------------------------------------------------23
• Product page -----------------------------------------------------------------------------------23
• View Cart ---------------------------------------------------------------------------------------25
• Admin Side -------------------------------------------------------------------------------------26
• Dermatologist Side ---------------------------------------------------------------------------27

3NF DB Design -------------------------------------------------------------27

• User ----------------------------------------------------------------------------------------------27
• Address -----------------------------------------------------------------------------------------28
• Product -----------------------------------------------------------------------------------------28
• Category ----------------------------------------------------------------------------------------28
• Payment ----------------------------------------------------------------------------------------29
• Cart History -----------------------------------------------------------------------------------29

3
 Skin Care Product System
Title:
Skin Care Product System
Document Authors:
Rehan
Mohammad Numan
Sadam Hussain

Introduction
Overview of the software purpose or need: The
system aims to provide consumers with a seamless
platform to purchase skincare products, access
online skincare resources, and get personalized
skincare recommendations. It simplifies the
shopping process by offering easy access to
products tailored to specific skin concerns, and it
provides valuable beauty tips and articles from
dermatologists.

4
Goals and Objectives
High-level goals of the software:
• Enable consumers to purchase skincare
products directly and conveniently.
• Provide personalized skincare
recommendations based on individual skin
concerns.
• Offer educational content and beauty tips from
dermatologists and professionals.
• Ensure secure and efficient management of
product listings, user accounts, and
transactions.
Scope
Description of what the project aims to achieve:
• Development of a comprehensive e-commerce
platform for skincare products.
• Integration of personalized skincare
consultation features.
• Creation of an informative content hub with
articles and tips from skincare experts.
• Implementation of user authentication, role
management, and secure payment processing.
5
Audience
Identify the stakeholders who will use this
document:
• Admin Users: Manage product listings, user
accounts, and content.
• Dermatologists: Share beauty tips, articles,
and product endorsements.
• Customers: Browse, purchase products, and
access skincare advice.
Technology Stack
Programming languages, frameworks, libraries,
and tools selected:
HTML, CSS, Java, MySQL

6
Functional Requirements:
1. The system should be able to create and manage
product listings with details such as name, category,
ingredients, manufacturing date, and expiry date.
2. The system should allow admin to add, update, and
delete products.
3. The system should categorize products into relevant
categories.
4. The system should allow dermatologists and
concerned professionals to create and share beauty
tips, blogs, and product endorsements.
5. The system should implement user authentication
and authorization for managers, dermatologists, and
consumers.
6. The system should allow users to create and manage
their accounts.
7. The system should differentiate between admin,
dermatologist, and consumer roles.
8. The system should enable consumers to browse and
search for products by category or skin concern.
9. The system should display product details, including
ingredients, manufacturing date, and expiry date.
10. The system should allow consumers to add products
to their shopping carts.
11. The system should implement a secure checkout
process for purchasing products.

7
12. The system should provide a consultation feature
for consumers to input their skin concerns and
receive product recommendations.
13. The system should display articles and beauty tips
shared by dermatologists and concerned
professionals.
14. The system should allow users to search and filter
articles based on their interests.
15. The system should send email notifications to
customers, including order confirmation, shipping
updates, and skincare tips newsletters.
16. The system should allow customers to leave detailed
reviews and ratings for skincare products.
17. The system should provide filters and sorting options
for products and articles.
18. The system should allow for easy organization and
categorization of products by type or skin concern.
19. The system should provide admin with tools to
monitor and manage user accounts, content, and
products.
20. The system should allow admin to manage, add, edit,
and delete user accounts.

8
Non-Functional Requirements:
1. The system must ensure that the website responds
quickly to user interactions, such as page loading
and product searches.
2. The system must be designed to handle increased
traffic during peak periods, such as sales events,
without significant performance degradation.
3. The system must aim for high availability, with
minimal downtime for maintenance.
4. The system must protect user data, including
personal information and payment details, with
strong encryption and security measures.
5. The system must implement robust authentication
and authorization mechanisms to ensure that only
authorized users can access sensitive areas of the
website.
6. The system must ensure secure and encrypted
transactions during the purchase process.
7. The system should be designed to handle system
failures gracefully.
8. The system should create an intuitive and user-
friendly interface that is easy to navigate, ensuring a
positive user experience.
9. The system should ensure that it complies with
relevant laws and regulations, such as data
protection and e-commerce regulations.

9
10. The system should ensure that it is responsive and
functions well.
11. The system should be designed to handle growth in
the number of products, articles, and users over
time.
12. The system should ensure that system-generated
emails, such as order confirmations and newsletters,
are reliably delivered to users' inboxes and avoid
spam filters.
UML Diagrams:
We have following UML diagrams:
• Use case Diagram
• Activity Diagram
• State Diagram
• Sequence Diagram
• Communication Diagram
• Component Diagram
• Deployment Diagram
• Class Diagram

10
Usecase Diagram:

Activity Diagram:
Activity Diagram for Customer Side:

11
12
Activity Diagram for Admin Side:

13
Activity Diagram for Dermatologist Side:

14
State Diagram:
State Diagram for Customer Side:

15
State Diagram for Admin Side:

16
State Diagram for Dermatologist Side:

17
Sequence Diagram:
Sequence Diagram for Customer Side:

18
Sequence Diagram for Admin Side:

Sequence Diagram for Dermatologist Side:

19
Communication Diagram:

20
Component Diagram:

21
Deployment Diagram:

22
Class Diagram:

23
ER Diagram:

User interface (UI) design:

Wireframes Diagram:
Signup:

24
Login:

Product Page:

25
View Cart Page:

Admin Side:

26
 Dermatologist Side:

3NF DB Design:
User:
U- Name Password UserType Gender DOB Email Phone
ID
1 Rehan 123 Admin Male 30/5/2003 [email protected] 03219876512

2 Sadam 456 Dermatologist Male 9/9/2005 [email protected] 03124567891

3 Numan 789 Customer Male 9/7/2007 [email protected] 09876543219

4 Rizwan 321 Customer Male 30/12/2003 [email protected] 03219876512

5 Khan 654 Customer Male 24/9/2001 [email protected] 03124567891

6 Fawad 987 Customer Male 14/12/2007 [email protected] 09876543219

27
Address:

U-ID UserType Address

1 Admin Nil
2 Dermatologist Nil
3 Customer Kasur

Product:

P-ID Name Ingredients Quantity E-date M-date Price

1 Lifebuoy Ritha 87 1/1/2025 1/1/2020 400

2 Pounds Ammala 40 11/1/2024 11/1/2020 450

3 Clean & Sulphite 30 2/2/2024 2/2/2021 500

Clear

Category:

ID Category-Type Product-ID
1 Facewash 2
2 Facewash 3
3 Facewash 4
4 Soap 1
5 Soap 9
6 Soap 5
7 Serum 6
8 Serum 7

28
Payment:

U-ID CardNo Expiry-Date CVV

5 876876 2/2/2025 789

4 687687 2/2/2026 987

3 786786 2/2/2024 786

Cart History:

U-ID P-ID Quantity Price

5 1 2 400

4 2 1 450

3 3 1 500

29