Cara Ionic Handle CORS

Penasaran, saya coba buat crud sederhana. Menggunakan Codeiniter sebagai backend nya, saya coba akses ionic dengan $htpp lewat angular. Hasilnya….selalu ketemu dengan CORS.

Bagaimana untuk menghindari CORS disini? Ternyata Ionic sudah buat handlenya. Artikel nya ada di link ini http://blog.ionic.io/handling-cors-issues-in-ionic/.

Jika pada local codeigniter kita buat url misalnya http://localhost/nama_project_ci/nama_controller sebagai backend yang mengeluarkan json untuk ditangkep oleh angular. Buka pada folder project ionic kita, lalu cari file ionic.project.
Continue reading Cara Ionic Handle CORS

Membuat RSSFeed Blog Pada Ionic

Lagi seneng nyobain ionic. Awalnya coba-coba karena sempet ada yang minta bantuan dengan phonegap. Tapi setelah cari informasi, sepertinya ionic lebih oke karena angularjs mungkin yaa. Aplikasi yang awal saya buat dengan ionic ini adalah Feed Blog. Sangat-sangat sederhana kok, ambil data feed blog wordpress dengan bantuan google api.
Continue reading Membuat RSSFeed Blog Pada Ionic

Basic CRUD Laravel 5.1 dengan AngularJS dan PosgtreSQL

Paling awal ketika belajar salah satu teknologi adalah dengan membuat basic proses sederhana dari proses simpan data, abil data, ubah data dan hapus data yang dikenal di kalangan programmer adalah CRUD. Berikut ini saya coba membuat basic CRUD Laravel 5.1 dengan AngularJS dan database PostgreSQL. Continue reading Basic CRUD Laravel 5.1 dengan AngularJS dan PosgtreSQL

Mengenal Routing pada AngularJS

Routing pada angularjs seperti pada codeigniter ataupun laravel. Anda dapat membuat url, lalu mengarahkannya pada template atau proses tertentu melalui controller. Berikut ini saya coba sampaikan routing sederhana pada angularjs.

Sederhananya yang kita lakukan saat membuat halaman web adalah kita membaginya dalam beberapa bagian seperti, body kita pisahkan pada 1 file html atau 1 file php, header, navigasi dan footer pun kadang kita pisahkan dalam 1 file. Hal ini memudahkan kita memperbaiki jika salah satu bagian halaman tersebut error atau tidak sesuai dengan keinginan. Continue reading Mengenal Routing pada AngularJS

Mengenal Transclude Custom Directive pada AngularJS

Transclude salah satu option custom Directive yang unik di AngularJS. Dengan option ini kita kaya buat template static yang bisa dipakai lagi dan lagi. Contohnya gini, saya buat list link seperti dibawah ini. Continue reading Mengenal Transclude Custom Directive pada AngularJS

Passing Data ke Custom Directive pada AngularJS

Lagi belajar passing data ke custom directive di AngularJS. Cara-nya mudah banget, bisa lihat kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>

<div my-directive
    my-url="http://google.com"
    my-link-text="Click me"></div>
 
</body>
<script>
angular.module('myApp', [])
.directive('myDirective', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      myUrl: '@',
      myLinkText: '@'
    },
    template: '<a href="{{myUrl}}">{{myLinkText}}</a>'
  };
});
</script>
</html>

[demo]

Pada kode diatas saya buat directive sendiri, lalu passing data dari html ke directive itu sendiri yaitu myUrl dan myLinkText. Directive yang kita buat harus mengeluarkan object sesuai settingan dari AngularJS. Restrict maksudnya adalah pembatasan directive terpasang, replace maksudnya adalah apa template yang kita buat menimpa html atau tidak dan template adalah hasil keluaran dari directive yang kita buat.

Kita pun dapat menambahkan data lain misalnya alt seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>

<div my-directive
     my-url="http://google.com"
     my-link-text="Click me" my-alt-text="Google"></div>
 
</body>
<script>
angular.module('myApp', [])
.directive('myDirective', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      myUrl: '@',
      myLinkText: '@',
      myAltText:'@'
    },
    template: '<a href="{{myUrl}}" alt="{{myAltText}}">{{myLinkText}}</a>'
  };
});
</script>
</html>

[demo]