Linux & Android Dialy

投票結果をDB格納
#09 投票結果を格納しよう (1)
http://dotinstall.com/lessons/poll_php_v2/9709
を元に
投票された結果をデータベースに格納していく
編集するのは index.php
まず、エラーがなかったときの処理から
if(empty($err)){
でエラーがないことを確認
そして、DB接続
$dbh = connectDb();
connectDb();
は、config.php で作成したユーザ関数
接続できたら、SQL発行
$sql = “insert into answers (answer, remote_addr, user_agent, answer_date, created, modified) values (:answer, :remote_addr, :user_agent, :answer_date, now(), now())”;
そして、SQLの実行
prepare() を使うのは、プレースホルダーの関係と
セキュリティのため
そして、 プレースホルダーの設定
$params = array(
“:answer”=>$_POST[‘answer’],
“:remote_addr”=>$_SERVER[‘REMOTE_ADDR’],
“:user_agent”=>$_SERVER[‘HTTP_USER_AGENT’];
“:answer_date”=>date(“Y-m-d”)
);
とする
:answer
は回答の番号
:remote_addr
はREMOTE_ADDRで取得したIPアドレス
REMOTE_ADDR　は
http://phpjp.com/REMOTE_ADDR.htm
に例が乗っている
:user_agent”
はブラウザの種類
:answer_date
が回答した時間

#08 エラーチェックをしてみよう
http://dotinstall.com/lessons/poll_php_v2/9708
を参考に
投票された内容をチェックしてエラーが発生した場合の処理を実装
まず、トークンが入っていて
セッションの中のものと同じかチェックする
if(empty($_SESSION[‘token’] || $_POST[‘token’] != $_SESSION[‘token’]){
で判定できる
empty($_SESSION[‘token’]
は token が空という意味
$_POST[‘token’] != $_SESSION[‘token’])
は、token とおくられてきた token が違うなら
という意味
｜｜はもしくは、というOR判定
これで、どちらかの条件にあてはまるものを検出できる
もし、該当するなら
echo “不正な操作です”;
exit;
で終了する
続いて、エラーチェック
回答は１～４なので
if(!in_array($_POST[‘answer’],array(1.2.3.4)){
で判定する
in_array() は
配列に指定した値があるか検索する
http://php.quus.net/array/in_array.php
を参考
今回なら
answer の値が１～４の間に入っているか調べている
!がついているので、条件式としては
入っていないなら、という意味になっている
この場合、エラーを出すように
$err =”写真を選択してください”;
とする
このままではエラーがでないので、HTML部分にソースを追記
body タグの下あたりに
<?php if(!empty($err)): ?>
<p style=”color:red”><?php echo h($err); ?></p>
<?php endif; ?>
と追記する
if(!empty($err)):
は$err に値が入っている場合、
つまりエラーがある場合という意味
で
この場合
<?php echo h($err); ?>
でエラーを表示している

CSRF対策の実施
#07 CSRF対策を施そう
http://dotinstall.com/lessons/poll_php_v2/9707
を参考に
セキュリティを高めるためにCSRF対策を施す
sha1はハッシュで、暗号化とは異なり求み戻せない
暗号化の場合は、鍵があれば元に戻せる
今回、編集するファイルは index.php
まず、投稿されたかどうか判定する
if($_SERVER[‘REQUEST_METHOD’] != ‘POST’)
!= ‘POST’はPOSTではない
つまり投稿されていない状態という意味
else のほうに、投稿されたときの処理を書く
投稿前の処理で、CSRF対策をしておく
CSRF対策は、トークンをフォームにセットして
投稿された後に、このフォームから投稿されたものか
値をチェックすることで判定する
これは、偽者のフォームなど、悪意あるフォームからの投稿を防ぐため
まず、セッションをみて
トークンがセットされていないなら、トークンをセットする
if(!isset($_SESSION[‘token’])){
とすれば判定できる
isset() は指定した値が入っているかチェックする
http://php.net/manual/ja/function.isset.php
を参考
トークンの中身は推測されにくいランダムな文字列を使う
このときに sha1() を使う
暗号化した文字列を取得するのに使う
http://phpjp.com/sha1.htm
を参考に
この中で mt_rand() という乱数を発生させる関数
これについては
乱数を生成する(rand, mt_rand)
http://www.phpbook.jp/func/math/index1.html
を参考
そして
uniqid()
これは
マイクロ秒単位の現在時刻にもとづいた、接頭辞つきの一意な ID を取得
一意というのは、他と被らないただ１つという意味
uniqid() で true が設定されていると
２３文字になる
これについては
http://phpspot.net/php/man/php/function.uniqid.html
を参考
これらを元に
$_SESSION[‘token’] = sha1(uniqid(mt_rand(),true));
これでハッシュ化されたランダムな文字列を作り
token に設定している
また、セッションを使うため
require_one() の下あたりに
session_start();
を追記する
ここからセッション開始になる
また、HTMLのフォーム部分に
セッショントークンを埋め込むため
<input type=”hidden” name=”token” value=”<?php echo h($_SESSION[‘token’]); ?>”>
というように
type=”hidden” にして画面には表示されないようにして
おく
実行後、ブラウザでソースをみると、値がセットされているのがわかる

投票結果を jQuery で取得
#06 投票結果を取得してみよう
http://dotinstall.com/lessons/poll_php_v2/9706
を参考に
クリックされた画像のIDを取得するための処理をjQueryで実装
編集するのは index.php
の form タグの下あたりに
script タグで作成する
$(function(){
$(‘.candidate’).click(function(){
$(‘#answer’).val($(this).data(‘id’));
});
});
という処理になる
jQuery関連を勉強するとわかるけど
.candidate は
class=”candidate”
#answer は
id=”answer”
という意味
this はそのもの、というような意味
とりあえず、実働実験するので
input type=”hidden” だと見えないので
input type=”text” として値が取得できているか確認する
このままだと、写真をクリックしたときに
どれを選択したかわからないから
新しいクラスをつける
まず、CSSを設定する
head タグの中に
<style>
.selected {
border:4px solid red;
}
</style>
これで、選択した画像の回りに赤い線がでるようになる
この動作を jQuery で制御する
まず、すべての selected を外す
$(‘.candidate’).removeClass(‘selected’);
そして、選択したものに selected を追加する
$(this).addClass(‘selected’);
これで、再度読み込んでみると
選択した写真の回りに赤い線がでるようになり
わかりやすくなる
ここまでできたら、
<input type=”text” id=”answer” name=”answer” value=””>
から
<input type=”hidden” id=”answer” name=”answer” value=””>
へ戻す