Luận văn tốt nghiệp Khoa học máy tính: Tích hợp các quy trình quản lý tài sản và cơ sở vật chất vào cổng thông tin

TRƯỜNG ĐẠI HỌC BÁCH KHOA

KHOA KHOA HỌC VÀ KỸ THUẬT MÁY TÍNH

BÁO CÁO

LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC

TÍCH HỢP CÁC QUY TRÌNH QUẢN LÝ TÀI SẢN VÀ CƠ SỞ VẬT CHẤT VÀO CỔNG THÔNG TIN

Ngành : Khoa học máy tính

HỘI ĐỒNG: Hội đồng KHMT 6 GVHD: Nguyễn Thanh Tùng GVPB: Bùi Tiến Đức

-o0o -

SVTH 1: Phan Đình Sự (1813876) SVTH 2: Đinh Đức Tuấn (1713775)

TP HỒ CHÍ MINH, 12/2022

Lời cam đoan

Nhóm chúng tôi xin cam đoan rằng đề tài luận văn tốt nghiệp đại học: "Tích hợp các quy trình quản lý tài sản và cơ sở vật chất vào cổng thông tin" là do nhóm thực hiện dưới sự hướng dẫn của Th.S Nguyễn Thanh Tùng Nội dung cuốn báo cáo dựa trên những tìm hiểu, nghiên cứu, thực hiện của nhóm, các nội dung tham khảo từ các công trình khác đều được ghi rõ trong mục "Tài liệu tham khảo" Những số liệu, lược đồ, bảng thông tin được nghiên cứu và đưa ra là trung thực do nhóm thực hiện Cam đoan những nội dung nêu ra trong báo cáo được nhóm thực hiện dưới sự hướng dẫn, hỗ trợ của thầy Nguyễn Thanh Tùng Nội dung của luận văn này chưa từng được công bố trước đây dưới bất kỳ hình thức nào Nếu có bất kỳ sai phạm nào, nhóm xin chịu hoàn toàn trách nhiệm trước Ban chủ nhiệm Khoa và Ban Giám hiệu nhà trường

Nhóm sinh viên thực hiện

3

Lời cảm ơn

Trước hết, chúng tôi xin trân trọng gửi lời cảm ơn đến Th.S Nguyễn Thanh Tùng - giảng viên khoa Khoa học và Kỹ thuật Máy tính (trường Đại học Bách Khoa - Đại học Quốc gia TP.HCM) Trong thời gian thực hiện đề tài, thầy đã tận tình hướng dẫn, chỉ dạy cho chúng tôi những kiến thức, kinh nghiệm quý báu Bên cạnh đó, thầy luôn tạo mọi điều kiện tốt nhất để nhóm có thể hoàn thành luận văn trong thời gian sớm nhất

Chúng tôi xin gửi lời cảm ơn đến Trường Đại học Bách Khoa - Đại học Quốc gia TP.HCM, nơi đã gắn bó với chúng tôi suốt thời gian học tập tại đây, một môi trường học tập lý tưởng và đầy kiến thức quý giá Xin cảm ơn quý thầy cô trong khoa Khoa học và Kỹ thuật Máy tính nói riêng và thầy cô trường Đại học Bách Khoa - Đại học Quốc gia TP.HCM nói chung, những người đã truyền tri thức và tâm huyết của mình cho chúng tôi

Lời cuối cùng, chúng tôi xin gửi lời cám ơn sâu sắc đến gia đình, bạn bè - những người đã luôn đồng hành, chia sẻ, ủng hộ chúng tôi trong suốt thời gian qua Mọi người chính là động lực to lớn để chúng tôi hoàn thành đề tài một cách trọn vẹn nhất

Nhóm sinh viên thực hiện

Tóm tắt nội dung

Đề tài luận văn mà nhóm thực hiện là "Tích hợp các quy trình quản lý tài sản và cơ sở vật chất vào cổng thông tin" Trong quá trình tìm hiểu và thực hiện, nhóm đã thực hiện qua các giai đoạn cụ thể như sau:

• Giai đoạn 1 : Tiến hành tìm hiểu, khảo sát các quy trình nghiệp vụ hiện có của hệ

thống quản lý tài sản và cơ sở vật chất văn phòng đào tạo quốc tế OISP trường Đại học Bách Khoa - Đại học Quốc gia TP.HCM Từ đó, nhóm phân tích các chức năng hiện có và cần có để giúp hệ thống hoàn thiện hơn

• Giai đoạn 2 : Tìm hiểu các kiến thức, nền tảng công nghệ liên quan của cổng thông

tin trường Đại học Bách Khoa - Đại học Quốc gia TP.HCM

• Giai đoạn 3 : Xây dựng cấu trúc cơ sở dữ liệu Đưa ra thiết kế hệ thống từ các yêu

cầu nghiệp vụ đã phân tích được Từ đó thiết kế sơ đồ ERD và cơ sở dữ liệu phù hợp với hệ thống

• Giai đoạn 4 : Tiến hành hiện thực, phát triển hệ thống và triển khai thực tế cho hệ

thống thông tin quản lý trung tâm đào tạo quốc tế, nhận về những phản hồi tích cực từ người dùng để thay đổi và sửa chữa cho hệ thống càng hoàn thiện hơn

• Báo cáo luận văn tốt nghiệp của nhóm sẽ trình bày thông qua các nội dung chính sau đây:

− Chương 1 : Tổng quan − Chương 2 : Cơ sở lý thuyết

− Chương 3 : Phân tích và thiết kế hệ thống − Chương 4 : Hiện thực và phát triển hệ thống − Chương 5 : Kiểm thử hệ thống

− Chương 6 : Tổng kết và hướng phát triển

5

Mục lục

Giới thiệu tổng quan 10

1.1 Giới thiệu đề tài 11

1.2 Các vấn đề gặp phải của hệ thống quản lý cũ 11

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

1.4 Phạm vi đề tài 12

1.5 Khó khăn và thách thức 13

Cơ sở lý thuyết 14

2.1 Kiến trúc website 15

2.2 Mô hình đa trang và mô hình đơn trang 16

2.2.1 Ứng dụng đa trang (Multiple-page application) 16

2.2.2 Ứng dụng đơn trang (Single-page application) 17

2.7.1 Hệ cơ sở dữ liệu quan hệ 35

2.7.2 Hệ cơ sở dữ liệu phi quan hệ 37

3.3 Thiết kế đối tượng người dùng 52

3.3.1 Danh sách đối tượng người dùng 52

3.3.2 Đối tượng: nhân viên văn phòng đào tạo quốc tế 54

3.3.3 Đối tượng: Trưởng phòng bộ phận đề xuất 55

3.3.4 Đối tượng: Quản lý 56

3.3.5 Đối tượng: Kế toán 57

3.3.6 Đối tượng: Ban giám đốc 58

3.4 Thiết kế lược đồ dữ liệu 59

3.4.1 Lược đồ ERD 59

Hiện thực hệ thống 60

4.1 Chức năng từng đối tượng trong hệ thống 61

4.1.1 Đối tượng: nhân viên văn phòng đào tạo quốc tế 61

4.1.2 Đối tượng: Trưởng phòng bộ phận đề xuất 63

4.1.3 Đối tượng: quản lý 65

4.1.4 Đối tượng: kế toán 68

4.1.5 Đối tượng: ban giám đốc 69

Kiểm thử 72

7

5.1 Kiểm thử hệ thống (System Test) 73

5.1.1 Kiểm thử quá trình đăng ký đề xuất mua sắm cho kế hoạch 73

5.1.2 kiểm thử quá trình tạo mới cơ sở vật chất 75

5.4 Kiểm thử chấp nhận (Acceptance Test) 79

Kết luận và hướng phát triển 80

2.5 vòng đời của một React Component 21

2.6 Mô hình hoạt động của flux 24

2.7 Mô hình hoạt động của Redux 26

3.1 Usecase chức năng của hệ thống 44

3.2 Usecase cho chức năng quản lý mua hàng 45

3.3 Usecase cho chức năng quản lý tài sản 48

3.4 Usecase cho chức năng bảo trì bảo dưỡng 49

3.5 Usecase cho quản lý danh mục 50

3.6 Kiến trúc tổng thể của hệ thống 52

3.7 Lược đồ Usecase các đối tượng của hệ thống 53

3.8 Lược đồ Usecase của đối tượng nhân viên văn phòng đào tạo quốc tế 54

3.9 Lược đồ Usecase của đối tượng trưởng phòng bộ phận đề xuất 55

3.10 Lược đồ Usecase của đối tượng Quản lý 56

3.11 Lược đồ Usecase của đối tượng Kế toán 57

3.12 Lược đồ Usecase của đối tượng Ban giám đốc 58

3.13 Lược đồ ERD 59

9

4.1 Lược đồ Activity đăng ký và xem thông tin 61

4.2 Danh sách đã đăng ký 61

4.3 Thông tin cần để đăng ký 62

4.4 Lược đồ Activity quản lý đề xuất và nghiệm thu 63

4.5 Danh sách các yêu cầu đăng ký mua hàng 63

4.6 Thông tin đăng ký mua hàng 64

4.7 Thông tin nghiệm thu 64

4.8 Lược đồ Activity cho đối tượng quản lý 65

4.9 Danh sách đăng ký kế hoạch 66

4.10 Chi tiết bản kế hoạch 66

4.11 Danh sách cơ sở vật chất 67

4.12 Danh sách bảo trì bảo dưỡng 67

4.13 Lược đồ Activity cho đối tượng Kế toán 68

4.14 Danh sách kế hoạch đăng ký 68

4.15 Danh sách đăng ký mua hàng 69

4.16 Lược đồ Activity cho đối tượng Ban giám đốc 69

4.17 Danh sách kế hoạch đăng ký đã được kế toán duyệt 70

4.18 Danh sách thông tin mua hàng 70

4.19 Thông tin chi tiết nghiệm thu 71

5.1 Nhập thông tin đăng ký 74

5.2 Hoàn tất đăng ký 74

5.3 Xem thông tin đăng ký 75

5.4 Nhập thông tin tài sản 76

5.5 Danh sách tài sản 77

5.6 Xem thông tin tài sản 77

5.7 Luân chuyển tài sản 78

5.8 Lịch sử 79

Chương 1

Giới thiệu tổng quan

11

1.1 Giới thiệu đề tài

Từ lâu, việc phát triển và áp dụng khoa học công nghệ vào cuộc sống đã trở thành một mục tiêu vô cùng quan trọng với con người Việc áp dụng công nghệ vào cuộc sống giúp con người có thể dễ dàng hơn trong mọi công việc, đẩy nhanh phát triển kinh tế, đời sống xã hội Văn phòng đào tạo quốc tế OISP trường Đại học Bách Khoa - Đại học Quốc gia TP.HCM đã sử dụng hệ thống quản lý để quản lý tài sản và cơ sở vật chất giúp cho các cán bộ, nhân viên dễ dàng thực hiện nghiệp vụ của mình hơn

Tuy nhiên, với tốc độ phát triển khoa học công nghệ một cách chóng mặt, số lượng tài sản và cơ sở vật chất ngày một nhiều Bên cạnh đó, việc hệ thống được xây dựng từ lâu dẫn đến các chức năng lỗi thời, không còn phù hợp với các yêu cầu nghiệp vụ hiện tại Bên cạnh đó, nghiệp vụ của phòng cần bổ sung thêm các chức năng mới nhằm đảm bảo việc quản lý các tài sản và cơ sở vật chất của trong trường một cách hiệu quả nhất Không những thế, dữ liệu văn phòng đào tạo quốc tế OISP sử dụng đang hoàn toàn độc lập với dữ liệu chung của toàn trường, không nhất quán về mặt dữ liệu Chính vì vậy việc phát triển một hệ thống quản lý mới cho văn phòng đào tạo quốc tế OISP và liên kết với dữ liệu chung của toàn trường là cần thiết

Dựa vào những phân tích trên, nhóm quyết định tích hợp hệ thống quản lý cơ sở vật chất – văn phòng đào tạo quốc tế OISP vào cổng thông tin chung dựa trên những yêu cầu của trưởng phòng Hệ thống được xây dựng dựa trên các chức năng đã có trên hệ thống cũ, chỉnh sửa các chức năng chưa phù hợp, đồng thời tạo mới những chức năng cần thiết tại thời điểm hiện tại và được sử dụng lâu dài trong tương lai Kết quả, hệ thống sẽ là một ứng dụng trực tuyến nhằm hỗ trợ cho cán bộ, công nhân viên văn phòng đào tạo quốc tế OISP trong việc quản lý tài sản và cơ sở vật chất Cung cấp công cụ cho cán bộ nhân viên thực hiện công việc một cách đơn giản và hiệu quả hơn

1.2 Các vấn đề gặp phải của hệ thống quản lý cũ

Phân tích những vấn đề gây khó khăn cho cán bộ, công nhân viên văn phòng đào tạo quốc tế OISP, ta có như sau:

• Hiện tại các đề xuất mua sắm, bàn giao, quản lý, sửa chữa, kiểm kê phải sử dụng file excel, file word, bản giấy các báo cáo của đơn vị nên tốn nhiều thời gian

• Không đồng bộ dữ liệu của trang web hiện tại với Cổng thông tin trực tuyến Bách Khoa

• Kiểm soát quyền, nhiệm vụ của cán bộ, công nhân viên còn nhiều hạn chế do khó quản lý, thống kê

• Lượng dữ liệu ngày một tăng về kích thước, độ phức tạp đòi hỏi phương pháp quản lý cần đầu tư cao hơn và hiệu quả hơn

• Bảo mật dữ liệu chỉ cho những người có thẩm quyền tiến hành những thao tác trong thẩm quyền gặp nhiều khó khăn

• Cán bộ, công nhân viên văn phòng đào tạo quốc tế OISP chưa có công cụ chuyên môn hóa cao về quản lý dữ liệu và hỗ trợ người dùng

Kết luận chung: tích hợp hệ thống quản lý cơ sở vật chất – văn phòng đào tạo quốc tế OISP vào cổng thông tin chung để giải quyết các khó khăn hiện tại, bổ sung các chức năng mới nhằm cải thiện công tác quản lý, vận hành của văn phòng đào tạo quốc tế OISP là thực sự cần thiết

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

Văn phòng đào tạo quốc tế chuyên trách quản lý và vận hành các chương trình đào tạo quốc tế ở bậc Đại học và Sau Đại học của nhà trường Đi kèm với điều đó là lượng thông tin về tài sản và cơ sở vật chất rất lớn, được cập nhật liên lục theo từng năm Việc quản lý và kiểm kê cần phải thực hiện đầy đủ, chính xác và dễ làm quen nhất Như vậy để thực hiện theo đúng mục tiêu của đề tài cần xác định một số công việc phải giải quyết như sau:

• Quản lý việc đăng ký mua sắm cơ sở vật chất theo kế hoạch năm

• Quản lý việc đăng ký mua sắm cơ sở vật chất đột xuất không theo kế hoạch • Quản lý quá trình phê duyệt theo từng cấp các đơn đăng ký mua sắm

• Quản lý quá trình tạo đơn mua hàng • Quản lý quá trình phê duyệt đơn mua hàng

• Quản lý quá trình mua sắm và bàn giao cơ sở vật chất • Quản lý việc báo cáo nâng cấp và sửa chữa cơ sở vật chất • Quản lý các cơ sở vật chất hiện có

• Hỗ trợ kiểm kê tài sản và cơ sở vật chất

1.4 Phạm vi đề tài

Phạm vi đối tượng mà đề tài nhắm đến gồm:

• Cán bộ, công nhân viên đang thuộc biên chế văn phòng đào tạo quốc tế OISP trường Đại học Bách Khoa - Đại học Quốc gia TP.HCM

• Cán bộ, công nhân viên đang thuộc biên chế trường Đại học Bách Khoa - Đại học Quốc gia TP.HCM được cấp quyền truy cập thông tin thuộc văn phòng đào tạo quốc tế OISP

13

1.5 Khó khăn và thách thức

Các phần mềm đang sử dụng hiện nay mang tính rời rạc, chưa được lưu trữ trong cùng một hệ thống cơ sở dữ liệu chung, đồng thời chưa được liên thông với cơ sở dữ liệu toàn trường Do đó, có những khó khăn trong quá trình vận hành, bao gồm:

• Hỗ trợ trên nhiều nền tảng khác nhau

Các vấn đề trên là trở ngại nhóm cần giải quyết để tích hợp hệ thống quản lý cơ sở vật chất – văn phòng đào tạo quốc tế OISP vào cổng thông tin chung

Chương 2

Cơ sở lý thuyết

15

2.1 Kiến trúc website

Mô hình MVC (Model View Controller) là mô hình được sử dụng hầu hết trong các dự án web MVC được chia làm ba lớp xử lý là Models, Views, Controllers Khi sử dụng khung mẫu lập trình này, yêu cầu (request) được chuyển cho Controller, Controller có trách nhiệm làm việc với Model để thực hiện yêu cầu của người dùng hoặc lấy dữ liệu từ cơ sở dữ liệu Controller lựa chọn View để hiển thị ra với người dùng, cung cấp cho View những dữ liệu lấy từ Model Sự tương tác giữa các lớp xử lí của mô hình này được thể hiện ở hình 2.1

• Model: là nơi chứa những nghiệp vụ tương tác với dữ liệu hoặc hệ quản trị cơ sở dữ liệu (mysql, mssql ); nó sẽ bao gồm các class/function xử lý nhiều nghiệp vụ như kết nối database, truy vấn dữ liệu, thêm – xóa – sửa dữ liệu Trong mô hình MVC, Model thể hiện trạng thái của ứng dụng

• View: Là nơi thể hiện nội dung thông qua giao diện người dùng như: nút nhấn, khung nhập, menu, hình ảnh, Chức năng chính là hiển thị dữ liệu và giúp người dùng tương tác Có thể nhúng trực tiếp vào HTML

• Controller: Là nơi đóng vai trò trung gian, xử lí dữ liệu cũng như các yêu cầu thông qua việc tiếp nhận những yêu cầu đó từ người dùng, xử lí logic, lấy dữ liệu phù hợp từ Model sau đó hiển thị thông qua View

hình 2.1: Mô hình MVC

1 Ưu điểm của mô hình MVC: • Trình tự xử lý rất rõ ràng

• Mô hình MVC quy hoạch các class/function vào các thành phần riêng biệt Controller - Model - View, việc đó làm cho quá trình phát triển - quản lý - vận hành - bảo trì web diễn ra thuận lợi hơn, tạo ra được các chức năng chuyên biệt hoá đồng thời kiểm soát được luồng xử lý

• Tạo mô hình chuẩn cho dự án, khi người có chuyên môn ngoài dự án tiếp cận với dự án dễ dàng hơn

• Mô hình đơn giản, dễ hiểu, xử lý những nghiệp vụ đơn giản, và dễ dàng triển khai với các dự án nhỏ

2 Nhược điểm:

• Mô hình gặp phải nhiều hạn chế đối với dự án có độ phức tạp cao Gặp khó khăn cho việc mở rộng hệ thống

2.2 Mô hình đa trang và mô hình đơn trang

2.2.1 Ứng dụng đa trang (Multiple-page application)

Ứng dụng đa trang hoạt động theo cách "truyền thống" Mỗi thao tác như hiển thị dữ liệu, thay đổi dữ liệu hay gửi dữ liệu lên server thì đều cập nhật lại toàn bộ trang bằng dữ liệu mới trên trình duyệt web Những ứng dụng này thường có kích thước lớn và việc phải cập nhập lại trang sẽ gây ảnh hưởng tới trải nghiệm người dùng Tuy nhiên, nhờ vào AJAX, chúng ta đã giảm thiểu mối lo về độ lớn, độ phức tạp trong việc truyền dữ liệu giữa server và trình duyệt Với cách giải quyết này, chúng ta chỉ cần cập nhập lại một phần ứng dụng liên quan mà không cần cập nhập lại hoàn toàn một trang Tuy vậy, các ứng dụng càng phức tạp thì việc sử dụng AJAX càng phức tạp hơn

17 • Cần phải kết hợp chặt chẽ giữa back-end và front-end trong quá trình phát triển

ứng dụng

2.2.2 Ứng dụng đơn trang (Single-page application)

Ứng dụng đơn trang là ứng dụng làm việc trong một trình duyệt mà không yêu cầu phải cập nhập lại khi sử dụng Ứng dụng đơn trang khá phổ biến, có thể kể tới những ứng dụng mà chúng ta sử dụng hằng ngày như: Google Map, Facebook, Gmail, Github,

Ứng dụng đơn trang cung cấp UX(User Experience), người dùng chỉ cần tải nội dung của trang trong lần đầu tiên bằng việc sử dụng Javascript

1 Ưu điểm:

• Quá trình phát triển ứng dụng đơn giản hơn, có trình tự được sắp xếp hợp lý Nhà phát triển không cần viết code để tạo nhiều trang từ phía server Việc bắt đầu học cũng đơn giản hơn khi chỉ cần quan tâm đến file liên quan đến một trang duy nhất • SPA nhanh hơn do các tài nguyên như (HTML, CSS, Javascript, ) đã được tải

từ lần đầu, chỉ có dữ liệu được thay đổi giữa server và trình duyệt

• SPA dễ dàng kiểm tra, kiểm lỗi hơn do phần lớn các trình duyệt (Chrome, FireFox, ) hỗ trợ tốt trong việc quan sát, debug, kiểm lỗi ngay trên trình duyệt • SPA có khả năng làm việc với bộ nhớ cục bộ, cache tốt Nên hiệu quả hơn ứng

dụng đa trang khi làm việc offline, do các tài nguyên chỉ cần tải xuống một lần

• JavaScript cần được cho phép chạy ở phía người dùng

• Rò rỉ bộ nhớ trong Javascript làm hệ thống làm việc chậm hơn

• Hệ thống được phát triển hỗ trợ cho công tác quản lí của trường đại học, do đó không cần chú trọng vào quản lý SEO

• Việc chia nhỏ hệ thống ra thành nhiều phần nhỏ, quản lý, hiện thực ở SPA đơn giản hơn MPA

• Hệ thống cần lưu trữ, chia sẻ nhiều dữ liệu giữa các tính năng, tác vụ Do đó với SPA, có thể tận dụng bộ nhớ cục bộ (local storage) để hỗ trợ việc tương tác với người dùng

2.3 Các nền tảng cho front-end

Khi tìm hiểu, nghiên cứu để xây dựng ứng dụng, có rất nhiều nền tảng, công nghệ thực hiện trên Javascript hỗ trợ cho việc thực hiện giao diện người dùng (front-end) Các nền tảng giúp nâng cao hiệu năng, hiệu suất công việc, hỗ trợ quản lí mã nguồn tốt như ReactJs, AngularJs, VueJs Sau đây, nhóm sẽ giới thiệu, phân tích ưu và nhược điểm của một số công nghệ này, từ đó thấy được sự lựa chọn hợp lý mà hệ thống cổng thông tin hiện đang sử dụng

2.3.1 VueJs

hình 2.2: Logo của Vuejs

Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces) Khác với các framework nguyên khối (monolithic), VueJS được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện lõi (core library) của VueJS, vốn rất dễ học và tích hợp với các thư viện hoặc dự án có sẵn Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, VueJS cũng đáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng một trang (SPA - Single-Page Applications) với độ phức tạp cao hơn nhiều

Phiên bản AngularJS được phát triển dựa trên Javascript nên dễ tiếp cận và được sử dụng rộng rãi Tuy nhiên, so sánh về mặt hiệu năng thì AngularJS không được đánh giá cao, thường bị đem ra so sánh với ReactJs Hiện nay, những công ty phát triển phần mềm thường không chọn AngularJS để phát triển một sản phẩm mới

Điểm nổi bật của AngularJs là có thể giải quyết được một số vấn đề sau:

• Đăng ký callbacks: Đăng ký hàm gọi lại làm phức tạp code Loại bỏ mã soạn sẵn

phổ biến như gọi lại hàm là một điều tốt Nó giúp giảm đáng kể số lượng mã hóa Javascript mà bạn phải thực hiện và giúp dễ dàng kiểm tra ứng dụng của bạn đang làm gì

• Sắp xếp dữ liệu và giao diện người dùng: Các hoạt động CRUD22 chiếm phần lớn các nhiệm vụ của ứng dụng AJAX Luồng dữ liệu sắp xếp theo thứ tự từ máy chủ sang đối tượng bên trong sang dạng HTML, cho phép người dùng sửa đổi biểu mẫu, xác thực biểu mẫu, hiển thị lỗi xác thực, quay lại mô hình bên trong và sau đó quay lại máy chủ, tạo ra rất nhiều bản tóm tắt code AngularJS loại bỏ gần như tất cả các mẫu soạn sắn này, để lại mã mô tả dòng chảy chung của ứng dụng thay vì tất cả các chi tiết triển khai

• Thao tác với HTML DOM bằng lập trình: Thao tác HTML DOM là nền tảng của

các ứng dụng AJAX, nhưng nó cồng kềnh và dễ bị lỗi Bằng cách mô tả khai báo giao diện người dùng sẽ thay đổi như thế nào khi trạng thái ứng dụng của bạn thay đổi, ta sẽ thoát khỏi các tác vụ thao tác DOM cấp thấp Hầu hết các ứng dụng được

1 SPA: Single Page Application

2 CRUD( Create - Read - Update - Delete): Thêm - đọc - sửa - xóa

viết bằng AngularJS không bao giờ phải thao tác lập trình DOM, mặc dù vẫn có thể thao tác nếu muốn

• Viết rất nhiều mã khởi tạo chỉ để bắt đầu: Thông thường, ta cần phải viết rất nhiều

khai báo khởi tạo chỉ để ứng dụng AJAX cơ bản như "Hello World" hoạt động Tuy nhiên, với AngularJS, bạn có thể tự khởi động ứng dụng của mình theo một các dễ dàng bằng các dịch vụ, được tự động đưa vào ứng dụng của bạn theo kiểu tiêm phụ thuộc giống như Guice Điều này cho phép bạn bắt đầu phát triển các tính năng một cách nhanh chóng Như một phần thêm vào, bạn có toàn quyền kiểm soát quá trình khởi tạo trong các trình kiểm tra tự động

Các phiên bản tiếp theo của Angular là 2, 3, 5, 6, 7, 8 có tên chính thức là Angular ra đời với nhiều sự khác biệt và cải tiến so với AngularJS:

• Typescript thay cho Javascript làm ngôn ngữ mặc định • Kiến trúc component-based

• Cải thiện hiệu năng trên nền tảng web và mobile

Vì Angular được viết lại từ đầu nên khác biệt hoàn toàn so với AngularJS nên việc nâng cấp từ AngularJS lên Angular 2 khá khó khăn Hiện nay cộng đồng lập trình viên vẫn đang sử dụng cả 2 framework

2.3.3 ReactJs

Hình 2.4: Framework reactjs

ReactJs là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác Nếu như AngularJS là một Framework cho phép nhúng code Javascript trong code HTML thông qua các thuộc tính như ng-model, ng-repeat thì với ReactJS là một thư viện cho phép nhúng code HTML trong code Javascript nhờ vào JSX, điều đó giúp dễ dàng lồng các đoạn HTML vào trong JS Tích hợp giữa Javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn

21

Cấu trúc, thành phần trong React JS

• React JS không phải là Template Language

• Separation of Components : chia thành các component • Mọi thứ đều là JavaScript Component

• Sử dụng JSX: JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript

Đặc điểm:

− Faster: JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javascript Các

mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript

− Safer: Ngược với Javascript, JSX là kiểu statically-typed , nghĩa là nó được

biên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt

− Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để

cho các lập trình viên Javascript có thể sử dụng

Vòng đời của một React Component

Một điều cần lưu ý khi làm việc với ReactJS là phải nắm rõ được một Component sẽ thực hiện như thế nào kể từ khi được gọi cho đến khi được loại bỏ khỏi DOM

hình 2.5: Vòng đời của một React Component.

• constructor(props):

− Được gọi khi một thể hiện của component được tạo ra − Có thể dùng để khởi tạo state cho component

− Cũng có thể dùng để "bind" các hàm của component

− Nếu phải cài đặt hàm này thì phải khai báo một tham số props cho nó và phải gọi super(props) đầu tiên

• componentWillMount():

− Được gọi trước khi render()

− Dùng để đăng ký các sự kiện toàn cục

− Dựa vào các props để tính toán và set lại state

• render():

− Hàm này bắt buộc phải có trong component()

− Trả về một đối tượng JSX (có thể lồng các đối tượng với nhau nhưng phải có một đối tượng gói tất cả các đối tượng lại) để hiển thị hoặc null/false nếu không muốn hiển thị gì

− Không được gọi setState() trong hàm này (cũng như trong các hàm mà hàm này gọi đến), bởi khi gọi setState() thì hàm render sẽ được gọi, dẫn đến gây ra lặp vô hạn

− Được gọi trước khi component được render lại

− Trả về true/false Nếu false thì sẽ không render lại Mặc định là true

• shouldComponentUpdate(nextProps, nextState):

− Được gọi trước khi component được render lại

− Trả về true/false Nếu false thì sẽ không render lại Mặc định là true

• componentWillUpdate(nextProps, nextState):

− Được gọi ngay sau shouldComponentUpdate() nếu hàm này trả về true

− Không gọi setState() trong hàm này bởi hàm này là để chuẩn bị update cho đối tượng chứ không phải tạo ra 1 update mới, sẽ tạo ra lặp vô hạn

• componentDidUpdate(prevProps, prevState):

− Được gọi ngay sau render() từ lần render thứ 2 trở đi

23 − Đây cũng là 1 cơ hội để thao tác với các phần tử DOM bằng JS

• componentWillUnmount():

− Được gọi khi 1 component được loại bỏ khỏi DOM

− Thực hiện các thao tác dọn dẹp như huỷ các timer, loại bỏ các phần tử thừa, v.v

Ưu điểm và nhược điểm của ReactJS

• Ưu điểm:

− Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệu suất rất nhiều ReactJs cũng tính toán những thay đổi nào cần cập nhật lên DOM và chỉ thực hiện chúng Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí

− Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript Ta có thể thêm vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi Đây là đặc tính thú vị của Reactjs Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX

− Reactjs có nhiều công cụ phát triển, đặc biệt trên ứng dụng mở rộng của Chrome Nó giúp bạn debug code dễ dàng hơn Sau khi bạn cài đặt ứng dụng mở rộng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường

− Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dùng sẽ phải chờ cho trang được khởi tạo và hiển thị lên Điều này thực tế là chậm Hoặc nếu giả sử người dùng vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về

− Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi

• Nhược điểm:

− Reactjs chỉ phục vụ cho tầng View React chỉ là View Library, nó không phải là một MVC framework như những framework khác Đây chỉ là thư viện của Facebook giúp render ra phần view Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác

− Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại

2.3.4 Kết luận

Hiện tại hệ thống cổng thông tin trường đại học Bách Khoa đang sử dụng thư viện ReactJs Sau khi tìm hiểu và phân tích về đặc điểm và lợi ích của các thư viện, framework trên, có thể thấy việc sử dụng ReactJs vì những lý do sau:

• Phù hợp với loại hình ứng dụng đơn trang (Single page application) • React được thiết kế để đáp ứng cho nhu cầu đòi hỏi hiệu năng cao

• Cộng đồng lập trình viên sử dụng ngôn ngữ này đông, có nhiều hướng dẫn cũng như chia sẻ kinh nghiệm để tránh những sai sót cũng như tối ưu hóa ứng dụng

• Có nhiều thư viện hỗ trợ rất tiện lợi và phù hợp với mô hình MVC và Single page application

2.4 Các thư viện trạng thái

hình 2.6: Mô hình hoạt động của flux

• action_name: tên của Action (VD: ADD_ITEM - thêm sản phẩm vào giỏ hàng) • action_payload: thông tin chi tiết nội dung muốn gửi (VD: Object chứa thông

tin ID, quantity, price, của sản phẩm)

3 Sau khi nhận được thông tin từ Action, Dispatcher làm nhiệm vụ truyền tải (broadcast) nội dung nhận được tới các Store đăng ký lắng nghe sự kiện thay đổi từ trước đó

4 Store sau khi nhận thông tin, tiến hành cập nhật dữ liệu (có thể hiểu việc cập nhật dữ liệu ở đây giống việc cập nhật state của Component)

5 Sau khi cập nhật, Store bắn sự kiện xuống View để tiến hành cập nhật hiển thị cho người dùng

6 Ngoài ra trong sơ đồ trên còn có một thành phần API để lấy dữ liệu từ Remote Server

2.4.2 Redux

Redux là một thư viện Javascript giúp tạo thành một lớp quản lý trạng thái của ứng dụng Redux giúp chúng ta có thể viết những ứng dụng có các luồng xử lí nhất quán, chạy trên nhiều môi trường khác nhau (client, server, native) và dễ dàng kiểm thử

Nguyên lý hoạt động

1 Nguồn dữ liệu tin cậy duy nhất (Single source of truth):

Chúng ta sẽ dễ dàng tạo ra một cây trạng thái đơn, cũng dễ kiểm tra, sửa lỗi trong ứng dụng hơn những cây phức tạp Cây trạng thái đơn cũng cho phép chúng ta nhất quán trong việc phát triển hệ thống, tốc độ nhanh hơn trong chu trình phát triển

hình 2.7: Mô hình hoạt động của Redux

2 Các trạng thái chỉ có thể đọc (State is read-only):

Để tránh các Views hoặc các hàm gọi lại trực tiếp làm thay đổi sai các trạng thái, Redux có cơ chế chỉ có một cách thay đổi trạng thái bằng cách chạy một "Action" Các hành động này là một "Plain Object"3 , qua các object này, chúng ta có thể diễn tả các ý định làm thay đổi các trạng thái

3 Chỉ có thể tạo những thay đổi bằng hàm nguyên thủy4 (Changes are made with pure functions)

Để có thể có thể thực hiện những thay đổi, Redux sử dụng reducer là các hàm nguyên thủy, chúng lấy những state hiện tại, gọi các action đã được khai báo sau đó trả về state mới theo yêu cầu

3 Plain Object: các đối tượng cơ bản 4 Hàm nguyên thủy: Pure function

2 Reducers:

Reducers là các hàm nguyên thủy chúng lấy state hiện tại của ứng dụng, thực hiện một action và trả về một state mới Những states này được lưu như những đối tượng và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store

3 Store:

Store lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux nào Bạn có thể truy cập các state được lưu, cập nhật state, và đăng ký hoặc hủy đăng ký các listeners thông qua helper methods

4 View: Hiển thị dữ liệu được cung cấp bởi store

Mô hình hoạt động

Cấu trúc của Redux được giải quyết theo dòng dữ liệu một chiều Nghĩa là tất cả các dữ liệu được xử lý theo một chu trình giống nhau, điều này giúp cho chúng ta dễ dàng nắm bắt cũng như hiểu chúng dễ dàng hơn

Vòng đời của dữ liệu trong redux bao gồm 4 bước: 1 Chúng ta gọi store.dispatch(action)

2 Redux store sẽ gọi hàm reducer mà chúng ta đã gọi từ action tương ứng

3 Reducer gốc sẽ tổng hợp tất các các kết quả từ nhiều reducer khác nhau vào cây trạng thái đơn

4 Store sẽ lưu lại trạng thái cuối cùng của cây trạng thái đơn được trả về

5 Action creator: Hàm tạo các hành động

2.5 Style

2.5.1 jQuery

jQuery là một thư viện Javascript nhanh, nhỏ và giàu tính năng Nó làm cho mọi thứ như chuyển đổi và thao tác đối với HTML, xử lí sự kiện, hiệu ứng và ajax đơn giản hơn nhiều, với API dễ sử dụng và hoạt động với vô số trình duyệt Với sự kết hợp giữa tính linh hoạt và khả năng mở rộng, jQuery đã thay đổi các hàng triệu người dùng Javascript

Đặc điểm và thế mạnh:

3 Dễ sử dụng: Đây là lợi thế chính khi sử dụng jQuery Nó dễ dàng hơn so với nhiều thư viện Javascript chuẩn khác bởi cú pháp đơn giản và bạn chỉ phải viết ít dòng lệnh để tạo các chức năng tương tự Chỉ với 10 dòng lệnh jQuery bạn có thể thay thế cả 20 dòng lệnh DOM Javascript

4 Là một thư viện lớn của Javascript: Thực thi được nhiều chức năng hơn so với các thư viện Javascript khác

5 Cộng đồng lớn: jQuery còn tương đối mới và có một cộng đồng lập trình viên dành thời gian của họ để nghiên cứu, phát triển các plugin của jQuery Như vậy có rất nhiều plugin được viết sẵn để sử dụng giúp đẩy nhanh quá trình thực hiện các sản phẩm

6 Có nhiều tài liệu và hướng dẫn chi tiết: Các trang web jQuery có đầy đủ tài liệu hướng dẫn cách sử dụng thư viện này

7 Hỗ trợ Ajax: jQuery cho phép bạn phát triển các ajax một cách dễ dàng Ajax cho phép một giao diện kiểu dáng đẹp trên trang web, có các chức năng có thể thực hiện trên trang mà không cần tải lại toàn bộ trang

2.5.2 Bootstrap

Bootstrap là một nền tảng (framework) miễn phí, mã nguồn mở, dựa trên HTML, CSS Javascript, nó được đưa ra để xây dựng các giao diện website tương thích với tất cả các thiết bị có kích thước màn hình khác nhau Hiện nay Bootstrap là một trong những framework được sử dụng nhiều nhất trên thế giới để tạo ra các Responsive Website6 Bootstrap đã tạo ra một tiêu chuẩn riêng và rất được các lập trình viên ưa chuộng

Đặc điểm và thế mạnh: 1 Dễ sử dụng

2 Tiết kiệm thời gian cho người dùng khi cần tạo ra các trang web tương thích với nhiều loại thiết bị khác nhau

3 Tương thích với nhiều loại trình duyệt

6 Responsive Website: trang web tương thích với nhiều loại màn hình

29

2.5.3 CSS

CSS là ngôn ngữ tạo phong cách cho trang web 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ôn ngữ đánh dấu, như là HTML Nó có thể điều khiển định dạng của nhiều trang web cù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ủa trang 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à font chữ

2.5.4 Less

hình 2.8: Less

Được phát triển bởi lập trình viên người Đức Alexis Sellier và ra đời vào năm 2009, LESS là một CSS preprocessor giúp ngắn gọn và đơn giản hóa các đoạn mã CSS bằng cách thêm vào mã CSS các thành phần mới như : biến, mixins, toán tử và hàm

Nhờ đó mà việc quản lý các mã CSS cũng trở lên dễ dàng hơn rất nhiều

ta có thể truyền vào các tham số giống như một hàm thông thường

3 Arguments:

Biến @arguments có một ý nghĩa đặc biệt trong mixin, nó chứa giá trị của tất cả các tham số truyền vào mixin Nó giúp chúng ta làm việc dễ dàng khi muốn quản lý nhiều nhóm tham số

2.5.5 Sass

hình 2.9: Sass

SASS là một CSS Preprocessor7 cung cấp thêm các quy tắc như quy tắc xếp chồng, biến, mixin Với SASS chúng ta có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, có thể tự động nén tập tin CSS

7 CSS Preprocessor: ngôn ngữ tiền xử lý CSS, có nhiệm vụ logic hóa mã CSS sao cho gần giống với ngôn ngữ lập trình

4 Quy tắc kế thừa:

Tính năng kế thừa cho phép chúng ta chỉ định cho một thành phần nào đó thừa hưởng tất cả các thuộc tính của một vùng chọn nào đó bất kỳ mà bạn đã khai báo sẵn

5 Các câu lệnh điều khiển:

SASS hỗ trợ rất nhiều mệnh đề điều kiện khác nhau như IF, FOR, EACH, WHILE

3 Tái sử dụng source code tốt hơn

4 Do viết bằng biến, hàm, và tái sử dụng code, nên khả năng kiểm soát source code tốt hơn so với viết bằng CSS thông thường

4 Quy tắc kế thừa

5 Các câu lệnh điều khiển

− Cơ chế non-blocking I/O: là cơ chế cung cấp cách thức khiến các thread không cần thiết chờ đợi việc đọc/ghi I/O Như vậy, các thread có thể tiếp tục thực hiện tác vụ khác qua đó giúp ứng dụng giảm bớt độ trễ do chờ đợi không cần thiết

Đặc điểm

• Realtime: Đây là tính năng quan trọng nhất của NodeJS Realtime ở đây chính là

xử lý giao tiếp từ client tới máy chủ theo thời gian thực

• Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License

• Bất đồng bộ: Tất cả các API của NodeJS đều không đồng bộ (none-blocking), nó

chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về Việc di chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chế thông báo các sự kiện của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước (Realtime)

• Tốc độ cao: NodeJS được xây dựng dựa vào nền tảng V8 Javascript Engine nên có

khả năng thực thi chương trình ở tốc độ cao

• Đơn luồng nhưng khả năng mở rộng cao: Node.js sử dụng một mô hình luồng

duy nhất với sự kiện lặp cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứng một cách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như trái ngược với các máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu Node.js sử dụng một chương trình đơn luồng và các chương trình tương tự có thể cung cấp dịch vụ cho một số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTP Server

• Ad Server: Các máy chủ quảng cáo

• Real-time Data Application: Bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực

Ưu và nhược điểm

• Ưu điểm:

− Đặc điểm nổi bật của NodeJS: nó nhận và xử lý nhiều kết nối chỉ với một singlethread Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi không phải tạo thread mới cho mỗi truy vấn giống PHP Ngoài ra, tận dụng ưu điểm nonblocking I/O của Javascript mà NodeJS tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ như PHP

− Ứng dụng Web thời gian thực: Với sự ra đời của các ứng dụng di động và HTML 5 nên NodeJS rất hiệu quả khi xây dựng những ứng dụng thời gian thực (real-time applications) như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter

35 − Tốc độ xử lý nhanh: NodeJS chạy trên môi trường V8 JavaScript Engine của

Google Chrome nên tốc độ xử lý cực kỳ nhanh

• Nhược điểm:

− Tính ổn định: NodeJs vẫn đang trong quá trình phát triển và hoàn thiện, vì vậy các phiên bản được cập nhật liên tục dẫn đến các tính năng, các APIs8 cũng bị thay đổi

− Độ phức tạp: Với cơ chế non-blocking/async, Nodejs gây khó khăn với các lập trình viên chưa hiểu được phương thức này

− Chỉ phù hợp với một số ứng dụng: NodeJs gặp vấn đề về tốc độ với các ứng dụng sử dụng các file dung lượng lớn

2.7 Cơ sở dữ liệu

Cơ sở dữ liệu (Database) là một tập hợp các dữ liệu có tổ chức, thường được lưu trữ và truy cập điện tử từ hệ thống máy tính Khi cơ sở dữ liệu phức tạp hơn, chúng thường được phát triển bằng cách sử dụng các kỹ thuật thiết kế và mô hình hóa chính thức

Có 2 loại cơ sở dữ liệu:

• Cơ sở dữ liệu quan hệ (SQL9)

• Cơ sở dữ liệu phi quan hệ (NoSQL10)

2.7.1 Hệ cơ sở dữ liệu quan hệ

Khái niệm

SQL là loại ngôn ngữ máy tính, giúp cho thao tác lưu trữ và truy xuất dữ liệu được lưu trữ trong một cơ sở dữ liệu quan hệ SQL là viết tắt của Structured Query Language là ngôn ngữ truy vấn có cấu trúc

RDBMS11 - là hệ quản trị cơ sở dữ liệu quan hệ RDBMS là cơ sở cho SQL, và cho tất cả các hệ thống cơ sở dữ liệu hiện đại như MS SQL Server, IBM DB2, Oracle, MySQL và Microsoft Access

10 NoSQL: Non-Structured Query Language

11 RDBMS: Relational Database Management System

và nó bao gồm nhiều cột và hàng Bảng là hình thức lưu trữ dữ liệu phổ biến và đơn giản nhất trong một cơ sở dữ liệu quan hệ

Constraint có thể là cấp độ cột hoặc cấp độ bảng Các ràng buộc cấp độ cột chỉ được áp dụng cho một cột trong khi các ràng buộc mức bảng được áp dụng cho toàn bộ bảng