Xây dựng website quản lý 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 QUẢN TRỊ HỆ THỐNG THÔNG TIN ĐỀ TÀI : XÂY DỰNG WEBSITE QUẢN LÝ SINH VIÊN Đơn vị thực tập : Công ty cổ phần R2S Giảng viên hướng dẫn : Đặng Trung Thành LỜI CẢM ƠN Lời cảm ơn em xin gửi đến quý thầy cô Khoa Hệ Thống Thông Tin Quản Lý trường Đại Học Kinh Tế - Đại Học Đà Nẵng tận tình truyền đạt cho chúng em kiến thức bổ ích, kinh nghiệm quý báu thời gian qua để chúng em hoàn thiện thân bổ sung nhiều kiến thức chuyên môn khác Tiếp đến em xin gửi lời cảm ơn sâu sắc đến thầy Đặng Trung Thành, giảng viên hướng dẫn học phần Thực tập nghề nghiệp Đặc biệt, em xin gửi lời cảm ơn đến quý công ty cổ phần R2S mentor Lê Hồng Kỳ truyền đạt kiến thức nghề nghiệp, nhiệt tình hỗ trợ tạo hội cho trình thực tập chúng em tiếp xúc gần với cơng việc thực tế Ngồi ra, em cịn nhận hướng dẫn tận tình anh chị / thầy để hồn thiện tập báo cáo tốt Vì thời gian kiến thức cịn hạn hẹp nên q trình thực tập thực báo cáo tránh khỏi thiếu sót, mong thơng cảm góp ý q thầy để em rút kinh nghiệm chỉnh sửa LỜI CAM ĐOAN Tôi xin cam đoan: Nội dung đề tài “Xây dựng website quản lý sinh viên trường (Front- End)” cơng trình nghiên cứu tơi thực hướng dẫn trực tiếp Thầy Đặng Trung Thành mentor Lê Hồng Kỳ Trong báo cáo có sử dụng số tài liệu tham khảo dùng đề tài trích dẫn rõ ràng tên tác giả, tên cơng trình, trích dẫn nguồn thích rõ ràng Nếu phát có gian lận, chép không hợp lệ, vi phạm, tơi xin chịu hồn tồn trách nhiệm MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN MỤC LỤC .4 DANH MỤC HÌNH ẢNH DANH MỤC CÁC TỪ VIẾT TẮT LỜI MỞ ĐẦU CHƯƠNG 1: TỔNG QUAN VỀ CÔNG TY R2S .2 1.1 Giới thiệu tổng quát về doanh nghiệp thực tập 1.1.1 Tổng quan về công ty 1.1.2 Tổng quan về ngôn ngữ sử dụng CHƯƠNG 2: LÝ THUYẾT 1.2 HTML – Hyper Text Markup Language: 1.2.1 Elements: .5 1.2.2 Attribute: .5 1.2.3 Links: 1.2.4 Class Attribute: 1.2.5 ID Attribute: 1.2.6 JavaScripts: 1.3 CSS – Cascading Style Sheets: 1.3.1 How to add CSS: 1.3.2 Margins: 1.3.3 Padding: 1.3.4 Responsive Web Design: .7 1.3.5 Grid-view: 1.4 JavaScript (JS): 1.4.1 Variables: 1.4.2 Data types: 1.4.3 Loop: 1.4.4 Function: .9 1.4.5 Array: 1.4.6 Object: .10 1.4.7 DOM (Document Object Model): .10 2.4 ReactJs: 10 2.4.1 JSX:10 2.4.2 Props: 11 2.4.3 Component: .11 2.4.4 State: 11 2.4.5 Conditional Rendering: .11 2.4.6 Form: 12 CHƯƠNG 3: TRIỂN KHAI THỰC NGHIỆM 13 3.1 Phân tích yêu cầu hệ thống: .13 3.1.1 Mục tiều đề tài: 13 3.2 Thiết kế dự án: .13 3.2.1 Mục tiêu thiết kế giao diện: .13 3.2.2 Quy trình thiết kế giao diện web ReactJs: 13 3.3 Thiết kế giao diện: 14 3.3.1 Trang chủ 14 3.3.2 Trang chuyên ngành 15 3.3.3 Trang Student .16 3.3.4 Trang Đăng Nhập .18 3.4 Kết Quả 18 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .19 TÀI LIỆU THAM KHẢO 21 DANH MỤC HÌNH ẢNH DANH MỤC CÁC TỪ VIẾT TẮT AI : Artificial Intelligence HTML : Hyper Text Markup Language CSS : Cascading Stye Sheet JS : JavaScript JSX : JavaScript XML URL : Uniform Resource Locator CDN : Content Delivery Network DOM : Document Object Model LỜI MỞ ĐẦU Mục tiêu đề tài - Tại các trường đại học ngày số lượng sinh viên ngày nhiều, khó để quản lý, dẫn đến nảy sinh nhiều vấn đề từ việc quản lý thông tin sinh viên địa chỉ, chun ngành gì… Chính nên thay quản lý hồ sơ học sinh sinh viên phương pháp truyền thống, em tạo website để quản lý sinh viên có tính đa dạng thao tác đơn giản dễ dàng sử dụng để giúp nhà trường thuận tiện việc nắm bắt thông tin sinh viên - Nhiệm vụ đề tài: Nghiên cứu về ngôn ngữ, môi trường lập trình Front-end, các thư viện sử dụng vận dụng kiến thức học để xậy dựng website đơn giản Đối tượng phạm vi nghiên cứu Biết cách lập trình nên giao diện người dùng, xây dựng các chức tìm kiếm, thêm, quản lý chức đơn giản khác 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 - Chương 2: Cơ sở lý thuyết - Chương 3: Triển khai dự án - Chương 4: Kết - Kết luận hướng phát triển CHƯƠNG 1: TỔNG QUAN VỀ CÔNG TY R2S 1.1 Giới thiệu tổng quát doanh nghiệp thực tập 1.1.1 Tổng quan công ty Doanh nghiệp R2S thành lập vào ngày 01/08/2019 với nhiệm vụ đào tạo nhân CNTT cho doanh nghiệp, phát triển phần mềm tư vấn giải pháp CNTT cho các doanh nghiệp chuyển đổi số R2S coi trọng đến triết ký kinh doanh “Tận tụy phục vụ khách hàng, tạo niềm tin với đối tác, chăm lo đời sống nhân viên, đóng góp thiết thực cho cộng đồng” Đây kim nam để tồn thể nhân viên R2S hành động Hình 1.1 Cơng ty R2S 1.1.2 Tổng quan ngôn ngữ sử dụng a HTML – Hyper Text Markup Language: - HTML viết tắt Hyper Text Markup Language (ngôn ngữ đánh dấu siêu văn bản), cho phép người dùng tạo cấu trúc hóa các thành phần trang web đoạn văn, tiêu đề, liên kết, trích dẫn, bảng biểu,… b CSS – Cascading Style Sheets: - CSS viết tắt Cascading Style Sheets, ngôn ngữ thiết kế đơn giản, xử lý phần giao diện trang web CSS mô tả cách các phần tử HTML hiển thị hình các phương tiện khác CSS giúp ích nhiều viết trang web HTML CSS cho phép tùy chỉnh màu chữ, kích cỡ chữ, kiểu chữ, khoảng cách văn bản, kích thước các thành phần trang web, màu nền, cách hiển thị hình có kích thước khác nhiều hiệu ứng khác - Cú pháp: gồm có cơng cụ chọn (selector) khối khai báo (declaration) Có thể có nhiều khối khai báo phân cách dấu chấm phẩy Mỗi khối khai báo có cặp thuộc tính: giá trị c JavaScript (JS): - JavaScript loại ngơn ngữ lập trình sử dụng chủ yếu HTML web với mục đích phát triển các ứng dụng Internet chạy server client JS có khả hỗ trợ hầu hết các trình duyệt web Chrome, Safari, Firefox… Và phần lớn các trình dụt di động điện thoại thơng minh đều có hỗ trợ cho loại ngơn ngữ lập trình 10 padding cho cạnh phần tử: padding-top, padding-right, padding-bottom, padding-left Phân biệt Margin Padding 1.1.2 Responsive Web Design: - Responsive Web Design khiến cho trang web phù hợp với tất các thiết bị (desktops, tablets phones) sử dụng HTML CSS để chỉnh kích thước, ẩn, thu nhỏ, phóng to di chuyển nội dung để làm cho nội dung trơng đẹp mắt hình 1.1.3 Grid-view: - Rất nhiều trang web dựa grid-view, chia thành 12 cột với tổng chiều rộng 100% thu nhỏ, phóng to muốn chỉnh cửa sở tìm kiếm Việc sử dụng grid-view hữu dụng thiết kế trang web, dễ dàng đặt các phần tử trang 1.4 JavaScript (JS): 1.4.1 Variables: - Biến (Variable) nơi lưu trữ giá trị liệu, giúp người lập trình viên đơn giản hóa việc sử dụng giá trị nhiều lần cách gọi tên biến - Có cách để khai báo biến JS: var, let, const Để khai báo biến, ta sử dụng cú pháp var tên biến; - Giá trị biến đa dạng, chuỗi kí tự, số, biến khác, biểu thức, undefined,… 14 1.4.2 Data types: - Kiểu liệu (Data Type) cách để phân loại liệu cho trình biên dịch hiểu người lập trình muốn sử dụng loại liệu Trong JS, phép làm việc với các kiểu liệu nguyên thủy (Primitive data type) kiểu liệu không nguyên thủy (Non-primitive data type) - - Kiểu liệu nguyên thủy: + Number: kiểu số nguyên số thực + String: kiểu chuỗi ‘Đai học Kinh tế’ + Boolean: có giá trị true false + Null: đơn giản khơng có giá trị Kiểu liệu không nguyên thủy: + Object: thể hiện đối tượng các thuộc tính truy cập đến + RegExp: biểu thức quy + Array: nhóm các giá trị giống 1.4.3 Loop: - Vòng lặp (Loop) đưa các cách nhanh dễ dàng để làm việc lặp lặp lại nhiều lần Có nhiều loại vịng lặp, chúng đều thực hiện cơng việc giống lặp lại hành đồng số lần cho trước Các câu lệnh vòng lặp cung cấp JS như: for, do…while, while, labeled, break, continue, for…in, for…of Cơ chế vòng lặp 1.4.4 Function: - Hàm (Function) tập hợp đoạn code dùng để xử lý nhiệm vụ Code function khơng biên dịch gọi đến, sử dụng function giúp chương trình linh hoạt 15 1.4.5 Array: - Đối tượng Array giúp lưu trữ nhiều giá trị biến đơn, lưu trữ tập hợp theo dãy có kích cỡ cố định các phần tử kiểu - Các thuộc tính phương thức array: Thuộc tính array Một vài phương thức array 1.4.6 Object: - Object JS hiểu đối tượng tượng thực tế đời thực Một object thực thể độc lập, với thuộc tính kiểu Đối tượng JS tập hợp các cặp khóa – giá trị Tên thuộc tính giá trị bị ép buộc vào 16 chuỗi trỏ đến giá trị, giá trị thuộc tính giá trị nào, bao gồm các đối tượng khác các hàm, liên kết với tên/khóa - Có cách khai báo đối tượng JS: sử dụng từ khóa {}, new Object() phương thức static 1.4.7 DOM (Document Object Model): - Mơ hình các đối tượng tài liệu (DOM) dùng để truy xuất thao tác các tài liệu có cấu trục dạng HTML hay XML các ngơn ngữ lập trình thông dụng JS, PHP… The HTML DOM Tree of Objects 2.4 ReactJs: 2.4.1 JSX: - JSX kết hợp các ngơn ngữ lập trình JS các ngôn ngữ dạng đánh dấu XML Sử dụng JSX mang lại nhiều lợi ích: giúp việc xây dựng ứng dụng React xây dựng nhanh chóng hơn, dễ tối ưu việc compile code sang JS, cú pháp khá giống HTML nên dễ dàng nhiều cho việc chuyển đổi 2.4.2 Props: - Props viết tắt cho Properties, hình thức sử dụng giống attribute HTML Props cách để truyền liệu từ component cha xuống component Khi truyền liệu qua props, component đọc, thay đổi liệu Nhờ mà component sử dụng kỳ đâu hiển thị đầu 17 có giá trị đầu vào, điều khiến người dùng dễ dàng kiểm soát component 2.4.3 Component: - Component giúp phân chia các UI (giao diện người dùng) thành cá phần nhỏ để dễ dàng quản lý tái sử dụng Mỗi component đảm nhiệm phần hiển thị khác nhau, muốn làm trang hoàn chỉnh cần ghép các component lại với Trong React App đều chứa nhiều component, component thường nhận về các props trả về React element từ hiển thị cho UI Component React thường viết thoe loại functional component class component 2.4.4 State: - State đối tượng thành phần component, các props truyền giá trị từ bên vào component State sử dụng ReactJs để lưu thông tin Muốn cập nhật state, sử dụng setState, React cập nhật DOM cách tự động, không cần phải viết thêm xử lý kiện 2.4.5 Conditional Rendering: - Đảm nhận việc render React, cho phép sử dụng pure JS (JS thuần) với các câu lệnh với điều kiện quen thuộc if else, switch case để render theo ý muốn người dùng Ví dụ conditional rendering 18 2.4.6 Form: - Việc sử dụng forms React làm cho form trở nên linh hoạt tương tác nhiều hơn, có cách xử lý form Ract, chúng khác chủ yếu cách quản lý liệu, liệu xử lý DOM, gọi ‘uncontrollerd components’, liệu xử lý components, gọi ‘controlled components’ 19 CHƯƠNG 3: TRIỂN KHAI THỰC NGHIỆM 3.1 Phân tích yêu cầu hệ thống: 3.1.1 Mục tiều đề tài: Mục tiêu xây dựng website đơn giản giúp nhà trường quản lý thơng tin - học sinh sinh viên cách hiệu nhanh chóng Giúp nhà trường quản lý nhanh mà không cần xem hồ sơ trước 3.2 Thiết kế dự án: 3.2.1 Mục tiêu thiết kế giao diện: - Thiết kế giao diện đơn giản, giảm thiểu rắc rối cách sử dụng cho khách hàng cho người quản lý 3.2.2 Quy trình thiết kế giao diện web ReactJs: B1: Để tạo môi trường phát triển React, cài đặt NodeJS cho dự án B2: Khởi tạo Project React chạy NodeJs để bắt đầu thực hiện chuyển giao website B3: Cài đặt thư viện react-router-dom, react-icons, reactstrap B4: Tạo component, component đại diện cho phần website B5: Thiết kế trực quan B6: Hoàn thiện giao diện website 20