この記事は約7分で読めます。

プログラミング

【挫折させないWebアプリ講座⑨】MySQLからデータを取り出そう

この記事は約 8 分で読めます。

精神論なしのプログラミング講師、打田です。

前回の講座ではMySQLにデータを登録しましたね。Webアプリの重要ポイントが半分できました。

今回はもう半分のデータ取り出しプログラムを作っていきましょう！

これができればWebアプリ開発の基本ができたことになるので、楽しみですね！

もしデータベース関連の用語がわからなくなったらデータベース用語辞典をご覧ください

動画解説はコチラ

データ取り出しプログラム開発の流れ

  1. データベース内容表示ペーシの作成(view.php)
  2. データ取り出しプログラム(php)の作成
  3. データ表示部(HTML)の作成
  4. トップページからのリンクを追加

こんな流れでデータベースの中身を取り出していきますね！

STEP1 データベース内容表示ファイルの作成

Webアプリ講座データベース操作編 002

おきまりのCloud9の画面ですね。左側の何もない部分で右クリック→NewFile→view.phpというファイルを作成しましょう。

このWebアプリ開発講座ではデータベース = MySQL = DBはそれぞれ同じ意味として読んでください

STEP2 データ取り出しPHP

DB接続文

Webアプリ講座データベース操作編 003

データベースへの接続文は前回のと全く同じため、regist.phpからコピペして使いましょう！

取り出し用SQL文

Webアプリ講座データベース操作編 001
今回はシンプルなSQL文にしたかったので、一番最初に登録された名前を取り出す命令を書きます。

データベースのidとは登録された順に自動で数字が割り振られるカラムです。そのため最初に登録された名前はid=1になります。

まずはDB接続文の次に以下の文を追記してください。

$id = 1;

$stmt = $pdo -> prepare("SELECT * FROM name WHERE id=:id");

$stmt -> bindValue(':id', $id, PDO::PARAM_INT);

$stmt -> execute();

$data = $stmt -> fetch();

$pdo = NULL;

こちらのSQL文で$dataにデータベースの内容を格納できます。

  • 1行目はid=1に指定してますね。
  • 2行目は今回のキモなので次項で詳しく説明しますね！
  • 3行目はセキュリティのために行なっている事なので、次回のセキュリティ編で詳しく解説します。
  • 4行目は2行目の文を実行しています。
  • 5行目はDBの内容を$dataという配列に格納しています。*配列は後ほど解説
  • 6行目はデータベースの接続を解除。

取り出し文の解説

取り出し文の2行目を詳しく説明していきますね。

Webアプリ講座データベース操作編 002

prepareまでは次回講座で詳しく説明するので、今回はコピペでやり過ごしましょう！

SELECT * FROM テーブル名　でテーブル名の中身全てからという意味になります。

WHEREはどこ？という意味でtableの中にあるidというカラムの中から変数idの中身(1)を探しにいくというSQL文となります。

WHERE句をさらに解説

WHERE句がまだちょっとわかりにくいので、実例でさらに解説してみます。

Webアプリ講座データベース操作編 003

画像のようなnameテーブルがあります。最初に登録された名前を取り出すにはid=1を指定すればいいですね。ここまで大丈夫でしょうか？

では色が緑色のものを取り出すにはどうすればいいでしょうか？

緑を取り出すには WHEREの後に color = greenという風に書くとid=3と4が取り出されるんですね。

配列について

配列は複数の値を格納できる変数のことです。どういうことかと言うと・・・

$dataに名前やidや色など様々なデータを入れることができると言うことです。具体的にはこう書きます。

$data['id'] = 1;

$data['name'] = 'Uchida';

$data['color'] = 'skin';

というように変数部分は$dataで同じですが、後ろに[‘任意の文字’]を付けます。

変数の後ろにつける[‘任意の文字’]を添え字といいます。

STEP3 表示用HTML

さて、ここまで上手くphpを書けましたか？ここからはphpでDBから取り出したデータを表示するHTML部分を作っていきましょうね。

Webアプリ講座データベース操作編 008

まずはindex.phpから~までをコピーして、view.phpの最下部にペーストしてください。

Webアプリ講座データベース操作編 009

view.phpにペーストしたら閉じタグがないとエラーができるので、,を追記しましょう！

そして、

<h1>名前表示</h1>

<p>通し番号：</p>

<p>お名前：</p>

 

をbodyタグの内側に追記しましょう。ここまででDBの中身を見せる部分ができましたね。

最後にphpで取り出したデータをHTML上に表示するコードを書きましょう。

通し番号(id)とお名前(name)を表示したいので、先ほど説明した配列を使います。最初に$dataに情報を格納しているので、

<?php echo $data['id'];?>

<?php echo $data['uname'];?>

で出力することができますね。echoとは、その後ろに書かれたものをブラウザに表示するコマンドです。よく使うのでこれは覚えておきましょうね。

Webアプリ講座データベース操作編 010

最終的なview.php

<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
session_start(); 
try{ $pdo = new PDO('mysql:host=localhost;dbname=test;charset=utf8','ユーザー名','',array(PDO::ATTR_ERRMODE => 
PDO::ERRMODE_EXCEPTION));

} catch (PDOException $e) {

 exit('データベース接続失敗。'.$e -> getMessage());

}

$id = 1;

$stmt = $pdo -> prepare("SELECT * FROM name WHERE id=:id");

$stmt -> bindValue(':id', $id, PDO::PARAM_INT);

$stmt -> execute();

$data = $stmt -> fetch();

?>

<html lang="ja">

    <head>

        <meta charset="UTF-8">

        <title>PHP_TEST</title>

    </head>

    <body>

        
<h1>名前表示</h1>


        

<p>通し番号：<?php echo $data['id'];?></p>


        

<p>お名前：<?php echo $data['uname'];?></p>


    </body>

</html>
PHPを書く場所について

phpはhtmlのどこに書いてもいいんです。だからidと名前を出力したいpタグの中に書いてますね。

最上部に書いたphpはHTML出力する前に処理を行いたかったので、あの場所に書いているんですね。

STEP4 トップページにリンクを追加

いよいよ最後のSTEPです。今の状態だとトップページからお名前表示ページに行くことができません。

そのため、トップページからリンクを作ってあげましょう。

Webアプリ講座データベース操作編 011

リンクはHTMLのaタグを使います。基本的な書き方は

<a href="リンク先のファイル名">リンクの文字列</a>

と言うふうに書きます。これをview.phpに適用すると・・・

<a href="view.php">名前を表示</a>

というようになるので、コピペして使ってみてください。

そして、Cloud9からトップページにアクセスし、先ほど作ったリンクをクリックするとこうなりましたか？

Webアプリ講座データベース操作編 012

今回の講座もお疲れ様でした。基本的なPHPとHTMLの書き方はこれにて終了しました。しかし、Webアプリケーションは不特定多数が使うシステムになる事でしょう。

そのため、セキュリティに気を配った作りにしなければなりませんね。

次回予告

そんなことで次回はセキュリティ編をお送りします。

せっかく開発したアプリでも攻撃されてしまったら元も子もないので、セキュリティリスクの紹介と最低限守るべき項目を伝授していきますよ。お楽しみに！

ITスキルで人生の不安を軽くするメールマガジンやっています！

登録はこちらから

この記事をシェアする

RECOMMENDこちらの記事も人気です。