從 MySQL 讀取資料至 AppInventor
App Inventor

從 MySQL 讀取資料至 AppInventor

2021 年 7 月 31 日 / 13 留言

資料庫！可以用來存放會員的基本資料、購物網站的商品庫存、網路上的留言板… 等等，不管學習哪種程式語言，幾本上都會使用到資料庫，而 MySQL 更是學習資料庫者，必會接觸到的其中一種(或是 MariaDB)，這次要來教，如何把 MySQL 資料庫裡的資料，讀取到 App Inventor 顯示！

以往看到的相關教學書籍，很多都是在自己的電腦架一個伺服器(如：XAMPP)，然後再去執行、連接，但是這樣做出來的範例，只能在自己的電腦上執行，別人是看不到的，除非你有固定IP 可以設定，所以這次我們來使用免費虛擬主機 000WebHost，將我們寫好的 PHP 檔案，放在它們的伺服器執行。

沒用過 000WebHost 的話，可以參考我的「申請免費虛擬主機 000WebHost 並安裝 OpenCart 購物車系統 – JB 程式筆記 (jbprogramnotes.com)」，先去辦一個帳號，並創建一個網站。接著再繼續教學




P.S. 新建立的 000WebHost 免費虛擬主機，又被刪掉了！所以改將檔案放到我自己的虛擬主機，目前已更新完畢。



  1. 開啟妳的 000WebHost 網站後台，將 PHP 版本改成 7.3。

2. 建立一個資料庫(等等資料庫的名稱、使用者姓名和伺服器，要填到我們的 PHP 檔案裡。)


建立好後，點紫色的 Manage 框，再點 PhpMyAdmin。(我們要來建立資料表，和新增幾筆資料。)


進到 phpMyAdmin 後，滑鼠點選左方資料庫(id15424044_appinventor 這個)，然後於右方輸入資料表名稱(member)，欄位數為 3，好了之後再點右方的執行按鈕。


名稱請依序輸入 id、name、password，類型都是 VARCHAR，長度隨便妳填，空值方框請打勾，好了之後按右下方的儲存按鈕。

這張圖片的 password 打錯了！

接著我們來新增幾筆資料

點上方的 SQL，然後再點下方的 INSERT 按鈕。(Insert Into 是要新增資料的 SQL 語法)

把 [value-1],[value-2],[value-3] 改成妳要填入的資料，如下：
“Gundam”,”鋼彈”,”1234″

填完後再按執行

INSERT INTO `member`(`id`, `name`, `password`) VALUES ("Gundam","鋼彈","1234")

好了之後按瀏覽，就可以看到剛剛新增的資料，這裡請再多新增幾筆。


資料庫的操作就到這邊，接下來來撰寫 PHP 程式碼，請開啟記事本。


3. 請輸入以下程式碼，記得將 $db_username、 $db_password 和 $db_uname 改成自己的；這裡我用 PDO 的連線方式，檔名請存成「connMySQL.php」。

<?php
	$db_host = "localhost";
	$db_username = "id15424044_james";
	$db_password = "abc123456789D!";
	$db_name = "id15424044_appinventor";
	
	try {
		$pdo = new PDO("mysql:host={$db_host};dbname={$db_name};charset=utf8", $db_username, $db_password);
	} catch(PDOException $e) {
		print "資料庫連結失敗";
		die();
	}
?>

這是連線到資料庫的程式碼，好了之後先將檔案上傳到 000WebHost，上傳完後輸入網址看看，如果網頁一片空白，就是連線成功。

可以參考我的 ->
https://jbprogramnotes.com/AppInventor/PHPFiles/connMySQL.php


接著撰寫讀取的程式碼，請開新一個檔案，並輸入以下程式碼：

<?php
	include("connMySQL.php");
	
	$sql_query = "SELECT * FROM member";
	$result = $pdo->query($sql_query);
	
	foreach($result as $row) {
		echo "<p>";
		echo $row["id"], "：";
		echo $row["name"], "：";
		echo $row["password"];
		echo "</p>";
	}
?>

檔名請存成「MysqlRead.php」

程式一開始先引入剛剛寫的程式(include(“connMySQL.php”);)，如果有連線成功再繼續執行下去。

變數 sql_query 存放 SQL 語法(SELECT * FROM member 是讀取 member 資料表的所有資料)。

$pdo 是剛剛在 connMySQL.php 裡指定的，用 -> 符號呼叫 query 方法，帶入的參數是變數 sql_query，最後將結果再給變數 result。

foreach 迴圈裡，將 result 資料逐一給變數 row，因為讀取是一列一列的，所以我用 row 名稱，然後要取出資料就用 row[“欄位名稱”]。

裡面 echo 可以縮成一行啦！但為了方便閱讀，所以用成好幾行。
用 p 標籤包住是為了等等在 Inventor 分割資料用的


寫好後一樣上傳至 000WebHost 主機，要跟 connMySQL.php 放在同一個資料夾，上傳完後可以執行看看，看能不能讀取到資料。

以我的為例：
https://jbprogramnotes.com/AppInventor/PHPFiles/MysqlRead.php

可以看到剛剛新增的資料了！

接下來要開始製作 App，請開啟 App Inventor 並新增一個專案。


4. 請拖拉按鈕、標籤及網路元件


切換到程式設計，程式方塊如下：


網路元件的網址是檔案 MysqlRead.php 的所在位置，以我的為例就是：
https://jbprogramnotes.com/AppInventor/PHPFiles/MysqlRead.php

當網路元件取得文字後，先判斷回應程式碼是否為 200，200 就是成功，來看一下結果。


如果妳在標籤的元件屬性，有設定 HTML 格式的話，p 標籤就會看不見。


接著我們來切割資料，並存到 List。
請增加一個變數 List，並建立空清單。
將讀取的程式方塊修改如下：


先將回應內容的 <p> 全部取代掉，剩下的每筆資料間只剩 </p> 隔著，然後再用分解方塊，就可以將它變成清單了！

效果不錯吧！

在清單裡的資料，還可以再分割，符號就用全形的冒號，趕快調整成自己獨特的呈現方式吧！
這次的教學就到這邊，有哪裡看不太懂的，歡迎留言詢問！




專案 aia 檔案下載

connMySQL.php 程式檔案下載

MysqlRead.php 程式檔案下載



如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊

你也可能喜歡

TQC+ 創意 App 程式設計認證指南 301 指針式時鐘

TQC+ 創意 App 程式設計認證指南 301 指針式時鐘

2021 年 6 月 22 日
App Inventor 使用最新試算表元件 Spreadsheet_Part 1

App Inventor 使用最新試算表元件 Spreadsheet_Part 1

2022 年 11 月 18 日
使用 App Inventor 的 ListView 新功能，做出購物商品清單。

使用 App Inventor 的 ListView 新功能，做出購物商品清單。

2021 年 10 月 15 日

13 則留言

發表迴響