Membuat Aplikasi API & Client Menggunakan CodeIgniter & AngularJS

Suggested by SMS

Assalamu’alaikum wr. wb, para pembaca yang budiman. Pada artikel kali ini kita akan mempelajari bagaimana cara membuat dua aplikasi sederhana, yaitu API lengkap dengan Client-nya. API berfungsi untuk menyajikan data yang di-request oleh aplikasi Client. Kegunaan pemisahan dua aplikasi ini adalah agar developer dapat membuat berbagai macam aplikasi client, misalnya menggunakan web atau Android namun sumber datanya tetap sama, yaitu API. Jika API tidak dipisah, tiap aplikasi client harus punya aplikasi tambahan di dalamnya untuk mengambil data langsung dari database. Tiap membuat aplikasi client yang baru, aplikasi tambahan tersebut harus dibuat lagi dan tidak boleh berbeda dengan aplikasi client yang lainnya. Nah, ini akan merepotkan karena jika salah satu aplikasi di-update, yang lain juga harus ikut di-update. Sedangkan jika menggunakan API, cukup aplikasi API yang di-update, semua aplikasi client otomatis mengikuti, karena sumber datanya cuma satu, yaitu API.

Pertama-tama yang akan kita buat adalah API dengan menggunakan CodeIgniter versi 2.0.0. Berikut tahap-tahapnya:
1. Buat folder, misal namanya “tutorial_api”
2. Di dalam folder “tutorial_api”, buat dua folder baru yaitu “api” dan “client”
3. Ekstrak file zip CodeIginiter ke folder “api”
4. Hapus folder “user_guide” karena tidak diperlukan. Berikut struktur foldernya:
API

5. Setting database. Database yang digunakan sama dengan tutorial export PDF, yaitu database SIAKAD, tabel dosen. Buka file application/config/database.php, lalu ubah bagian username, password, dan database

6. Buat controller baru, misalnya “Dosen”, berarti file-nya adalah application/controllers/dosen.php. Isikan kode berikut ini:

Bisa dilihat pada controller ada fungsi getAll() yang berguna untuk menampilkan seluruh data Dosen. Jika biasanya yang di-output pada fungsi controller adalah VIEW menggunakan $this->load->view(), kali ini kita menggunakan JSON string agar bisa dibaca oleh berbagai aplikasi client. Agar kode di atas bisa berjalan, jangan lupa load library “database” di file application/config/autoload.php.

Jika berhasil, ketika kitam membuka URL /index.php/dosen/getAll, hasilnya adalah sebagai berikut:

API2

Ini berarti API berjalan dengan baik. Ya, pada dasarnya API memang cukup simpel. Yang perlu diperhatikan hanya URL (routing), proses (function), dan data output (JSON). Ada satu faktor lagi yaitu security dimana umumnya pengguna API harus memiliki API key untuk dapat menggunakan API. Namun pada tutorial ini tidak kita bahas, cukup intinya saja.

Sekarang kita lanjut membuat aplikasi client dengan menggunakan AngularJS. Seperti umumnya aplikasi client, pada aplikasi ini tidak dapat menggunakan PHP yang notabene harus berjalan di server. Karena itu kita menggunakan Javascript dengan bantuan library AngularJS.

7. Mulai tahap ini, kita membuat aplikasi baru di dalam folder “tutorial_api/client.” Pertama, buat folder “js” untuk menampung library AngularJS (angular.min.js). Berikut struktur foldernya:

API3

8. Pada folder “client,” buat file index.html. Pada file ini kita akan menampilkan data Dosen dalam bentuk tabel. Kegunaan AngularJS di sini adalah untuk mengambil data dari API, kemudian ditampilkan di halaman HTML. Berikut layout dari file index.html

Perhatikan sintaks untuk menggunakan AngularJS. Yang pertama adalah mendefinisikan nama aplikasi yaitu ng-app=”api” dan yang kedua mendefinisikan controller: “ng-controller=”dosen”. Kegunaan controller ini adalah untuk mengambil data dari API lalu ditampilkan pada tag HTML di dalamnya. Sintaks ng-controller berguna untuk menandakan kalau itu tempat data controller Dosen akan ditampilkan.

Pemanggilan fungsi untuk mengambil data tentunya dilakukan di dalam tag “script” karena kodenya adalah kode Javascript. Berikut kodenya:

Bisa kita lihat, yang pertama dilakuan kode adalah instansiasi aplikasi pada variabel “app.” Kemudian object “app” itu melakukan request ke API via controller “dosen” dengan URL “http://localhost/tutorial_api/api/index.php/dosen/getAll.” Setelah itu respons dari API ditampung di variabel “resp.” Agar data ini bisa dibaca di halaman HTML, variabel “resp” di-assign ke variable scope bawaan AngularJS. Dalam contoh ini, variabelnya adalah $scope.dosens. Dimana “dosens” bisa diganti dengan apapun sesuka hati.

Setelah data mampu dibaca di halaman HTML, sekarang tinggak ditampilkan di halaman HTML dengan tag bawaan dari AngularJS. Perhatikan kode berikut:

Tag “ng-repeat” adalah semacam “foreach” pada PHP. Dapat dengan mudah ditebak bahwa “dosens” adalah variabel array yang sudah diisi di bagian “script”, dan “item” adalah elemen array-nya. Elemen array ini berupa Javascript Object atau JSON yang sudah mengandung data dengan format atribut sama dengan output yang dihasilkan API.

Dengan demikian, kode lengkap untuk file index.html adalah sebagai berikut:

Jika kita membuka URL http://localhost/tutorial_api/client maka hasilnya adalah:
API5

Indah, bukan? Data dapat ditampilkan di web yang hanya menggunakan HTML dan Javascript saja, tanpa PHP. Tentu saja dengan catatan, aplikasi API nya sudah jadi hehehe kalau tidak ya mau ambil data dari mana? 😛

Cukup mudah ya ternyata membuat API. Walaupun tidak sulit, pembuatan API ini sangat bermanfaat terutama untuk proyek software yang besar, sehingga tentunya sangat penting untuk diketahui cara pembuatannya. Setuju?

Sekian tutorial INOOUT kali ini, semoga bermanfaat. Untuk source code dapat diunduh di sini:

Wassalamu’alaikum wr. wb.

(Visited 9,555 times, 1 visits today)

2 thoughts on “Membuat Aplikasi API & Client Menggunakan CodeIgniter & AngularJS

  1. December 7, 2015

    Ilham Rizqi Sasmita Reply

    Well done, great job!

Leave a Reply

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

ten − 9 =