Polishing the Visual Presentation of a Blogger with the Code Igniter PHP Framework - Listing the improved version of the blogger (
Page 4 of 4 )
Having already styled the web page that shows all of the blog entries, it’s time to list the full source code that comprises the blog program, so you can test and eventually change any of its files. Here’s how the blogger looks after including the CSS styles shown in the previous section:
// 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>
Now that you have the complete source code of this MySQL-driven blog application, don’t you feel satisfied? You should, because at this moment you have the chance to play around with the source files. Whatever you do, one thing is for sure: fun is already guaranteed!
Final thoughts
In this fifth chapter of the series, I demonstrated how to polish the visual presentation of the web blogger by styling the web document that displays blog entries. As you saw before, this process was extremely straightforward and didn’t require any special programming skills.
In the last article, I’ll be styling the web documents that shows user-submitted comments, in this manner completing the development of this blogger application.
Now that you’ve been warned, don’t miss the final part!
