Index / Desarrollo Web / PHP / Blog MVC – El theme y primer controlador [p3]

Blog MVC – El theme y primer controlador [p3]

Autor jc mouse lunes, junio 24, 2013

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();    
    }

Hasta este momento, la estructura de tu proyecto debe tener esta forma:

Ejecuta y con esto terminamos esta tercera parte 🙂

Segunda Parte: Blog MVC – Iniciando el proyecto [p2]

Cuarta Parte: Páginas estáticas

Proyecto web blog mvc parte 3

También Te Podría Interesar

Proteger documento PDF con contraseña y limitar permisos desde Java

Los archivos digitales (txt, docx, xlsx, odt, odp, pdf, etc) nos permiten almacenar información el cual en ocasiones, de...

ANSI: Colorear consola de salida de Netbeans

Cuando realizamos proyectos java desde Netbeans, usamos System.out.println para imprimir datos en consola (para depurar,...

JSCRUM .:. Gestor de Proyectos

¿Qué es SCRUM? SCRUM es un modelo de referencia que define un conjunto de prácticas y roles, y que puede tomarse como pu...

Crea un efecto Flip en java swing

Entre los correos y mensajes en facebook y whatsapp que me llegan (y de entrada pido perdón a quienes no puedo responder...

Procedimientos Almacenados: Parámetros IN

Una procedimiento almacenado es un conjunto de sentencias de SQL que se pueden almacenar en el servidor, de esta forma n...

Ejemplo socket java Cliente/Servidor

En este post construiremos un sencillo sistema Cliente/Servidor en lenguaje Java, el sistema consistirá básicamente en u...

10 comentarios en “Blog MVC – El theme y primer controlador [p3]”

Lucas dice:

25 junio, 2013 a las 1:51

Muchas gracias por el aporte amigo!, Tienes una maravilla de blog. Estoy aprendiendo mucho con tus tutoriales y este en especial me interesa mucho, hacía rato que buscaba algo como esto y no lo encontraba. Saludos
Richard dice:

10 julio, 2013 a las 5:59

Hola Jmouse gracias por estos grandes tutoriales, fijate que tengo un problema me sale este aviso:

Notice: Use of undefined constant __KEY__ – assumed ‘__KEY__’ in C:\xampp\htdocs\mvc2\index.php on line 4

Notice: Use of undefined constant __URL__ – assumed ‘__URL__’ in C:\xampp\htdocs\mvc2\index.php on line 5

Notice: Use of undefined constant __THEME__ – assumed ‘__THEME__’ in C:\xampp\htdocs\mvc2\index.php on line 6

Notice: Use of undefined constant __FULL_URL__ – assumed ‘__FULL_URL__’ in C:\xampp\htdocs\mvc2\index.php on line 7

me puedes orientar gracias
1. Mouse dice:
  
  14 julio, 2013 a las 20:46
  
  yo utilizo appserv, para XAMP debes cambiar algunas cosas del servidor en el archivo INI si mal no recuerdo, no uso XAMP lo siento, no es un error en si, si no mas bien un mensaje de alerta que te da XAMP
Richard dice:

18 julio, 2013 a las 0:58

Muy bien estoy revisando el INI. Gracias
Angel dice:

23 agosto, 2013 a las 18:02

Hmm no se supone que solamente la vista debe encargarse de procesar la vista, y que el controlador solo se limita a recibir comandos, recibir datos del modelo, procesar los datos y enviar el resultado a la vista, para que luego recién la vista procese y administre la manera en que va a mostrar los datos?

Sin embargo en este ejemplo el controlador ya prepara toda la vista, y la vista simplemente recibe todo listo para ser mostrado.

Yo más bien creo que el código que pusiste aquí es la vista. Luego el controlador tiene que procesar los datos y enviar el resultado a la vista, luego la vista se encarga de como ordenarlos, que sectores reemplazar, etc…

Te lo digo porque yo empecé viendo tus ejemplos… luego me decían que no estaba siguiendo el patrón MVC, que la vista estaba dependiendo mucho del controlador y que debía separarla del controlador. Me puse a investigar más y leer unos libros, y llegué a la conclusión que el sistema debe ser más genérico. Que hay que aislar totalmente las 3 capas, y creo que el controlador no está haciendo eso, creo que se está involucrando mucho con la vista, en vez de enviar solo datos básicos.
1. Mouse dice:
  
  25 agosto, 2013 a las 20:26
  
  Tu pregunta es muy difícil de responder porque el modelo MVC depende mucho de como interpretemos nosotros como programadores este patrón, esto no quiere decir que tu interpretación sea errónea o la mía, solo son dos puntos diferentes de como resolver un mismo problema.
  
  En este ejemplo, aún no tenemos interacción con la base de datos, por lo cual la vista no tiene mucho que hacer, muchos datos que procesar, pero cuando el modelo nos retorne una serie de registros, nosotros debemos mostrar estos en la VISTA y para ello sera la vista la encargada de procesar estos datos. Pero para esto falta aún unos tutoriales más 🙂
Jorgex dice:

27 agosto, 2013 a las 14:43

hola compañero MAUSE muchas gracias por la colaboracion, al igual que richar no encuentro la manera de solucionar al problema de constantes no definidas
Notice: Use of undefined constant __KEY__ – assumed ‘__KEY__’ in C:\wamp\www\mvc2\index.php on line 3
Notice: Use of undefined constant __URL__ – assumed ‘__URL__’ in C:\wamp\www\mvc2\index.php on line 4
Notice: Use of undefined constant __THEME__ – assumed ‘__THEME__’ in C:\wamp\www\mvc2\index.php on line 5
Notice: Use of undefined constant __FULL_URL__ – assumed ‘__FULL_URL__’ in C:\wamp\www\mvc2\index.php on line 6

en donde encontraria o por donde estaria la solucion a este problema..
adelante Bolivia!!!
OKY dice:

27 septiembre, 2014 a las 15:46

Correcto : ‘__CONSTANTE__’
e
Incorrecto: __CONSTANTE__

Solución.- La constante debe estar entre comillas.
1. GustavoMG dice:
  
  22 diciembre, 2014 a las 20:17
  
  Muchas gracias, tenia el mismo problema y si se soluciono asi.
  Ahora solo me dice Error Fatal: Theme no existe!!! Pero considero que lo tengo bien, y las rutas si estan tal cual dice el tutorial.
  ASI TENGO EL ARCHIVO DE INDEX.PHP
  load();
  }
  ?>
  
  SALUDOS Y MUCHAS GRACIAS POR TU RESPUESTA.
Ale dice:

30 enero, 2015 a las 15:55

Como estas? estoy siguiendo tu guia, pero no encuentro el HTML/CSS que mencionas debería estar en la primera parte del tutorial.

saludos y gracias.