Laravel Con Jetstream

Php Laravel con Jetstream
>laravel new lara8Blade –jet
With Jetstream stack do you prefect?

[0]
[1]
>0
Will your application use teams? (yes/no) [no]:

>no
>cd lara8Blade
Abrimos Visual Studio con el comando code .
>code .
Corremos dos comandos

>npm install
>npm run dev
Creamos una base de datos en phpmyadmin con el mismo nombre del proyecto
lara8Blade, solo la base de datos basia sin tablas, como lo puedes ver en la siguiente
imagen:
Ahora debemos ejecutar una migración en la terminal con el comando:
>php artisan migrate
Levantamos un servidor con el comando:

>php artisan serve
Vamos al navegador y colocamos localhost:8000

Podemos ver el menú de login y register.
Plantillas Blade
Vamos a crear nuestra plantilla padre, vamos a la carpeta views/layaouts y creamos

un archivo con el nombre vistapadre.blade.php:
views/layouts/vistapadre.blade.php
Una vez creado el archivo, vamos a Bootstrap 5 hacemos click en el botón Get Started
y vamos a buscar el código de la plantilla Starter Template, aprovechando que Bootstrap 5 ya
no trabaja con Jquery y es más ligero. Podemos eliminar los comentarios y después del body
podemos aprovecha y volvemos a la página web de Bootstrap y colocamos en el body un
componente navbar de Bootstrap, el cual debe estar encerrado dentro de una etiqueta div con
la clase containder-fluid para que abarque el 100% del ancho de la página. El código final
debe quedar así:
vistapadre.blade.php
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" re
l="stylesheet" integrity="sha384-
wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossori
gin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Plantilla Padre</h1>

<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
@yield('contenidoPrincipal')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" inte
grity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/
ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Vamos a colocar nuestra sección de contenido variable con el siguiente código:
@yield(‘contenidoPrincipal’);
Nota: este código va debajo del navbar
La lógica de las plantillas Blade en que ellas van a extender de la plantilla padre y de
hay en adelante vamos a crear todas las paginas de nuestra aplicación teniendo como base la
vistapadre, es un método muy organizado para trabajar y que hace que nuestro código sea
mantenible en el tiempo.
Crear las vistas hijas

Vamos a crear en la raíz de la carpeta views un archivo lo llamaremos vista1.blade.php,
dentro de este archivo vamos a usar una directiva de laravel @extend y para referenciar al
archivo colocamos el nombre de la carpeta seguido de un punto “.” Y el nombre del archivo sin
su extensión: @extend(‘layouts.vistapadre’), ya mi pagina ha heredado del archivo
vistapadre toda su estructura.
El contenido de mi archivo vista1.blade.php lo voy a encerrar dentro de la directiva

@section, que tiene un inicio @section(‘contenidoPrincipal’) y un cierre @endsection,
dentro de esta sección yo coloco todo mi código correspondiente a vista1, ejemplo, puedo
colocar un componente de tarjeta de Bootstrap 5.
Para poder diferenciar las vista hijo de la plantilla padre, vamos a colocar un div con la
clase container de Bootstrap que nos crea unos márgenes a los lados, colocamos un h1 con
la frese contenido vista1 y debajo un componente de tres tarjetas.
Nuestro código debe quedar como el siguiente:
Vista1.blade.php
@extends('layouts.vistapadre')
@section('contenidoPrincipal')
<div class="container mt-5">
<h1>Contenido de Vista1</h1>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://loremflickr.com/640/360" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a
natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<img src="http://placeimg.com/640/360/any" class="card-img-top" alt="...">
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<img src="https://picsum.photos/640/360" class="card-img-top" alt="...">
<p class="card-text">This is a longer card with supporting text below as a
natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
@endsection
Nota: este componente card de Bootstrap 5 tiene una etiqueta img la cual le coloque un
enlace a picsum,photos una página que genera imágenes aleatorias, la puedes usa en la
siguiente dirección: https://loremipsum.io/es/21-of-the-best-placeholder-image-generators/
ROUTES
Ahora para poder ver todos los cambios realizados vamos a la carpeta de rutas routes/web y
vamos a cambiar donde dice welcome por vista1.
Route::get('/', function () {
return view('welcome');
});
return view(‘vista1’);
})->name(‘home’);
Ahora vamos al navegador y vemos los cambios realizados
Vamos a crear otro archivo dentro de la carpeta views llamado vista2.blade.php,

repetimos lo mismo que con la vista1.blade.php, colocamos un contenido distinto para ver el
funcionamiento de la herencia de plantilla con Blade.
Nuestro código contendrá un div container mt-5, h2 con la frase Contenido Vista 2 y
una tabla con la clase table-hover mt-5.
Vista2.blade.php
@extends('layouts.vistapadre')
@section('contenidoPrincipal')
<div class="container mt-5">
<h2>Contenido Vista 2</h2>
<table class="table table-hover mt-5">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
@endsection
En nuestras rutas vamos a colocar una ruta que me permita ver la vista2
return view('vista1');
})->name('home');
Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
return view('dashboard');
})->name('dashboard');
Route::get('/vista2', function () {
return view('vista2');
})->name('reporte');
Nota: Observa que en las rutas colocamos ->name(‘home’); esta es una convención de
laravel que nos permite colocarles nombres a las rutas facilitando que en el menú de
navegación al colocar los enlaces podamos usar la siguiente estructura {{ route(‘home’) }} en
los link del navbar.
Nuestra vista padre quedaría así:
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" re
l="stylesheet" integrity="sha384-
wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossori
gin="anonymous">
<title>Hello, world!</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<a class="nav-link active" aria-current="page" href="{{ route('home') }}">Home</a>
</li>
<a class="nav-link" href="{{ route(reporte) }}">Report</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
@yield('contenidoPrincipal')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" inte
grity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/
ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Ya le podemos quitar el h1 con la frase Plantilla Padre a la vistapdre.blade.php. Ahora

podemos usar nuestro menú de navegación para ver las paginas hijas creadas.
Nuestra plantilla Bootstrap es reponsive se adapta a dispositivos móviles, podemos ver
que tiene un menú tipo hamburguesa el cual se expande y contrae en los teléfonos.

Laravel Con Jetstream

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Laravel Con Jetstream

Cargado por

Copyright:

Formatos disponibles

Php Laravel con Jetstream

>laravel new lara8Blade –jet

With Jetstream stack do you prefect?

Will your application use teams? (yes/no) [no]:

Corremos dos comandos

Levantamos un servidor con el comando:

Vamos al navegador y colocamos localhost:8000

Vamos a crear nuestra plantilla padre, vamos a la carpeta views/layaouts y creamos

Vamos a colocar nuestra sección de contenido variable con el siguiente código:

Crear las vistas hijas

El contenido de mi archivo vista1.blade.php lo voy a encerrar dentro de la directiva

Nuestro código debe quedar como el siguiente:

Ahora vamos al navegador y vemos los cambios realizados

Vamos a crear otro archivo dentro de la carpeta views llamado vista2.blade.php,

Nuestra vista padre quedaría así:

Ya le podemos quitar el h1 con la frase Plantilla Padre a la vistapdre.blade.php. Ahora

También podría gustarte