MySQL

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

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

設定方法

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

JAVASCRIPT

<script type="text/javascript" src="https://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の使い方

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

MySQLでデータを間引く簡単な方法

データ自体はかなり細かく保存されているが、欲しいのは大まかなデータで良い時、
select文で条件をいろいろつけて取り出すのもひとつの方法だが、まずは一気に取得してしまってから、出力する前に間引くというのもひとつの方法。

例えば、カラムにタイムスタンプがあれば、以下の方法で、同一分は一度だけ出力することができる。

$output = "";
while($col = $rst->fetchRow(MDB2_FETCHMODE_ASSOC)){
$update_jf = date("Hi", $col['time']);
if($update_jf != $sumi_jf){
$output .= $col['main'];
}
#出力済時分にセット
$sumi_jf = $update_jf;
}

さらに簡単にしたいなら、以下の方法(2分の1に間引き)

$output = "";
while($col = $rst->fetchRow(MDB2_FETCHMODE_ASSOC)){
if($n % 2 == 0){
$output .= $col['main'];
}
$n++;
}

3分の1に間引きたければ以下の方法

$output = "";
while($col = $rst->fetchRow(MDB2_FETCHMODE_ASSOC)){
if($n % 3 == 0){
$output .= $col['main'];
}
$n++;
}

オープンソースのブログ・CMSプログラム『PivotX』はマルチブログに最適

PivotXとは
PivotXとは、PHPとMySQLで構築可能なオープンソース・ソフトウェアのブログ用CMSプログラムで、Ajaxを使い洗練された管理画面が特徴。
PivotXの特徴としてマルチブログ(複数ブログ)やマルチユーザー(複数ユーザー)での構築が簡単に出来ることや、データベース(DB)としてMySQLを使う以外に、データベースを使わないCMSシステムとしても構築が可能なため、安価なレンタルサーバーやホスティング利用等でデータベースが使えない場合でも導入可能なところが便利。
また、PivotXはデータベースの構造もシンプル。以前、WordPress mu を使いマルチブログを構築したことがあったが、ブログ数が増えるとMySQL内に膨大な数のテーブルが作られるため、データベースが一個しか与えられないレンタルサーバーで他のプログラムと混在させると管理が面倒になったりする一面があった。その点PivotXは少ないテーブル数でマルチブログを実現できるPivotXは手軽にインストール(構築・導入)しやすい。

concrete5(コンクリートファイブ)にお薦めのレンタルサーバーはこれ

concrete5インストールにあたり、concrete5(コンクリートファイブ)のインストールには以下の動作環境がポイントになる。

■concrete5の動作環境について
・Apache
・MySQL 4.1以上
・PHP5以上

上記の条件からサービス・価格からデジタルゲートお薦めするのはハッスルサーバー。月額208円〜、容量1G、メールアカウント無制限、メーリングリスト無制限、マルチドメイン、MovableType(MTOS)のインストールも簡単。
※CMS機能を希望するクライアントにconcrete5を使って構築した実績あり。

また、アクセス数やサーバーレスポンスがシビアなクライアント・案件には、アイルやリンククラブをお薦め。共有サーバーから専用サーバー、サーバースペックと豊富なプランから選択が可能。

なお、ロリポップは現在はMySQL4.0.24のためインストール不可だが、4.1にバージョンが上がれば、価格的にも魅力的。サーバー検討の際にはロリポップの仕様を一度確認することをお薦めする。

■デジタルゲートがお薦めする低価格レンタルサーバー&ホスティング

★★★
★★
ブログでハッスル、メールでハッスル、ハッスルサーバー
concrete5のインストール&稼働実績有り
 
★★★ アイルのホスティングサービス 5GB/945円〜
concrete5インストール可能なプラン有り
 
★★★ LHXのレンタルサーバー
concrete5インストール可能なプラン有り
 

★月々263円からオンラインショップを運営!
高機能カート・クレジット決済が簡単導入

MySQL4.0.24のためconcrete5のインストールは不可
 

concrete5(コンクリートファイブ)のインストール方法と注意するポイント

■concrete5の動作環境について

・Apache
・MySQL 4.1以上
・PHP5以上

※注意
レンタルサーバーやホスティング等を利用している場合の注意点として、concrete5はPrefixに対応していないため、インストールには空のデータベースが必要。
前回書いたようなオープンソース、WordPress、Xoops、Joomla!、Drupal、EC-CUBE、OsCommerce、Zen Cart、Movable Type OS、Open PNE、オリジナルのプログラム等を既にインストールしてしまっている場合はエラーが出てインストールできない。
新規にデータベースを作成するか、別途レンタルすること。

また、GDライブラリー等のライブラリが必要なので、自宅サーバー等で構築している人等は要チェック。

SEO対策等を考える場合には、mod_rewriteに対応していることもポイントとなる。

■concrete5のダウンロードについて

本家からダウンロードするのもいいが、文字化けや細かい修正が施されているUsagi Projectのサイトで提供されているconcrete5日本語版のダウンロードをお薦めする。

http://concrete5-japan.org/
concrete5をダウンロード

■concrete5のインストールについて

空のデータベースが用意できたら、文字化け回避のために接続照合順序を「utf8_genetal_ci」にしておく。
パーミッションの設定を事前にしてもいいが、インストール途中でチェックしてくれるので、その結果から変更していっても構わない。

・ダウンロードしたファイルを解凍してサーバーにアップロード。
・concrete5をインストールしたサーバーにアクセス。
・左側にチェク結果が表示されるから、不具合があれば修正、変更する。
・右のフォーム「サイト&管理者情報」(あとで変更可能)、「MySQLデータベース情報」を記入したら、「concrete5をインストール」ボタンをクリック。

あとは数分でインストールが完了する。

完了後にユーザー名とパスワードが画面に表示されるから、忘れずに書き留めること。

トラブルがなければ、ここまで30分とかからないはず。

次回は、設定について。

MySQLで複数のカラムの最大値を取得したいとき

テーブル内で1つのカラムに対しての最大値や最小値が欲しい場合、
max(カラム名)やmin(カラム名)として得ることは多い。

では、1つのレコードに対し、カラム1,カラム3,カラム3の中の最大値が欲しい場合はどうするか。

この場合、3つの値を取得してから比較することもできるが、
GREATESTを使うとそのまま最大値を得ることができる。

ちなみに、最小値はLEASTで得られる。

PHP+MySQLによるシステム作成

PHP+MySQLによる各種システムの作成を承ります。

イントラネットからインターネットまで、DB使用により
多くの情報を、より使いやすくお使いいただけます。

PHPとデータベースによる作成事例

専用端末を必要としないPC+ブラウザを使用することにより、専用端末導入コストを抑えることが可能。さらに使い慣れたインターフェースやパソコンによる別作業との同時進行が可能。情報の内容により、イントラネット、インターネット、携帯キャリア、自由に設計することが可能です。

作成事例(一例)

・社内データ管理システム(イントラネット)
社内に蓄積したデータをサムネール画像+キーワード+検索で呼び出せるように。

・予約受付システム(インターネット)
オンラインによる空き時間の確認、予約・変更、マイページでの履歴確認等。

・オンラインショップ(インターネット)
店舗では展示することの難しいロングテールの製品等をオンラインショップで販売。

・営業支援システム(携帯キャリア)
得意先から携帯電話を利用して、在庫の確認、単価や顧客毎の販売価格を含めた販売履歴の参照、発注。

・車いす比較サイト(インターネット) QOL+(Quality of Life Plus)
車いす製品の情報を掲載。比較、口コミ情報から車いす(車椅子・車イス)を選ぶ参考に。

デジタルゲートでは柔軟な発想と使う側に配慮したシステム設計により、お客様のビジネスをサポートいたします。