Sunday, September 16, 2012

Setting up Twitter Bootstrap with CakePHP

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Step 1: Download CakePHP and Twitter Bootstrap

To get CakePHP, go to CakePHP.org an download the latest release and head over to the Bootstrap site to get it.

Step 2: Copy the Bootstrap files to CakePHP setup



Bootstrap css,img,javascript source to copy














Cake source css,img,js Directory







Step 3. Setup the CakePHP default template

In the CakePHP source, go into the Views->Layouts directory and open up the default.ctp.

Replace this code

<!DOCTYPE html>
<html lang="en">
<head>
  <?php echo $this->Html->charset(); ?>
  <title><?php echo $title_for_layout; ?></title>
  <!--  meta info -->
  <?php
    echo $this->Html->meta(array("name"=>"viewport",
      "content"=>"width=device-width,  initial-scale=1.0"));
    echo $this->Html->meta(array("name"=>"description",
      "content"=>"this is the description"));
    echo $this->Html->meta(array("name"=>"author",
      "content"=>"TheHappyDeveloper.com - @happyDeveloper"))
  ?>

  <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <!-- styles -->
  <?php
    echo $this->Html->css('bootstrap');
    echo $this->Html->css('bootstrap-responsive');
    echo $this->Html->css('docs');
    echo $this->Html->css('prettify');
    
    echo $javascript->link(array(
            'jquery.js',
            'prettify.js',
            'bootstrap.js',
          
        ));
  ?>
  <!-- icons -->
  <?php
    echo  $this->Html->meta('icon',$this->webroot.'img/favicon.ico');
    echo $this->Html->meta(array('rel' => 'apple-touch-icon',
      'href'=>$this->webroot.'img/apple-touch-icon.png'));
    echo $this->Html->meta(array('rel' => 'apple-touch-icon',
      'href'=>$this->webroot.'img/apple-touch-icon.png',  'sizes'=>'72x72'));
    echo $this->Html->meta(array('rel' => 'apple-touch-icon',
      'href'=>$this->webroot.'img/apple-touch-icon.png',  'sizes'=>'114x114'));
  ?>
  <!-- page specific scripts -->
    <?php echo $scripts_for_layout; ?>
</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">
  <div id="container">
  <!-- Navbar ============================================= -->
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse"
          data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="./index.html">Bootstrap</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active">
              <a href="<?php echo $this->webroot;?>">Home</a>
            </li>
            <li class="">
              <a href="./base-css.html">Base CSS</a>
            </li>
            <li class="">
              <a href="./components.html">Components</a>
            </li>
            <li class="">
              <a href="./javascript.html">Javascript plugins</a>
            </li>
            <li class="">
              <a href="./less.html">Using LESS</a>
            </li>
            <li class="divider-vertical"></li>
            <li class="">
              <a href="./download.html">Customize</a>
            </li>
            <li class="">
              <a href="./examples.html">Examples</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="row">
    <?php echo $this->Session->flash(); ?>
    <?php echo $content_for_layout; ?>
  </div>
  </div>
  <?php echo $this->element('sql_dump'); ?>
</body>
</html>