formated text

Newbie Tips : How to Use Bootstrap with CakePHP

CakePHP is a popular framework that is widely used by web developers and has an active community, which is constantly developing. Until now, CakePHP has reached version 3.0 dev3. I prefer to use the stable version, which is version 2.4. In version 3.0, reportedly many added features and a completely new, so we as developers are very easy to create sophisticated web. Check our snippet code for cakephp

CakePHP is a machine, you must creating a style manually. For that, I usually combine CakePHP with Bootstrap. Bootstrap is a CSS framework issued by twitter. Well, this post will explain how to combining Cakephp with bootstrap.

This is actually very simple, just add a CSS and javascript files. But for beginners, may find it difficult.

Ok, the following steps.

  1. Download the latest cakephp, but select stable. (version 2.5.1)
  2. Download the latest bootstrap. click here

Ok, preparing is finished.

Copy Bootstrap CSS to CakePHP Folder

After that, open the bootstrap file that you downloaded. Search files in a CSS folder below.

bootstrap

then copy to folder Cakephp /app/webroot/css/

Done.

Copy Bootstrap JS to CakePHP folder

bootstrap js

then copy to cakePHP /app/webroot/js/

Done.

Lets create a simple web layout, then save to /app/View/Layouts/default.ctp

<html>
<head>
 <?php echo $this->Html->css('bootstrap.min.css');?>
  <?php echo $this->Html->javascript('jquery.js');?>
 <?php echo $this->Html->javascript('bootstrap.min.js');?>
</head>
 <body>
 <?php echo $content_for_layout;?>
</body>
</html>

Now, you can get starting creating many project with CakePHP and bootstrap.

 

Web developer, big fan of CakePHP, loving wordpress soo much. You can found him on Google+ and Facebook. Dont forget to follow him on Twitter.
Posts created 562

One thought on “Newbie Tips : How to Use Bootstrap with CakePHP

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top