Svelte学習帳 PHP REST-API編
Svelte学習帳 PHP REST-API編
概要
- SvelteKitでWebアプリケーションを作ります
- PHPでREST-APIを作ります
- fetchで通信します
- データベースに保存したり読み込んだりします
はじめに
これは、ローカル環境でREST-APIの練習をするサンプルコードです。
SveltKitで作成したWebアプリケーションに表示されているパラメータを、REST-APIでデータベースに保存します。
以前に投稿した記事「続・コードを書いてステータス画面を表示する」の続編になっています。
動作要件
- SvelteKitが動作すること
- PHP ビルトインサーバーが動作すること
- PHP Composerが動作すること
STEP00 準備します
ここでは2つのプロジェクトフォルダを作成します。
SvelteKitのプロジェクトを作成する
SvelteKitのプロジェクトを作成します。
ここではプロジェクト名を
svelte-rest-app
としています。
参考：SvelteKit • The fastest way to build Svelte apps
PHPプロジェクトを作成する
svelte-rest-appと同じ階層に
php-rest-app
というフォルダを作成します。
今回はPopcornというマイクロフレームワークを使用するので、Composerでインストールします。
参考：popphp/popcorn: Popcorn PHP REST Micro-Framework
確認
サンプルプロジェクトはこういう感じになります。
確認：samplecode-svelte-rest-app at Step00
STEP01 パラメータを取得する
Webアプリを作成して、アプリ内で使用するパラメータを取得する機能を追加します。
Webアプリを作ります
/svelte-rest-app/src/routes/index.svelte を開きます。
内容を消去して、Svelte REPLのサンプルコードに置き換えます。
サンプルコード：IamStronger • REPL • Svelte
パラメータ取得機能を作ります
scriptの内容に、fetchでパラメータを取得する機能を追記します。
<script>
// STEP01 onMountを呼び出します
import { beforeUpdate, onMount } from 'svelte';
let name = 'name';
let lv = 10;
let max_hp = 1000;
let hp = 80;
let max_mp = 10;
let mp = 8;
let agi = 5;
let tec = 2;
let str = 9;
let luc = 1;
let text = `I'm stronger.`;
beforeUpdate(()=>{
max_hp = lv * str;
max_mp = Math.round((lv * agi) / 2);
});
// STEP01 fetchでパラメータを取得する機能
const getParams = async () => {
const serverURL = 'http://localhost:8080/params';
const response = await fetch(
serverURL,
{
method: 'GET',
mode: 'cors',
credentials: 'omit'
}
);
return await response.json();
}
// STEP01 アプリマウント時に、取得したパラメータを変数に適用する処理
onMount(async ()=>{
let params = await getParams();
name = params.name;
lv = params.lv;
hp = params.hp;
mp = params.mp;
agi = params.agi;
tec = params.tec;
str = params.str;
luc = params.luc;
text = params.text;
});
</script>
Webアプリケーションに応答する機能を作ります
/php-rest-appフォルダに、publicフォルダを作成して、そこにindex.phpを作成します。
/php-rest-app/public/index.php
パラメータを返す機能をindex.php内に作ります。
<?php
require_once '../vendor/autoload.php';
use Popcorn\Pop;
// STEP01 マイクロフレームワークの準備
$app = new Pop();
// STEP01 パラメータ取得に応答する機能を登録します
$app->get(
'/params/',
function () {
// STEP01 ローカル環境間でのアクセスを許可します
header('Access-Control-Allow-Origin: http://localhost:3000');
header('Access-Control-Allow-Headers: Origin, Content-Type');
$params = [
'name' => 'name2',
'lv' => '12',
'hp' => '90',
'mp' => '10',
'agi' => '6',
'tec' => '3',
'str' => '10',
'luc' => '2',
'text' => "I'm stronger2."
];
echo json_encode($params);
}
);
$app->run();
ローカル環境で実行する
/php-rest-app/public/フォルダに移動して、サーバを起動します。
php -S localhost:8080
/svelte-rest-app/フォルダに移動してアプリケーションを起動します。
パラメータの内容が書き換わっていれば成功です。
確認
サンプルプロジェクトはこういう感じになります。
確認：samplecode-svelte-rest-app at Step01
STEP02 パラメータを送信する
パラメータ送信機能を作ります
/svelte-rest-app/src/routes/index.svelte を開きます。
scriptに送信機能を追記します。
// STEP02 送信結果を受け取る変数
let message = false;
// STEP02 fetchでパラメータを送信する機能
const saveParams = async () => {
const serverURL = 'http://localhost:8080/saveparams';
const response = await fetch(
serverURL,
{
method: 'POST',
mode: 'cors',
credentials: 'omit',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: name,
lv: lv,
hp: hp,
mp: mp,
agi: agi,
tec: tec,
str: str,
luc: luc,
text: text
})
}
);
message = await response.json();
}
送信ボタンを作ります
textareaの下にパラメータを送信するボタンを追記します
<br>
<button on:click="{saveParams}">
SAVE
</button>
{#if message}
<br>
<strong>{message.message}</strong>
{/if}
Webアプリケーションに応答する機能を作ります
/php-rest-app/public/index.phpを開きます
パラメータ送信に応答する機能を追記します。
// STEP02 CORS対応処理
$app->options(
'/saveparams/',
function () {
header('Access-Control-Allow-Origin: http://localhost:3000');
header('Access-Control-Allow-Headers: Origin, Content-Type');
}
);
// STEP02 パラメータ送信に応答する機能を登録します。
$app->post(
'/saveparams/',
function () {
header('Access-Control-Allow-Origin: http://localhost:3000');
header('Access-Control-Allow-Headers: Origin, Content-Type');
// STEP02 受信確認メッセージを返します
echo json_encode(['message' => '受信しました']);
}
);
ローカル環境で実行する
/php-rest-app/public/フォルダに移動して、サーバを起動します。
php -S localhost:8080
/svelte-rest-app/フォルダに移動してアプリケーションを起動します。
SAVEボタンをクリックして、メッセージが返ってくれば成功です。
確認
サンプルプロジェクトはこういう感じになります。
確認：samplecode-svelte-rest-app at Step02
STEP03 パラメータを保存する
pop-httpをインストールします
/php-rest-appフォルダに移動します
今回はpop-httpというライブラリを使って、送信されたパラメータを受け取るのでComposerでインストールします。
参考：popphp/pop-http: Pop Http Component
データベースを準備します
/php-rest-app/public/index.phpを開きます。
フレームワークの準備処理の手前に、データベースを準備する処理を追記します。
// STEP03 データベースを準備します
$pdo = new PDO('sqlite:example.db');
$sql = <<< "SQL"
CREATE TABLE IF NOT EXISTS config (
param_id INTEGER PRIMARY KEY,
params TEXT
);
SQL;
$pdo->exec($sql);
参考：
パラメータをデータベースに保存します
パラメータ送信に応答する機能として、リクエストデータを受け取ってデータベースに保存する処理を追記します。
// STEP03 pop-httpでリクエストデータを受け取ります
$request = new \Pop\Http\Server\Request();
$params = $request->getParsedData();
$encoded_params = json_encode($params);
// STEP03 リクエストデータを保存します
$sql = <<< "SQL"
INSERT OR REPLACE INTO
config(param_id, params)
VALUES(1, :params);
SQL;
$pdo = new PDO('sqlite:example.db');
$sth = $pdo->prepare($sql);
$sth->bindParam(':params', $encoded_params);
$bool = $sth->execute();
$message = $bool ? '保存しました' : '保存できませんでした';
// STEP02 受信確認メッセージを返します
// STEP03 実行結果をメッセージとして返します
echo json_encode(['message' => $message]);
参考：
- PHP: PDO::prepare - Manual
- PHP: PDOStatement::bindParam - Manual
- PHP: PDOStatement::execute - Manual
ローカル環境で実行する
/php-rest-app/public/フォルダに移動して、サーバを起動します。
php -S localhost:8080
/svelte-rest-app/フォルダに移動してアプリケーションを起動します。
SAVEボタンをクリックして、保存しましたメッセージが返ってくれば成功です。
確認
サンプルプロジェクトはこういう感じになります。
確認：samplecode-svelte-rest-app at Step03
STEP04 保存したパラメータを取得する
取得するパラメータをデータベースの値に切り替えます
/php-rest-app/public/index.phpを開きます。
パラメータ取得に応答する機能として、データベースから値を取得する機能を追記します。
// STEP04 データベースからパラメータを取得します
$sql = <<< 'SQL'
SELECT param_id, params
FROM config
WHERE (param_id = 1);
SQL;
$pdo = new PDO('sqlite:example.db');
$sth = $pdo->prepare($sql);
$sth->execute();
$db_data = $sth->fetchColumn(1);
// STEP04 取得したパラメータを返します
// STEP04 取得した結果がnullのときは、デフォルトデータを返します
$params = json_decode($db_data) ?? $params;
参考：PHP: PDOStatement::fetchColumn - Manual
ローカル環境で実行する
/php-rest-app/public/フォルダに移動して、サーバを起動します。
php -S localhost:8080
/svelte-rest-app/フォルダに移動してアプリケーションを起動します。
パラメータを変更してSAVEした後、ブラウザでアプリケーションを再読込します。SAVEしたパラメータが表示されれば成功です。
確認
サンプルプロジェクトはこういう感じになります。
確認：samplecode-svelte-rest-app at Step04
STEP05 練習する
これは、ローカル環境で練習するためのサンプルプロジェクトです。
実際のプロダクトでは、ここで使用したライブラリや手法を自由に扱えるようになるまで練習して得た経験を活用してみてください。
Discussion