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ên cơ sở ứng dụng từ dịch vụ khá phát triển này, thì em nhận thấy có một vài tính năng của Google Map truyền thống nếu được thể hiện lại trong đồ án thì sẽ có nhiều ưu điểm hơn: Những

TRƯỜNG ĐẠI HỌC VINH

KHOA CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ THÔNG TIN

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

Em xin bày tỏ lòng thành kính và biết ơn sâu sắc đến thầy TS Phan Anh Phong

đã nhiệt tình hướng dẫn, chỉ bảo em trong suốt quá trình thực hiện đề tài này

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 trong suốt thời gian học tập và nghiên cứu tại trường

Xin cảm ơn các thầy cô các khoa - phòng trường Đại học Vinh, bạn bè đồng môn

đã đóng góp ý kiến, giúp đỡ và động viên rất nhiều trong quá trình em làm đề tài này Xin cảm ơn cha mẹ, anh chị em và những người thân đã và luôn là chổ dựa tinh thần, là nguồn động lực to lớn để em vượt qua những khó khăn trong quá trình thực hiện đề tài này

Xin chân thành cảm ơn!

Vinh, ngày 3 tháng 1 năm 2016

Sinh viên

Nguyễn Thị Thanh Nhàn

MỤC LỤC

Trang

LỜI CẢM ƠN 1

MỤC LỤC 2

MỞ ĐẦU 4

CHƯƠNG 1 : CÁC KIẾN THỨC CƠ BẢN VÀ MÔ HÌNH MVC 6

1.1 Các kiến thức cơ bản 6

1.1.1 Bản đồ 6

1.1.2 Công nghệ Web 2.0 6

1.1.3 Công nghệ Mashup 7

1.1.4 AJAX 8

1.1.5 JavaScript 8

1.1.6 CSS 9

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 của framework Struts 12

1.2.3 Cấu trúc của Struts 13

1.2.4 Các thành phần chính của một ứng dụng Struts 14

1.2.5 Các file cấu hình cần thiết để xây dựng một ứng dụng Struts 14

1.2.6 Ưu điểm của Struts 15

1.2.7 Nhược điểm của Struts 15

CHƯƠNG 2: GOOGLE MAPS API 17

2.1 Google Map API là gì? 17

2.2 Ưu điểm của Google Maps API 17

2.3 Các tính năng của Google Maps API được ứng dụng vào đồ án 17

2.4 Một số ứng dụng có thể 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 một số đặc tính trong Google Map API 20

2.7 Phân loại Google maps API 22

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 của bản đồ 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ở dữ liệu 31

3.3.2 Xây dựng các mô hình chức năng 34

3.3.3 Thiết kế giao diện và đặc tả chức năng 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

MỞ ĐẦU

Bản đồ trực tuyến là công cụ thể hiện các đối tượng địa lí trong không gian tiện lợi

và hiệu quả So với bản đồ giấy, các đối tượng không chỉ hiển thị đơn thuần là những

ký hiệu tĩnh trên bản đồ mà còn thể hiện nhiều lớp thông tin tương tác giữa người dùng

và hệ thống cơ sở dữ liệu số

Trong những năm gần đây, kỳ thi tuyển sinh đại học, cao đẳng luôn nhận được sự quan tâm của các thí sinh và người nhà thí sinh Ngoài những thông tin về ngành nghề đào tạo, chỉ tiêu tuyển sinh thì các thông tin như: địa điểm dự thi, hướng di chuyển đến điểm thi, những dịch vụ cần thiết cho người nhà và thí sinh vv được thí sinh và gia đình rất quan tâm.Với sự phát triển của công nghệ thông tin và truyền thông, phương pháp xây dựng bản đồ trực tuyến hỗ trợ trong các kỳ thì tuyển sinh sẽ có hiệu quả phục

vụ xã hội cao Các bản đồ trực tuyến có tính tương tác cao hơn so với bản đồ giấy Thông tin thể hiện trên bản đồ trực tuyến có thể hiện được nhiều lớp thông tin hơn so với bản đồ giấy Thí sinh có thể truy cập bản đồ trực tuyến thông qua mạng Internet hoặc qua các thiết bị di động cầm tay mà không cần sử dụng các tấm bản đồ giấy Khi thí sinh xác định được địa điểm dự thi, thí sinh sẽ có lựa chọn hướng đi, tìm được các địa điểm phục vụ những nhu cầu cần thiết, ngoài ra thí sinh còn quan sát được vị trí có đội tình nguyện viên tiếp sức mùa thi khi cần được giải đáp thắc mắc

Google maps là một dịch vụ ứng dụng và phát triển bản đồ trực tuyến trên Internet,

đã và đang được sử dụng phổ biến rộng rãi trên toàn thế giới Trên cơ sở ứng dụng từ dịch vụ khá phát triển này, thì em nhận thấy có một vài tính năng của Google Map truyền thống nếu được thể hiện lại trong đồ án thì sẽ có nhiều ưu điểm hơn:

Những nhược điểm của Google Maps truyền thống:

 Nhiều địa điểm chưa có thông tin chi tiết và đánh giá

Khi tìm kiếm một địa điểm nào đó bất kỳ nhưng không có thông tin gì trên Google maps, người sử dụng sẽ cảm thấy lúng túng trước kết quả tìm kiếm này.Trên thực tế thì có khá nhiều địa điểm trên toàn thế giới, nếu chưa được người dùng khác đóng góp thì nó vẫn chỉ là một địa điểm hư vô trên bản đồ

 Chưa có chức năng hiển thị địa điểm trong phạm vi bán kính

Google Maps có ứng dụng tìm gần đây bằng cách chỉ ra các gợi ý về nội dung lân cận điểm mà bạn đang tìm kiếm Một ý kiến đưa ra cho đồ án ứng dụng này đó là quét phạm vi hiển thị nội dung theo bán kính Ứng dụng sẽ tìm kiếm xung quanh điểm mà bạn đang truy vấn và đưa ra được nhiều kết quả cùng lúc luôn

 Đối với người sử dụng thông thường, khi muốn thêm và bổ sung nội dung cho Google maps thì phải truy cập vào Google.Maps.Macker đăng nhập bằng tài khoản Google của mình để thực hiện quyền thêm nội dung Ý kiến của người dùng ở chế độ

Cá nhân và chỉ được hiển thị khi có sự đồng ý của các nhân viên Google maps hoặc những người dùng khác đánh giá

Vì vậy, với những người hoàn toàn không biết gì về Google.Maps.Macker thì sẽ không thể thực hiện được chức năng này

Trên cơ sở những ứng dụng mà Google Maps API mang lại và những đánh giá chủ quan đối với Google maps truyền thống, là cơ sở và tiền đề để xây dựng ứng dụng:

“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” kế thừa và phát triển, khắc phục những hạn chế về đánh giá của

người dùng hiện nay

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 sử dụng Google maps API trên cơ sở dựa trên nền tảng bản đồ trực tuyến Google maps kết hợp sử dụng ứng dụng hỗ trợ từ Google đó là Google maps API với các yêu cầu chức năng như sau:

 Phạm vi hiển thị : hiển thị bản đồ thành phố Vinh

 Tìm kiếm đường đi, địa điểm thi, và các 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; đây là những dịch vụ khá cần thiết đối với 1 người khi đến với 1 địa điểm thi

 Tìm kiếm các địa điểm gần đây tại một địa điểm bất kỳ theo bán kính

 Tìm đường đi giữa 2 địa điểm bất kỳ

 Tìm kiếm và xem vị trí 1 điểm bất kỳ

 Thêm và đóng góp dữ liệu cho ứng dụng từ phía người dùng

 Cập nhật và loại bỏ dữ 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 và ứng dụng công nghệ Web massup hiện nay, tích hợp thông tin không gian toạ độ và thông tin thuộc tính thành một hệ thống thông tin hoàn chỉnh trên nền Web Đề tài là nền tảng trong việc nghiên cứu và ứ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 và các lĩnh vực kinh tế - xã hội khác nói chung

CHƯƠNG 1 CÁC KIẾN THỨC CƠ BẢN VÀ MÔ HÌNH

MVC 1.1 Các kiến thức cơ bản

1.1.1 Bản đồ

Theo Wikipmedia Bản đồ là bản vẽ đơn giản miêu tả một không gian, địa điểm và hiển thị những thông số liên quan trực tiếp đến vị trí ấy có liên quan đến khu vực xung quanh

Theo các nhà bản đồ, bản đồ là sự miêu tả khái quát, thu nhỏ bề mặt Trái Đất hoặc

bề mặt thiên thể khác trên mặt phẳng trong một phép chiếu xác định, nội dung của bản

đồ được biểu thị bằng hệ thống ký hiệu quy ước

Bản đồ được dùng trong địa lý Theo nghĩa này bản đồ thường có hai chiều mà vẫn biểu diễn một không gian có ba chiều đúng đắn Môn bản đồ là khoa học và nghệ thuật

vẽ bản đồ

Theo Trung tâm Thông tin (CIREN) thuộc Bộ Tài Nguyên- Môi trường, ngoài việc cung cấp thông tin cho người truy cập, hệ bản đồ còn có ý nghĩa như là cơ sở dữ liệu quan trọng phục vụ hoạt động của các cơ quan Chính phủ, các cơ quan nghiên cứu khoa học và 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 là thế hệ thứ 2 của các dịch vụ đang tồn tại trên nền World Wide Web, nó cho phép mọi người có thể cộng tác hay chia sẻ các thông tin trực tuyến với nhau Trái ngược với thế hệ đầu, web 2.0 đưa người sử dụng tới gần các ứng dụng chạy trên desktop so với các trang web bình thường chỉ chứa đựng các thông tin dạng tĩnh Quy ước chung về web 2.0 đã được đưa ra tại các cuộc hội thảo O’Reilly Media và MediaLive Internationnal về phát triển web vào năm 2004 Các ứng dụng của web 2.0

có sự kết hợp của các công nghệ được phát triển vào cuối thập niên 1990, bao gồm web service APIs (1998), Ajax ( 1998) và web syndication ( 1997) Chúng cho phép đưa lên trang web một số lượng lớn các phần mềm chạy trên nền web Quy ước này còn bao gồm cả Blog ( trang thông tin cá nhân) và Wiki (từ điển bách khoa mã nguồn mở)

Hiện tại Web 2.0 đã phát triển khá mạnh và các trang web cung cấp các ứng dụng chạy trực tuyến cũng đã được khá nhiều người sử dụng, có thể kể ra một số các trang web như sau:

 Trang web cung cấp các dịch vụ chat trực tuyến cho phép chúng ta chạy trên nền web mà không phải cài đặt các chương trình chat thông dụng như Yahoo Messenger, MSN…

 Trang web cung cấp dịch vụ soạn thảo văn bản trực tuyến cho phép chúng ta soạn thảo các tài liệu trực tuyến giống như soạn thảo bằng các chương trình bình thường

 Trang web cung cấp dịch vụ soạn thảo văn bản trực tuyến cho phép chúng ta soạn thảo các tài liệu với các định dạng PDF/DOC/HTML…

 Trang web lưu trữ dữ liệu trực tuyến cho phép lưu trữ dữ liệu đến 5 GB và có thể truy xuất mọi lúc mọi nơi Ngoài ra nó còn có tính năng bảo vệ chống viruts và hư hỏng

 Trang web giúp tạo các trang tin cá nhân cho phép chúng ta có thể tạo ra các trang web cá nhân với nội dung tuỳ thích Nó cho phép dựa vào các thông tin hay các ứng dụng trực tuyến vào trang cá nhân này

 Trang web cung cấp dịch vụ tìm bản đồ cho phép chúng ta tra cứu bản đồ của mọi nơi trên thế giới

1.1.3 Công nghệ Mashup

Mashup là một công nghệ cho phép mọi người thể hiện khả năng sáng tạo của mình bằng cách “nối ghép” hai hay nhiều ứng dụng web lại với nhau tạo ra ứng dụng web riêng

Theo từ điển trực tuyến Wikipmedia, mashup được định nghĩa như một công cụ có khả năng lấy thông tin từ nhiều nguồn dữ liệu khác nhau nhằm tạo ra một dịch vụ tích hợp đơn nhất và hoàn toàn mới mẻ Người sử dụng không cần phải am hiểu về kỹ thuật mà chỉ cần xây dựng dịch vụ dựa trên giao diện lập trình ứng dụng sẵn có như của Google, Amazon, Flickr…

Mashup thể hiện rõ đặc trưng của web 2.0 là “cá nhân hoá thông tin” Chẳng hạn, một nhà lập trình có thể tạo website chia sẻ ảnh và video của riêng mình khi kết hợp 2 dịch vụ YouTube và Flickr Hay người sử dụng có thể “trộn” dữ liệu về tình trạng giao thông ở TP Vinh với Google maps để lập bản đồ các điểm thường xuyên tắc đường trong thành phố, hoặc là sử dụng các thông tin, hình ảnh từ các địa điểm tuyển sinh đại học- cao đẳng trong thành phố đem kết hợp với Google Maps để tạo thành ứng dụng chỉ dẫn đường

Mashup dựa trên nền tảng kỹ thuật hiện có là JavaScript, XML và DHTML, kết hợp với kết nối Internet tốc độ cao để hỗ trợ giao diện đồ hoạ và tính năng phong phú

Trên thực tế, có 4 nội dung chính của Mashup mà chúng ta sẽ làm rõ hơn sau đây:

 Bản đồ : Tạo ứng dụng web chỉ đường, web giao thông, lập bản đồ về bất động sản, cửa hàng quà tặng, thống kê các vườn quốc gia… tại một địa phương hay một quốc gia thông qua Google Maps

 Video- ảnh: Dùng giao diện lập trình ứng dụng API của Flickr để tạo mashup chia sẻ ảnh trên những site khác

 Tìm kiếm: Tích hợp search engine để tra cứu thông tin về du lịch, nhà hàng…

 Tin tức: Tạo các dịch vụ hỗ trợ người sử dụng tập hợp tin tức về công nghệ, văn hoá…từ hàng loạt website khác nhau

Đề tài: “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” là cách tiếp cận trong đó tư tưởng chính là ứng dụng kết hợp

công nghệ Mashup với Google maps API

1.1.4 AJAX

AJAX không phải là một ngôn ngữ mới, nó là sự kết hợp của một loạt các 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 và hiển thị động DOM (Document Object Model)

 XHTML + XSLT với vai trò trao đổi và truy cập/ tác động lên thông tin

 XML HttpRequest hỗ trợ nhận thông tin không đồng bộ với đối tượng

 JavaScript với vai trò kết hợp 4 công nghệ phía trên lại với nhau

Với AJAX, một file javaScript có thể 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 hơn

và tương tác với người sử dụng tốt hơn

1.1.5 JavaScript

JavaScript là một ngôn ngữ lập trình đa nền tảng, ngôn ngữ lập trình kịch bản, hướng đối tượng JavaScript là một ngôn ngữ nhỏ và nhẹ Khi nằm bên trong một môi trường, javaScript có thể kết nối tới các đối tượng của môi trường đó và cung cấp các cách quản lý chúng

JavaScript chứa các thư viện tiêu chuẩn cho các object, ví dụ như: Array, Date,

và Math, và các yếu tố cốt lõi của ngôn ngữ lập trình như: toán tử, cấu trúc điều khiển,

và câu lệnh JavaScript có thể được mở rộng cho nhiều mục đích bằng việc bổ sung thêm các đối tượng Ví dụ:

 Client-side JavaScript - JavaScript phía máy khách, JavaScript được mở rộng

bằng cách cung cấp các đối tượng để quản lý trình duyệt và Document Object Model (DOM) của nó Ví dụ, phần mở rộng phía máy khách cho phép một ứng dụng tác động tới các yếu tố trên một trang HTML và phản hồi giống các tác động của người dùng như click chuột, nhập form, và chuyển trang

 Server-side JavaScript - JavaScript phía Server, javaScript được mở rộng bằng

cách cung cấp thêm các đối tượng cần thiết để để chạy javaScript trên máy chủ Ví dụ, phần mở rộng phía server này cho phép ứng dụng kết nối với cơ sở dữ liệu, cung cấp thông tin một cách liên tục từ một yêu cầu tới phần khác của ứng dụng, hoặc thực hiện thao tác với các tập tin trên máy chủ

1.1.6 CSS

CSS là từ viết tắt của Cascade Style Sheet, là ngôn ngữ giúp trình duyệt hiểu được

các thiết lập định dạng và bố cục cho trang web CSS cho phép chúng ta điều khiển thiết kế của nhiều thành phần HTML chỉ với duy nhất 1 vùng chọn CSS Điều này giúp giảm thiểu thời gian thiết kế và chỉnh sửa, khi chúng ta có thể tách biệt được cấu trúc (HTML) và định dạng CSS

CSS cho phép chúng ta đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau Style có thể được quy định ở trong chỉ một thẻ HTML, được quy định trong 1 trang web hoặc ở trong một file CSS bên ngoài

Cú pháp cơ bản của CSS bao gồm 3 phần: vùng chọn, thuộc tính và giá trị

 Vùng chọn: là cách xác định các thẻ HTML dựa trên cấu trúc phân cấp của

HTML Vùng chọn có thể được tạo nên dựa trên nhiều yếu tố như định danh, tên lớp, quan hệ cha – con – hậu duệ…

 Thuộc tính: là yếu tố chúng ta muốn thay đổi ở các thẻ HTML thuộc vùng

chọn

 Giá trị: mỗi thuộc tính sẽ yêu cầu một giá trị khác nhau Đó có thể là 1 từ khóa

định sẵn (none, block), một tên màu hay mã màu (black, white, #000, #FFFFFF), hay một giá trị kích thước tính bằng px, em, rem, %

Ưu điểm của Bootstrap

 Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và

Javascript chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt

 Tính năng Responsive: Bootstrap’s xây dựng sẵn responsive css trên các thiết

bị phones, tablets, và desktops

 Mobile: Trong Bootstrap 3 mobile-first styles là một phần của core framework

 Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt:

Chrome, Firefox, Internet Explorer, Safari, và Opera

1.1.8 SQL Server

Là hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) do Microsoft phát triển hoạt động theo mô hình khách chủ cho phép đồng thời cùng lúc có nhiều người dùng truy xuất đến dữ liệu

Hình 1.1 : Mô hình khách chủ sử dụng SQL server

Tính năng của SQL server

 Truy cập tới CSDL qua mạng

 Hỗ trợ mô hình Client/Server

 Kho dữ liệu (Data WareHouse)

 Tương thích với chuẩn ANSI/ISO SQL-92

 Hỗ trợ tìm kiếm Full-Text (Full-Text Search)

 Hỗ trợ tìm kiếm thông tin trực tuyến (Books Online)

 Các kiểu dữ liệu mới và các hàm thư viện làm việc với các kiểu dữ liệu này như XML, Các kiểu dữ liệu giá trị lớn (lưu ảnh, video…)

 Hỗ trợ FileStream để thao tác với các đối tượng nhị phân lớn (BLOB)

 Language-Integrated Query (LINQ)

 Hỗ trợ DotNet 3.5 ……

1.2 Mô hình MVC

Model – View – Controller (MVC) là mẫu thiết kế được áp dụng rộng rãi trên hầu

hết các ngôn ngữ lập trình hướng đối tượng hiện nay như Java, C#, PHP, Visual C++…

MVC giúp ta chia tách, phát triển và bảo trì phần giao diện và code để dễ quản lý MVC chia ứng dụng phần mềm ra làm 3 phần có tương tác với nhau là model (dữ liệu), view (giao diện), controller (code điều khiển tương tác giữa model và view)

Mô hình MVC:

Hình 1.2 : Mô hình MVC

Trong đó:

- Model là lớp chứa thông tin dữ liệu, tương tác với cơ sở dữ liệu Chịu trách

nhiệm chính trong mô hình hóa đối tượng

- View là giao diện của hệ thống tương tác trực tiếp với người dùng

- Controller nhận yêu cầu từ người dùng và sử dụng Model và View để xử lý và

trả kết quả cho người dùng

Struts thực thi mô hình MVC

1.2.2 Tiến trình hoạt động của framework Struts

Mô hình Struts Framework thực thi mô hình MVC bằng cách sử dụng tập hợp các thẻ JSP, các thẻ tùy chọn JSP, và các java servlet Dưới đây là mô tả ngắn gọn cách mà Struts Framework ánh xạ đến mỗi thành phần trong mô hình MVC

Hình 1.3 : Tiến trình hoạt động của framework Struts

Hình trên mô tả tiến trình mà hầu hết các ứng dụng Struts phải tuân theo

Tiến trình này có thể được chia thành 5 bước căn bản:

1 Request được tao ra từ một View

2 Request được tiếp nhận bởi một ActionServlet (đóng vai trò là controller), và ActionServlet này sẽ lookup URL cần thiết trong file xml và xác định tên của lớp Action sẽ thực hiện và các nghiệp vụ logic cần thiết

3 Lớp Action thực hiện các nghiệp vụ logic của nó trong các thành phần Model kết hợp với ứng dụng

4 Khi Action hoàn tất tiến trình xử lý của nó, nó sẽ trả điều khiển cho ActionServlet Là một thành phần của thành phần trả về, lớp Action cung cấp một khóa xác định kết quả của tiến trình xử lý nó ActionServlet sử dụng khóa này để xác định kết quả sẽ được forward đến đâu để trình diễn ra ngoài

5 Yêu cầu được hoàn tất khi ActionServlet đáp ứng nó bằng cách forward yêu cầu

đó đến một View được liên kết đến để trả về khóa đã đề cập ở trên bước 4, và View sẽ trình diễn kết quả của Action

1.2.3 Cấu trúc của Struts

Hình 1.4 : Cấu trúc của Struts

Cấu trúc của Struts bao gồm:

 Một hoặc nhiều action, mỗi action trong trang web sẽ ánh xạ chính xác đến một thành phần <action> được định nghĩa trong file struts-config.xml Action được gọi bởi người dùng từ một trang HTML hoặc JSP thông qua một liên kết hay thông qua thuộc tính action trong thẻ <form>

Một thành phần <action> sẽ định nghĩa một lớp actionForm, trong một số trường hợp, nó sẽ được sử dụng để validate các dữ liệu trong form được submit bởi người sử

dụng, nó cũng định nghĩa lớp action nào sẽ được sử dụng để sử lý các yêu cầu từ phía người dùng

 Một lớp actionForm có thể sử dụng một hoặc nhiều forward được định nghĩa trong thẻ <action> để nói cho một actionSevlet trả về các responsive tương ứng và các request của người dùng Chúng ta có thể định nghĩa nhiều forward trong thẻ <action-mapping>

1.2.4 Các thành phần chính của một ứng dụng Struts

Các thành phần chính của một ứng dụng Struts bao gồm:

 ActionServlet: đóng vai trò như là một controller trong mô hình MVC hay nó là

sự thực thi controller của Struts đối với mô hình MVC ActionServlet lấy về các request từ phía người dùng và ánh xạ chúng đến thành phần <action> trong file struts-config.xml

 Action: định nghĩa một tác vụ có thể được gọi bởi người dùng Nó cũng định nghĩa lớp sẽ xử lý các request từ phía người dùng và trang JSP sẽ hiển thị kết quả về cho người sử dụng

 Lớp Action: chứa toàn bộ những xử lý cho các yêu cầu của người dùng

 ActionForm: đi kèm với thẻ <action>trong file struts-config.xml, quản lý toàn bộ các

dữ liệu được submit lên từ phía người dùng và có thể thực hiện validate các dữ liệu đó

 Trang JSP: được sử dụng để trả về trang HTML để thể hiện kết quả đã được xử

lý cho người dùng

1.2.5 Các file cấu hình cần thiết để xây dựng một ứng dụng Struts

 Web.xml: file này chứa toàn bộ các cấu hình của ActionServlet, tập hợp ánh xạ của các yêu cầu từ phía người dùng đến ActionSevlet và Struts Tag Library Definitions (TLDs)

 Struts-config.xml: file này chứa tất cả các thông tin cấu hình cho một ứng dụng xây dựng dựa trên Struts

 ApplicationResources.propreties: file này chứa các nội dung tĩnh được sử dụng trong toàn bộ ứng dụng của Struts Cho phép chúng ta dễ dàng thay đổi nội dung các

kí tự và các nội dung chung sử dụng trong ứng dụng

 Các thư viện thẻ Struts để xây dựng các thành phần trình diễn trong một ứng dụng: + <template>: cung cấp cho chúng ta một tập các thẻ JSP để chia nhỏ giao diện người dùng thành các thành phần có thể dễ dàng tháo lắp

+ <bean>: cung cấp cho chúng ta một tập các thẻ JSP để quản lý đầu ra từ một JavaBean

+ <logic>: được sử dụng để tạo ra các điều kiện logic trong một trang JSP

+ <html>: được sử dụng để tạo ra các thành phần form

1.2.6 Ưu điểm của Struts

 Cấu hình được tập trung dựa vào file:

Thay vì viết hàng loạt những thông tin vào chương trình java, hầu hết những giá trị Struts được thể hiện trong file xml và file property Phương pháp này cho phép chúng

ta chỉ chú tâm vào phần công việc cụ thể của mình (cài đặt business logic, hiển thị những giá trị cụ thể cho clients, etc) mà không cần quan tâm về tổng thể hệ thống

 Form beans:

Trong JSP, ta có thể sử dụng thuộc tính property=”*” với jsp: setProperty để tự động sinh ra JavaBean component dựa trên những thông số yêu cầu chuyển đến Apache Struts mở rộng thêm khả năng này và thêm vào vài tiện ích khác, tất cả nhằm phục vụ cho việc đơn giản hóa tiến trình xử lý những thông số yêu cầu từ client

+ Cho phép ta khởi tạo các giá trị field của form từ các đối tượng Java

+ Cho phép ta hiển thị lại các form với 1 vài hoặc tất cả những giá trị nhập vào lúc trước 1 cách nguyên vẹn

 Kiểm tra giá trị các trường của form:

Apache Struts tích hợp sẵn những khả năng cho việc kiểm tra những giá trị form được định dạngtheo yêu cầu nhất định Nếu như giá trị không định dạng hoặc định dạng sai, form có thể tự động hiển thị những thông báo lỗi Cách ràng buộc này có thể thực hiện trên server (java) hoặc trên client (javaScript)

Struts hỗ trợ tính nhất quán của MVC xuyên suốt ứng dụng

1.2.7 Nhược điểm của Struts

 Cần nghiên cứu sâu với chuẩn JSP và Servlet APIs để sử dụng MVC với chuẩn RequestDispatcher

 Ít có tài liệu hỗ trợ: Less transparent: Với những ứng dụng Struts, có nhiều lỗi bên dưới hơn những ứng dụng Web dựa trên ngôn ngữ Java bình thường Vì thế ứng dụng Struts:

 Khó tìm hiểu

 Khó chuẩn hóa và đánh giá

 Cứng nhắc: khi đã sử dụng Struts thì khó để áp dụng các phương pháp khác

1.3 Kết luận

Chương 1 đã trình bày những khải niệm, kiến thức cơ bản nhất để lập trình web như công nghệ masshup, công nghệ làm web 2.0, kết hợp với các kiến thức về bản đồ, css, javascript, bootstrap,sqlserver , những kiến thức này là kim chỉ nam, làm nền tảng xuyên suốt cho toàn bộ ứng dụng của chúng ta

CHƯƠNG 2 GOOGLE MAPS API 2.1 Google maps API là gì?

Maps API là một phương thức cho phép một website B sử dụng dịch vụ bản đồ của site A và nhúng vào website của mình (site B) Site A ở đây là google maps, site B là các web site cá nhân hoặc tổ chức muốn sử dụng dịch vụ của google

Các ứng dụng xây dựng trên google maps được nhúng vào trang web cá nhân thông qua các thẻ javascripts do vậy việc sử dụng API Google khá thuận lợi Google Map API đã được nâng cấp lên phiên bản thứ 3 Phiên bản này không chỉ hỗ trợ cho các máy để bàn truyền thống mà cho cả các thiết bị di động

Một sự thuận lợi cho người phát triển ứng dụng từ google maps là các dịch vụ này hoàn toàn miễn phí với các ứng dụng nhỏ Chỉ phải trả phí nếu chúng ta sử dụng cho mục đích kinh doanh

2.2 Ưu điểm của Google maps API

Google Maps là dịch vụ bản đồ trực tuyến được sử dụng rộng rãi nhất trên thế giới với hơn 2 triệu trang web và ứng dụng

Danh mục toàn cầu của ảnh chụp trên không với độ phân giải cao được Google Earth cung cấp cũng có sẵn trong API Google maps Có quyền truy cập vào hình ảnh

45 độ ở hơn 120 thành phố trên toàn thế giới, vì vậy người dùng của chúng ta có thể khám phá dữ liệu của chúng ta với một góc nhìn độc đáo trong một khu vực cụ thể

 Cho phép tạo ứng dụng cho riêng mình

 Xây dựng ứng dụng dựa trên vị trí có thể được sử dụng thông qua trình duyệt web, thiết bị di động hoặc các ứng dụng được xây dựng tùy chỉnh

2.3 Một số tính năng của Google maps API

Theo thống kê của Google, Google maps API có tới 21 tính năng nổi bật Trong đồ

án này sử dụng 8 tính năng để phát triển ứng dụng

Google maps API cung cấp cho ứng dụng của chúng ta toàn quyền truy cập vào cơ

sở dữ liệu trên toàn thế giới của Google về hơn 100 triệu danh sách doanh nghiệp và các địa điểm Cho dù chúng ta cần hiển thị cho người dùng quán bar, quán cà phê, sân bay hay cửa hàng tạp hóa lân cận, chúng ta đều có thể cung cấp một danh sách lọc gồm những địa điểm phù hợp nhất với người dùng của mình

Sau đây là các tính năng áp dụng vào đồ án bao gồm:

 Hình ảnh 45 độ

API Google maps bao gồm quyền truy cập vào hình ảnh 45 độ ở hơn 120 thành phố trên toàn thế giới, cung cấp các chế độ xem cảnh quan thành phố từ tất cả bốn mặt Điều này có nghĩa là người dùng của chúng ta có thể khám phá dữ liệu của chúng ta với một góc nhìn độc đáo trong một khu vực cụ thể

 Tự động hoàn thành địa chỉ

Làm cho việc nhập địa chỉ trở nên dễ dàng cho người dùng của chúng ta Bất kỳ trường văn bản trên trang web của chúng ta đều có thể được tăng cường với sức mạnh của Google maps Autocomplete, làm cho việc nhập địa chỉ trở nên nhanh chóng, chính xác và dễ dàng

 Chỉ đường

API Google maps cung cấp toàn bộ sức mạnh của công cụ định tuyến của Google cho các ứng dụng của chúng ta, ta có thể tạo các tuyến đường giữa tối đa 23 vị trí để lái xe, đi bộ hoặc đạp xe Cung cấp tối đa 3 tuyến đường luân phiên và người dùng có thể kéo các tuyến đường trên bản đồ để thực hiện thay đổi Các tuyến đường có thể tránh đường có thu phí hoặc đường cao tốc và có thể giảm thời gian đi lại bằng cách tính toán thứ tự tối ưu để đến mỗi vị trí

 Ma trận khoảng cách

Nếu ứng dụng của chúng ta cần nhanh chóng xác định thời gian đi lại và khoảng cách giữa nhiều cặp vị trí, chúng ta có thể sử dụng dịch vụ ma trận khoảng cách của API Google maps Ví dụ, nếu chúng ta đang xây dựng một trình tìm kiếm vị trí và muốn cung cấp cho người dùng một cách lọc kết quả theo thời gian lái xe, dịch vụ ma trận khoảng cách là một phương pháp nhanh chóng và dễ dàng để đánh giá những vị trí nào gần đó để đưa vào kết quả

 Hình ảnh vệ tinh toàn cầu

Danh mục toàn cầu của hình ảnh trên không độ phân giải cao được Google Earth cung cấp cũng có sẵn trong API Google maps Chúng ta có thể chuyển bất kỳ bản đồ nào sang chế độ xem vệ tinh bằng cách sử dụng các nhãn tùy chọn Mức chi tiết cao nhất tại một vị trí cho trước có thể được xác định tự động, cho phép chúng ta hiển thị cho người dùng của mình hình ảnh tốt nhất có thể

 Bản đồ theo kiểu

Google maps tạo cảm giác quen thuộc và đáng tin cậy trên toàn thế giới, nhưng nếu chúng ta cần một chút khác biệt, API Google maps cho phép chúng ta tạo kiểu bản đồ tùy theo nhu cầu của chúng ta Chúng ta có thể đơn giản hóa bản đồ để hướng

sự chú ý đến dữ liệu của chúng ta, hoặc tạo lại kiểu của bản đồ để phù hợp với phần còn lại của ứng dụng

 Hỗ trợ cho các thiết bị khác nhau

API Google maps đảm bảo bản đồ của chúng ta sẽ làm việc trên các trình duyệt web và thiết bị di động chính Màn hình độ phân giải cao được phát hiện và bản đồ sẽ

tự động điều chỉnh để đảm bảo rằng nó vẫn hoàn toàn sắc nét và rõ ràng

 Cập nhật nhanh chóng từ MapMaker

Nếu phát hiện thấy một lỗi trên bản đồ, chúng ta có thể sửa lỗi đó bằng cách sử dụng Google maps Maker và có thể thấy sự thay đổi được phản ánh trong ứng dụng API Google maps của chúng ta trong vòng vài phút

2.4 Một số ứng dụng từ Google maps API

 Xây dựng các website có tích hợp với bản đồ và đi kèm với các tính năng của

nó

 Đánh dấu các địa điểm trên bản đồ kèm theo thông tin cho địa điểm đó : khu vui chơi giải trí, nhà hàng khách sạn, cây ATM, bệnh viện, trường học,… bất cứ địa điểm nào chúng ta muốn

 Chỉ dẫn đường đến các địa điểm cần tìm( đường tối ưu và nhiều option khác), chỉ dẫn đường giao thông công cộng, có thể là các địa điểm cung cấp như trên Ở đây

sử dụng các dịch vụ từ google cung cấp

 Khoanh vùng khu vực: các trung tâm kinh tế, khu đô thị, khu ô nhiễm…

 Tình trạng giao thông các khu vực… từ đó đưa ra các giải pháp…

2.5 Các thao các cơ bản với Google maps API

2.5.1 Đăng ký key API

Key API chính là chìa khoá xuyên suốt để hiển thị bản đồ online trên ứng dụng của chúng ta, nếu key hết hạn hoặc hỏng thì phải kịp thời thay thế và đăng ký lại 1 key mới

Truy cập vào https://code.google.com/apis/console và đăng nhập bằng tài khoản

gmail của mình

Hình 1.5 Đăng ký lấy key API

Click vào Services link bên trái menu

Kéo xuống dưới tìm Google maps API v3 service và kích hoạt dịch vụ

Click API Access, một API key sẽ hiện lên và chúng ta sẽ copy lại để sử dụng

2.5.2 Tải bản đồ về trang web cá nhân

Khi đã có key vừa đăng ký, ta tiến hành lấy bản đồ về hiển thị trên website

2.6 Một số đặc tính trong Google maps API

2.6.1 Xếp chồng trong Google maps

Xếp chồng là việc xếp các đối tượng chồng nhau trên bản đồ, mỗi đối tượng được xác định bởi tọa độ vĩ độ/ kinh độ

Các loại xếp chồng:

 Marker : xác định một điểm trên bản đồ hoặc đánh dấu địa điểm dựa trên vĩ độ

và kinh độ, có thể được hiển thị bằng icon (hình ảnh) tùy chỉnh của người dùng ví dụ như icon dưới đây:

 Polyline : chuỗi các đường trên bản đồ

Hình 1.6 Đường chỉ dẫn đường đi

 Polygon : chuỗi các đường thẳng trên bản đồ và các khối kín (tô màu cho 1 khối kín các điểm)

 Circle and Rectangle : đường tròn và hình chữ nhật

 Info Windows : hiển thị nội dung trong 1 popup ballon ở phía trên của map

Hình 1.7 Inforwindow mô tả nội dung hiển của macker trường đại học Vinh

2.6.2.Sự kiện trên Google maps

Sự kiện gồm 2 loại:

 UI Event: Lắng nghe sự kiện từ người dùng

 MVC State change: Lắng nghe sự kiện từ sự thay đổi giá trị của các thuộc tính trên Map Để lắng nghe sự kiện, ta sử dụng phương thức addListener() Phương thức này nhận vào 1 đối tượng, 1 kiểu sự kiện để lắng nghe và 1 phương thức xử lý khi sự kiện xảy ra Bao gồm:

 zoom_changed: sự kiện sẽ thực thi khi ta zoom size trên map

 center_changed: sự kiện sẽ thực thi khi thuộc tính center của map thay đổi

 title_changed: sự kiện sẽ thực thi khi thuộc tính title của map thay đổi

 heading_changed: sự kiện sẽ thực thi khi thuộc tính heading của map thay đổi

 dragstart: sự kiện sẽ thực thi khi người dùng bắt đầu drag bản đồ

 drag: sự kiện sẽ thực thi khi người dùng drag bản đồ

 dragend: sự kiện sẽ thực thi khi người dùng kết thúc drag bản đồ

 maptypeid_changed: sự kiện sẽ thực thi khi thuộc tính maptypeid của map thay đổi

 Handling Events

2.6.3 Các điều khiển trên Google maps

Điều khiển mặc định thiết lập cho Google Map gồm:

 Zoom – hiển thị 1 slider hoặc button “+/-” để điều khiển độ zoom (mức thu phóng) của bản đồ

 Pan – công cụ để dịch chuyển bản đồ sang trái, phải, trên, dưới

 MapType – cho phép người dùng chuyển đổi giữa các loại bản đồ

 Street View – hiển thị 1 icon Pegman (hình người) để có thể kéo bản đồ để enable Street View (xem chi tiết về đường phố)

Một số điều khiển khác:

 Scale – hiển thị 1 thành phần chia tỷ lệ bản đồ

 Rotate – hiển thị một biểu tượng nhỏ hình tròn để xoay bản đồ

 Overview Map – hiển thị một hình ảnh thu nhỏ về bản đồ toàn cảnh cho phép xem bản đồ

2.7 Phân loại Google maps API

 SATELLITE (bản đồ ảnh)

 HYBRID (bản đồ ảnh + tên đường và tên thành phố)

 TERRAIN (bản đồ với hệ thống sông ngòi, núi )

getBounds () Latlng, latlng

Trả về kinh độ/vĩ độ của phía Tây Nam và phía Đông Bắc của khung nhìn hiện tại

getCenter () Latlng

Trả về kinh độ/vĩ độ (lat/lng) của trung tâm bản

SATELLITE (vệ tinh) và

HYBRID)

getMapTypeId () LỘ TRÌNH HYBRID VỆ

TINH ĐỊA HÌNH

Trả về kiểu của map

getProject() Projection Trả về Projection hiện tại

getStreetView () StreetViewPanorama Trả về StreetViewPanorama

mặc định gắn với map

getTilt () number (số)

Trả về góc tới cho hình ảnh trên không (tính bằng độ) - dùng cho SATELLITE và HYBRID

getZoom () number (số) Trả về zoom level hiện tại

2.9 Kết luận

Chương 2 là những kiến thức tổng quan và chi tiết về dịch vụ ứng dụng google maps api Dịch vụ này là một phần không thể thiếu trong việc thể hiện nội dung trong ứng dụng website Điều này góp phần giúp ta hiểu rõ được các đặc điểm, tính năng, cách sử dụng và cách ứng dụng dịch vụ maps api vào trang web

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 3.1 Kiến trúc

Hệ thố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 được thiết kế với 3 tầng khác nhau như sau:

Hình 1.8 Kiến trúc của ứng dụng

Tầng Client: Được xây dựng bằng JavaScript, HTML và DHTML Tầng này thực

hiện nhiệm vụ xử lý các thao tác, lưu trữ thông tin tương ứng với từng người sử dụng, đảm nhận vai trò trung gian, truyền nhận dữ liệu giữa người sử dụng với Web server

Tầng ứng dụng: chia làm 2 thành phần: WebForm và Google maps API

- WebForm: đảm nhận trách nhiệm phát sinh giao diện và các đoạn script để tương tác với client, đóng vai trò trung gian giữa client và MapServer và nhận dữ liệu trả về

để gửi ngược cho client

- Google maps API: xử lý các thao tác về phát sinh bản đồ, phóng to, thu nhỏ, dịch chuyển, tra cứu thông tin trên bản đồ Nó là thành phần trung gian giữa WebForm và tầng cơ sở dữ liệu để rút trích thông tin sau đó tiến hành xử lý rồi trả về kết quả cho WebForm

Tầng cơ sở dữ liệu: Đóng vai trò trung gian giữa tầng ứng dụng với cơ sở dữ liệu

Mô hình tương tác dữ liệu giữa các phần trong ứng dụng:

Hình 1.9 Mô hình tương tác dữ liệu giữa các phần trong ứng dụng

Hệ thống Web của chúng ta sử dụng 2 server:

 Server 1: Server Google maps API :

Server này giúp chúng ta giữ, hiển thị và tải bản đồ một cách ổn định và liên tục, luôn luôn hoạt động và hiển thị bản đồ nếu đặt ở chế độ online.Ngôn ngữ xử lý trong server này là javaScript

 Server 2: Server TomCat:

Server Tomcat thi hành các ứng dụng Java Servlet và JavaServer Pages (JSP) từ hệ thống, và cung cấp một máy chủ HTTP cho ngôn ngữ Java thuần túy để thực thi các chương trình lệnh viết bằng ngôn ngữ lập trình java

Hệ thống sẽ lấy dữ liệu đầu vào từ cơ sở dữ liệu bằng mô hình MVC-Struts của server 2 sau đó đẩy qua cho server 1 xử lý và hiển thị các chức năng lên website

Mô hình MVC-Struts trong ứng dụng được mô tả như sau:

Hình 1.10 Mô hình MVC-Struts trong ứng dụng

Mô hình (model) tượng trưng cho dữ liệu của chương trình ứng dụng Tầm nhìn hay khung nhìn (view) bao gồm các thành phần của giao diện người dùng Bộ kiểm tra hay bộ điều chỉnh (controller) quản lý sự trao đổi giữa dữ liệu liên quan tới mô hình và trả kết quả hiển thị

Mô hình MVC của ứng dụng trong Java EE IDE

Hình 1.11 Mô hình MVC của ứng dụng trong Java EE IDE

Mô hình cấu hình của ứng dụng trong Java: ứng dụng web của chúng ta ở server Tomcat sử dụng mô hình MVC- Struts để thực thi và khởi động các tài nguyên có sẵn Trình thực thi được định dạng bằng một tài liệu XML có tên là “web.xml” Mặt khác Struts sử dụng 1 file cấu hình “Struts-config.xml” để khởi tạo các tài nguyên cần thiết Những tài nguyên này bao gồm các ActionForm để lấy yêu cầu của người dùng, ActionMapping để chỉ đến các Actions phía trình phục vụ Server, và các ActionForward để chọn các trang hiển thị

Hình 1.12 Mô hình cấu hình của ứng dụng trong Java

File struts-config.xml

File web.xml

3.2 Dữ liệu đầu vào

- Cơ sở dữ liệu có sẵn của Google maps bao gồm : bản đồ và một số địa điểm do Google maps cung cấp

- Cơ sở dữ liệu thêm vào ứng dụng của mình: trên cơ sở dựa vào kinh độ và vĩ

độ của Google maps nhưng chưa được định danh bằng tên gọi cụ thể tại các địa điểm, thì mình sẽ tạo CSDL bao gồm tên địa điểm, thông tin, hình ảnh minh hoạ và các đánh giá

Hình 1.13 Cơ sở dữ liệu đầu vào của ứng dụng

3.3 Thiết kế

3.3.1 Thiết kế Cơ sở dữ liệu

Từ nội dung của bài toán và phân tích yêu cầu hệ thống và các yêu cầu chức năng

ở chương 1, ta tiến hành đi xây dựng và thiết kế cơ sở dữ liệu cho bài toán

Xây dựng CSDL với tên là GoogleAPI_DATN, sử dụng 3 bảng: DiaDiem, DiaDiemUser và bảng TaiKhoan

Hình 1.14 Cơ sở dữ liệu và các bảng trong ứng dụng

Ứng dụng :“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”với nội dung trọng tâm là mô tả cho người dùng

thông tin về các địa điểm tuyển sinh ĐH-CĐ và các thông tin cần thiết hỗ trợ Ứng dụng đưa ra ý tưởng thiết kế CSDL gồm bảng chính là bảng Diadiem với các thuộc tính khoá chính bao gồm: tên địa điểm, kinh độ, vĩ độ, mô tả, liên kết hình ảnh, đánh giá và phân loại

Có tất cả 7 loại được đưa ra trong đồ án bao gồm: địa điểm tuyển sinh, phòng trọ, nhà hàng, khách sạn, điểm dừng/đón xe buýt , taxi và điểm tiếp sức mùa thi Tất cả đều có điểm chung cần mô tả cho người dùng xem là những thuộc tính trong bảng địa điểm sẽ hiển thị lên các macker trên bản đồ Chính vì vậy nội dung mô tả và nội dung cập nhật sẽ được đưa vào bảng DiaDiem này

Bảng DiaDiem: Lấy tên địa điểm làm khoá chính

Tên bảng Trường Mô tả

Địa Điểm

Dùng để lưu thông tin

các địa điểm hiển thị

trên bản đồ

DiaDiem Tên các địa điểm KinhDo Kinh độ của điểm đó ViDo Vĩ độ của điểm đó

Mota Mô tả thông tin chi tiết thêm cho

mỗi địa điểm LinkHinhAnh Hình ảnh mô tả cho địa điểm đó DanhGia Đánh giá của người dùng

Bảng DiaDiemUser: Đây chính là bảng tạm phục vụ chức năng đóng góp dữ

liệu từ phía người dùng cho ứng dụng Khi người dùng đã có tài khoản, mỗi khi dữ liệu được thêm từ người dùng sẽ đi vào bảng DiaDiemUser này Sau khi admin đăng

nhập và duyệt nội dung thì CSDL này sẽ được nằm trong bảng chính DiaDiem Ở bảng này có khác bảng DiaDiem đó chính là thêm thuộc tính TinhTrang, thuộc tính này có nghĩa là trạng thái dữ liệu đã được admin duyệt chọn hay chưa Trạng thái là 0

và 1

Hình 1.16: Bảng DiaDiemUser

Địa điểm người dùng

dùng để lưu tạm thông tin

các địa điểm do người

dùng có tài khoản thêm

vào

DiaDiem Tên các địa điểm KinhDo Kinh độ của điểm đó ViDo Vĩ độ của điểm đó

Mota Mô tả thông tin chi tiết thêm

cho mỗi địa điểm LinkHinhAnh Hình ảnh mô tả cho địa điểm đó DanhGia Đánh giá của người dùng

7 Điểm tiếp sức mùa thi

dùng để lưu thông tin

về tài khoản đăng

3.3.2 Tổ chức các biến dữ liệu

Các biến dữ liệu khai báo trong javascript

 Mangtatca[] : Mảng này sẽ dùng để lưu tất cả giá trị sau khi cắt chuỗi, chuỗi

ở đây là dữ liệu mà ta đã lấy ra từ data, sau khi cắt các kí tự %

 Map: Đối tượng map của mình

 Mapmarker[]: mảng lưu lại tất cả các marker khi mình tạo ra

 Mapinfor[]: Lưu các đối tượng inforwindow

 defaultCenter: Giá trị trung tâm bản đồ

 defaultZoom: Giá trị zoom mặc định : 14

 mangluu: Lưu các marker đã hiển thị từ trước

 Maploaidiadiem[]: Mảng lưu giá trị của marker, ví dụ marker(địa điểm nào đó)

loại gì thì sẽ tiến hàng lưu vào

var mangtatca =[]//Luu gia tri cua tatca

var mangdiadiemtuyensinh =[]//Luu gia tri cua diadiemtuyensinh

var mangphongtro = []//Luu gia tri cua phongtro

var mangnhahang = []//Luu gia tri cua nha hang

var mangkhachsan = []//Luu gia tri cua khach san

var mangdiemdonxebuyt = []//Luu gia tri cua diem don xe buyt

var mangtaxi = []//Luu gia tri cua diem don xe taxi

var mangtiepsucmuathi = []//Luu gia tri cua tiepsucmuathi

Mảng maploaidiadiem này sẽ lưu các giá trị 1 tới 7 này

<option value="1">Địa Điểm Tuyển Sinh</option>

<option value="2">Phòng Trọ</option>

<option value="3">Nhà Hàng</option>

<option value="4">Khách Sạn</option>

<option value="5">Điểm Đón Xe Buýt</option>

<option value="6">Taxi</option>

<option value="7">Tiếp Sức Mùa Thi</option>

3.3.3 Xây dựng các mô hình chức năng

dữ liệu trong tất cả chức năng

Không cần thiết phải có tài khoản

Nếu muốn đóng góp dữ liệu thì bắt buộc phải đăng

ký tài khoản

3.3.3.2 Sơ đồ mô tả các chức năng

Đây là sơ đồ Use Case về việc xây dựng 1 wesite tìm kiếm địa điểm tuyển sinh, dùng để mô tả chức năng của hệ thống và tương tác giữa chúng với người dùng:

Sơ đồ tổng thể:

Hình 1.18 Bảng sơ đồ mô tả các chức năng của hệ thống

3.3.4 Thiết kế giao diện và đặc tả chức năng

TextBox-Lấy thông tin dữ liệu UserName từ bàn phím Đây là trường bắt buộc Nếu không nhập sẽ xuất lỗi :

“Error! Tài khoản không đƣợc để trống”

Mật khẩu

String(MAX)

TextBox-Lấy thông tin dữ liệu password từ bàn phím Đây là trường bắt buộc Nếu không nhập sẽ xuất lỗi :

“Error! Mật khẩu không hợp lệ”

1.Nếu là admin: hiện alert

“Bạn đang đăng nhập dưới quyền admin”

2 Nếu là người dùng có tài khoản: hiện alert “Bạn đang đăng nhập dưới quyền người dùng”

thông báo lỗi

“Error! Sai tài khoản hoặc mật khẩu”

“Chƣa có tài khoản,đăng ký tại đây”

3.3.4.2 Chức năng xem địa điểm