Thông tin tài liệu
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 SKL 0 Tp Hồ Chí Minh,2019 an 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 an 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 an ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh phúc ******* ******* 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 MSSV 1: 15110219 Họ tên Sinh viên 2: Phạm Minh Kế MSSV 2: 15110226 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 hoà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 an ĐH SƯ PHẠM KỸ THUẬT TP.HCM XẢ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh phúc ******* ******* 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 MSSV 1: 15110219 Họ tên Sinh viên 2: Phạm Minh Kế MSSV 2: 15110226 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 tháng Giáo viên phản biện (Ký & ghi rõ họ tên) an năm 20 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 an 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 Chun 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 Công việc 18/03/2019 đến Tìm hiểu lý thuyết Angularjs 14/04/2019 Framework, Website Single Page (Các tuần 31 32 33 34) Tìm hiểu Laravel Framework xây dựng Restful API an Ghi Cài đặt, Cấu trúc API, Route, Controller, Model, Schema, View Query, Middleware, … 15/04/2019 đến Xác định yêu cầu Website bán 21/04/2019 hàng trực tuyến: (Tuần 35) - Yêu cầu chức - Yêu cầu phi chức 22/04/2019 đến Mơ hình hóa u cầu, thiết kế 05/05/2019 sở liệu: (Các tuần 36, 37) - Lược đồ UseCase - Thiết kế database 06/05/2019 đến Thiết kế giao diện 26/05/2019 (Các tuần 38, 39, 40) 27/05/2019 đến Viết code xử lý 23/06/2019 (Các tuần 41, 42, 43, 44) 24/06/2019 đến Kiểm thử, sửa lổi 30/06/2019 (Tuần 45) 01/07/2019 đến Viết báo cáo 07/07/2019 (Tuần 46) Ý kiến Giáo viên hướng dẫn Tp Hồ Chí Minh, ngày 15 tháng 07 năm 2019 Người viết đề cương (Ký & ghi rõ họ tên) (Ký & ghi rõ họ tên) an MỤC LỤC 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 .5 Kết dự kiến đạt Phần 2: NỘI DUNG .7 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 12 2.1 Cài đặt Nodejs 12 2.2 Cài đặt NPM 12 2.3 Cài đặt Angular CLI tạo project Angular 12 Chương 3: CÁC TÍNH NĂNG CHÍNH CỦA ANGULAR FRAMEWORK 13 3.1 Data-binding 13 3.1.1 Data-binding Angular gì? 13 3.1.2 Cách thức hoạt động Data-binding Angular 13 3.2 Scope 14 3.3 Router 15 3.3.1 Router Outlet 15 3.3.2 Cài đặt Route cho ứng dụng Angular 15 3.3.3 Child Routes 16 3.3.4 Params 17 3.4 Components 17 3.5 ngModule 18 3.6 Services 19 3.7 Directives 20 3.7.1 Ng-if… else 21 3.7.2 Ng-Template 21 3.7.3 Ng-Container 22 3.7.4 NgSwitch and NgSwitchCase 22 an 3.8 Xử lý Event Frontend 22 3.8.1 Xử lý thao tác người dùng 22 3.8.2 Xử lý thao tác người dùng cách 23 3.9 Sử dụng ngModel form fields 23 Chương 4: TÌM HIỂU SINGLE PAGE SITE 25 4.1 Single page site gì? 25 4.2 Single page khác với web truyền thống 25 4.3 Các tính Single Page Site 26 4.4 Ưu điểm nhược điểm 27 Chương 5: VÌ SAO CHỌN LARAVEL FRAMEWORK XÂY DỰNG API 29 5.1 Tại chọn ngôn ngữ PHP 29 5.2 Vậy lại chọn Laravel Framework? 30 5.3 Cách xây dựng Restful API với Laravel 32 5.3.1 Đầu tiên tạo dự án laravel 32 5.3.2 Kết nối sở liệu 32 5.3.3 Viết API tương tác với sở liệu 33 Chương 6: WEBSITE BÁN ĐIỆN THOẠI TRỰC TUYẾN 39 6.1 Khảo sát trạng 39 6.2 Xác định yêu cầu 39 6.2.1 Yêu cầu chức nghiệp vụ 39 6.2.2 Yêu cầu phi chức 45 6.2.3 Phân tích mơ hình hóa yêu cầu 46 6.3 Phân tích thiết kế sở liệu 61 6.3.1 Lược đồ Use Case 61 6.3.2 Cơ sở liệu 62 6.3.3 Lược đồ Diagram 69 6.4 Thiết kế giao diện 69 6.4.1 Giao diện menu slide 69 6.4.2 Giao diện trang sản phẩm giảm giá 70 6.4.3 Giao diện trang tìm kiếm điện thoại theo hãng 71 6.4.4 Giao diện trang thông tin chi tiết loại điện thoại 72 6.4.5 Giao diện phần review điện thoại 74 6.4.6 Giao diện trang giỏ hàng 75 6.4.7 Giao diện trang checkout 76 6.4.8 Giao diện trang contact 78 6.4.9 Giao diện trang quản lý đơn hàng 79 6.4.10 Giao diện trang chi tiết đơn hàng 80 an 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 Loại Control Nội dung Sự kiện < input > Tag Thay đơi hình ảnh < input > Tag Nhập email < input > Tag Nhập họ tên < input > Tag Nhập quê quán < input > Tag Nhập số điện thoại < input > Tag Nhập ngày sinh < input > Tag Nhập lương < Button > Tag Lưu thay đổi Click < Button > Tag Thoát Click Click 6.4.15 Giao diện trang quản lý hãng điện thoại - Giao diện 85 an Ghi 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 Loại Control Nội dung < table > Tag Hiển thị danh sách Sự kiện hãng điện thoại < button > Tag Xóa hãng điện thoại < button > Tag Gọi đến trang tương Click ứng < input > Tag Nhập tên hãng điện thoại < input > Tag Chọn logo cho hãng Click điện thoại < button > Tag Thêm hãng điện thoại Click 6.4.16 Giao diện trang quản lý loại điện thoại - Giao diện 86 an Ghi 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 Loại Control Nội dung < table > Tag Hiển thị danh sách Sự kiện Ghi loại điện thoại < input > Tag Tìm kiếm loại điện Change thoại < button > Tag Thêm loại điện thoại Click < button > Tag Xem chi tiết loại điện Click thoại < button > Tag Sửa thông tin loại Click điện thoại < button > Tag Xóa loại điện thoại Click < button > Tag Gọi đến trang tương Click ứng 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 an 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 Loại Control Nội dung < table > Tag Hiển thị danh sách Sự kiện điện thoại theo loại điện thoại < button > Tag xóa điện thoại Click < button > Tag Gọi đến trang tương Click ứng < input > Tag Nhập màu sắc cho điện thoại < button > Tag Thêm điện thoại 6.4.18 Giao diện trang quản lý employees - Giao diện 88 an Click Ghi 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 Loại Control Nội dung Tag Hiển thị menu Tag Gọi đến trang quản lý Sự kiện Click employess < table > Tag Hiển thị danh sách employess < input > Tag Tìm kiếm employess Change < button > Tag Thêm employess Click < button > Tag Xem chi tiết Click employess < button > Tag Sửa thông tin Click employess < button > Tag Xóa employess Click < button > Tag Gọi đến trang tương Click ứng 89 an Ghi 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 Loại Control Nội dung Sự kiện < input > Tag Chọn hình ảnh đại Click diện cho employess Tag Nhập email Tag Nhập mật Tag Nhập lại mật Tag Nhập họ tên Tag Nhập số điện thoại Tag Nhập quê quán, địa Tag Chọn ngày sinh Tag Nhập lương 10 Tag Chọn quyền truy cập Click 11 < button > Tag Thêm employess Click 12 < button > Tag Làm form Click 90 an Click Ghi 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 Loại Control Nội dung < input > Tag Nhập mật Sự kiện Tag Nhập mật Tag Nhập lại mật < button > Tag Save Click 6.4.21 Giao diện trang thống kê kế toán - Giao diện 91 an Ghi 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 Loại Control Nội dung Sự kiện < select > Tag Chọn tháng Click Tag HIển thị số điện thoại Ghi bán theo tháng < select > Tag Chọn tháng Click Tag HIển thị số hóa đơn bán theo tháng < select > Tag Chọn tháng Click Tag HIển thị số doanh thu theo tháng Hiển thị tổng lương Tag nhân viên 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 an Actual Result Kiểm tra Truy cập vào hệ Hệ thống tồn Hệ thống tồn giao diện thống Hình ảnh thị Hiển thị menu Kiểm tra giao rõ rang Hiển thị slide quảng diện hiển thị Hiển thị cáo Tiến hành tìm đầy đủ số lượng điện Hiển thị hình ảnh đầy kiếm điện thoại thoại thỏa điều kiện đủ theo từ khóa giá tìm kiếm Số lượng sản phẩm hiển thị trang chủ phù hợp với điều kiện search Kiểm tra Tiến hành thêm Giỏ hàng hiển thị Hiển thị sản hoạt động sản phẩm vào giỏ sản phẩm, số phẩm đặt hàng hàng lượng, màu sắc Hiển thị số Tùy chọn màu Tính tốn thành lượng sắc, số lượng tiền Tính tiền hóa đơn xác Kiểm tra số lượng, thành tiền Kiểm tra Hiển thị đầy đủ Hiển thị tên review khách hàng với Thêm bình luận thơng tin khách gmail, nội dung, đánh hàng giá Thực việc Hiển thị số thêm review hiệu lượng review Việc thêm review Kiểm tra hiển thị review bình review trước luận thực Kiểm tra số Đăng nhập quyền lượng thống kê Đăng nhập tồn Truy cập thành công admin quản lý Giữ liệu phãi Hiền thị đúng, phù Kiểm số liệu trùng khớp hợp với số liệu database Đăng nhập quyền Đăng nhập tồn Truy cập thành công admin quản lý Giữ liệu phãi trùng Hiền thị đủ số lượng khớp nhân viên thống kê với giữ liệu database Kiểm tra trang quản 93 an lý employess Kiểm tra trang quản lý hãng điện thoại Kiểm số lượng Việc thêm, sửa, Thơng tin nhân nhân viên xóa tiến hành đúng, viên hiển thị Kiểm tra thơng tin tồn vẹn liệu xác ngẫu nhiên số Việc thêm, sửa, xóa, nhân viên tìm kiếm thực tốt, Thực thêm, không thiếu hay sai sửa ,xóa nhân viên liệu Đăng nhập quyền Đăng nhập tồn Truy cập thành công admin quản lý Giữ liệu phãi Hiền thị đủ số lượng Kiểm số lượng trùng khớp hãng điện thoại hãng điện thoại Việc thêm, sửa, Thông tin hãng Kiểm tra thơng tin xóa tiến hành điện thoại hiển thị ngẫu nhiên số xác tồn vẹn liệu hãng điện thoại Việc thêm, sửa, xóa, Thực thêm tìm kiếm thực tốt, hãng điện thoại không thiếu hay sai Thực sửa hay liệu xóa ngẫu nhiên nhiều hãng điện thoại Đăng nhập quyền Đăng nhập tồn Truy cập thành công trang quản admin quản lý Giữ liệu phãi Hiền thị đủ số lượng lý loại điện Kiểm số lượng trùng khớp loại điện thoại loại điện thoại Việc thêm, sửa, Thông tin loại Kiểm tra thoại Kiểm tra thơng tin xóa tiến hành đúng, điện thoại hiển thị ngẫu nhiên số xác toàn vẹn liệu loại điện thoại Việc thêm, sửa, xóa, Thực thêm tìm kiếm thực tốt, loại điện thoại không thiếu hay sai Thực sửa hay liệu xóa ngẫu nhiên Số lượng điện thoại nhiều loại điện theo sở liệu thoại 94 an Kiểm tra số lượng điện thoại theo loại điện thoại Kiểm tra trang xem, thay đổi Đăng nhập hệ Đăng nhập tồn Truy cập thành công thống Hiển thị thông tin Hiền thị đủ số lượng Kiểm thơng tin cũ xác loại điện thoại thông tin cá cá nhân nhân Thông tin loại Thực thay điện thoại hiển thị đổi thơng tin xác Thực thay Việc thêm, sửa, xóa, đổi mật tìm kiếm thực tốt, khơng thiếu hay sai liệu 95 an 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 an Những khó khăn thực đề tài - Thiếu kinh nghiệm cho project project sơ sài, giao diện chưa đẹp mắt Trình độ Tiếng Anh cịn thấp 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 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, 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 an 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 an S an K L 0
Ngày đăng: 27/12/2023, 03:40
Xem thêm:
