Creación de un Blog con Sistema de Autenticación y Slugs

Clase 17 de 37 • Curso de Introducción a Laravel 6

Resumen

¿Qué proyecto vamos a construir?

En esta clase, abordaremos la emocionante tarea de construir un blog. Este proyecto nos permitirá poner en práctica los conocimientos adquiridos, ayudándonos a dominarlos realmente. En el blog, los usuarios podrán crear publicaciones con un título, contenido que puede incluir una imagen, un vídeo o un podcast. Revisemos el proyecto más a fondo.

¿Cómo está estructurado el blog?

Al observar el blog en pantalla, veremos una barra de menú con opciones para iniciar sesión y registrarse. También encontraremos todos los posts disponibles. Algunos posts contienen imágenes, otros vídeos o podcasts, lo que demuestra la versatilidad del contenido que podemos manejar. Al iniciar sesión, ingresaremos al panel principal que nos permite administrar los artículos. Aquí, podemos editar, eliminar o crear nuevos posts.

// Ejemplo de un modelo de post en Laravel
php artisan make:model Post -mfcr

En este comando, creamos un modelo, una migración, un factory y un controlador para nuestros posts.

¿Cómo configurar el proyecto desde cero?

Para comenzar a construir nuestro blog desde cero, primero es necesario configurar nuestro entorno de desarrollo. Usaremos Laravel, y debemos asegurarnos de tener instalado Composer para gestionar las dependencias de PHP.

# Crear un nuevo proyecto de Laravel
laravel new nombre-del-proyecto --auth

Este comando no solo crea un nuevo proyecto de Laravel, sino que también instala el sistema de autenticación por defecto. Es un gran paso inicial para construir nuestro blog con funcionalidades de inicio de sesión y registro.

¿Cómo instalar un componente con Composer?

A menudo, necesitaremos instalar componentes adicionales para mejorar nuestro proyecto. Composer nos facilita esta tarea, permitiéndonos buscar e implementar paquetes rápidamente.

# Ejemplo de instalación de un paquete con Composer
composer require vendor/nombre-del-paquete

Este comando descarga e instala el paquete especificado en nuestro proyecto. Además, podemos visitar GitHub para revisar la documentación del paquete y asegurarnos de configurarlo adecuadamente.

¿Qué son los slugs y cómo los utilizamos?

En el contexto de nuestro blog, los slugs juegan un papel crucial en la generaciónde URLs amigables para los motores de búsqueda. Los slugs convierten títulos largos en cadenas más legibles, usando letras minúsculas y reemplazando espacios por guiones.

// Configuración de slugs en el modelo
$model->slug = Str::slug($model->title);

Esta línea de código asigna a un campo slug el valor del título transformado. Así, un título como "Mi Primer Post" podría convertirse en "mi-primer-post", lo cual es preferible para SEO.

Consejo final

La construcción de un proyecto sólido requiere planificación y entender qué componentes y tablas necesitamos. Recuerda que Composer es tu aliado para gestionar paquetes en PHP. Aprende a usar estos recursos eficientemente para construir aplicaciones poderosas y escalables. Con cada clase, continúe aprendiendo e implementando para perfeccionar sus habilidades de desarrollo web. ¡Ánimo y a seguir construyendo!

Lautaro Cabral

student•

Explicación del slug por la misma página del paquete

¿Qué es un slug?

Un slug es una versión simplificada de una cadena, típicamente compatible con URL. El acto de "slugging" de una cadena suele consistir en convertirla en un caso y eliminar los caracteres no compatibles con la URL (espacios, letras acentuadas, amperios, etc.). La cadena resultante puede utilizarse entonces como identificador de un recurso determinado.

Por ejemplo, si tienes un blog con entradas, podrías referirte a cada entrada mediante el ID:

http://example.com/post/1 http://example.com/post/2

... pero eso no es particularmente amigable (especialmente para el SEO). Probablemente preferirías usar el título del post en la URL, pero eso se convierte en un problema si tu post se titula "Mi cena con André y François", porque esto también es bastante feo:

http://example.com/post/My+Dinner+With+Andr%C3%A9+%26+Fran%C3%A7ois

La solución es crear un slug para el título y usarla en su lugar. Tal vez quieras usar el método incorporado de Laravel, Str::slug(), para convertir ese título en algo más amigable:

http://example.com/post/my-dinner-with-andre-francois

Una URL así hará a los usuarios más felices (es legible, más fácil de escribir, etc.).

Para más información, puede que quieras leer esta descripción en Wikipedia.

Los slug también tienden a ser únicos. Así que si escribes otra entrada con el mismo título, deberías distinguir entre ellas de alguna manera, típicamente con un contador incremental añadido al final del slug:

http://example.com/post/my-dinner-with-andre-francois http://example.com/post/my-dinner-with-andre-francois-1 http://example.com/post/my-dinner-with-andre-francois-2

Esto mantiene los URLs únicos.

El paquete Eloquent-Sluggable para Laravel tiene como objetivo manejar todo esto por ti automáticamente, con una configuración mínima.

Josué Merino

student•

Gracias por la explicación, me ha servido mucho

Enrique Gamboa

student•

Solo como aclaración, el parte donde dice "convertirla en un caso" está mal traducido, en realidad quiere decir que pondrá todo en minúsculas. Recordemos que mayúsculas y minúsculas en inglés se escribe uppercase and lowercase, de ahí la confusión.

Joseph Dakkak

student•

Crear PlatziPress

# Proyecto Blog: presentación y configuración inicial

    > composer create-project --prefer-dist laravel/laravel blog "6.*" (Version LTS)
    > composer require laravel/ui "^1.0" --dev
    > php artisan ui --auth (Arreglar las dependencias de Js y Css en el site de bootstrap)
    > php artisan make:model Post -mfc (Migracion, Factory y Controlador)
    > composer require laravel/ui "^1.0" --dev (componente ui para auth en Laravel)
    > composer require cviebrock/eloquent-sluggable "6.*" (slug version 6 para la version LTS de Laravel actual 2020)
        > https://github.com/cviebrock/eloquent-sluggable (github con instrucciones de uso)

Xavier Medina Veintimilla

student•

Excelente aporte para los que usan composer en ligar de laravel global!

Henry Céspedes Molina

student•

Gracias, a mi me daba error porque dice que tenia conflicto con otro "require"

Xavier Medina Veintimilla

student•

Para los que no tengan instalado laravel de manera global. Usando composer, estos son los comandos que deben poner.

$ composer create-project --prefer-dist laravel/laravel blog
$ cd blog/
$ composer require laravel/ui --dev
$ php artisan ui bootstrap --auth
$ sudo apt-get install npm
$ npm install && npm run dev
$ php artisan make:model Post -mfc
$ composer require cviebrock/eloquent-sluggable

Leonardo Alonso

student•

muchas gracias

Germán Cinelli

student•

para los q estan con laravel 6, instalen el paquete de la siguiente manera: composer require cviebrock/eloquent-sluggable 6.0.4

Christian Ruiz

student•

gerzhx el salvador!

Joel Marquez

student•

Muchas gracias. Excelente.

Fernando Mejia

student•

el comando make model desde la version 5.5 incluye el flag "-a" con lo cual antes nos incluía la creación de la migración y el controller ademas del modelo, PERO desde la version 6.15.x se incluye tambien la creación automatica del factory por tanto ahora si bien es totalmente valido usar el flag -mfc tambien puedes usar -a con ello el comando quedaria asi:

php artisan make model Post -a

Igualmente ambas son validas solo lo agregue porque puede ser mas comodo

Italo Morales Fantone

teacher•

Héctor Tello

student•

Para hoy 13/03/2021 para iniciar el proyecto hice lo siguiente:

1. laravel new {nombre-aplicacion}

2. cd {nombre-aplicacion}

3. composer require laravel/ui --dev

4. php artisan make:model Post -mfc

5. php artisan ui bootstrap --auth

6. npm install && npm run dev

7. composer require cviebrock/eloquent-sluggable

cristian stiven velasquez garzon

student•

para las personas que tengan problemas con la function sluggable() tiene que ponerlo de esta forma para que se lo reconozca

/**
     * Return the sluggable configuration array for this model.
     *
     * @return array
     */
    public function sluggable(): array
    {
        return [
            'slug' => [
                'source' => 'title',
                'onUpdate'=>true
            ]
        ];
    }
<code>

Jose Barboza

student•

estoy agradecido gracias man

Jorge Luis Chavarriaga Vargas

student•

Excelente aporte

Gustavo Jara

student•

Nota: Una buena pagina para buscar paquetes de Laravel, como https://packagist.org, pero con paquetes de laravel es https://packalyst.com Saludos!

Tomas Goldenberg

student•

CREACION DE PLATZIPRESS
1 configuracion inicial

-sudo composer create-project --prefer-dist laravel/laravel blog


-composer require laravel/ui --dev


- sudo php artisan ui bootstrap --auth


-sudo npm install


-sudo npm run dev


-sudo php artisan make:model Post -mfc
 //creamos la migracion la factory y el controller


-geteloquent.com||browse packages|| eloquent-slug


-sudo composer require cviebrock/eloquent-sluggable
//slug es la version simplificada de un string para mejor seo ej:
convertir esto 
http://example.com/post/My+Dinner+With+Andr%C3%A9+%26+Fran%C3%A7ois
en esto
http://example.com/post/my-dinner-with-andre-francois

"Post.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Cviebrock\EloquentSluggable\Sluggable;use Cviebrock\EloquentSluggable\Sluggable;

class Post extends Model
{
    use Sluggable;
    /**
    * Return the sluggable configuration array for this model.
    *
    * @return array
    */
    public function sluggable()
    {
        return [
            'slug' => [
                'source' => 'title',
                'onUpdate'=> true 
            ]
        ];
    }
}



2 cuando comenzamos un projecto antes debemos definir que tablas vamos a usar, que dependencias usaremos .

Johnner Alexander Gambacica Ortiz

student•

Laravel 7.* => composer require cviebrock/eloquent-sluggable="^7.0"

Gilberto Pérez Garrido

student•

Gracias, buen hombre

Erasmo Andrés Martínez Rodríguez

student•

Gracias Johnner, excelente.

Melisa Quintero

student•

Hola. ¿La opción de --auth es la misma de --jet?

Pablo Rodriguez Postigo

student•

No, -auth es para Laravel en la versión 6 y 7 y hace uso de Laravel UI que podía usar simplemente Bootstrap o quizás VUE o React, en Laravel 8 se usa JetStream que usa componentes UI basados en Tailwind CSS y Laravel LiveWire.

Francisco Miralles Niño

student•

Para los que esten en laravel 8. Para agregar el slug ya no hace faltar ese paquete de composer

tiramos de

composer require laravel/helpers

en el Factory

<?php

namespace Database\Factories;
use Illuminate\Support\Str;
use Illuminate\Database\Eloquent\Factories\Factory;

class PostFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        $title = $this->faker->sentence();
        $slug = str_slug($title, '-');



        return [
            'user_id' => 1,
            'title' => $title,
            'body' => $this->faker->text(20),
            'slug' =>$slug
        ];
    }
}

Saludos

Cristian Henao

student•

Para quienes usan una forma de instalarlo diferente y no les deje hacer "php artisan make:auth" lo que pueden hacer es descargan la siguiente librería: composer require laravel/ui

y hacen este comando: php artisan ui vue --auth

Si van a la página a mirar, veran que ya está pero con un estilo feo, para terminar de configurarlo hacemos: npm install && npm run dev

Y ahora si, estará listo! PDT: En este caso es cómo si fueramos a usar vue de framework en el frontend, también podemos usar otros comandos para React y Angular por ejemplo.

Luis Alberto Rodríguez Arellano

student•

En Laravel 9 viene incluido ya un método para trabajar el slug, les comparto la info:

The Str::slug method generates a URL friendly "slug" from the given string:

use Illuminate\Support\Str;
 
$slug = Str::slug('Laravel 9 Framework', '-');

Link a la documentación: https://laravel.com/docs/9.x/helpers#method-str-slug

Andrés David Solarte Vidal

student•

Recomiendo tener actualizado el PHP. Para el comando laravel new .... es necesario tener PHP 7.3 o superior.

Wilmer Omar Aguirre Galdamez

student•

Usando Laragon luego de crear el proyecto, tocan los siguientes comandos:

$ composer require laravel/ui --dev $ php artisan ui bootstrap --auth $ install npm $ npm run dev $ php artisan make:model Post -mfc $ composer require cviebrock/eloquent-sluggable

carolina galvis arango

student•

muchas gracias!

carolina galvis arango

student•

solo un comentario, en el paso 3 a mi me funciono $npm install

JORGE LUIS RAMIREZ SOTELO

student•

composer global require laravel/installer //Instalador de laravel usando composer composer require laravel/ui //Instalar paquete de laravel ui para hacer auth php artisan ui bootstrap –auth //Generando auth scaffolding npm install //para instalar todas las dependencias NPM npm run dev //para compilar

Luis Carlos Zapata García

student•

Antes se buscaba el paquete necesario en google y se instalaba.Ahora se centraliza todo mediante el manejador de paquetes composer.

Se recomienda buscar el paquete con mayor popularidad y ver si tiene documentacion o instrucciones en algun repositorio preferiblemente git

Carlos Eduardo Gomez García

teacher•

Los slugs nos sirven para hacer URL's amigables y ciertamente no ayudan a posicionar nuestras página en Google, es parte del tema de SEO, este concepto se ve sobre todo en WordPress, simplemente es transformar las un título a una URL legible tanto par el usuario como par el navegador

Jose Barboza

student•

me marca error cuando copio el codigo como que faltaria algo y nose que pasa.

Edgar Ramón González Contreras

student•

Puede que esto te ayude.

public function sluggable(): array{
    return [
        'slug' => [
            'source' => 'title',
            'onUpdate'=>true
        ]
    ];
}

Jhon Fabio Cardona Martinez

student•

Me sirvió mucho la respuesta de Edgar, el decirle al método que se retorna un array.