Blog MVC – El theme y primer controlador [p3]

Tercera parte del tutorial [Crea tu blog con el patrón MVC y php]

En este post trabajaremos en el Theme del blog, agregaremos 4 carpetas al theme ‘sampleblog‘, estas son:

CSS: para las hojas de estilo

images: imagenes JPG, GIF, PNG

js: para todos los archivos de javascript.

modules: en esta carpeta se guardaran los archivos HTML que formen parte del theme como ser las secciones (footer, header, menu, etc), o también código dinamico para mostrar en las vistas, por ejemplo las tablas.

Nuestro proyecto, debe tener ahora esta apariencia:

En la primera parte de este tutorial [1], se dejo un archivo HTML/CSS el cual es el THEME que usaremos para el blog. Para continuar este tutorial, debes descargarlo.

Hoja de estilos

1.- Crea una hoja de estilo que llamaremos style.css en la carpeta CSS, abre con el notepad el archivo style.css de la carpeta ‘theme blog’ copia el contenido y pega en la nueva hoja de estilo que creaste en el proyecto.

2.- Copia el contenido de la carpeta images de ‘theme blog’ y pega en la carpeta images del proyecto.

3.- Debemos corregir las rutas del imágenes en las hojas de estilo, originalmente tenemos:

background-image: url(images/bg.jpg);

Cambiaremos a: background-image: url(../images/bg.jpg); , como vemos agregamos un ‘…/’ a la ruta de las imágenes 🙂 debes hacer esto para cada una de mas imágenes de la hoja de estilo.

4.- Para terminar el CSS, añade el siguiente trozo de código al final.

/*== estilos tabla ==*/
.tabla th {
padding: 5px;
font-size: 12px;
background-color: #f80;
color: #fff;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #999999;
font-family: "Trebuchet MS", Arial;
text-transform: uppercase;
}

.tabla td {
padding: 5px;
border-width: 1px;
border-style: solid;
border-color: #999999;
text-align:right;
} 

.tags{
    font-size: 11px;
    font-style: italic;
}

Archivo principal.php

1.- Crea un PHP Web Page que llamaremos principal.php en la carpeta ‘sampleblog‘ y copia el contenido del archivo index.html de la carpeta ‘theme blog‘ en principal.php.

Nota: Por lo general estos archivos del theme se llaman index.php, pero para no confundir con el index.php base de la aplicación, en esta ocasión lo llamamos principal.php

2.- Añadimos los estilos al theme, busca la siguiente linea de código

<link rel="stylesheet" href="style.css" type="text/css" />

reemplaza por:

<link rel="stylesheet" type="text/css" href="<?php echo __FULL_URL__; ?>css/style.css" />

3. Busca la etiqueta de contenido:

<div class="content">

Eliminaremos el contenido estático y escribiremos el siguiente código:

<!-- contenido -->
<div class="content">
    <?php echo (isset($content))?$content:'Not Found'; ?>
</div>
<!-- contenido:end -->

4. Si nos fijamos en la plantilla del theme, vemos que existe una imagen enlazada directamente sin el uso de CSS, si la dejamos como esta, cuando carguemos el theme, no se vera dicha imagen.

<p><img class="img" src="images/photo.gif" alt=" " />Name: jc mouse<br />Location: Bolivia</p>

debemos modificar el SRC de la imagen de la siguiente manera:

<img class="img" src="<?php echo __FULL_URL__; ?>images/photo.gif" alt=" " />

Para terminar esta parte, crearemos un archivo más de tipo PHP Web Page, este se llamara home.php y debe ubicarse en la carpeta modules del theme, su contenido por el momento sera:

<div>
    <h1>Ola q ase</h1>
    <img title="php" src="http://novacreations.net/wp-content/uploads/2009/08/php-logo-e.jpg" alt="" width="300" height="193" />
</div>

Index.php y el primer controlador

Ya tenemos el theme listo, pero si ejecutas el proyecto, no veras nada porque falta todavía enlazar la vista con el controlador, debemos modificar entonces el archivo index.php

Comenzaremos primero con la parte cuando no existe ninguna solicitud GET y POST, osea cuando usamos una URL de la forma www.mipagina.com

Existen diferentes formas de implementar un controlador en MVC, hay quienes usan un solo controlador para toda la aplicación a modo de supercontrolador 🙂 otros utilizan un controlador para cada modelo o vista, nosotros haremos uso de la segunda opción.

En la carpeta CONTROLLER, crea un archivo php homeCtrl.php , el código que debes colocar en ella es el siguiente:

<?php
/**
 * Controlador 
 */
class homeCtrl {

    /** Constructor de clase */
    public function __construct() { } 

    /**
 * Metodo para cargar la vista
 */
    public function load()
    {        
        //obtiene contenido de la vista del home 
        if( is_file( 'application/view/themes/'. __THEME__ .'/modules/home.php' ) )
        {
            $content = file_get_contents( 'application/view/themes/'. __THEME__ .'/modules/home.php' );            
        }
        else
        {
            $content = 'Archivo home.php no existe';

        }      
        //si el archivo principal.php existe 
        if(is_readable( 'application/view/themes/'. __THEME__ .'/principal.php' ))
        {            
            include 'application/view/themes/'. __THEME__ .'/principal.php';                    
        }
        else
        {
            echo 'Error critico: archivo de theme [principal.php] no existe.';
        }        
    }

}//--> fin clase
?>

Esta clase controlador, cargara el contenido del archivo home.php y asigna su valor a la variable $content, después carga el archivo principal.php en el cual esta declarada la variable $content para finalmente imprimir el resultado en pantalla.

Ya en el archivo index.php, modificaremos la sección de ‘manejo de variables ‘ de la siguiente forma:

/* ===[ manejo de variables ]=== */
    if( $_POST )
    {
        //codigo aqui 
    }
    else if( $_GET )
    { 
        //codigo aqui 
    }    
    else
    {
        include_once( "application/controller/homeCtrl.php" );
        $home = new homeCtrl();
        $home->load();    
    }