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
Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

🟢Editar código de un módulo en Dolibarr [04]

🟢Editar código de un módulo en Dolibarr [04]

En este tutorial vamos editar el código de nuestro módulo personas para poder personalizar algunas…

2 meses hace
🟢Crear un sub_módulo en Dolibarr [03]

🟢Crear un sub_módulo en Dolibarr [03]

En este tutorial vamos a crear un sub módulo llamado seguridad que será muy parecido…

2 meses hace
🟢Modificar un módulo en Dolibarr [02]

🟢Modificar un módulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 meses hace
🟢Constructor de módulos en Dolibarr

🟢Constructor de módulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una política clara:…

2 meses hace
🟢Tickets en Dolibarr [19]

🟢Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 meses hace
🟢Agenda en Dolibarr [18]

🟢Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 meses hace