programando-laravel: Views

Mostrando entradas con la etiqueta Views. Mostrar todas las entradas

Escapar código html en las views

Si usamos CKEditor (o cualquier otro editor) en las views nos saldrá el código html, para escapar este código cambiar:


{{ $post->extract }}

por


{!! $post->extract !!}

CkEditor (texto enriquecido) en una view

Añadir texto enriquecido en una view:


@section('js')

...

<script src="https://cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js">




    <script>

        ClassicEditor

            .create( document.querySelector('#description'))

            .catch( error => {

                console.error( error );

            } );

@section('js')

Crear componentes personalizados en las views

Dentro de views hay que crear una carpeta components, y dentro de dicha carpeta la vista que vamos a reutilizar desde otras vistas, por ejemplo: card-post.blade.php que tendría algo así como:


@props(['post']) 

  
  <article class="mb-8 bg-white shadow-lg rounded-lg overflow-hidden">

      <img class="w-full h-72 object-cover object-center" src="{{ Storage::url($post->image->url) }}" alt="">

  ...

  </article>

Y luego desde la vista a la que se le quiera llamar:


@foreach ($posts as $post)

          <x-card-post :post="$post">

 @endforeach

View: check si no existe la foto


@if ($item->foto)

  <img src="{!! asset('images/'.$item->foto->ruta_foto) !!}">

@else

  {{ "-" }}

@endif

Pasar un array de un controller a una vista


public function galeria() {

 $cineastas = ["Robert donat", "James Stewart", "Gary Cooper", "James Cagney"];

 return view("galeria", compact("cineastas"));

}

Y en galeria.blade.php:


@section("cuerpo")

    @if (count($cineastas))

        <table width="90%" border=1>

            @foreach ($cineastas as $item)

                <tr><td>{{$item}}</td></tr>

            @endforeach

        </table>

    @endif

@endsection

Uso de Yield en las vistas

Creamos una plantilla genérica en views por ejemplo layouts/plantilla.blade.php (no es necesario que la carpeta se llame layouts):


<!doctype html>

<html lang="{{ app()->getLocale() }}">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

   <style>

    .cabecera { font-size:12px;}

    .cuerpo { font-size:22px;}

    .pie { font-size:32px;}

   </style>

</head>

<body>



<div class="cabecera">

    @yield("cabecera")

</div>



<div class="cuerpo">

    @yield("cuerpo")

</div>



<div class="pie">

    @yield("pie")

</div>



Lo mismo para personalizar en cada página los CSS y los js:

@yield("css_lsg")

...

@yield("js_lsg")

</body>

</html>

Y ahora ya podemos reutilizar esa plantilla con sus estilos en todas las demás vistas que queramos, por ejemplo en galeria.blade.php:


@extends("layouts/plantilla")



@section("cabecera")

Esta es la cabecera

@endsection



@section("cuerpo")

Esto es el cuerpo

@endsection



@section("pie")

Esto es el pie

@endsection

Mostrar los errores en la vista


@if ($errors->any())

                    <div class="alert alert-danger alert-dismissible">

                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>

                        <h4><i class="icon fa fa-ban"></i>Error!</h4>

                        <ul>

                        @foreach ($errors->all() as $error)

                            <li>{{ $error }}</li>

                        @endforeach

                        </ul>

                    </div>

                @endif

Vistas: varios

Al principio de cualquier vista:


@if (count($errors) > 0)

    echo "No existe ese registro";

@endif

En los listados para poner los links de editar y borrar:


<a href="{{ route('colaborador.edit',$item->id) }}">Editar</a>

<a onclick="checkConfirmDelete('{{ route('borrar-colaborador',$item->id) }}', '{{ $item->nom_colaborador }}');" href="javascript:void(0);">Borrar</a>

En js/funciones.js:


function checkConfirmDelete(ruta, literal) {

    if (confirm("¿Estás seguro de querer borrar "+literal+"?")) {

        location.href = ruta;

    }

}

Vistas: Layout

En cualquier vista:


@include('intranet.header')



...



@include('intranet.footer')

Fichero intranet/header.blade.php:


<!doctype html>

<html lang="{{ app()->getLocale() }}">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->

    <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="{!! asset('css/style.css') !!}" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">

</head>

<body>



{{app()->setLocale(session()->get('language'))}}



<nav class="navbar navbar-inverse">

    <div class="container-fluid">

        <div class="navbar-header">



            <a class="navbar-brand" href="#">INTRANET EDC {{ session()->get('language') }}</a>

        </div>

        <ul class="nav navbar-nav">

            <li class="dropdown">

  ...

     </li>

        </ul>

    </div>

</nav>

Fichero intranet/footer.blade.php:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script type="text/javascript" src="{!! asset('js/funciones.js') !!}"></script>



<script>

    $.ajaxSetup({

        headers: {

            'X-CSRF-TOKEN': '{{ csrf_token() }}'

        }

    });

</script>



</body>

</html>