Xây dựng website thương mại Điện tử kinh doanh truyện tranh

Sau khi đăng nhập “khách hàng” có th ể thực hi n các chệ ức năng như: thêm sản phẩm và giỏ hàng và thanh toán”.. Các chức năng của hệ thống Hệ thống bao g m các chồ ức năng chính sau: K

TRƯỜNG ĐẠI HỌC CẦN THƠ

  

NIÊN LUẬN

Đề tài

Sinh viên thực hiện: Hu nh Anh Khoa ỳ

MSSV: B1809359

TRƯỜNG ĐẠI HỌC CẦN THƠ

  

NIÊN LUẬN

Đề tài

Giảng viên hướng dẫn:

Bùi Võ Qu c B o ố ả

Sinh viên thực hiện:

nh Anh Khoa Huỳ

MSSV: B1809359

NHẬN XÉT C A GIÁO Ủ VIÊN HƯỚ NG D N Ẫ

Cần Thơ, ngày 18 tháng 11 năm 2023 Giáo viên hướng d n ẫ

Bùi Võ Qu c B o ố ả

LỜI CẢM ƠN

Sau m t kho ng th i gian hộ ả ờ ọc tập và nghiên c u, cuứ ối cùng em cũng đã hoàn thành niên luận, đây là dịp tốt nhất để em gửi lời cảm ơn tới mọi người

Để có được kết qu ả như ngày hôm nay, em xin g i l i cử ờ ảm ơn đến thầy Bùi

Võ Quốc Bảo, giảng viên trường Công nghệ thông n và Truy n thông, thề ầy đã trực ếp hướng dẫn, đưa ra những gợi ý để em cũng như các bạn có thể định hướng được mình c n làm nh ng vi c gì ầ ữ ệ

Xin g i l i cử ờ ảm ơn chân thành đến tất cả bạn bè đã giúp đỡ, giới thiệu những ngu n tài liồ ệu quý giá để em có thể hoàn thành đề tài này m c dù v n còn ặ ẫchưa hoàn thiện lắm

Mặc dù đã cố ắng để làm, nhưng có lẽ g thời gian và kiến thức của em chưa

đủ rộng nên còn nhi u thi u sót Mong nhề ế ận được góp ý từ thầy để đề tài hoàn thiện hơn nữa

Em xin chân thành cảm ơn thầy!

Cần Thơ, ngày 18 tháng 11 năm 2023

Ngườ ếi vi t

Huỳnh Anh Khoa

MỤC L C Ụ

1 Đặt vấn đề 8

2 M ục êu đề tài 8

3 Đối tượng và ph m vi nghiên c u ạ ứ 8

4 Phương pháp nghiên cứu 8

Ầ Ộ CHƯƠNG 1: TỔNG QUAN TÀI ĐỀ 9

1 Mô tả đề tài 9

2 Các chức năng của hệ thống 9

CHƯƠNG 2: THIẾT KẾ VÀ CÀI ĐẶT 10

1 Cơ sở lý thuyết 10

2 Thực tế 11

3 Sơ đồ use case 12

4 Thiết kế cơ sở dữ liệu 15

CHƯƠNG 3: KẾT QUẢ THỰC NGHIỆM 16

1 Giao diện cho người dùng 16

2 Giao di n cho qu n tr viên ệ ả ị 24

Ầ Ế Ậ 1 Kết quả đạt được 31

2 Hạn chế 31

3 Hướng phát triển trong tương lai 31

DANH M C HÌNH Ụ

Hình 1 Sơ đồ use case t ng quan v h ổ ề ệ thống 12

Hình 2 : Sơ đồ use case Qu n tr viên ả ị 13

Hình 3 : Sơ đồ use case Khách hàng 14

Hình 4: Giao diện sơ đồ LDM 15

Hình 5: Giao di n trang ch ệ ủ 16

Hình 6: Giao di n trang ch ệ ủ 16

Hình 7: Giao di n th ệ ể loạ i truy n ệ 17

Hình 8: Giao di n th ệ ể loạ i truy n ệ 17

Hình 9: Tìm kiếm s n ph m theo tên ả ẩ 18

Hình 10: Tìm ki m s n ph m theo tên ế ả ẩ 19

Hình 11: Giao di n chi t s n ph m ệ ế ả ẩ 19

Hình 12: Giao di n gi ệ ỏ hàng 20

Hình 13: Giao di n gi ệ ỏ hàng sau khi c p nh t thêm s ậ ậ ố lượ ng và xóa s n ph m ả ẩ 21

Hình 14: Giao di n thanh toán ệ 21

Hình 15: Giao di n thanh toán cu ệ ối cùng .22

Hình 16: Giao diện đăng nhập cho người dùng 23

Hình 17: Giao diện đăng ký cho người dùng 23

Hình 18: Đăng nhập thành công 24

Hình 19: Dropdown Menu v i tài kho n qu ớ ả ản tr viên ị 24

Hình 20: Giao di n qu ệ ả n lí s n ph m 24 ả ẩ Hình 21: Giao di n qu ệ ản lí người dùng 25

Hình 22: Li t kê t ệ ất cả s n ph m ả ẩ 26

Hình 23: Giao di n thêm s n ph ệ ả ẩm .27

Hình 24: Thêm s n ph m thành công ả ẩ 28

Hình 25: Giao di n c p nh ệ ậ ậ ả t s n ph m 28 ẩ Hình 26: Giao di n xóa s n ph ệ ả ẩm 29

Hình 27: Giao di n hi ệ ển thị s n ph m m ả ẩ ới đượ c thêm 29

Hình 28: Chi ết sả n ph m cùng v i tên tác gi và th ẩ ớ ả ể loạ i truy n ệ 30

TÓM T T Ắ

Ngày nay, nhu cầu đọc sách và truy n tranh cệ ủa mọi người đều tăng cao Ngoài các trang web giúp người dùng đọc truyện online thì các nhà sách online cũng phát triển chóng mặt để đáp ứng nhu cầu của người dùng Vì v y, h ậ ệ thống

“website thương mại điện tử kinh doanh truy n tranhệ ” ra đời với mong muốn giúp đỡ ọi ngườ m i trong việc lựa ch n và mua sách truyọ ện

Trang web được phát triển với các nh năng cơ bản như: m kiếm sản phẩm theo tên, xem chi t s n ph m, giá thành, mô t , ế ả ẩ ả

“Website thương mại điện tử kinh doanh sách” được phát triển bằng ngôn ngữ l p trình Javascript ậ (với FE là Reactjs, BE là Nodejs), HTML, CSS, cùng h ệ quản trị cơ sở ữ liệu d MongoDB

Hi v ng v i nhọ ớ ững nh năng trang web mang lại sẽ giúp ích cho người dùng trong việc lựa ch n sách truy n phù họ ệ ợp vớ ải b n thân mình

PHẦN 1: GI I THI U Ớ Ệ

1 Đặt vấn đề

Việc đọc sách và truyện tranh hằng ngày đã không còn xa lạ gì với chúng ta, ngoài việc bổ sung thêm kiến thức, nó còn giúp chúng ta thư giãn sau những ngày làm việc vất vả hoặc bắt đầu một ngày mới một cách tốt hơn

Nắm bắt được điều đó, em đã quyết định xây dựng trang “website thương mại điện tử kinh doanh truyện tranh” Giúp cung cấp cho mọi người thông n một cách nhanh chóng, chỉ một vài thao tác là lựa chọn được cuốn sách, truyện phù hợp với cá nhân mình Thỏa mãn nhu cầu người dùng một cách nhanh chóng là website của em mang đến

2 Mục êu đề tài

Xây dựng một trang web cung cấp đầy đủ các êu chí và ện ích cho người dùng

3 Đối tượng và phạm vi nghiên cứu

Xây dựng hệ thống dành cho các cửa hàng vừa và nhỏ có nhu cầu quản lí trực tuyến Hệ thống cho phép cửa hàng quản lý thương hiệu, danh mục, sản phẩm,… Về phía khách hàng, họ có thể xem sản phẩm, mua sản phẩm,… Việc thanh toán sẽ là chuyển phát nhanh, khách hàng sẽ thanh toán với shipper khi hàng đã tới nơi

4 Phương pháp nghiên cứu

Phân tích yêu cầu: thực hiện khảo sát thực trạng, phân tích đánh giá hực trạng, đặc tả yêu cầu xây dựng hệ thống

Thiết kế: yêu cầu chức năng, phân tích và thiết kế các mô hình hệ thống: CDM,

PHẦN 2: N I DUNG Ộ CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI

1 Mô t tài ả đề

Trang web cung c p các chấ ức năng phục vụ việc mua bán truy n, bao ệgồm 2 chức năng chính là mua sản phẩm và bán s n phả ẩm Trang web được xây dựng hướng đến nhóm người dùng “khách hàng” và “quản trị viên” Khi “khách hàng” truy cập vào trang web có th ể thực hi n các chệ ức năng như: xem sản phẩm, xem chi t s n phế ả ẩm Để thực hiện các ch c ứnăng nâng cao khác thì “khách hàng” phả ến hành đăng nhậi p nếu đã có tài khoản, đăng kí nếu chưa có tài khoản Sau khi đăng nhập “khách hàng”

có th ể thực hi n các chệ ức năng như: thêm sản phẩm và giỏ hàng và thanh toán”

“Quản trị viên” sau khi đăng nhập sẽ có quyền thao tác trên toàn b ộtrang web

2 Các chức năng của hệ thống

Hệ thống bao g m các chồ ức năng chính sau:

Khách hàng: đăng ký, đăng nhập, xem chi t sế ản phẩm, mua sản phẩm, thêm s n ph m vào gi hàng, thanh toán ả ẩ ỏ

Quản tr ịviên: đăng nhập, qu n lý s n ph m, qu n lý lo i s n phả ả ẩ ả ạ ả ẩm

CHƯƠNG 2: THIẾT KẾ VÀ CÀI ĐẶT

1 Cơ sở lý thuyết

HTML (Hypertext Markup Language - Ngôn ng ữ Đánh dấu Siêu văn bả n):

là một ngôn ng ữ đánh dấu được thi t k ế ế ra để tạo nên các trang web trên World Wide Web

CSS (Cascading Style Sheets): thường được s d ng vử ụ ới HTML để tùy chỉnh giao diện người dùng

JavaScript: ngôn ngữ lập trình kịch bản, giúp tạo ra nh tương tác giữa người

dùng và website

Reactjs (Thư viện của JavaScript): được Facebook phát triển để xây dựng

giao diện người dùng cho các ứng dụng web Giúp quản lý trạng thái của ứng dụng và cập nhật giao diện người dùng một cách hiệu quả

Nodejs: được xây dựng dựa trên JavaScript run me của Chrome Nó cho

phép thực thi mã JavaScript ở phía máy chủ, điều này giúp cho việc xây dựng ứng dụng web đa luồng và có hiệu suất cao

MongoDB: hệ quản trị cơ sở dữ liệu mã nguồn mở phi quan hệ được thiết kế

để lưu trữ và xử lý dữ liệu dưới dạng tài liệu Thuộc loại cơ sở dữ liệu NoSQL

Ant Design: một bộ công cụ thiết kế và thư viện UI cho React Được phát triển

và duy trì bởi Alibaba Ant Design cung cấp một loạt các thành phần giao diện người dùng đã được thiết kế trước, giúp bạn xây dựng các ứng dụng web hiệu quả và có giao diện đẹp mắt

Draw.io: phần mềm hỗ trợ đắc lực trong việc thiết kế các mô hình quan hệ:

CDM, LDM , PDM,…

Cho phép thêm, sửa, xóa sản phẩm, thể loại sản phẩm và tác giả Cho phép khách hàng mua sản phẩm

Cho phép khách hàng thêm sản phẩm vào giỏ hàng

Cho phép khách hàng thanh toán sản phẩm

3 Sơ đồ use case

Sơ đồ thể hiện:

n tr viên có các Quả ị chức năng như quản lý sản phẩm, quản lý danh mục (g m tác gi và b sách) Và các chồ ả ộ ức năng này yêu cầu người quản trị phải đăng nhập th ể hiện ở tên liên k t là ế “<<include>>”

Khách hàng có các chức năng xem chi ết sản phẩm, m kiếm sản phẩm, giỏ hàng, thanh toán Chức năng thanh toán giỏ hàng thì yêu cầu khách hàng cần đăng nhập thể hiện ở tên liên kết là “<<include>>”

3.2 Quản trị viên

Để có thể s d ng các chử ụ ức năng, người quản trị b t buộc phắ ải đăng nhập.Trong các chức năng trên, ta có thêm một vài chức năng nữa mà không có điều ki n b t buộc “<<include>>” như là thêm sản phẩm, xóa sệ ắ ản phẩm, th ểhiện ở tên liên kết là “<<extends>>”

3.3 Khách hàng

“Khách hàng” có thể sử dụng các chức năng đơn giản như xem sản phẩm, xem chi t s n ph m, m ế ả ẩ kiếm sản phẩm khi chưa đăng nhập Nếu “khách hàng”

đã đăng nhập thì có th s d ng chể ử ụ ức năng giỏ hàng, thanh toán, qua tên liên kết “<<include>>”

Bên trong nh ng chữ ức năng trên còn có những chức năng khác mà không

có s b t buự ắ ộc “<<include>>” như là cập nhật s ố lượng gi hàng, xóa gi hàng thỏ ỏ ể hiện ở tên liên kết “<<extends>>”

4 Thiết kế cơ sở dữ liệu

CHƯƠNG 3: KẾT QUẢ THỰC NGHIỆM

1 Giao diện cho người dùng

1.1 Giao diện trang chủ

Ý nghĩa: Màn hình trang chủ (giao diện) làm việc chính của người

dùng

Người dùng ch có th xem sỉ ể ản phẩm, xem chi t s n ph m, m ki m, liế ả ẩ ế ệt

kê theo thể loại truy n, khệ i chưa đăng nhập Các nh năng còn lại người dùng phải đăng nhập mới có th sể ử d ng ụ được

Giao diện danh mục

Ý nghĩa: Liệt kê các sản phẩm theo thể loại truyện

Giao di n này liệ ệt kê tấ ả ảt c s n ph m thu c cùng m t th ẩ ộ ộ ể loại truy n ệ

1.3 Giao diện m kiếm sản phẩm

Ý nghĩa: Cho phép người dùng m kiếm sản phẩm theo tên

Hình 10 : Tìm ki ếm sả n ph m theo tên ẩ

1.4 Giao diện chi ết sản phẩm

giá, thể loại, tên tác gi , ả

1.5 Giao di n gi ệ ỏ hàng

hàng bao g m tên sồ ản phẩm, hình nh, giá n, t ng s n cả ề ổ ố tiề ần thanh toán, Ngoài ra còn có th c p nh t l i s ể ậ ậ ạ ố lượng mua

Lưu ý: Người dùng cần phải đăng nhập để có thể thêm sản phẩm vào

giỏ hàng

Hình 13 : Giao di n gi hàng sau khi c p nh t thêm s ệ ỏ ậ ậ ố lượ ng và xóa s n ph m ả ẩ

1.6 Giao diện thanh toán

Ý nghĩa: Cho phép người dùng thanh toán những sản phẩm có

trong giỏ hàng

Lưu ý: Giao diện này sẽ bắt buộc người dùng phải đăng nhập

Hình 15 : Giao di n thanh toán cu i cùng ệ ố

1.7 Giao diện đăng ký đăng nhập

năng cao

Hình 18: Đăng nhậ p thành công

2 Giao diện cho quản trị viên

2.1 Giao diện đăng nhập

Hình 21 : Giao di n qu n lí ệ ả ngườ i dùng

Thêm s n ph m ả ẩ

Hình 24 : Thêm s n ph m thành công ả ẩ

Cập nhật sản phẩm

Xóa sản phẩm

2.3 Hiện thị sản phẩm ở giao diện chính

Hình 28 : Chi ết sả n ph m cùng v i tên tác gi và ẩ ớ ả thể ạ lo i truy n ệ

PHẦN 3: K T LU N Ế Ậ

1 Kết quả đạt được

“Website thương mại điện tử kinh doanh truy n tranhệ ” đã đạt được các mục êu cơ bản đề ra Xây dựng m t trang web d ộ ễ dàng cho người dùng sử dụng ch yủ ếu với các nh năng: xem sản phẩm, thêm s n ph m vào gi ả ẩ ỏhàng, thanh toán,

Về phía quản trị viên: quản lý s n phẩm, tác gi , thể lo i truy n, ả ả ạ ệ

2 Hạn chế

Vì thời gian có hạn và bản thân em còn thiếu nhiều kiến thức, website vẫn chưa hoàn chỉnh ở một số điểm như sau:

Giao diện chưa được tối ưu

Chưa thể xem chi tiết đơn hàng

Chưa xuất được ra file Excel

Chưa làm được Wishlist

3 Hướng phát triển trong tương lai

Xây dựng chức năng gợi ý sản phẩm mua nhiều nhất

Xây dựng Chatbot hỗ trợ người dùng

Xây dựng chức năng quên mật khẩu

Đăng nhập bằng tài khoản Google hoặc Facebook

Thanh toán bằng thẻ tín dụng,

TÀI LI U THAM KH Ệ ẢO