投票画面の作成
#05 投票画面を作ってみよう
http://dotinstall.com/lessons/poll_php_v2/9705
を参考に、投票画面の作り込み
編集するのは index.php
まず、
http://サーバーIP/poll_php
にアクセスしてエラーがないのを確認
投票は form で行う
アクションを行うのは、同じファイル
つまり index.php なので
action=”” というように空でOK
もし、 action.php などを作成して行うなら
action=”action.php” というようになる
今回なら
<form action=”” method=”POST”>
今回の場合、画像が欲しいので
フリー画像 素材 料理
などで検索して、画像を４つ用意する
そして、４つの写真の名前を
photo1.jpg
photo2.jpg
photo3.jpg
photo4.jpg
という名前にして保存し
サーバーに転送
私の場合、Ubuntu がクライアントマシンなので
cd $HOME/ピクチャ/
で画像がおいてあるフォルダに移動して
scp *.jpg 192.168.10.151:/var/www/html/poll_php/
でファイルを転送
windows なら
winscp あたりで転送できるし
Android なら AndFTP Pro で scp が使えるので
こちらで転送することも可能
ipod touch の場合 scp が使えるのが見当たらないので
SFTP で転送
そして、画像に
class=”candidate”
data-id=”1″
というように番号を振っておく
これは後の jQuery 処理に使う
ソースにすると
<img src=”photo1.jpg” class=”candidate” data-id=”1″>
<img src=”photo2.jpg” class=”candidate” data-id=”2″>
<img src=”photo3.jpg” class=”candidate” data-id=”3″>
<img src=”photo4.jpg” class=”candidate” data-id=”4″>
というように４つ用意する
そして、送信するために
ボタンを作成する
<input type=”submit” value=”投票する”>
そして、
クリックされた写真に応じて番号が入るようにする
投票の仕方は
<input type=”hidden” id=”answer” name=”answer” value=””>
で
クリックされた写真に応じて１～４の値が入るようになる
とりあえず、ここまでやって写真が表示されるか確認
動画みたいに４分割されていないけど
ブラウザを縮小してみると分割されるので問題ないと思う
次に、
<input type=”hidden” id=”answer” name=”answer” value=””>
のところに値が入るようにするので
jQuery を使うことになる
ライブラリをダウンロードして保存でもいいけど
どのみちネットにつながってるなら
リンクしたほうが効率的なので
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
で読み込む
追記するのは head タグの中
これで、このときの処理を form タグの下あたりに追記していく