Presentation slides for Cena-DTA in PHP Conference 2011, Tokyo.

1. Cena-DTA ： HTML5 の ローカル DB を使った アプリ開発 https://github.com/asaokamei/Cena-DTA 亀井 亜佐夫 @asao_jp WorkSpot.JP

5. http://www.workspot.jp/cena/index.php

7. http://twitter.com/asao_jp

9. 2002 ～ 現在

14. title: VP of Engineering

15. about Cena-DTA

18. Database's Everywhere! HTML5 browser brings Database to everywhere. server Master Database PC local db smart phone local db notebook local db

21. Synchronizing Relational Data #1 create table contact( contact_id SERIAL, name text ); create table connect( connect_id SERIAL, contact_id int, method text ); contact_id name 9 Alan 10 George connect_id contact_id method 100 9 twitter 101 10 facebook 102 10 Tumblr

22. Synchronizing Relational Data #2 contact_id name 9 Alan 10 George 11 Taro connect_id contact_id method 100 11 twitter 101 10 facebook 102 10 Tumblr 103 11 Google+ created: contact_id=11, name=Taro modified: connect_id=100 contact_id=11 created: connect_id=103 contact_id=11 method=Google+ ローカル DB で追加・修正

23. Synchronizing Relational Data #3 contact_id name 9 Alan 10 George 11 Giro 12 Taro connect_id contact_id method 100 11 twitter 101 10 facebook 102 10 Tumblr 103 11 mixi 104 11 Google+ contact_id=11 already occupied! relation to contact_id=11 is broken! サーバーと同期すると･･･ ID を付け替えればいいのですが、とても面倒 ...

27. Introducing Cena-DTA #3 12 12 Cena.contact.new.11 contact_id=11 name=Taro 12

29. model: table, AR, etc.

33. cena_id for action=rel.

34. demo

35. Cena-DTA Demo create table contact100 ( contact_id SERIAL, name text, gender char(1), type char(1), date date, ); create table contact110 ( connnect_id SERIAL, contact_id int, method text, type char(1) );

36. inside Cena-DTA

39. works on Chrome, and probably on Safari...

40. Cena-DTA Overview server side html5 browsers html form ajax ORM/database WebSqlDB HTML5 display/web forms internet

43. Client Side: cenaJq Overview html5 browsers ajax HTML5 display HTML5 template WebSqlDB WebIndexDB internet

44. Client Side: HTML5 template <table id=&quot; cena_post &quot;> <tr id=&quot; cena_env_src &quot; style=&quot;display:none;&quot;> <td> <input type=&quot;text&quot; name=&quot; contact_name &quot; class=&quot; cena_element &quot; /> <span class=&quot; cena_element &quot; cena=&quot;cena_id&quot; ></span> </td> <td align=&quot;center&quot;> <label> <input type=&quot;radio&quot; name=&quot; contact_gender &quot; class=&quot; cena_element &quot; value=&quot;1&quot;>male</label><br> <label> <input type=&quot;radio&quot; name=&quot; contact_gender &quot; class=&quot; cena_element &quot; value=&quot;2&quot;>female</label> </td>...

45. Client Side: data and template var callback100 = function( env_data ) { $() .cena( { // initialize cena. env_src: ' #cena_env_src ', // source envelop id. env_post: ' #cena_post ', // id to post bound envelope. bind_type: ' replace ' // show contents. }) .cena( 'add', env_data ) .cena( 'bind' ) .cena( 'clean' ) ; } bind_type: - replace : 内容の表示 - populate : フォームとして表示

46. Client Side: retrieving data $() .cena( 'restart' ); $() .cenaSql() .cenaSql( 'find', // set search options #2 { column: opts.find_column, value : opts.find_value, type : opts.find_type }) .cenaSql( { // set search options #1 model: 'dao_contact100', offset: opts.contact_offset, limit: opts.contact_limit, order: opts.order_column, ascend: opts.order_ascend }) .cenaSql( 'get', callback100 ) ;

47. Client Side: local DB table structure create table if not exists cena_env( cena_name text unique, cena_id, scheme, model, type, id integer, act, column, value, state ); テーブルひとつで作ってます。 初期設計のままなので、構造は変更する予定･･･

48. Server Side: cenaPhp sql wrapper data model active record Cena maps ORM internet browser

49. Server Side: saving data to DB static function proc_cena( &$cena_recs, $doAct=NULL ) { $do_models = self::$models; foreach( $do_models as $model ) { // for all models foreach( $get_types as $type => $get_ids ) { // for all types foreach( $get_ids as $id => $actions ) { // for all ids $cena = Cena::getCena( $model, $type , $id ); $cena->manipulate( $actions ); try { if( have_value( $doAct ) ) $cena->do_function( $doAct ); } catch( ormataInvalid_DbaRecord_Exception $e ) { $num_err ++; } $cena_recs[ $model ][] = $cena; } // end loop on ids } // end loop on types } // end loop on models }

50. summary

58. Security issue.

60. Other language/platform???

61. Need killer demo/application/service!

62. End of Presentation ご清聴ありがとうございました。