ロゴ
menu
HOME > ｊQuery・Javascript > Jquery+PHPで極々簡単な掲示板を作る

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

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

サンプル

Jquery部分

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$(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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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);
?>

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