Sunday, May 13, 2018

Cara mudah memformat flashdisk dengan terminal di ubuntu

Cara mudah memformat flashdisk dengan terminal di ubuntu

Pada tulisan kali ini saya akan sedikit membahas seputar cara memformat flashdisk dengan terminal diubuntu. Cara ini bisa menjadi cara andalan jika flashdisk kamu tidak bisa di format dengan cara yang biasa. Cara biasa yang di maksud itu adalah, dengan melakukan klik kanan pada device flashdisk kamu lalu klik format.

Dibeberapa kondisi, kadang cara memformat flashdisk dengan cara biasa kadang suka tidak berhasil. Cara satu ini adalah solusi baik untuk kamu yang ingin memformat isi flashdisk kamu. Caranya cukup mudah dan cepat untuk di praktikan. Pada praktik ini disini saya menggunakan UBUNTU 16.04. Baiklah kita langsung saya ke pokok pembahasan.

STEP BY STEP

Pertama, buka terminal, cara cepat kamu bisa menekan CTRL+ALT+T

Kedua, ketikan perintah sudo fdisk -l atau df -h untuk melihat device yang ada. Pada gambar dibawah ini flashdisk saya memiliki udev dengan nama /dev/sdb1.

Cara mudah memformat flashdisk dengan terminal di ubuntu

Ketiga, jika nama udev sudah diketahui, lalukan umount pada flashdisk kamu dengan mengetikan perintah sudo umount /dev/sdb1.

Keempat, jika flashdisk sudah di umount, kamu bisa langsung memformatnya dengan cara mengetikan perintah sudo mkfs.vfat /dev/sdb1.

Kelima, tunggu sampai proses selesai, dan hasilnya flashdisk kamu menjadi bersih kembali.

Mungkin tulisan kali ini saya cukupkan sampai disini dulu, semoga bermanfaat, terima kasih.
Tshcuss...

Monday, May 7, 2018

Cara mudah membuat USB bootable di ubuntu

Cara mudah membuat USB bootable di ubuntu

Tidaklah sulit untuk membuat USB bootable di ubuntu, karena dari OS-nya sendiri sudah menyediakan aplikasi bawaan untuk melakukan hal tersebut. Sebenarnya ada dua cara untuk membuat USB bootable di ubuntu, pertama pakai terminal dan yang kedua aplikasi aplikasi. Seperti yang tertera pada judul disini saya akan berbagi cara mudahnya saja, maka dari itu disini saya akan membahas yang bagian menggunakan aplikasinya saja.

Untuk praktiknya saya menggunakan ubuntu 16.04 Unity dan jangan lupa pula siapkan iso file yang ingin di bootable. Tanpa lama-lama lagi kita langsung masuk ke pokok pembahasannya saja.

STEP BY STEP

Pertama, cari aplikasi dengan nama startup disk, seperti yang ada pada gambar di atas.

 Cara mudah membuat USB bootable di ubuntu

Kedua, Jika aplikasi di buka, akan terlihat pada gambara di atas ini. Kemudian disana akan terbaca flashdisk yang ingin kamu jadikan bootable, pilih salah satu jika flashdisk terbaca lebih dari satu. lalu untuk mencari file .iso kamu bisa tekan tombol other.

Cara mudah membuat USB bootable di ubuntu

Ketiga, jika semua sudah oke, tinggal klik tombol make startup disk. Biasanya akan muncul konfirmasi, klik saja yes.

Cara mudah membuat USB bootable di ubuntu
Keempat, tunggu proses sampai selesai. Agak lumayan lama prosesnya sekitar 5 sampai 10 menit.

Cara mudah membuat USB bootable di ubuntu

Kelima, jika sudah beres, klik Quit saja, dan sekarang kamu bisa melihat hasilnya seperti ini

Cara mudah membuat USB bootable di ubuntu

Cukup sampai disini dulu, semoga bermanfaat, tschuss...


Cara mudah instal LIBXL di ubuntu

Cara mudah instal LIBXL di ubuntu

LIBXL merupakan sebuah library yang dapat memudahkan kita dalam mengolah data berupa spreadsheet atau yang lebih kita kenal dengan excel. LibXL dapat membaca dan menulis file Excel tanpa menggunakan Microsoft Excel dan .NET framework atau aplikasi spreadsheet lainnya. Fitur yang ada di LIBXL mudah digunakan dan kuat untuk pemrosesan data dalam skala besar.

LibXL dapat membantu aplikasi kamu dalam mengekspor dan mengimpor data ke atau dari file Excel. Library ini dapat digunakan dalam bahasa pemrograman seperti C, C++, C#, Delphi, Fortran dan lainnya. Mendukung format biner Excel 97-2003 (xls) dan format xml Excel 2007-2016 (xlsx / xlsm). Mendukung platform Unicode dan 64-bit. Library ini mendukung OS seperti linux, widows dan mac.

Barusan adalah sedikit intermezo seputar libxl, nah dipembahasan kali ini saya ingin membahas seputar cara instal library libxl di linux, karena sebelumnya saya sempat kesulitan untuk memasang libxl di linux, cari tutorial sana sini masih belum berhasil dan pada akhirnya berhasil juga.

Proses instalasi libxl di linux cukup panjang, tapi tenang, di tulisan ini saya sudah buat semuanya jadi ringkas tanpa ribet. Cukup satu, dua tiga kali aksi instalasi beres, asal kamu dapat pastikan perangkat kamu terhubung dengan internet.

Requirement instalasi
  • Ubuntu 16.04 64bit
  • PHP5.6 from ondrej/php ppa
  • Libxl 3.8.0
  • unzip, wget, dan
  • sudo access 
Cara ini bisa kamu coba untuk ubuntu versi tebaru 18.04.

INSTALASI

Pertama, salin kode di bawah ini, lalu simpan dengan ekstensi .sh . Pada bagian LIBXL_VERSION dan LIBXL_ARCHIVE_VERSION kamu bisa sesuaikan versinya dengan versi libxl yang ingin kamu instal. Agar mudah kamu bisa download langsung kode-nya di akun gist saya di : https://gist.github.com/dyazincahya/f3bc2497e6fc476a689b2827eb49d849


TMP_DIR=/tmp

# LibXL params
LIBXL_VERSION=3.8.0
LIBXL_ARCHIVE_VERSION=3.8.0.0
LIBXL_INSTALL_PATH="/opt/libxl-$LIBXL_VERSION"
LIBXL_URL="http://www.libxl.com/download"
LIBXL_ARCHIVE="libxl-lin-$LIBXL_VERSION.tar.gz"


# PHP params
PHP_VERSION=5.6
PHP_CONFIG=`which php-config$PHP_VERSION`
PHPIZE=`which phpize$PHP_VERSION`
PHP_MODS_AVAILABLE_PATH=/etc/php/$PHP_VERSION/mods-available
PHPENMOD="phpenmod -v $PHP_VERSION"

# php_excel params
PHP_EXCEL_URL=https://github.com/Gerst20051/php_excel/archive/Excel-1.0.2.1-PHP5.zip
#https://github.com/Gerst20051/php_excel/archive/Excel-1.0.2.1-PHP5.zip #OLD_VERSION
PHP_EXCEL_ARCHIVE_DIR=php_excel-Excel-1.0.2.1-PHP5

set -e

install_libxl() {
    echo "Installing LIBXL v$LIBXL_VERSION"
    wget -O $TMP_DIR/$LIBXL_ARCHIVE $LIBXL_URL/$LIBXL_ARCHIVE
    tar zxvf $TMP_DIR/$LIBXL_ARCHIVE --directory $TMP_DIR
    sudo mkdir -p $LIBXL_INSTALL_PATH
    sudo cp -r $TMP_DIR/libxl-$LIBXL_ARCHIVE_VERSION/* $LIBXL_INSTALL_PATH
}

install_phpexcel_extension() {
    echo "Download and compling PHP_EXCEL extension for libxl"
    wget -O $TMP_DIR/php_excel.zip $PHP_EXCEL_URL
    if [ -d $TMP_DIR/$PHP_EXCEL_ARCHIVE_DIR ]; then
        # REMOVE eventual previous buils
        rm -r $TMP_DIR/$PHP_EXCEL_ARCHIVE_DIR/*
    fi
    unzip -o $TMP_DIR/php_excel.zip -d $TMP_DIR
    cd $TMP_DIR/$PHP_EXCEL_ARCHIVE_DIR/
    eval "$PHPIZE"
    ./configure --with-php-config=$PHP_CONFIG --with-libxl-incdir=$LIBXL_INSTALL_PATH/include_c/ --with-libxl-libdir=$LIBXL_INSTALL_PATH/lib64/ --with-excel=$LIBXL_INSTALL_PATH
    make
    #make test
    echo "Installing php extension (need sudo)"
    sudo make install
    echo "Install succeed, please add extension=excel.so in your php.ini"
}

register_php_extension() {
    echo "Registering available extension in $PHP_MODS_AVAILABLE_PATH/excel.ini" 
    echo "extension=excel.so" > $TMP_DIR/excel.ini
    sudo cp $TMP_DIR/excel.ini $PHP_MODS_AVAILABLE_PATH/excel.ini 
    cmd="sudo $PHPENMOD excel"
    echo "Activating: $cmd";
    eval $cmd;
}


install_libxl;
install_phpexcel_extension;
register_php_extension;

echo "Install successfull" 
echo "Optionally you can restart your fpm daemon"
echo "to reflect changes:"
echo "   sudo service php$PHP_VERSION-fpm restart";

Kedua, jika cara pertama sudah selesai di lakukan, selanjutnya tinggal jalankan file .sh tadi dengan cara mengetikan perintah berikut pada terminal. Disini saya meletakan file .sh nya di folder Download dengan nama install_libxl_php5.6.sh

Perintah untuk masuk ke folder Download

cd ~/Download

Perintah untuk mengeksekusi file install_libxl_php5.6.sh

sudo ./install_libxl_php5.6.sh

Ketiga, proses instalasi cukup memakan waktu dikarenakan ada proses download didalamnya, semua tergantung koneksi di tempat masing-masing. Tunggu sampai proses selesai, jika tidak terjadi masalah maka libxl sudah bisa langsung kamu pakai.

Mungkin cukup sekian dulu untuk pembahasan kali ini, semoga bermanfaat, tschuss...




Saturday, May 5, 2018

RawGit layanan CDN gratis untuk developer

RawGit layanan CDN gratis untuk developer

Bagi kamu para developer, tentunya tidak asingdengan yang namanya CDN.
Content Delivery Network atau yang biasa kita kenal dengan CDN merupakan sebuah sistem jaringan server untuk mendistribusikan konten (seperti : CSS & JS) yang ada dalam sebuah app/web ke berbagai pengguna diberbagai belahan dunia agar konten yang dikirim diterima lebih cepat. CDN diperuntukkan untuk app/web yang penggunanya dari berbagai belahan dunia. source

Pasti diantara kamu pernah menggunakan CDN untuk menghosting konten seperti css, js dan lainnya agar cepat saat diakses. Salah satu CDN yang populer saat ini adalah maxcdn.com dimana banyak open source populer di hosting disana, contohnya seperti bootstrap, jquery, ionicicon dan lainnya.

Nah pada tulisan ini saya ingin berbagi info tentang layanan CDN gratis yang mungkin kamu dapat gunakan nanti, karna akhir-akhir ini saya lumayan sering menggunakan layanan ini, salah satunya file-file js dan css di blog ini saya sudah menggunakan CDN tersebut.

Namanya RawGit, CDN ini cukup unik, kenapa? Layanan ini terbilang sangat sederhana, karena kita tidak perlu melakukan registrasi untuk menggunakan RawGit, kamu cukup letakan URL yang berasal dari repositori github, dan bum, seketika URL CDN kamu dengan otomatis tergenerate dan bisa langsung kamu pakai.

Hasil generate dari RawGit akan ada 2 tipe URL CDN, pertama CDN untuk production dan yang kedua development. Hal ini sepertinya tidak perlu saya jelaskan panjang lebar, tentunya sebagai sesama developer pasti kamu paham akan kedua hal tersebut.
Lalu timbul sedikit pertanyaan:
Bagaimana jika kita menggunakan repositori selain dari github?
Jawab : Untuk saat ini kebetulan dia hanya mendukung github saja, tapi tidak tahu untuk kedepannya, bisa jadi kedepannya ada pengembangan baru dengan mendukung yang lainnya seperti bitbucket, gitlab dan lainnya.
PRAKTIK

Barusan saya sudah cerita banyak, nah sekarang kita akan coba praktik mengunakan RawGit, caranya :

Pertama, push source kamu ke github.com atau ke gist.github.com, pada praktik kali ini saya akan menggunakan gist.github.com

Kedua, setelah source di push, maka kita harus membuka source yang tadi di push dalam bentuk raw, caranya buka source yang barusan di push, setelah di buka biasanya akan ada tombol raw pada bagian pojok atas kanan, seperti gambar di bawah ini

RawGit layanan CDN gratis untuk developer

Setelah tombol raw di klik, pada address bar browser, kita akan mendapatkan link raw source yang barusan kita push, ini link source milik saya

https://gist.githubusercontent.com/dyazincahya/9ecfa81d87af2bc2e36a6e9566fb67bf/raw/7c1aa38032f0f0c2c2fa0b3e09855daedc228ebf/k4ng_sitemap.js

Ketiga, link raw sudah kita dapatkan, buka https://rawgit.com, kemudian salin link raw kalian pada kolom inputan yang tersedia, setelah URL disalin, seketika akan muncul URL CDN untuk development dan production.

RawGit layanan CDN gratis untuk developer

Bagaimana, cukup mudah bukan?

Karena RawGit ini sebuah open source, kamu sebagai developer bisa juga ikut berkontribusi untuk mengembangkan RawGit, atau kamu juga bisa menghosting RawGit di tempat hosting kamu sendiri. Untuk sourcenya sendiri kamu bisa dapatkan di https://github.com/rgrove/rawgit

Mungkin tulisan ini saya cukupkan dulu sampai disini, semoga bermanfaat, tschuss...


Membuat sitemap sederhana ala kang-cahya di blogger

Membuat sitemap sederhana ala kang-cahya di blogger

Sitemap merupakan kumpulan semua judul konten yang disajikan dalam format list atau lainnya, dimana di masing-masing judul itu mempunyai link yang terhubung langsung dengan halaman yang bersangkutan. Sitemap ini berfungsi sebagai peta yang menunjukan segala hal yang ada di website tersebut, seperti ini contohnya : https://www.kang-cahya.com/p/sitemap-page.html

Membuat sitemap sederhana ala kang-cahya di blogger

Dalam pembahasan kali ini saya ingin membahas sedikit seputar cara membuat sitemap di blogger, sitemap ala kang-cahya, dimana bentuk sitemapnya nanti akan berupa list yang dikelompokan berdasarkan kategori, seperti yang nampak pada gambar di atas.

INSTALASI SITEMAP

Cara memasang sitemap di blogger sangatlah mudah, caranya :

Pertama, login ke blogger.com, lalu masuk ke menu halaman/page, klik tombol buat halaman baru.

Kedua, pada bagian judul ketikan "sitemap" atau apa bebas namanya terserah kamu. Tapi untuk blog saya sendiri pada bagian judul saya beri nama "Sitemap Page".

Ketiga, pada bagian badan konten, disana terdapat dua opsi untuk mode penulisan kontennya, yaitu compose dan html. Kita pilih opsi html.

Membuat sitemap sederhana ala kang-cahya di blogger

Keempat, salin kode dibawah ini ke badan konten


<style>
 #toc {
     width: 100%;
     margin: 5px auto;
     border-left: 1px solid #2AAF63;
 }

 .labl {
     color: #FF5F00;
     font-weight: bold;
     margin: 0 -5px;
     padding: 9px 0 10px 30px;
     background: #2AAF63;
     border: 1px solid #2AAF63;
     display: block;
 }

 .labl a {
     text-decoration: none;
     color: #FFFFFF;
     font-family: 'Roboto', sans-serif;
 }

 .labl {
     text-transform: uppercase;
 }

 .new {
     color: #E91E63;
     font-weight: bold;
     font-style: italic;
     font-family: 'Roboto', sans-serif;
 }

 .postname {
     font-weight: normal;
     background: #FFFFFF;
     margin-left: 35px;
     color: #415A6B;
 }

 .postname li {
     border-bottom: #415A6B 1px dotted;
     margin-right: 5px;
     padding: 7px 0 3px 0;
 }

 .postname li a {
     text-decoration: none;
     font-family: 'Roboto', sans-serif;
     color: #415A6B;
 }
</style>

<div id="toc">
 <script src="https://cdn.rawgit.com/dyazincahya/9ecfa81d87af2bc2e36a6e9566fb67bf/raw/52def2eea6302cf8a43f51ce268bfd78e6ae41e0/k4ng_sitemap.js" type="text/javascript"></script>
 <script src="https://www.kang-cahya.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Pada bagian ini <script src="https://www.kang-cahya.com/feeds/posts/default, silahkan ganti URL kang-cahya.com degan URL blog kamu sendiri.

Kelima, jika sintak diatas sudah disalin, kamu bisa langsung simpan lalu publish. Disini ada satu bagian kode lagi, tapi ini sifatnya optional, tidak wajib. Kode ini berfungsi untuk menyembunyikan kolom komentar pada halaman sitemap. Sekali lagi, kode ini bersifat optional. Jika kamu ingin menggunakannya, kamu bisa meletakan kode ini tepat di bawah kode sitemap

<style type="text/css">
 #comments {display:none;}
</style>

Jika semua sudah dilakukan, kamu tinggal lihat hasilnya.

Mungkin tulisan ini saya cukupkan dulu sampai disini, semoga bermanfaat, tschuss...

Wednesday, May 2, 2018

Perbandingan konsumsi RAM dikeluarga UBUNTU

Perbandingan konsumsi RAM dikeluarga UBUNTU

Bulan april kemarin UBUNTU resmi merilis pembaharuan terbarunya, yaitu 18.04 yang diberi nama "Bionic Beaver". Ini adalah tahun keduanya ubuntu dimana di pembaharuan terbarunya sudah tidak menggunakan DE (desktop environment) unity. Saat ini ubuntu hanya merilis OS-nya dengan tumpuan satu DE, yaitu GNOME.

Lalu bagaimana dengan pemakaian RAM dengan DE GNOME? Apakah masih sama besarnya saat menggunakan UNITY? Untuk pemakaian RAM saat OS pertama kali dinyalakan akan memakan RAM sekitar 1.2 GB untuk GNOME.

Masih terbilang cukup besar, tapi kamu tidak perlu kwatir, jika kamu masih ingin menggunakan UBUNTU tapi dengan konsumsi RAM yang rendah, disini saya punya beberapa distro alternative yang masih serumpun dengan ubuntu. Saya harap dengan adanya tulisan ini dapat mempermudah kamu dalam menentukan pilihan OS yang cocok untuk perangkat kamu.

Ada beberapa OS alternative keluarga ubuntu yang dapat kamu gunakan, seperti :
  • Ubuntu Original (GNOME)
  • Kubuntu
  • Lubuntu
  • Xubuntu
  • Ubuntu MATE
  • Ubuntu Budgie
Lalu untuk konsumsi RAM-nya, disini saya punya sebuah grafik chart seputar RAM yang di pakai oleh masing-masing OS.

Berikut ini adalah spesifikasi komputer yang di pakai untuk test OS-nya :
  • ASUS X456UQK 
  • Partisi hardisk 10GB
  • RAM 4GB
  • Swap 0GB
  • Prosesor intel i7-7500U Generasi-7 (2.70GHzx4)
Perbandingan konsumsi RAM dikeluarga UBUNTU
https://live.amcharts.com/2YxYm/

Bagaimana? apakah kamu sudah menemukan gambaran kira-kira OS manakah yang cocok untuk perangkat kamu?

Melihat dari grafik diatas, jika kita coba urutkan dari yang kecil sampai yang terbesar maka urutannya akan menjadi seperti ini :
  • Lubuntu (228 MiB)
  • Xubuntu (361 MiB)
  • Kubuntu  (376 MiB)
  • Ubuntu MATE (922 MiB)
  • Ubuntu Budgie (1.1 GiB)
  • Ubuntu Original (1.2 GiB)
 Jika perangkat kamu jadul banget RAM-nya gak nyentuh 1 GB, kamu bisa menggunakan Lubuntu, Lubuntu next, Xubuntu, atau Kubuntu. Untuk RAM kisaran 2 GB kamu bisa menggunakan Ubuntu MATE atau Ubuntu Budgie, tapi tidak ada salahnya juga jika kamu ingin menggunakn Lubuntu, Lubuntu next, Xubuntu, atau Kubuntu. Kisaran RAM 4 GB atau lebih semuanya oke, semuanya tergantung pribadi masing-masing cocoknya sama yang mana.

Mungkin pembahasan kali ini saya cukupkan dulu sampai disini, semoga bermanfaat untuk kamu.

Tschuss...



Tuesday, May 1, 2018

Cara mengambil data GET dari URL dengan javascript

Cara mengambil data GET dari URL dengan javascript

Sebelum ke pembahasan utama, kira-kira menurut kamu apakah yang disebut data GET itu? Ya benar, data GET merupakan sebuah data yang dikirimkan dari form lewat sebuah URL, cara ini biasanya bisa dilakukan oleh form yang mepunyai method GET. Tapi tanpa form pun untuk cara ini kamu masih tetap bisa menuliskan parameternya secara manual dengan format :

http://example-domain.com?firstname=kang&lastname=cahya

Setelah nama domain kamu harus menambahkan tanda tanya (?) dan kemudian setelahnya di iringi dengan penulisan parameter yang kamu inginkan. Jika parameter yang ingin kamu kirim lebih dari satu, kamu bisa menambahkan simbol dan (&), seperti yang terlihat pada contoh URL diatas. Disana terdapat 2 parameter GET, yaitu firstname dan lastname, sampai disini saya harap kamu dapat memahaminya.

Tapi inti dari tulisan bukanlah itu, disini saya akan membahas seputar "bagaimana cara mengambil data GET dari URL dengan javascript". Mungkin jika menggunakan PHP akan sangat sederhana untuk melakukan hal ini, kamu cukup menggunakan $_GET untuk mengambil data GET dari URL. Beda dengan javascript, disini kita tidak punya fungsi langsung (setahu saya) seperti yang tersedia pada PHP. Maka dari itu untuk melakukan hal ini kita memerlukan sebuah fungsi dimana fungsi itu kita sendiri yang buat.

SEBUAH FUNGSI

Ini adalah fungsi yang saya buat sendiri, dimana kegunaan dari fungsi ini adalah untuk mengambil data GET yang tersemat di URL. Kurang lebih seperti ini fungsinya :

function getUrlVars(param=null)
{
	if(param !== null)
	{
		var vars = [], hash;
		var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		for(var i = 0; i < hashes.length; i++)
		{
			hash = hashes[i].split('=');
			vars.push(hash[0]);
			vars[hash[0]] = hash[1];
		}
		return vars[param];
	} 
	else 
	{
		return null;
	}
}

MENGGUNAKAN FUNGSI

Asumsikan kita sedang berada dihalaman web dengan URL seperti ini :

http://example-domain.com?firstname=kang&lastname=cahya

Lalu kamu ingin mengambil data GET yang ada di URL tersebut dengan fungsi yang telah di buat tadi. Seperti ini caranya :

var param1 = getUrlVars("firstname");
alert(param1);

var param2 = getUrlVars("lastname");
alert(param2);

Kamu cukup sebutkan nama parameternya didalam fungsi tadi, contohnya seperi pada sintak diatas, maka value dari parameter tersebut akan otomatis terambil.

LIVE CODE

Ini adalah live code yang saya posting di jsfiddle :



PENUTUP

Mungkin untuk tulisan ini saya cukupkan sampai disini dulu, semoga bermanfaat.

Tschuss...

Sunday, April 29, 2018

Menonaktifkan spasi pada inputan dengan jquery

Menonaktifkan spasi pada inputan dengan jquery

Pada tulisan kali ini saya ingin membahas seputar jquery, dimana topik inti dari tulisan ini adalah tentang bagaimana cara menonaktifkan spasi pada inputan dengan menggunakan jquery.

GAMBARAN

Untuk membuat ini cukuplah sederhana, dimana nanti kita akan menggunakan sebuah listener yang dipadukan dengan fungsi replace. Jadi saat user mengetik, kemudian pada ketikannya itu terdapat karakter spasi maka akan kita remove dengan fungsi replace.

KODING

Untuk versi jquery yang saya gunakan adalah versi 2.2.4, kamu bisa mendapatkannya disini : https://cdnjs.com/libraries/jquery/2.2.4, jangan lupa diload terlebih dahulu sebelum menulis kode selanjutnya :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Kemudian disini saya punya sebuah inputan sederhana sebagai berikut :

<input id="form-input" placeholder="Type some text here...">

Lalu diikuti dengan sintak jquery seperti ini :

$("#form-input").on({
 keydown: function(e) {
   if (e.which === 32)
     return false;
  },
  keyup: function(){
   this.value = this.value.toLowerCase();
  },
  change: function() {
    this.value = this.value.replace(/\s/g, "");
    
  }
});

Sintak utamanya ada pada fungsi keydown dan change, dimana saat ada perubahan maka fungsi itu akan secara otomatis berjalan, lalu saat inputan yang dimasukan mengandung spasi maka fungsi itu akan otomatis menghapusnya. Disana saya juga menambahkan fungsi keyup dimana saat inputan dimasukan maka semua karakter akan berubah menjadi huruf kecil, jika kamu ingin merubahnya menjadi hurup besar caranya kamu cukup ubah bagian "toLowerCase()" menjadi "toUpperCase()".

Agar tampilah inputan tidak terlihat polos, kita bisa tambahkan sedikit rias dengan CSS, kurang lebih seperti ini, bagian ini bersifat optional, kamu tidak tambahkan pun tidak jadi masalah.

input {
  border: 3px solid #9E9E9E;
  border-radius: 5px;
  height: 45px;
  width: 450px;
  font-size: 24px;
  color: #212121;
  margin: 25px 0px 0px 25px;
  padding: 15px;
}

 

Diatas merupakan gambar inputan yang sudah kita beri CSS.

DEMO & FULL KODE




PENUTUP

Mungkin tulisan ini saya cukupkan sampai disini, semoga bermanfaat.
Tschuss...

Thursday, April 26, 2018

Berkenalan dengan "Snaps" sebuah universal Linux package

 Berkenalan dengan "Snaps" sebuah universal Linux package

Snaps merupakan sebuah (bisa dibilang platform) yang menyediakan berbagai macam paket aplikasi untuk LINUX. Snaps ini adalah sebuah "Universal Linux Package", kenapa saya katakan universal? Karena banyak distro linux yang sudah dia dukung, seperti ubuntu, debian, fedora, arch dan lain-lain, lengkapnya kamu bisa lihat disini.

Berkenalan dengan "Snaps" sebuah universal Linux package

Untuk melalukan pemasangan aplikasi menggunakan snaps sangatlah mudah, caranya hampir sama seperti kita menggunakan perintah bawaan masing-masing distro. Untuk penerapannya sendiri, disini saya menggunakan distro linux "UBUNTU". Sekarang mari kita coba mulai :

INSTALASI

Snaps merupakan aplikasi pihak ketiga, maksudnya bukan aplikasi bawaan dari distro yang dipakai, jadi sebagai langkah awal untuk menggunakan snaps, disini kita akan coba melakukan pemasangan snaps-nya terlebih dahulu. Ketikan perintah berikut pada terminal untuk melakukan instalasi :

sudo apt update
sudo apt install snapd

CEK APLIKASI TERINSTAL

Kamu juga bisa melihat aplikasi apa yang sudah kamu pasang menggunakan snaps, caranya ketikan perintah berikut :

sudo snap list

MENCARI APLIKASI YANG TERSEDIA

Untuk mencari tahu apakah paket yang kamu ingin pasang itu tersedia atau tidak, untuk mengeceknya kamu bisa ketikan perintah :

sudo snap find <nama paket aplikasi>

Untuk bagian ini sebenarnya ada cara lain. Caranya kamu bisa mengunjungi langsung store dari snaps itu sendiri disini : https://snapcraft.io/store

Berkenalan dengan "Snaps" sebuah universal Linux package


MEMASANG APLIKASI

Cara memasang aplikasi menggunakan snaps cukup mudah, cukup dengan perintah seperti ini saja :

sudo snap install <nama paket aplikasi>

MEMPERBAHARUI APLIKASI

Saat ada pembaharuan aplikasi kamu juga dapat memperbaharuinya dengan mudah, caranya dengan mengetikan perintah :

sudo snap refresh <nama paket aplikasi>

Jika kamu tidak mau ribet karena harus memperbaharui apliakasi satu per satu, dengan snaps kamu bisa memperbaharui semua apliaksi sekaligus, caranya :

sudo snap refresh

REVERT VERSI APLIKASI

Kasusnya jika kamu sudah terlanjur memperbaharui aplikasi ke versi terbaru tapi kamu ingin mengembalikannya ke versi yang sebelumnya, kamu bisa menggunakan perintah :

sudo snap revert <nama paket aplikasi>

MENGHAPUS APLIKASI

Untuk menghapus aplikasi disnaps, kamu cukup ketikan perintah :

sudo snap remove <nama paket aplikasi>

Mungkin tulisan ini saya cukupkan sampai disini dulu, semoga bermanfaat.

Tschuss...

Wednesday, April 25, 2018

Cara memperbaiki error "parts of this page are not secure, such as images" https blogger


Pernahkan kamu mengalami error "parts of this page are not secure, such as images" seperti yang ada pada gambar di atas. Error ini muncul saat domain blog kita menggunakan https. Apa kamu tahu apa penyebab dari error tersebut? Jika belum tahu, saya akan sedikit mengulasnya disini.

Error tersebut diakibatkan oleh link sumber gambar yang kita pakai masih menggunakan HTTP bukan menggunakan HTTPS. Solusi untuk masalah ini cukuplah sederhana, yaitu mengubah semua link sumber gambar yang awalnya HTTP menjadi HTTPS.

BLOGGER

Untuk kamu yang menggunakan platform blogger, kamu bisa masuk ke  :
  • Masuk ke menu tema atau template,
  • Kemudian klik tombol "Edit HTML"
  • Setelah itu akan muncul editor yang berisi sintak XML,
  • Tugas kamu di sana mencari link sumber gambar yang menggunakan HTTP, caranya dengan menekan tombol "CTRL+F", lalu ketikan http://.
  • Jika kamu menemukan link sumber gambar dengan http, langsung saja rubah manual menjadi https,
  • Terakhir simpan kembali template yang sudah di edit, lalu reload halaman blog kamu, jika masih muncul error seperti gambar di atas itu tandanya kamu masih belum merubah semua link-nya menjadi HTTPS.

WORDPRESS

Bagi kamu yang menggunakan wordpress, akan terasa ribet jika harus mengubahnya secara manual, agar lebih mudah kamu bisa mengguankan plugin "WP FORCE SSL" agar semua link sumber yang ada di blog kamu berubah menjadi HTTPS. Atau jika kamu tidak mau menggunakan plugin, kamu bisa menyetel file htaccess kamu agar ketika orang mengakses blog kamu dengan HTTP maka akan otomatis di alihkan ke HTTPS.

Mungkin untuk pembahasan kali ini saya cukupkan sampai disini dulu, semoga tulisan ini bermanfaat yah.

Tschuss...

Wednesday, February 21, 2018

Fix error Illegal string offset 'server' postgre_driver codeigniter 2

Fix error Illegal string offset 'server' postgre_driver codeigniter 2

Pembahasan yang sudah berlalu, karena pada kenyataannya, mungkin hanya beberapa saja yang masih menggunakan codeigniter dibawah versi 3. Tapi itu bukan masalah, intinya disini saya hanya ingin berbagi, masalah sudah berlalu atau tidak urusan belakangan.

Kasus yang akan saya bahas kali ini mengenai postgre driver di codeigniter 2, dimana di versi ini terdapat bug kecil ketika kamu ingin mengambil last id insert. Jelasnya itu terletak di :

$this->db->insert_id();

Pada saat error terjadi, saya menggunakan :
  • Codeigniter 2.2
  • PHP 5.6
  • Postgre 9.4
 Jika kamu menggunakan codeigniter versi 3 ke atas, error ini sudah tidak ada, karena sudah di tutup oleh tim developer codeigniter. Untuk kamu yang belum move on ke codeigniter terbaru, maka ada cara sederhana untuk menutup error ini, cukup mudah, seperti ini :

Tahap awal, buka file postgre_driver.php yang ada di MY_CI/system/database/drivers/postgre.

Jika file sudah dibuka, ada dua cara untuk memperbaiki error ini,

Pertama
Lihat pada baris 331 pada file postgre_driver.php, kemudian komen sintak ini

$v = $this->_version();
$v = $v['server'];

Dan sematkan sintak ini tepat di bawah sintak yang barusan di komen

$v = pg_version($this->conn_id); $v = isset($v['server']) ? $v['server'] : 0;

Lengkapnya akan tampak seperti ini

/*$v = $this->_version();
$v = $v['server'];*/

$v = pg_version($this->conn_id); $v = isset($v['server']) ? $v['server'] : 0;

Kedua
Masih di file postgre_driver.php, cari fungsi dengan nama _version(), jika kamu menggunakan sublime cukup tekan CTRL+R lalu ketikan _version.

Selanjutnya, replace fungsi _version() dengan sintak dibawah ini

function _version()
{
 return @pg_version($this->conn_id); 
 // return "SELECT version() AS ver";
}

Sekarang coba jalankan ulang program codeigniter kamu, dan bye bye error :)

Mungkin cukup sampai disini pembahasan kali ini, semoga bermanfaat yah.

Tschuss...!


Thursday, January 25, 2018

Membuat preview upload image sederhana dengan jquery

Membuat preview upload image sederhana dengan jquery


Pembahasan lama karena secara jquery sudah banyak di tinggalkan oleh developer, secara sekarang sudah banyak pentolan dari javascript yang lebih oke dari jquery. Di tinggalkan bukan berarti sudah tidak ada yang pakai, tapi tetap saja masih ada developer yang menggunakannya, secara jquery sendiri masih belum mati, dia masih terus di kembangkan oleh pengembangnya.

Saya sendiri sudah lama tidak pakai jquery karena saat ini saya lebih banyak berkutat dengan polymer-project dan nativescript. Sempat pula menyicipi angularJS, vue dan reactJS. Ini masalah selera saja, saya sendiri tidak berpihak kemanapun, entah itu sisi pro atau kontra.

Dari intermezo di atas, inti dari tulisan ini adalah saya ingin sedikit berbagi tutorial jquery tentang "mengguat preview upload image". Jadi sebelum kita mengupload gambar disini saya ingin meliat preview gambarnya terlebih dahulu. Tampa panjang lebar mari kita masuk ke materi.

Requirement

Pada praktik ini saya menggunakan jquery 2.2.4, untuk source kamu bisa dapatkan disini : https://code.jquery.com/

Step by step

Pertama, load dulu jquerynya,

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

Kedua, tambahkan sedikit style pada bagian head

<style>
 .error {
    background-color: #F44336;
    color: #FFFFFF;
  font-weight: bold;
    padding: 10px;
 }
 .warning {
  background-color: #E65100;
  color: #FFFFFF;
  font-weight: bold;
  padding: 10px;
 }
</style>

Ketiga, pada bagian body html tambahkan sintak ini,

<div id="message"></div>
<div>
  <img id="previewing" src="http://www.bazaardaily.co.uk/wp-content/uploads/2017/06/Logo-Menu.png" width="555" height="277" />
</div><br/>
<div><input type="file" name="file" id="file" autofocus /></div>

Keempat, pada bagian js, tambahkan sintak ini,

$(function() {
 $("#file").change(function() {
  $("#message").empty(); // To remove the previous error message
  var file = this.files[0];
  var imagefile = file.type;
  var match= ["image/jpeg","image/png","image/jpg"];
  
  if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
  {
   $("#file").css("color","red");
   $('#previewing').attr('src','http://www.bazaardaily.co.uk/wp-content/uploads/2017/06/Logo-Menu.png');
   $("#message").html("
Please select a valid image file, Only jpeg, jpg and png Images type allowed
"); return false; } else { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); // for validate image size var limit = 2097152; //2MB ==> 1048576 bytes = 1MB; if(this.files[0].size > limit){ $("#message").html('
Image size is large, max size 2MB!
'); $("#file").css("color","red"); } } }); }); function imageIsLoaded(e) { $("#file").css("color","green"); $('#image_preview').css("display", "block"); $('#previewing').attr('src', e.target.result); $('#previewing').attr('width', '555px'); $('#previewing').attr('height', '277px'); };

Full source code

Untuk sintak lengkapnya kamu bisa lihat dibawah ini,

<!DOCTYPE html>
<html>
<head>
 <title>Preview image</title>
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
 <style>
  .error {
     background-color: #F44336;
     color: #FFFFFF;
   font-weight: bold;
     padding: 10px;
  }
  .warning {
   background-color: #E65100;
   color: #FFFFFF;
   font-weight: bold;
   padding: 10px;
  }
 </style>
</head>
<body>
 <div id="message"></div>
 <div>
  <img id="previewing" src="http://www.bazaardaily.co.uk/wp-content/uploads/2017/06/Logo-Menu.png" width="555" height="277" />
 </div><br/>
 <div><input type="file" name="file" id="file" autofocus /></div>

 <script>
  $(function() {
   $("#file").change(function() {
    $("#message").empty(); // To remove the previous error message
    var file = this.files[0];
    var imagefile = file.type;
    var match= ["image/jpeg","image/png","image/jpg"];
    
    if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
    {
     $("#file").css("color","red");
     $('#previewing').attr('src','http://www.bazaardaily.co.uk/wp-content/uploads/2017/06/Logo-Menu.png');
     $("#message").html("<p class='error'>Please select a valid image file, Only jpeg, jpg and png Images type allowed</p>");
     return false;
    } else {
     var reader = new FileReader();
     reader.onload = imageIsLoaded;
     reader.readAsDataURL(this.files[0]);

     // for validate image size
     var limit = 2097152; //2MB ==> 1048576 bytes = 1MB;
     if(this.files[0].size > limit){
      $("#message").html('<p class="warning">Image size is large, max size 2MB!</p>');
        $("#file").css("color","red");
     }
    }
   });
  });

  function imageIsLoaded(e) {
   $("#file").css("color","green");
   $('#image_preview').css("display", "block");
   $('#previewing').attr('src', e.target.result);
   $('#previewing').attr('width', '555px');
   $('#previewing').attr('height', '277px');
  };
 </script>
</body>
</html>

Demo

Kamu bisa melihat demo pada tab result dibawah ini,


Thursday, January 4, 2018

Cara install composer php di linux (ubuntu)

Cara install composer php di linux (ubuntu)

Composer adalah tool manajemen paket yang populer untuk PHP. Tujuan diciptakannya composer tidak lain dan tidak bukan adalah untuk memudahkan pemasangan dan pembaruan dependensi yang ada pada proyek kita. Composer akan memeriksa daftar dependensi yang ada pada proyek kamu dan kemudian akan otomatis mengunduh paket yang belum ada, ini berlaku ketika nanti ada pembaharuan paket.

Pada tulisan kali ini saya akan membahas sedikit tentang cara menginstal composer di linux. Namun sebelum ke materi mungkin ada beberapa informasi yang peru saya beri tahu terkait alat dan versi berapa yang saya pakai.

SYARAT

Ditulisan kali ini saya menggunakan :
  • Ubuntu 16.04
  • PHP 5.6

PEMASANGAN DEPENDENSI

langkap pertama yang dilakukan ketika ingin memasang dependensi di ubuntu jangan lupa lakukan update, jalankan perintah ini di terminal.

sudo apt update

Untuk memasang composer ada beberapa dependensi yang harus di pasang diantaranya, curl, php5.6-cli dan git.

sudo apt install curl php5.6-cli git


MENGUNDUH DAN MEMASANG COMPOSER

Jika dependensi yang di butuhkan sudah terpasang, langkah selanjutnya tinggal mengunduh lalu kemudian memasang composertnya. Silahkan jalankan perintah ini pada terminal.

curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin --filename=composer

Tunggu sampai proses selesai. Jika pemasangan selesai, maka akan keluar output seperti ini

All settings correct for using Composer
Downloading...

Composer (version 1.5.6) successfully installed to: /usr/local/bin/composer
Use it: php /usr/local/bin/composer


CEK PEMASANGAN COMPOSER

Untuk memastikan proses pemasangan berhasil, silahkan ketikan perintah ini pada terminal.

composer

Dan jika composer berhasil terpasang maka akan muncul output seperti gambar di atas.

Mungkin saya cukupkan sampai disini untuk tulisan kali ini, semoga dapat membantu :)

Tschuss!


Thursday, December 21, 2017

Cara mengatasi masalah "folder does not appear to be writable" di php

Cara mengatasi masalah "folder does not appear to be writable" di php


Mungkin diantara kalian ada yang pernah mengalami masalah, kurang lebih seperti ini masalahnya "The upload destination folder does not appear to be writable". Masalah tersebut timbul karena kita tidak mendapat hak akses untuk mengakses suatu direktory. Saya pernah mengalami masalah tersebut saat menggunakan php, lebih spesifiknya condeigniter. Masalah ini biasanya timbut saat kita akan melakukan upload file, dan ketika file diupload kita kelupaan mengatur permissionnya, nah saat itu lah biasanya masalah ini akan muncul.

Terkait masalah ini, ada 2 cara yang dapat kamu lakukan untuk mengatasi masalah ini :
  • Ubah mod direktory menjadi 777.
  • Ubah own direktory menjadi www-data.

Dari dua cara diatas saya lebih prefere menggunakan cara yang kedua, mengubah own menjadi www-data. Karena untuk mengubah mod menjadi 777 itu sangatlah beresiko, biasanya untuk mod itu paling mentok cuma sampe 755.

Untuk keputusan cara mana yang mau pakai, sisanya saya serahkan kembali kepada kamu, tidak ada yang melarang juga toh hehe

MOD 777
Untuk mengatur mod menjadi 777 sangatlah mudah, kamu cukup ketikan perintah seperti ini pada terminal :

sudo chmod -R 777 lokasi_direktorynya

Untuk lokasi direktory kamu bisa tentukan sendiri.

OWN WWW-DATA
Untuk mengubah own menjadi www-data cukuplah ketikan perintah seperti ini :

sudo chown -R www-data lokasi_direktorynya

Cukup mudahkan?
Mungkin aktikel kali ini saya cukupkan sampai disini dulu, semoga membantu yah, terima kasih :)

Tschuss!!!


Friday, December 15, 2017

Cara mereplace semua karakter (replaceAll) dengan javascript


Lama tak posting, terakhir saya posting itu bulan sembilan tanggal dua puluh dua (22-09-2017). Pada postingan kali ini saya ingin seikit membahas tentang cara mereplace semua karakter dengan javascript. Pembahasan ini cukup sederhana tapi semoga bermanfaat.

Pada dasarnya untuk melakukan replace di javascript kita hanya perlu menggunakan fungsi replace(), cuma fungsi itu saya rasa masih punya sedikit kekurangan, kekurangannya adalah, dia hanya akan mereplace 1 karakter saja, sedangkan dalam kasus lain, ketika kita ingin mereplace semua karakter fungsi itu tidak bisa kita gunakan, karena ya itu tadi, dia hanya bisa mereplace 1 karakter saja.

Disini kita akan coba mengatasi masalah tersebut, saya membuat fungsi sederhana yang dapat digunakan untuk mereplace semua karakter. Fungsiya kurang lebih seperti ini

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.split(search).join(replacement);
};

Untuk penggunaannya cukup ketikan sintak seperti ini

dataku.replaceAll(search, replacement);

Agar mudah dipahami kita akan buat kasus sederhana, misal kita punya data angka seratus juta (100.000.000) pada data ini terdapat sebuah titik, titik tersebut kita tidak ingin kita simpan kedalam database. Otomatis untuk melakukan hal itu kita perlu melakukan filter terlebih dahulu agar data yang nanti disimpan menjadi seperti ini (100000000), tanpa titik.

Disini kita akan coba implementasikan fungsi replaceAll() yang saya buat untuk memfilter data tersebut sehingga titik pada data tersebut hilang.

Untuk sintak lengkapnya kurang lebih seperti ini


Untuk hasilnya kamu bisa cek lewat console.log() atau alert. Mungkin postingan ini saya cukupkan sampai sini dulu, semoga bermanfaat yah :)

Tschuss!!!