XÂY DỰNG WEBSITE BÁN ĐỒ DA ECCO

Em xin cam đoan đồ án “Xây dựng website bán đồ da” là kết quả thực hiệncủa bản thân em dưới sự hướng dẫn của thầy Nguyễn Minh Quý. Những phần sửdụng tài liệu tham khảo trong đồ án đã được nêu rõ trong phần tài liệu tham khảo.Các kết quả trình bày trong đồ án và chương trình xây dựng được hoàn toàn là kếtquả do bản thân em thực hiện. Nếu vi phạm lời cam đoan này, em xin chịu hoàn toàntrách nhiệm trước khoa và nhà trường.

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN

PHAN TRƯỜNG GIANG

XÂY DỰNG WEBSITE BÁN ĐỒ DA ECCO

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN

PHAN TRƯỜNG GIANG

XÂY DỰNG WEBSITE BÁN ĐỒ DA ECCO

NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: KỸ THUẬT PHẦN MỀM

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

NGƯỜI HƯỚNG DẪN NGUYỄN MINH QUÝ

HƯNG YÊN - 2022

3

NHẬN XÉT Nhận xét của giảng viên hướng dẫn:

GIẢNG VIÊN HƯỚNG DẪN (Ký và ghi rõ họ tên)

4

LỜI CAM ĐOAN

Em xin cam đoan đồ án “Xây dựng website bán đồ da” là kết quả thực hiện của bản thân em dưới sự hướng dẫn của thầy Nguyễn Minh Quý Những phần sử dụng tài liệu tham khảo trong đồ án đã được nêu rõ trong phần tài liệu tham khảo Các kết quả trình bày trong đồ án và chương trình xây dựng được hoàn toàn là kết quả do bản thân em thực hiện Nếu vi phạm lời cam đoan này, em xin chịu hoàn toàn trách nhiệm trước khoa và nhà trường

Hưng Yên, ngày 18 tháng 4 năm 2022

5

LỜI CẢM ƠN

Để có thể hoàn thành đồ án này, lời đầu tiên em xin phép gửi lời cảm ơn tới

bộ môn Công nghệ phần mềm, Khoa Công nghệ thông tin – Trường Đại học Sư phạm

Kỹ thuật Hưng Yên đã tạo điều kiện thuận lợi cho em thực hiện đồ án môn học này Đặc biệt em xin chân thành cảm ơn thầy Nguyễn Minh Quý đã rất tận tình hướng dẫn, chỉ bảo em trong suốt thời gian thực hiện đồ án vừa qua

Em cũng xin chân thành cảm ơn tất cả các Thầy, các Cô trong Trường đã tận tình giảng dạy, trang bị cho em những kiến thức cần thiết, quý báu để giúp em thực hiện được đồ án này

Mặc dù em đã có cố gắng, nhưng với trình độ còn hạn chế, trong quá trình thực hiện đề tài không tránh khỏi những thiếu sót Em hi vọng sẽ nhận được những ý kiến nhận xét, góp ý của các Thầy giáo, Cô giáo về những kết quả triển khai trong đồ

án

Em xin trân trọng cảm ơn!

2.2 Phương pháp phân tích thiết kế hướng đối tượng 13

7

8

DANH MỤC CÁC THUẬT NGỮ

STT Từ viết tắt Cụm từ tiếng anh Diễn giải

2 PWA Progressive Web Apps Tiến trình web ứng dụng

3 HTML Hypertext Markup Language Ngôn ngữ đánh dấu siêu

văn bản

4 DOM Document Object Model Mô hình đối tượng tài liệu

5 CSS Cascading Style Sheets Ngôn ngữ tạo phong cách

9

DANH MỤC CÁC BẢNG

Bảng 3- 1: Các chức năng của phân hệ quản trị nội dung 26

Bảng 3- 2: Bảng sản phẩm 34

Bảng 3- 3: Bảng danh mục sản phẩm 34

Bảng 3- 4: Bảng thương hiệu sản phẩm 35

Bảng 3- 5: Bảng đơn hàng 35

Bảng 3- 6: Bảng chi tiết đơn hàng 35

Bảng 3- 7: Bảng khách hàng 36

Bảng 3- 8: Bảng Admin 36

Bảng 3- 9: Bảng phản hồi của khách hàng 37

Bảng 3- 10: Bảng tin tức và khuyến mại 37

Bảng 3- 11: Bảng nhân viên 38

10

DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ

Hình 3- 1: Biểu đồ USE CASE phân hệ quản trị 26

Hình 3- 2: Biểu đồ USE CASE phân rã Quản lý khách hàng 27

Hình 3- 3: Biểu đồ USE CASE phân rã Quản lý sản phẩm 27

Hình 3- 4: Biểu đồ USE CASE phân rã Quản lý bán hàng 28

Hình 3- 5: Biểu đồ USE CASE phân rã Quản lý tin tức 29

Hình 3- 6: Biểu đồ USE CASE phân rã Quản lý người dùng 29

Hình 3- 7: Biểu đồ lớp thực thể 32

Hình 3- 8:Biểu đồ VOPC đăng kí 38

Hình 3- 9:Biểu đồ VOPC cho chức năng đăng nhập 38

Hình 3- 10:Biểu đồ VOPC thêm người dùng 39

Hình 3- 11:Biểu đồ VOPC cập nhật người dùng 39

Hình 3- 12:Biểu đồ VOPC xóa người dùng 40

Hình 3- 13:Biểu đồ VOPC thêm sản phẩm 40

Hình 3- 14:Biểu đồ VOPC cập nhật sản phẩm 41

Hình 3- 15:Biểu đồ VOPC xóa sản phẩm 41

Hình 3- 16:Biểu đồ VOPC thêm tin tức dịch vụ 42

Hình 3- 17:Biểu đồ VOPC cập nhật tin tức dịch vụ 42

Hình 3- 18:Biểu đồ VOPC xóa tin tức dịch vụ 43

Hình 3- 19:Biểu đồ VOPC hiển thị đơn hàng 43

Hình 3- 20: Biểu đồ tuần tự cho chức năng đăng nhập 44

Hình 3- 21: Biểu đồ tuần tự cho chức năng quản lý đặt hàng 44

Hình 3- 22: Biểu đồ tuần tự cho chức năng quản lý nhập hàng 45

Hình 3- 23:Biểu đồ tuần tự chức năng bán hàng 45

Hình 3- 24: Biểu đồ tuần tự cho chức năng xem sản phẩm 46

Hình 3- 25: Biểu đồ tuần tự cho chức năng tìm kiếm sản phẩm 46

Hình 3- 26: Biểu đồ tuần tự cho chức năng quản lý giỏ hàng 46

Hình 3- 27:Biểu đồ tuần tự chức năng thêm người dùng 47

Hình 3- 28:Biểu đồ tuần tự chức năng cập nhật thông tin người dùng 47

11

Hình 3- 29:Biểu đồ tuần tự chức năng xóa thông tin người dùng 47

Hình 3- 30:Biểu đồ tuần tự chức năng thêm tin tức 48

Hình 3- 31:Biểu đồ tuần tự chức năng cập nhật tin tức 48

Hình 3- 32:Biểu đồ tuần tự chức năng xóa tin tức 48

Hình 3- 33:Biểu đồ lớp chi tiết chức năng đăng kí 49

Hình 3- 34:Biểu đồ lớp chi tiết chức năng đăng nhập 49

Hình 3- 35:Biểu đồ lớp chi tiết chức năng thêm người dùng 50

Hình 3- 36:Biểu đồ lớp chi tiết chức năng cập nhật người dùng 50

Hình 3- 37:Biểu đồ lớp chi tiết chức năng xóa người dùng 51

Hình 3- 38:Giao diện trang chủ 52

Hình 3- 39:Giao diện giới thiệu 53

Hình 3- 40:Giao diện tin tức 54

Hình 3- 41:Giao diện trang chi tiết sản phẩm 55

Hình 3- 42:Giao diện trang giỏ hàng 56

Hình 3- 43:Giao diện trang thanh toán 57

Hình 3- 44:Giao diện đăng nhập Admin 58

Hình 3- 45:Giao diện trang quản lí sản phẩm 58

Hình 3- 46:Giao diện trang quản lí danh mục 59

Hình 3- 47:Giao diện trang quản lí hóa đơn 59

Hình 3- 48:Giao diện trang quản lí tin tức 60

Với tầm quan trọng của việc ứng dụng Khoa học Công nghệ thông tin hiện nay, mỗi người chúng ta cần trang bị cho mình một kiến thức nền tảng về Website Xuất phát

từ nhu cầu cuộc sống trong tình hình dịch COVID-19 như hiện nên em quyết định

“Xây dựng Website bán đồ da ECCO “ để tạo ra hệ thống quản lý bán hàng có tính thiết thực, ứng dụng vào thực tế và hỗ trợ người có nhu cầu mua hàng mà không thể

ra ngoài vì tình hình dịch COVID-19 phức tạp như ngày nay

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

- Phía trang quản trị: Xây dựng được các chức năng: Quản lý sản phẩm, Quản

lý đơn hàng, Quản lý danh mục và Quản lý tin tức

1.3 Giới hạn và phạm vi của đề tài

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

- Đối tượng nghiên cứu: Hoạt động bán hàng, quản lý mặt hàng online

1.4 Nội dung thực hiện

- Xây dựng trang chủ của công ty, các trang mặt hàng theo loại mặt hàng, theo giá mặt hàng

- Xây dựng trang chi tiết mặt hàng và các mặt hàng liên quan

- Xây dựng trang giỏ hàng ,nơi hiển thị mặt hàng mà khách hàng lựa chọn đặt mua Khách hàng có thể xóa mặt hàng khi không cần thiết ra khỏi giỏ hàng

- Xây dựng trang xác nhận thông tin khách hàng

- Xây dựng trang quản lý sản phầm, nơi ban điều hành công ty có thể thêm, sửa, xóa mặt hàng, quản lý hóa đơn bán, quản lý doanh thu theo tháng, quý, năm

- Tiến hành xây dựng hệ thống

- Demo hệ thống trên máy cục bộ (LAN)

- Phát triển phần mềm: Là quá trình xây dựng các đặc tả.

- Đánh giá phần mềm: Phần mềm phải được đánh giá để chắc chắn rằng ít nhất

có thể thực hiện những gì mà tài liệu đặc tả yêu cầu

- Xây dựng phần mềm: Đây là quá trình hoàn thiện các chức năng và giao diện

để ngày càng hoàn thiện phần mềm cũng như các yêu cầu đưa ra từ phía khách hàng.2.2 Phương pháp phân tích thiết kế hướng đối tượng

- Giai đoạn khảo sát:

UML đưa ra khái niệm Use Case để nắm bắt các yêu cầu của khách hàng (người sử dụng) UML sử dụng biểu đồ Use case (Use Case Diagram) để nêu bật mối quan hệ cũng như sự giao tiếp với hệ thống Qua phương pháp mô hình hóa Use case, các tác nhân (Actor) bên ngoài quan tâm đến hệ thống sẽ được mô hình hóa song song với chức năng mà họ đòi hỏi từ phía hệ thống Các tác nhân và các Use case được mô hình hóa cùng các mối quan hệ và được miêu tả trong biểu đồ Use case của UML.+ Biểu đồ Use case: biểu diễn sơ đồ chức năng của hệ thống Từ tập yêu cầu của

hệ thống, biểu đồ use case sẽ phải chỉ ra hệ thống cần thực hiện điều gì để thỏa mãn các yêu cầu của người dùng hệ thống đó Đi kèm với biểu đồ use case là các kịch bản

- Giai đoạn phân tích:

Sau khi nhận biết được các lớp thành tầng của mô hình và mối quan hệ giữa chúng với nhau, các lớp cùng mối quan hệ được miêu tả bằng biểu đồ lớp Trong giai đoạn phân tích chỉ duy nhất các lớp sát với thực tế tồn tại, được mô hình hóa Giai đoạn phân tích có các biểu đồ:

+ Biểu đồ lớp: chỉ ra các lớp đối tượng trong hệ thống, các thuộc tính và phương thức của từng lớp và các mối quan hệ giữa những lớp đó

+ Biểu đồ lớp thực thể: là các lớp thực thể được xác định thông qua chích gọn danh từ thu được và loại bỏ các danh từ trùng lặp và xác định các mối quan hệ giữa các lớp

+ Biểu đồ lớp phân tích: căn cứ vào biểu đồ Use Case và các kịch bản Use Case

đã xây dựng, chúng ta sẽ xác định các lớp dựa trên kiến trúc phần mềm đã chọn Khi phân tích mỗi một Use Case, chúng ta xác định được các lớp tham gia thực hiện Use Case đó Mô hình lớp này được gọi là mô hình VOPC

15

+ Biểu đồ trạng thái: tương ứng với mỗi lớp sẽ chỉ ra các trạng thái mà đối tượng của lớp đó có thể có và sự chuyển tiếp giữa những trạng thái mà đối tượng của lớp đó

có thể có và sự chuyển tiếp giữa những trạng thái đó

- Giai đoạn thiết kế:

Trong giai đoạn này, kết quả của giai đoạn phân tích sẽ được mở rộng thành một giải pháp kỹ thuật Các lớp mới sẽ được bổ sung để tạo thành một hạ tầng cơ sở kỹ thuật: Giao diện người dùng, các chức năng để lưu trữ các đối tượng trong ngân hàng dữ liệu, giao tiếp với các hệ thống khác, giao diện với các thiết bị ngoại vi và các máy móc khác trong hệ thống, Các lớp thuộc phạm vi vấn đề có từ giai đoạn phân tích

sẽ được "nhúng" vào hạ tầng cơ sở kỹ thuật này, tạo ra khả năng thay đổi trong cả hai phương diện: Phạm vi vấn đề và hạ tầng cơ sở Giai đoạn thiết kế sẽ đưa ra kết quả

là bản đặc tả chi tiết cho giai đoạn xây dựng hệ thống

+ Các biểu đồ tương tác biểu diễn mối liên hệ giữa các đối tượng trong hệ thống

và giữa các đối tượng với các tác nhân biên ngoài Có hai loại biểu đồ tương tác:

● Biểu đồ tuần tự: Biểu diễn mối quan hệ giưa các đối tượng và giữa các đối tượng và tác nhân theo thứ tự thời gian

● Biểu đồ cộng tác: Biểu diễn mối quan hệ giữa các đối tượng và giữa các đối tượng và các tác nhân nhưng nhấn mạnh đến vai trò của các đối tượng trong tương tác

+ Biểu đồ hoạt động: biểu diễn các hoạt động và sự đồng bộ, chuyển tiếp các hoạt động, thường được sử dụng để biểu diễn các phương thức phức tạp của các lớp + Biểu đồ thành phần: định nghĩa các thành phần của hệ thống và mối liên hệ giữa các thành phần đó

+ Biểu đồ triển khai: mô tả hệ thống sẽ được triển khai như thế nào, thành phần nào được cài đặt ở đâu, các liên kết vật lý hoặc giao thức truyền thông nào được sử dụng

- Giai đoạn xây dựng:

Trong giai đoạn xây dựng (giai đoạn lập trình), các lớp của giai đoạn thiết kế sẽ được biến thành những dòng code cụ thể trong một ngôn ngữ lập trình hướng đối tượng cụ thể

- Thử nghiệm:

Một hệ thống phần mềm thường được thử nghiệm qua nhiều giai đoạn và với nhiều nhóm thử nghiệm khác nhau

2.3 Giới thiệu các xu hướng lập trình web mới

Sự phát triển của công nghệ luôn nằm ở mức thay đổi chóng mặt Chính sự phát triển không ngừng ấy đòi hỏi phải có cái mới hình thành, tiên tiến hơn và thay thế cái cũ Trong lĩnh vực công nghệ thông tin, các lập trình viên luôn phải cập nhật kiến thức không ngừng để bắt kịp xu hướng để vừa hiện đại vừa tránh bị đào thải “xu hướng”

Xu hướng #1: Voice search - Tìm kiếm bằng giọng nói

- Tương lai phát triển web dường như sẽ nhiều tiếng nói hơn và nó không chỉ nói về các trợ lý gia đình đa chức năng ảo như Siri, Google Home hay Amazon Alexa

Xu hướng #2: WebAssembly

- Khi xây dựng một ứng dụng web, hiệu suất thường bị tổn hại Các giới hạn JavaScript làm cho các phép tính nặng bị chậm và điều đó ảnh hưởng đáng kể đến trải nghiệm người dùng

- Đây là lý do tại sao hầu hết các trò chơi phổ biến và các ứng dụng mạnh mẽ chỉ có sẵn dưới dạng một ứng dụng máy tính để bàn gốc

- WebAssembly ra đời để thay đổi điều đó - nhằm mục đích cho hiệu suất giữa các ứng dụng web là như nhau trên mọi trình duyệt và nền tảng Với WebAssembly, mã trong bất kỳ ngôn ngữ lập trình nào cũng có thể được biên dịch thành mã byte chạy trong trình duyệt

Xu hướng #3: Cá nhân hóa nội dung thông qua học máy

- Trí tuệ nhân tạo, bao gồm cả học máy, ảnh hưởng đến các hoạt động hàng ngày của chúng ta trên internet mà chúng ta thậm chí không nhận ra

- Đây là điểm chính của ML - cung cấp trải nghiệm được cải thiện nguyên bản Học máy là khả năng của phần mềm để cải thiện hiệu suất mà không cần đầu vào trực tiếp từ các nhà phát triển

- Về cơ bản, phần mềm phân tích dữ liệu đến, phát hiện các mẫu, đưa ra quyết định và cải thiện công việc của nó

17

Xu hướng #4: Data security - Bảo mật dữ liệu

- Càng nhiều dữ liệu mà một ứng dụng web xử lý, nó càng hấp dẫn đối với tội phạm mạng

- Cách làm của chúng có thể thay đổi, nhưng luôn có mục đích làm hỏng dịch

vụ của bạn và đánh cắp dữ liệu của người dùng hoặc thông tin nội bộ của công ty

- Điều này có thể gây tổn hại lớn đến danh tiếng của bạn và khiến bạn tốn kém rất nhiều

- Các mối đe dọa và hoạt động độc hại dễ dàng phát hiện hơn với phần mềm bảo mật do AI cung cấp

- Khi sự đa dạng của phần mềm độc hại phát triển, nó trở nên mạnh hơn và nguy hiểm hơn

- Vì vậy, các công ty lớn hiện đào tạo các hệ thống AI của họ để phân tích các mẫu hành vi trong mạng và phản ứng với mọi hoạt động đáng ngờ ngay lập tức

Xu hướng #5: PWA và AMP

- Đây có thể không còn là xu hướng Nó gần như là một tiêu chuẩn bởi vì Google ưu tiên các ứng dụng web tải nhanh trên thiết bị di động là một điểm cộng cho xếp hạng

- Đây là lý do tại sao nên xem xét triển khai PWA (Progressive Web Apps) hoặc AMP, đây là những công nghệ độc đáo giúp giảm thời gian tải trang web

- Người dùng ngày càng không kiên nhẫn Bạn chậm đồng nghĩa với việc tiền của khách hàng sẽ rơi vào túi đối thủ

Xu hướng #6: Trí tuệ nhân tạo và Bots

- Tương lai của phát triển web sẽ như thế nào? Điều đó được nhiều người tin rằng các con bot năm tới sẽ trở nên tự học hơn và sẽ dễ dàng phù hợp với nhu cầu và hành vi của người dùng cụ thể

18

- Điều đó có nghĩa là các bot hoạt động 24/7 sẽ có thể thay thế các nhà quản lý

hỗ trợ và tiết kiệm chi phí cho nhiều công ty

- Sự gia tăng của Bot cũng sẽ ảnh hưởng đến xu hướng thiết kế web, đặc biệt

là UX

- Sự tiến bộ đáng kể của AI và công nghệ máy học dẫn đến nhu cầu thiết kế trợ lý ảo, không chỉ về trải nghiệm hình ảnh, hoặc thuật toán phục vụ sản phẩm, mà còn về thiết kế âm thanh hữu ích

Xu hướng #7: Motion UI

- Thiết kế web Motion UI là một xu hướng trong thế giới kỹ thuật số

- Từ năm này sang năm khác, các công ty khởi nghiệp luôn chú ý nhiều hơn đến trải nghiệm người dùng và đầu tư ít tài nguyên hơn vào tính thẩm mỹ

- Tuy nhiên, các trang web và ứng dụng đẹp mắt có nhiều cơ hội được người dùng tiềm năng chú ý và trở nên viral nhanh chóng

- Trong đó, thiết kế Motion UI không phải là câu hỏi của kỹ thuật, mà là một trong những chiến lược tiếp thị

Xu hướng #8: Automation Testing - Kiểm tra tự động

- Hầu hết các công nghệ web mới nổi đều nhằm mục đích làm cho quá trình phát triển rẻ hơn và cung cấp cho người dùng trải nghiệm tốt nhất

- Tự động hóa các giai đoạn phát triển là công cụ để đạt được mục tiêu đầu tiên

- Phương pháp học máy và tiếp cận AI cho phép chúng tôi xây dựng các dự án phức tạp với một nhóm nhỏ hoặc có ít chuyên gia phát triển hơn, trong khi tự động hóa thử nghiệm sản phẩm giúp chúng ta kiểm tra xem sản phẩm của mình

đã sẵn sàng để triển khai hay chưa

Xu hướng #9: JavaScript Frameworks

- Các JavaScript Framework đang trong giai đoạn chuẩn hoá và tạo ra một hệ sinh thuận tiện, dễ dàng sử dụng

- Từ 2020, các JavaScript Framework đã phát triển mạnh mẽ liên quan đến các khía cạnh UX, UI, thử nghiệm và quản lý sản phẩm

19

- Về mặt kỹ thuật, các JavaScript Framework vẫn là Framework ứng dụng được tạo bằng ngôn ngữ lập trình JavaScript và dựa trên tích hợp các thư viện (cả trực quan và chức năng)

- Xu hướng web này có rất nhiều lợi ích Cung cấp khả năng phản hồi ngay lập tức cho người dùng mà không cần tải lại trang, hiệu quả cao và hiệu suất nhanh, đơn giản mã hóa chỉ là một vài trong số đó

- Ngoài xu hướng JavaScript, TypeScript nổi lên mạnh mẽ như một ứng cử viên thay thế cho JavaScript, nó có những tiến bộ, cải tiến mà JavaScript không thể thay đổi được

Xu hướng #10: Ứng dụng và kiến trúc không máy chủ

- Công nghệ không máy chủ là kết quả của việc tìm kiếm khả năng tránh quá tải hệ thống, mất dữ liệu hoặc phát triển tốn kém

- Được hỗ trợ bởi các nhà cung cấp lớn như AWS, các thuật toán không có máy chủ gần đây đã được xây dựng như một mô hình thực thi điện toán đám mây

- Theo khái niệm này, các máy chủ thông thường có thể được thay thế bằng các ‘’Đám mây’’ quản lý mức tiêu thụ tài nguyên máy

- Xu hướng web hiện tại liên quan đến kiến trúc ứng dụng không có máy chủ giúp giảm ngân sách phát triển và hỗ trợ liên tục, củng cố các ứng dụng có tiềm năng linh hoạt và giữ cho môi trường Internet bền vững hơn

Xu hướng #11: Áp dụng Công nghệ Blockchain

- Blockchain không phải là công nghệ phát triển web mới nhất Khái niệm về chúng xuất hiện vào năm 2004 và nổi như cồn ở thời điểm năm 2017, thị trường giao dịch tiền điện tử (dựa trên công nghệ blockchain) được khai thác với các khoản đầu tư lớn chưa từng có

- Chúng ta nên mong đợi điều gì vào Blockchain trong năm nay?

- Rõ ràng nhiều người biết rằng, các cơ quan chính quyền sẽ kiềm chế chặt chẽ

nó bởi nó ảnh hưởng đến vấn đề cốt lõi của nhà nước - Tiền tệ

20

- Nhưng việc sử dụng Blockchain đang trở nên tích cực đáng kể trong thập kỷ qua và các hệ thống thanh toán lớn đã quyết định chấp nhận Bitcoin và các loại tiền tệ khác

Xu hướng #12: Internet of Things (IoT) – Internet vạn vật

- Internet of Things (hay IoT) là một mạng lưới các thiết bị được kết nối với nhau, không yêu cầu hoặc gần như không có hành động nào từ phía người dùng để thực hiện các hoạt động và thực hiện các kết quả hữu ích

- Một số xu hướng phát triển web sẽ được xảy ra bởi sự phát triển IoT

- IoT rất có tiềm năng tồn tại và phát triển - là khả năng giúp cuộc sống hàng ngày của con người trở nên dễ dàng hoặc thuận tiện hơn

- Ngày càng có nhiều thiết bị thông minh hơn, với tự động hóa thanh toán, nhà thông minh và công nghệ thành phố thông minh, phát triển môi trường y tế điện tử, chúng ta thường có thể trở nên ít quá tải hơn với các nhiệm vụ thông thường và đầu tư nguồn lực nhận thức của chúng ta vào những công việc phức tạp hơn

- Khi đó, với vị trí là một thành phần không thể thiếu của không gian internet, web và ứng dụng sẽ cần phát triển để đáp ứng cho lĩnh vực mới này

Xu hướng #13: GPDR and Cybersecurity

- Vấn đề là chúng ta tự động hóa ngày càng nhiều hoạt động bằng các thiết bị kết nối Internet

- Và mỗi khi chúng ta tiến hành các hoạt động như thanh toán trực tuyến, chia

sẻ dữ liệu cá nhân trong khi mua vé hoặc trả thuế hoặc thậm chí nhà thông minh và hệ thống đa phương tiện, sẽ luôn có nguy cơ bị đánh cắp dữ liệu

- Sự phát triển của chính sách quyền riêng tư như GPDR ở Châu Âu (Quy định bảo vệ dữ liệu chung) cũng là mới nhất trong phát triển web

- Tài liệu này có tư cách luật pháp quốc tế và phạt tiền đối với chủ sở hữu sản phẩm Internet nếu họ thu thập dữ liệu người dùng theo cách không bảo mật, cũng như bán hoặc lưu trữ thông tin người dùng mà không cần xin phép người dùng

Xu hướng #14: Ứng dụng một trang (Sigle Page Application - SPA)

- Ngày nay, với các tiêu chuẩn Internet tốc độ cao, không cần phải bảo thủ trong cách tiếp cận mà mọi hành động được thực hiện trên trang như nhấp chuột vào các nút khác nhau dẫn đến một trang web được tải xuống từ máy chủ

- Các SPA có nhiều cơ hội hơn để thu hút sự chú ý của người dùng vì họ dường như hoạt động nhanh - Các SPA cung cấp cho người dùng phản hồi tức thì (so với các trang web thông thường có màn hình trắng trước khi trang

sẽ được tải xuống hoàn toàn)

- Các trang web SPA cũng tiêu thụ ít hơn tài nguyên hơn, có thể hoạt động mà không cần code phía máy chủ

2.4 Tổng quan về Angular

Angular là gì?

- Angular là một JavaScript framework dùng để viết giao diện web (Front-end) Đây

là một sản phẩm được viết bởi Misko Hevery và một người bạn của anh là Adam Abrons Sau đó, chính thức “ra mắt” vào 20/10/2010 Hiện tại, sản phẩm này đang được Google duy trì

- Hiểu đơn giản, Angular là một khung làm việc của JavaScript MVC phía máy khách (client) nhằm phát triển ứng dụng web động

AngularJS là từ dùng để nói về Angular 1 (ra đời năm 2009), được viết bằng JavaScript Angular là từ gọi chung cho Angular 2 trở lên (ra đời năm 2016), được viết bằng TypeScript – phiên bản nâng cao của JavaScript

- Angular được thay đổi rất nhiều từ AngularJS Angular đã thiết kế lại từ đầu nên có nhiều khái niệm đã thay đổi từ AngularJS Kiến trúc của Angular và AngularJS hoàn toàn khác nhau

22

- Hiện tại AngularJS cũng không còn được Google hỗ trợ nâng cấp nữa

Các phiên bản của Angular

● 4/09/2016: Angular 2 – Initial Version of Angular

● 23/03/2017: Angular 4 – Version 4: giảm thiểu code được tạo ra, giảm xuống 60% kích thước tệp được đóng gói, đẩy nhanh quá trình phát triển ứng dụng

● 11/11/2017: Angular 5 – Version 5: sử dụng HTTPClient thay HTTP, công cụ build optimizer được tích hợp sẵn vào trong CLI, …

● 03/05/2018: Angular 6 – Version 6: Cập nhật CLI, command line interface, Multiple Validators, …

● 18/10/2018: Angular 7 – Version 7: ScrollingModule scroll load dữ liệu, dùng Drag and Drop, cập nhật RxJS 6.3, …

● 25/08/2019: Angular 8 – Version 8: CLI workflow improvements, Dynamic imports for lazy routes …

● 06/02/2020: Angular 9.0: di chuyển tất cả các ứng dụng để sử dụng trình biên dịch Ivy và thời gian chạy theo mặc định, dùng TypeScript 3.6 và 3.7

● 25/03/2020: Angular 9.1 08/04/2020: Angular 10 – Beta Version

- Angular là một bộ Javascript Framework rất mạnh Lập trình viên (developer) thường sử dụng Angular để xây dựng project Single Page Application (SPA)

- Angular hoạt động dựa trên các thuộc tính mở rộng HTML (các atributes theo quy tắc của Angular) Framework mã nguồn mở hoàn toàn miễn phí này được hàng ngàn developers trên thế giới ưa chuộng và sử dụng

- Để sử dụng tốt Angular, người dùng cần nắm các khái niệm cơ bản như: HTML, CSS, JavaScript, TypeScript, Document Object Model (DOM)

Sử dụng Angular, người dùng được gì?

- Ứng dụng được giảm tối đa kích thước và tăng tối đa hiệu suất

- HTML linh hoạt hơn

- Code HTML mạnh mẽ hơn với những đặc trưng như IF , FOR, LOCAL VARIABLES, …

- Dễ dàng hiển thị các field từ data model của website và theo dõi những thay đổi, cập nhật lại từ người dùng nhờ binding data

23

- Xây dựng và tái sử dụng nội dung nhờ vào những khối module độc lập

- Nhanh chóng giải quyết các bài toán logic nhờ back- end service hỗ trợ giao tiếp

* Những tính năng nổi bật của Angular

Cơ chế Two-Way Data Binding

- Đây là tính năng được developer đánh giá là ấn tượng nhất của Angular Data binding tự động, tức thời Bất cứ thay đổi nào trên view, dù là nhỏ nhất, cũng đều được tự động cập nhật thuộc tính “model” vào component class và ngược lại

- Thêm vào đó, Angular cũng hỗ trợ property binding Developer có thể ràng buộc thuộc tính HTML với thuộc tính của component class, data sẽ tự động xuất hiện bên trong view thông qua việc điều khiển DOM

Hỗ trợ cơ chế Routing (điều hướng) mạnh mẽ

- Angular có cơ chế routing tải trang một cách bất đồng bộ trên cùng một trang cho phép chúng ta tạo SPA

- Đa số các ứng dụng Web không chỉ có 1 view hay một page duy nhất, mà sẽ cung cấp nhiều view khác nhau tương ứng với với các chức năng chính Ví dụ: các trang liên hệ, giới thiệu chung, nội dung, báo giá, … trong một website Hiển thị đúng view vào đúng thời điểm là mục đích của điều hướng (routing)

- Angular giúp định nghĩa các đường dẫn (route) cho mỗi page view của ứng dụng Developer sẽ kích hoạt route dựa trên tương tác của người dùng (user)

Mở rộng HTML

- Nhờ Angular, developer có thể sử dụng cấu trúc lập trình giống như điều kiện IF, vòng lặp FOR, những biến địa phương “local variables”, …để render các control

Thiết kế module hoá

- Angular tiếp cận theo hướng thiết kế module hoá Người dùng phải tạo các Angular Module để tổ chức tốt hơn và quản lý source code

Hỗ trợ làm việc với hệ thống Backend

- Hỗ trợ làm việc với backend server, thực thi bất cứ logic nào và nhận dữ liệu về – Angular được xây dựng như thế!

- Được Google hỗ trợ, liên tục cập nhật

* Ưu điểm của AngularJavaScript

Ràng buộc dữ liệu hai chiều

- Vì kiến trúc của khung làm việc Angular ràng buộc JavaScript và HTML, code cho

cả hai đã được đồng bộ hóa Do đó, framework giúp các nhà phát triển tiết kiệm được rất nhiều thời gian

Thử nghiệm

- Framework hỗ trợ thử nghiệm đơn vị và tích hợp

Tương lai tươi sáng

- Tương lai của Angular rất rực rỡ vì chức năng nổi bật cũng như sự phổ biến của nó

Cơ sở người dùng sẽ tiếp tục phát triển và vô số tài liệu chuyên sâu sẽ được cập nhật liên tục

Tương thích với thiết bị di động và máy tính để bàn

- Angular JavaScript có thể chạy trên hầu hết các trình duyệt web Không chỉ trên máy tính để bàn, phần mềm này còn hoạt động trên cả thiết bị di động

25

2.5 Lập trình Web API NET CORE

ASP.NET Core là một framework web mã nguồn mở miễn phí và được phát triển bởi Microsoft Framework này là một bản viết lại hoàn chỉnh hợp nhất ASP.NET MVC và ASP.NET Web API thành một mô hình lập trình duy nhất

Một số đặc trưng:

● Trải nghiệm nhà phát triển không biên dịch (nghĩa là quá trình biên dịch diễn

ra liên tục, do đó nhà phát triển không phải gọi lệnh biên dịch)

● Khung mô-đun được phân phối dưới dạng các gói NuGet

● Thời gian chạy được tối ưu hóa cho đám mây (được tối ưu hóa cho Internet)

● Có thể chạy trong IIS hoặc độc lập

● Hệ thống cấu hình dựa trên môi trường sẵn sàng cho đám mây

● Đường dẫn yêu cầu HTTP mô-đun và trọng lượng nhẹ

● Xây dựng và chạy các ứng dụng ASP.NET Core đa nền tảng trên Windows, Mac và Linux

26

3.1 Đặc tả yêu cầu phần mềm

3.1.1 Các yêu cầu chức năng

a) Chức năng của phân hệ quản trị nội dung

hàng Quản lý thông tin của khác hàng Gồm các chức năng: thêm, sửa, xóa

4 Quản lý tin tức Quản lý tin tức gồm các chức năng: thêm, sửa, xóa

5 Quản lý bán

hàng

Quản lý đơn hàng đã bán gồm : thêm sửa xóa

Bảng 3- 1: Các chức năng của phân hệ quản trị nội dung

● Biểu đồ USE CASE phân hệ quản trị:

Hình 3- 1: Biểu đồ USE CASE phân hệ quản trị

27

● Biểu đồ USE CASE phân rã Quản lý khách hàng

Hình 3- 2: Biểu đồ USE CASE phân rã Quản lý khách hàng

● Kịch bản Use Case:

1 Nhân viên yêu cầu chức năng quản lý khách hàng

2 SYSTEM Hệ thống hiển thị danh sách thông tin các khách hàng và các chức năng tương ứng

3 Nhân viên thực hiện các chức năng tương ứng (Thêm, sửa thông tin khách hàng)

● Biểu đồ USE CASE phân rã Quản lý sản phẩm

Hình 3- 3: Biểu đồ USE CASE phân rã Quản lý sản phẩm

28

● Kịch bản Use Case:

1 Người quản trị yêu cầu chức năng quản lý sản phẩm

2 SYSTEM Hệ thống hiển thị thông tin các tay cầm và các chức năng

3 Người quản trị thực hiện các chức năng tương ứng (Thêm, sửa, xóa thông tin tay cầm)

● Biểu đồ USE CASE phân rã Quản lý bán hàng

Hình 3- 4: Biểu đồ USE CASE phân rã Quản lý bán hàng

● Kịch bản Use Case:

1 Người quản trị yêu cầu chức năng quản lý bán hàng

2 SYSTEM Hệ thống hiển thị danh sách thông tin các hàng hóa và các chức năng

3 Người quản trị thực hiện các chức năng tương ứng (Thêm, sửa, xóa tin tức)

29

● Biểu đồ USE CASE phân rã Quản lý tin tức

Hình 3- 5: Biểu đồ USE CASE phân rã Quản lý tin tức

● Kịch bản Use Case:

1 Người quản trị yêu cầu chức năng quản lý tin tức

2 SYSTEM Hệ thống hiển thị danh sách thông tin các tin tức và các chức năng

3 Người quản trị thực hiện các chức năng tương ứng (Thêm, sửa, xóa tin tức)

Chức năng của phân hệ người dùng

● Biểu đồ USE CASE Tổng quát:

Hình 3- 6: Biểu đồ USE CASE phân rã Quản lý người dùng

2 Tên sản phẩm Tên sản phẩm và không chưa giá trị rỗng

3 Mã loại sản phẩm Mỗi sản phẩm có 1 mã loại sản phẩm riêng

4 Mã thương hiệu sản

phẩm

Sản phẩm có 1 thương hiệu sản xuất riêng

8 Trạng thái Trạng thái của sản phẩm

● Lớp loại sản phẩm

STT Tên thuộc tính Mô tả

1 Mã loại sản phẩm Mỗi loại sản phẩm có 1 mã sản phẩm

2 Tên loại sản phẩm Tên của loại sản phẩm

4 Trạng thái Trạng thái của loại sản phẩm

● Lớp tin tức

STT Tên thuộc tính Mô tả

1 Mã tin tức Mỗi tin tức có 1 mã riêng

2 Tên tin tức Tên của tin tức

3 Nội dung Nội dung chi tiết của tin tức

31

● Lớp bán hàng

STT Tên thuộc tính Mô tả

1 Mã hóa đơn bán Mỗi hóa đơn có 1 mã hóa đơn

2 Mã khách hàng Mã của khách hàng mua đơn hàng đó

2 Tên khách hàng Họ tên của khách hàng

3 Địa chỉ Email Địa chỉ thư điện tử của khách hàng

4 Mật khẩu Mật khẩu đăng nhập của khách hàng

5 Địa chỉ Địa chỉ giao hàng của khách hàng

6 Số điện thoại Số điện thoại của khách hàng

● Lớp thương hiệu sản phẩm

STT Tên thuộc tính Mô tả

1 Mã thương hiệu Mỗi thương hiệu có 1 mã riêng

2 Tên thương hiệu Tên của thương hiệu

3 Mô tả thương hiệu Các đặc trưng và giới thiệu về thương hiệu

đó

4 Trạng thái thương hiệu Trạng thái sản phẩm về thương hiệu

● Lớp nhân viên

32

STT Tên thuộc tính Mô tả

1 Mã nhân viên Mỗi nhân viên có 1 mã riêng

2 Tên nhân viên Họ và tên của nhân viên

3 Địa chỉ Email chỉ thư điện tử của nhân viên

4 Mật khẩu Mật khẩu đăng nhập hệ thống của nhân viên

5 Số CMND/CCCD Số chứng minh hoặc căn cước công dân của

nhân viên

6 Quê quán Quê quán nơi sinh của nhân viên

7 Ngày sinh Ngày-Tháng-Năm sinh của nhân viên

8 Số điện thoại Số điện thoại của nhân viên

Biểu đồ lớp thực thể của hệ thống:

Hình 3- 7: Biểu đồ lớp thực thể

33

3.1.3 Các yêu cầu phi chức năng

- Yêu cầu về giao diện: Giao diện đẹp, thân thiện và dễ thao tác

- Yêu cầu về sự logic của CSDL

- Yêu cầu ràng buộc về thiết kế: Hệ thống được thiết kế theo kiến trúc MVC