Báo cáo hệ thống quản lý công việc trên nền tảng web theo chuẩn đại học thủy lợi

Những năm gần đây, với sự phát triển của khoa học và công nghệ thì việc quản lý công việc tự động trong môi trường doanh nghiệp trở lên rất cấp thiết. Để giải quyết vấn đề trên, em quyết định thực hiện đồ án “Hệ thống quản lý công việc trên nền tảng web”. Nội dung đồ án cuả em gồm 3 chương: Chương 1 Cơ sở lý thuyết: Chương này trình bày sơ lược về các kiến thức, công nghệ sử dụng trong đồ án. Chương 2 Phân tích thiết kế hệ thống: Chương này gồm các mô tả, yêu cầu phi chức năng, biểu đồ usecase và biểu đồ hoạt động của hệ thống. Chương 3 Kết quả đạt được: Trình bày kết quả thu được từ đồ án.

BỘ GIÁO DỤC VÀ ĐÀO TẠO BỘ NÔNG NGHIỆP VÀ PTNT TRƯỜNG ĐẠI HỌC THỦY LỢI NGUYỄN TIẾN DŨNG HỆ THỐNG QUẢN LÝ CÔNG VIỆC TRÊN NỀN TẢNG WEB ĐỒ ÁN TỐT NGHIỆP HÀ NỘI, NĂM 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO BỘ NÔNG NGHIỆP VÀ PTNT TRƯỜNG ĐẠI HỌC THỦY LỢI NGUYỄN TIẾN DŨNG HỆ THỐNG QUẢN LÝ CƠNG VIỆC TRÊN NỀN TẢNG WEB Ngành: Cơng nghệ thơng tin Mã số: 1651060765 NGƯỜI HƯỚNG DẪN Th.S Hoàng Văn Đông HÀ NỘI, NĂM 2022 LỜI CAM ĐOAN Tác giả xin cam đoan Đồ án tốt nghiệp/ Khóa luận tốt nghiệp thân tác giả Các kết Đồ án tốt nghiệp/Khóa luận tốt nghiệp trung thực, không chép từ nguồn hình thức Việc tham khảo nguồn tài liệu (nếu có) thực hiện trích dẫn ghi nguồn tài liệu tham khảo quy định Tác giả ĐATN/KLTN Chữ ký Nguyễn Tiến Dũng LỜI CÁM ƠN Trước tiên em xin gửi lời cảm ơn chân thành tới toàn thể thầy cô trường Đại học Thủy lợi tận tình giảng dạy, truyền đạt cho em những kiến thức, kinh nghiệm quý báu suốt thời gian học tập tại trường Đặc biệt em xin gửi lời cảm ơn đến thầy Th.S Hồng Văn Đơng tận tình giúp đỡ, hướng dẫn em suốt trình thực hiện đồ án tốt nghiệp Em vô cùng biết ơn gia đình, bạn bè ln ở bên động viên, chia sẻ, giúp đỡ em trình học tập thực hiện đồ án tốt nghiệp Do kiến thức còn nhiều hạn chế thời gian thực hiện không nhiều nên khơng tránh khỏi những thiếu sót Em mong nhận góp ý từ thầy bạn bè để đồ án tốt nghiệp hoàn thiện Em xin chân thành cảm ơn! MỤC LỤC DANH MỤC CÁC HÌNH ẢNH DANH MỤC BẢNG BIỂU DANH MỤC CÁC TỪ VIẾT TẮT VÀ GIẢI THÍCH CÁC THUẬT NGỮ Từ viết tắt Ý nghĩa CSS Cascading Style Sheets HTML Hypertext Markup Language MỞ ĐẦU Những năm gần đây, với phát triển khoa học cơng nghệ việc quản lý cơng việc tự động môi trường doanh nghiệp trở lên cấp thiết Để giải vấn đề trên, em định thực hiện đồ án “Hệ thống quản lý công việc nền tảng web” Nội dung đồ án cuả em gồm chương: Chương Cơ sở lý thuyết: Chương trình bày sơ lược về kiến thức, cơng nghệ sử dụng đồ án Chương Phân tích thiết kế hệ thống: Chương gồm mô tả, yêu cầu phi chức năng, biểu đồ usecase biểu đồ hoạt động hệ thống Chương Kết đạt được: Trình bày kết thu từ đồ án CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 Tổng quan về HTML HTML (Hyper Text Markup Languge): Ngôn ngữ đánh dấu siêu văn thiết kế để tạo trang web World Wide Web Tài liệu HTML tạo từ thẻ(tag) phần tử (element) HTML Các file HTML lưu với phần mở rộng “.htm” hoặc “.html” Các tài liệu HTML cho phép nhúng đối tượng âm thanh, hình ảnh, video, css, javascript Hiện nay, phiên HTML HTML với nhiều tính so với phiên cu từ cú pháp hỗ trợ mạnh mẽ phần tử multimedia Nhìn chung HTML mạnh mẽ nhiều không chỉ về tốc độ khả tương thích cao mà còn ở khả hỗ trợ DOM (Document Object Model) 1.2 Tổng quan về CSS CSS (Cascading Style Sheets) sử dụng để định dạng bố cục, trang trí cho tài liệu HTML, XML, XHTML, SVG CSS có cấu trúc đơn giản, sử dụng từ tiếng anh để đặt tên cho thuộc tính Có thể sử dụng CSS trực tiếp tập tin HTML Thơng thường lập trình viên sẽ tách code CSS file lưu với phần mở rộng “.css” nhúng vào tài liệu HTML qua thẻ link Việc giúp code HTML mạch lạc có thể sử dụng code CSS cho dự án sau 1.3 Tổng quan về Javascript Javascript ngơn ngữ lập trình kịch hướng đối tượng, đa nền tảng sử để trang web trở nên tương tác (ví dụ: animation phức tạp, cửa sở pop-up… Ngồi còn có phiên Javascript chạy server Node.js, cho phép thêm nhiều chức vào trang web chỉ tải xuống tệp (chẳng hạn cộng tác thời gian thực giữa nhiều máy tính) 1.4 Tởng quan về Node.js Node.js môi trường thực thi code Javascript theo kiện không đồng Node.js sử dụng Javascript engine, chương trình đọc code Javascript thực hiện lệnh cách nhanh chóng Cụ thể, Node.js sử dụng Javascript V8 engine Chrome V8, trình thông dịch mã nguồn mở giúp chuyển đổi Javascrip thành mã máy – mã máy máy tính dễ dàng thực thi Tính hữu ích Google thường cập nhật giám sát JavaScript engine để sử dụng trình duyệt web Chrome Node.js điều chỉnh engine để cung cấp môi trường để bạn chạy code JavaScript khơng u cầu trình dụt web Hiện nay, thay dành riêng JavaScript để tạo tập lệnh trang web, bạn có thể sử dụng để tạo toàn ứng dụng máy chủ Khi ứng dụng JavaScript khởi chạy, tất code ứng dụng sẽ tải vào nhớ Mọi biến, hàm khối mã đều có sẵn cho ứng dụng, cho dù mã có thực thi hay khơng Tại số mã có thể không chạy lập tức? Mặc dù việc xác định gán biến tồn cục có thể cung cấp cho biến giá trị sớm Một số hàm ở dạng trình nghe kiện — hàm đối tượng chạy hàm callback tương ứng kiện có tên trùng khớp phát Các hàm nằm xung quanh nhớ phát kiện — đối tượng kích hoạt tên kiện — kích hoạt trình nghe kiện chạy hàm callback họ Bằng cách này, Node.js có thể chạy ứng dụng cách đặc biệt nhanh chóng hiệu Trong nền tảng khác có thể cần phải biên dịch lại hoặc chạy tất code chúng mỗi yêu cầu chạy lệnh định thực hiện, Node.js chỉ tải code JavaScript lần chỉ chạy hàm hàm callback tương ứng kích hoạt để làm bởi kiện JavaScript ngôn ngữ hỗ trợ phát triển theo hướng kiện khơng u cầu Node.js tận dụng lợi kiến trúc cách thúc đẩy việc sử dụng kiện cách để máy chủ thực thi hầu hết tác vụ ứng dụng, sử dụng eventloop Node.js [1] 1.5 Tổng quan về React JS Reactjs thư viện Javascript mã nguồn mở hỗ trợ xây dựng thành phần giao diện nhanh gọn tiện lợi Bình thường lập trình viên sẽ nhúng javascript vào code HTML thơng qua attribute AngularJS với Reactjs làm việc thư viện cho phép nhúng HTML vào javascript thông qua JSX Qua bạn có thể dễ dàng lồng đoạn HTML vào JSX làm cho component dễ hiểu dễ sử dụng Trong Reactjs thường dùng javascript để thiết kế bố cục cho trang web, nhược điểm cấu trúc khó Thay vào sử dụng JSX nhúng đoạn HTML vào javascript, ta thấy cú pháp dễ hiểu JSX cung có thể tối ưu code biên soạn Vừa dễ cho người lập trình mà vừa tiện cho việc biên dịch 1.6 Tổng quan về Express JS Expressjs framework xây dựng nền tảng Nodejs Nó cung cấp tính mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ method HTTP midleware tạo API vô cùng mạnh mẽ dễ sử dụng Tổng hợp số chức Expressjs sau: • Thiết lập lớp trung gian để trả về HTTP request • Define router cho phép sử dụng với hành động khác dựa phương thức HTTP URL • Cho phép trả về trang HTML dựa vào tham số • 1.7 Tởng quan về MongoDB MongoDB (chữ mongo lấy từ từ humongous tiếng Anh), NoSQL database Khác với MySQL hay loại SQL databse khác chạy theo mơ hình database – table – row với số dòng – cột định với schema phức tạp, phải sử dụng nhiều join truy vấn MongoDB chạy theo mơ hình database – collection – document, thay mơ hình sở dữ liệu dùng table truyền thống document với định dạng JSON với cấu trúc linh hoạt (MongoDB gọi BSON) Một số khái niệm MongoDB: • Database: Database tập chứa collection MongoDB Mỡi database sẽ có tập file riêng file system hệ thống Một MongoDB server thường chứa nhiều database • Collection: Giống Table MySQL, Collection tập chứa MongoDB Document Một điểm khác so với hệ quản trị sở dữ liệu quan hệ khác Collection khơng bắt buộc schema cố định Các document cùng collection có thể có nhiều field khác Nhưng thường document collection sẽ có số field tương đồng có liên quan với • Document: tập dữ liệu theo dạng key-value, mỗi key sẽ tương ứng với value (giống với kiểu dữ liệu JSON) Các document linh hoạt về schema, nói ở trên, document cùng collection không thiết phải có trường hoặc cấu trúc giống Dữ liệu cùng trường cung có thể có nhiều kiểu dữ liệu khác Ưu điểm: Dữ liệu lưu cách mềm dẻo, khơng có tính ràng buộc nên hiệu suất tốt dễ dàng mở rộng (scale) Dữ liệu ghi đệm lên RAM nên tốc độ truy vấn cao Nhược điểm: Khơng ràng buộc, tồn vẹn nên không sử dụng ứng dụng đòi hỏi tính tồn vẹn, bảo mật cao ngân hàng Dữ liệu caching RAM nên đòi hỏi dung lượng RAM lớn 10 2.6.4 User secret Bảng 2.23: User secret STT Thuộc tính Kiểu Ràng buộc Ý nghĩa _id ObjectId Primary key Id admin user_id String Not null Id user value String Mật 2.6.5 User session Bảng 2.24: User session STT Thuộc tính Kiểu Ràng buộc Ý nghĩa _id String Primary key token user_id String Not null Id user 37 2.6.6 User job Bảng 2.25: User job STT Thuộc tính Kiểu Ràng buộc Ý nghĩa _id String Primary key Id user_id String Not null Id user job_id String Not null Id job status String Trạng thái ctime Timestamp Thời gian tạo mtime Timestamp Thời gian cập nhật 2.6.7 User module Bảng 2.26: User module file STT Thuộc tính Kiểu Ràng buộc Ý nghĩa _id String Primary key Id user_id String Not null Id user job_id String Not null Id job module_id String Not null Id module status String Trạng thái ctime Timestamp Thời gian tạo 38 2.6.8 User module file Bảng 2.37: User module file STT Thuộc tính Kiểu Ràng buộc Ý nghĩa _id ObjectId Primary key Id user_id String Not null Id user job_id String Not null Id job module_id String Not null Id module file_name String Tên file upload ctime Timestamp Thời gian tạo 39 CHƯƠNG KẾT QUẢ ĐẠT ĐƯỢC 3.1 Giao diện đăng nhập Hình 3.5.1: Giao diện đăng nhập Hình 3.1.2: Giao diện sau login admin 40 Hình 3.1.3: Giao diện sau login staff 3.2 Giao diện Quản lý nhân viên Hình 3.6.1: Giao diện quản lý nhân viên 41 Hình 3.2.2: Giao diện lọc vai trò nhân viên quản lý nhân viên Hình 3.2.3: Giao diện sửa thông tin nhân viên quản lý nhân viên Hình 3.2.4: Giao diện thêm thông tin nhân viên quản lý nhân viên Hình 3.2.5: Pop Up thêm thành công nhân viên 42 3.3 Giao diện đổi mật khẩu Hình 3.3: Giao diện đổi mật khẩu 43 3.4 Giao diện quản lý công việc Hình 3.4.1: Giao diện quản lý công việc Hình 3.4.2: Giao diện thêm công việc Hình 3.4.3: Giao diện sửa công việc 44 3.5 : Giao diện thêm module cho từng job Hình 3.5.1: Giao diện thêm module Hình 3.5.2: Giao diện lọc module Hình 3.5.3: Giao diện sửa module Hình 3.5.4: Pop up xóa module 45 3.6 Giao diện chi tiết một công việc Hình 3.6: Giao diện chi tiết job 3.7 Giao diện danh sách công việc Hình 3.7: Giao diện danh sách công việc 46 3.8 Giao diện công việc của Hình 3.8: Giao diện công việc 47 3.9 Giao diện module của Hình 3.9: Giao diện module 3.10 Giao diện báo cáo Hình 3.70: Giao diện báo cáo 48 3.11 Source code https://github.com/ntDung-dev/workcontrol KẾT LUẬN Trong trình thực hiện đồ án tốt nghiệp em cố gắng tìm hiểu về nghiệp vụ, quy trình quản lý hệ thống công việc nền tảng web để xây dựng cài đặt chương trình thời gian có hạn nên chưa thể giải hoàn toàn vấn đề Em mong nhận thông cảm thầy cô! Kết đạt sau thực hiện đồ án: • Hiểu về lập trình bất đồng với ngơn ngữ lập trình Javascript • Biết cách tạo web động cung cách tổ chức dữ liệu • Hiểu về React JS library nền tảng Node.js • Hiểu về ExpressJs framework nền tảng Node.js • Nắm vững kiến thức về HTML, CSS, Javascript, reactstrap,… • Xây dựng thành cơng “Hệ thống quản lý công việc nền tảng web” Hạn chế: • Chưa có tính thống kê cho admin, manager • Chưa có tính qn mật Hướng phát triển: • Hồn thiện chức còn hạn chế hệ thống • Thêm tính đánh giá công việc từ Admin, Manager TÀI LIỆU THAM KHẢO [1] J.Wexler, Get programming with Node.js, 2019 [2] "Mongoose.js," [Online] Available: https://mongoosejs.com/ [3] "MongoDB Documentation," [Online] Available: https://docs.mongodb.com/manual 49 [4] "Documentation Node.js," [Online] Available: https://nodejs.org/en/docs/ [5] https://vi.reactjs.org/tutorial/tutorial.html [6] "MDN Web docs," [Online] Available: https://developer.mozilla.org/en-US/ [7] S Đặng, "F8 - Cộng đồng học lập trình," [Online] Available: https://fullstack.edu.vn/ [8] https://reactstrap.github.io/?path=/story/home-installation page 50 ... Nhân viên có thể nhận job 11 Quản lý công việc nhân viên Quản lý module 12 Báo cáo theo file doc 13 Đọc báo cáo Nhân viên có thể báo cáo file upload lên hệ thống Giảng viên có thể thêm,... GIÁO DỤC VÀ ĐÀO TẠO BỘ NÔNG NGHIỆP VÀ PTNT TRƯỜNG ĐẠI HỌC THỦY LỢI NGUYỄN TIẾN DŨNG HỆ THỐNG QUẢN LÝ CÔNG VIỆC TRÊN NỀN TẢNG WEB Ngành: Công nghệ thông tin Mã số: 1651060765 NGƯỜI HƯỚNG... cơng nghệ việc quản lý cơng việc tự động môi trường doanh nghiệp trở lên cấp thiết Để giải vấn đề trên, em định thực hiện đồ án “Hệ thống quản lý công việc nền tảng web? ?? Nội dung đồ