Montando una web sencilla con Django

El post de esta semana es el resultado de una petición de un contacto en Linkedin donde me pedía si podía montar algún ejemplo sencillo sobre como desarrollar una web simple en Django.

Y como nada me gusta más que un reto, por sencillo que sea, le dije: «aguantame el cubata que voy«

Definiendo el proyecto

No hay nada tan complicado como limitar un proyecto a lo «mínimo imprescindible» y más aún cuando tienes que montar algo a modo de ejemplo, pero vamos allá. La idea es la siguente:

• Montar un sitio web con una página principal y otra página secundaria
• Montar un pequeño menú de navegación que permita movernos entre ambas páginas
• Darle un poco de estilos, en este caso con Bootstrap, para no andar inventando la rueda.

Vamos al lío

En primer lugar, si no lo tenemos ya hecho, hemos de instalar Django con pip, desde una terminal:

pip install Django

Instalado Django, vamos a crear nuestro proyecto

django-admin startproject web_simple

Lo cual nos creará una carpeta y el espacio de trabajo adecuado para seguir avanzando.

Ahora, dentro de la carpeta web_simple, veremos que se ha creado otra carpeta con el mismo nombre, que será la parte que gestionará el proyecto. Ahora llega el momento de crear una aplicación dentro de la raíz. Una aplicación, en Django, es un módulo (reutilizable, es una de las ventajas de Django) que ejecuta una funcionalidad concreta dentro del proyecto.

Podemos crear un modulo/app para la gestión de usuarios, para la gestión de artículos, etc. y siempre podremos llevar ese módulo a cualquier otro proyecto que estemos desarrollado. De esta manera, nos evitaremos montar una y otra vez las mismas utilidades.

Bien, en este caso, vamos a montar un módulo llamado principal, que se encargará de mostrar y gestionar las páginas de nuestro proyecto. Para ello, de nuevo en la terminal, tecleamos:

python manage.py startapp principal

Esto nos creará la estructura de carpetas y ficheros que necesitamos

Ahora llega el momento de empezar a editar los ficheros y montar nuestra web. Empezamos por abrir el fichero views.py de la aplicacion principal y lo modificamos con el siguiente código

Vemos que en este caso, se la importado la libreria render, que nos permitirá mostrar en la pantalla las paginas y se crean dos metodos (funciones) para poder cargar las plantillas de las dos pǵainas que queremos: pagina_principal.html y pagina_contacto.html. Nada más.

Seguidamente, creamos dentro de la aplicación principal, un fichero llamado urls.py, que gestionará las rutas dentro de la aplicación, con el siguiente contenido:

Aquí estamos indicando las rutas de nuestras páginas. Es decir, cuando la url esté en la raiz, irá a pagina_principal y cuando la url contenga contacto/ irá a la página de contacto. Nada más complejo que esto.

Ahora hemos de modificar el fichero urls.py que está en la raiz de nuestro proyecto, para que sea capaz de recoger las rutas de las diferentes aplicaciones, aunque en este caso solo hay una.

De esta manera, estamos incluyendo todas las urls de las aplicaciones que haya en el proyecto para que sea capaz de gestionarlas.

Ahora vamos a crear nuestras páginas para poder ver contenido.

Dentro de la carpeta principal, hemos de crear una carpeta llamada templates y dentro de esta, otra con el nombre de la aplicacion, de modo que la estructura quedará como sigue:

/ principal
 / templates
  / principal
   pagina_principal.html
   pagina_contacto.html

La estructura, aunque parezca extraña, es necesaria para que Django entienda donde estan las plantillas.

Las páginas en este caso, son absolutamente sencillas, lo justo para probar el ejemplo. Para pagina_principal.html cargamos:

Y para pagina_contacto.html, tenemos el siguiente código:

Finalmente, queda indicar en el fichero de configuración, settings.py donde están las plantillas. Esto es tan simple como abrir el fichero y hacer un par de modificaciones:

Importamos primero la libreria que nos permite acceder al sistema con import os

Y luego modificamos la ruta por defecto de las plantillas

Una vez hechas estas modificaciones, estamos en condiciones de lanzar nuestro proyecto, una vez más desde la terminal con

python manage.py runserver

Que nos mostrará una salida similar a esto

Podemos ver que hemos de acceder a nuestro proyecto a través de la url que nos indica, en este caso: http://127.0.0.1:8000/. Podemos hacer click en la url o copiar esta en el navegador, para poder ver nuestra web.

Y esto es todo, de esta forma tendremos funcionando nuestro primer proyecto web en Django. Hay que tener en cuenta que no hemos usado ningún tipo de funcionalidad ni medianamente compleja: ni bases de datos, ni variables en las vistas, etc. Simplemente html plano.

Mejorando el proyecto

Vamos ahora hacer un par de cambios en el proyecto, para que este sea más sencillo de gestionar. Vamos a crear una cabecera y un pié de página, que se verá en todos las partes de nuestra web y que nos permitirá tener una imagen homogénea sin tener que copiar lo mismo en cada página: un sistema de plantillas, en realidad.

Vamos a ello.

Será necesario crear un par de ficheros más dentro de la carpeta de las plantillas: header.html, para la cabecer y footer.html, para el pie.

Ahora, en las páginas de nuestro proyecto, haremos las llamadas correspondientes para poder cargar estos elementos a través de includes

De esta forma, podremos usar la misma cabecera y el mismo footer para todo el sitio web.

Ahora llega el momento de incluir un pequeño menú de navegación, para hacer más sencillo ir de un sitio a otro de la web.

Nada más simple que introducirlo en el header, para que esté disponible en cualquier parte de nuestra aplicación/web.

Como se puede ver, hemos incluido la llamada a las urls dentro del menú de navegación directamente, así si hacemos cualquier cambio en el fichero urls.py de la apliación, este se verá reflejado directamente en nuestra web, sin tener que tocar nada más. Con los cambios propuestos, la web queraría así:

Como podéis ver, aparece un simple menú de navegación que nos permite desplazarnos de una página a otra con un click.

Dandole estilo a la web

Como se puede observar, la web no ganaría un premio de diseño, aunque es totalmente funcional.

Vamos a darle una imagen un poco más agradable de forma muy sencilla usando Bootstrap

Para ello, vamos a hacer un par de cambios sencillos en la cabecera y el footer, para llamar a las funciones y css de Bootstrap, que nos permitiran de forma automática aplicar esos estilos.

Cargamos las librerias de Bootstrap desde el CDN y agregamos un menú de navegación simple, de los que aparecen en los ejemplo de la web de Bootstrap, en el header:

En el footer, agregamos un par de librerias JS propias, que permiten algunas funcionalidades extras, que no vamos a usar aquí, pero nos permiten tenerlas disponibles si fuera necesario:

Con estos cambios, la web cambiará totalmente de aspecto y será algo más agradable:

Algo mejor, ¿no?.

Pue eso es todo. Queda muchisimo por hacer en este proyecto: conectar a una base de datos para mantener contenidos dinámicos, usar variables en las vista, usar formularios, etc.

Pero la idea del post, era siemplemente lanzar una versión plana de una web y conocer la estructura de los ficheros que la componen. Espero que haya sido interesante y como siempre, os dejo en mi repositorio de GitHub, el código de ejemplo de este post.