xây dựng website quản lý nhân sự của công ty xây dựng dmm

Nội dung tóm tắt đề tài: Website quản lý nhân sự của công ty xây dựng DMM là một nền tảng quản lý nhân sự đa chức năng, được thiết kế để giúp công ty xây dựng DMM tổ chức và quản lý thô

Chương 1: Tổng quan đề tài

Giới thiệu lý do và các mục tiêu mà đề tài cần giải quyết, phạm vi nghiên cứu của đề tài Giới thiệu tóm tắt nội dung sẽ được trình bày trong các chương trình tiếp theo

Nghiên cứu, tìm hiểu và đưa ra lý do chọn đề tài, mục tiêu và mục đích khi xây dựng và phát triển đề tài Xác định rỏ phạm vi và đối tượng hướng đến, giải pháp công nghệ để triển khai, xây dựng đề tài, đồng thời phân tích đặc tả yêu cầu nghiệp vụ.

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

Tìm hiểu, giới thiệu tổng quát các kiến thức về ngôn ngữ lập trình JavaScript, và hệ quản trị cơ sở dữ liệu MongoDB

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

Phân tích hệ thống bao gồm xác định các tác nhân liên quan, chức năng của từng tác nhân Biểu đồ use-case, sơ đồ hoạt động và sơ đồ ERD giúp mô tả hành vi mong đợi của hệ thống Thiết kế cơ sở dữ liệu đảm bảo lưu trữ và truy xuất dữ liệu hiệu quả Cuối cùng, kịch bản use-case chỉ định cách hệ thống phản hồi các hành động của người dùng cụ thể.

Chương 4: Kết quả triển khai hệ thống

Xây dựng giao diện và chức năng của website

Kết luận chung cho các chương trong đồ án Trình bày những vấn đề đã giải quyết đồng thời trình bày hướng phát triển

Giới thiệu hệ quản trị cơ sở dữ liệu NoSql MongoDB 2.1.1 Đặc điểm của MongoDB a Khái niệm

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng, MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON MongoDB được phát triển bởi MongoDB Inc và được cấp phép theo Giấy phép Công cộng phía Máy chủ (SSPL)

Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server…) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng

So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS

Các bộ sưu tập trong MongoDB có cấu trúc linh hoạt, cho phép lưu trữ dữ liệu không tuân theo cấu trúc cố định.

Nguyên tắc hoạt động của MongoDB là dưới một tiến trình dịch vụ ngầm và mở một cổng (mặc định là cổng 27017), để có thể tiếp nhận các yêu cầu truy vấn, thao tác; sau đó tiến hành xử lý

Mỗi bản ghi trong MongoDB đều có một trường "_id" để nhận dạng duy nhất Trường này đóng vai trò như tên gọi của bản ghi, giúp phân biệt với các bản ghi khác Ngoài ra, "_id" còn được sử dụng để truy vấn và tìm kiếm thông tin Trường "_id" được tự động đánh chỉ mục, đảm bảo tốc độ truy vấn nhanh chóng.

Mỗi truy vấn dữ liệu đều được ghi đệm lên bộ nhớ RAM nên các truy vấn sau đó sẽ diễn ra nhanh hơn Bởi nó không cần đọc dữ liệu từ ổ cứng

2.1.2 Các lợi ích của hệ quản trị Cơ sở dữ liệu MongoDB a Cấu trúc dữ liệu linh hoạt

MongoDB cho phép lưu trữ dữ liệu theo dạng document (BSON) có cấu trúc linh hoạt Điều này cho phép bạn lưu trữ các document có cấu trúc dữ liệu khác nhau trong cùng một collection, giúp dễ dàng thích ứng với sự thay đổi của yêu cầu dữ liệu b Khả năng mở rộng và hiệu suẩt cao

MongoDB hỗ trợ khả năng mở rộng dọc theo chiều ngang (horizontal scaling) và phương pháp sharding Điều này cho phép bạn phân tán dữ liệu trên nhiều server và xử lý lưu trữ dữ liệu lớn một cách hiệu quả MongoDB cũng hỗ trợ replica set để cung cấp tính sẵn sàng (high availability) và tăng cường khả năng chịu lỗi c Truy vấn linh hoạt

MongoDB cung cấp MongoDB Query Language (MQL), một ngôn ngữ truy vấn mạnh mẽ và linh hoạt MQL hỗ trợ các toán tử, điều kiện và phép tính phức tạp để tìm kiếm và truy xuất dữ liệu theo nhu cầu Điều này cho phép bạn xử lý truy vấn phức tạp và tìm kiếm dữ liệu một cách hiệu quả d Tích hợp dễ dàng

MongoDB hỗ trợ các công cụ và thư viện phổ biến cho nhiều ngôn ngữ lập trình, giúp dễ dàng tích hợp và phát triển ứng dụng Các thư viện MongoDB cho phép bạn tương tác với cơ sở dữ liệu MongoDB và thực hiện các thao tác như tạo, đọc, cập nhật và xóa dữ liệu e Độ tin cậy va tính sẳn sàng

MongoDB cung cấp tính sẵn sàng và độ tin cậy cao thông qua replica set Với replica set, bạn có thể sao chép dữ liệu và có khả năng chuyển đổi tự động sang một secondary node khi primary gặp sự cố

Giới thiệu ngôn ngữ lập trình Java Script

JavaScript là một ngôn ngữ lập trình dành cho việc tạo và phát triển web Nó được

Ngày nay, JavaScript có thể thực thi không chỉ trong trình duyệt mà còn trên server hoặc bất kỳ thiết bị nào có chương trình đặc biệt gọi là JavaScript Engine

Trước đây, các trang web có dạng tĩnh, tương tự như các trang trong một cuốn sách Một trang tĩnh chủ yếu hiển thị thông tin theo một bố cục cố định JavaScript dần được biết đến như một công nghệ phía trình duyệt để làm cho các ứng dụng web linh hoạt hơn Sử dụng JavaScript, các trình duyệt có thể phản hồi tương tác của người dùng và thay đổi bố cục của nội dung trên trang web

Khi ngôn ngữ này phát triển hoàn thiện, các nhà phát triển JavaScript đã thiết lập các thư viện, khung và cách thức lập trình cũng như bắt đầu sử dụng ngôn ngữ này bên ngoài trình duyệt web Ngày nay, chúng ta có thể sử dụng JavaScript để thực hiện hoạt động phát triển cả ở phía máy khách và máy chủ

2.2.2 Cách hoạt động của JavaScript a Cấu trúc dữ liệu linh hoạt

Sau đây là tổng quan về cách thức hoạt động của JavaScript phía máy khách:

Trình duyệt tải một trang web khi bạn truy cập trang đó

Trong quá trình tải, trình duyệt sẽ chuyển đổi trang web và toàn bộ các thành phần trên trang, chẳng hạn như nút, nhãn và hộp thả xuống, thành một cấu trúc dữ liệu gọi là Mô hình đối tượng tài liệu (DOM).

Công cụ JavaScript của trình duyệt chuyển đổi mã JavaScript thành mã bytecode Mã này đóng vai trò là trung gian giữa cú pháp JavaScript và máy

Đặc điểm của MongoDB

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng, MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON MongoDB được phát triển bởi MongoDB Inc và được cấp phép theo Giấy phép Công cộng phía Máy chủ (SSPL)

Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server…) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng

So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS

Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định b Cách thức hoạt động của MongoDB

Nguyên tắc hoạt động của MongoDB là dưới một tiến trình dịch vụ ngầm và mở một cổng (mặc định là cổng 27017), để có thể tiếp nhận các yêu cầu truy vấn, thao tác; sau đó tiến hành xử lý

Mỗi bản ghi của MongoDB (document) được gắn một trường có tên “_id” nhằm xác định tính duy nhất của bản ghi Có thể hiểu id này như tên gọi của một bản ghi và dùng phân biệt chúng với các bản ghi khác Đồng thời, nó còn được sử dụng cho mục đích truy vấn hoặc tìm kiếm thông tin Trường dữ liệu “_id” được tự động đánh chỉ mục (index) để đảm bảo tốc độ truy vấn đạt hiệu suất tối ưu

Mỗi truy vấn dữ liệu đều được ghi đệm lên bộ nhớ RAM nên các truy vấn sau đó sẽ diễn ra nhanh hơn Bởi nó không cần đọc dữ liệu từ ổ cứng.

Các lợi ích của hệ quản trị Cơ sở dữ liệu MongoDB

MongoDB cho phép lưu trữ dữ liệu theo dạng document (BSON) có cấu trúc linh hoạt Điều này cho phép bạn lưu trữ các document có cấu trúc dữ liệu khác nhau trong cùng một collection, giúp dễ dàng thích ứng với sự thay đổi của yêu cầu dữ liệu b Khả năng mở rộng và hiệu suẩt cao

MongoDB hỗ trợ khả năng mở rộng dọc theo chiều ngang (horizontal scaling) và phương pháp sharding Điều này cho phép bạn phân tán dữ liệu trên nhiều server và xử lý lưu trữ dữ liệu lớn một cách hiệu quả MongoDB cũng hỗ trợ replica set để cung cấp tính sẵn sàng (high availability) và tăng cường khả năng chịu lỗi c Truy vấn linh hoạt

MongoDB cung cấp MongoDB Query Language (MQL), một ngôn ngữ truy vấn mạnh mẽ và linh hoạt MQL hỗ trợ các toán tử, điều kiện và phép tính phức tạp để tìm kiếm và truy xuất dữ liệu theo nhu cầu Điều này cho phép bạn xử lý truy vấn phức tạp và tìm kiếm dữ liệu một cách hiệu quả d Tích hợp dễ dàng

MongoDB hỗ trợ các công cụ và thư viện phổ biến cho nhiều ngôn ngữ lập trình, giúp dễ dàng tích hợp và phát triển ứng dụng Các thư viện MongoDB cho phép bạn tương tác với cơ sở dữ liệu MongoDB và thực hiện các thao tác như tạo, đọc, cập nhật và xóa dữ liệu e Độ tin cậy va tính sẳn sàng

MongoDB cung cấp tính sẵn sàng và độ tin cậy cao thông qua replica set Với replica set, bạn có thể sao chép dữ liệu và có khả năng chuyển đổi tự động sang một secondary node khi primary gặp sự cố

Giới thiệu ngôn ngữ lập trình Java Script

JavaScript là một ngôn ngữ lập trình dành cho việc tạo và phát triển web Nó được

Ngày nay, JavaScript không chỉ phổ biến trong trình duyệt nữa mà còn có thể chạy trên máy chủ hoặc bất kỳ thiết bị nào được cài đặt công cụ đặc biệt gọi là JavaScript Engine.

Ứng dụng của JavaScript

Trước đây, các trang web có dạng tĩnh, tương tự như các trang trong một cuốn sách Một trang tĩnh chủ yếu hiển thị thông tin theo một bố cục cố định JavaScript dần được biết đến như một công nghệ phía trình duyệt để làm cho các ứng dụng web linh hoạt hơn Sử dụng JavaScript, các trình duyệt có thể phản hồi tương tác của người dùng và thay đổi bố cục của nội dung trên trang web

Khi ngôn ngữ này phát triển hoàn thiện, các nhà phát triển JavaScript đã thiết lập các thư viện, khung và cách thức lập trình cũng như bắt đầu sử dụng ngôn ngữ này bên ngoài trình duyệt web Ngày nay, chúng ta có thể sử dụng JavaScript để thực hiện hoạt động phát triển cả ở phía máy khách và máy chủ.

Cách hoạt động của JavaScript

a Cấu trúc dữ liệu linh hoạt

Trong khi tải, trình duyệt chuyển đổi trang và tất cả các phần tử của trang, chẳng hạn như các nút, nhãn và hộp thả xuống, thành một cấu trúc dữ liệu được gọi là Mô hình đối tượng tài liệu (DOM)

Các sự kiện khác nhau, chẳng hạn như nhấp vào nút, sẽ kích hoạt việc thực thi khối mã JavaScript được liên kết Sau đó, công cụ này sẽ diễn giải bytecode và thực hiện các thay đổi đối với DOM

Trình duyệt hiển thị DOM mới b Phía máy chủ

Trong khi tải, trình duyệt chuyển đổi trang và tất cả các phần tử của trang, chẳng hạn như các nút, nhãn và hộp thả xuống, thành một cấu trúc dữ liệu được gọi là Mô hình đối tượng tài liệu (DOM)

Sự kiện kích hoạt khối mã JavaScript được liên kết và công cụ này diễn dịch bytecode thành các thay đổi trong DOM.

Trình duyệt hiển thị DOM mới

JavaScript phía máy chủ đề cập đến việc sử dụng ngôn ngữ viết mã trong logic máy chủ back-end Trong trường hợp này, công cụ JavaScript nằm trực tiếp trên máy chủ Hàm JavaScript phía máy chủ có thể truy cập cơ sở dữ liệu, thực hiện các phép toán logic khác nhau và phản hồi nhiều loại sự kiện do hệ điều hành của máy chủ kích hoạt Ưu điểm chính của viết tập lệnh phía máy chủ là bạn có khả năng tùy chỉnh linh hoạt phản hồi của trang web dựa trên yêu cầu và quyền truy cập của mình cũng như theo yêu cầu thông tin từ trang web c Cấu trúc dữ liệu linh hoạt

Thư viện JavaScript là tập hợp các đoạn mã viết sẵn mà các nhà phát triển web có thể tái sử dụng để thực hiện các hàm JavaScript chuẩn Mã thư viện JavaScript được gắn vào phần còn lại của mã dự án khi cần thiết Nếu bạn coi mã ứng dụng JavaScript như một ngôi nhà thì các thư viện JavaScript sẽ giống như đồ nội thất làm sẵn mà các nhà phát triển có thể sử dụng để cải thiện chức năng của ngôi nhà

Sau đây là một số cách sử dụng thư viện JavaScript phổ biến:

Trực quan hóa dữ liệu

ReactJS là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng (UI) trong các ứng dụng web Nó được phát triển bởi Facebook và được cung cấp miễn phí dưới giấy phép mã nguồn mở

Trước khi có ReactJS, lập trình viên thường gặp rất nhiều khó khăn trong việc sử dụng “vanilla JavaScript” (JavaScript thuần) và Jquery7 để xây dựng UI Điều đó đồng nghĩa với việc quá trình phát triển ứng dụng sẽ lâu hơn và xuất hiện nhiều bug, rủi ro hơn Vì vậy vào năm 2011, Jordan Walke – một nhân viên của Facebook đã khởi tạo ReactJS với mục đích chính là cải thiện quá trình phát triển UI.

Thành phần chính của ReactJS

a Redux Đây là một phần rất quan trọng của ReactJS và không ai sử dụng Redux mà không biết ReactJS không có mô-đun chuyên dụng để xử lý dữ liệu, vì vậy ReactJS chia chế độ xem thành các thành phần nhỏ hơn mà bạn thiết lập độc lập và làm cho chúng liên quan chặt chẽ hơn

Các liên kết và mối quan hệ giữa các thành phần trong ReactJS đòi hỏi sự chú ý đặc biệt, bởi vì luồng dữ liệu một chiều từ cấp độ mẹ đến cấp độ con là luồng dữ liệu duy nhất trong ReactJS Nó áp dụng cho các dự án, nhưng bất chấp những điều cần lưu ý, nó có một mặt tốt đẹp khác Đó là về việc thúc đẩy tất cả các tính năng và vai trò khi ReactJS sử dụng engine b Virtual Dom Đây là phần mà hầu như tất cả các framework đều sử dụng dom ảo và ReactJS sử dụng nó khi dom ảo thay đổi Điều đặc biệt ở đây là bạn không phải thao tác trực tiếp với dom mà có thể xem các lượt xem và thay đổi

Vì Virtual Dom hoạt động như một mô hình và một khung nhìn, nên việc thay đổi một trong hai yếu tố này sẽ thay đổi yếu tố kia và ngược lại mà không cần thao tác trực tiếp Tuy nhiên, có thể thực hiện cơ chế mù dữ liệu Mục đích của việc này là tăng tốc đáng kể ứng dụng của bạn, đây là một trong những lợi thế lớn nhất của việc sử dụng

Lợi ích của ReactJS

Tạo cho chính bản thân ReactJS một dom ảo, đây là nơi các component được tồn tại trên đó Tạo một dom như thế này sẽ cải thiện hiệu suất rất nhiều Nếu bạn cần thay đổi hoặc cập nhật một phép tính trong dom, ReactJS sẽ tính toán nó trước và phần còn lại sẽ chạy trong dom để thực hiện công việc, vì vậy ReactJS có thể tránh các thao tác cần thiết trong dom mà không phải trả thêm phí

Việc viết các đoạn mã JS sẽ trở nên dễ dàng sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX 9 , cú pháp này cho phép bạn kết hợp mã HTML 10 và Javascript Ngoài ra, bạn có thể thêm mã bổ sung vào hàm kết xuất mà không cần nối chuỗi Đây được coi là một trong những tính năng thú vị của ReactJS, việc chuyển đổi các đoạn HTML sang các constructor đều được thực hiện bởi trình chuyển đổi chính là JSX

Khái quát Express

Express is a web application framework for Node.js that provides a robust feature set for web development Its simplicity enables the rapid development of Node.js-based web applications Express supports HTTP methods and middleware, making it a powerful and user-friendly API creation tool.

Tại sao nên sử dụng Express ?

➢ Dễ học và dễ sử dụng

➢ Tích hợp tốt với các công cụ và thư viện khác

➢ Có cộng đồng lớn và tài liệu phong phú

➢ Hỗ trợ phát triễn API và ứng dụng đơn trang

➢ Cộng đồng hỗ trợ lớn, tích cực

Công cụ sử dụng phát triển hệ thống

Nó cũng cho phép tùy chỉnh, do đó, người dùng có thể thay đổi theme, phím tắt, và các tùy chọn khác Nó miễn phí và là phần mềm mã nguồn mở theo giấy phép MIT mặc dù bản phát hành của Microsoft là theo giấy phép phần mềm miễn phí b Lợi ích sử dụng

Visual Studio Code là một trình biên tập mã Nó hỗ trợ nhiều ngôn ngữ và chức năng tùy vào ngôn ngữ sử dụng theo như trong bảng sau

Nhiều chức năng của Visual Studio Code không hiển thị ra trong các menu tùy chọn hay giao diện người dùng

Thay vào đó, chúng được gọi thông qua khung nhập lệnh hoặc qua một tập tin

“.json” (ví dụ như tập tin tùy chỉnh của người dùng)

Khung nhập lệnh là một giao diện theo dòng lệnh Tuy nhiên, nó biến mất khi người dùng nhấp bất cứ nơi nào khác, hoặc nhấn tổ hợp phím để tương tác với một cái gì đó ở bên ngoài đó

Tương tự như vậy với những dòng lệnh tốn nhiều thời gian để xử lý Khi thực hiện những điều trên thì quá trình xử lý dòng lệnh đó sẽ bị hủy

Postman là một loại công cụ cho phép người dùng có thể thao tác với API, mà trong đó phổ biến nhất là REST Với thử nghiệm API thì Postman là một trong những công cụ phổ biến vì được thực nghiệm nhiều nhất

Nhờ Postman lập trình viên có thể gọi Rest API mà không cần phải viết bất kỳ dòng code nào Postman có khả năng hỗ trợ mọi phương thức HTTP bao gồm: POST, PUT, DELETE, PATCH, GET,

Ngoài ra, Postman còn cho phép lập trình viên lưu lại lịch sử của các lần request nên vô cùng tiện lợi cho nhu cầu sử dụng lại b Lợi ích sử dụng

Ứng dụng Postman sử dụng tính năng Collection, cho phép người dùng tạo các bộ sưu tập riêng cho các lệnh gọi API của mình Mỗi bộ sưu tập có thể được chia nhỏ thành các thư mục con chứa nhiều yêu cầu riêng biệt Đặc điểm này giúp việc tổ chức các bộ thử nghiệm trở nên dễ dàng và khoa học hơn.

Trong Postman Collections và environment sẽ được import hoặc export giúp người dùng có thể chia sẻ tệp dễ dàng hơn Ngoài ra, các liên kết trực tiếp cũng có thể được sử dụng với mục đích chia sẻ bộ sưu tập

Postman có khả năng test trạng thái phản hồi của HTTP

Hỗ trợ gỡ lỗi: Bộ phận bảng điều khiển của Postman có thể giúp bạn kiểm tra dữ liệu đã xuất Từ đó, quá trình gỡ lỗi sẽ trở nên dễ dàng và linh hoạt hơn

Hỗ trợ tạo thử nghiệm: Những điểm kiểm tra thử nghiệm và xác định trạng thái phản hồi HTTP thành công Và vai trò xác nhận có thể được thêm vào mỗi lệnh gọi API nhằm đảm bảo phạm vi kiểm tra

Thông qua quá trình sử dụng bộ sưu tập và newman sẽ đảm bảo các kiểm thử sẽ chạy được trong những lần lặp lại Từ đó, tiết kiệm thời gian cho các thử nghiệm có thể lặp đi lặp lại

Tích hợp liên tục: Postman có khả năng hỗ trợ tích hợp liên tục cho các hoạt động phát triển và có thể được duy trì

: PHÂN TÍCH THIẾT KẾ HỆ THỐNG Đặc tả chức năng

3.1.1 Xác định các tác nhân Đề tài gồm 3 tác nhân:

3.1.2 Các yêu cầu chức năng a Quản trị viên

− Là người quản trị viên có quyền cao nhất, nắm tất cả các quyền

− Thiết lập được quyền của tất cả nhân viên sử dụng ứng dụng

− Quản lý tài khoảng của nhân viên

− Duyệt lịch nhân viên đăng ký tăng ca

− Tạo mới lịch làm việc, chỉnh sửa lịch việc cho nhân viên

− Thông báo công việc cho nhân viên

− Thống kê lịch làm việc của nhân viên, số lượng nhân viên, số lượng công việc, số lượng tăng ca b Trưởng nhóm xây dựng

− Tạo mới lịch làm việc cho công nhân xây dựng

− Xem chi tiết công việc

− Đăng ký tăng ca c Công nhân xây dựng

Phân tích 3.2.1 Sơ đồ Usecase

Hình 3.1: Sơ đồ usecase tổng quát a Sơ đồ use-case thiết lập hệ thống

Hình 3.2: Sơ đồ use-case thiết lập hệ thống b Sơ đồ use-case duyệt đơn đăng ký tăng ca c Sơ đồ use-case lọc công việc

Hình 3.4: Sơ đồ use-case lọc công việc

3.2.2 Sơ đồ hoạt động (Activity Diagram) 1.2.2.1 Actor công nhân xây dựng a Sơ đồ hoạt động đăng nhập

Hình 3.5: Sơ đồ hoạt động đăng nhập b Sơ đồ hoạt động hủy tăng ca c Sơ đồ hoạt động đăng ký tăng ca d Sơ đồ hoạt động tìm kiếm

Hình 3.8: Sơ đồ hoạt động tìm kiếm

1.2.2.2 Actor trưởng nhóm xây dựng a Sơ đồ hoạt động đăng nhập

Hình 3.9: Sơ đồ hoạt động đăng nhập b Sơ đồ hoạt động hủy tăng ca c Sơ đồ hoạt động tạo mới công việc

Hình 3.11: Sơ đồ hoạt động tạo mới công việc d Sơ đồ hoạt động tìm kiếm

1.2.2.3 Actor quản trị viên a Sơ đồ hoạt động đăng nhập

Hình 3.13: Sơ đồ hoạt động đăng nhập b Sơ đồ hoạt động quản lý tài khoản nhân viên c Sơ đồ hoạt động tạo mới công việc

Hình 3.15: Sơ đồ hoạt động tạo mới công việc d Sơ đồ hoạt động chỉnh sửa công việc

Hình 3.16: Sơ đồ hoạt động chỉnh sửa công việc e Sơ đồ hoạt động duyệt tăng ca f Sơ đồ hoạt động thống kê

Hình 3.18: Sơ đồ hoạt động thống kê

3.2.3 Sơ đồ tuần tự a Sơ đồ tuần tự chi tiết công việc

Hình 3.19: Sơ đồ tuần tự chi tiết công việc b Sơ đồ tuần tự công việc c Sơ đồ tuần tự duyệt tăng ca

Hình 3.21: Sơ đồ tuần tự duyệt tăng ca d Sơ đồ tuần tự tìm kiếm công việc e Sơ đồ tuần tự xem danh sách công việc

Hình 3.23: Sơ đồ tuần tự xem danh sách công việc

3.2.4 Sơ đồ mô tả chức năng hệ thống

Tạo mới công việc Ẩn công việc đã hoàn thành

TÌm kiếm theo tên nhân viên

Tạo mới đơn đăng ký tăng ca

Duyệt đơn đăn ký tăn ca

Hình 3.25: Sơ đồ ERD (Entiy Relationship Diagram) cho hệ thống

Thiết lập hệ thống 3.3.1 Thiết kế cơ sở dữ liệu a Tbl_user

Thuộc tính Giải thích Kiểu dữ liệu Ghi chú

Id_user Mã nhân viên VarChar(255) Khóa chính account_employee Tên tài khoản VarChar(255) password_employee Mật khẩu VarChar(255) name_employee Tên nhân viên VarChar(255) address_employee Quên quán VarChar(255) cmnd_employee Số CMND Int phone_employee Số điện thoại Int gender_employee Giới tính VarChar(255) current_residence Nơi ở hiện tại VarChar(255) image Ảnh đại diện VarChar(255) date_of_birth Ngày sinh Date() wage_employee Lương VarChar(255) status Trạng thái VarChar(255)

Id_department Mã phòng ban VarChar(255) Khóa ngoại Id_position Mã chức vũ VarChar(255) Khóa ngoại

Id_role Mã quyên VarChar(255) Khóa ngoại

Bảng 3.1: Bảng nhân viên b Tbl_project

Id_project Mã công việc VarChar(255) Khóa chính name_project Tên công việc VarChar(255) place_project Vị trí làm việc VarChar(255) date_start Ngày bắt đầu Date() date_end Ngày kết thúc Date() status Trạng thái công việc VarChar(255) statusOvertime Trạng thái tăng ca VarChar(255) reason_project Nội dung tăng ca VarChar(255) Id_user Mã nhân viên VarChar(255) Khóa ngoại

Bảng 3.2: Bảng công việc c Tbl_Overtime

Thuộc tính Giải thích Kiểu dữ liêu Ghi chú

Id_overtime Mã tăng ca VarChar(255) Khóa chính

Id_user Mã nhân viên VarChar(255) Khóa ngoại

The table includes columns for the project ID, task code, overtime content, start date, end date, and registration date The project ID is a foreign key, while the task code and overtime content are both VARCHAR(255) fields The start and end dates are both Date() fields, and the registration date is also a Date() field.

Bảng 3.3: Bảng tăng ca d Tbl_Position

Id_position Mã chức vụ VarChar(255) Khóa chính name_position Tên chức vụ VarChar(255)

Bảng 3.4: Bảng chức vụ e Tbl_Phongban f Tbl_Thongbao

3.3.2 Đặc tả chức năng 3.3.2.1 Actor công nhân xây dựng a Kịch bản use-case Đăng nhập

Mô tả Công nhân xây dựng muốn thực hiện những chức năng cần phải đăng nhập vào hệ thống

Actors Công nhân xây dựng Đầu vào Tên tài khoản

Mật khẩu Đầu ra Đăng nhập thành công

1 Actor vào giao diện web 2 Actor chọn đăng nhập 3 Actor nhập Tên tài khoản 4 Actor nhâp Mật khẩu 5 Actor nhấn nút “Đăng nhập”

6 Đăng nhập hệ thống – Kết thúc Usecase

2a Actor chọn phương thức đăng nhập tự động 2a.1 Tự động sao lưu trong hệ thống use`case tiếp tục bước 5 3a.1 Actor nhập sai tên tài khoản

3a.1 Nhập lại usecase tiếp tục bước 4 4a Actor nhập sai mật khẩu

4a.1 Actor nhập lại usecase tiếp tục bước 5 4a.2 Actor quên mật khẩu

4a.2.1 Xin hệ thống gửi lại mật khẩu usecase tiếp tục bước 5 b Kịch bản use-case Xem thông tin công việc

Tên usecase Thông tin công việc

Mô tả Công nhân xây dựng xem chi tiết thông tin công việc

Actors Công nhân xây dựng Đầu vào Công nhân xây dựng đã đăng nhập bằng tài khoản thành công

Chọn mục “công việc” vào đó để xem thông tin công việc Đầu ra Nhân viên có thể thấy thông tin chi tiết công việc của mình

1 Actor ở vị trí trang chủ 2 Actor bấm vào danh mục công việc 3 Actor chọn công việc cần xem 4 Hệ thống hiển thị thông tin chi tiết công việc

Các trường hợp ngoại lệ

Bảng 3.8: Kịch bản use-case Xem thông tin công việc c Kịch bản use-case Đăng ký tăng ca

Tên usecase Đăng ký tăng ca

Mô tả Công nhân xây dựng muốn đăng ký tăng ca

Chọn mục “đăng ký tăng ca” vào đó để đăng ký tăng ca Đầu ra Công nhân xây dựng có thể thấy lịch tăng ca đã có

1 Actor ở vị trí trang chủ 2 Actor bấm vào đăng ký tăng ca 3 Hệ thống hiển form đăng ký 4 Actor nhấn nút “Đăng ký tăng ca”

Bảng 3.9: Kịch bản use-case Đăng ký tăng ca

3.3.2.2 Actor trưởng nhóm xây dựng a Kịch bản use-case Đăng nhập

Mô tả Trưởng nhóm xây dựng muốn thực hiện những chức năng cần phải đăng nhập vào hệ thống

Actors Trưởng nhóm xây dựng Đầu vào Tên tài khoản

1 Actor vào giao diện web 2 Actor chọn đăng nhập 3 Actor nhập Tên tài khoản 4 Actor nhâp Mật khẩu

5 Actor nhấn nút “Đăng nhập”

4a.1 Actor nhập lại usecase tiếp tục bước 5 b Kịch bản use-case Xem thông tin công việc

Mô tả Trưởng nhóm xây dựng muốn đăng ký tăng ca

Actors Trưởng nhóm xây dựng Đầu vào Trưởng nhóm xây dựng đã đăng nhập bằng tài khoản thành công

1 Trưởng nhóm đăng ở vị trí trang chủ 2 Trưởng nhóm bấm vào đăng ký tăng ca 3 Hệ thống hiển form đăng ký

4 Actor nhấn nút “Đăng ký tăng ca”

Bảng 3.12: Kịch bản use-case Đăng ký tăng ca d Kịch bản use-case Tạo mới công việc

Tên usecase Tạo mới công việc

Mô tả Trưởng nhóm xây dựng muốn tạo mới công việc

Chọn mục “công việc” vào chọn tạo mới Đầu ra Công nhân xây dựng có thể thấy lịch tăng ca đã có

1 Trưởng nhóm ở vị trí trang chủ 2 Trưởng nhóm bấm vào công việc 3 Actor nhấn nút “Tạo mới”

Bảng 3.13: Kịch bản use-case Tạo mới công việc

3.3.2.3 Actor quản trị viên Tên usecase Quản trị viên

Mô tả Quản trị viên quản lý

Postman

Postman là một loại công cụ cho phép người dùng có thể thao tác với API, mà trong đó phổ biến nhất là REST Với thử nghiệm API thì Postman là một trong những công cụ phổ biến vì được thực nghiệm nhiều nhất

Nhờ Postman lập trình viên có thể gọi Rest API mà không cần phải viết bất kỳ dòng code nào Postman có khả năng hỗ trợ mọi phương thức HTTP bao gồm: POST, PUT, DELETE, PATCH, GET,

Ngoài ra, Postman còn cho phép lập trình viên lưu lại lịch sử của các lần request nên vô cùng tiện lợi cho nhu cầu sử dụng lại b Lợi ích sử dụng

Postman sử dụng Collection nên người dùng có thể tạo bộ sưu tập cho những lệnh gọi API của họ Mỗi một bộ sưu tập đều có thể tạo ra thư mục con với nhiều request Đây là điểm mạnh giúp quá trình tổ chức các bộ thử nghiệm được dễ dàng hơn

Trong Postman, Collections và Environment có thể được import hoặc export để thuận tiện cho việc chia sẻ với người dùng khác Ngoài ra, có thể sử dụng liên kết trực tiếp để chia sẻ các bộ sưu tập và environment, giúp cho việc hợp tác và chia sẻ nội dung giữa các thành viên nhóm trở nên dễ dàng hơn.

Postman có khả năng test trạng thái phản hồi của HTTP

Bộ phận bảng điều khiển của Postman giúp kiểm tra dữ liệu đã xuất, giúp quá trình gỡ lỗi dễ dàng và linh hoạt hơn.

Hỗ trợ tạo thử nghiệm: Những điểm kiểm tra thử nghiệm và xác định trạng thái phản hồi HTTP thành công Và vai trò xác nhận có thể được thêm vào mỗi lệnh gọi API nhằm đảm bảo phạm vi kiểm tra

Thông qua quá trình sử dụng bộ sưu tập và newman sẽ đảm bảo các kiểm thử sẽ chạy được trong những lần lặp lại Từ đó, tiết kiệm thời gian cho các thử nghiệm có thể lặp đi lặp lại

Tích hợp liên tục: Postman có khả năng hỗ trợ tích hợp liên tục cho các hoạt động phát triển và có thể được duy trì

: PHÂN TÍCH THIẾT KẾ HỆ THỐNG Đặc tả chức năng

Xác định các tác nhân

Đề tài gồm 3 tác nhân:

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

− Là người quản trị viên có quyền cao nhất, nắm tất cả các quyền

− Thiết lập được quyền của tất cả nhân viên sử dụng ứng dụng

− Quản lý tài khoảng của nhân viên

− Duyệt lịch nhân viên đăng ký tăng ca

− Tạo mới lịch làm việc, chỉnh sửa lịch việc cho nhân viên

− Thông báo công việc cho nhân viên

− Thống kê lịch làm việc của nhân viên, số lượng nhân viên, số lượng công việc, số lượng tăng ca b Trưởng nhóm xây dựng

− Tạo mới lịch làm việc cho công nhân xây dựng

− Đăng ký tăng ca c Công nhân xây dựng

Sơ đồ Usecase

Hình 3.1: Sơ đồ usecase tổng quát a Sơ đồ use-case thiết lập hệ thống

Hình 3.2: Sơ đồ use-case thiết lập hệ thống b Sơ đồ use-case duyệt đơn đăng ký tăng ca c Sơ đồ use-case lọc công việc

Hình 3.4: Sơ đồ use-case lọc công việc

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

a Sơ đồ hoạt động đăng nhập

Hình 3.5: Sơ đồ hoạt động đăng nhập b Sơ đồ hoạt động hủy tăng ca c Sơ đồ hoạt động đăng ký tăng ca d Sơ đồ hoạt động tìm kiếm

Hình 3.8: Sơ đồ hoạt động tìm kiếm

1.2.2.2 Actor trưởng nhóm xây dựng a Sơ đồ hoạt động đăng nhập

Hình 3.9: Sơ đồ hoạt động đăng nhập b Sơ đồ hoạt động hủy tăng ca c Sơ đồ hoạt động tạo mới công việc

Hình 3.11: Sơ đồ hoạt động tạo mới công việc d Sơ đồ hoạt động tìm kiếm

1.2.2.3 Actor quản trị viên a Sơ đồ hoạt động đăng nhập

Hình 3.13: Sơ đồ hoạt động đăng nhập b Sơ đồ hoạt động quản lý tài khoản nhân viên c Sơ đồ hoạt động tạo mới công việc

Hình 3.15: Sơ đồ hoạt động tạo mới công việc d Sơ đồ hoạt động chỉnh sửa công việc

Hình 3.16: Sơ đồ hoạt động chỉnh sửa công việc e Sơ đồ hoạt động duyệt tăng ca f Sơ đồ hoạt động thống kê

Hình 3.18: Sơ đồ hoạt động thống kê

Sơ đồ tuần tự

a Sơ đồ tuần tự chi tiết công việc

Hình 3.19: Sơ đồ tuần tự chi tiết công việc b Sơ đồ tuần tự công việc c Sơ đồ tuần tự duyệt tăng ca

Hình 3.21: Sơ đồ tuần tự duyệt tăng ca d Sơ đồ tuần tự tìm kiếm công việc e Sơ đồ tuần tự xem danh sách công việc

Hình 3.23: Sơ đồ tuần tự xem danh sách công việc

Sơ đồ mô tả chức năng hệ thống

Tạo mới công việc Ẩn công việc đã hoàn thành

TÌm kiếm theo tên nhân viên

Tạo mới đơn đăng ký tăng ca

Duyệt đơn đăn ký tăn ca

Sơ đồ ERD

Hình 3.25: Sơ đồ ERD (Entiy Relationship Diagram) cho hệ thống

Thiết lập hệ thống 3.3.1 Thiết kế cơ sở dữ liệu a Tbl_user

Id_user Mã nhân viên VarChar(255) Khóa chính account_employee Tên tài khoản VarChar(255) password_employee Mật khẩu VarChar(255) name_employee Tên nhân viên VarChar(255) address_employee Quên quán VarChar(255) cmnd_employee Số CMND Int phone_employee Số điện thoại Int gender_employee Giới tính VarChar(255) current_residence Nơi ở hiện tại VarChar(255) image Ảnh đại diện VarChar(255) date_of_birth Ngày sinh Date() wage_employee Lương VarChar(255) status Trạng thái VarChar(255)

Id_department Mã phòng ban VarChar(255) Khóa ngoại Id_position Mã chức vũ VarChar(255) Khóa ngoại

Id_role Mã quyên VarChar(255) Khóa ngoại

Bảng 3.1: Bảng nhân viên b Tbl_project

Id_project Mã công việc VarChar(255) Khóa chính name_project Tên công việc VarChar(255) place_project Vị trí làm việc VarChar(255) date_start Ngày bắt đầu Date() date_end Ngày kết thúc Date() status Trạng thái công việc VarChar(255) statusOvertime Trạng thái tăng ca VarChar(255) reason_project Nội dung tăng ca VarChar(255) Id_user Mã nhân viên VarChar(255) Khóa ngoại

Bảng 3.2: Bảng công việc c Tbl_Overtime

Thuộc tính Giải thích Kiểu dữ liêu Ghi chú

Id_overtime Mã tăng ca VarChar(255) Khóa chính

Id_user Mã nhân viên VarChar(255) Khóa ngoại

Id_project Mã công việc VarChar(255) Khóa ngoại content Nội dung tăng ca VarChar(255) date_start Ngày bắt đầu Date() date_end Ngày kết thúc Date() registration_date Ngày đăng ký Date()

Bảng 3.3: Bảng tăng ca d Tbl_Position

Id_position Mã chức vụ VarChar(255) Khóa chính name_position Tên chức vụ VarChar(255)

Bảng 3.4: Bảng chức vụ e Tbl_Phongban f Tbl_Thongbao

Thuộc tính Giải thích Kiểu dữ liệu Ghi chú id_notification Mã thông báo VarChar(255) Khóa chính id_project Mã công việc VarChar(255) Khóa ngoại id_user Mã nhân viên VarChar(255) Khóa ngoại

3.3.2 Đặc tả chức năng 3.3.2.1 Actor công nhân xây dựng a Kịch bản use-case Đăng nhập

Mô tả Công nhân xây dựng muốn thực hiện những chức năng cần phải đăng nhập vào hệ thống

Actors Công nhân xây dựng Đầu vào Tên tài khoản

1 Actor vào giao diện web 2 Actor chọn đăng nhập 3 Actor nhập Tên tài khoản 4 Actor nhâp Mật khẩu 5 Actor nhấn nút “Đăng nhập”

4a.1 Actor nhập lại usecase tiếp tục bước 5 4a.2 Actor quên mật khẩu

4a.2.1 Xin hệ thống gửi lại mật khẩu usecase tiếp tục bước 5 b Kịch bản use-case Xem thông tin công việc

Mô tả Công nhân xây dựng muốn đăng ký tăng ca

1 Actor ở vị trí trang chủ 2 Actor bấm vào đăng ký tăng ca 3 Hệ thống hiển form đăng ký 4 Actor nhấn nút “Đăng ký tăng ca”

Bảng 3.9: Kịch bản use-case Đăng ký tăng ca

3.3.2.2 Actor trưởng nhóm xây dựng a Kịch bản use-case Đăng nhập

Mô tả Trưởng nhóm xây dựng muốn thực hiện những chức năng cần phải đăng nhập vào hệ thống

Actors Trưởng nhóm xây dựng Đầu vào Tên tài khoản

1 Actor vào giao diện web 2 Actor chọn đăng nhập 3 Actor nhập Tên tài khoản 4 Actor nhâp Mật khẩu

5 Actor nhấn nút “Đăng nhập”

4a.1 Actor nhập lại usecase tiếp tục bước 5 b Kịch bản use-case Xem thông tin công việc

Mô tả Trưởng nhóm xây dựng muốn đăng ký tăng ca

1 Trưởng nhóm đăng ở vị trí trang chủ 2 Trưởng nhóm bấm vào đăng ký tăng ca 3 Hệ thống hiển form đăng ký

4 Actor nhấn nút “Đăng ký tăng ca”

Bảng 3.12: Kịch bản use-case Đăng ký tăng ca d Kịch bản use-case Tạo mới công việc

Tên usecase Tạo mới công việc

Mô tả Trưởng nhóm xây dựng muốn tạo mới công việc

Chọn mục “công việc” vào chọn tạo mới Đầu ra Công nhân xây dựng có thể thấy lịch tăng ca đã có

1 Trưởng nhóm ở vị trí trang chủ 2 Trưởng nhóm bấm vào công việc 3 Actor nhấn nút “Tạo mới”

Bảng 3.13: Kịch bản use-case Tạo mới công việc

3.3.2.3 Actor quản trị viên Tên usecase Quản trị viên

Mô tả Quản trị viên quản lý

Quản trị viên truy cập tài khoản thành công để quản lý tài khoản, nhân viên, đăng ký tăng ca và lịch biểu.

3 Lịch làm việc của toàn bộ nhân viên hoặc lịch làm việc của một nhân viên cụ thể được hiển thị, có thể thêm, sửa hoặc xóa lịch làm việc

4 Danh sách thông tin của toàn bộ nhân viên được hiển thị, có thể thêm, sửa hoặc xóa thông tin của nhân viên.ng cảnh báo người dùng vì các lỗi vi phạm

1 Quản trị viên chọn chức năng quản lý tài khoản nhân viên

2 Hệ thống hiển thị danh sách các tài khoản nhân viên

3 Quản trị viên có thể thực hiện các thao tác quản lý nhân viên như thêm, xóa, sửa thông tin tài khoản của nhân viên

4 Quản trị viên chọn chức năng quản lý số lượng và duyệt lịch đăng ký tăng ca của nhân viên

5 Hệ thống hiển thị danh sách nhân viên đăng ký tăng ca và trạng thái duyệt của từng đơn đăng ký

6 Quản trị viên có thể duyệt hoặc từ chối đơn đăng ký tăng ca của nhân viên

7 Quản trị viên chọn chức năng quản lý lịch làm việc

8 Hệ thống hiển thị lịch làm việc của toàn bộ nhân viên hoặc lịch làm việc của một nhân viên cụ thể

9 Quản trị viên có thể thêm, sửa hoặc xóa lịch làm việc của nhân viên

10 Quản trị viên chọn chức năng quản lý thông tin nhân viên

11 Hệ thống hiển thị danh sách thông tin của toàn bộ nhân viên

12 Quản trị viên có thể thêm, xóa hoặc sửa thông tin của nhân viên

Bảng 3.14: Kịch bản use-case Quản trị viên

: KẾT QUẢ TRIỂN KHAI HỆ THỐNG

Giao diện chương trình 4.1.1 Giao diện nhân viên a Giao diện trang cá nhân

Hình 4.1: Giao diện trang cá nhân b Giao diện đăng ký tăng ca c Giao diện tạo mới đơn đăng ký tăng ca

Hình 4.3: Giao diện tạo mới đơn đăng ký tăng ca d Giao diện công việc e Giao diện chi tiết công việc

Hình 4.5: Giao diện chi tiết công việc f Giao diện thông báo công việc

4.1.2 Giao diện quản trị viên a Giao diện trang chủ

Hình 4.7: Giao diện trang chủ b Giao diện quản lý nhân viên c Giao diện tạo mới nhân viên

Hình 4.9: Giao diện tạo mới nhân viên d Giao diện thông tin chung của nhân viên e Giao diện thông tin công việc của nhân viên

Hình 4.11: Giao diện thông tin công việc của nhân viên f Giao diện duyệt đơn đăng ký tăng ca g Giao diện công việc

Hình 4.13: Giao diện công việc h Giao diện tạo mới công việc i Giao diện chi tiết công việc

Hình 4.15: Giao diện chi tiết công việc j Giao diện phòng ban k Giao diện phòng ban

Hình 4.17: Giao diện tạo mới phòng ban

Hoàn thành được các chức năng cơ bản của nhân viên như tìm kiếm, đăng ký tăng ca, xem chi tiết công việc

Và một số chức năng của quản trị viên như : Quản lý công việc, duyệt đơn tăng ca, quản lý nhân viên, thống kê số liệu Áp dụng được các công nghệ của ngôn ngữ Javascript vào quá trình làm bài

Giao diện trực quan, dễ sử dụng, màu sắc phù hợp

- Một số chức năng chưa đạt được: Chấm công, quản lý lương

- Hệ thống vẫn chưa tối ưu tuyệt đối về giao diện và cơ sở dữ liệu

- Hoàn thành các chức năng chưa hoàn thiện

- Nâng cấp và hoàn thiện giao diện ở mức hoàn chỉnh nhất, đảm bảo tính năng sử dụng ổn đinh cho sản phẩm.