WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

データベース の設定

2020年5月クラス

今回はブラウザー上のフォームで入力したデータをデータベースに保存出来るようにします。

まずはXAMPPに新しいデータベースを作ります。
その次にテーブルを作成。

f:id:yachin29:20161219233236j:plain


今回はID、名前、メールアドレス、お問い合わせ内容の4つのカラムを作成

カラムを作る際には、そのカラムのデータ型に注意しましょう。

・主なデータ型
INT型：数値。データ番号やIDなどの時。
VARCHAR型：文字数を指定。文字列の長さは変動。
TEXT型：巨大なテキストデータを保存する。
DATETIME型：日付。 投稿日時、最終更新日時など。


データベースがちゃんと機能しているか、まずはSQLを使って手動で確認してみましょう。

INSERT INTO mytable (name, email,message,date) VALUES ('山田太郎', 'yamada@gmail.com','こんにちは',now())


続いて、PHPファイルでフォームを作ります。

入力画面（input.php)
確認画面（confirm.php）
登録画面（submit.php）

session

セッションは、個々のユーザーのデータを格納する仕組みで、 個々のユーザーに対してセッション ID を用意します。 これを用いて、複数ページにまたがるリクエストの間で状態の情報を永続させることができます。 Cookie（クッキー）の仕組みととても似ていますが、Cookieはブラウザ側、セッションはサーバー側と、それぞれデータの保存場所が異なります。

// セッションの開始
session_start();

// 入力値をセッション変数に格納
$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['message'] = $message;

PDOでデータベースに接続し、SQLを実行する

PDO PHP Data Object

データベースでの実行は、「データベースに接続」して「データベースを捜査する許可を得る」必要があります
そのために「PDO」という命令を使って、「ユーザー名」と「パスワード」を設定します
通常のオブジェクトと同様、このオブジェクトの中には「データベースへの接続」や「SQLの実行」「実行結果の取得」などデータベースを使ったアプリケーション開発に必要な命令がそろっています。

データベースに接続する為に必要な情報

  • データベースホスト名：localhost（mampの場合もポート番号は省略）

使用するデータベース名：
ユーザー名：root
パスワード：root (xamppの場合は省略)


入力画面に戻る

何か入力ミスをして、入力画面に戻った際に入力内容が全て消えていると、また最初から記入する必要があります。入力画面に戻った際に入力したデータが保持されていれば、訂正したい箇所だけ直してまた送信する事が出来ます。細かい事ですが、この設定をするとしないではフォームの離脱率に非常に影響が出るので、設定しましょう。
今回は簡単なJavascriptを使った方法で、データを保持したまま入力画面に戻る機能をつけましょう。


buttonタグの場合

<button type="button" onclick="history.back()">戻る</button>


inputタグの場合

<input value="前に戻る" onclick="history.back();" type="button">


まずはsubmit.php（データベース にデータを送信）のみを作ってDBにちゃんとデータが送信されるか、確認してみましょう。

<?php

// 変数の初期化 & 日時の取得
$sql = null;
$res = null;
$dbh = null;

$name = "名前";
$email = "aaa@aaa";
$message = "テスト";
$date = date('Y-m-d H:i:s');

try {
	// DBへ接続（ホスト名※ポート番号は入れない、db名、dbユーザー名、dbパスワード）
	$dbh = new PDO('mysql:host=localhost; dbname=test; charset=utf8', 'root', 'root');

	// SQL作成
	$sql = "INSERT INTO mytable (name, email, message, date) VALUES ('$name','$email', '$message', '$date')";

	// SQL実行
	$res = $dbh->query($sql);

} catch(PDOException $e) {
	echo $e->getMessage();
	die();
}

// 接続を閉じる
$dbh = null;
?>


また、初期設定では確認画面（confirm.php）や登録画面（submit.php）に直接アクセスしてしまうと、POSTの値が空なのでエラーが出てしまいます。それを回避する為、以下のif文を使って入力画面（input.php)にリダイレクトさせます。

if(!(isset($_POST['name']))){
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる
 header('Location:input.php');
 exit;
}


input.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DBに接続しているフォーム｜入力画面</title>
<link rel="stylesheet" href="css/form.css">
</head>

<body>
<div class="container">
<h1>入力画面</h1>
<form action="confirm.php" method="post">
<dl>
<dt>お名前</dt><dd><input type="text" name="name" required placeholder="山田 太郎"></dd>
<dt>メールアドレス</dt><dd><input type="email" name="email" required></dd>
<dt>お問い合わせ内容</dt><dd><textarea name="message" required cols="40" rows="5"></textarea></dd> 
</dl>
<p><input type="submit" value="確認画面へ"></p>
</form>
</div>
</body>
</html>
confirm.php（確認画面）
<?php
if(!(isset($_POST['name']))){
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる
 header('Location:input.php');
 exit;
}

$name = htmlspecialchars($_POST["name"], ENT_QUOTES);
$email = htmlspecialchars($_POST["email"], ENT_QUOTES);
$message = htmlspecialchars($_POST["message"], ENT_QUOTES);

// セッションの開始
session_start();
$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['message'] = $message;
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DBに接続しているフォーム｜確認画面</title>
<link rel="stylesheet" href="css/form.css">
</head>

<body>
<div class="container">
<h1>確認画面</h1>
<form action="submit.php" method="post">
<dl>
<dt>お名前</dt><dd><?php echo $name ?></dd>
<dt>メールアドレス</dt><dd><?php echo $email ?></dd>
<dt>お問い合わせ内容</dt><dd><?php echo $message ?></dd> 
</dl>
<p>
<input type="submit" value="送信">
<input type="button" value="戻る" onclick="history.back();">
</p>
</form>
</div>
</body>
</html>
submit.php（データベース にデータを送信）
<?php
if(!(isset($_SESSION['name']))){
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる
session_destroy();
 header('Location:input.php');
 exit;
}

// 変数の初期化 & 日時の取得
$sql = null;
$res = null;
$dbh = null;

// セッションの開始
session_start();
$name = $_SESSION[ 'name' ];
$email = $_SESSION[ 'email' ];
$message = $_SESSION[ 'message' ];
$date = date('Y-m-d H:i:s');
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>最終画面</title>
</head>
<body>
<h1>お問い合わせ、ありがとうございました。</h1>
<P><a href="input.php">入力画面に戻る</a></P>
<?php
try {
	// DBへ接続（ホスト名※ポート番号は入れない、db名、dbユーザー名、dbパスワード）
	$dbh = new PDO('mysql:host=localhost; dbname=test; charset=utf8', 'root', 'root');

	// SQL作成
	$sql = "INSERT INTO mytable (name, email, message, date) VALUES ('$name','$email', '$message', '$date')";

	// SQL実行
	$res = $dbh->query($sql);

} catch(PDOException $e) {
	echo $e->getMessage();
	die();
}
// 接続を閉じる
$dbh = null;

//最後にセッション情報を破棄
session_destroy();
?>
</body>
</html>