Azure WebApp + PHP + MySQL さいしょの一歩

FNCT創造工学演習、予備実験向けにハンズオンを作成しました。

# WebApp作成
![スクリーンショット 2018-04-24 10.24.03.png](https://qiita-image-store.s3.amazonaws.com/0/69744/fbaeedc6-9832-1372-b13b-bc8d413e4789.png)
[Microsoft Azureポータル](https://portal.azure.com/)にログインして、**＋リソースの作成**から検索窓に**MySQL**をタイプし、**Web App + MySQL**を選択、**作成**ボタンをクリックする。

![スクリーンショット 2018-04-24 10.26.38.png](https://qiita-image-store.s3.amazonaws.com/0/69744/f1efb584-6286-717d-b022-3ad7065dcf5f.png)
アプリ名・リソースグループを適切に入力し、データベース プロバイダーに**MySQL in App**を選択しておく。これで、Web Appインスタンス内にMySQLサーバも構築される。
App Serviceプランで適切なプランを選択しておくことを忘れずに。

### App Service Editorを開く

<img width="295" alt="スクリーンショット 2018-04-24 0.22.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/69744/fbabf848-ec71-e1dc-a4fa-3551cb897172.png">
WebAppメニューを下にスクロールして、**App Service Editor**→**移動**をクリックし、App Service Editor(ブラウザ内開発環境)を開いておく。

# ソース記述

```index.php
<html>
<body>
    hello
</body>
</html>
```

確認のために、上記ファイルを作成してみる。
PHPプログラムは記述していないが、ブラウザ上には**hello**と表示されるはず。

### MySQLに接続

```index.php
<?php
	$azure_mysql_connstr = $_SERVER["MYSQLCONNSTR_localdb"];

	$azure_mysql_connstr_match = preg_match(
	  "/".
	    "Database=(?<database>.+);".
	    "Data Source=(?<datasource>.+);".
	    "User Id=(?<userid>.+);".
	    "Password=(?<password>.+)".
	  "/u",
	  $azure_mysql_connstr,
	  $_);	 	  
 	  
	$link = mysql_connect($_["datasource"], $_["userid"], $_["password"], $_["database"]);
	if ($link) {
		print("connected!");
		
		mysql_close($link);
	}
	else {
	    print(mysql_error());
	}
?>
```
index.phpを書き換えて、上記コードを実行してみる。
問題なくMySQLに接続できれば、**connected!**と表示される。

# テーブルの準備
![スクリーンショット 2018-04-24 10.48.48.png](https://qiita-image-store.s3.amazonaws.com/0/69744/4c5dc128-7df1-d375-7961-d17f52ddb546.png)
[Azureポータル](https://portal.azure.com/)のWebApp設定メニューから、**MySQL in App**を選択し、**管理**をクリックする。

![スクリーンショット 2018-04-24 10.59.03.png](https://qiita-image-store.s3.amazonaws.com/0/69744/5528cdcb-dabc-05ce-c7b2-afb5704012f4.png)
MySQLを使ったことのある人にはおなじみ、phpMyAdminが表示される。

![スクリーンショット 2018-04-24 11.00.59.png](https://qiita-image-store.s3.amazonaws.com/0/69744/1798b59b-57c6-52bf-f2a5-971262a3e14b.png)
標準でデータベース**localdb**を使うようになっているので、そこで列数1の**Access**というテーブルを作成する。
画面のように入力して、**Go**ボタンをクリック。

![スクリーンショット 2018-04-24 11.03.08.png](https://qiita-image-store.s3.amazonaws.com/0/69744/63f2b0d0-1499-0445-af41-52271347abc4.png)
Nameに**AccessTime**、Typeに**DATETIME**を入力して、**Save**ボタンをクリック。

これでテーブル**Access**が作成された。
保存されるデータは、アクセス時刻という想定。

# アクセス時刻を保存する
ふたたびApp Service Editorにもどって、アクセス時刻を保存するコードを書いてみる。

```index.php
if ($link) {
	//アクセス時刻を保存する
	$db_selected = mysql_select_db($_["database"], $link);

	$sql = "INSERT INTO Access (AccessTime) VALUES ('2018-04-17 11:59')";
	$result_flag = mysql_query($sql);
	
	if ($result_flag) {
		echo "成功しました";
	} else {
	    die('INSERTクエリーが失敗しました。'.mysql_error());
	}			
	
	mysql_close($link);
}
```

MySQL接続が成功した`if ($link)`の中身を、上記のように書き換える。
上記コードでは、アクセス時刻といいながら固定値を保存しているので、現在時刻を保存できるように書き換えていただきたい。

再び**index.php**にアクセスし**成功しました**と表示されればひとまずOK。

![スクリーンショット 2018-04-24 11.08.33.png](https://qiita-image-store.s3.amazonaws.com/0/69744/9f0bd7d9-8d9e-4b9a-6d53-2bb4dd1ea809.png)
phpMyAdminのほうを確認すれば、今insertした行が確認できる。

# テーブルの内容を取得する

```index.php
$result = mysql_query('SELECT count(*) as count from Access');	
$row = mysql_fetch_assoc($result);
print("アクセス数: ". $row["count"]);	
```

insertした後あたりに、上記コードを追加してみる。
`SELECT count(*) as count from Access`というSQLを実行し、結果を表示することで、アクセス数が分かるようになる。