Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
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:

theme netbeans

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:

tree project

Ejecuta y con esto terminamos esta tercera parte 🙂

elefante azul

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

Cuarta Parte: Páginas estáticas

Proyecto web blog mvc parte 3

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Cargar fuente TTF

Cargar fuente TTF

Necesitamos: Android Studio 2 tipos de fuente TTF Agregar Archivo de fuente al proyecto Paso 1: Crear carpeta assets Cli...

Juego de Tragamonedas o Tragaperras

Juego de Tragamonedas o Tragaperras

El juego de las tragamonedas o tragaperras es un juego muy popular de azar que se puede encontrar tanto en los casinos o...

Juego de memoria para niños (Código Fuente)

Juego de memoria para niños (Código Fuente)

En un post anterior, desarrollamos un swing para simular un efecto FLIP  y recibí algunos mensajes pidiéndome un ejemplo...

Crea una ventana de dialogo “Acerca de…” personalizado

Crea una ventana de dialogo “Acerca de…” personalizado

Cuando se crean aplicaciones android o cualquier otro tipo de software, es importante dejar información del o los desarr...

Hola Bolivia con LibGDX

Hola Bolivia con LibGDX

¿Que es LibGDX? LibGDX es un framework escrito en java y C/C++  para el desarrollo de videojuegos, es multiplataforma (W...

Métodos Numéricos: Sustitución Directa

Métodos Numéricos: Sustitución Directa

El Método de Sustitución Directa básicamente consiste en asumir un valor, reemplazar el mismo en la función despejada y...

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

  1. Lucas dice:

    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

  2. Richard dice:

    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:

      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

  3. Richard dice:

    Muy bien estoy revisando el INI. Gracias

  4. Angel dice:

    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:

      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 🙂

  5. Jorgex dice:

    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!!!

  6. OKY dice:

    Correcto : ‘__CONSTANTE__’
    e
    Incorrecto: __CONSTANTE__

    Solución.- La constante debe estar entre comillas.

    1. GustavoMG dice:

      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.

  7. Ale dice:

    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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

PHPUnit es un framework que se utiliza para escribir tests en PHP, Netbeans nos permite configurarlo y usarlo fácilmente...

Una Prueba Unitaria, es una forma de comprobar que nuestro código, hace lo que se supone debe hacer; es decir, se asegur...

La prueba del camino básico, es una prueba de “caja blanca” que consiste en verificar el código de nuestros...

Si quieres cambiar el nombre de tus atributos sin tener que reescribir código java por X o Y razón, GSON te permite reno...

Android Bolivia

Bandera en Alto