Get the latitude and longitude based on address : http://maps.googleapis.com/maps/api/geocode/json?address=435A%20Kent%20St&sensor=true

The code below set up the Google Map, put the marker and also make it grayscale

                function initialize() {
                    var map;
                    var location = new google.maps.LatLng(-33.87190930, 151.20480740);
                    var styles = [
                        {
                            featureType: "all",
                            elementType: "all",
                            stylers: [
                                { saturation: -100 }
                            ]
                        }
                    ];

                    var mapOptions = {
                        center: location,
                        zoom: 17,
                        mapTypeControlOptions: {
                            mapTypeId: [google.maps.MapTypeId.ROADMAP, 'theGray']
                        }
                    };

                    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                    var mapType = new google.maps.StyledMapType(styles, { name:"GrayScale" });    
                    map.mapTypes.set('theGray', mapType);
                    map.setMapTypeId('theGray');

                    marker = new google.maps.Marker({
                        position: location,
                        map: map
                    });
                }
                google.maps.event.addDomListener(window, 'load', initialize);

Playing with Google Map API is a post from: blog.rudylee.com

The cleanest approach is to override specific configuration key by creating module-name.local.php file inside config/autoload folder. For example, you have “Admin” module and here is the sample module.config.php file :

return array(
    'sms' => array(
        'username' => 'rudy', //API access username
        'password' => 'rudy', //API access password
        'sender' => 'Rudy', // max of 11 alphanumeric or max of 15 numerical characters
    ),
);

You can override only the username by creating admin.local.php file inside config/autoload folder and put this code inside it :

return array(
    'sms' => array(
        'username' => 'override', //API access username
    ),
);

Zend Framework 2 will read this file and overwrite the username key inside module.config.php. Now you can create script during your deployment process to create this file automatically.

Override module config in Zend Framework 2 is a post from: blog.rudylee.com

$.ajax({
    type: POST,
    url: 'http://localhost/my-website/register',
    data: dataJSON
})

That approach is completely fine. However, when you need to deploy your application, you need to manually change all the URL to match with your server. The solution that I have been using for quite a long time is setting up Javascript object that contains path to my application.

In CakePHP, this can be easily done by using URL method inside Router Class. Here is the sample :

$cbunny = array(
    'APP_PATH' => Router::url('/',true)
);
echo $this->Html->scriptBlock('var CbunnyObj = ' . $this->Javascript->object($cbunny) . ';');

In Zend Framework 2, you have to rely on serverUrl and basePath to achieve the same thing. Here is the proper way to do it in Zend Framework 2 :

        <script type="text/javascript">
            //<![CDATA[
                var CMSObj = {
                    "APP_PATH":"<?php echo $this->serverUrl() . $this->basePath() ?>/"
                };
            //]]>
        </script>

Zend Framework 2 : The proper way to set application path in Javascript Object is a post from: blog.rudylee.com

I have known Vim for 4 years now but never actually keen to learn all the shortcuts. I remember I been to one of the PHP meetup in my city and one guy was presenting some of his code using Vim. One of the audience commented “Why you need to use Vim if you have IDE and all of the GUI ?”. At that time, I couldn’t agree more with that guy.

I had always thought Vim’s user are just trying to show off that they are different and superior. Using Vim basically separate them from GUI’s group and put them one level above. At least, that’s what I was thinking and apparently I am wrong.

After started using Vim, I can feel that I am more productive and less stressful when programming. All the shortcuts definitively help you to avoid redundancy and remove your reliance on mouse. You can navigate through the source code by only using keyboard.

The book that I am using to learn VIM is “Practical Vim : Edit Text at the Speed of Thought” by Drew Neil. If you are new with Vim, I’ll strongly recommend to start with this book. This book has collection of tips on how to use Vim in real situation and you going to feel you learn Vim faster.

However, before deciding to learn Vim, you need to know that Vim is not for everyone. You know that you are not suitable for Vim when you :

• Still looking at your keyboard when typing.
• Have problem or hate remembering shortcuts.
• Don’t have any curiosity to find another way to achieve something.

If you are an IDE fan such as Eclipse, Netbeans or Visual Studio. There are some plugins that you can download to unleash the Vim power in your IDE. At the moment, I am using VsVim to use all the Vim shortcuts when programming in C#. If you want to become better programmer, I’ll say start using Vim and you won’t regret it.

My review after two months using VIM is a post from: blog.rudylee.com

So, here is the code that I am using to get server URL in controller :

$server_url = $this->getRequest()->getUri()->getScheme() . '://' . $this->getRequest()->getUri()->getHost();

Probably it’s not the best solution but it works for now

Zend Framework 2 : get server URL in controller without using serverUrl() is a post from: blog.rudylee.com

In this post, I’ll explain how to integrate Twitter Bootstrap Typeahead with your CakePHP 2.0 application. We will avoid using helpers or plugins and stick with plain Javascript + jQuery. Make sure you have include jQuery, Bootstrap CSS and Bootstrap Javascript files in your CakePHP application. You can simply do it inside your default.ctp file ( the files are bootstrap.min.js and bootstrap.min.css ).

After that we will create controller, action and view to put our input box. In this tutorial I’ll use my Cbunny application and Users controller. I’ll start by creating typeahead action, here is the code :

    public function typeahead() {
        $this->User->recursive = 0;
        $this->set('users', $this->paginate());       
    }

Nothing special happening rather than get current users from the table and paginate them. And here is the view :

<div class="row">
    <div class="span12">

    <!-- Typeahead Auto Complete -->
    <div class="pull-right">
        <input type="text" data-provide="typeahead" id="user-typeahead">
    </div>

    <h2><?php echo __('Users');?></h2>
    <table class="table"cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th><?php echo $this->Paginator->sort('id');?></th>
                <th><?php echo $this->Paginator->sort('username');?></th>
                <th><?php echo $this->Paginator->sort('password');?></th>
                <th><?php echo $this->Paginator->sort('created');?></th>
                <th><?php echo $this->Paginator->sort('modified');?></th>
                <th class="actions"><?php echo __('Actions');?></th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($users as $user): ?>
            <tr>
                <td><?php echo h($user['User']['id']); ?> </td>
                <td><?php echo h($user['User']['username']); ?> </td>
                <td><?php echo h($user['User']['password']); ?> </td>
                <td><?php echo h($user['User']['created']); ?> </td>
                <td><?php echo h($user['User']['modified']); ?> </td>
                <td class="actions">
                    <?php echo $this->Html->link(__('View'), array('action' => 'view', $user['User']['id'])); ?>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

On line 5-7, I am defining input text with typeahead attribute and ID that we will use in Javascript code. The next step is to create Javascript object in your layout file. So add this code snippet in your default.ctp file :

        $cbunny = array(
            'APP_PATH' => Router::url('/',true)
        );
        echo $this->Html->scriptBlock('var CbunnyObj = ' . $this->Javascript->object($cbunny) . ';');

You can change the $cbunny and CBunnyObj variable name to resemble your app name. However, the rest of the code has to be same as above. This snippet of code will create Javascript object which contains the root URL path of CakePHP.

After we have the Javascript object variable, let’s continue by creating the Javascript code. Inside your application Javascript file add these code :

  $('#user-typeahead').typeahead({
    source: function (query, process) {
      return $.ajax({
        url: CbunnyObj.APP_PATH + 'users/typeahead_search',
        type: 'get',
        data: {q: query},
        dataType: 'json',
        success: function (json) {
          return process(json);
        }
      });
    }
  });

In this code, we initialize the typeahead library and create AJAX request to the typeahead_search action. In the next step, we will create typeahead_search action that will handle AJAX request and return JSON result. Back to our users controller, create the typeahead action which will contain this code :

    public function typeahead_search() {
        $this->autoRender = false;
        $this->RequestHandler->respondAs('json');

        // get the search term from URL
        $term = $this->request->query['q'];
        $users = $this->User->find('all',array(
            'conditions' => array(
                'User.username LIKE' => '%'.$term.'%'
            )
        ));

        // Format the result for select2
        $result = array();
        foreach($users as $key => $user) {
            array_push($result, $user['User']['username']);
        }
        $users = $result;

        echo json_encode($users);
    }

This action will receive the request, search the database for relevant result and return it on JSON format.

Bootstrap Typeahead CakePHP 2.0 is a post from: blog.rudylee.com

In this post, I’ll explain how to use Select2 inside CakePHP. We will avoid using any helpers and rely on jQuery + Javascript. Before we start, I presume you have downloaded Select2 and included the Javascript and CSS files inside your layout. Thus, I won’t explain how to import Select2 library into your CakePHP app ( you can download my cbunny app from Github if you are lost ).

So the first step is to create controller that will contain our Select2 search box. In this tutorial, I’ll create users controller and one action to put the select2 search box. Here is the snippet of my code :

    public function select2() {
        $this->User->recursive = 0;
        $this->set('users', $this->paginate());
    }

After this you can create the view ( View/Users/select2.ctp ). Here is my view code :

<div class="row">
    <div class="span12">

    <!-- Select2 Auto Complete -->
    <div class="pull-right">
        <input type="text" id="user-select2">
    </div>

    <h2><?php echo __('Users');?></h2>
    <table class="table"cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th><?php echo $this->Paginator->sort('id');?></th>
                <th><?php echo $this->Paginator->sort('username');?></th>
                <th><?php echo $this->Paginator->sort('password');?></th>
                <th><?php echo $this->Paginator->sort('created');?></th>
                <th><?php echo $this->Paginator->sort('modified');?></th>
                <th class="actions"><?php echo __('Actions');?></th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($users as $user): ?>
            <tr>
                <td><?php echo h($user['User']['id']); ?> </td>
                <td><?php echo h($user['User']['username']); ?> </td>
                <td><?php echo h($user['User']['password']); ?> </td>
                <td><?php echo h($user['User']['created']); ?> </td>
                <td><?php echo h($user['User']['modified']); ?> </td>
                <td class="actions">
                    <?php echo $this->Html->link(__('View'), array('action' => 'view', $user['User']['id'])); ?>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

If you look at 5-7 you’ll notice that I have input element with id element user-select2. We will use the ID inside our jQuery to initiate the Select2. The next step after this is to create a Javascript object to store the dynamic app path. Add this snippet of code into your layout file ( default.ctp ).

        $cbunny = array(
            'APP_PATH' => Router::url('/',true)
        );
        echo $this->Html->scriptBlock('var CbunnyObj = ' . $this->Javascript->object($cbunny) . ';');

You can change the $cbunny and CBunnyObj variable name to resemble your app name. However, the rest of the code has to be same as above. This snippet of code will create Javascript object which contains the root URL path of CakePHP.

After we have the Javascript object, we will create jQuery code to create Select2 search box, process AJAX request and handle the respond. I’ll start with creating cbunny.js file inside my webroot folder and add the file in my layout file. Here is the code :

/*global $, document, CbunnyObj */
$(document).ready(function () {

  $('#user-select2').select2({
    placeholder: "Search user auto complete",
    minimumInputLength: 1,
    ajax: {
      url: CbunnyObj.APP_PATH + 'users/search',
      dataType: 'json',
      data: function (term, page) {
        return {
          q: term
        };
      },
      results: function (data, page) {
        return { results: data };
      }
    }
  });

});

I’ll explain the Javascript code a little bit. Line 4-19 contain the definition of Select2 library. You can see we have ajax definition on line 7 which will perform AJAX request to  CbunnyObj.APP_PATH + ‘users/search’. CbunnyObj is javascript object variable that we have defined before and will translate into your CakePHP App path ( ex: http://cbunny.rudylee.com ). I believe you understand the rest of the code as I just copied it from Select2 website.

After this, our last step is to create action + view to handle the AJAX request. So we are going back to Users controller and add new action called ‘search’. Here is my ‘search’ action code :

    public function search() {
        $this->autoRender = false;

        // get the search term from URL
        $term = $this->request->query['q'];
        $users = $this->User->find('all',array(
            'conditions' => array(
                'User.username LIKE' => '%'.$term.'%'
            )
        ));

        // Format the result for select2
        $result = array();
        foreach($users as $key => $user) {
            $result[$key]['id'] = (int) $user['User']['id'];
            $result[$key]['text'] = $user['User']['username'];
        }
        $users = $result;

        echo json_encode($users);
    }

On line 5, we grab the search query term from the URL and store into $term variable. After that, we will perform normal query to the table. When we get the result, we won’t be able to use it straight away. We will have to reformat it so it can be readable by Select2. On line 12-17 we basically iterate through the $users variable and create new associative array which has id and text as their key.

That’s it for the tutorial. If you are confuse, feel free to write comment below and I’ll be happy to answer them.

Select2 AJAX Auto Complete with CakePHP 2.0 is a post from: blog.rudylee.com

Science of Productivity is a post from: blog.rudylee.com

It is a time management method created by Francesco Cirillo in the 1980s that helps you accomplish what you want to do by transforming time into a valuable ally. Why is it so popular? Because it is easy to use, and most of all, because it works!

Basically the Pomodoro technique tells you to pick a task, working on it under certain time limit ( usually 25 minutes ), take a break for 5 minutes and repeat the same process again. Each cycle is what called Pomodoro, after you have finished 4 Pomodoro, you are allowed to take longer break ( 30 minutes ).

From my personal experience, it is a good technique but you need huge amount of self discipline. People with lack of self discipline tend to lose their focus in the middle of Pomodoro. Most of the time I am only able to do 2 perfect Pomodoro without any distractions, sometimes even less. After that usually I am end up watching Youtube, checking Facebook or even playing games.

Lifehacker

I am a type of person that definitely lack of self discipline. I can force and motivate myself to finish a work if there is someone watching my back, for example working in an office environment where you have colleagues monitoring what you are doing. However, one month ago I was trying find a new way to solve this problem because I am on Uni holiday and close to Christmas holiday.

My first choice to find solution is Lifehacker website. It is one of the popular websites that provides information to boost your productivity in simple ways ( sometimes ). However, because it has lot of articles, most of the time you find it hard to find article that suit your problem.

After trying various keywords to help me find article that match my problem, I decided to give up and looking for books instead. Luckily it’s not that difficult because as soon as I typed ‘lifehacker’ in Amazon, it comes up with this book ( Lifehacker: The Guide to Working Smarter, Faster, and Better ). The book basically contains the same articles from the website but the good part is all the articles has been grouped into relevant chapter for easier search and read.

I’ll suggest you skip most of the chapters in the book and only focus on the chapters that can solve your problem. In my case, I am only focus on these topics :

1. Make your To-Do List Doable. Based on this article.
2. Set Up a Morning Dash.
3. Dash through tasks with a timer.
4. Limit visits to Time-Wasting websites.

Out of those 4 topics, my favourite is number one. To-do list is a must have thing in my daily life. Not only it is useful to remind you what to do, but it also useful as a planning tool. Unfortunately, for the past few years I have done a simple mistake and made most of my to-do items in my list untouched. The mistake is simply on the way I write the todo items.

Before I read this article, I tend to put things such as “Redesign personal website”, “Working on project A”, and “Working on project B” in my todo list. According to the article, these type of tasks cannot be called tasks but projects. Tasks are more descriptive and can be done in short time. So if we pick redesign personal website project, some examples of the tasks are create the sitemap or create the home screen wire frame based on sitemap.

The first time I tried this approach, I am little bit sceptical. But believe it or not, I am find it easier to focus on my tasks when I write clearer task. The problem with unclear task are you will spend time to figure what to do and the chances that it will affect your motivation is higher.

I think that’s all for this article, I’ll try share my experience in the next article.

My journey to productivity is a post from: blog.rudylee.com

• http://cakephp.lighthouseapp.com/projects/42648/tickets/968-rest-routes-with-prefix
• https://github.com/cakephp/cakephp/pull/763

This is a drawback because you are most likely will use prefix to build REST API. In my case, I have products controller in my application which has default CRUD actions and another set of actions with prefix ( api_index, api_view, etc ). Those actions with prefix in front of it will act as our RESTful API.

You can try another approach by creating separate controller only to handle API request. For example, you will have to create controller called products_api to handle all restful API for specific controller. I am not a fan of this approach because you might end up having a lot of files and it’s difficult to maintain.

So, if you are on the same boat as me, you can follow this solution that I found. This solution only requires you to add one line of code to Router.php file in CakePHP lib folder ( https://github.com/DiegoMax/cakephp/commit/f203202ff78da930b472ecce817fdc6f19d6dfda ).

Not a best solution but I don’t want to wait until CakePHP 3.x released to finish my first CakePHP + Backbone.JS app. That’s all, have a nice day.

No prefix support for mapResources in CakePHP 2.x is a post from: blog.rudylee.com