I know that you want to see how the finished blogger looks. First, however, I will list its source files; they were built in the preceding tutorial. Doing so will help you to recall more easily how these files were created by using the MVC approach. That being clarified, here are the three files that comprise the blog application, in its current version: // 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’ve taken a close look at the above source files, I should assume that you’re familiar with them. As you’ll surely recall, the first of these files is a controller class, which is really the workhorse of the blogger; it fetches blog data from the corresponding MySQL tables, and also inserts new comments into the corresponding database. The other two files are simply templates used by the controller to display this blog data in the form of web pages. Now, does all this thing ring any bells for you? I bet it does! Thus, if you understand how the previous files link with each other, it’s time to improve the visual appearance of the last view that comprises the blogger. This one displays comments submitted by users, along with the web form that permits them to post new entries. This specific task will be discussed in depth in the following section, so to learn how it will be accomplished, please read the next few lines.
blog comments powered by Disqus |
|
|
|
|
|
|
|