Open Source Web Development Tutorials - Dev Shed

CodeIgniterでブログの見た目を改善する
（2009/03/27公開）

現在までのブログ用アプリケーションの全ソースコード

　このブログ用アプリケーションのビジュアル面をさらに洗練する方法に入る前に，まずはすべてのソースコードを掲載しておこう。これにより、CodeIgniterでここまでどのように作られてきたか、またこれからどのようにルック＆フィールを改善していくことができるか、さらに知っていただく助けとなるだろう。

　ではここで、このブログ用ツールの構成要素となる、次にあげるファイルの構造をご覧いただこう。

// definition for 'blogger.php' file
(located at /system/application/controllers/ folder)

class Blogger extends Controller{
function Blogger(){
// load controller parent
parent::Controller();
// load database class and connect to MySQL
$this->load->database();
// load pagination library
$this->load->library('pagination');
// load helper
$this->load->helper('url');
}
// display all blog entries
function blogs(){
$data['title']='Blog Entries Listing';
$data['result']=$this->db->get('blogs',3,$this->uri->segment(3));
// set pagination parameters
$config['base_url']='http://127.0.0.1/codeigniter/index.php/blogger/blogs/';
$config['total_rows']=$this->db->count_all('blogs');
$config['per_page']='3';
$config['full_tag_open']='<div id="paginglinks">';
$config['full_tag_close']='</div>';
$this->pagination->initialize($config);
// create pagination links
$data['links']=$this->pagination->create_links();
// load 'blogs_view' view
$this->load->view('blogs_view',$data);
}
// display all blog comments
function comments(){
$data['title']='Blog Comments Listing';
$this->db->where('blog_id',$this->uri->segment(3));
$data['result']=$this->db->get('blogs_comments');
// load 'blogs_comment_view' view
$this->load->view('blogs_comment_view',$data);
}
// insert new blog comment
function insert_comment(){
$this->db->insert('blogs_comments',$_POST);
redirect('blogger/comments/'.$_POST['blog_id']);
}
}

// definition for 'blogs_view.php' file
(located at /system/application/views/ folder)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $title;?></title>
</head>
<body>
<h1><?php echo $title;?></h1>
<?php foreach($result->result_array() as $blog):?>
<h2><?php echo $blog['title'];?></h2>
<p><?php echo $blog['text'];?></p>
<p><?php echo anchor('blogger/comments/'
.$blog['id'],'View Blog Comments >>');?></p>
<?php endforeach;?>
<?php echo $links;?>
</body>
</html>

// definition for 'blogs_comment_view.php' file
(located at /system/application/views/ folder)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $title;?></title>
</head>
<body>
<h1><?php echo $title;?></h1>
<?php if($result->num_rows()>0):?>
<?php foreach($result->result_array() as $comment):?>
<p><strong>Author: </strong><?php echo $comment['author'];?></p>
<p><strong>Comment:</strong></p>
<p><?php echo $comment['text'];?></p>
<p><?php echo anchor('blogger/blogs/','<< Back to blog');?></p>
<?php endforeach;?>
<?php endif;?>
<?php echo form_open('blogger/insert_comment');?>
<?php echo form_hidden('blog_id',$this->uri->segment(3));?>
<p>Author:</p>
<p><input type="text" name="author" class="textbox" /></p>
<p>Enter your comments below:</p>
<p><textarea name="text" rows="10" cols="20"></textarea></p>
<p><input type="submit" value="Submit Comment" /></p>
</form>
</body>
</html>

　これら3つのソースファイルは一見しただけでも極めて単純な構造をしていると言えるだろう。つまり、これらのソースコードだけで、このMySQL主導型のブログ用アプリケーションは期待通りの働きをしてくれる。今回の場合、「blogger.php」と名付けられた最初のファイルがプログラムのコントローラになっており、ブログエントリやコメントエントリをそれぞれ対応するデータベーステーブルから取り出し、また備えられたWebフォームを通して新しい投稿を挿入する働きをしている。

　加えて、2つのWebページにブログのデータをエンベッドするため、コントローラクラスによってビューファイルが用いられている。ブログ用ツールの構造全体をご覧いただき、CodeIgniterでデータベース主導型アプリケーションを作ることの簡単さを知っていただくことができただろう。

　しかし、この教育的な旅路はまだ終わりを迎えてはいない。このブログ用ツールのビジュアル的要素はまだまだ未発達でプロっぽく見えないからだ。これはなんとしてでも解決しなければいけない。

　そこで、次の部分では、初めのビューファイルにいくつか基本的なCSSスタイルを組み込んでみる。そうすると、見た目がさらに魅力的になるだろう。では例のごとく、このスタイル処理の方法を知るために、次のリンクをクリックし読み進めていただきたい。