Skip to content
Snippets Groups Projects
Commit 51e46ea2 authored by Mansoor Saleem's avatar Mansoor Saleem
Browse files

Comment section added

parent d53dc6e3
No related branches found
No related tags found
No related merge requests found
Pipeline #3147 canceled
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
Showing
with 196 additions and 316 deletions
articles/migrations/__pycache__/0001_initial.cpython-37.pyc
+ 0
− 0
View file @ 51e46ea2
No preview for this file type
articles/migrations/__pycache__/0002_article_thumb.cpython-37.pyc
+ 0
− 0
View file @ 51e46ea2
No preview for this file type
articles/migrations/__pycache__/__init__.cpython-37.pyc
+ 0
− 0
View file @ 51e46ea2
No preview for this file type
articles/models.py
+ 6
− 30
View file @ 51e46ea2
from django.db import models from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User from django.contrib.auth.models import User
# Create your models here. # Create your models here.
...@@ -18,35 +16,13 @@ class Article(models.Model): ...@@ -18,35 +16,13 @@ class Article(models.Model):
def snippet(self): def snippet(self):
return self.body[:50] + '...' return self.body[:50] + '...'
class Comment(models.Model):
post = models.ForeignKey(Article, on_delete=models.SET_DEFAULT, default=1, related_name='comments')
user = models.CharField(max_length=250)
email = models.TextField()
created = models.DateTimeField(auto_now_add=True)
approved = models.BooleanField(default=False)
def approved(self): class Comment(models.Model):
self.approved = True article = models.ForeignKey(Article, on_delete=models.PROTECT)
self.save() user = models.ForeignKey(User, on_delete=models.PROTECT)
content = models.TextField(max_length=150)
timestamp = models.DateTimeField(auto_now_add=True)
def __str__(self): def __str__(self):
return self.user return '{}.{}'.format(self.article.title, str(self.user.username))
#add in thumbnail later
#add in author later
#python manage.py makemigrations
#python manage.py makemigrations
#use the upper two commands whenever you make changes in the model
#whenever we make channges to the models when need to migrate kit
#11 theres alway error when you migrate so the fix is simply to add "on_delete=models.PROTECT"
#we create a snippet which is a model whose function is to cut the number of words to let say 100
#to add ... at the end
#9 blank = true beacuse the if a doesnt want to upload anythingits ok
articles/templates/articles/article_create.html
+ 13
− 0
View file @ 51e46ea2
...@@ -9,4 +9,17 @@ ...@@ -9,4 +9,17 @@
<input type="submit" value="Create"> <input type="submit" value="Create">
</form> </form>
</div> </div>
<script src="/static/slugify.js"></script>
{% endblock %} {% endblock %}
<hr>
<div class="main-comment-section">
{{ comments.count}} Comment{{ comments|pluralize }}
{% for comment in comments %}
<blockquote class="blockquote">
<p class="mb-0">{{ comment.content }}</p>
<footer class="blockquote-footer">by <cite title="Source Title">{{ comment.user|capfirst}}</cite></footer>
</blockquote>
{% endfor %}
</div>
\ No newline at end of file
articles/templates/articles/article_detail.html
+ 20
− 18
View file @ 51e46ea2
{% extends 'base_layout.html' %} {% extends 'base_layout.html' %}
{% block content%} {% block content %}
<body> <div class="article-detail">
<div class="article-detail"> <div class="article">
<div class="article">
<img src="{{ article.thumb.url }}" /> <img src="{{ article.thumb.url }}" />
<h2>{{ article.title }}</h2> <h2>{{ article.title }}</h2>
<p>{{ article.body }}</p> <p>{{ article.body }}</p>
<p>{{ article.date }}</p> <p>{{ article.date }}</p>
</div>
</div> </div>
</div>
<hr>
<br><br>
<hr>
<h1>Leave a Comment</h1> <form method="article">
<p>Total No of Comments {{post.comments.count}}</p> {% csrf_token %}
<a href="{% url 'articles:add_comment' slug=post.slug}">Leave A Comment</a> {{ comment_form.as_p }}
{% for comment in post.comments.all %} <input type="submit" value = "submit" class="btn btn-outline-success">
<p>{{comment.created}}</p> </form>
<p>{{comment.user}}</p>
<p>{{comment.body}}</p>
{% empty %}
<p> There is no comment </p>
{% endfor %}
<div class="main-comment-section">
{{ comments.count }} Comment{{ comments|pluralize }}
{% for comment in comments %}
<blockquote class="blockquote">
<p class="mb-0">{{ comments.content }}</p>
<footer class="blockquote-footer">by <cite title="Source Title">{{ comment.user|capfirst }}</cite></footer>
</blockquote>
{% endfor %}
</div>
<body/>
{% endblock %} {% endblock %}
\ No newline at end of file
articles/templates/articles/article_list.html
+ 2
− 5
View file @ 51e46ea2
{% extends 'base_layout.html' %} {% extends 'base_layout.html' %}
< !-- this file extends from base layout template -->
{% block content%} {% block content%}
<h1>Articles List</h1> <h1>Articles List</h1>
...@@ -9,10 +8,8 @@ ...@@ -9,10 +8,8 @@
<h2><a href="{% url 'articles:detail' slug=article.slug %}">{{ article.title }}</a></h2> <h2><a href="{% url 'articles:detail' slug=article.slug %}">{{ article.title }}</a></h2>
<p>{{ article.snippet }}</p> <p>{{ article.snippet }}</p>
<p>{{ article.date }}</p> <p>{{ article.date }}</p>
<p class="author">added by {{ article.author.username }}</p>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% endblock %} {% endblock %}
\ No newline at end of file
< !-- extending a base template, a base template has all of the stuff eg header footer etc all goes in to the base template -->
< !-- so that is how we extend template ie you dont have to add header and footer etc which are saved in base template -->
articles/urls.py
+ 3
− 9
View file @ 51e46ea2
from django.conf.urls import url from django.conf.urls import url
from .import views from . import views
app_name = 'articles' app_name = 'articles'
urlpatterns = [ urlpatterns = [
url(r'^$', views.article_list, name="list"), url(r'^$', views.article_list, name="list"),
url(r'^create/$', views.article_create, name="create"), url(r'^create/$', views.article_create, name="create"),
url(r'^(?P<slug>[\w-]+)/$', views.article_detail, name="detail"),
]
] \ No newline at end of file
#?P<slug> this whole thing a name capturing group
#\w is anynumber or any alphabet then - then + for any length and then $ for end
#7 naming so that all may be different eg naming = list
#8 #here we get slug from views.py and use here
articles/views.py
+ 25
− 24
View file @ 51e46ea2
from django.http import HttpResponse from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render, redirect from django.shortcuts import render, get_object_or_404, redirect
from .models import Article from .models import Article, Comment
from django.contrib.auth.decorators import login_required from django.contrib.auth.decorators import login_required
from .import forms from . import forms
from .forms import *
def article_list(request): def article_list(request):
articles = Article.objects.all().order_by('date'); articles = Article.objects.all().order_by('date');
...@@ -12,8 +11,25 @@ def article_list(request): ...@@ -12,8 +11,25 @@ def article_list(request):
def article_detail(request, slug): def article_detail(request, slug):
# return HttpResponse(slug) # return HttpResponse(slug)
article = Article.objects.get(slug=slug) article = get_object_or_404(Article, slug=slug)
return render(request, 'articles/article_detail.html', { 'article': article }) comments = Comment.objects.filter(article=article)
if request.method=="POST":
comment_form = CommentForm(request.POST or None)
if comment_form.is_valid():
content = request.POST.get('content')
Comment.objects.create(article=article, user=request.user, content=content)
Comment.save()
return HttpResponseRedirect(article.get_absolute_url())
else:
comment_form= CommentForm()
context = {
'article' : article,
'comments' : comments,
#'comment_form' : comment_form,
}
return render(request, 'articles/article_detail.html', context)
@login_required(login_url="/accounts/login/") @login_required(login_url="/accounts/login/")
def article_create(request): def article_create(request):
...@@ -27,19 +43,4 @@ def article_create(request): ...@@ -27,19 +43,4 @@ def article_create(request):
return redirect('articles:list') return redirect('articles:list')
else: else:
form = forms.CreateArticle() form = forms.CreateArticle()
return render(request, 'articles/article_create.html', { 'form': form }) return render(request, 'articles/article_create.html', { 'form': form })
\ No newline at end of file
#this variable 'articles' saves all objects in Article and by .order by it sorts it by
#field date which is already an element in models.py under Article
#third parameter in this render function is the data that we want to send to the view
#or template,inside curly brackets we write a Dictionary,"articles" is the property here,whereas the articles on the right is articles on the 7th line,
#this Dictionary will be sended to the template
#so when we render line 9 we display at the output the data
#we cature that slug vairable and use it in url.py url of slug
# return HttpResponse(slug)
assets/styles.css
+ 84
− 0
View file @ 51e46ea2
...@@ -18,3 +18,87 @@ a, a:hover, a:visited{ ...@@ -18,3 +18,87 @@ a, a:hover, a:visited{
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
.wrapper{
max-width: 960px;
margin: 0 auto;
}
div.wrapper > h1{
text-align: center;
margin: 100px auto;
font-size: 2.4em
}
header{
display: grid;
grid-template-columns: 1fr 1fr;
padding: 20px 0;
}
nav{
justify-self: end;
}
nav li{
display: inline-block;
list-style-type: none;
margin-left: 20px;
}
nav button{
background: none;
color: #fff;
cursor: pointer;
border: 0;
font-size: 16px;
}
.articles{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
}
.article{
padding: 10px;
border: 1px solid #00dba0;
position: relative;
padding-bottom: 40px;
}
.article h2{
font-size: 1.2em;
}
.article .author{
padding: 10px;
background: #00dba0;
position: absolute;
right: 0;
bottom: 0;
margin: 0;
color: #0f121f;
}
.article-detail .article{
padding: 0;
}
.article-detail .article img{
max-width: 100%;
}
.article-detail .article h2{
text-align: center;
margin: 20px auto;
font-size: 2em
}
.article-detail .article h3{
text-align: center;
}
.article-detail .article p{
margin: 10px 20px
}
\ No newline at end of file
db.sqlite3
+ 0
− 0
View file @ 51e46ea2
No preview for this file type
manage.py
+ 1
− 1
View file @ 51e46ea2
...@@ -5,7 +5,7 @@ import sys ...@@ -5,7 +5,7 @@ import sys
def main(): def main():
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'djangonautic.settings') os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')
try: try:
from django.core.management import execute_from_command_line from django.core.management import execute_from_command_line
except ImportError as exc: except ImportError as exc:
......
templates/about.html
+ 10
− 71
View file @ 51e46ea2
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="UTF-8">
<meta name="viewport" content="width-device-width"> <title>About</title>
<meta name="description" content="Articles and Published Blogs"> </head>
<meta name="keywords" content="web design, fitness , meditation , professional, others"> <body>
<meta name="author" content="Saif Ali"> <h1>About us</h1>
<title>Blogs| About</title> <p1>We are Django blog developers</p1>
<link rel="stylesheet" href="./css/style.css"> </body>
</head> </html>
<body> \ No newline at end of file
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Articles</span> and Blogs</h1>
</div>
<nav>
<ul>
<li ><a href="index.html">Home</a></li>
<li class="current"><a href="About.html">About</a></li>
<li><a href="Services.html">Services</a></li
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</div>
</header>
<section id="newsletter">
<div class="container">
<h1>Subscribe to our Blogs</h1>
<form>
<input type="email" placeholder="Enter Username....">
<button type="submit" class="button_1">Subscribe</button>
</form>
</div>
</section>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet, enim tincidunt tristique lacinia, ex sapien ultrices nulla, nec rhoncus sem sapien ac risus. Sed dignissim est quis mi molestie mattis. Integer sollicitudin pellentesque lorem, id sollicitudin arcu dapibus vitae. Pellentesque sit amet dolor sed odio euismod ultrices vel in diam. Nullam euismod lectus non ex auctor pulvinar. Praesent a lorem pharetra, vestibulum lacus in, luctus diam. Mauris nibh odio, mollis in tincidunt ac, lobortis quis mi. Pellentesque vestibulum venenatis felis eu condimentum. Praesent enim nulla, eleifend sit amet mauris in, luctus aliquet dolor. Nullam vulputate mattis imperdiet. Vestibulum augue nisi, aliquet in lectus sit amet, tincidunt tempus diam. Vivamus ac magna nunc. Sed sit amet pellentesque risus. Mauris sodales in eros mattis egestas.
</p>
<p class="dark">
Pellentesque est tortor, tempus quis erat sit amet, dictum interdum arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce fermentum interdum venenatis. Etiam ac nisi libero. Suspendisse est magna, vulputate eu efficitur sit amet, ullamcorper vitae ex. Donec hendrerit eros nunc, sed vulputate leo pellentesque sed. Vestibulum rutrum bibendum lacus sit amet dictum. Proin eget lorem vel felis feugiat accumsan. Nam et lobortis velit.
</p>
</article>
<aside id="sidebar">
<div class="dark">
<h3>What We Do</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet, enim tincidunt tristique lacinia, ex sapien ultrices nulla, nec rhoncus .
</p>
</div>
</aside>
</div>
</section>
<footer>
<p>Tech-Science Blog, Copyright &copy; 2019</p>
</footer>
</body>
</html>
templates/base_layout.html
+ 32
− 158
View file @ 51e46ea2
{% load static from staticfiles %} {% load static from staticfiles %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<title>W3.CSS Template</title> <head>
<meta charset="UTF-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Djangonauts</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="{% static 'styles.css' %}">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css"> </head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <header class="wrapper">
<style> <h1><a href="{% url 'articles:list' %}"><img src="{% static 'logo.png' %}" alt="djangonautic" /></a></h1>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif;} <nav>
.w3-sidebar { <ul>
z-index: 3; {% if user.is_authenticated %}
width: 250px; <li>
top: 43px; <form class="logout-link" action="{% url 'accounts:logout' %}" method="post">
bottom: 0; {% csrf_token %}
height: inherit; <button type="submit">Logout</button>
} </form>
</style> </li>
<body> <li><a href="{% url 'articles:create' %}" class="highlight">New Article</a></li>
{% else %}
<!-- Navbar --> <li><a href="{% url 'accounts:login' %}">Login</a></li>
<div class="w3-top"> <li><a href="{% url 'accounts:signup' %}">Signup</a></li>
<div class="w3-bar w3-theme w3-top w3-left-align w3-large"> {% endif %}
<a class="w3-bar-item w3-button w3-right w3-hide-large w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)" onclick="w3_open()"><i class="fa fa-bars"></i></a> </ul>
<a href="#" class="w3-bar-item w3-button w3-theme-l1">Home</a> </nav>
<a href="about/" class="w3-bar-item w3-button w3-hide-small w3-hover-white">About</a> </header>
<a href="articles/" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Articles</a> <div class="wrapper">
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">News</a> {% block content %}
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Contact</a> {% endblock %}
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Clients</a> </div>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Partners</a> </body>
<a href="/accounts/signup" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white w3-right">Sign Up</a> </html>
<a href="accounts/login/" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white w3-right">Sign In</a> \ No newline at end of file
<a href="logout/" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white w3-right">logout</a>
</div>
</div>
<!-- Sidebar -->
<!--<nav class="w3-sidebar w3-bar-block w3-collapse w3-large w3-theme-l5 w3-animate-left" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="Close Menu">
<i class="fa fa-remove"></i>
</a>
<h4 class="w3-bar-item"><b>Menu</b></h4>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Link</a>
</nav> -->
<div class="wrapper">
{% block content %}
{% endblock %}
</div>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- Main content: shift it to the right by 250 pixels when the sidebar is visible -->
<div class="w3-main" style="margin-left:250px">
<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
<h1 class="w3-text-teal">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-third w3-container">
<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
</div>
</div>
<div class="w3-row">
<div class="w3-twothird w3-container">
<h1 class="w3-text-teal">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-third w3-container">
<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
</div>
</div>
<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
<h1 class="w3-text-teal">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-third w3-container">
<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
<a class="w3-button w3-black" href="#">1</a>
<a class="w3-button w3-hover-black" href="#">2</a>
<a class="w3-button w3-hover-black" href="#">3</a>
<a class="w3-button w3-hover-black" href="#">4</a>
<a class="w3-button w3-hover-black" href="#">5</a>
<a class="w3-button w3-hover-black" href="#">»</a>
</div>
</div>
<footer id="myFooter">
<div class="w3-container w3-theme-l2 w3-padding-32">
<h4>Footer</h4>
</div>
<div class="w3-container w3-theme-l1">
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</div>
</footer>
<!-- END MAIN -->
</div>
<script>
// Get the Sidebar
var mySidebar = document.getElementById("mySidebar");
// Get the DIV with overlay effect
var overlayBg = document.getElementById("myOverlay");
// Toggle between showing and hiding the sidebar, and add overlay effect
function w3_open() {
if (mySidebar.style.display === 'block') {
mySidebar.style.display = 'none';
overlayBg.style.display = "none";
} else {
mySidebar.style.display = 'block';
overlayBg.style.display = "block";
}
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
overlayBg.style.display = "none";
}
</script>
</body>
</html>
<!-- this serves as a base and will appear in all and every template-->
<!-- this base template will appeearr everywhere -->
<!-- 1. by this we dont have to change the source attribute,and thats a better way to load style -->
<!-- 11. if there were two detail urls is in two different apps..django knows to look in articles url -->
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment