Inicio » Cursos » App para Pizzería con delivery

Curso App para Pizzería con delivery

Capitulo 9 ➜ Diseño de la Portada con productos

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

 


442 visitas

Sigue con el curso: 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

Descargar ahora

Más cursos que pueden interesarte

Más cursos

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023