> Muestra frontend básica

Animándote a que
puedas modificar el
frontend de tus htmls
Aquí cerraremos esta parte. En la próxima Este apunte se va realizando a medida que
te mostraremos lo que sería la vista de los se va probando, por lo que si te surge algún
“posts” con el html modificado, además te error, es porque pusiste algo demás o de
enseñaremos a incluir imagenes, ya que menos. Verifica bien cada cosa.
esto lleva más sintaxis y declaraciones ( {%
load static %} , {{ posts.imagen.url }} ) entre Hay cosas que pueden variar, pero otras que
otras cosas más. Además comenzaremos a no, por lo que te recomendamos que hasta
crear otras aplicaciones. tener más práctica, sigas las mismas sinta-
xis que este apunte, así puedes seguir tal
Para que puedas seguir cada paso que cual lo vas viendo aquí.
vamos dando, es muy importante que res- Además en las clases podrás incorporar
petes las sintaxis y no dejes pasar nada. otras cosas para usarlas en tu proyecto.
Revisa varias veces si te da algún error al
momento de ejecutar, porque de seguro
solo son errores de sintaxis.
> Posts.html

Mostrando el
html “post”

Pasos

Como te mencionamos en la parte ante-

rior, vamos a mostrar “posts.html” desde
el navegador. Vamos a usar el código que
tenemos cargado y eso será suficiente para
mostrar lo que hay en la base de datos.

Si lo pudiste ver, nosotros ya tenemos mo-

dificados nuestros html base con css y js
para que tenga una mejor visual, sin em-
bargo, esto no afectaría a lo que realmente
tienes que hacer como trabajo backend.
También te mencionamos que para hacer
estas modificaciones e incluir css y js, utili-
zamos Bootstrap, tanto desde la extensión
que instalamos en páginas anteriores, como
desde la página de Bootstrap (https://get-
bootstrap.com/) la cual indica la instalación
en el html base, haciendo declaraciones al
principio del html. Puedes leer los pasos y
documentación de esta página para lograr
acabados similares o mejores a la página de
prueba que te estamos mostrando.
Aclarado esto, vamos a “post.html” y an-
tes de heredar de “base.html” como ya lo
hicimos con “index”, te vamos a mostrar
como se vería la página sin hacer la he-
rencia (ya que tenemos la vista creada
y el url) accedediendo a ella mediante
http://127.0.0.1:8000/posts/
> Vista de clases

Modificando nuestra vista

basada en funciones por
una de clases

Te dejamos la captura de “posts.html” (rea- Ya que tenemos nuestra vista para “posts”
lizado en la página 45 y 46) para que pue- creada en base a funciones, ahora vamos a
das ver que con el código Python colocado hacer la misma, para en base a Clases y lo
dentro de la plantilla html podemos visuali- hacemos de la siguiente manera:
zar (accediendo mediante la url creada) los
registros “posts” de nuestra base de datos
(los que creamos con anterioridad desde el
admin de Django).
Se puede observar también, que no tiene
ningún formateo ni nada ya que no estamos
herendando de base.html ni aplicando css
ni js. y, por el momento, lo vamos a dejar así
y al terminar de explicarte esta parte, apli-
caremos la parte visual para que veas como
se vería. Ahora, a modo de ejemplo y para
que entiendas sin tanto código html de por
medio, lo dejamos así. Estas vistas hacen lo mismo (en este caso),
Lo siguiente a esto, sería poder acceder a muestran el contenido de la misma forma,
cada post de forma individual, para poder sin embargo, al usar una vista basada en
tener el contenido completo del texto, ade- clases podremos realizar ciertas modifica-
más, más adelante cuando creemos nues- ciones sobreescribiendo o llamando algu-
tros comentarios, será desde esta entrada nos atributos propios de éstas vistas, sin
individual al “post” que podremos generar a tener que escribir tanto código como en la
estos comentarios. vista basada en funciones.
Para poder acceder a un post de manera ¿Cuando usaremos vistas basadas en fun-
individual, debemos hacer referencia al ciones y cuando usaremos vistas basadas
“id” del “post”, y esto lo tenemos que hacer en clases?
desde la url, previa creación de la view para Esto será según la complejidad de las vistas
esto, por lo que vamos a ir a nuestra view del proyecto y la capacidad que tengamos
de la aplicación para extraer el id del post y de saber usar las vistas basadas en clases.
poder ingresar a él.
Sin embargo, vamos a enlazar un tema más
que son las vistas basadas en Clases.
> URL

Declarando la
url - urls.py

Te recomendamos leer en la documentación No olvides borrar la vista basada en funcio-

de Django acerca de estas vistas (https:// nes que teníamos anteriormente en “views.
docs.djangoproject.com/en/4.2/topics/ py”, ya que esta no la usaremos más.
class-based-views/) para que puedas ver
la cantidad de vistas pre-definidas que nos Guardamos todo y si lo probamos en el na-
ofrece Django para facilitarnos la escritura vegador se tiene que ver de la misma forma
de código. Pero repetimos, hay que saber que se veía antes.
que hace cada vista, para saber usarla. Ahora es momento de crear la vista para un
registro individual, es decir, para acceder
Ahora usaremos esta vista basada en clases a un post en particular, por lo que vamos
para “posts” por lo que también debemos crear una view para el mismo, pero también
definirlo en la url, por lo que vamos a diri- debemos crear un nuevo html, el cual va a
girnos a “urls.py” de nuestra aplicación y mostrar dicho post. Por lo que para comen-
cambiamos el “path” de la vista basada en zar a ordenar las plantillas que vamos a ir
funciones por la forma de llamar a una vista creando para lo que necesitemos mostrar.
basada en clases y que pueda renderizar el Entonces, vamos a crear una nueva carpe-
html. ta dentro de la carpeta templates llamada
“posts” para hacer referencia a estos.

Como puedes observar, importamos desde

“views” la vista de clase “PostListView”. En
el “path” declaramos la ruta de acceso, lue-
go la vista de clase (donde antes teníamos
la vista en base a funciones) con la función
“.as_view() y, por último, el nombre para
hacer referencia a la url.
> Accediendo a un registro

Accediendo mediante el id
a un registro en particular

Pasos Vamos a dirigirnos al views de nuestra apli-

Dentro de esta carpeta vamos a alojar el cación para crear la vista basada en clases
html para la vista del post individual y tam- para nuestro post individual. Vas a ver tam-
bién vamos a mover el archivo “posts.html” bién que debemos cambiar el acceso del
que se encuentra en “templates” hacia la template en la vista “PostListView” ya que
subcarpeta “posts” creada recientemente. cambiamos de carpeta a la plantilla “posts.
La estructura quedaría así: html”.

Como puedes observar, ahora los html

“base” e “index” quedaron en la carpeta Para crear esta vista importamos la vista
“templates” y “posts.html” y “post_indivi- que nos provee Django “DetailView”.
dual.html” (que lo creamos) quedaron en la Creamos la vista de clase “PostDetailView”
subcarpeta “posts”. Así sería la vista desde que hereda de “DetailView”, donde al atri-
el explorador de Windows: buto “model” le decimos que busque en el
modelo “Post”, al atributo “template_name”
que renderice la plantilla “posts.html”, el
atributo “pk_url_kwarg”
obtendrá el id del “post” y el atributo
“queryset” se encarga de obtener todos los
datos referidos al registro al que accedemos
mediante el id obtenido.
Lo próximo es definir la url de acceso.
Para esta vista pasamos un argumento más
que es el id obtenido y lo declaramos como
un entero.
Ahora cargaremos nuestro template “post_
individual.html” para poder mostrar un post
individual

y la vista que tendríamos desde el navega-

dor sería algo así (pusimos el id 2 para el
ejemplo)
> Accediendo a un registro

Mostrando imagenes
en el html

Pasos +static(settings.STATIC_URL, document_

Para acceder a mostrar la imagen que tiene root=settings.STATIC_ROOT)
cargada nuestro post, tendremos que usar urlpatterns += staticfiles_urlpatterns()
la siguiente declaración en template: urlpatterns += static(settings.MEDIA_URL,
{{ posts.imagen.url }} document_root=settings.MEDIA_ROOT)
Sin embargo, tenemos que realizar una mo-
dificación antes de poder usar esta llamada, que debes ponerla tal cual está, con el + en
ya que si la agregamos ahora, nos saldrá un la misma línea de código en la que termina
ícono de imagen “rota” o “no encontrada”. la declaración de las urls (línea 29 en este
La modificación que tenemos que realizar caso.
es la de declarar en nuestra “urls.py” Ahora te explicamos para que sirve esto:
principal, el siguiente código:
• La primera (29 en este caso) línea usa la
función “static” para añadir una URL que
sirve los archivos estáticos desde la ruta
definida en “settings.STATIC_URL” y que
se encuentran en el directorio definido
en “settings.STATIC_ROOT1”. Esta función
solo se debe usar en desarrollo, ya que
en producción se espera que los archivos
estáticos sean servidos por un servidor
web.
Lo primero es importar
from django.conf.urls.static import static • La segunda línea (30 en este caso) usa
y luego la función “staticfiles_urlpatterns” para
from django.contrib.staticfiles.urls import añadir las URLs que sirven los archivos
staticfiles_urlpatterns estáticos desde las aplicaciones y los di-
rectorios definidos en “settings.STATICFI-
las cuales van a servir para hacer las LES_DIRS”. Esta función es útil cuando se
declaraciones: usa el sistema de archivos estáticos de
Django, que permite recoger los archivos
estáticos de cada aplicación y de otros
lugares y colocarlos en un solo lugar que
se pueda servir fácilmente.
• La tercera línea (31 en este caso) usa de Ahora que todo está listo, ya que podemos
nuevo la función static para añadir una acceder a los posts que están en nuestra
URL que sirve los archivos multime- base de datos y además podemos acceder a
dia desde la ruta definida en “settings. un post especifico, sería momento de enla-
MEDIA_URL” y que se encuentran en el zar todo haciendo las referencias desde el
directorio definido en “settings.MEDIA_ “base.html” para que al hacer click en posts,
ROOT”. Estos archivos son los que se podamos ver el listado de posts y si luego
suben por los usuarios, como imágenes, hacemos click en un post en particular, po-
vídeos, documentos, etc. Al igual que damos ver el detalle de este.
con los archivos estáticos, esta función
solo se debe usar en desarrollo.

Ahora podemos cargar en “post_individual.

html” la etiqueta {{ posts.imagen.url }}

Y en el navegador ya podremos ver la ima-

gen del registro post al que estamos acce-
diendo:
> Enlazando referencias

Agregando las referencias

de acceso a nuestras urls

Pasos Hasta este momento del apunte tenemos

Para esto, lo primero que vamos a hacer es creado el acceso de “index” desde el “urls.
declarar el nombre de nuestra aplicación en py” principal y ahora tenemos los accesos
“urls.py” de nuestra aplicación: de la aplicación posts. A medida que va-
yamos creando más aplicaciones iremos
haciendo más accesos y se irá completando
nuestro Navbar y todos los accesos.
La forma en como se declara es básicamen-
te con la nomenclatura que venimos usan-
do. Para “index” será entonces
{% url ‘index’ %}
Hacemos esta declaración para que desde y para nuestra app posts será:
“base.hmtl” (o cualquier otro html) poda- {% url ‘apps.posts:posts %}
mos hacer referencia mediante la sintaxis donde apps se refiere a la carpeta donde
de Django a la aplicación en particular a está alojada nuestra aplicación, posts se
la que queremos acceder desde un link o refiere a la aplicación en sí, y :posts se refie-
botón para acceder y además le decimos a re a la url creada para acceder a la vista que
la url especifica que vamos a acceder de la queremos, en este caso nos da el acceso a
aplicación. Como puedes ver en este caso, los posts alojados en la base de datos.
tenemos dos urls declaradas y lo que que-
remos hacer es acceder a la url “posts” des- Ya podemos probrarlo:
de el Navbar, por lo que vamos a declarar en
nuestro Navbar:

En esta estructura base de un Navbar de-

laramos en cada “botón” las referencias de
acceso para cada plantilla en cuestión.
ingresamos a la página principal, damos A la izquierda la captura del template “post.
click en Posts: html” y a la derecha agregamos el botón:

Ya accede y se ve correctamente los posts

registrados.
Para que se aprecie mejor, hicimos herencia
del template “base.html” tal cual ya lo ha-
bíamos hecho anteriormente.
Te vamos a dejar igualmente la captura de
esto.
Pero lo que nos falta ahora para poder ac-
ceder a las noticias es darle una referencia
y esto lo podemos hacer con un botón o
simplemente asignar la referencia al título,
o subtítulo. Vamos a hacerlo con un botón.
> Muestra

Mostrando el resultado

Puedes ver que para ingresar al post espe- Si seguiste los pasos hasta aquí (siempre
cifico lo referenciamos con respetando las sintaxis empleadas, los
{% url ‘apps.posts:post_individual’ i.id %} pasos correctos y guardando siempre cada
de manera tal que, a diferencia con la refe- cambio realizado) no deberías tener proble-
rencia al listado de posts, ahora ingresamos mas y ver prácticamente como te estamos
a través del id del post. mostrando. Nosotros haremos los formatos
Agregamos algo de css (“boton_post”) para con css y js para que se vaya viendo mejor.
que puedas ver mejor la forma de un botón ¡Te invitamos a que también lo hagas! Luego
simple. te iremos mostrando que como verá nuestro
Esta sería la vista final: blog.

Ahora comenzaremos con los formularios.