BELAJAR MENGENAL DATA JSON & XML

BELAJAR MENGENAL DATA JSON & XML

JSON adalah kependekan dari Javascript Object Notation. JSON dipakai untuk dua hal; yang pertama untuk format transfer data antar device/OS/bahasa pemerograman yang berbeda dan sebagai media penyimpanan data seperti MongoDB. JSON dalam artikel ini lebih menekankan pada transfer data. Sebenarnya selain JSON, format transfer data antar sistem bisa dilakukan XML, plaintext ataupun HTML, namun 3 format tersebut punya banyak kekurangan, terutama dari sisi ukuran. Saingant terdekat dari JSON adalah XML, dalam layanan Web API atau webservice, sebagian layanan menggunakan JSON, sebagian yang lain menggunakan format XML. Dua format ini bisa saling menggantikan.

Kelebihan JSON

Walaupun XML sudah sejak lama dipakai dalam format transfer data, namun beberapa tahun terakhir, JSON menggeser posisi XML. Kelebihan JSON dari XML adalah sbb:

1. Ukuran lebih kecil dibanding XML, efeknya transfer data lebih cepat dan lebih hemat resource, terutama bandwidth
2. JSON adalah format data bawaan di Javascript, artinya jike data dari server di kirim ke client , dan client menggunakan javascript, maka tidak perlu library tambahan untuk memprosesnya
3. Dibanding XML, format JSON lebih sederhana.
4. library JSON ada di setiap bahasa pemrograman sehingga memudahkan programer yang berbeda bahasa pemrograman. (lihat di :

Perbandingan format JSON dan XML

berikut ini adalah contoh data JSON tentang event kegiatan

?

source code

{"list_event":   [     {"eventID":"1",     "judul":"Pengajian Akbar menyambut ramadhan",     "tanggal":"2014-05-19",     "jam":"20:00",     "lokasi":"Masjid Kampus UGM"     },     { "eventID":"2",     "judul":"Bedah buku kesesatan syiah",     "tanggal":"2014-05-21",     "jam":"09:00",     "lokasi":"Masjid Kampus UII "     }   ] }

list_eventadalah adalah Array JSON. Array terdiri dari beberapa object. Dalam kasus ini, kita punya 2 object event. Masing masing object event ini mempunyai 5 field.

Representasi Data dalam format XML

Format JSON diatas bisa direpresentasikan dengan XML. Berikut ini adalah format XML untuk data yang sama

?

source code

<list_event>   <event>     <eventID>1</eventID>     <judul>Pengajian Akbar menyambut ramadhan</judul>     <tanggal>2014-05-19</tanggal>     <jam>20:00</jam>     <lokasi>Masjid Kampus UGM</lokasi>   </event>   <event>     <eventID>2</eventID>     <judul>Bedah buku kesesatan syiah</judul>     <tanggal>2014-05-21</tanggal>     <jam>09:00</jam>     <lokasi>Masjid Kampus UII </lokasi> </event> </list_event>

Tampak perbedaan yagn paling mendasar adalah ukuran JSON lebih kecil,perhatikan jumlah text dan tag penutup di XML yang membuat ukuran XML menjadi besar. Dari dua format diatas juga terlihat format XML lebih kompleks.

Cara mudah menganalisa format JSON

Untuk lebih memahami struktur data JSON, alangkah baiknya anda menginstall JSON viewer seperti plugin JSON viewer di Notepad++. Anda bisa menginstallnya lewat plugin manager. Berikut ini adalah struktur data JSON yang ditampilkan dengan JSON Viewer.
Untuk memakai plugin ini, install, lalu blok kode JSONnya lalu klik menu plugin->JSON viewer->Show JSON Viewer

JSON viewer di Notepad++

Membuat format JSOn secara manual sangat jarang dilakukan dalam pembuatan program ataupun layanan webservice. Sekenario yang umum adalah data didapat dari database lalu sebelum di kirim ke client, data di format sebagai JSON. Dalam artikel selanjutnya kita akan membahas cara membuat format JSON dari database MySQL dengan Bahasa pemrograman PHP.




thank to : http://www.candra.web.id/penjelasan-struktur-data-json/

Read More

Mengenal AngularJS

AngularJS adalah salah satu kerangka kerja (framework) berbasis javascript yang dikelola oleh google dan komunitas, tujuan dari AngularJS yaitu untuk lebih menyederhanakan baik dari segi pengembangan maupun pengujian aplikasi.

Salah satu fungsi dari AngularJS adalah membangun aplikasi web aplikasi dalam satu halaman (single-page web appication). Dalam menggunakan AngularJS terbilang sangat mudah, cukup tuliskan dalam atribut tag html seperti dibawah ini :

1	<script src="../angular.js" type="text/javascript"></script>

untuk mendapatkan file angular.js kamu bisa download disini.

Ada beberapa perintah “directive” yang ada didalam angularjs, seperti :

ng-appBerfungsi untuk mendeklarasi root element dari aplikasi AngularJS yang dapat digunakan untuk membinding dan menentukan perilaku.

ng-bind
Mengatur teks elemen DOM (Document Object Model) dengan nilai ekspresi.
Contoh, <span ng-bind="nama_ekeprsi"></span> akan menampilkan nilai ‘nama_ekeprsi’ di dalam elemen span. Setiap perubahan variabel ‘nama_ekeprsi’ di lingkup aplikasi tercermin langsung dalam DOM.

ng-model
Hampir sama dengan ng-bind, namun ng-model menetapkan data dua arah yang mengikat antara tampilan (view) dan ruang lingkup (scope)

ng-model-options
Berfugsi untuk mengatur bagaimana ng-model di update

ng-class 
Berfungsi agar atribut kelas dapat dimuat (loaded) secara dinamis

ng-controller
Berfungsi untuk menentukan JavaScript kontroler kelas yang mengevaluasi ekspresi HTML.

ng-repeatBerfungsi untuk melakukan perulangan (looping) pada tiap item

ng-show & ng-hide
Berfungsi untuk menampilkan atau menyembunyikan elemen, tergantung pada nilai ekspresi boolean

ng-switchDigunakan untuk memilih sebuah nilai dari beberapa pilihan, hampir sama dengan event onchange

ng-view
Directive dasar yang bertanggung jawab untuk menangani rute sebelum dikendalikan oleh controller tertentu

ng-if
Pernyataan if yang memungkinkan untuk menampilkan elemen berikut, jika kondisi benar. Ketika kondisi salah, elemen dihapus dari DOM. Ketika benar, tiruan dari unsur disusun ulang

ng-aria
Sebuah modul untuk dukungan aksesibilitas atribut ARIA

ng-animate
Modul menyediakan dukungan untuk JavaScript, CSS3 transisi dan CSS3 keyframe animasi kait dalam inti dan adat arahan yang ada

Mungkin kamu masih bingung tentang beberapa directive diatas, untuk lebih jelasnya coba kita buat sebuah aplikasi html standart.

1 2 3 4 5 6 7 8 9 10 11 12

<!DOCTYPE html> <html lang='en'>   <head>     <meta charset="UTF-8">     <title>Codeigniter - Angularjs</title>     <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> <script src="angular.js" type="text/javascript"></script>   </head>   <body ng-app="">        </body> </html>

Selanjutnya buatlah sebuah div didalam body, lalu masukkan kode dibawah ini :

1 2 3 4

<div>   Mencoba menambah angka   1 + 1 = {{ 1 + 1}} </div>

Maka hasilnya akan tampak seperti ini

Mencoba menambah angka 1 + 1 = 2

Mengapa demikian ? karena didalam {{ }} akan dilakukan ekseksi yang akan menghasilkan bilangan 2. Selanjutnya mari kita buat sebuah inputan, buat sebuah div baru dan masukkan kode dibawah ini :

1 2 3 4 5

<div>   Masukkan beberapa kata   <input type="text" ng-model="mytext" >   {{ mytext }} </div>

Maka hasilnya pada saat kita memasukkan teks pada textbox, akan mucul teks yang sama persis dengan yang kita inputkan, hal ini dikarenakan kita sudah menetapkan data dua arah yang mengikat antara tampilan (view) dan ruang lingkup (scope) yaitu pada ng-model diberikan value mytext.

Selanjutnya kira akan mencoba membuat huruf menjadi kecil (lowercase) fungsi dasar dari AngularJS, buatlah sebuah div baru dan gunakan kode dibawah ini :

1 2 3 4 5

<div>   Masukkan kata dengan huruf besar   <input type="text" ng-model="mylowercase" >   {{ mylowercase | lowercase }} </div>

Setelah itu coba jalankan, masukkan huruf besar kedalam text, dan perhatikan hasilnya. Jika huruf yang muncul kecil semua, maka percobaan anda sukses  .

Selanjutnya kita coba kebalikannya, menajadikan huruf menjadi besar (UPPERCASE), buat sebuah div baru dan gunakan kode dibawah ini :

1 2 3 4 5

<div>   Masukkan kata dengan huruf kecil   <input type="text" ng-model="myuppercase" >   {{ myuppercase | uppercase }} </div>

Lalu jalankan aplikasinya, masukkan huruf kecil kedalam text, jika huruf yang tampil adalah huruf besar semua maka percobaan anda sukses 

Ada banyak lagi API yang dapat digunakan diadalam AngularJS, agar lebih jelas bisa langsung ke TKP 

Agar lebih mudah dalam belajar AngularJS dan Codeigniter dengan template AdminLTE 2 , saya telah mengupload kedalam github.com .
Untuk setiap tutorial AngularJS akan ditambahkan kedalam git tersebut, sehingga dapat mempermudah para penggemar untuk belajar Codeigniter 3 dengan AngularJS.

Semoga bermanfaat

https://github.com/pudyasto/ci_angularjs

Terima Kasih

Read More