五. 開發方法:
5.2 將所蒐集的測試資料用 XML 建立資料庫
將步驟 1 蒐集的測試資料利用 XML 格式的資料表去建立測試的點位資料各 項項目(包括景點/路線名稱、地址、經度、緯度、相關聯結並照片相對位址)，以 下兩張圖說明 XML 格式建立資料範例:
圖7 政大院館資料的 XML 檔
14 管理的資料表。並且 Django 也可以在每個 class 中建立主索引鍵(PrimaryKey)和 外來鍵(ForeignKey)的欄位，也可以設定每個欄位的長度和預設值。
5.3.2 Django Template 應用於計畫的設計原理
Django Template 中，主要的功能是網頁呈現的部分。並且 Django 主要是處 理 動 態 網 站 ， 可 以 藉 由 Template 中 的 變 數 和 tag 語 法 透 過 Django 內 建 django.shortcuts 模組的函示 render_to_response()達到網頁即時和資料庫更新的效 果。而 Django Template System 介紹如下:
Django Template 變數語法的部分:用{{variable}}表示，將變數用左右各兩
15
個大括號包住，並且變數名稱就是資料表中的欄位名稱，可以透過 Django Template 將此種寫法寫入 HTML 並即時資料的更新。
Django Template tag 語法的部分:用{% 邏輯判斷式 %}表示，為在 Django Template System 指示網頁呈現判斷的部分。一般 Django Template 包含兩個 tags；
分別是{%for 資料表名稱 in 資料表名稱的屬性(欄位)%}和{%if 資料表名稱 in 資料表名稱的屬性(欄位)%}，並且在程式碼最後加上{%endfor%}和{%endif%}
作為 tag 結束指令。
Django.shortcuts 模組裡的函式 render_to_response()負責將 template 模板 (HTML、XML、CSS、JavaScript)當作 HTTP 物件 response 出去，以呈現給瀏覽 者。
5.3.3 Django View 應用於計畫的設計原理
Django 的核心所在，也是程式設計師撰寫程式邏輯的部分，為 MVC 架構 中 的 controller 部分，控制整個網頁框架的運作 ，可以將瀏覽者所發出的 HTTPRequest 物件利用 Django View 所撰寫的函式(function)以 HTTPResponse 物 件 response 出去。並且 Django 網頁開發框架是以 Python 程式語言開發，所以 Django View 是以 Python 撰寫的函式組成。而每一個跟 HTTP 關連的函式都要有 參數 request，如此才可以將 Web Request 物件接收並 return Web response 出去。
Response 出去的物件可以是 HTML 在網頁呈現的文件、轉址到其他網頁的文件、
XML 文件、404 error、和圖片等其他物件。搭配 Django Template System 的結合，
呈現的頁面可以達到動態網站成果。
5.3.4 Django URLconf 和 View 應用於計畫的設計原理
Django URLconf 為 Django 內建的 URL patterns 函式裡的網址映射(mapping) 到 Django View 所對應的函式而做處理。並且 Django URL 檔案裡面必須從 django.conf.urls.default 模組引進(import)所有的物件，包括函式 patterns()等，並 從 Django View 裡引進所有的物件，包含所有的函式。必要時，要引進 Django Project settings 中的物件。接下來是將 patterns()裡的資料(包括 URL 網址和對應 view function)指派給變數 URLpatterns。此外，在 Django 中的網址是屬於正規表 示法(regular expression)的形式；正規表示法式處理字串的方法，是以行為單位來 進行字串的處理行為，正規表示法透過一些特殊符號的輔助，可以使 Web Framework 程式開發者對網站網址輕易的開發，以特定的字串處理特定的程序。
16
圖9 Django 應用於計畫的設計原理(MVC 架構)圖 5.3.5 Django 計畫的安全性與 django.session 的應用
Session 是指一個終端使用者與交互系統進行通信的時間間隔，通常指從註 冊進入系統到登出系統之間所經過的時間。具體到 Web 中的 Session 指的就是用 戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是用戶 瀏覽這個網站所花費的時間。因此可得知 Session 實際上是一個時間概念。在 Django 的 Session 是藉由 Django 的中介軟體(middleware)和 Django 的模組 (model)所建置而成。並且可以利用 Session 增加網站的安全性；在每個頁面中，
利用 JavaScript 撰寫對使用者帳戶 Session 的判斷，使得其他人(非權限管理人) 無法進入管理頁面，而達到網站安全性的考量。
5.4 以 JavaScript 撰寫網頁，將蒐集的資料用 ODBC 的技術連結本計畫所建的 MySQL 資料庫
本 研 究 將 使 用 JavaScript 程 式 語 言 撰 寫 結 合 ODBC （ Open DataBase Connectivity）的技術具有互動功能的網頁。而 ODBC 建立在主從架構上，並提 供一組 API（Application Programming Interface），使應用程式可以透過這一組 API 把 SQL （Structured Query Language）指令送到資料庫系統中存取資料。由 於 ODBC 是一個為資料庫系統定義的標準界面，因此應用程式可以同時與多個 資料庫系統連接。本計畫為採用的資料庫為 MySQL，所使用連結資料庫的驅動 程式為 MySQL Connectors 用來跟資料庫作連結。Google Maps API 的函式庫，
以及後端的資料庫管理系統。
17
5.5 撰寫 JavaScript 程式語言引入 Google Maps API 的函式，將所建立的資料呈
現在 Google Maps 上，並將互動式地圖的結果以 HTML 的方式呈現在網際瀏覽 器上將 GPS 軌跡器收集的資料，建成 XML 檔案格式，並且利用 JavaScript 去連 結 Google Maps API 的函式進而將資料呈現在 Google Maps 上。並將 Google Maps 上所呈現的資料放在 HTML 檔裡面，利用 CSS 程式語言將其呈現出來，使 網頁具有較為一致的風格，並維持未來更新時的彈性。
圖10 互動式地圖呈現範例圖
18
將所建立的 XML 資料，
利用 JavaScript 建立在 MySQL 資料庫裡。
撰寫 JavaScript 程式語言引入 Google API 的函式，將所建立的資料呈現在 Google Maps 上，並將互動式地圖的結果以 HTML 的方式呈現在網際瀏覽器上。
將蒐集的資料用 ODBC 的技術連結 本計畫所建的 MySQL 資料庫。
將所蒐集的測試資料 用 XML 建立資料庫 利用 GPS 軌跡器，
蒐集測試地點座落 處照片和影音。
圖11 開發方法流程圖
19
六. 使用者手冊 A、使用者介面：
1. 進入網頁的起始畫面：
一開始進入網頁時，網頁會自動提供院類別的資料，並顯示在地圖上，讓使 用者可進行其他查詢或是登入管理系統的動作。
圖12 進入網頁起始畫面畫面圖
20
2. 依類別查詢地點資料
圖13 依類別查詢地點畫面圖
如上圖所示，使用者可以從紅框中之工具，進行查詢的動作，首先選擇想查 詢的類別，再按下執行即可進行查詢的動作，而查詢解果會有查詢到跟無查 詢到兩種結果，可從下面解說了解。
21
2.1 有查詢到資料：如下圖所示，假設使用者查詢的類別為校園公車路 線，網頁便會去搜尋為校園公車路線類型的資料，有搜尋到就會直接顯示 在地圖上。
圖14 有查詢到地點畫面圖
22
2.2 沒查詢到資料：如下圖所示，假設使用者查詢的類別為店家，網頁便 會去搜尋院類別的資料，若無查尋到相關資料就會在地圖上跳出訊息。
圖15 無查詢地點畫面圖
23
3. 依單一點查詢地點資料
圖16 依單一點查詢地點畫面圖
如上圖所示，使用者可以從紅框中之工具，進行查詢的動作，首先輸入想查 詢的地點名稱，再按下查詢即可，而查詢解果會有查詢到跟無查詢到兩種結 果，可從下面解說了解。
24
3.1 有查詢到資料：假設使用者輸入綜合院館，網頁便會去搜尋是否有綜 合院館的資料，有搜尋到就會直接顯示在地圖上。
圖17 依單一點有查詢到地點畫面圖
25
3.2 無查詢到資料：假設使用者輸入綜合院館，網頁便會去搜尋是否有綜 合院館的資料，若無查尋到相關資料就會在地圖上跳出訊息。
圖18 依單一點無查詢到地點畫面圖
26
4. 觀看查詢到的景點資料
4.1 若使用者查詢到綜合院館後，對此點左擊一下後，便可觀看到詳細的 資訊，首先會看到此景點的基本資料，其中包括名稱、地址、經緯度、及 代表圖片
圖19 觀看地點基本資料畫面圖
27
4.2 選第二項相關圖片，可看到此綜合院館的相關的照片
圖20 觀看地點相關圖片畫面圖
28
4.3 第三項相關影音，可看到此綜合院館的相關的影音
圖21 觀看地點相關影音畫面圖
29
4.4 第四項相關連結，可看到此綜合院館的相關的連結，並使用連結
圖22 觀看地點相關連結畫面圖
30
4.5 第五項相關資訊，可看到此綜合院館的相關的資訊
圖23 觀看地點相關資訊畫面圖
31
B、管理者登入介面:
1 輸入管理者的帳號和密碼，即可登入管理系統:
圖24 管理者登入畫面圖
32
2 登入後的起始頁面
2.1 登入管理系統的起始畫面都會預設在新增頁面:
圖25 管理者登入起始頁面畫面圖
33
3 新增景點或路線資料
3.1 輸入要新增景點的名稱、地址和種類(總共分為六大類):
圖26 管理者新增資料畫面圖
34
3.2 選新增景點類型並在地圖上選點位:系統會自動將點所在座標寫入下方 經緯度的 textbox 裡面。
圖27 管理者新增資料畫面圖
35
3.3 填寫相關連結資料名稱，並輸入正確網址，最多填入三筆資料:
圖28 管理者新增資料畫面圖
3.4 填寫影音名稱，並選取影音資料上傳，最多填入三筆資料:
圖29 管理者新增資料畫面圖 3.5 選取圖片資料上傳，最多填入三筆資料:
圖30 管理者新增資料畫面圖
36
3.6 填寫詳細資訊，並按增加按鈕上傳資料至系統:
圖31 管理者新增資料畫面圖
圖32 管理者新增完成畫面圖
37
4.編輯景點資料:
4.1 編輯景點頁面:
圖33 管理者編輯資料畫面圖
38
4.2 輸入欲編輯景點名稱並按連結資料，系統會自動從資料庫中取該筆景 點其他項目的資料。
圖34 管理者編輯資料畫面圖
4.3 選取欲修改項目的資料做編修，並按編修紐至系統。
圖35 管理者編輯資料畫面圖
39
圖36 管理者編輯完成畫面圖
40
5 查詢景點名稱或路線資料:
5.1 查詢景點名稱或路線資料頁面:
圖37 管理者查詢資料畫面圖
5.2 選擇下拉式選單中欲查詢的資料種類(共六種)並按查詢按扭至系統:
圖38 管理者查詢資料畫面圖
41
5.3 查詢種類的資料結果如下:
圖39 管理者查詢完成畫面圖
42
6 刪除景點或路線資料
6.1 刪除景點或路線頁面:
圖40 管理者刪除資料畫面圖
6.2 輸入欲刪除資料的名稱並按刪除按鈕至系統:
圖41 管理者刪除資料畫面圖
43
圖42 管理者刪除完成畫面圖 7 使用者帳戶管理:
7.1 使用者帳戶管理介面:
圖43 管理者帳戶管理畫面圖
44
7.2 使用者更改密碼部分，按下使用者更改密碼的連結:
圖44 管理者帳戶管理畫面圖
7.2.1 輸入舊密碼、新密碼、以及確認密碼(與新密碼一樣)，輸入後 按下更改按鈕:
圖45 管理者帳戶編輯畫面圖
45
圖46 管理者帳戶編輯完成畫面圖
7.3 新增使用者部分，按下新增使用者帳戶的連結:
圖47 管理者帳戶新增畫面圖
46
7.3.1 輸入帳號、密碼和確認密碼，並按下確認鍵:
圖48 管理者帳戶新增畫面圖
圖49 管理者帳戶新增完成畫面圖