Creando páginas web estáticas y dinámicas en Laravel

Con Laravel, puede usar el enrutamiento básico, los controladores y la hoja para crear páginas web dinámicas simples con URL bonitas y sin necesidad de preocuparse por configuraciones complejas. Por supuesto, podemos pasar datos variables a las vistas de varias formas diferentes para crear páginas web dinámicas. Esto es lo que le interesará a la mayoría de los desarrolladores web, pero tiene sentido aprender a crear contenido tanto estático como dinámico con Laravel. Esto nos ayudará a comprender las diversas formas de pasar datos variables a las vistas en Laravel .

Leer el flujo de la aplicación

Al desarrollar sitios web o aplicaciones web, ayuda a visualizar su camino a través del proceso de solicitud. Puede ser una forma muy básica de recorrer la aplicación y ayudar con el diseño y la depuración. Hasta ahora, hemos aprendido un poco sobre cómo se maneja una solicitud web en Laravel. La solicitud http entra en la aplicación y Route :: get () determina qué controlador y método se llamará. Para la pantalla de bienvenida, eso significa visitar los /activadores index()en WelcomeController.php . La index()función se ejecuta view()y muestra un archivo de vista de welcome.blade.php . El visitante ve la nueva página web y todos están felices. En la siguiente sección, creará su propia página web estática con Laravel.

Creación de una página web estática de Laravel

Lo primero que haremos es crear una página web estática en Laravel. Crearemos la más básica de todas las páginas web además del mantra más utilizado en programación. Hello World . Haremos una página web que no diga más que Hello World. Es algo gracioso en cierto modo. Es casi como usar un auto de carreras de Fórmula 1 para visitar la tienda de comestibles, pero, por desgracia, debemos completar nuestra tarea.

En primer lugar, necesitaremos una ruta.

\ app \ Http \ routes.php fuente

1
Route::get('helloworld', 'HelloWorldController@index');

A continuación, necesitamos un controlador.

Podemos ver que nuestra ruta helloworldestá haciendo referencia a HelloWorldControllerun indexmétodo y un . Todavía no tenemos ninguno de estos, así que sigamos adelante y creémoslos. Con esto, usaremos la poderosa herramienta generadora de código, Laravel Artisan.

vagrant @ homestead: ~ / Code / laravel $ El php artisan make:controller --plain HelloWorldController
controlador se creó correctamente.
vagabundo @ homestead: ~ / Código / laravel $

Antes de echar un vistazo al código que se generó para nosotros, echemos un vistazo a todas las cosas que los artesanos pueden crear para nosotros en el espacio de nombres make.

vagrant @ homestead: ~ / Code / laravel $ php artisan list make
Laravel Framework versión 5.0.6

Uso:
[opciones] comando [argumentos]

Opciones:
–help (-h) Mostrar este mensaje de ayuda
–quiet (-q) No generar ningún mensaje
–verbose (-v | vv | vvv) Aumentar la verbosidad de los mensajes: 1 para salida normal, 2 para salida más detallada y 3 para depuración
–versión (-V) Mostrar la versión de esta aplicación
–ansi Forzar salida ANSI
–no-ansi Desactivar salida ANSI
–no-interacción (-n) No hacer ninguna pregunta interactiva
–env El entorno en el que debe ejecutarse el comando.

Comandos disponibles para el espacio de nombres "make":
make: command Crea una nueva clase de comando
make: console Crea un nuevo comando Artisan
make: controller Crea una nueva clase de controlador de recursos
make: event Crea una nueva clase de evento
make: middleware Crea una nueva clase de middleware
make: migration Crea un nuevo archivo de migración
make: model Crea una nueva clase de modelo Eloquent
make: provider Crea una nueva clase de proveedor de servicios
make: request Crea un nuevo formulario request class
vagrant @ homestead: ~ / Code / laravel $

En este caso, estamos creando un controlador, pero a medida que trabajamos más con Laravel, vemos que hay muchas otras opciones disponibles. Vale la pena dedicar un tiempo a aprender sobre todas estas herramientas para ayudar con el flujo de trabajo. Veamos ahora el código resultante que se generó para nosotros en nuestro nuevo HelloWorldController.

\ App \ Http \ Controllers \ HelloWorldController.php fuente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php namespace App\Http\Controllers;
 
use App\Http\Requests;
use App\Http\Controllers\Controller;
 
use Illuminate\Http\Request;
 
class HelloWorldController extends Controller
{
 
    public function index()
    {
        return view('helloworld');
    }
 
}

Tenga en cuenta que todavía necesitamos crear el método de índice por nuestra cuenta, y lo hicimos como puede ver. Sin embargo, el comando make creó todo el texto estándar inicial y se encargó de configurar nuestros espacios de nombres por nosotros, lo cual es realmente bueno.

Finalmente, necesitamos un archivo de vista.

Lo crearemos rápidamente nosotros mismos en la carpeta de recursos.

\ resources \ views \ helloworld.blade.php fuente

1
<h1>Hello World</h1>

Pruebe la página web estática

Probemos nuestra página web estática. Todo lo que tenemos que hacer es visitar la ruta que creamos anteriormente. Recuerde que nuestra ruta era helloworld en el archivo de rutas. Esto significa que podemos visitar http://homestead.app/helloworldy deberíamos ver los frutos de nuestro trabajo.

Página web estática de Laravel

¡Éxito!

Creación de una página web dinámica de Laravel

Hemos completado la creación de una página web estática en Laravel. Tal vez tenga un proyecto que requiera 50 o 100 páginas web estáticas. Ya tiene el proceso básico, así que siga esos pasos y construya desde allí. Ahora vamos a echar un vistazo a la creación de páginas web dinámicas con Laravel. Esto significa que ya no codificaremos datos en los archivos de vista, sino que les pasaremos datos dinámicos y los presentaremos de esa manera. Veamos cómo podemos hacer eso. Vamos a mantener la misma ruta, controlador y vista. Simplemente actualizaremos el código en ellos para demostrar cómo funciona esto.

El camino de Codeigniter

La gente ha estado pasando datos dinámicos a las vistas desde que CakePHP apareció por primera vez en la escena del desarrollo web hace algunas lunas. Pasar datos dinámicos a las vistas es tan común que ha habido algunas convenciones básicas sobre cómo hacerlo. Quizás Codeigniter hizo más famoso el concepto de pasar una matriz desde el controlador a la vista. Las claves de esta matriz se convierten en los nombres de las variables en el archivo de vista. Por convención, esta matriz suele utilizar el nombre de $data. Probémoslo.

\ App \ Http \ Controllers \ HelloWorldController.php fuente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php namespace App\Http\Controllers;
 
use App\Http\Requests;
use App\Http\Controllers\Controller;
 
use Illuminate\Http\Request;
 
class HelloWorldController extends Controller
{
 
    public function index()
    {
        $data['variableone'] = 'The value of variable one.';
 
        return view('helloworld', $data);
    }
 
}

\ resources \ views \ helloworld.blade.php fuente

1
{{ $variableone  }}

http://homestead.app/helloworld
datos dinámicos uno

¡Excelente! Parece estar funcionando bien. Tenga en cuenta que aunque solo pasamos un valor de variable, todavía se hizo a través de una matriz. El segundo argumento de laview()función debe ser una matriz, sin importar el número de valores que intente pasar. Con eso en mente, pasemos dos valores ahora.

\ App \ Http \ Controllers \ HelloWorldController.php fuente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php namespace App\Http\Controllers;
 
use App\Http\Requests;
use App\Http\Controllers\Controller;
 
use Illuminate\Http\Request;
 
class HelloWorldController extends Controller
{
 
    public function index()
    {
        $data['variableone'] = 'The value of variable one.';
        $data['variabletwo'] = 'The value of variable two.';
 
        return view('helloworld', $data);
    }
 
}

\ resources \ views \ helloworld.blade.php fuente

1
{{ $variableone  }}  {{  $variabletwo  }}

http://homestead.app/helloworld
datos dinámicos dos

Agradable. Tenga en cuenta que puede seguir agregando tantas claves a la matriz como necesite. Si tiene 15 variables que necesita pasar, cree 15 claves en la matriz y complete con sus 15 valores.

El `with()`método Laravel

Laravel proporciona una forma realmente agradable de pasar variables para ver archivos usando el with()método. En lugar de pasar una matriz como segundo argumento de la view()función, podemos encadenar el with()método a la view()llamada. Esta es una de esas formas más modernas de hacer las cosas, y hace que el código sea muy legible. Vamos a ver.

\ App \ Http \ Controllers \ HelloWorldController.php fuente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php namespace App\Http\Controllers;
 
use App\Http\Requests;
use App\Http\Controllers\Controller;
 
use Illuminate\Http\Request;
 
class HelloWorldController extends Controller
{
 
    public function index()
    {
        $data = 'The value of variable one.';
 
        return view('helloworld')->with('variableone', $data);
    }
 
}

\ resources \ views \ helloworld.blade.php fuente

1
{{ $variableone  }} 

http://homestead.app/helloworld
datos dinámicos uno

¿Está limitado a pasar solo una variable a la vista cuando usa el with()método? Por supuesto no. Simplemente pase una matriz a ese tonto y observe cómo se beneficia.

\ App \ Http \ Controllers \ HelloWorldController.php fuente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php namespace App\Http\Controllers;
 
use App\Http\Requests;
use App\Http\Controllers\Controller;
 
use Illuminate\Http\Request;
 
class HelloWorldController extends Controller
{
 
    public function index()
    {
        $variableone = 'The value of variable one.';
        $variabletwo = 'The value of variable two.';
 
        return view('helloworld')->with(['variableone' => $variableone, 'variabletwo' => $variabletwo]);
    }
 
}

\ resources \ views \ helloworld.blade.php fuente

1
{{ $variableone  }}  {{  $variabletwo  }}

http://homestead.app/helloworld
datos dinámicos dos

También podemos combinar la idea de construir una matriz antes de renderizar la vista y luego pasar los datos usando el with()método. Veamos cómo hacer eso aquí.

\ App \ Http \ Controllers \ HelloWorldController.php fuente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php namespace App\Http\Controllers;
 
use App\Http\Requests;
use App\Http\Controllers\Controller;
 
use Illuminate\Http\Request;
 
class HelloWorldController extends Controller
{
 
    public function index()
    {
        $data['variableone'] = 'The value of variable one.';
        $data['variabletwo'] = 'The value of variable two.';
        $data['variablethree'] = 'The value of variable three.';
 
        return view('helloworld')->with($data);
    }
 
}

\ resources \ views \ helloworld.blade.php fuente

1
{{ $variableone  }}  {{  $variabletwo  }}  {{  $variablethree  }}

http://homestead.app/helloworld
datos dinámicos tres