Xây dựng giao diện cho website quản lý công việc jari

TRƯỜNG ĐẠI HỌC KINH TẾ KHOA THỐNG KÊ – TIN HỌC BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH TIN HỌC QUẢN LÝ XÂY DỰNG GIAO DIỆN CHO WEBSITE QUẢN LÝ CÔNG VIỆC JARI Đơn vị thực tập : Công ty dịch vụ Mobifone khu vực Giảng viên hướng dẫn : TS Nguyễn Thị Uyên Nhi LỜI CẢM ƠN Lời đầu tiên, em xin chân thành cảm ơn cô Nguyễn Thị Uyên Nhi – giáo viên hướng dẫn em tập nghề nghiệp này, chia tận tình, giúp đỡ em ii khoảng thời gian thực tập vừa qua Đồng thời, em xin gửi lời cảm ơn đến anh Lê Minh Nhật Thiên – mentor em đợt thực tập này, bảo cho em , traning kỹ năng, chia kinh nghiệm, hướng dẫn em theo lộ trình Front End Developer cần có gì, giúp em hồn thành đề tài tốt Em xin gửi lời cảm ơn đến Công ty dịch vụ Mobifone khu vực Phịng Cơng nghệ kỹ thuật tạo điều kiện môi trường để em thực tập tốt cơng ty, hỗ trợ phòng sở vật chất tốt cho em làm việc tốt Do cịn thiếu kinh nghiệm nên q trình thực tập khơng thể tránh khỏi sai sót, em hy vọng q thầy góp ý cho em để em hồn thiện thân, đồng thời nâng cao kiến thức kinh nghiệm Một lần Em xin cảm ơn cô Nguyễn Thị Uyên Nhi, Công ty dịch vụ Mobifone khu vực anh Lê Minh Nhật Thiên giúp đỡ em trình thực tập thực đề tài iii LỜI CAM ĐOAN Em xin cam đoan đề tài ‘Xây dựng giao diện cho website quản lý công việc JARI’ cơng trình nghiêm cứu độc lập hướng dẫn giáo viên Nguyễn Thị Uyên Nhi mentor Lê Minh Nhật Thiên Đề tài, nội dung báo cáo thực tập sản phẩm trình nghiêm cứu thân thời gian thực tập hè Công ty dịch vụ Mobifone khu vực Ngồi khơng có chép người khác iv MỤC LỤC LỜI CẢM ƠN iii LỜI CAM ĐOAN iv MỤC LỤC v DANH MỤC HÌNH ẢNH vii DANH MỤC BẢNG BIỂU ix DANH MỤC CÁC TỪ VIẾT TẮT x LỜI MỞ ĐẦU 1.1 Giới thiệu doanh nghiệp thực tập 1.2 Tổng quan Front End Developer 1.3 Cơ sở lý thuyết 1.3.1 Ngôn ngữ HTML 1.3.2 Ngôn ngữ CSS 1.3.3 Ngôn ngữ Javascript 10 1.3.4 Thư viện ReactJS 13 1.3.5 Thư viện Bootstrap 16 2.1 Yêu cầu dự án 18 2.2 Các tài liệu hệ thống 18 2.2.1 Userstory 18 2.2.2 Tài liệu BPMN 24 2.2.3 Bản thiết kế giao diện 27 3.1 Quy trình làm việc áp dụng mơ hình scrum 28 3.2 Xây dựng hệ thống 28 3.3 Xây dựng giao diện 29 3.1.1 Giao diện trang Sign In 29 v 3.1.2 Giao diện trang Status Management 35 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN TÀI LIỆU THAM KHẢO CHECK LIST CỦA BÁO CÁO PHỤ LỤC vi DANH MỤC HÌNH ẢNH Hình 1.1 Logo Mobifone Hình 1.2 Tổng quan Front End Developer Hình 1.3.1.1 HTML Hình 1.3.2.1 CSS Hình 1.3.2.6 CSS Box Model Hình 1.3.2.7 CSS Flexbox Hình 1.3.2.8 CSS Position Hình 1.3.3.1 Javascript 10 Hình 1.3.4.1 Reactjs 13 Hình 1.3.5.1 Bootstrap 16 Hình 2.2.2.1 Tài liệu BPMN SignIn 24 Hình 2.2.2.2 Tài liệu BPMN Status Management 25 Hình 2.2.3.1 Design trang SignIn 27 Hình 2.2.3.2 Design trang Status Management 27 Hình 3.1.1.1 Cấu trúc phần tử giao diện trang SignIn 29 Hình 3.1.1.2 Cấu trúc Bootstrap trang SignIn 30 Hình 3.1.1.3 Màn hình hồn thiện trang SignIn 30 Hình 3.1.1.4 Luồng xử lý logic trang SignIn 31 Hình 3.1.1.5 Màn hình thơng báo nhập thiếu trường liệu email 32 Hình 3.1.1.6 Màn hình thơng báo nhập thiếu trường liệu password 32 Hình 3.1.1.7 Màn hình thơng báo nhập sai password 33 Hình 3.1.1.8 Màn hình thơng báo người dùng khơng tồn 34 Hình 3.1.1.9 Màn hình thơng báo lỗi password khơng đủ độ dài 34 Hình 3.1.1.10 Màn hình thơng báo lỗi khơng định dạng username/password 35 Hình 3.1.2.1 Cấu trúc phần tử giao diện trang Status Management 35 DANH MỤC BẢNG BIỂU vii Bảng 2.2.1 Userstory dự án 23 viii DANH MỤC CÁC TỪ VIẾT TẮT Chữ viết tắt Chữ đầy đủ HTML HyperText Markup Language DOM Document Object Model CSS Cascading Style Sheets BS Bootstrap SPA Single Page Application Dev Developer ix LỜI MỞ ĐẦU Mục tiêu đề tài - Nắm quy trình dự án thơng qua tài liệu BA cung cấp (Userstory, BPMN, ) - Hiểu cách vận dụng kiến thức có vào dự án thực tế công ty - Thực xây dựng Client cho module dự án Đăng nhập Quản lý trạng thái công việc Đối tượng phạm vi nghiên cứu - Đối tượng nghiên cứu quản lý công việc, task cần làm làm nhân viên - Phạm vi: Tồn nhân viên team Dev Cơng ty dịch vụ Mobifone khu vực 3 Kết cấu đề tài Đề tài tổ chức gồm phần mở đầu, chương nội dung phần kết luận - Mở đầu - Chương 1: Tổng quan doanh nghiệp thực tập sở lý thuyết - Chương 2: Phân tích hệ thống cho dự án website JARI - Chương 3: Thiết kế giao diện cho dự án website JARI x CHƯƠNG TỔNG QUAN VỀ DOANH NGHIỆP THỰC TẬP VÀ CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu doanh nghiệp thực tập MobiFone thành lập ngày 16/04/1993 với tên gọi ban đầu Công ty thông tin di động (VMS) Ngày 01/12/2014, MobiFone chuyển đổi thành Tổng công ty Viễn thông MobiFone, thuộc Bộ Thông tin Truyền thông Tháng 11/2018, MobiFone chuyển giao quyền đại diện chủ sở hữu Ủy ban Quản lý vốn nhà nước doanh nghiệp Trung tâm Công nghệ thông tin MobiFone đơn vị trực thuộc Tổng công ty Viễn thông MobiFone, chịu trách nhiệm triển khai kinh doanh giải pháp, dịch vụ Công nghệ thơng tin cho khối khách hàng Chính phủ Doanh nghiệp Trung tâm công nghệ số Mobifone phịng ban Cơng ty dịch vụ Mobifone khu vực 3, đảm nhận công việc liên quan đến công nghệ kĩ thuật công ty, bao gồm đội Dev đảm nhiệm việc xây dựng trang web phục vụ cơng ty Hình 1.1 Logo Mobifone xi