データベースの用意

「MariaDB on Ubuntu18.04 LTS」
https://qiita.com/nanbuwks/items/c98c51744bd0f72a7087

のようにして、インストールします。

アプリ作成

最初のメニューでWebを選びます。

App を選び、メニューバーの Insert-Property で Name を db, Typeを MySQLCommunityServer とします。

もう一度 App を選び、Insert-Event Handler-Open で以下を書く


self.db = New MySQLCommunityServer
self.db.Host = "127.0.0.1"
self.db.UserName = "webdb"
self.db.Password = "password"
self.db.DatabaseName = "test"
Try
  self.db.Connect
  // proceed with database operations here..
Catch error As DatabaseException
  MessageBox("The database couldn't be opened. Error: " + error.Message)
  Return
End Try
try
  self.db.SQLExecute("set names utf8 collate utf8_general_ci")
  self.db.SQLExecute("set character set utf8")
  self.db.SQLExecute("use test")
Catch error as DatabaseException
  MessageBox error.Message
end try

WebPage1に移ってText Fieldを２つ、ボタンを１つドラッグドロップします。ボタンをダブルクリックしてActionに以下を書きます。

var Record as new DatabaseRow
dim temp as string
temp = tempField.Text
dim hemi as string
hemi = hemiField.Text
try
  app.db.ExecuteSQL("INSERT INTO sensor ( sensor,temp,hemi ) VALUES (1,"+temp+","+hemi+");")
Catch error as DatabaseException
  MessageBox error.Message
end try

次に、ボタンをもう一つ置き、ダブルクリックしてActionに以下のコードを書きます。


var temp,hemi as double
var rs as RowSet
try
  rs =app.db.SelectSQL("SELECT id,sensor,temp,hemi FROM sensor")
Catch e as DatabaseException
  messagebox e.Message
end try
try
  for each row as databaserow in rs
    temp = val(row.column("temp").stringvalue)
    hemi = val(row.column("hemi").stringvalue)
    Listbox1.AddRow( row.column("id").StringValue,row.column("sensor"),format(temp,"##.#"),format(hemi,"##.#") )
  next
Catch e as DatabaseException
  messagebox e.Message
end try

最後に、List Box を WebPage1 に置き、カラム数を４にします。

ラベルをつけたりOKを書き直したりして体裁を整えます。

実行

本来は、Playボタンを押すと内蔵Webサーバが起動し、ブラウザが自動で起動してアプリ画面が表示される。
今回は、コーディングは Windowsで、実行は Linuxサーバで動かした。MySQL/MariaDB も Linuxで動かしている。
こうした理由は日本語でのMySQL/MariaDB を Xojo で使う場合 Windowsでは問題があり、Xojo IDEがLinuxでは問題があるからである。

ローカルLAN同士で接続し、以下のように実行する。
「Xojo でリモート開発」
https://qiita.com/nanbuwks/items/4743756186060c3c3d20

Webアプリであるが、 Remode Debugger Desktopでなければ動かなかった。
リモートでなければWebブラウザが自動で起動するが、今回は手動でWebブラウザを http://(LinuxサーバのIPアドレス):8080
を開く。

デスクトップアプリと違うところ

「ojo で Web+DBアプリを作ってみる (SQLite編)」と同じ内容：

WIndow1 → WebPageとなる
ListBox という名前は予約されているためListBox1という名前にした
テキストフィールドを使ったhemiFieldの値： hemiField.Value は hemiField.Text になる