FC2ブログ

投票画面の作成

投票画面の作成

#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">

今回の場合、画像が欲しいので
フリー画像 素材 料理
などで検索して、画像を4つ用意する

そして、4つの写真の名前を
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">
というように4つ用意する

そして、送信するために
ボタンを作成する

<input type="submit" value="投票する">

そして、
クリックされた写真に応じて番号が入るようにする

投票の仕方は
<input type="hidden" id="answer" name="answer" value="">

クリックされた写真に応じて1~4の値が入るようになる

とりあえず、ここまでやって写真が表示されるか確認

動画みたいに4分割されていないけど
ブラウザを縮小してみると分割されるので問題ないと思う

次に、
<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 タグの下あたりに追記していく
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック