くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[PHP]入力フォーム⑥

今回やるのは、入力が終わって確認画面で入力ミスに気づいたときのための2つのこと。

1.「入力画面に戻る」ボタンを追加する

2.入力画面で入れた値を表示させておく

 

1.「入力画面に戻る」ボタンを追加する

f:id:pleasure10501:20150611202839p:plain

メールアドレス間違えちゃった・・・

だけど、このままじゃ戻れません。

なので、一つ前のページに戻るためのボタンをつけます

 

<p><a href="index.php">入力画面に戻る</a></p>

 

2.入力画面で入れた値を表示させておく

これで入力画面に戻れるようになりました。でも、戻ってみたら・・・・

f:id:pleasure10501:20150609204923p:plain

入力画面に何も残っていない・・・

また一からやり直し。これじゃ、やる気も失せますよね。ページ離脱者続出は間違いないです。

それもそのはず。POSTメソッドで送ったデータはいったんサーバーに送られますが、check.phpで表示した時点で消えてしまっているのです。だからページを戻るともう残っていないのです。

でも、SESSIONメソッドでサーバーに保存している値を取り出すことで、index.phpで呼び出すことが可能です。

その値を呼び出すためにindex.phpで使う属性は、value属性です。

 ①index.phpでセッションをスタートさせる

<?php
session_start();
$name = $_SESSION['name'];
$email = $_SESSION['email'];
$msg = $_SESSION['msg'];
?>

②どこにvalue属性を置くのか?

f:id:pleasure10501:20150611205005p:plain

←このボックスの中に入れた値はそのままになっていてほしい
=テキストボックス内にいれるべき

名前とメールアドレス欄はvalue属性にPHPの呼び出しコードを入れます

お名前(tdタグ以下) 
<td><input type="text" name="name" id="name" value="<?php echo htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?>"></td>

 

メールアドレス(tdタグ以下) 
<td><input type="text" name="email" id="email" value="<?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?>"></td>

 

メッセージ欄のtextareaはvalue属性は使えないので、以下のようにします

 お問い合わせ内容 
<td><textarea name="msg" id="msg"><?php echo htmlspecialchars($msg, ENT_QUOTES,'UTF-8'); ?></textarea></td>

 "msg"><?phpや?></textarea> の><の間にスペースを入れないこと

 

 

ここまでのファイルの内容

【index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
<?php
session_start();
$name = $_SESSION['name'];
$email = $_SESSION['email'];
$msg = $_SESSION['msg'];
?>
</head>

<body>
<h1>お問い合わせフォーム</h1>
<p>必要事項を入力して「確認する」ボタンをクリックしてください。</p>
<form action="check.php" method="post">
<table>
<tr><th><label for="name">お名前:</label></th><td><input type="text" name="name" id="name" value="<?php echo htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?>"></td></tr>
<tr><th><label for="email">メールアドレス:</label></th><td><input type="text" name="email" id="email" value="<?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?>"></td></tr>
<tr><th><label for="msg">お問い合わせ内容:</label></th><td><textarea name="msg" id="msg"><?php echo htmlspecialchars($msg, ENT_QUOTES,'UTF-8'); ?></textarea></td></tr>
</table>
<p><input type="submit" value="確認する"></p>
</form>
</body>
</html>

 

 

[PHP]入力フォーム⑤ フォームが送信されたらメールが届くようにする

フォームが送信されたらメールが届くようにする

メールを送る関数
mb_send_mail()

mb_send_mail(’①メールアドレス’,’②メールの表題’,’③メールの内容’)

①通知してほしいメールアドレス。

②お知らせメールの件名

③お知らせメールの本文。ここに入力したものがお知らせメールの本文になる。
 関数を入れることもできる。

 

入力フォームの内容を表示させたい場合や、文章を定型文にしたい場合は
「ヒアドキュメント」を使うと実現できる。

 

ヒアドキュメント(heredoc)

メールの本文のヒアドキュメントをつくり、お知らせメールに乗るようにします。

 

まず、お知らせメールを送る命令文

mb_send_mail('xxx@xxx.com','お問い合わせがありました','$body');

 $bodyの内容をヒアドキュメントで成形

$body=<<<EOF
お問い合わせが送信されました。
送信者のお名前:{$name}
メールアドレス:{$email}
内容は以下の通りです。
{$msg}
EOF;

 ※EOF=End of File  ※緑色の文字の部分がヒアドキュメントの範囲

開始と終わりの文字列は他のものでもよい。ただし同一の文字列でなければならない。

ヒアドキュメントとお知らせメールの命令文は、send.phpPHPコードの最後に書く。

ここまでのファイルの内容

【send.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力確認画面</title>
<?php
if( !isset($_POST['name'])||!isset($_POST['email'])||!isset($_POST['msg']) ){
  header('Location:./index.php');
  exit;
}

$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['msg'];

session_start();                
$_SESSION['name'] = $_POST['name'];
$_SESSION['email'] = $_POST['email'];
$_SESSION['msg'] = $_POST['msg'];

$body=<<<EOF
お問い合わせが送信されました。
送信者のお名前:{$name}
メールアドレス:{$email}
内容は以下の通りです。
{$msg}
EOF;

mb_send_mail('xxx@xxxxx.com','お問い合わせがありました','$body');


?>
</head>
<body>
<h1>入力内容確認画面</h1>
<table>
<tr><th>お名前:</th><td><?php echo htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?></td></tr>
<tr><th>メールアドレス:</th><td><?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?></td></tr>
<tr><th>お問い合わせ内容:</th><td><?php echo htmlspecialchars($msg, ENT_QUOTES,'UTF-8'); ?></td></tr>
</table>
<p><a href="send.php">送信する</a></p>
</body>
</html>

 

[PHP]入力フォーム④

入力フォーム2−3 送信後に表示される画面 

send.phpで送信後の内容を表示する画面を作成する。

①まずは、表示する器となるHTMLから。

【send.php

<body>
<h1>メール送信画面</h1>
<p>以下の内容で送信されました。</p>
<table>
<tr><th>お名前:</th><td></td></tr>
<tr><th>メールアドレス:</th><td></td></tr>
<tr><th>お問い合わせ内容:</th><td></td></tr>
</table>
<p><a href="index.php">入力画面へ戻る</a></p>
</body>

 

②send.phpのtdタグ内に受け取ったデータを表示する。

その為にはcheck.phpからsend.phpへデータを送る必要があるが、POSTメソッドではなくSESSIONメソッドで行う。
POSTメソッドではデータが取り出されると消えてしまうため
一方、SESSIONメソッドはサーバーに一時的にデータが保管されるので、何度でも取り出すことができる。

 

 〔参考〕※一時的なデータの保管場所(XAMPPの場合)
   C:¥xampp¥tmp¥ファイル名

 

というわけで、send.phpのtdタグ内に受け取ったデータを表示するには次の段階を踏む必要がある。

1)check.phpからSESSIONメソッドデータを送信するためのコードを書く

2)send.phpでSESSIONをスタートさせ、SESSIONでの変数を受け取る

 

1)check.phpからSESSIONメソッドデータを送信するためのコードを書く

session_start();
$SESSION['name'] = $_POST['name'];
$SESSION['email'] = $_POST['email'];
$SESSION['msg'] = $_POST['msg'];

 

2)send.phpでSESSIONをスタートさせ、SESSIONでの変数を受け取る

send.php head内

<?php
session_start();
$name = $_SESSION['name'];
$email = $_SESSION['email'];
$msg = $_SESSION['msg'];
?>

send.php body内

<table>
<tr><th>お名前:</th><td><?php echo htmlspecialchars($name,ENT_QUOTES, 'UTF-8');?> </td></tr>
<tr><th>メールアドレス:</th><td><?php echo htmlspecialchars($email,ENT_QUOTES, 'UTF-8');?></td></tr>
<tr><th>お問い合わせ内容:</th><td><?php echo htmlspecialchars($msg,ENT_QUOTES, 'UTF-8');?></td></tr>
</table>

ここまでにコードを ミスなく打てていれば、こうなります。

f:id:pleasure10501:20150610200520p:plain

f:id:pleasure10501:20150610200533p:plain

f:id:pleasure10501:20150610200536p:plain

 

ここまでのファイルの内容

【index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>

<body>

<h1>お問い合わせフォーム</h1>
<p>必要事項を入力して「確認する」ボタンをクリックしてください。</p>
<form action="check.php" method="post">
<table>
<tr><th><label for="name">お名前:</label></th><td><input type="text" name="name" id="name"></td></tr>
<tr><th><label for="email">メールアドレス:</label></th><td><input type="text" name="email" id="email"></td></tr>
<tr><th><label for="msg">お問い合わせ内容:</label></th><td><textarea name="msg" id="msg"></textarea></td></tr>
</table>
<p><input type="submit" value="確認する"></p>
</form>
</body>
</html>

 【check.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力確認画面</title>
<?php
if( !isset($_POST['name'])||!isset($_POST['email'])||!isset($_POST['msg']) ){
header('Location:./index.php');
exit;
}

$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['msg'];

session_start();
$_SESSION['name'] = $_POST['name'];
$_SESSION['email'] = $_POST['email'];
$_SESSION['msg'] = $_POST['msg'];
?>
</head>
<body>
<h1>入力内容確認画面</h1>
<table>
<tr><th>お名前:</th><td><?php echo htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?></td></tr>
<tr><th>メールアドレス:</th><td><?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?></td></tr>
<tr><th>お問い合わせ内容:</th><td><?php echo htmlspecialchars($msg, ENT_QUOTES,'UTF-8'); ?></td></tr>
</table>
<p><a href="send.php">送信する</a></p>
</body>
</html>

  【send.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メール送信画面</title>
<?php
session_start();
$name = $_SESSION['name'];
$email = $_SESSION['email'];
$msg = $_SESSION['msg'];
?>
</head>
<body>
<h1>メール送信画面</h1>
<p>以下の内容で送信しました。</p>
<table>
<tr><th>お名前:</th><td><?php echo htmlspecialchars($name,ENT_QUOTES, 'UTF-8');?> </td></tr>
<tr><th>メールアドレス:</th><td><?php echo htmlspecialchars($email,ENT_QUOTES, 'UTF-8');?></td></tr>
<tr><th>お問い合わせ内容:</th><td><?php echo htmlspecialchars($msg,ENT_QUOTES, 'UTF-8');?></td></tr>
</table>
<p><a href="index.php">入力画面へ戻る</a></p>
</body>
</html>

 

[PHP]データの送信方式

PHPでのデータの送信方法(メソッド)は3つ。

 

GET

  • ブラウザーからサーバーにデータを渡すときに、内容(name属性の値など)をURLにつけて送られる。
  • 個人情報の場合は内容が丸見えになるのでセキュリティ上データの送信には不向き
  • $_GET変数を使うことでGETメソッドで送信されたデータを取得できる

POST

  • GETのようにURLに取得したデータが乗ることはないため、機密性が高い
  • セキュリティ上データを露出しないほうが望ましいデータの送信に向いている
  • しかし完全に安全というわけではない
  • データが取り出されると消える
  • $_POST変数を使うことでGETメソッドで送信されたデータを取得できる

SESSION

  • サーバーに一時的にデータが保存できる
  • session_start()関数を呼び出すことでセッション機能を使えるようになる
  • $_SESSION変数を使う

 

$_POST、$_GET、$_SESSIONなどを「スーパーグローバル変数」という。
プログラム実行時に自動的に定義され、プログラムのどこからでもアクセスできる変数のこと。

[PHP]入力フォーム③

入力フォーム2

名前、メールアドレス、お問い合わせ内容を記入できるフォームを作成します。

今回は入力確認画面、送信後の画面、そして指定されたアドレスへの通知メールも実装します。

 

使用するファイル
・index.php(入力フォーム) 
・check.php(確認画面)
・send.php(送信後用の画面)

 

 

入力フォーム2−1 入力フォームをHTMLで記述

今回はtableタグ、labelタグを使用します。

labelタグのforをid属性と紐づけると、各項目をクリックすると入力フォームに自動的にカーソルが移るので便利。

 

使用する属性:name属性、id属性(それぞれ「name」「email」「msg」を使用)

データの送信方式:POSTメソッド
 

f:id:pleasure10501:20150609204923p:plain

 

 

 

 

 

 

 

 

【index.php】(body内)

<h1>お問い合わせフォーム</h1>
<p>必要事項を入力して「確認する」ボタンをクリックしてください。</p>
<form action="check.php" method="post">
<table>
<tr><th><label for="name">お名前:</label></th><td><input type="text" name="name" id="name"></td></tr>
<tr><th><label for="email">メールアドレス:</label></th><td><input type="text" name="email" id="email"></td></tr>
<tr><th><label for="msg">お問い合わせ内容:</label></th><td><textarea name="msg" id="msg"></textarea></td></tr>
</table>
<p><input type="submit" value="確認する"></p>
</form>

 

入力フォーム2−2 確認画面を作成

入力されたデータを確認するためのcheck.phpを作成します。
まずは ①入力値を表示する為のHTMLを整えて
次に  ②入力値が表示されるようにPHPのコードを書きます

 

f:id:pleasure10501:20150609210407p:plain

①【check.php】(body内)

 

 <p>以下の内容が入力されました。</p>
 <table>
 <tr><th>お名前:</th><td></td></tr>
 <tr><th>メールアドレス:</th><td></td></tr>
 <tr><th>お問い合わせ内容:</th><td></td></tr>
 </table>
 <a href="#">送信する</a>

 

○データの送信先はsend.phpというファイルなので、「送信する」は次の通りになる

 <a href="send.php">送信する</a>

 

 

②【check.php】(head内)

index.phpのすべての入力欄で値があるかどうか調べる。
値がなければindex.phpに戻るコードを書く。

 

 if(!isset($_POST['name']) || !isset($_POST['email']) || !isset($_POST['msg']) ) {
    header( 'Location:./index.php' );
      exit;
 }

 

||は「又は」を表す記号。 
1行目「もし $_POST['name'] または $_POST['email'] 又は $_POST['msg']の値がなければ」
2行目「index.phpに遷移する」
3行目「この処理はそれで終了」

 

③入力値を表示する

1)isset関数の下に、$_POST['']の値をシンプルにする変数を追加する

 $name = $_POST['name'];
 $email = $_POST['email'];
 $msg = $_POST['msg'];

 

2)HTMLのtdタグ内に、変換した変数を表示するPHPのコードを書く。
このときタグやアンカーリンクを無効にするhtmlspecialchars関数を忘れないように。

 <p>以下の内容が入力されました。</p>
 <table>
 <tr><th>お名前:</th><td><?php echo htmlspecialchars($name, ENT_QUOTES,'UTF-8'); ?></td></tr>
 <tr><th>メールアドレス:</th><td><?php echo htmlspecialchars($email, ENT_QUOTES,'UTF-8'); ?></td></tr>
 <tr><th>お問い合わせ内容:</th><td><?php echo htmlspecialchars($msg, ENT_QUOTES,'UTF-8'); ?></td></tr>
 </table>

 

テストとしてアンカーリンク付きのテキストを入力して送信してみる。
リンクが無効になっていれば機能している証拠。

f:id:pleasure10501:20150609213500p:plainf:id:pleasure10501:20150609213506p:plain

[PHP]入力フォーム②

フォーム1−4 入力フォームの中に値が入っているかどうかをチェックする

isset関数を使う

 

if (isset (関数名) === true) {       ※「=== ture」は省略可能で
  echo '入力されています';         if (isset (関数名)) { 〜〜  とできる
} else {
  echo '入力されていません';
}exit;                 ※「exit」は処理終了の命令

 

関数名の値が取得できる → true → 「入力されています」 の表示
関数名の値が取得できない → false → 「入力されていません」 の表示

 

f:id:pleasure10501:20150607224401p:plain

if ( ! isset($_POST['name'])) {        !=「trueでない場合」という意味
  echo '入力されていません';
}
exit;

  ⇒ $_POST['name']に値が入っているのがtrueではない場合、という意味になる

 

f:id:pleasure10501:20150607224559p:plain

if ( ! isset($_POST[ 'name' ])) {        header関数でページを遷移する
  header ( 'Location: ./form1.html' ) ;     (リダイレクト機能)
exit;
}

項目を未入力で送信した場合に、isset関数で未入力を確認し、
header関数によって入力フォームのあるファイルに戻す仕組み

==============
header関数

header ( 'Location : 遷移先のURLやファイル名' ) ;

==============

同階層の時は . / ファイル名 (./はつけなくても同じ結果になる)

 

isset関数を使う意味 

ページをダウンロードし、改竄して送信する可能性がある
そのため、isset関数で各項目を保護していないと、値がなくても送信できてしまう。

※空白で送信しても、POSTの中身は空ではなく「空文字」で送信されている。

 

 

○入力値の情報を取得できる関数

var_dump ( ) 配列の情報(バイト数等)を取得し、表示する

print_r ( )

[PHP]入力フォーム①

HTMLの<form>で取得したデータをサーバーに送り、PHPで処理することができる。

流れ

ユーザー:①HTMLフォームに書き込み、送信

       ↓

サーバー:②メモリで受け取る

     ③Apacheで処理

     ④PHPが結果を返す  ※処理後、メモリからデータは消える

       ↓

     ⑤結果をHTMLでユーザーに返す

 

フォーム1−1

f:id:pleasure10501:20150607184045p:plain

form1.html

<body>
<p>以下を記入して、「送信する」を押して下さい。</p>
<form action="form1.php" method="post">
<p>お名前:<input type="text" name="namae" ></p>
<p>ご年齢:<input type="text" name="age" >才</p>
<p><input type="submit" value="送信する"></p>
</form>
</body>

 

action:データの送り先のファイル名やURL。ここではform1.php

method  : 送信方式。postかget

name属性:データの送り先(ここではform1.php)で変数処理をするための値

 

 

form1.php

form1.htmlからデータを受信し、処理をする。
受信は自動的に行うので、私たちは処理内容を書いていく必要がある。

<?php
$name = $_POST['namae'];   
$age = $_POST['age'];

echo $name;
echo $age;

 

処理の流れ

①form1.htmlのお名前欄に入力された値は、$_POST['namae']という変数で、
年齢欄に入力された値は$_POST['age']という変数で受け取る

※$_POST['']で受け取りたいものと同じname属性を[' ']に入れる  
      ↓
$_POST['namae'] の変数の値を 変数nameに代入
$_POST['age']      の変数の値を 変数ageに代入

 

②変数nameをブラウザに表示
 変数ageをブラウザに表示

 

表示結果
f:id:pleasure10501:20150607185916p:plain

 

フォーム1−2

表示結果を「あなたは〜〜です」となるようにする

form1.php

f:id:pleasure10501:20150607191323p:plain

<?php
$name = $_POST['name'];            →→
$age = $_POST['age'];

echo '<p>あなたのお名前は'.$name.'です。</p>';
echo '<p>あなたの年齢は'.$age.'才です。</p>';

_________________

下は全く同じ結果になる

echo '<p>あなたのお名前は'.$name.'です。</p>';
echo "<p>あなたのお名前は{$name}です。</p>";

文字列のときは上の書き方がよい。

 

 

フォーム1−3  HTML構造の中にPHPを組み込むこともできる

form1.php

<?php
$name = $_POST['name'];
$age = $_POST['age'];
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>form1</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<h1>フォーム1</h1>
<?php
echo '<p>あなたのお名前は'.$name.'です。</p>';
echo '<p>あなたの年齢は'.$age.'才です。</p>';
?>
</body>
</html>

 

[重要】 入力フォームに悪意のプログラム等を書き込まれるのを防ぐhtmlspecialchars関数

この状態の入力フォームはタグも書き込むことができる状態

 

f:id:pleasure10501:20150607201540p:plain  →   f:id:pleasure10501:20150607201635p:plain

 

スクリプトや悪意のプログラムを実行させ、破壊することもできてしまう。

これを防ぐ為にhtmlspecialchars関数を使用する。

 

echo htmlspecialchars(変数名, ENT_QUOTES,'文字コード');

 

効果: < & = " ' 等を実体参照文字に置き換えて、タグとして認識しなくなる。
    アンカーリンクやスクリプトを実行しないようにする

 

PHPを以下のように書き換える

f:id:pleasure10501:20150607202942p:plain

表示結果

f:id:pleasure10501:20150607203000p:plain