➜ Diseño de la Portada con productos
Diseño e implementación de la Portada en Laravel 9 | Empecemos a configurar el frontend de nuestra aplicación web con HTML+ CSS usando para ello Bootstrap, el Menu de Navegación y mostrar los productos
Empecemos a configurar el frontend de nuestra aplicación web con HTML+ CSS usando para ello Bootstrap, el Menu de Navegación y mostrar los productos
Agregar Rutas a web.php
Route::get('/', [App\Http\Controllers\FrontController::class, 'index']);
Route::get('/catalogo', [App\Http\Controllers\FrontController::class, 'catalogo']);
Route::get('/catalogo/{producto:slug}', [App\Http\Controllers\FrontController::class, 'producto']);
Route::view('/empresa', 'front.empresa');
Route::view('/preguntas', 'front.preguntas');
Route::view('/terminos', 'front.terminos');
Controlador
<?php
namespace App\Http\Controllers;
use App\Models\Producto;
use App\Models\Categoria;
use Illuminate\Http\Request;
class FrontController extends Controller
{
public function index(){
$productos = Producto::wherePortada(true)->get();
return view('welcome', compact("productos") );
}
public function catalogo(){
$categorias = Categoria::all();
return view('front.catalogo', compact("categorias") );
}
....
layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/bootstrap.min.js"></script>
<link rel="icon" type="image/png" href="/img/favicon.png"/>
<style>
.bg-danger{ background: #ff6606 !important}
</style>
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
<img src="/img/logo.png" alt="Pizzería9">
</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 ms-auto">
</ul>
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="/">Inicio</a></li>
<li class="nav-item"><a class="nav-link" href="/catalogo">Catálogo</a></li>
<li class="nav-item"><a class="nav-link" href="/empresa">Empresa</a></li>
<li class="nav-item"><a class="nav-link" href="/preguntas">Preguntas</a></li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
@if (Cart::content()->count())
<li class="nav-item">
<a class="nav-link position-relative" href="/vercarrito" >
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-fill" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
{{Cart::content()->count()}}
<span class="visually-hidden">unread messages</span>
</span>
</a>
</li>
@endif
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Entrar') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
@yield('content')
<div class="container mt-5">
<p class="text-center">© Todos los derechos reservados | Pizzería9 | 2022 codea.app <a href="/terminos">Términos y condiciones de uso</a></p>
</div>
</body>
</html>
Vista catalogo.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<h1 class="text-center fs-4">CATALOGO</h1>
</div>
</div>
</div>
@endsectio
Vista terminos.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<h1 class="text-center fs-4">TERMINOS</h1>
</div>
</div>
</div>
@endsectio
Vista preguntas.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<h1 class="text-center fs-4">PREGUNTAS</h1>
</div>
</div>
</div>
@endsectio
Vista Welcome.blade.php
@extends('layouts.app')
@section('content')
<div class="container-fluid bg-danger">
<img src="/img/banner.jpg" alt="Pide tu pizza en Pizzeria9" class="img-fluid mx-auto d-block">
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<h1 class="text-center mt-5 mb-3">¡Pide ahora tu pizza en Arequipa!</h1>
<div class="row">
@foreach ($productos as $i)
<div class="col-sm-3 mt-3 mb-3">
<div class="card">
<img src="/img/{{$i->urlfoto}}" class="card-img-top">
<div class="card-body text-center">
<p>{{$i->precio}}</p>
</div>
<div class="card-footer">
<a href="/catalogo/{{$i->slug}}" class="btn btn-outline-success w-100">{{$i->nombre}}</a>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
@endsection
1090 visitas
Capítulo 10 – Diseño e implementación del Catálogo »
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar¡Qué aprenderás?
tooltip bs-tooltip-top bs-tooltip-end bs-tooltip-bottom bs-tooltip-start show fade tooltip-inner
