Usar URL dinámica dentro de la plantilla en Django
Aprenderemos, con esta explicación, cómo usar la etiqueta url en las plantillas y agregar enlaces dentro de las plantillas en Django.
Use URL dinámica dentro de la plantilla con la ayuda de la etiqueta url en Django
Comencemos por incluir un enlace dentro de nuestro archivo HTML. Debemos crear dos archivos HTML dentro de la carpeta de plantillas, que hemos hecho en nuestra aplicación Django llamada demo.
Crearemos el archivo index.html, y dentro de este archivo agregaremos una plantilla de inicio de Bootstrap, una fuente gratuita para los usuarios.
Si desea vincular a otras páginas en su aplicación, la forma más sencilla de hacerlo sería algo como esto:
<a href='/profile'>User profile</a>
Ahora, crearemos una nueva URL para la página de perfil y luego crearemos una vista llamada perfil.
from django.urls import path
from . import views
urlpatterns = [
path("", views.INDEX),
path("profile", views.PROFILE),
]
Ahora, crearemos dos vistas, INDEX y PROFILE, dentro del archivo views.py. Luego, devolveremos dos plantillas: la primera es index.html, y la otra es profile.html.
from django.shortcuts import render
def INDEX(request):
return render(request, "index.html")
def PROFILE(request):
return render(request, "profile.html")
Ahora, crearemos un archivo profile.html dentro de la carpeta de plantillas utilizando la misma plantilla inicial de Bootstrap.
Después de guardar esto y ejecutar el servidor, iremos a /profile. Veremos que si vamos al enlace que creamos, nos envía a la misma página porque nos estamos refiriendo a ella directamente usando este código <a href='/profile'>Perfil de usuario</a> dentro del archivo index.html.
Pero si cambiamos la URL de profile a myprofile dentro de urlpatterns ubicado en la aplicación demo dentro del archivo urls.py:
path("myprofile", views.PROFILE),
Después de guardarlo, cuando vamos al navegador y hacemos clic en el enlace, nos sale un Página no encontrada.
Lo primero que debe hacer es corregir el error. Podemos manejarlo usando un argumento name que pondremos dentro de la función ruta(), que se establecerá en profile.
Luego, dentro del índice, en lugar de referirnos directamente al perfil, usaremos la etiqueta url dentro de las llaves. Y en este caso, el nombre de la URL sería profile.
path("myprofile", views.PROFILE, name="profile"),
Cuando volvemos a nuestro navegador y hacemos clic en el enlace, automáticamente actualiza el punto final para nosotros.
Podemos aprovechar otra ventaja de usar variables dentro de los puntos finales para pasarlo con una barra inclinada inicial. Usaremos str porque queremos enviar un tipo de datos de cadena y agregar nuestro nombre de variable.
path("myprofile/<str:username>", views.PROFILE, name="profile")
Ahora, iremos a views.py, y dentro de la función PROFILE(), añadiremos un parámetro username. Luego, crearemos un CONTEXT, pasaremos el username como valor y pasaremos esta variable CONTEXT a la función render().
Accederemos al username escribiéndolo entre llaves dobles dentro del archivo index.html.
def PROFILE(request, username):
CONTEXT = {"username": username}
return render(request, "profile.html", CONTEXT)
Si vamos a nuestro navegador y pasamos el nombre de usuario al punto final y presionamos Enter, veremos la página de perfil con el nombre de usuario que pasamos al punto final.
Si queremos pasar el nombre de usuario a través del enlace, tendremos que ir a views y hacer lo mismo dentro de la función INDEX() que dentro de la función PROFILE(). Pasaremos el CONTEXT al archivo index.html.
def INDEX(request):
CONTEXT = {"name": "John"}
return render(request, "index.html", CONTEXT)
Ahora, le pasaremos el name a la etiqueta url, por lo que automáticamente tomará el nombre.
<a href="{% url 'profile' name %}"">User profile</a>
Buscará un lugar donde insertarlo dentro del urls.py, que está aquí <str:username>, y lo actualizará automáticamente.
Si continuamos y hacemos clic en el enlace, podemos ver que tomó el nombre que le dimos y lo envió al perfil porque sabe que el perfil puede manejar un argumento adicional.
Si tuviéramos múltiples argumentos, simplemente pondríamos un espacio allí, y podemos agregar más cosas para pasar a la etiqueta url.
Código Fuente Completo del Archivo views.py:
from django.shortcuts import render
def INDEX(request):
CONTEXT = {"name": "John"}
return render(request, "index.html", CONTEXT)
def PROFILE(request, username):
CONTEXT = {"username": username}
return render(request, "profile.html", CONTEXT)
Código Fuente Completo del Archivo index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hi user, this is home page</h1>
<a href="{% url 'profile' name %}"">User profile</a>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Código Fuente Completo del Archivo profile.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Profile Section</h1>
<p>This is a profile section of {{username}}</p>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn