Desarrollo Web con Laravel 10

 

Desarrollo Web con Laravel 10: Plantillas Blade, Clases CSS de Bootstrap y Enrutamiento

  1. Objetivos

    En este artículo, aprenderás a:

    1. Comprender los conceptos básicos de plantillas Blade en Laravel 10.
    2. Utilizar las clases CSS de Bootstrap para dar estilo a tus vistas.
    3. Configurar y manejar el enrutamiento en Laravel 10 para controlar la navegación de tu aplicación web.

    Conocimientos Previos

    Para seguir este blog con eficacia, es recomendable que tengas conocimientos básicos en:

    1. PHP y programación orientada a objetos.
    2. HTML, CSS y JavaScript.
    3. Conceptos básicos de MVC (Modelo-Vista-Controlador).

    Plantillas Blade

    Blade es el motor de plantillas incluido con Laravel que facilita la creación de vistas dinámicas y reutilizables.

    ¿Qué es una Plantilla Blade?

    Una plantilla Blade es un archivo con extensión .blade.php que permite insertar lógica de programación directamente dentro del HTML utilizando una sintaxis sencilla.

    Ejemplo de Uso

    1. Creación de una plantilla base:

      Crea un archivo llamado layout.blade.php en el directorio resources/views:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>@yield('title')</title>
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
      </head>
      <body>
          <div class="container">
              @yield('content')
          </div>
      </body>
      </html>

    2. Extender la plantilla base:

      Crea una nueva vista home.blade.php en resources/views:

      @extends('layout')
@section('title', 'Página de Inicio')
@section('content')
      <div class="jumbotron">
          <h1 class="display-4">¡Bienvenido a Laravel 10!</h1>
          <p class="lead">Este es un simple ejemplo de cómo usar plantillas Blade.</p>
      </div>
      @endsection

    Clases CSS de Bootstrap

    Bootstrap es un framework CSS que facilita el diseño de aplicaciones web responsivas y atractivas.

    ¿Qué es Bootstrap?

    Bootstrap proporciona una colección de clases CSS y componentes JavaScript que puedes usar para dar estilo y funcionalidad a tu sitio web.

    Ejemplo de Uso

    Modifica home.blade.php para incluir componentes de Bootstrap:

    @extends('layout')
@section('title', 'Página de Inicio')
@section('content')
    <div class="jumbotron">
        <h1 class="display-4">¡Bienvenido a Laravel 10!</h1>
        <p class="lead">Este es un simple ejemplo de cómo usar plantillas Blade.</p>
        <hr class="my-4">
        <p>Utilizamos Bootstrap para estilizar esta página.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Aprende más</a>
    </div>
    @endsection

    Enrutamiento en Laravel 10

    El enrutamiento en Laravel te permite definir las URL que manejará tu aplicación y asignarles un controlador específico.

    ¿Qué es el Enrutamiento?

    El enrutamiento es el proceso de definir cómo las solicitudes HTTP deben ser manejadas por la aplicación. En Laravel, esto se hace en el archivo routes/web.php.

    Ejemplo de Uso

    1. Definir rutas en web.php:

      Abre el archivo routes/web.php y añade las siguientes rutas:
      Route::get('/', function () {
          return view('home');
      });
Route::get('/about', function () {
          return view('about');
      });

    1. Crear la vista about.blade.php:

      Crea el archivo about.blade.php en resources/views:

      @extends('layout')
@section('title', 'Acerca de Nosotros')
@section('content')
      <div class="container">
          <h1>Acerca de Nosotros</h1>
          <p>Esta es la página de "Acerca de Nosotros".</p>
      </div>
      @endsection

    Conclusiones

    Laravel 10, combinado con plantillas Blade y Bootstrap, ofrece una manera eficiente y poderosa de desarrollar aplicaciones web modernas. Las plantillas Blade permiten una estructura clara y reutilizable para tus vistas, mientras que Bootstrap facilita la creación de interfaces atractivas y responsivas. El enrutamiento en Laravel es simple e intuitivo, lo que te permite manejar la navegación de tu aplicación de manera efectiva.

    Bibliografía

    1. Documentación Oficial de Laravel
    2. Bootstrap Documentation
    3. Composer - Dependencias en PHP
    4. PHP Official Documentation
        

Comments

Post a Comment

Popular posts from this blog

Laravel 10: Instalación, Requisitos y Estructura del Proyecto

Introducción Laravel es uno de los frameworks de PHP más populares y robustos para el desarrollo de aplicaciones web. En su versión 10, Laravel sigue ofreciendo una amplia gama de funcionalidades que facilitan el desarrollo de aplicaciones escalables y mantenibles. En este blog, exploraremos cómo instalar Laravel 10, los requisitos necesarios y explicaremos la estructura de los archivos del proyecto descargado. Objetivos 1. Entender los requisitos necesarios para instalar Laravel 10. 2. Aprender el proceso de instalación de Laravel 10. 3. Familiarizarse con la estructura de archivos de un proyecto Laravel. Requisitos: Antes de comenzar con la instalación de Laravel 10, debemos asegurarnos de que nuestro entorno de desarrollo cumple con los siguientes requisitos: PHP >= 8.1: Laravel 10 requiere al menos PHP 8.1. Composer: Composer es un gestor de dependencias para PHP que facilita la instalación de Laravel y sus paquetes. Servidor Web: Apache o Nginx. Base de Datos: MySQL, Postgr...
Read more

Autenticación de Usuario con Laravel 10

  Autenticación de Usuario con Laravel 10 Objetivos En este blog, aprenderás cómo implementar un sistema de autenticación de usuarios utilizando Laravel 10. La autenticación es un componente esencial para muchas aplicaciones web, permitiendo a los usuarios acceder a ciertas funcionalidades o datos de manera segura. Al final de esta guía, deberías ser capaz de: Configurar y personalizar el sistema de autenticación en Laravel 10. Gestionar el registro, inicio de sesión y cierre de sesión de usuarios. Proteger rutas y recursos mediante middleware de autenticación. Implementar características adicionales como el restablecimiento de contraseñas. Conocimientos Previos Antes de comenzar, es importante que tengas un conocimiento básico de: PHP : Laravel es un framework PHP, por lo que deberías sentirte cómodo con el lenguaje. Laravel : Conocer los fundamentos de Laravel, como rutas, controladores, vistas y migraciones, te ayudará a seguir este tutorial sin problemas. Composer : Saber cómo ...
Read more