Trang web mua sắm online

Mục lục:

I.
Mục tiêu.............................................................................................2
II.
Sử dụng phần mềm..........................................................................2
III.
Chức năng.........................................................................................2
IV. Bảng viết tắt......................................................................................2
V.
ĐẶT TẢ GIAO DIỆN
A. MÀN HÌNH KHÁCH HÀNG
 Sơ đồ màn hình khách hàng............................................................3
MÔ TẢ CÁC MÀN HÌNH
1. Trang chủ................................................................................................4
2. Màn hình bán chạy.................................................................................8
3. Màn hình khuyến mãi.............................................................................9
4. Màn hình hướng dẫn............................................................................10
5. Màn hình góp ý.....................................................................................12
6. Màn hình giỏ hàng................................................................................13
7. Màn hình chi tiêt sản phẩm..................................................................15
8. Màn hình đơn xác nhận........................................................................16
9. Màn hình chi tiết đơn hàng...................................................................17
10. Xem lịch sử mua hàng..........................................................................20
11. Màn hình tìm kiếm................................................................................21
12. Màn hình đăng ký.................................................................................24
13. Màn hình đăng nhập.............................................................................25
14. Màn hình quên mật khẩu......................................................................28
15. Thay đổi mật khẩu................................................................................29

B. MÀN HÌNH TRANG QUAN LÝ

 Sơ đồ màn hình trang quản lý........................................................30
1.
2.
3.
4.
5.
6.
7.
8.
9.

MÔ TẢ CÁC MÀN HÌNH
Màn hình trang quản lý.........................................................................30
Quản Lý Đơn Đặt Hàng........................................................................38
Quản Lý Sản Phẩm..............................................................................45
Quản Lý Thành Viên.............................................................................53
Quản Lý Feedback...............................................................................54
Quản lý Banner.....................................................................................57
Màn hình đăng nhập.............................................................................59
Màn hình quên mật khẩu......................................................................59
Màn Hình thay đổi mật khẩu.................................................................60

C. MÀN HÌNH THÔNG BÁO LỖI
1. Lỗi 404.............................................................................................61
2. Lỗi 500.............................................................................................61
I.

Mục tiêu sản phẩm

Page 1 of 64

Xây Dựng một website mua hàng trực tuyến (Online Shopping) – Mua sắm nhanh
chóng một số sản phẩm thiết bị điện tử (như điện thoại di động, thiết bị số, máy tính
bản,...). Khách hàng sẽ mua sắm một cách thoải mái tại nhà mà không cần đến tận nơi
để mua, tiết kiệm được khá nhiều thời gian để làm những công việc quan trọng hơn,
hon nữa khách hàng sẽ truy cập và tìm kiếm thông tin một các nhanh chóng về các sản
phẩm này.

II.

III.

Phần mềm sử dụng
- Photoshop
- Paint
 Tham khảo trang web thegioisieuso.com
Chức năng sản phẩm
Trang web khách hàng phải có những giao diện chức năng:

•
•
•
•
•
•
•
•

Đăng Nhập

Đăng Kí
Đổi Mật Khẩu
Đổi Thông Tin Cá Nhân
Lấy Lại Mật Khẩu
Xem Lịch Sử Mua Hàng
Mua Hàng
Tìm Kiếm

Trang web quản lí có các chức năng:

•
•
•
•
•
•
•
•
IV.

Quản Lý Khách Hàng
Quản Lý Đơn Hàng
Quản Lý Feedback
Quản Lý Banner
Quản Lý Sản Phẩm
Đăng Nhập
Đổi Mật Khẩu
Lấy Lại Mật Khẩu

Bảng viết tắt

Từ viết tắt

Ý nghĩa

CSDL
KH
ĐH
SP

V.

Cơ sở dữ liệu
Khách hàng
Đơn hàng
Sản phẩm

ĐẶT TẢ GIAO DIỆN
A. Màn hình khách hàng

Page 2 of 64


 Sơ đồ màn hình chính

MÔ TẢ CÁC MÀN HÌNH
1. Trang chủ

Page 3 of 64

Page 4 of 64


Page 5 of 64


STT

Tên

Loại control

Nguồn dữ liệu

Mặc
định

Ghi chú/Mô tả

1

Màn hình

web

2

Đăng nhập,
đăng ký

<a>

Màn hình chính
của web
Đăng nhập hoặc
đăng ký

3

Menu

List Image

Menu

4

Danh sách
sp

Danh sách sp của
trang web

5

Thanh tìm
kiếm

-

6

Logo

Image

Logo trang web

7

Banner

Image

Khung treo quảng
cáo cho trang web

8

9

10

11

12

13

Sản phẩm

nổi bật
Điện thoại di
động
Android box
tv
Thay mặt
kính
Thiết bị số
Máy tính bản -

List
Image
Form
Table
TextField
Button

CSDL

Image
Table
Text
<a>
List
Table
Text
<a>
Image
List
Table

Text
<a>
Image
List
Table
Text
<a>
Image
List
Table
Text
<a>
Image
List

Tìm kiếm sản
phẩm bạn muốn
tìm

Những sản phẩm
bán chạy hoặc
mới
Danh sách các
loại điện thoại di
động

Danh sách các
loại android box tv

Danh sách mặt

kính của một số
điện thoại di động

Danh sách một số
thiết bị số
Danh sách một số

Page 6 of 64


-

Table
Text
<a>
Image
<div>
<a>
Text
Image
Text

14

Xem thêm>>

15

Quảng cáo

-

16

Hotline

<div>

-

Text
<input>
• Radio
• Button
Image
Text

17

Thăm dò ý
kiến

18

Thống kê

-

19

Footer

Text

20

Gạch ngang

<HR>

loại máy tính bản
Liên kết để xem
thêm về một loại
sản phẩm nào đó
Hình ảnh quảng
cáo cho một sản
phẩm nào đó
Tên , sđt, email
của người hỗ trợ
qua đường dây
nóng
Thăm dò ý kiến
người dùng

CSDL

Page 7 of 64

Thống kê sản
phẩm, đang xem,

đã xem, truy cập.
Tên trang web và
người thiết kế
trang web
Vạch ngăn cách


2. Màn hình bán chạy

Tên
Màn hình

Loại control
web

Nguồn dữ liệu

Mặc định

Page 8 of 64

Ghi chú/Mô tả
Web


Sản phẩm
bán chạy

-

Table
Image
Text

Những sản phẩm bán
chạy tại trang web

3. Màn hình khuyến mãi

Tên

Loại control

Nguồn dữ liệu

Mặc định

Page 9 of 64

Ghi chú/Mô tả


Màn hình

web
- Table
Sản phẩm
- Image
Khuyến mãi
- Text

4. Màn hình hướng dẫn

Web
Những sản phẩm
khuyến mãi tại trang
web

Page 10 of 64


Page 11 of 64


Tên
Màn hình

Loại control
web

Cách mua
hàng

-

Giao hàng

Text

Thanh toán

Text

Giỏ hàng

-

Nguồn dữ liệu

Mặc định

Text
Image

Text
Image
Button

Ghi chú/Mô tả
Web
Hướng dẫn các bước
mua hàng

CSDL

5. Màn hình góp ý

Page 12 of 64

Hình thức giao hàng,
khu vực giao hàng

Cách thức thanh toán
tiền
Thống kê số lượng sp,
tổng tiền và có thể xem
giỏ hàng của khách
hàng


Tên
Màn hình

Loại control
web

Nguồn dữ liệu

Mặc định

Họ tên

TextField

Họ tên khách hàng

Email

TextField

Tiêu đề

TextField

Nội dung

TextArea

Mã xác nhận
Nhập mã xác
nhận
Gửi yêu cầu

Image

Email của khách hàng
Tên vấn đề khách
hàng muốn góp ý
Nội dung khách hàng
muốn góp ý
Mã xác nhận

Hủy yêu cầu

CSDL

Ghi chú/Mô tả
Web

TextField

Nhập mã xác nhận

Button

Gửi yêu cầu

Button

Hủy yêu cầu

6. Màn hình giỏ hàng
6.1. Chưa có sản phẩm

Tên
Màn hình
Nội dung

Loại control
web

-

Nguồn dữ liệu

From
Text

Mặc định

Ghi chú/Mô tả
Web

Giỏ hang của khách
hàng

Page 13 of 64


6.2.

Có sản phẩm

Tên
Màn hình

Loại control
web

Nguồn dữ liệu

Giỏ hàng của
bạn

-

Hình ảnh sp

Image

Hình ảnh sp

Xóa

Button

Xóa sp đã chọn

Xóa hết
Tiếp tục mua
hàng
Đặt hàng ngay

Button

Xóa tất cả các sp

Button

Tiếp tục mua hàng

Button

Đặt hàng

From
Text

Mặc định

Ghi chú/Mô tả
Web
Giỏ hàng của khách

hàng

Page 14 of 64


7. Màn hình Chi tiết sản phẩm

Tên
Khung chi tiết

Loại control
Table
- Text
- Image

Nguồn dữ liệu

Hình ảnh sản
phẩm

Image

CSDL

Mô tả sản phẩm

List

CSDL

Đặt hàng

-

Tên sản phẩm

Mặc định

Ghi chú/Mô tả

CSDL

Button
Link

Hình sản phẩm

Đặt sản phẩm vào giỏ
hàng

Page 15 of 64


8. Màn hình đơn xác nhận

Combobox

Page 16 of 64

Tên

Loại control

Đơn đặt
hàng

-

Họ và tên

Text
Image
From
TextField

SĐT liên hệ

TextField

Email

TextField

Tỉnh thành

Combobox

Địa chỉ giao
hàng

TextField

Ghi chú

TextArea

Xác nhận
đơn hàng

Button

Nguồn dữ
liệu

Mặc định

Ghi chú/Mô tả
Tiêu đề
Họ và tên KH
SĐT liên hệ khi giao
hàng
Email của KH khi cần
Chọn tỉnh thành KH hiện
tại đang ở.
Địa chỉ để nhân viên giao
hàng đến KH.
Ghi chú thêm không bắt
buột

CSDL

Xác nhận đơn hàng

7. Lỗi xác nhận đơn hàng

Page 17 of 64


Page 18 of 64


9. Màn hình chi tiết đơn hàng

Tên
Chi tiết đơn
hàng

Loại control
- Text
- Image

Nội dung

-

www.thienly.com

Link

Nguồn dữ liệu

Mặc định

Ghi chú/Mô tả
Tiêu đề
Thông tin về sản phẩm
và thông tin khách
hàng
Trở lại trang chủ

Text
table

Page 19 of 64


10. Xem lịch sử mua hàng

Tên
Lịch sử

Loại control
- Text
- Image
- table

Nguồn dữ liệu
CSDL

Mặc định

Ghi chú/Mô tả
Lịch sử mua hàng của
khách hàng

In Lịch sử

Button

In lịch sử

Quay lại

Button

Trở lại trang chủ

11. Màn hình tìm kiếm
11.1
Không tìm thấy

Page 20 of 64


11.2

Tìm thấy sản phẩm

Tên

Ô tìm kiếm
Go
Hình ảnh
Gạch ngang
Kết quả

Loại control
TextField
Button
Image
- <HR>
Text

Nguồn dữ liệu
CSDL
CSDL

12. Màn hình đăng ký
12.1
Đăng ký

Page 21 of 64

Mặc định

Ghi chú/Mô tả
Nhập tên SP
Bắt đầu tìm kiếm
Hình ảnh SP
Vạch phân cách

Kết quả tìm được


Nguồn dữ
liệu

Tên

Loại control

From đăng ký

-

Tên tài khoản

TextField

Mật khẩu
Nhập lại mật
khẩu
Giới tính

Password

Tên tài khoang khách
hàng
Mật khẩu tài khoản

Password

Nhập lại mật khẩu

Email

TextField

Số điện thoại

TextField

Đăng ký

Button

Email của khách hàng
Số điện thoại của
khách hàng
Đăng ký

Quay lại

Button

Quay lại

G+
F
Đăng nhập
12.2

Image
Text
Form

Radio button

-

Mặc định

Ghi chú/Mô tả
Mẫu đăng ký

Chọn Nam

Image
Link
Image
Link
Link
Text

Lựa chọn giới tính

Đăng nhập bằng gmail
Đăng nhập bằng
facebook
Đến from đăng nhập

Lỗi đăng ký

Page 22 of 64


Page 23 of 64


Page 24 of 64


8. Đăng ký thành công

Tên

Loại control

Nguồn dữ liệu

Thông tin khách
hàng

Text

CSDL

Page 25 of 64

Mặc định

Ghi chú/Mô tả
Thông tin khi khách
hàng đăng ký thành
công