Proyecto de sistema de votación utilizando Django Framework

Título del Proyecto: Aplicación web Pollster (Sistema de Votación) utilizando el framework Django
Tipo de Aplicación (Categoría): Aplicación web.

Introducción: Crearemos una aplicación web de encuestador (sistema de votación) usando Django. Esta aplicación llevará a cabo una serie de preguntas junto con muchas opciones. Un usuario podrá votar por esa pregunta seleccionando una opción. Según la respuesta, se calculará el total de votos y se mostrará al usuario. Los usuarios también pueden consultar el resultado de los votos totales para preguntas específicas directamente en el sitio web. También construiremos la parte administrativa de este proyecto. El usuario administrador podrá agregar preguntas y administrar preguntas en la aplicación. 

Prerrequisito: Conocimiento de Python y conceptos básicos de Django Framework. Python debe estar instalado en el sistema. Código de Visual Studio o cualquier editor de código para trabajar en la aplicación. 

Tecnologías utilizadas en el proyecto: Framework Django y base de datos SQLite que viene por defecto con Django.  

Implementación del proyecto

Creando proyecto

Paso 1: Cree una carpeta vacía pollster_project en su directorio.
Paso 2: ahora cambie a su carpeta y cree un entorno virtual en esta carpeta usando el siguiente comando. 

pip install pipenv

pipenv shell

Paso 3: Se creará un Pipfile en su carpeta desde el paso anterior. Ahora instale Django en su carpeta usando el siguiente comando. 

pipenv install django

Paso 4: Ahora necesitamos establecer el proyecto Django. Ejecute el siguiente comando en su carpeta e inicie un proyecto Django. 

django-admin startproject pollster

Se creará una nueva carpeta con el nombre encuestador . Cambie a la carpeta de encuestas usando el siguiente comando. 

cd pollster

La estructura de carpetas se verá así. 

Aquí puede iniciar el servidor usando el siguiente comando y verificar si la aplicación se está ejecutando o no usando su http://127.0.0.1:8000/ en su navegador. 

python manage.py runserver

Paso 5: Cree una aplicación ‘ encuestas ‘ usando el siguiente comando  

python manage.py startapp polls

A continuación se muestra la estructura de carpetas después de crear la aplicación «encuestas» en el proyecto.  

Crear modelos

Paso 1: en su archivo models.py , escriba el código que se proporciona a continuación para crear dos tablas en su base de datos. Uno es ‘ Pregunta ‘ y el otro es ‘ Elección ‘. ‘Question’ tendrá dos campos de ‘question_text’ y ‘pub_date’. Choice tiene tres campos: ‘pregunta’, ‘choice_text’ y ‘votos’. Cada opción está asociada con una pregunta. 

from django.db import models
  
# Create your models here.
  
class Question(models.Model):
    question_text = models.CharField(max_length = 200)
    pub_date = models.DateTimeField('date published')
  
    def __str__(self):
        return self.question_text
  
  
class Choice(models.Model):
    question = models.ForeignKey(Question, on_delete = models.CASCADE)
    choice_text = models.CharField(max_length = 200)
    votes = models.IntegerField(default = 0)
  
    def __str__(self):
        return self.choice_text

Paso 2: Vaya al archivo settings.py y en la lista, INSTALLED_APPS escriba el código a continuación para incluir la aplicación en nuestro proyecto. Esto hará referencia a las encuestas -> apps.py -> clase PollsConfig. 

INSTALLED_APPS = [
    'polls.apps.PollsConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Paso 3: Hicimos cambios en nuestra base de datos y creamos algunas tablas, pero para reflejar estos cambios necesitamos crear una migración aquí y luego la aplicación Django almacenará los cambios en nuestros modelos. Ejecute el siguiente comando dado a continuación para crear migraciones. 

python manage.py makemigrations polls

Dentro de polls->migrations se creará un archivo 0001_initial.py donde podrá encontrar las tablas de la base de datos que hemos creado en nuestro archivo models.py. Ahora, para insertar todas las tablas en nuestra base de datos, ejecute el comando que se indica a continuación…  

python manage.py migrate 

Crear un usuario administrador

Paso 1: Ejecute el comando que se indica a continuación para crear un usuario que pueda iniciar sesión en el sitio de administración. 

python manage.py createsuperuser

Solicitará el nombre de usuario que debemos ingresar. 

Username: geeks123

Ahora solicitará una dirección de correo electrónico que nuevamente debemos ingresar aquí.  

Email address: xyz@example.com

El paso final es ingresar la contraseña. Necesitamos ingresar la contraseña dos veces, la segunda vez como confirmación de la primera.  

Password: ******
Password (again): ******
Superuser created successfully.

Ahora podemos ejecutar el servidor usando el mismo comando python manage.py runserver y podemos verificar nuestro panel de administración navegando por la URL http://127.0.0.1:8000/admin .  

Paso 2: en el archivo admin.py escribiremos el código que se proporciona a continuación para asignar cada pregunta con opciones para seleccionar. Además, escribiremos el código para cambiar el encabezado del sitio, el título del sitio y el título del índice. Una vez hecho esto, podemos agregar preguntas y opciones para la pregunta desde el panel de administración.  

from django.contrib import admin
# Register your models here.
from .models import Question, Choice
  
# admin.site.register(Question)
# admin.site.register(Choice)
  
admin.site.site_header = "Pollster Admin"
admin.site.site_title = "Pollster Admin Area"
admin.site.index_title = "Welcome to the Pollster Admin Area"
  
  
class ChoiceInLine(admin.TabularInline):
    model = Choice
    extra = 3
  
  
class QuestionAdmin(admin.ModelAdmin):
    fieldsets = [(None, {'fields': ['question_text']}), ('Date Information', {
        'fields': ['pub_date'], 'classes': ['collapse']}), ]
    inlines = [ChoiceInLine]
  
  
admin.site.register(Question, QuestionAdmin)

Nota: Podemos probar la aplicación aquí agregando algunas preguntas y opciones para esas preguntas. 

Crear vistas

Ahora crearemos la vista de nuestra aplicación que obtendrá los datos de nuestra base de datos y los representará en la ‘ plantilla ‘ (crearemos la carpeta ‘plantilla’ y los archivos dentro de esta carpeta en la siguiente sección) de nuestra aplicación para mostrárselo al usuario. 

Paso-1 Abra el archivo views.py y escriba el código que se proporciona a continuación. 

from django.template import loader
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import get_object_or_404, render
from django.urls import reverse
  
from .models import Question, Choice
  
# Get questions and display them
  
  
def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    context = {'latest_question_list': latest_question_list}
    return render(request, 'polls / index.html', context)
  
# Show specific question and choices
  
  
def detail(request, question_id):
    try:
        question = Question.objects.get(pk = question_id)
    except Question.DoesNotExist:
        raise Http404("Question does not exist")
    return render(request, 'polls / detail.html', {'question': question})
  
# Get question and display results
  
  
def results(request, question_id):
    question = get_object_or_404(Question, pk = question_id)
    return render(request, 'polls / results.html', {'question': question})
  
# Vote for a question choice
  
  
def vote(request, question_id):
    # print(request.POST['choice'])
    question = get_object_or_404(Question, pk = question_id)
    try:
        selected_choice = question.choice_set.get(pk = request.POST['choice'])
    except (KeyError, Choice.DoesNotExist):
        # Redisplay the question voting form.
        return render(request, 'polls / detail.html', {
            'question': question,
            'error_message': "You didn't select a choice.",
        })
    else:
        selected_choice.votes += 1
        selected_choice.save()
        # Always return an HttpResponseRedirect after successfully dealing
        # with POST data. This prevents data from being posted twice if a
        # user hits the Back button.
        return HttpResponseRedirect(reverse('polls:results', args =(question.id, )))

Paso 2: Cree un archivo urls.py dentro de la carpeta pollster->polls para definir el enrutamiento de todos los métodos que hemos implementado en el archivo views.py (no se confunda con el archivo dentro de pollster->pollster-> archivo urls.py). A continuación se muestra el código del archivo urls.py… 

from django.urls import path
from . import views
  
app_name = 'polls'
urlpatterns = [
    path('', views.index, name ='index'),
    path('<int:question_id>/', views.detail, name ='detail'),
    path('<int:question_id>/results/', views.results, name ='results'),
    path('<int:question_id>/vote/', views.vote, name ='vote'),
]

Crear plantillas

Paso 1: siga los pasos que se indican a continuación para crear el diseño frontal de la página. 

• Cree una carpeta ‘ plantillas ‘ en la carpeta de encuestador de nivel superior (junto con encuestas y encuestador), es decir, encuestador-> plantillas.
• Cree el archivo ‘ base.html ‘ dentro de la carpeta de la plantilla. Definiremos la cabecera, el cuerpo y la barra de navegación de nuestra aplicación en este archivo.
• En la carpeta ‘plantillas’ cree otra carpeta ‘ encuestas ‘. En la carpeta ‘encuestas’, cree tres archivos ‘ index.html ‘, ‘ resultados.html ‘ y ‘ detalle.html ‘.

La estructura de carpetas se verá como la imagen que se muestra a continuación (hemos resaltado los archivos que hemos creado en la sección ‘crear vistas, es decir, urls.py’ y ‘crear plantilla’)… 

Paso 2: De forma predeterminada, Django buscará la ‘plantilla’ dentro de la aplicación de ‘encuestas’, pero hemos creado una carpeta global de ‘plantilla’ que está fuera de la aplicación de encuestas. Entonces, para que funcione, debemos definir la ruta de la carpeta ‘plantilla’ dentro del archivo settings.py. Abra el archivo settings.py y agregue el código que se proporciona a continuación en la lista ‘PLANTILLAS’. 

TEMPLATES = [
    {
        # make changes in DIRS[].
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Paso 3: Abra el archivo index.html y escriba el código que se indica a continuación. Este archivo mostrará la lista de preguntas que están almacenadas en nuestra base de datos. Además, se mostrarán dos botones al usuario. Uno para la votación (crearemos un archivo detail.html para la votación) y el otro es para comprobar los resultados (crearemos un archivo results.html para los resultados). 

{% extends 'base.html' %}
{% block content %}
<h1 class ="text-center mb-3">Poll Questions</h1>
{% if latest_question_list %}
{% for question in latest_question_list %}
<div class ="card-mb-3">
    <div class ="card-body">
        <p class ="lead">{{ question.question_text }}</p>
  
        <a href ="{% url 'polls:detail' question.id %}" class ="btn btn-primary btn-sm">Vote Now</a>
        <a href ="{% url 'polls:results' question.id %}" class ="btn btn-secondary btn-sm">Results</a>
    </div>
</div>
{% endfor %}
{% else %}
  
<p>No polls available</p>
  
{% endif %}
{% endblock %}

Paso 4: Abra el archivo detail.html y escriba el código que se indica a continuación. Este archivo será el encargado de votar sobre cuestiones concretas. Independientemente de la pregunta que un usuario seleccione para votar de la lista de preguntas (archivo index.html), esa pregunta específica y las opciones para la pregunta se mostrarán en esta página. Un usuario podrá seleccionar una opción y votar haciendo clic en el botón votar. 

{% extends 'base.html' %}
{% block content %}
<a class ="btn btn-secondary btn-sm mb-3" href ="{% url 'polls:index' %}">Back To Polls</a>
<h1 class ="text-center mb-3">{{ question.question_text }}</h1>
  
{% if error_message %}
<p class ="alert alert-danger">
    <strong>{{ error_message }}</strong>
</p>
  
{% endif %}
  
<form action ="{% url 'polls:vote' question.id %}" method ="post">
    {% csrf_token %}
    {% for choice in question.choice_set.all %}
    <div class ="form-check">
        <input type ="radio" name ="choice" class ="form-check-input" id ="choice{{ forloop.counter }}"
            value ="{{ choice.id }}" />
        <label for ="choice{{ forloop.counter }}">{{ choice.choice_text }}</label>
    </div>
    {% endfor %}
    <input type ="submit" value ="Vote" class ="btn btn-success btn-lg btn-block mt-4" />
</form>
{% endblock %}

Paso 5: Abra el archivo results.html y escriba el código que se indica a continuación. Este archivo mostrará el resultado del total de votos sobre una pregunta específica, cualquiera que sea la pregunta que el usuario seleccione (del archivo index.html) para verificar el resultado. 

{% extends 'base.html' %}
{% block content %}
<h1 class ="mb-5 text-center">{{ question.question_text }}</h1>
  
<ul class ="list-group mb-5">
    {% for choice in question.choice_set.all %}
    <li class ="list-group-item">
        {{ choice.choice_text }} <span class ="badge badge-success float-right">{{ choice.votes }}
            vote{{ choice.votes | pluralize }}</span>
    </li>
    {% endfor %}
</ul>
  
<a class ="btn btn-secondary" href ="{% url 'polls:index' %}">Back To Polls</a>
<a class ="btn btn-dark" href ="{% url 'polls:detail' question.id %}">Vote again?</a>
{% endblock %}

Paso 6: Vamos a crear la barra de navegación para nuestra aplicación. Cree una carpeta ‘ parciales ‘ dentro de la carpeta ‘plantillas’ y luego cree un archivo ‘ _navbar.html ‘ dentro de la carpeta ‘parcial’. La estructura de archivos será templates->partials->_navbar.html. Escriba el código dado a continuación en este archivo. 

<nav class ="navbar navbar-dark bg-primary mb-4">
    <div class ="container">
        <a class ="navbar-brand" href ="/">Pollster</a>
    </div>
</nav>

Paso 7: No hemos incluido la etiqueta de cabeza y cuerpo en cada archivo HTML que hemos creado hasta ahora. Podemos escribir estos códigos en un solo archivo base.html y podemos darle el diseño a nuestra página. También traeremos nuestra barra de navegación (archivo _navbar.html) en esta página. Así que abra el archivo base.html dentro de la carpeta ‘plantilla’ y escriba el código que se proporciona a continuación. 

<! DOCTYPE html>
<html lang ="en">
<head>
    <link rel ="stylesheet" href ="https://stackpath.bootstrapcdn.com / bootstrap / 4.4.1 / css / bootstrap.min.css"
        integrity ="sha384-Vkoo8x4CGsO3 + Hhxv8T / Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin ="anonymous">
    <title>Pollster {% block title %}{% endblock %}</title>
</head>
  
<body>
    <!--NavBar-->
    {% include 'partials/_navbar.html'%}
    <div class ="container">
        <div class ="row">
            <div class =".col-md-6 m-auto">
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>
</body>
  
</html>

Crear página de destino

La URL http://127.0.0.1:8000/ debe mostrar una página de destino para nuestra aplicación web. Entonces, para crear una página de destino, seguiremos el paso que se indica a continuación. 

Paso-1 Cambie a la carpeta de encuestas de nivel superior y ejecute el comando que se indica a continuación para crear una aplicación ‘ páginas ‘. 

python manage.py startapp pages

A continuación se muestra la estructura de carpetas una vez que se creará la aplicación ‘páginas’. 

Paso 2 Abra ‘ views.py ‘ dentro de la carpeta ‘pages’, es decir, pages->views.py. Escriba el código que se proporciona a continuación para visitar en la página de destino. 

from django.shortcuts import render
  
# Create your views here.
  
def index(request):
    return render(request, 'pages / index.html')

Paso 3 Cree el archivo urls.py dentro de la carpeta ‘pages’, es decir, pages->urls.py. Escriba el código que se proporciona a continuación para definir el enrutamiento del archivo pages->index.html (consulte el paso 1). 

    
from django.urls import path
  
from . import views
  
urlpatterns = [
    path('', views.index, name ='index'),
]

Paso 4 Cree una carpeta ‘ páginas ‘ dentro de la carpeta ‘plantilla’. Ahora, dentro de la carpeta ‘páginas’, cree un archivo index.html . Escriba el código que se proporciona a continuación para mostrar la página de destino a los usuarios. 

{% extends 'base.html' %}
{% block content %}
  
<div class ="card text-center">
    <div class ="card-body">
        <h1>Welcome To Pollster</h1>
          
<p>This is an example Django polling app</p>
  
        <a class ="btn btn-dark" href ="{% url 'polls:index' %}">
            View Available Polls</a>
    </div>
</div>
{% endblock %}

Crear enrutamiento dentro del archivo principal urls.py de la aplicación

Hemos creado dos aplicaciones en nuestra aplicación ‘ encuestas ‘ y ‘ páginas ‘. Necesitamos definir el enrutamiento de estas dos aplicaciones dentro del archivo principal urls.py , que es el archivo pollster->pollster->urls.py. Así que abre el archivo principal urls.py dentro de la carpeta del encuestador y escribe el código que se proporciona a continuación para definir el enrutamiento de estas dos aplicaciones (‘encuestas’ y ‘páginas’). 

from django.contrib import admin
from django.urls import include, path
  
urlpatterns = [
    path('', include('pages.urls')),
    path('polls/', include('polls.urls')),
    path('admin/', admin.site.urls),
]

Prueba de la aplicación

interfaz de administración

Paso-1 Ejecute el servidor usando el comando python manage.py runserver y explore la URL http://127.0.0.1:8000/admin/ . Ahora ingrese el nombre de usuario y la contraseña para iniciar sesión en el sistema. 

Paso 2 Haga clic en el botón ‘agregar’ al lado de ‘Preguntas’. 

Paso 2 Ahora agregue preguntas y opciones para esas preguntas. Además, mencione la fecha y la hora y luego haga clic en el botón ‘guardar’. Puedes añadir tantas preguntas como quieras. Verá una lista de preguntas añadidas en la base de datos. 

interfaz de usuario

Paso 1: navegue por la URL http://127.0.0.1:8000/ y verá la página de destino de la aplicación. Haga clic en «Ver encuestas disponibles» 

Paso 2: Verá una lista de preguntas con dos opciones ‘Vota ahora’ y ‘Resultados’. Desde aquí, debe seleccionar una pregunta y hacer clic en el botón ‘Votar ahora’. 

Paso 3: Una vez hecho esto, seleccione cualquier opción y haga clic en el botón ‘Votar’. También puede ir al menú anterior usando el botón ‘Volver a encuestas’ en la parte superior. 

Verá el resultado total de la votación para la pregunta que ha seleccionado. 

También puede consultar el total de votos para cualquier pregunta mediante la opción ‘Resultados’ de la página ‘Preguntas de la encuesta’. 

Alcance futuro

Este proyecto se puede utilizar para llevar a cabo el sistema de votación en línea en cualquier campo o industria. El proyecto se puede expandir y también se pueden incluir varias otras características según el requisito. Las personas pueden compartir la opinión y también pueden verificar el total de votos otorgados por muchos usuarios. 

Enlace al repositorio del proyecto

https://github.com/anuupadhyay/pollster-django-crash