CodeIgniter - Form: Adding CSS

CodeIgniter Form Step By Step Tutorial - Part 7: At previous post, we talk about how to collect all parameters at one general method at model. Now, we see another advantage of that way. For example, we will add a css. Follow these steps:

define general css that used. Open "config.php" within directory CodeIgniter\system\application\config.
Add following code. The line posisi is up to you. I add at last line before ?>
```
$config['css'] = 'mystyles.css';
```
Create a file named mystyles.css within root application: \CodeIgniter\.

Enter example code like this:

h1{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:30px;
}
p{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
}
#menu{
	height:50px;
}
#menu ul{
	list-style-type:none;
	margin-left:0px;
}
#menu li{
	float:left;
	padding:10px;
}
#footer{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}

Open model file named "books_model.php" within CodeIgniter\system\application\models. Add two lines like line 12 and 13 following code:

<?
class books_model extends Model{
	
  function books_model(){
	parent::Model();
	$this->load->helper('url');				
  }
	
  function general(){
	$this->load->library('MyMenu');
	$menu = new MyMenu;
	$data['base']		= $this->config->item('base_url');
	$data['css']		= $this->config->item('css');		
	$data['menu'] 		= $menu->show_menu();
	$data['webtitle']	= 'Book Collection';
	$data['websubtitle']= 'We collect all title of 
		                   books on the world';
	$data['webfooter']	= '© copyright by step 
		                   by step php tutorial';
		
	return $data;	
  }
}
?>

Then, update "books_main.php" within CodeIgniter\system\application\views. Update <head></head>, like this:

<html>
<head>
<link rel="stylesheet" type="text/css" 
      href="<?php echo "$base/$css"?>">
</head>
<body>
<div id="header">
<? $this->load->view('books_header'); ?>
</div>
<div id="menu">
<? 	$this->load->view('books_menu'); ?>
</div>

test list

<div id="footer">
<? $this->load->view('books_footer'); ?>
</div>

</body>
</html>

Last, update "books_input.php" within CodeIgniter\system\application\views. Update <head></head>, like this:

<html>
<head>
<link rel="stylesheet" type="text/css" 
      href="<?php echo "$base/$css"?>">
</head>
<body>
<div id="header">
<? $this->load->view('books_header'); ?>
</div>
<div id="menu">
<? $this->load->view('books_menu'); ?>
</div>

test input

<div id="footer">
<? $this->load->view('books_footer'); ?>
</div>

</body>
</html>

Point your browser to http://localhost/CodeIgniter/index.php/books/main. May be get like this: codeigniter form - use css

Database Tutorial

Security Tutorial

Framework Tutorial

Template Tutorial

API Tutorial

Learn Facebook

JS Framework Tutorial

AJAX Tutorial

Web Services Tutorial

Package Post