$restRoute);
1. ItemsController.php を開きます
• RestServer → restapps → apps → modules → default → controllers →
ItemsController.php ダブルクリックします
• 右の領域にソースコードが表示されます
ハンズオン – データベースへのアクセス
確認のための修正をします
2. 14行目, 15行目 を削除します
• 他の行を削除しない様お気をつけください。削除後保存します
3. 変更したファイルを IBM i に送ります
① XXX.XXX.XXX.XXX → ファイル → ルート → / → www →
zendsvr → isucXXX → restapps → apps → modules → default を開きます
② “PHPエクスプローラー”上の ItemsController.php を ”リモートシステム”上の controllers フォルダに ドラッグアンドドロップ します
13| public function getAction(){
14| echo “REST ful GET Action”;
15| return;
ハンズオン - データベースへのアクセス
正しく修正できたかを確認する
1. インターネットエクスプローラを開きます 2. URL バーに以下を入力し実行します
• http://XXX.XXX.XXX.XXX:10088/i5phpXXX/rest/Items/1
• 以下が表示されれば OK です
以上でデータベースアクセスが正常に行える事が確認できました
[ {
"CODE":"1",
"KANA":"¥u30aa¥u30ec¥u30f3¥u30b8¥uff11¥uff10¥uff109 ",
"NAME":"¥u30aa¥u30ec¥u30f3¥u30b8¥uff11¥uff10¥uff10¥uff05 ", "KIND":"¥u98f2¥u6599 ",
"PRICE":"201.00", "SQTY":"40",
"DESC":"¥u611b¥u5a9b¥u307f¥u304b¥u3093¥uff11...省略 ", "WH":"¥uff23¥u5009¥u5eab ",
"DEL":" "
}
]
- REST ful サービスの利用-
スマートフォン
PhoneGap の説明
ハイブリッド
ネイティブアプリとWebアプリのハイブリッド環境 が提供される
ネイティブ
アプリケーション
Web
アプリケーション
PhoneGap の説明
Android プロジェクト
プロジェクト・ディレクトリ構造(操作対象のみ)
RestClient/ ---> Android プロジェクト・トップ |-src/
| |-com.example.rest/
| |-MainActivity.java ---> PhoneGap 用に変更 |
|-assets/
| |-www/ ---> 作成するアプリケーションを配置するところ | |-images/ ---> アプリで使用するイメージ配置用
| | |-icons/
| | | |-js/
| | |-iui04/ ---> iUI JavaScript ライブラリ | | |-jquery-min.js ---> jQuery JavaScript ライブラリ | | |-json2.js ---> JSON JavaScriptライブラリ | |
| |-cordova-2.1.0.js ---> PhoneGap JavaScript ライブラリを追加 | |-restapp.html ---> REST ful Webアプリ
| |- libs
| |-cordova-2.1.0.jar ---> PhoneGap Java ライブラリ を追加 |- res
| |-xml/ ---> PhonGap XMLリソース を追加 |
|- AndroidManifest.xml ---> PhoneGap用に変更
画面の作成
iUI ライブラリの使用
スマートフォンに最適化されたサイトを作成できる
html + javascript + css で作成する
iPhone イメージ Android イメージ 最適化なし
ソースの解説(クライアント 側)
PhoneGap & iUI 関係
restapp... PhoneGap, iUI などを利用する宣言
<link rel="stylesheet" href="js/iui04/iui.css" type="text/css" />
<link rel="stylesheet" href="js/iui04/ext-sandbox/t/android/android-theme.css"
type="text/css" />
<script type="text/javascript" charset="utf8" src="js/cordova-2.1.0.js"></script>
<script type="application/x-javascript" src="js/iui04/iui.js"></script>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
・CSS の読み込み
・js ライブラリの読み込み
- REST ful サービスの利用-
スマートフォン
商品検索 → 商品一覧
アプリの動き
商品一覧
商品検索から商品一覧を表示
ソースの解説(クライアント 側)
スマートフォン
restapp.html ... searchItem ファンクション
/* 商品検索 */
function searchItem(kana, name, kind, wh){
$.ajax({
type:'GET',
url: SERVER_NAMES+’/rest/items/search?kana='+kana+'&name='+name+'&kind='+
kind+'&wh='+wh, async: false,
success: function(msg){
$('ul#Results').empty();
var results = JSON.parse(msg);
if(jQuery.trim(results) !== ""){
for(var result in results){
$('ul#Results').append('<li><a href="#frmItem" onClick="getItem('+
results[result].CODE +', 0);">'+ results[result].NAME +'</a></li>');
} }else{
$('ul#Results').append('<li><a href="#home">該当商品なし</a></li>');
} },
error: function(req, status, errthrow){
alert(errthrow);
} });
}