AjaSQLを利用した掲示板です。

　サーバー側ソースには触らずに、 JavaScript側からのSQLデータベース制御ロジックのみによって動作するBBSになっています。

　サーバー側PHPはセキュリティ処理とデータベースへのつなぎを行うだけの仕組みで、結果セット受信後のダイナミックなHTML生成処理もすべてクライアントが行います。

　通常の掲示板のようなページ丸ごと更新の無い、軽快な動作が可能になっています。

　また、データベースもコピーしてパーミッションを設定するだけのシンプルなSQLiteを使いました。

　ちなみに今回は、AjaSQLライブラリのドラッガブルフロートや透明フェイドイン関数も利用してみています。


【→sample.htm 1 】
【→sample.htm 2 】同じスクリプトですがライブラリ構成が少し違います


　以下の通りAjax、AjaSQL、BBS用の3層のライブラリを読み込んで使います。

<!-- 
 【AjaSQLサンプル】
  掲示板サンプル
-->

<!-- 暫定Ajaxライブラリ jslb_ajaxxxx.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "./ajasql/jslb_ajax036.js"></script>

<!-- 暫定AjaSQLライブラリ ajasqlxxx.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "./ajasql/jslb_ajasql027.js"></script>

<!-- AjaSQL BBS用 HTML構築ライブラリ ajasql_formsxxx.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "./ajasql/ajasql_bbs001.js"></script>

<script language = "JavaScript">
<!--

  //起動時処理
  window.onload=doIni

  //
  //SQL送信===========================================
  //


  //発言済みデータをリクエスト
  function showMsg(oj)
  { 
    //SQL文作成
    //  (テーブルから カラム「id」降順でmax.value件リクエスト)
    var sql = 'SELECT * FROM ' + sqlite01.tblName 
            + ' ORDER BY id DESC ' 
            + ' LIMIT '+oj.form.max.value+';';
            
    //SELECT文を送信  
    asql_sendSQL(sqlite,sql)
  }
  
  //検索文字列を含むデータをカラム「name」「msg」から検索
  var seachText = ''
  function seachMsg(oj)
  {
    //検索文字列をセット
    var seachText = oj.form.sel.value
    
    //SQL文作成
    //  (カラム「name」「msg」にsel.valueを含むデータを「id」降順でmax.value件リクエスト)
    var sql = 'SELECT * FROM ' + sqlite01.tblName
            + '  WHERE  name LIKE "%'+oj.form.sel.value+'%" '
            + '      OR msg  LIKE "%'+oj.form.sel.value+'%" '
            + '  ORDER BY id DESC '
            + '  LIMIT '+oj.form.max.value+';';
    
    //SELECT文を送信  
    asql_sendSQL(sqlite,sql)
  }

  //検索文字列を含む発言データをカラム「msg」から検索
  function seachMsgByText(oj,text)
  {
    //検索文字列をセット
    seachText = text
    
    //SQL文作成
    //  (テーブルから カラム「msg」が「%text%」なものを降順でmax.value件リクエスト)
    var sql = 'SELECT * FROM ' + sqlite01.tblName
            + '  WHERE msg LIKE "%'+ text +'%" '
            + '  ORDER BY id DESC '
            + '  LIMIT '+oj.form.max.value+';';

    //SELECT文を送信  
    asql_sendSQL(sqlite,sql)
  }

  //前後のデータをリクエスト
  function showMsgByOFFSET(oj,offset)
  { 
    
    //SQL文作成
    //  (テーブルから カラム「id」降順でoffset件目からmax.value件リクエスト)
    var sql = 'SELECT * FROM ' + sqlite01.tblName 
            + ' ORDER BY id DESC ' 
            + ' LIMIT '+oj.form.max.value+' OFFSET '+offset+' ;';
            
    //SELECT文を送信  
    asql_sendSQL(sqlite,sql)
  }

  //未取得分の発言済みデータのみをリクエスト
  function sabunGetMsg(oj)
  { 
    //この関数はまだ実装していません
    //
  
    //SQL文作成
    //  (テーブルから カラム「id」の未取得分を降順でリクエスト)
    var sql = 'SELECT * FROM ' + sqlite01.tblName 
            + ' WHERE id > '+ ajasql_bbs_newId
            + ' ORDER BY id DESC ;';
            
    //未取得分リクエストのコールバック時起動関数をonSabunGotに指定
    //sqlite.ini.callback = onSabunGot
    
    //SELECT文を送信  
    //asql_sendSQL(sqlite,sql)
  }

  //発言
  function insertMsg(oj)
  {
  
    if(oj.form.msg.value=='メッセージ欄' || 
       oj.form.msg.value==''||
       oj.form.name.value=='' )return
    
    //とりあえず改行と,を暫定禁止、クオートを全角に。 IEが\r\nで処置できなくなってたので%0D%0Aで処置
    //ただし、他のブラウザ用に\r\n処理も生かす
    msg = oj.form.msg.value.split('\n').join('')
    msg = msg.split('\r').join('')
    msg = encodeURI(msg)
    msg = msg.split(getRN()).join('')
    msg = decodeURI(msg)
    
    //全角へエスケープ
    msg = msg.split(',').join('，')
    msg = msg.split("'").join('’')
    msg = msg.split('"').join('”')
    msg = msg.split(';').join('；')
    msg = msg.split('&').join('＆')

    //SQL文作成
    var sql = 'INSERT INTO '+sqlite01.tblName
            + '  VALUES( '
            + '    Null ,'                      //id
            + '    "'+oj.form.name.value+'",'   //名前
            + '    "'+msg+'" ,'                 //メッセージ
            + '    "" ,'                        //
            + '    "#SERVER_NOW#",'             //時間
            + '     ""'                         //
            + '  );';
    
    //発言後用のコールバック時起動関数をonInsertedに指定
    sqlite.ini.callback = onInserted
    
    //INSERT文を送信 
    asql_sendSQL(sqlite,sql)

    //発言クリア
    oj.form.msg.value = ''
  }
  
  
  //
  // コールバック関数
  //
  
  var ary =''
  
  //コールバック関数1(サーバーから着信時に起動)
  function onSelected(resoj,reqoj)
  {
    //レスポンスデータを配列化 ( array[行][列] で取り出せるようにします)
    ary = getRowColArray(resoj,reqoj)
    
    if(ary.length>1){
      //発言表示用DIV へ出力
      msges.innerHTML=outputMsges(ary,headBgcolor,rowsBgcolors)
    } else   ajasql_bbs_last = true
    
    //検索ワードに背景色をつける
    if(seachText != ''){
      var wkmsges = msges.innerHTML.split(seachText)
      msges.innerHTML = wkmsges.join("<span style='background-color:#aacccc'>"+seachText+"</span>");
    }

  }
  

  //コールバック関数2(書込み後、サーバーから着信時に起動)
  function onInserted(resoj,reqoj)
  {
    //レスポンスデータを配列化 ( array[行][列] で取り出せるようにします)
    ary = getRowColArray(resoj,reqoj)
    
    //発言表示用DIV へ出力
    msges.innerHTML="---"+outputMsges(ary,headBgcolor,rowsBgcolors)
    
    //表示
    sqlite.ini.callback = onInserted2
    showMsg(bbsform);
  }

  //コールバック関数3(書込み後、サーバーから着信時に起動)
  function onInserted2(resoj,reqoj)
  {
    //レスポンスデータを配列化 ( array[行][列] で取り出せるようにします)
    ary = getRowColArray(resoj,reqoj)
    
    //発言表示用DIV へ出力
    msges.innerHTML=outputMsges(ary,headBgcolor,rowsBgcolors)

  }

//-->
</script>

<style>
<!--
/*
  AjaSQL BBS 用CSS
*/

/* 入力フォームのCSS指定 */
#formdiv .ajasqlBBStable { border-collapse:collapse ;padding:0px;margin:0px;background: #dddddd; }
#formdiv .ajasqlBBStable tr{ padding:0px ;margin :0px ;background: #dddddd;}
#formdiv .ajasqlBBStable td{ padding:0px ;margin :0px ;background: #dddddd;}
#formdiv .ajasqlBBSname  { width:180px;height:18px;padding:0px; margin:0px;background:orange;font-size:12px;}
#formdiv .ajasqlBBStextarea { width:180px;height:54px;padding:0px;margin:0px;background:gold;font-size:12px;}
#formdiv .ajasqlBBShatugenButton{ width:36px;height:72px;padding:0px;margin:0px;background:#ddd;font-size:12px;}
#formdiv .ajasqlBBSkensakuBox{ width:180px;height:12px;padding:0px;margin:0px;background:#ddd;font-size:12px;}
#formdiv .ajasqlBBSkensakuButton{ width:40px;height:12px;padding:0px;margin:0px;background:#ddd;font-size:12px;}
#formdiv a:link     { color: #222222;}
#formdiv a:visited  { color: #333333;}
#formdiv a:active   { color: #000099;}
#formdiv a:hover    { color: orange; }
/* 発言表示用DIVのCSS指定 */
#msgesdiv table td{font-size:12px;}
-->
</style>

<body>
</body>
</html>

ファイル構成

ファイルは、サンプルHTMLファイルの他に、Ajax、AjaSQL、BBS用のライブラリ3層のライブラリとサーバー側ゲートウエイとしてのPHPとSQLiteデータベースファイルで構成されます。 最下層のAjaxライブラリは、XMLHttpRequestによる送受信を担当し、AjaSQLライブラリがそれを利用してSQLデータベースの制御を担当しています。その上に、フォームや発言出力用のHTML生成を行うBBS用のライブラリが乗るっているという形です。

【HTML/JavaScript/PHP】

(Webアクセス可エリア)
　　　　│
　　　　├ajasql-bbs.htm　　　//サンプル(0604)<--メンテナンスはこれだけ
　　　　│
　　　　├bbsdb/(0707)
　　　　│　│
　　　　│　├mydb_bbs.db  　　　　　//SQLite掲示板用データベース(0606)
　　　　│　└mydb_bbs_yobi.db 　　　//データベース予備(0600)
　　　　│
　　　　└ajasql/(0705)
　　　　　　│
　　　　　　├.ad/(0705)
　　　　　　│　│
　　　　　　│　├.allow_db_table　　//アクセス制限設定用ファイル(調整中)(0604)
　　　　　　│　└.allow_ip　　　　　//アクセス制限設定用ファイル(調整中)(0604)
　　　　　　│　
　　　　　　├ajasql_gw037.php 　　　//サーバー側AjaSQLゲートウエイ(0604)
　　　　　　├jslb_ajasql037.js　　　//暫定AjaSQLライブラリ(0604)
　　　　　　└jslb_ajax039.js　　　　//暫定Ajaxライブラリ(0604)


*(0604)等はパーミッションですが、必要に応じて設定してください。

データサンプル

  CREATE TABLE mydb1(
    id integer primary key,    //id
    name text ,                //名前
    msg text ,                 //メッセージ
    memo text ,                //メモ
    date text,                 //日時
    ip text                    //ip
  );

1|test|test||2005-08-30 17:26:02|
2|test|どもー||2005-08-30 17:26:09|
3|テスト|こんにちは、あいうえお||2005-08-30 17:40:09|
4|aaa|aaa||2005-08-30 18:12:20|
　　:
　　:

必要な環境