【プログラミング構築】入力したデータをPOST送信でデータベースに登録しよう

しょごたん

2016.06.20

こんにちは、しょごです。
実は元サッカー部だという話をしたらものすごく意外な顔をされました。おかしいです、見た目でスポルツメンな感じが出てると思ったんですけど、、。

さて、この連載では簡単な掲示板を構築しながら、バックエンド技術をイチから学んでいきます。

前回はプログラミングの第一歩として「設計」のお話をしました。

設計をサボると穴ができる！プログラム開発の「要件定義」「基本設計」

しょごたん

2016.04.10

その設計をもとに、今回から実際にプログラミングをしていきましょう。

プログラミングをするときには、「おすすめテキストエディタ5選」で紹介したようなエディタが必要になります。無料版のツールでも大丈夫です。Windows環境であれば「サクラエディタ」、Macであれば「CotEditar」でも構いません。

今回は「入力したデータをデータベースに登録するまで」を構築しましょう。

データ登録の仕組み

データ登録の仕組みは下記のような形です。

入力フォームで入力されたデータをPOST送信する。
POST送信で受け取ったデータを精査する。
精査したデータをデータベースに登録する。

また、入力フォーム画面の表示、POST送信先などは全てindex.phpに集約させます。
index.phpにアクセスした際に、フラグによって処理を変更する形です。

ひとつずつ作っていきましょう。

入力画面のHTMLを用意する

まずは送信したい値を入力する、入力フォームを用意しましょう。

要件にそって必要な入力項目を用意します。これはHTMLソースで用意し、viewディレクトリの中にpost.phpとして保存しておきます。

▼view/post.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>掲示板やんなー</title>
</head>
<body>
	<h1>掲示板やんなー</h1>
	<!-- 入力エリア -->
	<div class="input_area">
		<form action="./index.php" method="post" id="contact_form">
			<dl class="name">
				<dt>名前</dt>
				<dd><input type="text" name="name" value=""></dd>
			</dl>
			<dl class="email">
				<dt>メールアドレス</dt>
				<dd><input type="text" name="email" value=""></dd>
			</dl>
			<dl class="body">
				<dt>本文</dt>
				<dd><textarea name="body"></textarea></dd>
			</dl>
			<input type="hidden" name="eventId" value="save">
			<input type="submit" value="送信">
		</form>
	</div>
	<!-- //入力エリア -->
	<hr>
	<!-- 投稿表示エリア -->
	<div class="list">
		<div class="item">
			<div class="body">ここに文章がはいります。ここに文章がはいります。ここに文章がはいります。ここに文章がはいります。</div>
			<div class="date">YYYY/MM/DD HH:ii</div>
		</div>
		<div class="item">
			<div class="body">ここに文章がはいります。ここに文章がはいります。ここに文章がはいります。ここに文章がはいります。</div>
			<div class="date">YYYY/MM/DD HH:ii</div>
		</div>
		<div class="item">
			<div class="body">ここに文章がはいります。ここに文章がはいります。ここに文章がはいります。ここに文章がはいります。</div>
			<div class="date">YYYY/MM/DD HH:ii</div>
		</div>
	</div>
	<!-- // 投稿表示エリア-->
</body>
</html>

記事を投稿する入力ボックスがあるエリアと、入力された記事を表示させるエリアに分けています。viewディレクトリには、実際に表示するための画面レイアウトを構成するファイルを設置していきます。

データを保存するデータベースを作成する

前回の仕様の通り、データベースを作成します。

共用サーバならコントロールパネルからデータベースを作成し、テーブルの作成以降はphpmyadminなどのデータベース管理ツールが用意されてるはずなので、そちらでおこないます。
データベース名は今回は「bbs_db」としましょう。

POST送信で受け取ったデータを保存するロジックを用意する

次にデータベースに送信したデータを登録するロジックを作成します。

名前やメールアドレス、本文に入力されたものを保存する流れとして、入力データをPOST送信します。送信先にてPOSTデータを受け取り、データベースに保存します。

POSTデータとは？

先に進む前に「POSTデータ」を簡単に説明します。

POSTデータとは、Webサーバでデータの受け渡すときに使うメソッドの一つです。
画面の入力ボックスで入力された文字データをPOST方式で送信し、POST方式で受け取ったデータをPOSTデータといいます。

データ送信の方式には「GET送信」という方式も存在します。

POST送信とGET送信の違い

例：http://xxxx/index.php?name=xxxx&email=xxxxx&body=xxxxx

GET送信の場合は、URLにパラメータとして送信データを付与する形になります。検索機能のあるWebサイトでURLを見ると、末尾に「?」から始まるものすごく長い文字列が付いていることがありますが、これはGET方式でデータ送信をしているということです。

POST送信の場合は、URLなどの見た目では送信データはわかりません。
送信方式の決め方としては、HTMLタグのformタグのmethod属性にPOSTかGETを付与することで送信方式を変更することができます。

また、GET送信の場合は送信できるデータ量が制限されます。URLの後ろに付与するため、ブラウザによってURLに使用できる文字数が決まっているからです。そのため、大量のデータを送信したい場合はPOST送信を利用することになります。

今回はPOST送信を利用します

今回のデータの受け渡しでは、掲示板で入力した名前やメールアドレスなどの文章データを扱うことになり、サーバでデータベースを登録・更新を行うことと、メールアドレスなど大々的に公開するものではないデータが含まれますので、POST送信を利用します。

接続するDB情報などは定数で別途設定しておくと楽なので、別ファイルで設定しておきます。

▼config/properties.php

// 接続データベース情報(本番)
define('DATABASE_NAME','bbs_db');
define('DATABASE_USER','root');
define('DATABASE_PASSWORD','Cde3Vfr4');
define('DATABASE_HOST','localhost');

define('PDO_DSN','mysql:dbname=' . DATABASE_NAME .';host=' . DATABASE_HOST . '; charset=utf8');

記事の保存ロジックも違うファイルに記述しておきます。

▼class/business/getFormAction.php

class getFormAction {
	public $pdo;

	/**
	 * コネクション確保
	 */
	function __construct() {
		try {
			$this->pdo = new PDO( PDO_DSN, DATABASE_USER, DATABASE_PASSWORD);
		} catch (PDOException $e) {
			echo 'error' . $e->getMessage();
			die();
		}
	}

	/**
	 * 記事データをDBに保存
	 */
	function saveDbPostData($data){

		// データの保存
		$smt = $this->pdo->prepare('insert into post (name,email,body,created_at,updated_at) values(:name,:email,:body,now(),now())');
		$smt->bindParam(':name',$data['name'], PDO::PARAM_STR);
		$smt->bindParam(':email',$data['email'], PDO::PARAM_STR);
		$smt->bindParam(':body',$data['body'], PDO::PARAM_STR);
		$smt->execute();

	}
}

データ登録時に利用しているPDOとは？

「PDO」とは「PHP Data Objects」の略称で、上記ソースでデータベースの操作を行う際に利用しているデータベース接続クラスです。
これまでは利用するデータベースにより接続構文が用意されており、使い分けが必要でした。しかし、PDOを使うことで同じ命令で複数のデータベースに接続ができるようになります。

また、今回のようにPOSTデータを受け取り、データベースに登録を行う場合に、insert文に直接取得した変数を与える形だと「SQLインジェクション」というデータベースの不正操作を引き起こすことになってしまいますが、PDOを用いてプレースホルダを利用して取得変数を組み込んだり、バインドする際に型を指定することでSQLインジェクション対策を含むことが容易にできます。

プレースホルダとは実際の内容を後から挿入するために仮で確保している場所で、今回でいうと

$smt->bindParam(':name',$data['name'], PDO::PARAM_STR);

の、「:name」ってのがそうですね。最終的に「:name」を「$data[‘name’]」に格納されている値に入れ替えるってことです。バインドとは、上記のようにプレースホルダに変数を割り当てる処理のことをいいます。

PHPでデータベースを利用する際はPDOを利用しましょう。
データベース接続クラスはPDO以外にも幾つか種類がありますが、よくわからないうちはPDOを使っとけばいいと思います、ウチは好きですよ、PDO。

ただし、PDOはPHP5.1.0以降からでしか使えないので注意です。
また、上記記述はPHP5.3.6以降でのみしか使えません。5.3.5以下で利用する場合は、下記を変更する必要があります。

▼config/properties.php

define('PDO_DSN','mysql:dbname=' . DATABASE_NAME .';host=' . DATABASE_HOST . '; charset=utf8');
↓
define('PDO_DSN','mysql:dbname=' . DATABASE_NAME .';host=' . DATABASE_HOST);

▼class/business/getFormAction.php

$this->pdo = new PDO( PDO_DSN, DATABASE_USER, DATABASE_PASSWORD);
↓
$this->pdo = new PDO( PDO_DSN, DATABASE_USER, DATABASE_PASSWORD, array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));

流れをコントロールする処理を用意する

これまで用意した処理をコントロールする処理を用意します。

基本的にアクセスするのはこのコントローラになり、都度イベントフラグによって処理を分ける形になります。

具体的には以下のふたつ。

初期アクセス時に実行させる処理
データ保存時に実行させる処理

初期アクセス時は投稿画面と登録されている記事を表示させます。
今回は$eventidという変数をPOST送信時に受け渡して、変数の値によって処理をわけます。

▼index.php

require_once("./config/properties.php");
require_once('./class/business/getFormAction.php');

$action = new getFormAction();

$eventId = null;
// イベントID取得
if (isset($_POST['eventId'])) {
	$eventId = $_POST['eventId'];
}

switch ($eventId) {

	// DBsave
	case 'save':
		
		$action->saveDbPostData($_POST);
		require("./view/post.php");
		break;

	// 初回アクセス時、投稿画面表示
	default:
		require("./view/post.php");
		break;
}

ここまで用意しつつ、index.phpにアクセスし、名前やメールアドレスなどを入力し送信ボタンを押下するとデータベースに保存されます。

これでデータベースにデータを蓄積することができるようになりました。