Konversi Angka ke Format Rupiah di JavaScript


Dalam memprogram sebuah aplikasi seringkali ada kebutuhan untuk menampilkan sebuah nilai dengan format yang berbeda dari format aslinya yang tersimpan di database, sebagai contoh adalah menampilkan mata uang dalam bentuk rupiah dari database yang mana data aslinya disimpan dalam bentuk angka.

Jika aplikasinya berbasis web maka pertama mungkin kita dihadapkan pada pilihan: dimana sebaiknya format angka diubah ke format rupiah, apakah di sisi server (PHP/ASP/dsb) atau di sisi client (JavaScript)? Kalau melihat esensi dari penampilan format rupiah yang lebih ke arah aspek tampilan dan penuh dengan pemrosesan teks, tentunya akan lebih baik jika konversi dilakukan di sisi client, dengan skenario ini maka server hanya perlu berhubungan dengan angka, lumayan untuk mengurangi resources karena proses tambahan ini cukup dihandle di sisi client oleh browser.

Kemudian masuk ke bagaimana caranya mengubah angka ke rupiah pada JavaScript? memang tidak ada fungsi built-in yang bisa melakukan hal tersebut secara langsung, namun algoritma konversinya sederhana saja yakni:

1. Setiap 3 angka dari belakang ditambahkan “.”
2. Tambahkan “Rp.” di depan dan pada beberapa keadaan bisa juga tambahkan “,00” di belakang

Algoritma di atas agar lebih mudah diimplementasikan kita pecah-pecah ke tahapan yang lebih detail lagi:

  1. Karena sepertinya rupiah tidak memiliki nilai desimal, angka pertama-tama diubah ke bentuk integer
    var angkaInt = parseInt(angka, 10);
  2. Karena akan melakukan pemrosesan teks, maka terlebih dulu angka perlu diubah ke string
    var angkaStr = angkaInt.toString();
  3. Agar lebih mudah menghitung dari belakang, nilai string perlu dibalik, ini bisa dilakukan dengan mengubah jadi  array dan memanfaatkan fungsi reverse() array kemudian diubah lagi jadi string
    var angkaStrRev = angkaStr.split('').reverse().join('');
  4. Lakukan loop dengan tiap 3 karakter (modulo 3) kita tambahkan titik, kecuali jika karakter terakhir (karena akan berada di depan karakter pertama jika dibalik)
    var angkaStrRevTitik = '';
    for(var i = 0; i < angkaStrRev.length; i++){
        angkaStrRevTitik += angkaStrRev[i];
        if((i+1) % 3 === 0 && i !== (angkaStrRev.length-1)){
            angkaStrRevTitik += '.';
        }
    }
  5. Setelah beres kita balikkan lagi stringnya (mirip tahap 3)
    var angkaRp = angkaStrRevTitik.split('').reverse().join('');
  6. Tambahkan “Rp.” di depan, dan jika berkenan tambah “,00” di belakang
    var rp = 'Rp. ' + angkaRp + ',00';

Agar bisa digunakan ulang, kita dapat menyatukan statement-statement di atas ke dalam bentuk sebuah fungsi:

function toRp(angka){
    var rev     = parseInt(angka, 10).toString().split('').reverse().join('');
    var rev2    = '';
    for(var i = 0; i < rev.length; i++){
        rev2  += rev[i];
        if((i + 1) % 3 === 0 && i !== (rev.length - 1)){
            rev2 += '.';
        }
    }
    return 'Rp. ' + rev2.split('').reverse().join('') + ',00';
}

Atau, dengan tidak mengubah algoritma, variabel2 dan sintaksnya dapat saja kita persingkat menjadi:

function toRp(a,b,c,d,e){e=function(f){return f.split('').reverse().join('')};b=e(parseInt(a,10).toString());for(c=0,d='';c<b.length;c++){d+=b[c];if((c+1)%3===0&&c!==(b.length-1)){d+='.';}}return'Rp.\t'+e(d)+',00'}

Dengan ini maka untuk mengubah angka ke format rupiah kita tinggal memanggil fungsi toRp() 😉

var angka = 12345678;
var rp = toRp(angka);

console.log("angka: " + angka); // "angka: 12345678"
console.log("rupiah: " + rp); // "rupiah: Rp. 12.345.678,00"

Setelah hal di atas terselesaikan, maka masalah yang mungkin akan muncul selanjutnya adalah ketika mengirimkan kembali nilai ke server tentu kita harus mengirimnya dalam bentuk angka kembali, untuk itu tentu perlu ada fungsi untuk membalik format rupiah ke dalam angka, yang  dalam logika sederhananya antara lain:

1. Hilangkan karakter selain angka
2. Pada beberapa keadaan karakter angka di belakang koma juga perlu dihilangkan

Algoritma pembalik ini lebih mudah diimplementasikan, karena tidak perlu membalik dan menghitung karakter, cukup menggunakan fungsi replace() dengan parameter berupa regular expression untuk menghapus karakter yang tidak diinginkan

function toAngka(rp){return parseInt(rp.replace(/,.*|\D/g,''),10)}

Sehingga dengan ini kita dapat menggunakan toAngka() untuk membalik formatnya 😉

var rp = "Rp. 12.345.678,00";
var angka = toAngka(rp);

console.log("rupiah: " + rp); // "rupiah: Rp. 12.345.678,00"
console.log("angka: " + angka); // "angka: 12345678"

Demikian.

Segitu dulu untuk hari ini, kalau ada yang salah atau ada yang kurang-kurang silakan dikoreksi 😉 wassalamualaikum.

==

Referensi fungsi2 JavaScript yang digunakan: parseIntsplitreversejoin, replace, Regular Expressions

CSS3 Accordion Tanpa JavaScript


Masih terkait dengan postingan CSS1K yang lalu, jika anda melihat demo CSS saya yang berjudul “1024-bytes” efek visualnya memang sangat terpengaruh dari efek accordion.

Biasanya, untuk membuat efek visual seperti accordion ini perlu digunakan JavaScript dikarenakan efek animasi yang tidak dimiliki CSS2.1, namun seiring perkembangannya khususnya dengan hadirnya fitur “transition” di CSS3 maka sebuah komponen accordion dapat dibuat murni menggunakan CSS.

Meski demikian terdapat beberapa keterbatasan daripada pembuatan accordion menggunakan CSS:

Bahwa pada dasarnya CSS tidak memiliki event listener untuk mouse click, namun bukan tidak ada cara sebenarnya, untuk menyiasati event click ini bisa digunakan trik yang memanfaatkan :target selector, hanya saja dengan syarat tiap elemen dari accordion memiliki nilai attribute href yang unik (itulah mengapa pada demo CSS saya accordionnya bereaksi pada event mouse hover saja karena markup HTML-nya sudah ditentukan dari sananya, tidak bisa diubah).

Kemudian pula, accordion yang dibuat menggunakan murni CSS ini adalah bersifat fixed (tidak fluid/responsive) dikarenakan nilai ukuran tidak dapat berdasar proporsi/perbandingan ukuran dengan elemen parentnya (yang kalau menggunakan JavaScript ini mudah saja dihitung) namun ditentukan besarnya secara fix.

Terakhir, tentu saja tidak semua browser mendukung fitur-fitur CSS terbaru ini, karena browser-browser lama belum memiliki implementasi CSS3. Berdasarkan data dari Mozilla (https://developer.mozilla.org/en/CSS), berikut daftar fitur yang didukung dan versi browsernya:

“transition / -webkit-transition / -moz-transition” property:
Chrome 1.0+, Safari 3.0+, Firefox 4.0+, Opera 10.5+, IE?

“:target” selector:
Chrome 1.0+, Safari 1.3+, Firefox 1.3+, Opera 9.5+, IE 9+

Buat Aplikasi MP3 Player Sederhana dengan Flash+AS2


Memanfaatkan kemampuan Flash yang dapat memainkan file MP3 dengan cara membuat Sound object (di AS2, favoritku ;p), saya pernah iseng2 membuat versi cupu dari aplikasi MP3 player.. BTW, tau Winamp kan? nah aplikasi semacam ini yang saya istilahkan sebagai MP3 player (versi kerennya sih 😀 ), yah.. meskipun yang pernah saya buat tersebut hasilnya masih berupa fitur-fitur dasar sederhana: load file-file MP3, next track, previous track, tampilan informasi MP3nya, dan tampilan playlist (supaya user bisa memilih file MP3 yang ingin dimainkan dengan mengkliknya di playlist).

Cara buatnya, Flash dibuat memanjang ke bawah (biar rada mirip Winamp), simpan 3 buah movieclip yang sama (dimana di dalamnya terdapat sebuah dynamic text dengan instance name “teks“) namun diberikan instance name berbeda yaitu “browse_btn“, “kanan_btn“, dan “kiri_btn” (ketiganya akan berperan sebagai tombol untuk load files, play next track, dan play previous track). Sebuah dynamic text dengan instance name “tulisan_txt” (yang akan menampilkan nama artist, judul, dan ukuran waktu MP3 berjalan dimana informasi ini diambil dari ID3 tags MP3nya). Di bawahnya lagi sebagai tampilan playlist digunakan sebuah List Component dengan instance name “cmp_playlist“. Menyusul kemudian, baris ActionScriptnya disimpan di frame:

import flash.net.FileReferenceList;

var playlist:Array = new Array(0);
var musik:Sound = new Sound();
var angka:Number = new Number(0);
var fileRefList:FileReferenceList = new FileReferenceList();
var listenerFileRefList:Object = new Object();
var listHandler:Object = new Object();

fscommand("showmenu", false);
kanan_btn.onPress = kanan;
kiri_btn.onPress = kiri;
browse_btn.onPress = browseFile;
browse_btn.teks.text = "load";
kiri_btn.teks.text = "prev";
kanan_btn.teks.text = "next";
fileRefList.addListener(listenerFileRefList);
cmp_playlist.addEventListener("change", listHandler);
cmp_playlist.setStyle("fontFamily", "corbel");
cmp_playlist.setStyle("fontSize", "12");
tulisan_txt.text = "load file MP3 terlebih dulu..\n (maaf, di versi cupu ini, file MP3nya mesti sefolder sama aplikasinya)";

listHandler.change = function(evt:Object){
    if(angka != evt.target.selectedItem.data){
		angka = evt.target.selectedItem.data;
		loadMusik();
	}
}

musik.onSoundComplete = function(){
	kanan();
}

musik.onLoad = function(success:Boolean){
	if (success){
		musik.start();
	}
	else{
		tulisan_txt = "salah load file";
	}
}

listenerFileRefList.onSelect = function(file:FileReferenceList){
	for(var i = 0; i < file.fileList.length; i++){
		var filePilihan = file.fileList[i].name;
		if(filePilihan.substr(-3, 3) == "mp3"){
			cmp_playlist.addItem({label:filePilihan, data:playlist.length});
			playlist.push(filePilihan);
		}
	}
	loadMusik();
}

function browseFile(){
	fileRefList.browse([{description:"Ingat: file MP3 sefolder saja! (maklum versi cupu)", extension:"*.mp3"}]);
}

function loadMusik(){
	musik.loadSound(playlist[angka], true);
}

function kanan(){
	if(playlist.length < 1){
		tulisan_txt.text = "load filenya dulu woi..\n(tombolnya di bawah playlist)";
	}
	else{
		angka += 1;
		if(angka >= playlist.length){
			angka = 0;
		}
		loadMusik();
	}
}

function kiri(){
	if(playlist.length < 1){
		tulisan_txt.text = "load filenya dulu woi..\n(tombolnya di bawah playlist)";
	}
	else{
		angka -= 1;
		if(angka <= 0)	{
			angka = playlist.length - 1;
		}
		loadMusik();
	}
}

this.onEnterFrame=function(){
	var posisi:String = musik.position.toString();
	var durasi:String = musik.duration.toString();
	var artist:String = musik.id3.artist.toString();
	var judul:String = musik.id3.songname.toString();
	var menitPlaying:String = Math.floor(posisi/60000) + ":" + Math.round((posisi/1000)%60);
	var menitTotal:String = Math.floor(durasi/60000) + ":" + Math.round((durasi/1000)%60);

	if(playlist.length >= 1){
		tulisan_txt.text = artist + " - " + judul + "\n" + menitPlaying + " / " + menitTotal;
	}
}

Preview

Mohon maaf kalau kodenya terlihat tidak efisien, nampak buggy, dan sulit dibaca algoritmanya acak-acakan 😀 yang penting fungsional dulu lah ya.. 8) Tekan Ctrl+Enter untuk melihat preview movie.

Namun ada keterbatasan yang cukup mengganggu dari aplikasi yang saya buat ini, yaitu:

Cuman bisa menjalankan file MP3 yang sefolder dengan SWF-nya, klo gak: undefined -__-‘

Zzzzz.. Mungkin saya salah cara ngakses file dari objek FileReferenceList? atau sistem sandbox objek Sound yang tidak memperbolehkan loadSound diluar direktori?.. Anybody knows how can I play MP3 files that’s stored anywhere, so it could be like a real MP3 player? please share… Any improvement welcome..

Bagi yang berminat untuk melihat contoh aplikasinya (.exe) sila unduh di http://www.box.net/shared/30010rjlmf

***

Referensi terkait:

  • http://flash-reference.icod.de/flash/net/FileReferenceList.html
  • http://flash-reference.icod.de/Sound.html
  • Tips Trik Flash, Tabloid PC-Mild Edisi 6/2010
  • Beberapa Masalah Install di Fedora dan Solusinya


    Beberapa hari yang lalu saya coba menginstall Fedora (distro linux yang merupakan kelanjutan Redhat versi komunitas dan termasuk salah satu distro yang populer)  lewat flashdisk dengan cara membuat Live USBnya dari file ISO pake UNetbootin[1] (ISO imagenya bisa didapat di http://fedoraproject.org/en/get-fedora-all). ISO yang saya gunakan Fedora-12-x86_64-Live-KDE.iso, kenapa Fedora 12? karena itu versi stable release yang terbaru saat ini (Maret 2010) dengan Fedora 13 yang masih versi beta, x86_64 karena laptop saya yang prosesornya Core2Duo sudah mendukung 64-bit, K desktop environment karena saya suka tampilannya KDE 😀 ..

    Lewat installer dengan GUI yang intuitif akhirnya ia berhasil saya install ke laptop dengan cepat dan menyenangkan. Namun.. jreng3x.. setelah selesai menginstall Fedora di laptop, saya menemui beberapa problem.. wah kumaha yeuh? but it’s ok, tinggal lihat panduan dokumentasinya[2] saja kan? atau kalaupun tidak berhasil biasanya solusinya bertebaran di banyak situs[3] dan forum[4], tinggal googling sajah[5]. Kecuali beberapa masalah yang spesifik distro, biasanya untuk distro linux apapun solusi masalahnya hampir sama. Hanya saja, untuk tipe komputer berbeda ada kemungkinan masalah yang timbul berbeda pula karena perbedaan konfigurasi hardware, jadi kadang perlu tau juga hardware yang bermasalah tipenya apa, biar gampang googlingnya.

    Berikut list problem setelah saya nginstall Fedora di laptop Axioo saya:

    1. Resolusi Layar
    Setelah diinstall, resolusi layar di laptop tidak secara otomatis diset ke mode WXGA (1280×800), di System Settings > Display hanya ada 2 pilihan resolusi yaitu 640×480 dan 800×600.. wadduh.
    Saya bingung dan cari-cari di google ternyata solusinya mudah, Lanjutkan membaca “Beberapa Masalah Install di Fedora dan Solusinya”

    12-Pas-12-Pas-an


    Ngomong-ngomong soal game, kita yang kebanyakan berperan sebagai konsumen ini sekali-sekali mungkin perlu berpikir untuk menjadi produsen. Melihat game saat ini sudah menjadi industri yang cukup menjanjikan dengan potensi milyaran dolar [1]. Tertarik membuat game sendiri? mulai dari yang sederhana dulu, yuk mari.. 8)

    Pada kesempatan ini game yang akan dibuat adalah latihan eksekusi penalti dari titik putih atau terkadang diistilahkan tendangan “12 pas” yang juga menjadi judul dari game ini. Sebelumnya unduh terlebih dulu gamenya di http://www.box.net/shared/qqdiij7gn1 untuk mencicipi (cukup 1.4 MB saja). Gamenya cupu abizz memang  dibandingkan buatannya game developer, tapi untuk mencapai langkah ke-1000 selalu diawali dengan langkah pertama, kan? 😉

    Sekarang masuk ke pertanyaan, bagaimana cara membuat permainannya? Lanjutkan membaca “12-Pas-12-Pas-an”

    Load External JPGs dengan Method loadMovie()


    Menampilkan file gambar di Flash dapat dilakukan dengan beberapa cara, salah satu diantaranya dengan me-load file-file berupa JPG dari luar SWF menggunakan method loadMovie(a,b) [dengan: a = URL source, b = destination Movieclip]. Cara ini memiliki kelebihan manakala file gambar banyak dan ukuran filenya besar, karena file gambar akan diload sesuai jumlah permintaan sehingga tidak terlalu membebani resources komputer dibandingkan dengan mengimport semua file gambar dalam satu file flash.

    Format file gambar yang dapat diload secara dinamis pada flash diantaranya JPG, PNG, dan GIF.  Ketiga format tersebut memiliki kelebihannya masing-masing, mana yang akan kita gunakan disesuaikan dengan kebutuhan.

    Sebagai contoh disini saya membuatkan tutorial untuk membuat sebuah galeri sederhana dengan langkah-langkah pembuatannya sebagai berikut:

    – Siapkan 4 buah file gambar dengan ukuran 400×250 pixel. Karena pada contoh ini yang digunakan adalah gambar daun dengan format file JPG, maka kita berikan nama “daun1.jpg”, “daun2.jpg”, “daun3.jpg”, “daun4.jpg”.

    4 File JPG yg akan diload

    – Buat sebuah file Flash baru dengan Lanjutkan membaca “Load External JPGs dengan Method loadMovie()”

    Typewriter Effect dengan ActionScript 2.0


    Membuat efek animasi teks yang muncul huruf per huruf (seperti sedang ngetik) sampai menjadi sebuah paragraf dapat kita buat dengan menulis beberapa baris ActionScript. Siapkan terlebih dulu sebuah objek dynamic text dengan settingan multiline, font yg khas, dan nama variable ‘tulisan’. Setelah itu tuliskan script ini di frame utama:

    var i:Number = 1;
    var tulisan:String;
    var tulisanFull:String = "Pemilik blog dengan tagline \"ikatlah ilmu dengan memblogkannya\" ini mengucapkan terima kasih atas kunjungan anda hari ini, selamat datang kembali di lain hari, dan jika berkenan silakan tinggalkan jejak pada halaman Buku Tamu. Wassalam.\n\n\n-F4154LMAN-";
    
    this.createEmptyMovieClip("mesinTik", this.getNextHighestDepth());
    
    mesinTik.onEnterFrame = function(){
    	if (i < tulisanFull.length) {
            tulisan = tulisanFull.substring(0, i);
            i++;
    	}
    	else {
            tulisan = tulisanFull;
            delete mesinTik.onEnterFrame;
    	}
    }
    

    ngetik sendiri

    Kuncinya adalah pada fungsi substring() yang dieksekusi secara berulang sehuruf demi sehuruf hingga sebanyak jumlah huruf pada variable ‘tulisanFull’ (yg bertipe String) dengan kecepatan pengulangan sesuai settingan FPS (karena fungsi dijalankan setiap ‘onEnterFrame’) pada Flash movie yg dibuat.

    Contoh hasil export .SWF dan source .FLA-nya bisa diunduh di Lanjutkan membaca “Typewriter Effect dengan ActionScript 2.0”

    Memanfaatkan Fitur Drawing API Pada Flash


    Membuat aplikasi tiruan MS Paint (tau kan? software preinstalled di Windows yg dipake buat menggambar, biasa diakses lewat Start Menu > Program > Accessories > Paint) tapi menggunakan Flash, emang bisa yah? wow, dulu pun saya sempat tidak tahu fitur Flash selain yang biasa digunakan untuk membuat CD interaktif, dan baru terbuka matanya setelah melihat demo game menggambar buatan kang Fathah.. wah ternyata Flash itu asyik ya? 😀

    Kalau kita eksplorasi lagi Flash+tombolF1 (manual helpnya Flash yg cukup lengkap) pada bagian Class MovieClip disana ada penjelasan bahwa Class MovieClip memiliki beberapa fungsi untuk menggambar (diistilahkan dengan Drawing API) seperti: beginFill(), beginGradientFill(), clear(), curveTo(), endFill(), lineTo(), lineStyle(), moveTo(), yang memungkinkan untuk menghasilkan perpaduan kurva, garis, dan warna pada stage hanya dengan menuliskan beberapa baris script.

    Sebagai latihan ngoprek, kali ini kita akan coba buat aplikasi corat-coret Lanjutkan membaca “Memanfaatkan Fitur Drawing API Pada Flash”

    Menyisipkan Video Eksternal Pada Flash Menggunakan Component FLVPlayback


    Untuk menjalankan file video dari dalam sebuah Flash movie kita dapat memanfaatkan component (sebuah predefined movieclip package) yang bernama FLVPlayback. Diantara kelebihan menjalankan video menggunakan objek dari component FLVPlayback ini antara lain sudah tersedianya fitur-fitur dasar yang umum ada pada video player (seperti tombol play/pause, tombol stop, tombol mute, volume bar, seek bar), memiliki koleksi tampilan skin yang dapat diubah sesuai keinginan, objek video dapat digeser dengan mudah pada stage saat authoring mode, dan dengan menggunakan component ini kita menjaga file SWF tetap berukuran kecil karena video dijalankan secara dinamis dari file eksternal yang bertipe FLV. Jika format file video yang kita miliki berbeda, kita dapat mengconvertnya menjadi FLV dengan software Flash Video Encoder yang biasanya sudah terinstall bersama dengan Flash.

    Langkah-langkah selanjutnya:

    Lanjutkan membaca “Menyisipkan Video Eksternal Pada Flash Menggunakan Component FLVPlayback”

    Trik Download Halaman dari Google Books


    Koleksi buku online yang ada di http://books.google.com mungkin terbilang lengkap, banyak buku-buku textbook tidak hanya tersedia deskripsinya saja tapi juga bisa dibaca gratis lewat situs ini (meski tidak semua halaman bisa dilihat, karena kebanyakan preview halamannya terbatas). Namun sayang konten bukunya tadi tidak akan ikut ke-save jika halaman webnya disave. Terus gimana cara ngesave/ngunduh isinya?

    Sederhana saja ternyata caranya..

    Requirement yang perlu diinstall:
    Mozilla Firefox, sebagai browser yang digunakan untuk membuka halaman
    – addon Firefox: Greasemonkey, untuk menjalankan script downloadernya
    Google Book Downloader, script untuk download buku yang berjalan dengan greasemonkey
    – addon Firefox: FlashGot, memudahkan multiple selection untuk download
    FlashGet (optional), sebagai download manager
    – Renamer (atau yang semacamnya), untuk mengubah nama2 file dan ekstensinya sekaligus dalam jumlah banyak (sesuai jumlah halaman yang didownload)

    Langkah-langkahnya:
    – Pastikan semua persyaratan di atas sudah terinstall
    – Buka sebuah halaman googlebook, scroll ke bawah sampai beberapa halaman
    – Klik tombol bertuliskan “download now” yang ada di samping, script akan men-generate halaman
    – Setelah script selesai, seleksi semua halaman yang muncul kemudian klik kanan > ‘FlashGet’ atau Browser built-in (kalau gak nginstall flashget)
    – Setelah proses download selesai, ubah ekstensi semua file menjadi .PNG dengan Renamer

    Trik ini saya dapatkan dari http://book.huhiho.com/, setelah melakukan googling sebentar lewat http://www.google.com 😀

    Tidak semua buku bisa didownload secara full (dapet semua halamannya) ini hanya bisa didapatkan jika buku-buku tersebut status tampilannya utuh, sedangkan untuk buku2 yang pratinjaunya terbatas hanya halaman-halaman tertentu yang bisa dilihat previewnya saja yang bisa didownload.. hmm sayang sekali 😦 mungkin ada yang sudah menemukan trik download full untuk buku2 yang berstatus pratinjau terbatas? silakan share disini..