Belajar ES6 – Perubahan Object Literal

Salah satu fitur lagi pada ES6 yang banyak digunakan oleh beberapa framework seperti ReactJS, Angular dan VueJS adalah perubahan pada Object Literal. Pertama kali saya ketika melihat tutorial dari VueJS ataupun ReactJS agak bingung. Kok itu membuat fungsi di objectnya lain yaa…kok itu passing variable ke object beda ya..garuk2 gak ngerti..Ternyata itu fitur dari ES6 yaitu Object Literal.

Continue reading Belajar ES6 – Perubahan Object Literal

Belajar ES6 – Template String dan New Method String

Saya coba lanjut Belajar ES6 dengan fitur Template String dan New Method String yang mungkin nanti akan bermanfaat ketika memulai di salah satu framework Javascript seperti ReactJS, VueJS ataupun AngularJS.

Continue reading Belajar ES6 – Template String dan New Method String

Belajar ES6 – Default Parameter dan Rest Parameter

Kembali belajar ES6, saya coba menuliskan artikel agar tidak lupa dan biasanya dengan menuliskan apa yang kita pelajari akan lebih lama diingat dibanding dengan hanya menonton dan membaca saja. Jika pada artikel sebelumnya saya menulis Spread Operator pada ES6, sekarang kita coba kebalikan dari Spread Operator yaitu Rest Parameter dan ada baiknya kita bahas juga apa itu Default Parameter pada ES6. Continue reading Belajar ES6 – Default Parameter dan Rest Parameter

Belajar ES6 – Spread Operator

Salah satu feature dari EcmaScript 6 yang sering digunakan adalah Spread Operator. Dengan spread operator ini kode kita menjadi lebih pendek dan mudah untuk dibaca. Beberapa tutorial React dan beberapa framework Javascript mulai banyak menggunakannya. Jadi mari kita pelajari apa itu Spread Operator pada ES6. Continue reading Belajar ES6 – Spread Operator

Belajar ES6 – Arrow Function

Salah satu fitur yang banyak digunakan dari ES6 adalah arrow function. Dari namanya kita sudah bisa mengira, ini adalah fitur pada function. Salah satu kegunaan dari fitur ini adalah syntax javascript kita menjadi lebih ringkes.

Continue reading Belajar ES6 – Arrow Function

Belajar ES6 – Destructuring Assignment

Destructuring Assignment adalah sintax dari Javascript untuk mengeluarkan suatu data dari array atau property dari satu object menjadi satu variable yang dapat kita manfaatkan untuk keperluan tertentu.

Proses ini akan banyak kita gunakan untuk mendapatkan satu variable yang ada pada array atau object javascript tertentu. Salah satu contoh yang sederhana seperti kode dibawah ini. Continue reading Belajar ES6 – Destructuring Assignment

Tutorial Cara Preview Gambar Sebelum Diupload

Kadang ada user yang ingin mengupload gambar namun sebelum diproses atau disimpan pada database atau storage server ingin di preview terlebih dahulu. Hal ini mungkin akan sangat bermanfaat jika gambar yang diupload banyak sehingga perlu preview terlebih dahulu.

Di jQuery ada cara yang sangat mudah. Berikut adalah cara melakukannya.

Pertama siapkan file HTML lalu buat seperti ini.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="file" multiple id="uploadImage">
<div class="div_image"></div>
</body>
</html>

Lalu kita tambahkan javascript seperti kode berikut.

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src',event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('input#uploadImage').on('change', function() {
        imagesPreview(this, '.div_image');
    });
});

Dan hasilnya bisa temen-temen coba di sini: https://jsfiddle.net/adiputra/4nmLqfxk/2/

Pilih beberapa gambar lalu temen-temen akan melihat gambar langsung di preview.

Menarik ya.

Selamat mencoba Tutorial Cara Preview Gambar Sebelum Diupload 🙂

Handlebars dengan IF statement kondisi

Kadang template handlebars perlu untuk dikasih kondisi untuk mengikuti aturan tertentu. Untuk membuatnya, Handlebars sebenarnya sudah mengatasi nya dengan builtin helpers di link ini http://handlebarsjs.com/builtin_helpers.html. Namun kondisi tertentu kita mesti membuat IF kondisi tertentu selain default pada link tersebut.
Continue reading Handlebars dengan IF statement kondisi

Pengalaman membuat grafik dengan FusionCharts

Belum lama sempet bantu-bantu ngerjain project membuat dashboard dengan grafik yang lumayan ribet. Biasa buat grafik cuma ngambil dari 1 dan 2 resource/data di database, sekarang lebih dari 5 data dalam satu grafik. Dan data yang diambil pun tidak ratusan row, tapi ribuan bahkan puluhan ribu row. Hemm…

Project tersebut menggunakan FusionCharts. Sebenernya project ini tidak dibuat dari awal. Project diambil dari salah satu demo dari fusioncharts itu sendiri. Bisa lihat di halaman ini.

Walaupun ngambil dari salah satu demo, saya dan teman saya custom kembali kodingan tersebut sesuai dengan permintaan. Rada-rada kriting kode javascriptnya, tapi ya dicoba dulu saja. Backend ngikutin teman yang buat lebih dulu dengan Codeigniter 3. Jadi ada proses import data dulu sebelum ditampilkan di halaman dashboard informasi grafik. Sederhana tapi tetep dapet pengalaman tech terbaru. FusionCharts. Mirip-mirip kaya Highchart lah, base on json 🙂

Default Filter dengan Kendo Grid

Kasus yang sering diminta adalah munculkan data per waktu ini saja dulu, nanti user bisa lakukan filter berdasarkan waktu yang kita sediain. Di Kendo Grid, kita bisa setting default filter ketika load pertama kali. Caranya mudah kita tinggal menyisipkan filter ketika kendo grid ini load.

Kondisi nya seperti, saya ingin menampilkan data untuk transaksi hari ini saja dari 2 tanggal yang bisa diubah-ubah oleh user.
Continue reading Default Filter dengan Kendo Grid

Kendo Grid Export Excel dengan PHPExcel di Codeigniter

Trik cara export excel dari kendo grid dengan PHPExcel di Codeigniter ini sebenernya dibuat karena ketidakefesienan melihat kode yang dibuat teman saya. Dia melakukan query ulang untuk mendapatkan data, lalu export. Saya berpikir, kenapa harus query ulang? bukannya dari grid kendo ini kita bisa dapatkan datanya lalu kita lempar saja ke PHPExcel ya?

Penasaran, saya coba ikutin sedikit kodingan teman saya ini. Tapi data tidak saya query ulang tapi mengambil dari grid milik kendo yang sudah kita query sebelumnya. Continue reading Kendo Grid Export Excel dengan PHPExcel di Codeigniter

Handle Input Barcode Diakhiri Enter

Ketika bermain dengan barcode scanner, beberapa barcode scanner ketika selesai berhasil baca barcode langsung diakhiri dengan enter. Ini bermasalah ketika kita menyisipkan form hasil baca barcode ke input, sehingga otomatis form akan tersubmit. Pada kondisi ini, mungkin beberapa proses tidak menginginkan “enter” tersebut karena ingin melakukan beberapa proses seperti ajax ke server sebelum form disubmit. Continue reading Handle Input Barcode Diakhiri Enter