VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)
VN:F [1.9.22_1171]
Rating: 7.0/10 (3 votes cast)

Setelah banyak tertunda karena banyak kegiatan dan mengerjakan beberapa project sampingan yang lain, akhirnya saya bisa melanjutkan serial posting yang berkaitan dengan aplikasi sencha touch sebelumnya : belajar sencha touch 1 dan belajar sencha touch 2 dan belajar sencha touch 3.

Posting kali ini juga berkaitan dengan posting tentang membuat aplikasi dengan iOS, Android dan Blackberry.

Dalam buku membuat aplikasi iOS, Android dan Blackberry itu gampang, saya memberikan contoh dengan menggunakan framework jQuery Mobile serta database yang digunakan adalah SQLite.

Dari banyak masukan para pembeli buku yang menghubungi saya, banyak sekali pertanyaan atau permintaan yang berkaitan dengan database di server bukan SQLite.  Secara sederhana dan singkat sudah saya jawab baik di comment atau lewat support ticket di http://sabukhitam.com/contactsupport/

Dan kali ini saya berikan dalam bentuk yang lebih detail dilengkapi dengan contohnya. Oh ya, seluruh kode contoh yang saya buat bisa di download di github.

Ada dua bagian dari aplikasi yang akan dibuat:

  1. Server Side: menggunakan PHP
  2. Client Side: menggunakan Sencha Touch 2.0

Server Side:

Berikut ini adalah source code dari file PHP yang akan menghandle request dari aplikasi sencha touch kita:

<?php

//Database connection
$con = mysql_connect("localhost","securesa_sencha1","123456");
if (!$con){
  die('Could not connect: ' . mysql_error());
  }else{
    mysql_select_db("securesa_test1", $con);
}

// securesa_test1,123456Tt

$action = $_GET['do'];

switch($action) {

    case "insert":
        $materialCode=$_POST['MaterialCode'];
        $materialName=$_POST['MaterialName'];
        $materialDescription=$_POST['MaterialDescription'];

        $sql="insert into material (MaterialCode,MaterialName,MaterialDescription) values ('$materialCode','$materialName','$materialDescription') ";
        if (!mysql_query($sql))
        {
            die('Error: ' . mysql_error());
        }
        echo json_encode("1 record added");

    break;

    case "delete":
        $tobeDeletedID=$_GET['id'];
        $sql = "delete from material where id=$tobeDeletedID";
        $result=mysql_query($sql);
        echo "sudah di hapus material id # $tobeDeletedID";
    break;

    case "list":
        //return database
        $sql = "select * from material order by id desc";
        $result = mysql_query($sql);

       // $aResult = array();
        while($row = mysql_fetch_assoc($result))
        {
            $aResult[] = $row;
         }

        //print_r($aResult);
        if (!empty($aResult)) {
            header('content-type: application/json; charset=utf-8');
            header("access-control-allow-origin: *");
            if(isset($_GET['callback'])) {
                echo $_GET['callback'] . '(' . json_encode($aResult) . ');';
            }else{
                echo json_encode($aResult);
            }
        }else{
            header('content-type: application/json; charset=utf-8');
            header("access-control-allow-origin: *");
            $aResult[0]="Belum ada record";
                echo json_encode($aResult);

        }

    break;
    default:
    //return nothing
    break;

}

Aplikasi PHP tersebut di atas tentu masih sangat sederhana dan belum memperhitungkan security dll. Hanya contoh saja, yang jelas script php tsb akan mengembalikan data dalam format json ketika diminta info list materialnya, dan juga bisa menghandle untuk memasukan data baru.

Struktur Table di MySQL nya, saya lupa menyertakan struktur table MySQL yang saya gunakan pada eksperimen di atas:

CREATE TABLE IF NOT EXISTS `material` (
  `id` int(11) NOT NULL auto_increment,
  `MaterialCode` varchar(255) collate latin1_general_ci NOT NULL,
  `MaterialName` varchar(255) collate latin1_general_ci NOT NULL,
  `MaterialDescription` text collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=4 ;

Nanti jika sempat saya akan update juga misalnya untuk menghapus record atau melakukan editing. Tapi tentu anda bisa mengerti dan mengembangkan sendiri dari contoh yang saya buat.

Client Side: Sencha Touch versi 2.0

Untuk client side, kali ini saya mencoba menggunakan framework sencha touch versi 2.0. Sencha touch konon lebih cepat dari versi sebelumnya. Dan memang lebih “asyik” ngutak ngatiknya dibandingkan misalnya jQuery Mobile.

Seperti pada posting sebelumnya Sencha Touch ini juga mendukung MVC atau Model View Controller. Hanya jujur saja, berkaitan dengan controller nya ini, saya masih agak bingung pake nya.. he he he. :)

Berikut ini penampakan struktur aplikasi contoh yang saya buat:

Sencha Touch MVC Struktur Folder

Sencha Touch MVC Struktur Folder

Di dalam folder controller dan model serta store juga masing masing ada file js nya.

Saya tidak akan terlalu banyak membahas detail dari Sencha Touch pada posting kali ini.

Yang berkaitan dengan pengambilan data di Sencha Touch, kita perlu berkenalan dengan yang namanya data store. Data store ini nantinya akan berkaitan dengan model. Model sendiri dalam sencha touch berkaitan dengan struktur datanya.

Nah berikut ini source dari Material.js yang ada dalam folder store:

var materialStore = new Ext.create('Ext.data.Store', {
     storeId: 'materialStore',
      model: 'Material',
             proxy: {
               type: 'scripttag',
               url : 'http://securesabukhitam.com/project/testsenchaapp/?do=list',
                 reader: {
                    type: 'json'
                },
                writer: {
                    type: 'json'
                }
               },
             autoLoad: true,
             remoteFilter : true
 });

Anda bisa melihat saya membuat sebuah variable object bernama materialStore yang meng-extend data.Store.

Yang perlu anda perhatikan baik baik adalah pada bagian type=scripttag  dan url nya. URL adalah url tempat file PHP server side yang kita buat sebelumnya. Format data yang kita buat adalah json.

Berikut ini adalah cuplikan dari kode tab material list:

Ext.define('MyApp.view.MaterialList', {
    extend: 'Ext.List',
    xtype: 'listcard',

    config: {
        iconCls: 'list',
        title: 'Material List',
        defaults: {
            styleHtmlContent: true
        },
        emptyText: 'Tidak ada data',
        itemTpl: '{MaterialCode}: {MaterialName}',
        store: 'materialStore',
        rendered: false,

                listeners: {
                    show: function(){
                        materialStore.load();
                        console.log("Loading store");
                    },
                    itemtap: function(list, index, item, record) {
                        Ext.Msg.alert('Material Detail', '<ul><li><b>Code:</b>'+record.data.MaterialCode+'</li><li><b>Name</b>: '+record.data.MaterialName+
                                      '</li><li><b>Description</b>: '+record.data.MaterialDescription+'</li>');
                        //alert(record.data.MaterialName);

                     }
                }

    }
});

Setelah aplikasi sencha touch tersebut kita buat, kita bisa melakukan test di browser safari.

Sencha Touch + Phonegap + iOS

Jika kita sudah melakukan test di browser, aplikasi yang kita buat ini bisa jalan tanpa error, selanjutnya kita bisa memindahkan file html beserta file js nya ke dalam project phonegap untuk selanjutnya bisa kita jadikan aplikasi iOS (iPhone atau iPad), Android ataupun Blackberry.

Untuk detail bagaimana cara menggunakan file-file html tsb menjadi aplikasi native dengan phonegap, bisa dibaca di buku saya : Membuat aplikasi iOS, Android dan Blackberry itu gampang.

Sekarang mari kita tampilannya:

Sencha Touch + Phonegap + iOS

Sencha Touch + Phonegap + iOS

 

 

Salam

 

Yuan

Demo Aplikasi dari contoh yang saya buat di atas bisa dilihat di bagian video di bawah ini. Maaf screen cast nya pakai screen flow demo :)

 


Related Video

Loading the player …

VN:F [1.9.22_1171]
Rating: 7.0/10 (3 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)

Pengunjung Datang Ke Blog Ini Mencari Info Tentang :

11 Responses to Contoh Aplikasi Sencha Touch 2.0 + Phonegap + iOS App

  1. Bertho says:

    Ok om yuan….
    Langsung dicoba dulu ne applikasinya..:)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Bertho says:

    Mas yuan, mau nanya ne…
    Database aplikasi di server mana ya mas?
    Kalo saya mau taruh di server saya gmana?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  3. Bertho says:

    Lapor ne mas, saya mencoba meng-insert data, tetapi setelah saya lakukan pengecekan di menu list ternyata ada record yg bertambah tetapi tidak ada data alias kosong.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Yuan Yudistira says:

      Dari video demo yang saya lakukan, bisa dilihat tidak ada masalah dalam menambahkan recordnya. Tapi memang kemarin saya lupa menyertakan struktur table mysql nya.
      Bisa jadi karena itu…

      silahkan cek update postingan blog saya di atas …

      VN:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.22_1171]
      Rating: +1 (from 1 vote)
      • Bertho says:

        Perlu belajar lagi ne sencha touch…..:D
        Mau nanya ne mas, logic aplikasi kalo misalnya dalam keadaan ini :
        1. Saya membuat fasilitas login
        2. Dengan session masing2 user yg login ingin merequest data.

        Jadi hanya data user yg login yg akan ditampilkan. Kalo kek gitu sencha touch bisa melakukan logic seperti itu atau bagaimana logic-nya mas?

        Thanks

        VA:F [1.9.22_1171]
        Rating: 0.0/5 (0 votes cast)
        VA:F [1.9.22_1171]
        Rating: 0 (from 0 votes)
  4. Bertho says:

    Mas yuan, saya berulang kali mencoba langsung ke server saya juga tidak bisa melakukan insert data. Saya trus mengganti link ke server mas di :
    http://securesabukhitam.com/project/testsenchaapp/?do=list

    Tetapi setelah di insert, ada record yg masuk tetapi tidak ada data. Silahkan dicek lagi mas

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Yuan Yudistira says:

      Saya barusan cek ulang, download lagi dari github, langsung coba pakai browser safari, hasilnya tetap masuk kok, material code, name dan description nya masuk ke database. Apakah anda melakukan perubahan code? coba dulu download lagi, kemudian langsung coba di browser dulu.

      VN:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  5. [...] Setelah banyak tertunda karena banyak kegiatan dan mengerjakan beberapa project sampingan yang lain, akhirnya saya bisa melanjutkan serial posting yang berkaitan dengan aplikasi sencha touch sebelumnya : belajar sencha touch 1 dan belajar sencha touch 2 dan belajar sencha touch … Baca [...]

  6. hezzel says:

    Selamat pagi pak :)

    saya mau tanya nh kalau misalnya kondisi seperti ini :
    1. membuat fasilitas login
    2. Dengan session masing2 user yg login ingin merequest data.bahasa 3. pemprograman yang di pakai Sistem Informasi adalah bahasa JSP terus database oracle. bukan memakai php dan mysql. kalau kita buat program akses lewat mobile dia bisa jadi tidak pak? maksudnya dia bisa support tidak dengan bahasa jsp dan mysql?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Yuan Yudistira says:

      Bisa saja. Kita harus melihatnya applikasi mobiile itu sebagai aplikasi client. Server nya pakai apa pun tidak ada masalah. Anda hanya perlu memastikan bahwa request dari mobile apps tersebut di reply oleh web service nya dalam format yg benar. Biasanya JSON atau XML.

      VN:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>