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
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
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.
# 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
# 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.
# 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.
<!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">★</span>
<span class="star" data-rating="2">★</span>
<span class="star" data-rating="3">★</span>
<span class="star" data-rating="4">★</span>
<span class="star" data-rating="5">★</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.
<!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.
# 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.
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.
# 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 createsuperuserRun the server with the help of following command:
python3 manage.py runserverOutput
Feedback_form.html
thank_you.html