Monthly Archive: Desember 2011

Des 10 2011

Menggunakan Web API

Postingan kali ini akan membahas bagaimana menggunakan web API. Apabila sudah memahami bagaimana menggunakan web API, maka akan mudah untuk memahami bagaimana menggunakan web service. Pada dasarnya, web service juga merupakan web API. Web service merupakan bentuk khusus dari web API. Ada aturan dan standar tertentu dalam web service.

Web API yang akan kita gunakan adalah web API untuk mengambil data dari Info Billing PLN yang sudah pernah kita bahas di sini. Langsung saja kita lakukan coding.

Pertama, buat halaman HTML berisi form untuk meminta ID pelanggan, misalnya sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Cek Tagihan Listrik</title>
    </head>
    <body>
        <form action="" method="post">
            <table border="0">
                <tbody>
                    <tr>
                        <td>ID Pelanggan</td>
                        <td><input type="text" name="id" value="" /></td>
                    </tr>
                    <tr>
                        <td>Tahun</td>
                        <td><input type="text" name="tahun" value="" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" value="Lihat" /></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>

Berikutnya, siapkan skrip PHP untuk membaca input dari halaman tersebut, misalnya seperti ini:

$id = (isset($_POST['id']) ? $_POST['id'] : '');
$tahun = (isset($_POST['tahun']) ? $_POST['tahun'] : date('Y'));

Selanjutnya, lengkapi skrip PHP tersebut menjadi seperti ini:

if ($id != '' && $tahun != '')
{
    // panggil web API dgn membawah data id pelanggan dan tahun.
    // utk sekedar request GET bisa dengan file_get_contents(). utk request yg lebih rumit, pakai CURL.
    $url = 'http://apps.muhammadalvin.net/pln.php?id_pelanggan=' . $id . '&tahun=' . $tahun;
    $hasilApi = @file_get_contents($url);

    // proses response dari hasil pemanggilan web API tsb.
    $hasil = json_decode($hasilApi);
    if (!is_null($hasil))
    {
        if ($hasil->status)
        {
            // kalo 'status' bernilai true, berarti sukses. ambil nama pelanggan dan data tagihannya.

            // apakan ada data tagihan utk tahun yg diminta?
            if (isset($hasil->result->tagihan->{$tahun}))
            {
                $namaBulan = array(
                    '1'  => 'Januari',
                    '2'  => 'Februari',
                    '3'  => 'Maret',
                    '4'  => 'April',
                    '5'  => 'Mei',
                    '6'  => 'Juni',
                    '7'  => 'Juli',
                    '8'  => 'Agustus',
                    '9'  => 'September',
                    '10' => 'Oktober',
                    '11' => 'November',
                    '12' => 'Desember'
                );

                ?>
                <p>
                    Tagihan listrik atas nama <strong><?php echo $hasil->result->nama; ?></strong>
                    untuk tahun <strong><?php echo $tahun; ?></strong> adalah sebagai berikut:
                </p>
                <ul>
                <?php
                foreach ($hasil->result->tagihan->{$tahun} as $bulan => $tagihan)
                {
                    ?><li><?php echo $namaBulan[$bulan]; ?> = Rp <?php echo number_format($tagihan, 0, ',', '.'); ?></li><?php
                }
                ?></ul><?php
            }
            else
            {
                ?><p style="color: #00f">Tidak ada data tagihan untuk tahun ini!</p><?php
            }
        }
        else
        {
            ?><p style="color: #f00">Error <?php echo $hasil->faultCode; ?>: <?php echo $hasil->faultString; ?></p><?php
        }
    }
    else
    {
        ?><p style="color: #f00">Unknown Error: <?php echo htmlentities($hasilApi); ?></p><?php
    }
}

Contoh skrip jadi (halaman berisi form HTML + skrip PHP) bisa dilihat di sini.

Simpan lalu jalankan skrip tersebut. Ini adalah contoh hasilnya:

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • Google Buzz
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Permanent link to this article: http://www.muhammadalvin.net/2011/12/menggunakan-web-api/

Des 10 2011

Mengambil Data dari Info Billing PLN

Postingan ini akan menjelaskan proses pengambilan data dari Info Billing PLN. Selanjutnya, proses tersebut akan dibungkus menjadi sebuah web API yang dapat diakses oleh berbagai aplikasi/sistem lain. Saya menyebutnya web API bukan web service, karena yang dikembangkan ini bukan benar-benar web service, seperti SOAP web service ataupun REST web service.

Web service punya standarisasi. Sebagai contoh, REST web service. Web service jenis ini biasanya menggunakan clean URL, yang pada URL tidak lagi terdapat ekstensi file seperti misalnya .php. Selain itu, cara komunikasinya menggunakan HTTP GET, HTTP POST, HTTP POST, HTTP DELETE. Sementara API (Application Programming Interface) merupakan istilah yang lebih umum. API adalah antarmuka (interface) yang mengizinkan aplikasi/program berkomunikasi dengan aplikasi/program/sistem lain. Dalam istilah web: API berarti antarmuka yang mengizinkan web browser atau web server berkomunikasi dengan aplikasi/program/sistem lain.

(akan ditulis kemudian)

Web API yang sudah jadi bisa diakses di sini:

http://apps.muhammadalvin.net/pln.php

Web API ini menerima input dari query string. Jadi, kita bisa mengaksesnya dengan cara seperti ini:

http://apps.muhammadalvin.net/pln.php?id_pelanggan=XXX

Atau dalam pesan HTTP:

GET /pln.php?id_pelanggan=XXX HTTP/1.1
Host: apps.muhammadalvin.net

Ada dua query string yang dapat diberikan, yaitu:

  • id_pelanggan, merupakan ID pelanggan berupa 12 angka
  • tahun, merupakan tahun dalam bentuk 4 angka

Output/response nya dalam bentuk JSON dengan struktur seperti ini:

{
    "status": true,
    "result": (object)
}

Item status bernilai true. Item result merupakan object dengan struktur berikut:

{
    "id_pelanggan": (string),
    "nama": (string),
    "alamat": (string),
    "daya_va": (string),
    "tagihan": (object)
}

Item tagihan merupakan object dengan key berupa string (yaitu tahun) dan item berupa object (kita sebut sebagai “item tagihan per-tahun”). Item tagihan per-tahun tersebut merupakan object dengan key berupa string (yaitu bulan) dan item berupa integer (yaitu besar tagihan dalam rupiah).

Contoh lengkap output adalah sebagai berikut:

{
    "status": true,
    "result": {
        "id_pelanggan": "120130000000",
        "nama": "MUHAMMAD ALVIN",
        "alamat": "JL. MARELAN VII GG. RAHAYU",
        "daya_va": "000000000000000900",
        "tagihan": {
            "2011": {
                "9": 110565,
                "8": 138880,
                "2": 124180,
                "1": 114925
            }
        }
    }
}

Dari contoh di atas, dapat diketahui informasi berikut:

  • ID pelanggan = 120130000000
  • Nama pelanggan = MUHAMMAD ALVIN
  • Alamat = Jl. Marelan VII gg. Rahayu
  • Daya = 900 watt
  • Tagihan September 2011 = Rp 110.565
  • Tagihan Agustus 2011 = Rp 138.880
  • Tagihan Februari 2011 = Rp 124.180
  • Tagihan Januari 2011 = Rp 114.925

Saat terjadi kesalahan, outputnya seperti ini:

{
    "status": false,
    "faultCode": (string),
    "faultString": (string)
}

Item status akan bernilai false. Kemudian, ada dua item yang menjelaskan kesalahan yg terjadi yaitu faultCode dan faultString.

Item faultCode akan bernilai:

  • Client, jika kesalahan terjadi akibat kesalahan client (pemakai web API), misalnya ID pelanggan yg diberikan tidak 12 digit atau bukan angka.
  • Server, jika kesalahan terjadi di sisi server (penyedia layanan).

Item faultString akan berisi penjelasan kesalahan yang terjadi.

Untuk menguji web API ini, lakukan request GET seperti yang ditunjukkan di atas. Cara paling sederhana adalah dengan membuka browser dan mengetikkan URL berikut query string dan datanya di address bar. Lalu, tekan ENTER.

Postingan selanjutnya akan ditulis untuk memberikan contoh penggunaan web service ini dari aplikasi lain yang akan kita buat.

Untuk mengambil source code web service ini, tambahkan query string ?source menjadi:

http://apps.muhammadalvin.net/pln.php?source

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • Google Buzz
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Permanent link to this article: http://www.muhammadalvin.net/2011/12/mengambil-data-dari-info-billing-pln/

Des 02 2011

Mengakses Konten Terproteksi (Login Dilakukan oleh Script)

Konten terproteksi yang akan kita gunakan sebagai contoh (sekaligus kelinci percobaan :D ) bisa diakses di sini. Gunakan login dengan username guest dan password 123456. Setelah login, maka akan muncul dua grafik (Contoh Grafik I dan Contoh Grafik II). Coba dapatkan URL ke gambar grafik tersebut, misalnya dengan cara klik kanan di gambar lalu pilih Copy Image Location (menggunakan Firefox).

Jika malas melakukannya, maka URL gambar tersebut adalah sebagai berikut:

Contoh Grafik I:
http://files.muhammadalvin.net/konten-terproteksi/data.php?kode=1

Contoh Grafik II:
http://files.muhammadalvin.net/konten-terproteksi/data.php?kode=2

Coba buka link tersebut di browser. Jika sudah login, akan muncul sebuah grafik. Grafik pada link pertama berwarna biru dan grafik pada link kedua berwarna merah. Jika belum login, akan muncul pesan “Anda harus login untuk melihat grafik data!”.

Sekarang, coba logout dari aplikasi tersebut. Setelah logout, coba refresh gambar grafik. Maka sekarang akan muncul pesan yang meminta kita melakukan login terlebih dulu.

Nah, jika kita sedang mengembangkan suatu aplikasi dan kita ingin menampilkan grafik tersebut di aplikasi kita, kita akan mengalami masalah. Kode HTML berikut:

<img src="http://files.muhammadalvin.net/konten-terproteksi/data.php?kode=1" alt="Grafik I" />

hanya akan menampilkan grafik jika kita sudah login. Jika belum, maka grafik tidak akan ditampilkan. Cobalah!

Apakah masalah tersebut bisa diatasi? Tentu saja bisa. Jika grafik tersebut statik (artinya grafik yang dihasilkan tidak berubah-ubah), maka save saja gambar tersebut. Misalnya grafik tersebut kita simpan sebagai grafik1.png, dan kita letakkan di folder yang sama dengan file HTML yang kita buat. Maka kode HTML untuk menampilkan grafik tersebut bisa kita ganti menjadi:

<img src="grafik1.png" alt="Grafik I" />

Masalah teratasi :-) .

Namun, bagaimana jika grafik tersebut dinamis (artinya grafik yang dihasilkan bisa berubah-ubah, tergantung parameter yang diberikan)? Tentu saja cara di atas tidak bisa dijadikan solusi. Kalau kita kenal dengan pembuat aplikasinya, mungkin bisa meminta akses khusus untuk mengambil grafik tersebut :D . Tetapi jika tidak? Maka satu-satunya cara yang dapat dilakukan adalah dengan melakukan login, mengambil gambar tersebut, kemudian menampilkannya. Pertanyaannya adalah, bagaimana melakukannya dari coding?

Read the rest of this entry »

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • Google Buzz
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Permanent link to this article: http://www.muhammadalvin.net/2011/12/mengakses-konten-terproteksi-dengan-login-dilakukan-oleh-script/

Des 01 2011

Paging dengan Ajax

Paging dengan maupun tanpa ajax pada dasarnya tidak jauh berbeda. Jika tanpa Ajax, link untuk ke halaman sebelumnya atau selanjutnya berisi link ke halaman yang sama dengan parameter halaman yang berbeda. Sementara jika dengan Ajax, link tersebut memanggil fungsi javascript untuk mengambil isi halaman lain, di mana proses pengambilannya dilakukan dengan Ajax.

Sebagai contoh, kita ingin menampilkan 88 data dari database, di mana setiap halaman berisi 10 record. Ini berarti nantinya kita akan punya 9 halaman. Pada halaman pertama, kita tampilkan record ke-1 sampai ke-10. Pada halaman kedua, kita tampilkan record ke-11 sampai ke-20. Begitu seterusnya sampai halaman terakhir.

Tanpa Ajax

Jika tanpa Ajax, halaman yang bertugas menampilkan record tersebut isinya kira-kira seperti ini:

<php
$halaman = (isset($_GET['halaman']) ? $_GET['halaman'] : 1);
$per_halaman = 10; // 10 adalah record per halaman
$awal = ($halaman - 1) * $per_halaman;

// dapatkan total record utk keperluan pembuatan link ke halaman selanjutnya
$hasil = mysql_query('SELECT COUNT(1) FROM tabel');
$record = mysql_fetch_array($hasil);
$total_record = $record[0];
$total_halaman = ceil($total_record / $per_halaman);

// tambahkan LIMIT X,Y di query MySQL
$sql = 'SELECT * FROM tabel LIMIT ' . $awal . ',' . $per_halaman;

// tampilkan hasil

// buat link ke halaman sebelumnya dan selanjutnya
if ($halaman > 1) {
    echo '<a href="?halaman=' . ($halaman - 1) . '">sebelumnya</a>';
}

if ($halaman < $total_halaman) {
    echo '<a href="?halaman=' . ($halaman + 1) . '">selanjutnya</a>';
}

Lihat contoh hasilnya di sini.

Perhatikan bahwa setiap kali kita mengklik link selanjutnya ataupun sebelumnya, halaman akan di-load ulang.

Dengan Ajax

Pertanyaan: Kenapa mesti dengan Ajax? Apa keuntungannya?

Read the rest of this entry »

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • Google Buzz
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Permanent link to this article: http://www.muhammadalvin.net/2011/12/paging-dengan-ajax/