GIỚI THIỆU ĐỀ TÀI
Đặt vấn đề
Để doanh nghiệp phát triển toàn diện, bên cạnh việc nâng cao chất lượng sản phẩm và nguồn nhân lực, truyền thông đóng vai trò quan trọng trong việc quảng bá và giới thiệu hình ảnh công ty đến người tiêu dùng.
Việc quảng bá thông qua các bài viết chia sẻ kiến thức chuyên môn và các diễn đàn thông tin không chỉ mang lại giá trị thực tiễn mà còn thu hút sự chú ý của người đọc Những hình thức này thường tạo ra sự kết nối sâu sắc hơn với đối tượng mục tiêu, giúp xây dựng uy tín và tăng cường sự tin tưởng từ cộng đồng.
Hiện nay, để thu hút khách hàng đến với diễn đàn và trang web, doanh nghiệp cần không chỉ cung cấp kiến thức mới mẻ và thông tin thú vị mà còn phải có một giao diện đẹp và hiệu ứng mượt mà Nhiều website, blog và diễn đàn đã được tạo ra nhằm phục vụ độc giả, giúp họ tìm kiếm kiến thức và giải quyết vấn đề Tuy nhiên, với lượng dữ liệu lớn, nhiều trang web gặp khó khăn trong việc tải trang nhanh chóng, dẫn đến thời gian chờ đợi của người dùng tăng lên khi truy cập và thao tác.
Trong báo cáo này, tôi đề xuất thiết kế và xây dựng một website quản lý doanh nghiệp dưới dạng ứng dụng một trang (single page application) Website sẽ cung cấp các chức năng cơ bản cho người dùng, bao gồm khả năng xem bài viết, đọc và bình luận Đồng thời, độc giả cũng có thể tìm kiếm, bình luận và tham gia vào các cuộc trò chuyện trên nền tảng này.
Mục tiêu và phạm vi dự án
Phần mềm quản lý doanh nghiệp ECS được thiết kế nhằm hỗ trợ các doanh nghiệp trong việc quản lý người dùng, dự án, bài viết và chấm công Giao diện người dùng của website cho phép người dùng tìm kiếm, đọc và bình luận trên các bài viết, cũng như tham gia vào các cuộc trò chuyện.
Hệ thống quản lý doanh nghiệp mà chúng tôi xây dựng là một ứng dụng web một trang (single page application), cung cấp các chức năng cho khách vãng lai như tham quan website, đọc bài viết và bình luận Đồng thời, hệ thống cũng phục vụ cho các thành viên nội bộ với những quyền truy cập khác nhau, bao gồm cả quản trị viên.
➢ Dành cho quản trị viên:
▪ Quản lý bổ sung công
➢ Dành cho nhân viên nội bô:
➢ Dành cho khách vãng lai:
Định hướng giải pháp
Hệ thống quản lý doanh nghiệp ECS xây dựng là một ứng dụng một trang (single page application) cho giao diện người dùng, lựa chọn này mang lại khả năng xử lý và tốc độ vượt trội Thay vì tải toàn bộ trang mới, các tài nguyên chỉ được tải một lần và thêm vào khi cần thiết, giúp tối ưu hóa hiệu suất Đặc biệt, trong bối cảnh dữ liệu thay đổi liên tục như thời gian khuyến mại và số lượng sách, single page application đảm bảo tốc độ tải dữ liệu nhanh chóng, cung cấp thông tin thời gian thực cho người dùng Đóng góp chính của hệ thống là tạo ra một website quản lý doanh nghiệp hiệu quả, cho phép quản lý các bài post chia sẻ kiến thức với lượng dữ liệu lớn, đồng thời duy trì tính ổn định và nâng cao trải nghiệm người dùng.
Bố cục bài báo cáo
Phần còn lại của báo cáo gồm 3 chương:
Trong Chương 2, em khảo sát hiện trạng từ ba nguồn chính: người dùng/khách hàng, các hệ thống đã có và các sản phẩm tương tự, từ đó phân tích, đánh giá ưu nhược điểm của sản phẩm mình và thực hiện phân tích sâu về yêu cầu chức năng cho từng actor thông qua use case Em cũng nêu rõ các yêu cầu phi chức năng như hiệu năng, độ tin cậy, tính dễ dùng, tính dễ bảo trì và các yêu cầu kỹ thuật liên quan đến CSDL và công nghệ sử dụng Chương 3 sẽ trình bày việc lựa chọn công nghệ phù hợp sau khi phân tích các yêu cầu chức năng và phi chức năng, bao gồm việc xây dựng website theo mô hình client-server, trong đó client và server giao tiếp qua giao thức Http/Https Phía client, em sử dụng framework JavaScript Taiwild và Livewire để phát triển single page application (SPA), trong khi phía server sử dụng Laravel, một framework mạnh mẽ của PHP hỗ trợ bảo mật và truy xuất dữ liệu từ database Ngoài ra, em sẽ mô tả chi tiết về các công nghệ khác như ứng dụng web service và các nền tảng ứng dụng trong Chương 3.
Chương 4 tập trung vào việc thiết kế hệ thống dựa trên phân tích nghiệp vụ từ chương 2 và công nghệ đã chọn ở chương 3 Trong chương này, em sẽ thực hiện thiết kế kiến trúc phần mềm, giao diện chi tiết, lớp và cơ sở dữ liệu, sau đó xây dựng ứng dụng để thể hiện kết quả và minh họa các chức năng chính Cuối cùng, em sẽ tiến hành kiểm thử cho hai chức năng quan trọng nhất.
Kết luận, Em sẽ kết luận về sản phẩm đã thực hiện, và đưa ra hướng phát triển dựa trên tiêu chí trải nghiệm người dùng
Sau đây, em sẽ trình bày chương 2: Khảo sát và Phân tích thiết kế HT bài toán trong xây dựng hệ thống TT quản lý doanh nghiệp ECS.
KHẢO SÁT VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Khảo sát hệ thống
Đề tài này không chỉ có giá trị thực tiễn mà còn hỗ trợ quá trình học tập, giúp người thực hiện củng cố kiến thức môn học và mở rộng hiểu biết về nghiệp vụ quản lý trong doanh nghiệp Qua đó, nó góp phần nâng cao trình độ chuyên môn của từng cá nhân.
Mục tiêu chính của đề tài môn học này là rèn luyện kỹ năng xây dựng hệ thống quản lý cho doanh nghiệp, bao gồm quản lý công số, dự án, chấm công và nhân sự Ngoài ra, sinh viên còn được thực hành kiến thức từ các môn học như phân tích thiết kế hệ thống, phân tích thiết kế hướng đối tượng, lập trình Laravel, MySQL và Taiwild.
Chúng ta xây dựng hệ thống mới nhằm mục đích thay thế hệ thống cũ đã có phần không phù hợp với nhu cầu của người sử dụng
Việc khảo sát nhằm để:
− Tiếp cận với nghiệp vụ chuyên môn, môi trường hoạt động của hệ thống
− Tìm hiểu chức năng, nhiệm vụ và cùng cách hoạt động của hệ thống
− Chỉ ra những chỗ hợp lý của hệ thống, cần được kế thừa và các chỗ bất hợp lý của hệ thống, cần nghiên cứu khắc phục
2.1.3 Nội dung khảo sát và đánh giá hiện trạng
− Tìm hiểu cơ cấu tổ chức và nguyên tắc hoạt động của hệ thống quản lý
− Nghiên cứu công việc, nhiệm vụ, trách nhiệm của từng đối tượng trong hệ thống, quyền hạn của từng đối tượng trong hệ thống
− Thu thập và nghiên cứu các phương thức hoạt động của công ty
− Thu thập các đòi hỏi về thông tin, các ý kiến đánh giá, phàn nàn về hiện trạng, các dự đoán, kế hoạch và nguyện vọng trong tương lai
❖ Mô tả yêu cầu của bài toán
Yêu cầu xây dựng một hệ thống quản lý việc của doanh nghiệp
Nhân viên có thể chấm công tại nhà hàng ngày và thực hiện chấm công checkout sau 17h30 Nếu quên chấm công, hãy thu thập bằng chứng và bổ sung công, sau đó chọn người để duyệt.
- Nhân viên cũng có thể viết blog, chia sẻ kiến thức, viết bài post để mọi người có thể cùng thảo luận
Admin có khả năng theo dõi tình hình doanh nghiệp, bao gồm số lượng và trạng thái của nhân viên, xác định xem họ có đang rảnh rỗi hay tham gia dự án nào Ngoài ra, chỉ khi được chỉ định làm người phê duyệt danh sách bổ sung, admin mới có quyền duyệt các yêu cầu này.
Admin sẽ tạo dự án để quản lý danh sách các dự án, đồng thời theo dõi tình hình nhân sự hiện tại, xác định ai đang rảnh rỗi và ai đang tham gia vào các dự án khác.
❖ Mục tiêu của hệ thống
Để nâng cao chất lượng quản lý nhân viên, doanh nghiệp cần đảm bảo quyền lợi của họ một cách hiệu quả và công bằng.
❖ Đánh giá hiện trạng
Sau khi khảo sát và tìm hiểu về hệ thống quản lý hiện tại thấy được những mặt ưu và nhược điểm như sau:
- Thiếu phương tiện quản lý
- Với chức năng hiện tai thì không làm việc được tại nhà
- Khối lượng giấy tờ sử dụng và lưu trữ nhiều
- Thông tin quản lý không đa dạng
- Tốn nhiều thời gian cho công tác quản lý, tổng hợp báo cáo thống kê
- Khó khăn trong quản lý thuốc, lưu trữ, tìm kiếm
- Khó khăn trong những quy trình báo cáo, thống kê…
- Tốn nhiều nhân lực, sức người
Trong bối cảnh dịch COVID-19 và yêu cầu giãn cách xã hội từ nhà nước, doanh nghiệp sẽ đối mặt với nhiều thách thức trong quản lý nhân sự và quyền lợi của nhân viên Điều này đặt ra bài toán cần thiết cho doanh nghiệp là làm thế nào để vừa đảm bảo tuân thủ quy định giãn cách xã hội, vừa duy trì hiệu quả làm việc từ xa.
Việc xây dựng một hệ thống để quản lý doanh nghiệp, chấm công là vô cùng cần thiết và cấp bách
Nhân viên có thể trực tiếp truy cập vào hệ thống để xem danh sách chấm công hàng ngày của mình, đồng thời có khả năng tạo bổ sung công và lựa chọn người duyệt.
Sau khi tạo đơn bổ sung công, nhân viên có quyền thêm, sửa hoặc xóa đơn đó Sau khi hoàn tất, nhân viên cần chờ duyệt từ người có thẩm quyền Để tăng khả năng được phê duyệt nhanh chóng, hãy để lại lý do thuyết phục cho người duyệt xem xét.
Là người có quyền cao nhất sẽ là đọc, kiểm tra và duyệt hoặc hủy bỏ những danh sách bổ sung công của người gửi
Admin có khả năng tạo dự án mới và phân loại chúng theo trạng thái như chưa triển khai, đã xong và đang triển khai Bên cạnh đó, Admin có thể dễ dàng tìm kiếm danh sách các dự án cũ và mới nhất dựa trên trạng thái, đơn vị hoặc tên dự án.
Là tất cả mọi người đều có thể truy cập để đọc, tìm kiếm các thông thông tin được chia sẻ bởi các Thành viên nội bộ
Ngoài ra khách đến thăm còn các thể comment, thảo luận 1 về đề với các thành viên nội
Hình 2.1: Mô hình các tác
Tổng quan chức năng
Hình 2.2: Biểu đồ use case tổng quát
2.2.2 Biểu đồ use case phân rã chức năng “Timesheet Management”
Hình 2.3: Biểu đồ use case phân rã Timesheet Management
Biểu đồ use case phân rã Timesheet Management (Hình 2.3) mô tả quy trình làm việc của thành viên nội bộ Mỗi ngày, họ sẽ ấn nút Check In để ghi nhận giờ vào và bấm Check Out khi kết thúc công việc để cập nhật giờ ra Ngoài ra, hệ thống cho phép tìm kiếm thông tin từ các tháng và năm trước thông qua các trường start date và end date.
2.2.3 Biểu đồ use case phân rã chức năng “Project Management”
Hình 2.4: Biểu đồ use case phân rã Project Management
Figure 2.4 illustrates the use case diagram for Project Management When a new project is initiated, the Admin manages it by adding, editing, and deleting projects, as well as searching for projects The search functionality allows for filtering by multiple criteria, including project name, project type, project status, and project department.
Admin có khả năng xem biểu đồ thống kê của nhân viên, giúp xác định ai đang rảnh rỗi và ai đang tham gia vào các dự án.
2.2.4 Biểu đồ use case phân rã chức năng “User Management”
Hình 2.5: Biểu đồ use case phân rã User Management
Biểu đồ use case phân rã User Management (Hình 2.5) mô tả quy trình quản lý nhân viên của Admin khi có nhân viên mới Admin có thể thực hiện các thao tác như thêm, sửa, xóa dự án và tìm kiếm nhân viên theo nhiều tiêu chí khác nhau, bao gồm tên, ID, phòng ban và vị trí.
Ngoài ra Admin còn xem được thông tin của những nhân đã rời đi
2.2.5 Biểu đồ use case phân rã chức năng “Post Management”
Hình 2.6: Biểu đồ use case phân rã Post Management
Biểu đồ use case phân rã Post Management (Hình 2.6) cho thấy rằng nhân viên nội bộ có khả năng quản lý bài viết của mình thông qua các chức năng như thêm, sửa, xóa bài post, và tìm kiếm bài post theo các tiêu chí như tiêu đề, danh mục và trạng thái.
Admin có khả năng quản lý tất cả các bài đăng ở chế độ công khai của nhân viên, từ đó kiểm soát và lựa chọn những bài viết phù hợp.
2.2.6 Biểu đồ use case phân rã chức năng “Add Timesheet Management”
Hình 2.7: Biểu đồ use case phân rã Add Timesheet Management
Biểu đồ use case phân rã quản lý bảng chấm công cho thấy nhân viên nội bộ có thể thực hiện các thao tác như thêm, sửa, xóa và xem chi tiết đơn bổ sung khi quên chấm công Ngoài ra, họ cũng có thể tìm kiếm đơn bổ sung theo các trường ngày bắt đầu và ngày kết thúc.
2.2.7 Biểu đồ use case phân rã chức năng “Add Timesheet Approval Management”
Hình 2.8: Biểu đồ use case phân rã Add Timesheet Approval Management
Hình 2.8 là Biểu đồ use case phân rã Add Timesheet Approval Management
Admin có quyền duyệt hoặc từ chối các đơn bổ sung từ nhân viên nội bộ Để tiện lợi, Admin có thể chọn Approval All hoặc Reject All Ngoài ra, có thể tìm kiếm các đơn duyệt thông qua các trường: ID/tên, ngày bắt đầu và ngày kết thúc.
2.2.8 Biểu đồ use case phân rã chức năng “Comment Post”
Hình 2.9: Biểu đồ use case phân rã Comment post
Biểu đồ use case phân rã Comment post cho thấy khách vãng lai có thể truy cập bài viết thông qua danh sách bài viết, bài viết mới và bài viết phổ biến để xem chi tiết, cũng như thể hiện sự thích hoặc bình luận Đồng thời, nhân viên nội bộ cũng có khả năng tương tác với khách hàng trong các bài viết để thảo luận về các vấn đề liên quan.
Đặc tả chức năng
2.3.1 Đặc tả yêu cầu chức năng đăng nhập 2.3.1.1 Use case chức năng đăng nhập a Mô tả use case
Mỗi cá nhân cần có tài khoản riêng để đăng nhập, từ đó thực hiện việc check in và check out để ghi nhận thời gian làm việc trong ngày Nếu quên chấm công, người dùng có thể bổ sung thông tin hoặc dễ dàng tìm kiếm danh sách bổ sung công và các dự án theo lựa chọn tìm kiếm.
Admin và nhân viên nội bộ c Tiền điều kiện
Không d Luồng sự kiện chính
Khi người dùng nhập tài khoản và mật khẩu sẽ có 2 trường hợp xảy ra
• Trường hợp đầu tiên, người dùng nhập sai tài khoản mật khẩu hoặc nhập mật khẩu không đủ 8 kí tự, đăng nhập thất bại
• Trường hợp thứ 2 là người dùng nhập đúng tài khoản, mật khẩu đăng nhập thành công, hệ thống chuyển qua trang Home e Luồng sự kiện phụ
• Người dùng bỏ trống tài khoản hoặc mật khẩu, hệ thống sẽ yêu cầu nhập đầy đủ
Người dùng nhập tài khoản và mật khẩu đúng định dạng, nhưng nếu tài khoản chưa tồn tại, hệ thống sẽ hiển thị thông báo: “Sai tài khoản hoặc tên đăng nhập”.
Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
Email String Có Địa chỉ email hợp lệ tung@gmail.com
Password String Có Đúng mật khẩu được lưu trong db
Bảng 2.1: Bảng dữ liệu đầu vào của use case “Sign up”
2.3.1.2 Biểu đồ hoạt động của chức năng đăng nhập
2.3.2 Đặc tả yêu cầu chức năng Check in 2.3.2.1 Use case chức năng Check in a Mô tả use case
Mỗi ngày vào lúc 0h, một batch sẽ được thực hiện để tạo ra một bản ghi mới cho ngày hiện tại Nhân viên chỉ được thực hiện check-in một lần duy nhất trong quá trình làm việc.
➢ Nếu Checkin trước 8h thì Checkin đều là 8h, còn sau 8h sẽ bằng số giờ lúc đó, tức:
➢ Nếu checkin sau 17h30, công sẽ không được tính b Tác nhân
Nhân viên nội bộ c Tiền điều kiện
Người dùng đăng nhập thành công với vai trò member d Luồng sự kiện chính
• Người dùng truy cập vào vào hệ thống sau khi qua bước đăng nhập
• Disabled check in đồng thời hiển thị thời gian vừa chấm công e Luồng sự kiện phụ
• Người dùng quên bấm nút “Check in”
• Người dùng chưa ấn Check in mà đã Ấn vào button “Check out”
• Người dùng click liên tục vào button Check in f Dữ liệu đầu vào
Button “Check in” g Dữ liệu đầu ra
List Timesheet, cột Check in đã được cập nhật giờ hiện tại
2.3.2.2 Biểu đồ hoạt động của chức năng Check in
2.3.3 Đặc tả yêu cầu chức năng Check out 2.3.3.1 Use case chức năng Check out a Mô tả use case
Mỗi ngày vào lúc 0h, hệ thống sẽ tự động tạo một bản ghi mới cho ngày hiện tại Nhân viên cần thực hiện việc check-in khi bắt đầu làm việc và check-out khi kết thúc Để tính công, cả hai thao tác check-in và check-out đều phải được thực hiện; nếu thiếu một trong hai, tổng công sẽ không được tính.
Tính công = Tổng sáng + Tổng chiều (max = 8 tiếng)
➢ Nếu Checkin trước 8h thì Checkin đều là 8h, còn sau 8h sẽ bằng số giờ lúc đó, tức:
Tổng sáng = Checkout – checkin (max = 4 tiếng)
➢ Nếu checkout sau 12h Tổng sáng = 12h – checkin (max = 4 tiếng)
➢ Nếu checkout sau 13h30 Tổng chiều = checkout – 13h30 (max = 4 tiếng)
❖ Nếu Checkin sau 12h (đồng nghĩa checkout ko thể nào trước 12h, và chỉ tính tổng chiều )
Tổng chiều = checkout – 13h30 (max = 4 tiếng)
Tổng chiều = 17h30 – checkin (max = 4 tiếng) b Tác nhân
Nhân viên nội bộ c Tiền điều kiện
Người dùng đăng nhập thành công với vai trò member d Luồng sự kiện chính
• Người dùng truy cập vào vào hệ thống sau khi qua bước đăng nhập
• Lưu thông tin check out đồng thời hiển thị toàn bộ thời gian trong ngày làm việc hôm đó e Luồng sự kiện phụ
• Người dùng quên bấm nút “Check out”
• Người dùng chưa ấn Check in mà đã Ấn vào button “Check out”
• Người dùng click liên tục vào button Check out f Dữ liệu đầu vào
Button “Check out” g Dữ liệu đầu ra
The Timesheet has been updated to reflect the current time in the Check out column, along with updates to the Checkin pay, Checkout pay, Lunch break time, Actual working time, Paid working time, and Notes columns.
2.3.3.2 Biểu đồ hoạt động của chức năng Check out
Hình 2.12: Biểu đồ hoạt động chức năng Check out
2.3.4 Đặc tả yêu cầu chức năng Add Timesheet Management 2.3.4.1 Use case chức năng Add Timesheet Management a Mô tả use case
Khi quên chấm công, việc bổ sung là rất cần thiết Hãy chọn ngày cần bổ sung và chuẩn bị bằng chứng để gửi cho người kiểm duyệt danh sách bổ sung công.
Nhân viên nội bộ c Tiền điều kiện
Người dùng đăng nhập thành công với vai trò member d Luồng sự kiện chính
• Người dùng truy cập vào vào hệ thống sau khi qua bước đăng nhập
• Lưu thông tin vào bảng Add timesheet đồng thời chuyển trạng thái là chờ duyệt, Và di chuyển đến màn “Danh sách bổ sung công” e Luồng sự kiện phụ
• Người dùng nhập sai định dạng file ảnh
• Người dùng bổ trống file ảnh
• Người dùng chưa điền lý do
• Người dùng click liên tục vào button Save f dữ liệu đầu vào
Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
Additional date Date Có Date phải chọn nhỏ hơn hoặc bằng ngày hiện tại
Admin String Có Sẽ mặc định nếu
Check in request Date Có Chọn Giờ muốn duyệt
Checkout request Date Có Chọn Giờ muốn duyệt
Evidence Image Có Chọn ảnh dưới dạng: jpg,png,jpeg
Reason String Có Không được bổ trống
Bảng 2.2: Bảng dữ liệu đầu vào của use case “Add timesheet” g Dữ liệu đầu ra Đi đến list add timesheet đã tạo
2.3.4.2 Biểu đồ hoạt động của chức năng Add Timesheet Management
Hình 2.13: Biểu đồ hoạt động chức năng Bổ sung công
2.3.5 Đặc tả yêu cầu chức năng Add Timesheet Approval Management 2.3.5.1 Use case chức năng Add Timesheet Approval Management a Mô tả use case
Admin mới có quyền duyệt danh sách do người dùng tạo Trước khi quyết định duyệt hoặc hủy duyệt, Admin cần xem xét kỹ lý do và kiểm tra bằng chứng một cách cẩn thận.
Người dùng đăng nhập thành công với vai trò Admin và phải đơn yêu cầu bổ sung từ các nhân viên nội bộ d Luồng sự kiện chính
• Admin truy cập vào vào hệ thống sau khi qua bước đăng nhập
• Chọn menu “Additional Timesheet Approval”
• Chọn button “Approved” để duyệt và chuyển trạng thái đã duyệt hoặc Rejected để hủy và chuyển trạng thái đã hủy e Luồng sự kiện phụ
• Admin click vào check All Rejected
• Admin click vào check All Approved f dữ liệu đầu vào
Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
Comment: String Không Không được nhập quá dài
Bảng 2.3 trình bày dữ liệu đầu vào cho use case “Thêm phê duyệt bảng chấm công” Sau khi xử lý, đơn phê duyệt sẽ bị xóa khỏi danh sách phê duyệt, đồng thời trạng thái sẽ được cập nhật thành Approved hoặc Reject trong danh sách thêm bảng chấm công của nhân viên đã tạo đơn.
2.3.5.2 Biểu đồ hoạt động của chức năng Add Timesheet Approval Management
2.3.6 Đặc tả yêu cầu chức năng Project Management 2.3.6.1 Use case chức năng Project Management a Mô tả use case
Admin có quyền tạo dự án mới và thêm nhiều thành viên vào từng dự án với các vai trò khác nhau Các thông tin quan trọng cần ghi nhận bao gồm: Tên dự án, Khách hàng, Kiểu dự án, Ngày bắt đầu, Ngày kết thúc và Trạng thái dự án.
Người dùng đăng nhập thành công với vai trò Admin d Luồng sự kiện chính
• Admin truy cập vào vào hệ thống sau khi qua bước đăng nhập
• Nhập thông tin cần thiết và Chọn button “Save infomation” để lưu thông tin dự án, sau đó chuyển về màn “Project list” e Luồng sự kiện phụ
• Admin nhập thiếu thông tin
• Admin Không nhập thông tin
• Admin click liên tục vào button “Save infomation” f dữ liệu đầu vào
Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
Project Name String Có Không được trống Isol
Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
Customer String Có Sẽ mặc định nếu không chọn
Project Type String Có Sẽ mặc định nếu không chọn
Interger Có Không được trống và số nguyên từ 1-
Department String Có Sẽ mặc định nếu
Start Date Date Có Không được bổ trống
End Date Date Có Không trống và lớn hơn start date
Status String Có Sẽ mặc định nếu
Description String Có Không được trống Dự án maintain
Staff String Có Không được trống và không được trùng
Location String Có Sẽ mặc định nếu không chọn
Date Có Không trống và lớn hơn start date, nhỏ hơn end date
Date Có Không trống và lớn hơn start date, nhỏ hơn end date và lớn hơn start date(staff create)
Effort (%) Interger Có Không trống và số 100 g Dữ liệu đầu ra Đi đến màn List project và hiện ra các danh sách được thêm mới or cập nhật
2.3.6.2 Biểu đồ hoạt động của chức năng Project Management
Hình 2.15: Biểu đồ hoạt động chức năng Quản lý dự án
2.3.7 Đặc tả yêu cầu chức năng User Management 2.3.7.1 Use case chức năng User Management a Mô tả use case
Admin sẽ nắm bắt được tình hình nhân sự của các nhân trong công ty b Tác nhân
Người dùng đăng nhập thành công với vai trò Admin d Luồng sự kiện chính
• User truy cập vào vào hệ thống sau khi qua bước đăng nhập
• Nhập thông tin cần thiết và Chọn button “User Create” để thêm mới nhân viên mới
• Nhập thông tin cần thiết và Chọn button “Save infomation” để lưu thông tin dự án, sau đó chuyển về màn “User list” e Luồng sự kiện phụ
• Admin nhập thiếu thông tin
• Admin Không nhập thông tin
• Admin click liên tục vào button “Save infomation” f dữ liệu đầu vào
Trường dữ liệu Bắt Điều kiện hợp lệ
Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
Email String Có Không được trống và kiểu mail tung@gmail.com
Name String Có Không được trống Tùng
Date of birth Date Có Không được trống 2000-07-07
Home town String Không Không quá 255 kí tự Đan Phượng, Hà
Nội Current residence String Không Không quá 255 kí tự Đan Phượng
University String Không Không quá 255 kí tự Đại Học Điện
Working form String Có Sẽ mặc định nếu không chọn
Time start Date Có Không được trống 2021-11-09
Member company String Có Sẽ mặc định nếu không chọn
Position String Có Sẽ mặc định nếu không chọn
Division Date Có Sẽ mặc định nếu không chọn
Location Date Có Sẽ mặc định nếu không chọn
Personal photo Image Có Không được trống, và ảnh dạng: png, jpg, jpeg
Gender String Có Sẽ mặc định nếu không chọn
Nationality String Không Không quá 255 kí tự Việt Nam
Ethnic String Không Không quá 255 kí tự Kinh
Phone number Interger Có Được nhập 10 số và format bắt đầu là số:
Interger Không Được nhập 10 số và format bắt đầu là số:
CMND/Passport Interger Có Không quá 255 kí tự 568995572345
Date Range Date Không Không 2021-06-09
Place of issue String Không Không quá 255 kí tự Hà Nội
Visa (if possible) String Không Không quá 255 kí tự
Duration Visa String Không Không quá 255 kí tự
Link Facebook String Không Không quá 255 kí tự
Bảng 2.5: Bảng dữ liệu đầu vào của use case “User Management” g Dữ liệu đầu ra Đi đến màn List User
2.3.7.2 Biểu đồ hoạt động của chức năng User Management
Hình 2.16: Biểu đồ hoạt động chức năng User Management
2.3.8 Đặc tả yêu cầu chức năng Post Management 2.3.8.1 Use case chức năng Post Management a Mô tả use case
Admin hay bất kì ai trong nhân viên nội đều có thể tạo viết để chia sẻ kiến thức hay blog tâm sự, thông báo, b Tác nhân
Admin, Nhân viên nội bộ c Tiền điều kiện
Người dùng đăng nhập thành công với vai trò Admin hoặc member d Luồng sự kiện chính
• User/Admin truy cập vào vào hệ thống sau khi qua bước đăng nhập
• Nhập thông tin cần thiết và Chọn button “Create new Post” để thêm bài viết mới
• Nhập thông tin cần thiết và Chọn button “Save infomation” để lưu thông tin dự án, sau đó chuyển về màn “Post list” e Luồng sự kiện phụ
• Admin/Nhân viên nhập thiếu thông tin
• Admin/Nhân viên Không nhập thông tin
• Admin click liên tục vào button “Save infomation”
• Admin/Nhân viên ấn vào btn “Cancel”
Trường dữ liệu Mô tả Bắt buộc? Điều kiện hợp lệ Ví dụ
Title String Có Không được trống Chào buổi sáng vui vẻ cùng với tôi
Slug String Không Nếu không nhập sẽ mặc định theo title chao-buoi-sang- vui-ve-cung-voi- toi
Category String Có Sẽ mặc định nếu không chọn
Status Date Có Nếu không nhập sẽ mặc định theo Draff
Image String Có Không được trống, và ảnh dạng: png, jpg, jpeg
About author String Không Không quá 255 kí tự Xin chào các bạn tôi là Shin_kun, hãy liên hệ với tôi qua fb:
Vào mỗi buổi sáng, việc bổ sung vitamin và dinh dưỡng đầy đủ cho cơ thể là rất quan trọng Điều này không chỉ giúp tăng cường sức khỏe mà còn cải thiện năng lượng cho một ngày làm việc hiệu quả Hãy bắt đầu ngày mới với những thực phẩm giàu vitamin để nuôi dưỡng cơ thể một cách tốt nhất.
Content String Có Không được trống xin chào hì hì, cấp đầy đủ dinh dưỡng
Bảng 2.6: Bảng dữ liệu đầu vào của use case “Post Management” g Dữ liệu đầu ra Đi đến màn List Post
2.3.8.2 Biểu đồ hoạt động của chức năng Post Management
Hình 2.17: Biểu đồ hoạt động chức năng Post Management
Yêu cầu phi chức năng
Hệ thống em xây dựng có các yêu cầu phi chức năng:
Hiệu năng của website được đảm bảo với thời gian tải trang lần đầu không vượt quá 10 giây và thời gian chờ của khách hàng trong các thao tác không quá 5 giây Hệ thống có khả năng xử lý tối đa 500 lượt truy cập đồng thời Về độ tin cậy, hệ thống có khả năng chịu lỗi cao, với thời gian khắc phục lỗi tối đa là 2 tiếng và khoảng cách giữa hai lỗi liên tiếp gần nhất là một tháng.
Website có giao diện đơn giản, dễ sử dụng và dễ học, giúp người dùng tiếp cận nhanh chóng mà không gặp nhiều lỗi hệ thống Hệ thống hoạt động theo thời gian thực, mang lại sự hài lòng cho khách hàng Ngoài ra, website tương thích với tất cả các trình duyệt phổ biến như Microsoft Edge, Chrome, Firefox, và nhiều trình duyệt khác.
Tính dễ bảo trì của website được xây dựng bằng các framework hiện đại như Laravel (framework PHP) là rất cao nhờ vào cộng đồng hỗ trợ mạnh mẽ, giúp giảm thiểu lỗi thời và dễ dàng nâng cấp.
Cơ sở dữ liệu: em sử dụng cơ sở dữ liệu Mysql, chạy trên web server Apache
Chúng đều được tích hợp trên Laragon hỗ trợ trên tất cả các hệ điều hành từ Cross- platform, Window, MacOS và Linux
Trong chương 2, tôi đã thực hiện khảo sát và phân tích yêu cầu cho website bán sách, đồng thời mô tả chi tiết các yêu cầu chức năng và phi chức năng của hệ thống.
Trong chương tiếp theo, em sẽ trình bày về công nghệ sử dụng để xây dựng lên website của mình.
CÔNG NGHỆ SỬ DỤNG
Single page application
Theo Wikipedia, ứng dụng một trang (SPA) là một loại ứng dụng web cho phép tương tác với người dùng bằng cách tự động cập nhật nội dung trang hiện tại từ máy chủ web, thay vì tải lại toàn bộ trang như cách truyền thống của trình duyệt Mục tiêu chính của SPA là cải thiện tốc độ chuyển tiếp và nâng cao trải nghiệm người dùng trên web.
Trong SPA, quá trình làm mới trang không diễn ra; thay vào đó, mọi mã HTML, CSS và JavaScript cần thiết được trình duyệt tải xuống chỉ một lần duy nhất khi trang được truy cập.
Tài nguyên cần thiết được tải và thêm vào trang theo yêu cầu, thường là để đáp ứng hành động của người dùng Do đó, trang web của chúng ta sẽ không thực hiện việc tải lại trong bất kỳ giai đoạn nào của quy trình và không chuyển quyền kiểm soát sang một trang khác.
Một website theo mô hình client-server, dù là ứng dụng đơn trang (SPA) hay không, thì client và server đều thực hiện nhiệm vụ riêng biệt Tuy nhiên, với SPA, sự phân chia giữa client side và server side trở nên rõ ràng hơn Client side không chỉ hiển thị giao diện mà còn thực hiện nhiều chức năng khác như xác thực và tạo hiệu ứng.
Một SPA gồm 4 tầng: tầng domain, tầng store, tầng application services, và tầng view
Tầng domain đóng vai trò quan trọng trong việc mô tả trạng thái và lưu trữ logic kinh doanh của ứng dụng Đây là phần lõi của ứng dụng, thể hiện qua tầng view Tầng domain được áp dụng cho mọi framework, bao gồm Angular, React và Vue.
• Tầng store: là nơi lưu trữ state của ứng dụng
• Tầng application services: thao tác với luồng state giống như các request Ajax
• Tầng view: bao gồm các container và presentational componet
Nhiều website có nội dung lặp lại, bao gồm các thành phần như header, footer, logo và navigation bar Một số yếu tố cố định như filter bar và banner cũng thường xuất hiện Ứng dụng SPA tận dụng hiệu quả những sự lặp lại này bằng cách linh động thay đổi các thành phần trong trang mà không cần tải lại toàn bộ trang, giúp người dùng trải nghiệm liền mạch hơn khi duyệt qua các trang nối tiếp nhau.
Trái ngược với single page application chính là multiple pages application
Website theo mô hình ứng dụng nhiều trang (multiple pages application) bao gồm nhiều trang web được điều hướng qua server dựa trên thao tác của người dùng Chẳng hạn, trong PHP, file điều hướng chính là index.php Mỗi khi có sự chuyển hướng, trình duyệt sẽ tải lại toàn bộ nội dung của trang và tải xuống lại tất cả tài nguyên của website, bao gồm cả các thành phần lặp lại như header và footer.
Trước khi SPA (Single Page Application) xuất hiện, việc lập trình web theo mô hình ứng dụng nhiều trang thường tuân theo cấu trúc MVC, bao gồm ba thành phần chính: model, view và controller.
Hình 0.1 Mô hình MVC Hình 3.1 mô tả sự tương tác giữa các thành phần trong mô hình MVC Mô hình gồm ba thành phần chính: Model (M), View (V), Controller (C)
Mô hình (Model) là phần quan trọng trong việc tương tác với cơ sở dữ liệu, bao gồm các hàm và phương thức để thực hiện truy vấn Controller sẽ sử dụng các hàm này để lấy dữ liệu và truyền đến View.
View là giao diện hiển thị trên trình duyệt dành cho người dùng, có nhiệm vụ ghi nhận hành vi của người dùng và phản hồi kết quả từ controller.
Lập trình front-end
HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu chủ yếu dùng để tạo trang web trên Internet Cùng với CSS và JavaScript, HTML đóng vai trò quan trọng trong thiết kế website Được phát triển từ SGML, HTML phục vụ cho các tổ chức có nhu cầu xuất bản phức tạp Tổ chức World Wide Web Consortium (W3C) đã duy trì HTML như một chuẩn mực của Internet Phiên bản chính thức mới nhất trước đây là HTML 4.01 (1999), sau đó được thay thế bởi XHTML, và hiện nay, phiên bản mới nhất là HTML5.
CSS (Cascading Style Sheets) là công cụ quan trọng để định hình cách trình bày tài liệu HTML và XHTML Nó giúp làm giảm sự phức tạp của mã HTML bằng cách sử dụng các thẻ quy định kiểu dáng như chữ đậm, in nghiêng và màu sắc, từ đó giữ cho mã nguồn trang web gọn gàng hơn CSS tách biệt nội dung và định dạng hiển thị, giúp dễ dàng cập nhật nội dung Hơn nữa, việc áp dụng các kiểu dáng cho nhiều trang web giúp tiết kiệm thời gian và công sức, tránh lặp lại định dạng cho các trang tương tự.
JavaScript (JS) là một ngôn ngữ lập trình thông dịch quan trọng, được sử dụng rộng rãi cho cả trang web phía client và server-side thông qua Node.js Nếu HTML được ví như khung xương và CSS như quần áo, thì JS chính là động cơ giúp trang web hoạt động JS mang lại sự sống động cho trang web, cho phép người dùng tương tác trực tiếp trên client-side, tạo ra sự khác biệt rõ rệt giữa trang web động và trang web tĩnh.
Tailwind là một framework CSS theo phương pháp utility-first, cung cấp các lớp như text-black và p-4 để xây dựng giao diện người dùng tùy chỉnh một cách nhanh chóng Với tính năng tùy chỉnh cao, Tailwind cho phép bạn tạo ra các thiết kế độc đáo mà không bị ràng buộc bởi các quy tắc cố định.
Livewire là một framework full-stack dành cho Laravel, giúp đơn giản hóa việc xây dựng giao diện động Đây là lựa chọn tuyệt vời cho những ai muốn phát triển ứng dụng một trang (SPA) nhưng gặp khó khăn khi tìm hiểu các framework như React.js và Vue.js.
Lập trình back-end
PHP (Hypertext Preprocessor) là ngôn ngữ lập trình kịch bản mã nguồn mở, chuyên dùng cho phát triển ứng dụng phía máy chủ Được tối ưu hóa cho web, PHP cho phép nhúng dễ dàng vào trang HTML và nổi bật với tốc độ nhanh, cú pháp tương tự Java và C, cùng với tính dễ học Nhờ vào những ưu điểm này, PHP đã nhanh chóng trở thành ngôn ngữ lập trình web phổ biến nhất trên toàn cầu.
Laravel là một trong những framework PHP mạnh mẽ và phổ biến nhất hiện nay Tôi chọn Laravel vì những ưu điểm vượt trội như tốc độ xử lý nhanh, tài nguyên phong phú và dễ sử dụng Bên cạnh đó, Laravel cũng nổi bật với tính bảo mật cao, sử dụng PDO để ngăn chặn tấn công SQL Injection và có cơ chế field token để bảo vệ dữ liệu.
MySQL là hệ thống quản trị cơ sở dữ liệu mã nguồn mở phổ biến nhất, hoạt động theo mô hình client-server Được ưa chuộng bởi các nhà phát triển và lập trình viên, MySQL nổi bật với tốc độ cao, tính ổn định, dễ sử dụng và khả năng tương thích trên nhiều hệ điều hành Với một lượng lớn hàm tiện ích mạnh mẽ, MySQL rất phù hợp cho các ứng dụng truy cập cơ sở dữ liệu trên internet Là hệ quản trị cơ sở dữ liệu quan hệ, MySQL sử dụng ngôn ngữ truy vấn có cấu trúc (SQL) và hỗ trợ tốt cho PHP, trở thành nơi lưu trữ thông tin cho các trang web.
Workbrech is a web server program that integrates five key software components: Cross-Platform (X), Apache (A), MariaDB (M), PHP (P), and Perl (P) It is compatible with various operating systems, including Linux, MacOS, Windows, Cross-Platform, and Solaris One of the main advantages of Workbrech is that it is open-source software, featuring a relatively simple and lightweight configuration, and it supports PHP and MySQL on the Apache web server.
PHÁT TRIỂN VÀ TRIỂN KHAI ỨNG DỤNG
Thiết kế kiến trúc
Kiến trúc client server là mô hình nổi tiếng trên mạng máy tính, phổ biến và được áp dụng rộng rãi trên các trang web hiện nay
Mô hình client-server là kiến trúc trong đó máy khách gửi yêu cầu đến máy chủ, và máy chủ sẽ xử lý dữ liệu để trả lại kết quả cho máy khách.
Là kiến trúc gồm 2 thành phần chính là máy khách (client) và máy chủ (server)
Server là thiết bị lưu trữ tài nguyên, cài đặt các chương trình dịch vụ và thực hiện yêu cầu từ client Đây có thể là một máy tính đơn lẻ hoặc một chuỗi các máy tính liên kết với nhau.
Client là thiết bị gửi yêu cầu đến server để thực hiện các nhiệm vụ như truy xuất dữ liệu từ cơ sở dữ liệu hoặc gửi email Client bao gồm các loại máy tính và thiết bị điện tử, chẳng hạn như desktop và laptop.
Kiến trúc client-server cho phép tập trung các ứng dụng và chức năng trên một hoặc nhiều máy chủ, nơi mà khi nhận yêu cầu từ client, server có thể chuyển tiếp yêu cầu đến server khác như database server nếu không thể xử lý yêu cầu đó Các máy chủ trở thành trung tâm của hệ thống, chia sẻ tài nguyên cho nhiều client và tận dụng tốc độ xử lý cùng khả năng truy vấn dữ liệu hiệu quả Mô hình này giúp tách biệt rõ ràng giữa client side và server side, đặc biệt trong ứng dụng SPA.
Trong đó client side xử lý nhiều hơn giúp giảm tải cho server
Trong hoạt động của hệ thống client-server, việc giao tiếp giữa client và server là rất quan trọng Tất cả quá trình này được thực hiện thông qua giao thức chuẩn TCP/IP.
Hình 0.2: Biểu đồ phụ thuộc gói
Hình 4.2 là biểu đồ gói phụ thuộc gồm các gói: views, route, controller, Middleware, Provider, và models
Views là một gói bao gồm các thành phần giao diện, trong đó mỗi component đảm nhận một vai trò cụ thể Các component này có thể liên kết với nhau để tạo thành một trang hoàn chỉnh.
Route: Là package bên phía backend, chứa các lớp: api, web, … dùng để xác định phương thức trong controller nào được gọi
Controller: gồm các class xử lý và yêu cầu các lớp models lấy dữ liệu trong database và trả về response cho trình duyệt
Middleware là thành phần nằm giữa Route và Controller, có chức năng kiểm tra và bảo vệ quyền truy cập vào controller theo các điều kiện nhất định Nếu trong lớp Middleware bạn yêu cầu người dùng phải đăng nhập để truy cập một phương thức cụ thể trong controller, thì khi người dùng chưa đăng nhập, phương thức đó sẽ không được thực thi.
Provider bao gồm các lớp như AuthServiceProvider và RouteServiceProvider, hỗ trợ cho việc định tuyến và bảo mật Trong khi đó, Route Models bao gồm các lớp kế thừa từ lớp Model, có nhiệm vụ khởi tạo hoặc truy xuất dữ liệu từ cơ sở dữ liệu.
Thiết kế chi tiết
Giao diện phần mềm cần thân thiện với người dùng, đảm bảo hiển thị tối ưu trên màn hình từ 14 inch đến 18,5 inch Thông tin và thông báo phải được trình bày đầy đủ, với bố cục cân đối và các thành phần được sắp xếp hợp lý.
Hình ảnh có kích thước hợp lý, không làm ảnh hưởng đến tốc độ tải trang Font chữ đơn giản không màu mè
Website có hai giao diện chính: giao diện quản trị viên và giao diện khách hàng Giao diện quản trị viên cần thiết kế các ô nhập liệu để người dùng có thể thao tác liên tục mà không cần dùng chuột, đồng thời các ô phải có sự liên kết chặt chẽ, giúp người dùng nhận diện rõ ràng mối tương quan giữa các dữ liệu Đối với giao diện khách hàng, cần tránh làm gián đoạn thao tác của người dùng và đảm bảo hiển thị thông tin dữ liệu đầy đủ.
Sau đây là phần thiết kế màn hình
4.2.1.2 Thiết kế giao diện màn hình
Có hai loại màn hình chính: một dành cho nội bộ và một dành cho người dùng Hai loại màn hình này không khác biệt nhiều, chủ yếu chỉ khác nhau ở layout tổng thể Các form nhập liệu cũng tương tự nhau, và các thông báo, xác nhận được thiết kế đồng nhất.
Hình 0.3: Layout ECS nội bộ
Trong ứng dụng web quản lý doanh nghiệp có 2 lớp quan trọng nhất là TimesheetController và PostController
STT Tên phương thức Mô tả
1 index index and search date Timesheets
Bảng 0.1 Bảng mô tả lớp “TimesheetController”
STT Tên phương thức Mô tả
1 insertAddTimesheet get id timesheet and call Users is admin
2 listAddTimesheet index list additional timesheet
9 getAddtimesheetById get timesheet by id
Bảng 0.2 Bảng mô tả lớp “AddTimesheetController”
STT Tên phương thức Mô tả
1 index Index and search Project
2 insert Show screen Create project
8 chartStatus Chart user status: free or working
Bảng 0.3 Bảng mô tả lớp “ProjectController”
STT Tên phương thức Mô tả
1 create Show the form for creating a new user
2 insert insert a new user created resource in storage
4 edit Show the form for editing user by ID
5 update Update user by id resource in storage
6 delete Delete user by id resource in storage
7 leave Show all users leave
Bảng 0.4 Bảng mô tả lớp “UserController”
STT Tên phương thức Mô tả
1 index show all list post
3 insert insert a new post edit find post by slug
Bảng 0.5 Bảng mô tả lớp “PostController”
4.2.3 Thiết kế cơ sở dữ liệu 4.2.3.1 Sơ đồ quan hệ
Hình 4.8: Biểu đồ dữ liệu quan hệ
4.2.3.2 Chi tiết các bảng Bảng users
4.3 Xây dựng ứng dụng 4.3.1 Thư viện và công cụ sử dụng
Mục đích Công cụ Địa chỉ URL
IDE lập trình Visual studio code 64 bit version 1.56 https://code.visualstudio.com/
Chương trình tạo web server
MySQL Workbench 8.0 CE https://www.mysql.com/products/workbench
Công cụ thiết kế bản vẽ
Astah UML https://astah.net/
Công cụ thiết kế E-R diagram
Draw https://app.diagrams.net/
Ngôn ngữ lập trình back end
PHP 7.4.11 https://www.php.net
Laravel 8 https://laravel.com/docs/8.x
Ngôn ngữ lập trình front-end
JavaScript ES6 Ngôn ngữ front- end
Bootstrap4, Taiwind https://getbootstrap.com
Bảng 0.6: Danh sách thư viện và công cụ sử dụng
4.3.2 Minh họa các chức năng chính
Trang đăng nhập yêu cầu người dùng nhập đúng địa chỉ Email và mật khẩu để truy cập vào hệ thống Khi người dùng điền chính xác thông tin đăng nhập và nhấn nút "Login", giao diện sẽ chuyển sang trang chính.
Figure 4.10 shows the homepage, while Figure 4.16 displays the successful login screen Upon logging in, the homepage features a left-side menu that includes options such as Dashboard, Timesheet, Overtime, Additional Timesheet, Additional Project, and Instructions for Use.
Hình 4.17 hiển thị giao diện của màn hình Bổ sung công Tại đây, bạn cần chọn admin kiểm duyệt, tải lên ảnh làm bằng chứng và điền lý do cụ thể Lưu ý rằng không được để trống bất kỳ thông tin nào.
Hình 4.12: Màn Additional Timesheet List Hình 4.18 là giao danh sách công số đã tạo với các chức năng là:
❖ Xem chi tiết: Khi nhấn vào button: ‘Detail’ tức hiển thị chi tiết Bổ sung công
❖ Xóa đơn bổ sung đã tạo
❖ Tìm kiếm đơn bổ sung công
Màn hình tạo dự án cho phép người dùng nhập các thông tin quan trọng như tên dự án, loại dự án, khách hàng, phòng ban, ngày bắt đầu, ngày kết thúc, trạng thái dự án và mô tả Người dùng cũng có thể thêm các thành viên với các vị trí khác nhau như developer, tester, v.v Điều kiện cần tuân thủ là ngày bắt đầu của dự án phải nhỏ hơn hoặc bằng ngày kết thúc, và ngày bắt đầu cũng như ngày kết thúc của người tham gia phải nằm trong khoảng thời gian diễn ra của dự án.