AGREGAR PLANTILLAS

Retomamos el proyecto que estamos trabajando, abrimos el ID en la ruta del proyecto

Lo primero que aremos es ir a la carpeta donde está la plantilla copiamos todo el contenido del
archivo index. Luego lo pegamos en el layout creado con anterioridad, resources/views/

NOTA se debe borrar el contenido y el @yield('content') se coloca después de cerrar el </head>

Antes del body.

Levantan el servidor

Al cargar el home que ya estaba configurado desde la guía pasada, te mostrara el home pero sin
estilos todo html. Para mejorar esto se debe copiar los archivos css, fonts, js y las imágenes.

Copiamos las carpetas css,js e imágenes(desde la plantilla), y las pegamos en public en laravel, la
cual es la encargada de contener estos tipos de archivos. Copiamos en la carpeta public/

Actualizamos el home y se cargara la pagina normalmente como se muestra en la plantilla.

NOTA: en la pagina home no se ha realizado ningún cambio por eso al cargar el home sale la
palabra HOME, al cargar la página, eso es por tener la palabra en esa página.

Ahora nos vamos a colocar el contenido que le corresponde a cada pagina

Buscamos en el layout cortamos desde

<!-- Masthead-->
Hasta antes de
<!-- Footer-->

La idea es que todo lo que se repita quede en el archivo layout, la demás información en cada
pagina

luego lo pegamos en el archivo home dentro section

@section('content')
PEGAR AQUI
@stop

No olviden borrar la etiqueta H1

Se realiza el procedimiento para cada una de las paginas

Al tener dos páginas creadas nos dirigimos hasta el archivo layout para editar la navegación

buscamos la navegación

nav

etiqueta li

la editamos para que quede de la siguiente forma.

<nav class="collapse navbar-collapse navbar-right" role="navigation">

<div class="main-menu">

<ul class="nav navbar-nav navbar-right">

<li><a href="index.html" >Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="service.html">Service</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>
 </div>

</nav>

NOTA

Hasta ahora solo se realiza el menú de forma tradicional html. La idea es crear las rutas y
asociarlas

Nos vamos al archivo routes/web

Donde se crearon unas rutas para poder verlas desde el navegador, hasta ahora están asi:

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

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

Route::get('service', function () {
return view('service');
});
Route::get('contact', function () {
return view('contact');
});

para hacer esto creamos una ruta con {{ route('nombre de la ruta')}}

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

Route::get('about', function () {
return view('about');
})->name('about');
Route::get('service', function () {
return view('service');
})->name('service');
Route::get('contact', function () {
return view('contact');
})->name('contact');
Se lecoloca al final de cada ruta un alias para poder hacer referencia solo con el nombre.

->name('/');

Luego nos vamos a resources/views/layaout

Y cabíamos la etiqueta li del nav

Quedando de la siguiente forma

<li><a href="{{route('/')}}" >Inicio</a></li>

<li><a href="{{route('about')}}">Nosotros</a></li>

<li><a href="{{route('service')}}">Servicios</a></li>

<li><a href="{{route('contact')}}">Contacto</a></li>

Para nuestra plantilla quedara así

<li class="nav-item"><a class="nav-link" href="{{route('/')}}">Home</a></li>

<li class="nav-item"><a class="nav-link" hre
f="{{route('service')}}">Service</a></li>
<li class="nav-item"><a class="nav-link" hre
f="#about">About</a></li>
<li class="nav-item"><a class="nav-link" hre
f="#team">Team</a></li>
<li class="nav-item"><a class="nav-link" hre
f="{{route('contact')}}">Contact</a></li>

Cargamos la pagina y nos damos cuenta que home y about tienen su información, las otras páginas
solo muestran información de Layout que están heredando.

A PRACTICAR JOVENES