TRƢỜNG ĐẠI HỌC TÂY BẮC BÁO CÁO TỔNG KẾT ĐỀ TÀI NGHIÊN CỨU KHOA HỌC CẤP CƠ SỞ PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ SINH VIÊN NGOẠI TRÚ TRÊN THIẾT BỊ DI ĐỘNG Mã ngành: KT3 Thuộc nhóm ngành khoa học: Khoa học Tự nhiên Sơn La, năm 2017 TRƢỜNG ĐẠI HỌC TÂY BẮC =====o0o===== BÁO CÁO TỔNG KẾT ĐỀ TÀI NGHIÊN CỨU KHOA HỌC CỦA SINH VIÊN PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ SINH VIÊN NGOẠI TRÚ TRÊN THIẾT BỊ DI ĐỘNG Mã ngành: KT3 Thuộc nhóm ngành khoa học: Khoa học Tự nhiên Sinh viên thực hiện: Lƣu Hồng Quân Giới Tính: Nam Dân tộc: Kinh Dƣơng Văn Toản Giới Tính: Nam Dân tộc: Kinh Giới Tính: Nam Dân tộc: Kinh Lê Minh Sáng Lớp: K55 ĐH CNTT Khoa: Toán - Lý - Tin Năm thứ: 03/Số năm đào tạo:04 Ngành học: Công nghệ Thông Tin Sinh viên chịu trách nhiệm chính: Lƣu Hồng Quân Ngƣời hƣớng dẫn: ThS Nguyễn Duy Hiếu Sơn La, năm 2017 LỜI CẢM ƠN Sau thời gian học tập, nghiên cứu triển khai đề tài: “Phát triển ứng dụng quản lý sinh viên ngoại trú thiết bị di động”, đến hoàn thành đề tài nghiên cứu Chúng xin bày tỏ lòng biết ơn sâu sắc tới thầy giáo – Thạc sỹ Nguyễn Duy Hiếu trực tiếp hướng dẫn suốt trình thực đề tài nghiên cứu khoa học Đồng thời chân thành cảm ơn tới lãnh đạo Nhà trường, Ban chủ nhiệm Khoa thầy cô giáo giúp đỡ, tạo điều kiện để có hội nghiên cứu, học tập hoàn thành đề tài nghiên cứu khoa học Do hạn chế trình độ chuyên môn thời gian thực đề tài không tránh khỏi thiếu sót, mong nhận góp ý thầy cô để hoàn thành tốt đề tài nghiên cứu Chúng xin chân thành cảm ơn! Sơn La, tháng năm 2017 Sinh viên Lƣu Hồng Quân Dƣơng Văn Toản Lê Minh Sáng MỤC LỤC PHẦN MỞ ĐẦU 1 Lý chọn đề tài Mục đích nghiên cứu Đối tượng nghiên cứu Phạm vi nghiên cứu Phương pháp nghiên cứu Bố cục đề tài CHƢƠNG 1: TỔNG QUAN VỀ THIẾT KẾ WEB 1.1 Lịch sử hình thành thiết kế web 1.2 Xu hướng phát triển thiết kế web .5 1.2.1 Mobile-first 1.2.2 Thiết kế website - Responsive Web Design 1.2.3 Sử dụng framework CSS JavaScript 1.3 Căn HTML/HTML5 1.3.1 HTML gì? 1.3.2 Tập tin HTML gì? 1.3.3 Thẻ HTML 1.3.4 Cấu trúc HTML .7 1.3.5 Các phiên HTML 1.4 Căn CSS/CSS3 .8 1.4.1 CSS gì? .8 1.4.2 Lịch sử CSS 1.4.3 Lợi CSS .9 1.5 Căn JavaScript 1.5.1 JavaScript gì? .9 1.5.2 Các lợi JavaScript 10 1.5.3 Hạn chế JavaScript 10 CHƢƠNG GIỚI THIỆU VỀ LẬP TRÌNH ỨNG DỤNG TRÊN THIẾT BỊ DI ĐỘNG .11 2.1 Sự phát triển thiết bị di động 11 2.2 Giới thiệu lập trình ứng dụng thiết bị di động 12 2.2.1 Android 12 2.2.2 iOS 13 2.2.3 Windows Phone 14 2.3 Xu hướng phát triển ứng dụng thiết bị di động 14 2.3.1 Dùng ứng dụng Native 15 2.3.2 Dùng Framework 18 CHƢƠNG 3: TỔNG QUAN VỀ JQUERY MOBILE 21 3.1 Giới thiệu JQuery 21 3.1.1 JQuery gì? 21 3.1.2 JQuery dùng để làm gì? .21 3.2 JQuery Mobile 22 3.2.1 JQuery Mobile gì? 22 3.2.2 Lịch sử JQuery Mobile 22 3.2.3 Tại sử dụng JQuery Mobile? 23 3.2.4 Các tính JQuery Mobile 23 3.2.5 Những vấn đề xây dựng App Mobile 23 3.2.6 Cách dùng JQuery Mobile 24 3.2.7 Cấu trúc trang JQuery Mobile .24 3.2.8 Đối tượng JQuery Mobile 27 3.2.9 Tóm tắt thành phần giao diện người dùng 31 CHƢƠNG PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ SINH VIÊN NGOẠI TRÚ TRÊN THIẾT BỊ DI ĐỘNG 33 4.1 Lựa chọn mục tiêu 33 4.2 Phân tích yêu cầu .33 4.3 Thiết kế mức khái niệm 34 4.3.1 Xác định tác nhân 34 4.3.2 Mô hình Use – Case người dùng 34 4.3.3 Mô hình hóa tương tác đối tượng 35 4.3.4 Biểu đồ lớp thực thể liên kết 44 4.4 Thiết kế giao diện người dùng 44 4.4.1 Màn hình đăng nhập bắt đầu ứng dụng 44 4.4.2 Các hình sau chọn người dùng 46 KẾT LUẬN VÀ KIẾN NGHỊ 55 Kết luận .55 Kiến nghị .55 TÀI LIỆU THAM KHẢO 56 DANH SÁCH HÌNH ẢNH Hình 1.1 Thiết kế phù hợp với kích thước hình thiết bị Hình 1.2 Cấu trúc HTML Hình 2.1 Biểu đồ phân tích thị phần ứng dụng hệ điều hành 12 Hình 2.2 Cửa hàng ứng dụng CH Play Android 13 Hình 2.3 Cửa hàng ứng dụng App Store Apple .14 Hình 2.4 Cửa hàng ứng dụng Windows Phone 14 Hình 2.5 Giao diện ứng dụng Visual Studio 15 Hình 2.6 Giao diện ứng dụng Android Studio 16 Hình 2.7 Giao diện ứng dụng Xcode .17 Hình 2.8 Giao diện ứng dụng PhoneGap 19 Hình 3.1 Các tảng di động JQuery Moblie hỗ trợ 22 Hình 3.2 Chèn đường dẫn từ CDN jQuyery Mobile vào trang html .24 Hình 3.3 Tạo trang JQuery Mobile 25 Hình 3.4 Demo cấu trúc trang JQuery Mobile .25 Hình 3.5 Kết cấu chung ứng dụng web JQuery Mobile 26 Hình 3.6 Các phần tử giao diện người dùng JQuery Mobile 31 Hình 4.1 Mô hình Use – Case người dùng 34 Hình 4.2 Trình tự đăng nhập QTV 35 Hình 4.3 Trình tự cấp quyền cho GV QTV 36 Hình 4.4 Trình tự cấp quyền cho SV QTV 36 Hình 4.5 Trình tự thêm GV QTV 37 Hình 4.6 Trình tự sửa GV QTV 37 Hình 4.7 Trình tự xóa GV QTV 38 Hình 4.8 Trình tự thêm SV QTV 38 Hình 4.9 Trình tự sửa thông tin SV QTV .39 Hình 4.10 Trình tự xóa SV QTV 39 Hình 4.11 Trình tự đăng nhập GV 40 Hình 4.12 Chức Xem - Sửa thông tin GV .40 Hình 4.13 Chức Xem - Sửa thông tin QTV 41 Hình 4.14 Trình tự thêm SV GV 41 Hình 4.15 Trình tự sửa thông tin SV GV .42 Hình 4.16 Trình tự xóa SV GV .42 Hình 4.17 Trình tự đăng nhập SV 43 Hình 4.18 Trình tự Xem – Sửa thông tin SV 43 Hình 4.19 Biểu đồ thực thể liên kết .44 Hình 4.20 Màn hình đăng nhập ứng dụng 45 Hình 4.21 Màn hình quản lý quản trị viên 46 Hình 4.22 Màn hình quản lý giáo viên quản trị viên 47 Hình 4.23 Màn hình quản lý cố vấn học tập quản trị viên .48 Hình 4.24 Màn hình quản lý lớp quản trị viên .49 Hình 4.25 Màn hình sau đăng nhập giáo viên 50 Hình 4.26 Màn hình hiển thị thông tin giáo viên 51 Hình 4.27 Màn hình quản lý lớp sinh viên giáo viên 52 Hình 4.28 Màn hình sau đăng nhập sinh viên 53 Hình 4.29 Màn hình hiển thị thông tin sinh viên 54 DANH SÁCH THUẬT NGỮ VIẾT TẮT Tên viết tắt Ý nghĩa HTML HyperText Markup Language CSS Cascading Style Sheets W3C World Wide Web Consortium GPS Global Positioning System XAML Extensible Application Markup Language IDE Integrated Development Environment SDK Software Development Kit AJAX Asynchronous JavaScript DOM Document Object Model CDN Content Delivery Network CNTT Công nghệ thông tin QTV Quản trị viên GV Giáo viên SV Sinh viên PHẦN MỞ ĐẦU Lý chọn đề tài Sự bùng nổ công nghệ thông tin (CNTT) nói riêng khoa học công nghệ nói chung tác động mạnh mẽ vào phát triển mặt đời sống xã hội Công nghệ thông tin phát triển tạo ứng dụng tiện ích, dễ sử dụng đời sống trường học quản lý bán hàng, quản lý nhân viên, quản lý thư viện, quản lý học sinh - sinh viên, quản lý thiết bị học tập giảng dạy,… Hiện nay, nhiều nơi việc quản lý thông tin sinh viên thầy cô cố vấn học tập sử dụng phương pháp sổ sách, giấy tờ, Word, Excel,… Việc quản lý chưa thực thuận tiện nhiều trường hợp khó cập nhật thông tin sinh viên thay đổi nơi ở, số điện thoại, thông tin cá nhân,… Có thể thấy tiềm ứng dụng CNTT vào việc quản lý sinh viên lớn Việc quản lý thông tin sinh viên, đặc biệt sinh viên ngoại trú dễ dàng, thuận tiện, xác cập nhật thường xuyên có giúp sức CNTT Với lý trên, chọn nghiên cứu đề tài: “Phát triển ứng dụng quản lý sinh viên ngoại trú thiết bị di động” Mục đích nghiên cứu - Nghiên cứu xây dựng ứng dụng di động web - Nghiên cứu phát triển ứng dụng hỗ trợ thầy cô việc quản lý sinh viên ngoại trú Đối tƣợng nghiên cứu - Ứng dụng di động web Phạm vi nghiên cứu - Thiết kế ứng dụng di động web quản lý sinh viên ngoại trú Phƣơng pháp nghiên cứu - Tổng hợp tài liệu - Nghiên cứu tài liệu - Thực hành máy tính Hình 4.15 Trình tự sửa thông tin SV GV Hình 4.16 Trình tự xóa SV GV 42 Hình 4.17 Trình tự đăng nhập SV Hình 4.18 Trình tự Xem – Sửa thông tin SV 43 4.3.4 Biểu đồ lớp thực thể liên kết Hình 4.19 Biểu đồ thực thể liên kết 4.4 Thiết kế giao diện ngƣời dùng Giao diện người dùng gồm phần:  Màn hình đăng nhập bắt đầu ứng dụng  Các hình sau chọn người dùng 4.4.1 Màn hình đăng nhập bắt đầu ứng dụng 44 Hình 4.20 Màn hình đăng nhập ứng dụng Giao diện hình bao gồm:  Nút cuộn để chọn người dùng  Khung điền tên đăng nhập mật  Nút đăng nhập nhập lại 45 4.4.2 Các hình sau chọn người dùng Hình 4.21 Màn hình quản lý quản trị viên 46 Hình 4.22 Màn hình quản lý giáo viên quản trị viên 47 Hình 4.23 Màn hình quản lý cố vấn học tập quản trị viên 48 Hình 4.24 Màn hình quản lý lớp quản trị viên 49 Hình 4.25 Màn hình sau đăng nhập giáo viên 50 Hình 4.26 Màn hình hiển thị thông tin giáo viên 51 Hình 4.27 Màn hình quản lý lớp sinh viên giáo viên 52 Hình 4.28 Màn hình sau đăng nhập sinh viên 53 Hình 4.29 Màn hình hiển thị thông tin sinh viên Kết luận Trong chương này, giới thiệu bước để làm ứng dụng hoàn thiện từ giai đoạn lên ý tưởng 54 KẾT LUẬN VÀ KIẾN NGHỊ Kết luận Qua đề tài xây dựng, tìm hiểu lập trình ứng dụng thiết bị di động web tầm quan trọng đời sống quản lý Chúng hoàn thiện sản phẩm ứng dụng quản lý sinh viên ngoại trú thiết bị di động Ứng dụng ứng dụng thiết bị di động vào quản lý sinh viên hướng hứa hẹn nhiều triển vọng Ứng dụng web có ưu điểm dễ tiếp cận, dễ học, dễ dùng, tiện dụng, không yêu cầu cao thiết bị sử dụng liệu xử lý tập trung Tuy nhiên, đòi hỏi kết nối mạng Internet thường xuyên ổn định Kiến nghị Đề tài “Phát triển ứng dụng quản lý sinh viên ngoại trú thiết bị di động” đề tài bước đầu, nên việc nghiên cứu chưa chuyên sâu, hướng đến mục tiêu tìm hiểu quy trình thiết kế ứng dụng thiết bị di dộng giúp hỗ trợ thầy cô việc quản lý Vì đề xuất hướng nghiên cứu đề tài sau: - Cải tiến ứng dụng cho đơn giản, dễ sử dụng - Nghiên cứu thêm tính hỗ trợ thầy cô việc quản lý sinh viên - Thêm chức quản lý sinh viên cho thầy cô trợ lý khoa 55 TÀI LIỆU THAM KHẢO Trần Đình Quế, Nguyễn Mạnh Sơn (2007), Phân tích thiết kế hệ thống thông tin, Học viện Công nghệ Bưu Viễn thông Lê Văn Quảng, Đỗ Ngọc Hải, Nguyễn Thị Hƣơng Ly (2016), Lập trình ứng dụng thiết bị di động hỗ trợ học tập cho trẻ mầm non, Đề tài Nghiên cứu khoa học cấp trường - Trường Đại học Tây Bắc Các trang web tham khảo: http://vi.wikipedia.org https://www.w3schools.com http://vietjack.com/jquery/jquery-overview.jsp https://www.ibm.com/developerworks/xml/tutorials/x-jquerymobilejsontut http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-andphonegap 56 ... Phát triển ứng dụng quản lý sinh viên ngoại trú thiết bị di động Mục đích nghiên cứu - Nghiên cứu xây dựng ứng dụng di động web - Nghiên cứu phát triển ứng dụng hỗ trợ thầy cô việc quản lý sinh. .. nghệ thông tin phát triển tạo ứng dụng tiện ích, dễ sử dụng đời sống trường học quản lý bán hàng, quản lý nhân viên, quản lý thư viện, quản lý học sinh - sinh viên, quản lý thiết bị học tập giảng... Tổng quan thiết kế web Chương 2: Giới thiệu lập trình ứng dụng thiết bị di động Chương 3: Tổng quan JQuery Mobile Chương 4: Phát triển ứng dụng quản lý sinh viên ngoại trú thiết bị di động CHƢƠNG