Arrivati a questo punto cerchiamo di unire l’utile al dilettevole, visto che dobbiamo affrontare il capitolo delle Forms. Un esempio che potrebbe venire utile è quello di poter accettare i commenti ai Post.
Come sempre, cosa ci serve?
- Il nome di chi scrive il commento;
- La sua E-mail per eventuali sviluppi sulle notifiche;
- Il campo del commento;
- stato attivo o in bozza;
- La data di invio;
- La data di un eventuale aggiornamento;
- Chiave primaria;
- ID Post collegato.
Va detto che nei progetti MVC, ma potremo estendere a qualunque progetto, è bene inserire oltre all’ID (chiave primaria) la data di creazione e aggiornamento, e dove possibile l’utente che compie l’azione. Questo per ogni modello come regola base, anche se non le usiamo.
È necessario creare una nuova tabella, poiché se usiamo Post andiamo a mischiare due oggetti che in realtà devono essere relazionati. Come la volta precedente, andiamo ad aggiungere nel file “models.py“.
class Comment(models.Model):
id = models.BigAutoField(primary_key=True)
post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='comments')
name = models.CharField(max_length=100)
email = models.EmailField()
body = models.TextField()
status = models.BooleanField(default=True)
created = models.DateTimeField(auto_now_add=True)
updated = models.DateTimeField(auto_now=True)
class Meta:
ordering = ('created',)
def __str__(self):
returnIl codice mostra post come campo “foreignkey” ovvero va a pescare l’ID del post a cui il commento va collegato. Se il Post verrà cancellato, anche il commento subirà la stessa sorte poiché di fatto inutile. Tra gli altri campi è comparso quello relativo della e-mail, che ha una sua particolarità intrinseca per le form.
Come abbiamo già fatto in precedenza andiamo ad effettuare una migration per impostare il database:
(miosito) tosolini@MacBook-Pro-di-Walter miosito % python manage.py makemigrations blog
Migrations for 'blog':
blog/migrations/0002_alter_post_managers_comment.py
- Create model Comment
(miosito) tosolini@MacBook-Pro-di-Walter miosito % python manage.py migrate
Operations to perform:
Apply all migrations: admin, auth, blog, contenttypes, sessions
Running migrations:
Applying blog.0002_alter_post_managers_comment... OKAnche nel caso di Admin andiamo ad aggiungere i campi necessari affinché la tabella “Comment” sia visibile in http://127.0.0.1/admin . Modifichiamo il file “admin.py” come segue (esempio del file completo)
from django.contrib import admin
from .models import Post, Comment
@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
list_display = ('id','title', 'slug', 'author', 'publish', 'status')
list_filter = ('status', 'created', 'publish', 'author')
search_fields = ('title', 'body')
prepopulated_fields = {'slug': ('title',)}
raw_id_fields = ('author',)
date_hierarchy = ('publish')
ordering = ('status', 'publish')
@admin.register(Comment)
class CommentAdmin(admin.ModelAdmin):
list_display = ('name', 'email', 'post', 'created', 'status')
list_filter = ('status', 'created', 'updated')
search_fields = ('name', 'email', 'body')Creiamo la Form
Giunti a questo punto abbiamo il necessario per creare la Form lato pubblico. I commenti hanno due maschere, una è relativa alla immissione del dato e l’altra alla sua visualizzazione sotto il post.
Pertanto, non metteremo il codice della Form dentro “view” ma andiamo a creare un nuovo file, sotto la cartella “blog”, che si chiamerà “forms.py“.
from django import forms
from .models import Comment
class CommentForm(forms.ModelForm):
# make-up function for insert bootstrap form-control
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
for field in self.fields.values():
field.widget.attrs['class'] = 'form-control'
class Meta:
model = Comment
fields = ('name', 'email', 'body')Il codice è molto semplificato, abbiamo infatti usato “ModelForm” che permette di “pescare” dal modello Comment i campi che intendiamo proporre nella maschera di immissione. Avremo potuto usare “Form” anziché “ModelForm” ma in quel caso i campi dovevano essere esplicitati uno ad uno, con le sue caratteristiche (testo, numerico eccetera).
La funzione “__init__” serve per “inoculare” la classe “form-control” di Bootstrap, altrimenti la form risultava visivamente brutta. Quindi se non vi serve la potete ignorare.
Il passaggio successivo è quello di aggiungere il tutto alla view, ma in questo caso il commento è relativo a “post_detail” che non dispone di una vista sua; quindi, dobbiamo integrarlo dentro una classe esistente.
In breve, dobbiamo importare “CommentForm” e dentro “post_detail” importare l’eventuale commento scritto in precedenza. Nel caso di un nuovo commento (metodo POST) utilizziamo una variabile vuota creata in precedenza, dove andremo prima a salvare in memoria i dati immessi, poi legare il tutto al Post e quindi salvare sul database. Per evitare confusione metto qui sotto il file “view.py” per intero.
from django.shortcuts import render, get_object_or_404
from .models import Post
from .forms import CommentForm
# Create your views here.
def post_list(request):
posts = Post.published.all()
return render(request, 'blog/post/list.html', {'posts': posts})
def post_detail(request, year, month, day, post):
post = get_object_or_404(Post,
slug=post,
status='published',
publish__year=year,
publish__month=month,
publish__day=day)
# comment section
comments = post.comments.filter(status=True)
write_comment = None
if request.method == 'POST':
comment_form = CommentForm(data=request.POST)
if comment_form.is_valid():
# write comment in draft (no db saving now)
write_comment = comment_form.save(commit=False)
# link this comment to this post
write_comment.post = post
# finally save the comment to db
write_comment.save()
else:
comment_form = CommentForm()
return render(request,'blog/post/post.html',{
'post': post,
'comments': comments,
'write_comments': write_comment,
'comment_form': comment_form})Pongo l’accento sulla riga 22 dove ho utilizzato il metodo is_valid() che ritorna un booleano nel caso i campi siano coerenti dal punto di vista dichiarativo, ad esempio un campo numerico non può contenere testo.
Infine, dobbiamo andare a modificare il template HTML5 post
{% extends 'container.html' %}
{% block title %} {{ post.title }} {% endblock title %}
{% block content %}
<div class="row row-cols-1 p-2">
<div class="col">
<div class="card">
<div class="card-header">
{{ post.title }}
</div>
<div class="card-body">
{{ post.body|linebreaks }}
</div>
<div class="card-footer">
Published {{ post.publish }} by {{ post.author }}
</div>
</div>
<br/>
<div class="card">
<div class="card-header text-bg-primary">
{% with comments.count as totalcomments %}
{{ totalcomments }} comment
{% endwith %}
</div>
<div class="card-body">
{% for comment in comments %}
<div class="comment">
<p class="info">
Comment {{ foorloop.counter }} by {{ comment.name }}
{{ comment.created }}
</p>
{{ comment.body|linebreaks}}
</div>
{% empty %}
<p>Non ci sono ancora commenti</p>
{% endfor %}
{% if write_comment %}
<h3>il tuo commento è stato inserito</h3>
{% else %}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Premi qui per commentare
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title fs-5" id="exampleModalLabel">Aggiungi un commento</h3>
</div>
<form class="form-control" method="POST">
<div class="modal-body">
{{ comment_form.as_p }}
{% csrf_token %}
</div>
<div class="modal-footer">
<button type="button" class="form-control btn btn-secondary" data-bs-dismiss="modal">Close</button>
<input class="form-control" type="submit" value="Commenta">
</div>
</form>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock content %}
Il risultato comincia ad essere decente, utilizzando le card e il modal di Bootstrap. Alcune immagini di seguito.
Siamo arrivati alla conclusione del capitolo, vedremo nei successivi come migliorare ulteriormente la nostra piccola app.
