Com crear aplicacions web adaptades per a mòbils amb Django Framework - Part 3
A la part 1 d'aquesta sèrie vau aprendre a instal·lar i configurar Django en un entorn virtual i vau crear l'esquelet del vostre primer projecte.
A continuació, a la part 2 vam crear una aplicació i un model per als objectes Post, que més tard vam migrar a la base de dades. Finalment, us vam mostrar com integrar la vostra aplicació de nova creació a la interfície d'usuari d'administració de Django.
Aquests articles formen part de la sèrie Django:
En aquesta guia final parlarem de com accedir a l'aplicació mitjançant la interfície d'usuari i com fer-la compatible amb els mòbils per a tot tipus de dispositius. Dit això, comencem.
Creació d'objectes mitjançant la interfície d'administració de Django
Per crear objectes del tipus Post (recordeu que és el model que vam definir a la part 2 d'aquesta sèrie), utilitzarem la interfície d'administració de Django.
Assegureu-vos que el servidor web integrat de Django s'executa al port 8000 (o un altre que trieu) executant l'ordre següent des del directori exterior myfirstdjangoproject:
# cd ~/myfirstdjangoenv/myfirstdjangoproject # python manage.py runserver 0.0.0.0:8000
Ara obriu el vostre navegador web i apunteu a http://ip-address:8000/admin, a continuació, inicieu la sessió amb les credencials que vau configurar a l'article anterior i comenceu a escriure una publicació (que, de nou, crearà un objecte del tipus Post i inserirà les dades associades a la base de dades subjacent):
Repetiu el procés 2 o 3 vegades:
Després d'haver creat un parell de publicacions, anem a veure què hem de fer per mostrar-les amb el nostre navegador web.
La nostra visió inicial
La nostra primera visualització (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) s'encarregarà de filtrar tots els objectes de publicació i de retornar aquells on el valor de whenPublished sigui inferior o igual a la data i hora actuals (whenPublished__lte=timezone.now).()) ordenat per descendència quan es publiqui, que és el mateix que dir últim primer.
Aquests objectes es guarden en una variable anomenada publicacions convenientment, i es retornen (identificats com a totes les publicacions) per ser incrustats a l'HTML, com veurem a la següent secció:
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})
Finalment, el guió baix doble a whenPublished__lte anterior s'utilitza per separar un camp de base de dades (whenPublished) d'un filtre o d'una operació (lte = menor o igual).
Un cop hem definit la nostra vista inicial, anem a treballar amb la plantilla associada.
Creeu una plantilla per al nostre primer projecte
Seguint les directrius i camins donats a la secció anterior, emmagatzemarem la nostra plantilla inicial dins myblog/templates/myblog. Això vol dir que haureu de crear un directori anomenat plantilles i un subdirectori anomenat myblog:
# cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog # mkdir -p templates/myblog
Anomenarem la plantilla posts.html i hi inserirem el codi següent. Notareu que estem afegint referències en línia a fonts jQuery, Bootstrap, FontAwesome i Google.
A més, hem inclòs codi Python entre claudàtors dins de l'HTML. Tingueu en compte que per a cada objecte del tipus Post mostrarem el seu títol, la seva data de publicació i autor, i finalment el seu text. Finalment, en vermell veureu que fem una referència als objectes retornats a través de myblog/views.py:
D'acord, aquí teniu el fitxer 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>
A la plantilla anterior, el filtre de salts de línia s'utilitza per substituir els salts de línia en text sense format per l'equivalent HTML corresponent (
A continuació, hem de configurar un mapeig entre els URL de la nostra aplicació i les vistes corresponents que retornen les dades. Per fer-ho, creeu un fitxer anomenat urls.py dins de myblog amb el contingut següent:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.posts, name='posts'),
]
El r^$ mereix una mica més d'explicació. El primer r indica a Django que tracti la cadena entre cometes simples com una expressió regular.
En particular, r^$ representa una cadena buida de manera que quan apuntem el nostre navegador a http://ip-address:8000 (i res més), les dades retornades. per les publicacions variables dins de views.py (consulteu la secció anterior) es presentaran a la nostra pàgina d'inici:
Finalment, però no menys important, inclourem el fitxer urls.py de la nostra aplicació de bloc (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) a l'urls.py del nostre projecte principal (~/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')),
]
A continuació, iniciem el servidor web:
# cd ~/myfirstdjangoenv/myfirstdjangoproject # python manage.py runserver 0.0.0.0:8000
Ara hauríem de poder veure les llistes de publicacions que hem creat anteriorment:
Gràcies a Bootstrap, encara podeu tenir una visualització excel·lent en un dispositiu més petit:
Resumint
Revisem ara els conceptes que hem tractat en aquest article i al llarg d'aquesta sèrie:
1. Cada model defineix un objecte i s'assigna a una taula de base de dades, els camps de la qual al seu torn s'assignen a les propietats d'aquest objecte. D'altra banda, una plantilla defineix la interfície d'usuari on es mostraran les dades que retorna la vista.
Suposem que volem modificar el nostre model afegint un camp anomenat resum a l'objecte Publicació, on emmagatzemarem una breu descripció opcional de cada publicació. Afegim la línia següent a myblog/models.py:
summary = models.CharField(max_length=350, blank=True, null=True)
Com hem après a l'article anterior, hem de migrar els canvis a la base de dades:
# python manage.py makemigrations myblog # python manage.py migrate myblog
A continuació, utilitzeu la interfície d'administració per editar les publicacions i afegir un breu resum a cada publicació. Finalment, substituïu la línia següent a la plantilla (posts.html):
<p>{{ post.text|linebreaks }}</p>
amb
<p>{{ post.summary }}</p>
Actualitzeu la pàgina d'inici per veure els canvis:
2. Una funció de visualització accepta una sol·licitud HTTP i retorna una resposta HTTP. En aquest article, def posts(request) a views.py fa una trucada a la base de dades subjacent per recuperar totes les publicacions. Si volem recuperar totes les publicacions amb la paraula ansible al títol, haurem de substituir.
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
amb
posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')
En separar la interfície d'usuari de la lògica de l'aplicació a les aplicacions web, Django facilita les tasques de manteniment i escalada d'aplicacions.
3. Si heu seguit les instruccions proporcionades en aquesta sèrie, l'estructura del vostre projecte hauria de ser la següent:
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
En cas que la llista anterior no es mostri correctament al vostre navegador, aquí teniu una captura de pantalla de la sortida de l'ordre següent:
# tree myfirstdjangoenv/myfirstdjangoproject
Resum
Tot i que tots aquests conceptes poden semblar una mica intimidants al principi, us puc assegurar que Django val molt la pena tots els esforços necessaris per familiaritzar-s'hi.
Espero que l'exemple que hem utilitzat en aquesta sèrie per introduir-vos en aquest marc web excepcional us motivi a aprendre més. Si és així, la documentació oficial de Django (que es manté constantment actualitzada) és el millor lloc per començar.
Us puc assegurar que a Django hi ha molt més del que podem cobrir adequadament en una sèrie d'articles, així que no dubteu a explorar-lo i aprendre fent-ho!
No dubteu a enviar-nos una nota amb preguntes o suggeriments mitjançant el formulari següent.