<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>BÁO CÁO MẪU – NGÀNH THIẾT KẾ WEBSITE LUXURYSHOP</b>

<i><b> </b></i>

<b> </b>Giáo viên hướng dẫn: <b>Trần Bá Hộ</b>

Sinh viên thực hiện: Đỗ Tuấn KiệtLớp: WD18306

<b> </b>

TPHCM, 04/2019

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

L I NÓI Đ UỜẦ

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b>Too long to read onyour phone? Save to</b>

read later on yourcomputer

Save to a Studylist

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

1 PHÂNTÍCH

1.1 H

I NỆ TR NGẠ

(Đ T V N Đ )ẶẤỀ

Luxury Shopping là nhà nhập khẩu và cung cấp đồng hồ chính hãng hàng đầu tại Việt Nam, với hơn 50thương hiệu đồng hồ nổi tiếng thế giới: Rolex, OMEGA, TAG Heuer, IWC,... Hiện cửa hàng chưa cówebsite giới thiệu các hàng hóa đến người tiêu dùng và cho phép người tiêu dùng đặt hàng. Khách hàngkhông cần có tài khoản tại trang web mới được đặt hàng. Và họ muốn thu nhận được các phản hồi từngười tiêu dùng về các mặt hàng để cải tiến và nâng cao chất lượng nhằm phục vụ khách hàng ngày mộttốt hơn.

1.2 Y

ÊUC UẦ HỆTH NGỐ

Luxury Shopping mong muốn có một website nhằm giới thiệu hàng hóa và thu nhận ý kiến của ngườitiêu dùng về các hàng hóa đang kinh doanh. Website cũng có các chức năng cho người quản trị để họ cóthể quản lý hàng hóa, phân loại hàng hóa, quản lý khách hàng, quản lý các bình luận từ khách hàng vềcác hàng hóa cũng như thống kê hàng hóa theo loại…

Yêu cầu cụ thể được đặt ra như sau:

<b>✔ Website bán hàng dành cho người tiêu dùng</b>

o Cấu trúc chung của tất cả các trang web trong website phải:

▪ Chứa loại hàng loại hàng hóa để khách hàng dễ dàng tìm kiếm hàng hóa theotừng loại.

▪ Tìm kiếm hàng hóa theo tên, loại, thương hiệu.

▪ Hiển thị danh sách các mặt hàng được quan tâm nhiều nhất (xem nhiều nhất),bán chạy nhất, thịnh hành nhất, mới, nổi bật.

▪ Đăng nhập/thông tin người tiêu dùng sau khi đã đăng nhậpo Trang chính của website:

Trưng bày các mặt hàng đặc biệt được nhân viên quản trị chỉ định. Các mặt hàng đặcbiệt có thể được trình bày theo cách nào đó sao cho dễ nhìn (có thể sử dụng slideshow)o Trang trưng bày hàng hóa:

Khi người dùng chọn loại hàng hoặc tìm kiếm theo tên thì danh sách hàng hóa thỏa mãnyêu cầu được hiện ra. Mỗi mặt hàng cần hiển thị hình ảnh, tên, đơn giá và giảm giá nếucó. Khi người dùng nhấp vào hình của hàng hóa thì sẽ chuyển đến trang hiển thị chi tiếthàng hóa đồng thời tăng số lần xem.

o Chi tiết hàng hóa

Yêu cầu của trang web này như sau

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

▪ Thông tin chi tiết của mặt hàng được chọn▪ Mỗi mặt hàng có danh sách hình ảnh (gallery).▪ Danh sách các mặt hàng cùng loại với mặt hàng được chọn▪ Cho phép khách hàng gửi bình luận về hàng hóao Các trang quản lý tài khoản sử dụng

▪ Đăng nhập▪ Đăng ký▪ Quên mật khẩu▪ Đổi mật khẩu

▪ Cập nhật thông tin tài khoản

<b>✔ Website bán hàng dành cho người quản trị</b>

o Các trang quản lý

Các trang này cần được trang bị các chức năng xem, thêm, xóa, sửa, tìm kiếm và phântrang một cách hợp lý

▪ Quản lý hàng hóa▪ Quản lý loại hàng▪ Quản lý khách hàng▪ Quản lý bình luận về hàng hóa

<i><b>o Tổng hợp thống kê</b></i>

▪ Thống kê hàng hóa theo loại, cho phép hiển thị dưới dạng biểu đồ▪ Thống kê bình luận theo hàng hóa

▪ Thống kê đơn hàng▪ Thống kế doanh thu

<b>✔ Yêu cầu về bảo mật</b>

o Tất cả các form nhập phải được kiểm soát dữ liệu một cách hợp lý

o Khách hàng chưa đăng nhập không được phép gửi bình luận về hàng hóa cũng như đổimật khẩu, cập nhật thơng tin tài khoản

o Chỉ có các nhân viên quản trị mới được phép thực hiện các chức năng quản trị

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

o Khách hàng có thể đặt hàng và bình luận đánh giá về các hàng hóa đã đặt h

<b>✔ Yêu cầu về môi trường công nghệ</b>

o Website phải được xây dựng với PHP và MySQLo Kết hợp với javascript, ajax

1.3 U

SECASE

Use case là sơ đồ mơ tả các tình huống sử dụng của người dùng trong hệ thống. Theo yêu cầu củawebsite chúng ta có thể phác thảo sơ đồ use case như sau

1.3.1 Đ c t ch c năngặảứ

1.3.1.1 Ch c năng dành cho khách hàngứ

✔ Cấu trúc chung của các trang web:

Hiển thị loại hàng loại hàng, form tìm kiếm theo tên, 3 mặt hàng được xem nhiều nhất và formđăng nhập hoặc thông tin khách hàng sau khi đã đăng nhập. Nếu người đăng nhập có vai trị lànhân viên thì hiển thị liên kết đến trang quản trị.

✔ Tìm hàng theo loại hàng:

Liệt kê các mặt hàng theo loại được chọn bởi khách hàng. Thông tin mỗi mặt hàng gồm tên, ảnhvà đơn giá. Liên kết đến trang chi tiết hàng hóa.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

✔ Tìm hàng theo tên hàng:

Liệt kê các mặt hàng theo tên hàng hoặc tên loại theo yêu cầu tìm kiếm của khách hàng. Thôngtin mỗi mặt hàng gồm tên, ảnh và đơn giá. Liên kết đến trang chi tiết hàng hóa.

✔ Xem thơng tin chi tiết hàng hóa:

Hiển thị thơng tin chi tiết của mặt hàng được chọn bởi khách hàng và các mặt hàng cùng loại cógắn liên kết đến trang chi tiết hàng hóa để khách hàng có thể xem luôn mà không cần phải trởlại trang liệt kê hàng hóa.

✔ Gửi bình luận:

Gửi bình luận về mặt hàng đang xem, chức năng này chỉ được thực hiện sau khi khách hàng đãđăng nhập. Các bình luận về mặt hàng cũng được liệt kê ra để khách hàng có thể xem.✔ Quản lý tài khoản:

o Cập nhật thông tin tài khoản

Cập nhật lại thơng tin tài khoản của mình (không cho phép cập nhật tên đăng nhập)DS đã comment

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

Thực hiện được các chức năng xem, thêm, xóa, sửa. Nhân viên quản trị khơng được phép xóachính mình.

✔ Tổng hợp và quản lý bình luận

Tổng hợp các bình luận của khách hàng từng hàng hóa, thơng tin tổng hợp có cấu trúc

<b>Tên hàng hóaSố bình luậnNgày mới nhấtNgày cũ nhất</b>

Hiển thị chi tiết các bình luận về mặt hàng được chọn và cho phép xóa các bình luận khơng phùhợp.

✔ Tổng hợp - thống kê hàng hóa

Tổng hợp thơng tin hàng hóa từng loại hàng. Thơng tin tổng hợp cần được trình bày có cấu trúcsau

<b>Loại hàngSố hàng hóaGiá trung bìnhGiá thấp nhấtGiá cao nhất</b>

Hiển thị biểu đồ hình miến theo tỷ lệ số lượng của từng loại.

1.3.2 Đ c t các th c thặảựể

Sau đây là đặc tả các thực thể và thuộc tính của chúng cần thiết cho việc xây dựng website xshop.✔ Loại hàng

o Mã loại hàngo Tên loại hàngo Sắp xếp: 1 2 3 4 ✔ Hàng hóa

o Mã hàng hóao Tên hàng hóao Hình ảnho Đơn giá

o Mức giảm giá (tính theo %)o Mã loại hàng

o Ngày nhậpo Mơ tả hàng hóa

o Trạng thái đặc biệt. Những mặt hàng đặc biệt được hiện lên trang chủ và được trình bàyvới một định dạng khác

o Số lượt xem. Để ghi nhận số lượt xem để đánh giá độ quan tâm của khách hàng.o

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

✔ Khách hàng

o Mã khách hàng (tên đăng nhập)o Mật khẩu đăng nhậpo Họ và têno Hình ảnho Email

o Trạng thái kích hoạt. Những người dùng đã được kích hoạt mới được đăng nhập vàowebsite

o Vai trò. Để phân biệt là quản trị hay người tiêu dùng.✔ Bình luận

o Mã bình luậno Nội dung

o Mã hàng hóa được bình luậno Mã khách hàng gửi bình luậno Thời gian gửi bình luận

2 THI TẾKẾ

2.1 M

ƠHÌNHTRI NỂ KHAI

Website giới thiệu hàng hóa của X-Shop sau khi hồn thành sẽ được triển khai theo mơ hình như sơ đồsau.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

✔ Thuê host có hỗ trợ php và mysql và triển khai website luxuryshop.com lên đó✔ Nhân viên quản trị vào website để quản lý

✔ Người tiêu dùng sử dụng trình duyệt web để truy cập, tìm kiếm, đặt hàng và gửi bình luận vềhàng hóa,

O

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

2.2 T

HI TẾ KẾ

2.2.1 <b>Thiết kế giao diện (figma)</b>

2.2.1.1 Trang chủ (hình chụp file figma kèm link đã public - 1 trang)

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Link Figma:

id=0%3A1&mode=design&t=XZmwmWln2K0ddHAt-1

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

Trang con (hình chụp file figma kèm link đã public - 1 trang)

Link Figma:

id=0%3A1&mode=design&t=XZmwmWln2K0ddHAt-1

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>Thiết kế CSDL</b>

Dựa vào đặc tả thực thể và cụ thể làm việc với x-shop bạn có thể thiết kế sơ đồ quan hệ và chi tiết cácthực thể để từ có có đủ thơng tin cài đặt CSDL lên MySQL.

▪ơ ồS đ quan h th c thệựể

2.2.2.1 ERD Diagram level 1

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

2.2.2.2 ERD Diagram level 2

<i><b>Yêu cầu ràng buộc quan hệ:</b></i>

✔ Khách hàng – Bình luận:

o Update: cascade, Delete: No Action✔ Loại – Hàng hóa

o Delete: Cascade✔ Hàng hóa – Bình luận

o Delete: No Action

2.2.3 Thi t k chi ti t các th c thếếếựể

2.2.3.1 Lo i hàngạ

Bảng catalog lưu thơng tin loại hàng có cấu trúc như sau

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>Tên cộtKiểuRàng buộcGhi chú</b>

2.2.3.2 Hàng hóa

Bảng products lưu thơng tin các các mặt hàng có cấu trúc như sau

pricelow DOUBLE(10,2) DEFAULT 0,00 Giá khuyến mãipriceold DOUBLE(10,2) DEFAULT 0,00 Giá trước khuyến mãi

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

view INT(6) DEFAULT 0 Lượt xem

2.2.3.3 Khách hàng

Bảng user lưu thông tin người dùng gồm cả người tiêu dùng và nhân viên quản trị có cấu trúc như sau

kichhoat TINYINT(1) DEFAULT 0 Kích hoạt tài khoản

2.2.3.4 Giá hàng hóa theo màu

Bảng product_color lưu thơng tin giá hàng hóa theo màu có cấu trúc như sau

id INT(5) PK, NOT NULL, Tự tăng ID hàng hóa theo màu

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

color VARCHAR(20) NOT NULL Màu hàng hóa

2.2.3.5 Thươ ng hi uệ

Bảng brand lưu thơng tin các thương hiệu có cấu trúc như sau

2.2.3.6 Đ n hàngơ

Bảng donhang lưu thơng tin các thương hiệu có cấu trúc như sau

trangthai VARCHAR(50) NOT NULL Trạng thái đơn hàng

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

emailnhan VARCHAR(50) NULL Email người nhận

diachidat VARCHAR(100) NOT NULL Địa chỉ người đặt

ptthanhtoan VARCHAR(50) NOT NULL Phương thức thanh tốn

2.2.3.7 Cart

Bảng cart lưu thơng tin các hàng hóa phẩm thuộc đơn hàng nào và của khách hàng nào có cấu trúc nhưsau

Id_product_color INT(5) FK4, NOT NULL ID hàng hóa theo màu

Price_product_color DOUBLE(10,2) NOT NULL Giá hàng hóa theo màu

2.2.3.8 Voucher

Bảng voucher lưu thơng tin các mã giảm giá có cấu trúc như sau

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>Tên cộtKiểuRàng buộcGhi chú</b>

2.2.3.9 Đã dùng voucher

Bảng dadung_voucher lưu thông tin các khách hàng đã sử dụng những voucher nào (mỗi mã giảm giákhách hàng chỉ được dùng 1 lần duy nhất) có cấu trúc như sau

2.2.3.10 Bình lu nậ

Bảng comment lưu thơng tin các bình luận của khách hàng về các hàng hóa có cấu trúc như sau

id INT (9) PK, NOT NULL, Tự tăng Mã bình luận

id_product INT(5) FK, NOT NULL Mã hàng hóa được bình luận

<b>Sơ đồ database </b>(<i><b>chụp phần design trong phpMyAdmin</b></i>)

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

1.1 G

IAODI NỆ WEBSITE

1.1.1 Sitemap

Website xshop được chia làm 2 phần dành riêng cho 2 đối tượng khác nhau là khách hàng và nhân viênquản trị.

✔ Phần Site: dành cho khách hàng chứa các trang web chức năng giúp khách hàng dễ dàng tìmkiếm hàng hóa mình cần, xem thơng tin, gửi bình luận và quản lý tài khoản của mình✔ Phần Admin: dành cho nhân viên quản trị gồm các trang web quản lý, thống kê dữ liệu.

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

1.1.2.1 C u trúc chung (layout)ấ

1.1.2.2 Trang chủ

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

1.1.2.3 Trang qu n lý lo i hàngả ạ

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

1.1.2.4 Trang qu n lý hàng hóaả

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

1.1.2.5 Trang qu n lý khách hàngả

1.1.2.6 Trang t ng h p và qu n lý bình lu nổ ợ ả ậ

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

1.1.2.7 Trang t ng h p th ng k hàng hóaổ ợ ố ế

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

1.1.3 Thi t k ph n khách hàngếếầ

1.1.3.1 C u trúc chung (layout)ấ

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

1.1.3.2 Trang chủ

1.1.3.3 Trang hàng hóa

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

1.1.3.4 Trang chi ti t hàng hóaế

1.1.3.5 Trang đăng ký

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

1.1.3.6 Trang đăng nh pậ

1.1.3.7 Trang đ i m t kh uổ ậ ẩ

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

✔ Thương hiệu

✔ Giỏ hàng

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

✔ Thanh toán

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

2TH CỰHI NỆDỰÁN

3.0. Sơ đồ quan hệ database (chụp màn hình thiết kế database)3.1. Thư viện

- Function kết nối database

- Function thực thi câu lệnh SQL (thêm, sửa, xóa, search, show, …)- Các function tương tác với bảng loại hàng hàng hóa

- Các function tương tác với bảng hàng hóa- Các function tạo giỏ hàng, đơn hàng- Các function tương tác với tài khoản- Các function về bình luận- Các function về thương hiệu3.2. Code Admin

- Trang quản lý loại hàng- Trang quản lý hàng hóa- Trang quản lý khách hàng- Trang quản lý đơn hàng- Trang quản lý bình luận- Trang quản lý thương hiệu- Trang quản lý đơn hàng- Trang thống kê3.3. Code User

- Trang chủ - Trang loại hàng - Trang hàng hóa - Trang thương hiệu- Trang liên hệ- Trang giỏ hàng- Trang thanh toán- Trang tài khoản

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

3 KI MỂL IỖ

3.1 K

I MỂ L IỖ GIAODI NỆ

(

TH NGỐ NH TẤ

VỀ THI TẾ KẾ

)

3.1.1 thống nhất màu

Màu tiêu trang trang liên hệ, tiêu đề sai not passfix lại màu gióng trangchủ, trang giới thiệuMật khẩu Ít nhất từ 8 ký trở lên với ký tự in

hoa in thương, kí tự đặt phải

3.1.2 thống nhất về size3.1.3 thống nhất về element

3.2 K

I MỂ L IỖ DỮLI UỆ TRÙNG

3.3 K

I MỂ L IỖ DỮLI UỆ Đ NƠ HÀNG

3.4 K

I MỂ L IỖ FORMQU NẢ

LÝ KHÁCH HÀNG

Mật khẩu Ít nhất từ 8 ký trở lên với ký tự in hoa in thương, kí tự đặtphải

Họ và tên Khơng để trống

Chỉ chứa alphabet và ký tự trắngEmail Không để trống

Đúng định dạng email

</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">

3.5 K

I MỂ L IỖ FORMQU NẢ

LÝ LO IẠ HÀNG

Không trùng tên

3.6 K

I MỂ L IỖ FORMQU NẢ

LÝ HÀNG HÓA

3.8 K

I MỂ L IỖ FORM ĐĂNG KÝ

</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">

3.10K

I MỂ L IỖ FORM QUÊN M TẬ KH UẨ

Đúng dạng email

✔ Đăng ký host free / có phí: Đăng ký host free✔ Upload website lên host: trang web luxury.com

✔ Export database từ local và import lên host, cập nhật lại database, username và password.✔ Đăng ký domain

✔ Trỏ domain vào host✔ Các cách upload web

o Cpanel của hosting (chụp màn hình)o Sử dụng tool upload (chụp màn hình)✔ trang web: luxury.com

✔ Link Source Code Google Drive: