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

mysite/settings.py

@@ -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

mysite/urls.py

@@ -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),
 ]

polls/static/polls/base.css

@@ -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;
+}

polls/static/polls/style.css

@@ -1,6 +0,0 @@
-li a {
-    color: green;
-}
-body {
-    background: white url("images/background.jpg") no-repeat;
-}

polls/templates/polls/base.html

@@ -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>

polls/templates/polls/detail.html

@@ -1,12 +1,24 @@
-<form action="{% url 'polls:vote' question.id %}" method="post">
+{% 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><h1>{{ question.question_text }}</h1></legend>
+                <legend class="poll-question">{{ question.question_text }}</legend>
-        {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
+                {% 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 }}">{{ choice.choice_text }}</label><br>
+                        <label for="choice{{ forloop.counter }}" class="choice-text">{{ choice.choice_text }}</label>
+                    </div>
                 {% endfor %}
             </fieldset>
-    <input type="submit" value="Vote">
+            <button type="submit" class="vote-button">Vote</button>
-</form>
+        </form>
+    </section>
+</main>
+{% endblock content %}

polls/templates/polls/home.html

@@ -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 %}

polls/templates/polls/index.html

@@ -1,13 +1,18 @@
-{% load static %}
+{% extends 'polls/base.html' %}
 
-<link rel="stylesheet" href="{% static 'polls/style.css' %}">
+{% block content %}
-
+<section class="polls-section">
-{% if latest_question_list %}
+    <h2>Recent Polls</h2>
-    <ul>
+        <div class="poll-cards">
+            {% if latest_question_list %}
                 {% for question in latest_question_list %}
-        <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
+                    <div class="poll-card">
+                        <h3><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></h3>
+                    </div>
                 {% endfor %}
-    </ul>
+            {% else %}
-{% else %}
                 <p>No polls are available.</p>
-{% endif %}
+            {% endif %}
+        </div>
+</section>
+{% endblock content %}

polls/templates/polls/result.html

@@ -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>

polls/templates/polls/results.html

@@ -1,9 +1,17 @@
-<h1>{{ question.question_text }}</h1>
+{% extends 'polls/base.html' %}
 
-<ul>
+{% block content %}
-{% for choice in question.choice_set.all %}
+<main>
-    <li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
+    <section class="poll-results">
-{% endfor %}
+        <div class="poll-header">
-</ul>
+            <h1 class="poll-question">{{ question.question_text }}</h1>
-
+        </div>
-<a href="{% url 'polls:detail' question.id %}">Vote again?</a>
+        <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 %}

polls/views.py

@@ -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):
+class HomeView(TemplateView):
-#     latest_question_list = Question.objects.order_by("-pub_date")[:5]
+    template_name = 'polls/home.html'
-#     context = {"latest_question_list": latest_question_list}
-#     return render(request, "polls/index.html", context)
 
-
+    def get_context_data(self, **kwargs):
-# def index(request):
+        context = super().get_context_data(**kwargs)
-#     lastest_question_list = Question.objects.order_by("-pub_date")[:5]
+        context['latest_question_list'] = Question.objects.filter(pub_date__lte=timezone.now()).order_by("-pub_date")[:5]
-#     template = loader.get_template("polls/index.html")
+        context['total_polls'] = Question.objects.count()
-#     context = {
+        return 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)
 
 
 class IndexView(generic.ListView):