從 MySQL 讀取資料至 AppInventor
App Inventor

從 MySQL 讀取資料至 AppInventor

資料庫!可以用來存放會員的基本資料、購物網站的商品庫存、網路上的留言板… 等等,不管學習哪種程式語言,幾本上都會使用到資料庫,而 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

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


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


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


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

效果不錯吧!

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





專案 aia 檔案下載

connMySQL.php 程式檔案下載

MysqlRead.php 程式檔案下載




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

可以多點幾次喔~~

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

13 則留言

發表迴響