Django의 템플릿 내에서 동적 URL 사용
이 설명을 통해 템플릿에서 url 태그를 사용하고 Django에서 템플릿 내부에 링크를 추가하는 방법을 배웁니다.
Django의 url 태그를 사용하여 템플릿 내부의 동적 URL 사용
HTML 파일 내부에 링크를 포함하는 것으로 시작하겠습니다. demo라는 Django 앱에서 만든 템플릿 폴더 안에 두 개의 HTML 파일을 만들어야 합니다.
index.html 파일을 만들고 이 파일 안에 사용자를 위한 무료 소스인 Bootstrap 시작 템플릿을 추가합니다.
앱의 다른 페이지로 연결하려는 경우 가장 간단한 방법은 다음과 같습니다.
<a href='/profile'>User profile</a>
이제 프로필 페이지에 대한 새 URL을 만든 다음 profile이라는 보기를 만듭니다.
from django.urls import path
from . import views
urlpatterns = [
path("", views.INDEX),
path("profile", views.PROFILE),
]
이제 view.py 파일 안에 INDEX와 PROFILE 두 개의 보기를 생성합니다. 그런 다음 두 개의 템플릿을 반환합니다. 첫 번째 템플릿은 index.html이고 다른 템플릿은 profile.html입니다.
from django.shortcuts import render
def INDEX(request):
return render(request, "index.html")
def PROFILE(request):
return render(request, "profile.html")
이제 동일한 부트스트랩 시작 템플릿을 사용하여 템플릿 폴더 안에 profile.html 파일을 생성합니다.
이것을 저장하고 서버를 실행한 후 /profile로 이동합니다. 우리가 만든 링크로 이동하면 index.html 파일 <a href='/profile'>User profile</a>를 사용하여 직접 참조합니다.
그러나 urls.py 파일 안의 demo 앱에 있는 urlpatterns 안의 URL을 profile에서 myprofile로 변경하면:
path("myprofile", views.PROFILE),
저장한 후 브라우저로 이동하여 링크를 클릭하면 페이지를 찾을 수 없음이 표시됩니다.
가장 먼저 할 일은 오류를 수정하는 것입니다. path() 함수 안에 넣을 name 인수를 사용하여 처리할 수 있으며 profile로 설정됩니다.
그런 다음 인덱스 내부에서 profile을 직접 참조하는 대신 중괄호 안에 url 태그를 사용합니다. 그리고 이 경우 URL의 이름은 profile이 됩니다.
path("myprofile", views.PROFILE, name="profile"),
브라우저로 돌아가서 링크를 클릭하면 자동으로 엔드포인트가 업데이트됩니다.
끝점 내에서 변수를 사용하여 선행 슬래시를 사용하여 전달하는 또 다른 이점을 얻을 수 있습니다. 문자열 데이터 유형을 보내고 변수 이름을 추가하고 싶기 때문에 str을 사용합니다.
path("myprofile/<str:username>", views.PROFILE, name="profile")
이제 view.py로 이동하고 PROFILE() 함수 내부에 username 매개변수를 추가합니다. 그런 다음 CONTEXT를 만들고 username을 값으로 전달하고 이 CONTEXT 변수를 render() 함수에 전달합니다.
index.html 파일 내부의 이중 중괄호 안에 작성하여 username에 액세스합니다.
def PROFILE(request, username):
CONTEXT = {"username": username}
return render(request, "profile.html", CONTEXT)
브라우저로 이동하여 사용자 이름을 엔드포인트에 전달하고 Enter 키를 누르면 엔드포인트에 전달한 사용자 이름이 포함된 프로필 페이지가 표시됩니다.
링크를 통해 사용자 이름을 전달하려면 views로 이동하여 PROFILE() 함수 내에서 했던 것처럼 INDEX() 함수 내에서 동일한 작업을 수행해야 합니다. CONTEXT를 index.html 파일에 전달합니다.
def INDEX(request):
CONTEXT = {"name": "John"}
return render(request, "index.html", CONTEXT)
이제 name을 url 태그에 전달하여 자동으로 이름을 가져옵니다.
<a href="{% url 'profile' name %}"">User profile</a>
여기 <str:username>에 있는 urls.py 안에 삽입할 수 있는 위치를 찾고 자동으로 업데이트합니다.
계속해서 링크를 클릭하면 프로필이 추가 인수를 처리할 수 있다는 것을 알고 있기 때문에 우리가 지정한 이름을 프로필로 보낸 것을 볼 수 있습니다.
인수가 여러 개인 경우 공백을 넣고 url 태그에 전달할 항목을 더 추가할 수 있습니다.
view.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)
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>
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