2021-06-11に投稿

Svelte学習帳 PHP REST-API編

読了目安:10分

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>

参考:Fetch の使用 - Web API | MDN

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/フォルダに移動してアプリケーションを起動します。

パラメータの内容が書き換わっていれば成功です。

STEP01確認画像

確認

サンプルプロジェクトはこういう感じになります。

確認: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ボタンをクリックして、メッセージが返ってくれば成功です。

STEP02確認画像

確認

サンプルプロジェクトはこういう感じになります。

確認: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);

参考:
- PHP: PDO::__construct - Manual
- PHP: PDO::exec - Manual

パラメータをデータベースに保存します

パラメータ送信に応答する機能として、リクエストデータを受け取ってデータベースに保存する処理を追記します。

// 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ボタンをクリックして、保存しましたメッセージが返ってくれば成功です。

STEP03確認画像

確認

サンプルプロジェクトはこういう感じになります。

確認: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したパラメータが表示されれば成功です。

STEP04確認画像

確認

サンプルプロジェクトはこういう感じになります。

確認:samplecode-svelte-rest-app at Step04

STEP05 練習する

これは、ローカル環境で練習するためのサンプルプロジェクトです。
実際のプロダクトでは、ここで使用したライブラリや手法を自由に扱えるようになるまで練習して得た経験を活用してみてください。

Originally published at zenn.dev
ツイッターでシェア
みんなに共有、忘れないようにメモ

fkuMnk is fkuMnk

設定: fkuMnkはアルファベットが6文字。 ひとりでソフトウェアを書いて働いているよ。そして月曜日にはジャンプを読んでジャンプを読んだ!と言う。 openSUSEを使っているしCoderDojo紫雲とかもしている。 なにも知らないしわかりません。 https://t.co/tVF8PFlb3n formerly 覆面くん

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント