Xây dựng website bán hàng nội thất trực tuyến

Phạm vi dự án Giai đoạn 1 Phần hiển thị cho người mua Thiết kế giao diện web Tự thiết kế và gửi cho khách hàng duyệt Hiển thị thông tin sản phẩm Người mua khi vào trang web có thể xem th

Quản lý version.

Ngày Version Mô tả Người cập nhật

Mục Lục

I Giới thiệu

1 Tổng quan

Website được xây dựng nhằm mục đích quảng bá sản phẩm, xây dựng một kênh bán hàng trực tuyến nhằm mở rộng phương thức bán hàng, mang thông tin sản phẩm đến cho người tiêu dùng dễ dàng hơn Đồng thời nhận đặt hàng từ phía người tiêu dùng Sau đó công ty sẽ tiến hành liên lạc để xử

lý đơn đặt hàng của người tiêu dùng

Website phiên bản đầu tiên không hỗ trợ việc thanh toán qua mạng và quản

lý tài khoản cũng như đơn hàng của người tiêu dùng Các chức năng này sẽ được hiện thực trong giai đoạn 2

2 Phạm vi dự án

Giai đoạn 1

Phần hiển thị cho người mua

Thiết kế giao diện web Tự thiết kế và gửi cho khách hàng duyệt

Hiển thị thông tin sản phẩm Người mua khi vào trang web có thể xem thông tin sản

phẩm chi tiết trên trang web, sản phẩm được phân loại dựa trên loại sản phẩm

Website hỗ trợ hai ngôn ngữ:

tiếng Anh và tiếng Việt

Người mua có thể xem website ở hai chế độ ngôn ngữ: tiếng Anh hoặc tiếng Việt Website cung cấp cơ chế dịch chuyển giữa hai chế độ này mà không làm ảnh hưởng đến việc mua hàng, giỏ hàng,

Webiste hiển thị số người đã

ghé thăm Hiện thị thông tin bên góc trái màn hình số người đã ghé thăm website Mua hàng Người mua sau khi xem sản phẩm có thể chọn mua

sản phẩm bằng cách nhấn vào nút mua hàng, khi đó sản phẩm sẽ được đưa vào giỏ hàng của người mua Trang giỏ hàng sẽ hiện ra để người mua kiểm tra lại thông tin.

Quản lý giỏ hàng Khách hàng có thể cập nhật giỏ hàng của mình: xoá

một số sản phẩm trong giỏ hàng, thay đổi số lượng cần mua hoặc xoá toàn bộ các sản phẩm trong giỏ hàng của mình

Trang chi tiết sản phẩm - Thể hiện chi tiết sản phẩm

- Hiện một hình của sản phẩm đồng thời có chức năng xem ảnh lớn, trong đó sẽ hiển thị tất cả các ảnh có sẵn của sản phẩm

- Link yahoo chat, click vào đó để chát với bộ phận sales của bên bán

- Chức năng email sản phẩm đến bạn bè: gửi thông tin sản phẩm, lời nhắn, đường link tới sản phẩm vào hộp mail theo yêu cầu của người mua

- Hiển thị 4 link bằng hình ảnh tới 4 categories cùng cấp với category của sản phẩm này

Trang chủ - Thể hiện những sản phẩm mới, sản phẩm mới là

những sản phẩm được đánh dấu là sản phẩm mới trong CSDL

- Trang chủ thể hiện 3 sản phẩm một hàng, mỗi cell chứa 1 hình ảnh của sản phẩm, tên sản phẩm, giá sản phẩm và nút mua hàng Tên sản phẩm và hình sản phẩm đều link tới trang sản phẩm chi tiết.

- Thanh menu có các button:

+ Trang chủ: hiển thị trang chủ + Giới thiệu: hiển thị nội dung giới thiệu về công ty + Dịch vụ: hiện thị nội dung các dịch vụ có sẵn của công ty

+ Thanh toán: thông tin về cách thức thanh toán sẽ hiện ở đây

+ Bảo hành: hiển thị thông tin bảo hành.

+ Liên hệ: thông tin liên lạc, cửa hàng, chi nhánh, ở đây.

+ 2 link/ button để chuyển đổi tiếng Anh/ tiếng Việt

- Đường dây nóng: hiển thị điện thoại, email,

Đặt hàng Khi người mua đã lựa chọn xong sản phẩm và từ giỏ

hàng nhấn nút đặt hàng, website sẽ chuyển sang quá trình đặt hàng như sau:

- Bước nhập thông tin liên lạc: có kiểm tra thông tin được nhập đầy đủ hay không.

- Sau khi nhấn nút tiếp tục ở bước trên, website chuyển sang bước xác nhận đơn hàng.

- Khi người mua nhấn nút đặt hàng ở trang này, website sẽ gửi email đến người mua và bộ phận sales của công ty.

- Hiện trang cảm ơn

- Kết thúc quá trình đặt hàng.

Phần quản trị website

Login Phải có quyền quản trị mới vào được phần này

Thông tin dịch vụ Cho phép cập nhập thông tin dịch vụ mà hiển thị trên

website khi nhấn nút Dịch Vụ Bảo hành và hậu mãi Cho phép cập nhập thông tin Bảo hành và hậu mãi mà

hiển thị trên website khi nhấn nút Bảo hành

Thanh toán Cho phép cập nhập thông tin Thanh toán mà hiển thị

trên website khi nhấn nút Thanh toán Liên hệ Cho phép cập nhập thông tin Liên hệ mà hiển thị trên

website khi nhấn nút Liên hệ Đường dây nóng Cho phép cập nhập thông tin Đường dây nóng mà hiển

thị trên website khi nhấn nút Đường dây nóng Thoát Thoát khỏi phiên làm việc

Quản lý sản phẩm - Thêm, xóa , sửa thông tin, hình ảnh các categories

- Thêm, xóa, sửa thông tin, hình ảnh sản phẩm

Giai đoạn 2

Phần hiển thị cho người mua

Quản lý tài khoản người tiêu

dùng Khi người tiêu dùng mua hàng, họ phải đăng khi thông tin để tạo tài khoản mới hoặc login vào hệ thống với tài

khoản đã có để tiến hành đặt hàng

Quản lý đơn hàng của người

tiêu dùng

Người tiêu dùng họ có thể xem lại các đơn hàng mà họ

đã mua trước đây để kiểm tra trạng thái xử lý của từng đơn hàng.

Hỗ trợ chức năng thanh toán

trực tuyến Hỗ trợ thanh toán trên website bằng các loại thẻ visa, master,… hoặc qua đối tác trung gian ví dụ như ngân

lượng, payoo, paypal…

Phần quản trị website

Quản lý toàn bộ đơn hàng - Cho phép người quản trị quản lý đơn hàng của người

tiêu dùng: tìm kiếm, xem, cập nhật trạng thái hoặc hủy đơn hàng.

- Không cho phép chỉnh sửa thông tin sản phẩm trong đơn hàng.

II Đặc tả chi tiết

1 Template

Website có ba template

- Category template dành cho phần category bao gồm các links như sau

Menu phía trên

• Trang chủ: hiển thị trang chủ của website

• Giới thiệu: hiện trang giới thiệu về công ty

• Dịch vụ: giới thiệu các dịch vụ của công ty

• Bảo hành: thông tin về chính sách bảo hành sản phẩm của công ty

• Thanh toán: các hình thức thanh toán được công ty chấp nhận

• Liên hệ: thông tin cửa hàng, đại lý, địa chỉ, điện thoại liên hệ

• Link chuyển đổi sang tiếng Anh

• Link chuyển đổi sang tiếng Việt

Cột bên trái

• Menu về loại sản phẩm cấp 1, cấp 2

• Ngay phía dưới menu sản phẩm là GIỎ HÀNG, hiện thông tin bao nhiêu sản phẩm đã chọn, tổng số tiền của sản phẩm và link Giỏ Hàng tới trang giỏ hàng.

• Tiếp dưới đó là phần HOTLINE, hiện các kênh liên lạc nhanh chóng của công ty

• Ngay dưới đó là hiển thị máy đếm xem đã có bao nhiêu người vào thăm website

• Phần cuối cùng là banner quảng cáo, công ty cũng nhận quảng cáo trên website.

- Checkout template dành cho qui trình đặt hàng Template này hoàn toàn giống với Category template chỉ khác là nó không bao gồm phần cột bên trái

- Admin template dành cho phần admin bao gồm

• Lời giới thiệu: cho phép chỉnh sử nội dụng lời giới thiệu

• Thông tin dịch vụ: cho phép chỉnh sửa thông tin dịch vụ

• Bảo hành và hậu mãi: cho phép chỉnh sửa thông tin bảo hành

• Thanh toán: cho phép chỉnh sửa thông tin thanh toán

• Liên hệ: cho phép chỉnh sửa thông tin liên hệ

• Đường dây nóng: cho phép chỉnh sửa thông tin HOTLINE

• Quản lý sản phẩm: cho phép thêm xóa xửa category, sản phẩm…

2 Trang chủ

Trang chủ bao gồm Category template và phần nội dung của trang chủ

• Mỗi hàng có 3 cột

• Mỗi cell chứ thông tin như hình

• Mỗi ảnh sản phẩm minh họa có kích thước 230 x 150

• Tiêu đề: tên category cấp 1> Tên category cấp 2

• Tên sản phẩm và số lần người xem sản phẩm này

• Hiển thị thông tin sản phẩm

• Nút mua hàng và ô số lượng

• Link xem ảnh lớn sẽ cho người mua xem toàn bộ ảnh của sản phẩm

Cửa sổ popup này sẽ có 2 phần: phần bên trái là hình ảnh thủ nhỏ, phần bên phải là hình ảnh với kích thước đầy đủ Nếu chỉ có một ảnh thì.

• Online support cho phép người mua chat với nhân viên bán hàng của công ty

• Gửi thông tin sản phẩm đến bạn bè: cho phép người mua gửi sản phẩm này đến bạn bè qua email

• Phần cuối là hiện thị 4 link của category cấp 2 cùng cấp với category của sản phẩm này

• Nút mua hàng sẽ link tới trang giỏ hàng, thêm sản phẩm và số lượng vào giỏ hàng, tính lại số tiền trong giỏ hàng

4 Trang giỏ hàng

Trang này bao gồm category template và phần nội dung như sau

• Tiêu đề: Giỏ hàng của bạn

• Cột Đơn giá: nếu giá sản phẩm không có hoặc bằng 0 thì hiện [Liên hệ]

• Cột Thành tiền: nếu giá sản phẩm không có hoặc bằng 0 thì hiện [Liên hệ]

• Dòng Tổng cộng: nếu một sản phẩm có đơn giá bằng 0 hoặc không

có thì hiện [Liên hệ] Nếu có giá đầy đủ thì hiện tổng số tiền

• Link Mua tiếp sẽ quay lại Trang chủ

• Link Cập nhật sẽ tính toán lại Thành tiền và Tổng cộng khi có sự thay đổi về số lượng của một hoặc nhiều sản phẩm

• Link Đặt hàng sẽ dẫn tới các trang trong qui trình đặt hàng

• Người dùng có thể thay đổi số lượng của từng sản phẩm bằng cách nhập vào ô số lượng Nhập số 0 sẽ xóa sản phẩm

• Tiểu đề: Thông tin liên lạc của quý khách

• Quốc gia: hiện tại chỉ cần hiển thị Việt Nam

• Các textbox đều phải kiểm tra việc bắt buộc nhập dữ liệu như sau

• Link Mua tiếp sẽ quay trở lại Trang chủ

• Link Tiếp tục sẽ sang Trang xác nhận đơn hàng

- Trang xác nhận đơn hàng bao gồm Checkout template và nội dung như sau:

• Tiêu đề: Chi tiết đơn hàng của quý khách.

• Hiển thị phần thông tin liên lạc đã được khách hàng nhập ở trang trước

• Hiển thị sản phẩm đã chọn

• Link Edit sẽ dẫn tới trang giỏ hàng để khách hàng có thể tùy chỉnh

số lượng

• Link Quay lại sẽ quay trờ lại trang nhập thông tin giao hàng/ liên lạc

• Link Đặt hàng sẽ tiến hành đặt hàng, lưu đơn hàng của khách vào cơ

sở dữ liệu, gửi email xác nhận cho khách hàng và bộ phận sales trong công ty Cuối cùng là mở trang cảm ơn

- Template email như sau

• Tiêu đề: Nội Thất Thủy Triều- Order #0000000019 Số hóa đơn là do

hệ thống tự sinh, tăng dần

• Nếu giá sản phẩm không có hoặc bằng 0 thì hiện [Liên hệ]

• Dòng Tổng cộng: nếu một sản phẩm có đơn giá bằng 0 hoặc không

có thì hiện [Liên hệ] Nếu có giá đầy đủ thì hiện tổng số tiền Template bên dưới hiện không đúng ở dòng tổng cộng và dòng tiền của sản phẩm

- Trang cảm ơn bao gồm Checkout template và nội dung như sau

• Tiều đề: Cảm ơn quý khách

• Link Trang chủ sẽ quay về Trang chủ

6 Trang admin

Trang admin gồm nhiều phần nhỏ

- Trang login bao gồm Admin template và phần nội dung sau

• Nếu người dùng đăng nhập thành công sẽ sử dụng được các chức năng trong phần admin

- Trang Admin home gồm Admin template Khi người dùng login thành công sẽ hiện ra trang này

- Trang Lời giới thiệu, Thông tin dịch vụ, Bảo hành và hậu mãi, Thanh toán, Liên hệ, Đường dây nóng đều bao gồm Admin template và phần nội dung sau:

• Tiếng Việt để nhập ngôn ngữ tiếng Việt

• Tiếng Anh để nhập ngôn ngữ tiếng Anh

- Trang Quản lý sản phẩm bao gồm phần Admin template và phần nội dung sau:

Phần Category

• Hiển thị tất cả category cấp 1, mỗi dòng gồm có tên category, 2 lựa chọn, sửa và chọn

• Link Sửa sẽ cho phép người dùng sử thông tin của category

• Link Chọn sẽ hiển thị những category thuộc category này trong phần sub category

• Link tạo mới sẽ cho phép tạo mới một category cấp 1

Phần sub category

• Hiển thị tất cả category cấp 2 của category cấp 1 được lựa chọn, mỗi dòng gồm có tên category, 2 lựa chọn, sửa và chọn

• Link Sửa sẽ cho phép người dùng sử thông tin của category này

• Link Chọn sẽ hiển thị những sản phẩm thuộc category cấp 2 này

• Link tạo mới sẽ cho phép tạo mới một category cấp 2 thuộc vào category cấp đã chọn ở trên

Phần sản phẩm

• Nút tạo mới cho phép nhập một sản phẩm mới với thông tin sub category và category nếu được chọn trước

• Link Sửa cho phép sủa thông tin của sản phẩm

- Trang sửa/ tạo mới category bao gồm Admin template và phần nội dung sau

• Nếu không có sự lựa chọn nào trong danh sách category cấp 1, thì khi nhấn nút Lưu sẽ tạo ra một category cấp 1

• Nếu có một category cấp 1 được chọn thì tất cả các category cấp 2 sẽ được liệt kê trong danh sách category cấp 2 Và khi nhấn nút Lưu sẽ tạo ra một category cấp 2 thuộc category 1 được chọn

• Checkout “Không hiển thị trên website” nhằm xóa tạm thời category này

• Mỗi category có một hình ảnh duy nhất và hình này nên có độ rộng

là 75px để đảm bảo tốc độ tải trang web và phù hợp với thiết kế

• Link Thêm mới sẽ mở lại trang này để có thể tạo một category mới

- Trang sửa/ tạo mới sản phẩm bao gồm Admin template và phần nội dung sau:

• Chọn một category cấp 1 sẽ liệt kệ tất cả category cấp 2

• Đối với salon mous, độ rộng hình ảnh đầu tiên là 355px, còn lại đối

với sản phẩm bình thường là 230px

• Checkbox Tạm ngưng xóa tạm thời sản phẩm này

• Checkbox hiện trên trang chủ cho sẽ đánh dấu sản phẩm này được hiển thị trên trang chủ

• Đối với sản phẩm tạo mới, chỉ được thêm 1 hình ảnh, sau khi sản phẩm được lưu, sẽ xuất hiện link Thêm hình ảnh Linh này cho phép người dùng thêm nhiều hình ảnh vào sản phẩm mà không hạn chế kích thước và dung lượng ảnh

• Link Lưu sẽ lưu sản phẩm và chuyển sang chế độ sửa đối với sản phẩm này, đồng thời hiện link Thêm hình ảnh

• Linh Thêm mới sẽ mở lại trang này để thêm mới sản phẩm

- Trang thêm hình ảnh bao gồm Admin template và nội dung như sau

1