본문 바로가기
Django

django) html 사용하여 템플릿 만들기 & 페이지 이동 후 다른 html 페이지 출력

by 빈스터디 2023. 2. 21.

0. app01 폴더 생성은 이전에 올린 앱 프로젝트 생성하기를 참고한다.

https://beenstudy2023.tistory.com/59

 

django) 앱 프로젝트 생성하기

앱 프로젝트 생성 1. app01(=앱 이름)이라는 폴더를 만든다. python .\manage.py startapp app01 *migrations/ : 파이썬 모듈로 작동하는 폴더, 데이터베이스 스키마 관련 *admin.py : 관리자가 접속하면 보이는 화면

beenstudy2023.tistory.com

 

 

1. 'templates'(=폴더명)을 만들어서 해당 폴더 밑에 abcd.html(=파일명) 파일을 만든다.

 

 

2. 해당 html에 출력하고자 하는 코드를 입력한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    안녕하세요, 감사해요, 잘 있어요, 다시 만나요
</body>
</html>

 

 

3. config 폴더 밑에 setting.py에서 디렉토리 설정

 

 

4. views.py에 위에서 작성한 html을 보여줄 수 있도록 코드 작성

from django.shortcuts import render

def func1(request):
    return render(request ,'abcd.html')

 

 

5. config 폴더 밑에 urls.py에서 위에서 만든 views 코드와 매핑되게

/test 경로를 생성한다.

 

 

6. '/test'경로의 웹 서버에 접속하면 아래와 같이 출력되는 것을 확인할 수 있다.


 

페이지 이동 후 다른 html 페이지 출력

1. 위의 main.html에 페이지를 이동시키는 버튼(= '클릭하면 이동하는 태그')을 추가한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  main입니다~~~~~~~~~~~

<a href="/send_get/">클릭하면 이동하는 태그</a>
</body>
</html>

 

 

2. 페이지를 이동했을 때 출력할 send_get.html을 새로 생성하여 안에 코드를 작성한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  send_Get입니다.
</body>
</html>

 

 

3. views.py에 위에서 작성한 html을 보여줄 수 있도록 코드 작성

from django.shortcuts import render

def func2(request):
    return render(request ,'main.html')

def send_get(request):
    return render(request ,'send_get.html')

*버튼을 출력하는 main.html

*버튼을 눌렀을 때 페이지 이동하여 보여주는 send_get.html

 

 

 

4. config 폴더 밑에 urls.py에서 위에서 만든 views 코드와 매핑되게

/send_get경로를 생성한다.

 

 

5. 웹 서버에 접속하면 뜨는 페이지는 아래와 같다.

 

먼저 main.html 페이지를 보여준다.

 

'클릭하면 이동하는 태그'라는 버튼을 클릭하면 send_get.html 페이지를 보여준다.

 

'Django' 카테고리의 다른 글

django) 장고에 mysql 연동하기  (0) 2023.02.22
django) GET, POST 실습  (0) 2023.02.21
django) 앱 프로젝트 생성하기  (0) 2023.02.21
django) 장고의 동작 방식  (0) 2023.02.21
django) 장고 설치 및 접속하기  (0) 2023.02.21