Jquery+PHPで極々簡単な掲示板を作る
掲示板を作るというよりも、ノンリロードで要素を追加しつつ、データをファイルに記録していくためのサンプルといったものです。
Jquery部分
$(document).ready(function(){ getLog(); //読み込み時に全ログを表示 //$("#button").click(function(){//これペケ $(document).on('click','#button',function(e){ // クリックで実行 2014-07-24 修正 var str = $("#str").val(); var date = getDate(); if(!str) return false; //本文無い場合は停止 $("#str").val(''); //空にする $.ajax({ type: "POST", url: "bbs/bbs.php", data: "str="+str+"&date="+date, success: function(xml){ $('#logs ul').prepend('<li>'+str+' <span class="date">'+date+'</span></li>'); //要素を追加 var len = $("#logs li").length; //要素の数 if(len > 10) getLog(); //延々追加されるので指定件数で空にして全表示 } }); $("#str").focus(); }); //旧ログを取得する function getLog(){ $('#logs ul li').remove(); //一旦空にする $.ajax({ url: "bbs/log.php", dataType:"xml", success:function(xml){ $(xml).find("item").each(function(){ var date=$(this).find("date").text(); var log=$(this).find("log").text(); $("<li></li>").html(log+' <span class="date">'+date+'</span>').appendTo("#logs ul"); }); } }); } //現在の日時を得る function getDate(){ var now = new Date(); var date; date = now.getFullYear()+"-"; date+= now.getMonth()+1+"-"; date+= now.getDate()+" "; date+= now.getHours()+":"; date+= now.getMinutes(); return date; } });
ボタンをクリックしたとき、本文があれば<li>に要素を追加して表示します。
あとは読み込み時にログを読み込んで表示する処理になります。チャットでは有りませんので、同時に二人で投稿しても反映はされません。反映させる場合は投稿時に getLog() を呼び出す事で、全ログを出す事は出来ます。
log.php
<?php $file = 'data.log'; //ログ記録ファイル $bbsLog = file($file); header("Content-type: application/xml"); echo '<?xml version="1.0" encoding="UTF-8" ?> ' . "\n"; ?> <rss> <?php foreach( $bbsLog AS $row): $log = explode("<>",$row); ?> <item xml:space="preserve"> <date><?php echo $log[0]; ?></date> <log><?php echo $log[1]; ?></log> </item> <?php endforeach; ?> </rss>
データファイルを開き、ログをXML形式で成形しています。
bbs.php
<?php $max = 10; //記録件数 $file = 'data.log'; //ログ記録ファイル $bbsLog = file($file); $fp = fopen($file,"w"); $str = htmlspecialchars($_POST['str'] , ENT_QUOTES , "UTF-8"); //特殊文字を HTML エンティティに変換する flock($fp,2); $line = $_POST['date'].'<>'.$str."<>\n"; //最新ログを書き込む fputs($fp,$line); for($i=0; $i < count($bbsLog); $i++){ //既存ログを書き込む if( $i == $max) break; //指定件数になったら停止 fputs($fp,$bbsLog[$i]); } flock($fp,3); fclose($fp); ?>
送信された文章をログに記録します。