Open Source Web Development Tutorials - Dev Shed

CodeIgniterでブログを完成する！
（2009/03/30公開）

前回までのブログ用ツールの全ソースコード

　ブログ用ツールの完成版を早く見たいと思われるだろうが、まずは前回作ったソースファイルをお見せしておく。それにより、どのようにMVCの手法でこれらのファイルが作られたか、思い起こしていただけるだろう。

　ではここで、このブログ用アプリケーションを構成する3ファイルの現行バージョンを見てみよう。

// 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>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #fff;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #003399;
margin: 18px 0 18px 0;
text-align: center;
}
h2{
font: bold 12pt Arial, Helvetica, sans-serif;
color: #333;
margin: 0 0 18px 0;
}
p{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
margin: 0 0 18px 0;
}
#container{
width: 500px;
background: #ccf;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 18px;
}
#paginglinks{
width: 500px;
background: #eee;
padding: 5px 15px 5px 15px;
margin-left: auto;
margin-right: auto;
}
a:link,a:visited{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #00f;
text-decoration: none;
}
a:hover{
color: #f90;
}
</style>
</head>
<body>
<h1><?php echo $title;?></h1>
<?php foreach($result->result_array() as $blog):?>
<div id="container">
<h2><?php echo $blog['title'];?></h2>
<p><?php echo $blog['text'];?></p>
<p><?php echo anchor('blogger/comments/'.$blog['id'],'View Blog Comments >>');?></p>
</div>
<?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>

　これでソースファイルにすっかりなじんでいただいたことだろう。ご存じの通り、最初のファイルはこのブログ用ツールの主力とも言えるコントローラクラスで、対応するMySQLテーブルからブログのデータを呼び出し、新たなコメントもデータベースに挿入してくれる。

　ほかの2つのファイルは、単にWebページの形でこれらのブログデータを表示するためのテンプレートとなっている。これですっかりご理解いただけたことだろう。

　では、前述のファイル群がどのように協働しあうのかを知っていただいたところで、ブログ用ツールの最後のビジュアル部分を改良していくことにしよう。それはユーザーによって送信されたコメントを、新しいエントリを投稿するためのWebフォームとともに表示する部分だ。

　このタスクについては次の部分で深く討議する。方法を知るためには、次の部分をお読みいただこう。