JavaScriptのみでデータがMySQLのように使えるjavascriptDBの使い方

データベース不要、PHP等が使えなくてもHTMLとJavaScriptだけでMySQLのようなselect文が使えるのはもちろん、whereでの条件設定も使えるという便利なjavascriptDBはお手軽なデータベース構築におススメ。

db_core.jsのダウンロードは以下のURLから

http://jsdb.sourceforge.net/usarho.html

設定方法

jqueryおよびダウンロードしたdb_core.jsを読み込む

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="db_core.js"></script>

使い方

body内でjavascriptDBを設定

JAVASCRIPT

<script>
var DBTest = new Database ("DBTest");
DBTest.CreateTable("members",Array("id","login","passwd","tel"));
DBTest.Insert("members",Array(1,"rosibel","clau","934856890"));
DBTest.Insert("members",Array(2,"joan","palafrugell","934856890"));
var selectArr2 = DBTest.Select('select passwd from members where login="joan"');
DBTest.View(selectArr2,document);
</script>

サンプルページ

上記のコードをブラウザで見るとただの文字だが、body内に以下のデータが書き出されている

<table>
<tbody>
<tr>
<td>palafrugell </td>
</tr>
</tbody>
</table>

上記サンプルの場合、1単語1件のみのデータだが、内容に関係無くテーブル形式のデータとして出力される

解説

1. データベースをセット

var DBTest = new Database ("DBTest");

2. テーブル名とカラム名をセット

DBTest.CreateTable("members",Array("id","login","passwd","tel"));

3. データを挿入

DBTest.Insert("members",Array(1,"rosibel","clau","934856890"));
DBTest.Insert("members",Array(2,"joan","palafrugell","934856890"));

4. MySQLと同様にwhereを使って条件抽出も可能

var selectArr2 = DBTest.Select('select passwd from members where login="joan"');

5. 書き出し

DBTest.View(selectArr2,document);

単独で扱うにはこのままでも良いが、ページ内に埋め込むことを考えると出力されるテーブルにidやclassを設定したりテーブル以外のタグで書き出したい時もあるだろう。
javascriptDBの出力データの成形およびタグの設定については次の記事で掲載する。

javascriptDBで出力されるタグを変更したい時はこの方法

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク