Django


Índice

  1. Introducción
  2. Aplicaciones Web
  3. HTTP
  4. Django
  5. Rutas
  6. Plantillas
  7. Tareas
  8. Formularios
  9. Sesiones

Introducción

  • Hasta ahora, hemos hablado sobre cómo crear páginas web simples utilizando HTML y CSS, y cómo utilizar Git y GitHub para llevar un registro de los cambios en nuestro código y colaborar con otros. También nos hemos familiarizado con el lenguaje de programación Python.
  • Hoy, trabajaremos en utilizar el marco de Django de Python para crear aplicaciones dinámicas.

Aplicaciones Web

Hasta ahora, todas las aplicaciones web que hemos desarrollado han sido estáticas. Esto significa que cada vez que abrimos esa página web, se ve exactamente igual. Sin embargo, muchos sitios web que visitamos a diario cambian cada vez que los visitamos. Si visitas los sitios web deThe New York TimesoFacebook, por ejemplo, es probable que veas cosas diferentes hoy que mañana. Para sitios grandes como esos, sería poco razonable que los empleados tengan que editar manualmente un archivo HTML grande cada vez que se realice un cambio, es ahí donde las páginas web dinámicas pueden ser extremadamente útiles. Un sitio web dinámico es aquel que aprovecha un lenguaje de programación (como Python) para generar dinámicamente archivos HTML y CSS. Durante este curso, aprenderemos cómo crear nuestras primeras aplicaciones dinámicas.

HTTP

HTTP, o Protocolo de Transferencia de Hipertexto en español, es un protocolo ampliamente aceptado para la transferencia de mensajes de ida y vuelta a través de Internet. Normalmente, la información en línea se intercambia entre un cliente (usuario) y un servidor.

Ejemplo deDjango, url de la imagen: /images/client-removebg-preview.png

En este protocolo, el cliente enviará una solicitud al servidor, que podría lucir algo como el siguiente ejemplo. En el ejemplo a continuación, GET es simplemente un tipo de solicitud, uno de los tres que discutiremos en este curso. La barra diagonal(/)generalmente indica que estamos buscando la página de inicio del sitio web, y los tres puntos suspensivos(...)indican que podríamos estar pasando más información también.

Ejemplo de Django, url de la imagen: /images/request.png

Después de recibir una solicitud, un servidor enviará una respuesta HTTP, que podría verse algo así como la siguiente. Tal respuesta incluirá la versión de HTTP, un código de estado200 significa OK, una descripción del contenido y luego alguna información adicional.

Ejemplo de Django, url de la imagen: /images/response.png

El 200 es solo uno de los muchos códigos de estado, algunos de los cuales podrías haber visto en el pasado:

Ejemplo de Django, url de la imagen: /images/codes.png

Django

Djangoes un marco de trabajo web basado en Python que nos permitirá escribir código en Python que genera dinámicamente HTML y CSS. La ventaja de utilizar un marco de trabajo como Django es que ya hay mucho código escrito para nosotros que podemos aprovechar.

  • Para comenzar, tendremos que instalar Django, lo que significa que también tendrás queinstalarpip si aún no lo has hecho.
  • Una vez que tengas Pip instalado, puedes ejecutarpip3 install Djangoen tu terminal para instalar Django.

Después de instalar Django, podemos seguir los pasos para crear un nuevo proyecto de Django:

  1. django-admin startproject NOMBRE_DEL_PROYECTOEjecuta para crear una serie de archivos iniciales para nuestro proyecto.
  2. Ejecutacd NOMBRE_DEL_PROYECTOpara navegar al directorio de tu nuevo proyecto.
  3. Abre el directorio en tu editor de texto de elección. Notarás que se han creado algunos archivos para ti. No necesitaremos mirar la mayoría de ellos por ahora, pero hay tres que serán muy importantes desde el principio:
    • manage.pyes lo que usamos para ejecutar comandos en nuestro terminal. No tendremos que editarlo, pero lo usaremos con frecuencia.
    • settings.pycontiene algunas configuraciones importantes para nuestro nuevo proyecto. Hay algunas configuraciones predeterminadas, pero es posible que deseemos cambiar algunas de ellas de vez en cuando.
    • urls.pycontiene instrucciones sobre hacia dónde deben ser dirigidos los usuarios después de navegar a una determinada URL.
  4. Para comenzar el proyecto, ejecutapython manage.py runserver. Esto abrirá un servidor de desarrollo al que puedes acceder visitando la URL proporcionada. Este servidor de desarrollo se ejecuta localmente en tu máquina, lo que significa que otras personas no pueden acceder a tu sitio web. Esto te llevará a una página de inicio predeterminada.
  5. Ejemplo de Django, url de la imagen: /images/landing.png
  6. A continuación, tendremos que crear una aplicación. Los proyectos de Django se dividen en una o más aplicaciones. La mayoría de nuestros proyectos solo requerirán una aplicación, pero los sitios más grandes pueden aprovechar esta capacidad para dividir un sitio en varias aplicaciones. Para crear una aplicación, ejecutamos el comandopython manage.py startapp NOMBRE_DE_LA_APP. Esto creará algunos directorios y archivos adicionales que serán útiles en breve, incluidoviews.py.

Rutas

Ahora, para comenzar con nuestra aplicación:

  1. A continuación, navegaremos hastaviews.py. Este archivo contendrá varias vistas diferentes, y por ahora podemos pensar en una vista como una página que el usuario podría querer ver. Para crear nuestra primera vista, escribiremos una función que reciba una solicitud (request). Por ahora, simplemente devolveremos una HttpResponse (una respuesta muy simple que incluye un código de respuesta de 200 y una cadena de texto que se puede mostrar en un navegador web) que diga"Hola, Mundo". Para hacer esto, debemos incluirfrom django.http import HttpResponse. Nuestro archivo se verá así:
  2. python
    1from django.shortcuts import render
    2from django.http import HttpResponse
    3
    4# Crea tus vistas aquí.
    5
    6def index(request):
    7 return HttpResponse("Hola Neo!")
  3. Ahora, necesitamos asociar de alguna manera esta vista que acabamos de crear con una URL específica. Para hacerlo, crearemos otro archivo llamadourls.pyen el mismo directorio queviews.py. Ya tenemos un archivourls.pypara todo el proyecto, pero es mejor tener uno separado para cada aplicación individual.
  4. En mi caso yo he creado mi proyecto con el nombremysite luego cuando cree la aplicaciónpython manage.py startapp polls; en el cual mi raíz de carpetas se verá así:

    Ejemplo de imagen root, url de la imagen: /images/root_.png

    La carpeta principalmysite y sus archivos:

    
                    mysite/
                      |- manage.py
                      |- mysite/
                      |- __init__.py
                      |- settings.py
                      |- urls.py
                      |- asgi.py
                      |- wsgi.py
                      

    Estos archivos son:

    • El directorio raíz externo mysite/ es un contenedor para tu proyecto. Su nombre no importa para Django; puedes renombrarlo como desees.
    • manage.py: Una utilidad de línea de comandos que te permite interactuar con este proyecto de Django de varias maneras. Puedes leer todos los detalles sobre manage.py en django-admin y manage.py.
    • El directorio interno mysite/ es el paquete Python real para tu proyecto. Su nombre es el nombre del paquete Python que necesitarás usar para importar cualquier cosa dentro de él (por ejemplo, mysite.urls).
    • mysite/init.py: Un archivo vacío que le dice a Python que este directorio debe considerarse un paquete Python. Si eres un principiante en Python, lee más sobre paquetes en la documentación oficial dePython.
    • mysite/settings.py: Configuración para este proyecto de Django. La configuración de Django te dirá todo sobre cómo funcionan las configuraciones.
    • mysite/urls.py: Las declaraciones de URL para este proyecto de Django; una "tabla de contenidos" de tu sitio impulsado por Django. Puedes leer más sobre las URL en el despachador de URL.
    • mysite/asgi.py: Un punto de entrada para servidores web compatibles con ASGI para servir tu proyecto. Consulta Cómo implementar con ASGI para obtener más detalles.
    • mysite/wsgi.py: Un punto de entrada para servidores web compatibles con WSGI para servir tu proyecto. Consulta Cómo implementar con WSGI para obtener más detalles.

    Para crear tu aplicación, asegúrate de crearla dentro del mismo directorio que manage.py, en mi caso la voy a llamar polls:
    python manage.py startapp polls

    Nos creará un directorio polls que contendrá los siguientes archivos dentro:

    
                    polls/
                     |- __init__.py
                     |- admin.py
                     |- apps.py
                     |- migrations/
                     |- __init__.py
                     |- models.py
                     |- tests.py
                     |- views.py
                      

    Bien ya habbíamos creado nuestro archivoviews.py, ahora seguimos:

  5. Dentro de nuestro nuevourls.py, crearemos una lista de patrones de URL que un usuario podría visitar al usar nuestro sitio web. Para hacerlo:
    1. Realizaremos algunas importaciones:from django.urls import pathnos proporcionará la capacidad de redirigir URLs. from . import views importará cualquier función que hayamos creado enviews.py.
    2. Crearemos una lista llamada urlpatterns.
    3. Para cada URL deseada, agregaremos un elemento a la lista urlpatterns que contenga una llamada a la funciónpathcon dos o tres argumentos: una cadena que represente la ruta de la URL, una función deviews.pyque deseamos llamar cuando se visite esa URL y (opcionalmente) un nombre para esa ruta, en el formatoname="algo". Aquí tienes un ejemplo de cómo se vería nuestra aplicación simple ahora:
  6. python
    1from django.urls import path
    2from polls import views
    3
    4urlpatterns = [
    5 path("", views.index, name="index"),
    6]
  7. Ahora, hemos creado un urls.py para esta aplicación específica, y es hora de editar el urls.py creado para todo el proyecto. Cuando abras este archivo, deberías ver que ya existe una ruta llamada "admin", que explicaremos en otros cursos posteriores. Queremos agregar otra ruta para nuestra nueva aplicación, por lo que agregaremos un elemento a la lista de urlpatterns. Esto sigue el mismo patrón que nuestras rutas anteriores, excepto que en lugar de agregar una función deviews.py como segundo argumento, queremos poder incluir todas las rutas del archivourls.py dentro de nuestra aplicación. Para hacer esto, escribimos:
    include("NOMBRE_DE_LA_APP.urls"), donde include es una función a la que obtenemos acceso importando include desde django.urls, como se muestra en elurls.pya continuación:
  8. python
    1from django.contrib import admin
    2from django.urls import path, include
    3
    4urlpatterns = [
    5 path("polls/", include("polls.urls")),
    6 path("admin/", admin.site.urls),
    7]
  9. Al hacer esto, hemos especificado que cuando un usuario visite nuestro sitio y luego agregue /polls a la URL en la barra de búsqueda, serán redirigidos a las rutas dentro de nuestra nueva aplicación. En otras palabras, al acceder ahttp://127.0.0.1:8000/polls/, se activará la lógica de rutas definida en el archivourls.pyde tu nueva aplicación, y se dirigirá a la vista correspondiente, que en este caso es la vista que devuelve "Hola Neo". Esto permite que los usuarios accedan a esta vista específica al agregar /polls a la URL de tu sitio web.

Cuando inicias tu aplicación usando python manage.py runserver y visitas la URL proporcionada:http://127.0.0.1:8000/polls/

Más ejemplos, url de la imagen: /images/polls.png

Ahora que hemos tenido cierto éxito, repasemos lo que acaba de suceder para llegar a ese punto:

  1. Cuando accedimos a la URLlocalhost:8000/polls, Django examinó lo que venía después de la URL base(localhost:8000/)y fue al archivourls.pyde nuestro proyecto, buscando un patrón que coincidiera con "polls".
  2. Encontró esa extensión porque la definimos, y vio que cuando se encontrara con esa extensión, debía incluir nuestro archivourls.pydesde dentro de nuestra aplicación.
  3. Luego, Django ignoró las partes de la URL que ya había utilizado en la redirecciónlocalhost:8000/polls/ o todo el URLy buscó dentro de nuestro otro archivourls.pyun patrón que coincidiera con la parte restante de la URL.
  4. Descubrió que nuestra única ruta hasta el momento("")coincidía con lo que quedaba de la URL, y nos dirigió a la función de views.py asociada con esa ruta.
  5. Finalmente, Django ejecutó esa función dentro de views.py y devolvió el resultado(HttpResponse("Hola Neo!"))a nuestro navegador web.

Ahora, si lo deseamos, podemos cambiar la funciónindexdentro deviews.pypara que devuelva cualquier cosa que queramos. Incluso podríamos llevar un seguimiento de variables y realizar cálculos dentro de la función antes de devolver algo.

Ahora, veamos cómo podemos agregar más de una vista a nuestra aplicación. Podemos seguir muchos de los mismos pasos dentro de nuestra aplicación para crear páginas que saluden a Neo.

Dentro deviews.py:

python
1from django.shortcuts import render
2from django.http import HttpResponse
3
4# Creamos nuestras vistas aquí.
5
6def index(request):
7 return HttpResponse("Hello, world!")
8
9def neotecs(request):
10 return HttpResponse("Hello, Neo!")
11
12def dev(request):
13 return HttpResponse("Hello, Gabriel!")

Dentro deurls.py(sin nuestra aplicación)

python
1from django.urls import path
2from . import views
3
4urlpatterns = [
5 path("", views.index, name="index"),
6 path("neotecs", views.neotecs, name="neo"),
7 path("dev", views.dev, name="gabriel")
8]

Cuando ejecutemos el servidor, en la url si cambiamos como se muestra a continuación:

Ejemplo de Django Desarrollador, url de la imagen: /images/dev.png
Ejemplo de Django Neotecs, url de la imagen: /images/neotecs.png

Muchos sitios web utilizan parámetros en la URL para mostrar información específica. Por ejemplo, al ir ahttps://twitter.com/CalcagniGabrielse muestran todos mis tweets, y al dirigirse ahttps://github.com/solidsnk86se accede a la página de GitHub de solidSnk86. Incluso puedes encontrar tus propios repositorios públicos de GitHub navegando a www.github.com/TU_NOMBRE_DE_USUARIO.

Al pensar en cómo se implementa esto, parece imposible que sitios como GitHub y Twitter tengan una ruta de URL individual para cada usuario. Entonces, veamos cómo podríamos hacer una ruta más flexible. Comenzaremos agregando una función más general llamada"saludo"a views.py:

python
1from django.http import HttpResponse
2
3def saludo(request, name):
4 return HttpResponse(f"Hola, {name}!")

Esta función recibe no solo una solicitud (request) sino también un argumento adicional que es el nombre de un usuario, y luego devuelve una respuesta HTTP personalizada basada en ese nombre. A continuación, debemos crear una ruta más flexible en urls.py, que podría lucir algo así:

python
1from django.urls import path
2
3from . import views
4
5urlpatterns = [
6 path("<str:name>", views.saludo, name="saludo")
7]

Esta es una nueva sintaxis, pero básicamente lo que está sucediendo aquí es que ya no estamos buscando una palabra o nombre específico en la URL, sino cualquier cadena que un usuario pueda ingresar. Ahora, podemos probar el sitio con algunas otras URL:

Usuario Mario, url de la imagen: /images/mario.png

En este ejemplo he puesto un nombre con espacio y automáticamente se genera la url con%20lo que significa un espacio en blanco.

Imagen ejemplo de usuarios, url de la imagen: /images/solidsnk.png

Otra cosa que también podemos hacer es darle mayúscula a la cadena de texto, con la función de pythoncapitalizeejemplo:

python
1def saludo(request, name):
2return HttpResponse(f"Hola, {name.capitalize()}!")
Ejemplo en Django, url de la imagen: /images/capitalize.png

Esta es una excelente ilustración de cómo cualquier funcionalidad que tengamos en Python puede ser utilizada en Django antes de ser devuelta.

Plantillas

Hasta ahora, nuestras respuestas HTTP han sido solo texto, ¡pero podemos incluir cualquier elemento HTML que deseemos! Por ejemplo, podría decidir devolver un encabezado magenta en lugar de solo el texto en nuestra función de índice:

python
1def index(request):
2return HttpResponse("<h1 style=\"color:#8F41D8;\">Bienvenidos a NeoTecs!</h1>")
Style Header, url de la imagen: /images/color-header.png

Sería muy tedioso escribir una página HTML completa dentro deviews.py. También constituiría un mal diseño, ya que queremos mantener partes separadas de nuestro proyecto en archivos separados siempre que sea posible.

Es por eso que ahora vamos a introducir las plantillas de Django, que nos permitirán escribir HTML y CSS en archivos separados y renderizar esos archivos usando Django. La sintaxis que utilizaremos para renderizar una plantilla se ve así:

python
1from django.shortcuts import render
2
3def index(request):
4 return render(request, "hola/index.html")

Ahora, necesitaremos crear esa plantilla. Para hacer esto, crearemos una carpeta llamada templates dentro de nuestra aplicación, luego crearemos una carpeta llamadahola(o cualquier nombre que tenga nuestra aplicación) dentro de esa carpeta, y luego agregaremos un archivo llamadoindex.html.

Style Header en Django template, url de la imagen: /images/templates.png

Podemos agregar lo siguiente a nuestro archivoindex.html:

html
1<!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Bienvenidos a NeoTecs</title>
7 </head>
8 <style>
9 body {
10 background: #0f0f0f;
11 color: aliceblue;
12 font-family:system-ui, -apple-system, BlinkMacSystemFont,
13 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
14 'Helvetica Neue', sans-serif;
15 }
16 .container {
17 text-align: center;
18 margin: 20px auto;
19 width: fit-content;
20 border: 1px solid #444;
21 border-radius: 10px;
22 padding: 20px;
23 }
24 .list {
25 text-align: left;
26 color: #77F34E;
27 }
28 input:focus {
29 border-color: #77F34E;
30 }
31 button {
32 border: none;
33 background-color: transparent;
34 padding: 4px 8px;
35 border: 1px solid #fafafa;
36 outline: 2px solid #77F34E;
37 outline-offset: 3px;
38 color: #fafafa;
39 border-radius: 5px;
40 cursor: pointer;
41 margin-inline: 6px;
42 }
43 button:hover {
44 transform: scale(1.05);
45 background-color: blueviolet;
46 color: #000 bold;
47 filter: drop-shadow(0 0 10px #77F34E);
48 }
49</style>
50 <body>
51 <div class="container">
52 <h1>Bienvenidos a éste curso de Django</h1>
53 <p>En este archivo podemos escribir más cómodo un documento HTML.</p>
54 <ol class="list">
55 <li>
56 Es que también podemos agregar estilos CSS.
57 </li>
58 <li>
59 También podemos agregar Javascript al documento!
60 </li>
61 </ol>
62 <legend>
63 Escribe tu correo electrónico:
64 <input id="email" type="email" placeholder="Ingresa tu correo">
65 <button type="button" id="sendButton">Enviar</button>
66 </legend>
67 </div>
68 </body>
69 <script>
70 document.addEventListener('DOMContentLoaded', function () {
71 const mail = document.getElementById('email');
72 const sendButton = document.getElementById('sendButton');
73
74 sendButton.addEventListener('click', function () {
75 const inputValue = mail.value;
76 alert(`Bienvenido: ${inputValue}`);
77 });
78 });
79
80 </script>
81 </html>

Ya tenemos algo mucho más estético e interactivo conCSSyJavascript.

Imagen plantilla de ejemplo, url de la imagen: /images/template1.png
Imagen plantilla de ejemplo Django, url de la imagen: /images/template2.png

Además de escribir algunas páginas HTML estáticas, también podemos utilizar el lenguaje deplantillas de Djangopara cambiar el contenido de nuestros archivos HTML según la URL visitada. Vamos a probarlo cambiando nuestra funciónsaludode antes:

python
1from django.shortcuts import render
2
3def saludo(request, name):
4return render(request, "hola/index.html", {
5 "name": name.capitalize()
6})

Observa que pasamos un tercer argumento a la función render aquí, que se conoce como el contexto. En este contexto, podemos proporcionar información que nos gustaría tener disponible dentro de nuestros archivos HTML. Este contexto toma la forma de un diccionario de Python. Ahora, podemos crear un archivosaludo.html:

html
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <title>Hello</title>
5 </head>
6 <body>
7 <h1>Hello, {{ name }}!</h1>
8 </body>
9</html>

Te habrás dado cuenta de que hemos utilizado una sintaxis nueva: doble llaves. Esta sintaxis nos permite acceder a las variables que hemos proporcionado en el argumento de contexto. Ahora, cuando lo probamos:

Compartir

Todos los nombres de productos, logos y marcas son propiedad de sus respectivos creadores.