Nasrul Hazim Bin Mohamad

Training: Web Mobile Application Development (Basic / Intermediate) – INTIM – August 2015


Training: Web Mobile Application Development (Basic / Intermediate)

Location: INTAN Kampus Wilayah Timur (INTIM), Kemaman, Terengganu

Date: 17th – 20th August 2015


Training Materials:

  1. Web Mobile Application Starter Kit –
  2. Basic Android Configuration –
  3. API Template –

Important Articles:

  1. HTTP Methods for Restful Services –
  2. Android Configuration –
  3. Chrome Device Mode –


Bootstrap DatePicker I18N – Malay


Setting up for Malay Language. Copy & paste the following, save it as and include in your HTML pages as needed.

$.fn.datepicker.dates['my'] = {
    days: ["Ahad", "Isnin", "Selasa", "Rabu", "Khamis", "Jumaat", "Sabtu"],
    daysShort: ["Ahd", "Isn", "Sel", "Rab", "Kha", "Jum", "Sab"],
    daysMin: ["Ah", "Is", "Sl", "Rb", "Kh", "Jm", "Sa"],
    months: ["Januari", "Februari", "Mac", "April", "Mei", "Jun", "Julai", "Ogos", "September", "Oktober", "November", "Disember"],
    monthsShort: ["Jan", "Feb", "Mac", "Apr", "Mei", "Jun", "Jul", "Ogo", "Sep", "Okt", "Nov", "Dis"],
    today: "Hari Ini",
    clear: "Bersihkan"

Sample usage:

    language: 'my',
    format: "MM yyyy",
    startDate: "Januari 2000",
    minViewMode: 1
Bootstrap DatePicker - Malay

Bootstrap DatePicker – Malay

Reference: Bootstrap DatePicker I18N

CakePHP 2.x: Pagination Element


Being working on Bootstrap Pagination with CakePHP. Here the final one. Use it as you needed.


  1. CakePHP 2.x Pagination
  2. Bootstrap Pagination
  3. CakeDC Users
  	<ul class="pagination">	
		echo $this->Paginator->prev('< ' . __d('users', 'previous'), array('tag' => 'li'), null, array('disabledTag' => 'span', 'class' => 'disabled'));
		echo $this->Paginator->numbers(array(
			'separator' => '',
			'tag' => 'li',
			'currentTag' => 'span',
			'currentClass' => 'active'
		echo $this->Paginator->next(__d('users', 'next') . ' >', array('tag' => 'li'), null, array('disabledTag' => 'span', 'class' => 'disabled'));

Phalcon: Multiple-Module Skeleton



I’ve been learning Phalcon Framework recently and end up built a Multiple-Module Skeleton app – basically to ease development process to manage modules. Looking forward to add in more features. I have it on GitHub.

I have the directory structure as follow:

Phalcon - Multi Modules Structure - NHM - 1.0 - 20150313

Phalcon – Multi Modules Structure – NHM – 1.0 – 20150313

Hope to get some feedbacks.

Jazakumullahu khairan.

Bootstrap: Show and Hide Loading Icon in Modal (option Remote used)



  1. Need to load remote content
  2. Need to display a loading indicator
  3. Need to ensure each time modal display, it’s request new modal body content

Following are the solutions, however…

I’m looking for solutions using event handler instead of using a timer, .change() in jQuery does not monitor the html value change.

&lt;div id=&quot;myModal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;div class=&quot;modal-header&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
    &lt;h3&gt;Details&amp;nbsp; &lt;img src=&quot;/img/loading-tiny.gif&quot; alt=&quot;loading...&quot; id=&quot;modal-loading&quot; class=&quot;hidden&quot;&gt;&lt;/h3&gt;
  &lt;div id=&quot;modal-body&quot; class=&quot;modal-body&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;modal-footer&quot;&gt;&lt;/div&gt;

&lt;a onclick=&quot;viewRemoteModal()&quot;&gt;View Modal&lt;/a&gt;
var t; // a timer variable
function viewRemoteModal() {
    $('#myModal .modal-body').removeData(); // clean up modal body content
    $('#modal-loading').removeClass('hidden'); // display the loading icon
    t = setInterval(function(){
        // check if modal body is not empty, hide loading icon
        // time interval of 500ms to check the modal body content
        if($('#myModal .modal-body').html() != '')
    // open up modal using remote option
        'remote': '',
        'show': true

Bootstrap: Loading / Process Dialog

var app;
app = app || (function () {
    var process = $('&lt;div id=&quot;process&quot; class=&quot;modal hide fade&quot; tabindex=&quot;-1&quot; data-backdrop=&quot;static&quot; data-keyboard=&quot;false&quot;&gt;&lt;div class=&quot;modal-header&quot;&gt;&lt;h3&gt;Processing...&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;modal-body&quot;&gt;&lt;div class=&quot;progress progress-striped active&quot;&gt;&lt;div class=&quot;bar&quot; style=&quot;width: 100%;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
    return {
        showProcess: function() {
        hideProcess: function () {


Just call app.showProcess(); to display the process dialogue and call app.hideProcess(); to hide it.


HTML: Editable Elements


I’m using the following:

  1. X-editable
  2. Bootstrap 2
  3. Cakephp / Any PHP Framework

Include the jQuery, Bootstrap 2 in your HTML head

    &lt;!-- jQuery --&gt;
    &lt;script src=&quot;//;&gt;&lt;/script&gt;
    &lt;script src=&quot;//;&gt;&lt;/script&gt;

    &lt;!-- Bootstrap --&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
    &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

    &lt;!-- X-Editable --&gt;
    &lt;link href=&quot;//; rel=&quot;stylesheet&quot;/&gt;
    &lt;script src=&quot;//;&gt;&lt;/script&gt;

The View

&lt;a href=&quot;#&quot; class=&quot;x-editable&quot; data-type=&quot;text&quot; data-pk=&quot;1&quot;&gt;Some value 1&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;x-editable&quot; data-type=&quot;text&quot; data-pk=&quot;2&quot;&gt;Some value 2&lt;/a&gt;

The JavaScript

$(document).ready(function() {
    $.fn.editable.defaults.mode = 'inline';

        url: 'something/update'

The Controller

App::uses('AppController', 'Controller');

class Something extends AppController {

    public function update()
        /* Data structure we received from x-editable
                [name] =&gt; 
                [value] =&gt; Some value 1
                [pk] =&gt; 1
        $data = $this-&gt;request-&gt;data;
        $this-&gt;Some-&gt;read(null, $data['pk']);
        $this-&gt;Some-&gt;set('value', $data['value']);
        // return JSON if u need it or render a HTML (need to handle on success event)


  1. X-editable

Angular X-editable –

UI: Tree Plugin


GeoServer – GetFeatureInfo Template Data Model (structure)


Extend from this GeoServer – Custom Get Feature Info Display

Knowledge requirement – Freemaker

The standard template files is header.tpl, content.tpl, footer.tpl.

header.tpl usually where JavaScript, CSS, meta tag, title placed here.

footer.tpl where you put your HTML page footer, Copyright, etc.

content.tpl where we going to iterate through all the features to display interactive UI. But here, I’m going to explain the structure of all available variables.

features (array of Feature)
		- fid
		- typeName
		- attributes
			-&gt; name
			-&gt; type
			-&gt; isGeometry
			-&gt; value
		- type
			-&gt; name
			-&gt; title
			-&gt; abstract
			-&gt; description
			-&gt; keywords
			-&gt; metadataLinks
			-&gt; SRS
			-&gt; nativeCRS
type (object of Feature Map)
	- name
	- attributes
		-&gt; name
		-&gt; type
		-&gt; isGeometry

Accessing the variables as following:

&lt;!-- Accessing Feature Type Name --&gt;

&lt;!-- Accessing Features at index 0 and assign to a variable named feature --&gt;
&lt;#assign feature = features[0]&gt;

&lt;!-- Get feature's attributes values and assign to a variable named attrs --&gt;
&lt;#assign attrs = feature.attributes&gt;

&lt;!-- Display an attribute --&gt;

The result may display as below:

This is type name

some field name value


WordPress – Using Bootstrap in Custom Theme


Create a folder name custom_theme containing index.php,header.php,footer.php,functions.php and style.css.

Download Bootstrap and extract it into custom_theme folder.

Now the structure should be as following:

Custom Theme for WordPress

Custom Theme for WordPress

Custom theme should be save in $WORDPRESS_DIRECTORY/wp-content/themes/$THEME_NAME.

For header.php, include the following:

&lt;!DOCTYPE html&gt;
    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
		&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
		&lt;link href=&quot;&lt;?php bloginfo('stylesheet_url');?&gt;&quot; rel=&quot;stylesheet&quot;&gt;
		&lt;?php wp_enqueue_script(&quot;jquery&quot;); ?&gt;
		&lt;?php wp_head(); ?&gt;
	&lt;div id=&quot;wrap&quot;&gt;
		&lt;div class=&quot;container&quot;&gt;

For index.php, include the following:



// ======= Start: Content Here =======			

// ======= End: Content Here =========	



For footer.php, include the following:


			&lt;p style=&quot;text-align: center;&quot;&gt;&amp;copy; Your Website Name &lt;?php echo date('Y'); ?&gt;&lt;/p&gt;

		&lt;?php wp_footer(); ?&gt;

For functions.php, include the following:


function wpbootstrap_scripts_with_jquery()
	// Register the script like this for a theme:
	wp_register_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.js' , array('jquery') );
	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script( 'bootstrap-script' );

add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );


For style.css, include the following:

@import url('css/bootstrap.css'); 
@import url('css/bootstrap-responsive.css');

Reference: How to Build a Responsive WordPress Theme with Bootstrap

More reading about custom theme & functions can be use, please visit WordPress Functions.