Veamos los siguientes pasos:
- Cada marcador podía llevar asociada una imagen, mostrémosla en el listado
- Debemos asociar una hoja de estilo a nuestras páginas
- Debemos añadir alguna forma de crear nuevos marcadores y editar los existentes
- Hay que preparar la aplicación para ser servida en un entorno "de producción", no desde el servidor de desarrollo
- Y muchas más características y mejoras, por supuesto, pero vamos poco a poco
Mostrando la imagen en el listado
Recordemos cómo era nuestro modelo de datos (models.py):
from django.db import models
class Marcador(models.Model):
titulo = models.CharField(max_length=200)
url = models.CharField(max_length=500)
descripcion = models.CharField(max_length=500)
image = models.ImageField(upload_to='savebookmarks')
def __str__(self):
return self.titulo + ' (' + self.url + ')'
Al definir el atributo imagen especificamos la ruta donde se subirán las imágenes, es relativa al parámetro MEDIA_ROOT de settings.py
Si hemos creado unos cuantos objetos desde el "/admin", podremos mostrar su imagen en el listado. Para ello, en desarrollo, definiremos en settings.py una ruta más para ser servida como recurso estático. Esto "en producción" habrá que cambiarlo, pero por ahora seguimos con ello así:
En settings.py
STATIC_URL = '/static/'
MEDIA_ROOT = BASE_DIR + '/media'
STATICFILES_DIRS = (BASE_DIR + '/savebookmarks', MEDIA_ROOT)
STATIC se refiere a cómo se sirven recursos estáticos (hojas de estilo, JS, iconos, etc). MEDIA_ se refiere a cómo se sirven ficheros subidos por los usuarios. Por seguridad, en producción, separaremos totalmente ambos tipos de recursos. En desarrollo, los servimos igualmente con la app 'django.contrib.staticfiles' mediante la definición STATICFILES_DIRS.
En la template, incorporamos la imagen (marcador_list.html):
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'savebookmarks/estilo.css' %}" />
<h2>Marcadores</h2>
<ul>
{% for m in object_list %}
<li>
<img src="{% static m.image %}" width="40" />
<a target="_blank" href="{{m.url}}">{{ m.titulo }}</a>
| (<a href="{% url "editMarcador" m.id %}">Editar</a>)
</li>
{% endfor %}
</ul>
<p><a href="{% url "addMarcador" %}">Añadir otro</a></p>El tag {% static %} es atendido por la app 'django.contrib.staticfiles' y nos proporciona la URL relativa para ser servida por el servidor de desarrollo. En producción habrá que revisar esto. El resto de código lo revisaremos a continuación.
Enlazando una hoja de estilos
Como definimos en settings.py un
STATIC_URL = '/static/'
ahora podemos poner bajo esta URL nuestras hojas de estilo. El árbol de directorios del proyecto se va pareciendo a la figura.
La app 'django.contrib.staticfiles' encontrará los ficheros bajo static/ y los servirá adecuadamente.
Para enlazar estos ficheros, usamos el tag {% static %}, como se ha mostrado en la template.
En el paso a producción lo que se hace es utilizar un servidor web independiente para servir los recursos, en la documentación de Django se explica cómo hacerlo, por ahora mantenemos esta configuración en desarrollo.
Crear y editar marcadores
En este punto, utilizaremos el sistema de formularios de Django, que está muy bien pensado.
