Reducir código también esta en la “Vista”.

Reducir código en la vista

¿De qué nos escribirás hoy?, ¡De vistas Estimado!

Durante nuestro periodo de desarrollo, pensamos que tener bien organizado todos los componentes, tales como: los Controllers, Middlewares, Request, entre otros. Que debería ser prioridad (lo cual está muy bien “obvio”),

pero…

¿Qué pasa con el HTML?, ¿No debería estar ordenado también?

Este tipo de problema lleva consigo muchas cosas y como en la programación todo es acumulativo, no nos damos cuenta cuando ya tenemos más de 2000 líneas de código (esa es la verdad somos seres increíbles jajá).

Y es aquí donde uno debería ponerse a pensar:

¿Cómo llegué a tener tanto código?,

Y lo que pasa, es que entre escribir y copy-paste no te das cuenta cuando tienes una biblia de HTML y llegas al resultado del siguiente código.

Si me preguntas a mí, me parece que es un código engorroso y que no se puede mantener como corresponde…

¡Rayos!, ¿No habrá una forma de hace esto de mejor manera?

Pero qué pasa si te digo que existe un sistema de plantillas en Laravel y que podemos llegar a esto:

Espera… ¿Cómo llegaste a eso?, más te vale decirnos ¬¬

No sé yo, pero creo que lo que ves arriba es mucho más legible que el código anterior. Se ve muy claro cuáles son las partes que componen tu sitio.

De aquí nos vamos a esta segunda parte de este tutorial y que abrirá una nueva forma de llevar a cabo la creación de vistas dinámicas.

¡Ven!, sigamos en este recorrido del saber

¡Por la gracia de Laravel!

Como mencionamos anteriormente  Laravel una vez más nos ayuda a resolver esta problemática

Reducir código en la vista 3

El cual nos trae a Blade para simplificarnos la vida y hacer todo esto posible, entonces tú que estás leyendo esto, te preguntas.

¿Qué es Blade?

Y la forma más simple de responderte: “Es que es un sistema de plantillas que nos permite generar HTML dinámico”. Como soy buena persona te dejaré el link de la documentación BLADE.

Y con esto en mente y si tantos rodeos, ¡COMENCEMOS!


Lo necesario para seguir

Para este tutorial vamos a usar una plantilla que me parece muy buena (para mi gusto al menos) y es free,

es un Admin Template, además como su código HTML está comentado nos permite tener claro lo que queremos hacer.

Por otra parte, crearemos un proyecto de Laravel desde cero, la versión puede ser desde 4.2 hasta la versión actual, así que no hay excusa.

Algo que te quiero aclara es:

Este tutorial no lo límites con el template que vamos a usar, es para darte una idea de cómo organizarte y además deja a libre elección lo que usarás tú ¿OK?, además dejaré un repositorio para que descargue el proyecto que haremos acá, pero te recomiendo seguir los pasos para que aprenda como hacer todo esto.

Nuestro Admin Template

El link que usaremos es este ElaAdmin , lo puedes descargar haciendo click en Download ZIP y dejarlo donde más te acomode (lo vamos usar después, así que déjalo en un lugar accesible)

Reducir código en la vista 4

Nuestro proyecto Laravel

Luego crearemos nuestro proyecto laravel, en mi caso yo lo tengo hecho en una máquina virtual, pero tú puedes hacerlo en xampp, wamp, laragon u otro que tengas. Entonces ejecutamos el comando para crear nuestro proyecto el cual yo le nombré como: AdminTemplate, obviamente puedes usar el nombre que más te plazca (si te place usa el comando que dejé)

Después de que se descargue todas nuestras dependencias y el proyecto en sí, utilizamos nuestro IDE (programa de codificación) favorito y abrimos nuestro proyecto cuya estructura quedaría tal que así (como yo uso PhpStorm lo mostrare con eso).

Y en la sección en la que se centrará más nuestro trabajo en este tutorial será en la carpeta resources/views, ¡AHÍ! ,donde esta ese solitario archivo welcome.blade.php , pero no se preocupen lo dejaremos igual de solo ,porque crearemos nuestras carpetas que contendrán nuestra estructura de vistas jeje ¬¬.


¿Estás listo?, Empieza la acción

 

Las carpetas importantes

Para esta parte del tutorial crearemos la estructura que tendrá nuestro sitio, para ello hacemos 3 carpetas las cuales llamaremos:

  • includes: esta carpeta contendrá las partes de nuestro sitio.
  • layouts:  este contendrá el archivo que tendrá la estructura principal del sitio.
  • pages:     y aquí se pondrán las páginas del sitio y será el contenido que mostraremos.

Haciendo todo eso la estructura quedaría así, como lo mostrare en la imagen

¿Es hora de crear las vistas?, así es, ¡Vamos!

Esto va tomando forma ¿Cierto?… seguido de esto las carpetas que creamos contendrán ciertos archivos blade y que se encargarán de darle sentido a todo (lo mejor es hacer esto con nombres descriptivo), estos serán:

En la carpeta includes:

  • head.blade.php:  este archivo tendrá todas esas etiquetas meta, link, title, etc.
  • header.blade.php: este contendrá nuestra cabecera del sitio.
  • left-sidebar.blade.php: será la parte donde se posicionará nuestro menú.
  • script.blade.php:  el que contendrá todos los scripts js.
  • footer.blade.php:  y por último el que contiene el pie de página.

En la carpeta layouts:

  • default.blade.php: este archivo contendrá la estructura y el que se encargará de formar el sitio.

En la carpeta pages (ojo acá, estarán todas la paginas que queramos):

  • index.blade.php: este archivo será lo que cargaremos cuando accedamos al sitio

Con todo esto debería verse así y como es costumbre te dejo la imagen.

Cabe señalar que el archivo de vistas siempre se crea con “ .blade.php ” para poder usar las directivas blade

Taraaaann!!!!, viendo todo esto uno ya se da una idea para dónde vamos.


Recurriendo al copy-paste

Ahora lo otro importante, tenemos nuestra estructura, pero ¿Qué nos falta?, ¡exacto!, falta hacer la estructura HTML e importar los archivos de estilo y js que descargamos anteriormente, bueno, pero ¿Cómo hacemos esto?, afortunadamente para nosotros el Admin Template tiene una página en blank y es el cual nosotros usaremos, lo podrás encontrar se ve como lo muestra la imagen

¿Lo viste?, ese archivo lo abriremos con algún editor de código, copiaremos todo y lo pondremos en el archivo default.blade.php, una vez copiado, te dejo el código para que lo copies.

Lo dejamos así porque nos da una visión de los archivos necesarios para la base de nuestro sitio, por el momento lo dejamos.

CSS y JavaScript, si, también son necesarios

Después de hacer todo lo anterior, iremos a buscar los archivos de estilos y los archivos JavaScript.

¿Qué cómo fue que supe cuáles son los archivos?

Es sencillo, simplemente vi en los archivos necesarios en el código que habíamos copiado del archivo blank anteriormente, en resumen, las etiquetas link y script.

Cuando lo tengas se verán tal que así (yo los he puesto en la carpeta public del proyecto)

Si ya lo tienes todo listo, empezaremos a realizar el copy-paste, tan famoso dentro de los programadores.


Del copy-paste, hasta el saber

Lo siguiente que debemos hacer es empezar a limpiar nuestro archivo default.blade.php, ¿En qué sentido?, bueno diseccionaremos el código , luego empezaremos a copiar y pegar, primero empezamos desde el head

Sacando los JavaScript y Css

Corta todo lo que este entre las etiquetas head y pégalo en el archivo head.blade.php, posteriormente hacemos los mismo con nuestros scripts, estos últimos los pegamos en el archivo script.blade.php, haciendo todo eso empezaremos a utilizar nuestro primer código blade el cual será @include.

¡Al fin!, BLADE

¿Qué es include?, simplemente va incluir el archivo poniendo el nombre de la carpeta seguido con un punto “.” para buscar head.blade.php, pero en este caso se omite el blade.php. Lo mismo pasa con el archivo script:

  • @include(‘includes.head’)
  • @include(‘includes.script’) 

Nuestro archivo default quedará así