mirror of
https://github.com/Sosokker/ku-polls.git
synced 2025-12-18 13:04:05 +01:00
Update Views of all pages - index, detail, result / Add Home Page
Update views of all pages and add HomeView (Homepage) + Update data of sqlite3 polls database
This commit is contained in:
sosokker
parent
59ae9b68b3
commit
477903dfd3
BIN
db.sqlite3
BIN
db.sqlite3
Binary file not shown.
@ -117,7 +117,8 @@ USE_TZ = True
|
||||
# Static files (CSS, JavaScript, Images)
|
||||
# https://docs.djangoproject.com/en/4.2/howto/static-files/
|
||||
|
||||
STATIC_URL = 'static/'
|
||||
STATIC_URL = '/static/'
|
||||
STATICFILES_DIRS = [BASE_DIR]
|
||||
|
||||
# Default primary key field type
|
||||
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
from django.contrib import admin
|
||||
from django.urls import include, path
|
||||
|
||||
from polls.views import HomeView
|
||||
|
||||
urlpatterns = [
|
||||
path('', HomeView.as_view(), name='home'),
|
||||
path("polls/", include("polls.urls")),
|
||||
path('admin/', admin.site.urls),
|
||||
]
|
||||
|
||||
191
polls/static/polls/base.css
Normal file
191
polls/static/polls/base.css
Normal file
@ -0,0 +1,191 @@
|
||||
/*! NAVBAR */
|
||||
|
||||
header {
|
||||
background-color: #1C1C1C;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-left h1 a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
.nav-right ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-right li {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.nav-right a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-right a:hover {
|
||||
background-color: #fff;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/*! HOME AND POLL CARD */
|
||||
|
||||
.hero-section {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
text-align: center;
|
||||
color: #1c1c1c;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.polls-section {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
text-align: center;
|
||||
color: #1c1c1c;
|
||||
}
|
||||
|
||||
.poll-cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.poll-card {
|
||||
background-color: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.poll-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/*! DETAILED */
|
||||
|
||||
.poll-details {
|
||||
padding: 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.poll-form {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.poll-question {
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.choice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.choice input[type="radio"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.choice-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.vote-button {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.vote-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/*! RESULT */
|
||||
|
||||
.poll-results {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.poll-question {
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.choice-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 20px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.choice-item {
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.vote-again {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
text-decoration: none;
|
||||
color: #007bff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.vote-again:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
li a {
|
||||
color: green;
|
||||
}
|
||||
body {
|
||||
background: white url("images/background.jpg") no-repeat;
|
||||
}
|
||||
25
polls/templates/polls/base.html
Normal file
25
polls/templates/polls/base.html
Normal file
@ -0,0 +1,25 @@
|
||||
{% load static %}
|
||||
<html>
|
||||
<head>
|
||||
<title>MySite Polls</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400" rel="stylesheet">
|
||||
<link rel='stylesheet' href='{% static 'polls/base.css' %}'>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<div class='nav-left'>
|
||||
<h1><a href={% url 'home' %}>MySite Polls | </a></h1>
|
||||
</div>
|
||||
<div class='nav-right'>
|
||||
<ul>
|
||||
<li><a href="{% url 'home' %}">Home</a></li>
|
||||
<li><a href="{% url 'polls:index' %}">View Polls</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,12 +1,24 @@
|
||||
<form action="{% url 'polls:vote' question.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
<fieldset>
|
||||
<legend><h1>{{ question.question_text }}</h1></legend>
|
||||
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
|
||||
{% for choice in question.choice_set.all %}
|
||||
<input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
|
||||
<label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
|
||||
{% endfor %}
|
||||
</fieldset>
|
||||
<input type="submit" value="Vote">
|
||||
</form>
|
||||
{% extends 'polls/base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<section class="poll-details">
|
||||
<form action="{% url 'polls:vote' question.id %}" method="post" class="poll-form">
|
||||
{% csrf_token %}
|
||||
<fieldset>
|
||||
<legend class="poll-question">{{ question.question_text }}</legend>
|
||||
{% if error_message %}
|
||||
<p class="error-message"><strong>{{ error_message }}</strong></p>
|
||||
{% endif %}
|
||||
{% for choice in question.choice_set.all %}
|
||||
<div class="choice">
|
||||
<input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
|
||||
<label for="choice{{ forloop.counter }}" class="choice-text">{{ choice.choice_text }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</fieldset>
|
||||
<button type="submit" class="vote-button">Vote</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
|
||||
26
polls/templates/polls/home.html
Normal file
26
polls/templates/polls/home.html
Normal file
@ -0,0 +1,26 @@
|
||||
{% extends 'polls/base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<section class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h1>Welcome to KU Polls</h1>
|
||||
<p>Explore and participate in our weird poll questions.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="polls-section">
|
||||
<h2>Recent Polls</h2>
|
||||
<p class="total-polls">Total number of polls: {{ total_polls }}</p>
|
||||
<div class="poll-cards">
|
||||
{% if latest_question_list %}
|
||||
{% for question in latest_question_list %}
|
||||
<div class="poll-card">
|
||||
<h3><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></h3>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p>No polls are available.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
@ -1,13 +1,18 @@
|
||||
{% load static %}
|
||||
{% extends 'polls/base.html' %}
|
||||
|
||||
<link rel="stylesheet" href="{% static 'polls/style.css' %}">
|
||||
|
||||
{% if latest_question_list %}
|
||||
<ul>
|
||||
{% for question in latest_question_list %}
|
||||
<li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p>No polls are available.</p>
|
||||
{% endif %}
|
||||
{% block content %}
|
||||
<section class="polls-section">
|
||||
<h2>Recent Polls</h2>
|
||||
<div class="poll-cards">
|
||||
{% if latest_question_list %}
|
||||
{% for question in latest_question_list %}
|
||||
<div class="poll-card">
|
||||
<h3><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></h3>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p>No polls are available.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<h1>{{ question.question_text }}</h1>
|
||||
|
||||
<ul>
|
||||
{% for choice in question.choice_set.all %}
|
||||
<li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<a href="{% url 'polls:detail' question.id %}">Vote again?</a>
|
||||
@ -1,9 +1,17 @@
|
||||
<h1>{{ question.question_text }}</h1>
|
||||
{% extends 'polls/base.html' %}
|
||||
|
||||
<ul>
|
||||
{% for choice in question.choice_set.all %}
|
||||
<li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<a href="{% url 'polls:detail' question.id %}">Vote again?</a>
|
||||
{% block content %}
|
||||
<main>
|
||||
<section class="poll-results">
|
||||
<div class="poll-header">
|
||||
<h1 class="poll-question">{{ question.question_text }}</h1>
|
||||
</div>
|
||||
<ul class="choice-list">
|
||||
{% for choice in question.choice_set.all %}
|
||||
<li class="choice-item">{{ choice.choice_text }} — {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<a href="{% url 'polls:detail' question.id %}" class="vote-again">Vote again?</a>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
|
||||
@ -3,50 +3,19 @@ from django.shortcuts import get_object_or_404, render
|
||||
from django.urls import reverse
|
||||
from django.views import generic
|
||||
from django.utils import timezone
|
||||
from django.views.generic import TemplateView
|
||||
|
||||
from .models import Choice, Question
|
||||
|
||||
|
||||
# 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)
|
||||
class HomeView(TemplateView):
|
||||
template_name = 'polls/home.html'
|
||||
|
||||
|
||||
# def index(request):
|
||||
# lastest_question_list = Question.objects.order_by("-pub_date")[:5]
|
||||
# template = loader.get_template("polls/index.html")
|
||||
# context = {
|
||||
# "lastest_question_list": lastest_question_list
|
||||
# }
|
||||
# return HttpResponse(template.render(context, request))
|
||||
|
||||
|
||||
# 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})
|
||||
|
||||
|
||||
# def detail(request, question_id):
|
||||
# question = get_object_or_404(Question, pk=question_id)
|
||||
# return render(request, "polls/detail.html", {"question": question})
|
||||
|
||||
|
||||
# def results(request, question_id):
|
||||
# response = "You're looking at the results of question %s."
|
||||
# return HttpResponse(response % question_id)
|
||||
|
||||
|
||||
# def results(request, question_id):
|
||||
# question = get_object_or_404(Question, pk=question_id)
|
||||
# return render(request, "polls/results.html", {"question": question})
|
||||
|
||||
|
||||
# def vote(request, question_id):
|
||||
# return HttpResponse("You're voting on question %s." % question_id)
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super().get_context_data(**kwargs)
|
||||
context['latest_question_list'] = Question.objects.filter(pub_date__lte=timezone.now()).order_by("-pub_date")[:5]
|
||||
context['total_polls'] = Question.objects.count()
|
||||
return context
|
||||
|
||||
|
||||
class IndexView(generic.ListView):
|
||||
|
||||
Loading…
Reference in New Issue
Block a user