Polishing the Visual Presentation of a Blogger with the Code Igniter PHP Framework - The blog application’s full source code so far (
Page 2 of 4 )
Before I show you how to polish the visual presentation of this blog application, I first want to list all of its source files. This will reacquaint you with how it was built using Code Igniter, and give you some ideas as to how we can improve its look and feel.
Having said that, please take a look at the signature of the following files, which are the building blocks of the blogger. Here they are:
// 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>
Even at first sight, the three source files listed above seem to be pretty simplistic. They are all the source code required to get this MySQL-driven blog application working as expected. In this case, the first file, called “blogger.php,” is the program’s controller. It is responsible for fetching both blog and comment entries from the respective database tables, as well as for inserting new posts via the corresponding web form.
In addition, the view files are utilized by the controller class simply for embedding blog data into a couple of web pages. Now that the complete structure of the blogger has been put at your disposal, do you realize how easy it is to create database-driven applications with Code Igniter? I bet you do!
However, this educational journey isn't over yet, since the blogger's visual aspect looks primitive and unprofessional. Definitely, this issue needs to be fixed quickly.
Thus, in the following section, I’ll include a few basic CSS styles in the first view file, which will make it look much more appealing. Of course, to learn how this styling process will be performed, please click on the link shown below and keep reading.
