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

Pequeño pero poderoso editor de texto para Ubuntu

Pequeño pero poderoso editor de texto para Ubuntu

Geany es un editor de texto para Sistemas Operativos Linux, windows y MAC que utiliza el kit de herramientas GTK+ con ca...

PanoramaImageView: Vista panorámica

PanoramaImageView: Vista panorámica

En este post haremos uso de PanoramaImageView para agregar a una aplicación android, una vista panorámica de 180° y 360°...

Ejemplo práctico de MVC java Swing con Netbeans

Ejemplo práctico de MVC java Swing con Netbeans

Modelo Vista Controlador (MVC) es un patrón de arquitectura de software que separa los datos de una aplicación, la inter...

Conoce VAR lo nuevo de Java 10

Conoce VAR lo nuevo de Java 10

Java ha ido evolucionando a pasos agigantados en los últimos años gracias al pedido de su comunidad global de programado...

Filtros con JMF y una webcam [Proyecto]

Filtros con JMF y una webcam [Proyecto]

En esta oportunidad dejo a consideracion un proyecto para la captura de video desde una webcam, utilizando filtros como...

TextToSpeech: Convierte texto a voz

TextToSpeech: Convierte texto a voz

TextToSpeech o TTS, es el sintetizador de voz para android, en los celulares inteligentes viene un motor TTS por defecto...

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.

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp