Cloud9で学ぶ！Webフォームでデータベースを操作する

公開日：2017-2-3
プロナビTOP / プログラミング初心者向けお役立ちコンテンツ

shutterstock 232599643 1 e1486055068263 - Cloud9で学ぶ！Webフォームでデータベースを操作する

前回の記事ではmysqlを使用てデータベースの使い方を学びました。この記事ではWebフォームからmysqlなどのデータベースを操作する方法を学習していきます。

※前回までの記事
Cloud9で学ぶ!Webフォームの作り方
 Cloud9で学ぶ！MySQLを使ってデータベースを動かす方法

Webとデータベースの連携というと、Webからの問い合わせ内容をデータベースに登録したり、データベースの商品一覧をWebページに表示する等の使われ方があります。いきなりショッピングサイトは難しいので、簡易的な日記投稿サイトの一部を作成してみたいと思います。
目標は、以下のようなWebフォームからデータベースにレコードを一行追加できるようになることです。

cloud9DB00 - Cloud9で学ぶ！Webフォームでデータベースを操作する

事前準備

前回に引き続き開発環境はCloud9、言語はPHP、データベースはMySQLを使います。
MySQLにデータベースを作成していない方は前回の記事や以下のコマンドを参考に作ってみてください。
mysql> create database myapp;
mysql> use myapp;

今回は一言日記のフォームを作りたいので、カラム名「name」「contents」を持つテーブルをひとつ作成します。
mysql> create table diary(name varchar(10),contents varchar(30)) default character set utf8;

後ろに「default character set utf8」を記述する理由は、デフォルトの文字コードでデータベースを作成した場合に日本語が文字化けするためです。テーブル作成時に文字コードを日本語を含む「uttf8」に指定する必要があります。

データベースに接続する

PHPを用いてMySQLに接続するにはPDOメソッドを使用します。

$db = new PDO(“mysql:host=ホスト名;dbname=データベース名”,”ユーザー名”,”パスワード”)

<?php
$db = new PDO("mysql:host=localhost;dbname=myapp","cloud00","");
?>

<?php

$db = new PDO("mysql:host=localhost;dbname=myapp","cloud00","");

接続に成功・失敗したことがわかり辛いため、エラー発生用のメッセージを書いておくことが一般的です。

<?try{
php
$db = new PDO("mysql:host=localhost;dbname=myapp","cloud00","");
}
catch (Exception $error)
{
    die("接続に失敗しました:".$error->getMessage());
}
?>

<?try{

php

$db = new PDO("mysql:host=localhost;dbname=myapp","cloud00","");

}

catch (Exception $error)

{

die("接続に失敗しました:".$error->getMessage());

}

try~catch構文は、tryの中の処理でエラーが発生したらcatchの中の例外処理に移るという意味です。
PDOの括弧内の情報について、データベース名については皆さんで作成したためすぐわかるかと思います。ホスト名などを調べる際は以下のSQLをMySQLのターミナルで実行します。パスワード欄がnull(空欄)の場合は、PDOの括弧内でも空欄(””)で接続できます。

PHPからデータベースにINSERTをしてみよう！

まずは、値を指定してINSERTしてみます。
単純なデータベース操作の場合は、以下の構文を使用します。

$db->query(”実行するSQL文”）;

〈サンプルコード　insert.php〉

<?php
try{
$db = new PDO("mysql:host=localhost;dbname=myapp","cloud00","");
}
catch (Exception $error)
{
    die("接続に失敗しました:".$error->getMessage());
}
$db->query("INSERT INTO diary (name,contents) VALUES('cloud00','Hello!')");
?>

<?php

try{

$db = new PDO("mysql:host=localhost;dbname=myapp","cloud00","");

}

catch (Exception $error)

{

die("接続に失敗しました:".$error->getMessage());

}

$db->query("INSERT INTO diary (name,contents) VALUES('cloud00','Hello!')");

実行は、insert.phpを指定することに注意してください。

cloud9DB01 - Cloud9で学ぶ！Webフォームでデータベースを操作する

慣れたら、プリペアドステートメントを用いた方が使い勝手がよくなります。
〈サンプルコード　isnert.php〉

<?php
try{
$db = new PDO("mysql:host=localhost;dbname=myapp","cloud00","");
}
catch (Exception $error)
{
    die("接続に失敗しました:".$error->getMessage());
}
    $stt=$db->prepare("INSERT INTO diary (name,contents) VALUES(?,?)");
$stt->execute(array('cloud01','Hello!'));
?>

<?php

try{

$db = new PDO("mysql:host=localhost;dbname=myapp","cloud00","");

}

catch (Exception $error)

{

die("接続に失敗しました:".$error->getMessage());

}

$stt=$db->prepare("INSERT INTO diary (name,contents) VALUES(?,?)");

$stt->execute(array('cloud01','Hello!'));

いったんSQLを準備(prepare)してから実行(excute)します。この書き方のメリットは、値を変更するだけで同じSQLを繰り返し実行できる点です。

WebフォームからデータベースにINSERTをしてみよう！

いよいよ、Webフォームの入力からSQLが実行できる仕組みを作っていきましょう。
まずは、入力フォームを作ります。
〈サンプルコード　view.php〉

<html>
<head>
<title>ひとこと日記登録</title>
</head>
<body>
    <form method="POST" action="insert.php">
<p>
お名前：<br />
        <input type ="text" name ="name" size ="15" maxlength="10"/>
</p><p>
内容：<br />
        <input type ="text" name ="contents" size ="35" maxlength="30"/></br>
</p><p>
        <input type = "submit" value = "日記を登録する"/>
</p>
    </form>
</body>
</html>

<html>

<head>

<title>ひとこと日記登録</title>

</head>

<body>

<p>

お名前：<br />

</p><p>

内容：<br />

</p><p>

</p>

</form>

</body>

</html>

次に、INSERT用の構文を少し変更します。これまでは値を直打ちしてきましたが、フォームから送信されてきた値を受け取るよう、$POSTを用いて書き直します。

<?php
try{
$db = new PDO("mysql:host=localhost;dbname=myapp;charset=utf8","cloud00","");
}
catch (Exception $error)
{
    die("接続に失敗しました:".$error->getMessage());
}
$stt=$db->prepare("INSERT INTO diary values(:name,:contents)");
$stt->bindValue(':name',$_POST['name']);
$stt->bindValue(':contents',$_POST['contents']);

$stt->execute();
$db=NULL;
?>

<?php

try{

$db = new PDO("mysql:host=localhost;dbname=myapp;charset=utf8","cloud00","");

}

catch (Exception $error)

{

die("接続に失敗しました:".$error->getMessage());

}

$stt=$db->prepare("INSERT INTO diary values(:name,:contents)");

$stt->bindValue(':name',$_POST['name']);

$stt->bindValue(':contents',$_POST['contents']);

$stt->execute();

$db=NULL;

「bindValue」では、受け取った値をSQLのパラメータに代入します。
さらに、日本語を入力しても文字化けしないよう、PDOの括弧内に「charset=utf8」を加えましょう。

それでは実行してみます。今回開くのはview.phpのほうです。
cloudDB03 - Cloud9で学ぶ！Webフォームでデータベースを操作する

実行できたら、ターミナルからMySQLを開き、以下のSQLを実行してください。テーブルの中身を確認します。

あとがき

いかがでしたか？上記のサンプルデータベースやコードにカラムや項目を増やしたり、サイト風に「送信完了」の文字を表示させる等、いろいろいじってみてくださいね。
SELECTして結果をWebフォームに表示させる方法も書きたかったのですが、fetchメソッドの説明でかなり長くなってしまうので泣く泣く断念しました。またの機会に書ければいいなと思いまず！

投稿者：プログラミング教育ナビ編集部