96's blog

WEBサイト制作科 6ヶ月コース

PHP27(フォーム練習問題)

※11/06 11:30更新

ブログ・Webデザインの勉強 | 風姿花伝「フォーム(1)~(6)」

入力画面

http://webtm2013.main.jp/php_maita/Q06(2).php

f:id:webtm2013:20131106112211p:image:w400

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>フォーム(2)</title>
<linkrel="stylesheet"href="Q06style.css">
</head>
<body>
<divid="container">
<h1>メッセージ入力画面</h1>
<p>必要事項(<span></span>)を入力して「確認する」ボタンをクリックしてください。</p>
<formaction="Q06(2)_2.php"method="post">
<table>
<tr>
<th>お名前<span></span></th>
<td><inputtype="text"name="name" placeholder="例:山田" required autofocus></td>
</tr>
<tr>
<th>メールアドレス<span></span></th>
<td><inputtype="email"name="email" placeholder="例:yamada@gmail.com"  required pattern="^[0-9a-zA-Z]+[\w-]+@[\w\.-]+\.\w{2,}$"></td>
</tr>
<tr>
<th>メッセージ<span></span></th>
<td><textareaname="message"cols="40"rows="5" placeholder="例:はじめまして。"  required></textarea></td>
</tr>
<tr>
<tdcolspan="2"class="submit"><inputtype="submit"value="確認する"></td>
</tr>
</table>
</form>
</div>
</body>
</html>

確認画面

f:id:webtm2013:20131106112212p:image:w400

<?php
if(empty($_POST)){
  print '処理を終了しました。';
  exit;
}
session_start();
  $name = htmlspecialchars($_POST['name'],ENT_QUOTES);
  $email = htmlspecialchars($_POST['email'],ENT_QUOTES);
  $message = htmlspecialchars($_POST['message'],ENT_QUOTES);

$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['message'] = $message;
?>
<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>フォーム(2)</title>
<linkrel="stylesheet"href="Q06style.css">
</head>
<body>
<divid="container">
<h1>確認画面</h1>
<p>内容をご確認ください。</p>
<formaction="Q06(2)_3.php"method="post">
<table>
<tr>
<th>お名前</th>
<td><?php if($name==''){print 'お名前が入力されていません。';}else{print $name;} ?></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><?php if($email==''){print 'メールアドレスが入力されていません。';}else{print $email;} ?></td>
</tr>
<tr>
<th>メッセージ</th>
<td><?php if($message==''){print 'メッセージが入力されていません。';}else{print $message;} ?></td>
</tr>
<tr>
<tdcolspan="2"class="submit">
<?php
if($name==''||$email==''||$message==''){
  print '<span class="empty">未入力の項目があります。「戻る」ボタンをクリックしてください。</span><br>'."\n";
  print '<input type="button" onClick="history.back()" value="戻る">';}else{  print '<input type="button" onClick="history.back()" value="戻る">';
print '<input type="submit" value="送信する">';}
?>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

完了画面

f:id:webtm2013:20131106112213p:image:w400

<?php

session_start();
  $name = htmlspecialchars($_SESSION['name'],ENT_QUOTES);
  $email = htmlspecialchars($_SESSION['email'],ENT_QUOTES);
  $message = htmlspecialchars($_SESSION['message'],ENT_QUOTES);

$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['message'] = $message;

  $mail_sub= 'メッセージを受け付けました。';
  $mail_body=<<<EOD
{$name}様、以下の内容でメッセージを受け付けました。

お名前:{$name}
メールアドレス:{$email}
メッセージ:{$message}
EOD;

  $mail_body=html_entity_decode($mail_body,ENT_QUOTES,"UTF-8");
  $mail_head='From:webtm2013@gmail.com';
  mb_language('Japanese');
  mb_internal_encoding("UTF-8");
  mb_send_mail($email,$mail_sub,$mail_body,$mail_head);

$dsn='mysql:dbname=データベース名;host=ホストサーバー名';
$user='○○○';
$password='○○○';
$dbh = new PDO($dsn,$user,$password);
$dbh ->query('SET NAMES UTF8');

$sql='INSERT INTO 131105form(name,email,message) VALUES("'.$name.'","'.$email.'","'.$message.'")';
$stmt= $dbh->prepare($sql);
$stmt->execute();
$dbh=null;

?>
<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>フォーム(3)</title>
<linkrel="stylesheet"href="Q06style.css">
</head>
<body>
<divid="container">
<h1>完了画面</h1>
<p>以下の内容をクライアントに送信しました。</p>
<table>
<tr>
<th>お名前</th>
<td><?php print $name ?></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><?php print $email ?></td>
</tr>
<tr>
<th>メッセージ</th>
<td><?php print $message ?></td>
</tr>
</table>
</div>
</body>
</html>

送信されたメール

f:id:webtm2013:20131106081258p:image:w400

データ一覧

f:id:webtm2013:20131106112214p:image:w400

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>登録データ一覧</title>
<linkrel="stylesheet"href="Q06style.css">
</head>
<body>
<divid="listcontainer">
<h1>登録データ一覧</h1>
<table>
<tr><thclass="head">NO.</th><thclass="head">名前</th><thclass="head">メールアドレス</th><thclass="head">メッセージ</th></tr>
<?php
$dsn = 'mysql:dbname=データベース名;host=ホストサーバー名';
$user='○○○';
$password='○○○';
$dbh=new PDO($dsn,$user,$password);
$dbh->query('SET NAMES UTF8');

$sql='SELECT*FROM テーブル名 WHERE 1';
$stmt=$dbh->prepare($sql);
$stmt->execute();

while(1){
  $rec=$stmt->fetch(PDO::FETCH_ASSOC);
  if($rec==false){
  break;
}
print '<tr class="list"><td class="code">'.$rec['code'].'</td>';
print '<td class="name">'.$rec['name'].'</td>';
print '<td>'.$rec['email'].'</td>';
print '<td class="message">'.$rec['message'].'</td>';
print'</tr>';
}
$dbh=null;
?>
</table>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
div, table, tr, th, td, h1, p{
  margin:0;
  padding:0;
}
body{
font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color:#333333;
  line-height:1.7;
  font-size:14px;
}
#container{
  width:510px;
  margin: 10px auto;
  padding:10px;
}
#listcontainer{
  width:700px;
  margin: 10px auto;
  padding:10px;
}
h1{
  padding:10px 10px 6px 10px;
  background:#ece5ce;
  border-left:solid 3px #e08e79;
  font-size:18px;
}
h1, th{
  font-weight:500;
}
h1,p,table{
  margin-bottom:10px;
}
span{
  color:red;
}
span.empty{
  font-size:12px;
}
table{
  border-collapse:collapse;
}
tr, th, td{
  border:solid 1px #999;
}
tr{
  line-height:2;
}
tr.list:nth-child(2n+3){
  background:#ece5ce;
}
th{
  width:9em;
  background:#f1d4af;
  padding:10px;
  text-align:right;
}
th.head{
  text-align:center;
}
td{
  padding:10px;
  width:300px;
}
td.submit{
  text-align:center;
}
td.code{
  width:3em;
  text-align:right;
}
td.name{
  width:8em;
}
td.message{
  width:500px;
}

改善すべき点

  • nl2brを入れる。
  • htmlspecialcharsは極力printの前で使う。
  • メールをユーザーとクライアントに届くようにする。