Lessn 3: Making it pretty

In this lesson we'll add some style to the page and also make the home page look more complete.

First let's add the CSS. I'm using the CSS reset from YUI which is rather short and gets the job done.

/assets/css/style.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
#wrapper{margin:0 10%; background-color:#f6f6ef}
#header{background-color:#fcaf3e;padding:.2em;color:#000;margin:1em 0 0}
#header a{color:#000}
#content{background-color:#f6f6ef; padding:1em}
.fr{float:right}
.ar{text-align:right}
body {color:#828282;font-family:Verdana;font-size:10pt;}
.cohead, .cohead a{color:#828282; font-size:9pt}
.comment{padding:.4em}
.comment, .comment a{color:#000; font-size:9pt}
textarea {color:#000000;font-family:Courier;font-size:10pt;}
#cform{padding:1em 0}
table td{padding:.1em}
.vote a{color:#828282; text-decoration:none}
.title span{font-size:8pt}
.nbody{padding:1em 0}

Looks like the views loaded from views doesn't share the variables. That's why for now I'll define the $site_title as global variable in defaulttemplate.php

classes/controller/defaulttemplate.php

public function after() {
    /*
     * Set the page title to $site_title if title is not set,
     * otherwise create title 'path'
     */
    if ($this->template->title){
      $this->template->title = $this->template->title.' » '.$this->site_title;
    } else {
      $this->template->title = $this->site_title;
    }
    View::bind_global('site_title', $this->site_title);
    parent::after();
  }

The header_tpl.php file becomes:

views/blocks/header_tpl.php

<div id="header">
<?php
echo '<b>'.html::anchor('/', $site_title).'</b> | ';
echo html::anchor('submit', __('submit')).' | ';
echo html::anchor('latest', __('latest'));
echo '<span class="fr">';
echo html::anchor('#', 'user');
echo '</span>';
?>
</div>

To make the links work without index.php, change the bootstrap.php file (add empty index_file element):

Kohana::init(array(
    'base_url'   => '/',
    'index_file'   => '',
));

Now the result should look like that:

Let's also change the look and functionality of the news:

views/pages/news/index_tpl

<?php
if ($news) {
  foreach ($news as $row) {
    echo '<table>';
    echo '<tr>';
    echo '<td class="vote">'.html::anchor('#', '&#9652;').'</td>';
    echo '<td class="title">';
    echo html::anchor('news/'.$row['id'], html::entities($row['title']));
    echo '</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td></td>';
    echo '<td class="cohead">';
    echo $row['points'].' by '.html::anchor('user/'.$row['user_id'], html::entities($row['user_name'])).' '.date('m.d.Y H.y', $row['created']).' | '.html::anchor('news/'.$row['id'], $row['comments'].__(' comments'));
    echo '</td>';
    echo '</tr>';
    echo '</table>';
  }
}
?>

And the result is:

Don't forget that the code for this project can be downloaded from: http://code.google.com/p/kohana-tutorial/

Lesson 2 - Database and Models

In the previous lesson we created a bunch of files just to show a simple message in the browser. It may seem stupid but all these files will save us a lot of work.

Now it's time to talk database.

Lesson 1 - Getting started

Let's get started with the site. This is roughly the structure we are looking for:

First let's configure our application. Kohana's configuration file is located in application/bootstrap.php

pre-Lesson 2: What is MVC?

Kohana is MVC framework. In this lesson, we will see what exactly the MVC letters mean and how to they fit in our application.

MVC stands for Model View Controller. The Model-View-Controller concept is often used in in web development. It provides a convinient way to separate logic and interface.

pre-Lesson: Setting up the development box and installing kohana

I'll use Ubuntu Desktop for development and the first thing I do when starting a new project is to setup local subdomain for the project.

First let's download the framework and create new directory for the project:

Getting to know Kohana

I've been using CodeIgniter for several years. It's a great framework, which gets the things done quickly without forcing you to change yor programming style.

These days I decided to give Kohana a try. It's a forked version of CodeIgniter so there should be some similarities.

The project, that I'll try to create is a simple Hacker News clone. I'll be using the latest stable downloadable version of Kohana v3.0.8 "großen jäger".


I've never used Kohana before. This tutorial is my way of learning it. If you notice something wrong or something that can be done better, just write a comment and I'll try to fix it.
Also I'll borrow some parts of the code from another excelent Kohana 3 tutorial (http://www.dealtaker.com/blog/2009/11/20/kohana-php-3-0-ko3-tutorial-part-1/)

N.B. English is not my native language. But I'll try to write correctly.