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 Nội dung thực Điểm Chữ ký Giáo viên chấm điểm: Họ tên Chữ ký Ghi 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 và đánh giá hiện 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 Ản h 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ản g 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 hồ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 update Update post by id delete Delete post detail detail post uploadImage Upload Image Ckeditor Bảng 0.5 Bảng mô tả lớp “PostController” 4.2.3 Thiết kế sở liệu 4.2.3.1 Sơ đồ quan hệ 66 Hình 4.8: Biểu đồ liệu quan hệ 67 4.2.3.2 Chi tiết bảng Bảng users Bảng Timesheets 68 Bảng AddTimesheets Bảng Departments Bảng Project Type 69 Bảng Roles Bảng User has project Bảng Project 70 Bảng Positions Bảng Departments Bảng Comments 71 4.3 Xây dựng ứng dụng 4.3.1 Thư viện công cụ sử dụng Mục đích Cơng cụ Địa 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 web server Workbench https://www.mysql.com/products/workbench 8.0 CE Công cụ thiết kế Astah UML https://astah.net/ Draw https://app.diagrams.net/ PHP 7.4.11 https://www.php.net Laravel https://laravel.com/docs/8.x 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 JavaScript trình front-end ES6 Ngôn ngữ front- Html5, css3 end Framework front- Bootstrap4, end https://getbootstrap.com Taiwind Bảng 0.6: Danh sách thư viện công cụ sử dụng 72 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 73 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 74 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 75 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 Giá trị đầu vào Đầu cần đạt Kết Thêm dự án Nhập thiếu Khung input đỏ trỏ Đạt nhiều chuột hiển thị yêu cầu trường bắt buộc người dùng điền thông 76 tin trường Cập nhật Click vào button Button khơng hoạt động xố dự án cập nhật đặt màu background xố thể khơng thể ấn Chọn sách cần Hiển thị cảnh báo xác xoá nhận xoá Xác nhận Xố dự án Đạt Đạt xố thơng báo xố thành cơng Tìm kiếm Nhập thơng tin Hiển thị danh sách sách trường cần tương ứng với tất tìm kiếm thơng tin nhập Các ô Đạt không nhập mặc định không tìm kiếm Phân trang Click vào button Hiển thị danh sách sách next page tương ứng khơng bỏ sót pre page ghi Đạt Bảng 0.7: Bảng kiểm thử chức CRUD dự án 4.4.2 Triển khai 77 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 78 KẾT LUẬN Trong 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 cịn hạn chế nên chưa thể hồ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 79 TÀI LIỆU THAM KHẢO [1] Trang web: https://laravel.com/ [2] Trang web: https://laravel-livewire.com/ [3] Trang web: https://tailwindcss.com/ [4] Trang web: https://laragon.org/ 80