中文 | English

【物聯網開發系列】雲端平台開發篇:瀏覽資料篇

文/曹永忠、吳佳駿、許智誠、蔡英德

本篇是「物聯網開發」系列中「雲端平台開發篇」的第二篇:瀏覽資料篇,在上文【物聯網開發系列】雲端平台開發篇:資料庫基礎篇(曹永忠,吳佳駿,許智誠,& 蔡英德,2017a,2017b)(曹永忠,吳佳駿,許智誠,& 蔡英德,2017c),我們應用 Ameba RTL8195AM 開發板,整合 Apache WebServer(網頁伺服器),應用 mySQL 資料庫,並建立溫溼度(本文使用 DHT22 溫濕度感測模組)資料庫,轉成為一個物聯網中溫濕度感測平台,透過無線網路(Wifi Access Point),將資料溫溼度感測資料,透過網頁資料傳送,將資料送入 mySQL 資料庫。

本文「雲端平台開發篇」透過 Php 互動式程式設計,使用網頁方式視覺化呈現在網頁之中,讓許多網際網路的使用者,不管是一般使用者,行動使用者,手機使用者等等,都可以透過網際網路隨時查閱任何裝置的溫溼度資訊。

進入 Dream Weaver CS6 主畫面

為了簡化程式設計困難度,本文採用 Adobe 公司開發的 Adobe Creative Suite ‎系列,採用 CS6 版本的 Dream Weaver CS6 進行設計。

如下圖所示,為 Dream Weaver CS6 的主畫面,對於 Dream Weaver CS6 的基本操作,請讀者自行購書或網路文章學習之。

圖 1 :Dream Weaver CS6 的主畫面

開啟新檔案

如下圖所示,我們先行開啟新檔案。

圖 2:開啟新檔案

新增 PHP 網頁檔

如下圖所示,我們先行新增 PHP 網頁檔。

圖 3:新增 php 網頁

編輯新檔案

如下圖所示,我們開始編輯新檔案。

圖 4:空白的 php 網頁(設計端)

插入表單

如下圖所示,我們先行插入表單。

圖 5:插入表單

開始設計表單

如下圖所示,我們開始設計表單。

圖 6:開始設計表單

插入表格

如下圖所示,我們先行插入表格。

圖 7:插入表格

插入 2X6 表格

如下圖所示,我們先行插入 2X6 表格。

圖 8:插入 2X6 表格

產生 2X6 表格

如下圖所示,我們產生 2X6 表格。

圖 9:產生 2X6 表格

輸入表格標題

如下圖所示,我們先行輸入表格標題。

圖 10:輸入表格標題

調整表格欄位大小

如下圖所示,我們先行開啟新檔案。

圖 11:調整表格欄位大小

設定表格標題居中對齊

如下圖所示,我們先行設定表格標題居中對齊。

圖 12:設定表格標題居中對齊

瀏覽資料程式檔先行存檔

如下圖所示,我們先行將瀏覽資料程式檔先行存檔。

圖 13:瀏覽資料程式檔先行存檔

建立網頁系統子目錄

如下圖所示,我們先行建立網頁系統子目錄。

圖 14:建立網頁系統子目錄

瀏覽資料程式檔存檔

如下圖所示,我們先行將瀏覽資料程式檔存檔。

圖 15:瀏覽資料程式檔存檔

建立 mysql 連線

如下圖所示,我們先行建立 mysql 連線。

圖 16:建立 mysql 連線

mysql 連線設定畫面

如下圖所示,我們先行開啟新檔案。

圖 17:mysql 連線設定畫面

設定 mysql 連線

如下圖所示,我們先行設定 mysql 連線。

圖 18:設定 mysql 連線

mysql 連線設定完成畫面

如下圖所示,我們看到 mysql 連線設定完成畫面。

圖 19:mysql 連線設定完成畫面

打開連線資料表資料區

如下圖所示,我們先行打開連線資料表資料區。

圖 20:打開連線資料表資料區

建立資料查詢

如下圖所示,我們先行建立資料查詢。

圖 21:建立資料查詢

連線資料集建立畫面

如下圖所示,我們可看到連線資料集建立畫面。

圖 22:連線資料集建立畫面

設定連線資料集內容

如下圖所示,我們先行設定連線資料集內容。

圖 23:設定連線資料集內容

展開連線資料集欄位

如下圖所示,我們先行展開連線資料集欄位。

圖 24:展開連線資料集欄位

將擷取資料欄位填入對應表格欄位

如下圖所示,我們將擷取資料欄位填入對應表格欄位。

圖 25:將擷取資料欄位填入對應表格欄位

將單筆處理功能填入表格

如下圖所示,我們將單筆處理功能填入表格。

圖 26:將單筆處理功能填入表格

選取重複顯示資料區

如下圖所示,我們先行選取重複顯示資料區。

圖 27:選取重複顯示資料區

建立重複顯示資料功能

如下圖所示,我們建立重複顯示資料功能。

圖 28:建立重複顯示資料功能

設定重複顯示資料之每頁筆數

如下圖所示,我們先行設定重複顯示資料之每頁筆數。

圖 29:設定重複顯示資料之每頁筆數

處理上下頁與筆功能區域開啟新檔案

如下圖所示,我們先行開啟新檔案。

圖 30:處理上下頁與筆功能區域

建立移動到首頁功能(畫面)

如下圖所示,我們先行建立移動到首頁功能(畫面)。

圖 31:建立移動到首頁功能(畫面)

已建立移動到首頁功能

如下圖所示,我們已建立移動到首頁功能。

圖 32:已建立移動到首頁功能

建立移動到上一頁功能

如下圖所示,我們先行建立移動到上一頁功能。

圖 33:建立移動到上一頁功能

建立移動到上一頁功能(畫面)

如下圖所示,我們可以見到建立移動到上一頁功能(畫面)。

圖 34:建立移動到上一頁功能(畫面)

已建立移動到上一頁功能

如下圖所示,我們已建立移動到上一頁功能。

圖 35:已建立移動到上一頁功能

建立移動到下一頁功能

如下圖所示,我們先行建立移動到下一頁功能。

圖 36:建立移動到下一頁功能

建立移動到下一頁功能(畫面)

如下圖所示,我們可以見到建立移動到下一頁功能(畫面)。

圖 37:建立移動到下一頁功能(畫面)

已建立移動到下一頁功能

如下圖所示,我們已建立移動到下一頁功能。

圖 38:已建立移動到下一頁功能

建立移動到末頁功能

如下圖所示,我們先行建立移動到末頁功能。

圖 39:建立移動到末頁功能

建立移動到末頁功能(畫面)

如下圖所示,我們先行建立移動到末頁功能(畫面)。

圖 40:建立移動到末頁功能(畫面)

已建立移動到末頁功能

如下圖所示,我們已建立移動到末頁功能。

圖 41:已建立移動到末頁功能

後續

本篇是「物聯網開發系列」系列中「雲端平台開發篇」的第二篇:瀏覽資料篇,主要告訴讀者,在物聯網平台開發之中,如何瀏覽大量的溫溼度感測資料,進而透過這樣的瀏覽方式,在未來發展中,可以再透過不同開發工具與技巧,來建構更先進,更具使用者需求的系統。

後續筆者還會繼續發表『物聯網開發』系列的文章,在未來我們可以創造出更優質,更具未來性的物聯網(Internet of Thing:IOT)產品開發相關技術。

敬請期待更多的文章。

作者介紹

曹永忠(Yung-Chung Tsao) ,目前為自由作家暨專業Maker,專研於軟體工程、軟體開發與設計、物件導向程式設計,商品攝影及人像攝影。長期投入創客運動、資訊系統設計與開發、企業應用系統開發、軟體工程、新產品開發管理、商品及人像攝影等領域,並持續發表作品及相關專業著作。
Email:prgbruce@gmail.com
Line ID:dr.brucetsao
作者網頁臉書社群 (Arduino.Taiwan)Github網站Youtube

吳佳駿(Chia-Chun Wu),國立中興大學資訊科學與工程學系博士,現任教於國立金門大學工業工程與管理學系專任助理教授,目前兼任國立金門大學計算機與網路中心資訊網路組組長,主要研究為軟體工程與應用、行動裝置程式設計、物件導向程式設計、網路程式設計、動態網頁資料庫、資訊安全與管理。
Email: ccwu0918@nqu.edu.tw

許智誠(Chih-Cheng Hsu),美國加州大學洛杉磯分校(UCLA) 資訊工程系博士,曾任職於美國 IBM 等軟體公司多年,現任教於中央大學資訊管理學系專任副教授,主要研究為軟體工程、設計流程與自動化、數位教學、雲端裝置、多層式網頁系統、系統整合。
Email: khsu@mgt.ncu.edu.tw

蔡英德(Yin-Te Tsai),國立清華大學資訊科學系博士,目前是靜宜大學資訊傳播工程學系教授、靜宜大學計算機及通訊中心主任,主要研究為演算法設計與分析、生物資訊、軟體開發、視障輔具設計與開發。
Email: yttsai@pu.edu.tw

參考文獻:

曹永忠, 吳佳駿, 許智誠, & 蔡英德. (2017a). Ameba程式設計(物聯網基礎篇):An Introduction to Internet of Thing by Using Ameba RTL8195AM (初版 ed.). 台湾、彰化: 渥瑪數位有限公司.

曹永忠, 吳佳駿, 許智誠, & 蔡英德. (2017b). Ameba程序设计(物联网基础篇):An Introduction to Internet of Thing by Using Ameba RTL8195AM (初版 ed.). 台湾、彰化: 渥瑪數位有限公司.

曹永忠, 吳佳駿, 許智誠, & 蔡英德. (2017c). 【物聯網開發系列】雲端平台開發篇:資料庫基礎篇. 物聯網開發系列.  Retrieved from https://vmaker.tw/archives/18421

分享到社群

曹永忠

曹永忠 (Yung-Chung Tsao) ,目前為自由作家暨專業Maker,專研於軟體工程、軟體開發與設計、物件導向程式設計,商品攝影及人像攝影。長期投入創客運動、資訊系統設計與開發、企業應用系統開發、軟體工程、新產品開發管理、商品及人像攝影等領域,並持續發表作品及相關專業著作。 Email:prgbruce@gmail.com Line ID:dr.brucetsao 作者網站:https://www.cs.pu.edu.tw/~yctsao/ 臉書社群(Arduino.Taiwan):https://www.facebook.com/groups/Arduino.Taiwan/ Github網站:https://github.com/brucetsao/ Youtube:https://www.youtube.com/channel/UCcYG2yY_u0m1aotcA4hrRgQ