HTML5 BuilderでSQLiteを使用して、簡単なWebアプリケーションを作成してみました。
初期設定
HTML5 Builderの初期設定では、SQLiteが使用できません。
設定ファイルを編集して、SQLiteを使用できるようにします。
(参考:SQLite 3 – HTML5 Builder)
C:\Program Files (x86)\Embarcadero\HTML5 Builder\5.0\php\php.ini.templateをエディタで開きます。
次の2行を修正します。
変更前
;extension=php_pdo_sqlite.dll
変更後
extension=php_pdo_sqlite.dll
変更前
;extension=php_sqlite3.dll
変更後
extension=php_sqlite3.dll
以上で、準備完了です。
サンプルデータの作成
HTML5 Builderでアプリケーションを作成する前に、サンプルのデータベースを作成します。
今回はPythonで作成しました。
#!python2.7
# -*- coding: utf-8 -*-
import sqlite3
con = sqlite3.connect(u"test.db", isolation_level=None)
con.execute(u"create table example (id integer, name varchar(20))")
con.executemany(u"insert into example values (?, ?)",
[(1, u"Delphi XE3"), (2, u"C++Builder XE3"), (3,u"HTML5 Builder"),
(4, u"デルファイ"), (5, u"シープラスプラス")])
c = con.cursor()
c.execute(u"select* from example")
for row in c:
print row[0], row[1]
con.close()
作成したデータベースファイルは、HTML5 Builderのプロジェクトと同じフォルダーに配置します。
Webアプリケーションの作成
HTML5 Builderを起動して、サーバーWebアプリケーションを作成します。
Page1コンポーネントのプロパティを設定します。
- Encoding プロパティ => Unicode(UTF-8)
ここで一度プロジェクトを保存しておきます。
先ほど作成したサンプルのデータベースファイル(test.db)を、プロジェクトを保存したフォルダーにコピーします。
ツールパレットからDataAccessカテゴリーにあるDatabaseコンポーネント、Datasourceコンポーネント、Tableコンポーネントを配置します。
各コンポーネントのプロパティを設定します。
Database1コンポーネント
- DatabaseName プロパティ => test.db(データベースファイルのファイル名)
- DriverName プロパティ => sqlite
Datasource1コンポーネント
- DataSet プロパティ => Table1
Table1コンポーネント
- Active プロパティ => true
- Database プロパティ => Database1
- MasterSource プロパティ => Datasource1
- TableName プロパティ => example(テーブル名)
データを取得する寿便ができました。
取得したデータを表示します。
ツールパレットにあるData ControlsカテゴリーのDBRepeaterコンポーネントを配置します。
ツールパレットにあるStandardカテゴリーのLabelコンポーネントを2つDBRepeater1の上に配置します。
各コンポーネントのプロパティを設定します。
DBRepeater1
- DataSource プロパティ => Datasource1
Label1
- DataField プロパティ => id(表示する列の列名)
Label2
- DataField プロパティ => name(表示する列の列名)
アプリケーションを実行します。
テーブルのデータが表示されました。