Nasrul Hazim Bin Mohamad

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

Aug
16

Training: Web Mobile Application Development (Basic / Intermediate)

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

Date: 17th – 20th August 2015

Slide: http://bit.ly/training-web-mobile-application-development

Training Materials:

  1. Web Mobile Application Starter Kit – https://bit.ly/training-mobile-app-starter-kit
  2. Basic Android Configuration – https://bit.ly/training-mobile-app-android-config
  3. API Template – https://bit.ly/training-api-template

Important Articles:

  1. HTTP Methods for Restful Services – http://bit.ly/htpp-nethods-for-restful-services
  2. Android Configuration – http://bit.ly/android-config-xml
  3. Chrome Device Mode – http://bit.ly/chrome-device-mode

 

Bootstrap DatePicker I18N – Malay

Jun
24

Setting up for Malay Language. Copy & paste the following, save it as bootstrap-datepicker.my.js 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:

$('.input-daterange').datepicker({
    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

May
25

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

References:

  1. CakePHP 2.x Pagination
  2. Bootstrap Pagination
  3. CakeDC Users
<nav>
  	<ul class="pagination">	
  	<?php
		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'));
	?>
	</ul>
</nav>

Phalcon: Multiple-Module Skeleton

Mar
20

Assalamualaikum,

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)

Jul
08

Problems:

  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&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;/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() != '')
        {
            $('#modal-loading').addClass('hidden');
            window.clearInterval(t);
        }
    },500);
    // open up modal using remote option
    $('#myModal').modal({
        'remote': 'http://www.google.com.my',
        'show': true
    });
}

Bootstrap: Loading / Process Dialog

Jul
07
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() {
            process.modal('show');
        },
        hideProcess: function () {
            process.modal('hide');
        },

    };
})();

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

Reference: http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap/comment-page-1

HTML: Editable Elements

Apr
24

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;head&gt;
    &lt;!-- jQuery --&gt;
    &lt;script src=&quot;//code.jquery.com/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;//code.jquery.com/jquery-migrate-1.2.1.min.js&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;//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap-editable/css/bootstrap-editable.css&quot; rel=&quot;stylesheet&quot;/&gt;
    &lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap-editable/js/bootstrap-editable.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&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';

    $('.x-editable').editable({
        url: 'something/update'
    });
});

The Controller

&lt;?php 
App::uses('AppController', 'Controller');

class Something extends AppController {

    public function update()
    {
        /* Data structure we received from x-editable
            Array
            (
                [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']);
        $this-&gt;Some-&gt;save();
        // return JSON if u need it or render a HTML (need to handle on success event)
    }
}
?&gt;

References

  1. X-editable
  2. http://jquery.com/download/
  3. http://getbootstrap.com/2.3.2/getting-started.html

Angular X-editable – http://vitalets.github.io/angular-xeditable

UI: Tree Plugin

Jan
08

GeoServer – GetFeatureInfo Template Data Model (structure)

Mar
21

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)
	[0]
		- 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
	[n]
	
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;h3&gt;${type.name}&lt;/h3&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;
&lt;p&gt;${attr.someFieldName.value}&lt;/p&gt;

The result may display as below:

This is type name

some field name value

Reference: http://docs.geoserver.org/2.1.4/user/tutorials/freemarker.html

WordPress – Using Bootstrap in Custom Theme

Mar
06

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;html&gt;
  &lt;head&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;/head&gt;
	&lt;body&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:

&lt;?php

get_header();

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

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

get_footer(); 

?&gt;

For footer.php, include the following:

			&lt;/div&gt;
		&lt;/div&gt;
		
		&lt;hr&gt;

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

		&lt;?php wp_footer(); ?&gt;
	&lt;/body&gt;
&lt;/html&gt;

For functions.php, include the following:

&lt;?php

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' );

?&gt;

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.