Capítulo 9 – Diseño de la Portada con productos – Curso App para Pizzería con delivery

Curso App para Pizzería con delivery

Capitulo 9 ➜ 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

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

866 visitas

« Capítulo 8 – Implementación CRUD Clientes

Capítulo 10 – Diseño e implementación del Catálogo »

{ Curso App para Pizzería con delivery }

Compartir link con tus amigos

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Indice

Empezando el Proyecto

1 Planteamiento del Proyecto 2 Instalación de Laravel y configuración inicial

Panel de Administración

3 Auth y Roles de Usuario: Admin y Cliente 4 Implementación del CRUD de Categorías 5 Implementación CRUD Productos 6 Implementación CRUD Precios 7 Implementación CRUD Pedidos 8 Implementación CRUD Clientes

FrontEnd Diseño

9 Diseño de la Portada con productos 10 Diseño e implementación del Catálogo 11 Diseño Detalle del Producto

Carrito de Compra

12 Instalación del paquete del carrito de compra 13 Diseño de Notificación en la barra de menú 14 Diseño Resumen Carrito Lateral 15 Diseño de la vista Ver Carrito 16 Implementación Agregar Item 17 Incrementar Cantidad del Item 18 Decrementar la cantidad de un item 19 Remover un item del Carrito 20 Eliminar el carrito de compra 21 Confirmar y procesar el carrito de compra

API Rest

22 Planteamiento de la API Rest 23 Registro 24 Login 25 Logout 26 Categorías 27 Productos

Diseño de la App Android

28 Mockups del Aplicativo

Autenticación Android

29 Introducción a la Autenticación 30 ApiService 31 RetrofitClient 32 SessionManager 33 MainActivity 34 LoginActivity 35 RegisterActivity 36 Logout

Catálogo de Productos

37 Categorías 38 Productos 39 Detalle del Producto

Carrito de Compra Android

40 Creación de la DB dbpizza 41 Métodos de consulta a la DB 42 CarritoActivity 43 CarritoAdapter 44 AddItem 45 CarritoAll 46 UpdateItem 47 Subtotal, Impuesto y Total 48 Preparar el Pedido y enviarlo al Servidor 49 Vincular a WhatsApp y clearItems