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

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN 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 Sinh viên thực : NGUYỄN THANH TÙNG Giảng viên hướng dẫn : TS VŨ VĂN ĐỊNH Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Lớp : D13CNPM4 Khóa : 2018-2023 Hà Nội, tháng 10 năm 2022 PHIẾU CHẤM ĐIỂM Sinh viên thực hiện: STT Họ tên Nguyễn Thanh Tùng 18810310359 Giáo viên chấm điểm: Họ tên Giáo viên 1: Giáo viên 2: Mục Lục PHIẾU CHẤM ĐIỂM LỜI MỞ ĐẦU CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Đặt vấn đề 1.2 Mục tiêu phạm vi dự án 1.3 Định hướng giải pháp 1.4 Bố cục báo cáo .10 CHƯƠNG 2: KHẢO SÁT VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12 2.1 Khảo sát hệ thống 12 2.1.1 Tổng quan quản lý doanh nghiệp 12 2.1.2 Hệ thống 12 2.1.3 Nội dung khảo sát đánh giá trạng 12 2.1.4 Nắm bắt yêu cầu 13 2.2 Tổng quan chức 16 2.2.1 Biểu đồ use case tổng quát 17 2.2.2 Biểu đồ use case phân rã chức “Timesheet Management” 18 2.2.3 Biểu đồ use case phân rã chức “Project Management” 19 2.2.4 Biểu đồ use case phân rã chức “User Management” 20 2.2.5 Biểu đồ use case phân rã chức “Post Management” 21 2.2.6 Biểu đồ use case phân rã chức “Add Timesheet Management” 22 2.2.7 Biểu đồ use case phân rã chức “Add Timesheet Approval Management” 23 2.2.8 Biểu đồ use case phân rã chức “Comment Post” 24 2.3 Đặc tả chức .25 2.3.1 Đặc tả yêu cầu chức đăng nhập 25 2.3.2 Đặc tả yêu cầu chức Check in 27 2.3.3 Đặc tả yêu cầu chức Check out 29 2.3.4 Đặc tả yêu cầu chức Add Timesheet Management 32 2.3.5 Đặc tả yêu cầu chức Add Timesheet Approval Management 35 2.3.6 Đặc tả yêu cầu chức Project Management 37 2.3.7 Đặc tả yêu cầu chức User Management 40 2.3.8 Đặc tả yêu cầu chức Post Management 44 2.4 Yêu cầu phi chức 47 CHƯƠNG 3: CÔNG NGHỆ SỬ DỤNG 48 3.1 Single page application 48 3.1.1 Định nghĩa 48 3.1.2 Cơ sở lý thuyết .49 3.1.3 Những bất cập khác 49 3.2 Lập trình front-end 51 3.2.1 Ngôn ngữ 51 3.2.2 Framework khác 52 3.3 Lập trình back-end 52 3.3.1 Ngôn ngữ lập trình PHP framework Laravel 52 3.2.2 Cơ sở liệu 53 CHƯƠNG 4: PHÁT TRIỂN VÀ TRIỂN KHAI ỨNG DỤNG 54 4.1 Thiết kế kiến trúc 54 4.1.1 Lựa chọn kiến trúc phần mềm 54 4.1.2 Thiết kế tổng quan 55 4.2 Thiết kế chi tiết 56 4.2.1 Thiết kế giao diện 56 4.2.2 Thiết kế lớp 60 4.2.3 Thiết kế sở liệu 63 4.3 Xây dựng ứng dụng 68 4.3.1 Thư viện công cụ sử dụng 68 4.3.2 Minh họa chức 69 4.4 Kiểm thử triển khai 72 4.4.1 Kiểm thử 72 4.4.2 Triển khai .73 KẾT LUẬN 77 TÀI LIỆU THAM KHẢO 78 Danh Mục Hình Ảnh Hình 2.1: Mơ hình tác 16 Hình 2.2: Biểu đồ use case tổng quát 17 Hình 2.3: Biểu đồ use case phân rã Timesheet Management 18 Hình 2.4: Biểu đồ use case phân rã Project Management 19 Hình 2.5: Biểu đồ use case phân rã User Management 20 Hình 2.6: Biểu đồ use case phân rã Post Management 21 Hình 2.7: Biểu đồ use case phân rã Add Timesheet Management 22 Hình 2.8: Biểu đồ use case phân rã Add Timesheet Approval Management 23 Hình 2.9: Biểu đồ use case phân rã Comment post 24 Hình 2.10: Biểu đồ hoạt động chức Đăng Nhập 26 Hình 2.11: Biểu đồ use case chức Check in 28 Hình 2.12: Biểu đồ hoạt động chức Check out 31 Hình 2.13: Biểu đồ use case chức Bổ sung công 34 Hình 2.14: Biểu đồ hoạt động chức Duyệt bổ sung công 36 Hình 2.15: Biểu đồ hoạt động chức Quản lý dự án 39 Hình 2.15: Biểu đồ hoạt động chức User Management 43 Hình 2.16: Biểu đồ hoạt động chức Post Management 46 Hình 3.1: Mơ hình MVC 50 Hình 4.1: Mơ hình client server 54 Hình 4.2: Biểu đồ phụ thuộc gói 55 Hình 4.3: Layout ECS nội 57 Hình 4.4: Layout ECS customer 58 Hình 4.5: Nhập Liệu 58 Hình 4.6: Confirm 59 Hình 4.7: Notification 59 Hình 4.8: Biểu đồ liệu quan hệ 63 Hình 4.9: Trang đăng nhập 69 Hình 4.10: Trang chủ 71 Hình 4.11: Màn Additional Timesheet Create 71 Hình 4.12: Màn Additional Timesheet List 72 Hình 4.13: Màn Additional Project 73 Danh Mục Bảng Bảng 2.1: Bảng liệu đầu vào use case “Sign up” 27 Bảng 2.2: Bảng liệu đầu vào use case “Add timesheet” 34 Bảng 2.3: Bảng liệu đầu vào use case “Add timesheet Approval” 36 Bảng 2.4: Bảng liệu đầu vào use case “Project Management” 39 Bảng 2.5: Bảng liệu đầu vào use case “User Management” 43 Bảng 2.6: Bảng liệu đầu vào use case “Post Management” 46 Bảng 4.1: Bảng mô tả lớp “TimesheetController” 61 Bảng 4.2: Bảng mô tả lớp “AddTimesheetController” 62 Bảng 4.3: Bảng mô tả lớp “ProjectController” 62 Bảng 4.4: Bảng mô tả lớp “UserController” 64 Bảng 4.5: Bảng mô tả lớp “PostController” 64 Bảng 4.6: Danh sách thư viện công cụ sử dụng 69 Bảng 4.7: Bảng kiểm thử chức CRUD dự án 74 LỜI MỞ ĐẦU Hiện nay, CNTT phát triển mạnh mẽ nước ta Máy tính điện tử khơng cịn phương tiện quý mà ngày gần gũi với người Công tác quản lý ngày nhiều quan đơn vị quan tâm quản lý quản lý cho đạt hiệu cao như: nhanh, bảo mật, thân thiện, dễ sử dụng làm việc từ xa Đứng trước diễn biến phức tạp dịch covid-19 tuân thủ quy tắc 5K sẵn sàng thực chủ chương: “Ai đâu yên đó” nhà nước Với việc học online có phần mềm tiếng như: zoom, google meet, Trong doanh nghiệp áp dụng làm remote- tức làm việc nhà, làm việc từ xa công ty doanh nghiệp ngày phổ biến Chính cần có phần mềm quản lý thay cho tệp hồ sơ dày cộp, thay cho ngăn tủ chứa đựng hồ sơ chiếm nhiều diện tích ta phải nhiều thời gian để tìm kiếm thơng tin cần thiết hay liệu quan trọng Tất điều bất tiện tích hợp phần mềm quản lý sản phẩm Xây dựng hệ thống quản lý bán hàng phù hợp với cơng tác quản lý doanh nghiệp có ý nghĩa to lớn Chính mà em chọn đề tài “SPA Phần mềm quản lý doanh nghiệp ECS”, trình làm báo cáo xây dựng, cịn nhiều nhược điểm, thiếu sót, mong thầy cô dẫn bổ sung để báo cáo hoàn thiện Em xin cảm ơn thầy Vũ Văn Định dẫn để em hoàn thiện báo cáo DANH MỤC CÁC TỪ VIẾT TẮT API Application Programming Interface Giao diện lập trình ứng dụng HTML HyperText Markup Language Ngơn ngữ đánh dấu siêu văn CSS Cascading Style Sheets Ngôn ngữ định dạng kiểu SPA Single page application Ứng dụng trang MPA Multiple pages application Ứng dụng nhiều trang CNTT Công nghệ thông tin ĐATN Đồ án tốt nghiệp SV Sinh viên 10 edit update 64 delete detail uploadImage Bảng 0.5 Bảng mô tả lớp “ 4.2.3 Thiết kế sở liệu 4.2.3.1 Sơ đồ quan hệ Hình 4.8: Biểu đồ liệu quan hệ 65 4.2.3.2 Chi tiết bảng Bảng users Bảng Timesheets 66 Bảng AddTimesheets Bảng Departments Bảng Project Type 67 Bảng Roles Bảng User has project Bảng Project 68 Bảng Positions Bảng Departments Bảng Comments 69 4.3 Xây dựng ứng dụng 4.3.1 Thư viện công cụ sử dụng Mục đích IDE lập trình Chương trình tạo web server Công cụ thiết kế vẽ Công cụ thiết kế E-R diagram Ngơn ngữ lập trình back end Frame work back end Ngơn ngữ lập trình front-end Ngơn ngữ frontend Framework frontend Bảng 0.6: Danh sách thư viện công cụ sử dụng 70 4.3.2 Minh họa chức Hình 4.9: Trang đăng nhập Hình 4.15 trang login Yêu cầu người dùng cần nhập Email Password để truy cập vào Hệ Thống o Khi người dùng nhập liệu vào tên đăng nhập mật o Người dùng nhấn vào nút Login o Nhập xác giao diện đăng nhập chuyển sang giao diện 71 Hình 4.10: Trang chủ Hình 4.16 đăng nhập thành cơng, Trang Chủ với menu nằm bên trái bao gồm: Dashboard, Timesheet, Overtime, Additional Timesheet, Additional Project, Instructions for use Hình 4.11: Màn Additional Timesheet Create 72 Hình 4.17 giao diện Bổ sung cơng, Bạn chọn admin kiểm duyệt, lấy ảnh làm chứng điền lý Hãy nhớ không bổ trống Hình 4.12: Màn Additional Timesheet List Hình 4.18 giao danh sách công số tạo với chức là: Xem chi tiết: Khi nhấn vào button: ‘Detail’ tức hiển thị chi tiết Bổ sung công ❖ Chỉnh Sửa ❖ ❖ Xóa đơn bổ sung tạo ❖ Tìm kiếm đơn bổ sung cơng 73 Hình 4.13: Màn Additional Project Hình 4.19, Đây giao diện mà tạo dự án, Bạn tạo với 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, Mơ tả Bên cạnh thêm member với vị trí developer, tester, khác Với điều kiện thỏa mãn start date project nhỏ end date project, start date mà user tham nằm khoảng thời gian diễn dự án, Và end date user nằm khoảng thời gian diễn dự lớn start date user tham 4.4 Kiểm thử triển khai 4.4.1 Kiểm thử Kiểm thử cho chức CRUD project Chức Thêm dự án 74 Cập nhật xoá dự án Xố dự án Tìm kiếm Phân trang Bảng 0.7: Bảng kiểm thử chức CRUD dự án 75 4.4.2 Triển khai Thiết bị triển khai: laptop dell inspiron 3542, intel(R) core i5-4210U, ram 8gb, hình 15,6 inch Một số phần mềm cần cài đặt: • Hệ điều hành window 10 pro • Visual studio code 64 bit version 1.56 • Xampp 64 bit version 8.0.6 • NodeJs version 14.17.0 • Composer Tải code về, có hai phần code back-end front-end Sau đó, fontend chạy lệnh npm install để npm tải package cần dùng Ở phần back-end, chạy lệnh composer init để composer tải package, dependencies tệp composer.json Tạo database phpmyadmin Xampp import data vào 76 KẾT LUẬN Trong q trình thực báo cáo mơn “Thực tập tốt nghiệp”, em cố gắng để tìm hiểu học hỏi khả cịn hạn chế nên khơng tránh khỏi sai sót, nên chưa giải triệt để vấn đề đặt Chúng em mong nhận thông cảm quý thầy cô Chúng em xin chân thành cảm ơn Những kết đạt được: - Củng cố kinh nghiệm làm việc nhóm - Biết cách quản lý dự án, xem tiến độ dự án - Có thêm kinh nghiệm làm php-laravel, Taiwild, HTML, CSS, JS - Có thêm kinh nghiệm ước tính thời gian, Những hạn chế: - Do hạn chế nên chưa thể hoàn thiện hết chức - Nghiệp vụ dừng mực làm nhanh chưa tối ưu - Mặc dù làm trang web SPA không load lại trang giúp phần tăng trải nghiệp cho client performance chưa mượt, có nhiều nguyên chủ yếu chưa tối ưu câu truy vấn, … Hướng phát triển tương lai: - Sửa chữa lỗi nhỏ tồn lại dự án - Sẽ phát triển thêm giao diện người dùng với chức ví dụ như: Mua bán thành viên nội bộ, trang tin tức nội kết hợp phần mềm chat để thành viên nội tương tác với 77 TÀI LIỆU THAM KHẢO [1] [2] [3] [4] Trang web: https://laravel.com/ Trang web: https://laravel-livewire.com/ Trang web: https://tailwindcss.com/ Trang web: https://laragon.org/ 78 ... tích hợp phần mềm quản lý sản phẩm Xây dựng hệ thống quản lý bán hàng phù hợp với cơng tác quản lý doanh nghiệp có ý nghĩa to lớn Chính mà em chọn đề tài ? ?SPA Phần mềm quản lý doanh nghiệp ECS? ??,... trò chuyện 1.2 Mục tiêu phạm vi dự án Đề tài xây dựng phần mềm quản lý doanh nghiệp ECS có mục tiêu giúp doanh nghiệp quản lý user, quản lý dự án, quản lý post, chấm cơng Bên 11 phía giao diện... quan quản lý doanh nghiệp Đề tài vừa có giá trị thực tế vừa có giá trị việc học tập sau thực đề tài, em vừa nắm vững kiến thức môn học vừa bồi dưỡng cho thân thêm kiến thức nghiệp vụ quản lý doanh