HONDAのAndroid アプリ, Web アプリ開発備忘録

このブログはHONDAがAndroidアプリの開発開始と同時に作成したもので備忘録として記しています。最近Web系に就職が決まったのでwebアプリも勉強していきます。

お問合せシステムの構築~初めてのxamppとphpとmysql~(2)

さっそく前回に引き続きphpで勉強したことをまとめます。

 

1. Hello Worldを作ってみるPHP

早速以下のコードを打ってみます。

check.phpの作成
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>PHPの基礎やで</title>
</head>
<body>
 
<?php
print 'ようこそ';
?>
 
</body>
</html>
 
この<?php ~~ ?>で囲っているのがphpであるという宣言
ここからはみ出すとhtmlの書き方と同様になる.
実際にこのphpファイルを起動すると
"ようこそ"と出ているはずである(仮説)
 

 

point1 : print '';で文字列を表示する.
 
をブラウザで確認する.

 

(ポートを8080にした人は
 
f:id:havoc0214:20160715135221p:plain
確認することができた(実証)
ここでFireFoxの開発エンジン->ページソースで
どのようにphpが書かれているかを見てみる.

f:id:havoc0214:20160715140018p:plain

f:id:havoc0214:20160715135724p:plain

開発ソースではphpの文章が見れないようになっている!!
これはオブジェクト指向的に"カブセル化"が絡んでいるのかもしれない...

 

2. 入力画面.htmlの作成

お問合せシステムの入力画面をつくる。

本書*1どおり名前、アドレス、問い合わせの三つの入力をしてもらうよう

index.htmlをつくる.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>PHPの基礎やで</title>
</head>
<body>
<form method="post" action="check.php">
ニックネームを入力してください<br />
<input name="nickname"type="text"style="width:100px"><br />
アドレスを入力してください<br />
<input name="email"type="text"style="width:200px"><br />
ご意見を入力してください<br />
<input name="goiken"type="text"style="width:300px"><br />
<input type="submit"value="送信">
 
</form>
</body>
</html>

 

form タグには method, actionがある.
actionはmethodのpostの送信先, アンカータグのようなもの
methodにはpost, getがある. いかによると
 getとpostの違い
  • getには送信するデータ量の制限がある
  • getは送信したデータ内容が送信先のサーバーにログとして残ってしまうことがある
  • postには送信するデータ量の制限がない
  • 一概には言えないがgetはサーバー側にあるデータの取得に適している
  • 一概には言えないがpostはユーザー側が情報を送信するのに適している

 

 
input type ="submit"でinputしたtextを送信する,
valueは送信ボタンの名前である。
 
今回はpostの送信先はcheck.phpなので
受け取るコードを書く.
 

3. 入力を受け取るcheck.phpの作成~サニタイジングを乗り越えて~

早速check.phpでindex.htmlの変数を受け取る

<?php
$nickname = $_POST['nickname'];
$email = $_POST['email'];
$goiken = $_POST['goiken'];
?>
 
print $_POST['nickname'];
ここで"input text ="nickname""のnicknameが参照されている.
 
ただこれだとnicknameなどに、直接htmlタグを打ち込まれると
そのタグが反応してしまう恐れがある.
これを クロスサイトスクリプティング(XSS)と呼ぶらしい
 
これを退治する(サニタイジング)ために以下のコードで包みあげる
Co××sの包み込みハンバーグである.

f:id:havoc0214:20160715151235j:plain

$nickname = htmlspecialchars($nickname);

$email = htmlspecialchars($email);

$goiken = htmlspecialchars($goiken);

 

これでサニタイジング完了なのである.

この作業は覚えておく

 

あと入力が打ち込まれていないと

"入力してや!!"と打ち込むようにif文など使ってやると

それっぽくなる。

 

最終的なcheck.php

 

<?php

$nickname = $_POST['nickname'];
$email = $_POST['email'];
$goiken = $_POST['goiken'];
 
$nickname = htmlspecialchars($nickname);
$email = htmlspecialchars($email);
$goiken = htmlspecialchars($goiken);
 
 
if($nickname=='')
{
    print 'ニックネームが入力されてないのん';
    print '<br />';
}else{
    print 'ようこそ';
    print $nickname;
    print '様';
    print '<br />';
}   
if($email=='')
{
    print 'emailが入力されていないのん ';
    print '<br />';
}else{
    print 'メールアドレス:';
    print $email;
    print '<br />';
}   
if($goiken=='')
{
    print 'ご意見が登録されてないのん ';
    print '<br />';
}else{
    print 'ご意見「';
    print $goiken;
    print '」<br />';
}   
 
if($nickname==''||$email==''||$goiken==''){
    print '<form>';
    print '<input type="button" onclick="history.back()" value="戻る">';
    print '</form>';
}else{
    print '<form method="post" action="thanks.php">';
    print '<input type="button" onclick="history.back()" value="戻る">';
    print '<input type="submit" value="OK">';
    print '</form>';
}
?>
 
</body>
</html>

大体こんな感じ.


後半のif文else文について説明しておく。

どれか一つが入力されてない場合(if文)は

戻るボタンで入力画面に戻ってもらう.

(history.back()を使うことで入力した履歴を保持したまま戻る

→再度入力しなくてもよいので, 入力してないところのみ埋めてもらう)


後半のelse文については問い合わせ内容を送信するかの

確認用である。戻りたい場合は戻るボタン、これでいい場合は

受け付けました!という画面(thanks.php)に内容を飛ばす.

 

3. thanks.phpの作成~hiddenの活用~

check.phpにてsubmitされた

名前、アドレス、問い合わせ内容を

受け取り表示させてみる.

thanks.php

 

<?php
$nickname = $_POST['nickname'];
$email = $_POST['email'];
$goiken = $_POST['goiken'];
 
$nickname = htmlspecialchars($nickname);
$email = htmlspecialchars($email);
$goiken = htmlspecialchars($goiken);
 
print $nickname;
print '様<br />';
print 'ご意見ありがとうございました<br />';
 
print 'いただいたご意見「';
print $goiken;
print '」<br />';
print $email;
print 'にメールを送りましたのでご確認ください<br />';
?>
 
</body>
</html>
 
これで飛んでみると
あら不思議。エラーが出るはず。
何チャラempty~~みたいなエラーが出るのが確認できるはず。
 
その理由としては
$_POSTは<form>~</form>タブ内の画面入力データを本来は受け取る.
check.phpに入力画面は存在しないので引数はemptyになってしまう.
 
こ↑こ↓がはまりました。
check.phpに入力画面がないということに理解するのに時間がかかりました。
 
これの解決方法としては, 
index.htmlからいただいて変数に代入したものを送ってやればいい。
point2 : hiddenの使用
 
    print '<input name = "nickname" type = "hidden" value = "'.$nickname.'">';
    print '<input name = "email" type = "hidden" value = "'.$email.'">';
    print '<input name = "goiken" type = "hidden" value = "'.$goiken.'">';
 
をcheck.phpにかませてやる
hiddenを使うことで, 
<form>~</form>の枠を隠すことができる.
画面に表示させることなく
変数を渡すことができるのだ.
詳しくはこ↑こ↓を参照
 
 
value = " "の間を".$変数."とドットを挟むことで変数の値を連結する.
valueの中には変数の中に入っている文字列が入っていることになる.
nameで名づけられたもので値がvalueのものが送信されるという構図になる.
 
ここまでで,
入力画面(index.html)
入力を受け取る画面(check.php)
受け取りましたと表示する画面(thanks.php)
この三つの画面を作りました。
 
次回はMySQLを触っていきたいと思います.