Nov 07

Learning-Python/learning-django/my_site/blog/forms.py

@@ -0,0 +1,13 @@
+from django import forms
+
+from .models import Comment
+
+class CommentForm(forms.ModelForm):
+    class Meta:
+        model = Comment
+        exclude = ["post"]
+        labels = {
+            "user_name": "Your Name",
+            "user_email": "Your Email",
+            "text": "Your Comment"
+        }

Learning-Python/learning-django/my_site/blog/migrations/0003_comment.py

@@ -0,0 +1,24 @@
+# Generated by Django 4.2.6 on 2023-11-07 14:48
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0002_remove_post_image_name_post_image'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Comment',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('user_name', models.CharField(max_length=120)),
+                ('user_email', models.EmailField(max_length=254)),
+                ('text', models.TextField(max_length=300)),
+                ('post', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='comments', to='blog.post')),
+            ],
+        ),
+    ]

Learning-Python/learning-django/my_site/blog/models.py

@@ -34,3 +34,9 @@ class Post(models.Model):
     author = models.ForeignKey(
         Author, on_delete=models.SET_NULL, related_name="posts", null=True)
     tags = models.ManyToManyField(Tag)
+
+class Comment(models.Model):
+    user_name = models.CharField(max_length=120)
+    user_email = models.EmailField()
+    text = models.TextField(max_length=300)
+    post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name="comments")

Learning-Python/learning-django/my_site/blog/static/blog/post-detail.css

@@ -73,4 +73,89 @@ main {
   padding:0% 0.5rem 1rem;
   border-radius: 12px;
   text-align: center;
+}
+
+.form-control{
+  margin-bottom: 1rem;
+}
+
+.form-control label {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+.form-control input,
+.form-control textarea{
+  display: block;
+  width: 100%;
+  font: inherit;
+  padding: 0.25rem;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+
+#comment-form{
+  margin: 3rem auto;
+  width: 90%;
+  max-width: 40rem;
+  border-radius: 12px;
+  background-color: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  padding: 1rem;
+}
+
+#comment-form button{
+  font:inherit;
+  background-color: #390281;
+  color: white;
+  border: 1px solid #390281;
+  padding: 0.5rem 1.5rem;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+#comment-form button:hover,
+#comment-form button:active{
+  background-color: #4f0ba7;
+  border-color: #4f0ba7;
+}
+
+h2{
+  color: black !important;
+}
+
+.errorlist{
+  list-style: none;
+  margin: 0.5rem 0;
+  padding: 0;
+  color: crimson;
+}
+
+.invalid label{
+  color: crimson;
+}
+
+.invalid input,
+.invalid textarea{
+border-color: crimson;
+background-color: rgb(239, 202, 209);
+}
+
+#alert {
+  margin: 8rem auto 3rem auto;
+  border: 1px solid crimson;
+  background-color: rgb(239, 202, 209);
+  padding: 1rem;
+  width: 90%;
+  max-width: 40rem;
+}
+
+#alert a{
+  text-decoration: none;
+  border: 1px solid crimson;
+  background-color: crimson;
+  color: white;
+  padding: 0.25 1.5rem;
+  border-radius: 6px;
 }

Learning-Python/learning-django/my_site/blog/templates/blog/post-detail.html

@@ -6,30 +6,52 @@
 {% endblock %} 
 
 {% block css_files %}
-<link rel="stylesheet" href="{% static "blog/post-detail.css" %}" />
+<link rel="stylesheet" href="{% static 'blog/post-detail.css' %}" />
 {% endblock %}
 
 
 {% block content %}
+{% if comment_form.errors %}
+    <div id="alert">
+        <h2>Saving the comment Failed!</h2>
+        <p>Please check the comment form below the post nd fix your errors!</p>
+        <a href="#comment-form">Fix!</a>   
+     </div>
+{% endif %}
+
 <section id="summary">
-<h2>{{ post.title }}</h2>
-<div> 
- {% for tag in post_tags %}
- <span class="tag">{{tag.caption}}</span>
- {% endfor %}   
-</div>
-<article>
-    <img src="{{ post.image.url }}" alt="{{ post.title }}" />
-    <address>
-        By <a href="mailto:{{post.author.email_address}}">{{ post.author }} </a>
-    </address>
-    <div>
-        Last Updated on <time>{{post.date|date:"d M Y"}}</time>
+    <h2>{{ post.title }}</h2>
+    <div> 
+    {% for tag in post_tags %}
+    <span class="tag">{{tag.caption}}</span>
+    {% endfor %}   
     </div>
-</article>
+    <article>
+        <img src="{{ post.image.url }}" alt="{{ post.title }}" />
+        <address>
+            By <a href="mailto:{{post.author.email_address}}">{{ post.author }} </a>
+        </address>
+        <div>
+            Last Updated on <time>{{post.date|date:"d M Y"}}</time>
+        </div>
+    </article>
+</section>
 
 <main>
     {{post.content|linebreaks}}
 </main>
+<section id="comment-form">
+    <h2>Your Comment</h2>
+    <form action="{% url 'post-details' post.slug %}" method="POST">
+        {% csrf_token %}
+        {% for form_field in comment_form %}
+            <div class="form-control {% if form_field.errors %} invalid {% endif %}">
+                {{ form_field.label_tag }}
+                {{ form_field }}
+                {{ form_field.errors }}
+            </div>
+        {% endfor %}
+        <button>Save Comment</button>
+    </form>
 </section>
 {% endblock %}

Learning-Python/learning-django/my_site/blog/urls.py

@@ -2,7 +2,7 @@
 from . import views
 
 urlpatterns = [
-    path("", views.starting_paeg, name="home-page"),
-    path("posts", views.posts, name="all-posts"),
-    path("posts/<slug:slug>", views.post_detail, name="post-details")
+    path("", views.StartingPageView.as_view(), name="home-page"),
+    path("posts", views.AllPostsView.as_view(), name="all-posts"),
+    path("posts/<slug:slug>", views.SinglePostView.as_view(), name="post-details")
 ]

Learning-Python/learning-django/my_site/blog/views.py

@@ -1,27 +1,93 @@
 from django.shortcuts import render, get_object_or_404
+from django.views.generic import ListView
+from django.views import View
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
 from .models import Post
+from .forms import CommentForm
 
 
 # Create your views here.
 
+class StartingPageView(ListView):
+    template_name = "blog/index.html"
+    model = Post
+    ordering = ["-date"]
+    context_object_name = "posts"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        data = queryset[:3]
+        return data
+
+
+# the class on the top instead of functional view for the one i just commented 
+
+# def starting_paeg(request):
+#     latest_posts = Post.objects.all().order_by("-date")[:3]
+#     return render(request, "blog/index.html", {
+#         "posts": latest_posts
+#     })
+
+class AllPostsView(ListView):
+    template_name="blog/all-posts.html"
+    model = Post
+    ordering = ["-date"]
+    context_object_name = "all_posts"
+
+# the class on the top instead of the functional view down here 
+
+# def posts(request):
+#     all_posts = Post.objects.all().order_by("-date")[:3]
+#     return render(request, "blog/all-posts.html", {
+#         "all_posts": all_posts
+#     })
+
+class SinglePostView(View):
+    # template_name = "blog/post-detail.html"
+    # model = Post
+
+    def get(self,request, slug):
+        post = Post.objects.get(slug=slug)
+        context = {
+            "post": post,
+            "post_tags": post.tags.all(),
+            "comment_form": CommentForm()
+        }
+        return render(request, "blog/post-detail.html",context)
+
+    def post(self,request, slug):
+        comment_form = CommentForm(request.POST)
+        post = Post.objects.get(slug=slug)
 
-def starting_paeg(request):
-    latest_posts = Post.objects.all().order_by("-date")[:3]
-    return render(request, "blog/index.html", {
-        "posts": latest_posts
-    })
+        if comment_form.is_valid():
+            comment =  comment_form.save(commit=False)
+            comment.post = post
+            comment.save()
+
+            return HttpResponseRedirect(reverse("post-details", args=[slug]))
+
+        context = {
+            "post": post,
+            "post_tags": post.tags.all(),
+            "comment_form": comment_form
+        }
+        return render(request, "blog/post-detail.html",context)
 
 
-def posts(request):
-    all_posts = Post.objects.all().order_by("-date")[:3]
-    return render(request, "blog/all-posts.html", {
-        "all_posts": all_posts
-    })
+    # use the get context data when you extent from detailed view only
+    # def get_context_data(self, **kwargs):
+    #     context =  super().get_context_data(**kwargs)
+    #     context["post_tags"] = self.object.tags.all()
+    #     context["comment_form"] = CommentForm()
+    #     return context
 
+# the class on the top instead of the functional view down here 
 
-def post_detail(request, slug):
-    identified_post = get_object_or_404(Post, slug=slug)
-    return render(request, "blog/post-detail.html", {
-        "post": identified_post, 
-        "post_tags": identified_post.tags.all()
-    })
+# def post_detail(request, slug):
+#     identified_post = get_object_or_404(Post, slug=slug)
+#     return render(request, "blog/post-detail.html", {
+#         "post": identified_post, 
+#         "post_tags": identified_post.tags.all()
+#     })