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.