政大人地圖日誌系統建置
30
0
0
全文
(2) 摘要 近年來因為空間資訊領域的產業與應用的快速發展，產生許多便利的應用，如 衛星導航系統、電子地圖(Google Maps/Earth)等。本計畫以建立可供發佈生活訊. 息，且能與電子地圖連結之地圖日誌為目的，結合留言板、Google Maps API 與 資料庫製作網站平台，供政大教職員和學生使用。. 關鍵字：地理資訊系統、空間資訊、Google Maps API、電子地圖. Abstract In recent years, the Geomatics related industries and applications have very rapid development. As a result, many convenient applications have emerged, including: satellite navigation system, and Google Maps/Earth. The objective of this study is to establish a platform using dynamic web programming, bulletin board, Google Maps API, and database management system. The system will provide the faculty and students of National Chengchi University with web-based tools to publish blogs along with relevant information, such as map, photos, and video clips.. Key word: Geographic Information Systems, Geospatial information, Google Maps API, Electronic maps.. I.
(3) 目錄 一、前言 ....................................................................................................................... 1 二、網站系統 ............................................................................................................... 2 2.1 網站系統目的 ..................................................................................................... 2 2.2 使用軟體 ............................................................................................................. 2 2.2.1 Django........................................................................................................... 2 2.2.2 Python ........................................................................................................... 3 2.2.3 資料庫........................................................................................................... 4 2.2.4 PostgreSQL ................................................................................................... 4 2.3 網頁設計.............................................................................................................. 4 2.4 系統使用環境...................................................................................................... 4 三、GOOGLE API 及其網頁開發應用 ..................................................................... 5 3.1 GOOGLE MAPS ...................................................................................................... 5 3.2 GOOGLE MAPS API ............................................................................................... 5 3.3 HTML .................................................................................................................. 5 3.4 JAVASCRIPT .......................................................................................................... 5 四、研究問題 ............................................................................................................... 6 4.1 如何使用 PYTHON 和 DJANGO 的網頁開發工具............................................... 6 4.2 如何使用 JAVASCRIPT 語法結合 GOOGLE MAPS API ........................................ 6 4.3 如何利用網頁對 POSTGRESQL 的資料庫進行管理 ......................................... 6 4.4 如何將 POSTGRESQL 和 GOOGLE MAPS API 作連結 ........................................ 6 4.5 如何用 CSS 程式語言將網頁美化 .................................................................... 7 五、開發方法 ............................................................................................................... 8 5.1 利用 HTML 及 DANGO 建置網站頁面 .............................................................. 8 5.2 利用 GOOGLE MAPS API 建立具有互動式地圖之網頁 .................................... 8 5.3 DJANGO 之管理者使用介面 ................................................................................ 9 六、使用者手冊 ......................................................................................................... 11 6.1 6.2 6.3 6.4 6.5 6.6 6.7. 使用者介面 ....................................................................................................... 11 帳號密碼註冊 ................................................................................................... 11 帳號認證 ........................................................................................................... 12 登入進行留言 ................................................................................................... 13 瀏覽個別留言 ................................................................................................... 16 瀏覽全部留言 ................................................................................................... 19 搜尋留言內容： ............................................................................................... 21 II.
(4) 6.8 忘記密碼： ....................................................................................................... 22 七、結論與建議 ......................................................................................................... 24 八、參考文獻 ............................................................................................................. 25 . III.
(5) 圖目錄 . 圖 1. Django 運作的流程圖 .......................................................................................... 2 圖 2. Django MTV 與 MVC 架構圖 ............................................................................. 3 圖 3. Python 直譯示意圖 .............................................................................................. 3 圖 4. 留言與互動式地圖.............................................................................................. 8 圖 5. 管理者登入圖...................................................................................................... 9 圖 6. 管理者新增與變更圖.......................................................................................... 9 圖 7. 管理者更改資料圖............................................................................................ 10 圖 8. 開發方法流程圖................................................................................................ 10 圖 9. 網站入口頁面圖................................................................................................ 11 圖 10. 網站註冊按鈕圖.............................................................................................. 11 圖 11. 帳號註冊圖...................................................................................................... 12 圖 12. 帳號認證網頁導入圖...................................................................................... 12 圖 13. 信箱認證信圖.................................................................................................. 13 圖 14. 帳號認證圖...................................................................................................... 13 圖 15. 留言按鈕圖...................................................................................................... 14 圖 16. 登入頁面圖...................................................................................................... 14 圖 17. 留言頁面圖...................................................................................................... 15 圖 18. 地圖位置點選示意圖...................................................................................... 16 圖 19. 留言類別示意圖.............................................................................................. 17 圖 20. 留言標題圖...................................................................................................... 17 圖 21. 地圖位置按鈕示意圖...................................................................................... 18 圖 22. 地圖標點及照片圖.......................................................................................... 18 圖 23. 全部留言按鈕示意圖...................................................................................... 19 圖 24. 全部留言地圖標點圖...................................................................................... 20 圖 25. 滑鼠游標移至標點示意圖.............................................................................. 20 圖 26. 照片顯示圖...................................................................................................... 21 圖 27. 搜尋類別圖...................................................................................................... 21 圖 28. 搜尋結果圖...................................................................................................... 22 圖 29. 忘記密碼連結示意圖...................................................................................... 23 圖 30. 忘記密碼頁面圖.............................................................................................. 23 . IV.
(6) 一、前言 近年來空間資訊領域的學術研究蓬勃發展，更促進了相關領域的產業與應用 的快速成長，不但創造了可觀的經濟產值，在民生方面也有許多便利的應用，如 衛星導航系統、電子地圖(Google Maps/Earth)等。本計畫之目的為利用空間資訊 科技，以及 Web 2.0 的架構建立資訊系統平台，提供全體政大師生以地圖和影像 的方式記錄生活日誌，並透過網際網路分享，為政大的校園注入更多的活力，並 凝聚政大人對於母校的向心力。. 1.
(7) 二、網站系統 2.1 網站系統目的 建立此具有多媒體圖像與地圖的政大校園生活圈資訊系統，可讓全校師生從 互動式電子地圖輕鬆得知各項校園生活圈相關資訊及提供政大人記錄生活日誌 的平台，藉由網站建立師生聯繫的橋樑，並提供政大學生及教職員分享校園附近 或是生活週遭的資訊。. 2.2 使用軟體 2.2.1 Django Django 是一個以 Python 語言寫成的開放原始碼高階網頁開發框架(Web Frame Work)，原是為了管理線上新聞網站資料開發而成，並於 2005 年 7 月以 BSD 授權模式發布。Django 的主要目的就是可以快速地開發高效能且可運用資 料庫的網站，且此軟體的使用可以讓網站的開發更為簡易。Django 支援 MVC (Module-View-Controller)架構，透過內建模組(module)，可達到在短時間建立具 有完整功能網站的目標。. 圖 1. Django 運作的流程圖 2.
(8) Django 的 MVC 設計樣式和一般 MVC 架構有些不同，Django 的 View 和 Template 都對應到 MVC 架構中的 View，View 的部分是一些基本 HTML 架構的 設計，而 Template 則是一些簡單的語法，當使用者 Browser 對伺服器作 Request， Django 便會針對 urls.py 進行呼叫，urls.py 會將 View 中的模組和 Template 中的 連結作連接。. 圖 2. Django MTV 與 MVC 架構圖. 2.2.2 Python Python 是 Django 的基礎語言，它是一種簡易且功能強大、具備物件導向和 直譯式的程式語言，具有良好的可讀性。Python 擁有完善的標準函式庫，Python 語言由數字、字串(string)、列表(list)、字典(dictionary)等常見類型和函式組成， 而 Python 標準函式庫則提供了系統管理、資料庫介面、圖形系統等額外的功能。 並支援各種平台，使得在應用上更為方便。其還有易於擴充、遷入的特性，適合 當作其他應用程式的延伸語言。Youtube、Google、Yahoo!等著名網站都在內部 大量使用 Python 語言。 Python 經常被運用於 Web 開發，由於支援多種標準格式和協定如 MIME 和 HTTP，它非常適合編寫跟網路相關的應用。. 圖 3. Python 直譯示意圖 3.
(9) 2.2.3 資料庫 資料庫(database)為對於某一特定資料，有系統地整理為一個資料的集合， 且可以分享給多個使用者使用。使用者可以針對其做查詢或是修改資料的動作。 它是資料表(table)的集合體，一資料庫可能由一個或多個資料表組成。. 2.2.4 PostgreSQL PostgreSQL(念法為”Post-gress-Q-L”，簡稱”Postgres”)為一被廣泛使用的開放 式免費資料庫軟體。主要的特徵為可程式性，PostgreSQL 讓開發與使用的工作 變得更加容易。它可以用於所有主要的作業系統，包括 Linux, Unix 和 Windows。 支援如 C/C++, Java, Python 等語言。SQL 符合 ANSI-SQL2008 的標準，其標準函 式庫包含數百個內建功能，能使使用者在資料庫的建置上更加方便。著名的用戶 有 Skype, IMDB, Evergreen 等。. 2.3 網頁設計 在網頁製作的過程中，會頻繁地使用 CSS(Cascading Style Sheets，中文為層 疊樣式表，又稱串樣式列表)，由 W3C 維護，是一種樣式表(Style Sheet)語言， 它可以決定一個網頁的顏色、字體、排版等顯示特性，其目的是為了對 XHTML 和 HTML 等標示語言(Markup Language)提供顯示層，將文件的結構(使用 HTML 等語言)和顯示(CSS)做區隔。. 2.4 系統使用環境 系統管理者負責系統資料庫與網頁之管理，其使用環境需求如下： ● Microsoft Windows XP Professional SP3 ● Internet Explorer 6.0 以上 ● Internet Information Service 5.1 ● Flash player 8 以上 使用者透過本系統提供之使用介面操作各項功能，其使用環境需求如下： ● Internet Explorer 6.0 以上 ● Flash player. 4.
(10) 三、Google API 及其網頁開發應用 3.1 Google Maps Google Maps 為 Google 所提供的電子地圖服務，除了提供傳統地圖、衛星 影像圖與地形圖之外，近年來還新增了街景圖。除電腦查詢外，亦可在智慧型手 機等行動裝置上使用。. 3.2 Google Maps API 透過 Google Maps API，可以將 Google Maps 嵌入網頁，網站上可以自行定 義修改。它提供了一個 Javascript 函式庫，使用者可以利用網站上提供的 js 文件 進行修改。在早期版本中，每個網站需要申請一個特定金鑰才能做地圖的使用， 而在 v3 版本中，這樣的註冊程序已經被取消了。. 3.3 HTML HTML (Hyper Text Markup Language)是為了「網頁創建和其他可在瀏覽器 看到的信息」所設計的標示語言。它具有超文字(HyperText)、超連結(HyperLink)、 超媒體(HyperMedia) 的特性，透過 HTTP ( Hyper Text Transfer Protocol) 網路通 訊協定，便能夠在世界各地透過 WWW (World Wide Web) 的架構做跨平台的交 流。只需要簡單的文書編輯軟體或 HTML 編輯器，就可以編輯 HTML 文件。包 含 HTML 的文件檔名為.html，但由於像是 DOS 的舊系統的限制，.htm 也被廣泛 地使用。. 3.4 JavaScript JavaScript 是一種廣泛用於網站開發的直譯式語言，最常於 HTML 上使用， 以添加網頁動態功能，但它也可以被用在不同的介面上，如伺服器。JavaScript 和 Java 不同，相似處僅為兩者都承襲 C 語言的風格，所以在語法上會有相似之 處。它原本要被命名為 LiveScript，但因為行銷策略而被改為現在的 JavaScript。 JavaScript 和 Jscript 也不同，但應用範圍相似。 JavaScript 不同於其他語言的是，它是一種腳本語言(Script Language)，在執 行前不需要先做編譯的動作。它被設計為在 Host 環境下執行的 Script，流灠器是 最常見的 Host。. 5.
(11) 四、研究問題 本計畫著重於使用者的留言內容與地圖位置的互動，主要的研究問題是如何 將使用者的資料儲存到資料庫，再透過網頁和 Google Maps 呈現，方法說明如下:. 4.1 如何使用 Python 和 Django 的網頁開發工具 Django 的 MVC 設計樣式和一般 MVC(Module-View-Controller)架構有點不 同，Django 的 View 和 Template 都對應到 MVC 架構中的 View，View 的部分是 一些基本 HTML 架構的設計，而 Template 則是一些簡單的語法，當使用者 Browser 對伺服器作 Request，Django 便會針對 urls.py 進行呼叫，urls.py 會將 View 中的模組和 Template 中的連結作連接。大抵來說，Django 的 MVC 架構應該稱 為 MTV(Module-Template-View)架構。. 4.2 如何使用 JavaScript 語法結合 Google Maps API Google Maps API 的內容是以 JavaScript 語法所建立的，以 JavaScript 撰寫軟 體呼叫 Google Maps API 的函式，便可利用 Google Maps 呈現電子地圖、衛星影 像與其他相關的資訊。. 4.3 如何利用網頁對 PostgreSQL 的資料庫進行管理 資料庫為 Django 的核心所在，利用 Django 的 View 模板，可使用 Python 程式語言撰寫出來的函式，搭配 Django models.py 裡資料表欄位的設計，對資料 庫裡的資料進行增加、刪除、編輯及查詢等功能，建立一個功能完善的管理介面。 配合 Django settings.py 裡資料庫的設定，包括資料庫種類、資料庫名稱、所對 應伺服器 IP 和 PORT，可與資料庫之間做動態的連結，使其以動態網頁的方式 呈現。. 4.4 如何將 PostgreSQL 和 Google Maps API 作連結 PostgreSQL 和 Google Maps API 或許沒有直接的連結關係，但若從資料庫裡 抓出由使用者留下的經緯度、圖片、文字等資料，再以 Python 的 function 作撰 寫 JavaScript 的動作，並將此些資料一併寫入其中，如此便可以利用 Google Maps API 來呈現使用者留下之經緯度其在地圖上對應的位置，同時也可以呈現 使用者分享的圖片與文字的資訊。. 6.
(12) 4.5 如何用 CSS 程式語言將網頁美化 CSS(Cascading Style Sheets，中文為層疊樣式表，又稱串樣式列表)，是 一種樣式表(Style Sheet)語言，它主要是管理一個網頁中版面的配置，文字、 背景、表格、圖層、連結等都可以利用它做修改，且可寫成.css 檔，在 HTML 文 件中外連，使得網頁版面樣式的管理更為簡易，亦可讓多個 HTML 文件使用相同 css 樣式，達到節省時間的目的。. 7.
(13) 五、開發方法 5.1 利用 HTML 及 Dango 建置網站頁面 與大部分的程式語言相同，Django 也能夠建立邏輯判斷式與宣告變數，不 同的是此些判斷式與變數名稱可以寫入 HTML，而此種 HTML 即為 Django 的 Template。 Template 中的邏輯判斷式是以 Django Template tag 的方式表示，寫成：{% 邏 輯判斷式 %}，例如：{% if i>0 %}，並且搭配{% endif %}作為 tag 結束的指令。 而 Template 中的變數則是以{{ 變數名稱 }}的方式表示，如此就可以將即時更 新的資料，透過 Django 內建 django.shortcuts 模組的函示 render_to_response()的 方式，將資料隨時對應到指定的變數，使之能即時於網頁上呈現。. 5.2 利用 Google Maps API 建立具有互動式地圖之網頁 撰寫 JavaScript 程式語言引入 Google Maps API 的函式，將所建立的資料呈 現在 Google Maps 上，並將互動式地圖的結果以 HTML 的方式呈現在網際瀏覽 器上。結合使用者留下來的資料與 JavaScript，再利用 JavaScript 連結 Google Maps API 的函式將資料呈現在 Google Maps 上，並且以 CSS 程式語言的設計，將 Google Maps 呈現在 HTML 網頁上，使使用者可以即時地看到自己所留下的資訊 於 Map 上的位置，如此便形成互動式的地圖。. 圖 4. 留言與互動式地圖. 8.
(14) 5.3 Django 之管理者使用介面 將 django.contrib.admin 加入 Django settings.py 的 INSTALLED_APPS 中，就 可以利用 Django 內建的網站管理系統對資料庫內的資料進行修改、新增、刪除 等動作。. 圖 5. 管理者登入圖. 圖 6. 管理者新增與變更圖 紅色部分即為此網站之使用者的資料表。. 9.
(15) 圖 7. 管理者更改資料圖. 圖 8. 開發方法流程圖. 10.
(16) 六、使用者手冊 6.1 使用者介面 進入網站的起始頁面如圖 9，經由 Flash 連結可進入網站首頁。. 圖 9. 網站入口頁面圖. 6.2 帳號密碼註冊 點選紅框中之「政大人註冊」按鈕進入註冊頁面，以學號或教職員編號當作 帳號，並以政大信箱做為認證信箱進行註冊。. 圖 10. 網站註冊按鈕圖. 11.
(17) 圖 11. 帳號註冊圖. 6.3 帳號認證 至學校信箱收取認證信，將收到的認證碼填入欄位，於網頁進行認證。若是 已經關掉頁面，認證訊息則會於登入後顯示。. 圖 12. 帳號認證網頁導入圖 12.
(18) 圖 13. 信箱認證信圖. 圖 14. 帳號認證圖. 6.4 登入進行留言 點選紅框中之「我要留言」，登入帳號後進行留言。留言時務必填入標題、 文章內容及選取文章類別，並於地圖上點選當時位置，其他項目為選填。若是想 要全部重填，按下最下方的清除重填即可。確定填寫完畢後，按下確定送出。. 13.
(19) 圖 15. 留言按鈕圖. 圖 16. 登入頁面圖. 14.
(20) 圖 17. 留言頁面圖. 15.
(21) 圖 18. 地圖位置點選示意圖. 6.5 瀏覽個別留言 選擇旁邊類別分類，即會出現個別留言標題，點選想要閱讀的標題會顯示完 整留言，再選取「地圖位置」按鈕，位置會在右方地圖顯示，按下紅色標記可閱 覽照片及照片描述。. 16.
(22) 圖 19. 留言類別示意圖. 圖 20. 留言標題圖. 17.
(23) 圖 21. 地圖位置按鈕示意圖. 圖 22. 地圖標點及照片圖. 18.
(24) 6.6 瀏覽全部留言 點選類別標籤進入各類別閱讀留言，選擇「閱讀全部留言」或是「繼續閱讀” 食(/衣/住/行/育樂)”的留言」即可閱讀全部類別或該類別的所有留言。選取「想 看這些留言在地圖的何處嗎？」按鈕可在右方地圖觀看所有點位位置，將滑鼠移 到紅色標記上會顯示該點留言標題，選取任一標記則可看到照片及照片敘述。. 圖 23. 全部留言按鈕示意圖. 19.
(25) 圖 24. 全部留言地圖標點圖. 圖 25. 滑鼠游標移至標點示意圖. 20.
(26) 圖 26. 照片顯示圖. 6.7 搜尋留言內容： 選擇上方搜尋類別，輸入關鍵字進行搜尋。. 圖 27. 搜尋類別圖 21.
(27) 圖 28. 搜尋結果圖. 6.8 忘記密碼： 若是忘記密碼，請選取「我要留言」按鈕進入登入頁面，點選下方「忘記密 碼？」連結，輸入申請帳號及當初認證信箱，系統便會發送帳號密碼提示信件至 認證信箱中。. 22.
(28) 圖 29. 忘記密碼連結示意圖. 圖 30. 忘記密碼頁面圖. 23.
(29) 七、結論與建議 本計畫主要目的是以開放原始碼之免費軟體建置網站，利用 HTML、Django 及 Google Maps 的結合，呈現政大人的生活體驗。主要研究成果說明如下： 1. 近年來由於空間資訊領域、資訊科技與電腦網路的蓬勃發展，使得可以免 費取得的軟體、資料更加豐富，也促成電子地圖在各種不同領域的應用與 學術研究的發展。本計畫結合 Web 2.0、資料庫設計與網站管理技術，建 置屬於政大人的地圖日誌平台，將有助於凝聚政大人對於母校的向心力。 2. 利用動態網頁設計的技術，結合 Google Maps API，可結合免費電子地圖 資源，發展出一套具有互動功能的網站系統，對於具有空間資訊的資料分 享很有幫助。 3. 本計畫使用許多免費軟體，相對於商業軟體而言，各種技術服務資源較為 有限，參與計畫的同學在系統建置過程中不斷嘗試，也曾遭遇挫折，但在 持續的努力下終能完成本計畫，所有參予者均學到許多寶貴經驗，對於將 來在學習、研究上應有助益。 有關本計畫未來發展及相關建議如下： 1. 未來若有需要及足夠的儲存空間，可增加影音及其他資料的上傳，使網頁 在使用上更有多樣性。 2. 本計畫需定期檢查是否有不當留言內容，在後續也需要持續管理。. 24.
(30) 八、參考文獻 自由軟體鑄造場，http://www.openfoundry.org W3school，http://www.w3schools.com Django 官網，http://www.djangoproject.com Google Maps，http://maps.google.com Google Maps API，http://www.google.com/apis/maps Python 官網，http://www.python.org PostgreSQL 官網，http://www.postgresql.org/ Gaberiel Svennerberg, 2010. Beginning Google Maps API3. Allen Downey, 2008, Think Python -- An Introduction to Software Design.. 25.
(31)
數據
+7
相關文件
（三）各訓練單位須妥善建立學員及訓練相關資料，上課期間應建立教學日誌（如
(三) 使用 Visual Studio 之 C# 程式語言（.Net framework 架構）、Visual Studio Code 之 JavaScript 程式語言. （JavaScript framework 架構），搭配 MS SQL
(三)使用 Visual Studio 之 C# 程式語言（.Net framework 架 構 ）、 Visual Studio Code 之 JavaScript 程式語言（JavaScript framework 架構） ，搭配 MS
5、「選課系統資料庫」APP 程式撰寫與分析(8 小時) 6、「雲端電子書城」APP 程式撰寫與分析(8 小時) 7、「多益 TOEIC 單字學習系統」APP
2.熟 悉 Microsoft Windows Server 作 業 系 統 、 Microsoft SQL Server 資料庫伺服器及網 頁伺服器等環境。. 3.具撰寫 JAVA
(二)使用 PHP 語言、MySQL 資料庫與 Apache 伺服軟體開發互
(三)使用 Visual Studio 之 C# 程式語言（.Net framework 架構）、Visual Studio Code 之 JavaScript 程式語言（JavaScript framework 架構） ，搭配 MS
建議多協助學生進 行運用工具實作的 機會，亦可嘗試將 部分概念以圖像化 (如流程圖、太陽 圖等)的形式呈現
