Optimasi loading web dengan combine+minify file css dan js (codeigniter)

[Codeigniter] Optimasi loading web dengan minify library - Pada pembahasan sebelumnya saya telah membahas bagaimana cara optimasi load image, nah pada pembahasan kali ini saya akan membahas bagaimana cara optimasi loading web dengan cara menggabungkan + meminimalkan file css dan js kita. Jadi cara ini akan menggabungkan semua file css anda menjadi satu file css dan file js menjadi satu file, lalu habis file css di gabung barulah file css dan js itu di minimalkan sehingga file akan menjadi sangat kecil dan web akan sangat cepat pada saat akan meload style dan js-nya.

Cara ini aku dapat dari teman facebook ku, om Tirta Keniten :) , waktu itu dia nyaranin 1 library php bernama minify. Library ini mempunyai kemampuan menggabungkan+meminimalkan file css dan js.

Kelebihan dari library ini seperti yang sudah di jelaskan sebelumnya, yaitu dapat mempercepat load web anda dengan cara menggabungkan+meminimalkan file css dan js anda.

Berikut andalah screen shot file yang sudah di combine+minify :


Styles.min.css merupakan hasil dari gabungan semua file css yang ada di folder css dan script.min.js merupakan hasil dari gabungan semua file yang ada di folder js. Pada gambar di atas saya menggabungkan 2 file css dan 2 file js. Berikut adalah gambar file js dan css sebelum di combine+minify.




Mungkin tanpa banyak basabasi mari kita lanjut ke praktiknya saja. Pada pembahasan kali ini saya akan menerapkan library minify ini pada codeigniter.

Spesifikasi sourcecode yang ku pakai :
Pada library yang di buat oleh om slawomir sudah terdapat libralies + contoh penggunaannya, anda tinggal lihat-lihat saja.

Sedikit penjelasan, abaikan file controllernya. Anda lihat file view bagian kode :

<?php
 $this->minify->css(array('browser-specific.css', 'style.css'));
 echo $this->minify->deploy_css();
 $this->minify->js(array('helpers.js', 'jqModal.js'));
 echo $this->minify->deploy_js(FALSE, 'custom_js_name.min.js');
?>

Library akan membaca file css pada direktori assets/css, dan akan membaca file js pada assets/js. jadi jika pada saat anda menggunakan library ini direktori asset anda harus seperti ini :


Semua js di letakan di assets/js dan semua file css di letakan di assets/css.

Default-nya nama output yang di hasilkan dari library ini adalah script.min.js atau script.min.css. Tetapi anda juga dapat memodifikasi nama file output yang nanti akan di hasilkan dengan cara :

//untuk css
echo $this->minify->deploy_css(FALSE, 'custom_css_name.min.js');

//untuk js
echo $this->minify->deploy_js(FALSE, 'custom_js_name.min.js');
?>

Mudahkan :) , jika bingung komen saja yah :)
Mungkin saya cukupkan sekian untuk pembahasan kali ini, Terimakasih :)

Referensi : http://www.kang-cahya.com/2015/12/optimasi-loading-web-dengan-combine-minify-file-css-dan-js.html
Continue Reading...
 

Bagaimana Cara Optimasi Image Di Web Menggunakan jQuery ? - Ada beberapa faktor yang membuat performa load web kita menjadi lama, di luar css dan js, anda satu hal yang membuat load web menjadi lama, yaitu media khususnya gambar, karena web sekarang pasti tidak akan bisa jauh dengan penggunakan gambar. Terkadang kalau kita tidak membatasi batas maksimum gambar yang harus di unggah pada sebuah web itu akan menjadi masalah. Selain menimbulkan space disk yang akan cepat habis, load web pun akan menjadi lambat. Mungkin untuk urusan space tidak terlalu di masalahkan, karena di jaman sekarang untuk membeli space disk sangat lah murah di bandingkan dulu. Yang jadi masalah utama sekarang adalah di load web akan menjadi berat.

Kemarin-kemarin saya baru dapet ilmu baru dari teman saya untuk masalah ini. Lalu teman saya menyarankan untuk memakai sebuah plugin jQuery bernama lazy.

Lazy adalah plugin pemuat konten untuk jQuery. Dia cepat, kaya fitur, extensible dan ringan. Ini dirancang untuk mempercepat pemuatan (loading) halaman dan mengurangi trafik lalulintas ke pengguna dengan cara memuat konten yang sedang tampil didepan mata saja.

Fitur :
  • Retina support
  • Fully open source
  • Scroll in all directions
  • Different callbacks
  • Implement custom loaders
  • Image placeholders
  • Use effects
  • Throttled
  • Public functions
  • Delayed loading
  • Many instances
  • Use inside containers
  • Event support
  • Mighty configuration
Pertama-tama, anda download lazy jQuery terlebih dahulu (disini). Jika lazy sudah selesai di unduh, anda dapat menginstal lazy dengan cara yang berbeda. Pilih cara yang Anda di bawah ini.

Host sendiri

<script type="text/javascript" src="jquery.lazy.min.js"></script>

CDN

<!-- cdnjs -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/0.6.4/jquery.lazy.min.js"></script>

<!-- jsDeliver -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/0.6.4/jquery.lazy.min.js"></script>

Package Managers

$ npm install jquery-lazy
$ bower install jquery-lazy

Untuk mengimplementasikan lazy sangatlah mudah, anda cukup menambahkan nama class pada tag image html anda.

HTML

<!-- load images the lazy way -->
<img class="lazy" data-src="path/to/image.jpg" />

<!-- load background images of other element types -->
<div class="lazy" data-src="path/to/image.jpg"></div>

JAVASCRIPT

$(function() {
    $('.lazy').lazy();
});


Vielen Dank :)
Tschüss, Bis Bald :)

Continue Reading...
 
Dear all coder seantero jagad raya. Kemarin Kang Cahya sudah membahas mengenai Grocery Crud, yaitu sebuah pugins codeigniter untuk menampilkan data dari database, lengkap dengan proses CRUD-nya. Grocery Crud ini sangat powerfull dan cukup membantu untuk membuat sebuah aplikasi CRUD dengan cepat. Pada form insert/update juga sudah dilakukan rules dan validasi secara otomatis (sesuai rules yang ditetapkan dari database).

Pada tulisan singkat kali ini, saya akan membahas tentang callback pada Grocery Crud dan kasus-kasus umum yang bakal terjadi dalam dunia programming.  Ada beberapa tipe callback pada Grocery Crud, antara lain :

  • Callback Colum
  • Callback Delete
  • Callback After (delete, insert, update, upload)
  • Callback Before (delete, insert, update, upload)
  • Callback add field
  • Callback edit field
  • Callback Insert / Callback Update / Callback Delete

Fungsi callback ini berfungsi untuk melakukan escaping terhadap suatu proses operasi dan memasukkan logika sebelum meneruskan ke proses akhir. Grocery Crud membentuk form input data secara otomatis, jika kita hanya memiliki data sederhana, maka tidak ada masalah untuk menggunakan form yang dibentuk oleh Grocery Crud. Namun jika kita membutuhkan modifikasi terhadap data yang akan dimasukkan ke database, maka akan timbul kesulitan baru.
Marilah kita bahas case berikut ini…...
Terdapat sebuah form untuk mengisikan data dari tabel users. Berikut adalah struktur table pada users:
ColumnTypeLength
idint11
group_idint11
usernameVarchar100
passwordVarchar150
emailvarchar100
first_namevarchar50
last_namevarchar50
created_atDate
updated_atDate

Dan di bawah ini adalah struktur table pada tabel usergroup:
ColumnTypeLength
idint11
group_namevarchar20
descriptionVarchar200

Column id adalah colum type int, merupakan Primary Key dari tabel tersebut. Set autoincrement dari column id ini dengan nilai true.

Sekarang kita masuk ke bagian peng-coding-an. Pada tutorial ini sudah saya sertakan sebuah aplikasi yang dilengkapi dengan Grocery Crud + Code Igniter + SB Admin template. Jadi kita hanya focus di coding nya saja.

Tambahkan fungsi berikut pada controller latihan:

public function user_management(){
 try{
  $crud = new grocery_CRUD();
  $crud->set_theme('flexigrid');
  $crud->set_table('users');
  $crud->set_subject('Users');
  
  $data['judul'] = 'Manajemen User';
  $data['output'] = $crud->render();
  $this->load->view('main_view', $data);
 }catch(Exception $e){
  show_error($e->getMessage().' --- '.$e->getTraceAsString());
 }
}

Jika sudah selesai menambahkan coding di atas, jalankanlah aplikasi di web browser. Kalau di tempat saya, link untuk menjalankan aplikasi tersebut adalah:

http://localhost:8080/codeignitergrocerycrud/index.php/latihan/user_management

Kemungkinan link akan berbeda, sesuai dengan konfigurasi port server di server apache yang terinstall di computer. Jika berhasil, maka akan muncul seperti gambar di bawah ini:

Grocery Crud Callback Tutorial


Jika di klik tombol Add User, maka akan muncul form input data seperti gambar di bawah:



Sebenarnya pada tahapan ini, Grocery Crud sudah dapat bekerja dan dapat memasukkan data ke dalam tabel. Tetapi ada beberapa hal yang membutuhkan kustomisasi agar aplikasi dapat berjalan dengan bagus. Pada form tersebut, lihatlah input Group id yang berupa textbox. Kenyataannya yang kita inginkan adalah Group id berupa select combobox, yang dipopulasikan dari sebuah table lain. Untuk itu kita harus melakukan relasi dari tabel users ke tabel usergroup.

Untuk melakukan relation dari tabel users ke tabel usergroup, tambahkanlah script berikut pada fungsi user_management, posisi script tidak boleh setelah baris render dari Grocery Crud, harus sebelumnya.

$crud->set_relation('group_id','usergroup','group_name');

Kemudian jalankan lagi atau refresh halaman web pada browser. Maka field group_id akan berubah dari textbox menjadi select combobox. Lihat pada gambar di bawah.



Masalah selanjutnya adalah username, sebuah aplikasi yang baik, harus mampu melakukan check data apakah data yang diinput sudah ada di database atau tidak. Untuk itu kita harus melakukan callback terhadap field username. Mengintip database, apakah input yang di post mempunyai value yang sama atau tidak terhadap data yang sudah ada. Jika data sudah ada, maka kita cegah proses penyimpanan data dan melempar pesan error kepada user.

Untuk mewujudkan hal tersebut, maka kita buat dulu sebuah fungsi untuk melakukan pengecekan ke database. Misal nama fungsinya adalah: cek_user_before_user_save,

function cek_user_before_user_save($post_array){
 $i = $this->db->where('username', $post_array['username'])->get('users')->num_rows();
 if($i == 0 ){
  return true;
 }else{
  return false;
 }
}

$post_array yang di passing ke dalam fungsi itu adalah post data pada form input user yang di generate oleh Grocery Crud. Untuk mengaksesnya sama dengan mengakses data array pada php. Misalkan nama field kita adalah field username, maka untuk mendapatkan nilai username yang di post oleh form adalah sebagai berikut: $post_ array['username']

Bagaimana memanggil fungsi ini? Untuk memanggil fungsi ini, maka kita harus melakukan callback sebelum data diinpute ke database. Pada kasus ini kita gunakan callback before insert yang telah disediakan oleh Grocery Crud.

Script umum dari callback before insert adalah:

$crud->callback_before_insert(array($this,’nama fungsi callback nya….’));

Untuk lebih lengkapnya, fungsi user_management setelah ditambahkan perintah callback dan custom error message adalah sebagai berikut:

public function user_management(){
 try{
  $crud = new grocery_CRUD();
  $crud->set_lang_string('insert_error','Username sudah ada di database');
  $crud->set_theme('flexigrid');
  $crud->set_table('users');
  $crud->set_subject('Users');
  $crud->set_relation('group_id','usergroup','group_name');
  $crud->callback_before_insert(array($this,'cek_user_before_user_save'));
  
  $data['judul'] = 'Manajemen User';
  $data['output'] = $crud->render();
  $this->load->view('main_view', $data);
 }catch(Exception $e){
  show_error($e->getMessage().' --- '.$e->getTraceAsString());
 }
}

Perhatikan script tersebut, ada penambahan perintah set_lang_string dan callback_before_insert. Perintah set_lang_string adalah perintah untuk mengubah isi pesan pada saat state tertentu terjadi. Dalam hal ini yang kita ingin ubah isi pesannya adalah pada saat state insert_error (ada berbagai macam state pada Grocery Crud, bukan hanya insert_error saja). Sekarang coba refresh kembali page di browser, kemudian masukkan sebuah username yang value nya identic dengan username yang ada pada database. Pada database saya, sudah ada username dengan value admin.



Pada kasus ini, berlaku juga untuk state update field username. Post data update juga harus dilakukan pengecekan, apakah sudah ada di database atau tidak. Untuk itu kita tambah satu perintah callback lagi, yaitu callback_before_update. Selengkapnya dapat anda download pada link yang telah disediakan.

Setelah username, field selanjutnya yang membutuhkan perhatian khusus adalah field password. Beberapa hal yang perlu diperhatikan untuk field password ini adalah sebagai berikut :

  • Field password disimpan terenkripsi di database
  • Password harus diuji dengan length tertentu.
  • Pada saat input data, value dari password tidak terlihat.
  • Pada saat update data, field password dibiarkan kosong, jika password diubah, maka ada post data password untuk di masukkan ke database. Jika password tidak diubah atau dibiarkan kosong, maka tidak ada post data password, dan password lama tidak diupdate.

Untuk menyelesaikan bagian nomor 1, maka kita harus edit sedikit fungsi cek_user_before_save, lihat gambar di bawah:



Ganti bagian yang saya kotakin dengan script ini :

$this->load->library('encrypt');
$key = '!@#$%^&*()_+QWERTYUIOP';
$post_array['password'] = $this->encrypt->encode($post_array['password'], $key);
return $post_array;

sehingga fungsi cek_user_before_user_save menjadi seperti gambar di bawah ini:



Fungsi tersebut akan mengembalikan post data password yang sudah di encode. Saya meminjam library encrypt dari codeigniter. Lakukan hal yang sama pada fungsi cek_user_before_user_update. Jika sudah selesai, maka pada datagrid user akan menjadi seperti gambar di bawah ini:



Permasalahan selanjutnya adalah pada saat kita melakukan edit pada user. Jika kita klik tombol edit, maka akan muncul form edit seperti berikut ini:



Perhatikan pada bagian password. Bentuk password adalah bentuk yang telah di enkripsi, jika kita klik button Update changes, maka password akan disimpan kembali dalam bentuk terenkrip dikarenakan adanya proses callback saat melakukan update.

Jadi prosesnya seperti ini:
Password awal (plain text) -> save (password sudah di encrypt) -> buka form update (password ter-encrypt ditampilkan) -> update changes (password ter-encrypt di encrypt lagi)
Jika proses ini yang terjadi, maka setiap melakukan update data user, maka password akan berubah.

Bagaimana mengantisipasi hal ini? Mudah saja, Grocery Crud menyediakan apa yang anda butuhkan dengan callback. Pada proses update data user yang mempunyai field password, maka harus melalui langkah-langkah sebagai berikut:

  • Pada saat membuka form update, biarkan field password kosong.
  • Pada saat melakukan update, gunakan callback dengan melakukan cek pada post data password, jika post data kosong, artinya column password tidak di update, maka kita lakukan unset terhadap post data password. Jika di unset, maka grocery crud tidak akan melakukan update terhadap password.

Untuk langkah 1, pada fungsi user_management, saya tambahkan baris berikut:

$crud->change_field_type('password', 'password');
$crud->callback_edit_field('password',array($this,'set_empty_password_field'));
$crud->callback_add_field('password',array($this,'set_empty_password_field'));

Kemudian tambahkan fungsi set_empty_password_field:

function set_empty_password_field(){
 return "<input name="password" type="password" value="" />";
}

Langkah 1 sudah selesai, pada tahapan ini, jika semuanya sudah benar, maka field password akan bernilai string kosong jika kita membuka form insert/update. Oya, di atas ada perintah change_field_type, ini berfungsi untuk mengubah type input dari input text biasa menjadi input password. Coba jalankan kembali aplikasi ini, maka terjadi perubahan pada grid, field password akan berganti menjadi tanda bintang. Kemudian jika kita masuk ke insert/update form, kemudian kita ketik pada field password, maka akan muncul karakter “dot” untuk menyamarkan value password.

Selanjutnya, untuk langkah ke 2, saya hanya akan menambahkan decision If untuk melakukan pengecekan apakah field password empty atau tidak. Penambahan ini saya sisipkan ke dalam fungsi callback cek_user_before_user_update.

Nah, sekarang tinggal langkah terakhir untuk menyelesaikan case user_management ini, yaitu tanggal record dibuat dan tanggal record di update. Jika kita lihat kembali pada form insert atau form update, maka ada field created_at dan updated_at. Field ini perlu kita sembunyikan agar bukan user yang mengisikan data ini. Data ini hanya akan tercatat pada saat user melakukan insert sebuah record (created_at) dan pada saat user melakukan update pada sebuah record (updated_at).

Aplikasi hanya akan menampung variable created_at hanya pada statement insert. Dan hanya dapat menampung variable updated_at hanya pada statement update. Untuk itu, kita akan tambahkan perintah berikut ini pada function user_management :

$crud->unset_add_fields('updated_at');
$crud->unset_edit_fields('created_at');
$crud->field_type('updated_at','invisible');
$crud->field_type('created_at','invisible');

Setelah selesai, fungsi user_management akan menjadi seperti ini:



Silahkan download code dari artikel ini di link berikut:


Mohon saran dan kritikannya.
Continue Reading...
 
[Ebook] Belajar bahasa pemrogramman golang dari nol

Golang (atau Go) adalah bahasa pemrograman baru, yang mulai dilirik oleh para developer karena kelebihan-kelebihan yang dimilikinya. Sudah banyak perusahaan besar yang menggunakan bahasa ini untuk produk-produk mereka hingga di level production.

Buku ini merupakan salah satu dari sekian banyak referensi yang bisa digunakan untuk belajar pemrograman Golang. Hal yang disampaikan disini benar-benar dasar, dengan pembelajaran mulai dari 0. Diharapkan dengan adanya buku ini kawan-kawan bisa lebih paham dalam memahami seperti apa sih Golang itu.

Ebook Dasar Pemrograman Golang gratis untuk disebarluaskan secara bebas, selama tidak melanggar aturan lisensi GNU LGPL 2.1.

Source code contoh-contoh program bisa diunduh di Github. Dianjurkan untuk tidak copy-paste dari source code dalam belajar, usahakan untuk menulis sendiri kode program, agar cepat terbiasa dengan bahasa Golang, - #Ebook Berbahasa Indonesia.


Continue Reading...
 
Apa itu Cross-Origin Resource Sharing (CORS) Dan Bagaimana Menggunakannya ?
Apa itu Cross-Origin Resource Sharing (CORS) Dan Bagaimana Menggunakannya ? - CORS (Cross-Origin Resource Sharing) adalah protokol yang dibangun di atas HTTP untuk memungkinkan Javascript pada halaman yang berasal dari satu situs untuk mengakses metode di situs lain.

CORS merupakan protokol penghubung antara browser dan web-service yang memberitahu browser bahwa itu adalah "OK" untuk mengeksekusi kode Javascript dari panggilan lintas domain.

Jadi intinya anda bisa transfer data antara domain. Metode ini mirip seperti API (application Programming Interface), anda bisa menggunakan json sebagai service-nya. Tentunya antara keduanya berdeda (api ataupun cors).
Jika kita menggunakan API biasanya anda harus mendapatkan sebuah token agar anda bisa menggunakan API tersebut, token itu berfungnsi sebagai kunci akses yang di berikan untuk mengakses sebuah API.
*) maaf kalau penjelasanku ini salah hehe ,silahkan ralat via komentar :)

Tetapi jika menggunakan CORS anda hanya cukup mengatur Access-Control-Allow-Origin yang biasanya di letakan di bagian header.
*) maaf kalau penjelasanku ini salah hehe ,silahkan ralat via komentar :)

Pada pembahasan kali ini saya ingin coba berbagi tentang bagaimana cara mengatur sebuah cors.

Mengatur CORS agar semua bisa mengaksesnya

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST

Mengatur CORS agar hanya beberapa yang dapat mengaksesnya

Access-Control-Allow-Origin: http://nama_domain.com
Access-Control-Allow-Methods: GET, POST

Letakan kode di atas di bagian header file kodingan anda :)

Contoh :

header("Access-Control-Allow-Origin: *"); 
header('Access-Control-Allow-Methods: GET, POST');

Mungkin cukup sekian untuk pembahasan kali ini, mohon maaf jika ada salah didalam teori yang di sampaikan. Harap di ma'lum, karena saya juga masih belajar sama seperti anda hehe :)


Referensi

Continue Reading...
Previous PostOlder Posts Home