javascriptDB – デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

JavascriptDBを使い外部ファイルからデータを抽出してスタイルシートで成形する方法

2014年4月8日

·

master

以前の記事「AjaxでCSVを読み込みJavascriptDBを使いselectで抽出表示する方法」でAjaxを使って外部のCSVファイルを読み込み、JavascriptDBで表示するまでを解説したが、今回はまとめとして、スタイルシートでレイアウトして表示する部分を中心に説明する。
(さらに…)

AjaxでCSVを読み込みJavascriptDBを使いselectで抽出表示する方法

2014年4月3日

·

master

JavascriptのみでデータをMySQLのように扱えるJavascriptDBは既存のデータの抽出にも使える。
(さらに…)

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

2014年4月1日

·

master

JavaScriptのみでデータをMySQLのように使えるjavascriptDBの使い方（その1）で、javascriptDBの簡単な設定方法は説明したが、ページ内に埋め込むことを考え、スタイルシートが使えるように出力されるテーブルにidやclassを設定したり、タグを設定するための方法を説明する。

設定方法

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

JAVASCRIPT

<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>

同様にheader内で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 selectArr1 = DBTest.Select('select * from members');
var selectArr2 = DBTest.Select('select passwd from members where login="joan"');

var selected1 = mView(selectArr1);
var selected2 = mView(selectArr2);

$(document).ready(function(){
	$("#output1").html(selected1);
	$("#output2").html(selected2);
});

function mView (o){
	var res = "<table>";
	for(i = 0; i < o.length; i++){
		res += "<tr>";
		for(j = 0; j < o[i].length; j++){res += "<td>"+o[i][j]+"</td>";}
		res += "</tr>";
	}
	res += "</table>";
	return res;
}
</script>

ボディ内の書き出したい場所にid=”output1″、id=”output2″を設置

HTML

<body>

<h2>select * from members</h2>
<div id="output1"></div>

<h2>select passwd from members where login="joan"</h2>
<div id="output2"></div>

</body>

サンプルページ

上記サンプルにアクセスすると以下のデータが出力される

<h2>select * from members</h2>

<div id="output1">
	<table>
		<tbody>
		<tr>
			<td>1</td>
			<td>rosibel</td>
			<td>clau</td>
			<td>934856890</td>
		</tr>
		<tr>
			<td>2</td>
			<td>joan</td>
			<td>palafrugell</td>
			<td>934856890</td>
		</tr>
		</tbody>
	</table>
</div>

<h2>select passwd from members where login="joan"</h2>

<div id="output2">
	<table>
		<tbody>
		<tr>
			<td>palafrugell</td>
		</tr>
		</tbody>
	</table>
</div>

解説

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-1. セレクト文にて全データを出力（mySQLと同様）

var selectArr1 = DBTest.Select('select * from members');

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

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

5. 各抽出データをテーブルに成形 ※1

var selected1 = mView(selectArr1);
var selected2 = mView(selectArr2);

6. 各データをjqueryを使って書き出し

$(document).ready(function(){
	$("#output1").html(selected1);
	$("#output2").html(selected2);
});

※1 javascriptDBの結果をテーブルに成形するfunction

function mView (o){
	var res = "<table id='my-tbl'>";
	for(i = 0; i < o.length; i++){
		res += "<tr>";
		for(j = 0; j < o[i].length; j++){res += "<td>"+o[i][j]+"</td>";}
		res += "</tr>";
	}
	res += "</table>";
	return res;
}

※1で javascriptDBの結果をテーブルタグで書き出すように設定しているが、サンプルのように<table>にidを設定（<table id=’my-tbl’>）したり、必要に応じて<hd>の代わりに<th>を使ったり<td class=’col-ab’>のようにすることができる。
あとは書き出したタグに対応したスタイルシートを設定すればいい。

CSS

<style>
h2 {
	margin-bottom:1px;
	font-weight:normal;
	font-size:1em;
}
table {
	border-collapse: collapse;
}
table td {
	padding:2px 8px;
	text-align:center;
	border:1px solid #ccc;
}
</style>

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

2014年4月1日

·

master

データベース不要、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で出力されるタグを変更したい時はこの方法