Bienvenidos una vez más a Django desde Cero, curso en el cual aprendemos a programar sin conocimiento alguno. En el capítulo anterior, te enseñe como crear modelos de base de datos y como hacer que Django sincronice y generé las tablas por nosotros. Si eres nuevo en este curso, te recomiendo que le eches un vistazo al capítulo anterior para que te pongas en contexto (Capítulo 2)
Hoy, vamos a ver las diferentes formas de crear paginas dinámicas con la ayuda de Django.
¡Alerta!
Todos los ejemplos usados en el tutorial de son una continuación de los ejemplos del capitulo anterior.
Vistas
Una vista en Django, es una simple función en Python que toma un Web Request y retorna un respuesta web (Response). Ese response puede ser un HTML, un error 404, un documento XML, una imagen, etc.
Para crear nuestra primera vista en Django es necesario cumplir con tres requisitos:
1. Definición de la vista
Lo primero que tenemos que hacer es modificar el archivo views.py dentro de nuestro proyecto y definir una función que va a actuar como nuestra vista. Veamos como:
from django.shortcuts import render_to_response
def home(request):
return render_to_response('index.html')
Revisemos el código, primero nos encontramos con lo siguiente ‘from django.shortcuts import render_to_response’, lo que estamos haciendo es pidiendo a Django que importe un método denominado render_to_response para así facilitarnos la vida a la hora de retornar un web response. Segundo, definimos una función def home(request):, la cual va a actuar como nuestra vista principal. Si detallamos las instrucciones de esta función, podemos percatarnos que lo único que realiza es devolver o retornar un archivo o plantilla (template) denominado index.html.
2. Generar una plantilla (Template)
En el paso anterior definimos una función la cual va a retornar el HTML que nosotros le indiquemos. En nuestro caso debemos retornar un archivo o plantilla denominada index.html. Veamos como hacerlo:
Lo primero que tenemos que hacer es cumplir con el estándar de Django para manejar los templates, para eso es necesario crear dentro de nuestro directorio de la app una carpeta denominada templates.
Segundo, creamos un archivo index.html dentro de la carpeta templates con el siguiente contenido HTML:
<div class="container">
<h1>
Primer Blog
</h1>
<h2>
Titulo
</h2>
<h3>
Publicado el día por el autor
</h3>
<p>
Contenido
</p>
</div>
Observemos que el archivo solo va a contener un HTML básico para poder probar que de verdad Django esta retornando el contenido correcto.
Por último, tenemos que informarle a nuestro proyecto en donde buscar esos templates o plantillas, es por eso que vamos a modificar el archivo settings.py.
Ya que nuestras plantillas están en:
Vamos a tener que modificar la linea 105 del archivo con lo siguiente:
TEMPLATE_DIRS = ( "../blog/templates", # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates". # Always use forward slashes, even on Windows. # Don't forget to use absolute paths, not relative paths. )
3. Conectar los urls con las vistas
Para que nuestra vistas funcionen correctamente debemos conectar las urls del explorador con las vistas que queremos mostrar, es por eso que en Django los mapeos son muy importantes ya que nos permiten tener el control absoluto sobre como queremos que nuestra app se comporte. Veamos como hacerlo:
Agregamos la siguiente línea en el archivo urls.py:
url(r'^$', 'blog.views.home', name='home')
Si revisamos el código, lo único que agregamos fue url(r'^$', 'blog.views.home', name='home'), cuya función es hacer que todas las peticiones hacia la página principal de nuestro sitio, por ejemplo http://codehero.co/, se redirija al método home dentro de la app blog y vista views.home.
En el caso de tener múltiples vistas lo único que necesitaríamos hacer es redireccionar esas urls al método deseado, por ejemplo
FirstBlog.blog.views.crearArticulo. Te recomiendo la documentación sobre vistas de Django
Ahora llego el momento de probar nuestro proyecto!, para probarlo solo tenemos que correr el servidor y para eso debemos ejecutar en el terminal el siguiente comando:
python manage.py runserver
Si navegamos a la dirección http://127.0.0.1:8000 y nos retorna lo siguiente, entonces hemos configurado con éxito nuestra primera vista!
¿Cómo creamos un sitio dinámico?
La base de utilizar utilizar Django es que nos permite crear sitios dinámicos con facilidad. Veamos como crear nuestra primera vista dinámica:
Vemos primero el funcionamiento y organización que hay que darle a los archivos para que nuestro proyecto funcione como un sitio dinámico.Primero modifiquemos el archivo index.html dentro de ../blog/templates con:
<div class="container">
<h1>
Primer Blog
</h1>
<h2>
{{ titulo }}
</h2>
<h3>
Publicado el {{ dia }} por {{ autor }}
</h3>
<p>
{{ contenido }}
</p>
</div>
La manera de pasarle contenido dinámico a una plantilla o template es creando en el mismo template lo que se denomina contenedores de información. Esos contenedores van a estar entre ** {{ nombre_del_contendor }}** y van a tener un nombre clave.
Segundo, modificamos el archivo views.py para poder decirle a la función home que ahora aparte de retornar ese HTML del index.html va a pasarle un contenido dinámico en este caso, solo por prueba, se lo vamos a colocar nosotros (más adelante veremos la manera de como automatizar esos contenidos). Veamos como:
Los contenedores funcionan como un diccionario, es decir, que por cada palabra clave existe un valor asociado a ella.
from django.shortcuts import render_to_response
def home(request):
contenido = {
'titulo' : 'Mi primer gran articulo',
'autor' : 'Carlos Picca',
'dia' : '19 de Julio de 2013',
'contenido' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tempus dui, ut vulputate nisl eleifend eget. Aenean justo felis, dapibus quis vulputate at, porta et dolor. Praesent enim libero, malesuada nec vestibulum vitae, fermentum nec ligula. Etiam eget convallis turpis. Donec non sem justo.',
}
return render_to_response('index.html', contenido)
Observemos, que lo que hicimos fue crear un diccionario que contiene los contenedores que queremos que cambien en nuestro HTML y luego se lo pasamos como variable al template o plantilla.
Ahora guardemos el archivo y refresquemos el explorador. Si te aparece lo siguiente ya creamos nuestra primera vista dinámica!.
¿Cómo creamos un sitio dinámico con contenido extraído de una base de datos?
El paso final de esta tutoría es saber como extraer entradas de la base de datos y así crear un sitio completamente dinámico. Veamos como crearlo siguiendo el ejemplo del capítulo anterior en el cual creamos un modelo que soporta artículos. (Capítulo anterior).
Lo primero que tenemos que hacer es modificar nuestro archivo settings.py para hacerle saber a Django que vamos a estar utilizando nuestra app blog. Debemos agregar a ** INSTALLED_APPS** el nombre de nuestra app ‘blog’,. Veamos como:
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.staticfiles',
# Uncomment the next line to enable the admin:
# 'django.contrib.admin',
# Uncomment the next line to enable admin documentation:
# 'django.contrib.admindocs',
'blog',
)
Lo segundo es modificar la función home en nuestro archivo views.py para que podamos obtener todas las entradas de la base de datos y así desplegarlos en el HTML. Veamos como:
from django.shortcuts import render_to_response
from blog.models import Articulos
def home(request):
entradas = Articulos.objects.all()[:10]
return render_to_response('index.html', {'articulos' : entradas})
Revisemos el código, observemos que agregamos
from blog.models import Articuloslo cual nos permite hacer uso del modelo que creamos en el capítulo anterior. Además, agregamosentradas = Articulos.objects.all()[:10]dentro de la definición del home para poder extraer las primeras 10 entradas de artículos de la base de datos. Por último, modificamosrender_to_response('index.html', {'articulos' : entradas})para que cuando cree en el response sea agregado todas las entradas de la base de datos.
Por último, vamos a modificar el template o plantilla index.html para que no solo despliegue un entrada de la base de datos sino que si poseemos múltiples datos pueda mostrarlos todos. Vemos como:
<div class="container">
<h1>
Mi primer blog
</h1>
<hr />
{% for articulo in articulos %}
<div class="art">
<h2>
{{ articulo.titulo }}
</h2>
<h3>
Publicado el {{ articulo.fecha }} por {{ articulo.autor }}
</h3>
<p>
{{ articulo.texto }}
</p>
</div>
<hr />
{% endfor %}
</div>
Observemos que dado a que
articuloses un diccionario debemos extraer los valores existentes dentro de él, es por eso que utilizamos el siguiente comando{% for articulo in articulos %}. Además, ya que cada diccionario posee unas variables claves o contenedores la manera de acceder a ellas es la siguientenombre_variable.nombre_contenedoren nuestro casoarticulo.titulo.
Si corremos el servidor nuevamente y obtenemos el siguiente resultado es que creamos exitosamente un sitio dinamo en Django!.
Observemos, que aparecen varios articulos reflejados ya que mi base de datos posee varias entradas de articulos, cabe destacar que ese HTML solo desplegará cuantas entradas tengas.
Conclusión
En esta lección, aprendimos como crear paginas dinámicas con Django Si tienes alguna pregunta, yo estaré feliz de responderte en los comentarios, además espero que te unas y le eches un vistazo a todo el resto de este curso. Te espero la próxima semana!