BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH PHÂN TÍCH VÀ XÂY DỰNG WEBSITE CHO CỬA HÀNG THỜI TRANG

Đề tài được thực hiện dựa trên tình hình, tình trạng và nhu cầu thực tế khi hầu hết tất cả các cửa hàng, công ty, doanh nghiệp cần có một website của riêng mình nhằm quảng bá thương hiệu

KHOA MẠNG MÁY TÍNH VÀ TRUYỀN THÔNG

BÁO CÁO

ĐỒ ÁN CHUYÊN NGÀNH

PHÂN TÍCH VÀ XÂY DỰNG WEBSITE CHO

CỬA HÀNG THỜI TRANG

TP.Hồ Chí Minh, tháng 08 năm 2020

Giảng viên: ThS Đỗ Thị Hương Lan

ĐẠI HỌC QUỐC GIA TP HCM

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

TP Hồ Chí Minh, ngày… tháng … năm 2020

NHẬN XÉT ĐỒ ÁN CHUYÊN NGÀNH CỦA GIẢNG VIÊN HƯỚNG DẪN

Tên đồ án:

Tên tiếng Việt: Phân tích và xây dựng website cho cửa hàng thời trang

Tên tiếng Anh: Building a website for fashion kids store

Một số nhận xét về hình thức cuốn báo cáo:

………

………

………

………

………

………

………

………

………

………

………

2 Về nội dung nghiên cứu: ………

………

………

………

………

………

………

………

………

………

………

3 Về chương trình ứng dụng:

………

………

………

………

………

………

………

………

………

………

………

4 Về thái độ làm việc của sinh viên: ………

………

………

………

………

………

………

………

………

………

………

Đánh giá chung: ………

………

………

………

………

………

………

………

………

………

Điểm từng thành viên: Người nhận xét Nguyễn Yến Vy …/10 (Ký tên và ghi rõ họ tên) Nguyễn Đình Liêm …/10

LỜI NÓI ĐẦU

Đầu tiên, với tất cả lòng biết ơn và sự kính trọng, nhóm xin gửi lời cảm ơn sâu sắc đến quý thầy, cô khoa Mạng máy tính và Truyền thông, cũng như quý thầy, cô đang công tác tại trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM đã dùng tất cả tri thức và tâm huyết để truyền đạt những kiến thức, kinh nghiệm cho nhóm trong suốt quá trình học tập và rèn luyện tại trường

Đặc biệt, nhóm xin gửi lời tri ân chân thành đến ThS Đỗ Thị Hương Lan – đã hết sức tận tâm, nhiệt tình hỗ trợ, hướng dẫn nhóm trong quá trình làm đồ án Những định hướng, bổ sung, góp ý của cô là nền tảng cơ sở giúp nhóm có những nghiên cứu đúng đắn, đạt được kết quả tốt nhất trong quá trình thực hiện đồ án

Mặc dù đã rất cố gắng nhưng do kiến thức còn nhiều hạn chế nên đồ án của nhóm không thể tránh khỏi những sai sót Nhóm rất mong nhận được sự góp ý của quý thầy cô

và các bạn để nhóm có thể hoàn thiện và khắc phục những thiếu sót của mình

Một lần nữa, nhóm xin chân thành cảm ơn!

Trân trọng cảm ơn!

TP Hồ Chí Minh, tháng 07 năm 2020

Đề tài được thực hiện dựa trên tình hình, tình trạng và nhu cầu thực tế khi hầu hết tất cả các cửa hàng, công ty, doanh nghiệp cần có một website của riêng mình nhằm quảng bá thương hiệu, tiếp cận người dùng trực tuyến và tăng doanh thu thông qua các hình thức mua bán từ môi trường internet Ngoài ra, với tình hình bệnh dịch nCovid đang diễn biến ngày càng phức tạp, hình thức mua bán trực tuyến càng trở nên cần thiết.

MỤC LỤC

Nội dung

NHẬN XÉT ĐỒ ÁN CHUYÊN NGÀNH 2

MỤC LỤC 8

DANH MỤC HÌNH VẼ 10

DANH MỤC BẢNG 11

CHƯƠNG 1 12

1.1 Tên đề tài 12

1.2 Mục tiêu của đề tài 12

1.3 Cấu trúc đề tài 12

CHƯƠNG 2 14

2.1 Nhu cầu 14

2.2 Thực trạng 14

2.3 Xác định yêu cầu và mục tiêu 14

2.4 Phân tích đối tượng người dùng 15

2.4.1 Site Map của website 15

2.4.2 Đối tượng 15

CHƯƠNG 3 16

3.1 Cấu trúc nội dung website 16

3.2 Các chức năng khác 17

3.3 Đặc điểm công nghệ 17

3.4.1 Frontend 17

3.4.2 Backend 17

3.4.3 Cơ sở dữ liệu 17

3.4.4 Phong cách thiết kế 17

CHƯƠNG 4 25

4.1 Các đối tượng trong hệ thống 25

4.1.1.Danh sách các đối tượng 25

4.1.2.Mô tả cụ thể các đối tượng 27

CHƯƠNG 5 34

5.1 Heroku 34

5.2 Tạo cơ sở dữ liệu cho MongoDB với MongoDB Atlas Cloud Service 34

5.3 Tạo host trên Herokuapp 36

5.4 Lưu ý CHƯƠNG 6 38

6.1 Tổng kết, kết quả đạt được 38

6.2 Khó khăn trong quá trình thực hiện 38

6.3 Hướng phát triển 38

TÀI LIỆU THAM KHẢO 40

DANH MỤC HÌNH VẼ

Hình 1 Giao diện thanh điều hướng và slide ảnh trang Home 18

Hình 2 Phân loại sản phẩm trang Home 18

Hình 3 Sản phẩm được xem nhiều 19

Hình 4 Sản phẩm bán chạy nhất trong tuần 19

Hình 5 Phần chân trang với các thông tin về cửa hàng 19

Hình 6 Giao diện trang HomeGiao diện trang Home 20

Hình 7 Giao diện trang sản phẩm 21

Hình 8 Giao diện trang chi tiết sản phẩm 22

Hình 9 Giao diện giỏ hàng 23

Hình 10 Giao diện trang đăng nhập 23

Hình 11 Giao diện trang đăng ký tài khoản mới 24

Hình 12 Giao diện trang quên mật khẩu 24

Hình 13 Thêm mới danh mục sản phẩm 27

Hình 14 Quản lý danh mục sản phẩm 28

Hình 15 Thêm mới sản phẩm 29

Hình 16 Quản lý sản phẩm 29

Hình 17 Quản lý tài khoản người dùng 30

Hình 18 Quản lý đơn hàng 31

Hình 19 Đăng ký tài khoản bằng email 32

Hình 20 Quản lý nội dung website 33

Hình 21 Tạo tài khoản và user để truy cập database 35

Hình 22 Tạo cluster và database 35

Hình 23 Hoàn thành kết nối database với project 36

Hình 24 Kết nối host với cơ sở dữ liệu 36

Hình 25 Nội dung cần chỉnh sửa trong file project 37

DANH MỤC BẢNG

Bảng 1 Danh sách các đối tượng trong hệ thống 26

Bảng 2 Danh sách thao tác cơ bản với Danh mục sản phẩm 27

Bảng 3 Danh sách thao tác với Sản phẩm 28

Bảng 4 Danh sách thao tác cơ bản với Tài khoản người dùng 30

Bảng 5 Danh sách thao tác cơ bản với Đơn hàng 31

12

CHƯƠNG 1

TỔNG QUAN VỀ ĐỀ TÀI 1.1 Tên đề tài

Phân tích và xây dựng website bán quần áo trẻ em từ 6 tháng đến 2 tuổi

1.2 Mục tiêu của đề tài

Thực hiện đề tài với hai mục tiêu chính:

- Phân tích nhu cầu, tình trạng thực tế, từ đó đưa ra các giải pháp, lựa chọn giao diện, tính năng phù hợp nhất cho website

- Tiến hành xây dựng website dựa trên kế hoạch đã vạch ra

1.3 Cấu trúc đề tài

Cấu trúc bài báo cáo được chia làm 6 chương trong đó:

- Chương 1: Trình bày lý do chọn đề tài

- Chương 2: Phân tích nhu cầu và thực trạng

- Chương 3: Những kiến thức nền tảng, công nghệ phục vụ cho việc xây dựng website

- Chương 4: Đặc tả hệ thống

- Chương 5: Triển khai

- Chương 6: Tổng kết các kết quả đạt được, nêu ra những khó khăn, hạn chế trong việc thực hiện, các hướng phát triển trong giai đoạn tiếp

1.4 Kế hoạch bố trí thời gian nghiên cứu

Từ Đến Nội dung

01/04/2020 10/04/2020

Liên hệ giảng viên hướng dẫn và đăng ký đề tài

Họp nhóm, phân tích yêu cầu, các chức năng

cơ bản, phân công nhiệm vụ, định hướng phát triển đề tài

13

11/04/2020 20/04/2020 Thiết kế giao diện website

20/04/2020 08/05/2020

Phân tích thiết kế

Cắt layout từng phần từ file photoshop

Chuyển giao, viết báo cáo tiến độ

10/05/2020 15/06/2020

Phân tích chức năng

Khởi tạo và thiết kế database

Tiến hành code chức năng cho từng trang, từng phần

17/06/2020 31/07/2020 Thực hiện kiểm thử, sửa chữa lỗi phát sinh

Viết báo cáo

2.3 Xác định yêu cầu và mục tiêu

Với thực trạng như trên website cần được xây dựng mới và đáp ứng các yêu cầu sau:

- Xây dựng một website có giao diện không những đẹp với nhiều hình ảnh, hiệu ứng, màu sắc, thân thiện với người dùng mà còn có thể tích hợp CRM

- Hỗ trợ tối đa về các hoạt động kinh doanh như mua bán, đặt hàng, vận chuyển, phản hồi, dịch vụ chăm sóc khách hàng sau khi mua, chính sách đổi trả…

- Giúp khách hàng, người tiêu dùng có được đầy đủ về thông tin chi tiết, giá cả, hình ảnh

kể cả chất lượng của sản phẩm

- Hoạt động hiệu quả trên các thiết bị desktop, di động, hỗ trợ responsive

- Có trang quản trị dành cho admin với các module dễ thao tác, cập nhật

15

2.4 Phân tích đối tượng người dùng

2.4.1 Site Map của website

Hình 1.1 Site Map của Website

2.4.2 Đối tượng

Đối tượng của website hướng đến những khách hàng có nhu cầu mua sắm qua mạng cũng như góp phần quảng bá cho cửa hàng, doanh nghiệp nhỏ trong lĩnh vực thời trang Bao gồm các loại quần áo, đồ dùng, phụ kiện, giày, đồ chơi dành cho trẻ em từ 6 đến 2 tuổi có chất lượng cao và giá thành hợp lí

16

CHƯƠNG 3

KIẾN THỨC NỀN TẢNG – CÔNG NGHỆ SỬ DỤNG 3.1 Cấu trúc nội dung website

Với những yêu cầu đặt ra cho website cùng những phân tích về đối tượng người dùng, cấu trúc nội dụng website được xác định gồm các mảng chính như sau:

Mục đích Nội dung

Login

Giúp người dùng đăng

kí, đăng nhập trở thành thành viên, có cơ hội được hưởng những ưu đãi đặc biệt

Người dùng đăng kí thành viên, trở thành thành viên của shop thì

sẽ được hưởng những ưu đãi, ngoài ra giúp hỗ trợ thanh toán (lưu địa chỉ nhận hàng, quản lí đơn hàng, lịch sử đơn hàng…)

Checkout (giỏ hàng)

Giúp người dùng quản lí đơn hàng đã đặt, điền các thông tin cần thiết để thanh toán và hoàn thành đơn hàng

Chứa danh sách các đơn hàng mà khách hàng đã đặt, trang thanh toán

Thanh công cụ tìm kiếm

Giúp khách hàng tìm kiếm nhanh món hàng yêu thích

Thanh tìm kiếm hỗ trợ khách hàng tìm kiếm sản phẩm

Footer

Giúp khách hàng có thêm các thông tin cần thiết khác như thông tin

về shop, thông tin liên

hệ, địa chỉ shop, chính sách đổi trả…

Chứa đường dẫn đến thông tin shop, các chính sách mua bán, vận

chuyển, giao hàng, đổi trả, fanpage, kênh youtube, twitter,…

Sản phẩm (Product)

Giúp khách hàng có cái nhìn hoàn thiện nhất về các thông tin của sản phẩm như giá cả, màu sắc, kích cỡ…

Chứa thông tin chi tiết của sản phẩm, số lượng sản phẩm trong kho, phản hồi của khách đã mua sản phẩm đó

17

3.2 Các chức năng khác

- Website được tích hợp các công cụ SEO ở mức cơ bản trên trang

- Website được xây dựng chú trọng tính linh hoạt về cơ chế hoạt động, các thành phần

có thể được chỉnh sửa và hoàn thiện hơn

3.3 Đặc điểm công nghệ

3.4.1 Frontend

- Website được xử lý bằng HTML5, CSS3, JAVASCRIPT, JQUERY, BOOTSTRAP4 Đây đều là những công nghệ xây dựng website rất quen thuộc và phổ biến, dễ dàng để thực hiện, thao tác và đạt được hiệu quả cao

3.4.2 Backend

- Website được viết bằng ngôn ngữ NODEJS Đây là ngôn ngữ thân thiện, thừa kế từ JAVASCRIPT nên dễ sử dụng, cung cấp nhiều công cụ xử lí hoàn hảo, module tích hợp tiện lợi, ngôn ngữ có tốc độ xử lý nhanh, đáp ứng nhu cầu của người dùng

3.4.3 Cơ sở dữ liệu

- Dữ liệu của website được lưu trữ có cấu trúc ở hệ quản trị cơ sở dữ liệu MONGODB, ODM (Object Document Mapper) là MONGOOSE cung cấp các module tích hợp dễ sử dụng, giúp website hoạt động ổn định, thời gian xử lý nhanh và đạt hiệu suất cao

- Website có hỗ trợ tìm kiếm, phương pháp đăng nhập/đăng kí thành viên và lấy lại mật khẩu bằng email

- Trang web hướng đa nền tảng, có thể hoạt động tốt trên cả các thiết bị PC, laptop cũng như các thiết bị di động

18

- Giao diện website: http://happykids.herokuapp.com/ (website chính thức)

- Một số hình ảnh của website:

Hình 1 Giao diện thanh điều hướng và slide ảnh trang Home

Hình 2 Phân loại sản phẩm trang Home

19

Hình 3 Sản phẩm được xem nhiều

Hình 4 Sản phẩm bán chạy nhất trong tuần

Hình 5 Phần chân trang với các thông tin về cửa hàng

20

Hình 6 Giao diện trang Home

21

Hình 7 Giao diện trang sản phẩm

22

Hình 8 Giao diện trang chi tiết sản phẩm

23

Hình 9 Giao diện giỏ hàng

Hình 10 Giao diện trang đăng nhập

24

Hình 11 Giao diện trang đăng ký tài khoản mới

Hình 12 Giao diện trang quên mật khẩu

25

CHƯƠNG 4

ĐẶC TẢ HỆ THỐNG 4.1 Các đối tượng trong hệ thống

4.1.1 Danh sách các đối tượng

Danh mục sản phẩm

- Dùng để gom nhóm các sản phẩm cùng loại lại với nhau

- Ví dụ: T-Shirts, Body Suits, giày, phụ kiện…

- Số lượng: không giới hạn

Sản phẩm - Hiển thị thông tin chi tiết về sản

phẩm như: tên sản phẩm, màu sắc, size, giá, mô tả sản phẩm…

- Một sản phẩm phải thuộc vào một danh mục sản phẩm

- Số lượng: không giới hạn

Thuộc tính sản phẩm

- Dùng để lọc các sản phẩm theo các thuộc tính giá, thương hiệu, loại sản phẩm

- Thuộc thông tin sản phẩm

- Ví dụ: T-Shirts thuộc Tops And T-shirts

- Số lượng: không giới hạn

26

Menu điều hướng

- Điều hướng đến danh mục sản

phẩm, đăng nhập/đăng xuất, xem giỏ hàng, thanh tìm kiếm

Tài khoản

- Có 2 loại tài khoản:

+ Tài khoản người dùng: cho user để giao dịch, sử dụng dịch vụ trên website Tài khoản người dùng

sử dụng email để xác thực

+ Tài khoản quản trị: cho admin để quản trị website, chỉ sử dụng trên web quản trị

- Số lượng tài khoản người dùng: không giới hạn

- Số lượng tài khoản quản trị: một tài khoản

Đơn hàng

- Quản lý các đơn hàng từ người

dùng đặt trực tiếp trên hệ thống website

Đánh giá

- Quản lý các bình luận, đánh giá

của người dùng về sản phẩm trên website

Email xác thực - Dùng để đăng ký tài khoản mới;

quên tài khoản

Bảng 1 Danh sách các đối tượng trong hệ thống

27

4.1.2 Mô tả cụ thể các đối tượng

a Danh mục sản phẩm (Category)

Danh mục sản phẩm là việc tạo ra những nhóm chứa những sản phẩm có cùng thể loại

và liên quan đến nhau Việc phân nhóm hợp lý giúp cho dữ liệu, thông tin được phân loại hợp lý, dễ dàng cho việc tìm kiếm

Đối tượng STT Các thao tác cơ bản Mục đích

Bảng 2 Danh sách thao tác cơ bản với Danh mục sản phẩm

Hình 13 Thêm mới danh mục sản phẩm

3 Thêm sản phẩm Tạo mới sản phẩm mới

4 Chỉnh sửa/Cập nhật sản phẩm Chỉnh sửa và cập nhật lại các

thông tin của sản phẩm

5 Xoá sản phẩm Bỏ sản phẩm ra khỏi hệ thống

Bảng 3 Danh sách thao tác với Sản phẩm

29

Hình 15 Thêm mới sản phẩm

Hình 16 Quản lý sản phẩm

30

c Tài khoản

Tài khoản quản trị: chưa xử lý, đường dẫn tạm thời là “/admin”

- Là tài khoản dùng để quản trị website và được sử dụng trong website quản trị (không phải website phía client)

- Tài khoản quản trị thường không giao cho người dùng, mà được quản lý bởi đội ngũ

kỹ thuật hoặc người quản trị website

Tài khoản người dùng:

- Là các tài khoản dành cho user sử dụng để thực hiện các giao dịch, sử dụng các dịch

vụ có trên website Happy Kids

- Đăng ký thông qua email

Đối tượng STT Các thao tác cơ bản Mục đích

Kiểm tra, thống kê số lượng các tài khoản người dùng

Bảng 4 Danh sách thao tác cơ bản với Tài khoản người dùng

Hình 17 Quản lý tài khoản người dùng

31

d Đơn hàng

Sau khi lựa chọn sản phẩm trên website, thêm vào giỏ hàng, tiến hành bước thanh toán, thanh toán mặc định của Happy Kids là thanh toán sau khi nhận hàng Sau khi đặt hàng

từ bước thanh toán thì thông tin đơn hàng sẽ được gửi về website quản trị

Đối tượng STT Các thao tác cơ bản Mục đích

Hình 18 Quản lý đơn hàng

e Email thông báo

Gửi mã xác thực vào email khi người dùng đăng ký tài khoản

32

Hình 19 Đăng ký tài khoản bằng email

f Nội dung website

Thêm slide ảnh, tiêu đề, chính sách (policy) của cửa hàng, chính sách đổi trả, hình thức thanh toán, giới thiệu cửa hàng (About Us), địa chỉ, thông tin liên lạc của cửa hàng

33

Hình 20 Quản lý nội dung website

Ngoài ra, Heroku còn cung cấp database, SSL miễn phí, hỗ trợ mạnh làm việc nhóm cũng như liên kết với Github một cách đơn giản

b Khuyết điểm:

Việc sử dụng miễn phí các tính năng của Heroku sẽ chỉ giới hản là 550 giờ mỗi tháng Nếu muốn tăng thêm giờ, cần cài đặt các phương thức thanh toán trên đó Tuy nhiên để kiểm nghiệm một ý tưởng hay một trang web nhỏ thì Heroku miễn phí cũng đã đủ đáp ứng nhu cầu

Sau 2 đến 3 giờ nếu server không có người truy cập thì server sẽ chuyển sang trạng thái ngủ Về việc server bị tắt khi không có traffic, việc đơn giản nhất chính là tự tạo traffic cho nó

5.2 Tạo cơ sở dữ liệu cho MongoDB với MongoDB Atlas Cloud Service

Tạo và đăng nhập vào tài khoản MongoDB Atlas đồng thời tạo một User mới để truy cập vào database