Come creare applicazioni Web ottimizzate per dispositivi mobili utilizzando Django Framework - Parte 3
"Questo articolo è stato rivisto e aggiornato con l'ultima versione di Django – maggio 2016"
Nella Parte 1 di questa serie hai imparato come installare e configurare Django in un ambiente virtuale e hai creato lo scheletro del tuo primo progetto.
Quindi nella Parte 2 abbiamo creato un'applicazione e un modello per gli oggetti Post, che abbiamo successivamente migrato nel database. Infine, ti abbiamo mostrato come integrare la tua applicazione appena creata nell'interfaccia utente di amministrazione di Django.
Questi articoli fanno parte della serie Django:
Installazione e configurazione di Django Web Framework con ambienti virtuali – Parte 1
Rivedere le nozioni di base di Python e creare la tua prima applicazione Web con Django – Parte 2
In questa guida finale discuteremo come accedere all'applicazione utilizzando l'interfaccia utente e come renderla ottimizzata per tutti i tipi di dispositivi. Detto questo, cominciamo.
Creazione di oggetti tramite l'interfaccia di amministrazione di Django
Per creare oggetti di tipo Post (ricorda che è il modello che abbiamo definito nella Parte 2 di questa serie), utilizzeremo l'interfaccia di amministrazione di Django.
Assicurati che il server web integrato di Django sia in esecuzione sulla porta 8000 (o un'altra di tua scelta) eseguendo il seguente comando dalla directory myfirstdjangoproject esterna:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Ora apri il tuo browser web e punta su http://indirizzo-ip:8000/admin, quindi accedi utilizzando le credenziali che hai impostato nell'articolo precedente e inizia a scrivere un post (che, ancora una volta, creerà un oggetto di tipo Post e inserirà i dati associati nel database sottostante):
Ripeti il procedimento 2 o 3 volte:
Dopo aver creato un paio di post, vediamo cosa dobbiamo fare per visualizzarli utilizzando il nostro browser web.
La nostra visione iniziale
La nostra prima vista (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) avrà il compito di filtrare tutti gli oggetti Post e restituire quelli in cui è presente il valore di whenPublished è inferiore o uguale alla data e all'ora correnti (whenPublished__lte=timezone.now()) ordinate in ordine decrescente whenPublished, che equivale a dire " prima l'ultima“.
Questi oggetti vengono salvati in una variabile denominata convenientemente posts, e vengono restituiti (identificati come allposts) per essere incorporati nell'HTML, come vedremo nella prossima sezione:
from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
return render(request, 'myblog/posts.html', {'allposts': posts})
Infine, il doppio carattere di sottolineatura in whenPublished__lte sopra viene utilizzato per separare un campo del database (whenPublished) da un filtro o un'operazione (lte=minore di o uguale).
Una volta definita la nostra visione iniziale, lavoriamo sul template associato.
Crea modello per il nostro primo progetto
Seguendo le direttive e i percorsi indicati nella sezione precedente, memorizzeremo il nostro modello iniziale all'interno di myblog/templates/myblog. Ciò significa che dovrai creare una directory denominata templates e una sottodirectory denominata myblog:
cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog
Chiameremo il modello posts.html e inseriremo al suo interno il seguente codice. Noterai che stiamo aggiungendo riferimenti online ai caratteri jQuery, Bootstrap, FontAwesome e Google.
Inoltre, abbiamo racchiuso il codice Python tra parentesi graffe all'interno dell'HTML. Tieni presente che per ogni oggetto di tipo Post mostreremo il suo titolo, la sua data di pubblicazione e l'autore ed infine il suo testo. Infine, in rosso vedrai che facciamo riferimento agli oggetti restituiti tramite myblog/views.py:
Ok, ecco il file posts.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
<style>
.title {
font-family: 'Indie Flower', serif;
font-size: 30px;
color: #1E90FF;
}
h1 {
font-family: 'Pacifico', serif;
font-size: 45px;
color: #1E90FF;
}
</style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
<div>
<div class="title">{{ post.title }}</div>
<strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
</div>
</body>
</html>
Nel modello precedente, il filtro interruzioni di riga viene utilizzato per sostituire le interruzioni di riga nel testo semplice con l'equivalente HTML corrispondente (
Successivamente, dobbiamo impostare una mappatura tra gli URL nella nostra applicazione e le visualizzazioni corrispondenti che restituiscono i dati. Per fare ciò, crea un file denominato urls.py all'interno di myblog con il seguente contenuto:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.posts, name='posts'),
]
Il r'^$' merita qualche spiegazione in più. La r iniziale indica a Django di trattare la stringa racchiusa tra virgolette singole come un'espressione regolare.
In particolare, r'^$' rappresenta una stringa vuota in modo che quando puntiamo il nostro browser a http://indirizzo-ip:8000 (e nient'altro), il i dati restituiti dalla variabile posts all'interno di views.py (fare riferimento alla sezione precedente) saranno presentati nella nostra home page:
Ultimo ma non meno importante, includeremo il file urls.py della nostra applicazione blog (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) nel file urls.py del nostro progetto principale (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py):
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'', include('myblog.urls')),
]
Avviamo quindi il server web:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Ora dovremmo essere in grado di vedere gli elenchi dei post che abbiamo creato in precedenza:
Grazie a Bootstrap, puoi comunque avere un'eccellente visualizzazione in un dispositivo più piccolo:
Riassumendo
Esaminiamo ora i concetti che abbiamo trattato in questo articolo e in tutta questa serie:
1. Ogni modello definisce un oggetto e viene mappato a una tabella di database, i cui campi a loro volta vengono mappati alle proprietà di quell'oggetto. D'altra parte, un template definisce l'interfaccia utente in cui verranno visualizzati i dati restituiti dalla vista.
Diciamo che vogliamo modificare il nostro modello aggiungendo un campo denominato summary all'oggetto Post, dove memorizzeremo una breve descrizione facoltativa di ciascun post. Aggiungiamo la seguente riga in myblog/models.py:
summary = models.CharField(max_length=350, blank=True, null=True)
Come abbiamo appreso nell'articolo precedente, dobbiamo migrare le modifiche al database:
python manage.py makemigrations myblog
python manage.py migrate myblog
Quindi utilizza l'interfaccia di amministrazione per modificare i post e aggiungere un breve riepilogo a ciascun post. Infine, sostituisci la seguente riga nel modello (posts.html):
<p>{{ post.text|linebreaks }}</p>
con
<p>{{ post.summary }}</p>
Aggiorna la home page per vedere le modifiche:
2. Una funzione view accetta una richiesta HTTP e restituisce una risposta HTTP. In questo articolo, def posts(request) in views.py effettua una chiamata al database sottostante per recuperare tutti i post. Se vogliamo recuperare tutti i post con la parola ansible nel titolo, dovremmo sostituire.
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
con
posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')
Separando l'interfaccia utente dalla logica applicativa nelle applicazioni web, Django facilita le attività di manutenzione ed escalation delle app.
3. Se hai seguito le istruzioni fornite in questa serie, la struttura del tuo progetto dovrebbe essere la seguente:
myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│ ├── admin.py
│ ├── admin.pyc
│ ├── __init__.py
│ ├── __init__.pyc
│ ├── migrations
│ │ ├── 0001_initial.py
│ │ ├── 0001_initial.pyc
│ │ ├── __init__.py
│ │ └── __init__.pyc
│ ├── models.py
│ ├── models.pyc
│ ├── templates
│ │ └── myblog
│ │ └── posts.html
│ ├── tests.py
│ ├── urls.py
│ ├── urls.pyc
│ ├── views.py
│ └── views.pyc
└── myfirstdjangoproject
├── __init__.py
├── __init__.pyc
├── settings.py
├── settings.pyc
├── urls.py
├── urls.pyc
├── wsgi.py
└── wsgi.pyc
Nel caso in cui l'elenco precedente non venga visualizzato correttamente nel tuo browser, ecco uno screenshot dell'output del seguente comando:
tree myfirstdjangoenv/myfirstdjangoproject
Riepilogo
Anche se all'inizio tutti questi concetti possono sembrare un po' intimidatori, posso assicurarti che Django vale tutti gli sforzi necessari per conoscerlo
Spero che l'esempio che abbiamo utilizzato in questa serie per presentarti questo eccezionale framework web ti motiverà a saperne di più. Se è così, la documentazione ufficiale di Django (che viene costantemente aggiornata) è il posto migliore da cui iniziare.
Posso assicurarti che c'è molto di più in Django di quanto possiamo adeguatamente trattare in una serie di articoli, quindi sentiti libero di esplorarlo e imparare facendo!
Sentiti libero di inviarci una nota con domande o suggerimenti utilizzando il modulo sottostante.