Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Todo App con Django y Bulma

 


Django es una tecnología fantástica que ha demostrado ser un marco de desarrollo web Python sólido y confiable. Bulma es un marco CSS nuevo y realmente genial para hacer que su interfaz se vea lo mejor posible. En este tutorial, usaremos Django en el back-end con Bulma CSS en el front-end para construir una pequeña aplicación Todo. Veremos cómo agregar elementos a una lista, diseñarlos en consecuencia, marcar elementos como completos o incompletos, así como algunos otros trucos. Comencemos ahora con una aplicación Todo en Django y Bulma.


Empezando

Este tutorial asume que tiene Python y Django instalados y en ejecución, listos para comenzar a construir su aplicación. Si necesita ayuda para preparar esos aspectos, Django para principiantes puede ser una buena primera lectura.


Iniciar un nuevo proyecto de Django

Podemos comenzar iniciando un nuevo proyecto Django usando el comando django-admin.py startproject todo .

(vdjango) vdjango $ django-admin.py startproject todo

Luego, iniciaremos rápidamente el servidor Django usando python manage.py runserver solo para confirmar que todo está funcionando y que todo se ve bien.

(vdjango) todo $ python manage.py runserver
Observación de cambios de archivos con StatReloader
Realización de comprobaciones del sistema ...

La verificación del sistema no identificó problemas (0 silenciados).

Tiene 17 migración (es) sin aplicar. Es posible que su proyecto no funcione correctamente hasta que
aplicar las migraciones para aplicaciones: admin, auth, contenttypes, sesiones.
Ejecute 'python manage.py migrate' para aplicarlos.
18 de mayo de 2020-09: 49: 58
Django versión 3.0.6, usando la configuración 'todo.settings'
Iniciando el servidor de desarrollo en http://127.0.0.1:8000/
Salga del servidor con CTRL-BREAK.

django instalado correctamente

Con el proyecto Django con scaffolding, podemos acceder al directorio del proyecto y ejecutar las migraciones integradas usando python manage.py migrate .

(vdjango) vdjango $ cd todo
(vdjango) todo $ python manage.py migrar
Operaciones a realizar:
  Aplicar todas las migraciones: admin, auth, contenttypes, sesiones
Ejecutando migraciones:
  Aplicando contenttypes.0001_initial ... OK
  Aplicando auth.0001_initial ... OK
  Aplicando admin.0001_initial ... OK
  Aplicando admin.0002_logentry_remove_auto_add ... OK
  Aplicando admin.0003_logentry_add_action_flag_choices ... OK
  Aplicando contenttypes.0002_remove_content_type_name ... OK
  Aplicando auth.0002_alter_permission_name_max_length ... OK
  Aplicando auth.0003_alter_user_email_max_length ... OK
  Aplicando auth.0004_alter_user_username_opts ... OK
  Aplicando auth.0005_alter_user_last_login_null ... OK
  Aplicando auth.0006_require_contenttypes_0002 ... OK
  Aplicando auth.0007_alter_validators_add_error_messages ... OK
  Aplicando auth.0008_alter_user_username_max_length ... OK
  Aplicando auth.0009_alter_user_last_name_max_length ... OK
  Aplicando auth.0010_alter_group_name_max_length ... OK
  Aplicando auth.0011_update_proxy_permissions ... OK
  Aplicando sesiones.0001_initial ... OK
(vdjango) todo $

Visitar el panel de administración

Django tiene un excelente panel administrativo que obtienes de forma gratuita. Podemos comprobarlo visitando http://127.0.0.1:8000/admin en el navegador web de su elección.

django incorporado en el inicio de sesión de administrador

Ahora, para hacer uso de esta área de administración, necesitamos un superusuario para hacerlo. Podemos crear uno fácilmente con el comando python manage.py createduperuser .

(vdjango) todo $ python manage.py crea superusuario
Nombre de usuario (déjelo en blanco para usar 'compname'): admin
Dirección de correo electrónico: admin@example.com
Contraseña:
Contraseña de nuevo):
Superusuario creado correctamente.
(vdjango) todo $

inicio de sesión de administrador de superusuario de django

Utilice las credenciales que proporcionó al crear su superusuario para iniciar sesión en el área de administración y echar un vistazo.

django admin ha iniciado sesión


Inicie su aplicación

Django está diseñado para que puedas crear aplicaciones reutilizables. Hay muchos paquetes de Django excelentes disponibles que puede conectar y reproducir directamente en su proyecto de Django. Un proyecto de Django es solo una colección de una o muchas aplicaciones. Creemos una nueva aplicación ahora con el comando python manage.py startapp todoapp .

(vdjango) todo $ python manage.py startapp todoapp

Una vez que se ejecute ese comando, verá un nuevo directorio en su proyecto Django que contiene todos los archivos necesarios para la aplicación.

archivos de django startapp


Registre su aplicación

Cuando agrega una nueva aplicación a su proyecto Django, debe informar a Django al respecto. Esto se puede hacer en el archivo settings.py como vemos aquí. Podemos agregar todoapp así:


todotodosettings.py


Agregar un archivo urls.py para su aplicación

Cada aplicación necesita un archivo urls.py para enrutar el tráfico HTTP correctamente en su proyecto Django. Podemos agregar ese archivo manualmente ahora.

django agrega urlspy a la aplicación

Para comenzar a crear asignaciones de URL, importe el módulo de ruta de django.urls.


todotodoappurls.py


Usando include () con urls

En el directorio de nivel de proyecto (¡no en nuestra nueva aplicación!), Queremos configurar las cosas para que cuando un usuario visite la URL raíz, nuestro proyecto Django apunte esta solicitud a la nueva aplicación que acabamos de crear. Lo que hace el siguiente código es básicamente tomar todas las solicitudes entrantes y reenviarlas al archivo urls.py que se encuentra en el directorio todoapp.


todotodourls.py


Adición de plantillas

Para mostrar una página web al usuario, Django hace uso de plantillasAgreguemos una plantilla de página de inicio a la aplicación. La convención es crear un directorio de plantilla y luego otro directorio dentro de ese usando el nombre de la aplicación.

plantillas de django en la aplicación

Pondremos solo un fragmento de HTML como ese.


todotodoapptemplatestodoapphome.html


Uso de funciones de visualización en urls.py

En el archivo urls.py de la aplicación, queremos importar el módulo de vistas y llamar a una función cuando alguien solicita la página de inicio. En este código, se llamará a la función home () del archivo views.py, y es una ruta de inicio con nombre. En Django, siempre desea nombrar sus rutas para poder configurar enlaces dinámicos.


todotodoappurls.py

Ahora podemos agregar el código necesario en el archivo views.py para manejar la solicitud.


todotodoappviews.py

Si todo va según lo planeado, debería ver una página HTML simple como esta cuando visite el sitio.

primera pagina web django


Agregar Bulma CSS en una plantilla base

Ahora queremos lograr dos objetivos. Una es hacer que nuestro pequeño proyecto se vea elegante y la otra para reducir la repetición de código. Podemos hacer esto creando una plantilla base para extender mientras incluimos la biblioteca CSS de Bulma en esa plantilla base.

archivo django base_html


todotodoapptemplatestodoappbase.html


Extender desde la base

Podemos actualizar la plantilla home.html para extenderla desde el archivo base.html que acabamos de crear.


todotodoapptemplatestodoapphome.html

¡De inmediato, podemos ver que la fuente se ha actualizado y ya se ve mejor!

plantilla base extiende django


Agregar una barra de navegación

Bulma tiene una bonita barra de navegación que puedes implementar con bastante facilidad. Podemos poner el marcado para la barra de navegación en el archivo base.html. De esa manera, cualquier archivo de plantilla que se extienda desde la base automáticamente tendrá la barra de navegación incluida.


todotodoapptemplatestodoappbase.html

¡Aquí vamos! La barra de navegación se ve bien incluso en las etapas iniciales.

bulma en plantilla base django


Datos dinámicos con modelos Django

Se puede divertir más a medida que empezamos a trabajar con modelos en Django. Los modelos contienen todos los datos de la aplicación. Podemos abrir el archivo models.py desde nuestra aplicación y agregar el código que se ve aquí.


todotodoappmodels.py

Cada vez que crea un nuevo modelo o edita un modelo existente en Django, * debe * crear una nueva migración. Al ejecutar python manage.py makemigrations , Django escaneará esos archivos models.py y creará archivos de migración automáticamente para usted. Estos archivos de migración se utilizan para modificar la base de datos para contener datos que cumplan con los requisitos de la aplicación.

(vdjango) todo $ python manage.py makemigrations
Migraciones para 'todoapp':
  todoappmigrations001_initial.py
    - Crear modelo Todo
(vdjango) todo $

Por ejemplo, la migración a continuación es lo que se creó en este caso.

Python Managepy makemigrations


Migrar la base de datos

Para que esos archivos de migración funcionen, debe migrar la base de datos. Eso se puede hacer ejecutando python manage.py migrate .

(vdjango) todo $ python manage.py migrar
Operaciones a realizar:
  Aplicar todas las migraciones: admin, auth, contenttypes, sesiones, todoapp
Ejecutando migraciones:
  Aplicando todoapp.0001_initial ... OK
(vdjango) todo $

Así que la conclusión es que cuando trabajas con modelos siempre:

  • 1. Crea el modelo (o edita)
  • 2. Crea las migraciones
  • 3. Ejecute las migraciones

Agregue sus modelos al administrador

Django no solo crea el modelo y las migraciones por usted, sino que también le brinda una forma de registrar ese modelo en el panel de administraciónUna vez que está registrado en el panel de administración, automáticamente obtiene la capacidad completa de CRUD (Crear, Leer, Actualizar, Eliminar) directamente en el área de administración.


todotodoappadmin.py

Así, el modelo Todoapp y Todo es visible en el panel de administración.

registrar modelo en django admin

Agreguemos un nuevo registro a la base de datos usando este modelo.

agregar elementos al administrador de django

¡Frio! Se agrega con un bonito mensaje de éxito.

ver nuevos elementos en django admin

Continúe y agregue algunos elementos para que tengamos algunos datos con los que trabajar en la siguiente sección.


Trabajar con vistas basadas en funciones

Django tiene algo conocido como Vistas basadas en clases, pero en este ejemplo, usaremos las Vistas basadas en funciones más fáciles de entender En el siguiente código, lo primero que debemos hacer es importar el modelo Todo que creamos anteriormente. Con eso en su lugar, definimos una función de inicio que usa el ORM de Django para recuperar todos los todos de la base de datos. Una vez que los tenemos, renderizamos la plantilla de inicio mientras también pasamos los datos a esa plantilla usando el diccionario de contexto.


todotodoappviews.py

Bucle sobre elementos en una plantilla

Esto nos da acceso a todos esos todos que acabamos de obtener de la base de datos. Podemos recorrerlos y generar información sobre cada tarea como tal.


todotodoapptemplatestodoapphome.html

¡Las cosas están tomando forma! Ahora vemos que todos los registros de la base de datos obtienen resultados en la página de inicio.

página de inicio actualizada de django


Usando una mesa en Bulma

Para arreglar un poco las cosas, haremos uso de un diseño de tabla agradable para los elementos de tareas pendientes usando una tabla HTML diseñada con Bulma CSS. Podemos agregar encabezados a cada columna para que sea un poco más claro cuáles son los datos. Tenemos la tarea por completar, ya sea completada o no, y los inicios de un enlace para eliminar la tarea.


todotodoapptemplatestodoapphome.html

tabla css bulma

Plantillas de entrada lógica condicional

Podemos realizar varias acciones en la plantilla en función de lo que contengan los datos que estamos recorriendo. El siguiente código agrega la capacidad de mostrar una línea directa y una marca de verificación en los elementos completados. Para los elementos incompletos, mostramos el texto normal junto con un círculo vacío. Los iconos están disponibles a través de Font Awesome. Bulma y Font Awesome funcionan como el pan y la mantequilla.


todotodoapptemplatestodoapphome.html

¡Esto proporciona un efecto bastante bueno!

fuente bulma impresionante marca de verificación


Usar formularios de Django

Hagamos que nuestro formulario funcione correctamente en esta aplicación de Django. Para hacerlo, necesitamos agregar un archivo forms.py al directorio de la aplicación.

agregar formulariospy a la aplicación django

Este ejemplo aquí hace uso de Django Model FormsEstas cosas son increíbles y se sienten mágicas una vez que las haces funcionar :-).


todotodoappforms.py

Este nuevo formulario modelo ahora se puede importar en nuestro archivo views.py. La nueva clase TodoForm usa una instancia de objeto para contener cualquier dato enviado desde el formulario HTML. Para completar el formulario en código, todo lo que necesita hacer es usar form = TodoForm (request.POST o None) . Al leer el otro código, puede ver cómo validar el formulario y guardarlo en la base de datos. Tenga en cuenta que en Django, una función de vista particular puede manejar una solicitud GET o POST. Es su responsabilidad verificar cuál es el tipo de solicitud y luego tomar la acción apropiada.


todotodoappviews.py

El formulario que existe en el archivo base.html debe actualizarse para que funcione con nuestro modelo. El siguiente fragmento muestra cómo configuramos el método en POST, agregamos un token csrf y nos aseguramos de que las propiedades de la etiqueta de entrada sean correctas.


todotodoapptemplatestodoappbase.html

Prueba la forma

Estamos listos para escribir un nuevo elemento de tarea pendiente en el formulario, luego haga clic en enviar. Esto debería agregar el elemento de tareas pendientes y guardarlo en la base de datos.

formulario de django enviar

Después de hacer clic en enviar, la página se vuelve a cargar con el nuevo elemento de tarea agregado a la tabla. ¡El formulario está funcionando!

el envío del formulario de django funcionó

Agregar mensajes flash

Django tiene un bonito módulo de mensajes que facilita la adición de mensajes flash a su aplicación. Primero, podemos actualizar el código en el archivo de vistas para hacer uso del módulo de mensajes.


todotodoappviews.py

En la plantilla, podemos verificar la presencia de un mensaje flash y, si hay uno, generar el mensaje usando el estilo CSS de Bulma para un efecto agradable.


todotodoapptemplatestodoapphome.html

Agreguemos otra tarea a nuestra lista de todos.

agregar otro todo django

¡Bingo! Ahora se agrega la tarea, pero también recibimos un mensaje agradable de que se agregó correctamente.

mensaje flash de éxito de django


Eliminar un artículo por ID

En esta sección, podemos configurar el enrutamiento, la vista y el enlace en el archivo de plantilla para permitir la eliminación de una tarea pendiente específica.


todotodoappurls.py


todotodoappviews.py


todotodoapptemplatestodoapphome.html