Instalación de una plantila en CodeIgniter

Continuamos con el Tema 2 del desarrollo de un carrito de compras con CodeIgniter. Hoy vamos a ver cómo instalar una plantilla en CodeIgniter, no vamos a utilizar un motor de plantillas pues CodeIgniter no nos obliga a ello, aunque trae uno si lo quisiéramos usar, de hecho el desempeño es mejor si no lo utilizamos. Con CodeIgniter podemos utilizar cualquier plantilla html y adaptarla sin ningún problema, tal y como veremos.
Vamos a utilizar una plantilla muy sencilla; que está compuesta de la siguiente forma: lo que aparece en borde rojo es el contenedor, y dentro de este tenemos el header, el menú y el footer.

 La plantilla la vamos a dividir en sólo 2 archivos: header.php y footer.php; si fuera una plantilla compleja lo ideas sería dividirla en varias partes, pero para este caso por la sencillez de la plantilla así nada más es suficiente. Aparte de los 2 archivos mencionados necesitamos crear una hoja de estilo(CSS) para la plantilla. Empecemos por ubicar la hoja de estilos; creamos una carpeta llamada assets en la raíz de nuestro proyecto, y dentro de assets creamos otra carpeta con el nombre de template, y en ésta última creamos un archivo llamado: style.css ruta donde vamos a ubicar la hoja de estilos: cart/assets/template/

Código de style.css

/* CSS Document */
body {
    margin: 0px; color: #444;
    background-color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px; padding-top: 20px; padding-bottom: 20px;}
  
#container{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width:800px; border: 5px solid #ccc;
    margin-left: auto; margin-right: auto;
    padding-top:3px; padding-bottom: 2px;}
  
h1, h2, h3, h4, h5, h6 {font-weight: bold;color: #21759b;}
h1 {font-size:20px;}
h2 {font-size: 17px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}

a {font-weight: bold; text-decoration: none; color: #21759b;}

a:hover {color: #bf0100; padding-left: 3px;}

#header{height:70px; padding-top:1px;
        background: #f7f7f7; padding-left:10px;
        text-align: left;}

#header h1 {
    font-size:30px; font-family: "Times New Roman",Times,serif;
    color: #bf0100; text-shadow: 0px 0px 2px #444;}
  
/*** MENU ***/
#menu {padding:7px 0px 7px 0px; background: #2d3335;}

#menu a {padding: 6px 15px; font-family: "Times New Roman",Times,serif;
    text-decoration: none; font-size: 13px;
    color: #FFF;}

#menu ul {margin: 0; padding: 0; display:inline;}

#menu li {
    display: inline; background: #bf0100;
    border-radius: 2px; padding: 4px 0px 4px 0px;
    margin-left: 2px;}
  
#menu li a:hover{background: #444;}

.cart_menu{background: #21759b !important;}

/*** CONTENDIDO ***/
#content{
width: 790px;padding:5px; min-height:400px;}
#pagination{clear: both; text-align: center;}

/*************** PRODUCTOS *******************/
    .products{
            height:350px; padding: 4px; margin: 4px;
            border: 1px solid #ddd; background-color: #eee;
            -moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius: 4px;
            text-align: center; float: left;
        }
      
        .products p,label{
            color: #21759b;font-weight:bold;
            font-size: 12px;
        }
        .image{min-height: 184px; min-width: 245px;}
        .image, .price{
            padding-bottom: 5px;font-weight:bold;
        }
        .price{
            color: #bf0100;
        }
    .detalles{
        max-width:200px;text-align: left;
        margin-left:auto;
    }
  
/****** CARRITO ******/
#cart{
    text-align:left; padding:5px;
}

.total, .add a{
    font-size: 13px; color:green; padding:0;
}

.remove a{
    color: #bf0100; padding:0;
}
.pedido a{
    color: green; padding:0;
}  
  
/*** FOOTER ***/
#footer {
    clear: both; width: 800px; padding: 5px 0px 5px 0px;
    background: #ddd; font-size: 10px;
    text-align: center; color: #444;}

Ahora vamos a: cart/application/config/ y abrimos config.php, para hacer algunas modificaciones; una de las cosas que nos va solicitar CodeIgniter es una llave de encriptación para cuando trabajemos con sesiones e igualmente nos la va a pedir cuando implementemos la librería cart puesto que el carrito almacena los productos en una variable de sesión. Más o menos por la linea 227 en config.php definimos la clave de ecriptación que vamos a utilizar:

$config['encryption_key'] = '$P$BDMwkjeFe1yqvOCDQmk5M9SiHPeU5b1';

También vamos a utilizar la sintaxis alternativa de PHP para algunos ciclos y condicionales e igualmente para no tener que hacer siempre echo al imprimir alguna variable; para utilizar dicha sintaxis el archivo ini de PHP debe tener habilitado los "shot tags", pero como CodeIgniter puede sobreescribir estas etiquetas, sólo necesitamos habilitarla esta opción en config.php. Mas menos por la linea 344 la definimos como TRUE.

$config['rewrite_short_tags'] = TRUE;

Seguimos en la misma carpeta config y abrimos autoload.php; aquí vamos a cargar algunos helpers que vamos a necesitar casi en todo momento, los demás librerías y helpers se pueden cargar en su respectivo controlador para que el sistema sea más rápido. los helpers que vamos a utilizar más son: url, html y form. Los cargamos en autoload.php por la linea 67.

$autoload['helper'] = array('url', 'html', 'form');

Luego abrimos el controlador products.php y en el método index quitamos las siguiente linea:

$this->load->view('products_view',$data);

y la reemplazamos por estas 3:

   $this->load->view('front/header',$data);
   $this->load->view('front/content');
   $this->load->view('front/footer');

Ahora vamos a crear las 3 vistas, las cuales son: el header.php, el footer.php y la última la llamamos content.php que es donde se verá el contenido. Dentro de: cart/application/views/ creamos una carpeta llamada front y ahí guardamos las 3 vistas mencionadas . Ruta completa donde vamos a ubicar los 3 archivos: cart/application/views/front/

contenido de header.php

<!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">  
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?=$title?></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="<?=base_url();?>assets/template/style.css" />
</head>
<body>
    <div id="container">
<div id="header">
    <h1>Tienda Virtual con CodeIgniter</h1>
</div><!-- End Header -->
<div id="menu">
    <ul>
        <li><?=anchor('products', 'Home');?></li>  
        <li><a href="#">Portafolio</a></li>
        <li><a href="#">Nosotros</a></li>
        <li><a href="#">Contactenos</a></li>
          
    </ul>
</div><!-- End Menu -->
<div id="content">

Código de content.php

<?=heading($title, 2);?>
      

<?php  foreach($results as $result) {
              
     echo $result->marca." ";
     echo $result->procesador." ";
     echo $result->disco_duro.br(1);
     }
 ?>   

contenido de footer.php

</div><!-- End Content -->
<div id="footer">
    <p>Copyright &copy; 2013 Tienda virtual con CodeIgniter</p>
</div><!-- End Footer -->
</div><!-- End Container -->
</body>
</html

Así pueden probar con cualquier plantilla; lo principal ha tener en cuenta es cargar las vistas en el orden adecuado.

Descargar archvios del Tema 2

Descargar ejemplo 2