Thursday, May 16, 2013

Using CakePHP FormHelper with Bootstrap Forms

CakePHP's FormHelper helpt to generate forms when making CakePHP applications. As one might assume, this includes generating input elements, like example:

 <form action="">  
 <fieldset>  
 <div class="control-group required error">  
   <label for="Fieldname" class="control-label">Fieldname</label>  
   <div class="controls">  
     <input name="data[Fieldname]" class="form-error" maxlength="255" type="text" value="" id="Fieldname"/>  
     <span class="help-inline">Error message</span>  
   </div>  
 </div>  
 </fieldset>  
 </form>  

The CakePHP code is:


 <?php echo $this->Form->create('ModelName', array(  
   'class' => 'form-horizontal',  
   'inputDefaults' => array(  
     'format' => array('before', 'label', 'between', 'input', 'error', 'after'),  
     'div' => array('class' => 'control-group'),  
     'label' => array('class' => 'control-label'),  
     'between' => '<div class="controls">',  
     'after' => '</div>',  
     'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-inline')),  
   )));?>  
 <fieldset>  
 <?php echo $this->Form->input('Fieldname1', array(  
   'label' => array('class' => 'control-label','text'=>'HERE YOU LABEL TEXT')  
   )); ?>  
 <?php echo $this->Form->input('Fieldname2', array(  
   'label' => array('class' => 'control-label','text'=>'HERE YOU LABEL TEXT')  
   )); ?>  
 </fieldset>   
 <?php echo $this->Form->end();?>  

Saturday, May 4, 2013

Bootstrap Typeahead CakePHP 2.0

Integrate Twitter Bootstrap Typeahead with your CakePHP 2.0 application.
You need:
- Cakephp 2.x
- Jquery
- Twitter bootstrap

First the form:
<input data-provide="typeahead" id="user-typeahead" type="text" />

Setting your url base
Put it into default.ctp before </head>
<script type="text/javascript">
  //get url base app
  var site_url='<?php echo $this->base; ?>';

</script>

The Jquery:
Put it into bottom in view

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

 });                      
 </script>


UsersController
    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 input
        $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.