ファイルを配置する

dowasureDBjsフォルダ内のjsフォルダとphpフォルダを、目的のWebアプリと同じフォルダ内にコピーします。

※dwrdb.jsから「php/スクリプト.php」というパスで参照しているので、 phpフォルダの名前と位置には注意してください。

データベースを作成する

phpMyAdminなどを使って、dowasureDBで利用するデータベースとユーザーを作成します。

データベース情報を設定する

phpフォルダ内の「00_dbinfo.php」をテキストエディタで開き、MySQLのデータベースに合わせて各設定を行います。 また、認証システムの最初のユーザーのユーザー名、パスワードも設定しておきます。
データテーブルはdowasureDBjsがデータ（ユーザー情報を除く）を保存するテーブルの名前です。

/*
 * ここに利用するデータベースの情報を入力し、ブラウザでinitDB.phpにアクセスしてください。
 */
//サーバアドレス
$mysql_server = "localhost:3306";

//データベースに接続するためのユーザー名
$mysql_user = "dwrdbjs";

//データベースに接続するためのパスワード
$mysql_password = "password";

//データベース名
$mysql_database = "dwrdbjs";

//データテーブル名
$mysql_datatable = "dwrdbjs";

/* 
 * 以降はdowasureDBjsの認証システムに登録される最初のユーザーの情報を入力しておきます。
 * 何らかのユーザー名でログインしない限り、新しいユーザーの追加ができないためです。
 */
//ファーストユーザー名
$dwrdb_firstuser = 'admin';

//ファーストユーザーのパスワード
$dwrdb_fupassword = 'password';

初期設定を実行する

「01_initDB.php」にWebブラウザでアクセスします。このスクリプトが00_dbinfo.phpで指定したデータベース内に 必要なテーブルを作成し、最初のユーザーの情報を登録します。 「データベースの初期設定に成功しました。」と表示されれば成功です。

dwrdb.jsの読み込み

<script src="js/dwrdb.js"></script>
					

レコードの読み込み

DwrDBObjectオブジェクトの静的メソッドloadArrayFromDBを使って、 データベースから「testarray」という変数名のレコードをすべて読み込みます。 結果の配列変数を、2つめの引数に指定した関数で受け取ります。

//既存レコードの読み込み
DwrDBObject.loadArrayFromDB('testarray',
	function(retarray){
		if(retarray.length < 0){
			testarray = [];
		} else {
			testarray = retarray;
			updateTable(testarray);
			//5秒ごとに表を更新
			window.setInterval(autoUpdateTestArray, 5000);
		}
	}
);

配列変数の更新

DwrDBObjectオブジェクトの静的メソッドupdateArrayによって配列変数を更新します。 このメソッドは「配列変数名」「配列変数のArrayオブジェクト」「結果を受け取る関数」の3つの引数を取り、 指定された配列変数を更新した後、第3引数の関数を呼び出します。 関数には更新レコード数（新規含む）と新規レコード数が渡されるので、更新があったかどうかを確認できます。

//テーブルの自動更新
function autoUpdateTestArray(){
	DwrDBObject.updateArray('testarray', testarray,
		function(numupdate, numnew){
			if(numupdate>0){
				//表を更新
				updateTable(testarray);
			}
		}
	);
}

レコードの新規作成

新しいレコードを作成するには、まずDwrDBObjectのインスタンスを作成します。 インスタンスメソッドのcreateNewRecordOnDBを呼び出すと、データベース上に対応するレコードが作成され、 recordIDプロパティが自動設定されます。これでDwrDBObjectを保存できる状態になります。
後はオブジェクトに任意のプロパティを設定し、writeToDBメソッドで書き込みを行います。 writeToDBメソッドには変数名を渡す必要があります。書き込み完了時に何らかの処理をしたい場合は、 第2引数に関数を設定します。

※いきなりwriteDBを呼び出した場合でも、自動的にcreateNewRecordOnDBを呼び出すよう改良しました。 つまり、createNewRecordOnDBメソッドは使う必要がありません。

//レコードを作成
function addRow(event){
	//新しいオブジェクトの作成
	var newobj = new DwrDBObject();
	//データベース上に新レコード作成
	newobj.createNewRecordOnDB(
		function(){
			//プロパティを追加してデータベースに保存
			newobj.dummyfield = 'ダミー';
			newobj.dummyfield2 = 'ダミー';
			testarray.push(newobj);
			newobj.writeToDB('testarray', 
				function(){
					//表を更新
					updateTable(testarray);						
				}
			);
		}
	);
}

レコードの保存

サンプルでは、表内のテキストボックスが更新されると、それをデータベースに反映するようにしています。 DwrDBObjectオブジェクトのインスタンスメソッドwriteToDBを呼び出します。 引数には変数名と書き込み完了時に呼び出される関数を指定します。

//データ更新
function changeInput(event){
	var input = event.currentTarget;
	var obj = testarray[input.dataindex];
	obj[input.datapropname] = input.value;
	obj.writeToDB('testarray', 
		function(){
			//表を更新
			updateTable(testarray);						
		}
	);
}

ユーザーの一覧取得

DwrDBUserオブジェクトの静的メソッドgetAllUsersを呼び出すと、引数に指定した関数に ユーザーとニックネームを記録した無名オブジェクトの配列が渡されます。

//データベースからユーザー一覧を取得
DwrDBUser.getAllUsers(
	function(userarr){
		g_userlist = userarr;
		for(var i=0; i<g_userlist.length; i++){
			var newtr = document.createElement('tr');
			var newtd = document.createElement('td');
			……中略……
			newtd = document.createElement('td');
			newtd.innerHTML = g_userlist[i].username;
			newtr.appendChild(newtd);					
			newtd = document.createElement('td');
			newtd.innerHTML = g_userlist[i].nickname;
			newtr.appendChild(newtd);
		

ユーザーの追加

DwrDBUserオブジェクトの静的メソッドaddUserを利用して、ユーザーを追加します。 ユーザー名のバリデーションなどは特に行っていないので、 必要に応じてJavaScript側で記述する設計です。 追加完了後に第4引数の関数を呼び出しますが、特に必要なければ関数を省略しても構いません。

function clickAddUser(event){
	var username = document.querySelector('#txt_username').value;
	var password = document.querySelector('#txt_password').value;
	var nickname = document.querySelector('#txt_nickname').value;
	DwrDBUser.addUser(username, password, nickname,
		function(userobj){
			updateUserTable();
		}
	);
}

パスワードやニックネームの変更

登録済みのユーザーのパスワードやニックネームを変更するには、 DwrDBUserの静的メソッドchangePassword、changeNicknameを呼び出します。 こちらもバリデーションなどは特に行っていないので、必要に応じてJavaScript側で処理します。 設定完了後に第3引数の関数を呼び出しますが、特に必要なければ関数を省略しても構いません。

function clickChangePassword(event){
	var newpassword = document.querySelector('#txt_newpassword').value;				
	var sel = getSelectedUser();
	if(sel<0) return;
	DwrDBUser.changePassword(g_userlist[sel].username, newpassword);
}
function clickChangeNickname(event){
	var newnickname = document.querySelector('#txt_newnickname').value;				
	var sel = getSelectedUser();
	if(sel<0) return;
	DwrDBUser.changeNickname(g_userlist[sel].username, newnickname,
		function(userobj){
			updateUserTable();
		}
	);
}