Home arrow PHP arrow Page 3 - Completing a Blogging Application with the Code Igniter PHP Framework

Adding CSS styles to the blogs_comments_view.php file - PHP

Welcome to the conclusion of a six-part series on building a MySQL-driven blogging application with the Code Igniter PHP framework. By using the framework, you'll be taking advantage of the MVC pattern to separate the application's logic from its visual presentation. This article will focus on the improving the appearance of the application's final details: the section concerned with receiving and displaying comments.

TABLE OF CONTENTS:
  1. Completing a Blogging Application with the Code Igniter PHP Framework
  2. The full source code of the blogger in its previous state
  3. Adding CSS styles to the blogs_comments_view.php file
  4. Showing the blogging applicationís full source code
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
January 13, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Improving the visual aspect of the view file that lets users to see the comments that have been made on a particular entry, as well as submitting new posts, is a matter of coding a few simple CSS styles. Thatís all.

In this case, Iím going to utilize practically the same group of styles that I wrote for the other view, to give them a consistent look. But naturally, this process is completely customizable, so youíre free to provide the whole blog application with the appearance that best suits your needs.

Having clarified that point, hereís the signature of the view file in question, this time including the pertinent CSS styles:


<!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;

}

a:link,a:visited{

font: normal 11px Verdana, Arial, Helvetica, sans-serif;

color: #00f;

text-decoration: none;

}

a:hover{

color: #f90;

}

textarea, input.textbox{

width: 300px;

padding: 3px;

font: normal 11px Verdana, Arial, Helvetica, sans-serif;

color: #000;

}

</style>

</head>

<body>

<h1><?php echo $title;?></h1>

<?php if($result->num_rows()>0):?>

<?php foreach($result->result_array() as $comment):?>

<div id="container">

<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/','&lt;&lt; Back to blog');?></p>

</div>

<?php endforeach;?>

<?php endif;?>

<div id="container">

<?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>

</div>

</body>

</html>


Didnít I tell you that polishing the visual presentation of the above view file was a straightforward process? As you can see, all I did before was style some of the elements included in the file in question to make it look a bit more professional.

You may get a clearer idea of the final result of this styling process if you look at the following complementary image:



At this point, not only does the blog application work correctly, but it looks pretty appealing, too. Logically, if youíre planning to introduce other modifications to any of the source files, donít forget to save them to the corresponding folders, so they can be tested locally.

In the last section, Iíll be listing the complete source code of the blogger, including the changes that I made before. So please read the next few lines. We're almost finished!



 
 
>>> More PHP Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

PHP ARTICLES

- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: