Sunday, December 18, 2016

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 

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. :)