Foros del Web » Programando para Internet » PHP »

[SOLUCIONADO] ¿Cómo construir un front-end correctamente?

Estas en el tema de ¿Cómo construir un front-end correctamente? en el foro de PHP en Foros del Web. Esa es mi pregunta. A la hora de construir un front-end no termino de aclararme cómo hay que construirlo correctamente utilizando solamente PHP, HTML y ...

  #1 (permalink)  
Antiguo 27/11/2013, 03:45
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 11 años, 5 meses
Puntos: 84
¿Cómo construir un front-end correctamente?

Esa es mi pregunta. A la hora de construir un front-end no termino de aclararme cómo hay que construirlo correctamente utilizando solamente PHP, HTML y CSS.

Creo que he entendido muy bien los modelos de arquitectura, en especial el MVC. Pero cómo mostrar la información correctamente sin que PHP y HTML terminen en una maraña de código no lo tengo del todo claro, y cómo controlar adecuadamente las acciones del usuario mediante botones, enlaces, etc. tampoco lo tengo claro. Veo muchas posibilidades, pero no termino de decantarme por una en especial.

Por ejemplo, trabajando con MVC tengo clara la parte del modelo y el controlador, pero en la vista me pierdo por no saber cómo administrar bien las acciones del usuario.

He buscado pero no he encontrado nada al respecto. Solamente algún que otro tutorial pero muy básico que no me aporta nada de lo que busco, un front-end con consistencia y fácil de mantener.

¿Alguien puede ayudarme?
__________________
Ayúdame a hacerlo por mi mismo.
  #2 (permalink)  
Antiguo 27/11/2013, 03:50
Avatar de Cuervoo  
Fecha de Ingreso: octubre-2013
Mensajes: 165
Antigüedad: 10 años, 6 meses
Puntos: 43
Respuesta: ¿Cómo construir un front-end correctamente?

Para no mezclar código html y php tenés que usar algún motor de plantillas, o crearte uno vos. Podés usar Smarty, Twig, Haanga, hay varios.

Lo que no entiendo bien es la parte de administrar las acciones de los usuarios a que te referís.
  #3 (permalink)  
Antiguo 27/11/2013, 03:53
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 11 años, 5 meses
Puntos: 84
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por Cuervoo Ver Mensaje
Para no mezclar código html y php tenés que usar algún motor de plantillas, o crearte uno vos. Podés usar Smarty, Twig, Haanga, hay varios.

Lo que no entiendo bien es la parte de administrar las acciones de los usuarios a que te referís.
Muchas gracias Cuervoo! :)

Me refiero a cómo administrar correctamente las acciones del usuario mediante $_GET y $_POST.
__________________
Ayúdame a hacerlo por mi mismo.
  #4 (permalink)  
Antiguo 27/11/2013, 03:57
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: ¿Cómo construir un front-end correctamente?

Te recomiendo que uses un MVC sencillo, para aprender, como KissMVC, TinyMVC, TinyPHP o DooPHP. Sirven para practicar el patrón MVC, e incluso son suficientes para hacer ciertas páginas que no tengan complicaciones.
Cuando necesites algo más, pásate a laravel, por ejemplo, que es un MVC de peso medio (aunque muy utilizado).
Y en el top de los MVC's pesados tenemos a symfony 2, que es el que más me gusta, y zend framework, de los creadores de PHP, codeigniter, phpcake, yii, etc... El que mejor documentación en español tiene creo que es symfony, aunque la verdad, con los otros no he gastado mucho tiempo en buscar.

Los patrones MVC suelen tener un objeto REQUEST, que hace el trabajo duro de extraer y analizar, para capturar todos los datos que pueda mandar el usuario al interactuar con la página. Y ese objeto REQUEST sólo debe usarse en el controlador.
  #5 (permalink)  
Antiguo 27/11/2013, 04:02
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 11 años, 5 meses
Puntos: 84
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por marlanga Ver Mensaje
Te recomiendo que uses un MVC sencillo, para aprender, como KissMVC, TinyMVC, TinyPHP o DooPHP. Sirven para practicar el patrón MVC, e incluso son suficientes para hacer ciertas páginas que no tengan complicaciones.
Cuando necesites algo más, pásate a laravel, por ejemplo, que es un MVC de peso medio (aunque muy utilizado).
Y en el top de los MVC's pesados tenemos a symfony 2, que es el que más me gusta, y zend framework, de los creadores de PHP, codeigniter, phpcake, yii, etc... El que mejor documentación en español tiene creo que es symfony, aunque la verdad, con los otros no he gastado mucho tiempo en buscar.

Los patrones MVC suelen tener un objeto REQUEST, que hace el trabajo duro de extraer y analizar, para capturar todos los datos que pueda mandar el usuario al interactuar con la página. Y ese objeto REQUEST sólo debe usarse en el controlador.
Gracias marlanga :)

De acuerdo en que utilizar MVC es correcto. Pero en mi caso no lo necesito. Solo necesito saber cómo construir correctamente la vista. Si alguien puede pasarme documentación al respecto.

Quiero hacerlo por mi mismo para aprender. Delegar en un framework sin saber hacerlo por mi mismo no lo veo una buena manera de aprender los detalles de las cosas.
__________________
Ayúdame a hacerlo por mi mismo.
  #6 (permalink)  
Antiguo 27/11/2013, 04:05
Avatar de Cuervoo  
Fecha de Ingreso: octubre-2013
Mensajes: 165
Antigüedad: 10 años, 6 meses
Puntos: 43
Respuesta: ¿Cómo construir un front-end correctamente?

Como construir el html o como es la relación lógica entre el controlador y la vista?
  #7 (permalink)  
Antiguo 27/11/2013, 04:10
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 11 años, 5 meses
Puntos: 84
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por Cuervoo Ver Mensaje
Como construir el html o como es la relación lógica entre el controlador y la vista?
Cómo construir la relación lógica entre el controlador y la vista, tú lo has expresado mejor que yo :D
__________________
Ayúdame a hacerlo por mi mismo.
  #8 (permalink)  
Antiguo 27/11/2013, 04:16
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: ¿Cómo construir un front-end correctamente?

Hasta que no sepas cómo funciona un MVC y las posibilidades que te ofrece, no podrás crear tu propio MVC. Y conocerlo sólo es posible a través de la práctica, usándo alguno. Además correrás el peligro de que durante el proceso de apredizaje, te guste, y decidas utilizar siempre ese framework. Y si no te gusta, sabrás la causa y cuando pruebes otro, o intentes programar uno, actuarás en consecuencia. Son todo ventajas.

Empezaste preguntando cómo se hace un front-end correctamente, no cómo programar tu propio framework MVC. Programar tu propio framework MVC no es hacer correctamente las cosas, porque cometerás errores intentando reinventar la rueda cien veces. Gastarás tiempo en un proyecto que puede que al final no cuaje. Sin embargo, dedicar tiempo a aprender un framework MVC te permitirá hacer cualquier tipo de página o aplicación web a un nivel decente de calidad, que es tu objetivo.

Es sólo mi consejo.
  #9 (permalink)  
Antiguo 27/11/2013, 04:30
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 11 años, 5 meses
Puntos: 84
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por marlanga Ver Mensaje
Hasta que no sepas cómo funciona un MVC y las posibilidades que te ofrece, no podrás crear tu propio MVC. Y conocerlo sólo es posible a través de la práctica, usándo alguno. Además correrás el peligro de que durante el proceso de apredizaje, te guste, y decidas utilizar siempre ese framework. Y si no te gusta, sabrás la causa y cuando pruebes otro, o intentes programar uno, actuarás en consecuencia. Son todo ventajas.

Empezaste preguntando cómo se hace un front-end correctamente, no cómo programar tu propio framework MVC. Programar tu propio framework MVC no es hacer correctamente las cosas, porque cometerás errores intentando reinventar la rueda cien veces. Gastarás tiempo en un proyecto que puede que al final no cuaje. Sin embargo, dedicar tiempo a aprender un framework MVC te permitirá hacer cualquier tipo de página o aplicación web a un nivel decente de calidad, que es tu objetivo.

Es sólo mi consejo.
No quiero crear mi propio MVC, quiero saber cómo se hace esa relación correctamente. No quiero crear mi propia herramienta, quiero lograr una técnica, una generalidad, una metodología para saber cómo se hace.
__________________
Ayúdame a hacerlo por mi mismo.
  #10 (permalink)  
Antiguo 27/11/2013, 04:31
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: ¿Cómo construir un front-end correctamente?

Y quieres aprender cómo trabajan los MVC, sin usar ninguno. No entiendo.
KissMVC son prácticamente 3 ficheros, y se aprende rápido. Úsalo. Verás como en dos días, no tendrás más dudas de cómo usar el modelo, la vista y el controlador.
  #11 (permalink)  
Antiguo 27/11/2013, 04:41
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 11 años, 5 meses
Puntos: 84
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por marlanga Ver Mensaje
Y quieres aprender cómo trabajan los MVC, sin usar ninguno. No entiendo.
Supongo que antes de que se inventaran los frameworks MVC para PHP y HTML había alguna manera de hacer esto de manera correcta ¿no? Eso es lo que quiero aprender. Un framework no deja de ser una herramienta, detrás de esa herramienta hay una manera de organizar el código y relacionarlo que sigue una técnica o características de programación ¿cierto?, eso es lo que quiero saber.

Por que si para poder utilizar MVC con PHP y HTML siempre se remite a un framework entonces ¿Es que no hay manera de salirse de los frameworks y saber cómo funcionan las cosas y poder adquirir esa metodología para uso propio? Quiero lograr algo "casero", sencillo.
__________________
Ayúdame a hacerlo por mi mismo.
  #12 (permalink)  
Antiguo 27/11/2013, 04:46
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: ¿Cómo construir un front-end correctamente?

¿Y qué haces aquí preguntando? Te dije que si quieres aprender, lo mejor es usar uno ligero. Pero has optado por preguntar en un foro y que sea alguien que ya conoce los frameworks mvc, el que te resuelva las dudas.
No quiero que te molestes. Te estoy haciendo un favor en insistir en que uses un MVC ligero, que además puedes ver cómo está programado. Aprenderás la filosofía de trabajo e intuirás cómo están programdos. Te darás cuenta con el paso del tiempo.
  #13 (permalink)  
Antiguo 27/11/2013, 04:50
Avatar de Cuervoo  
Fecha de Ingreso: octubre-2013
Mensajes: 165
Antigüedad: 10 años, 6 meses
Puntos: 43
Respuesta: ¿Cómo construir un front-end correctamente?

Ah bien, ahí tenés dos formas. Una es llamar a una clase vista propia del controlador, y otra llamar directamente a la vista. Yo uso esta segunda forma. Creás un array con las variables que va a usar y se las pasás.

Un ejemplo rápido.

Código PHP:
Ver original
  1. <?php
  2.  
  3. //Método del controlador, esto está dentro de la clase
  4. //Va a mostrar una lista de alumnos
  5. function alumnos()
  6. {
  7.     //Este es el array que va a tener todas las variables
  8.     //que la vista necesite
  9.     $datos = array();
  10.  
  11.     //Trae una array con una lista de alumnos
  12.     //
  13.     //El nombre del índice "alumnos" es el nombre
  14.     //de la variable que va a recibir la plantilla
  15.     $datos['alumnos'] = $helper->traemeAlumnos();
  16.  
  17.     //Le pasamos el título que va a tener el H1,
  18.     //solo para que quede más claro
  19.     $datos['titulo'] = 'Lista de alumnos';
  20.  
  21.     //Llama a la vista
  22.     //
  23.     //Dentro del directorio de templates, tenemos el directorio
  24.     //alumnos, que tiene todos los templates
  25.     //de la sección alumnos. Y alumnos_listar.tpl es lo que
  26.     //vamos a mostrar ahora
  27.     View::load('alumnos/alumnos_listar.tpl', $datos);
  28. }
  29.  
  30. //Ahora el método load de la clase View, resumido
  31. static public function load($view, $vars = false)
  32. {
  33.     $tpl = self::path_tpl.'/'.$view;
  34.    
  35.     //Si trae el array con variables las cargamos
  36.     if (is_array($vars))
  37.     {
  38.         foreach ($vars as $k => $v)
  39.         {
  40.             //Esto es del objeto Smarty,
  41.             //Le asigna la variable $k (alumnos, titulo)
  42.             //con el valor $v (el array como los alumnos, y el titulo "Lista de alumnos")
  43.             self::plantilla->assign($k, $v);
  44.         }
  45.     }
  46.  
  47.     //La muestra, también método de la clase smarty
  48.     self::plantilla->display($view);
  49. }

Y ahora la vista, alumnos_listar.tpl, con la sintaxis de smarty

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.     <title>Mi Web</title>
  3. </head>
  4.  
  5.     <h1>{{$titulo}}</h1>
  6.  
  7.     <ul>
  8.     {{foreach $alumnos as $a}}
  9.         <li>{{$a}}</li>
  10.     {{/foreach}}
  11.     </ul>
  12. </body>
  13.  
  14. </html>

Así sería muy por arriba como funciona, a eso andá agregándole todas las necesidades que tengas. Cargale layouts y que en listar_alumnos.tpl solo quede el h1 y el ul, que te retorne el tpl en caso de necesitarlo, algún booleano para tener la opción de no usar plantillas si es que no querés en algún caso específico. De ahí en adelante desarrollá a gusto.

Capaz me falta alguna cosa porque lo puse de la forma más clara posible pero, se entiende.
  #14 (permalink)  
Antiguo 27/11/2013, 05:07
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 11 años, 5 meses
Puntos: 84
Respuesta: ¿Cómo construir un front-end correctamente?

Muchas gracias Cuervoo :D

Tengo una duda. En el último documento, donde dices "con sintaxis de smarty" utilizas {{$variable}}. Eso ¿Qué es? nunca lo había visto, ¿es propio de HTML de PHP o de qué?
__________________
Ayúdame a hacerlo por mi mismo.
  #15 (permalink)  
Antiguo 27/11/2013, 05:11
Avatar de dashtrash
Colaborador
 
Fecha de Ingreso: abril-2007
Ubicación: Ni en Sevilla,ni en Sanlúcar..qué más da..
Mensajes: 927
Antigüedad: 17 años
Puntos: 270
Respuesta: ¿Cómo construir un front-end correctamente?

Te doy mi opinión , aunque me voy a salir de MVC. Lo primero, es que una petición GET y una petición POST son cosas absolutamente distintas, cuando se usan de la forma "estandar".Una petición GET significa obtener datos del servidor. Una petición POST significa enviar datos al servidor.Eso ya te divide en 2 partes la gestión de las peticiones.

Para mí, POST significa crear un objeto "Action", que se encarga de recoger los parámetros enviados, filtrarlos, validarlos, y ejecutar la acción en el modelo, y recoger las excepciones (errores) que se hayan producido en todo el proceso. Obviamente, todo esto no lo hace 1 solo objeto, son varias capas las que hacen esto.
Los objetivos de la gestión de una petición POST son, normalmente,validación de campos a nivel sintáctico y semántico (que tengan sentido dentro de la web que estás construyendo).POST, en un alto porcentaje de los casos, se debe preocupar de gestionar 1 cierta instancia de un modelo, que es la que se está editando / ejecutando una acción sobre él.

GET, por otro lado, tiene otros objetivos completamente distintos.Normalmente, velocidad, generación de salida,cacheo...En un porcentaje bastante más alto, las peticiones GET tratan conjuntos de modelos (listados), e incluso cuando tratan a 1 solo (página de "ver"), normalmente requieren de bastantes modelos relacionados con el primero.
Ejemplo: si quieres ver 1 articulo de un foro, no necesitas solo el modelo del articulo, sino el del autor, el del foro donde se publicó, etc,etc.

No es lo mismo procesar una petición GET que una POST.Incluso si usas MVC, no es para nada lo mismo un controlador POST.

Una acción POST puede indicar que, dependiendo del resultado de su ejecución (correcto o no-correcto), debe renderizar también una petición GET (o realizar una redireccion).Pero son 2 procesos completamente distintos.

Te digo lo que yo uso, y como yo lo uso.No es MVC, porque MVC me parece bueno como "iniciación" a POO en PHP, pero no como arquitectura web.

Por cierto, cualquiera que te diga que para no llenar tu HTML de PHP, uses sistemas de plantillas como "Smarty", te está sólo cambiando el problema: ahora vas a tener tu HTML lleno de un pseudolenguaje capado, críptico, y que no aporta nada.
  #16 (permalink)  
Antiguo 27/11/2013, 05:14
Avatar de Cuervoo  
Fecha de Ingreso: octubre-2013
Mensajes: 165
Antigüedad: 10 años, 6 meses
Puntos: 43
Respuesta: ¿Cómo construir un front-end correctamente?

Eso es lo que usa smarty para saber que estás metiéndo código. Es igual que <?php echo $titulo ?> En realidad es {$var} (una sola llave) pero es preferible cambiarlo porque sino te va a joder si metés javascript.

Leete sobre motores de plantillas, cada uno tiene su sintaxis, en una vistazo rápido a los ejemplos sin siquiera leer la documentación ya lo aprendés.
  #17 (permalink)  
Antiguo 27/11/2013, 05:25
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 11 años, 5 meses
Puntos: 84
Respuesta: ¿Cómo construir un front-end correctamente?

Muchas gracias Cuervoo! :) miraré sobre Smarty.

dashtrash ¿qué utilizas si no es MVC?

Te explico. Yo ya tengo todas mis clases, el motor que hace todo el trabajo de manipulación de datos en una carpeta. Ahora quiero graficar, pero encuentro que no se cómo hacerlo correctamente. Se hacerlo, pero es una manera muy pobre de hacerlo, con un mantenimiento cara al futuro muy dificultoso. Así que ¿Cómo hacerlo?

Estoy viendo tu sistema de plantillas pero no termino de ver cómo funciona. Si quieres podemos contactar por MP, mail o Skype para que me des una descripción general de tu sistema de plantillas.

Gracias a todos por ayudarme! :D
__________________
Ayúdame a hacerlo por mi mismo.
  #18 (permalink)  
Antiguo 27/11/2013, 05:29
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por dashtrash Ver Mensaje
Por cierto, cualquiera que te diga que para no llenar tu HTML de PHP, uses sistemas de plantillas como "Smarty", te está sólo cambiando el problema: ahora vas a tener tu HTML lleno de un pseudolenguaje capado, críptico, y que no aporta nada.
Hombre, las plantillas con sistema de herencia y bloques como smarty (auqnue prefiero twig) ahorran trabajo. Claro, puedes programar el mismo sistema con PHP, pero entonces lo que estás haciendo es crear tu propio sistema de plantillas.
Además, no sirven para separar el HTML del PHP, si no para separar la lógica de negocio de la lógica de presentación.
  #19 (permalink)  
Antiguo 27/11/2013, 05:41
Avatar de dashtrash
Colaborador
 
Fecha de Ingreso: abril-2007
Ubicación: Ni en Sevilla,ni en Sanlúcar..qué más da..
Mensajes: 927
Antigüedad: 17 años
Puntos: 270
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por marlanga Ver Mensaje
Hombre, las plantillas con sistema de herencia y bloques como smarty (auqnue prefiero twig) ahorran trabajo. Claro, puedes programar el mismo sistema con PHP, pero entonces lo que estás haciendo es crear tu propio sistema de plantillas.
Además, no sirven para separar el HTML del PHP, si no para separar la lógica de negocio de la lógica de presentación.
Exacto.Y para separar la lógica de negocio de la lógica de presentación, no necesito cambiar de lenguaje.Significa que el php que está generando HTML, no hace lógica de negocio.Hace sólo y exclusivamente lógica de presentación.
Si uso PHP para generar html no estoy creando "mi propio sistema de plantillas".Es que PHP es un lenguaje diseñado para crear plantillas.POO vino mucho después.
  #20 (permalink)  
Antiguo 27/11/2013, 06:02
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: ¿Cómo construir un front-end correctamente?

Aprender la sintaxis es el pequeño precio que hay que pagar por usar un sistema de plantillas. Pero las ventajas que te ofrecen superan con creces ese inconveniente, por eso tienen tanto éxito y prácticamente todos los frameworks las usan. Un buen MVC parsea la plantilla a PHP y la guarda en la caché del proyecto, así que para el rendimiento del usuario final apenas tiene coste.

Es una elección personal, los frameworks permiten que sigas programando la vista con PHP a pelo, aunque pocos osan a ello.
  #21 (permalink)  
Antiguo 27/11/2013, 06:03
Avatar de dashtrash
Colaborador
 
Fecha de Ingreso: abril-2007
Ubicación: Ni en Sevilla,ni en Sanlúcar..qué más da..
Mensajes: 927
Antigüedad: 17 años
Puntos: 270
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por guardarmicorreo Ver Mensaje
Muchas gracias Cuervoo! :) miraré sobre Smarty.

dashtrash ¿qué utilizas si no es MVC?
Pues no es algo que se cuente rápido...Pero, en general, para mí MVC (que es una filosofía no diseñada para web), tiene bastantes problemas.
Como te digo, en mi opinión, las peticiones POST y GET no tienen demasiado que ver las unas con las otras.Procesarlas bajo la misma estructura, es un problema.
Hay conceptos como "página" (una página es más que una "vista"...de hecho, no es una "vista"), enrutado, petición, etc, que son vitales en programación web, que no existen en el paradigma original MVC.Y, como no existen, cada framework implementa a su forma (y, en mi opinión, usualmente bastante discutiblemente).

Pero, lo que sí te puedo decir, es que para una petición GET, la prioridad es la página, y la composición de páginas como vistas.Las vistas obtienen los datos que necesitan sin necesidad de controlador.
Esta última frase puede poner los pelos de punta....Pero el secreto está en el sistema de plantillas.
Esto es código que está en producción:
Con mi sistema de plantillas, defino una página entera así:
Código HTML:
Ver original
  1. [*PAGE]
  2.     [_CONTENT]
  3.         [*/ps_customer/html/forms/EditAction][#]
  4.     [#]
  5. [#]

Eso es una *pagina*, mientras EditAction es una *vista*, ya que está asociada a un objeto, en este caso, ps_customer.
Esa vista se define como:
Código PHP:
Ver original
  1. <?php
  2.             global $SERIALIZERS;
  3.             $formKeys=array("id_customer"=>Registry::$registry["params"]["id_customer"]);;
  4.             $serializer=\lib\storage\StorageFactory::getSerializerByName('backoffice');
  5.             $serializer->useDataSpace($SERIALIZERS["backoffice"]["ADDRESS"]["database"]["NAME"]);
  6. ?>
  7.  
  8.  
  9.                 [*/FORMS/form({"object":"ps_customer","layer":"backoffice","name":"EditAction","form":"&$form"})]        
  10.                 [_TITLE]EditAction ps_customer[#]
  11.                 [_DESCRIPTION]Form Description[#]
  12.                 [_MODEL({"keys":"$formKeys","serializer":"$serializer","model":"&$currentModel"})][#]                          
  13.                 [_FORMGROUP]
  14.                         [_TITLE]Form Group Title[#]
  15.                         [_DESCRIPTION]Form Group Description[#]
  16.                         [_FORMERRORS]
  17.  
  18.                         [#]
  19.                         [_FIELDS]
  20.  
  21.  
  22.                 [*/FORMS/inputContainer({"name":"date_add"})]
  23.                     [_LABEL]date_add[#]
  24.                     [_HELP]**Insert Field Help**[#]
  25.                     [_INPUT]
  26.                         [*:/types/inputs/DateTime({"model":"$currentModel","name":"date_add","form":"$form"})][#]
  27.                     [#]
  28.                     [_ERRORS]
  29.                         [_ERROR({"type":"INVALID","code":"2"})][@L]ps_customer__date_add_INVALID[#][#]
  30.                         [_ERROR({"type":"UNSET","code":"1"})][@L]ps_customer__date_add_UNSET[#][#]
  31.                     [#]
  32.                 [#]
  33.  
  34.  
  35.                 [*/FORMS/inputContainer({"name":"optin"})]
  36.                     [_LABEL]optin[#]
  37.                     [_HELP]**Insert Field Help**[#]
  38.                     [_INPUT]
  39.                         [*:/types/inputs/Integer({"model":"$currentModel","name":"optin","form":"$form"})][#]
  40.                     [#]
  41.                     [_ERRORS]
  42.                         [_ERROR({"type":"INVALID","code":"2"})][@L]ps_customer__optin_INVALID[#][#]
  43.                         [_ERROR({"type":"UNSET","code":"1"})][@L]ps_customer__optin_UNSET[#][#]
  44.                     [#]
  45.                 [#]
  46.  
  47.  
  48.                 [*/FORMS/inputContainer({"name":"id_gender"})]
  49.                     [_LABEL]id_gender[#]
  50.                     [_HELP]**Insert Field Help**[#]
  51.                     [_INPUT]
  52.                         [*:/types/inputs/Integer({"model":"$currentModel","name":"id_gender","form":"$form"})][#]
  53.                     [#]
  54.                     [_ERRORS]
  55.                         [_ERROR({"type":"INVALID","code":"2"})][@L]ps_customer__id_gender_INVALID[#][#]
  56.                         [_ERROR({"type":"UNSET","code":"1"})][@L]ps_customer__id_gender_UNSET[#][#]
  57.                     [#]
  58.                 [#]
  59.        .......
Y esa plantilla a su vez usa otras plantillas que usan otras plantillas...Y sólo las de ultimo nivel contienen HTML.
Cosas como listar elementos se hacen asi:
Código PHP:
Ver original
  1. <?php
  2.             global $SERIALIZERS;
  3.             $params=Registry::$registry["PAGE"];
  4.             $serializer=\lib\storage\StorageFactory::getSerializerByName('backoffice');
  5.             $serializer->useDataSpace($SERIALIZERS["backoffice"]["ADDRESS"]["database"]["NAME"]);
  6. ?>
  7.  
  8.  
  9.  
  10. [*LIST_DS({"currentPage":"$currentPage","object":"ps_customer","dsName":"FullListDs","serializer":"$serializer","params":"$params","iterator":"&$iterator"})]
  11.                 [_HEADER]
  12.                     [_TITLE]Titulo de la lista[#]
  13.                     [_DESCRIPTION]Descripcion de la lista[#]
  14.                 [#]
  15.                 [_LISTING]
  16.                     [_COLUMNHEADERS]
  17.                         [_COLUMN][_LABEL]date_add[#][#]
  18.                         [_COLUMN][_LABEL]optin[#][#]
  19.                         [_COLUMN][_LABEL]id_gender[#][#]
  20.                         [_COLUMN][_LABEL]id_default_group[#][#]
  21.                         [_COLUMN][_LABEL]firstname[#][#]
  22.                         [_COLUMN][_LABEL]id_customer[#][#]
  23.                         [_COLUMN][_LABEL]date_upd[#][#]
  24.                         [_COLUMN][_LABEL]lastname[#][#]
  25.                         [_COLUMN][_LABEL]ip_registration_newsletter[#][#]
  26.                         [_COLUMN][_LABEL]newsletter_date_add[#][#]
  27.                         [_COLUMN][_LABEL]note[#][#]
  28.                         [_COLUMN][_LABEL]deleted[#][#]
  29.                         [_COLUMN][_LABEL]birthday[#][#]
  30.                         [_COLUMN][_LABEL]passwd[#][#]
  31.                         [_COLUMN][_LABEL]secure_key[#][#]
  32.                         [_COLUMN][_LABEL]active[#][#]
  33.                         [_COLUMN][_LABEL]is_guest[#][#]
  34.                         [_COLUMN][_LABEL]newsletter[#][#]
  35.                         [_COLUMN][_LABEL]email[#][#]
  36.        
  37.                     [#]
  38.                     [_ROWS]
  39.                         [_ROW][_VALUE][*:/types/DateTime({"name":"date_add","model":"$iterator"})][#][#][#]
  40.                         [_ROW][_VALUE][*:/types/Integer({"name":"optin","model":"$iterator"})][#][#][#]
  41.                         [_ROW][_VALUE][*:/types/Integer({"name":"id_gender","model":"$iterator"})][#][#][#]
  42.                         [_ROW][_VALUE][*:/types/Integer({"name":"id_default_group","model":"$iterator"})][#][#][#]
  43.                         [_ROW][_VALUE][*:/types/String({"name":"firstname","model":"$iterator"})][#][#][#]
  44.                         [_ROW][_VALUE][*:/types/AutoIncrement({"name":"id_customer","model":"$iterator"})][#][#][#]
  45.                         [_ROW][_VALUE][*:/types/DateTime({"name":"date_upd","model":"$iterator"})][#][#][#]
  46.                         [_ROW][_VALUE][*:/types/String({"name":"lastname","model":"$iterator"})][#][#][#]
  47.                         [_ROW][_VALUE][*:/types/String({"name":"ip_registration_newsletter","model":"$iterator"})][#][#][#]
  48.                         [_ROW][_VALUE][*:/types/DateTime({"name":"newsletter_date_add","model":"$iterator"})][#][#][#]
  49.                         [_ROW][_VALUE][*:/types/Text({"name":"note","model":"$iterator"})][#][#][#]
  50.                         [_ROW][_VALUE][*:/types/Integer({"name":"deleted","model":"$iterator"})][#][#][#]
  51.                         [_ROW][_VALUE][*:/types/DateTime({"name":"birthday","model":"$iterator"})][#][#][#]
  52.                         [_ROW][_VALUE][*:/types/String({"name":"passwd","model":"$iterator"})][#][#][#]
  53.                         [_ROW][_VALUE][*:/types/String({"name":"secure_key","model":"$iterator"})][#][#][#]
  54.                         [_ROW][_VALUE][*:/types/Integer({"name":"active","model":"$iterator"})][#][#][#]
  55.                         [_ROW][_VALUE][*:/types/Integer({"name":"is_guest","model":"$iterator"})][#][#][#]
  56.                         [_ROW][_VALUE][*:/types/Integer({"name":"newsletter","model":"$iterator"})][#][#][#]
  57.                         [_ROW][_VALUE][*:/types/String({"name":"email","model":"$iterator"})][#][#][#]
  58.  
  59.                     [#]
  60.                     [_LISTINGFOOTER]
  61.                     [#]
  62.                 [#]    
  63.            [#]

En la línea:
Código HTML:
Ver original
  1. [*LIST_DS({"currentPage":"$currentPage","object":"ps_customer","dsName":"FullListDs","serializer":"$serializer","params":"$params","iterator":"&$iterator"})]
Le estoy diciendo que para dibujar ese listado, quiero usar la fuente de datos "FullListDs" del objeto "ps_customer", parametrizada por "$params".
Eso es lo que MVC "estándar" haría en el controlador.*instanciar* esa fuente de datos.Lógicamente, la composición de la query, chequeo de parámetros, etc,etc, no se hace en la plantilla.Existen clases que hacen eso, y que son invocadas por plantillas de más bajo nivel.
A mí no me molesta en absoluto que la instanciación de la fuente de datos (repito, instanciación, no "implementación") esté en mi plantilla, ya que es lo suficientemente clara (una vez que la entiendes) como para cambiarla en cualquier momento (incluso desde un editor).

Leyendo esa plantilla, sabes qué quiere hacer.Claramente, es un listado, con unas cabeceras, y unas rows.Si te pusiera el equivalente en html con smarty, no verías nada.

Para terminar, esas plantillas son código generado...como te digo, no es para nada MVC.Para mí, resolver GET se hace desde las plantillas, ya que con este tipo de plantillas, basado en capas, me es *muy* sencillo y claro hacerlo todo desde ellas.
  #22 (permalink)  
Antiguo 27/11/2013, 06:14
Avatar de dashtrash
Colaborador
 
Fecha de Ingreso: abril-2007
Ubicación: Ni en Sevilla,ni en Sanlúcar..qué más da..
Mensajes: 927
Antigüedad: 17 años
Puntos: 270
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por marlanga Ver Mensaje
Aprender la sintaxis es el pequeño precio que hay que pagar por usar un sistema de plantillas. Pero las ventajas que te ofrecen superan con creces ese inconveniente,
Qué ventaja, exactamente?
Qué puedes hacer con Smarty, que no hagas con PHP?
Es más claro un "for" hecho con Smarty, que con PHP?
Como tú has dicho, lo importante es mantener la lógica de negocio independiente de la lógica de aplicación.
Por qué eso requiere un lenguaje distinto, que cambia cómo se escribe un "if", es algo que no acabo de entender.
Que eso lo usen los frameworks MVC, si lo entiendo..Muchos programadores PHP no sabrían juzgar bien qué es qué, así que se les "joroba" metiéndoles otro lenguaje, desde el cual no pueden hacer queries en medio de una tabla...
Pero eso no dice nada de que sea necesario Smarty.Sino de los programadores que lo hacen.
  #23 (permalink)  
Antiguo 27/11/2013, 06:17
Avatar de Cuervoo  
Fecha de Ingreso: octubre-2013
Mensajes: 165
Antigüedad: 10 años, 6 meses
Puntos: 43
Respuesta: ¿Cómo construir un front-end correctamente?

Y usar Smarty es complicado? Estamos todos locos.

Se ve bueno eso, después le voy a pegar una revisada. Tenés algún lugar con ejemplos dashtrash?
  #24 (permalink)  
Antiguo 27/11/2013, 06:26
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 11 años, 5 meses
Puntos: 84
Respuesta: ¿Cómo construir un front-end correctamente?

dashtrash, he leído y releído tu ejemplo aquí y la verdad es que es impresionante, al principio impresiona al ver una sintaxis totalmente desconocida, por lo menos para mi, pero una vez que comienzas a interpretar su lógica es realmente sencillo. la semana que viene me pondré a trabajar sobre tu sistema de plantillas, me gustaría muchísimo poder hacerlo. Pero la documentación que hay en el .zip para descargar el sistema de plantillas me tiene confundido.

Al entrar en la carpeta Manual, veo que hay varios más carpetas y archivos. La mayoría son javascript y css, pero hay dos de ellos (html y php) que contienen lo mismo que en el espacio de la documentación desde donde descargarlo :S

He leído en inglés los ejemplos pero no me ha quedado muy claro. Me gustaría poder utilizarlo pero ahora mismo me veo incapaz porque se inglés, pero no tanto como tú.

Como petición personal estaría bien poder disponer de un sistema de plantillas como el tuyo con una explicación en español :D

Por lo demás me quito el sombrero, buen trabajo y lección sobre plantillas. La semana que viene le daré duro a este tema porque es algo vital y técnicas como la tuya, que utilizan PHP y no otro pseudolenguaje, era lo que estaba buscando y ya encontré.

Gracias!!! :D
__________________
Ayúdame a hacerlo por mi mismo.
  #25 (permalink)  
Antiguo 27/11/2013, 06:36
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: ¿Cómo construir un front-end correctamente?

Yo no uso smarty. Me gusta mucho más twig. Las ventajas son muchas, ya he nombrado algunas. Hace trabajo por tí, es más corto, es fácilmente mantenible, tiene sistema de herencia, tiene sistema de bloques, no se necesita saber programar para crear vistas (sobre todo cuando trabajas con diseñadores). Por ejemplo:
Código PHP:
Ver original
  1. <ul>
  2.     {%foreach libros as libro%}
  3.     <li><{libro.titulo} - {libro.autor}</li>
  4.     {%end%}
  5. </ul>
Es más cómodo de mantener y modificar que:
Código PHP:
Ver original
  1. <ul>
  2.     <?php foreach ($libros as $libro): ?>
  3.     <li><?= htmlspecialchars($libro->titulo) ?> - <?= htmlspecialchars($libro->titulo) ?></li>
  4.     <?php endforeach; ?>
  5. </ul>

¿No te gusta twig porque usa etiquetas propias? Perfecto, hay sistemas de plantillas que usan PHP estándar, como el módulo VIEW de zend framework: http://framework.zend.com/manual/1.12/en/zend.view.html

PD. Hacer un query en mitad del dibujado de una tabla, es algo que yo jamás haría.
  #26 (permalink)  
Antiguo 27/11/2013, 06:42
Avatar de xSkArx  
Fecha de Ingreso: marzo-2008
Ubicación: Chile
Mensajes: 945
Antigüedad: 16 años, 1 mes
Puntos: 96
Respuesta: ¿Cómo construir un front-end correctamente?

Hay un ebook de una tal eugenia, que enseña como crear la vista de una manera sencilla
http://www.etnassoft.com/biblioteca/poo-y-mvc-en-php/
__________________
Busca, lee y practica todo lo que puedas.
Usa siempre el buscador antes de postear.
Si posteas código, utiliza el HIGHLIGHT correcto.
  #27 (permalink)  
Antiguo 27/11/2013, 06:51
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por guardarmicorreo Ver Mensaje
Por lo demás me quito el sombrero, buen trabajo y lección sobre plantillas. La semana que viene le daré duro a este tema porque es algo vital y técnicas como la tuya, que utilizan PHP y no otro pseudolenguaje, era lo que estaba buscando y ya encontré.
Gracias!!! :D
No es por nada, pero sí utiliza su propio pseudo-lenguaje para manejar los bloques, por medio de símbolos. Como todos los sistemas de plantillas, aunque éste es menos legible.
  #28 (permalink)  
Antiguo 27/11/2013, 07:03
Avatar de dashtrash
Colaborador
 
Fecha de Ingreso: abril-2007
Ubicación: Ni en Sevilla,ni en Sanlúcar..qué más da..
Mensajes: 927
Antigüedad: 17 años
Puntos: 270
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por guardarmicorreo Ver Mensaje
Como petición personal estaría bien poder disponer de un sistema de plantillas como el tuyo con una explicación en español :D
La documentación está en Manual.html.
El resto de las cosas es porque Manual.html.. fue renderizado como una plantilla, usando el propio sistema.

A ver si tengo tiempo esta noche para hacer una traducción al castellano, y lo resubo.

Entiendo que al principio parezca todo un poco raro.Es un sistema de plantillas que hace justo lo contrario que el resto.Lo que quiero evitar no es php, sino HTML.
Mi forma de pensar en plantillas, no es "meter un lenguaje nuevo que no tiene mysql_query, asi que no puedes meter una query enmedio de un <table>".
La idea es:
Si yo te digo que estoy viendo una página con un formulario de login, tú puedes fácilmente saber que estaré viendo 1 campo de texto, 1 campo password, y 1 botón .Lo que no sabes es *nada* de cómo, visualmente, están dispuestos, qué colores tienen, qué tamaño, etc, etc.
Si yo te digo que en una página hay un menú, y en la opción "Secciones", pinches en "Principal", tú sabes que va a haber algún sitio donde hay una serie de etiquetas (una de ellas es "Seccion"), que contiene otras etiquetas ("Principal"), que son links.
Tú no sabes si el menú es horizontal, vertical, de un color o de otro.

Con lo cual, en un interfaz de usuario existen abstracciones
("menu", "listado", "cabecera", "caja") que son manejables independientemente de su formato.Incluso del dispositivo de salida.Un menú en un navegador se va a pintar distinto que un menú en un móvil.Pero sigue siendo conceptualmente la misma cosa.Lo que cambia es el cómo se pinta.
Y es por eso que mi sistema de plantillas intenta manejar "conceptos" ("Pagina","Form","Listado"), que se renderizan según otras plantillas, que usan otras...hasta que sólo al final, en las plantillas base, se convierten a html.

El asunto es que las plantillas de más alto nivel, son tan simples, que una persona no técnica las maneja desde un editor de texto:

Código HTML:
Ver original
  1. [*PAGE]
  2.          [_CONTENT]
  3.                   [*CARROUSEL]
  4.                             [_ITEM]
  5.                                  [_IMAGE]myimage.jpg[#]
  6.                                  [_LINK]/home[#]
  7.                             [#]
  8.                             [_ITEM]
  9.                                  [_IMAGE]myimage2.jpg[#]
  10.                                  [_LINK]/offers[#]
  11.                             [#]
  12.                   [#]
  13.                   [*VIDEO]http://www.youtube.com....[#]
  14.          [#]
  15. [#]
Mirando rápidamente , ves que es una página que tiene un carrousel de imágenes, y un vídeo.Cómo se pinta el carrousel, con qué librerías js, cómo se renderiza el video, etc,etc, se resuelve con componentes más pequeños y reutilizables.Pero lo importante es que expresa "qué" quiero, y no "cómo" pintarlo.
Esa plantilla no cambia si lo voy a renderizar para web o para móvil, por poner un ejemplo.
Un rediseño entero de la web, no modifica estas plantillas, tampoco.

Lo que quiero decir es que, a mí, me parece interesante dividir un interfaz de usuario en capas "lógicas" y capas "físicas" (html).

Otros sistemas de plantillas, lo que me dan son sintaxis que no necesito para evitar que meta queries enmedio de html...Eso ya lo aprendí hace tiempo..
  #29 (permalink)  
Antiguo 27/11/2013, 07:07
Avatar de dashtrash
Colaborador
 
Fecha de Ingreso: abril-2007
Ubicación: Ni en Sevilla,ni en Sanlúcar..qué más da..
Mensajes: 927
Antigüedad: 17 años
Puntos: 270
Respuesta: ¿Cómo construir un front-end correctamente?

Cita:
Iniciado por marlanga Ver Mensaje
No es por nada, pero sí utiliza su propio pseudo-lenguaje para manejar los bloques, por medio de símbolos. Como todos los sistemas de plantillas, aunque éste es menos legible.
No tiene nada que ver con otro sistema de plantillas...Y no sé cuánto has trabajado con mi sistema de plantillas, pero he trabajado mucho con Smarty...No sé qué consideras legible.
La filosofía no tiene nada que ver.Ves algo de html? La plantilla de listado anterior no te parece legible?Es más legible el equivalente usando smarty?Puedes poner un ejemplo de una plantilla para hacer un listado, hecha con smarty, y que quede más claro que la anterior?
  #30 (permalink)  
Antiguo 27/11/2013, 07:18
Avatar de guardarmicorreo  
Fecha de Ingreso: noviembre-2012
Ubicación: Córdoba
Mensajes: 1.153
Antigüedad: 11 años, 5 meses
Puntos: 84
Respuesta: ¿Cómo construir un front-end correctamente?

Creeme que esta noche si lo actualizas me quedaré hasta bien tarde para ir trabajando con tu sistema de plantillas. Su sencillez me ha dejado =O a mi no se me habría ocurrido nunca hacer algo así. Muchas gracias!!!!
__________________
Ayúdame a hacerlo por mi mismo.

Etiquetas: construir, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:33.