HTML5 BuilderでSQLiteを使用する

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(表示する列の列名)

アプリケーションを実行します。

テーブルのデータが表示されました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください