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:
![La pantalla del Panel de Control de XAMPP muestra varios servicios de módulos.](https://kinsta.com/wp-content/uploads/2023/07/xampp-control-panel-apache-mysql.png)
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
- Con MySQL y Apache en funcionamiento, dirígete a tu navegador.
- Abre phpMyAdmin e introduce
http://localhost/phpmyadmin/
. Debería mostrar lo siguiente:
![phpMyAdmin abierto en el navegador.](https://kinsta.com/wp-content/uploads/2023/07/phpmyadmin-apache-mysql.png)
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.
- Ve al terminal de tu máquina o a la interfaz de línea de comandos (CLI).
- Crea un proyecto Laravel llamado blog utilizando el comando
laravel new blog
. - Abre el directorio blog de tu proyecto con el comando
cd blog
. - A continuación, abre el directorio en tu editor de código.
- Para comprobar que has construido el proyecto correctamente, ejecuta
php artisan serve
en tu terminal o CMD. - 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:
![Página de Bienvenida de Laravel cuando se sirve al navegador](https://kinsta.com/wp-content/uploads/2023/07/laravel-welcome.png)
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.
- Para crear la base de datos, en la pestaña Bases de datos, escribe «blog» en el campo Crear base de datos.
- A continuación, haz clic en Crear.
![Creación de base de datos en el panel phpMyAdmin](https://kinsta.com/wp-content/uploads/2023/07/phpmyadmin-create-database.png)
- 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
yDB_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.
- 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.
![Crear un modelo, un archivo de migración y un controlador a través de la línea de comandos.](https://kinsta.com/wp-content/uploads/2023/07/terminal-php-artisan-make-model.png)
- 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
. - En el método
up()
del archivo de migración, crea un esquema con los atributostitle
,description
yimage
.
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();
});
}
- Ahora, ve a tu terminal y migra los cambios utilizando
php artisan migrate
, como se muestra a continuación:
![Migración de la base de datos Laravel](https://kinsta.com/wp-content/uploads/2023/07/terminal-php-artisan-migrate.png)
- Ve a phpMyAdmin en tu navegador, donde verás la tabla posts :
![La tabla posts migrada se muestra en phpMyAdmin](https://kinsta.com/wp-content/uploads/2023/07/phpmyadmin-posts-table.png)
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.
- Antes de crear los archivos Blade, ejecuta
npm install
, seguido denpm run dev
en tu terminal. El primer comando instala los paquetes npm necesarios. El segundo comando inicia un servidor de desarrollo Vite. - 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 clasePostController
:
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.
- Crea dos nuevos directorios en el directorio resources/views: layouts y posts.
- Dentro del directorio layouts , crea un archivo app.blade.php. Los demás archivos Blade heredarán de él.
- 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.
- 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.
- Establece la ruta en el directorio routes . Establecer la ruta permite la carga automática mediante el
RouteServiceProvider
en el directorio App/Providers. ElRouteServiceProvider
es la clase responsable de cargar los archivos de ruta de la aplicación. - Dentro del archivo routes/web.php, importa PostController utilizando
use AppHttpControllersPostController
. - A continuación, establece la ruta añadiendo
Route::resource('posts', PostController::class);
al archivo routes/web.php. - Con el servidor de desarrollo Vite aún en marcha, utiliza
php artisan serve
para ejecutar la aplicación en tu terminal. - 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:
![La aplicación del blog se muestra en el navegador](https://kinsta.com/wp-content/uploads/2023/07/laravel-blog-list-preview.png)
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.
- En el directorio app/Models, abre el archivo Post.php.
- En la clase
Post
, debajo del bloque de códigouse HasFactory;
, añadeprotected $fillable = ['title', 'description', 'image'];
.
Este código protege los atributos de tu modelo de las asignaciones masivas.
- En tu archivo app/Http/Controllers/PostController.php, importa el modelo
Post
utilizandouse AppModelsPost;
. - Sustituye los métodos de controlador
index
ycreate
creados anteriormente en la clasePostController
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.
- 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 clasePostController
debajo de los métodos de controladorindex
ycreate
.
// 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:
- En el directorio routes del directorio raíz de tu proyecto, abre el archivo web.php.
- 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
:
- 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.
- 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:
![La aplicación de blog aparece en el navegador](https://kinsta.com/wp-content/uploads/2023/07/list-preview-no-posts.png)
Si añades una entrada, aparecerá así:
![La aplicación de blog muestra una entrada en el navegador](https://kinsta.com/wp-content/uploads/2023/07/preview-post.png)
Despliega Tu Blog Laravel en Kinsta
Para desplegar y probar tu aplicación Laravel utilizando el servicio de Alojamiento de Aplicaciones de Kinsta:
- Crea un archivo .htaccess.
- Envía el código a un repositorio.
- Crea una base de datos.
- Crea un proyecto en MyKinsta.
- 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:
- Haz clic en el botón Añadir Servicio y selecciona Base de Datos.
- 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.
![Crear una base de datos en MyKinsta](https://kinsta.com/wp-content/uploads/2023/07/mykinsta-create-database.png)
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.
- Haz clic en Continuar.
- 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:
- Haz clic en el Panel de control.
- Haz clic en Añadir Servicio y selecciona Aplicación, como se muestra a continuación:
![Panel de MyKinsta al añadir un servicio de aplicación](https://kinsta.com/wp-content/uploads/2023/07/mykinsta-create-app.png)
MyKinsta te redirige a la página Añadir aplicación.
- 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.
- 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.
- 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.
- Haz clic en Continuar.
- 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).
- Deja seleccionado el botón de opción Configurar automáticamente la imagen contenedora.
- Haz clic en Continuar.
- 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.
- Haz clic en Continuar.
- 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:
![Conexiones externas de tu base de datos alojada](https://kinsta.com/wp-content/uploads/2023/07/mykinsta-db-external-connections.png)
- En la página Configuración de la app desplegada, ve a la tarjeta Variable de entorno.
- 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.
![Las variables de entorno para tu base de datos alojada](https://kinsta.com/wp-content/uploads/2023/07/mykinsta-app-env-variables.png)
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
.
- Dirígete a la página de Configuración de tu aplicación.
- 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.
- Haz clic en Desplegar ahora para reconstruir tu aplicación.
A continuación, añade un proceso que migre la base de datos.
- Dirígete a la pestaña Procesos de la página de tu aplicación alojada.
- Selecciona Crear proceso en la ficha Procesos de tiempo de ejecución.
- 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. - Selecciona Continuar para crear el proceso. Esta acción desencadena una nueva construcción y vuelve a desplegar la aplicación.
- 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.
- 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!
Deja una respuesta