Ajaxの勉強がてらに投票プログラムを作ってみた。

Posted by kumacchi on 2010年10月14日 , No comment

20100386

記事の下の方に上の様な星が表示されるようになっているかと思います。

Ajaxのお勉強がてらに投票プログラムを作ってみました。

Ajax(JavaScript)+CGI(perl)+DATAベース(SQLite)で出来ています。

とりあえずできたのでブログに付けてみました。

せっかくなので配布してみますので活用できる方は自由に活用してみてください。さくらインターネットの共用サーバやXREAやCORE SERVERなら動くはずです。

少なくともCGI(perl)とSQLiteが使える環境が必要です。大抵のレンタルサーバであれば問題ないと思います。

lightboxなどを設置したことがある方なら、同じように設置できるかと思います。

設置方法

1.AJaxのライブラリのprototype.jsを下記のサイトからダウンロードします。

Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications

2.投票プログラムを下からダウンロードします。

【ダウンロード】

3.上でダウンロードしたzipファイルを適当な展開（解凍）後サーバーにアップロードします。展開するとvoteというフォルダが出来ると思うので、そのフォルダごとサーバの適当な場所にFTPなどでアップロードします。

4.prototype.jsもアップロードしたvoteフォルダの中にアップロードします。

5.ブログのヘッダに以下のスタイルシートとjavaScriptの定義を追加します。

パスは、自分の環境にあわせてください。

6.app.jsを適当なテキストエディタで修正します。

app.jsの3行目でvote.cgiを呼び出しているので、パスを自分の環境にあわせてください。書き換えたらサーバに上書きでアップロードしてください。

例1:https://blog.kumacchi.com/tools/vote/vote.cgiが実際のURLである時、下に指定するパスは /tools/vote/vote.cgiとなります。

例2:http://example.com/vote/vote.cgiであった場合、指定するパスは、/vote/vote.cgiとなります。

function vote(id,p){
    var query = "id="+ id + "&p="+p;
    new Ajax.Request( "./vote.cgi" , {
        method: "post" ,

7.vote.cgiを適当なテキストエディタで修正します。

vote.cgiの14行目あたりの下の箇所を自分の環境にあわせます。

修正後はサーバーに上書きでアップロードしてください。

例1:http://example.com/vote/vote.cgiである場合、指定するパスは[/vote/img]または[http://example.com/vote/img]となります。

#画像のパス環境に合わせて設定。http://から星の画像がある場所までを指定
my $IMG = ‘http://example.com/vote/img‘;

IPアドレスのチェックによる同一IPからの連続投票を抑制するには16行目付近の下記の場所を1にします。デフォルトは1なので通常はそのままです。

# 0:IPチェックしない 1:同一IPからの連続アクセスを抑制
my $IPCHK = 1;

8.ブログの記事部分のテンプレートに以下の様に書き加えます。ここでは、Movable Type(以降MT)を例に説明します。

ブログ記事のテンプレートの適当な箇所に下のコードを挿入します。

starbtn.jsへのパスは自分の環境に合わせて修正してください。

例1:starbtn.jsへのパスがhttp://example.com/vote/starbtn.jsである場合、指定するパスは[/vote/starbtn.js]または[http://example.com/vote/starbtn.js]としてください。

starbtn.jsの中では星の画像へのパスが指定してあるので環境に合わせて修正してください。

例1:starbtn.jsへのパスがhttp://example.com/vote/starbtn.jsである場合、指定するパスは[/vote/img/star1.gif～/vote/img/star5.gif]または[http://example.com/vote/img/star1.gif～http://example.com/vote/img/star2.gif]としてください。

starbtn.js

document.write(‘<div class="star">’);
document.write(‘<ul>’);
document.write(‘<li>BAD!</li>’);
document.write(‘<li><a href="#" onclick="vote(‘+entryid+’,1);return false;" title="1"><img src="img/star1.gif" alt="星1" /></a></li>’);
document.write(‘<li><a href="#" onclick="vote(‘+entryid+’,2);return false;" title="2"><img src="img/star2.gif" alt="星2" /></a></li>’);
document.write(‘<li><a href="#" onclick="vote(‘+entryid+’,3);return false;" title="3"><img src="img/star3.gif" alt="星3" /></a></li>’);
document.write(‘<li><a href="#" onclick="vote(‘+entryid+’,4);return false;" title="4"><img src="img/star4.gif" alt="星4" /></a></li>’);
document.write(‘<li><a href="#" onclick="vote(‘+entryid+’,5);return false;" title="5"><img src="img/star5.gif" alt="星5" /></a></li>’);
document.write(‘<li>GOOD!</li>’);
document.write(‘</ul>’);
document.write(‘</div>’);