Building a blog with CakePHP – Part 1: Getting started

For those people that are following me already on Twitter will know that I'm working with the amazing CakePHP framework on my webdevelopment / webdesign job.

CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications. Using commonly known design patterns like MVC and ORM within the convention over configuration paradigm, CakePHP reduces development costs and helps developers write less code.

This tutorial will give you a good start in the world of CakePHP, just to learn the basics of the framework. The official CakePHP Blog tutorial (For Cake 1.1) gives you a good idea, but this tutorial will take it a couple of steps further (and in the next parts way beyond the official tutorial). Don't worry: This article will perfectly guide to making your first steps on baking some code.

Download the source code I created directly if you don't want to write anything yourself, but still want to learn. I do recommend you to read the full article to understand the whole code. Take note that this tutorial is written for Cake version 1.2 (Using 1.2.0.7692 RC3 to be precise).

There we go! Strap on your cooks hat; We're going to bake some delicious Blog-cake.

The setup:

First, download and install the latest release of Cake. NETTUTS created an excellent article how to get started with the framework. I suggest that you read the article, set up your database connection and get it running.

For the database, we're going to use the following MySQL script. You can execute this in your phpMyAdmin.

First, download and install the latest release of Cake. NETTUTS created an excellent article how to get started with the framework. I suggest that you read the article, set up your database connection and get it running.

For the database, we're going to use the following MySQL script. You can execute this in your phpMyAdmin.

CREATE TABLE IF NOT EXISTS `blogs` (



`id` int(255) NOT NULL auto_increment,



`date` date NOT NULL,



`title` varchar(255) NOT NULL,



`introtext` text NOT NULL,



`maintext` text NOT NULL,



PRIMARY KEY  (`id`)



)

We'll now fill the database with some sample data.

INSERT INTO `blogs` (`id`, `date`, `title`, `introtext`, `maintext`) VALUES



(1, '2008-10-24', 'My first blog post', '
Hello World!
\r\n
This



is my first article using the CakePHP framework. I hope you like it.
',



'
This text will only be visible on the second page.
\r\n
It''s



just like how Joomla! works!
'),



(2, '2008-10-27', '2nd article', '
This is my second article, just to



test the amazingly cool CakePHP framework.
', '
Even the read more works!
'),



(3, '2008-11-02', 'Last article', '
Sorry guys, this will be my last



article. Make sure you check out Marcofolio for more interesting articles!
', '

And in the future: Making this blog bigger & better!
');



OK, all preperations are made: Let's get down to business and code some PHP. Comments are added in some sections to explain what the code does.



Clearing the errors:



We can easily create a blog in the /blog/ section of the



site (The URL will look like this: http://yourdomain.com/blog/). You



must remember the syntax of an URL for CakePHP:



http://yourdomain.com/CONTROLLER/FUNCTION/ARG1/ARG2/ etc. Anyway, when



you now visit the /blog/ section of your site, you'll see the following error (with the default download package).







What a nice error message! It's telling us that Cake is missing the



BlogController, together with the filename it's searching for and the



default code. Let's follow this error message by creating a



"blog_controller.php" file in the app/controllers directory. This file will have the following code:



class BlogController extends AppController {



  var $name = 'Blog';



  // Used when indexing the page (http://yourdomain.com/blog/)



  function index() {



  }



}



?>



When done correctly, the following error should show up: The view is missing.

To fix this problem, go to your app/views folder. Create a new folder called blog inside of the views folder. Inside the /blog/ folder, create a file called index.ctp (CTP = Cake Template). Leave the file empty for now.

Pfew, all of the errors are gone now. Now we can really start writing some code.

The "Blog" model:

The model in a MVC-pattern (Model-View-Controller) represents the storage type. In Cake, the model is the final place before data enteres the actual database (or the first when data is retrieved from the database). We want to create a Blog model to retrieve Blog data from the database.

To achieve this, create blog.php inside the app/models folder. This file will contain the following code:

Now we'll have to "tell" the controller to use the model. To do so, add the following line to your blog_controller.php, right under the $name variable.



var $uses = array('Blog');



To check if the controller is now connected to the model, change your blog_controller.php and add the following inside the index() function:



debug($this->Blog->findAll());

This code will ask the Blog-model to do a "findAll()" (standard model function in CakePHP) to retrieve all the data the model can get from the database (in this case: Everything from the "blogs" table). The debug() function will give you a human readable output to check your output.

When you now visit your blog (http://yourdomain.com/blog/), you should be able to read all information from the "blogs" table in your database in several arrays. If so, we can move on!

Controller to view:



he controller now has a connection with the correct model. Now we'll

need to connect the controller information with the view. To do so, add

the following line to your index() function of blog_controller.php:



$this->set('articles', $this->Blog->findAll());



Now the "articles" variable for the object "Blog" will contain all blog

posts retrieved from the database. Open the index.ctp file, located in views/blog. To test if it worked, add the following line to the file:



debug($articles) ?>

When you now view the page in your browser (http://yourdomain.com/blog/), you should once again see all articles in the form of an array. There is one difference from the previous version tough: You're now getting the data from the view.

Delete the "debug()" in your index.ctp file to create a real view. This is how a view for the blog could look like.

"blog">

foreach ($articles as $article) { ?>

class="article">

"blog/index/"

title="">$article['Blog']['title'] ?>

class="date">$article['Blog']['date'] ?>

$article['Blog']['introtext'] ?>"blog/index/" title=""

class="readon">Read more...

} ?>

When you now look at your /blog/, you would now be able to

The "view" parameter:

As you now can see, the title and the "read more..." are linked to the following URL: http://yourdomain.com/blog/ID, where ID is the ID of the article. This is the URL to show the full article.

To make this work, we'll need to make changes to the controller and add a view. We'll start with the controller, so open blog_controller.php. Make the following changes to your index() function:

function index($view = null) {

// What to do if a view is set

if (isset($view))

{

$this->set('article', $this->Blog->find("id = $view"));

$this->render('article');

}

else

{

$this->set('articles', $this->Blog->findAll());

}

}

Let me get into some detail on this one. The $view = null tells CakePHP that this parameter is optional. Using isset() you can check if the $view paramter has been set. If none is found, we'll do a findAll() on the model to retrieve all data and render the index.ctp view.

If the view is set, we'll find the article by using the ID (by asking it to the model) and we'll render the "article" layout. "But there isn't an article layout?" I hear you say. Correct: We'll need to create it. So, create a article.ctp inside the app/views/blog/ folder. Use the debug($article) function to check if the article is loaded.

Assuming everything went well, we can now create the layout for the "article" view. This is how it could look like.

"article">

$article['Blog']['title'] ?>

class="date">$article['Blog']['date'] ?>

class="intro">$article['Blog']['introtext'] ?>

class="main">$article['Blog']['maintext'] ?>

When you now visit the page that contains all the articles (http://yourdomain.com/blog/) and click on one of the titles (or the "read more..." link), you should be able to see the full article (http://yourdomain.com/blog/index/1, where 1 is the ID of the article).

Altering the layout & Styling with CSS:

So far, we've been using the default layout that comes with CakePHP and no CSS styling was used. Let's change that, making it our real own blog.

We already know that our code is working, so we'll not need to debug anymore or see the queries executed. Open core.php located in app/config. Search for Configure::write('debug', 2); and change the "2" to a "0".

Create a new layout file called default.ctp in the app/views/layouts folder. Add the following code to that file.

= $html->css('default'); ?>



= $content_for_layout ?>

Make sure you add the DOCTYPE and xmlns etc. to make it valid. In the download code it is set correct, but I had to trim it down here a bit.

Anyway, when you now view your blog (single article and total view) in your browser, you should be able to only see plain HTML (no fancy stuff) since we did't add it. The $html->css('default'); inside the HEAD of default.ctp will create a URI to the "default.css". We didn't make this file (yet), so let's do this in order to style it.

Create default.css inside the app/webroot/css folder. This is the place to put all the CSS at this moment. Remember we had two ID's: #blog and #article. I added the following CSS:

/* HTML */

body {

background-color:#003333;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

color:#CCCCCC;

}



a {

color:#FFCC33;

}



/* Classes */

.date {

float:right;

color:#333333;

}



.readon {

background-color:#009966;

border-style:solid;

border-color:#000000;

color:#FFCC33;

padding:2px;

font-size:10px;

}



/* Blog */

#blog {

width:500px;

margin-left:auto;

margin-right:auto;

padding-top:15px;

}



#blog .article {

background-color:#336666;

padding:5px 10px 10px 10px;

}



#blog .article h1 a {

color:#FFCC33;

text-decoration:none;

}



#blog .article h1 a:hover {

text-decoration:underline;

}



/* Article */

#article {

width:500px;

margin-left:auto;

margin-right:auto;

margin-top:15px;

background-color:#336666;

padding:5px 10px 10px 10px;

}





Now I'm sure that there are loads of designers out there that can make

this CSS and layout way more fancy, but I hope you get the idea. This

article is written for the code, not for the layout.

Conclusion / Download:



There we have it: A fully functional blog that gets his data from the



database. Try adding something to the database to see another article



added.



In the other parts of this serie we'll make the blog a little bit more



SEO, give it an admin panel etc. etc. to make it a fully functional



blog that you can use. For now, I hope you learned the basic setup of



the wonderful CakePHP framework.