Plantilla de hoja de Laravel

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 vistas. ¡Vamos a hacerlo!

Motor de plantilla de hoja

¡Ahora podemos empezar a hacer algunas vistas! Recordará que en nuestro Controlador de Blogposts estábamos devolviendo los datos al navegador así:

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();
	}

¡Comencemos a usar Views en su lugar! Cuando queramos cargar una vista, lo haremos usando el make()método de ViewFacade. 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 de arriba, blogposts/indexse hace referencia 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á dos cosas que pueden parecer un poco extrañas.

{{ link_to('/', 'Larablog') }}
Las {{y}} indican las 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 se vinculará y el texto de anclaje.

@yield('content')
La @yieldpalabra clave es una forma de hacer 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 visualización. 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 en el uso de un motor de plantillas, pero como realmente estamos tratando de ser puristas de Laravel aquí, haremos un esfuerzo adicional y profundizaremos en Blade . Los archivos de visualización 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 solo 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)
	{
		//
	}
 
}

Revisar 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 (). Consulte el código anterior.
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 le indique hacer la vista, Laravel hará uso inteligente de 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 sintaxis de URL bonita 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, es genial poder simplemente devolver JSON o usar la función dd(), o die dump.

Esto es realmente emocionante, ¡estamos progresando muchísimo para poner al día nuestras habilidades con Laravel!

Header Ads Widget

Plantilla de hoja de Laravel

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

Revisar el flujo del programa

¡Probémoslo!

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget