機能概要

WebAPI①のコードを使用します。データベース接続後に、SQLを利用し、特定のデータを抽出・表示させるプログラムです。

プログラミングコード

「webapi-news_v3.html」フロントエンド：API読み出しページ

  • WebAPI①で作成した「webapi-news_v1.php」を「webapi-news_v3.php」に修正します。
    １０行目：phpのAPIのリンクを変数「url」に登録します。その際に、引数「txt_no」に変数「rec_txt_no」を付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
    function mj_api(){
        var rec_txt_no = document.getElementById("txt_no").value;
        url = "webapi-news_v3.php?txt_no="+rec_txt_no;
        $.getJSON(url, (data) => {
            disp_text.innerHTML = "";
            disp_text.innerHTML += "status：" + data["status"] + "<br>";
            disp_text.innerHTML += "news_id：" + data["news_id"] + "<br>";
            disp_text.innerHTML += "title：" + data["title"] + "<br>";
            disp_text.innerHTML += "article：" + data["article"] + "<br>";
        });
    }
</script>
</head>
<body>
    <div>ニュース情報を取得<br></div>
    <input type="text" id="txt_no"><input type="button" name="btn_send" value="送信" onclick="mj_api()">
    <div id="disp_text"></div>
</body>
</html>

「webapi-news_v3.php」バックエンド：APIファイル

  • ４行目：「config.php」を読み込み、その中の変数情報を使用することができるようになります。
  • ７～９行目：GETで値を受け取った場合に配列「$news_id」に値を入力します。
  • １１行目：「try～catch」は、プログラムを実行し、エラー（例外）などが発生した際に他のプログラムを実行することができます。
    • 「try」の中がメイン処理となります。
      今回のメイン処理は、データベースに接続し、値を受け取るプログラムとなります。
    • 「catch」は、「try」のメイン処理で、エラーが発生したときに動作するプログラムです。
      • ２６行目：エラー内容を取得し、画面上に表示します。
      • ２７行目：スクリプト処理を終了します。
  • ３１～３２行目：データベースからの値を格納する変数を宣言および初期化
  • ３５～３６行目：データベースからの値を取得する。
    • 関数「htmlspecialchars」を使用し、HTMLで表示できる文字に変換します。
    • 関数「nl2br」を使用し、テキスト内の改行コードの前に＜brタグ＞を挿入します。
  • ３８行目：配列「$arr_data」を配列として宣言します。
  • ３９行目：変数「$news_id」の値が入ってる、かつ数字なのかを分岐処理しています。
  • ４０～４５行目：配列「$arr_data」に値を入力します。「news_id」や「title」のように名前がキーとなるため重要です。（連想配列）
  • ５４行目：「header」関数を使用して、jsonファイルということが分かるようにヘッダーを登録します。
  • ５５行目：「json_encode()」を用いて、配列をJSONファイルに変換します。

<?php

//データベース接続情報を格納
include("config.php");

//GETで値を受け取る
if($_SERVER['REQUEST_METHOD'] === 'GET'){
    $news_id = $_GET['txt_no'];
}

try{
    $dbh = new PDO($dsn, $user, $password);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = "select"
        ." nt.news_id"
        .",nt.title"
        .",nt.article"
        .",nt.insert_at"
        ." from news_tbl nt"
        ." where nt.news_id = :news_id";
    $stmt = $dbh->prepare($sql);
    $stmt->bindValue(':news_id', $news_id, PDO::PARAM_INT);
    $stmt->execute();
    $result = $stmt->fetch();
}catch (PDOException $e){
    echo($e->getMessage());
    die();
}

/* データベースからの値を受け取る変数準備 */
$rec_title = "";
$rec_article = "";

/* データベースからの値の取得 */
$rec_title = htmlspecialchars($result['title'],ENT_QUOTES,"UTF-8");
$rec_article = nl2br(htmlspecialchars($result['article'],ENT_QUOTES,"UTF-8"));

$arr_data = array();
if(isset($news_id) && ctype_digit($news_id)) {
    $arr_data = [
        "status" => "OK"
        ,"news_id" => intval($news_id)
        ,"title" => $rec_title
        ,"article" => $rec_article
    ];
} else {
    $arr_data = [
        "status" => "NG"
        ,"news_id" => intval($news_id)
        ,"title" => ""
        ,"article" => ""
    ];
}
header('content-type: application/json; charset=utf-8');
echo json_encode($arr_data);
?>

演習問題

  1. 上記のコードを使用して、ファイル作成し、動作するようにしてみよう。
  2. 上記のプログラムを変更し、異なるデータベースやテーブルを使用し、WebAPIプログラムに慣れてみよう。
次のページへ