Home arrow PHP arrow Page 3 - Polishing the Visual Presentation of a Blogger with the Code Igniter PHP Framework

Improving the blogger's visual presentation - PHP

This series of articles is aimed at demonstrating how to build a blog application with the Code Igniter PHP framework, which relies on the functionality offered by the MVC approach to create full-featured PHP programs. Thus, if you’re interested in learning how to build a program like this, then start reading this tutorial now! It is the fifth part of the six-part series.

  1. Polishing the Visual Presentation of a Blogger with the Code Igniter PHP Framework
  2. The blog application’s full source code so far
  3. Improving the blogger's visual presentation
  4. Listing the improved version of the blogger
By: Alejandro Gervasio
Rating: starstarstarstarstar / 2
January 06, 2009

print this article



Improving the look of the blogger is only a matter of adding a few simple CSS styles to each of the view files coded in the earlier section, since they’re the elements that actually compose the visual presentation of the application.

Therefore, I’m going to style the first view -- the one responsible for displaying all the blog entries stored on the “blogs” MySQL table. As you’ll see in a moment, this process requires only tying a few CSS styles to the headers and links of the web document, divs and paragraphs, and some additional web page elements as well.

So in short, here’s how this view file now looks, after including the aforementioned 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">


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

<style type="text/css">


margin: 0;

padding: 0;

background: #fff;



font: bold 16pt Arial, Helvetica, sans-serif;

color: #003399;

margin: 18px 0 18px 0;

text-align: center;



font: bold 12pt Arial, Helvetica, sans-serif;

color: #333;

margin: 0 0 18px 0;



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

color: #333;

margin: 0 0 18px 0;



width: 500px;

background: #ccf;

padding: 15px;

margin-left: auto;

margin-right: auto;

margin-bottom: 18px;



width: 500px;

background: #eee;

padding: 5px 15px 5px 15px;

margin-left: auto;

margin-right: auto;



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

color: #00f;

text-decoration: none;



color: #f90;





<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 &gt;&gt;');?></p>


<?php endforeach;?>

<?php echo $links;?>



Now the “blogs_view.php” file includes a few typical CSS styles, which come in useful for polishing the look of the web document that displays the blog entries. In this case, I encapsulated these styles within a couple of <style> tags, but naturally it’s preferable to code them in a separate file.

Finally, to complement the previous explanation, below I included a screen capture that shows clearly the improved visual presentation of the blogger. Here it is:

That looks much better, definitely! Of course, I decided to style the web page that displays the blog entries according to my personal tastes, but you can easily change this to suit your own preferences.

So far, so good. At this stage, you hopefully learned how to polish the visual appearance of the blogger, at least partially. Therefore, the last thing that I’m going to show you in this tutorial will be a list of the complete source code of the blog application, this time including the CSS styles that you just learned.

So, jump forward and read the following section. We’re almost done!

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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


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