AngularJs : Custom ng-hide directive

Kembali bermain dengan AngularJs. Berawal karena adanya project yang membuat user memiliki kemampuan yang dinamis dan disimpan pada session storage. 

Solution 1

Pada awalnya pengecheckan dilakukan di controller masing". Hasilnya cukup merepotkan, karena setiap controller harus melakukan pengecheckan sendiri dan apabila ada perubahan membutuhkan banyak effort untuk melakukan perbaikan. 

Solution 1

Solution 2

Setelah itu saya berpikir untuk melakukan pengecheckan di satu tempat saja agar perubahan pengecheckan hanya dilakukan di satu tempat. Sehingga saya memindahkan tempat pengechekan pada service. Dengan demikian controller memiliki kewajiban untuk memanggil service untuk melakukan pengecheckan dan melemparkan hasilnya ke html.

Solution 2

Solution 3

Cara tersebut sudah terimplementasi di beberapa project hingga suatu sore saya ketika sedang merenung di taman saya mendapat pencerahan. Kenapa tidak dibuat directive saja yang melakukan pengecheckan terhadap value itu?

Akhirnya saya melakukan sedikit custom atau mengadopsi apa yang dilakukan pada directive angular yang cukup terkenal yaitu ng-hide / ng-show dengan melakukan pengecheckan variable yang ada pada session storage. 

Solution 3

Demikian secara teori solusinya. Berikut akan saya tunjukkan bentuk data yang tersimpan pada session storage dan penggunaan directivenya.

Privilege di Session Storage :

$scope.privileges = [
    {"name": "create_user"},
    {"name": "update_user"},
    {"name": "read_user"},
    {"name": "delete_user"}]

Directive

'use strict';angular.module('nostraApp')
     .directive('hasPrivilege', ['$sessionStorage', function ($sessionStorage){
            return {
                restrict: 'A',
                link: function(scope, element, attributes) {
                    scope.$watch(attributes.hasPrivilege, 
                     function(checkPrivilege){
                        var value = false;
                        if($sessionStorage.privileges){
                        var listPriv = $sessionStorage.privileges;
                        var privilege = listPriv.map(function (e) {
                            return e.name;
                        }).indexOf(checkPrivilege);
                        if (privilege != -1) {
                            value =  true;
                          }}
                       element.css('visibility', value ? 'visible' : 'hidden');
                       element.css('display', value ? 'inline' : 'none');
                   });
                }};
        }]);

HTML :

<button type="button" ng-click="addUser()" has-privilege='"create_user"'>
 Tambah User
</button>

Dengan demikian tidak ada lagi tambahan code di controller maupun service untuk melakukan pengecheckan. Tentunya hal ini tidak terikat hanya pada angular1 saja tetapi konsep juga dapat di implementasikan di angular2 ataupun angular 4.
Untuk kali ini sekian saja yang dapat saya bagikan untuk mempermudah pekerjaan kali ini. Semoga dapat berguna. Happy Coding~ :D

AngularJS is dying?

Sudah 6 tahun jalan sejak angularJS pertama kali lahir di dunia ini dan (baru) 3 tahun sejak saya pertama kali mengenalnya. Pada dasarnya untuk saya yang awalnya bukan seorang Front End Developer dan tidak fasih dengan Javascript, Angular merupakan salah satu framework yang membuat saya jatuh cinta. Berbagai fitur yang dimilikinya luar biasa memudahkan Saya walaupun untuk beberapa orang merasa bahwa penulisan angular yang bebas membuat jadi lebih sulit.

Setelah melewati beberapa tahun dengan angular tentunya fitur 2-way-data-binding Angular yang luar biasa mempertemukan saya dengan berbagai kemudahan dan kesulitan. Ketidak telitian dalam pengunaan $scope membuat boros resource karena banyaknya object yang di watch merupakan masalah yang cukup pelik. Adanya beberapa tag yang ternyata menghalangi angular melakukan 2-way-data-binding dan masih banyak lagi. Tetapi hal tersebut tidak membuat saya lepas dari angular. Walau banyak rekan kerja yang sudah menyarankan move on ke beberapa framework lain, seperti ReactJS misalnya. Bukannya cinta buta ya, tetapi bisa di lihat lagi ke atas, Yap saya tidak fasih dengan Javascript. Tentunya membuat saya kesulitan mencari framework pengganti Angular.

HIngga pada akhirnya Angular 2 rilis, beberapa perbaikan dari sisi struktur yang tadinya di bebaskan menjadi lebih terstruktur. 2-way-data-binding di bagi-bagi menjadi lebih detail sesuai kebutuhan, sehingga dapat mengurangi resource dengan penggunaan yang lebih teliti. Dan masih banyak perbaikan lainnya. Dengan penuh harap, mengharap angular2 dapat memberikan framework yang lebih powerfull dan mudah digunakan.

Tetapi sepertinya tidak demikian, Setelah 2 tahun masa development Angular 2 dengan cara penulisan yang luar biasa berbeda dari Angular 1, membuat developer tercengang dengan perombakan yang terjadi. Thats a rewrite!! Tidak hanya itu complexitas code yang ada membuatnya semakin rumit dibanding Angular1 dan typeScript yang diusung sebagai bahasa utamanya (Dart tidak memenuhi keinginan mereka sepertinya dengan keterbatasan- keterbatasan yang ada). Ditambah dengan size starting package yang sudah cukup besar membuat saya semakin meragukan Angular2 serta informasi bahwa developer utamanya saat ini sedang membuat framework baru. Hal tersebut terjawab tak lama kemudian ketika diputuskan adanya Angular 4 hanya jarak beberapa saat dari waktu release angular2. Yap Google sepertinya merasakan keraguan yang sama.

Lalu bagaimana kelanjutan Angular? Itu pertanyaan terbesar saya. Ketika saya menghampiri website angular tidak terlihat penampakan Angular2 seperti yang terlihat tahun lalu. Hanya sebuah tulisan kecil yang mengarahkan ke angular.io untuk membaca lebih lanjut. Sedangkan button new angular mengarah ke angular-material beta version(base on angular2).

Sad story for a young "big" framework. :)
Mari kita lihat saja apakah Angular4 akan dapat memperbaiki keadaan yang ada atau Angular akan benar- benar hilang dari framework web yang ada.

Jasper Report - Table from List Java

Pada kesempatan yang lalu saya pernah membahas mengenai penggunaan jasper pada java yang dapat dibaca di sini. Disana saya sudah menjelaskan mengenai bagian- bagian yang terdapat pada jasper. Serta bagaimana penggunaanya pada java

Pada kesempatan beberapa waktu saya berkesempatan bermain kembali dengan jasper dan masih menggunakan java untuk penggunaannya. Pada kesempatan kali ini saya akan memberikan contoh penggunaan jasper menggunakan table dengan javabean datasource.

Table tentunya merupakan bagian yang sering ada pada report. Jasper tentunya juga support dengan fitur ini. Penggunaan table pada jasper sebenarnya sangat mudah apabila menggunakan datasource karena sudah ada wizard untuk hal tersebut. Maka dari itu saya tidak akan membahas penggunaan table pada jasper menggunakan datasource melainkan menggunakan java.

Apabila sebelumnya dengan mengirim list sebagai JRDataSource dan langsung dapat digunakan pada detail band. Untuk menggunakan list pada table data dalam bentuk JRDataSource perlu dikirim sebagai bagian dari param.

Mari kita siapkan template reportnya.

• Buat parameter pada report dengan nama ObjectDataSource dan Class : net.sf.jasperreports.engine.data.JRBeanCollectionDataSource

• Membuat sebuah datasource yang akan digunakan pada table ( bisa langsung ketika config tablenya juga )
  
  
•  Ambil table dari pallet dan menjalankan wizardnya seperti berikut

• Membuat field pada datasource yang digunakan untuk table tersebut sesuai dengan object java kita.

• Tata dalam table.

   

• Setelah selesai saya membersihkan band yang ada pada report dan hanya menyisakan band title dan detail saja. Berikut struktut akhir dari template yang digunakan

Berikut adalah cara pemanggilan reportnya untuk pembuatan report dalam format pdf dari java.

    List<SimpleReportVO> detail = new ArrayList<>();    
    SimpleReportVO data1 = new SimpleReportVO();    
    data1.setName("Roti Tawar");    
    data1.setPrice(1000);
    detail.add(data1);
    String dest = "D://report/report.pdf";    
    String template = "D://report-template.jasper";
    try{
        JRDataSource ds = new JRBeanCollectionDataSource(detail);
        HashMap params = new HashMap();
        params.put("ObjectDataSource", ds);        
        JasperPrint jp  = JasperFillManager.fillReport(template ,
                params, new JREmptyDataSource());
        JasperExportManager.exportReportToPdfFile(jp, dest);
    }catch (Exception e){
        logger.info(e.getMessage());    
    }

Object Java : 

import lombok.Data;

@Data
public class SimpleReportVO {
    private String name;
    private int price;}

Hasil darinya seperti berikut :

Demikian cara penggunaan table pada jasper report dari list java. Semoga berguna..
Sampai bertemu di kesempatan berikutnya.
Happy Coding :)

AngularJS Fact : Angular for input type file

AngularJS memiliki kemampuan yang merupakan fitur yang mereka jual yaitu two-way data binding. Hal tersebut dimiliki baik di angular1 maupun angular2. Dengan kemampuan two data bindingnya angular telah melakukan pembindinga data secara otomatis sesuai dengan variable yang telah kita definisikan. Untuk lebih mengerti mengenai angular two-way data binding dapat di baca lebih lengkap pada tulisan saya yang lain. 

Walaupun demikian masih ada tipe input yang tidak memiliki binding otomatis dari angular. Salah satunya adalah untuk input type file. Jangan pernah berharap ng-model dapat digunakan pada input type file. Lalu apa yang bisa kita lakukan?

Ada beberapa cara agar file input dapat digunakan di controller : 

1. Mengirim langsung ke controller melalui method

   Pada saat apakah kita perlu mengirim file? Yap pada saat perubahan yang terjadi pada input type. Tetapi karena pada dasarnya karena input type file tidak disupport oleh angular, ng-change pun tidak dapat berjalan pada tag tersebut. Sehingga untuk mendeteksi perubahan yang terjadi kita dapat menggunakan onChange yang dimiliki oleh javascript.

Berikut adalah html yang digunakan untuk mengirim file ke controller menggunakan onchange : 

<input name="upload" id="coverImage" type="file" class="hidden" 
onchange="angular.element(this).scope().addImage(this)">

Dengan demikian kita hanya perlu membuat function addImage() yang akan menerima file untuk di binding pada scope. Berikut sample function yang perlu dibuat : 

self.addImage= function (ele) {
    $scope.file = ele.files[0],self.imageCoverObject;};

Note : 

Karena onChange bukan merupakan directive angular sehingga scope tidak dapat begitu saja di gunakan seperti biasanya. Untuk mendapatkan nama method yang di cari maka kita perlu menggunakan : 

angular.element(this).scope()

Dengan demikian sudah selesai pekerjaan kita untuk mendapatkan file di controller dengan cara pertama.

2. Membuat directive yang akan melakukan injection pada scope.

    Namanya saja Angular, rasanya kurang mantab apabila masih menggunakan javascript. Karenanya berikutnya saya akan menjelaskan bagaimana cara membinding file pada scope menggunakan directive. Untuk directive dengan tujuan input type file sudah banyak macamnya, karenanya saya akan lebih menjelaskan flownya.

Directive yang akan dibuat : 

Html : 

<input name="upload" id="inputFileSample" type="file" file-upload="fileUploads">

Dengan demikian file akan otomatis terbinding pada variable $scope.fileUploads.

Berikut adalah sample data yang akan didapat dengan cara diatas : 

Lengkap dengan info yang kita inginkan untuk di binding pada scope. :)

Demikan adalah cara yang dapat digunakan untuk mendapatkan file di controller. Keduanya tentu dapat dipakai dengan pertimbangan masing- masing.

Sekian dulu dari saya kali ini. Semoga dapat membantu bagi yang membutuhkan cara mendapatkan file di angular controller.

Happy Coding~ :D

AngularJS Tips n Trick : Image preview

Berjumpa kembali dengan topik angular. Kalau sebelumnya kita perenah membahas mengenai upload multiple file. Kali ini Saya akan membahas menampilah preview ketika melakukan upload file image. Pada dasarnya untuk membuat sebuah preview kita perlu menaruh file tersebut menjadi sebuah link yang dapat di akses oleh tag image. Untuk mencapai hal tersebut kita tentunya memiliki beberapa cara. Untuk saat ini kita akan membahas 2 cara saja. Pertama, kita dapat mengupload file tersebut pada sebuah situs yang berfungsi sebagai image hosting atau bisa juga ke backend kita sendiri. Kedua, kita dapat menggunakan salah satu fungsi javascript yaitu readDataAsUrl() yang dimiliki oleh FileReader.

File Reader sendiri merupakan salah satu interface yang memiliki berbagai macam fitur untuk digunakan dalam modifikasi file untuk web. Untuk lebih lengkapnya mengenai File Reader dapat di baca saja di webnya :D .Karena pada kesempatan ini saya tidak akan membahas mengenai file reader, yang akan saya bahas adalah penggunaannya pada angular.

Dengan mengetahui adanya 2 cara yang cukup mudah dilakukan, berikut ilustrasi flow yang akan terjadi dengan menggunakan 2 cara tersebut.

1. Melakukan upload file ke backend atau file management lain.

 

2. Menggunakan File Reader untuk membaca file sebagai url.

Dari flow di atas dapat dilihat apabila kita menggunakan file management, maka file yang kita simpan akan dikirim terlebih dahulu. Dengan asumsi user dapat mengganti berkali-kali foto yang akan di gunakan maka tentunya akan menjadi boros bandwith. Itulah mengapa saya memutuskan untuk mengguankan file reader dan menggunakan fungsinya untuk mengubah file menjadi url. 

Bagaimana cara menggunakannya?  Sebenarnya bisa saja kita memasang javascript langsung untuk menggunakan FileReader. Tetapi karena saya bukan kubu pecinta javascript membuat saya memilih menggunakan angularJS yang tidak berbau javascript dan tentunya saya tidak tertarik mencoba menggunakan FileReader dalam format javascript. Apabila tertarik menggunakannya langsung dapat dilihat dari sini karena dsana cukup lengkap demo dan sourcenya. :D

Setelah mencari bower component untuk FileReader dan tidak menemukan yang memuaskan. Akhirnya saya menemukan sebuah source dari Plunker. Kemudian saya memutuskan untuk menggunakan Upload.js yang ada karena cukup sesuai dengan keinginan. 

Berikut adalah potongan code yang digunakan dengan sedikit penyesuaian : 

  1. HTML

    Seperti yang saya jelaskan pada blog lainnya bahwa angular tidak memiliki directive bawaan untuk menerima input type file. Sehingga kita perlu membuat sendiri directive tersebut. Kebetulan saya sudah memiliki directive tersebut sehingga saya menggunakan yang sudah ada yaitu directive file-model. Kemudian HTML akan menggunakan ng-if untuk mengecheck untuk mendapatkan url terbaru.

 2. Controller

    Pada controller terdapat method getImage() yang akan membuat url baru untuk setiap file baru yg tertampung pada scope. Url akan di tampung pada variable scope imageUrl yang akan di gunakan sebagai source di html.

  3. Upload.js

Berikut merupakan upload.js yang sudah disesuaikan dengan format yang biasa saya gunakan dalam project saya. Disana dapat dilihat method readAsDataURL() sebenarnya memanggil method FileReader readAsDataUrl.

Demikian cara penggunaan File Reader yang untuk angularJS. Hasilnya akan terlihat seperti berikut : 

Sekian dulu dari saya kali ini. Semoga dapat membantu bagi yang memiliki keinginan untuk melakukan display image yang ingin diupload.

Happy Coding~ :D

Multi upload file dan delete problem

Upload file merupakan salah satu tag html yang sudah ada cukup lama dalam dunia percodingan web. Sedangkan multi upload sendiri merupakan tag yang muncul pada html5. Lalu apa masalah yang Saya alami kali ini? :D

Saya memiliki fitur upload foto dalam jumlah banyak dengan menggunakan angular sebagai otaknya dan memiliki kemampuan menghapus foto yang tidak diinginkan dari list. Cukup mudah di aplikasikan bukan?

Demi mempercepat pengerjaan, Saya menggunakan dasar directive angular dari sini. Tinggal mempersiapkan cara untuk menghapusnya saja. Pada dasarnya directive tersebut akan mengisi $scope.files dengan kumpulan object file yang kita pilih. Saya hanya perlu menghilangkan object yang ingin di hapus dari array $scope.files.

Berikut potongan code yang digunakan untuk menghapus foto dari list :

$scope.deleteFromListUpload = function(dataForDelete){
    var index = $scope.files.indexOf(dataForDelete);    $scope.files.splice(index, 1);};

Sedangkan fungsi deleteFromListUpload akan di panggil dari html :

<table class="table">
     <thead>
        <td width="90%" class="text-center">Nama Foto</td>
        <td width="10%"></td>
     </thead>
     <tr ng-repeat="fotoForUpload in files">
        <td>
           <input type="text" class="form-control" ng-model="fotoForUpload.name" 
             ng-value="fotoForUpload.name">
        </td>
        <td>
          <button type="button" class="btn btn-default" 
            ng-click="deleteFromListUpload(fotoForUpload)">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
        </td>
     </tr>
</table>

Berikut tampilan halaman hasilnya :

Multi Upload

Setelah Data Terhapus

Fungsi hapus berhasil berfungsi dengan baik, hanya saja terlihat pada keterangan sebelah button mengenai jumlah file yang di pilih tidak berubah. Hal ini merupakan atribut yang dimiliki oleh tag input type file milik html5. Keterangan akan memberikan data mengenai berapa file yang terakhir dipilih oleh user / nama file yang dipilih apabila hanya 1 file yang dipilih.
Setelah mencari tahu bagaimana cara merubah tulisan tersebut dan hasilnya nihil. Maka saya berpikir bagaimana apabila saya menghilangkan saja tulisan itu agar client tidak merasa terganggu. Sayangnya secara default benda tersebut sudah ada dan tidak ada ditemukan tanda- tanda untuk menghilangkannya. Hingga saya teringat sebuah tag <label for="multiInput">Input</label>.

Yang akan dilakukan adalah : 

1.  Menambahkan label untuk input type file 
2.  Menghide input type

Yap sesimple itu. . .

Berikut adalah potongan code html setelah di beri trik : 

<input name="upload" id="multiFiles" type="file" ng-file-model="files" 
   multiple class="hidden" >
<label class="btn btn-default" for="multiFiles">Pilih Foto</label>

class="hidden" merupakan class milik Bootstrap yang saya gunakan untuk menghide input type. Setelah menambahkan code tersebut, hasilnya menjadi seperti ini :

Dengan demikian sudah tidak terlihat ada keterangan yang tidak mencerminkan data yang sebenarnya. Dan untuk mempercantik Saya menambahkan keterangan tambahan jumlah file yang dipilih dengan memanfaatkan data binding angular seperti berikut :

<input name="upload" id="multiFiles" type="file" ng-file-model="files" 
   multiple class="hidden" >
<label class="btn btn-default" for="multiFiles">Pilih Foto</label> 
File Terpilih : {{ files.length }}

 

Hasilnya jumlah yang tampil akan selalu sesuai dengan jumlah data yang ada..
Demikian adalah trik yang saya lakukan untuk menutupi kinerja keterangan tag yang tidak sesuai keinginan (Saya).
Sekian dulu dari saya kali ini. Semoga dapat membantu bagi yang memiliki perasaan yang sama terhadap fitur tag input tersebut.
Happy Coding~ :D

Metro Carousel, Angular ng-repeat dan REST data Tips n Trick

Carousel merupakan salah satu komponen yang disediakan untuk membuat slider image. Beberapa saat yang lalu saya menggunakan fitur carousel dari Metro UI untuk membuat sebuah slideshow artikel dengan menggunakan ng-repeat angular sebagai data yang akan di gunakan sedangkan data akan di dapat dengan mengambil dari backend menggunakan REST.

Berikut adalah harapan flow data yang akan terjadi : 

Flow Harapan

Pada awalnya Saya berpikir system akan memiliki data flow seperti gambar di atas. Pada awal halaman di buka, controller akan langsung melakukan call data pada backend. Yang kemudian setelah data di dapat dari backend, angular mengesetnya pada variable scope dan dengan kemampuan 2-way-data-binding angular akan membuat data image tersedia untuk di gunakan sebagai image yang akan ditampilkan

Sayangnya hal tersebut tidak terjadi seperti harapan. Berikut hal yang terjadi pada sistem : 

Flow Kenyataan

Pada kenyataannya system pada saat controller masih belum mendapatkan data dari backend, carousel sudah mengambil data dan menjalankan fungsinya sebagai image slider, dan dikarenakan pada awal tidak ada kumpulan image yang ada, hal tersebut membuat carousel hanya menyediakan 1 slot image untuk di masukkan kedalam slider. Sehingga ketika data sudah di dapat sekalipun, hanya image pertama yang ditampilkan dan tidak ada efek slider.

Kemudian setelah mengetahui cara kerja carousel maka yang harus dilakukan adalah membuat carousel di diinit setelah mendapatkan data dari REST.

How?
Karena controller yang tahu kapan data datang dan dapat mentrigger untuk menginit carousel, maka terpikir cara untuk membinding html carousel pada saat data datang menggunakan ng-bind-html.

Flow solusi : 

Flow Solusi

Menggunakan cara tersebut, Carousel muncul pada html setelah data lengkap dan memulai fungsinya sendiri(urusan Metro) dengan data image yang lengkap. Sehingga carousel dapat berjalan dengan benar. 

Happy end? Yes!!

Carousel dapat berjalan semestinya dengan tetap mendapat data dari backend. Tetapi itu adalah satu dari seribu jalan menuju roma yang berhasil saya dan team temukan, Saya rasa tentunya masih ada cara lain untuk mensolving masalah ini.  :D

Berikut adalah potongan code apa yang digunakan untuk memperjelas maksud membinding html :

HTML :

<div ng-bind-html="htmlCarouselArticle"> </div>

Angular Controller : 

var renderCarousel = function (listObject) {

    var contentHtml = '';
    angular.forEach(listObject, function (object) {

        var body = "<div class='slide' > 
             <div style='background-size: cover; 
             background-position: center center; 
              background-image: url("+
            object.urlPic            +"); width: 100%; height: 100%;' > </div> </div>";
        contentHtml = contentHtml + body;    });
    var header = "<div class='carousel' data-role='carousel' data-effect='slide' 
    data-controls='false' data-markers='false' >";
    var footer = "</div>";
    contentHtml = header + contentHtml + footer;
    $scope.htmlCarouselArticle = $sce.trustAsHtml(contentHtml);};

Pada html Saya menggunaka ng-bind-html untuk membind sebuah scope pada html. Pada controller saya memanggil function renderCarousel setelah API mendapatkan kembalian data. Function renderCarousel akan melooping data dari api dan mengconstruct html yang dibutuhkan untuk carousel.

Solusi ini tentunya tidak hanya dapat digunakan untuk masalah carousel pada Metro ui, tetapi dapat digunakan di banyak hal yang membutuhkan trigger setelah suatu event. 

Semoga solusi ini dapat membantu, sampai berjumpa kembali lain waktu
Happy Coding~ :D

Data Binding Angular 1 vs Angular 2

Data Binding pada angular merupakan salah satu fitur yang paling saya sukai. Two ways data binding yang sangat mudah digunakan membuat hidup ini berasa lebih mudah, terutama bagi saya yang tidak menyukai javascript maupun jquery.

Two Way Data Binding merupakan konsep yang diusung oleh angular sejak angular 1.

Model dan View akan terus menerus melakukan sync sehingga data yang diupdate baik dari controller maupun view akan saling mengupdate dan selalu sama. Angular1 menggunakan sebuah variable bernama $scope untuk menjadi penjembatan antara model dan view. Semua data yang berada dalam $scope akan selalu diawasi. Hal itu membuat model dan view selalu sync satu sama lainnya, tetapi jangan berpikir bahwa itu semua semanis kelihatannya. Yap, angular melakukan watch pada semua variable $scope yang aktif dan tentunya menghabiskan resource yang cukup besar. Sebuah kesalahan kecil seperti melakukan reuse variable $scope pada html yang sedang di hide saja bisa menyebabkan rendering behind the view yang luar biasa hingga menyebabkan freeze padahal hanya untuk mendisplay ( yap, saya pernah mengalaminya )

Lalu bagaimana dengan Angular2?
Berikut sample code agar lebih mudah di cerna : 

<div>{{article.name}}</div>
<article-detail [article]="selectArticle"></article-detail>
<div (click)="selectArticle(article)"></div>

Pada angular 2 terdapat 3 macam data binding : 

Data Binding Angular 2

• Interpolation : {{article.name}}interpolation berfungsi untuk menampilkan value dari component pada div biasa
• Property Binding : [article]
  property binding berfungsi untuk menampilkan value dari component pada property, atau dari parent ke child
• Event Binding : (click)
  Event Binding berfungsi untuk mengirim data dari view menuju component

Lalu dari ketiga macam tipe binding yang disediakan Angular 2. Terdapat juga two way data binding yang merupakan kombinasi dari property binding dan event binding yang merupakan bentuk dari Two Data Binding Angular 2. 

<input [(ngModel)]="article.name">

Pada Two Way Data Binding, Angular menggabungkan property dan event binding. Perubahan yang dilakukan oleh user akan dikirim ke component melalui event binding, sedangkan Perubahan pada component akan dikirim menggunakan property binding. Hal tersebut membuat angular tidak perlu melakukan watch pada suatu variable melainkan melakukan aktivitas ketika ada triger baik dari component maupun dari view. Hal yang sama juga dapat dilakukan antar parent dan child component.

Two Way Data Binding Angular 2

Angular 2 telah memberikan solusi yang lebih baik untuk masalah performance data binding yang terjadi pada Angular sebelumya. Dan tentunya kita dapat tetap berbahagia tanpa perlu repot memproses two data binding sendiri. Sekian saja untuk kesempatan kali ini.

Sampai berjumpa pada kesempatan berikutnya. Happy Coding :D

Format Penulisan Pada Angular2

Pada kesempatan kali ini Saya akan membahas mengenai Angular2. AngularJs akhirnya merilis Angular 2 pada pertengahan tahun 2016( status saat ini masih beta 17). Sayangnya Angular 2 bukan merupakan upgrade dari Angular 1 melainkan merewrite Angular 1 menjadi framework yang baru. Angular2 melakukan beberapa perubahan seperti yang sangat signifikan adalah mengganti 2 component utama Angular 1 yaitu controller dan $scope dengan component dan directives, modularity, dependency injection, service, serta template.

Selain itu pada Angular2, angular menyediakan 3 macam format penulisan. Typescript, Javascript, dan Dart. Pada kesempatan kali ini Saya akan membahas apa saja 3 macam format penulisan pada angular2.

3 macam format penulisan pada AngularJS 2: 

• Typescript
  
  Typescript merupakan penulisan yang di sarankan oleh angular2. Typescript sendiri merupakan bahasa yang dgunakan untuk membangun Angular2. Typescript atau dikenal dengan Microsoft's Typescipt adalah Javascript yang memiliki fitur tambahan seperti object oriented programming, lambda, dan beberapa hal lainnya. Typescript sendiri biasa digunakan untuk menghandle project besar yang sulit dimaintenance apabila menggunakan Javascript.
  Dengan menggunakan Typescript maka file component dan master file akan memiliki extensi .ts.Berikut adalah struktur dasar apabila menggunakan format typescript : 

         Terlihat disana ada beberapa file :

• app.component.ts : File ini merupaka root component. Dalam sebuah aplikasi angular, setidaknya harus ada 1 root component. Standarnya root component disebut sebagai AppComponent.
• main.ts : File ini berfungsi memberitahu angular untuk mengeload component yang dibutuhkan.
• package.json : Seperti namanya, file ini berisi package- package yang dibutuhkan oleh apps untuk menjalankan fungsinya.
• systemjs.config.js : File ini merupakan file config untuk SystemJS. SystemJS digunakan untuk membantu load library yang dibutuhkan. SystemJS hanyalah salah satu alat bantu dan dapat diganti dengan library management lainnya.
• tsconfig.json : File ini merupakan file config untuk Typescript compiler 
• typings.json : File ini merupakan file definition yang berisi identity dari Typescript yang digunakan
• index.html : Master html tempat semua script di daftarkan dan aplikasi ditulis

• Javascript
  
  Javascript merupakan bahasa pemprograman yang cukup terkenal di dunia pemprograman web. Angular menggunakan Javascript menjadi salah satu format yang dapat digunakan pada Angular2. Pada format penulisan javascript file yang akan digunakan akan memiliki extensi .js seperti yang terlihat pada gambar. Apabila anda pecinta javascript dan bersedih karena sebelumnya angular membuat coding web tanpa perlu menyentuh javascript. Maka Javascript format pada Angular2 merupakan jalan kebahagiaan.

            Terlihat disana ada beberapa file :

• app.component.js : Sama halnya seperti pada Typescript format. Merupakan root component pada angular apps.
• main.js : Sama halnya seperti pada Typescript format. File ini berfungsi memberitahu angular untuk mengeload component yang dibutuhkan.
• package.json : Seperti halnya seperti pada Typescript format, file ini berisi package- package yang dibutuhkan oleh apps untuk menjalankan fungsinya.
• index.html : Master html tempat semua script di daftarkan dan aplikasi ditulis

• Dart
  
  Dart merupakan class based oriendted programming yang dikembangkan untuk membangun website, server dan mobile apps. Pada format penulisan Dart, Angular telah mengemas javascript menggunakan Dart dan menyediakan fiturnya dengan cukup lengkap sehingga lebih mudah digunakan untuk memulai memahami konsep angular2. Tetapi dikarenakan pada dasarnya Angular menggunakan Dart untuk membungkus Javascript, Dart format memiliki keterbatasan seperti membuat user harus menghafalkan format- format yang ada sehingga tidak direkomendasikan untuk project dengan skala besar dan kompleks.

             Terlihat disana ada beberapa file :

• app.component.dart : Sama halnya seperti pada Typescript format. Merupakan root component pada angular apps
• main.dart : Sama halnya seperti pada Typescript format. File ini berfungsi memberitahu angular untuk mengeload component yang dibutuhkan.
• pubspec.yaml : Merupakan file yang mendeklarasikan angular dan browser package yang digunakan sebagai dependency. Angular masih melakukan perubahan untuk format file ini pada masa beta status saat ini. 
• index.html : Master html tempat semua script di daftarkan dan aplikasi ditulis

Setelah mengetahui 3 macam penulisan pada AngularJs. Kita bisa menentukan format yang mana yang ingin dan cocok kita gunakan pada project yang akan dibuat serta kemampuan anggota team yang ada.
Semoga Tulisan ini dapat membantu. Happy Coding :D

Materialize VS Bootstrap

Pada kesempatan sebelumnya kita telah berkenalan dengan materialize. Pada kesempatan kali ini saya akan melihat sedikit beberapa atribut yang dimiliki baik oleh materialize maupun Bootstrap.

Sebelumnya kita bahas sedikit mengenai Bootstrap. Seperti halnya Materialize, Bootstrap juga merupakan sebuah framework atau lebih tepatnya html,css,js framework. Bootstrap mempermudah developer dalam membuat tampilan yang layak dilihat. Bootstrap sendiri di buat oleh Twitter dengan tujuan untuk mempermudah pembuatan responsive website. Sedangkan Materialize seperti sudah dijelaskan sebelumnya bahwa google mengusung kembali material design dalam bentuk web.

Apabila dilihat dari spesifikasinya, maka Bootstrap dan Materialize akan memiliki data seperti ini :

Atribut	Bootstrap	Materialize
IE	8+	10+
Firefox	support	support
Chrome	support	support
Opera	support	support
LESS	support ( drop on version 4 )	not support
SASS	support	support

Berikutnya mari kita mencoba beberapa component dari kedua framework tersebut.

1. Collapsible
   Yap, collapsible adalah hal yang cukup merepotkan untuk dibuat ketika kita masih tidak memiliki banyak pilihan framework. Saat ini banyak framework yang telah mempermudah kita dalam pembuatanannya termasuk Boostrap dan Materialize
   
   Boostrap Code :
   

   <div class="container">  
     <a href="#demo" class="btn btn-info" data-toggle="collapse">collapsible</a>
     <div id="demo" class="collapse">   
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam,    
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
     </div>
   </div>

   Result :
   
   
   
   
   
   Materialize 
   Html :
   

    <ul class="collapsible popout" data-collapsible="accordion">
       <li>
         <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
         <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
       </li>
       <li>
         <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
         <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
       </li>
       <li>
         <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
         <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
       </li>
     </ul>

   Javascript :
   

    $(document).ready(function(){
       $('.collapsible').collapsible({
         accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
       });
     });

   Result  :
   
   
2.  Form
   Membuat web tentunya tidak terlepas dari form. Berikut merupakan sample pembuatan form dari kedua framework tersebut.
   BootstrapCode :
   

   <form role="form">
       <div class="form-group">
         <label for="email">Email:</label>
         <input type="email" class="form-control" id="email" placeholder="Enter email">
       </div>
       <div class="form-group">
         <label for="pwd">Password:</label>
         <input type="password" class="form-control" id="pwd" placeholder="Enter password">
       </div>
       <div class="checkbox">
         <label><input type="checkbox"> Remember me</label>
       </div>
       <button type="submit" class="btn btn-default">Submit</button>
     </form>

   Result :
   Default form dari boostrap tidak terlalu banyak berbeda dari form yang telah disediakan html.
   
   
   
   
   Materialize
   Code :
   

   <div class="row">
       <form class="col s12">
         <div class="row">
           <div class="input-field col s6">
             <input id="first_name" type="text" class="validate">
             <label for="first_name">First Name</label>
           </div>
           <div class="input-field col s6">
             <input id="last_name" type="text" class="validate">
             <label for="last_name">Last Name</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input id="password" type="password" class="validate">
             <label for="password">Password</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input id="email" type="email" class="validate">
             <label for="email">Email</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input type="checkbox" id="test6" checked="checked" />
             <label for="test6">Yellow</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
             <label for="filled-in-box">Red</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <p class="range-field">
               <input type="range" id="test5" min="0" max="100" />
             </p>
           </div>
         </div>
       </form>
     </div>

   Result :
   Default Form yang di sediakan materialize lebih berkesan casual. Dan ada tambahan input menarik berupa range yang mirip seperti slider. Dan masih ada beberapa input type lain seperti switches yang dapat dilihat pada : http://materializecss.com/forms.html
   
   
   

   
   Masih banyak lagi atribut lain yang dimiliki keduanya. Dari sana kita bisa melihat perbedaan design yang diusung oleh kedua framework tersebut. Dari segi tampilan, apabila kita membandingkan antara materialize dan bootstrap maka tidak ada yang lebih baik antara satu dengan yang lainnya. Yang perlu dipikirkan adalah website seperti apa yang ingin di bangun. Dari situlah baru kita dapat menentukan framework apa yang sebaiknya kita gunakan.
   
   Sekian sekilas cerita dari saya. Happy eksploring~ :D