05.-Laravel Tutorial en Español [blade] ¡¡En tiempo récord⚡!!
INTRODUCCIÓN
Yo entiendo la molestia de algunos que dirán: “Oye pero ta estamos aprendiendo laravel y ademas vamos a aprender la sintaxis de blade” a lo que yo les diré, pues si ni modo pero blade es muy simple y son solo unos pocos elementos extras que vamos a aprender y ademas nos va a ahorrar mucho código.
Por otro lado les puedo decir que Blade es opcional, pero no recomiendo brincarse este tutorial por 2 simples razones:
1.- Hay muchos proyectos ya creados con laravel y blade o quizas en su empresa tengan que editar codigo de otro programador que trabajo con blade.
2.- Hay sistemas que generan código de forma automática y tambien trabajan con blade y ocurre el mismo inconveniente que el la razon 1 osea que algun dia vamos a tener que editar ese codigo.
Si no te convenció ninguna de estas 2 razones pues te tengo una tercera:
3.- Blade es muy simple no te tomara ni 15 minutos aprender.
PROCEDIMIENTOS
1.- En el archivo routes/web.php agregaremos este código:
Route::get('noticias', function () { return view('noticias'); })->name('noticias'); Route::get('blog', function () { return view('blog'); })->name('blog');
2.- En la carpeta resources/views creamos el archivo master.blade.php donde colocamos este codigo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="description" content=""/> <meta name="author" content=""/> <title>Starter Template for Bootstrap</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> <style> body {padding-top: 50px;} .starter-template {padding: 40px 15px;text-align: center;} </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- blade sustituye esto por todo lo que este en @ section('titulo') --> <a class="navbar-brand" href="#">@yield('titulo')</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <!-- blade genera un link hacia las rutas --> <li><a href="{{ route('noticias') }}">Noticias</a></li> <li><a href="{{ route('blog') }}">Blog</a></li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="starter-template"> @yield('contenido') <p><a href="http://getbootstrap.com/getting-started/">http://getbootstrap.com/getting-started/</a></p> </div> </div> </div> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> </body> </html>
3.- En la carpeta resources/views creamos el archivo blog.blade.php al que el vamos a poner este codigo:
@extends('master')
@section('titulo')
Blog
@endsection
@section('contenido')
<h1>Contenido del blog Blog </h1>
Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Pellentesque auctor neque nec urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce convallis metus id felis luctus adipiscing.
Duis vel nibh at velit scelerisque suscipit. Vivamus quis mi. Pellentesque auctor neque nec urna. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.
Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Curabitur a felis in nunc fringilla tristique. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi.
@endsection
4.- En la carpeta resources/views creamos el archivo noticias.blade.php al que el vamos a poner este codigo:
@extends('master')
@section('titulo')
Noticias
@endsection
@section('contenido')
<h1>Contenido del blog Noticias </h1>
Vestibulum eu odio. Maecenas vestibulum mollis diam. Cras varius.
Morbi mattis ullamcorper velit. Fusce ac felis sit amet ligula pharetra condimentum. Proin faucibus arcu quis ante.
@endsection
Ave que vuela, a la cazuela.