6月16日 授業内容(ゲストブック-データ表示機能)

ゲストブック-データ表示機能

昨日作成したゲストブックのindex.phpから必要情報を入力しデータベースに溜め込みます。

そして、データベースからデータを取り出すページ(list.php)を作成して入力内容がデータベースにきちんと保存書き込まれているかを確認します。


昨日の分も合わせてphpを掲載しておきます。

表示結果は個人情報を含む部分は隠しています。
f:id:paris1204:20160616134631p:plain

①データ入力
index.php

<?php
//初期化
$m_name = '';
$m_mail = '';
$m_message = '';


//セッションの開始
session_start();
//入力値の取得
if(isset($_SESSION['m_name'])){
  $m_name = $_SESSION['m_name'];//セッションに記憶した値をname='your_nameに戻す'
}
if(isset($_SESSION['m_mail'])){
  $m_mail = $_SESSION['m_mail'];
}
if(isset($_SESSION['m_message'])){
  $m_message = $_SESSION['m_message'];
}
?>



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ゲストブック</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<h1>ゲストブック</h1>
<form method="post" action="confirm.php">
<table>
<tr>
<th>名前</th>
<td><input type="text" name="m_name" class="msg" value="<?php echo $m_name ?>"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="text" name="m_mail" class="msg" value="<?php echo $m_mail ?>"></td>
</tr>
<tr>
<th>メッセージ</th>
<td>
<textarea rows="5"name="m_message" class="msg" ><?php echo $m_message ?></textarea>
</td>
</tr>
</table>
<input type="submit" value="確認する">
</form>


</body>
</html>

②入力データの確認及びセッションデータに変換(必要なデータが入力されていない場合はその旨を表示。修正などのために①の画面に戻ると元の入力データが表示される)。
confirm.php

<?php
if(!isset($_POST['m_name']) || !isset($_POST['m_mail']) || !isset($_POST['m_message'])){//issetは空文字('や")でも値として認識してしまうので、
header('Location:index.php');//値の有無を判断するには向かないので別でemptyを設定する
	exit;//
	}

//入力値チェック
if(empty($_POST['m_name'])){//emptyだともし空文字に該当すると次の画面に進めない
	echo 'お名前を入力してください。';
	echo '<p><a href="index.php">入力画面へ戻る</a></p>';
	exit;}
	
	if(empty($_POST['m_mail'])){
	echo '正しくメールアドレスを入力してください。';
	echo '<p><a href="index.php">入力画面へ戻る</a></p>';
	exit;}
	
	if(empty($_POST['m_message'])){
	echo 'メッセージを入力してください。';
	echo '<p><a href="index.php">入力画面へ戻る</a></p>';
	exit;}

$m_name=htmlspecialchars($_POST['m_name'],ENT_QUOTES,'UTF-8');
$m_mail=htmlspecialchars($_POST['m_mail'],ENT_QUOTES,'UTF-8');
$m_message=htmlspecialchars($_POST['m_message'],ENT_QUOTES,'UTF-8');

session_start();//セッションファイルができて値が入力される。データは前後のページに持っていける
$_SESSION['m_name']=$m_name;//元の入力データをセッションページに入力する。$_POST['your_name'];で元データに戻すことも可能
$_SESSION['m_mail']=$m_mail;//※htmlspecialcharsを入れると修正されてしまうので入れないこと
$_SESSION['m_message']=$m_message;

?>


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>確認画面 - ゲストブック</title>
<style>
table{border: 1px solid #AAA;
  border-collapse: collapse;
  margin-bottom: 10px;
	width:300px;}
	th, td {
  border: 1px solid #AAA;
  padding: 10px;
}
th {
  text-align: left;
  background: #EDEDED;
}
input {
  font-size: 16px;
}
.msg {
  width: 400px;
}
</style>
</head>

<body>
<p>入力内容確認画面</p>
<form method="post" action="submit.php">
<table>
<tr>
<th>名前</th>
<td><?php echo $m_name;  ?></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><?php echo $m_mail;  ?></td>
</tr>
<tr>
<th>メッセージ</th>
<td>
<?php echo $m_message;  ?></textarea>
</td>
</tr>
</table>
<input type="submit" value="送信する">
</form>


</body>
<p><a href="index.php">戻る</a></p>
</html>

③確認したデータをデータベースに送る。(一番下に次のファイルへのリンクをつける)
submit.php

<?php
  // セッションの開始
  session_start();
  if (empty($_SESSION)) {exit;}

  // 接続設定
  $user = 'root';
  $pass = 'root';//MAMPの場合

  // データベースに接続
  $dsn = 'mysql:host=localhost;dbname=guestbook;charset=utf8';/*dsnはdata base name*/
  $conn = new PDO($dsn, $user, $pass);//PDOでPHP とデータベースサーバーの間の接続を表します。
  
  // 入力内容の取得($_SESSIONから)
  $m_name = htmlspecialchars($_SESSION['m_name'], ENT_QUOTES, 'UTF-8');
  $m_mail = htmlspecialchars($_SESSION['m_mail'], ENT_QUOTES, 'UTF-8');
  $m_message = htmlspecialchars($_SESSION['m_message'], ENT_QUOTES, 'UTF-8');

  // データの追加
  $sql = 'INSERT INTO message(m_name, m_mail, m_message, m_dt)
              VALUES(:m_name, :m_mail, :m_message, NOW())';
  $stmt = $conn->prepare($sql);//stmtはstatementの略,connは今回はカウンター変数
  $stmt->bindParam(':m_name', $m_name);//bindParamでsql文のパラメーターにバインドする
  $stmt->bindParam(':m_mail', $m_mail);
  $stmt->bindParam(':m_message', $m_message);
  $stmt->execute();//INSERT INTO messageの中身がbind

// エラーチェック
  $error = $stmt->errorInfo();
  if ($error[0] != '00000') {
    $message = 'データの追加に失敗しました。' . $error[2];
  } else {
    $message = 'データを追加しました。データ番号:' . $conn->lastInsertId();
  }

// セッションデータの破棄
  $_SESSION = array();
  session_destroy();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ゲストブック</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>追加完了画面</p>
<table>
<tr>
<td>名前</td>
<td><?php echo $m_name; ?></td>
</tr>
<tr>
<td>メールアドレス</td>
<td><?php echo $m_mail; ?></td>
</tr>
<tr>
<td>メッセージ</td>
<td><?php echo nl2br($m_message); ?></td>
</tr>
</table>
<p><a href="list.php">入力データ一覧表へ</a></p>
</body>
</html>

④データベースから入力データを取り出して入力内容を確認
list.php

<?php
try{
	$dsn ='mysql:dbname=guestbook; host=localhost';
  $user='root';
	$pass='root';
	$dbh=new PDO($dsn,$user,$pass);
	$dbh -> query( 'SET NAMES UTF8' );
	$sql = 'SELECT * FROM message WHERE 1';//WHERE1は全体をさす
	$stmt= $dbh -> prepare( $sql );
	$stmt-> execute();
		
	}
	catch(Exception $e){
		echo 'ただいま障害により大変ご迷惑おかけしております。';
		exit();
		}

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ゲストブック一覧(データベースからリストへのデータ取得)</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<h1>ゲストブック</h1>
<form method="post" action="index.php">
<table>
<tr>
<th></th><th>ID</th><th>名前</th><th>メールアドレス</th><th>メッセージ</th>
</tr>
<?php  
while( true ){
	$rec = $stmt -> fetch( PDO::FETCH_ASSOC );//1行分のrec(レコード)をfetch(取得)して連想配列として表示
	if($rec ==false){
		break;
		}
	echo '<tr><td>';
	echo '<label><input type="radio" name="code" value=""></label>';
	echo '</td><td>';
	echo $rec['m_id'];
	echo '</td><td>';
	echo $rec['m_name'];
	echo '</td><td>';
	echo $rec['m_mail'];
	echo '</td><td>';
	echo $rec['m_message'];
	echo '</td></tr>';
	
	}//whileの締め

?>
</table>

<input type="submit" value="入力ページへ">
</form>


</body>
</html>


①、②、③、④共通のスタイルシート

table {
  border: 1px solid #AAA;
  border-collapse: collapse;
  margin-bottom: 10px;
}
th, td {
  border: 1px solid #AAA;
  padding: 10px;
}
th {
  text-align: left;
  background: #EDEDED;
}
input {
  font-size: 16px;
}
.msg {
  width: 400px;
}