BÁO cáo THỰC tập tốt NGHIỆP đề tài SPA TRONG PHẦN mềm QUẢN lý DOANH NGHIỆP ECS

Vì vậy, trong báo cáo này, em mong muốn thiết kế và xây dựng đượcwebsite quản lý doanh nghiệp với giao diện người dùng theo hướng ứng dụng một trang single page application với các chức

GIỚI THIỆU ĐỀ TÀI

Đặt vấn đề

Để doanh nghiệp phát triển toàn diện, ngoài việc nâng cao chất lượng sản phẩm và phát triển nguồn nhân lực, yếu tố truyền thông luôn đóng vai trò thiết yếu trong hoạt động quảng bá và giới thiệu hình ảnh công ty với khách hàng Có nhiều phương thức quảng bá khác nhau, nhưng các bài post chia sẻ kiến thức chuyên môn và các diễn đàn thông tin là những kênh hữu ích, thực tế và mang tính thuyết phục cao, giúp tăng cường nhận diện thương hiệu và sự tin tưởng của người dùng.

Hiện nay trên các diễn đàn và blog chia sẻ kiến thức xuất hiện rất nhiều, và để doanh nghiệp có thể thu hút người dùng đến thăm diễn đàn hoặc website của mình, không chỉ cần nội dung hay, độc đáo mà còn một giao diện đẹp cùng các hiệu ứng mượt mà – yếu tố then chốt góp phần quảng bá thương hiệu Nhiều nền tảng trực tuyến được thành lập nhằm phục vụ độc giả, giúp họ tìm kiếm kiến thức thú vị và giải quyết các vấn đề gặp phải Tuy nhiên, khi phải xử lý lượng dữ liệu lớn, các trang web thường gặp khó khăn với tốc độ tải, kéo theo thời gian chờ của người dùng khi truy cập và thao tác dữ liệu Do đó, tối ưu hóa tốc độ tải trang, cải thiện giao diện người dùng và hiệu ứng tương tác không chỉ nâng cao trải nghiệm mà còn cải thiện SEO và hiệu quả giữ chân khách hàng.

Trong báo cáo này, em mong muốn thiết kế và xây dựng một website quản lý doanh nghiệp với giao diện người dùng theo hướng ứng dụng một trang (Single Page Application - SPA) Website sẽ cung cấp các chức năng cơ bản cho người dùng như xem bài post, đọc và bình luận, đồng thời cho phép độc giả tìm kiếm nội dung và tham gia vào các cuộc trò chuyện Thiết kế SPA sẽ tối ưu hóa trải nghiệm người dùng, tải trang nhanh và hỗ trợ quản lý thông tin doanh nghiệp hiệu quả Nội dung và cấu trúc trang được tối ưu cho SEO nhằm tăng khả năng hiển thị trên các công cụ tìm kiếm bằng cách tích hợp từ khóa liên quan, tối ưu thẻ meta và tiêu đề, cũng như tạo đường dẫn thân thiện với người dùng.

Mục tiêu và phạm vi dự án

Đề tài xây dựng phần mềm quản lý doanh nghiệp ECS nhằm cung cấp một giải pháp quản trị toàn diện cho doanh nghiệp, tập trung vào tối ưu hoá quy trình làm việc và nâng cao hiệu quả hoạt động Hệ thống ECS hỗ trợ các module chính như quản lý người dùng (user management), quản lý dự án (project management), quản lý bài post và chấm công, giúp theo dõi quyền truy cập, tiến độ dự án, nội dung nội bộ và thời gian làm việc của nhân viên một cách an toàn và minh bạch Nhờ tích hợp dữ liệu và tự động hóa các tác vụ quản trị, doanh nghiệp có thể cải thiện sự hợp tác giữa các bộ phận, tối ưu hoá chi phí vận hành và dễ dàng mở rộng khi nhu cầu tăng lên Đây là nền tảng quản trị doanh nghiệp hiện đại, cung cấp báo cáo và KPI chi tiết để đánh giá hiệu quả hoạt động và hỗ trợ đưa ra quyết định chiến lược.

Tiêu đề TIEU LUAN MOI download mang đến cập nhật mới nhất cho giao diện người dùng và cho phép người dùng dễ dàng tìm kiếm, đọc và bình luận bài viết, cũng như tham gia các cuộc trò chuyện trên website Website được thiết kế thân thiện với người dùng, giúp duyệt nội dung nhanh chóng, tương tác với bài viết và kết nối với cộng đồng độc giả Để nhận thông tin cập nhật mới nhất hoặc được hỗ trợ, vui lòng liên hệ qua email skknchat123@gmail.com.

Em đang xây dựng hệ thống quản trị doanh nghiệp là một ứng dụng web một trang (SPA) với các chức năng dành cho khách vãng lai và cho các thành viên nội bộ Khách vãng lai có thể tham quan website, đọc bài viết và bình luận, trong khi các thành viên nội bộ được cấp các quyền truy cập ở các mức độ khác nhau và quản trị viên có quyền quản trị hệ thống Hệ thống được thiết kế để tối ưu hóa trải nghiệm người dùng, đảm bảo an toàn dữ liệu và quản lý nội dung nhờ cơ chế phân quyền rõ ràng, phù hợp với vai trò của từng người dùng.

➢ 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 - SPA) tối ưu cho giao diện người dùng Em chọn giải pháp SPA vì khả năng xử lý mạnh mẽ và tốc độ nổi bật của nó, giúp cải thiện hiệu suất hệ thống và mang lại trải nghiệm người dùng mượt mà.

Single Page Application (SPA) là một loại ứng dụng web tương tác với người dùng bằng cách tự động cập nhật nội dung của trang hiện tại từ dữ liệu của máy chủ, thay vì tải lại toàn bộ trang từ máy chủ Khi người dùng tương tác, SPA gửi các yêu cầu bất đồng bộ (via AJAX hoặc fetch) và cập nhật DOM để phản hồi nhanh chóng Nhờ cách làm này, người dùng có trải nghiệm mượt mà như ứng dụng trên máy tính để bàn và giúp cải thiện hiệu suất cũng như giảm thời gian tải trang SPA còn tối ưu hóa quá trình phát triển frontend bằng cách cho phép xây dựng giao diện thành các component tái sử dụng và quản lý trạng thái một cách hiệu quả.

Phương pháp tải trang mặc định của trình duyệt cho phép tải toàn bộ trang lần đầu và sau đó tải lazily các tài nguyên phù hợp khi người dùng tương tác, giúp tối ưu hóa băng thông và cải thiện hiệu năng Đối mặt với dữ liệu thay đổi liên tục như thời gian áp dụng khuyến mãi, số lượng sách và sách mới được thêm vào, các ứng dụng Single Page Application (SPA) thể hiện ưu điểm về tốc độ tải dữ liệu nhanh và đảm bảo hiển thị dữ liệu theo thời gian thực đáp ứng nhu cầu người dùng Đóng góp chính của hệ thống là một website quản lý doanh nghiệp với quản lý bài viết chia sẻ kiến thức cho lượng dữ liệu lớn, đồng thời duy trì tính ổn định và tốc độ xử lý cao, từ đó nâng cao trải nghiệm người dùng và hiệu quả quản trị nội dung.

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:

Chương 2 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à 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 của mình và tiến hành phân tích sâu các yêu cầu chức năng đối với từng actor tham gia nghiệp vụ thông qua các use case Trong chương này, 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ì, cùng các yêu cầu về mặt kỹ thuật như CSDL và công nghệ sử dụng.

Trong Chương 3, sau khi phân tích các yêu cầu chức năng và phi chức năng của hệ thống, em trình bày quá trình lựa chọn công nghệ phù hợp và mô tả chi tiết các công nghệ được áp dụng để 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 các công nghệ JavaScript, kết hợp Tailwind cho phần giao diện và Livewire để hỗ trợ xây dựng SPA (single‑page application); ở phía server, em chọn Laravel, một framework PHP mạnh mẽ giúp tăng cường bảo mật và tối ưu truy xuất dữ liệu từ cơ sở dữ liệu Ngoài ra, em sẽ đề cập đến một số công nghệ khác như web service, nền tảng ứng dụng và các giải pháp ứng dụng nhằm giải quyết các vấn đề đã nêu, và mô tả chi tiết hơn trong Chương 3.

TIEU LUAN MOI download : skknchat123@gmail.com moi nhat

Trong Chương 4, em tiến hành thiết kế hệ thống dựa trên phân tích nghiệp vụ ở Chương 2 và phù hợp với công nghệ đã chọn ở Chương 3 Em thiết kế kiến trúc phần mềm, thiết kế chi tiết giao diện, lớp và cơ sở dữ liệu, sau đó xây dựng ứng dụng để thể hiện kết quả đạt được và minh họa các chức năng chính Quá trình này đảm bảo sự nhất quán giữa kiến trúc và triển khai, đồng thời tối ưu hóa hiệu suất và khả năng bảo trì của hệ thống Cuối cùng, em sẽ kiểm thử các trường hợp cho hai chức năng quan trọng nhất để xác nhận chất lượng và tính đáng tin cậy của ứng dụng.

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 VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Khảo sát hệ thống

2.1.1 Tổng quan về quản lý doanh nghiệp Đề tài vừa có giá trị trong thực tế vừa có giá trị trong việc học tập vì sau khi thực hiện đề tài, em vừa nắm được vững hơn kiến thức môn học vừa bồi dưỡng cho bản thân thêm kiến thức về nghiệp vụ quản lý trong các doanh nghiệp, công ty góp phần nâng cao trình độ chuyên môn của mỗi cá nhân.

Mục tiêu chính của đề tài môn học này là rèn luyện cho các em kỹ năng xây dựng hệ thống quản trị doanh nghiệp với các nhiệm vụ cơ bản như quản lý hệ thống, quản lý công số, dự án, chấm công và nhân sự Đồng thời, bài tập còn tạo điều kiện cho việc luyện tập và vận dụng kiến thức từ các môn: 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, nhằm nâng cao năng lực phát triển hệ thống và tối ưu quản trị doanh nghiệp.

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 hỏ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à mỗi ngày và sau 17h30 có thể chấm công checkout để ghi nhận đầy đủ thời gian làm việc Khi vô tình quên chấm công, cần thu thập chứng cứ, thực hiện bổ sung công và chọn người duyệt phù hợp để xác nhận hồ sơ chấm công.

- 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 nắm bắt tình hình doanh nghiệp, theo dõi số lượng và trạng thái làm việc của nhân viên để biết ai đang rảnh rỗi và ai đang tham gia dự án nào Đồng thời, quyền duyệt danh sách bổ sung chỉ được trao cho Admin khi được chọn làm người duyệt, nhằm đảm bảo kiểm soát và minh bạch trong quá trình bổ sung nhân sự.

Admin sẽ thiết lập và quản lý danh sách dự án, giúp theo dõi tiến độ và nguồn lực cho từng dự án Đồng thời hệ thống sẽ nắm bắt tình trạng nhân sự hiện tại, cho biết ai đang rảnh và ai đang tham gia dự án nào để tối ưu hóa việc phân bổ nguồn lực.

❖ Mục tiêu của hệ thống

Nhằm nâng cao chất lượng quản lý nhân sự và đồng thời đảm bảo quyền lợi của nhân viên một cách hiệu quả nhất và công bằng nhất, doanh nghiệp cần áp dụng các giải pháp quản trị hiện đại, tăng cường minh bạch trong quy trình đánh giá và thăng tiến Việc này giúp nâng cao hiệu suất làm việc, xây dựng môi trường làm việc chuyên nghiệp và gắn kết hơn giữa người lao động với tổ chức, từ đó bảo đảm quyền lợi của nhân viên được thực thi đầy đủ và công bằ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:

- Không đòi hỏi nhiều về trình độ tin học

- 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 COVID-19 diễn biến phức tạp và yêu cầu giãn cách xã hội của nhà nước, doanh nghiệp gặp nhiều khó khăn trong quản lý nhân sự và quyền lợi người lao động khi phải thích ứng với làm việc từ xa Bài toán then chốt là làm sao quản lý nhân sự, bảo đảm quyền lợi người lao động, tuân thủ giãn cách xã hội và vẫn duy trì hiệu quả công việc Vì vậy, việc xây dựng một hệ thống quản trị doanh nghiệp tích hợp chấm công online và quản lý nhân sự là vô cùng cần thiết và cấp bách để tối ưu hoạt động làm việc từ xa, nâng cao hiệu quả và an toàn cho tổ chức.

Là người trực tiếp sử dụng hệ thống chấm công, nhân viên có thể xem danh sách chấm công hàng ngày của mình và theo dõi thời gian làm việc một cách trực quan Đồng thời, họ có thể tạo bổ sung công khi cần và chọn người duyệt để phê duyệt nhanh chóng, giúp quy trình chấm công diễn ra thuận tiện và minh bạch.

Sau khi tạo bổ sung công, nhân viên có thể thêm, sửa hoặc xóa đơn bổ sung vừa tạo và sau đó đợi duyệt từ phía người duyệt Để tăng tốc quy trình xét duyệt và phê duyệt nhanh chóng, hãy để lại lý do thuyết phục rõ ràng trong đơn bổ sung để người duyệt có thể xem xét và phê duyệt nhanh nhất.

Là người có quyền cao nhất sẽ là đọc, kiểm tra và duyệt hoặc hủy bỏ những danh sách bổ sung công của người gửi.

Ngoài ra, Admin có thể tạo dự án mới và gán các trạng thái như Chưa triển khai, Đang triển khai và Đã hoàn thành Admin cũng có thể tìm kiếm và lọc danh sách dự án cũ và dự án 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

2.2.1 Biểu đồ use case tổng quát

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

Hình 2.3 là biểu đồ use case phân rã cho chức năng Timesheet Management Trong hệ thống, thành viên nội bộ hàng ngày sẽ nhấn Check In để cập nhật giờ vào và nhấn Check Out khi kết thúc để cập nhật giờ ra Chức năng tìm kiếm cho phép tra cứu thông tin theo khoảng thời gian với hai trường start date và end date, giúp xem dữ liệu của các tháng trước và năm trước một cách nhanh chóng và trực quan.

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 presents the use case diagram for the decomposition of Project Management When a new project is created, the Admin manages projects by adding, editing, deleting, and searching for them Search can be performed across multiple fields: project name, project type, project status, and project department.

Ngoài ra, quản trị viên có thể xem biểu đồ thống kê nhân viên để biết được ai đang rảnh và ai đang làm việc trong dự án Công cụ này cho phép theo dõi trạng thái công việc, nhận diện nguồn lực và phân bổ nhân sự hiệu quả dựa trên tình trạng làm việc của từng nhân viê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

Hình 2.5 trình bày Biểu đồ use case phân rã cho Quản lý người dùng (User Management) Khi có nhân viên mới, Admin sẽ quản lý nhân viên bằng các thao tác chính như thêm, sửa, xóa và tìm kiếm nhân viên Việc tìm kiếm được thực hiện theo nhiều trường thông tin: name, ID, department và location, giúp lọc kết quả nhanh chóng và hiệu quả.

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

Hình 2.6 trình bày biểu đồ use case phân rã Post Management, mô tả vai trò của nhân viên nội bộ trong việc quản lý bài đăng của chính họ Người dùng nội bộ có thể thực hiện đầy đủ các thao tác quản lý bài đăng như thêm bài đăng mới, sửa đổi và xóa bài đăng, đồng thời có thể tìm kiếm bài đăng theo các trường tiêu đề (title), danh mục (category) và trạng thái (status).

Với vai trò Admin, bạn có thể quản lý toàn bộ các bài viết ở chế độ Public của nhân viên, từ đó nắm bắt nội dung và hoạt động đăng tải của đội ngũ Quản lý tập trung cho phép kiểm soát chất lượng và tính phù hợp của từng bài viết trước khi công khai, đồng thời giúp lựa chọn những bài đăng phù hợp để lên lịch hoặc xuất bản Nhờ quy trình quản trị bài viết công khai này, Admin có thể đảm bảo thông tin được chia sẻ đúng mục tiêu, phù hợp với chiến lược của tổ chức và tối ưu hóa hiệu quả hiển thị trên các kênh truyền thông.

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

Hình 2.7 trình bày biểu đồ use case phân rã cho chức năng Add Timesheet Management Nhân viên nội bộ khi quên chấm công có thể thêm đơn bổ sung, sửa, xóa và xem chi tiết đơn bổ sung, đồng thời hệ thống cho phép tìm kiếm các đơn bổ sung theo các trường start date và end date để thuận tiện theo dõi và quản lý chấm công.

2.2.7 Biểu đồ use case phân rã chức năng “Add Timesheet Approval

Hình 2.8: Biểu đồ use case phân rã Add Timesheet Approval Management

Figure 2.8 presents the decomposed use-case diagram for Add Timesheet Approval Management The admin has the authority to approve or reject supplemental requests submitted by internal employees, and for convenience can perform bulk actions with Approve All or Reject All Approvals can be searched by fields such as ID or name, start date, and end date.

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

Hình 2.9 mô tả biểu đồ use case phân rã chức năng Comment post Khách vãng lai có thể xem và khám phá bài viết thông qua danh sách bài viết, các bài viết mới (new post) và bài viết phổ biến (popular post), từ đó xem chi tiết bài viết và thực hiện like hoặc bình luận Nhân viên nội bộ có thể tương tác ngược lại với khách hàng trong các bài viết để thảo luận và giải quyết 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 người dùng cần có tài khoản riêng để đăng nhập, từ đó thực hiện check-in và check-out để chấm công cho ngày làm việc Khi quên chấm công, người dùng có thể bổ sung công hoặc đơn giản tìm kiếm danh sách bổ sung công hoặc tìm kiếm những dự án theo lựa chọn tìm kiếm Các tác nhân tham gia hệ thống sẽ thực hiện các thao tác này để quản lý thời gian làm việc và hiệu quả dự án.

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 bỏ 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 mật khẩu đúng định dạng nhưng tài khoản chưa tồn tại

Hệ thống thông báo: “Sai tài khoản hoặc tên đăng nhập”. f dữ liệu đầu vào

Trường dữ liệu Mô tả Bắt Điều kiện hợp lệ Ví dụ buộc?

Email String Có Địa chỉ email hợp lệ tung@gmail.com

Password String Có Đúng mật khẩu ToiLa12#$ đượ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

Hình 2.10: Biểu đồ hoạt động 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, đúng 0 giờ của ngày kế tiếp, batch tự động chạy để sinh ra một bản ghi mới cho ngày hiện tại Khi làm việc, nhân viên sẽ thực hiện check-in và mỗi nhân viên chỉ được check-in một lần duy nhất.

➢ 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

TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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

Hình 2.11: Biểu đồ hoạt động 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 đêm, vào lúc 0 giờ ngày hôm sau, hệ thống sẽ chạy batch để sinh ra một bản ghi mới cho ngày hiện tại Nhân viên khi làm việc sẽ thực hiện checkin và sau khi hoàn thành công việc sẽ thực hiện checkout Việc tính công chỉ được thực hiện khi có đầy đủ cả checkin và checkout; nếu thiếu một trong hai thao tác, 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)

Tổng sáng = 12h – checkin (max = 4 tiếng)

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)

TIEU LUAN MOI download : skknchat123@gmail.com moi nhat b Tác nhân

• 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

In the Timesheet List, the Check out column has been updated to reflect the current time, and the columns Checkin pay, Checkout pay, Lunch break time, Actual working time, Paid working time, and Note will also be updated.

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

Bổ sung rất cần thiết khi chúng ta quên chấm công, Hãy chọn ngày muốn bổ sung công và chuẩn bị bằng chứng để gửi đến người kiểm duyệt danh sách bổ sung công. b Tác nhân

• 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

Additional date Date Có Date phải chọn nhỏ 2022-10-04 hơn hoặc bằng ngày hiện tại

Admin String Có Sẽ mặc định nếu Tùng NT

Check in request Date Có Chọn Giờ muốn 08:00:00 duyệt

Checkout request Date Có Chọn Giờ muốn 17:30:00 duyệt

Evidence Image Có Chọn ảnh dưới Chamcong.png dạng: jpg,png,jpeg

Reason String Có Không được bổ Em quên chấm trống cô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 những danh sách mà người dùng tạo, Admin cần phải xem kĩ lý do và xem bằng chứng thật kĩ lưỡng trước khi duyệt hoặc hủy duyệt. b Tác nhâ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

Comment: String Không Không được nhập Oke, đã được quá dài duyệt

Bảng 2.3: Bảng dữ liệu đầu vào của use case “Add timesheet Approval”

Tiêu đề TIEU LUAN MOI download: skknchat123@gmail.com – bản cập nhật mới nhất, dữ liệu đầu ra cho Đơn duyệt sẽ bị xóa khỏi danh sách Duyệt và đồng thời trạng thái của đơn được cập nhật thành Approved hoặc Reject trong danh sách Add Timesheet của nhân viên đã tạo đơn, nhằm đảm bảo xử lý phê duyệt đúng quy trình và theo dõi lịch chấm công một cách chính xác.

2.3.5.2 Biểu đồ hoạt động của chức năng Add Timesheet

Hình 2.14: Biểu đồ hoạt động chức năng Duyệt bổ sung công

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

Quyền Admin mới cho phép tạo dự án và thêm nhiều thành viên cho các dự án khác nhau với các vai trò khác nhau, giúp quản trị viên phân bổ quyền hạn và phối hợp hiệu quả Dự án chứa các thông tin chính như 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, nhằm theo dõi tiến độ và tình trạng hoạt động Các tác nhân liên quan được xác định rõ để đảm bảo sự phân công nhiệm vụ và liên lạc giữa các thành viên trong 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

Project Name String Có Không được trống Isol

Customer String Có Sẽ mặc định nếu EPU software không chọn

Project Type String Có Sẽ mặc định nếu Lapo không chọn

Value Contract Interger Có Không được trống 200

(mm) và số nguyên từ 1-

Department String Có Sẽ mặc định nếu D1

Start Date Date Có Không được bổ 2022-08-01 trống

End Date Date Có Không trống và lớn 2022-12-30 hơn start date

Status String Có Sẽ mặc định nếu Developing

Description String Có Không được trống Dự án maintain

Staff String Có Không được trống Tùng NT và không được trùng

Location String Có Sẽ mặc định nếu Developer không chọn

Start Date(Staff Date Có Không trống và lớn 2022-11-09

Create) hơn start date, nhỏ hơn end date

End Date(Staff Date Có Không trống và lớn 2022-12-22

Create) hơn start date, nhỏ hơn end date và lớn hơn start date(staff create)

Effort (%) Interger Có Không trống và số 100 nguyên từ 1-100

Bảng 2.4: Bảng dữ liệu đầu vào của use case “Project Management”

TIEU LUAN MOI download là từ khóa SEO quan trọng cho người dùng đang tìm kiếm các bản luận văn mới và có thể nhận bản tải mới nhất thông qua email skknchat123@gmail.com Dữ liệu đầu ra cho phép người dùng đi đến màn hình List project và hiển thị ngay danh sách các dự án được thêm mới hoặc cập nhật, giúp theo dõi tiến độ công việc một cách trực quan và hiệu quả.

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

ID Interger Có Không được trống 446

Email String Có Không được trống tung@gmail.com và kiểu mail

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 Full time 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 Fabbi Hanoi không chọn

Position String Có Sẽ mặc định nếu Member không chọn

Division Date Có Sẽ mặc định nếu D2 không chọn

Location Date Có Sẽ mặc định nếu Developer không chọn

Personal photo Image Có Không được trống, Tung.jpg và ảnh dạng: png, jpg, jpeg

Gender String Có Sẽ mặc định nếu Male 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à 0961024620 format bắt đầu là số:

0 Relative`s phone Interger Không Được nhập 10 số và 0123456789 number 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” f dữ liệu đầu vào

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ẽ chao-buoi-sang- mặc định theo title vui-ve-cung-voi- toi

Category String Có Sẽ mặc định nếu World không chọn

Status Date Có Nếu không nhập sẽ Draff mặc định theo Draff

Image String Có Không được trống, Tung.png 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: Nguyễn Tùng

Bạn có nghĩ rằng một buổi sáng có thể bắt đầu bằng việc bổ sung vitamin cho cơ thể và cung cấp đầy đủ dinh dưỡng cho ngày mới không? Việc bổ sung vitamin đúng cách giúp tăng cường sức khỏe, nâng cao năng lượng và hỗ trợ quá trình trao đổi chất của cơ thể Bữa sáng giàu vitamin tự nhiên và nguồn dinh dưỡng thiết yếu sẽ giúp bạn tỉnh táo, cải thiện miễn dịch và duy trì sự tập trung suốt cả ngày Hãy khám phá các cách kết hợp thực phẩm chứa vitamin và chất dinh dưỡng để bắt đầu ngày mới một cách trọn vẹn và khỏe mạnh.

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 khi truy cập không quá 10 giây và thời gian đợi khi khách hàng thực hiện các thao tác không quá 5 giây Đây là mục tiêu tối ưu giúp cải thiện trải nghiệm người dùng và tăng hiệu quả SEO, vì người dùng có xu hướng thoát nếu phản hồi quá chậm Để duy trì và nâng cao chỉ tiêu này, chúng tôi tập trung tối ưu hóa hình ảnh, tối ưu mã nguồn và cấu hình máy chủ, đồng thời cải thiện tải trang trên mọi thiết bị và mạng để đảm bảo phản hồi nhanh chóng và ổn định.

Hệ thống được thiết kế với công suất truy cập đồng thời tối đa 500 lượt, đảm bảo hiệu suất làm việc ổn định ngay cả khi tải cao Với độ tin cậy cao, hệ thống có khả năng chịu lỗi tốt và thời gian khắc phục sự cố tối đa 2 giờ, giúp duy trì hoạt động liên tục và giảm thiểu thời gian gián đoạn Đồng thời, khoảng cách giữa hai lỗi liên tiếp tối thiểu là một tháng, đảm bảo sự ổn định vận hành và phục hồi nhanh chóng.

Website có giao diện người dùng thân thiện, thiết kế đơn giản và dễ học, giúp người dùng tiếp cận và dùng ngay lần đầu Hệ thống truy cập ổn định, ít lỗi và vận hành mượt mà, mang lại trải nghiệm hài lòng cho khách hàng nhờ cập nhật theo thời gian thực Website hoạt động tin cậy trên mọi trình duyệt phổ biến như Microsoft Edge, Chrome, Firefox, đảm bảo khả năng truy cập đồng bộ và tối ưu SEO trên nhiều nền tảng.

Khẳng định tính dễ bảo trì: Xây dựng website bằng các framework hiện đại như Laravel (framework PHP) mang lại cộng đồng hỗ trợ mạnh và ít bị lỗi thời Nhờ vậy, khả năng bảo trì và nâng cấp website được cải thiện đáng kể, giúp tăng tuổi thọ của sản phẩm số và giảm thiểu chi phí bảo trì cho doanh nghiệp.

Database setup: I use a MySQL database hosted on an Apache web server, all integrated with Laragon, a cross‑platform development environment that supports Windows, macOS, and Linux.

Như vậy, trong chương 2 em đã trình bày 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 công nghệ và các công cụ được sử dụng để xây dựng website bán sách, bao gồm kiến trúc hệ thống, ngôn ngữ lập trình, framework và các giải pháp bảo mật, tối ưu hiệu suất và mở rộng, nhằm đảm bảo trải nghiệm người dùng tốt và tối ưu SEO cho dự án.

CÔNG NGHỆ SỬ DỤNG

Single page application

Single Page Application (SPA) là một loại ứng dụng web hoặc website tương tác với người dùng bằng cách tự động cập nhật nội dung của trang hiện tại từ máy chủ, thay vì tải lại toàn bộ trang như phương pháp mặc định của trình duyệt Theo Wikipedia, mục tiêu của SPA là tối ưu hóa trải nghiệm người dùng bằng cách chuyển tiếp nhanh hơn giữa các nội dung và tăng tốc web bằng cách giảm số lần tải trang đầy đủ.

Trong kiến trúc Single Page Application (SPA), trang web không bị làm mới hay tải lại theo thời gian; thay vào đó, tất cả mã HTML, CSS và JavaScript cần thiết được tải lần đầu và sau đó được trình duyệt truy xuất khi có nhu cầu, bằng cách tải và chèn các tài nguyên vào trang khi người dùng tương tác Các tài nguyên được tải đúng lúc để đáp lại hành động của người dùng, giúp tăng tính tương tác và trải nghiệm người dùng liền mạch Do đó, quá trình duyệt không tải lại trang hay chuyển tiếp sang một trang mới, mà nội dung được cập nhật trên cùng một trang mà vẫn duy trì trạng thái và điều hướng nội bộ một cách liền mạch.

Một website theo mô hình client-server, bất kể là SPA hay không, vẫn phân chia nhiệm vụ rõ ràng giữa client và server Tuy nhiên với SPA (Single Page Application), sự tách biệt giữa client-side và server-side trở nên rõ ràng hơn bao giờ hết Client-side không chỉ hiển thị giao diện mà còn thực hiện xác thực dữ liệu, xử lý tương tác người dùng và tạo hiệu ứng động, nhằm nâng cao trải nghiệm người dùng; trong khi server-side đảm nhận lưu trữ và xử lý dữ liệu, cung cấp API cho client để bảo mật và tối ưu hiệu suất.

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ò là nơi mô tả state và lưu trữ business logic, đại diện cho lõi của ứng dụng và được thể hiện qua tầng view Việc sử dụng tầng domain không phụ thuộc framework, cho phép bạn làm việc với Angular, React hay Vue một cách nhất quán và tối ưu hóa quản lý nghiệp vụ.

• 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

Có rất nhiều nội dung lặp lại trên đa số website Một số thành phần vẫn giữ nguyên khi người dùng điều hướng, chẳng hạn header, footer, logo và thanh điều hướng Một số khu vực nằm ở vị trí cố định như thanh lọc (filter bar) và banner SPA (Single Page Application) tận dụng hiệu quả các yếu tố lặp lại này Nhờ khả năng cập nhật các phần thay đổi trên trang thay vì tải lại toàn bộ trang, SPA giúp loại bỏ sự gián đoạn khi người dùng trải nghiệm các trang nối tiếp nhau.

Trái ngược với single page application chính là multiple pages application.

Trong một ứng dụng web nhiều trang, các trang được điều hướng ở phía máy chủ theo hành động của người dùng Ví dụ với PHP, file điều hướng phổ biến là index.php, nơi xử lý yêu cầu và trả về nội dung tương ứng Mỗi lần chuyển hướng, trình duyệt sẽ tải lại toàn bộ nội dung của trang từ máy chủ, dẫn đến một lần tải trang hoàn chỉnh.

Để sao lưu đầy đủ tài nguyên của một trang web một cách hợp pháp và hiệu quả, hãy đảm bảo có sự cho phép từ chủ sở hữu và dùng công cụ phù hợp để lấy toàn bộ nội dung, kể cả những phần lặp lại giữa các trang như header và footer nhằm duy trì cấu trúc và trải nghiệm người dùng nhất quán Quá trình này không chỉ giúp bảo vệ dữ liệu, phục hồi nhanh khi gặp sự cố mà còn hỗ trợ phân tích và tối ưu hóa SEO, cũng như thuận tiện cho việc tái triển khai hoặc sao chép trang trên các môi trường khác nhau mà vẫn tôn trọng quyền sở hữu trí tuệ và điều khoản dịch vụ.

Trước khi SPA ra đời, các ứng dụng web nhiều trang (MPA) thường được xây dựng theo mô hình MVC — một kiểu lập trình truyền thống gồm ba thành phần: Model (dữ liệu và logic nghiệp vụ), View (giao diện người dùng) và Controller (điều hướng và xử lý sự kiện) Việc phân tách rõ ràng giữa model, view và controller giúp quản lý dữ liệu và giao diện độc lập, tăng tính modular, dễ bảo trì và mở rộng cho ứng dụng web.

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).

Trong kiến trúc MVC, Model là phần đảm nhiệm thao tác với cơ sở dữ liệu, chứa các hàm và phương thức truy vấn trực tiếp với dữ liệu Controller sẽ gọi những hàm, phương thức này để lấy dữ liệu và sau đó gửi dữ liệu qua view để hiển thị cho người dùng.

View là phần giao diện hiển thị trên trình duyệt dành cho người dùng, đảm nhận ghi nhận hành vi của người dùng và trả lại kết quả nhận được từ controller.

Controller là thành phần trong kiến trúc MVC đảm nhận vai trò quản lý và điều phối luồng hoạt động của ứng dụng Nó nhận các yêu cầu từ client, thực thi truy vấn cơ sở dữ liệu thông qua Model và trả kết quả về View để hiển thị cho người dùng.

Lập trình front-end

HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu thiết kế để tạo các trang web trên World Wide Web; cùng với CSS và JavaScript, HTML là một trong những công cụ quan trọng nhất trong thiết kế website HTML được định nghĩa như một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần xuất bản phức tạp HTML đã trở thành chuẩn mực của Internet do World Wide Web Consortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999); sau đó các nhà phát triển đã chuyển sang XHTML Hiện nay, phiên bản mới nhất của ngôn ngữ này là HTML5.

CSS (Cascading Style Sheets) là ngôn ngữ dùng để mô tả cách trình bày các tài liệu viết bằng HTML và XHTML Mục đích của CSS là hạn chế tối đa việc làm rối mã HTML bằng các quy tắc kiểu dáng như chữ đậm, chữ in nghiêng, gạch chân và màu sắc, giúp mã nguồn trang web gọn gàng và tách nội dung khỏi định dạng hiển thị Việc tách nội dung và định dạng cho phép cập nhật nội dung dễ dàng hơn và cho phép tái sử dụng các kiểu dáng cho nhiều trang web, tránh phải lặp lại công việc định dạng cho các trang giống nhau.

JavaScript (JS) là ngôn ngữ lập trình thông dịch được dùng rộng rãi cho cả client-side và server-side (với Node.js) Nếu HTML được ví như khung xương của người máy và CSS là quần áo, thì JavaScript được xem là động cơ giúp máy móc vận hành, mang lại sự sống động và khả năng tương tác cho trang web Nhờ JS, người dùng có thể tương tác trực tiếp với nội dung trên trình duyệt, từ đó trang web trở nên động và nổi bật so với trang web tĩnh JavaScript đóng vai trò then chốt trong phát triển web hiện đại và kết hợp mượt mà với HTML và CSS để xây dựng ứng dụng web động, tối ưu trải nghiệm người dùng và hỗ trợ SEO tốt hơn cho các trang web.

Tailwind là một CSS framework theo hướng utility-first, cung cấp các lớp tiện ích nhỏ như text-black và p-4 để xây dựng nhanh các giao diện người dùng tùy chỉnh Đây là một CSS framework cấp thấp (low-level) nhưng có mức độ tùy biến cao, cho phép bạn kiểm soát chi tiết giao diện mà không áp đặt giới hạn Tailwind cung cấp đầy đủ các công cụ bạn cần để xây dựng các thiết kế riêng mà không có bất kỳ sự ràng buộc nào.

Livewire là một full-stack framework dành cho Laravel, giúp việc xây dựng các giao diện động trở nên đơn giản và hiệu quả hơn Đây là lựa chọn tuyệt vời cho những ai muốn phát triển một SPA mà vẫn tránh được sự phức tạp của các framework frontend như React.js và Vue.js.

Lập trình back-end

3.3.1 Ngôn ngữ lập trình PHP và framework Laravel

PHP (PHP: Hypertext Preprocessor) là một ngôn ngữ lập trình kịch bản, hay một loại mã lệnh dùng để phát triển ứng dụng phía máy chủ (server-side), mã nguồn mở và dùng cho mục đích tổng quát Nó rất phù hợp với web và có thể dễ dàng nhúng vào trang HTML Nhờ được tối ưu hoá cho các ứng dụng web, PHP có tốc độ nhanh, mã nguồn gọn và cú pháp tương đồng với Java và C, giúp dễ học và rút ngắn thời gian xây dựng sản phẩm so với các ngôn ngữ khác Do đó, PHP nhanh chóng trở thành ngôn ngữ lập trình web phổ biến nhất thế giới.

Laravel là một framework PHP cực mạnh và hiện đang là một trong những framework PHP phổ biến nhất hiện nay Nó gây ấn tượng với tốc độ xử lý nhanh, kho tài nguyên phong phú sẵn có và tính dễ sử dụng cao Bên cạnh đó, bảo mật của Laravel ở mức cao nhờ sử dụng PDO để chống SQL Injection và một trường token để chống CSRF Việc kết nối và truy xuất dữ liệu từ cơ sở dữ liệu được thực hiện dễ dàng thông qua lớp Model.

MySQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến trên toàn cầu, hoạt động theo mô hình client-server và được nhiều nhà phát triển ưa chuộng nhờ tốc độ xử lý cao, sự ổn định và dễ sử dụng Khả năng chạy trên nhiều hệ điều hành, khả năng di động và kho hàm tiện ích mạnh mẽ giúp MySQL phù hợp cho các ứng dụng có truy cập CSDL qua Internet Là hệ quản trị cơ sở dữ liệu quan hệ dựa trên ngôn ngữ SQL, MySQL tối ưu cho PHP và là nơi lưu trữ dữ liệu cho các trang web một cách hiệu quả.

Workbrech is a web server toolkit built on the integration of five core components: Cross-Platform (X), Apache (A), MariaDB (M), PHP (P), and Perl (P) It delivers a portable web server environment that runs on Linux, macOS, Windows, Solaris, and other cross-platform systems The main advantages of Workbrech are that it is open-source, easy to configure, lightweight, and supports PHP and MariaDB running on the Apache web server, making it a practical solution for local development and versatile web projects.

PHÁT TRIỂN VÀ TRIỂN KHAI ỨNG DỤNG

Thiết kế kiến trúc

4.1.1 Lựa chọn kiến trúc phần mềm

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.

Hình 0.2 Mô hình client server Ý tưởng của mô hình kiến trúc này là: client (máy khách) sẽ gửi yêu cầu

(request) đến server (máy chủ, cung ứng dịch vụ cho máy khách) Server sẽ xử lý dữ liệu và gửi kết quả về cho client

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à nơi lưu trữ tài nguyên, cài đặt các chương trình dịch vụ và thực hiện các yêu cầu của client Đây có thể là một máy tính hoặc một chuỗi máy tính liên kết với nhau có tốc độ xử lý cao, được dùng để phục vụ cho việc chia sẻ tài nguyên như file ảnh, file html và dữ liệu cho nhiều máy khách.

Trong kiến trúc client-server, client đóng vai trò gửi các yêu cầu đến máy chủ để thực hiện các nhiệm vụ như lấy dữ liệu từ cơ sở dữ liệu hoặc gửi email Client bao gồm máy tính và các thiết bị điện tử nói chung, như desktop và laptop, là các đầu cuối người dùng tương tác để kích hoạt các chức năng trên máy chủ.

Kiến trúc client-server tập trung các ứng dụng và chức năng vào một hoặc nhiều máy chủ được ủy quyền, giúp tập trung tài nguyên và quản lý hệ thống hiệu quả Khi nhận một yêu cầu từ client, máy chủ có thể chuyển tiếp yêu cầu đó cho máy chủ khác, ví dụ như máy chủ cơ sở dữ liệu, vì nó chưa thể xử lý toàn bộ yêu cầu ngay tại chỗ Các máy chủ đóng vai trò là trung tâm của hệ thống, cho phép chia sẻ tài nguyên cho nhiều ứng dụng client Mô hình này tối ưu nhờ tốc độ xử lý và khả năng truy vấn dữ liệu của máy chủ Một ứng dụng SPA (Single-Page Application) tận dụng kiến trúc client-server, làm cho client-side và server-side tách biệt rõ ràng hơn bao giờ hết Trong đó, phần client xử lý nhiều tác vụ hơn, giúp giảm tải cho máy chủ.

Trong hệ thống client-server, hai thành phần chính là client và server luôn phải giao tiếp với nhau trong suốt quá trình hoạt động Toàn bộ quá trình này dựa trên giao thức chuẩn TCP/IP, đảm bảo cách thức đóng gói, truyền và định tuyến dữ liệu giữa các máy tính trên mạng Việc giao tiếp giữa client và server theo TCP/IP cho phép client gửi yêu cầu và server phản hồi một cách tin cậy và có hiệu suất, đồng thời hỗ trợ khả năng mở rộng và tương thích giữa các dịch vụ trực tuyến.

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à tập hợp các component trong giao diện người dùng, mỗi component đảm nhận một vai trò riêng biệt và có thể liên kết với nhau để hình 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à phần nằm giữa Route và Controller, gồm các lớp đảm nhận nhiệm vụ kiểm tra và bảo vệ sự truy cập không hợp lệ vào controller theo các điều kiện xác định Nó hoạt động như một lớp trung gian, thực thi các kiểm tra xác thực, phân quyền và xử lý lỗi trước khi yêu cầu được chuyển tới Controller Nhờ middleware, ứng dụng có thể kiểm soát truy cập một cách an toàn, ngăn chặn truy cập trái phép và đảm bảo các quy tắc bảo mật được áp dụng nhất quán trên mọi tuyến đường.

Điều này có nghĩa là nếu bạn định nghĩa trong lớp Middleware rằng người dùng phải đăng nhập để sử dụng một phương thức nào đó trong controller, thì khi người dùng chưa đăng nhập, bất kỳ lời gọi đến phương thức đó cũng sẽ không được thực thi Middleware sẽ kiểm tra xác thực và từ chối truy cập để đảm bảo kiểm soát truy cập và tăng cường bảo mật cho ứng dụng Nói cách khác, dù có gọi trực tiếp phương thức trong controller hay qua bất kỳ điểm vào nào khác, hệ thống vẫn ngăn chặn và không cho phép thực thi cho đến khi người dùng đăng nhập thành công.

Provider: gồm các class như AuthServiceProvider, RouteServiceProvider,… hỗ trợ cho việc định tuyến hay bảo mật trong Route

Models: Gồm các class kế thừa class Model, có nhiệm vụ khởi tạo hoặc lấy dữ liệu trong database.

Thiết kế chi tiết

4.2.1.1 Yêu cầu về thiết kế

Giao diện phần mềm được thiết kế hướng tới sự thân thiện với người dùng, đảm bảo hiển thị tốt trên màn hình từ 14 inch đến 18,5 inch và hiển thị đầy đủ các thông tin, thông báo quan trọng Bố cục giao diện cân đối, các thành phần được sắp xếp hài hòa, phù hợp với chuỗi thao tác của người dùng để phục vụ cho một nghiệp vụ cụ thể Màu sắc đơn giản, hài hòa mang lại cảm giác dễ chịu và tăng khả năng tập trung, từ đó nâng cao trải nghiệm người dùng và hiệu quả làm việc với giao diện phần mềm.

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 kiểu giao diện chính: dành cho quản trị viên và dành cho khách hàng Đối với giao diện quản trị viên, các ô nhập liệu được thiết kế để thao tác liên tục bằng bàn phím, không phụ thuộc chuột, và có sự liên kết chặt chẽ giữa các trường nhằm thể hiện rõ mối关系 dữ liệu và tối ưu luồng làm việc Đối với giao diện dành cho khách hàng, cần tránh làm gián đoạn thao tác và đảm bảo hiển thị đầy đủ thông tin dữ liệu để người dùng có trải nghiệm mượt mà, dễ tra cứu và đưa ra quyết định.

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

Gồm các màn hình 2 loại màn hình: dành cho nội bộ và người dùng Chúng không quá khác biệt, chủ yếu khác ở layout chung, các form nhập liệu gần giống nhau, các thông báo, xác nhận như nhau.

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”

1 insertAddTimesheet get id timesheet and call Users is admin

2 listAddTimesheet index list additional timesheet

4 listDetailAddTimeshe List detail Additional timesheet et

8 approvalTimesheet list add-timesheet approval

9 getAddtimesheetById get timesheet by id

Bảng 0.2 Bảng mô tả lớp “AddTimesheetController”

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”

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”

1 index show all list post

4 edit find post by slug

5 update Update post by id

Bảng 0.5 Bảng mô tả lớp “PostController”

4.2.3 Thiết kế cơ sở dữ liệu

Hình 4.8: Biểu đồ dữ liệu quan hệ

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 https://code.visualstudio.com/ code 64 bit version 1.56 Chương trình tạo MySQL https://www.mysql.com/products/workbench web server Workbench

8.0 CE Công cụ thiết kế Astah UML https://astah.net/ bản vẽ Công cụ thiết kế Draw https://app.diagrams.net/

E-R diagram Ngôn ngữ lập PHP 7.4.11 https://www.php.net trình back end

Frame work back Laravel 8 https://laravel.com/docs/8.x end

Ngôn ngữ lập JavaScript trình front-end ES6

Ngôn ngữ front- Html5, css3 end

Framework front- Bootstrap4, https://getbootstrap.com end Taiwind

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 được thể hiện ở Hình 4.9 và trang login ở Hình 4.15 yêu cầu người dùng nhập đúng địa chỉ Email và mật khẩu để có thể truy cập hệ thống Khi người dùng nhập đúng dữ liệu cho tên đăng nhập và mật khẩu, hệ thống sẽ xác thực và cho phép đăng nhập Người dùng nhấn vào nút Login; nếu thông tin đăng nhập chính xác, giao diện đăng nhập sẽ được chuyển sang giao diện chính của hệ thống.

Figure 4.10 depicts the Home page, and Figure 4.16 demonstrates that after a successful login, the Home page displays a left-side menu with items including Dashboard, Timesheet, Overtime, Additional Timesheet, Additional Project, and Instructions for Use.

Hình 4.11: Màn Additional Timesheet Create

Trong hình 4.17, giao diện màn Bổ sung công cho phép bạn chọn một admin kiểm duyệt, đính kèm ảnh làm bằng chứng và điền lý do liên quan Hãy nhớ không được bỏ trống bất kỳ trường nào để hồ sơ được xác nhận đầy đủ.

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

Trong Hình 4.19 là giao diện để tạo dự án, cho phép người dùng nhập đầy đủ thông tin 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 thời có thể thêm thành viên với các vị trí khác nhau như developer, tester Để đảm bảo tính hợp lệ của dự án, ngày bắt đầu của dự án luôn nhỏ hơn hoặc bằng ngày kết thúc; ngày bắt đầu tham gia của một người và ngày kết thúc tham gia của họ phải nằm trong phạm vi thời gian diễn ra dự án, và ngày kết thúc tham gia của họ phải lớn hơn hoặc bằng ngày bắt đầu tham gia Những điều kiện này giúp quản lý dự án minh bạch, theo dõi tiến độ và phân bổ nguồn lực hiệu quả.

Tiêu đề	Spa Trong Phần Mềm Quản Lý Doanh Nghiệp ECS
Tác giả	Nguyễn Thanh Tùng
Người hướng dẫn	TS. Vũ Văn Định
Trường học	Trường Đại Học Điện Lực
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Báo cáo thực tập tốt nghiệp
Năm xuất bản	2022
Thành phố	Hà Nội

Định dạng
Số trang	90
Dung lượng	1,24 MB