Sabtu, 19 September 2015

PHP: Passing Data Array/Object PHP ke Javascript Function

Ada kalanya kita perlu untuk mempassing data dengan tipe object dari script PHP ke Javascipt function. Misalkan kita ingin menampilkan informasi mahasiswa dengan menggunakan modal. Modal tersebut akan muncul ketika kita memanggil fungsi javascript dengan mempassing object data mahasiswa. Data mahasiswa ini misalkan kita dapatkan dari basis data. Triknya sangat simple untuk melakukan ini.
  1. Pertama kita harus mengkonversi tipe data object menjadi associative array.
  2. Setelah jadi associative array, kita encode dengan menggunakan fungsi json_encode dengan demikian kita bisa menggunakan JSON.parse() untuk men-decode data yang kita passing.
  3. Menggunakan function htmlspecialchars($data_json_encode, ENT_QUOTES), untuk melakukan escape string quotes dari hasil json_encode(). 
  4. Setelah itu, kita bisa menggunakan JSON.parse() pada fungsi javascript kita.

<?php
$arr = array(
    'nama' => 'Yanto',
    'umur' => 23,
    'alamat' => 'Jakarta'
);
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Foo</title>
    </head>
    <body>
        Cek:
        <?php echo json_encode($arr); ?>
        <br> 
        <a href="#" 
           onClick="foo('<?php echo htmlspecialchars(json_encode($arr), ENT_QUOTES); ?>')">
            Klik Me!
        </a>
    </body>
    <script type="text/javascript">
        function foo(data) {
            json = JSON.parse(data);
            console.log("Nama:" + json.nama);
            console.log("Umur:" + json.umur);
            console.log("Alamat:" + json.alamat);
        }
    </script>
</html>

Selamat mencoba.

Kamis, 10 September 2015

Memperbaiki Ugly Font Pada Netbeans Linux (Ubuntu)

Netbeans adalah IDE yang saya gunakan untuk pekerjaan sehari-hari baik untuk mengerjakan project Web atau JAVA. Ini adalah IDE favorit saya karena memiliki banyak fitur yang sangat powerful. Netbeans adalah IDE cross platform jadi bisa digunakan di lingkungan Windows ataupun Linux.

Jika kita kita menggunakan Netbeans pada lingkungan Linux seperti Ubuntu, secara default kita akan mendapatkan Netbeans dengan tampilan render font yang kelihatan sangat jelek. Jika anda menginginkan tampilan font yang lebih baik, ada baiknya anda sedikit meng-"hack" beberapa konfigurasi Netbeans anda. Saya menggunakan Linux Mint 17 dan Netbeans 8.0.2. Silahkan ikuti jalankan perintah berikut secara berurutan.


sudo apt-get install libfreetype6
sudo add-apt-repository ppa:no1wantdthisname/ppa
sudo apt-get update
sudo apt-get install fontconfig-infinality
sudo rm /etc/fonts/conf.avail/52-infinality.conf
sudo ln -s /etc/fonts/infinality/infinality.conf /etc/fonts/conf.avail/52-infinality.conf
sudo /etc/fonts/infinality/infctl.sh setstyle linux
sudo add-apt-repository ppa:no1wantdthisname/openjdk-fontfix
sudo apt-get update
sudo apt-get install openjdk-7-jdk
Buka netbeans.conf pada direktori-installasi/etc. Jika anda melakukan installasi dengan menggunakan script installer netbeans-x.x.x-x-linux.sh, secara default direktori instalasi ada di /usr/local/netbeans-x.x.x. Dalam hal ini netbeans.conf saya ada di /usr/local/netbeans-8.0.2/etc. Untuk memastikan anda bisa menggunakan perintah berikut.

sudo find / -name netbeans 2> /dev/null
Buka netbeans.conf anda dan sisipkan baris berikut pada netbeans_default_options

-J-Dawt.useSystemAAFontSettings=lcd -J-Dsun.java2d.xrender=true"
Terakhir, pada netbeans_jdkhome edit menjadi serperti berikut

netbeans_jdkhome="/usr/lib/jvm/java-1.7.0-openjdk-amd64"
Berikut merupakan netbeans.conf saya yang telah dimodifikasi.

# Default locations of userdir and cachedir:
# (http://wiki.netbeans.org/FaqWhatIsUserdir)
#
# On Windows ${DEFAULT_USERDIR_ROOT} will be replaced by the launcher
# with "\NetBeans" where  is user's
# value of "AppData" key in Windows Registry under
# "HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\Shell Folders"
# and ${DEFAULT_CACHEDIR_ROOT} will be replaced by the launcher
# with "\NetBeans\Cache" where  is user's
# value of "Local AppData" key in Windows Registry under
# "HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\Shell Folders"
#
# On Mac ${DEFAULT_USERDIR_ROOT} will be replaced by the launcher
# with "~/Library/Application Support/NetBeans" and
# ${DEFAULT_CACHEDIR_ROOT} with "~/Library/Caches/NetBeans"
#
# On other systems ${DEFAULT_USERDIR_ROOT} will be replaced by the launcher
# with "~/.netbeans" and ${DEFAULT_CACHEDIR_ROOT} with "~/.cache/netbeans"
#
# You can also use ${HOME} variable which will be replaced with
# user.home JVM system property value. This variable is valid only in
# netbeans_default_userdir and netbeans_default_cachedir properties.
#
# NOTE: If you specify a non-default userdir path on command line
# (--userdir option) and don't specify a cachedir path (--cachedir option),
# cachedir will be in "/var/cache".
#
# Cachedir must be different from userdir. The same cachedir and userdir
# would cause problems.
#
netbeans_default_userdir="${DEFAULT_USERDIR_ROOT}/8.0.2"
netbeans_default_cachedir="${DEFAULT_CACHEDIR_ROOT}/8.0.2"

# Options used by NetBeans launcher by default:
# (can be overridden by explicit command line switches)
#
# Note that default -Xmx is selected for you automatically.
# You can find these values in var/log/messages.log file in your userdir.
# The automatically selected value can be overridden by specifying -J-Xmx
# here or on the command line.
#
# If you specify the heap size explicitly, you may also want to enable
# Concurrent Mark & Sweep garbage collector.
# (see http://wiki.netbeans.org/FaqGCPauses)
#
netbeans_default_options="-J-Dawt.useSystemAAFontSettings=lcd -J-Dsun.java2d.xrender=false -J-client -J-Xss2m -J-Xms32m -J-XX:PermSize=32m -J-Dapple.laf.useScreenMenuBar=true -J-Dapple.awt.graphics.UseQuartz=true -J-Dsun.java2d.noddraw=true -J-Dsun.java2d.dpiaware=true -J-Dsun.zip.disableMemoryMapping=true"

# Default location of JDK:
# (set by installer or commented out if launcher should decide)
#
# It can be overridden on command line by using --jdkhome 
# Be careful when changing jdkhome.
# There are two NetBeans launchers for Windows (32-bit and 64-bit) and
# installer points to one of those in the NetBeans application shortcut 
# based on the Java version selected at installation time.
#
netbeans_jdkhome="/usr/lib/jvm/java-1.7.0-openjdk-amd64"

# Additional module clusters:
# using ${path.separator} (';' on Windows or ':' on Unix):
#
#netbeans_extraclusters="/absolute/path/to/cluster1:/absolute/path/to/cluster2"

Restart Netbeans anda, anda akan mendapatkan tampilan font yang lebih baik.

Memperbaiki font IDE
Pada Netbenas pilih Tools -> Plugins -> Settings -> Add kemudian tambahkan nama provider baru dan isikan URL berikut
http://java-swing-ayatana.googlecode.com/files/netbeans-catalog.xml
Kembali ke tab Available Plugins dan cari dan install plugin dengan nama Java Ayatana. Anda akan diminta untuk merestart Nebeans. Setelah restart, tampilan IDE anda akan lebih baik. Berikut merupakan tampilan Netbeans yang sudah dikostumasi.

Minggu, 19 Mei 2013

Cara Mengenkripsi URL

Dalam sebuah aplikasi berbasis web, terkadang anda perlu mengenkripsi URL yang mungkin mengandung parameter dan nilai di dalamnya (bisanya digunakan saat menggunakan method GET). Ada banyak cara untuk mengenkripsi URL. Anda bisa menggunakan berbagai algoritma yang ada. Yang umum digunakan biasanya base64_encode  - base64_decode. Namun apabila anda menggunakan framework Codeigniter fungsi tersebut tidak bisa anda gunakan begitu saja karena akan menghasilkan karakter '=' pada URL anda, yang tidak diperbolehkan dalam CodeIgniter (kecuali anda mengubah konfigurasi dalam config.php). Kenapa alasannya tidak diperbolehkan? Saya juga kurang begitu tahu.

Jika anda tidak begitu fokus akan keamanan dan hanya ingin menyumbunyikan parameter atau value dalam URL anda, anda dapat menggunakan class yang saya dapatkan dari hasil googling berikut. Sayangnya saya tidak mengetahui siapa authornya secara pasti, jadi saya tidak bisa memberikan kredit dalam tulisan saya ini.
<?php 
class Encryption {
    var $skey   = "coretanasha21dotblogspotdotcom"; // you can change it

    public  function safe_b64encode($string) {

        $data = base64_encode($string);
        $data = str_replace(array('+','/','='),array('-','_',''),$data);
        return $data;
    }

    public function safe_b64decode($string) {
        $data = str_replace(array('-','_'),array('+','/'),$string);
        $mod4 = strlen($data) % 4;
        if ($mod4) {
            $data .= substr('====', $mod4);
        }
        return base64_decode($data);
    }

    public  function encode($value){ 

        if(!$value){return false;}
        $text = $value;
        $iv_size = mcrypt_get_iv_size(MCRYPT_RIJNDAEL_256, MCRYPT_MODE_ECB);
        $iv = mcrypt_create_iv($iv_size, MCRYPT_RAND);
        $crypttext = mcrypt_encrypt(MCRYPT_RIJNDAEL_256, $this->skey, $text, MCRYPT_MODE_ECB, $iv);
        return trim($this->safe_b64encode($crypttext)); 
    }

    public function decode($value){

        if(!$value){return false;}
        $crypttext = $this->safe_b64decode($value); 
        $iv_size = mcrypt_get_iv_size(MCRYPT_RIJNDAEL_256, MCRYPT_MODE_ECB);
        $iv = mcrypt_create_iv($iv_size, MCRYPT_RAND);
        $decrypttext = mcrypt_decrypt(MCRYPT_RIJNDAEL_256, $this->skey, $crypttext, MCRYPT_MODE_ECB, $iv);
        return trim($decrypttext);
    }
}
Untuk mengenkripsi URL anda tuliskan:
$this->encryption->encode($url); 
Dan untuk mendekripsi URL anda kembali tuliskan:
$this->encryption->decode($url);

Selamat mencoba.

NB: Anda bisa mengubah $skey sesuai dengan keinginan anda.

Membuat Avatar Dengan Bentuk Lingkaran Dengan CSS

Jika anda sedang menggunakan Google+  maka anda dapat melihat avatar anda berbentuk lingkarang, bukan persegi atau persegi empat. Jadi bagaimana cara membuatnya? Dengan CSS3 anda bisa membuatnya dengan sangat mudah. Cukup dengan property border-radius


Pertama tentukan terlebih dahulu lebar dan tinggi dari avatar yang anda gunakan. Kemudian tambahkan property border-radius  sebesar setengah dari lebar atau tinggi dari gambar avatar yang anda gunakan. Misalkan anda memiliki gambar avatar dengan ukuran 300px X 300 px. Jadi anda hanya perlu menambahkan property border-radius dengan ukuran 150px untuk setiap sudutnya.

.avatar

border-radius: 150px; 
-moz-border-radius: 150px; 
-webkit-border-radius: 150px; 


Selamat Mencoba

Jadi, Anime Apa yang Lagi HOT Saat Ini?


Apa anda juga penggemar Anime? Saya bukan penggermar berat anime. Saya hanya menonton Anime yang memang sreek dengan saya. Ada beberapa Anime yang memang saya sangat sukai karena saya memiliki alasan mengapa saya menyukainya. Nah baru-baru ini ada Anime baru, judulnya Shingeki No Kyojin atau Attack On Titan. Ini adalah adalah salah satu Anime paling fantastik yang pernah saya tonton. Setiap episodenya memberikan ketegangan bagi saya.

Singkatnya Anime ini menceritakan tentang umat manusia yang mencoba bertahan hidup ditengah keputusasaan kerena hidup dalam bayang-bayang para Titan (raksasa). Jumlah umat manusia yang kian menurun karena dimangsa oleh para raksasa. Manusia hidup di dalam tembok yang mereka bangun, namun hal itu tidak menghentikan para raksasa yang memangsa mereka.

Anime ini memperlihatkan sisi gelap dalam kehidupan, ketika manusia kehilangan kesempatan hidup dan harapan yang hilang. Anda tertarik menontonnya? Just Google it!