Cómo Crear un Blog en Laravel

Laravel es un framework de aplicaciones web PHP con una sintaxis expresiva y elegante. Dispone de una amplia biblioteca de paquetes y se encarga de gran parte del trabajo pesado de la programación, dejándote que te centres en tu creatividad.

Un uso creativo de Laravel es la construcción de un blog personal. Este tutorial describe cómo utilizar Laravel para construir y publicar un blog en Kinsta.

Para obtener una vista previa del proyecto, consulta el código completo del proyecto.

Requisitos Previos

Para seguir este tutorial, asegúrate de que tienes lo siguiente:

• Un servidor web. Este tutorial utiliza XAMPP.
• Una cuenta en GitHub, GitLab o Bitbucket para publicar el código de tu aplicación.
• Laravel instalado.
• Una cuenta MyKinsta activa para alojar la aplicación. Regístrate para una prueba gratuita si aún no tienes una.

Asegúrate de que los servicios de los módulos Apache y MySQL se están ejecutando en el Panel de Control de XAMPP. Si no es así, haz clic en el botón Iniciar de cada servicio en la columna Acciones. Tu Panel de Control XAMPP debería tener este aspecto:

Por defecto, MySQL/MariaDB se ejecuta en el puerto 3306. Toma nota del puerto si lo cambias.

Si utilizas un servidor web distinto de XAMPP, asegúrate de que ejecutas Apache u otro software de servidor y de que has instalado el servidor MariaDB en tu máquina local.

Inicio Rápido con phpMyAdmin

1. Con MySQL y Apache en funcionamiento, dirígete a tu navegador.
2. Abre phpMyAdmin e introduce http://localhost/phpmyadmin/. Debería mostrar lo siguiente:

phpMyAdmin es una herramienta de gestión de bases de datos para MySQL y MariaDB.

Crear un Nuevo Proyecto Laravel

Ahora puedes empezar a crear el blog utilizando Laravel. Para este tutorial, hemos utilizado un ordenador con Windows.

1. Ve al terminal de tu máquina o a la interfaz de línea de comandos (CLI).
2. Crea un proyecto Laravel llamado blog utilizando el comando laravel new blog.
3. Abre el directorio blog de tu proyecto con el comando cd blog.
4. A continuación, abre el directorio en tu editor de código.
5. Para comprobar que has construido el proyecto correctamente, ejecuta php artisan serve en tu terminal o CMD.
6. Haz clic en la salida de la dirección local para verla en el navegador. El navegador debería mostrar la página de bienvenida predeterminada de Laravel, que se muestra a continuación:

Configura la Base de Datos

Crea y configura la base de datos volviendo a phpMyAdmin en tu navegador y creando una base de datos llamada blog.

1. Para crear la base de datos, en la pestaña Bases de datos, escribe «blog» en el campo Crear base de datos.
2. A continuación, haz clic en Crear.

3. A continuación, actualiza la conexión de la base de datos a tu archivo .env en el root de tu proyecto de blog. Cambia los valores DB_DATABASE y DB_PASSWORD por los que has creado.

Los detalles de la conexión deberían tener este aspecto

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=your-db-username
DB_PASSWORD=your-db-password

Los demás detalles de conexión a la base de datos siguen siendo los mismos que en el archivo .env. Si cambias algún valor de conexión, como cambiar DB_PORT de 3306 a 3307 durante la configuración, asegúrate de actualizarlo en el archivo .env.

Crea la Tabla de Puestos

A continuación, crea un modelo de base de datos y migra los cambios.

1. En tu terminal, ejecuta php artisan make:model Post -mc para crear un modelo llamado Post, una tabla llamada posts, un archivo de migración y un controlador.

2. Comprueba el directorio base de datos/migraciones y abre el archivo de migración que acabas de crear. Tiene el siguiente formato: YYYY_MM_DD_ID_create_posts_table.php.
3. En el método up() del archivo de migración, crea un esquema con los atributos title, description y image.

public function up() {
  Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title')->nullable();
    $table->text('description')->nullable();
    $table->string('image')->nullable();
    $table->timestamps();
  });
}

4. Ahora, ve a tu terminal y migra los cambios utilizando php artisan migrate, como se muestra a continuación:

5. Ve a phpMyAdmin en tu navegador, donde verás la tabla posts :

Cómo Crear Controladores

Añadir vistas y controladores implementa tu lógica de negocio para el conjunto de bases de datos. Las vistas son las interfaces de usuario que muestran los objetos de datos del modelo. Los controladores gestionan el flujo de ejecución de datos entre el modelo y las vistas.

1. Antes de crear los archivos Blade, ejecuta npm install, seguido de npm run dev en tu terminal. El primer comando instala los paquetes npm necesarios. El segundo comando inicia un servidor de desarrollo Vite.
2. Dirígete al directorio app/Http/Controllers, abre el archivo PostController.php y crea un método controlador index. El método controlador muestra un texto sencillo al navegador. Para ello, añade el siguiente código a la clase PostController:

public function index() {
  $post = "Laravel Tutorial Series One!";
  return view('posts.index', ['post'=>$post]);
}

Este método pasa $post como variable de contexto a la sección views de la plantilla index Blade. $post contiene el texto a mostrar, que, aquí, dice: «Laravel Tutorial Series One!» Más adelante sustituirás esto al iterar los posts.

3. Crea dos nuevos directorios en el directorio resources/views: layouts y posts.
4. Dentro del directorio layouts , crea un archivo app.blade.php. Los demás archivos Blade heredarán de él.
5. Copia este código en app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog</title>
  <!-- Styles →
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<!-- Navbar →
<header>
  <nav class="navbar bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="{{ route('posts.index') }}">Mini-Blog</a>
    </div>
  </nav>
</header>


<body>
  @yield('content')
</body>


<footer class="footer mt-auto py-3 bg-dark">
  <div class="container d-lg-flex justify-content-between">
    <span class="text-light">Mini-Blog © 2023</span>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"  integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</html>

Al utilizar este código HTML, importas Bootstrap versión 5.2.3 y Vite para agrupar los activos JavaScript y CSS. La página generada tiene una cabecera con una barra de navegación y un pie de página con los scripts llamados debajo. En el cuerpo, el contenido dinámico se renderiza desde otros archivos Blade con la ayuda de @yield('content').

El directorio posts contiene los archivos Blade para implementar las operaciones de creación y lectura.

6. Dentro del directorio posts, crea un archivo Blade llamado index.blade.php y añade el siguiente código:

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="titlebar">
    <h1>Blog list</h1>
  </div>
  <hr>
  <p>The Blog 1 - {{ $post }}</p>
</div>
@endsection

Este código se extiende desde el archivo app.blade.php de la página de diseños. Cuando se visualiza en el navegador, muestra el contenido de cada entrada del blog, la barra de navegación y el pie de página heredados del archivo app.blade.php de la carpeta layouts. Entre las etiquetas section, pasas el contenido del controlador para que se muestre en el navegador cuando ejecutes la aplicación.

7. Establece la ruta en el directorio routes . Establecer la ruta permite la carga automática mediante el RouteServiceProvider en el directorio App/Providers. El RouteServiceProvider es la clase responsable de cargar los archivos de ruta de la aplicación.
8. Dentro del archivo routes/web.php, importa PostController utilizando use AppHttpControllersPostController.
9. A continuación, establece la ruta añadiendo Route::resource('posts', PostController::class); al archivo routes/web.php.
10. Con el servidor de desarrollo Vite aún en marcha, utiliza php artisan serve para ejecutar la aplicación en tu terminal.
11. Con tu navegador, abre http://127.0.0.1:8000/posts para ver tu nueva lista de entradas del blog.

La página debería tener el siguiente aspecto:

En la siguiente sección, definimos los métodos del controlador para mostrar todas las entradas, crear una entrada y almacenar una entrada. A continuación, añade sus rutas y crea los archivos Blade en las secciones correspondientes.

Crear la Página de Entradas de Blog

Crea entradas de blog introduciendo un título, añadiendo una descripción y subiendo una imagen. A continuación, muestra tus entradas en orden secuencial.

1. En el directorio app/Models, abre el archivo Post.php.
2. En la clase Post, debajo del bloque de código use HasFactory;, añade protected $fillable = ['title', 'description', 'image'];.

Este código protege los atributos de tu modelo de las asignaciones masivas.

3. En tu archivo app/Http/Controllers/PostController.php, importa el modelo Post utilizando use AppModelsPost;.
4. Sustituye los métodos de controlador index y create creados anteriormente en la clase PostController por el código que aparece a continuación:

// Show all posts
public function index() {
  $posts = Post::orderBy('created_at', 'desc')->get();
  return view('posts.index', ['posts' => $posts]);
}
    
// Create post
public function create() {
  return view('posts.create');
}

En el método index que acabas de crear, la aplicación PHP obtiene todos los mensajes, los ordena cronológicamente y los almacena en una variable posts. En la vista de retorno, los posts pasan al archivo index.blade.php como una variable de contexto en el directorio views/posts. El método create devuelve un archivo create.blade.php y lo coloca en el directorio views/posts si un usuario intenta hacer un nuevo post.

5. Crea un método controlador store utilizando el siguiente código (para almacenar las entradas del blog en la base de datos). Añade este código a la clase PostController debajo de los métodos de controlador index y create.

// Store post
public function store(Request $request) {
  // validations
  $request->validate([
    'title' => 'required',
    'description' => 'required',
    'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
  ]);

  $post = new Post;

  $file_name = time() . '.' . request()->image->getClientOriginalExtension();
  request()->image->move(public_path('images'), $file_name);

  $post->title = $request->title;
  $post->description = $request->description;
  $post->image = $file_name;

  $post->save();
  return redirect()->route('posts.index')->with('success', 'Post created successfully.');
}

El método store gestiona las peticiones del cliente relativas a los datos de su cuerpo, por lo que toma request como argumento. A continuación, valida los campos utilizados al crear una entrada y crea una instancia post a partir del modelo Post. A continuación, los datos de los campos introducidos se asignan a la instancia creada y se guardan. La página redirige a la vista index con un texto que dice: “Post created successfully.” («Post creado con éxito»)

Añadir Rutas a Tus Entradas

Para registrar las rutas en tu archivo web.php:

1. En el directorio routes del directorio raíz de tu proyecto, abre el archivo web.php.
2. Registra las rutas de los métodos del controlador sustituyendo el código existente por esto

<?php

use IlluminateSupportFacadesRoute;
use AppHttpControllersPostController;

Route::resource('/', PostController::class)->names([
  'index' => 'posts.index',
  'create' => 'posts.create',
  'store' => 'posts.store',
  'show' => 'posts.show',
]);

Este controlador utiliza estas rutas para crear, almacenar y mostrar sus objetos de datos.

Crear Archivos de Vistas

Para crear las vistas, vuelve a la clase PostController:

1. En el directorio resources/views/posts, crea un archivo Blade llamado create.blade.php y añade el código que aparece a continuación:

@extends('layouts.app')
@section('content')
<div class="container">
  <h1>Add Post</h1>
  <section class="mt-3">
    <form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
      @csrf
      
      @if ($errors->any())
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif
      <div class="card p-3">
        <label for="floatingInput">Title</label>
        <input class="form-control" type="text" name="title">
        <label for="floatingTextArea">Description</label>
        <textarea class="form-control" name="description" id="floatingTextarea" cols="30" rows="10"></textarea>
        <label for="formFile" class="form-label">Add Image</label>
        <img src="" alt="" class="img-blog">
        <input class="form-control" type="file" name="image">
      </div>
      <button class="btn btn-secondary m-3">Save</button>
    </form>
  </section>
    
</div>
@endsection

En este código, create.blade.php hereda el contenido de app.blade.php en el directorio layouts utilizando @extends('layouts.app'). Estos contenidos incluyen una cabecera, una barra de navegación y un pie de página. Después de añadir el texto Add Post dentro de la etiqueta h1, has creado un formulario con el método post que contiene la acción {{route('posts.store')}}.

El código enctype="multipart/form-data" permite subir imágenes, y csrf protege tu formulario de ataques cross-site. A continuación, los mensajes de error muestran entradas de campo no válidas y utilizanfield attributes para crear etiquetas y entradas para el formulario.

2. Ahora, sustituye el código del archivo index.blade.php por el código siguiente para mostrar todas las entradas del blog:

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="titlebar">
    <a class="btn btn-secondary float-end mt-3" href="{{ route('posts.create') }}" role="button">Add Post</a>
    <h1>Mini post list</h1>
  </div>
    
  <hr>
  
  @if ($message = Session::get('success'))
  <div class="alert alert-success">
    <p>{{ $message }}</p>
  </div>
  @endif
         @if (count($posts) > 0)
    @foreach ($posts as $post)
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-2">
              <img class="img-fluid" style="max-width:50%;" src="{{ asset('images/'.$post->image)}}" alt="">
            </div>
            <div class="col-10">
              <h4>{{$post->title}}</h4>
            </div>
          </div>
          <p>{{$post->description}}</p>
          <hr>
        </div>
      </div>
    @endforeach
  @else
    <p>No Posts found</p>
  @endif
</div>
@endsection

Este código añade un botón Añadir Post. Cuando se pulsa, crea una entrada y pasa los datos al cuerpo de la página. La condición if comprueba si hay datos en la base de datos. Si hay datos, pasa. Si no, muestra «No se han encontrado entradas»

Estructura Tus Páginas

Ahora puedes ejecutar tu aplicación utilizando php artisan serve para crear y mostrar entradas de blog. Abre <a href="http://127.0.0.1:8000">http://127.0.0.1:8000</a >, y la página debería tener este aspecto:

Si añades una entrada, aparecerá así:

Despliega Tu Blog Laravel en Kinsta

Para desplegar y probar tu aplicación Laravel utilizando el servicio de Alojamiento de Aplicaciones de Kinsta:

1. Crea un archivo .htaccess.
2. Envía el código a un repositorio.
3. Crea una base de datos.
4. Crea un proyecto en MyKinsta.
5. Construye y despliega tu blog.

Crea un archivo .htaccess

En la carpeta raíz del proyecto, crea un archivo llamado .htaccess, y añade el siguiente código:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>

Este código redirige las peticiones de tu aplicación a public/index.php en el despliegue.

Envía tu Código a un Repositorio

Crea un repositorio para tu proyecto y publica el código. Puedes utilizar GitHub, GitLab o Bitbucket para alojar tu código y desplegarlo en MyKinsta.

Configura la Base de Datos en tu Panel de MyKinsta

Para crear una base de datos en MyKinsta:

1. Haz clic en el botón Añadir Servicio y selecciona Base de Datos.
2. Introduce los detalles de tu base de datos como se muestra a continuación. Ten en cuenta que para que tu despliegue tenga éxito, debes dejar el nombre de usuario de la Base de Datos como valor por defecto.

Los detalles incluyen el Nombre de la base de datos, Nombre para mostrar, Tipo de base de datos, Versión, Nombre de usuario de la base de datos, Ubicación del centro de datos y Tamaño. Esta demostración utiliza MariaDB para la base de datos, y el Tamaño es Db3 (1CPU / 4GB RAM / 10GB Espacio en Disco 65 USD / mes). Puedes elegir el tipo y tamaño de base de datos que se adapte a tus necesidades específicas.

3. Haz clic en Continuar.
4. Confirma el coste mensual y la forma de pago y, a continuación, haz clic en Crear base de datos.

Configurar el Proyecto en MyKinsta

Para desplegar tu aplicación en MyKinsta:

1. Haz clic en el Panel de control.
2. Haz clic en Añadir Servicio y selecciona Aplicación, como se muestra a continuación:

MyKinsta te redirige a la página Añadir aplicación.

1. En la sección de tarjetas Seleccionar rama, selecciona tu repositorio de GitHub y, a continuación, marca la casilla Añadir despliegue en commit.
2. En los Detalles básicos, introduce el nombre de la aplicación y selecciona la ubicación del centro de datos para tu aplicación.
3. Como Laravel necesita una clave de aplicación durante el despliegue, en la tarjeta Variables de entorno, añade una APP_KEY como Clave 1. Puedes utilizar la APP_KEY definida en tu archivo .env local o utilizar un generador de Claves Laravel online para obtener una.
4. Haz clic en Continuar.
5. Selecciona los recursos de construcción (CPU y RAM) para tu aplicación. Esta demostración utiliza la máquina de construcción estándar (1CPU / 4 GB RAM).
6. Deja seleccionado el botón de opción Configurar automáticamente la imagen contenedora.
7. Haz clic en Continuar.
8. En la página Configura tus procesos, puedes cambiar el tamaño del pod y la instancia de tu aplicación seleccionando estas casillas. Esta demostración utiliza los valores por defecto.
9. Haz clic en Continuar.
10. Por último, haz clic en el botón Confirmar método de pago para iniciar el despliegue de tu aplicación. Al hacer clic en este botón, también accederás a la página de detalles de despliegue para ver el progreso de tu despliegue.

Construye y Despliega tu Aplicación

Con la base de datos y la aplicación alojadas, conecta la base de datos a tu aplicación y luego realiza el despliegue.

Para conectar la base de datos, utiliza las conexiones externas de tu base de datos alojada. En la pestaña Información de tu base de datos alojada, verás Conexiones externas, como se muestra a continuación:

1. En la página Configuración de la app desplegada, ve a la tarjeta Variable de entorno.
2. Haz clic en Añadir variable de entorno para añadir las conexiones externas de tu base de datos alojada con el valor correspondiente. Utiliza las mismas variables que tienes en tu archivo .env.

Esta captura de pantalla es útil si consideras marcar las variables <code>env</code> que has editado manualmente para diferenciarlas de las demás.

APP_URL es la URL de tu aplicación alojada, y DB_CONNECTION es mysql.

1. Dirígete a la página de Configuración de tu aplicación.
2. En el apartado de Buildpacks , añade PHP y Node.js como paquetes de construcción. Como se trata de una aplicación PHP, debes añadir el paquete de construcción PHP en último lugar.
3. Haz clic en Desplegar ahora para reconstruir tu aplicación.

A continuación, añade un proceso que migre la base de datos.

1. Dirígete a la pestaña Procesos de la página de tu aplicación alojada.
2. Selecciona Crear proceso en la ficha Procesos de tiempo de ejecución.
3. Introduce Migración como nombre, Worker en segundo plano como tipo y php artisan migrate --force como comando de inicio. Puedes dejar el tamaño del pod y las instancias con los valores por defecto.
4. Selecciona Continuar para crear el proceso. Esta acción desencadena una nueva construcción y vuelve a desplegar la aplicación.
5. En la pestaña Dominios de tu aplicación, haz clic en el enlace de tu aplicación. Puedes ver que ahora está en funcionamiento.
6. Observa que la aplicación de blog desplegada en MyKinsta no muestra ninguna entrada. Crea una nueva entrada introduciendo su título, añadiendo una descripción y eligiendo una imagen.

Resumen

Laravel facilita el desarrollo rápido de un blog sencillo. Su rápida carga de páginas, su robusta arquitectura de controladores y su competente seguridad facilitan la mejora del rendimiento de una aplicación. Mientras tanto, MyKinsta te permite publicar y enviar tus aplicaciones web de forma rápida y eficaz. El modelo de precios flexible de MyKinsta se basa en el uso, eliminando los costes ocultos.

Cuando Kinsta aloja tu aplicación Laravel, se ejecuta en Google Cloud Platform en su Nivel Premium, para que sea lo más rápida posible. Kinsta también incluye protección y mitigación DDoS de nivel empresarial con Cloudflare y cortafuegos avanzados para mantener a raya a los actores maliciosos, y mucho más.

¡Empieza tu prueba gratuita de Alojamiento de Aplicaciones ahora mismo para agilizar el desarrollo y alojamiento de tus aplicaciones web!

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.

• LinkedIn