Getting Started With CodeIgniter – 4

Constructing the Home Page

This is what my home page looks like now. 

A Note About Graphics and Design

I’ll step you through how I did this using CodeIgniter. By the way, I did all the graphic elements myself or with the use of graphics tools. I am not a graphic designer so I fumble my way around the design of a site. I get hold of any easy to use graphics tools that are available. I’ve done another post that lists the tools l used.

While we are on the subject, the colours used on this site are not my choice – the site owner chose them.

Now back to CodeIgniter.

The General Idea

  1. I created a home page and called it viewhome.php, then placed it in the views folder within CodeIgniter’s directory structure. Actually, I placed it in a sub-directory of the views folder which I called /publicuser.

    Although many pages will be for public consumption, there will also be admin and member pages, so I’m planning ahead and having three sub-directories in the views folder to keep them separate.

    I also created some include files to use as the header and footer parts of the page. These were named include-header.php and include-footer.php and placed in the same sub-directory. 

  2. A file called home.php was also created as a controller for viewhome.php and this was placed in the controller folder within a /publicuser sub-directory.
  3. There is also a model file called systemdata.php.  This was placed directly into in the model folder.  The systemdata.php file is named to indicate that it manages all the system level data. So, at this point I had my basic MVC set-up.
  4. I placed my CSS file in the CSS sub directory of the assets folder that I mentioned in an earlier post. Javascript files were put into the js sub directory or the assets directory, and so on as previously described. All graphics files were also placed in either the images or site-images sub directories.
  5. In the model file called systemdata.php, I placed all the system wide referencees to data – including references to CSS and Javascripts – so that I could refer to them from any controller.

OK – that was the basic idea. Now for the precise steps to achieve it.

config.php

The idea of the config file is to place all the data that can perhaps vary from installation to installation, or perhaps that you want to define once and forget about. This is certainly true of stuff like the name and location of various external files like images, css files and javascript files.

In reality there would be many more (flash, pdf etc), but this is just to give you an idea.

I keep all such external assets in the assets sub-directory off the application folder. The naming of the assets directory is my choice, you can call it what you like – it is not part of the CodeIgniter installation. It’s existence is up to you.

A Note About base_url

In the config file I have two values for base_url. This makes it easy to switch from running the code on your local machine to running on your server. You just comment out the base_url value that you are not using.

$config['base_url'] = "http://localhost//chaingang3/";
//$config['base_url']	= "http://www.example.com/test1";

$config['css']	= "/system/application/assets/css/my.css";
$config['scripts']	= "/system/application/assets/scripts/";
$config['site_images']	= "/system/application/assets/site-images/";
$config['images']	= "/system/application/assets/images/";

routes.php

I want the home.php controller to be called when someone visits my site’s home page (www.example.com or www.example.com/index.html). In order to effect this, you have to change a parameter in the routes.php file which you will find in the config sub-directory.

When CodeIgniter is first installed, the routes.php file will say :

$route['default_controller'] = "welcome"; 

Change routes.php by commenting out the old line and replacing it with the name of your entry controller. Mine is called home.php, so

//$route['default_controller'] = "welcome";
$route['default_controller'] = "publicuser/home";  

The Model

I have to start with, one model that I’ve called systemdata.php as it contains just that. Within this model, I am not accessing a database for the moment, but mostly just the config data that we just placed in the config file.

It’s pretty convoluted but we have managed to separate the data from the view from the control.
If you end up wanting to change the location of the images say, you can do it in one place – in the config file.

class Systemdata extends Model {

    function Systemdata(){
      parent::Model();
    }
    function get_css_filespec(){
      return $this->config->item('css');
    }
    function get_scripts_filespec(){
      return $this->config->item('scripts');
    }
    function get_base_url(){
      return $this->config->item('base_url');
    }
    function get_images_filespec(){
      return  $this->config->item('images');
    }
    function get_site_images_filespec(){
      return $this->config->item('site_images');
    }
}

The View

My home page is called viewhome.php. The only reason I call it viewhome.php and not home.php say, is because I get mixed up with what is a view, and what is a controller otherwise. I therefore have a convention that says, call the controller the plain name (in this case home.php), then place “view” in front of that name to arrive at the name of the view. Works for me.

So viewhome.php is a home page and has the following basic format (note I have pared this down as much as possible so as to only include the essential CodeIgniter information). Also note that I use PHP short-tags <%%>

<head>
<link rel="stylesheet" 
     type="text/css" href="<%=$base_url%><%=$css%>" />
<script type="text/javascript" 
     src="<%=$base_url%><%=$scripts%>myscripts.js"></script> 
</head>
<body>
  	<%=$this->load->view("publicuser/include-header");%>

        <h1>My New Website</h1>
        <p>
        Lots of interesting information
        </p>

	<%=$this->load->view("publicuser/include-footer");%>
</body>

The Controller

Here is the controller, in my case home.php. Again I have cut it down to the bare minimum.

I load the helpers url and html and the database class but these are for later and not pertinent to what I am showing you now.

Next I load the model systemdata, then proceed to use it to extract the filenames and locations that I set up in the config file.

There is enough in this article to get you to a very simple home page, and get you set up to create everything else you need in a more complex web application. It was this basic structure that I found hard to get started.

class Home
 extends Controller {
var $data;

function Home(){
  parent::Controller();

  $this->load->helper('url');
  $this->load->helper('html');
  $this->load->database();
  $this->load->model('systemdata');
 
  $this->data['css'] = $this->systemdata->get_css_filespec();
  $this->data['scripts'] = $this->systemdata->get_scripts_filespec();
 
  $this->data['base_url'] = $this->systemdata->get_base_url();
  $this->data['site_images'] = $this->systemdata->get_site_images_filespec();
  $this->data['images'] = $this->systemdata->get_images_filespec();
  $this->data['scheme'] = $this->systemdata->get_scheme();
}

  function index(){
    $this->load->view('publicuser/viewhome', $this->data);
  }

}

Running The Site

I test the site locally – that is how the config file has been set up – the root has been defined to be the root of my webserver, as in :

$config['base_url'] = "http://localhost//chaingang3/";

To run the site type the following into your browser address window :


http://localhost/chaingang3/index.php

As I’ve mentioned before, I tend to use one controller per view. It helps me keep control. But other people have other ways. The best thing is to read the CodeIgniter forums and see what everyone has to say. I found this article on controllers particularly helpful.

How To Add Images/Photos With Wrapping Text in WordPress via the HTML Code Window


This post has been superceded. Please click through to my post on the CaptionPix Plugin to find out about a WordPress plugin that makes image placement very easy. It’s one we’ve written so please use it, and tell us what else you’d like it to do.

My friend Paula has a WordPress Blog, and she recently asked me how to place images within her text at either the right or left margins, and have text wrap nicely around the image, with a border. The instructions for doing this are the same for a self-hosted WordPress blog, but you can also use a plugin like this one if you are self-hosted. Here, I am specifically describing how to do it using WordPress.com using HTML.

1. Make Sure You Have Enough Text

It may sound like, completely obvious, but if you only have a couple of sentences, you won’t have enough text to wrap – and if you have a few images to include in your text, you will have to have sufficient text to wrap around all of them. So step is to write your text, and make sure you’ve a good few paragraphs.

I have a hosted WordPress blog, so I am heading over there now to write some text. Having done that this is what my editing screen looks like, and so should yours.

2. Locate An Image That Is Suitable for Wrapping

If the image you select is too large, it won’t look good when text is wrapped around it (because it will take up all the available horizontal space on the screen leaving your text nowhere to go, and therefore it won’t wrap). To safeguard against this, your image should not be wider than say, 300pixels.

When an image comes out of a digital camera it is usually enormous. Resize the image to be somewhere between 100 to 300 pixels wide. If you don’t know how to resize an image I will write a post about how to do that soon. In the meantime, I am assuming you know how to resize an image. I am now going to find an image and add it to my WordPress post. Of course you can have WordPress auto-resize your images if you prefer.

3. Add The Image to the Media Library

To add an image, I first click on the Add an Image button (as indicated below), which is the Add media group of buttons.

Add media by clicking the add an image button

This causes a pop up screen to appear like the one shown below. When you see this, click on the upload button and navigate to your image file.

When you have located the image file you want to use, the screen will return to look like this – see below. Ensure you make changes as shown on the next screenshot. You need to give your image a good title (written nicely as it will be visible), remove the Link URL and leave the alignment set to NONE. See below.

Next note the name of your image as suggested on the screenshot below and then click on the save button as indicated. Do NOT putinto the post at this time.

At this point you will have uploaded the image to the WordPress web server computer, where the image IS now associated with the post you are writing, BUT at this stage it is not added into the post. So you won’t see it in the post.

I don’t advise that you click on the Insert Into Post button at this stage, but just like I did, ignore that button for now and just click on the Save all changes button as indicated above. In fact the image is now in the Media Library.

The reason I say don’t use the Insert into Post button is because if you do it at this stage, you are trying to do too many things at once. You are trying to upload an image, and place it into the post all in one go. Maybe you didn’t place your cursor at exactly the right point, and if you add the image to the post now, it may end up in a pace you did not intend.

4. Position Your Cursor

Now return to your post. You can see in my post below that I’ve positioned my cursor right at the start of the post. This is because I want to add my image there so that it is level with the first word I’ve written, then have the text wrap around the image. Please do the same with your image. Place your cursor at the very beginning of your post. See below.

5. Add Your Image

You are now ready to place the image. It is very important to place your cursor in an appropriate place within the text before you add the image.

Now place the image by clicking on the add an image button as you did before, and when the pop up screen appears click on the Media Library button at the top, then click on the Show link next to the image you want to place, (you may have many images in your Media Library), but this time click the button “Insert into Post”. Be careful to leave the options on the screen as they are. You should end up with an image that is positioned as the one shown below.

Now you can add some basic HTML.

Note the name of your image – mine was called les-cornettes1.jpg. You know the name of you own image because you noted it earlier on.

Next you are going to save your work by clicking the save button in the post. (Don’t publish yet – only save).

6. Do Some HTML

Next click on the HTML tab to leave the visual editor and enter code mode. Don’t be scared. It is mostly harmless.

If you remember you placed your image at the beginning of your post, so you won’t have to look far in the HTML to find it. It will be near the beginning. In HTML, images are represented with HTML text (as yours will be in your post) and look like this :


When you have identified your image within your HTML you can change the HTML to make the image behave exactly as you want it to. The only difference between my code above and yours will be the name of the image file (in my case les-cornettes1.jpg and the size – of course these will differ for you), but the image HTML should look very similar.

Now make the following changes to the HTML. I have shown the changes I made in blue so you can see them. (The part shown as pink is where your title for your image should be and it should already be there if you followed the instructions properly. If not, you can manually place the title now.)


style="float:left; margin-right:10px; margin-top:5px; border:1px grey solid" class="alignnone size-medium wp-image-29" title="My favourite restaurant in France" src="http://greenacreage.wordpress.com/files/2008/05/les-cornettes.jpg?w=300" alt="" width="300" height="225" />

Then flip back to the Visual editor and save. You should then see that you have a nicely floated image to the left of the text, with a grey border around it 1 pixel thick, and when you hover your cursor over the image the title shows up for the user. You should have a 10 pixel gap between the text and the image and the top of the image should be at exactly the same position as the top of the text. You can experiment with different values to see the difference it makes. You can for example position the image to float right, or change the thickness of the border to say 3px instead of 1px, change the title, and so on.

7. Admire Your Image

Hope this made sense.

Here is how my image looked on the page after this process.