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

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

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

f:id:yachin29:20161219233236j:plain

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

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

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

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

INSERT INTO mytable (name, email, gender) VALUES ('山田太郎', 'yamada@gmail.com', '男性')


続いて、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の実行」「実行結果の取得」などデータベースを使ったアプリケーション開発に必要な命令がそろっています。

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

データベースサーバー:MySQL
サーバーコンピューター:localhost(XAMPPの場合)
使用するデータベース名:mydb
ユーザー名:root
パスワード:root (MAMPの場合)

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

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

入力画面に戻る

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

buttonタグの場合

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


inputタグの場合

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

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>
<input type="radio" name="gender" value="男性" checked id="man"><label for="man">男性</label>
<input type="radio" name="gender" value="女性" id="woman"><label for="woman">女性</label>
</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);
$gender = $_POST["gender"];
$message = htmlspecialchars($_POST["message"], ENT_QUOTES);

session_start();
$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['gender'] = $gender;
$_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 $gender ?></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
// セッションの開始
session_start();

$name = $_SESSION['name'];
$email = $_SESSION['email'];
$gender = $_SESSION['gender'];
$message = $_SESSION['message'];
//サーバーに保存されているsessionデータを変数に代入
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DBに接続しているフォーム|送信画面</title>
</head>

<body>
<div class="container">
<h1>完了しました。</h1>
<p>お問い合わせありがとうございました。</p>
<?php
// DB接続設定
$user = 'root';//DBユーザー名
$pass = '';//DBパスワード

 //DBに接続
 $dsn = 'mysql:host=データベースホスト名;dbname=データベース名;charset=utf8';
$conn = new PDO($dsn, $user, $pass);
//「$conn」は、任意のオブジェクト名

// データの追加
$sql = 'INSERT INTO mytable(name, email, gender) VALUES("'.$name.'","'.$email.'","'.$gender.'")';

$stmt = $conn -> prepare($sql);
$stmt -> execute();

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

コメント

タイトルとURLをコピーしました