Setting up Twitter Bootstrap with CakePHP

I am developing a new application and I wanted to use CakePHP because I used it before and am pretty familiar with it. However, I wanted to have a more snazzy UI design so I looked around at some of the UI frameworks out there. Here are some of the ones I looked at:

After evaluating them I decided to give Bootstrap a try. Now to get it working with CakePHP…

Step 1: Download CakePHP and Twitter Bootstrap

To get CakePHP, go to CakePHP.org an download the latest release (2.06 at the time of this writing), and head over to the Bootstrap site to get it. Note: for the purposes of this post, do not use the download link from the Bootstrap homepage, instead click on the Git button and then download The source from the Git repository. We need to do this because the index.html file is not included in the normal download link an we will be using it as a starting point for our CakePHP layout and templates.

Step 2: Copy the Bootstrap files to CakePHP setup

Once you have them both downloaded, you will need to copy the bootstrap files into the CakePHP structure.

Copy the Js from the Bootstrap source:

Bootstrap javascript source to copy

Bootstrap javascript source to copy

Cake source Js Directory

Cake source Js Directory

Then copy the css and images in the same way.

Step 3. Setup the CakePHP default template

In the CakePHP source, go into the Views->Layouts directory and open up the default.ctp.  The simplest way to update this is to copy the contents of the Bootstrap index.html file directly into this file and go through it and replace and correct all the references in it to be the standard CakePHP implementation.

For Example, replace the <meta charset=”utf-8″> with <?php echo $this->Html->charset(); ?>.  Then remove the static title with <title><?php echo $title_for_layout; ?></title>.  Continue on with the conversion and you will end up with a file like this:

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

Once you have that in place you can then try it out and you should see something like this:

CakePHP with Twitter Bootstrap

CakePHP with Twitter Bootstrap

I hope this helps getting you setup and running with CakePHP and Twitter Bootstrap. If you have any questions/comments let me know, and as always Happy Developing.

About these ads
Tagged ,

8 thoughts on “Setting up Twitter Bootstrap with CakePHP

  1. Its a nice introductory tutorial. I would love to read another tutorial from you about CakePHP forms as I find it more difficult thing with Twitter Bootstrap.

  2. I’d love to hear more about how you’re using them together! This is a great start. I’ve been using them to build an app and while they’re both fantastic, some things are a bit tougher to get working. For example, making icons that are links…

  3. Jonathan says:

    Hi thanks for this, just getting started with cakePHP. Looks like it is going to be a great tool to work with.

  4. Hardik Sondagar says:

    Reblogged this on CakePHP Tutorial.

  5. szoftver says:

    @Stokes: yes, a really great start but it would be nice to see what’s next:)

  6. Cory Brown says:

    I would love to see the next part of this tutorial.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: