Creating Static Pages in CodeIgniter

We learned installation process of CodeIgniter in the last session. So from today onwards we will learn how to use CodeIgniter. For today let us learn to create static pages using codeigniter in this Creating Static Pages in CodeIgniter tutorial.

We know that codeigniter works to MVC (Model-View-Controller) software architecture.
This model is about separating the logic from its design (presentation) part.
This model consists of 3 parts: view, controller and model.
The user interacts with the view by performing operations like clicking a button or submitting a form, etc.
The controller handles the user input and transfers the information to the model.
The model receives the information and update’s its state.
The view then checks the updated state of the model and responds accordingly.

Now let us turn to the creation of static pages:

1. The first thing in creation of static page is setting up a controller.
  - A controller is a class that helps delegate work.
  - For this you have to create a file pages.php in CodeIgniter/application/controllers i.e. the path of pages.php will be CodeIgniter/application/controllers/pages.php.
  - Write the following code inside pages.php file:

<?php
	class Pages extends CI_Controller
	{
		public function view($page='home')
		{
			
		}
	}
?>

1. - Here we have defined a class named Pages that extends CI_Controller. CI_Controller is an inbuilt application controller class located in CodeIgniter/system/core/Controller.php file.
  - Since the Pages class extends CI_Controller class, it can inherit the methods and variables defined in CI_Controller class.
  - Next the class Pages has a function view() defined in it with one parameter that takes a page as its parameter.
  - The controller will now become the centre of your web application. It will be considered as a super object and will be denotes as $this just like a class in PHP.

1. Next step is to create two views (common pages to all other pages) i.e. two page templates.
  - Template is a logic that written once can be used number of times.
  - We will create two PHP pages, one for header and another for footer that can be used as templates in the web application.
  - For this you need to create a folder templates in the CodeIgniter/application/views, so that your common files remain at one place in templates folder.
  - The created templates folder is shown in the figure below:

fig 1

1. - Now create a file header.php inside the templates folder and write the following code in it:

<html>
<head>
<title>Static Pages Tutorial</title>
</head>
<body>
	<h1>Welcome to <?php echo $title; ?> of Static Pages Tutorial</h1>

1. - Then after this create a footer.php page inside templates folder and write the following code in it:

</body>
<footer>
	<em>&copy; 2015</em>
</footer>
<html>

1. - Here our header and footer are ready to use with any other page.
  - We have the html head section with title in the header.php page. We have also started the body section in header.php page with a statement that welcomes the user in the particular page opened.
  - Next we have a footer defined in the footer.php page and closed the body and html tag.

1. The common things have been done, now we need to create the body part of the page.
  - For this create another folder named pages in CodeIgniter/application/views folder.
  - The created pages folder is shown below:

fig 2

1. - Inside this pages folder create a file home.php which will contain only the body part of the homepage.
  - Write the following code in home.php file:

<br><br>
<h2>Welcome to CodeIgniter</h2>
<br>
<h3>Enjoy learning it.</h3>

1. - Here we have just coded the body part of home.php page. The body tag of html has been started in header.php page, so directly the content is written in home.php page.
  - You can create any number of pages in this pages folder that you want in the web application.

1. Editing the pages.php file in CodeIgniter/application/controllers.
  - We have now finished with the templates and the body of homepage. So to assemble all these pages we have to approach the controller which is pages.php file in our case.
  - So open the pages.php file and append continue writing the following code:

<?php
	class Pages extends CI_Controller
	{
		public function view($page='home')
		{
			if(!file_exists('application/views/pages/'.$page.'.php'))
			{
				echo "Sorry, file does not exist";
			}
			else
			{
				$data['title']=ucfirst($page);
			$this->load->view('templates/header',$data);
				$this->load->view('pages/'.$page,$data);
				$this->load->view('templates/footer',$data);
			}
		}
	}
?>

1. - We had set up a controller with a view() method. But now we want to display the page we have created.
  - The pages should be displayed in the header, home, footer order so that the header section come at the top, the home page body in the middle and the footer at the bottom.
  - So in the view() method we take the page to be displayed as the parameter, then we checked to see if the home.php file exists in the pages folder using the in-built file_exists() function as shown below:

if(!file_exists('application/views/pages/'.$page.'.php'))

1. - Here if the desired page exists, it will be displayed otherwise error message will be displayed.
  - If the page exists, it is displayed using the following code in the else part:

else
{
	$data['title']=ucfirst($page);
	$this->load->view('templates/header',$data);
	$this->load->view('pages/'.$page,$data);
	$this->load->view('templates/footer',$data);
}

1. - Here we have passed the page in our $page parameter to the in-built ucfirst() function which capitalizes the first letter of the string and stored in the $data array with key title.
  - Now the $data array contains the title of the page with its initial letter capitalized as the value of key title.
  - Now next step is to display the header page. This is done using the statement,

$this->load->view('templates/header',$data);

1. - Here, we have the path of header.php page and the $data array as parameters of the view() function.
  - We had used the title of the page in the header.php page such that whichever page is opened, it will show its title using statement
```
<?php echo $title?>
```
    .
  - So in the second parameter of view() function $data array is passed to the header page to make the title available.
  - Remember the values stored in $data array are assigned to the variables with the names of their keys. I mean the $data[‘title’] in controller will be accessed as $title in view.
  - Then after the header, the home and footer is also loaded similarly.

1. Next step is to see your page in the browser.
  - Before browsing your page let us understand something about the URL supported by MVC architecture.
  - The MVC architecture supports the following URL:

http://domain_name/[controller-class]/[controller-method]/[arguments]

1. - So we will browse our page in the similar manner.
  - Open your browser and type the following address in the address bar:

http://localhost/CodeIgniter/index.php/pages/view

1. - In the above address:
  - http://localhost -> is your localhost machine.
  - CodeIgniter/ -> is the CodeIgniter folder on your server
  - index.php/ -> is the default page in CodeIgniter
  - pages/ -> is your controller-class name
  - view/ -> is your controller-method name
  - the output that you get with the URL is shown below:

fig 3

1. If instead of writing such a long address, you want your homepage to be loaded automatically, then do the following steps:
  - Go to CodeIgniter/application/config folder and open routes.php file with notepad/notepad++.
  - The routes file in the config folder is shown below:

fig 4

1. - The routes.php file contains the following statement on line number 41:

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

1. - Here the default controller given is welcome. We need to replace the default controller to the controller and method separated by forward slash as shown below:

$route['default_controller'] = "pages/view";

1. - This will set our web application controller as default controller as we have assigned the $route’s default_controller parameter to our pages controller-class followed by the view controller-method.
  - The routes file with changed default controller is shown below:

fig 5

1. - Save the routes.php file after the changes and close it.

1. Now just open the browser and write the following address in its address bar:

http://localhost/CodeIgniter

1. - You will get the same output as shown in fig 3.
  - Still the output with the above address is shown below which allows auto-loading of our web application.

fig 6