Open Source Web Development Tutorials - Dev Shed

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

改善版ブログ用ツールのリスト

　ブログエントリを全表示するWebページのスタイル指定ができたところで、このブログ用プログラムの全ソースコードを掲載しておく。それで、これらのファイルをテストして、おいおい変更してみていただきたい。では、先の部分でCSSスタイルを追加した後の、ブログ用ツールの形は次の通り。

// 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主導型のブログ用アプリケーションの完全にそろったソースコードを作ることができた。ご満悦のところで、ぜひこれらのソースファイルに手を加えて遊んでみていただきたい。どんな変更を加えても、楽しめること請け合いだ。

最後に

　本連載の第5回として今回は、ブログエントリを表示するWeb文書にスタイルを追加することにより、Webブログ用ツールのビジュアル面を洗練する方法をお見せした。ご覧いただいたように、この処理は極めて分かりやすく、特殊なプログラミング能力は必要としない。

　最終回では、ユーザーが投稿したコメントを表示するWeb文書にスタイルを追加し、このブログ用アプリケーションを完成させることにしよう。

　最終回は絶対にお見逃しなく！

（編集部より：次回は、2009年3月30日に公開予定です）

（著者：Alejandro Gervasio）

【原文へのリンク】

前のページ 1 2 3 4