Edit dan delete kolom pada tabel sesuai index

Dari judul di atas kita sudah tahu apa yang akan di bahas. Yup, kita akan membahas tentang index pada tabel. Ketika kita membuat sebuah tabel dan di salah satu data akan kita ubah atau hapus, apa yang harus kita lakukan? Sedangkan data tersebut tidak masuk dalam database, yang terjadi adalah satu data di ubah semua ikut berubah atau satu data di hapus semua ikut terhapus. Lalu bagaimana?

Index. Mengapa index? karena index adalah urutan dari awal data di buat sampai yang terakhir. Kemudian bagaimana kita mengubah data atau menghapus data menggunakan index?
Let's try it !!

Pada button edit kita memanggil fungsi edit dan menyertakan index dari tabel tersebut, begitu pula pada button delete. 

Fungsi edit di panggil di dalam controller, kemudian karena contoh yang ada menggunakan modal atau pop up list view dari angularjs, maka  index yang terpilih akan di kirim pula ke controller modal dengan nama variable arraylist. Untuk mengetahui cara memakai modal atau pop up list view pada angular dapat melihat blog sebelumnya 

http://blog.nostratech.com/2016/09/popup-list-of-view-in-angularjs.html

Maka akan tampil di modal data yang ingin kita ubah, setelah melakukan perubahan data di kirim kembali ke fungsi edit. Hasil perubahan tersebut di tampung oleh variable request, kemudian list data pada tabel di panggil kembali dengan menyertakan variable request yang berisi perubahan pada index tertentu.

Sedikit berbeda dengan delete, 

Ada yang berbeda di sana, yaitu hasil pengembalian dari modal. Jika sebelum nya pada edit list data tabel di panggil kembali dan menyertakan variabel penampung perubahan, maka di delete perlu ada tambahan fungsi yaitu splice, di mana fungsi dari splice tersebut menghapus index dari yang kita pilih dan mengurutkan kembali urutannya dan kemudian memanggil kembali list data tabel yang sudah di hapus dan di urutkan kembali.

Terlihat mudah bukan?? Nah, selamat mencoba..

keep trying and dont give up :D

Handling character input type number

Tips dan trik kali ini akan membahas tentang bagaimana membatasi jenis karakter yang dapat di input pada kolom input. Seperti yang kita tau bahwa tipe kolom input pada HTML banyak jenis nya tergantung dari yang di butuhkan, contohnya text, number, email, password dan masih banyak lagi.

Biasanya ketika membuat suatu form HTML kita dapat mengatur length atau panjang dari suatu karakter. Password misal nya, length dapat di atur menjadi 6 karakter saja. Tapi bagaimana jika kita membatasi jenis karakter apa saja yang dapat di input?

 Jika kita ingin membuat kolom input untuk nomor telepon, mungkin saja kita dapat menggunakan tipe kolom input number. Tapi perlu di ketahui pula bahwa tipe number bisa memasukkan karakter titik (.) , koma (,) mengingat bahwa tipe ini dapat di pakai untuk decimal, sementara nomor telepon tidak boleh decimal. 

Lalu bagaimana solusi nya?

Kita perlu tahu dulu karakter apa aja yang akan di pakai, dalam hal ini hanya akan memakai angka.
Nah, untuk tipe dari kolom input nya kita akan pakai text saja, kenapa? Pada gambar di atas terlihat di samping kanan ada panah atas bawah yang artinnya angka terakhir dapat di naikkan jumlah nya atau di turunkan, kita tidak memerlukan itu. Maka kita buat pada HTML nya seperti gambar di bawah

Di dalam div ada id = "staticParent" dan di dalam input ada id = "child" , kedua id ini akan memanggil script yang isi nya character yg tidak boleh muncul sesuai kode asci.

Di karena kan script terlalu panjang jadi di bagi 3 gambar, (penempatan gambar ke 2 setelah tanda && pada gambar 1, kemudian di lanjutkan gambar ke 3). Angka2 pada script di atas menunjukkan kode asci dari karakter yang ada pada keyboard, sehingga bila kita mengetikan sesuatu yang angka asci nya ada pada script di atas maka tidak akan muncul pada layar. Dan hasil nya..

Nomor telepon tidak ada lagi panah atas bawah (karena tipe kolom input nya text), tidak bisa input karakter lain selain angka. 

Demikian tips dan trick untuk kali ini, semoga bermanfaat dan selamat mencoba.

JRebel pada IntelliJ IDEA

Secara singkat JRebel itu adalah tools untuk java yang bisa mengurangi redeploy time. JRebel ini bisa auto reload class, xml configuration, dan lainnya. JRebel merupakan salah satu produk yang di buat oleh zeroturnaround.

Sayangnya tools ini bersifat berbayar, dan bila ingin sekedar mencobanya disediakan trial selama 14 hari oleh mereka.

Pada aplikasi java biasanya proses compile dan startup aplikasi memakan waktu yang lumayan. Dengan adanya JRebel ini maka proses compile dan startup menjadi berkurang karena pada dasarnya JRebel akan melakukan auto reload class atau xml configuration yang mengalami perubahan saja. Proses auto reload ini dilakukan saat aplikasi sedang running jadi tidak perlu melakukan stop-start atau restart aplikasi.

Kita bisa pasang JRebel sebagai plugin pada IntelliJ IDEA, detail instalasi dan aktivasi nya bisa dilihat pada dokumentasi dari zeroturnaround ( link ).
Pada kesempatan ini saya akan menggunakan Springboot Getting Started Project ( link ) sebagai sample untuk demo.

Prepare Project

Dalam project gs-rest-service terdapat 3 class java yaitu:

• Application
• Greeting
• GreetingController

JRebel Modul

Jika JRebel berhasil di pasang dan aktivasi pada IntelliJ IDEA, kita bisa mengakses JRebel Panel via menu: View > Tool Windows > JRebel

dan berikut tampilan JRebel Panel nya :

Bisa kita lihat ada 2 checkbox, yang pertama adalah untuk modul running via JRebel, sedangkan yang kedua adalah modul debug mode via JRebel.
Kali ini kita centang/pilih yang pertama saja, yaitu running via JRebel. 

Akan muncul pesan JRebel enabled seperti diatas, dan ada file rebel.xml yang digenerate pada project dalam package resources.

File rebel.xml ini berisi seperti berikut:

Configure Running Application

Karena aplikasi akan dirunning via IntelliJ IDEA maka perlu di configur terlebih dahulu.

• Akses menu Run > Edit Configurations, maka akan muncul window Run/Debug Configuration.
• Tambahkan konfigurasi baru (Add New Configuration), lalu pilih maven. 
• Isi bagian Command Line dengan: spring-boot:run 
• Klik OK

Running via JRebel

Setelah setup dan configurasi beres, saatnya kita running aplikasi via JRebel dengan menggunakan toolbar pada bagian kanan atas IntelliJ IDEA

Akan muncul terminal IntelliJ IDEA dan terlihat proses startup springboot.
Pada class GreetingController berisi code berikut:

Jadi apabila kita akses pada browser dengan url http://localhost:8080/hello akan muncul string Hello...

lalu tanpa kita stop aplikasi, kita rubah code pada GreetingController menjadi seperti berikut:

Jangan lupa untuk melakukan Make Project, bisa di akses via menu: Build > Make Project.

Dan kita akses ulang pada browser dengan url http://localhost:8080/hello yang akan muncul adalah string Hello Nostra Guys...

Jadi dengan menggunakan JRebel ini kita bisa men-skip kegiatan stop-start aplikasi bila terjadi perubahan pada kodingan nya.

Sebuah cara untuk mendeteksi apakah browser support ECMAScript 5

Sebelumnya tim software engineer kami membuat website menggunakan ReactJS dengan ECMAScript 6 (ECMAScript 2015).

Ketika sudah dideploy dan mulai bisa diakses oleh publik, kami menerima banyak komplain karena website tersebut tidak muncul di browser mobile (Android/iOS) padahal versi Android/iOS-nya belum terlalu tua (Lollipop/iOS 9).

WTF! selidik punya selidik ternyata belum banyak browser yang dapat menjalankan ECMAScript 6. Kami mencoba untuk menurunkan versi ECMAScript menjadi ECMAScript 5, jadi kami tetap coding dengan ECMAScript 6 namun saat dideploy akan digunakan ECMAScript 5.

Untuk mencapai hal tersebut, kami menggunakan modul babelify untuk men-transform ECMAScript 6 menjadi ECMAScript 5. Dan akhirnya website kami dapat diakses dengan browser-browser yang kebanyakan dipakai user saat ini.

Namun hal tersebut tidak terjadi pada browser mobile Android dibawah versi 4.0 dan iOS 6. Pada browser tersebut website kami hanya tampil dengan layar putih. Kami memutuskan untuk tidak men-support browser tersebut, dan apabila diakses harus menampilkan informasi bahwa browser tersebut tidak disupport atau browser tersebut harus diupgrade.

Setelah googling sana dan googling sini, ketemu sama yang namanya kangax. Ini keceh banget, website tersebut sangat membantu untuk menemukan formula pengecekan apakah browser tersebut bisa mengakses website kita, atau tidak.

Contohnya; browser safari di iPad Generasi 1 tidak dapat mengakses website kita, Di-test-check menggunakan website kangax, dan kita menemukan bahwa browser safari tidak dapat menjalankan perintah ini.

function () { return typeof Function.prototype.bind == 'function'; }

Ada 1 perintah lagi untuk pengecekan apakah browser tersebut di-support atau tidak, yaitu :

Infinity = false;
var result = typeof Infinity == 'number';
Infinity = 1/0;
return result;

Dengan menggabungkan 2 perintah untuk pengecekan browser, kami menggunakan perintah dibawah ini untuk menentukan apakah browser tersebut di-support atau tidak.

<script type="text/javascript">
function f() {return typeof Function.prototype.bind == 'function';}
function c() {Infinity=false;var result=typeof Infinity=='number';Infinity=1/0;return result;}
if(!c()||!f()){window.location.replace("/browser-not-supported.html");} </script>

Dengan perintah tersebut, sampai saat ini kami belum menemukan kasus baru browser tidak dapat mengakses website kami. Terima kasih banyak kangax. :)

Implementasi layanan DDNS dan software DDClient

Pada kesempatan kali ini saya ingin berbagi tentang  apa itu layanan DDNS, dan bagaimana mengimplementasikan software ddclient pada sistem operasi linux.

OS yang saya gunakan adalah arch linux, namun ddclient juga mendukung OS linux distribusi lain.

Apa itu DDNS dan apa pula itu ddclient?

- DDNS (Dynamic DNS) adalah layanan untuk mengidentifikasi IP Public yang berubah-ubah untuk suatu domain.
- Ddclient adalah software pada sisi client (komputer yang berada pada jaringan IP public domain tersebut) yang akan melakukan update IP Public secara priodik ke layanan DDNS.

Server pada client akan disebut server A.

Pertama-tama kita install dahulu software ddclient pada server A.

$ sudo pacman -S ddclient

Selanjutnya kita tinggalkan dulu server A dan fokus pada layanan DDNS. Pada artikel ini mengunakan layanan DDNS yaitu freedns.afraid.org
Langkah awal pada layanan DDNS login ke situs freedns.afraid.org , lalu pilih menu  subdomain pada navigasi sebelah kiri.

Tambah subdomain dan isi IP public yang ingin di point oleh subdomain. Dibawah ini gambar sebagai contoh.

Penulis membuat subdomain ddclient.ignorelist.com yang akan di point ke IP Public 103.10.66.5
Setelah subdomain dibuat, kita perlu enable  Pada navigasi sebelah kiri, klik Dynamic DNS dan ikuti panduan gambar dibawah ini.

Setelah masuk ke jendela dynamic update interface, enable fungsi ddns pada subdomain.

Subdomain sudah siap untuk digunakan, langkah selanjutnya kita akan mengkonfigurasi pada ddclient server A yang sudah kita install tadi.
Edit file /etc/ddclient/ddclient.conf lalu tambahkan konfigurasi dibawah ini

## free.afraid.org dynamic addresses

use=web

protocol=freedns

login=johnsp1000

password=yourPassword

ddclient01.ignorelist.com

Untuk pengaturan setiap berapa waktu ddclient melakukan update edit isi file konfigurasi /etc/ddclient/ddclient.conf pada line dibawah ini dan ubah angka 300 menjadi berapa detik sesuai kebutuhan.

daemon=300

Save file konfigurasi tersebut. Untuk mengecek apakah konfigurasi telah benar dan proses update IP Public ke domain berjalan dengan baik dapat menggunakan perintah seperti dibawah ini.

$ sudo ddclient -daemon=0 -debug -verbose -noquiet

Demikianlah artikel ini saya buat, semoga bermanfaat dan mudah dipahami oleh pembaca. :)

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

SimpLESS: sebuah LESS Compiler

Pada tutorial kali ini saya akan melanjutkan pembahasan yang sebelumnya tentang LESS.JS.
Pada tutorial sebelumnya kita telah berhasil membuat file navbar atau menu menggunakan Less.JS. Namun skema file dalam mengcompile menggunakan client-side, kita tidak tau bagaimana hasil file yang dicompile dalam format css standar karena file melakukan compile menggunakan AJAX process pada browser. Hal ini membuat sulitnya file less untuk di maintain oleh developer lain jika bekerja didalam sebuah team, oleh karena itu perlunya dilakukan compiling file yang berformat less menjadi file css standar.

Sebenarnya mengcompile file less sangat sederhana, menggunakan terminal atau command prompt pada pc yang sudah di install less hanya dengan menjalankan command seperti dibawah ini:

lessc <resource_less_file.less> <destination_css_file.css>

contoh:

lessc style.less style.css

Namun bagi para pemula yang baru mempelajari pemrograman, penggunaan terminal atau command prompt sangatlah asing. Nah berikut ini adalah cara melakukan compile file less menggunakan tool SimpLESS:

1. Download dan install simpLESS.

SimpLESS dapat didownload pada halaman resmi SimpLESS https://wearekiss.com/simpless.

Halaman download file SimpLESS

setelah didownload, install seperti biasa tinggal melakukan next->next->next->finish :D

2. Buka aplikasi SimpLESS, dapat dilihat seperti berikut tampilan aplikasinya

3. Drag and Drop File LESS yang akan dicompile. Berikut penampakan SimpLESS setelah dilakukan pemilihan file yang ingin di compile. Pada kasus ini saya memilih file style.less yang ingin dicompile

4. Compile file less

Untuk mengcompile file less klik tombol yang dilingkari merah pada gambar diatas.

Dengan menggunakan SimpLESS kita juga bisa membuat file css yang telah diminify, klik pilihan "minify" yang diberi warna merah

Jika sukses maka akan tampil notification seperti berikut

5. Selesai. Kemudian hasilnya akan menjadi file dengan format css standar seperti dibawah ini

Hasil compile menjadi file style.css

Hasil compile setelah dilakukan minify.

Sekian tutorial mengenai cara compile file LESS menggunakan SimpLESS. Happy Styling :D

Object Destructuring Javascript

Sampai jumpa kembali, kali ini saya akan membahas Object destructuring di javascript. Yah, Dengan mengetahui ini akan membantu kamu melakukan coding menjadi lebih simple, clean, pretty dan readable hehehe. Menurut saya bagian paling sulit dalam javascript adalah membuat kodingmu mudah di baca orang karena javascript sangat flexible dalam penulisan variabel, function dan loose data type.

Langsung saja kita mulai:

Misal kita mempunyai object yang memiliki lebih dari 10 atribut seperti ini:

var state = {
     name:"Andy wiranta wijaya",
     address:"Jl. xxx", 
     phoneNumber:"+627272727227",
     sex:"pria",
     ....

Nah, saya hanya butuh  2 atribut name dan address yang akan saya tampung di suatu variabel.

//Cara konvensional 
var name = state.name;
var address = state.address;
//Object destructuring
const { name, address } = state;

Simple, clean,  pretty dan readable. Coba kalian bayangkan jika kalian passing lebih dari 10 atribut. Contoh ke dua:

var state = {
 name : "budi",
 address:"Jl kebon timur no 7-8",
 sex : "pria",
 hobby:"main bola"
}
printMyNameAndAddress(state)
function printMyNameAndAddress({name, address}){
 console.log(`my name is ${name} and address ${address}`);
}

Hasilnya:

Mari kita implementasikan di react component, sebelum (destructuring):

render() {
  return (
    <ProductPrice
      hidePriceFulfillmentDisplay=
       {this.props.hidePriceFulfillmentDisplay}
      primaryOffer={this.props.primaryOffer}
      productType={this.props.productType}
      productPageUrl={this.props.productPageUrl}
      inventory={this.props.inventory}
      submapType={this.props.submapType}
      ppu={this.props.ppu}
      isLoggedIn={this.props.isLoggedIn}
      gridView={this.props.isGridView}
    />
  );
}

Bisa dilihat sendiri banyak penggunaan this.props :o, mari kita perbaikin dengan seperti ini:

render() {
  const {
    hidePriceFulfillmentDisplay,
    primaryOffer,
    productType,
    productPageUrl,
    inventory,
    submapType,
    ppu,
    isLoggedIn,
    gridView
  } = this.props;
return (
    <ProductPrice
      hidePriceFulfillmentDisplay={hidePriceFulfillmentDisplay}
      primaryOffer={primaryOffer}
      productType={productType}
      productPageUrl={productPageUrl}
      inventory={inventory}
      submapType={submapType}
      ppu={ppu}
      isLoggedIn={isLoggedIn}
      gridView={isGridView}
    />
  );
}

Kesimpulan:

Remember, beautiful code does a lot without saying much.

Sumber:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
Inspirasi quote:
https://medium.com/walmartlabs/make-your-react-components-pretty-a1ae4ec0f56e#.qlgf8l272

Airbnb Superset - data exploration

Pada kali ini saya akan menulis tentang airbnb superset.  Superset berfungsi menampilkan data dalam bentuk graphic (visual). Salah satu pertimbangan saya menggunakan superset adalah open source dan memiliki fitur - fitur sebagai berikut:

• Security seperti user management, view menu dan lain - lain
• Bisa multiple database 
  
• SQL Lab 
  
• Slice data
  
• Dashboard 
  

Berikut sedikit demo:

How to install:

Superset menggunakan python 2.7 dan 3.4

#install os dependecies
sudo apt-get install build-essential libssl-dev libffi-dev python-dev python-pip libsasl2-dev libldap2-dev

# Install superset
pip install superset

# Create an admin user
fabmanager create-admin --app superset

# Initialize the database
superset db upgrade

# Load some data to play with
superset load_examples

# Create default roles and permissions
superset init

# Start the web server on port 8088
superset runserver -p 8088

# To start a development web server, use the -d switch
# superset runserver -d

Untuk mengubah configuration database, buka file:
<YOUR_DIR>/python3.4/site-packages/superset/config.py
Kita ubah configuration database:

SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(DATA_DIR, 'superset.db')
# SQLALCHEMY_DATABASE_URI = 'mysql://myapp@localhost/myapp'

Sekian blog dari saya semoga bermanfaat, silahkan berkunjung ke github superset :)

Membuat Generic Slider dengan ReactJS

Seperti dalam tulisan saya sebelumnya, banyak keuntungan membuat komponen generik. Kali ini saya akan mencoba membuat image slider seperti airbnb.

Komponen slider yang harus ada:

• List/map

Komponen Card

Komponen Slider

Catatan penting

• Untuk safari, slider nya tidak begitu mulus, harus ada tambahan di css nya 

.card-slider .cs-parent-wrapper {
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch !important;
}
.card-slider .cs-parent-wrapper::-webkit-scrollbar {
  -webkit-appearance: none !important;
  display: none !important;
}

.card-slider .cs-wrapper::-webkit-scrollbar {
  -webkit-appearance: none !important;
  display: none !important;
}

Test

1. Clone from here 
2. npm install
3. npm start

Result

Membuat Generic DropDown dengan ReactJS

Salah satu kelebihan reactjs, adalah bisa membuat komponen sekecil mungkin, dan komponen-komponen ini bisa di re-use atau digunakan kembali.

Selain bisa di re-use, memecah komponen menjadi bagian-bagian kecil juga memudahkan untuk maintenance.

Ketika terjadi error, cukup membenahi di komponen tersebut. Dalam membuat komponen generik, sebaiknya meminimalisir operasi-operasi kalkulasi yang spesifik, karena generik jadi harus bisa dipakai dengan masukan yang umum.

Salah satu komponen penting dalam form selain input text dan text area adalah dropdown. Dengan reactjs, memungkinkan untuk membuat komponen dropdown yang generik.

Komponen dropdown yang harus ada:

1. select 
2. options
3. List/map
4. Default value
5. Selected value
6. onChange event

Komponen Option

Ide nya adalah, komponen option ini hanya menerima masukan dan menampilkan value dan label.

Komponen Select

Test

1. Clone from here
2. npm install
3. npm start

Result

Jika memilih drop down yang kedua, maka nilai yang dipilih akan ditampilkan di bawahnya.

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