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 .2 LỜI MỞ ĐẦU CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Đặt vấn đề .8 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á 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 q 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, nhiều nhược điểm, thiếu sót, mong thầy 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 UserController STT Tên phương thức create Mô tả Show the form for creating a new user insert index insert a new user created resource in storage Show all users edit Show the form for editing user by ID update Update user by id resource in storage delete Delete user by id resource in storage leave Show all users leave detail Show detail user Bảng 0.4 Bảng mô tả lớp “UserController” PostController STT Tên phương thức index show all list post create Create new a post insert insert a new post edit find post by slug update Update post by id Mô tả 64 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ệ 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 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 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 Giá trị đầu vào Đầu cần đạt Thêm dự án Nhập thiếu Khung input đỏ trỏ Đạt nhiều chuột hiển thị yêu cầu Kết trường bắt buộc 74 người dùng điền thông 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 xố nhận xố 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 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] Trang web: https://laravel.com/ [2] Trang web: https://laravel-livewire.com/ [3] Trang web: https://tailwindcss.com/ [4] Trang web: https://laragon.org/ 78