Capitulo 9 del Módulo 3 FrontEnd Diseño

➜ 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">&copy; 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

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

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú