Xây dựng website cung cấp các tiện ích cho kỳ thi tuyển sinh đại học cao đẳng tại cụm thi vinh

TRƯỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN NGUYỄN THỊ THANH NHÀN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Tên đồ án: XÂY DỰNG WEBSITE CUNG CẤP CÁC TIỆN ÍCH CHO KỲ THI TUYỂN SINH ĐẠI HỌC CAO ĐẲNG TẠI CỤM THI VINH Nghệ An, tháng 01 năm 2016 TRƯỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Tên đồ án: XÂY DỰNG WEBSITE CUNG CẤP CÁC TIỆN ÍCH CHO KỲ THI TUYỂN SINH ĐẠI HỌC CAO ĐẲNG TẠI CỤM THI VINH Sinh viên thực hiện: Nguyễn Thị Thanh Nhàn Mã sinh viên: 1151073765 Lớp: 52K2 - CNTT Giáo viên hướng dẫn: TS Phan Anh Phong Nghệ An, tháng 01 năm 2016 LỜI CẢM ƠN Em xin bày tỏ lịng thành kính biết ơn sâu sắc đến thầy TS Phan Anh Phong nhiệt tình hướng dẫn, bảo em suốt trình thực đề tài 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 Vinh tạo điều kiện thuận lợi cho em suốt thời gian học tập nghiên cứu trường Xin cảm ơn thầy khoa - phịng trường Đại học Vinh, bạn bè đồng mơn đóng góp ý kiến, giúp đỡ động viên nhiều trình em làm đề tài Xin cảm ơn cha mẹ, anh chị em người thân chổ dựa tinh thần, nguồn động lực to lớn để em vượt qua khó khăn q trình thực đề tài Xin chân thành cảm ơn! Vinh, ngày tháng năm 2016 Sinh viên Nguyễn Thị Thanh Nhàn Xây dựng website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh MỤC LỤC Trang LỜI CẢM ƠN MỤC LỤC MỞ ĐẦU CHƢƠNG : CÁC KIẾN THỨC CƠ BẢN VÀ MÔ HÌNH MVC 1.1 Các kiến thức 1.1.1 Bản đồ 1.1.2 Công nghệ Web 2.0 1.1.3 Công nghệ Mashup 1.1.4 AJAX 1.1.5 JavaScript 1.1.6 CSS 1.1.7 Bootstrap 10 1.1.8 SQL Server 10 1.2 Mơ hình MVC 11 1.2.1 Mơ hình kết hợp Struts - MVC 12 1.2.2 Tiến trình hoạt động framework Struts 12 1.2.3 Cấu trúc Struts 13 1.2.4 Các thành phần ứng dụng Struts 14 1.2.5 Các file cấu hình cần thiết để xây dựng ứng dụng Struts 14 1.2.6 Ưu điểm Struts 15 1.2.7 Nhược điểm Struts 15 CHƢƠNG 2: GOOGLE MAPS API 17 2.1 Google Map API gì? 17 2.2 Ưu điểm Google Maps API 17 2.3 Các tính Google Maps API ứng dụng vào đồ án 17 2.4 Một số ứng dụng xây dựng từ Google Map API 19 2.5 Cách sử dụng Google Map API 19 2.6.Tìm hiểu số đặc tính Google Map API 20 2.7 Phân loại Google maps API 22 SVTH: Nguyễn Thị Thanh Nhàn – Lớp 52K2 – CNTT Xây dựng website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh 2.7.1 Bản đồ 2D 22 2.7.2 Bản đồ phối cảnh 45° 23 2.8 Các phương thức đồ 23 CHƢƠNG 3: XÂY DỰNG WEBSITE CUNG CẤP CÁC TIỆN ÍCH CHO KỲ THI TUYỂN SINH ĐẠI HỌC CAO ĐẲNG TẠI CỤM THI VINH 25 3.1 Kiến trúc 25 3.2 Dữ liệu đầu vào 30 3.3 Thiết kế 31 3.3.1 Thiết kế Cơ sở liệu 31 3.3.2 Xây dựng mơ hình chức 34 3.3.3 Thiết kế giao diện đặc tả chức 37 3.4.Demo chương trình 52 KẾT LUẬN 54 PHỤ LỤC 56 TÀI LIỆU THAM KHẢO 83 SVTH: Nguyễn Thị Thanh Nhàn – Lớp 52K2 – CNTT Xây dựng website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh MỞ ĐẦU Bản đồ trực tuyến cơng cụ thể đối tượng địa lí không gian tiện lợi hiệu So với đồ giấy, đối tượng không hiển thị đơn ký hiệu tĩnh đồ mà cịn thể nhiều lớp thơng tin tương tác người dùng hệ thống sở liệu số Trong năm gần đây, kỳ thi tuyển sinh đại học, cao đẳng nhận quan tâm thí sinh người nhà thí sinh Ngồi thông tin ngành nghề đào tạo, tiêu tuyển sinh thơng tin như: địa điểm dự thi, hướng di chuyển đến điểm thi, dịch vụ cần thiết cho người nhà thí sinh vv thí sinh gia đình quan tâm.Với phát triển công nghệ thông tin truyền thông, phương pháp xây dựng đồ trực tuyến hỗ trợ kỳ tuyển sinh có hiệu phục vụ xã hội cao Các đồ trực tuyến có tính tương tác cao so với đồ giấy Thông tin thể đồ trực tuyến nhiều lớp thông tin so với đồ giấy Thí sinh truy cập đồ trực tuyến thông qua mạng Internet qua thiết bị di động cầm tay mà không cần sử dụng đồ giấy Khi thí sinh xác định địa điểm dự thi, thí sinh có lựa chọn hướng đi, tìm địa điểm phục vụ nhu cầu cần thiết, ngồi thí sinh cịn quan sát vị trí có đội tình nguyện viên tiếp sức mùa thi cần giải đáp thắc mắc Google maps dịch vụ ứng dụng phát triển đồ trực tuyến Internet, sử dụng phổ biến rộng rãi toàn giới Trên sở ứng dụng từ dịch vụ phát triển này, em nhận thấy có vài tính Google Map truyền thống thể lại đồ án có nhiều ưu điểm hơn: Những nhược điểm Google Maps truyền thống:  Nhiều địa điểm chưa có thơng tin chi tiết đánh giá Khi tìm kiếm địa điểm khơng có thơng tin Google maps, người sử dụng cảm thấy lúng túng trước kết tìm kiếm này.Trên thực tế có nhiều địa điểm tồn giới, chưa người dùng khác đóng góp địa điểm hư vô đồ  Chưa có chức hiển thị địa điểm phạm vi bán kính Google Maps có ứng dụng tìm gần cách gợi ý nội dung lân cận điểm mà bạn tìm kiếm Một ý kiến đưa cho đồ án ứng dụng quét phạm vi hiển thị nội dung theo bán kính Ứng dụng tìm kiếm xung quanh điểm mà bạn truy vấn đưa nhiều kết lúc SVTH: Nguyễn Thị Thanh Nhàn – Lớp 52K2 – CNTT Xây dựng website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh  Đối với người sử dụng thông thường, muốn thêm bổ sung nội dung cho Google maps phải truy cập vào Google.Maps.Macker đăng nhập tài khoản Google để thực quyền thêm nội dung Ý kiến người dùng chế độ Cá nhân hiển thị có đồng ý nhân viên Google maps người dùng khác đánh giá Vì vậy, với người hồn tồn khơng biết Google.Maps.Macker khơng thể thực chức Trên sở ứng dụng mà Google Maps API mang lại đánh giá chủ quan Google maps truyền thống, sở tiền đề để xây dựng ứng dụng: “Xây dựng Website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh” kế thừa phát triển, khắc phục hạn chế đánh giá người dùng Xây dựng Website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh sử dụng Google maps API sở dựa tảng đồ trực tuyến Google maps kết hợp sử dụng ứng dụng hỗ trợ từ Google Google maps API với yêu cầu chức sau:  Phạm vi hiển thị : hiển thị đồ thành phố Vinh  Tìm kiếm đường đi, địa điểm thi, dịch vụ liên quan như: taxi, nhà hàng, khách sạn, nhà nghỉ, địa điểm tiếp sức mùa thi; dịch vụ cần thiết người đến với địa điểm thi  Tìm kiếm địa điểm gần địa điểm theo bán kính  Tìm đường địa điểm  Tìm kiếm xem vị trí điểm  Thêm đóng góp liệu cho ứng dụng từ phía người dùng  Cập nhật loại bỏ liệu dư thừa dành cho người quản trị Đề tài góp phần vào việc phát triển ứng dụng công nghệ Web massup nay, tích hợp thơng tin khơng gian toạ độ thơng tin thuộc tính thành hệ thống thơng tin hồn chỉnh Web Đề tài tảng việc nghiên cứu ứng dụng Google maps API vào hệ thống trang web, phục vụ lĩnh vực giáo dục nói riêng lĩnh vực kinh tế - xã hội khác nói chung SVTH: Nguyễn Thị Thanh Nhàn – Lớp 52K2 – CNTT Xây dựng website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh CHƢƠNG CÁC KIẾN THỨC CƠ BẢN VÀ MƠ HÌNH MVC 1.1 Các kiến thức 1.1.1 Bản đồ Theo Wikipmedia Bản đồ vẽ đơn giản miêu tả không gian, địa điểm hiển thị thông số liên quan trực tiếp đến vị trí có liên quan đến khu vực xung quanh Theo nhà đồ, đồ miêu tả khái quát, thu nhỏ bề mặt Trái Đất bề mặt thiên thể khác mặt phẳng phép chiếu xác định, nội dung đồ biểu thị hệ thống ký hiệu quy ước Bản đồ dùng địa lý Theo nghĩa đồ thường có hai chiều mà biểu diễn khơng gian có ba chiều đắn Môn đồ khoa học nghệ thuật vẽ đồ Theo Trung tâm Thông tin (CIREN) thuộc Bộ Tài Ngun- Mơi trường, ngồi việc cung cấp thông tin cho người truy cập, hệ đồ cịn có ý nghĩa sở liệu quan trọng phục vụ hoạt động quan Chính phủ, quan nghiên cứu khoa học phục vụ việc phổ cập thông tin cộng đồng 1.1.2 Công nghệ Web 2.0 Web 2.0 hệ thứ dịch vụ tồn World Wide Web, cho phép người cộng tác hay chia sẻ thông tin trực tuyến với Trái ngược với hệ đầu, web 2.0 đưa người sử dụng tới gần ứng dụng chạy desktop so với trang web bình thường chứa đựng thông tin dạng tĩnh Quy ước chung web 2.0 đưa hội thảo O’Reilly Media MediaLive Internationnal phát triển web vào năm 2004 Các ứng dụng web 2.0 có kết hợp cơng nghệ phát triển vào cuối thập niên 1990, bao gồm web service APIs (1998), Ajax ( 1998) web syndication ( 1997) Chúng cho phép đưa lên trang web số lượng lớn phần mềm chạy web Quy ước cịn bao gồm Blog ( trang thơng tin cá nhân) Wiki (từ điển bách khoa mã nguồn mở) Hiện Web 2.0 phát triển mạnh trang web cung cấp ứng dụng chạy trực tuyến nhiều người sử dụng, kể số trang web sau: SVTH: Nguyễn Thị Thanh Nhàn – Lớp 52K2 – CNTT Xây dựng website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh  Trang web cung cấp dịch vụ chat trực tuyến cho phép chạy web mà cài đặt chương trình chat thơng dụng Yahoo Messenger, MSN…  Trang web cung cấp dịch vụ soạn thảo văn trực tuyến cho phép soạn thảo tài liệu trực tuyến giống soạn thảo chương trình bình thường  Trang web cung cấp dịch vụ soạn thảo văn trực tuyến cho phép soạn thảo tài liệu với định dạng PDF/DOC/HTML…  Trang web lưu trữ liệu trực tuyến cho phép lưu trữ liệu đến GB truy xuất lúc nơi Ngồi cịn có tính bảo vệ chống viruts hư hỏng  Trang web giúp tạo trang tin cá nhân cho phép tạo trang web cá nhân với nội dung tuỳ thích Nó cho phép dựa vào thông tin hay ứng dụng trực tuyến vào trang cá nhân  Trang web cung cấp dịch vụ tìm đồ cho phép tra cứu đồ nơi giới 1.1.3 Công nghệ Mashup Mashup công nghệ cho phép người thể khả sáng tạo cách “nối ghép” hai hay nhiều ứng dụng web lại với tạo ứng dụng web riêng Theo từ điển trực tuyến Wikipmedia, mashup định nghĩa cơng cụ có khả lấy thơng tin từ nhiều nguồn liệu khác nhằm tạo dịch vụ tích hợp đơn hồn tồn mẻ Người sử dụng khơng cần phải am hiểu kỹ thuật mà cần xây dựng dịch vụ dựa giao diện lập trình ứng dụng sẵn có Google, Amazon, Flickr… Mashup thể rõ đặc trưng web 2.0 “cá nhân hố thơng tin” Chẳng hạn, nhà lập trình tạo website chia sẻ ảnh video riêng kết hợp dịch vụ YouTube Flickr Hay người sử dụng “trộn” liệu tình trạng giao thông TP Vinh với Google maps để lập đồ điểm thường xuyên tắc đường thành phố, sử dụng thơng tin, hình ảnh từ địa điểm tuyển sinh đại học- cao đẳng thành phố đem kết hợp với Google Maps để tạo thành ứng dụng dẫn đường Mashup dựa tảng kỹ thuật có JavaScript, XML DHTML, kết hợp với kết nối Internet tốc độ cao để hỗ trợ giao diện đồ hoạ tính phong phú SVTH: Nguyễn Thị Thanh Nhàn – Lớp 52K2 – CNTT Xây dựng website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh Trên thực tế, có nội dung Mashup mà làm rõ sau đây:  Bản đồ : Tạo ứng dụng web đường, web giao thông, lập đồ bất động sản, cửa hàng quà tặng, thống kê vườn quốc gia… địa phương hay quốc gia thông qua Google Maps  Video- ảnh: Dùng giao diện lập trình ứng dụng API Flickr để tạo mashup chia sẻ ảnh site khác  Tìm kiếm: Tích hợp search engine để tra cứu thơng tin du lịch, nhà hàng…  Tin tức: Tạo dịch vụ hỗ trợ người sử dụng tập hợp tin tức cơng nghệ, văn hố…từ hàng loạt website khác Đề tài: “Xây dựng Website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh” cách tiếp cận tư tưởng ứng dụng kết hợp cơng nghệ Mashup với Google maps API 1.1.4 AJAX AJAX ngơn ngữ mới, kết hợp loạt công nghệ khác nhau:  XHTML + CSS với vai trị hiển thị thơng tin  Mơ hình tương tác hiển thị động DOM (Document Object Model)  XHTML + XSLT với vai trò trao đổi truy cập/ tác động lên thông tin  XML HttpRequest hỗ trợ nhận thông tin không đồng với đối tượng  JavaScript với vai trò kết hợp cơng nghệ phía lại với Với AJAX, file javaScript liên kết trực tiếp với server mà không cần tải lại trang web Công nghệ AJAX tạo cho ứng dụng Internet nhỏ gọn hơn, nhanh tương tác với người sử dụng tốt 1.1.5 JavaScript JavaScript ngơn ngữ lập trình đa tảng, ngơn ngữ lập trình kịch bản, hướng đối tượng JavaScript ngôn ngữ nhỏ nhẹ Khi nằm bên mơi trường, javaScript kết nối tới đối tượng mơi trường cung cấp cách quản lý chúng JavaScript chứa thư viện tiêu chuẩn cho object, ví dụ như: Array, Date, Math, yếu tố cốt lõi ngơn ngữ lập trình như: tốn tử, cấu trúc điều khiển, câu lệnh JavaScript mở rộng cho nhiều mục đích việc bổ sung thêm đối tượng Ví dụ: SVTH: Nguyễn Thị Thanh Nhàn – Lớp 52K2 – CNTT Xây dựng website cung cấp tiện ích cho kỳ thi tuyển sinh đại học cao đẳng cụm thi Vinh mapmarker[i].setMap(null); } for(i=0;i