New Blog Site Has Launched

akhir pekan kemarin, alhamdulillah, saya bisa meluncurkan blog baru saya di alamat http://habibillah.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…!

Al-umm madrasatul ulaa

Al-umm madrasatul ulaa

Secara sederhana, peran beserta tugas-tugas seseorang dalam sebuah rumah tangga bisa di bagi menjadi:

  1. Asisten Rumah Tangga
    • Bersih-bersih
    • Memasak
    • Belanja kebutuhan sehari-hari
  2. Babysitter
    • Nungguin anak bermain
    • Nyuapin anak saat makan
    • Memandikan anak saat waktunya mandi
    • Memakaikan baju
  3. Guru
    • Mendidik anak
    • Mengajarkan anak berbagai kebaikan
    • Melatih anak berbuat baik dan belajar
    • Ikut bermain sambil belajar
  4. Orangtua
    • mencari nafkah
    • bisa mengambil semua peran baik sebagai Asisten rumah tangga, babysitter, maupun seorang guru. Yang pasti bukan berperan sebagai anak :). Bila tidak bisa semuanya, yang paling bagus adalah menjadi seorang guru bagi anak-anaknya. Kan pepatah arab bilang: “Al-umm madrasatul ulaa”. Ibu (orang tua) itu adalah sekolah pertama (bagi anak-anaknya).

    Tentu saja itu hanya sebuah gambaran sederhana. Pada kenyataannya, ada lebih banyak peran dan tugas-tugas lain yang tidak di tuliskan, bahkan mungkin tulisan saja tidak cukup untuk menggambarkannya.

2013 in review

The WordPress.com stats helper monkeys prepared a 2013 annual report for this blog.

Here’s an excerpt:

A San Francisco cable car holds 60 people. This blog was viewed about 2,800 times in 2013. If it were a cable car, it would take about 47 trips to carry that many people.

Click here to see the complete report.

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/

Quick Sample To Use jQuery Global AJAX Events

Sometime we write AJAX based application which has many ajax call. If an AJAX called, we add loading image indicator to show that request being processed. For simply way we use AJAX beforeSend() and complete() events for show and hide loading image indicator. See code below:

// call an AJAX request
$.ajax({
	url: 'sample/url/target.php',
	beforeSend: function() {
		//call loading image indicator here
		showImageLoading();
	},
	success: function(result) {
		// do when success AJAX called successfully
	},
	complete: function() {
		//call function to hide loading image indicator here
		hideImageLoading();
	}
});

// call an another AJAX request
$.ajax({
	url: 'sample/url/another_target.php',
	beforeSend: function() {
		//call loading image indicator here
		showImageLoading();
	},
	success: function(result) {
		// do when success AJAX called successfully
	},
	complete: function() {
		//call function to hide loading image indicator here
		hideImageLoading();
	}
});

When we write much of AJAX call, we waste our time to write beforeSend() and complete() events for each AJAX calls. It’s also affect on total lines of code.

The better solution, we can use AJAX global events which always called when an AJAX request fired. Let’s try to modify code above:

// This event is triggered if an Ajax request is started
// and no other Ajax requests are currently running.
$(document).ajaxStart(function() {
	$(this).showLoading();
});

// This global event is triggered if there are no more
// Ajax requests being processed.
$(document).ajaxStop(function() {
	$(this).hideLoading();
});

// call an AJAX request
$.ajax({
	url: 'sample/url/target.php',
	success: function(result) {
		// do when success AJAX called successfully
	}
});

// call an another AJAX request
$.ajax({
	url: 'sample/url/another_target.php',
	success: function(result) {
		// do when success AJAX called successfully
	}
});

That’s, we just define global AJAX events once, and call many AJAX request. We can also disable global event for a particular AJAX request by passing global option to false on an AJAX request like below:

$.ajax({
	global: false,
	success: function(result) {
		// do when success AJAX called successfully
	}
});

The complete list of global and local jQuery AJAX events can be found at http://api.jquery.com/Ajax_Events/

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.