Laravel Blade Templating

En los tutoriales recientes, hemos pasado de instalar laravel hasta configurar controladores RESTful . En nombre de la brevedad, simplemente devolvimos datos a la pantalla cuando probamos las rutas, modelos y controladores que hemos construido. Es posible que se haya estado preguntando acerca de las vistas. Bueno, ahora estamos listos para embellecer un poco las cosas, y qué mejor manera que incorporar el motor de plantillas Blade de Laravel con Twitter Bootstrap para comenzar a construir nuestras opiniones. ¡Vamos a hacerlo!

Motor de plantilla de hoja

¡Ahora podemos comenzar a hacer algunas vistas! Recordará que en nuestro Blogposts Controller estábamos devolviendo los datos al navegador de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 
class BlogpostsController extends BaseController {
 
	/**
	 * Display a listing of the resource.
	 *
	 * @return Response
	 */
	public function index()
	{
		return Blogpost::all();
	}

¡Empecemos a usar Vistas en su lugar! Cuando queremos cargar una vista, lo haremos utilizando el make()método de la ViewFachada. También queremos pasar todos los datos que necesitemos a la vista y podemos hacerlo de una de tres maneras.

1
2
3
4
5
6
7
8
// using the with method
return View::make('blogposts/index')->with('blogposts', $blogposts);
 
//  using dynamic methods
return View::make('blogposts/index')->withBlogposts($blogposts);
 
//  passing in an array as 2nd argument to make
return View::make('blogposts/index', ['blogposts' => $blogposts]);

En el fragmento anterior, blogposts/indexse refiere a /app/views/blogposts/indexla estructura de su directorio.

Páginas maestras

Empezaremos creando una página maestra. La página maestra contiene cualquier HTML repetitivo que no queremos tener que volver a crear en todas las vistas individuales. Incluiremos jQuery y Twitter Bootstrap en esta página maestra para que podamos tener acceso a todos sus grandes beneficios. Este archivo residirá en el /app/views/layoutsdirectorio.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
 
<head>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Larablog</title>
</head>
 
<body>
<div class="container">
  <div>
    <h1>{{ link_to('/', 'Larablog') }}</h1>
    <p class="lead">Laravel, Blade, and Bootstrap working in harmony.</p>
  </div>
  <div class="row">
    <div class="col-sm-8 blog-main"> @yield('content') </div>
  </div>
</div>
</body>
 
</html>

¡Frio! En el fragmento de arriba, notarás dos cosas que pueden parecer un poco extrañas.

{{ link_to('/', 'Larablog') }}
Las {{y}} indican secciones que se repetirán en la pantalla. Esta línea también hace uso de la link_tofunción para que podamos crear un enlace de inicio, por así decirlo, en nuestra página de blog que enlaza con la raíz. La link_tofunción toma dos argumentos, la ruta a la que vinculará y el texto de anclaje.

@yield('content')
La @yieldpalabra clave es una forma de hacer una sustitución de código o códigos cortos, por así decirlo. Definiremos lo que realmente vamos a poner en esta área cedida en nuestros archivos de vista.

Crear archivos de vista

Para este ejemplo, necesitamos algunos archivos de vista. En nuestro /app/views/blogpostsdirectorio podemos crear index.blade.phpasí como show.blade.php. Esos archivos se verán así:

index.blade.php

1
2
3
4
5
6
7
@extends('layouts.default')
 
@section('content')
  @foreach ($blogposts as $blogpost)
      <li> {{ link_to("/blogposts/{$blogpost->slug}", $blogpost->title) }} </li>
  @endforeach
@stop

show.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
@extends('layouts.default')
 
 
@section('title')
	{{ $blogpost->title }} 
@stop
 
 
@section('content')
  <h3> {{ $blogpost->title }} </h3>
  <p> {{ $blogpost->body }} </p>
@stop

Esto podría ser un poco nuevo para ti, lo fue para mí. De hecho, diría que hay muchos pros y contras al usar un motor de plantillas, pero dado que realmente estamos tratando de ser puristas de Laravel aquí, haremos un esfuerzo extra y profundizaremos en Blade . Los archivos de vista deben comenzar con la palabra clave @extends como se ve aquí para poder hacer referencia a la página maestra que se utilizará. Además, define áreas de código para inyectar en la página maestra definiendo secciones utilizando las palabras clave @section y @stop . Todas las construcciones de programación normales, y algunas nuevas, están disponibles para usted como puede ver aquí.

Si declaraciones

1
2
3
4
5
6
7
8
9
10
11
@if (count($blogposts) === 1)
    I have one blogpost!
@elseif (count($blogposts) > 1)
    I have several blogposts!
@else
    I don't have any blogposts!
@endif
 
@unless (Auth::check())
    You are not signed in.
@endunless

Bucles

1
2
3
4
5
6
7
8
9
10
11
@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor
 
@foreach ($blogposts as $blogpost)
    <p>This is blogpost {{ $blogpost->title }}</p>
@endforeach
 
@while (true)
    <p>I'll keep looping!</p>
@endwhile

Incluye

1
@include('view.name')

Actualizar el controlador de Blogposts

Ahora que tenemos una página maestra y algunos archivos de vista creados, podemos modificar el controlador de Blogposts para que haga uso de las vistas en lugar de simplemente devolver datos al navegador. Estas son las modificaciones que se deben realizar en los métodos index()y show():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?php
 
class BlogpostsController extends BaseController {
 
	/**
	 * Display a listing of the resource.
	 *
	 * @return Response
	 */
	public function index()
	{
		$blogposts = Blogpost::all();
		return View::make('blogposts/index')->withBlogposts($blogposts);
	}
 
	/**
	 * Show the form for creating a new resource.
	 *
	 * @return Response
	 */
	public function create()
	{
		//
	}
 
	/**
	 * Store a newly created resource in storage.
	 *
	 * @return Response
	 */
	public function store()
	{
		//
	}
 
	/**
	 * Display the specified resource.
	 *
	 * @param  int  $id
	 * @return Response
	 */
	public function show($id)
	{
		 if (is_numeric($id))
		 {
			 $blogpost = Blogpost::find($id);
			 return View::make('blogposts/show')->withBlogpost($blogpost);
		 }
		 else
		 {
			 $column = 'slug'; // This is the name of the column you wish to search
		
			 $blogpost = Blogpost::where($column , '=', $id)->first(); //  find the name to id association
			 return View::make('blogposts/show')->withBlogpost($blogpost);
		 } 
	}
 
	/**
	 * Show the form for editing the specified resource.
	 *
	 * @param  int  $id
	 * @return Response
	 */
	public function edit($id)
	{
		//
	}
 
	/**
	 * Update the specified resource in storage.
	 *
	 * @param  int  $id
	 * @return Response
	 */
	public function update($id)
	{
		//
	}
 
	/**
	 * Remove the specified resource from storage.
	 *
	 * @param  int  $id
	 * @return Response
	 */
	public function destroy($id)
	{
		//
	}
 
}

Revise el flujo del programa

Revisemos el flujo del programa antes de intentar cargarlo en nuestro navegador.

Tenemos un routes.phparchivo que ha registrado todas nuestras rutas tranquilas para nosotros.
Route::resource('blogposts', 'BlogpostsController');

Luego golpearemos un controlador que tiene la lógica para nuestros métodos index () y show (). Ver código arriba.
class BlogpostsController extends BaseController {

El controlador hará uso del modelo Blogpost.

1
2
3
4
5
6
7
8
class Blogpost extends Eloquent {
	protected $guarded = array();
 
	public function tags() 
	{
		return $this->belongsToMany('Tag');	
	}
}

Al hacer uso del modelo, podemos obtener los datos que queramos de la base de datos. Una vez que el controlador ha utilizado el modelo para obtener los datos de la base de datos, seguirá adelante y renderizará una vista View::make()pasando los datos necesarios. Cuando el controlador indica que realice la vista, Laravel utilizará de manera inteligente la página maestra además de los fragmentos de HTML que se encuentran en los archivos de vista para crear la página renderizada final.

¡Probémoslo!

Configuramos muchas cosas en nuestra ruta, controlador, modelo y vista. Probémoslo para ver qué obtenemos

Primero visitaremos http://you.rock/blogposts

Heeyyyy ¡Te ves

bien Charlie Brown!

Ahora que vemos una lista de todas las publicaciones de blog, continúe y haga clic en uno de los enlaces para profundizar y ver información específica sobre la publicación de blog. Lo intentaremoshttp://you.rock/blogposts/laravel-eloquent-orm-tutorial

¡Excelente! ¡Ver publicaciones individuales usando una bonita sintaxis de URL también funciona!

Otra ventaja es que al incluir Twitter Bootstrap en la página maestra, podemos ver el aspecto visual mucho mejor que cuando estábamos descargando JSON por primera vez en el navegador. Cuando solo queremos probar nuestra lógica y no preocuparnos por el front-end, sigue siendo genial poder simplemente devolver JSON o usar la dd()función de volcado o morir.

Esto es realmente emocionante, ¡estamos haciendo un gran progreso para poner al día nuestras habilidades con Laravel!

Header Ads Widget

Laravel Blade Templating

Motor de plantilla de hoja

Páginas maestras

Crear archivos de vista

index.blade.php

show.blade.php

Si declaraciones

Bucles

Incluye

Actualizar el controlador de Blogposts

Revise el flujo del programa

¡Probémoslo!

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget