Utilizamos cookies propias y de terceros para hacer funcionar y mejorar nuestros servicios. Si continúa navegando, consideramos que acepta su uso. Puede obtener más información visitando nuestra política de cookies.

DJANGO - FORMULARIOS ASOCIADOS A MODELOS

En esta sesión demostramos el uso de la clase ModelForm para definir formularios directamente asociados a modelos de Django, y cómo aprovecharlos en conjunto con las vistas genéricas basadas en clases, para implementar funcionalidades comunes en muchas aplicaciones web con un mínimo de esfuerzo de programación.

Cargando video...

¡Registrarse!

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Con Django, podemos usar la clase ModelForm para configurar de manera sencilla formularios asociados a nuestros modelos de base de datos.

Al combinar esta funcionalidad con las clases de vistas genéricas, podemos generar formularios y vistas completas con muy poco esfuerzo de desarrollo.

En este ejemplo, ilustraremos el uso de formularios asociados a modelos con vistas genéricas, para agregar en la propia aplicación la funcionalidad de agregar/editar preguntas y opciones (aunque ya existe en el sitio administrativo)

Usaremos el paquete django-bootstrap3-datetimepicker para incluir un control de calendario compatible con Bootstrap.

Código disponible en:

https://github.com/networkfaculty/Fundamentos-Django/releases/tag/d-2.3.9

Instalar paquete de calendario (versión mas reciente):

pip install git+https://github.com/nkunihiko/django-bootstrap3-datetimepicker.git 

Agregar bootstrap3_datetime a INSTALLED_APPS en curso/settings.py

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap3',
    'bootstrap3_datetime',
    'encuestas',
)


curso/encuestas/forms.py

from django import forms
from .models import Pregunta, Opcion
from bootstrap3_datetime.widgets import DateTimePicker
from django.forms.models import inlineformset_factory

class FormContacto(forms.Form):
   asunto = forms.CharField(max_length=100)
   mensaje = forms.CharField(widget=forms.Textarea)
   remitente = forms.EmailField()
   cc_remitente = forms.BooleanField(label='Envíame una copia', required=False)

class FormPregunta(forms.ModelForm):
   class Meta:
       model = Pregunta
       fields = ['texto_pregunta','fe_publicacion']
       widgets = {'texto_pregunta': forms.Textarea(attrs={'rows':3}),
                  'fe_publicacion': DateTimePicker(options={"format": "YYYY-MM-DD",
                                      "pickTime": False})}

FormPreguntaOpciones = inlineformset_factory(
   Pregunta,
   Opcion,
   fields = ('texto_opcion',),
   max_num = 5,
   extra = 5,
)

Usar formularios asociados a modelos con clases genéricas en curso/encuestas/views.py

...
from .forms import *


from django.views.generic.edit import CreateView, UpdateView

...


class VistaCrearPregunta(CreateView):
   model = Pregunta
   form_class = FormPregunta
   template_name = 'encuestas/agregar_pregunta.html'
   success_url = reverse_lazy('encuestas:index')



class VistaEditarPregunta(UpdateView):
   model = Pregunta
   form_class = FormPregunta
   template_name = 'encuestas/editar_pregunta.html'
   success_url = reverse_lazy('encuestas:index')



class VistaOpciones(UpdateView):
   '''
   En este ejemplo utilizamos un Formset personalizado para editar las opciones
   correspondientes a una pregunta. Por ello, utilizamos el modelo "padre" (Pregunta),
   y personalizamos los métodos get/post para obtener y guardar la lista de opciones
   '''
   model = Pregunta
   form_class = FormPregunta
   template_name = 'encuestas/editar_opciones.html'
   success_url = reverse_lazy('encuestas:index')

   def get(self, request, *args, **kwargs):
       self.object = self.get_object()
       opciones_form = FormPreguntaOpciones(instance=self.object)
       return self.render_to_response(
           self.get_context_data(opciones_form=opciones_form,))

   def post(self, request, *args, **kwargs):
       self.object = self.get_object()
       opciones_form = FormPreguntaOpciones(request.POST, instance=self.object)
       if opciones_form.is_valid():
           opciones_form.save()
           messages.success(request, 'Opciones guardadas')
           return HttpResponseRedirect(self.get_success_url())
       else:
           messages.error(request, 'No se pudieron guardar las opciones')
           return self.render_to_response(
               self.get_context_data(opciones_form=opciones_form,))


Plantilla para agregar pregunta en curso/encuestas/templates/encuestas/agregar_pregunta.html

{% extends 'encuestas/base.html' %}

{% block extra-head %}
   {{ form.media }}
{% endblock%}

{% block contenido %}

{% load bootstrap3 %}

<h2>Agrega una nueva pregunta</h2>

<form action="{% url 'encuestas:agregar' %}" method="post">
   {% csrf_token %}
   {% bootstrap_form form layout='horizontal' %}
   {% buttons %}
   <button type="submit" class="btn btn-primary">
       {% bootstrap_icon "floppy-disk" %} Agregar Pregunta
   </button>
   {% endbuttons %}
</form>

{% endblock contenido %}

Agregar bloque personalizable en el <head> desde curso/encuestas/templates/encuestas/base.html

    <script src="{% static 'encuestas/js/jquery-1.11.3.min.js' %}"></script>
    <script src="{% static 'encuestas/js/bootstrap.min.js' %}"></script>
    {% block extra-head %}{% endblock %}
  </head>

Agregar botones para editar en vista de detalle curso/encuestas/templates/encuestas/detalle.html

…
            <a class="btn btn-info" href="{% url 'encuestas:resultados' pregunta.id %}">
                Ver resultados
            </a>
            <a class="btn btn-default" href="{% url 'encuestas:editar' pregunta.id %}">
                {% bootstrap_icon "pencil" %} Editar Pregunta
            </a>
            <a class="btn btn-default" href="{% url 'encuestas:opciones' pregunta.id %}">
                {% bootstrap_icon "pencil" %} Editar Opciones
            </a>
…

curso/encuestas/templates/encuestas/editar_opciones.html

{% extends 'encuestas/base.html' %}
{% load bootstrap3 %}

{% block contenido %}

<h2>Editar Opciones para pregunta #{{ pregunta.id }}</h2>

<h4>{{ pregunta.texto_pregunta }}</h4>

<form action="{% url 'encuestas:opciones' pregunta.id %}" method="post">
   {% csrf_token %}

   {% bootstrap_formset opciones_form %}

   {% buttons %}
   <button type="submit" class="btn btn-primary">
       {% bootstrap_icon "floppy-disk" %} Guardar Cambios
   </button>
   {% endbuttons %}
</form>

{% endblock contenido %}

curso/encuestas/templates/encuestas/editar_pregunta.html

{% extends 'encuestas/base.html' %}
{% load bootstrap3 %}

{% block extra-head %}
   {{ form.media }}
{% endblock%}

{% block contenido %}

<h2>Editar pregunta #{{ pregunta.id }}</h2>

<form action="{% url 'encuestas:editar' pregunta.id %}" method="post">
   {% csrf_token %}
   {% bootstrap_form form layout='horizontal' %}
   {% buttons %}
   <button type="submit" class="btn btn-primary">
       {% bootstrap_icon "floppy-disk" %} Guardar Cambios
   </button>
   {% endbuttons %}
</form>

{% endblock contenido %}

Agregar botones para editar y agregar en curso/encuestas/templates/encuestas/index.html

...
                href="{% url 'encuestas:detalle' pregunta.id %}">Votar</a>
                <a class="btn btn-info" role="button"
                href="{% url 'encuestas:resultados' pregunta.id %}">Ver resultados</a>
                <a class="btn btn-default" role="button"
                href="{% url 'encuestas:editar' pregunta.id %}">
                    {% bootstrap_icon "pencil" %} Editar Pregunta</a>
            </div>
        </li>
    {% endfor %}
...
    <p>No hay encuestas disponibles.</p>
{% endif %}
    <a class="btn btn-default" role="button"
    href="{% url 'encuestas:agregar' %}">{% bootstrap_icon "plus" %} Nueva Encuesta</a>
...


Agregar nuevas rutas en curso/encuestas/urls.py

from django.conf.urls import url
from . import views

urlpatterns = [
   # ej: /encuestas/
   url(r'^$', views.VistaIndex.as_view(), name='index'),
   # ej: /encuestas/5
   # Las vistas detalladas genéricas esperan que el argumento se llame 'pk'
   url(r'^(?P<pk>\d+)/$', views.VistaDetalle.as_view(), name='detalle'),
   # ej: /encuestas/5/resultados
   url(r'^(?P<pk>\d+)/resultados$', views.VistaResultados.as_view(), name='resultados'),
   # ej: /encuestas/5/votar
   url(r'^(?P<id_pregunta>\d+)/votar$', views.votar, name='votar'),
   url(r'^contacto$', views.contacto, name='contacto'),
   url(r'^agregar$', views.VistaCrearPregunta.as_view(), name='agregar'),
   url(r'^(?P<pk>\d+)/editar', views.VistaEditarPregunta.as_view(), name='editar'),
   url(r'^(?P<pk>\d+)/opciones', views.VistaOpciones.as_view(), name='opciones'),
]

Rating

Global

Ver video en playlist

Curso FUNDAMENTOS DE DJANGO

Comentarios

agapito treviño 2016-04-07T15:12:47

Hola, como installas 'bootstrap3', en el INSTALLED_APPS, ahi van aplicaciones propias de de terceros como lo installo desde la consola. pip install bootstrap3..?

Juan Paredes 2016-04-07T18:04:11

Hola, para instalar el paquete necesario utiliza:
pip install django-bootstrap3
En otros vídeos de este curso también utilizamos las funcionalidades provistas por dicho paquete, como mensajes y alertas, además de facilitar el trabajo con plantillas de Bootstrap desde Django. Espero te sea de utilidad, ¡saludos!
- agapito treviño 2016-04-07T18:25:08
  
  Yo me refiera al bootstrap3.. el django-bootstrap3 ya lo instale correctamente
  INSTALLED_APPS = (
  #'django_admin_bootstrapped',
  #'grappelli',
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'bootstrap3', <-----aqui me da error.!
  'bootstrap3_datetime',
  'encuestas',
  )
  - Juan Paredes 2016-04-07T22:52:45
    
    Hola. El paquete a instalar vía pip se denomina 'django-bootstrap3' pero el nombre de la aplicación es 'bootstrap3' que se activa en la variable de configuración INSTALLED_APPS, como puedes leer en su documentación: http://django-bootstrap3.readt.... Así que si ya lo tienes instalado correctamente y aún te aparecen fallos, debe ser por otra razón. En todo caso, necesitaríamos ver el texto del mensaje de error que nos comentas para intentar ayudar de mejor manera. Si estás usando un virtualenv para tu proyecto, verifica haberlo activado cuando instalaste el paquete 'django-bootstrap3'. ¡Saludos!
    - agapito treviño 2016-04-07T23:58:21
      
      Muchas Gracias, Juan Paredes ya me funciono la agradezco mucho su ayuda.

Jhon Vargas 2016-06-29T03:45:15

porque me sale bloqueado el boton del datetimepicker

Juan Paredes 2016-06-29T15:17:31

Hola, Jhon. Lamentablemente sin más información es muy difícil responder directamente tu pregunta, ya que pueden ser múltiples causas, desde posibles errores JavaScript, módulos faltantes o configuraciones propias de tu ambiente de desarrollo. Revisa con cuidado el procedimiento descrito y el código suministrado, ya que son múltiples pasos a cumplir, comenzando por la instalación del paquete:
pip install git+https://github.com/nkunihiko/d...
Nota que aquí utilizamos la dirección completa (URL) de un repositorio de código fuente (GitHub) para instalar el paquete django-bootstrap3-datetimepicker, ya que al momento de realizar el vídeo, la versión que aparecía publicada en los repositorios regulares de Python era más antigua y contenía algunos fallos. Por favor, describe el ambiente que utilizas (sistema operativo, versión de Python/Django y de paquetes relevantes instalados) los pasos que has realizado, y de ser necesario, puedes colocar el código en cuestión en línea (GitHub, PasteBin o cualquier herramienta similar) y mostrarnos más detalles para poder ayudarte de una mejor manera. ¡Un saludo!
- Jhon Vargas 2016-06-29T20:12:31
  
  Gracias por responder Juan Paredes es mi primera aplicacion con Django y estoy un poco perdido
  Efectivamente si instale django.bootstrap3-datetimepicker correctamente y me funciono sin errores pero ya al correr la pagina web el boton del ditetimepicker me sale bloqueado o no puedo presionarlo
  - Juan Paredes 2016-07-01T12:56:39
    
    Hola, Jhon. El ejemplo que nos muestras no es el utilizado en el curso, sino uno propio, y sin mayor contexto se hace muy difícil comprender a cabalidad el problema. Veo sin embargo que pareces definir la clase del formulario en el propio modelo (nosotros hemos recomendado separarlo por varias razones, e incluso es la manera recomendada en Django para organizar tu código), y en la definición de la clase formulario no pareces haber importado la definición de DateTimePicker para poder incorporarla (o al menos no se ve en la imagen), como mencionamos en el vídeo y el código del ejemplo que acompaña la descripción del mismo:
    from bootstrap3_datetime.widgets import DateTimePicker
    De nuevo, estamos intentando ayudarte con información incompleta del problema, pero a menos que podamos reproducir completamente tu proyecto y ambiente, son limitadas las opciones para diagnosticar y proponer una solución definitiva. Además del mismo consejo que te dimos antes, de revisar el procedimiento con cuidado, la otra recomendación es que prepares un caso mínimo (quizá en nuevo proyecto creado para esto, o siguiendo el ejemplo de la clase) y así, partiendo desde cero, intentes implementar la funcionalidad deseada, aislando así otros componentes y aspectos hasta que logres que funcione correctamente, y luego incorporarlo a tu proyecto original. ¡Un saludo!
    - Jhon Vargas 2016-07-02T17:32:25
      
      Hola Juan, acabo de descargar el codigo de github que comparten con nosotros y efectivamente si me funciona correctamente su proyecto, preparare el caso minimo como me aconsejas para solo asi problar el widget DatetimePicker de bootstrap3
      Agradezco mucho tu ayuda y tus consejos !
      ya te contare como me va con eso
      - Juan Paredes 2016-07-02T18:55:36
        
        Hola Jhon, al menos con probar nuestro proyecto ya descartamos algún posible fallo en la instalación de algún módulo. Con mucha frecuencia, el ejercicio de preparar un caso mínimo para intentar explicar y reproducir un problema pone en evidencia las causas del mismo, por lo que cuando uno se encuentra "trabado", conviene descomponerlo a sus partes más simples. ¡Estamos siempre a tu orden para ayudar en lo que podamos, un saludo!

comments powered by Disqus

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.

DJANGO - FORMULARIOS ASOCIADOS A MODELOS

Descripción del Vídeo

Rating

Global

Ver video en playlist

Curso FUNDAMENTOS DE DJANGO

Juan Paredes

Videos relacionados

DJANGO - FORMULARIOS BASADOS EN CLASES

DJANGO - AUTENTICACION BASICA