xây dựng website hệ thống bán laptop kim anh

Phạm Thị Trà My iii TÓM TẮT Tên đề tài: Xây dựng hệ thống website hệ thống bán laptop cho Kim Anh Sinh viên thực hiện: Nguyễn Kiêm Lực Nội dung tóm tắt: Đề tài “Xây dựng website hệ thống

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

Sinh viên thực hiện : Nguyễn Kiêm Lực

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

Giảng viên hướng dẫn duyệt

Đà Nẵng, tháng 6/2023

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My i {Trang trắng này dùng để dán bản Nhận xét của người hướng dẫn, hoặc thay trang này bằng Nhận xét của người hướng dẫn}

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My ii {Trang trắng này dùng để dán bản Nhận xét của người phản biên, hoặc thay trang này bằng Nhận xét của người phản biện}

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My iii

TÓM TẮT Tên đề tài: Xây dựng hệ thống website hệ thống bán laptop cho Kim Anh Sinh viên thực hiện: Nguyễn Kiêm Lực

Nội dung tóm tắt: Đề tài “Xây dựng website hệ thống bán laptop Kim anh” hướng đến việc xây dựng hệ thống chuyên bán laptop nhằm đáp ứng nhu cầu:

• Hiển thị danh sách sản phẩm: Trang web có danh sách các sản phẩm bán, kèm theo thông tin chi tiết về chúng như tên sản phẩm, hình ảnh, giá, thông số kỹ thuật và mô tả sản phẩm

• Tìm kiếm – lọc sản phẩm: Khách hàng có thể tìm kiếm sản phẩm theo tên, loạc theo hãng và giá bán

• Đặt hàng: Khách hàng có thể đặt hàng trực tuyến trên trang web và thanh toán bằng các phương thức khác nhau như thẻ tín dụng, chuyển khoản ngân hàng hoặc thanh toán khi nhận hàng • Quản lý giỏ hàng: Khách hàng có thể thêm các sản phẩm yêu thích

vào giỏ hàng và điều chỉnh số lượng sản phẩm trước khi đặt hàng • Quản lý tài khoản: Khách hàng cần đăng ký tài khoản để xem lịch sử đơn hàng, xem lịch sử mua hàng và cập nhật thông tin cá nhân • Cập nhật thông tin sản phẩm: Trang web cần cập nhật thông tin sản

phẩm mới nhất và các chương trình khuyến mãi để thu hút khách hàng

• Hỗ trợ trực tuyến: Trang web có hệ thống chat AI giúp người dung dễ dàng thao tác

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My iv TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAM Độc lập - Tự do - Hạnh phúc

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: ThS Phạm Thị Trà my

1 Tên đề tài: Xây dựng website hệ thống bán laptop Kim Anh 2 Các số liệu, tài liệu ban đầu:

Tài liệu về Python Django: https://www.w3schools.com/django

3 Nội dung chính của đồ án

Quá trình xây dựng hệ thống website bán điện thoại: - Thu thập thông tin tài liệu liên quan và khảo sát thực tế - Phân tích thiết kế các chức năng của hệ thống

- Phân tích thiết kế cơ sơ dữ liệu - Thiết kế giao diện cho các chức năng - Xây dựng hệ thống website

- Kiểm thử website - Hoàn thành báo cáo tổng hợp

4 Các sản phẩm dự kiến

- Website bán điện thoại - File báo cáo hoàn chỉnh

5 Ngày giao đồ án: 9/02/2023 6 Ngày nộp đồ án: 07/06/2023

Đà Nẵng, ngày tháng năm 2023

Trưởng khoa Giảng viên hướng dẫn

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My i

LỜI NÓI ĐẦU

Ngày nay, với sự phát triển mạnh mẽ của công nghệ thông tin và những ứng dụng của nó trong đời sống Máy tính điện tử không còn là một thứ phương tiện lạ lẫm đối với mọi người mà nó dần trở thành một công cụ làm việc và giải trí thông dụng và hữu ích của chúng ta, không chỉ ở công sở mà còn ngay cả trong gia đình

Trong nền kinh tế hiện nay, với xu thế toàn cầu hoá nền kinh tế thế giới, mọi mặt của đời sống xã hội ngày càng được nâng cao, đặc biệt là nhu cầu trao đổi hàng hoá của con người ngày càng tăng cả về số lượng và chất lượng Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện các giải pháp cũng như các sản phẩm nhằm cho phép tiến hành thương mại hóa trên Internet Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và tính tất yếu của thương mại điện tử Với một số ứng dụng được cung cấp từ nhà phát hành, người dùng có thể soạn thảo văn bản hoặc làm việc nhanh chóng trên chiếc laptop của mình

Đề tiếp cận và góp phần đẩy mạnh sự phổ biến của thương mại điện tử ở Việt

Nam, Em đã chọn đề tài “Xây dựng Website hệ thống bán laptop Kim Anh”

Đặc biệt với sự hướng dẫn tận tình của Cô Phạm Thị Trà My, em đã hoàn thành đồ án này Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thống, nhưng chắc rằng sẽ không tránh khỏi những thiếu sót Chúng em rất mong nhận được sự thông cảm và góp ý qúy của thầy cô

Chúng em xin chân thành cảm ơn!

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My iii

em xin chịu hoàn toàn trách nhiệm

Sinh viên thực hiện

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My iv

MỤC LỤC NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP iv

DANH MỤC BẢNG BIỂU viii

DANH MỤC HÌNH VẼ ix

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT xi

MỞ ĐẦU 1

1 Mục tiêu đề tài 1

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

a Đối tượng nghiên cứu 2

b Phạm vi nghiên cứu 2

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

4 Giải pháp công nghệ 2

5 Cấu trúc đồ án 2

Chương 1 Cơ sở lý thuyết 2

Chương 2 Phân tích thiết kế hệ thống 2

Chương 3 Xây dựng chương trình 2

Chương 1 CƠ SỞ LÝ THUYẾT 3

1.1.Ngôn ngữ lập trình Python Django 3

1.1.1 Khái niệm 3

1.1.2 Giới thiệu về Python Django Rest Framework 3

1.2.Ngôn ngữ thuộc Frontend 3

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My v

2.1 Khảo sát yêu cầu 4

2.1.1 Hoạt động nghiệp vụ 4

2.1.2 Sơ đồ nghiệp vụ thực tế (nếu có) 5

2.1.3 Liệt kê người dùng và yêu cầu 5

2.1.3.1 Yêu cầu của khách hàng 5

2.1.3.2 Yêu cầu của quản trị viên 6

Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 35

3.1 Công cụ xây dựng chương trình 35

3.2 Giao diện chương trình 35

3.2.1 Giao diện đăng nhập 35

3.2.2 Giao diện đăng kí 37

3.2.3 Giao diện trang chủ 40

3.2.4 Giao diện tìm kiếm sản phẩm theo giá 41

3.2.5 Giao diện tìm kiếm sản phẩm theo hãng 42

3.2.6 Giao diện tìm kiếm sản phẩm theo tên sản phẩm 43

3.2.7 Giao diện xem thông tin sản phẩm 44

3.2.8 Giao diện giỏ hàng 44

3.2.9 Giao diện mua hàng 45

3.2.10 Gia diện chat 47

3.2.11 Giao diện sửa, xóa sản phẩm 48

3.2.12 Giao diện thêm sản phẩm 49

3.2.13 Giao diện quản lý người dùng 49

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 50

3.3 Kết luận 50

3.4 Hướng phát triển 50

ÀI LIỆU THAM KHẢO 51

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My vii

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My viii

DANH MỤC BẢNG BIỂU

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My ix

DANH MỤC HÌNH VẼ Hình 2.1 Hình ảnh sơ đồ Usecase 8

Hình 3.1 Hình ảnh giao diện Login 36

Hình 3.2 Hình ảnh giao diện đăng kí 39

Hình 3.3 Hình ảnh giao diện trang chủ 40

Hình 3.4 Hình ảnh giao diện tìm kiếm theo giá 41

Hình 3.5 Hình ảnh giao diện tìm kiếm theo hãng 42

Hình 3.6 Hình ảnh sản phẩm tìm kiếm theo tên sản phẩm 43

Hình 3.7 Hình ảnh giao diện xem thông tin sản phẩm 44

Hình 3.8 Hình ảnh giao diện giỏ hàng 44

Hình 3.9 Hình ảnh giao diện giao hàng với khách vãng laiLỗi! Thẻ đánh dấu không được xác định.Hình 3.10 Hình ảnh giao diện với khách hàng thành viên 46

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My x Hình 3.11 Hình ảnh giao diện mua thành công 46Hình 3.12 Hình ảnh giao diện sửa, xóa sản phẩm 48Hình 3.13 Giao diện thêm sản phẩm 49

Hình 3.14 Giao diện quản lý đơn hàng Lỗi! Thẻ đánh dấu không được xác định.Hình 3.15 Giao diện quản lý chi tiết đơn hàngLỗi! Thẻ đánh dấu không được

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My xi

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My xii DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH

Stt Chữ viết tắt Giải nghĩa Nghĩa tiếng Việt

2 3

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My 1

MỞ ĐẦU

Những năm gần đây, trên thị trường du nhập hàng loạt các loại sản phẩm công nghệ như điện thoại, laptop, máy tính bảng, Cùng với sự phát triển nhanh chóng của công nghệ, phương thức mua sắm trực tuyến ngày càng trở nên phổ biến Laptop không chỉ được sử dụng như một công cụ làm việc hiệu quả mà còn được xem như một dụng cụ để liên lạc với bạn bè qua internet và giải trí Với nhu cầu ngày càng tăng, nhu cầu tìm kiếm và mua sắm lap top online cũng ngày càng được ưa chuộng

Cùng với các lý do nêu trên, qua tìm hiểu nhóm đồ án được biết việc ứng dụng bán laptop trực tuyến sẽ giúp cho khách hàng giảm bớt được thời gian và công sức phải đến tận cửa hàng để mua Muốn lựa chọn cho mình một chiếc laptop ưng ý phù hợp với túi tiền thì khách hàng chỉ cần vài thao tác đơn giản trên website là có thế mua được mặt hàng laptop mình cần

Vì vậy, trong đề tài tốt nghiệp này, tôi đặt ra mục tiêu thiết kế và xây dựng một

website bán laptop trực tuyến cho cửa hàng Kim Anh với các tính năng tiện lợi, đem

lại trải nghiệm mua sắm tốt nhất cho khách hàng Chúng tôi hi vọng đề tài này sẽ đóng góp vào việc nâng cao trải nghiệm mua sắm cho người dùng và phục vụ nhu cầu mua sắm trực tuyến hiệu quả hơn

Đề tài nghiên cứu và áp dụng cho hệ thống Kim Anh trên toàn quốc

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

• Khảo sát nhu cầu thực tế của những người có nhu cầu tìm mua laptop trực tuyến

• Tham khảo các website bán laptop trực tuyến • Lấy ý tưởng từ website bán hàng Kim Anh

4 Giải pháp công nghệ

Công nghệ sử dụng gồm: • Python Django

• ReactJS • Vercel, Heroku • Postgres, aws s3

5 Cấu trúc đồ án

Ngoài phần các kí hiệu và chữ viết tắt, danh mục các bảng, danh mục các hình vẽ, mở đầu và phần kết luận, danh mục tài liệu tham khảo, nội dung đồ án gồm 4 chương:

Mở đầu Chương 1 Cơ sở lý thuyết Chương 2 Phân tích thiết kế hệ thống Chương 3 Xây dựng chương trình Kết luận và hướng phát triển

1.1.2 Giới thiệu về Python Django Rest Framework

Django Rest Framework là một framework hổ trợ triển khai api mạnh mẽ với nhiều thư viện hổ trợ được viết bằng ngôn ngữ Python Nó được dùng để xây dựng các api cho các ứng dụng, website

Rest Framework có các thư viện hổ trợ về api mạnh mẽ như: viewsets, APIViews, GenricsView, Serializers, Router

Đặc biệt Rest Framework có các gói hổ trợ mạnh mẽ về xác thực người dùng và giao thức chéo như: django rest framework simpleJWT và Django Cors Header

1.2 Ngôn ngữ thuộc Frontend 1.2.1 ReactJS

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa

ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng UI là tập hợp những thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kể đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card,… Giả sử bạn đang lập trình một website thương mại điện tử, sau khi người dùng chọn được sản phẩm ưng ý rồi và nhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn phải làm đó là thêm sản phẩm được chọn vào giỏ hàng và hiển thị lại sản phẩm đó khi user vào xem => xử lý tương tác

(object-PostgreSQL được phát triển dựa trên POSTGRES 4.2 tại phòng khoa học máy tính Berkeley, Đại học California

PostgreSQL được thiết kế để chạy trên các nền tảng tương tự UNIX Tuy nhiên, PostgreSQL sau đó cũng được điều chỉnh linh động để có thể chạy được trên nhiều nền tảng khác nhau như Mac OS X, Solaris và Windows

PostgreSQL là một phần mềm mã nguồn mở miễn phí Mã nguồn của phần mềm khả dụng theo license của PostgreSQL, một license nguồn mở tự do Theo đó, bạn sẽ được tự do sử dụng, sửa đổi và phân phối PostgreSQL dưới mọi hình thức

PostgreSQL không yêu cầu quá nhiều công tác bảo trì bởi có tính ổn định cao Do đó, nếu bạn phát triển các ứng dụng dựa trên PostgreSQL, chi phí sở hữu sẽ thấp hơn so với các hệ thống quản trị dữ liệu khác

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My 5

Hình 2.1 Sơ đồ hoạt động nghiệp vụ

2.1.2 Sơ đồ nghiệp vụ thực tế (nếu có)

2.1.3 Liệt kê người dùng và yêu cầu 2.1.3.1 Yêu cầu của khách hàng

• Giao diện dễ sử dụng và có tính thẩm mỹ cao • Cho phép khách hàng đăng kí thành viên và bảo mật thông tin cá nhân

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My 6 • Xem và thay đổi thông tin về tài khoản

• Hình thức thanh toán phải đảm bảo chính xác • Thông tin sản phẩm phong phú, đa dạng

▪ Giới thiệu, bày bán nhiều loại hàng, mặt hàng để khách hàng có nhiều cơ hội lựa chọn Thông tin về một sản phẩm phải chi tiết để khách hàng có thể nắm bắt rõ thông tin mà mình lựa chọn Đặc biệt là mặt hàng được nhiều khách quan tâm

▪ Luôn cập nhật, giới thiệu những thế hệ laptop mới nhất • Cho phép khách hàng tìm kiếm nhanh chóng, chính xác theo nhiều tiêu chí • Cho phép thống kê các đơn hàng đã đặt của mình tại công ty

2.1.3.2 Yêu cầu của quản trị viên

Ngoài những yêu cầu giống như khách hàng, thì hệ thống phải đảm bảo những yêu cầu sau của ban quản trị

• Quản lý chung: Liên quan đến các thông tin nhân viên, khách hàng…… • Cập nhật thông tin hàng hóa trực tuyến

Dễ dàng cập nhật và thường xuyên thay đổi hình ảnh, thông tin chi tiết giá các mặt hàng bạn sẽ kinh doanh ở bất cứ đâu

• Quản lý các đơn hàng trực tuyến

Quản lý, lưu trữ và báo cáo thông tin về đặt hàng và trạng thái của đơn hàng: đã giao hàng chưa, đã thanh toán chưa……

• Thống kê chi tiết cụ thể, chính xác và nhanh chóng ▪ Thống kê các mặt hàng nào hết, mặt hàng nào bán chạy……… ▪ Cho phép in các danh sách, các thông tin cần thiết

▪ Tổng hợp lưu trữ các ý kiến phản ánh của khách hàng để có thể trả lời khách hàng một cách nhanh chóng

2.2 Phân tích thiết kế hệ thống 2.2.1 Liệt kê Actor và Usecase

2.2.1.1 Khách hàng vãng lai

Có các usecase chính như:

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My 7 • Đăng kí thành viên

• Tìm kiếm – lọc sản phẩm : ▪ Tìm kiếm theo tên sản phẩm ▪ Tìm kiếm theo mức giá ▪ Tìm kiếm theo hãng • Xem danh sách sản phẩm

2.2.1.2 Khách hàng thành viên

Có các usecase chính như : • Đăng nhập

• Tìm kiếm – lọc sản phẩm ▪ Tìm kiếm theo tên sản phẩm ▪ Lọc theo hãng

▪ Lọc theo giá • Xem lịch sử mua hàng • Cập nhật thông tin cá nhân • Bình luận – đánh giá • Thanh toán

• Chat o Chat với AI o Chat với nhân viên

2.2.1.3 Quản trị viên

Có các usecase chính như: • Cập nhật tài khoản • Thống kê

o Xuất / nhập / tồn kho o Doanh thu

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My 8

2.2.2 Sơ đồ usecase

Hình 2.1 Hình ảnh sơ đồ Usecase

2.2.3 Kịch bản và sơ đồ hoạt động 2.2.3.1 Đăng kí tài khoản

USE CASE: Đăng ký tài khoản

Trigger (Khởi sự quá trình)

Người dùng lựa chọn đăng ký

Preconditions (Các tiền điều kiện)

username đăng nhập chưa từng được sử dụng

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My 9

thái kết thúc thành công)

Đăng ký tài khoản thành công

System Hiển thị màn hình đăng ký

2

Actors Nhập email

3

system Xác thực email

A1: Gữi mã xác thực đến email

4

actor Nhập mã xác thực

5

actor Nhập thông tin

Tạo mật khẩu

Trở về trang đăng nhập

6

Kết thúc hoạt vụ

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My 10

A1: Nhấn các nút điều hướng khác

1

System Trả về trang theo yêu cầu

Luồng trở về bước 6 của luồng chính

A2: email đăng nhập đã tồn tại

1

System Hiển thị thông báo lỗi: email đăng nhập đã tồn

tại

Luồng trở về bước 2 của luồng chính

• Sơ đồ hoạt động

Hình 2.2 Hình ảnh Usecase đăng kí

Người dùng lựa chọn đăng nhập

Preconditions (Các tiền điều kiện)

Tài khoản và mật khẩu phải tồn tại

thái kết thúc thành công)

Đăng nhập thành công vào hệ thống

thái kết thúc thất bại)

Đăng nhập thất bại

1 System Hiển thị màn hình đăng nhập

2 Actors Khách hàng nhập thông tin theo form

3 System Hệ thống keierm tra thông tin tài khoản

có trùng khớp hay không

Vào trang sản phẩm

Preconditions (Các tiền điều kiện)

thái kết thúc thành công)

Danh sách các sản phẩm thoả mãn tiêu chí tìm kiếm được hiển thị

thái kết thúc thất bại)

Danh sách kết quả không được hiển thị

1

System Hiển thị màn hình tìm kiếm sản phẩm

2

Actors Nhập, chọn các tiêu chí tìm kiếm

A1: Chọn các nút điều hướng khác nút tìm kiếm

3

Actors Chọn nút tìm kiếm

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My 14

4

System Thực hiện tìm kiếm các sản phảm thoả mãn tiêu

chí A2: Danh sách tìm kiếm rỗng

5

System Hiển thị danh sách kết quả tìm kiếm

6

Hoạt vụ kết thúc

A1: Chọn các nút điều hướng khác nút tìm kiếm

1 System Trả về trang theo yêu cầu

Luồng trở về bước 6 của luồng chính

A2: Danh sách tìm kiếm rỗng

2 System Hiển thị thông báo: Không có sản phẩm nào

thoả mãn yêu cầu tìm kiếm

Luồng trở về bước 6 của luồng chính

• Sơ đồ hoạt động

SVTH: Nguyễn Kiêm Lực GVHD: ThS Phạm Thị Trà My 15

Hình 2.4 Hình ảnh usecase tìm kiếm

2.2.3.4 Xem thông tin sản phẩm

USE CASE: Xem thông tin sản phẩm

đích)

Use case cho phép người dùng xem thông tin chi tiết sản phẩm

Trigger (Khởi sự quá trình)

Vào trang sản phẩm

Preconditions

Hiển thị sản phẩm mà người dùng muốn xem

thái kết thúc thất bại)

1 System Hiển thị màn hình sản phẩm

2 Actors Chọn sản phẩm muốn tìm hiểu

3 System Hiển thị thông tin sản phẩm khách hàng

yêu cầu

4 Hoạt vụ kết thúc

• Sơ đồ hoạt động

Vào trang giỏ hàng

Preconditions (Các tiền điều kiện)

thái kết thúc thành công)

Danh sách các sản phẩm trong giỏ hàng