De nuevo traigo otro CODE-KATA, para montar un blog en Symfony Flex, Symfony 4. Así en unos pocos minutos tenemos el esqueleto de lo que puede ser un blog. También valdría para hacer páginas corporativas, incluso si lo que queremos es un editor de fichas de productos también. Es decir, este es un pequeño tutorial para arrancar un nuevo proyecto en Symfony, creando es esqueleto de una aplicación web que va a ser un blog, con un editor de texto avanzado del tipo WYSIWYG.
WYSIWYG quiere decir What You See Is What You Get. Es decir, estos editores de texto son como los que tienen WordPress, Magento, Prestashop.. en donde se editan las páginas visualmente dentro del mismo navegador. Con este tipo de editores puedes organizar los textos, darles tamaño a las letras, alineación, subrayados, colores, etcétera.
Vamos al grano, creando el proyecto
Para arrancar creamos el nuevo proyecto ejecutando esto desde línea de comandos:
composer create-project symfony/skeleton symfony-editing-textarea
Esperamos a que Composer cargue todas las librerías del esqueleto de Symfony, y vamos entonces al directorio para cargar los módulos que vamos a usar en este proyecto:
cd symfony-editing-textarea/ composer require --dev server maker composer require doctrine twig security form validator asset friendsofsymfony/ckeditor-bundle
Sólo queda instalar los ficheros propios de estos módulos:
php bin/console ckeditor:install php bin/console assets:install public
Y vamos con lo propio de un blog.
Creando una base de datos para un blog
Para hacer un blog bien simple, comenzamos necesitando una entidad que he llamado Post. Aquí voy a guardar cada entrada del blog, es decir, cada post. Y simplemente va a tener dos campos, un título llamado title y un contenido llamado content:
php bin/console make:entity
Siguiendo las instrucciones le podemos decir que title sea del tipo string, y content del tipo text para que pueda tener un texto extenso. Lo siguiente es crear la base de datos, y crear la tabla que va tener las entradas del blog. Entonces editamos el fichero .env, que en mi instalación local la pongo así:
DATABASE_URL=mysql://root@127.0.0.1:3306/sy_edit_textarea
Mi base de datos la he llamado sy_edit_textarea, así entonces de nuevo desde línea de comandos creamos la BD:
php bin/console doctrine:database:create php bin/console doctrine:schema:create
Tiene que darnos un ok por pantalla. Lo siguiente es el CRUD para poder editar los post. Así que otra vez vamos a línea de comandos y hacemos:
php bin/console make:crud
..y ponemos que haga el CRUD de la entidad que hemos llamado Post. !Ahora ya tenemos un monton de cosas nuevas para empezar a escribir en nuestro nuevo blog en local! Vamos a verlo..
Arrancando y viendo los resultados en el navegador
Como hemos instalado el módulo de servidor de desarrollo, entonces lo arrancamos:
php bin/console server:start
..y vamos a local con el navegador en http://localhost:8000/ y si vamos a http://localhost:8000/post/ podremos ya crear posts, listarlos, editarlos o borrarlos.
Vamos a poner ahora el editor WYSIWYG
Tendremos en seguida un editor como el siguiente:
Simplemente tenemos que editar el fichero src/Form/PostType.php que se ha autogenerado para dejarlo así:
<?php
namespace App\Form;
use App\Entity\Post;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use FOS\CKEditorBundle\Form\Type\CKEditorType;
class PostType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('title')
->add('content', CKEditorType::class)
;
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => Post::class,
]);
}
}
He marcado en negrita lo único que he tenido que editar para que el editor WYSIWYG salga en la web. Para poder verlo, si todo ha ido bien, tienes que poder verlo tal cual lo ves en la imagen de arriba en esta URL: http://localhost:8000/post/new
Terminando, un poco de teoría
Si nos fijamos arriba, de nuevo con Symfony, ya tenemos mucho trabajo ya hecho a base de módulos. Aquí los módulos o plugins no se llaman realmente así, sino que son vendors porque Composer los llama así. Así que antes de ponernos a construir algo en Symfony, siempre tenemos que mirar en Composer y Packagist por si alguien ya ha construido algo que nos pueda servir. En tal caso lo podemos usar, quizá colaborar para mejorarlo.
De igual manera si nos animamos o tenemos algo interesante para la comunidad siempre será bienvenido en Packagist, para que esté disponible a descargar para otros a través de Composer.
Otro día sigo con el editor WYSIWYG, porque ya tengo visto cómo poner la subida y edición de ficheros, para subir las imágenes 😉
