Laravel 8 desde cero Parte IV - Creando nuestras vistas

Introducción

Como vimos en Laravel 8 desde cero Parte III, tenemos una carpeta para las vistas, Resources\Views.

Para crear una nueva vista, basta con crear un archivo en la carpeta mencionada, con el formato:

nombrevista.blade.php.

Antes de continuar quiero mencionar que la vista que modificamos en el artículo anterior, fue la vista home, sin embargo es welcome la vista raíz.

Si queremos cambiar la vista raíz, podemos modificar el archivo welcome, o modificar en el archivo Routes\web.php, el nombre de la vista raíz welcome que viene por defecto, por la vista que deseemos, y que previamente debemos crear.

Observaciones preliminares acerca de el uso de --auth

Al crear un proyecto con --auth, este contiene la vista home, y las vistas de registro, login, etc.

Por otra parte con dos modificaciones simples en un proyecto creado con --auth, podemos evitar la exigencia de dicha autenticación.

Además de dejar abierta la puerta a futuras zonas seguras, y la creación de carpetas y archivos que sin el uso de --auth al crear el proyecto, no son creadas automáticamente, incrementando el tiempo para la creación de más archivos y por lo tanto el tiempo de desarrollo.

Si no usamos --auth al crear el proyecto, solo crea la vista welcome, no crea la vista home, ni el homecontroller, ni las vistas y controladores de zonas autorizadas, las cuales aunque no necesitemos en principio, nos limita en caso de tener que implementar zonas seguras mas adelante. Por último, las carpetas Resources\Layouts, Public\Css y Public\js tampoco son creadas.

Es por ello que recomiendo crear los proyectos con el uso de --auth.

Con el uso de autenticación:

Si hacemos uso de autenticación debemos tener en cuenta que el archivo raíz, debe tener enlaces para Ingreso y Registro.

Sin el uso de autenticación (pero si se creó con --auth):

Lo primero a notar, es que en el archivo Routes\web.php, la linea para el código de Auth al ser eliminada, desaparece Login y Register de la vista welcome.

Si no hacemos uso de autenticación, debemos ir al HomeController, y eliminar la linea: $this->middleware('auth');

Basta con las dos modificaciones anteriores, para que no requiera de autenticación.

Otra diferencia importante es la navbar, la cual dentro de su código ya no contendría ni Login, ni Register, ni Logout, en cambio tendría la referencia a las vistas que queremos en el menú o navbar.

Sin el uso de autenticación:

Es suficiente en el archivo Routes\web.php, declarar las rutas que corresponden a las vistas que deseamos implementar en el menú, y como enlaces dentro de las páginas.

Creación de Vistas

Para la creación de vistas, laravel cuenta con el recurso de diseños o layouts, cuyos archivos creamos en Resources\Views\Layouts, dentro de los diseños podemos utilizar la inclusión de partes o secciones que deseemos usar en varias vistas o diseños, estas partes son conocidas como partials, y una vez creadas, como con la barra de navegación que vimos en el artículo anterior, las incluimos en el diseño, con el código: @include('_mynav').

Tomando en cuenta lo anterior, la manera mas consecuente para la creación de vistas, es:

Crear los partials que utilizaremos.
Crear los diseños que deseemos.
Crear el archivo css para personalizar la presentación de las vistas.
Crear las vistas que requerimos.
Y por último declarar las rutas de las vistas creadas.

Creemos un ejemplo completo de una página web básica

En este ejemplo no usaremos la autenticación, para ver sólo lo referente al front-page.

Creando el partial para la barra de navegación

En la carpeta Resources\Views, creamos el archivo navlg.blade.php, con el siguiente contenido:

<li class="nav-item"><a class="nav-link" href="{{ url('/inicio') }}">Inicio</a></li>

<li class="nav-item"><a class="nav-link" href="{{ url('/pages') }}">Páginas</a></li>

<li class="nav-item"><a class="nav-link" href="{{ url('/about') }}">Acerca de mi</a></li>

</ul>

</div>

</nav>

En este partial, determinamos cuántas vistas vamos a usar, y los nombre que le asignaremos a las mismas.

Para el caso tenemos tres que aparecen resaltadas en amarillo.

Creando el diseño base para las vistas

En la carpeta Resources\Layouts creamos el archivo lgpage.blade.php, con el siguiente contenido:

<!DOCTYPE html>

<html>

<head>

<title>Luis Gabriel Hernández Valderrama</title>

</head>

<body>

@section('header')

<div class="hdlg"><center>Luis Gabriel Hernández Valderrama</center></div>

@show

@include('navlg')

<br>

@yield('content')

</div><br>

@section('foot')

<div class="text-center" style="margin-bottom:0"><p><a href="https://sites.google.com/view/presentacin-compulg/inicio" style="color: white">www.compulg.site</a></p></div>

@show

</body>

</html>

Creando nuestros estilos personalizados

Para ello como se ve en el código anterior resaltado en amarillo.

Creamos el archivo Public\css\mystyle.css, con el siguiente contenido:

body {

background-image: url(https://i.imgur.com/bXp8iS7.jpg);

align-content: center;

}

.container {

margin-top: 5%;

margin-left: 10%;

margin-right: 10%;

background-color: black;

color: aliceblue;

border-radius: 15px;

opacity: 0.8;

width: 80%;

height: auto;

}

.col-sm-10 {

font-family: courier new;

font-weight: bold;

font-size: 1.5em;

text-align: center;

}

.hdlg {

font-size: 30px;

font-family: cursive;

text-align: center;

}

@media screen and (max-width: 600px) {

body {

background-image: none;

background-color: black;

}

.container{

margin-left: 0%;

margin-right: 15%;

width: 85%;

height: auto;

}

.hdlg {

font-size: 20px;

}

.col-sm-10 {

font-size: 1em;

padding: 5%;

}

Creando las vistas que requerimos

Para este ejemplo usamos tres vistas que creamos en la carpeta Resources\Views

El archivo inicio.blade.php con el siguiente contenido:

@extends('layouts.lgpage')

@section('content')

</div>

<div class="col-sm-10">Hola, mi nombre es <spam style="color:dodgerblue">Luis Gabriel Hernández Valderrama.</spam> Soy un amante del conocimiento, apasionado por <spam style="color:dodgerblue">la ciencia, las computadoras u ordenadores y la tecnología.</spam><br>Conoce mis páginas en el menú superior. <spam style="color:dodgerblue">Me desempeño en el área de sistemas</spam>, conoce mi portafolio en la página Web que figura debajo de este texto.</div>

</div>

@endsection

El archivo pages.blade.php con el contenido:

@extends('layouts.lgpage')

@section('content')

<a href="https://sites.google.com/view/presentacin-compulg/inicio"><p class="phdcarlg">CompuLG - Página Empresarial</p></a>

<p class="ptxtcarlg">Página Empresarial, servicios y productos disponibles, conozca nuestro portafolio.</p></center>

</div>

<a href="https://chalecos-salvavidas-cali.negocio.site/"><p class="phdcarlg">Chalecos Salvavidas Cali</p></a>

<p class="ptxtcarlg">Página Empresarial, venta de chalecos salvavidas.</p></center>

</div>

<a href="https://wp.compulg.site"><p class="phdcarlg">Complemento Excel Gratis</p></a>

<p class="ptxtcarlg">Complemento gratuito para Excel y Video Tutoriales gratuitos.</p></center>

</div>

<a href="https://compulgpost.blogspot.com/"><p class="phdcarlg">El Blog de CompuLG</p></a>

<p class="ptxtcarlg">El blog empresarial, para publicar artículos referentes a tecnología.</p></center>

</div>

<a href="https://infocontadorescali.blogspot.com/"><p class="phdcarlg">Para Contadores</p></a>

<p class="ptxtcarlg">El Blog de Informacion para contadores en Cali.</p></center>

</div>

<a href="https://luisgabrielhernandez.blogspot.com"><p class="phdcarlg">Mi blog personal</p></a>

<p class="ptxtcarlg">Para publicar artículos referentes a otros temas.</p></center>

</div>

@endsection

Y el archivo about.blade.php con el siguiente contenido:

@extends('layouts.lgpage')

@section('content')

<p>Desde los 5 años leía de corrido, gracias a que un día le pregunté a mi padre: "que dice ahí", y me contestó: "cuando aprenda a leer le digo", aunque casi siempre me decía lo que preguntaba, pero considero que esa respuesta me motivó para aprender a leer."</p>

<p>Desde los 15 años comencé a programar en basic en una calculadora Casio FX-4000P, y luego en una Commodore de 64Mb.</p>

<br>

<div class="hdlg">Un poco más sobre mi.</div>

<p>Al terminar el bachillerato ingrese estudiar Ingeniería electrónica en la Universidad del Valle. Fue entonces que aprendí algoritmia y programación, además de guitarra de acompañamiento, algo de quimica, calculo, geometría vectorial etc.</p>

<p>Pero no termine mis estudios, la verdad cuando entre estaba ansioso por estudiar electrónica, pero solo hasta el sexto semestre empezamos a tocar la materia en si, y ya conocía desde décimo grado lo que veiamos, esto me hizo perder mucho interes en mis estudios, aparte de los paros de profesores, la no cancelación de las materias por desinformación, unido a mi perdida de interes, me llevaron a caer en bajo rendimiento, y por consecuencia a la expulsión.</p><br>

<p>Fue desde entonces que tome la decisión de ser autodidacta, y mientras laboraba como auxiliar contable, fuí desarrollando mis conocimientos en HTML y CSS, basicamente maqueteado de páginas web, aún no tenía computadora propia.</p><br>

<p>Como queria ampliar mis conocimientos de computadoras en la parte de hardware, conseguí un equipo de segunda con un credito, y realicé un diplomado de mantenimiento y reparación de computadores, luego de desarmar y armar mi computadora muchas veces, aprendí sobre los problemas, causas y soluciones, cuando la falla es de hardware.</p><br>

<p>Con el apoyo de mi jefe quien me permitío laborar medio tiempo, empece a prestar servicios como independiente, con el objetivo de pasar de empleado a autoempleado, a los tres (3) años de laborar allí, había dejado un reemplazo capacitado e inicie mi aventura como independiente.</p><br>

<p>Ya teniendo mi propia computadora pude seguir ampliando mis conocimientos de programación, en pascal inicialmente que era el lenguaje que aprendí en la universidad, con este lenguaje, realice diferentes interfaces y herramientas a la medida para algunos clientes.</p><br>

<p>Continue mis estudios como autodidacta en: C++, Java, HTML, CSS, PHP y Javascript, ya tenía los conocimientos, me faltaban los certificados, y gracias a la capacitación virtual del SENA logré conseguir algunos, y sigo en ello :)</p>

</div>

@endsection

Registrando las rutas para su uso

Vamos al archivo Routes\web.php y con el siguiente código declaramos las rutas de nuestras vistas así:

Route::get('/', function () { return view('inicio'); });

Route::get('/pages', function (){ return view('pages'); })->name('pages');

Route::get('/about', function (){ return view('about'); })->name('about');

Ya con esto tenemos una página web con sus respectivas vistas, como la que vemos aquí.

Modificando el estilo de las vistas

Una de las ventajas de Laravel es poder modificar el archivo css, en la plantilla base, de forma que quede implementada en todas las vistas.

Como ejemplo creamos el archivo Public\css\mystyleii.css, con el siguiente contenido:

body {

background-color: #006699;

align-content: center;

}

.container{

margin-top:5%; margin-left: 10%; margin-right: 10%; background-color: #005782; color: white; border-radius: 15px; opacity: 0.8; width: 80%; height: auto;

}

.col-sm-10{

font-family:courier new; font-weight:bold; font-size:1.5em; text-align:center;

}

.hdlg{

font-size:30px;

font-family: cursive;

text-align: center;

}

@media screen and (max-width: 600px) {

.hdlg{

font-size:20px;

}

.col-sm-10{

font-size:1em;

padding: 5%;

}

.container{

margin-left: 0%;

margin-right: 15%;

width: 85%;

height: auto;

}

Hecho esto vamos al archivo Resources\Layouts\lgpage.blade.php y cambiamos:

css/mystyle.css

Por:

css/mystyleii.css

Para este ejemplo en concreto vamos a navlg.blade.php y modificamos:

Por:

Otra opción es guardar el archivo modificado como por ejemplo

navlgii.blade.php.

Y cambiar en lgpage.blade.php, el navlg con navlgii.

Podemos igualmente crear el archivo Resources\Layouts\lgpageii.blade.php, con las modificaciones, e ir a cada vista y reemplazar

@extends('layouts.lgpage'), con @extends('layouts.lgpageii').

Pero considero que la forma más eficiente es modificar los nombres de las layouts, renombrando lgpage.blade.php (que es la plantilla asignada en todas las vistas de este ejemplo), como lgpagei.blade.php, y lgpageii.blade.php como lgpage.blade.php, lo cual evita los cambios en cada vista; Además de permitir tener layouts con diferentes navbars, css, etc.

Guardando y editando las vistas para usar en cualquier servidor sin Laravel

Nota: Solo para páginas sin bases de datos.

Ya teniendo en nuestro equipo las vistas funcionando, podemos ver cada una y guardar cada vista, en archivos html con su nombre, en una carpeta creada para ello (tener en cuenta que la vista inicio debe ser guardada como index.html).

En todas las vistas tendremos que reemplazar los siguientes href, correspondientes a los links de las páginas, estilos y scripts (para ahorrar tiempo se modifica uno de los archivos, para luego copiar y reemplazar la parte modificada en los demás archivos):

http://127.0.0.1:8000/inicio

http://127.0.0.1:8000/pages

http://127.0.0.1:8000/about

Por:

index.html

pages.html

about.html

En el siguiente artículo trataremos la creación de un proyecto que exige la autenticación, y permite publicar, ver, editar y eliminar las publicaciones propias, además de ver publicaciones de otros usuarios.

Laravel 8 desde cero Parte V - Proyecto Blog VIP

Con su donación Apoya mis publicaciones, para seguir compartiendo el conocimiento. Gracias.

Buscar este blog