jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

Jquery+PHPで極々簡単な掲示板を作る

2014年3月7日
この記事は掲載から1930日経過しています。
情報が古い可能性が有りますのでご了承下さい

掲示板を作るというよりも、ノンリロードで要素を追加しつつ、データをファイルに記録していくためのサンプルといったものです。

サンプル

Jquery部分

[js]
$(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;
}

});
[/js]

ボタンをクリックしたとき、本文があれば<li>に要素を追加して表示します。

あとは読み込み時にログを読み込んで表示する処理になります。チャットでは有りませんので、同時に二人で投稿しても反映はされません。反映させる場合は投稿時に getLog() を呼び出す事で、全ログを出す事は出来ます。

log.php

[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>
[/php]

データファイルを開き、ログをXML形式で成形しています。

bbs.php

[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);
?>
[/php]

送信された文章をログに記録します。

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP