Anonymous Feedback System using Django

In web development, getting feedback from users is super important for making websites better. One way to do that is by having a feedback form where users can share their thoughts and ratings. Here, We’re going to learn how to make one using Django, which is a cool framework for making web apps with Python. Let’s see how we can create Anonymous Feedback System using Django

Below, is the implementation of the Anonymous Feedback System using Django in Python.

Starting the Project Folder

To start the project use this command

django-admin startproject feedback_system
cd feedback_system

To start the app use this command

python manage.py startapp feedback

Now add this app to the ‘settings.py’

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "feedback",
]

File Structure

main

Setting Necessary Files

models.py : Below, Django model, named Feedback, includes fields for a message, rating, and creation timestamp, allowing for the storage of user feedback along with associated ratings and timestamps within a Django project.

Python3

# feedback/models.py

from django.db import models

class Feedback(models.Model):
    message = models.TextField()
    rating = models.IntegerField(default=0)  # New field for storing the rating
    created_at = models.DateTimeField(auto_now_add=True)

views.py : Django views module defines two views: feedback_view for handling feedback form submissions and thank_you_view for displaying a thank-you page. The feedback_view checks if the request method is POST, processes the form data, and redirects to the thank-you page upon successful submission

Python3

# feedback/views.py
from django.shortcuts import render, redirect
from .forms import FeedbackForm

def feedback_view(request):
    if request.method == 'POST':
        form = FeedbackForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('thank_you')
    else:
        form = FeedbackForm()
    return render(request, 'feedback_form.html', {'form': form})

def thank_you_view(request):
    return render(request, 'thank_you.html')

forms.py : Django form, named FeedbackForm, is designed to handle feedback submissions. It’s linked to the Feedback model and includes fields for the message and rating, simplifying form creation.

Python3

# feedback/forms.py

from django import forms
from .models import Feedback

class FeedbackForm(forms.ModelForm):
    class Meta:
        model = Feedback
        fields = ['message', 'rating']  # Include the rating field

Creating GUI

templates/feedback_from.html: HTML document creates a feedback form with a star-based rating system and a textarea for comments. Styled with CSS for layout and appearance, it utilizes JavaScript to handle rating selection dynamically. Upon submission, it sends the feedback message and rating to the server.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feedback Form</title>
    <style>
        /* Add your CSS styles here */
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #feedbackContainer {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
            width: 400px;
            text-align: center;
        }
        #ratingStars {
            font-size: 30px;
        }
        .star {
            cursor: pointer;
        }
        .selected {
            color: gold;
        }
        textarea {
            width: 100%;
            height: 100px;
            margin-top: 10px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: none; /* Prevent textarea from being resized */
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div id="feedbackContainer">
        <h2 style="color: green;">GeeksforGeeks</h1>
        <h2>Leave Your Feedback</h2>
        <form id="feedbackForm" method="post">
            {% csrf_token %}
            <div id="ratingStars">
                <span class="star" data-rating="1">&#9733;</span>
                <span class="star" data-rating="2">&#9733;</span>
                <span class="star" data-rating="3">&#9733;</span>
                <span class="star" data-rating="4">&#9733;</span>
                <span class="star" data-rating="5">&#9733;</span>
            </div>
            <textarea name="message" placeholder="Enter your feedback"></textarea>
            <input type="hidden" name="rating" id="ratingInput" value="0">
            <button type="submit">Submit</button>
        </form>
    </div>

    <script>
        const stars = document.querySelectorAll('.star');
        const ratingInput = document.getElementById('ratingInput');

        stars.forEach(star => {
            star.addEventListener('click', () => {
                const rating = parseInt(star.getAttribute('data-rating'));
                ratingInput.value = rating;
                stars.forEach(s => {
                    if (parseInt(s.getAttribute('data-rating')) <= rating) {
                        s.classList.add('selected');
                    } else {
                        s.classList.remove('selected');
                    }
                });
            });
        });
    </script>
</body>
</html>

templates/thank_you.html: HTML document displays a “Thank You” message upon successful submission of feedback. Styled with CSS for layout and animation effects, it provides a link to return to the home page. The message container slides into view with a smooth animation, enhancing user experience.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thank You!</title>
    <style>
        /* Add your CSS styles here */
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #thankYouMessage {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Shadow effect */
            text-align: center;
            animation: slideIn 1s ease-in-out; /* Animation */
        }
        @keyframes slideIn {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        h2 {
            margin-bottom: 20px;
        }
        p {
            font-size: 18px;
            line-height: 1.5;
            color: #555;
        }
        a {
            color: #007bff;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="thankYouMessage">
        <h2>Thank You!</h2>
        <p>Your feedback has been received.</p><br>
        <br>
        <p><a href="/">Back to Home</a></p>
    </div>
</body>
</html>

feedback/urls.py: Below, are the urls.py file of django feedback app.

Python3

# feedback/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.feedback_view, name='feedback'),
    path('thank-you/', views.thank_you_view, name='thank_you'),
]

feedback_system/urls.py: Below, are the urls.py file for Django project feedback_system.

Python3

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('feedback.urls')),
]

admin.py:Here we are registering our models.

Python3

# feedback/admin.py

from django.contrib import admin
from .models import Feedback

admin.site.register(Feedback)

Deployment of the Project

Run these commands to apply the migrations:

python3 manage.py makemigrations
python3 manage.py migrate

Create superuser using the below command:

python3 manage.py createsuperuser

Run the server with the help of following command:

python3 manage.py runserver

Output

Feedback_form.html

thank_you.html

Video Demonstration

Reffered: https://www.geeksforgeeks.org

Django

Related
Cross Site Scripting (XSS) Protection in Django
ContentTypes Framework in Django
Database Functions in Django
What is Django User Concurrency?
Django Dynamic Model Fields

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	15