webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

データをフォームからデータベースに保存する

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

まずはXAMPPに新しいデータベース「form」を作ります。
その次に以下の内容でテーブルを作成。

f:id:yachin29:20161219233236j:plain



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

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

今回は500字以内のテキストデータを保存したかったので、VARCHAR型を選択。




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

INSERT INTO form (name, email, message) VALUES ('山田太郎', 'yamada@gmail.com', 'はじめまして。')


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

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

session

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

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


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

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

*** データベースに接続する為に必要な情報
データベースサーバー:MySQL
サーバーコンピューター:localhost(XAMPPの場合)
使用するデータベース名:mydb
ユーザー名:root
パスワード:root (MAMPの場合)

>||
// 接続設定
  $user = 'root';
  $pass = '';

  // データベースに接続
 $dsn = 'mysql:host=localhost;dbname=mydb;charset=utf8';
 $conn = new PDO($dsn, $user, $pass); //「$conn」は、任意のオブジェクト名
  
  // データの追加
 $sql = 'INSERT INTO form(name, email, message) VALUES("'.$name.'","'.$email.'","'.$message.'")';
 $stmt = $conn -> prepare($sql);
 $stmt -> execute();


「入力画面」input.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>データベースと連結したフォーム</title>
</head>

<body>
<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="body" cols="50" rows="4"></textarea></dd>
<dt>電話番号</dt><dd><input type="tel" name="phone"></dd>
</dl>
<p><input type="submit" value="送信"> <input type="reset" value="リセット"></p>
</form>
</body>
</html>

「確認画面」confirm.php

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

$name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES, 'UTF-8' );
$email = htmlspecialchars( $_POST[ 'email' ], ENT_QUOTES, 'UTF-8' );
$body = htmlspecialchars( $_POST[ 'body' ], ENT_QUOTES, 'UTF-8' );
$phone = htmlspecialchars( $_POST[ 'phone' ], ENT_QUOTES, 'UTF-8' );

// 入力値をセッション変数に格納
$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['body'] = $body;
$_SESSION['phone'] = $phone;
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>確認画面</title>
</head>

<body>
<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 $body; ?></dd>
<dt>電話番号</dt>
<dd><?php echo $phone; ?></dd>
</dl>
<p><input type="submit" value="登録"></p>
</form>
</body>
</html>

「登録画面」submit.php

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

$name = htmlspecialchars( $_SESSION[ 'name' ], ENT_QUOTES, 'UTF-8' );
$email = htmlspecialchars( $_SESSION[ 'email' ], ENT_QUOTES, 'UTF-8' );
$body = htmlspecialchars( $_SESSION[ 'body' ], ENT_QUOTES, 'UTF-8' );
$phone = htmlspecialchars( $_SESSION[ 'phone' ], ENT_QUOTES, 'UTF-8' );

// データベース接続設定
  $user = 'root';
  $pass = '';
	
	// データベースに接続
 $dsn = 'mysql:host=localhost;dbname=yajima_0606;charset=utf8';//ポートに関係無くlocahostに
 $conn = new PDO($dsn, $user, $pass); //「$conn」は、任意のオブジェクト名
 
   // データの追加
 $sql = 'INSERT INTO form(name, email, body,phone) VALUES("'.$name.'","'.$email.'","'.$body.'","'.$phone.'")';
 $stmt = $conn -> prepare($sql);
 $stmt -> execute();
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>登録画面</title>
</head>

<body>
<p>ご登録ありがとうございました。</p>
<p><a href="input.php">入力画面に戻る</a></p>
</body>
</html>