Skip to content
8 Februari 2011 / Jeffrey Hermanto Halimsetiawan

HTTP POST dengan WebClient pada Windows Phone 7


Beberapa waktu yang lalu salah seorang teman saya meluncurkan sebuah API yang masih dalam tahap percobaan dari website miliknya bernama ongkir.info. Karena tertarik untuk mencobanya, saya mempelajari cara penggunaan API tersebut dan ternyata API tersebut menggunakan metode HTTP POST. Percobaan untuk memanfaatkan API tersebut pun mulai dilakukan. Kali ini, sebuah aplikasi sederhana yang menampilkan hasil query kota dengan data binding pada Windows Phone 7 akan dibuat.

Langkah-langkah yang dilakukan antara lain:

  1. Pilih New – Project.
  2. Pilih Silverlight for Windows Phone pada Installed Templates, kemudian pilih Windows Phone Application.image
  3. Tambahkan sebuah ListBox yang diberi nama lbxQuery pada ContentPanel. image
  4. Tambahkan sebuah TextBox sebagai input kriteria pencarian dan Button pada ContentPanel. image
  5. Tambahkan event handler OnClick pada btnSearch ketika event Click dibangkitkan.image
  6. Pilih Add Reference untuk menambahkan System.Xml.Linq.dll yang berguna untuk melakukan parsing XML ke dalam project. image
  7. Lakukan pengiriman HTTP POST dengan memanfaatkan method UploadStringAsync dari kelas WebClient pada event handler OnClick yang telah ditambahkan.
    private void OnClick(object sender, RoutedEventArgs e)
    {
        if (txtSearch.Text.Length == 0)
            return;
    
        WebClient client = new WebClient();
    
        //URL dari API
        string url = "http://api.ongkir.info/city/list";
        //POST Parameter
        StringBuilder parameter = new StringBuilder();
        parameter.AppendFormat("{0}={1}&", "query", HttpUtility.UrlEncode(txtSearch.Text));
        parameter.AppendFormat("{0}={1}&", "type", HttpUtility.UrlEncode("origin"));
        parameter.AppendFormat("{0}={1}&", "courier", HttpUtility.UrlEncode("jne"));
        //API Key sengaja disamarkan
        parameter.AppendFormat("{0}={1}", "API-Key", HttpUtility.UrlEncode("xxxxxxx"));
    
        //Set header
        client.Headers[HttpRequestHeader.ContentType] = "application/x-www-form-urlencoded";
        client.Headers[HttpRequestHeader.ContentLength] = parameter.Length.ToString();
    
        //menangani respon yang diberikan oleh server ketika menjalankan method UploadStringAsync()
        client.UploadStringCompleted += new UploadStringCompletedEventHandler(OnUploadStringCompleted);
        //melakukan UploadString dengan method POST secara asynchronous
        client.UploadStringAsync(new Uri(url), "POST", parameter.ToString());
    }
    
  8. Tambahkan event handler OnUploadStringCompleted yang bertugas melakukan parsing XML yang diterima ketika respon diperoleh karena proses pengunggahan dilakukan secara asynchronous.
    private void OnUploadStringCompleted(object sender, UploadStringCompletedEventArgs e)
    {
        if (e.Error != null)
            return;
        //mengambil respons yang diperoleh
        string response = e.Result;
        //melakukan parsing XML dari string
        XElement xmlFeed = XElement.Parse(response);
    
        //memperoleh kode status
        var status = xmlFeed.Descendants("status").Elements<XElement>("code");
    
        if (Int32.Parse(status.First<XElement>().Value) == 0)
        {
            //memperoleh semua item kota yang ada
            var cities = xmlFeed.Descendants("cities").Elements<XElement>("item");
            var citiesString = from ItemFeed in cities
                                select ItemFeed.Value;
            //melakukan data binding ke listbox
            lbxQuery.ItemsSource = citiesString;
        }
        else
        {
            MessageBox.Show("Tidak ditemukan kota yang diawali dengan band.");
        }
    }
    
  9. Jalankan aplikasi sederhana ini.

Respon yang diterima dalam bentuk XML dari server ketika melakukan kriteria pencarian “ban” adalah sebagai berikut:

<xml>
    <status>
        <code>0</code>
        <description>OK</description>
    </status>
    <cities>
        <item>BANDAACEH</item>
        <item>BANDARLAMPUNG</item>
        <item>BANDUNG</item>
        <item>BANJARMASIN</item>
    </cities>
</xml>

Berikut adalah hasil dari aplikasi yang berjalan: image

http://cid-2bdf91f60cc2716d.office.live.com/embedicon.aspx/.Public/Blog/OngkirAPI.WP7.zip

Selamat mencoba.

  1. Nanda Firdaus / Jan 14 2012 12:35

    Nice.😀
    Thanks tutorialnya!

    • Jeffrey Hermanto Halimsetiawan / Apr 23 2012 14:36

      sama-sama, semoga bermanfaat🙂

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: