1 of 37

Shoe Store Website

Class Name : WD07

Group Name : Vickies.D Fashion

Instructor : Nguyen Dinh Cuong

Member : Nguyen Lam Chuc

Nguyen Minh Hieu

2 of 37

Objectives

Shoe Store

2

© VTC Academy

  • Introduction to Project
  • Customer Requirements (System Featured)
  • UI Design
  • Use Case
  • UML (Activity Diagram, Class Diagram, Sequence Diagram, ERD, Deployment Diagram)
  • Task Assign
  • Experience Learned
  • Q & A

3 of 37

Introduction to Project

Shoe Store

3

© VTC Academy

5, Development Tool

  • Visual Studio, Visual Studio Code, Draw.io, Github, Chrome DevTools

1, Proposed System

  • Create a website for user to order online, create a website so admin can manage products

​

4, Development Environment

  • Windows, Linux, MacOS, ...

2, Scope of the Project

  • 2 actor: Customer & Admin

3, System Name

  • Vickies.D Fashion (Shoe Store)

Introduction

4 of 37

Customer Requirements (System Features)

1, Customer

  • Websites overview: list, detailed, cart,...
  • Search products by name, brand
  • Filter products by brand, size
  • Sort products by price from low to high, high to low and latest
  • Add products to cart
  • Edit products in cart: increase, decrease or remove
  • Checkout
  • Check order information
  • Login, Register
  • Support responsive in mobile & tablet

​

Shoe Store

4

© VTC Academy

2, Admin

  • Search products in datatables
  • Manage datatables
  • Manage orders
  • Accept orders
  • CRUD
  • Upload Images
  • Login
  • Create new user with role

5 of 37

UI Design (Home Page)

Shoe Store

5

© VTC Academy

Hero Background

6 of 37

UI Design (Home Page)

Shoe Store

6

© VTC Academy

Section Product

7 of 37

UI Design (Home Page)

Shoe Store

7

© VTC Academy

Banner

8 of 37

UI Design (Home Page)

Shoe Store

8

© VTC Academy

Team & Footer

9 of 37

UI Design (Register Page)

Shoe Store

9

© VTC Academy

10 of 37

UI Design (Login Page)

Shoe Store

10

© VTC Academy

11 of 37

UI Design (List Product Page)

Shoe Store

11

© VTC Academy

12 of 37

UI Design (Details Product Page)

Shoe Store

12

© VTC Academy

13 of 37

UI Design (Cart Page)

Shoe Store

13

© VTC Academy

Shopping Cart

14 of 37

UI Design (Cart Page)

Shoe Store

14

© VTC Academy

Checkout

15 of 37

UI Design (Admin Dashboard)

Shoe Store

15

© VTC Academy

16 of 37

UI Design (Admin Datatables)

Shoe Store

16

© VTC Academy

17 of 37

Use Case (Customer)

Shoe Store

17

© VTC Academy

18 of 37

Use Case (Admin)

Shoe Store

18

© VTC Academy

19 of 37

Activity Diagram (Login)

Shoe Store

19

© VTC Academy

20 of 37

Activity Diagram (Register)

Shoe Store

20

© VTC Academy

21 of 37

Activity Diagram (Search)

Shoe Store

21

© VTC Academy

22 of 37

Activity Diagram (Filter)

Shoe Store

22

© VTC Academy

23 of 37

Activity Diagram (Sort)

Shoe Store

23

© VTC Academy

24 of 37

Activity Diagram (Add Products To Cart)

Shoe Store

24

© VTC Academy

25 of 37

Activity Diagram (Edit Cart)

Shoe Store

25

© VTC Academy

26 of 37

Activity Diagram (Checkout)

Shoe Store

26

© VTC Academy

27 of 37

Class Diagram: Model

Shoe Store

27

© VTC Academy

28 of 37

Sequence Diagram (Login)

Shoe Store

28

© VTC Academy

29 of 37

Sequence Diagram (Register)

Shoe Store

29

© VTC Academy

30 of 37

Sequence Diagram (Search)

Shoe Store

30

© VTC Academy

31 of 37

Sequence Diagram (Filter)

Shoe Store

31

© VTC Academy

32 of 37

Entity Relationship Diagram (Database Design)

Shoe Store

32

© VTC Academy

33 of 37

Deployment Diagram

Shoe Store

33

© VTC Academy

34 of 37

Task Assign (to each team member)

Shoe Store

34

© VTC Academy

Vickies.D

Fashion

Shoe Store Website

No

Task name

Description

Start Date

End Date

Member

Self assessment

1

Design & Code

FE

Coding client UI & admin UI

​

​

Chuc

​

2

Code BE

Design database,

handle functions,...

​

​

Hieu

​

3

Draw diagram, UML

​

​

​

Chuc, Hieu

​

4

Write report & slide

​

​

​

Chuc

​

5

Hosting

​

​

​

Hieu

​

35 of 37

Experience Learned

Shoe Store

35

© VTC Academy

SASS

Manage code easily and save time with nested code, variable and mixins ,...

Library

Leverage some libraries into the project

Teamwork

Improve teamwork skill

Project

Get more experience working on real projects

36 of 37

37 of 37

Q & A