đề tài xây dựng website bán đồng hồ

Các ứng dụng của công nghệ thông tin ngày càng đi sâu vào đời sống con người trở thành một bộ phận không thể thiếu của thế giới văn minh.. Vì vậy cần các mặt hàng khác nhau để phục vụ nh

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

Xây Dựng Website Bán Đồng Hồ

Sinh viên thực hiện: Phạm Nguyễn Viết Cảnh

Giảng viên hướng dẫn: TS Lê Thị Thu Nga

ii

Đà Nẵng, tháng 11 năm 2021

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

Xây Dựng Website Bán Đồng Hồ

Sinh viên: Phạm Nguyễn Viết Cảnh

Giảng viên hướng dẫn: TS Lê Thị Thu Nga

Đà Nẵng, tháng 11 năm 2021

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

iv

LỜI CẢM ƠN

Để hoàn thành bài báo cáo này, trước hết, em xin cảm ơn các thầy cô giáo khoa công nghệ thông tin Trường Đại học CNTT và Truyền Thông Việt - Hàn, em đã nhận được rất nhiều sự quan tâm, giúp đỡ của quý thầy cô cùng bạn bè Em cũng xin gửi lời cảm ơn đến ban giám hiệu nhà trường đã tạo điều kiện tốt nhất cho em củng như các bạn trong suốt thời gian học tập

Em xin bày tỏ lòng biết ơn xâu sắc nhất tới cô giáo TS Lê Thị Thu Nga, người

đã hướng dẫn, chỉ bảo tận tình để em hoàn thành quá trình làm đồ án tốt nghiệp Xin cảm ơn bạn bè và gia đình đã động viên cổ vũ, đóng góp ý kiến, trao đổi, động viên trong suốt quá trình học cũng như làm đồ án tốt nghiệp, gúp em hoàn thành

đề tài đúng thời hạn

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

Sinh viên,

MỤC LỤC

DANH MỤC HÌNH VẼ ix

MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục tiêu đạt được 1

3 Nhiệm vụ và hướng giải quyết 1

4 Ý nghĩa thực tiển của đề tài 2

5 Bố cục của đồ án 2

Chương 1 CÔNG CỤ CÔNG NGHỆ 3

1.1 Công cụ phần mềm 3

1.1.1 Visual Studio Code 3

1.1.2 Xampp 4

1.2 Công nghệ 4

1.2.1 HTML , CSS , JAVASCRIPT 4

1.2.2 Tailwind CSS 6

1.2.3 Fontawesome.com , boxicon.com 6

1.2.4 PHP 6

1.2.5 Laravel 7

1.2.6 MySQL 8

Chương 2 PHÂN TÍCH MÔ HÌNH HỆ THỐNG 9

2.1 Phân tích yêu cầu 9

2.1.1 Yêu cầu chức năng hệ thống 9

2.1.2 Yêu cầu về hình thức 10

2.1.3 Yêu cầu về bảo mật 10

2.2 Sơ đồ chức năng 11

2.2.1 Sơ đồ UseCase chung 11

2.2.2 Về người dùng 12

2.2.3 Về người quản trị 12

vi

2.3 Biểu đồ hoạt động 13

2.3.1 Biểu đồ hoạt động đăng nhập cho người dùng 13

2.3.2 Biểu đồ hoạt động đăng ký cho người dùng 14

2.3.3 Biểu đồ hoạt động tìm kiếm sản phẩm 15

2.3.4 Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng 16

2.3.5 Biểu đồ hoạt động đặt hàng 17

2.3.6 Biểu đồ hoạt động đăng nhập của người quản trị 18

2.3.7 Biểu đồ hoạt động quản lý sản phẩm 19

2.4 Biểu đồ class diagram 20

2.5 Phân tích cơ sở dữ liệu 21

2.5.1 Bảng tài khoản 21

2.5.2 Bảng sản phẩm 21

2.5.3 Bảng nhóm sản phẩm 22

2.5.4 Bảng chi tiết sản phẩm 22

2.5.5 Bảng giỏ hàng 23

2.5.6 Bảng đơn hàng 23

2.5.7 Bảng chi tiết đơn hàng 24

2.5.8 Bảng chi tiết đánh giá 24

2.5.9 Bảng ảnh 24

2.5.10 Bảng tin tức 25

2.5.11 Bảng địa chỉ 25

2.5.12 Mối quan hệ giữa các bảng trong cơ sở dữ liệu 26

Chương 3 XÂY DỰNG WEBSITE 27

3.1 Giao diện cho người dùng 27

3.1.1 Giao diện đăng ký 27

3.1.2 Giao diện đăng nhập 27

3.1.3 Giao diện trang giới thiệu 28

3.1.4 Giao diện trang đồng hồ nam 28

3.1.5 Giao diện trang đồng hồ nữ 29

3.1.6 Giao diện trang đồng hồ đôi 29

3.1.7 Giao diện trang phụ kiện 30

3.1.8 Giao diện trang chi tiết sản phẩm 30

3.1.9 Giao diện phần đánh giá và bình luận 31

3.1.10 Giao diện trang giỏ hàng 32

3.1.11 Giao diện trang thanh toán 32

3.1.12 Giao diện trang xem tình trạng đơn hàng 33

3.1.13 Giao diện trang tin tức 33

3.1.14 Giao diện trang liên hệ 34

3.2 Giao diện người quản trị 34

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

3.2.2 Giao diện trang tổng quan 35

3.2.3 Giao diện trang quản lý đơn hàng 35

3.2.4 Giao diện trang quản lý sản phẩm 36

3.2.5 Giao diện phần sửa thông tin sản phẩm và xoá sản phẩm 36

3.2.6 Giao diện phần thêm sản phẩm 37

3.2.7 Giao diện phần thêm sản phẩm 38

3.2.8 Giao diện trang quản lý tài khoản người dùng 38

3.2.9 Giao diện trang quản lý về tin tức 39

3.2.10 Giao diện trang thêm sửa xoá của phần tin tức 39

3.2.11 Giao diện trang quản lý nhóm sản phẩm 40

3.2.12 Giao diện trang thêm nhóm sản phẩm 40

KẾT LUẬN 41

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

2 Hạn chế và hướng phát triển 42

2.1 Hạn chế 42

2.2 Hướng phát triển 42

TÀI LIỆU THAM KHẢO i

PHỤ LỤC i

viii

DANH MỤC CÁC TỪ VIẾT TẮT

VIẾT TẮT NỘI DUNG

DANH MỤC HÌNH VẼ

Hình 1: Ứng dụng của Visual Studio Code 3

Hình 2: Ứng dụng Xampp 4

Hình 3: HTML 4

Hình 4: Đoạn code dùng CSS 5

Hình 5: Sử dụng JavaScript 5

Hình 6: Sử dụng Tailwind CSS 6

Hình 7: Sử dụng code PHP 7

Hình 8: Sử dụng ngôn ngữ Laravel 7

Hình 9: Ứng dụng MySQL 8

Hình 10: Sơ đồ Usecase 11

Hình 11: Sơ đồ Usecase của khách hàng 12

Hình 12: Sơ đồ Usecase của người quản trị 12

Hình 13: Biểu đồ hoạt động đăng nhập cho người dùng 13

Hình 14: Biểu đồ hoạt động đăng ký cho người dùng 14

Hình 15: Biểu đồ hoạt động tìm kiếm sản phẩm 15

Hình 16: Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng 16

Hình 17: Biểu đồ hoạt dộng đặt hàng 17

Hình 18: Biểu đồ hoạt động đăng nhập của người quản trị 18

Hình 19: Biểu đồ hoạt động quản lý sản phẩm 19

Hình 20: Biểu đồ class diagram 20

Hình 21: Quan hệ giữa các bảng trong MySQL 26

Hình 22: Trang đăng ký tài khoản cho người dùng 27

Hình 23: Trang đăng nhập cho người dùng 27

Hình 24: Trang giới thiệu 28

Hình 25: Trang đồng hồ nam 28

Hình 26: Trang đồng hồ nữ 29

Hình 27: Trang đồng hồ đôi 29

x

Hình 28: Trang phụ kiện 30

Hình 29: Trang chi tiết sản phẩm 30

Hình 30: Trang chi tiết sản phẩm 31

Hình 31: Phần đánh giá và bình luận về sản phẩm trong trang chi tiết sản phẩm 31

Hình 32: Trang giỏ hàng 32

Hình 33: Trang thanh toán 32

Hình 34: Trang xem tình trạng đơn hàng 33

Hình 35: Trang tin tức 33

Hình 36: Trang liên hệ 34

Hình 37: Trang đăng nhập cho ADMIN 34

Hình 38: Trang tổng quan của ADMIN 35

Hình 39: Trang quản lý đơn hàng 35

Hình 40: Trang quản lý sản phẩm 36

Hình 41: Phần sửa thông tin sản phẩm và xoá sản phẩm 36

Hình 42: Phần sửa thông tin sản phẩm và xoá sản phẩm 37

Hình 43: Phần thêm sản phẩm 37

Hình 44: Phần thêm sản phẩm 38

Hình 45: Trang quản lý tài khoản người dùng 38

Hình 46: Trang quản lý về tin tức 39

Hình 47: Thêm sửa xoá của phần tin tức 39

Hình 48: Quản lý nhóm sản phẩm 40

Hình 49: Thêm nhóm sản phẩm 40

MỞ ĐẦU

1 Lý do chọn đề tài

Ngày nay, công nghệ thông tin không ngừng phát triển một cách mạnh

mẽ và hiện đại Các ứng dụng của công nghệ thông tin ngày càng đi sâu vào đời sống con người trở thành một bộ phận không thể thiếu của thế giới văn minh Với xu thế toàn cầuu hóa nền kinh tế thế giới, đặc biệt là nhu càu trao đổi hàng hóa của con người ngày càng tăng cả về số lượng và chất lượng, nhu cầu

sử dụng Internet ngày càng nhiều và các hình thức kinh doanh trên mạng ngày càng đa dạng và trở thành một công cụ không thể thiếu Vì vậy, nhiều cửa hàng đã áp dụng phương pháp bán hàng qua mạng (thương mại điện tử)

để khách hàng dễ dạng tìm kiếm thông tin và không cần tốn nhiều thời gian

và chi phí Từ những vấn đề đặt ra ở trên, em đã chọn đề tài : “Xây dựng website bán đồng hồ”

2 Mục tiêu đạt được

Thông tin hiện nay là một lĩnh vực rất quan trọng đối với cuộc sống hiện nay, bên cạnh đó còn có các nhu cầu nghe nhìn giải trí trao đổi thông tin, … Vì vậy cần các mặt hàng khác nhau để phục vụ nhu cầu trên, nhưng để chọn được những mặt hàng như ý đúng với nhu cầu sử dụng thì không phải dễ nên em đã xây dựng website bán đồng hồ nhằm một phần nào đó giúp khách hàng có thể lựa chọn và mua những mặt hàng mọi lúc mọi nơi, không cần đi xa mà hàng về tận nhà chỉ cần một cái click chuột

Khách hàng có thể lựa chọn nhiều phương thức thanh toán cũng như thời gian và địa điểm nhận hàng

3 Nhiệm vụ và hướng giải quyết

Từ các yêu cầu đặt ra, đề tài tiến hành phân tích và đưa ra hướng giải quyết theo các bước sau:

- Hoàn chỉnh các chức năng cơ bản của một trang web thương mại điện tử: Các chức năng như đăng nhập, đăng ký, xem giỏ hàng, xem các sản

phẩm trên hệ thống

2

- Hỗ trợ các dịch vụ cho người dùng: Các chức năng như phản hồi đánh

giá từ người dùng tới trang web, hiển thị lên đánh giá để mọi người có thể

thấy và nhận xét về sản phẩm mà mình quan tâm

- Quản lý thông tin các mặt hàng: Các sản phẩm đều có thông tin xuất xứ,

cũng như có các đánh giá từ người dùng để lấy lòng tin từ khách hàng

- Quản lý thông tin về đơn mua hàng: Thông tin về các sản phẩm trong

giỏ hàng đều được hiển thị đầy đủ, chi tiết trong phần quản lý giỏ hàng

của người mua

- Kết nối tới nhiều nhà phối sản phẩm: Để các loại sản phẩm được đa

dạng cũng như đáp ứng nhu cầu của khách hàng thì hệ thống sẽ liên kết với nhiều nhà cung cấp khác nhau để đa dạng hóa mặt hàng cũng như minh

bạch về giá giữa các địa điểm bán hàng khác nhau

4 Ý nghĩa thực tiển của đề tài

Ý nghĩa thực tiển của đề tài như sau:

- Ý nghĩa đối với người sử dụng hệ thống website: Mua sản phẩm dể

dàng, ít tốn kém, hàng hoá chất lượng, phục vụ tận tình từ nhân viên

website

- Ý nghĩa đối với cá nhân sinh viên: Tạo một website thân thiện và hiệu

quả hơn trong việc quản lý hay bán sản phẩm bằng thủ công Hoàn thành

tốt đồ án tốt nghiệp đồng thời qua đó nâng cao trình độ của mình

5 Bố cục của đồ án

Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như sau:

- Chương 1 Công cụ công nghệ Trong chương này sẽ trình bày các công

cụ công nghệ để xây dựng website

- Chương 2 Phân tích thiết kế hệ thống Nội dung chương bao gồm các:

- Phân tích yêu cầu

- Sơ đồ chức năng

- Phân tích cơ sở dữ liệu

- Mối quan hệ

- Chương 3 Xây dựng Website Chương này trình bày giao diện của người

dùng và của người quản trị

Cuối cùng là Kết luận, Tài liệu tham khảo và Phụ lục liên quan đến đề tài.

Chương 1 CÔNG CỤ CÔNG NGHỆ

1.1 Công cụ phần mềm

1.1.1 Visual Studio Code

Visual Studio Code là một trong những trình soạn thảo mã nguồn phổ

biến nhất được sử dụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến Visual Studio Code ngày càng được ứng dụng rộng rãi

Hình 1: Ứng dụng của Visual Studio Code

Visual Studio Code có thể hỗ trợ nhiều ngôn ngữ lập trình, hỗ trợ đa nền tảng, cung cấp kho tiện ích mở rộng, kho lưu trữ an toàn, hỗ trợ web, lưu trữ dữ liệu dạng phân cấp, hỗ trợ viết code, hỗ trợ thiết bị đầu cuối, màn hình đa nhiệm,

hỗ trợ Git

4

1.1.2 Xampp

Hình 2: Ứng dụng Xampp

XAMPP là chương trình tạo máy chủ Web (Web Server) được tích hợp

sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin Xampp cũng là 1 đa nền tảng vì nó có thể chạy tốt trên cả Linux, Windows và Mac

1.2 Công nghệ

1.2.1 HTML , CSS , JAVASCRIPT

HTML được viết tắt của từ “Hyper Text Markup Language” dùng để

xây dựng và cấu trúc lại các thành phần có trong website

Hình 3: HTML

HTML giúp người tạo và cấu trúc các thành phần trong trang web hoặc

ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, vâng vâng

CSS là viết tắt của từ “Cascading Style Sheets” , nó là một ngôn ngữ

được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ

đánh dấu (HTML)

Hình 4: Đoạn code dùng CSS

Có thể hiểu CSS đóng vai trò như một công cụ giúp chúng ta thêm vào

những thay đổi về mặt hình thức như đổi bố cục, màu sắc, font chữ CSS hoạt

động bằng cách khoanh vùng chọn dựa vào tên một thẻ HTML, ID hay Class

JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20

năm qua Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web

Hình 5: Sử dụng JavaScript

6

1.2.2 Tailwind CSS

Tailwind CSS là một Framework mà các thuộc tính css đã được viết sẵn

và gán thành 1 class riêng, khi dùng chỉ cần gọi class mà không cần viết css riêng nửa

Hình 6: Sử dụng Tailwind CSS

1.2.3 Fontawesome.com , boxicon.com

Font Awesome và boxicon là một thư viện chứa các font chữ ký hiệu hay

sử dụng trong website Font chữ ký hiệu ở đây chính là các icons mà ta thường hay sử dụng trong các layout website

1.2.4 PHP

PHP là viết tắt của cụm từ “Hypertext Preprocessor”

PHP là ngôn ngữ lập trình kịch bản làm việc trên sever với nhiệm vụ là kết nối cơ sỡ dữ liệu và thực hiện các chức năng của web hoặc ứng dụng web PHP là một trong những ngôn ngữ lập trình được sử dụng phổ biến trên thế giới

Hình 7: Sử dụng code PHP

1.2.5 Laravel

Laravel là một PHP Framework mã nguồn mở miễn phí, được phát triển

bởi Taylor Otwell với phiên bản đầu tiên được ra mắt vào tháng 6 năm

2011 Laravel ra đời nhằm mục đích hỗ trợ phát triển các ứng dụng web, dựa

trên mô hình MVC (Model – View – Controller)

Hình 8: Sử dụng ngôn ngữ Laravel

Laravel có những tính năng tuyệt vời như:

 Artisan: cung cấp các lệnh cần thiết để phát triển ứng dụng

 View: giúp code sạch sẽ hơn rất nhiều

8

 Migrations: hỗ trợ tạo các trường trong cơ sở dữ liệu, thêm các cột trong bảng, tạo mối quan hệ giữa các bảng, hỗ trợ quản lý cơ sở dữ liệu

 Authentication: cung cấp sẵn các tính năng đăng nhập, đăng ký, quên mật khẩu

 Unit Testing: hỗ trợ test lỗi để sửa chữa

1.2.6 MySQL

MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến hàng đầu trên thế giới và đặc biệt được ưa chuộng trong quá trình xây dựng, phát triển ứng dụng Đây là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng,

có khả năng thay đổi mô hình sử dụng phù hợp với điều kiện công việc khả chuyển MySQL hoạt động trên nhiều hệ điều hành, cung cấp một hệ thống lớn các hàm tiện ích rất mạnh

Hình 9: Ứng dụng MySQL

Chương 2 PHÂN TÍCH MÔ HÌNH HỆ THỐNG

2.1 Phân tích yêu cầu

2.1.1 Yêu cầu chức năng hệ thống

Về phía người dùng:

- Đăng ký

Khi khách hàng đăng ký và nhập đầy đủ các thông tin trong phần đăng

ký thì hệ thống sẽ báo đăng ký thành công và trở về trang đăng nhập, ngược lại người dùng nhập sai hoặc thiếu thông tin như ở phần đăng ký thì hệ thống

sẽ hiển thị thông báo “Quý khách vui lòng nhập đúng và đầy đủ thông tin đăng ký”

- Xem chi tiết sản phẩm

Khi khách hàng bấm vào sản phẩm sẽ được chuyển đến trang chi tiết sản phẩm của sản phẩm đó, ở đây hệ thống sẽ hiển các thông tin của sản phẩm đó và khách hàng có thể thêm sản phẩm vào giỏ hàng hoặc mua ngay tại đây

- Thêm giỏ hàng

Khi khách hàng chọn và ấn thêm sản phẩm vào giỏ hàng thì sản phẩm sẽ được thêm vào trong giỏ hàng của khách hàng và khách hàng có thể điều chỉnh tăng giảm số lượng hoặc xoá bỏ sản phẩm đấy tuỳ thích tại giỏ hàng của mình

- Đặt hàng

Khi khách hàng muốn đặt hàng thì vào phần giỏ hàng để thanh toán, khi bấm nút thanh toán sẽ đưa khách hàng đến trang thanh toán để điền chính xác thông tin giao hàng và đặt hàng

Khách hàng cũng có thể đặt hàng bằng cách bấm vào nút mua ngay

để đến trang thanh toán và điền các thông tin giao hàng rồi đặt hàng

- Đánh giá sản phẩm

Khi khách hàng nhận được hàng có thể đánh giá chất lượng sản phẩm đã mua từ 1 sao đến 5 sao

- Giao diện bắt mắt, thân thiện và dễ dùng

- Logo, màu sắc, phông chữ được thiết kế hài hoà

- Cho phép người dùng chọn nhanh các sản phẩm thông qua các sản phẩm được đề xuất

- Thân thiện với các công cụ tìm kiếm để các ông lớn dễ tìm thấy bạn từ đó nâng cao khả năng tiếp cận với khách hàng

- Hỗ trợ tư vấn – hỏi đáp

2.1.3 Yêu cầu về bảo mật

- Thường xuyên cập nhật phần mềm ứng dụng cho website

- Bảo mật website bằng SSL

- SSL(Secure Sockets Layer) là tiêu chuẩn của công nghệ bảo

mật cũng như truyền thông mã hóa giữa máy chủ với trình

duyệt web Tiêu chuẩn SSL hoạt động và đảm bảo các dữ liệu truyền tải giữa máy chủ và trình duyệt của người dùng đảm bảo riêng

tư và toàn vẹn

- Cấu hình security cho website, kiểm tra mã nguồn website định kỳ

- Sao lưu thường xuyên Backup dữ liệu hàng ngày, hàng tuần hoặc hàng tháng

2.2 Sơ đồ chức năng

2.2.1 Sơ đồ UseCase chung

Hình 10: Sơ đồ Usecase

2.3 Biểu đồ hoạt động

2.3.1 Biểu đồ hoạt động đăng nhập cho người dùng

Hình 13: Biểu đồ hoạt động đăng nhập cho người dùng

14

2.3.2 Biểu đồ hoạt động đăng ký cho người dùng

Hình 14: Biểu đồ hoạt động đăng ký cho người dùng

2.3.3 Biểu đồ hoạt động tìm kiếm sản phẩm

Hình 15: Biểu đồ hoạt động tìm kiếm sản phẩm

16

2.3.4 Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng

Hình 16: Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng

2.3.5 Biểu đồ hoạt động đặt hàng

Hình 17: Biểu đồ hoạt dộng đặt hàng