Yii Framework REST Web Service and Windows Phone 7 sebagai Client (POST Insert Data)

Setelah kemarin kita telah mengupas cara view data suatu aplikasi lewat aplikasi client lain, sekarang saya akan mencoba memaparkan cara input data menggunakan REST dengan aplikasi client yang tentu dalam hal ini saya contohkan dengan menggunakan windows phone 7. Project yang akan kita buat adalah meneruskan project sebelumnya dari postingan ini. Jadi fungsi-fungsi yang telah ada disana tidak akan saya tulis ulang pada postingan ini.

Pertama-tama pada aplikasi yii anda tetap di controller yang sama seperti postingan sebelumnya, buatlah sebuah action yang digunakan untuk menginput nilai lewat REST API.

// digunakan untuk proses input ke database
 public function actionCreate()
 {
   switch($_GET['model'])
   {
       case 'kab': // apabila yang di request adalah "kab", maka akan menginput data pada tabel kabupaten
         $model = new MKab; 
         break;
      default:
         $this->_sendResponse(501,sprintf('Mode <b>create</b> is not implemented for model <b>%s</b>',$_GET['model']) );
        // jika yang di request tidak ada, maka akan error
        Yii::app()->end();
   }
   foreach($_POST as $var=>$value) { // mengecek attribute satu per satu sesuai dengan inputan user
     if($model->hasAttribute($var))
        $model->$var = $value;
     else // jika ada inputan user yang salah, maka akan di tampilkan pesan error
        $this->_sendResponse(500, sprintf('Parameter <b>%s</b> is not allowed for model <b>%s</b>', $var,$_GET['model']) );
   }
   if($model->save()) // jika data berhasil disimpan, maka akan di tampilkan pesan berupa data hasil yang telah disimpan tadi
      $this->_sendResponse(200, CJSON::encode($model)); // mengirim pesan
   else { // jika data tidak berhasil disimpan, maka akan menampilkan pesan error
      $msg = "<h1>Error</h1>";
      $msg .= sprintf("Couldn't create model <b>%s</b>", $_GET['model']);
      $msg .= "<ul>";
      foreach($model->errors as $attribute=>$attr_errors) {
          $msg .= "<li>Attribute: $attribute</li>";
          $msg .= "<ul>";
          foreach($attr_errors as $attr_error)
              $msg .= "<li>$attr_error</li>";
          $msg .= "</ul>";
      }
      $msg .= "</ul>";
      $this->_sendResponse(500, $msg );
    }
 }

Penjelasan dari kode tersebut sudah saya selipkan di baris-baris code di atas.

Nah, setelah selesai membuat action untuk input data, sekarang kita akan membuat sebuah aplikasi client yang digunakan untuk menginput datanya. Bukalah visual studio anda lalu buatlah project windows phone baru. Kemudian buatlah form seperti berikut :

Kita memiliki 3 buah inputan disana yaitu inputan untuk kode daerah, nama daerah dan kode provinsi tersebut. Inputan tersebut sendiri sudah kita sesuaikan dengan model Kabupaten yang ada di dalam aplikasi yii kita. Kemudian karena inputan ini melibatkan 2 buah tabel yaitu tabel kabupaten yang akan diinput dan tabel provinsi yang mana akan berelasi dengan tabel kabupaten, maka kita perlu membuat 2 buah class baru pada aplikasi windows phone kita. Buatlah sebuah folder pada project anda dengan nama “ApiClass” dan buatlah 2 buah class baru yaitu class “Daerah” yang akan mengacu ke tabel provinsi, dan class “Kab” yang akan mengacu ke tabel kabupaten. Lalu pada class daerah masukkan code berikut :

namespace sirusa.ApiClass
{
  public class Daerah
  {
     public string kode_daerah { get; set; }
     public string nama_daerah { get; set; }
  }
}

dan class kab masukkan code berikut :

namespace sirusa
{
  public class Kab
  {
    public int kode_kab { get; set; }
    public string kode_daerah { get; set; }
    public string nama_kab { get; set; }
  }
}

Pada saat pertama kali aplikasi wp7 ini dijalankan, pada inputan provinsi kita menginputnya dengan cara memilih provinsi yang sudah ada pada aplikasi server. Untuk itu, kita harus menyediakan sebuah API untuk mengambil list nama-nama provinsi dari aplikasi server. Untuk ini kita sudah pernah membahas bagaimana cara mengambil data dengan rest pada contoh postingan sebelumnya, silahkan terapkan fungsi tersebut untuk kasus ini..

Kemudian setelah kita telah membuat API untuk mengambil semua provinsi pada server, buatlah sebuah fungsi yang dimana setiap kita membuka aplikasi maka list provinsi yang ada di server langsung muncul di aplikasi wp7 kita. Pada mainpage.xaml.cs masukkan code berikut :

private List<Daerah> daftard = new List<Daerah>();//variabel untuk menyimpan data provinsi, digunakan agar
 // tidak melakukan load berulang kali ke server karena provinsi di anggap tidak terlalu banyak isinya
 // dan tidak sering mengalami perubahan, jadi disimpan di dalam satu variabel saja lebih dahulu
 private void GetDaerah()
 {
   string url = "http://localhost/sirusanew/index.php?r=webapi/list&model=daerah";// api yang di akses
   WebClient req = new WebClient(); 
   req.DownloadStringCompleted += (s, e) =>//jika proses download data selesai
   {
      if (e.Error == null) // jika kondisi tidak error
      {
         if (!string.IsNullOrEmpty(e.Result)) // jika data tidak kosong
            daftard = JsonConvert.DeserializeObject<List<Daerah>>(e.Result); // masukkan data ke dalam variabel daftard
         foreach (Daerah aa in daftard)
         {
            listBox1.Items.Add(aa.nama_daerah); // set data daftard ke dalam listbox
         }
      }
   };
   req.DownloadStringAsync(new Uri(url));
 }

Setelah itu pada constructor buat seperti berikut :

public MainPage()
 {
   InitializeComponent();
   GetDaerah(); // memanggil fungsi getdaerah()
 }

Setelah itu maka pertama kali membuat aplikasi akan muncul list provinsi seperti berikut :

Kemudian saatnya kita membuat fungsi untuk menginput data nya. Pada mainpage.xaml.cs masukkan code berikut :

 // event yang akan di jalankan ketika melakukan klik pada tombol button
 private void button1_Click(object sender, RoutedEventArgs e)
 {
    WebClient webClient = new WebClient();
    webClient.Headers[HttpRequestHeader.ContentType] = "application/x-www-form-urlencoded";
    var uri = new Uri("http://localhost/sirusanew/index.php?r=webapi/create&model=kab", UriKind.Absolute);// url yang dituju untuk input data
    StringBuilder postData = new StringBuilder();
    postData.AppendFormat("{0}={1}", "kode_kab", HttpUtility.UrlEncode(textBox2.Text)); // data-data yang akan dismipan dimasukkan ke dalam string
    postData.AppendFormat("&{0}={1}", "nama_kab", HttpUtility.UrlEncode(textBox1.Text));
    postData.AppendFormat("&{0}={1}", "kode_daerah", HttpUtility.UrlEncode(daftard.ElementAt(listBox1.SelectedIndex).kode_daerah));
    webClient.Headers[HttpRequestHeader.ContentLength] = postData.Length.ToString();
    webClient.UploadStringCompleted += new UploadStringCompletedEventHandler(webClient_UploadStringCompleted);
    // jika upload data selesai, maka akan menjalankan event webClient_uploadStringComplete
    webClient.UploadProgressChanged += webClient_UploadProgressChanged;
    // jika upload data dalam progress maka akan menjalankan even webClient_UploadPorgressChanged
    webClient.UploadStringAsync(uri, "POST", postData.ToString()); 
 }
 // event yang dijalankan pada saat upload data selesai
 void webClient_UploadStringCompleted(object sender, UploadStringCompletedEventArgs e)
 {
    MessageBox.Show(e.Result);// menampilkan pesan sesuai yang diberikan dari serve
 }
// event yang dijalankan pada saat upload data dalam progress
 void webClient_UploadProgressChanged(object sender, UploadProgressChangedEventArgs e)
 {
    MessageBox.Show(string.Format("Progress: {0} ", e.ProgressPercentage)); // menampilkan pesan progress
 }

Okeh, selesai.. sekarang saatnya uji coba.. jika sudah benar ketika anda save data makan data yang anda masukkan akan masuk ke server langsung..

Selamat mencoba..

Semoga membantu…😀

2 Responses to Yii Framework REST Web Service and Windows Phone 7 sebagai Client (POST Insert Data)

  1. rifkihanny says:

    mas, kalau yang clientnya menggunakan yii juga gimana ya ? bukan windows phone. ada contohnya mas ? Terima kasih🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: