Custom Function Tambahan Plugin atau Lain-lain pada Javascript yang Sering Digunakan

Hai ketemu lagi dengan saya dan pada kali ini saya akan membuat postingan yang ringan-ringan saja yaitu tentang custom function di javascript yang sering saya gunakan. Jadi sebenarnya saya membuat postingan ini juga untuk saya karena saya suka malas kalo harus berkali-kali membuat function setiap saya membuat project, jadi kalo ada postingan ini saya tidak perlu membuatnya lagi karena cukup copas aja hehe… karena saya berprinsip “ngapain juga repot-repot nulis koding 100% orang tinggal copas juga lebih cepet buang-buang waktu aja harus nulis-nulis terus..” gitu jadinya ini adalah custom function yang berfungsi sebagai master bisa dimasukkan di custom.js. Copas itu boleh saja asalkan paham apa yang dicopas ya bukan asal copas aja. Maka dari itu sobat juga bisa BOOKMARK postingan ini jadi siapa tau kapan-kapan sobat membutuhkannya tinggal cari di bookmark browser.

Karena ini ada di javascript tentu bisa digunakan di bahasa pemrograman apapun dan framework apapun ya selama itu pemrograman web yang menggunakan javascript. Jadi ini biasa saya gunakan di PHP Native, Laravel, Code Igniter, Java Spring/Spring boot, dll dan saya gunakan full copas tanpa edit-edit lagi.

Pertama saya ingin bilang bahwa cari ini bukan cara convert/fungsi satu-satunya ya gan karena bisa juga dengan cara yang lain yang lebih singkat tapi saya lebih suka cara ini karena lebih mudah dimengerti. Oke langsung saja saya berikan function satu per satu dan karena banyak sekali jadi saya bagi menjadi beberapa kategori.

Custom Function DATETIME pada Javascript yang Sering Digunakan

Custom Function NUMBER/ANGKA/MATA UANG pada Javascript yang Sering Digunakan

Custom Function String pada Javascript yang Sering Digunakan

Custom Function Tambahan Plugin pada Javascript yang Sering Digunakan

MACAM-MACAM FUNGSI UNTUK TAMBAHAN PLUGIN

Selanjutnya kita akan membahas tentang fungsi untuk tambahan plugin supaya lebih simpel, jadi kita menuliskannya lebih pendek dan juga lebih gampang.

1. Mempercantik tampilan dan memudahkan penulisan Loading.js

Plugin JQuery loading.js ini biasa saya gunakan untuk membuat loading pada aplikasi. Karena pada loading.js tidak ada animasinya atau ada tapi membosankan jadi saya berikan animasi gif yang berada pada folder img dengan nama dot-loading.gif jadi jika sobat ingin menggunakan ini sobat juga harus menambahkan gambar pada folder tersebut. Cara penggunaannya cukup

showLoading(‘body’) jika ingin loading menutupi keseluruhan body.
showLoading(‘#divId’) jika ingin loading hanya untuk element id tertentu.
showLoading(‘.class’) jika ingin loading menutupi beberapa element dengan class yang sama.

function showLoading(element) {
    $(element).loading({
        stoppable: false,
        theme: 'light'
    });
    var base_url = window.location.origin;

    var x = document.getElementsByClassName("loading-overlay-content");
    x[0].innerHTML = "<img src='" + base_url + "/img/dot-loading.gif' width='75px'><br>HARAP TUNGGU<br>SEDANG MEMPROSES DATA...<br>";
}

REVERSE/KEBALIKANYA

fungsi ini untuk menghilangkan loading tersebut karena jika kita memunculkan loading tentu kita juga harus menghilangkan loading jika proses sudah selesai. Ini biasa saya gunakan pada proses yang menggunakan Ajax. Pada beforeSend saya tampilkan showLoading(‘body’) dan pada success atau error saya panggil hideLoading(‘body’).

function hideLoading(element) {
    $(element).loading('stop');
}

2. Mempersingkat SweetAlert

Ini adalah fungsi untuk mempersingkat plugin sweetAlert. Cara penggunaanya cukup showAlert(‘success’, ‘Berhasil’, ‘Data Berhasil Disimpan’);

function showAlert(type, title, message) {
    swal({
        type: type,
        title: title,
        text: message
    });
}

3. Mempersingkat SweetAlert2

Ini adalah fungsi untuk mempersingkat plugin sweetAlert2 ingat ya sweetAlert2 bukan sweetAlert karena antara yang pertama dan kedua terdapat beberapa perbedaan penulisan seperti swal dengan Swal.fire atau icon dengan type. Cara penggunaanya cukup showAlert2(‘success’, ‘Berhasil’, ‘Data Berhasil Disimpan’);

function showAlert2(type, title, message) {
    Swal.fire({
        type: type,
        title: title,
        html: message
    });
}

Pada setiap fungsi kebanyakan terdapat pengecekan seperti ‘if(string==”” || string==null || string==”null” || string==undefined)’ itu fungsinya untuk apa? Bagi beberapa orang mungkin akan risih juga karena ada beberapa orang yang jika menuliskan sesuatu penginnya pendek aja mungkin bisa 1 baris saja dalam menuliskan fungsi. Namun saya tidak pasti selalu ada pengecekan itu karena jika null/undefined atau kosong itu dapat menyebabkan error pada suatu kasus, seperti seingat saya ya itu null/undefined kita replace maka akan membuat error atau masih banyak lagi yang saya tidak ingat. Jadi supaya aman selalu saya tambahkan pengecekan itu.

Sekian dulu custom function javascript karena ternyata banyak sekali dan saya sendiri jadi bingung scroll dan mencarinya jadi yang sebelumnya satu postingan saya pisah menjadi beberapa postingan berdasarkan kategori seperti custom function yang berhubungan dengan date, datetime, number, string dan masih banyak lagi. Dan ini saja masih belum semua jadi mungkin saya akan update lagi jika adaa kesempatan dan jika ada function baru yang saya gunakan.