Tìm hiểu angularjs framework và xây dựng single page site ( website bán điện thoại trực tuyến)

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CƠNG NGHỆ THƠNG TIN TÌM HIỂU ANGULARJS FRAMEWORK VÀ XÂY DỰNG SINGLE PAGE SITE ( WEBSITE BÁN ĐIỆN THOẠI TRỰC TUYẾN) GVHD: TRƯƠNG THỊ NGỌC PHƯỢNG SVTH: ĐOÀN XUÂN HÙNG MSSV: 15110219 SVTH: PHẠM MINH KẾ MSSV: 15110226 SKL005758 Tp Hồ Chí Minh,2019 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM -  - ĐOÀN XUÂN HÙNG: 15110219 PHẠM MINH KẾ: 15110226 Đề Tài: TÌM HIỂU ANGULARJS FRAMEWORK VÀ XÂY DỰNG SINGLE PAGE SITE (WEBSITE BÁN ĐIỆN THOẠI TRỰC TUYẾN) KHÓA LUẬN CHUYÊN NGÀNH KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS TRƯƠNG THỊ NGỌC PHƯỢNG KHÓA 2015 - 2019 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM -  - ĐOÀN XUÂN HÙNG: 15110219 PHẠM MINH KẾ: 15110226 Đề Tài: TÌM HIỂU ANGULARJS FRAMEWORK VÀ XÂY DỰNG SINGLE PAGE SITE (WEBSITE BÁN ĐIỆN THOẠI TRỰC TUYẾN) KHÓA LUẬN CHUYÊN NGÀNH KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS TRƯƠNG THỊ NGỌC PHƯỢNG KHÓA 2015 - 2019 ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Đoàn Xuân Hùng Họ tên Sinh viên 2: Phạm Minh Kế Ngành: Công Nghệ Thơng Tin Tên đề tài: Tìm hiểu Angularjs framework xây dựng Single Page Site (Website bán điện thoại trực tuyến) Họ tên Giáo viên hướng dẫn: Trương Thị Ngọc Phượng NHẬN XÉT Về nội dung đề tài & khối lượng thực  Lý thuyết: tìm hiểu Angularjs Framework Single Page Site  Cài đặt: xây dựng website bán điện thoại trực tuyến Ưu điểm  Thực đầy đủ chức đề tài  Có khả tự nghiên cứu cao, chủ động hồn thành cơng việc giao  Báo cáo viết đầy đủ, rõ ràng khoa học Khuyết điểm  Cần bổ sung thêm số chức đưa vào ứng dụng thực tế Đề nghị cho bảo vệ hay không? Được bảo vệ Đánh giá loại : Điểm : Tp Hồ Chí Minh, ngày 15 tháng năm 2019 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) Trương Thị Ngọc Phượng ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Đoàn Xuân Hùng Họ tên Sinh viên 2: Phạm Minh Kế Ngành: Cơng Nghệ Thơng Tin Tên đề tài: Tìm hiểu Angularjs framework xây dựng Single Page Site (Website bán điện thoại trực tuyến) Họ tên Giáo viên phản biện: Lê Thị Minh Châu NHẬN XÉT Về nội dung đề tài & khối lượng thực ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Ưu điểm ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Khuyết điểm ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Đề nghị cho bảo vệ hay không? Đánh giá loại : Điểm : Tp Hồ Chí Minh, ngày 20 tháng năm Giáo viên phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN Nhóm em xin chân thành cám ơn khoa Cơng Nghệ Thông Tin, Bộ Môn Công Nghệ Phần Mềm, trường Đại học Sư Phạm Kỹ Thuật Tp.HCM tạo điều kiện thuận lợi cho chúng em thực đề tài Chúng em xin gửi lời cảm ơn chân thành đến cô Trương Thị Ngọc Phượng, người tận tình bảo hướng dẫn nhóm em thực đề tài Bên cạnh đó, chúng em xin gửi lời cảm ơn đến thầy cô giảng viên trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM nói chung thầy giảng viên khoa Cơng Nghệ Thơng Tin nói riêng, người giảng dạy, tạo điều kiện cho em tích lũy kiến thức quý báu năm học qua Dù cố gắng hồn thành đề tài khóa luận yêu cầu, thời gian hạn hẹp khả cịn hạn chế nên chắn khơng tránh khỏi thiếu sót Chúng em mong nhận thơng cảm tận tình bảo thầy bạn Nhóm em xin chân thành cảm ơn Trường ĐH Sư Phạm Kỹ Thuật TP.HCM Khoa: CNTT ĐỀ CƯƠNG CHI TIẾT Họ tên Sinh viên 1: Đoàn Xuân Hùng MSSV 1: 15110219 Họ tên Sinh viên 2: Phạm Minh Kế MSSV 2: 15110226 Thời gian làm luận văn: Từ : 15/03/2019 Đến : 15/07/2019 Chuyên ngành: Cơng Nghệ Phần Mềm Tên luận văn: Tìm hiểu Angularjs framework xây dựng Single Page Site (Website bán điện thoại trực tuyến) GV hướng dẫn: Trương Thị Ngọc Phượng Nhiệm Vụ Của Luận Văn: Tìm hiểu lý thuyết Angularjs Framework Xác định yêu cầu Website bán điện thoại trực tuyến Mơ hình hóa u cầu, thiết kế sở liệu Thiết kế giao diện Viết code xử lý Kiểm thử, sửa lổi Viết báo cáo MỤC LỤC KẾ HOẠCH THỰC HIỆN STT Thời gian 18/03/2019 đến 14/04/2019 (Các tuần 31 32 33 34) 15/04/2019 đến 21/04/2019 (Tuần 35) 22/04/2019 đến 05/05/2019 (Các tuần 36, 37) 06/05/2019 đến 26/05/2019 (Các tuần 38, 39, 40) 27/05/2019 đến 23/06/2019 (Các tuần 41, 42, 43, 44) 24/06/2019 đến 30/06/2019 (Tuần 45) 01/07/2019 đến 07/07/2019 (Tuần 46) DANH SÁCH HÌNH ẢNH DANH SÁCH BẢNG BIỂU Phần 1: MỞ ĐẦU Tính cấp thiết đề tài Mục đích đề tài Đối tượng phạm vi nghiên cứu Kết dự kiến đạt Phần 2: NỘI DUNG Chương 1: GIỚI THIỆU ANGULAR 1.1 Khái niệm 1.2 Lịch sử phát triển Angular Framework 1.3 Ưu nhược điểm Angular Framework 1.4 Tại nên sử dụng Angular Framework 1.5 Cấu trúc thư mục Angular Framework Chương 2: CÀI ĐẶT ANGULAR FRAMEWORK 2.1 Cài đặt Nodejs 2.2 Cài đặt NPM 2.3 Cài đặt Angular CLI tạo project Angular Chương 3: CÁC TÍNH NĂNG CHÍNH CỦA ANGULAR FRAMEWORK 3.1 Data-binding 3.1.1.Data-binding Angular gì? 3.1.2.Cách thức hoạt động Data-binding Angular 3.2 Scope 3.3 Router 3.3.1 Router Outlet 3.3.2.Cài đặt Route cho ứng dụng Angular 3.3.3 Child Routes 3.3.4 Params 3.4 Components 3.5 ngModule 3.6 Services 3.7 Directives 3.7.1 Ng-if… else 3.7.2.Ng-Template 3.7.3.Ng-Container 3.7.4 NgSwitch and NgSwi Hình 6.4.14 Giao diện trang chỉnh sửa thông tin -Danh sách xử lý Bảng 6.4.14 Xử lý giao diện trang chỉnh sửa thông tin STT 6.4.15 Giao diện trang quản lý hãng điện thoại -Giao diện 85 Hình 6.4.15 Giao diện trang quản lý hãng điện thoại -Danh sách xử lý Bảng 6.4.15 Xử lý giao diện trang quản lý hãng điện thoại STT 6.4.16 Giao diện trang quản lý loại điện thoại -Giao diện 86 Hình 6.4.16 Giao diện trang quản lý loại điện thoại -Danh sách xử lý Bảng 6.4.16 Xử lý giao diện trang quản lý loại điện thoại STT 6.4.17 Giao diện trang quản lý điện thoại theo loại điện thoại -Giao diện 87 Hình 6.4.17 Giao diện trang quản lý điện thoại theo loại điện thoại -Danh sách xử lý Bảng 6.4.17 Xử lý giao diện trang quản lý điện thoại theo loại điện thoại STT 6.4.18 Giao diện trang quản lý employees -Giao diện 88 Hình 6.4.18 Giao diện trang quản lý employees -Danh sách xử lý Bảng 6.4.18 Xử lý giao diện trang quản lý employees STT 89 6.4.19 Giao diện trang tạo tài khoản employees -Giao diện Hình 6.4.19 Giao diện trang tạo tài khoản employees -Danh sách xử lý Bảng 6.4.19 Xử lý giao diện trang tạo tài khoản employees STT 10 11 12 6.4.20 Giao diện trang đổi mật -Giao diện Hình 6.4.20 Giao diện trang đổi mật -Danh sách xử lý Bảng 6.4.20 Xử lý giao diện trang đổi mật STT 6.4.21 Giao diện trang thống kê kế toán -Giao diện 91 Hình 6.4.21 Giao diện trang thống kê kế toán -Danh sách xử lý Bảng 6.4.21 Xử lý giao diện trang thống kê kế toán STT 6.5 Kiểm thử phần mềm Bảng 6.5 Bảng danh sách kiểm thử ID Test case Test steps Expected description 92 Actual Result Kiểm tra giao diện hiển thị trang chủ Kiểm tra hoạt động đặt hàng Kiểm tra review bình luận Kiểm tra số lượng thống kê Kiểm tra trang quản lý employess Kiểm tra trang quản lý hãng điện thoại Kiểm tra trang quản lý loại điện thoại Kiểm tra trang xem, thay đổi thông tin cá nhân 95 Phần 3: KẾT LUẬN Kết kiểm thử 1.1 Tóm tắt kiểm thử -Số lượng trường hợp kiểm thử thực hiện: 21 lần -Số lượng trường hợp kiểm thử thành công: 20 lần -Số lượng trường hợp kiểm tra không thành công: lần -Tỷ lệ phần trăm trường hợp kiểm thử thành công: 95 % -Tỷ lệ phần trăm trường hợp kiểm thử không thành công: 5% 1.2 Biểu đồ biểu diễn kiểm thử Hình 6.5 Biểu đồ biểu diễn tỷ lệ kiểm thử Những kết đạt -Có kiến thức Angularjs Framework Laravel Framework -Hiểu cách thao tác với sở liệu theo phương pháp lập trình hướng đối tượng mà Angularjs Framework Laravel Framework cung cấp -Hiểu cách thức hoạt động trang web Single Page Site -Hơn việc nghiên cứu tìm hiểu cơng nghệ củng cố, cải thiện kỹ thu thập nhu cầu người dùng, phân tích chức nghiệp vụ, cách xây dựng ứng dụng từ đầu đến cuối 96 Những khó khăn thực đề tài  -Thiếu kinh nghiệm cho project đẹp mắt -Trình độ Tiếng Anh cịn thấp  project cịn sơ sài, giao diện chưa việc đọc tài liệu Tiếng Anh bị hạn chế Ưu điểm -Là website nên không cần phải cài đặt tốn nhớ -Giao diện đơn giản giúp người dùng dễ dàng sử dụng lần -Hạn chế việc lưu trữ giấy tờ, việc lưu trữ thông tin trở nên gọn nhẹ Hạn chế Dù nhóm cố gắng tìm hiểu phát triển website cách tốt nhất, giới hạn thời gian khả thân cịn hạn chế, nên khơng tránh khỏi thiếu sót, khuyết điểm: -Giao diện chưa đẹp mắt, cịn sơ sài -Thuật tốn chưa tối ưu hóa -Ở nơi khơng có Internet khơng thể truy cập -Chưa làm chức khôi phục mật quên -Chưa làm chức chatbox Hướng phát triển tương lai Mặc dù tồn hạn chế bên trên, với tâm nhóm, website khắc phục tiếp tục nâng cấp, cải tiến nhằm tiến tới hoàn hảo sử dụng rộng rãi môi trường giảng đường Giảm bớt lằng nhằng việc đăng ký mát thông tin 97 TÀI LIỆU THAM KHẢO [1] https://angular.io/docs [2] https://laravel.com/ [3] https://www.tutorialspoit.com/laravel/ [4] https://en.wikipedia.org/wiki/Single-page_application [5] https://toidicode.com/query-builder-trong-laravel-11.html [6] https://www.highcharts.com/ [7] https://freetuts.net/service-trong-angular-4-1343.html [8] https://viblo.asia/p/xay-dung-api-voi-laravel-djeZ1RjGlWz [9] https://viblo.asia/p/tao-ung-dung-crud-voi-angular-5-va-laravel-56-ORNZq9WLZ0n [10] https://toidicode.com/controller-trong-laravel-10.html [11] https://toidicode.com/model-trong-laravel-12.html 98 ... văn: Tìm hiểu Angularjs framework xây dựng Single Page Site (Website bán điện thoại trực tuyến) GV hướng dẫn: Trương Thị Ngọc Phượng Nhiệm Vụ Của Luận Văn: Tìm hiểu lý thuyết Angularjs Framework. .. ĐOÀN XUÂN HÙNG: 15110219 PHẠM MINH KẾ: 15110226 Đề Tài: TÌM HIỂU ANGULARJS FRAMEWORK VÀ XÂY DỰNG SINGLE PAGE SITE (WEBSITE BÁN ĐIỆN THOẠI TRỰC TUYẾN) KHÓA LUẬN CHUYÊN NGÀNH KỸ SƯ CNTT GIÁO VIÊN HƯỚNG... ĐOÀN XUÂN HÙNG: 15110219 PHẠM MINH KẾ: 15110226 Đề Tài: TÌM HIỂU ANGULARJS FRAMEWORK VÀ XÂY DỰNG SINGLE PAGE SITE (WEBSITE BÁN ĐIỆN THOẠI TRỰC TUYẾN) KHÓA LUẬN CHUYÊN NGÀNH KỸ SƯ CNTT GIÁO VIÊN HƯỚNG