【物聯網開發系列】雲端平台開發篇：資料新增篇VMAKER編輯

https://vmaker.tw/archives/19114


文／曹永忠、吳佳駿、許智誠、蔡英德
本篇是「物聯網開發」系列中「雲端平台開發篇」的第 3 篇：資料新增篇，在上文〈【物聯網開發系列】資料庫瀏覽篇〉文中，我們應用 Ameba RTL8195AM 開發板，整合 Apache WebServer（網頁伺服器），應用 mySQL 資料庫，並建立溫溼度（本文使用 DHT22 溫濕度感測模組）資料庫，轉成為一個物聯網中溫濕度感測平台。
本文「雲端平台開發篇」資料新增篇，將要使用 Php 互動式程式設計，透過無線網路（Wifi Access Point），將資料溫溼度感測資料，透過網頁資料傳送，將資料送入 mySQL 資料庫。如此我們就可以透過「雲端平台開發篇」瀏覽資料篇（曹永忠 et al., 2017d）中，瀏覽我們裝置輸入的資料。
網站 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 切換到程式設計畫面

首先，我們先將資料庫連線程式攥寫好，如下表之資料庫連線程式，我們就可以網站的 PHP 程式連線到 mySQL 資料庫，進而連接 iot 的資料庫。

表 1 資料庫連線程式

資料庫連線程式(connect.php)

<?php        function Connection(){                $server="localhost";                $user="root";                $pass="";                $db="iot";                            $connection = mysql_connect($server, $user, $pass);                if (!$connection) {                    die('MySQL ERROR: ' . mysql_error());                }                               mysql_select_db($db) or die( 'MySQL ERROR: '. mysql_error() );                return $connection;        }?>

變數介紹：

• $server=”localhost”;  ==>mySQL資料庫ip位址
• $user=”root”;   ==>mySQL資料庫管理者名稱
• $pass=””;     ==>mySQL資料庫管理者連線密碼
• $db=”iot”;    ==>連到mySQL資料庫之後要切換的資料庫名稱

將 connect 程式填入如下圖所示，我們將 connect 程式填入。
[img=1295,731]https://vmaker.tw/wp-content/uploads/2017/07/image006-1.jpg[/img]圖 6 將 connect 程式填入

將 connect 連線程式存檔如下圖所示，我們將 connect 連線程式存檔。
圖 7 將 connect 連線程式存檔

修正 connect 連線程式如下表所示，我們將 connect.php 連線程式，進行程式修正，讓後面的的程式可以使用正常。

表 2 connect 連線程式

connect連線程式(connect.php)

<?php        function Connection(){                $server="localhost";                $user="root";                $pass="";                $db="iot";                            $connection = mysql_connect($server, $user, $pass);                if (!$connection) {                    die('MySQL ERROR: ' . mysql_error());                }                               mysql_select_db($db) or die( 'MySQL ERROR: '. mysql_error() );                return $connection;        }?>

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

圖 8 開啟新檔案

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

編輯新檔案如下圖所示，我們開始編輯新檔案。
圖 10 空白的 php 網頁（設計端）

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

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

瀏覽資料程式檔先行存檔如下圖所示，我們先行將瀏覽資料程式檔先行存檔。
圖 13 資料新增程式檔先行存檔

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

mysql 連線設定畫面如下圖所示，我們先行開啟新檔案。
圖 15 mysql 連線設定畫面

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

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

使用建立 URL 變數功能如下圖所示，我們先行打開連線資料表資料區。
圖 18 使用建立URL變數功能

建立第一欄位之 URL 變數如下圖所示，我們先行建立第一欄位之 URL 變數。
圖 19建立第一欄位之 URL 變數

建立第二欄位之 URL 變數如下圖所示，我們先行建立第二欄位之 URL 變數。
圖 20 建立第二欄位之 URL 變數

建立第三欄位之 URL 變數如下圖所示，我們先行建立第三欄位之 URL 變數。
圖 21 建立第三欄位之 URL 變數

完成建立三欄位之 URL 變數如下圖所示，我們完成建立三欄位之 URL 變數。
圖 22 完成建立三欄位之 URL 變數

切換 dataadd 到程式設計畫面如下圖所示，我們切換 dataadd 到程式設計畫面。
圖 23 切換 dataadd 到程式設計畫面

首先，我們先將 dhtdata 資料表新增程式攥寫好，如下表之 dhtdata 資料表新增程式，填入上表所示之 dataadd 到程式設計畫面之中，完成程式攥寫。
表 3 dhtdata 資料表新增程式

資料庫連線程式(dataadd.php)

<?php require_once('../Connections/connect.php');         $link=Connection();        //產生mySQL連線物件        $temp1=$_GET["field1"];               //取得POST參數 : field1        $temp2=$_GET["field2"];               //取得POST參數 : field2        $temp3=$_GET["field3"];               //取得POST參數 : field3               $query = "INSERT INTO dhtdata (yyyymmdd,celsius,fahrenheit,humidity)        VALUES (".getYMD().",".$temp1.",".$temp2.",".$temp3.")";        //組成新增到dhtdata資料表的SQL語法      echo $query ;        mysql_query($query,$link);                    //執行SQL語法        mysql_close($link);         //關閉Query         function getYMD(){        $today = getdate();        date("Y/m/d H:i");  //日期格式化        $year=$today["year"]; //年        $month=$today["mon"]; //月        $day=$today["mday"];  //日        if(strlen($month)=='1')$month='0'.$month;        if(strlen($day)=='1')$day='0'.$day;        $today=$year.$month.$day;        //echo "今天日期 : ".$today;        return $today;}?>

使用瀏覽器進行 dataadd 程式測試如下圖所示，我們使用開發端與測試端同一機之本機測試，請打開瀏覽器（本文為 Chrome 瀏覽器），在網址列輸入http://localhost/iot/dht22/dataadd.php?field1=24&field2=43&field3=60」後，按下「Enter」鍵完成輸入。
圖 24 瀏覽器進行 dataadd 程式測試畫面

使用瀏覽器進行資料瀏覽如下圖所示，我們使用瀏覽器進行資料瀏覽，本方法是使用開發端與測試端同一機之本機測試，請打開瀏覽器（本文為 Chrome 瀏覽器），在網址列輸入http://localhost/iot/dht22/datalist.php」後，按下「Enter」鍵完成輸入。
圖 25 使用瀏覽器進行資料瀏覽畫面

完成伺服器程式設計如上圖所示，我們使用瀏覽器進行資料瀏覽，我可以知道，透過 php Get 的方法，使用 Get 方法，在網址列，透過參數傳遞（使用參數名＝內容）的方法，我們已經可以將資料正常送入網頁的資料庫了。
後續本篇是「物聯網開發」系列中「雲端平台開發篇」的第三篇：資料新增篇，主要告訴讀者，我們應用 Ameba RTL8195AM 開發板，整合 Apache WebServer（網頁伺服器），應用 mySQL 資料庫，並建立溫溼度（本文使用DHT22 溫濕度感測模組）資料庫，筆者使用 Php 互動式程式設計，建立新增溫溼度感測資料的網頁程式，再透過網頁資料傳送（form sumbit）方式，將資料送入 mySQL 資料庫。
如果筆者參閱本文「雲端平台開發篇」資料新增篇之後，回去閱讀「雲端平台開發篇」瀏覽資料篇（曹永忠 et al., 2017d）的程式與功能，我們發現整個雲端平台開發已完成八成。
後續筆者還會繼續發表『物聯網開發』系列的文章，在未來我們可以創造出更優質，更具未來性的物聯網（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
曹永忠, 吳佳駿, 許智誠, & 蔡英德. (2017d). 【物聯網開發系列】雲端平台開發篇：瀏覽資料篇. 物聯網開發系列.  Retrieved from https://vmaker.tw/archives/18909