CodeIgniter - Form: Adding CSSTag: CodeIgniter, framework, MVC, CSS Category: PHP Framework
post: 24 Feb 2008 read: 2,903
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:
|
|
| Give Your Opinion | Recommend
|
