Thiết kế website trưng bày xe hơi ứng dụng webgl hiển thị mô hình 3D

TRƯỜNG ĐẠI HỌC CẦN THƠ KHOA CÔNG NGHỆ THÔNG TIN Sinh viên thực hiện: Nguyễn Quốc Dũng MSSV: 1091653 Cán hướng dẫn ThS Võ Huỳnh Trâm MSCB: 1069 Cần Thơ, 2013 TRƯỜNG ĐẠI HỌC CẦN THƠ KHOA CÔNG NGHỆ THÔNG TIN Sinh viên thực Nguyễn Quốc Dũng MSSV: 1091653 Cán hướng dẫn Ths Võ Huỳnh Trâm MSCB: 1069 Cán phản biện Ths Nguyễn Công Danh Ks Hồ Quang Thái Luận văn bảo vệ tại: Hội đồng chấm luận văn tốt nghiệp Bộ môn Công nghệ Phần mềm Khoa Công nghệ Thông tin, trường Đại Học Cần Thơ vào ngày 10 tháng năm 2013 Mã số đề tài: Có thể tìm hiểu luận văn tại: • Thư viện khoa Công nghệ Thông tin, trường Đại Học Cần Thơ • Website: http://www.cit.ctu.edu.vn/ Luận văn tốt nghiệp Lời cảm ơn LỜI CẢM ƠN Em xin chân thành cảm ơn Quý thầy cô Khoa Công Nghệ Thông Tin Trƣờng Đại học Cần Thơ tận tình truyền đạt nhiều kiến thức bổ ích suốt thời gian học trƣờng nhƣ tạo điều kiện cho em đƣợc thực đề tài Kính chúc quý Thầy cô dồi sức khỏe thành công sống Đặt biệt, em xin chân thành bày tỏ lòng biết ơn sâu sắc đến cô Võ Huỳnh Trâm, ngƣời tận tình hƣớng dẫn em suốt thời gian thực đề tài, cô giúp em rút nhiều học kinh nghiệm quý báu em vấp phải khó khăn Cảm ơn cha mẹ sinh nuôi dạy khôn lớn, bên cạnh động viên ủng hộ đƣờng mà yêu thích lựa chọn Cảm ơn bạn sinh viên khoa công nghệ thông tin khóa 35 Các bạn giúp đỡ, động viên hỗ trợ nhiều nhƣ đóng góp nhiều ý kiến quý báu, qua giúp hoàn thiện cho đề tài Mặc dùng nổ lực, cố gắng thực đề tài nhƣng chắn đề tài nhiều thiếu sót Em mong nhận đƣợc nhiều góp ý phê bình Quý thầy cô, anh chị bạn Một lần nữa, em xin chân thành cảm ơn! TP Cần Thơ, tháng năm 2013 Sinh viên thực Nguyễn Quốc Dũng GVHD: Ths Võ Huỳnh Trâm SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Nhận xét giáo viên hƣớng dẫn NHẬN XÉT CỦA GIÁO VIÊN HƢỚNG DẪN GVHD: Ths Võ Huỳnh Trâm SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Nhận xét giáo viên phản biện NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN GVHD: Ths Võ Huỳnh Trâm SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Mục lục MỤC LỤC CHƢƠNG I: TỔNG QUAN I.1 ĐẶT VẤN ĐỀ I.2 LỊCH SỬ GIẢI QUYẾT VẤN ĐỀ I.3 MỤC TIÊU CẦN ĐẠT I.4 PHẠM VI VÀ YÊU CẦU CỦA ĐỀ TÀI I.4.1 Về khách hàng I.4.2 Nhân viên I.4.3 Quản trị viên I.5 HƢỚNG GIẢI QUYẾT I.5.1 Về lý thuyết I.5.2 Về kỹ thuật I.5.3 Phƣơng pháp thu thập thông tin I.6 BỐ CỤC QUYỄN LUẬN VĂN CHƢƠNG II: CƠ SỞ LÝ THUYẾT II.1 KHÁI NIỆM CƠ BẢN II.1.1 Internet II.1.2 World wide web II.1.3 Trình duyệt web II.1.4 Trình chủ web (web server) II.1.5 Giao thức HTTP II.2 NGÔN NGỮ PHP II.2.1 Định nghĩa php II.2.2 Biến PHP II.2.3 Kiểu liệu PHP II.2.4 Hàm PHP II.2.5 PHP truy xuất sở liệu MySQL 10 II.2.6 Lập trình hƣớng đối tƣợng với PHP 11 II.3 THƢ VIỆN JQUERY 13 II.3.1 Khái quát 13 II.3.2 Sử dụng ajax jQuery 13 II.4 THƢ VIỆN VIDEO.JS 15 II.5 THƢ VIỆN WEBGL 15 II.5.1 Giới thiệu 15 II.5.2 Yêu cầu hệ thống 16 II.5.3 Cấu trúc ứng dụng web 17 II.6 NGÔN NGỮ TRUY VẤN DỮ LIỆU SQL 17 II.7 NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML 18 II.7.1 Tổng quan 18 II.7.2 Ứng dụng HTML5 19 II.8 NGÔN NGỮ ĐỊNH DẠNG VĂN BẢN CSS 24 II.9 MÔ HÌNH MVC 25 II.10 SMARTY 26 CHƢƠNG III: ỨNG DỤNG XÂY DỰNG HỆ THỐNG 28 III.1 TÀI LIỆU ĐẶC TẢ 28 III.1.1 Giới thiệu 28 III.1.2 Mô tả tổng quan 29 III.1.3 Các yêu cầu giao tiếp bên 33 GVHD: Ths Võ Huỳnh Trâm SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Mục lục III.1.4 Các tính hệ thống 34 III.1.5 Các yêu cầu phi chức 51 III.1.6 Các yêu cầu khác 51 III.2 TÀI LIỆU THIẾT KẾ 52 III.2.1 Giớ thiệu 52 III.2.2 Tổng quan hệ thống 53 III.2.3 Kiến trúc hệ thống 53 III.2.4 Thiết kế liệu 54 III.2.5 Thiết kế chức 62 III.3 KIỂM THỬ 91 III.3.1 Giới thiệu 91 III.3.2 Phạm vi 91 III.3.3 Chi tiết kế hoạch kiểm thử 91 III.3.4 Quản lý kiểm thử 94 III.3.5 Các trƣờng hợp kiểm thử 97 CHƢƠNG IV: KẾT LUẬN VÀ KIẾN NGHỊ 108 IV.1 NHẬN XÉT VÀ KẾT QUẢ ĐẠT ĐƢỢC 108 IV.1.1 Về mặt lý thuyết 108 IV.1.2 Về chƣơng trình 108 IV.1.3 Khả ứng dụng 108 IV.2 HẠN CHẾ VÀ KHÓ KHĂN 108 IV.3 HƢỚNG PHÁT TRIỂN 108 PHỤ LỤC 1: MÔ TẢ NỘI DUNG CD LUẬN VĂN 110 PHỤ LỤC 2: HƢỚNG DẪN CÀI ĐẶT 111 PHỤ LỤC 3: GIỚI THIỆU CHƢƠNG TRÌNH 112 TÀI LIỆU THAM KHẢO 115 GVHD: Ths Võ Huỳnh Trâm SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Mục lục hình MỤC LỤC HÌNH Hình 1: Mô hình ứng dụng web sử dụng PHP MySQL Hình 2: Cấu trúc trang web với HTML5 21 Hình 3: Mô hình MVC 25 Hình 4: Mô hình kiến trúc hệ thống 53 Hình 5: Sơ đồ phân rã module 54 Hình 6: Xem danh sách tất mẫu xe 62 Hình 7: Xem danh sách xe theo nhà cung cấp 64 Hình 8: Xem ngoại thất xe 66 Hình 9: Xem nội thất xe 67 Hình 10: Xem màu mẫu xe 68 Hình 11: Xem video mẫu xe 69 Hình 12: Xem mô hình 3D 70 Hình 13: Xem tin tức công ty 72 Hình 14: Xem tin tức theo thể loại 73 Hình 15: Xem chi tiết tin tức 74 Hình 16: Giỏ hàng 75 Hình 17: Phiếu đặt hàng 76 Hình 18: Quản lý đơn đặt hàng 77 Hình 19: Xem đơn đặt hàng 78 Hình 20: Hóa đơn 80 Hình 21: Xem danh sách khách hàng 81 Hình 22: Xem chi tiết khách hàng 82 Hình 23: Xem danh sách phiếu nhập hàng 83 Hình 24: Danh sách nhân viên 84 Hình 25: Thêm tài khoản nhân viên 85 Hình 26: Thêm tin 86 Hình 27: Cập nhật tin tức 88 Hình 28: Quản lý tin tức 89 Hình 29: Trang chủ 112 Hình 30: Trang chi tiết mẫu xe 113 Hình 31: Trang mô hình 3D 113 Hình 32: Trang quản lý giỏ hàng 114 Hình 33: Trang nhân viên 114 Hình 34: Trang quản trị viên 114 GVHD: Ths Võ Huỳnh Trâm SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Tóm tắt TÓM TẮT Ngày nay, công nghệ thông tin phát triển không ngừng, thúc đẩy tất lĩnh vực ngành nghề phát triển Website công cụ giúp tiếp cận khách hàng trƣng bày sản phẩm hiệu Đề tài "Thiết kế website trƣng bày xe ứng dụng WebGL hiển thị mô hình 3D" mong muốn thiết kế web trƣng bày mẫu xe hiển thị mô hình xe 3D mẫu xe, đặt xe, xem tin tức công ty, quản lý mẫu xe công ty, quản lý nhập xe giúp công ty dễ dàng hoạt động giúp ngƣời dùng dễ dàng tiếp cận với thông tin công ty Ứng dụng có nhóm ngƣời dùng Nhóm khách hàng sử dụng trang web xem sản phẩm, xem tin tức, đặt mua xe, đăng ký tài khoản Nhóm nhân viên duyệt đơn đặt hàng, nhập hàng, thống kê doanh thu, quản lý tài khoản khách hàng quản lý tin tức Nhóm quản trị viên quản lý tài khoản nhân viên, cập nhật thông tin xe Website đƣợc xây dựng dựa hệ quản trị sở liệu MySQL, ngôn ngữ kịch cho máy chủ PHP, thƣ viện jQuery để xử lý phía máy khách, hiển thị mô hình 3D dùng WebGL, trình bày trang web HTML, định dạng trang web dùng CSS Công cụ Adobe Dreamweaver CS6 để viết mã nguồn số công cụ khác Kết hoàn thành phần phân tích thiết kế chức cho ba nhóm ngƣời dùng Đề tài xây dựng tƣơng đối hoàn việc trƣng bày mẫu xe, hiển thị tin tức, đặt hàng , duyệt đơn đặt hàng giúp việc trƣng bày mẫu xe quản lý công ty đƣợc thuận tiện Sinh viên thực Nguyễn Quốc Dũng TỪ KHÓA WebGL Mô hình 3D Web xe GVHD: Ths Võ Huỳnh Trâm SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Abstract ABSTRACT Today, information technology has been evolving, it promotes all sectors development Website is a tool to reach customers and showcase products effectively Thread "Designing website showcase cars and use WebGL to display 3D model" desired designing web showcase cars and displaying 3D models of the cars, order the car, read company news, management of company cars, importing cars to help easy operation and easy user access to corporate information Website is divided into user groups Group customers use website to review products, view news, car purchase, register for an account Group employees approved orders, import cars, sales statistics, account management and customer information management Group administrators can manage employee accounts, update vehicle information Website built based Database Management System MySQL, scripting language for server is PHP, jQuery library for client-side processing, display 3D models using WebGL, presented in HTML web pages, the using CSS web page layout Adobe Dreamweaver CS6 write code and some other stuff The results complete the analysis and design functions for three groups of users Thread relatively complete some functions as the cars showcase, reading news, creating orders, checking orders help to show the car models and manage company Composed by Nguyen Quoc Dung KEY WORD WebGL 3D model Web cars GVHD: Ths Võ Huỳnh Trâm SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Mô tả bƣớc Chƣơng III: Ứng dụng Kết mong đợi Kết thực tế Thành công / Thất bại Bƣớc 1: Chọn xem video mẫu xe Danh mục hình chụp màu Danh mục hình chụp màu Thành công xe đƣợc hiển thị xe đƣợc hiển thị Bƣớc 2: Bấm chạy video Video đƣợc chiếu Bƣớc 3: Chọn hình ảnh đại diện cho video khác Hiển thị video tƣơng ứng với Hiển thị video tƣơng ứng với Thành công bƣớc ảnh đƣợc chọn bƣớc ảnh đƣợc chọn Video đƣợc chiếu Thành công Video trƣớc tự động dừng Video trƣớc tự động dừng lại lại Video đƣợc để chế độ dừng Video đƣợc để chế độ dừng Trạng thái trƣờng hợp kiểm thử: Thành công III.3.5.3 Trường hợp kiểm thử 3: xem mô hình 3D Mô tả Mục tiêu: xem thao tác với mô hình 3D mẫu xe Thao tác: khách hàng chọn tính xem mô hình 3D Tiền điều kiện Không có Kịch Kịch kiểm thử 1: phóng to mô hình mẫu xe Mô tả bƣớc Kết mong đợi Kết thực tế Thành công / Thất bại Bƣớc 1: Ấn Alt rê Mô hình mẫu xe đƣợc phóng Mô hình mẫu xe đƣợc phóng Thành công chuột hƣớng to to bottom Trạng thái trƣờng hợp kiểm thử: Thành công Kịch kiểm thử 2: thu nhỏ mô hình mẫu xe GVHD: Ths Võ Huỳnh Trâm Trang 101 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Mô tả bƣớc Chƣơng III: Ứng dụng Kết mong đợi Bƣớc 1: Ấn Alt rê Mô hình mẫu xe đƣợc thu chuột hƣớng top nhỏ Kết thực tế Mô hình mẫu xe đƣợc thu nhỏ Thành công / Thất bại Thành công Trạng thái trƣờng hợp kiểm thử: Thành công Kịch kiểm thử 3: xem xe nhiều góc độ Mô tả bƣớc Kết mong đợi Bƣớc 1: Rê chuột Mẫu xe chuyển theo hƣớng hƣớng top nhấn chuột Kết thực tế Mẫu xe chuyển theo hƣớng nhấn chuột Thành công / Thất bại Thành công Trạng thái trƣờng hợp kiểm thử: Thành công Kịch kiểm thử 4: xem thông tin phận Mô tả bƣớc Kết mong đợi Bƣớc 1: Click chuột Thông tin phận hiển thị chọn khung xe thông tin với nội dung: Tên: khung xe Kết thực tế Thông tin phận hiển thị thông tin với nội dung: Thành công / Thất bại Thành công Tên: khung xe Mô tả: khung xe có tác dụng Mô tả: khung xe có tác dụng bao bọc xe bao bọc xe Trạng thái trƣờng hợp kiểm thử: Thành công Kịch kiểm thử 5: thay đổi màu sắc xe Mô tả bƣớc Kết mong đợi GVHD: Ths Võ Huỳnh Trâm Trang 102 Kết thực tế Thành công / Thất bại SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Bƣớc 1: Click chọn màu "xanh dƣơng" màu Chƣơng III: Ứng dụng Màu xe chuyển thành màu xanh dƣơng Màu xe chuyển thành màu xanh dƣơng Thành công Trạng thái trƣờng hợp kiểm thử: Thành công III.3.5.4 Trường hợp kiểm thử 4: cập nhật giỏ hàng đặt hàng Mô tả Mục tiêu: kiểm tra việc cập nhật giỏ hàng đặt hàng Thao tác: khách hàng thay đổi thông tin nhƣ số lƣợng, xóa trƣờng đặt hàng Tiền điều kiện Đăng nhập vào hệ thống Kịch Kịch kiểm thử 1: Thay đổi thông tin số lƣợng Mô tả bƣớc Kết mong đợi Kết thực tế Thành công / Thất bại Bƣớc 1: đặt mua Hiển thị thông báo đặt mua mẫu xe Audi A4 thành công Hiển thị thông báo đặt mua thành công Thành công Bƣớc 2: Chọn xem giỏ hàng Giỏ hàng đƣợc hiển thị với thông tin khách hàng, ngày tháng Thành công Giỏ hàng đƣợc hiển thị với thông tin khách hàng, ngày tháng Bản chi tiết xe hiển thị Bản chi tiết xe hiển thị trƣờng với thông tin Audi A4 trƣờng với thông tin Audi A4 số lƣợng số lƣợng Bƣớc 3: Thay đổi số Thông tin số lƣợng đƣợc cập Thông tin số lƣợng đƣợc cập Thành công lƣợng mẫu xe lên nhật tổng giá hóa đơn nhật tổng giá hóa đơn ấn rời khỏi ô số đƣợc cập nhật đƣợc cập nhật lƣợng Trạng thái trƣờng hợp kiểm thử: Thành công Kịch kiểm thử 2: Xóa mẫu xe danh sách Mô tả bƣớc Kết mong đợi GVHD: Ths Võ Huỳnh Trâm Trang 103 Kết thực tế Thành công SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Chƣơng III: Ứng dụng / Thất bại Bƣớc 1: đặt mua Hiển thị thông báo đặt mua mẫu xe Audi A4 thành công Hiển thị thông báo đặt mua thành công Thành công Bƣớc 2: Chọn xem giỏ hàng Giỏ hàng đƣợc hiển thị với thông tin khách hàng, ngày tháng Thành công Giỏ hàng đƣợc hiển thị với thông tin khách hàng, ngày tháng Bản chi tiết xe hiển thị Bản chi tiết xe hiển thị trƣờng với thông tin Audi A4 trƣờng với thông tin Audi A4 số lƣợng số lƣợng Bƣớc 3: ấn xóa trƣờng thông tin xe Audi A4 Thông tin trƣờng xem Audi A4 bị xóa Thông tin trƣờng xem Audi A4 bị xóa Tổng giá chuyển thành Tổng giá chuyển thành Thành công Trạng thái trƣờng hợp kiểm thử: Thành công Kịch kiểm thử 3: Đặt hàng Mô tả bƣớc Kết mong đợi Bƣớc 1: đặt mua Hiển thị thông báo đặt mua mẫu xe Audi A4 thành công Kết thực tế Hiển thị thông báo đặt mua thành công Thành công / Thất bại Thành công Bƣớc 2: Ấn đặt mua Hiển thị hóa đơn với thông Hiển thị hóa đơn với thông Thành công tin giống thông tin hiển thị tin giống thông tin hiển thị trang giỏ hàng trang giỏ hàng Trạng thái trƣờng hợp kiểm thử: Thành công III.3.5.5 Trường hợp kiểm thử 5: In phiếu đặt hàng Mô tả Mục tiêu: kiểm tra việc in phiếu đặt hàng có định dạng hay không Thao tác: sau đặt hàng trang web chuyển qua trang in phiếu đặt hàng Ngƣời dùng chọn in phiếu đặt hàng Tiền điều kiện Đã đặt hàng GVHD: Ths Võ Huỳnh Trâm Trang 104 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Chƣơng III: Ứng dụng Kịch Kịch kiểm thử 1: in phiếu đặt hàng Mô tả bƣớc Kết mong đợi Kết thực tế Thành công / Thất bại Bƣớc 1: Click in phiếu đặt hàng Hiện giao diện in phiếu đặt hàng Hiện giao diện in phiếu đặt hàng Thành công Bƣớc 2: In phiếu mở file in Nội dung file in giống nội dung website Nội dung file in giống nội dung website Thành công Trạng thái trƣờng hợp kiểm thử: Thành công III.3.5.6 Trường hợp kiểm thử 6: In hóa đơn Mô tả Mục tiêu: kiểm tra việc duyệt đơn hàng cho khách hàng, in hóa đơn Thao tác: khách hàng đặt hàng, nhân viên công ty cần duyệt đơn hàng đơn hàng có hiệu lực Tiền điều kiện Đăng nhập với quyền nhân viên Kịch Kịch kiểm thử 1: in phiếu đặt hàng Mô tả bƣớc Bƣớc 1: Chọn tính quản lý phiếu đặt hàng Kết mong đợi Kết thực tế Thành công / Thất bại Hiển thị danh sách phiếu đặt Hiển thị danh sách phiếu đặt Thành công hàng hàng Phiếu đặt hàng chƣa duyệt Phiếu đặt hàng chƣa duyệt đƣợc xếp theo thức tự đƣợc xếp theo thức tự từ thời gian từ gần đến xa từ thời gian từ gần đến xa Tiếp theo, phiếu đặt hàng Tiếp theo, phiếu đặt hàng duyệt đƣợc xếp theo thứ tự duyệt đƣợc xếp theo thứ tự thời gian từ gần đến xa thời gian từ gần đến xa Bƣớc 2: Chọn duyệt Phiếu đặt hàng đƣợc duyệt Phiếu đặt hàng đƣợc duyệt Thành công phiếu đặt hàng Biểu tƣợng duyệt phiếu đƣợc Biểu tƣợng duyệt phiếu đƣợc hiển thị hiển thị GVHD: Ths Võ Huỳnh Trâm Trang 105 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Chƣơng III: Ứng dụng Vị trí hiển thị phiếu đặt hàng Vị trí hiển thị phiếu đặt hàng nằm danh sách nằm danh sách duyệt duyệt Bƣớc 3: Chọn in hóa Hệ thống xử lý hiển thị trang Hệ thống xử lý hiển thị trang Thành công đơn đặt hàng in hóa dơn in hóa dơn Các thông tin đƣợc hiển thị giống với thông tin có phiếu đặt hàng Các thông tin đƣợc hiển thị giống với thông tin có phiếu đặt hàng Bƣớc 4: Ấn nút in hóa đơn Giao diện in đƣợc hiển thị Giao diện in đƣợc hiển thị Thành công Bƣớc 5: In hóa đơn mở file in File in đƣợc hiển thị giống với trang in hóa đơn trình duyệt File in đƣợc hiển thị giống với trang in hóa đơn trình duyệt Thành công Trạng thái trƣờng hợp kiểm thử: Thành công III.3.5.7 Trường hợp kiểm thử 7: Thêm nhân viên Mô tả Mục tiêu: kiểm tra việc quản lý danh sách nhân viên, thêm nhân viên quản lý truy cập nhân viên Thao tác: quản trị viên dùng chức quản lý tài khoản nhân viên Tiền điều kiện Đăng nhập với quyền quản trị viên Kịch Kịch kiểm thử 1: thêm nhân viên Mô tả bƣớc Bƣớc 1: Chọn tính quản lý nhân viên Kết mong đợi Kết thực tế Hiển thị danh sách nhân viên Hiển thị danh sách nhân viên Tất nhân viên đƣợc xếp theo thứ tự chữ Tất nhân viên đƣợc xếp theo thứ tự chữ Bƣớc 2: Chọn tính Form cập nhật nhân viên thêm nhân đƣợc hiển thị viên GVHD: Ths Võ Huỳnh Trâm Trang 106 Form cập nhật nhân viên đƣợc hiển thị Thành công / Thất bại Thành công Thành công SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Bƣớc 3: Nhập thông tin đƣợc yêu cầu: Chƣơng III: Ứng dụng Thông tin nhập hiển thị Thông tin nhập hiển thị Thành công không lỗi font không lỗi font Tên đăng nhập Dung Mật dung Họ tên Nguyễn Quốc Qũng Bƣớc 4: Ấn nút Cập nhật" Hệ thống thêm nhân viên Hệ thống thêm nhân viên trở trang quản lý nhân trở trang quản lý viên nhân viên Thông tin nhân viên vừa nhập đƣợc hiển thị trang quản lý nhân viên Thông tin nhân viên vừa nhập đƣợc hiển thị trang quản lý nhân viên Biểu tƣợng tài khoản hoạt động đƣợc hiển thị Biểu tƣợng tài khoản hoạt động đƣợc hiển thị Thành công Trạng thái trƣờng hợp kiểm thử: Thành công GVHD: Ths Võ Huỳnh Trâm Trang 107 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Chƣơng IV: Kết luận kiến nghị CHƢƠNG IV: KẾT LUẬN VÀ KIẾN NGHỊ IV.1 NHẬN XÉT VÀ KẾT QUẢ ĐẠT ĐƢỢC IV.1.1 Về mặt lý thuyết Sau thời gian thực đề tài giúp em: - Ứng dụng kiến thức học đƣợc trƣờng nhƣ thu thập yêu cầu, phân tích yêu cầu, thiết kế phần mềm, kiểm thử phần mềm - Ứng dụng thực tế ngôn ngữ PHP, SQL, HTML, CSS, JavaScipt - Giúp em cải thiện khả tự quản lý thân, làm việc có kế hoạch, lòng kiên trì kỹ tự nghiên cứu - Kết hợp mô hình MVC công nghệ Smarty để phát triển hệ thống - Hiểu kỹ thuật phát triển đồ họa 3D web với WebGL IV.1.2 Về chƣơng trình Thiết kế tƣơng đối hoàn thiện website trƣng bày xe ứng dụng WebGL hiển thị mô hình xe 3D Xây dựng tính trình chiếu ảnh video mẫu xe Xây dựng đƣợc quy trình xử lý phiếu đặt hàng tƣơng đối hoàn chỉnh Xây dựng đƣợc trang xem quản lý tin tức hãng xe IV.1.3 Khả ứng dụng Hệ thống đƣợc xây dựng dựa mô hình website hãng xe lớn nên khả ứng dụng cao IV.2 HẠN CHẾ VÀ KHÓ KHĂN - Kỹ lập trình hạn chế nên số phần chƣơng trình chƣa đƣợc tốt - Thời gian thực đề tài đủ để thực số tính chính, nên xây dựng hệ thống website đầy đủ tất chức nhƣ yêu cầu thực tế - Việc nghiên cứu công nghệ WebGL để hiển thị mô hình 3D nhiều thời gian IV.3 HƢỚNG PHÁT TRIỂN Ứng dụng số kỹ thuật lập trình để giúp cho tốc độ xử lý nhanh hơn, hiệu ứng giao diện sử dụng đẹp nhƣ HTML5 CSS3, Xây dựng hoàn chỉnh chức đề tài GVHD: Ths Võ Huỳnh Trâm Trang 108 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Chƣơng IV: Kết luận kiến nghị Phát triển website tảng di động GVHD: Ths Võ Huỳnh Trâm Trang 109 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Phụ lục PHỤ LỤC 1: MÔ TẢ NỘI DUNG CD LUẬN VĂN Trong CD có chứa hai thƣ mục gồm: "BaoCao" "ChuongTrinh" - Thƣ mục "BaoCao" có chứa hai file "baocao.doc" (nội dung báo cáo) "Slide.ppt" (nội dung Slide báo cáo) - Thƣ mục "ChuongTring' chứa thƣ mục "LuanVan" (chứa mã nguồn toàn hệ thống xây dựng) file luanvan.sql (chứa CSDL đề mô) GVHD: Ths Võ Huỳnh Trâm Trang 110 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Phụ lục PHỤ LỤC 2: HƢỚNG DẪN CÀI ĐẶT Hƣớng dẫn cài đặt chƣơng trình localhost sử dụng XAMPP để làm trình chủ ảo: Bƣớc 1: Tải XAMPP máy địa chỉ: http://www.apachefriends.org/en/xamppwindows.html Bƣớc 2: Cài chƣơng trình XAMPP vào máy Bƣớc 3: Cài đặt hệ thống website sử dụng trình chủ ảo: - Mở XAMPP lên kích hoạt cho Apache, MySQL - Vào địa http://localhost/phpmyadmin/ để tạo sở liệu inport file "luanvan.sql" (cd/ChuongTrinh/luanvan.sql) - Chép thƣ mục luận văn vào thƣ mục "LuanVan" (cd/ChuongTrinh/LuanVan) vào thƣ mục C:\xampp\htdocs - Chạy chƣơng trình + Trang chủ vào địa chỉ: http://localhost/luanvan/index.php + Trang nhân viên vào địa chỉ: http://localhost/luanvan/nhanvien/index.php + Trang quản trị viên vào địa chỉ: http://localhost/luanvan/admin/index.php GVHD: Ths Võ Huỳnh Trâm Trang 111 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Phụ lục PHỤ LỤC 3: GIỚI THIỆU CHƢƠNG TRÌNH Trang chủ Hình 29: Trang chủ GVHD: Ths Võ Huỳnh Trâm Trang 112 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Phụ lục Trang chi tiết mẫu xe Hình 30: Trang chi tiết mẫu xe Trang mô hình 3D Hình 31: Trang mô hình 3D GVHD: Ths Võ Huỳnh Trâm Trang 113 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Phụ lục Trang quản lý giỏ hàng Hình 32: Trang quản lý giỏ hàng Trang nhân viên Hình 33: Trang nhân viên Trang quản trị viên Hình 34: Trang quản trị viên GVHD: Ths Võ Huỳnh Trâm Trang 114 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Tài liệu tham khảo TÀI LIỆU THAM KHẢO [1] ThS TRẦN NGÂN BÌNH Giáo trình hệ sở liệu Nhà xuất Trƣờng Đại Học Cần Thơ [2] TS TRẦN CAO Đệ Giáo trình Kiểm thử phần mềm Nhà xuất Đại Học Cần Thơ [3] NGUYỄN TRƢỜNG SINH (chủ biên), LÊ MINH HOÀNG, HOÀNG ĐỨC HẢI Sử dụng PHP MySQL thiết kế web động Nhà xuất Thống kê [4] ThS VÕ HUỲNH TRÂM Bài giảng Phân tích yêu cầu phần mềm Đại Học Cần Thơ [5] DIEGO HERNANDO CANTOR RIVERA WebGL Beginner's Guide Nhà xuất Packt Publishing [6] JOÃO PRADO MAIA, HASIN HAYDER, LUCIAN GHEORGHE Smarty: PHP Template programming and Applications Nhà xuất Packt Publishing Các website: [1] W3Schools: http://www.w3schools.com/ [2] jQuery API Documentation: http://api.jquery.com/ [3] Wikipedia - Internet: http://vi.wikipedia.org/wiki/Internet [4] Thiết kế web Hải Phòng: http://hpsoft.vn/news/getNewsById/287/co-ban-ve-ungdung-web/ [5] HTML5 Video Player: http://videojs.com/ [6] Wikipedia – HTML: http://vi.wikipedia.org/wiki/HTML [7] Wikipedia – CSS: https://vi.wikipedia.org/wiki/CSS [8] WebGL Public Wiki: http://www.khronos.org/webgl/wiki/Main_Page GVHD: Ths Võ Huỳnh Trâm Trang 115 SVTH: Nguyễn Quốc Dũng [...]... web có một bƣớc tiến mới ứng trƣớc yêu cầu thực tế đó, đề tài "Thiết kế website trƣng bày xe hơi ứng dụng WebGL hiển thị mô hình 3D" đã đƣợc hình thành I.2 LỊCH SỬ GIẢI QUYẾT VẤN ĐỀ Việc sử dụng website để trƣng bày sản phẩm không phải là một đề tài mới Việc này đã đƣợc các hãng xe danh tiếng (nhƣ Ford Việt Nam, Toyota Việt Nam, Audi, The Land Rover ) sử dụng từ rất lâu Nhƣng website của những hãng nói... việc hiển thị hình ảnh và thông tin đơn thuần Trong đề tài này không chỉ cung cấp cái nhìn về sản phẩm cho ngƣời dùng thông qua các bức ảnh Hệ thống còn giúp ngƣời dùng có cái nhìn trực quan hơn thông qua mô hình xe 3D Hệ thống cũng thực hiện chức năng đặt mua xe, khi ngƣời dùng có nhu cầu mua xe I.3 MỤC TIÊU CẦN ĐẠT Thiết kế website trƣng bày xe hơi với các yêu cầu cơ bản Ứng dụng WebGL để hiển thị mô. .. dụng WebGL để hiển thị mô hình xe 3D GVHD: Ths Võ Huỳnh Trâm Trang 1 SVTH: Nguyễn Quốc Dũng Luận văn tốt nghiệp Chƣơng I: Tổng quan I.4 PHẠM VI VÀ YÊU CẦU CỦA ĐỀ TÀI Xây dựng website trƣng bày xe hơi theo mô hình MVC trên nền Smarty giúp tăng tính sử dụng lại và tăng tốc độ phát triển phần mềm Nghiên cứu và ứng dụng công nghệ WebGL để hiển thị mô hình xe 3D Các đối tƣợng sử dụng hệ thống gồm: khách... này trình bày tổng quan về mô hình ứng dụng web, các khái niệm cơ bản, các ngôn ngữ và kỹ thuật đƣợc sử dụng để xây dựng ứng dụng web nhƣ HTML, CSS , PHP, SQL, jQuery, WebGL, MVC, Smarty CHƢƠNG III: NỘI DUNG VÀ KẾT QUẢ ĐẠT ĐƢỢC Chƣơng này trình bày việc ứng dụng cơ sở lý thuyết vào phát triển một ứng dụng cụ thể Phần ứng dụng đƣợc chia thành 3 phần lớn: đặt tả, thiết kế, kiểm thử CHƢƠNG IV: KẾT LUẬN... khách hàng Xem mẫu xe Khách hàng có thể xem tất cả các mẫu xe mà công ty có hoặc xem mẫu xe theo từng hãng Khách hàng có thể chọn một mẫu xe để xem chi tiết về các thông tin của xe nhƣ ngoại thất, nội thất, màu sắc, mô hình 3D, video giới thiệu về mẫu xe Xem tin tức của công ty Háng hàng có thể xem tin tức về các hoạt động của công ty Các tin tức đƣơc phân thành tin tức sản phẩm, tin tức tuyển dụng, tin... ẩn mẫu xe I.5 HƢỚNG GIẢI QUYẾT I.5.1 Về lý thuyết Tìm hiểu về MVC và Smarty Tìm hiểu về công nghệ WebGL và cách ứng dụng hiển thị mô hình xe 3D Các thƣ viện đƣợc phát triển dùng PHP Các thƣ viện đƣợc phát triển dùng jQuery Ngôn ngữ SQL Cách truyền dữ liệu giữa PHP và Smarty, PHP và MySQL, Smarty và JavaScript I.5.2 Về kỹ thuật Dùng công cụ Power Designer 15.1 để phân tích và thiết kế các mô hình Dùng... lý do trên, sử dụng web để giới thiệu sản phẩm là việc cần thiết với bất cứ hãng xe Việc sử dụng web để giới thiệu sản phẩm xe rất cần thiết, nhƣng web vẫn chƣa thay thế đƣợc trong hoạt động tiếp thị của hãng xe Lý do là nhu cầu muốn cảm nhận hình ảnh sống động của một chiếc xe thật (điều không thể làm đƣợc với những hình ảnh đơn thuần) WebGL sẽ là một lựa chọn tốt để giúp việc tiếp thị web có một... cửa mới về khả năng tạo môi trƣờng 3D (nhƣ trò chơi video) dựa trên web, khoa học trực quan và hình ảnh y tế Với sự phát triển ngày càng mạnh của các điện thoại thông minh và máy tính bảng (có trình duyệt web), các ứng dụng 3D đƣợc viết bằng WebGL có thể hoạt động tốt trên cả thiết bị di động II.5.2 Yêu cầu hệ thống WebGL là một giao diện lập trình đồ họa 3D cho web Do đó, WebGL không cần cài đặt Chúng... cập nhật loại tin tức khi cần thiết I.4.3 Quản trị viên Quản lý tài khoản nhân viên Nhà quản trị sử dụng chức năng này để thêm nhân viên mới, xem danh sách nhân viên của hệ thống, khóa các tài khoản sai quy định hoặc lâu không sử dụng hệ thống Quản lý danh mục xe Nhà quản trị sử dụng chức năng này để thêm hoặc cập nhật các thông tin liên quan đến mẫu xe (thí dụ: mô hình 3D, hình ảnh, màu sắc, nhà cung... phần: Client: ngƣời dùng (user) sử dụng trình duyệt Web để gửi yêu cầu (HTTP Request) đến Server Web browser cũng có trách nhiệm tiếp nhận các phản hồi (HTTP Response) từ phía Web Server và hiển thị nội dung phản hồi trên cửa sổ trình duyệt Web Server: là một trình chủ web (Apache) khởi chạy các ứng dụng web tƣơng ứng để xử lý yêu cầu của ngƣời sử dụng, kết quả là ứng dụng Web sinh ra một trang HTML trả