Xây dựng website thương mại Điện tử bán các thiết bị công nghệ

MỞ ĐẦUGiới thiệu tổng quan về đề tài Hiện nay, dưới sự phát triển của công nghệ thông tin, đặc biệt là trong lĩnhvực thương mại điện tử đã giúp các cá nhân, doanh nghiệp có mặt hàng dễ d

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

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

MỞ ĐẦU

Giới thiệu tổng quan về đề tài

Hiện nay, dưới sự phát triển của công nghệ thông tin, đặc biệt là trong lĩnhvực thương mại điện tử đã giúp các cá nhân, doanh nghiệp có mặt hàng dễ dàngtiếp cận được với người tiêu dùng Hầu hết họ đều có website để giới thiệu vềsản phẩm của doanh nghiệp mình Vì thế chúng em hình thành ý tưởng thực hiệnmột website bán thiết bị công nghệ ( điện thoại, tại nghe, latop…)

Website với mục đích cung cấp cho khách hàng các thông tin chính xác vềcác loại thiết bị cửa hàng bày bán và cách thức đặt mua hàng qua mạng Cáchthức mua bán một cách gọn gàng nhanh chóng, trang web dễ sử dụng Vì vậy,rút ngắn được khoảng cách giữa người mua và người bán, đưa thông tin về cácsản phẩm mới nhanh chóng đến cho khách hàng Giao diện thân thiện đẹp mắt

Đồ án gồm 6 phần chính:

Chương 1 Giới thiệu: giới thiệu đề tài, phương pháp thực hiện và mục tiêu của

đề tài

Chương 2 Tổng quan về Ecommerce Website

Chương 3 Nghiên cứu tổng quan: trình bày kiến thức tổng quan về các ngônngữ sẽ được sử dụng để thiết kế website

Chương 4 Phân tích và thiết kế hệ thống: Đặc tả các chức năng của website.Chương 5 Thiết kế cơ sở dữ liệu

Chương 6 Giao diện website

LỜI CẢM ƠN

Để thực hiện và hoàn thành tốt đồ án này, em đã nhận được sự giúp đỡ vàhướng dẫn rất tận tình của các thầy cô thuộc Đại học Công Nghệ Thông Tin vàTruyền Thông – Đại Học Đà Nẵng Em xin cảm ơn các thầy cô thuộc bộ mônchuyên ngành đã cung cấp cho chúng em các thông tin, kiến thức vô cùng quýbáu và cần thiết trong suốt thời gian quá để em có thể thực hiện và hoàn thành

đồ án của mình Đặc biệt em xin chân thành cảm ơn thầy Ts.Lê Thành Côngngười đã trực tiếp hướng dẫn chúng em trong thời gian thực hiện đồ án này.Cuối cùng, xin chân thành cảm ơn các bạn trong ngành công nghệ thông tin

đã ủng hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúpchúng tôi trong quá trình nghiên cứu và thực hiện đề tài

Do giới hạn về mặt thời gian và kiến thức cũng như kinh nghiệm thực tiễnnên đề tài không tránh khỏi những sai sót Em rất mong nhận được sự thông cảmcủa quý thầy cô và mong đón nhận những góp ý của thầy cô và các bạn

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

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

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

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

MỤC LỤC

LỜI CẢM ƠN 2

CHƯƠNG 1: GIỚI THIỆU 1

1.1 Tổng quan 1

1.1.1 Lí do chọn đề tài 1

1.1.2 Mục đích thực hiện đề tài 1

1.2 Nhiệm vụ thực hiện đề tài 1

1.2.1 Phương pháp thực hiện 1

1.2.2 Kết quả dự kiến 2

CHƯƠNG 2: TỔNG QUAN VỀ ECOMMERCE WEBSITE 2

2.1 Giới thiệu về Ecommerce website 2

2.2 Một số quy trình hoạt động 3

2.2.1 Quy trình đăng kí tài khoản 3

2.2.2 Quy trình đăng nhập 3

2.2.3 Quy trình tìm kiếm sản phẩm 4

2.2.4 Quy trình thêm sản phẩm vào danh sách yêu thích 5

2.2.5 Quy trình thêm sản phẩm vào giỏ hàng 6

2.2.6 Quy trình thanh toán 7

2.2.7 Quy trình quản lý tài khoản khách hàng 8

2.2.8 Quy trình quán lý đơn đặt hàng 8

2.2.9 Quy trình quản lý sản phẩm 9

2.3 Cơ cấu tổ chức website 9

CHƯƠNG 3 NGHIÊN CỨU TỔNG QUAN 10

3.1 Ngôn ngữ thiết kế website 10

3.1.1 Ngôn ngữ lập trình Go 10

3.1.2 Ngôn ngữ HTML 11

3.1.3 Ngôn ngữ CSS 12

3.1.4 Ngôn ngữ lập trình TypeScript 13

3.1.5 ReactJs 14

3.1.7 Cơ sở dữ liệu SQL 14

3.2 Ngôn ngữ thiết kế hệ thống UML 15

CHƯƠNG 4 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG.17 4.1 Biểu đồ Use case 17

4.1.1 Biểu đồ Use Case tổng thể 17

4.1.2 Biểu đồ phân rã các Use Case khách hàng 17

4.1.2.1 Tiến trình sử dụng hệ thống 17

4.1.2.2 Tiến trình đăng nhập 18

4.1.3 Biểu đồ phân rã cho Use Case Admin 18

4.1.3.1 Tiến trình quản lý sản phẩm 18

4.1.3.2 Tiến trình quản lý tài khoản 19

4.1.3.3 Tiến trình quản lý đơn đặt hàng 19

4.1.4 Đặc tả một số Use Case 20

4.1.4.1 Use Case Đăng nhập 20

4.1.4.2 Use Case đăng kí 20

4.1.4.3 Use Case xem sản phẩm 21

4.1.4.4 Use Case thêm sản phẩm vào giỏi hàng 21

4.1.4.5 Use Case thêm sản phẩm vào danh sách yêu thích 22

4.1.4.7 Use Case bình luận 23

4.1.4.8 Use Case thanh toán 23

4.1.4.9 Use Case mua hàng 24

4.1.4.11 Use Case quản khách hàng 24

4.1.4.12 Use Case quán lý sản phẩm 25

4.1.4.13 Use Case quản lý hóa đơn 26

4.2 Biểu đồ hoạt động 27

4.2.1 Đăng ký tài khoản 27

4.2.2 Đăng nhập 28

4.2.3 Bình luận 28

4.2.4 Thêm sản phẩm vào giỏ hàng 29

4.2.5 Thanh toán 29

4.2.6 Thêm comment 30

4.2.10 Cập nhật thông tin cá nhân 30

4.2.11 Quản lý tài khoản 31

4.2.12 Quản lý sản phẩm 31

4.2.13 Quản lý đơn đặt hàng 32

4.3 Biểu đồ lớp 32

4.4 Biểu đồ tuần tự 33

4.2.1 Đăng ký tài khoản 33

4.2.2 Đăng nhập 33

4.2.3 Bình luận 34

4.2.6 Thêm sản phẩm vào giỏ hàng 34

4.2.7 Thanh toán 35

4.2.8 Thêm blog 35

4.2.10 Cập nhật thông tin cá nhân 36

4.2.11 Quản lý users 36

CHƯƠNG 5 THIẾT KẾ CƠ SỞ DỮ LIỆU 37

CHƯƠNG 6 THIẾT KẾ WEBSITE 38

1.1 Giao diện người dùng 38

1.1.1 Trang chủ 38

1.1.1.1 Sản phẩm giảm giá 39

1.1.1.2 Sản phẩm bán chạy nhất 39

1.1.1.3 Sản phẩm mới nhất 40

1.1.1.4 Footer 40

1.1.2 Giao diện đăng nhập 40

1.1.3 Giao diện đăng ký 41

1.1.4 Giao diện cập nhật thông tin khách hàng 42

1.1.5 Giao diện sản phẩm 42

1.1.5.1 Giao diện hiển thị các sản phẩm 42

1.1.5.2 Giao diện chi tiết sản phẩm 43

1.1.6 Giao diện liên hệ 45

1.1.7 Giao diện blog 45

1.1.7.1 Bình luận 45

1.1.8 Giao diện giỏ hàng 46

1.1.9 Giao diện danh sách yêu thích 47

1.1.10 Giao diện thanh toán 47

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

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

Lý thuyết 49

Các ý tưởng mới 49

Hạn chế 49

Hướng phát triển 50

TÀI LIỆU THAM KHẢO 51

DANH MỤC HÌNH

Hình 1 : Các ngôn ngữ 2

Hình 2 : Quy trình đăng kí tài khoản 3

Hình 3 : Quy trình đăng nhập 4

Hình 4 : Quy trình tìm kiếm 5

Hình 5 : Quy trình thêm sản phẩm vào danh sách yêu thích 6

Hình 6 : Quy trình thêm sản phẩm vào giỏ hàng 7

Hình 7 : Quy trình thanh toán 8

Hình 8 : Ngôn ngữ Golang 11

Hình 9 : Hình ảnh minh họa HTML 12

Hình 10 : Hình ảnh minh họa css 13

Hình 11 : Ngôn ngữ lập trình Typescript 13

Hình 12 : ReactJs 14

Hình 15 : Cơ sở dữ liệu SQL 15

Hình 17 : Sơ đồ Use Case tổng thể 17

Hình 18 : Tiến trình sử dụng hệ thống 18

Hình 19 : Tiến trình đăng nhập 18

Hình 20 : Tiến trình quản lý sản phẩm 19

Hình 21 : Tiến trình quản lý tài khoản 19

Hình 22 : Tiến trình quản lý đơn đặt hàng 20

Hình 24 : Biểu đồ hoạt động đăng ký 27

Hình 25 : Biểu đồ hoạt động đăng nhập 28

Hình 26 : Biểu đồ hoạt động bình luận 28

Hình 29 : Biểu đồ hoạt động thêm sp vào giỏ hàng 29

Hình 30 : Biểu đồ hoạt động thanh toán 29

Hình 31 : Biểu đồ hoạt động thêm comment 30

Hình 33 : Biểu đồ hoạt động cập nhật thông tin cá nhân 31

Hình 34 : Biểu đồ hoạt động quản lý tài khoản 31

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

Hình 36 : Biểu đồ hoạt động đơn đặt hàng 32

Hình 37 : Biểu đồ lớp 33

Hình 38 : Biểu đồ tuần tự đăng ký 33

Hình 39 : Biểu đồ tuần tự đăng nhập 33

Hình 40 : Biểu đồ tuần tự bình luận 34

Hình 43 : Biểu đồ tuần tự thêm sp vào giỏ hàng 35

Hình 44 : Biểu đồ tuần tự thanh toán 35

Hình 45 : Biểu đồ tuần tự thêm blog 36

Hình 47 : Biểu đồ tuần tự cập nhật thông tin cá nhân 36

Hình 48 : Biểu đồ tuần tự quản lý tài khoản 36

Hình 49 : Mối quan hệ giữa các bảng 37

Hình 50 : Trang chủ 1 38

Hình 51 : Trang chủ 2 39

Hình 52 : Trang chủ 3 40

Hình 53 : Trang chủ 4 40

Hình 55 : Footer 40

Hình 56 : Giao diện đăng nhập 41

Hình 57 : Giao diện đăng ký 42

Hình 58 : Giao diện cập nhật thông tin khách hàng 42

Hình 59 : Header trang sản phẩm 42

Hình 60 : Các sản phẩm 43

Hình 61 : Chi tiết sản phẩm 44

Hình 62 : Chi tiết sản phẩm 44

Hình 63 : Giao diện liên hệ 45

Hình 64.Giao diện blog 45

Hình 65 : Bình luận 46

Hình 67 : Giỏ hàng 47

Hình 69 : danh sách yêu thích 47

Hình 70 : thanh toán 48

Hình 71 : thanh toán 48

Hình 72 : thanh toán 48

CHƯƠNG 1: GIỚI THIỆU

1.1 Tổng quan

1.1.1 Lí do chọn đề tài

Hiện nay, dưới sự phát triển của công nghệ thông tin, đặc biệt là trong lĩnh vựcthương mại điện tử đã giúp các cá nhân, doanh nghiệp có mặt hàng dễ dàng tiếp cậnđược với người tiêu dùng Hầu hết họ đều có website để giới thiệu về sản phẩm củadoanh nghiệp mình Vì thế tụi em hình thành ý tưởng thực hiện một website bán hàngtrực tuyến

Website với mục đích cung cấp cho khách hàng các thông tin chính xác về các loại

mô hình và cách thức đặt mua hàng qua mạng Các thông tin được cập nhật thườngxuyên và nhanh chóng Vì vậy, rút ngắn được khoảng cách giữa người mua và ngườibán, đưa thông tin về các sản phẩm mới nhanh chóng đến cho khách hàng Giao diệnthân thiện đẹp mắt dễ dàng sử dụng dù là người lớn tuổi hay trẻ nhỏ

1.1.2 Mục đích thực hiện đề tài

- Xây dựng một trang website cửa hàng bán thiết bị công nghệ trực tuyến giúp chokhách hàng xem sản phẩm, mua và thanh toán các mặt hàng một cách nhanh chóng.Chủ cửa hàng dễ dàng quản lí các danh mục như sản phẩm, khách hàng, nguồn thu chitổng bill…

- Bên cạnh đó website cũng là một nơi cập nhật các thông tin tất cả các loại thiết bịthông dụng, các khách hàng có nhu cầu sở hữu những thiết bị hiện đại và uy tín củacửa hàng từ những chia sẽ được công khai và bình luận trực tiếp từ khách hàng

1.2 Nhiệm vụ thực hiện đề tài

1.2.1 Phương pháp thực hiện

- Học tập và nắm vững các ngôn ngữ cần thiết để ứng dụng vào việc thiết kế Website

- Đọc các tài liệu, các nguồn thông tin tham khảo

Hình 1 : Các ngôn ngữ 1.2.2 Kết quả dự kiến

Website được thiết kế cẩn thận, giao diện đẹp mắt, nội dung chất lượng và được bốtrí khoa học

Mục tiêu của đề tài là có thể áp dụng vào thực tế Trang web sẽ cung cấp các sảnphẩm với chất lượng tốt có nhiều disscount và làm hài lòng khách hàng một cách tốtnhất, giúp cho những người có nhu cầu mua hàng trở nên thân thiện với cửa hàng hơn

CHƯƠNG 2: TỔNG QUAN VỀ ECOMMERCE WEBSITE

2.1 Giới thiệu về Ecommerce website

- Ecommerce website là trang web bán các thiết bị công nghệ Những thiết bị như điệnthoại, laptop, máy tính bản, tai nghe

- Là mô hình mua bán trực tuyến, khách hàng sẽ dễ dàng mua sắm mà không cần tớicửa hàng trực tiếp

2.2 Một số quy trình hoạt động

2.2.1 Quy trình đăng kí tài khoản

Khi khách hàng muốn đăng kí tài khoản để sử dụng cho các việc như : mua hàng,đánh giá sản phẩm, bình luân… thì khách hàng có thể truy cập vào trang login chọnmục đăng ký sau đó nhập đầy đủ các thông tin mà form đăng ký yêu cầu và ấn vàođăng ký Sau khi thông tin khách hàng được gửi lên, hệ thống sẽ kiểm và tiến hànhđăng kí cho người xem nếu các thông tin hợp lệ và yêu cầu nhập lại nếu thông thinkhông hợp lệ

Hình 2 : Quy trình đăng kí tài khoản 2.2.2 Quy trình đăng nhập

Giao diện đăng nhập chỉ gồm 2 trường thông tin là tên tài khoản và mật khẩu

Trang đăng nhập sẽ tự động hiện khi khách có nhu cầu sử dụng các tính năng của thành viên trang web ví dụ: bình luận, đánh giá …

Hệ thống quản lý tài khoản của thành viên sẽ kiểm tra thông tin được cung cấp nếu thông tin không đúng thì sẽ quay lại màn hình đăng nhập đồng thời gửi thông báo hiển thị trên giao diện

Nếu thông tin được xác thực, đưa về giao diện trang chủ của web

Hình 3 : Quy trình đăng nhập

2.2.3 Quy trình tìm kiếm sản phẩm

Phần chức năng tìm kiếm sẽ nằm ngay trên phần header của trang web Mỗi khi khách hàng muốn tìm kiếm 1 sản phẩm nào đó thì chỉ cần nhập từ khóa tìm kiếm vào ôinput thì phần tìm kiếm sẽ tự động hiển thị 1 danh sách sản phẩm có từ khóa tương tự Lúc này khách hàng chỉ cần chọn 1 trong các sản phẩm nằm trong danh sách tìm kiếm

ấy và click vào

Hình 4 : Quy trình tìm kiếm 2.2.4 Quy trình thêm sản phẩm vào danh sách yêu thích

Khi khách hàng chưa thể mua một sản phẩm mà cần lưu lại để một khoảng thờigian sau quay lại mua, khách hàng có thể thêm vào danh sách yêu thích là hình trái timtrong những item sản phẩm Hoặc sản phẩm đã được bán hết và khách hàng muốn ghichú để lần sau quay lại website mua

h 5 : Quy trình thêm sản phẩm vào danh sách yêu thích

2.2.5 Quy trình thêm sản phẩm vào giỏ hàng

Khách hàng sau khi tìm kiếm sản phẩm xong, họ cảm thấy ưng ý một sản phẩmnào đó thì họ có thể tiến hành thêm sản phẩm đó vào giỏ hàng để lưu giữ sản phẩm lại

để sau này khi họ muốn mua thì họ chỉ cần kiểm tra giỏ hàng và lựa chọn lại nhữngsản phẩm nào họ cảm thấy ưng ý nhất

Hình 6 : Quy trình thêm sản phẩm vào giỏ hàng 2.2.6 Quy trình thanh toán

Sau khi thêm sản phẩm vào giỏ hàng, nếu khách hàng muốn mua những sản phẩm

đã thêm thì sẽ thanh toán bằng cách nhấn vào nút thanh toán phía dưới danh sách cáchsản phẩm trong giỏ hàng Khách hàng kiểm tra các thông tin cơ bản và chọn hình thứcthanh toán phù hợp sau đó nhấn thanh toán thêm một lần nữa

Qua trình thanh toán sẽ thông qua 2 giai đoạn quan trọng:

-Giai đoạn 1: Hệ thống sẽ tự động gửi thông tin nhận được từ khách hàng đến ngânhàng hoặc nhà cung cấp dịch vụ mà website đã liên kết Thông tin sẽ được chứng thực

và thông báo trả về hệ thống

-Giai đoạn 2: gửi thông báo kết quả người xem

+Nếu thông tin không được xác nhận hệ thống đưa thành viên trở về giao diện

và thông báo lỗi

Hình 7 : Quy trình thanh toán 2.2.7 Quy trình quản lý tài khoản khách hàng

Mỗi khách hàng khi tham gia mua hàng tại một website nào đó thì đa số họ đểmuốn có một thứ gì đó có thể giúp lưu trữ các dữ liệu cần thiết khi họ quay trở lại vàkhi đó mọi người sẽ tạo cho mình 1 tài khoản để khi vào lại trang web có thể thuậntiện thao tác hoặc xử lý các công việc Đặc biệt đối với website bán hàng, khi kháchhàng mua hàng thì đa số họ thường tạo một tài khoản Nếu như website có nhiều kháchhàng thì sẽ có rất nhiều tài khoản được tạo ra, để có thể quản lý được tất cả các tàikhoản đó thì ta cần có các quy trình quản lý tài khoản giúp cho admin có thể dễ dàngquản lý các tài khoản trong website Admin có thể xem thông tin các tài khoản, khóacác tài khoản bị vi phạm hoặc Admin có thể gửi voucher tri ân những khách hàng muahàng thường xuyên tại website

2.2.8 Quy trình quán lý đơn đặt hàng

Thường sau khi mua hàng thì thông tin của các đơn hàng sẽ được website lưu giữ

chiếu lại khi nhận hàng Bên cạnh đó cũng giúp admin có thể dễ dàng quản lý các đơnđặt hàng để sau này có thể đối chiếu để khách hàng không bị mất quyền lợi của họ.

2.2.9 Quy trình quản lý sản phẩm

Một website bán hàng thì sẽ có rất nhiều sản phẩm, đối với website figure cũngtương tự như vậy Quy trình quản lý này có thể giúp cho admin quản lý tất cả các sảnphẩm trong website Admin có thể thêm một sản phẩm nào đó vào trong danh sách sảnphẩm, admin có thể xóa đi một sản phẩm lỗi nào đó hoặc có thể sửa lại những sảnphẩm có vấn đề

2.3 Cơ cấu tổ chức website

Cơ cấu tổ chức của website như sau:

+ Admin quản lý các hoạt động chung của website

+ Khách hàng là người truy cập website và thao tác với các chức năng cơ bản như:Đăng nhập, đăng kí, mua hàng, tìm kiếm sản phẩm

CHƯƠNG 3 NGHIÊN CỨU TỔNG QUAN

3.1 Ngôn ngữ thiết kế website

3.1.1 Ngôn ngữ lập trình Go

Ngôn ngữ lập trình Go, thường được biết đến với tên gọi Golang, là một ngôn ngữlập trình hiện đại được phát triển bởi Google Dưới đây là một số điểm quan trọng vềGolang :

1 Được thiết kế cho hiệu suất cao : Golang được tạo ra với mục tiêu chủ yếu

là đạt được hiệu suất cao Nó có khả năng xử lý đa nhiệm thông quagoroutines, giúp xử lý hàng loạt các tác vụ cùng một lúc mà không tốn nhiềutài nguyên

2 Kiểu Dữ Liệu Tĩnh và Cú Pháp Đơn Giản: Ngôn ngữ này hỗ trợ kiểu dữ liệutĩnh, giúp phát hiện lỗi dễ dàng hơn trong quá trình biên dịch Cú pháp củaGolang rất đơn giản và dễ đọc

3 Concurrency và Parallelism: Golang hỗ trợ concurrency thông quagoroutines và channels Goroutines là các luồng nhẹ, và channels là cơ chếtruyền thông tin giữa các goroutines Điều này giúp xử lý đa nhiệm mộtcách hiệu quả

4 Bảo Mật và Bảo Quản Bộ Nhớ: Golang có các tính năng như quy tắc kiểmtra biên, giúp tránh lỗi kiểm soát đỉnh (bounds checking), và có quản lý bộnhớ an toàn, giảm nguy cơ các lỗ hổng bảo mật phổ biến

5 Cộng Đồng Phát Triển Đông Đảo : Mặc dù Go không có lịch sử lâu dài nhưmột số ngôn ngữ khác, cộng đồng Go ngày càng phát triển và đóng gópnhiều vào các dự án mã nguồn mở

6 Phát Triển Ứng Dụng Web và Microservices: Golang thường được sử dụng

để phát triển các ứng dụng web và microservices Nó cung cấp các thư viện

hỗ trợ cho xử lý HTTP, giao tiếp RPC, và nhiều tính năng khác phục vụ việcphát triển các hệ thống phức tạp

7 Chấp Nhận và Tích Hợp Dễ Dàng: Golang được thiết kế để đơn giản và dễtích hợp với các công nghệ khác Điều này giúp nhà phát triển xây dựng vàduy trì ứng dụng một cách hiệu quả

8 Hỗ Trợ Đa Nền Tảng : Golang hỗ trợ đa nền tảng, nghĩa là bạn có thể viết

mã một lần và chạy trên nhiều hệ điều hành khác nhau mà không cần sửađổi nhiều

Hình 8 : Ngôn ngữ Golang 3.1.2 Ngôn ngữ HTML

HTML (viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ Đánh dấuSiê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 webtrên World Wide Web Cùng với CSS và JavaScript, HTML là một trong những ngônngữ quan trọng trong lĩnh vực thiết kế website HTML được định nghĩa như là mộtứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầuxuất bản phức tạp HTML đã trở thành một chuẩn mực của Internet do tổ chức WorldWide Web Consortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML làHTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML Hiện nay,phiên bản mới nhất của ngôn ngữ này là HTML5

Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lýbởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản – có thể

gõ vào ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản WYSIWYGphức tạp Hypertext là cách mà các trang Web (được thiết kế bằng HTML) được kếtnối với nhau Và như thế, đường link có trên trang Web được gọi là Hypertext Như

tên gọi đã nói, HTML là ngôn ngữ đánh dấu bằng thẻ (Markup Language), nghĩa làbạn sử dụng HTML để đánh dấu một tài liệu text bằng các thẻ (tag) để nói cho trìnhduyệt Web cách để cấu trúc nó để hiển thị ra màn hình.

Hình 9 : Hình ảnh minh họa HTML 3.1.3 Ngôn ngữ CSS

CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language

Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngônngữ đánh dấu, như là HTML Nó có thể điều khiển định dạng của nhiều trang webcùng lúc để tiết kiệm công sức cho người viết web Nó phân biệt cách hiển thị củatrang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và fontchữ

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vìmột lý do đơn giản HTML không được thiết kế để gắn tag để giúp định dạng trangweb Bạn chỉ có thể dùng nó để “đánh dấu” lên site

Những tag như <font> được ra mắt trong HTML phiên bản 3.2, nó gây rất nhiềurắc rối cho lập trình viên Vì website có nhiều font khác nhau, màu nền và phong cáchkhác nhau Để viết lại code cho trang web là cả một quá trình dài, cực nhọc Vì vậy,CSS được tạo bởi W3C là để giải quyết vấn đề này

Hình 10 : Hình ảnh minh họa css 3.1.4 Ngôn ngữ lập trình TypeScript

TypeScript là một siêu tập của JavaScript, đem đến khả năng kiểm soát kiểu dữ liệutĩnh, giảm lỗi khi phát triển và cung cấp hiệu suất ứng dụng tốt hơn Được phát triểnbởi Microsoft, nó tích hợp mạnh mẽ với JavaScript, cho phép biên dịch thành mãJavaScript và chạy trên cả môi trường trình duyệt lẫn Node.js TypeScript hỗ trợ nhiềutính năng của ES6, hướng đối tượng, và là lựa chọn ưa thích trong các dự án phức tạp,giúp quản lý mã nguồn hiệu quả và tận dụng sức mạnh của ngôn ngữ lập trình web.Cộng đồng phát triển đông đảo và tích hợp sâu với các công cụ phát triển, làm choTypeScript trở thành một lựa chọn mạnh mẽ cho việc xây dựng ứng dụng web đa

dạng

Hình 11 : Ngôn ngữ lập trình Typescript

3.1.5 ReactJs

ReactJS là một thư viện JavaScript mạnh mẽ được phát triển bởi Facebook, chủyếu được sử dụng để xây dựng giao diện người dùng động và tương tác trong các ứngdụng web Điểm mạnh của React nằm ở khả năng tái sử dụng mã nguồn thông quakhái niệm "component", cho phép phân chia giao diện thành các thành phần độc lập và

dễ quản lý React sử dụng Virtual DOM để tối ưu hóa hiệu suất, chỉ cập nhật DOM khitrạng thái thay đổi, giúp giảm độ phức tạp của ứng dụng Mặc dù không phải là mộtframework đầy đủ, React vẫn là một công cụ linh hoạt và mạnh mẽ được sử dụng rộngrãi trong cộng đồng phát triển web để xây dựng các ứng dụng hiện đại và dễ bảo trì

Hình 12 : ReactJs 3.1.7 Cơ sở dữ liệu SQL

SQL là viết tắt của Structured Query Language có nghĩa là ngôn ngữ truy vấn có cấutrúc, là một ngôn ngữ máy tính để lưu trữ, thao tác và truy xuất dữ liệu được lưu trữtrong một cơ sở dữ liệu quan hệ SQL là ngôn ngữ cơ sở dữ liệu, được sử dụng để tạo,xóa trong cơ sở dữ liệu, lấy các hàng và sửa đổi các hàng…

Hình 13 : Cơ sở dữ liệu SQL

3.2 Ngôn ngữ thiết kế hệ thống UML

UML (Unified Modeling Language) là ngôn ngữ dành cho viê •c đă •c tả, hình dung,xây dựng và làm tài liê •u của các hê • thống phần mềm

UML tạo cơ hô •i để viết thiết kế hê • thống, bao gồm những khái niê •m như tiến trìnhnghiê •p vụ và các chức năng của hê • thống

Cách xây dựng các mô hình trong UML phù hợp mô tả các hệ thống thông tin cả vềcấu trúc cũng như hoạt động Cách tiếp cận theo mô hình của UML giúp ích rất nhiềucho những người thiết kế và thực hiện hệ thống thông tin cũng như những người sửdụng nó; tạo nên một cái nhìn bao quát và đầy đủ về hệ thống thông tin dự định xâydựng Cách nhìn bao quát này giúp nắm bắt trọn vẹn các yêu cầu của người dùng; phục

vụ từ giai đoạn phân tích đến việc thiết kế, thẩm định và kiểm tra sản phẩm ứng dụngcông nghệ thông tin

UML sử dụng một hệ thống ký hiệu thống nhất biểu diễn các Phần tử mô hình(model elements) Tập hợp các phần tử mô hình tạo thành các Sơ đồ UML (UMLdiagrams) Có các loại sơ đồ UML chủ yếu sau:

- Sơ đồ lớp (Class Diagram)

- Sơ đồ đối tượng (Object Diagram)

- Sơ đồ tình huống sử dụng (Use Cases Diagram)

- Sơ đồ trình tự (Sequence Diagram)

- Sơ đồ cộng tác (Collaboration Diagram hay là Composite Structure Diagram)

- Sơ đồ trạng thái (State Machine Diagram)

- Sơ đồ thành phần (Component Diagram)

- Sơ đồ hoạt động (Activity Diagram)

- Sơ đồ gói (Package Diagram)

- Sơ đồ liên lạc (Communication Diagram)

- Sơ đồ tương tác (Interaction Overview Diagram - UML 2.0)

- Sơ đồ phối hợp thời gian (Timing Diagram - UML 2.0)

Hình 14 : Ngôn ngữ thiết kế hệ thống UML

CHƯƠNG 4 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

4.1 Biểu đồ Use case

4.1.1 Biểu đồ Use Case tổng thể

Hình 15 : Sơ đồ Use Case tổng thể 4.1.2 Biểu đồ phân rã các Use Case khách hàng

4.1.2.1 Tiến trình sử dụng hệ thống

Hình 16 : Tiến trình sử dụng hệ thống

4.1.2.2 Tiến trình đăng nhập

Hình 17 : Tiến trình đăng nhập 4.1.3 Biểu đồ phân rã cho Use Case Admin

4.1.3.1 Tiến trình quản lý sản phẩm

Hình 18 : Tiến trình quản lý sản phẩm

4.1.3.2 Tiến trình quản lý tài khoản

Hình 19 : Tiến trình quản lý tài khoản

4.1.3.3 Tiến trình quản lý đơn đặt hàng

Hình 20 : Tiến trình quản lý đơn đặt hàng