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

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の定義を追加します。

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

<link rel="stylesheet" href="./vote/vote.css" type="text/css">
<script language="javascript" type="text/javascript" src="./vote/prototype.js"></script>
<script language="javascript" type="text/javascript" src="./vote/app.js"></script>

 

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

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

例1:http://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]としてください。

<div id="avg<$mt:EntryID$>">
<script language="javascript" type="text/javascript"><!–
vote(<$mt:EntryID$>);
// –></script>
</div>
<script language="javascript" type="text/javascript" src="/vote/starbtn.js"></script>

 

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>’);

 

これで、設定は完了です。

今回は、Ajaxで非同期通信を行って、動的にページを書き換えるという事に挑戦してみました。面白いですね。


参考にさせて頂いたサイト

Ajax.Request [prototype.js]|Ajax入門|Ajaxの基礎と応用の学習|StudyNet

◇PerlとAjax – 日々量産 ~the ry’s world~[http://rying.net/blog/diary.cgi?mode=comment&no=185]

prototype.jsのAjax.Requestについて教えて下さい。 <div id=id1></div><a href=javascript:ajax1("id1");>ajaxtest1</a> <div id=id2></div><a href=javascript:ajax1("id.. – 人力検索はてな


全然関係ない話

全く関係有りませんが、A-JAXといえば個人的にはコナミのこのゲームを思い出します。ゲーム出だしの音楽がかっこいいんですよねー。

 

追記:2010.10.14 16:32
vote.zipがダウンロード出来ない状態だったので修正。

追記:2011.02.03 22:54
Ver.0.20に合わせて設置方法などを追記・修正。

タグ : , , , ,