New Blog Site Has Launched

akhir pekan kemarin, alhamdulillah, saya bisa meluncurkan blog baru saya di alamat http://habibillah.kalicode.com/ http://pujangga.kalicode.com. Blog ini bagian (sub domain) dari Kalicode.com.

Bersamaan dengan blog tersebut saya juga merilis Pujangga, sebuah theme untuk Pelican. Pelican ini adalah salah satu dari sekian banyak static blog engine generator yang berbasiskan Python.

Kedepan, harapannya bisa menulis lebih banyak tentang masalah teknik dan teknologi informasi di blog tersebut. Sedangkan blog ini akan lebih banyak berisi hal-hal lain diluar masalah teknik dan teknologi informasi. Happy blogging…!

Iklan

Creating Simple Jquery Modal Container Plugins Based On Bootrap And Bootstrap Modal

Much of web applications use modal dialog or pop up message on several page. So de idea is to make creating modal container at once and use it anywhere. It’s easy as just pass the content to the plugins.

Firstly, add required JavaScript and CSS libraries to HTML page.

<!doctype html>
<html>
<head>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
   <link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal-bs3patch.css" />
   <link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css" />

   <script src="http://code.jQuery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript"></script>
   <script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js" type="text/javascript"></script>
   <script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js" type="text/javascript"></script>

   <script src="assets/js/generic-modal-container.js" type="text/javascript"></script>
</head>
...
...
<a href="#" class="show-modal-dialog btn btn-primary">Show Modal</a>
&nbsp;
<a href="#" class="show-nested-modal-dialog btn btn-primary">Show Nested Modal</a>

I use libraries that commonly used over the world.Those are Jquery, Twitter bootstrap, and bootstrap Modal. And I will write my plugins on generic-modal-container.js file. Look at code below for the complete plugins.

(function ($) {
    $.fn.showModal = function (header, content, callback) {
        var HTML = '<div class="modal fade generic-modal">' +
            '  <div class="modal-dialog">' +
            '    <div class="modal-content">' +
            '      <div class="modal-header">' +
            '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
            '        <h4 class="modal-title">' + header +
            '        </h4>' +
            '      </div>' +
            '      <div class="modal-body">' + content +
            '      </div>' +
            '      <div class="modal-footer">' +
            '        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
            '        <button type="button" class="btn btn-primary ok-button-dialog">Ok</button>' +
            '      </div>' +
            '   </div><!-- /.modal-content -->' +
            '  </div><!-- /.modal-dialog -->' +
            '</div><!-- /.modal -->';
        
        var container = $('<div></div>').html(HTML);
        var newInstance = jQuery.extend(true, {}, container);
        newInstance.find('.ok-button-dialog').bind('click', function() {
            callback();
        });
        var modalElement = newInstance.find('.generic-modal');
	modalElement.modal();
        return modalElement;
    }
}(jQuery));

First variable define bootstrap modal, and callback function will called when Ok button clicked. I can add more option to modify button dialog label and show/hide Ok button when used on alert message.

Next, I just call that jquery plugin when I need to show a modal. The contents of modal also can be filled by Ajax request. Here how to use that plugins.

$(document).ready(function() {
    $('body').on('click', '.show-modal-dialog', function() {
        //text content
        var modalTitle = 'This is modal title';
        var message = 'This is text message.';
        var modal = $(this).showModal(modalTitle, message, function() {
            alert('Ok button clicked');
            modal.modal('hide');
        });
    });
});

var n = 0;
$(document).ready(function () {
    $('body').on('click', '.show-nested-modal-dialog', function () {
        //nested modal with html content
        var modalTitle = 'This is modal title';
        var message = '<a href="#" class="show-nested-modal-dialog btn btn-default">Show Modal ' + (++n) + '</a>';
        var modal = $(this).showModal(modalTitle, message, function() {
            var alertModal = $(this).showModal('Alert Message', 'Ok button clicked', function() {
                alertModal.modal('hide');
            });
        });
    });
});

Look at on JSFiddle for demo: http://jsfiddle.net/yFLK6/13/

How To Trace And profiling Your PHP Code Performance?

Problem

This morning I got problem that performance of my application going slowly. This case just occur at this moment, not before. The application just worked yesterday and the days before.

Well, It’s just on development phase and it scared me. If the application has worst performance on development, how can I step forward to production?

Getting a Solution

Firstly, I check the error message. PHP and Apache log file to ensure there is a code failures that guide me to fix this problem. All show no error reported except just “Application timeout”. When I have no clue what pieces of code going wrong and work unexpected, I have an idea: “It’s time to profiling my code. Maybe there is unstopped loops that I don’t know where it is.”

So I going to ensure my PHP XDebug running well. Here PHP.ini configation for XDebug:

[xdebug]
xdebug.remote_enable = On
xdebug.profiler_enable = On
xdebug.profiler_enable_trigger = On
xdebug.profiler_output_name = callgrind.out.%t.%p
xdebug.profiler_output_dir = "C:/standalone-apps/wamp/tmp"
xdebug.var_display_max_depth = -1
xdebug.var_display_max_children = -1
xdebug.var_display_max_data = -1
xdebug.auto_profile = 1

And PHP Info show me that Xdebug module has loaded properly.

phpinfo

And now, I run my application. Once application started, Xdebug will provide files that show us the application performance. This is just text file so we can read it directly using text editor like notepad. However, I confuse to read the information, so I decide to read using Qcachegrind.

Just run qcachegrind.exe and select xdebug profiler output file as look like image below.

QCachegrind

latest-output

And… gotcha…

QCachegrind-result

Look! QCachegrind show me that CI_log->write_log() method take most of all time.

Aturan Penulisan Database Yang Biasa Saya Lakukan

Kali ini saya coba menuliskan kebiasaan (atau aturan?) yang saya buat sendiri untuk diri saya sendiri dalam membuat aplikasi. Aturan/convention yang saya buat ini bukan hal baru. Ini hanyalah rangkuman dari berbagai best practice dalam menulis code atau membangun aplikasi. Saat ini baru sempat untuk menulis tentang database convention. Kedepannya, saya berharap ada banyak yang bisa saya tambahkan. Saya juga meletakkan dokumen ini di Github, dan berharap bisa dapat masukan yang bagus.

Berikut daftar dari aturan penulisan database yang baru saja saya tulis dan disimpan di Github:

  1. use english language for name of fields and tables.
  2. Table names are lowercase, plural, and underscored without abbreviation except for commonly used. example: usersrulesorganitation_units.
  3. Field names are lowercase, and without abbreviation except for commonly used like id or uid.
  4. Field names with two or more words are underscored. Example: first_namelast_name, etc.
  5. Use `id` as name of primary key for all tables with int data type for auto increment or char(32) for UUID/GUID.
  6. use the (singular) name of the related table followed by _id for foreign keys. Example: user_id that reference to users table.
  7. Upper casing SQL keywords and built-in functions. Example:
    SELECT first_name,
        last_name,
        CONCAT(first_name, last_name) AS full_name
    FROM users;
    
  8. Avoid asterisk (*) symbol on select clause.

Untuk mendapatkan update terbaru dari daftar di atas, silahkan berkunjung ke repo Github.

Create Simple Jquery Plugin To Add An Arrow On Active Menu

Sometime I need to put an arrow on active menu visited by website user or visitor on simple way as image below.

menu

Firstly, prepare HTML image for arrow and a list of menus

...
...
<img class="up_arrow" src="images/up_arrow.png" />
<div class="menu left">
    <a href="#" class="active">About Us</a>
    <a href="#">The Dream</a>
    <a href="#">Events</a>
    <a href="#">Contact Us</a>
    <a href="#">Affiliates</a>
</div>
...
...

set absolute and hide the image on CSS file for first load

.up_arrow {
    position: absolute;
    display: none;
}

add javascript and write it as jquery plugin

(function($) {
    $.fn.putMenuArrow = function() {
        $('.up_arrow').css({
            'display': 'block',
            'position': 'absolute',
            'left': ($(this).offset().left + $(this).outerWidth() / 2) - 17, // 17 is width of arrow image
            'top': $(this).offset().top - 19 //19 is height of arrow image
        });
    }
}(jQuery));


// call putMenuArrow plugin
$(document).ready(function() {
    $('.menu a.active').putMenuArrow();

    $('.menu a').click(function(e) {
        e.preventDefault();
        $('.menu a').removeClass('active');
        $(this).addClass('active');
        $(this).putMenuArrow();
    });
});

The complete demo can be found at:

Tipe-tipe Programmer Dengan Dengan Tumpukan Project-nya

Jika seorang programmer biasa mengerjakan 3 project, atau bahkan lebih, secara bersamaan, ada beberapa kemungkinan mengenai programmer tersebut. Bukan satu project dan project lainnya lagi idle karena menunggu feedback user, atau lagi user testing. Tapi benar-benar tiga project yang jalan secara bersamaan. Waktu perharinya dibagi 30% untuk coding project A, 30% untuk coding project B, dan seterusnya.

Kemungkinan pertama, ia bekerja 16 jam perhari. Mungkin managernya berdiri dibelakang mengawasi sambil bawa cambuk. Yang seperti ini sering kita temui meski tidak bawa cambuk beneran sih…

Kemungkinan kedua, programmernya sangat sakti dengan kemampuan tingkat dewa. Dengan hanya 8 jam sehari, 3 project selesai dengan mulus walaupun timline masing-masing project sangat ketat. Tapi kenyataannya, programmer tingkat dewa sangat susah didapat. Kalau sudah dapat programmer tipe ini, jangan dilepas deh, soalnya mudah lepas karena banyak yang ngincer 🙂

Kemungkinan ketiga, programmernya pinter seperti programmer kebanyakan, tapi cuek bebek. Deadline yang terpampang tidak terlihat. Yang penting dia bekerja. Semua project molor jauh dari target bukan urusannya. Atau bahkan jika tidak ada yang kelar, ia tetap cuek melnggang tanpa ada rasa bersalah. Prinsipnya cuma satu, “Seberat-beratnya pekerjaan, akan terasa ringan kalau tidak dikerjakan”. Nah.. loh.. 🙂

Web Hosting Gratis…tis…

Jaman tahun 2000-an banyak layanan di internet yang menawarkan hosting gratis, bahkan ada yang menawarkan hosting PHP dan mySQL juga. Yang paling terkenal, seingetku, adalah .co.cc. Tidak tahu sekarang bagaimana keberadaan hosting gratis tuh.

Hosting gratis jaman itu tidak sama seperti saat dulu kala. Waktu itu ada banyak iklan sana-sani dan kekurangan nyamanan lainnya. entah karena benar-benar kurang nyaman atau karena tidak terbiasa aja.

Berbeda dengan beberapa tahun terakhir ini, dimana PaaS dan cloud mulai menggeliat, ada banyak layanan hosting gratis tanpa ribet dengan kualitas yang sama dengan yang bayar. Tentu saja ada batasan-batasan, tetapi kalau hanya untuk belajar atau baru memulai, yang gratis pun sudah cukup. Sebagai contoh, mari lihat simulasi dari versi gratis yang ditawarkan oleh redhat melalui Openshift

  • 15 pages/second
  • Hundreds of articles
  • ~ 50k visitors per month

Nah seperti itulah kira-kira yang didapat dari versi gratisnya Openshift. Untuk product PaaS lainnya silahkan berkunjung ke website masing-masing. Beberapa yang sempat aku kunjungi menawarkan layanan yang bahkan belum bisa didapat di hosting konfensional. Berikut listnya:

Fitur yang susah didapat dihosting konvensional diantaranya: Java, Ruby, Python, Scala, Clojure, mongodb, dan masih banyak lagi. Mau custom domain juga bisa. Ayo dimanfaatkan!