PHP27(フォーム練習問題)
※11/06 11:30更新
ブログ・Webデザインの勉強 | 風姿花伝「フォーム(1)~(6)」
入力画面
http://webtm2013.main.jp/php_maita/Q06(2).php
<!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>
確認画面
<?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>
完了画面
<?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>
送信されたメール
データ一覧
<!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の前で使う。
- メールをユーザーとクライアントに届くようにする。