Xây dựng giao diện cho hệ thống quản sinh viên

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 HỆ THỐNG QUẢN SINH VIÊN LỜI CẢM ƠN Lời cảm ơn em xin gửi đến ban lãnh đạo Công Ty Cổ Phần Phần Mền SIVIP, anh chị Công ty giúp đỡ em nhiều suốt trình thực tập công ty Em xin gửi đến quý thầy, cô giáo khoa Thống Kê – Tin Học trường Đại Học Kinh Tế – Đại học Đà Nẵng lời cảm ơn chân thành tận tâm giảng dạy và truyền đạt kiến thức, kinh nghiệm quý báu cho em Đặc biệt, em xin cảm ơn cô Nguyễn Thị Uyên Nhi, người tận tình hướng dẫn em hoàn thành bài báo cáo này Cuối em xin cảm ơn anh Nguyễn Đại Từ Chương là mentor hướng dẫn em trực tiếp Công Ty Cổ Phần Phần Mền SIVIP giúp đỡ, cung cấp tài liệu cho em trình thực tập mảng FrontEnd để hoàn thành được kỳ thực tập tốt Vì thời gian và kiến thức cịn hạn hẹp nên bài báo cáo khơng thể tránh khỏi thiếu sót, mong góp ý Cơng Ty, q thầy cô và bạn, để em rút kinh nghiệm và hoàn thành tốt Em xin chân thành cảm ơn! i LỜI CAM ĐOAN Em xin cam đoan đề tài “Xây dựng giao diện quản lý sinh viên” là kết từ trình thực tập doanh nghiệp em hướng dẫn giảng viên hướng dẫn: TS Nguyễn Thị Uyên Nhi và mentor: Nguyễn Đại Từ Chương Đề tài, nội dung báo cáo là sản phẩm mà em được thực hành trình thực tập doanh nghiệp Các liệu, kết trình bày báo cáo là hoàn toàn trung thực, em xin chịu hoàn toàn trách nhiệm với bộ môn và nhà trường có bất kỳ vấn đề nào xảy ii MỤC LỤC CONTENTS LỜI CẢM ƠN i LỜI CAM ĐOAN .i MỤC LỤC .ii DANH MỤC HÌNH ẢNH ii DANH MỤC CÁC TỪ VIẾT TẮT ii LỜI MỞ ĐẦU Yêu cầu đề tài 1.1 Giới thiệu tổng quát doanh nghiệp thực tập và đề tài 1.1.1 Tổng quan công ty 1.1.2 Tổng quan đề tài .3 1.2 Tổng quan vị trí việc làm 1.2.1 Tổng quan về nghề Front End Developer: .4 1.2.2 Tiềm nghề Front End Developer 1.2.3 Vị trí làm việc một Front End Developer .4 1.2.4 Các kỹ cần có mợt Front End Developer .5 1.3 Tổng quan sở lý thuyết 1.3.1 Khái niệm web 1.3.2 Web developer 2.1 Tổng quan công nghệ sử dụng 2.1.1 Giới thiệu HTML, CSS 2.1.2 Tổng quan HTML, CSS 2.1.3 Vai trò HTML, CSS iii 2.2 Giới thiệu JavaScript 2.2.1 Tổng quan JavaScript 10 2.2.2 Ưu điểm hạn chế JavaScript .10 2.2.3 Hoạt động JavaScript website 11 2.3 ReactJS 12 2.3.1 Tổng quan ReactJS 12 2.3.2 Lợi ích ReactJS 13 2.3.3 Ưu điểm và hạn chế ReactJS 13 2.3.4 Hoạt động ReactJS .14 2.5 Các tài liệu hệ thống 14 2.5.1 User story 14 3.1 Cài đặt công cụ và thư viện .17 3.1.1 Cài đặt công cụ 17 3.1.2 Cài đặt thư viện 19 3.2 Triển khai dự án .19 3.2.1 Giao diện trang đăng nhập: 19 3.2.2 Giao diện trang quản lý sinh viên: 20 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .20 TÀI LIỆU THAM KHẢO 23 CHECK LIST CỦA BÁO CÁO 24 PHỤ LỤC 25 DANH MỤC HÌNH Ả Hình 1: HTML - CSS iv Y Hình 2: JavaScript Hình 3: React JS 11 Hình 4: Visual Studio Code 17 Hình 5: Giao diện trang đăng nhập 19 Hình 6: Luồng xử lý trang Đăng nhập .19 Hình 7: Giao diện trang quản lý SV 20 DANH MỤC CÁC TỪ VIẾT TẮT Chữ viết tắt Chữ đầy đủ HTML HyperText Markup Language CSS Cascading Style Sheets v LỜI MỞ ĐẦU Mục tiêu đề tài - Nắm thêm nhiều kiến thức HTML, CSS, JavaScript - Tận dụng kiến thức học xây dựng giao diện trang đăng nhập và trang quản lý sinh viên Yêu cầu đề tài Đề tài “quản lý sinh viên” là một ứng dụng quản lý hồ sơ sinh viên để giúp  khoa Thống Kê Tin Học quản lý và theo dõi thông tin sinh viên Hiện nay, việc quản lý hồ sơ thông tin sinh viên khoa Thống Kê – Tin Học  chủ yếu hồ sơ giấy file excel Vậy nên, đề xuất thiết kế một hệ thống giúp việc quản lý trở nên dễ dàng và nhanh chóng  Mục tiêu đề tài:  Tạo một hệ thống quản lý thông tin, hồ sơ sinh viên và dự án linh hoạt và dễ sử dụng  Tạo giao diện trang là đăng nhập và trang quản lý sinh viên, cung cấp thông tin như; mã sinh viên, họ và tên, ngày tháng năm sinh, GPA, trạng thái,… Đối tượng phạm vi nghiên cứu - Đối tượng nghiên cứu là quản lý hồ sơ sinh viên theo thông tin - Phạm vi nghiên cứu: giáo viên chủ nhiệm, trưởng khoa Kết cấu đề tài Đề tài được tổ chức gồm phần mở đầu, chương nội dung và phần kết luận - Mở đầu - Chương 1: Giới thiệu tổng quan công ty và tổng quan đề tài - Chương 2: Giới thiệu công nghệ sử dụng - Chương 3: Triển khai và xây dựng dự án vi - Kết luận và hướng phát triển vii CHƯƠNG GIỚI THIỆU TỔNG QUAN VỀ CÔNG TY VÀ TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu tổng quát doanh nghiệp thực tập đề tài 1.1.1.Tổng quan công ty - Tên công ty: Công ty Cổ phần Phần mềm Sivip - Ngày thành lập: 6/2011 - Lĩnh vực: Phần mềm kế toán online và giải pháp quản lý toàn diện doanh nghiệp - Website: https://sivip.vn/ - Địa chỉ: 253-255 Văn Tiến Dũng, phường Hòa Xuân, quận Cẩm Lệ, thành phố Đà Nẵng - Sản phẩm chính là Sivip Online, một phiên đột phá, chạy hoàn toàn web, làm việc lúc nơi, thiết bị - Ngoài phiên chuẩn, Sivip cịn có phiên chỉnh sửa theo đặc thù doanh nghiệp - Lợi Sipvip là xây dựng và thành công phần mềm lõi khả tùy biến cao theo quy trình, tốc đợ xử lý nhanh liệu lớn, hướng đến đa kết nối và hợp liệu, giúp tiết kiệm thời gian triển khai Từ mang lại nhiều giá trị gia tăng cho khách hàng 1.1.2.Tổng quan đề tài Đề tài “ Xây dựng giao diện quản lý sinh viên” nhằm vào việc xây dựng một giao diện hệ thống ứng dụng phục vụ việc quản lý thông tin hồ sơ và hoạt động sinh viên khoa Thống Kê - Tin Học viii 1.2 Tổng quan vị trí việc làm 1.2.1 Tổng quan về nghề Front End Developer: Trong ngành CNTT nói chung và lập trình viên phần mềm nói riêng hẳn khơng cịn xa lạ với cụ từ “lập trình viên Front End” Mợt nghề thú vị lại có mợt sức hút lớn 1.2.2 Tiềm nghề Front End Developer Nói tiềm nghề Front End Developer là lớn là một nghề nghiệp được bạn tẻ theo đuổi và săn lùng nhiều Với phat triển công nghệ thông tin nhu cầu thiết kế web hay ứng dụng doanh nghiệp ngày càng tăng Từ đí hội làm việc cho bạn Frint End trường mở rộng Hiện mức lương cho vị trí FrontEnd Developer cao so với mặt chung Việt Nam 1.2.3 Vị trí làm việc Front End Developer Công việc một Front End Developer là sử dụng ngôn ngữ HTML, CSS hay ngơn ngữ lập trình Javascript thiết kế giao diện ứng dụng trang web cho người dùng Người lập trình Front End chịu trách nhiệm phát triển giao diện bên ngoài một website dựa vào thiết kế Những giao diện website được người dùng nhìn thấy truy cập vào trang web thơng qua trình duyệt Cụ thể, Front End Developer thường phải thực công việc như: - Thiết kế giao diện web/ứng dụng thân thiện với người dùng dựa nhiều loại ngôn ngữ lập trình khác - Duy trì và cải thiện giao diện website/ứng dụng - Hợp tác với đồng nghiệp và chuyên gia Back End khác để phát triển tính đáp ứng người dùng - Đề xuất phương pháp cải thiện giao diện, đồ họa website - Tối ưu hóa giao diện ứng dụng/trang web để có được tốc đợ và hiệu suất tối đa ix Tăng tính tương tác – Bạn có thể tạo giao diện phản ứng người dùng di chuột qua chúng kích hoạt chúng thông qua bàn phím Giao diện phong phú – Bạn có thể sử dụng JavaScript để bao gồm mục thành phần kéo và thả để trượt Giao diện phong phú cho khách truy cập trang web bạn Hạn chế: Là ngơn ngữ lập trình dễ bị khai thác: Việc dễ dàng bị khai thác, với nhiều đối tượng người dùng khác vơ tình khiến việc bảo mật cho ngơn ngữ lập trình này khơng được đánh giá cao Bởi thế, q trình sử dụng tồn nguy định cần tìm hiểu và chủ đợng ý cẩn trọng Một hạn chế ngôn ngữ JS chính là việc có thể sử dụng để thực thi mã đợc máy tính người dùng Tình trạng này vơ tình gây thiệt hại, ảnh hưởng không nhỏ tới công việc mà thực Trong một số trường hợp, một vài trình duyệt cụ thể việc sử dụng ngơn ngữ lập trình Javascript khơng thể thực được Nó gây ảnh hưởng tới việc ứng dụng, đáp ứng cho nhu cầu người Sử dụng ngôn ngữ lập trình này có mợt hạn chế khác có JS code snippets lớn Khi có khả triển khai khác tùy thiết bị, vừa là ưu điểm song tồn hạn chế định Chính điều này khiến nguy khơng đồng có thể xảy ra, gây ảnh hưởng tới trình thực mục tiêu cuối 2.2.3.Hoạt động JavaScript website Sử dụng ngôn ngữ Javascript trở nên phổ biến, thông dụng nhiều người dùng Đối với ngơn ngữ lập trình này chúng được tiến hành nhúng trực tiếp vào trang web, được tiến hành tham chiếu thông qua một file.js riêng biệt Đây là ngôn ngữ phía client, điều này tức là script được tải đầy đủ máy khách hàng truy cập Đồng thời, được xử lý đó, thay bên server là thực xử lý server trước đưa kết tới khách hàng truy cập Việc sử dụng ngôn ngữ Javascript hỗ trợ đầy đủ việc khách hàng muốn tắt hay mở trình duyệt web được ứng dụng Nhờ vậy, việc có thể xác xvi định được website hoạt đợng nào, tình hình thực tế khơng có ngơn ngữ Javascript hoạt đợng 2.3 ReactJS 2.3.1 Tổng quan ReactJS Hình 3: React JS ReactJS giúp cho việc viết đoạn code Javascript trở nên dễ dàng sử dụng mợt cú pháp đặc biệt chính là cú pháp JSX Thông qua JSX cho phép nhúng code HTML và Javascript ReactJS cho phép Developer phá vỡ cấu tạo UI phức tạp thành component độc lập Dev lo lắng tổng thể ứng dụng web, Developer dễ dàng chia nhỏ cấu trúc UI/UX phức tạp thành component đơn giản Đi kèm với ReactJS là nhiều công cụ phát triển giúp cho việc debug code một cách dễ dàng xvii Một ưu điểm ReactJS là thân thiện với SEO Hầu JS Frameworks không thân thiện với tìm kiếm được cải thiện nhiều hỗ trợ render liệu trả dạng web page giúp cho SEO chuẩn 2.3.2 Lợi ích ReactJS ReactJS giúp cho việc viết đoạn code Javascript trở nên dễ dàng sử dụng mợt cú pháp đặc biệt chính là cú pháp JSX Thông qua JSX cho phép nhúng code HTML và Javascript ReactJS cho phép Developer phá vỡ cấu tạo UI phức tạp thành component độc lập Dev lo lắng tổng thể ứng dụng web, Developer dễ dàng chia nhỏ cấu trúc UI/UX phức tạp thành component đơn giản Đi kèm với ReactJS là nhiều công cụ phát triển giúp cho việc debug code một cách dễ dàng Một ưu điểm ReactJS là thân thiện với SEO Hầu JS Frameworks không thân thiện với tìm kiếm được cải thiện nhiều hỗ trợ render liệu trả dạng web page giúp cho SEO chuẩn 2.3.3 Ưu điểm hạn chế ReactJS Ưu điểm: ReactJS tạo cho chính DOM ảo - nơi mà component thực tồn Điều này giúp cải thiện hiệu suất nhiều ReactJS tính toán thay đổi nào cần cập nhật len DOM và thực chúng Điều này giúp ReactJS tránh thao tác cần DOM mà nhiều chi phí Làm việc với vấn đề test giao diện: Nó dễ để viết test case giao diện virtual DOM được cài đặt hoàn toàn JS Hiệu cao ứng dụng có liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi xviii Nhượt điểm: ReactJS phục vụ cho tầng View React là View Library khơng phải là một MVC Framwork framework khác Tích hợp React vào framework MVC truyền thống yêu cầu cần phải cấu hình lại React nặng so với framework khác React có kích thước tương đương với Angular(Khoảng 35kb so với 39 Agular) 2.3.4 Hoạt động ReactJS React hoạt động dựa kết hợp HTML và JavaScript Hiểu đơn giản, bạn có thể chèn viết code vào thẳng HTML JavaScrip với giải pháp này Hầu hết phần React được viết JSX (JavaScript XML) để giúp việc tạo React components dễ dàng Trong React, bạn có thể:  Tạo đại diện cho DOM hàm Element Cú pháp HTML code trường hợp này tương tự XML components, khác biệt chỗ bạn không dùng DOM class truyền thống mà sử dụng className  Là kết hợp HTML và JavaScrip, bạn cần lưu ý một vài vấn đề thẻ HTML sau dùng React:  là Số đếm dùng để hiển thị biểu thức số tương ứng với giá trị  GameScores là đối tượng có hai cặp prop  là một khối XML được render trang  scores={GameScores}}: Là thuộc tính điểm được nhận giá trị từ GameScores, và được xác định sẵn 2.5 Các tài liệu hệ thống 2.5.1 User story Actor user Sprint Required Đăng nhập Tài khoản được nhà trường cung cấp bao gồm email và mật khẩu xix