Il blog sta funzionando, ma ha bisogno di una sistemata a livello di grafica ed anche a livello di “user interface“. Ad esempio, se entriamo in un post non c’è un modo per tornare alla pagina principale.
Sfrutteremo in modo pesante Bootstrap per farci aiutare in questo, aggiungendo una Sidebar laterale, il risultato finale sarà come quello dell’immagine sottostante.
Per prima cosa andiamo ad aggiungere nel file “urls.py” di progetto l’importazione di Django per permetterci di interagire con l’utente. La possiamo mettere dopo “admin/”.
path("accounts/", include("django.contrib.auth.urls")),Questo ci permette di ottenere una serie di URL prefabbricate che ci saranno utili. Nel complesso sono:
- accounts/login/ [name=’login’] accounts/logout/ [name=’logout’]
- accounts/password_change/ [name=’password_change’]
- accounts/password_change/done/ [name=’password_change_done’]
- accounts/password_reset/ [name=’password_reset’]
- accounts/password_reset/done/ [name=’password_reset_done’]
- accounts/reset/<uidb64>/<token>/ [name=’password_reset_confirm’]
- accounts/reset/done/ [name=’password_reset_complete’]
Come potete vedere saremo in grado di fornire all’utente che è registrato, tutti gli strumenti base per gestirsi l’Account. Per il momento ci limitiamo a fare Log-In e Log-Out.
Infatti, si pone un piccolo problema, nel momento in cui andremo a fare il Log-In Django ci manderà verso una pagina che non esiste, per cui in “settings.py” della cartella “miosito“, andremo ad aggiungere sul fondo del file queste due variabili:
# redirect URL after login
LOGIN_REDIRECT_URL = "/blog"
LOGOUT_REDIRECT_URL = "/blog"Tornando alla app “blog” dobbiamo aggiungere la pagina che ci permetterà di fare il login, senza necessariamente passare per “admin”. Nella cartella “templates” andiamo a creare la cartella “registration” dove andremo a creare il file “login.html” con questo contenuto.
{% extends 'container.html' %}
{% block content %}
<div>
<h2>Log In</h2>
<form class="form-control" method="post">
<div class="form-outline mb-4">
{% csrf_token %}
{{ form.as_p }}
<button class="btn btn-primary btn-block mb-4" type="submit">Log In</button>
</div>
</form>
</div>
{% endblock content %}Ora possiamo modificare il file “container.html” mettendo una Sidebar, con tutto quello che potrebbe servirci. Si tratta di HTML, con le classi di Bootstrap a cui abbiamo aggiunto i tag di Django. Da notare che abbiamo fatto un passo in più aggiungendo tag IF / ELSE che a seconda della condizione dell’utente, se è loggato o meno, mostrano due cose differenti.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock title %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0">
<main class="container flex-nowrap">
<div id="container-lg my-10">
<div class="row">
<div class="col-8">
{% block content %}
{% endblock content %}
</div>
{% block sidebar %}
<div class="col-4 pt-12">
<div class="pt-12">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px; border-radius: 8px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none keychainify-checked">
<svg class="bi pe-none me-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-brilliance" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16ZM1 8a7 7 0 0 0 7 7 3.5 3.5 0 1 0 0-7 3.5 3.5 0 1 1 0-7 7 7 0 0 0-7 7Z"/>
</svg>
<span class="fs-4">Miosito Blog</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="/blog" class="nav-link active keychainify-checked" aria-current="page">
<svg class="pe-none me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-door" viewBox="0 0 16 16">
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146ZM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5Z"/>
</svg>
Home
</a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle keychainify-checked" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://www.tosolini.info/wp-content/uploads/2021/01/favicon.png" alt="" width="32" height="32" class="rounded-circle me-2">
{% if user.is_authenticated %}
<strong>{{ user.username }}</strong>
{% else %}
<strong>Guest</strong>
{% endif %}
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
{% if user.is_authenticated %}
<li><a class="dropdown-item keychainify-checked" href="/admin">Admin</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item keychainify-checked" href="{% url 'logout' %}">Sign out</a></li>
{% else %}
<li><a href="{% url 'login' %}" class="dropdown-item keychainify-checked">Log-In</a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
{% endblock sidebar %}
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>Il risultato è decisamente meglio di quando siamo partiti. Vedremo come aggiungere qualche funzionalità nel prossimo capitolo.
