2018-02-01 TIL WPS 19. DjangoGirls tutorial 마무리

템플릿 확장하기 (template extending)

동일한 정보나 레이아웃을 사용할 때 베이스가 되는 반복되는 정보를 재사용하기 위함

  • base.html 만들기
{% load static %}
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DjangoGirls Blog</title>
    <link rel="stylesheet" href="{% static '/bootstrap/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static '/css/blog.css' %}">
    <!--'/'로 시작하면 root folder에서 시작함-->
</head>
<body>
<div class="header">
    <div class="container">
        <h1><a href="{% url 'post-list' %}">Django Girls Blog</a></h1>
    </div>
</div>
<div class="container">
    {% block content %}
    {% endblock %}
</div>

</body>
</html>
  • post_list.html에 base.html불러오기
{% extends 'base.html' %}

{% block content %}
    {% for post in posts %}
    <div class="post">
        <p class="post-date">published: {{ post.published_date }} </p>
        <h2 class="post-title"><a href="{% url 'post-detail' pk=post.pk %}">{{ post.title }}</a></h2>
        <p class="post-content">{{ post.content|linebreaksbr|truncatewords:30 }}</p>
    </div>
    {% endfor %}
{% endblock %}

장고 폼 만들기

일단 post_add를 다음과 같이 입력한다

<form action="" method="POST">
    <div class="form-group">
    <label for="title">제목</label>
    <input type="text" name="title" class="form-control">
    </div>

    <div class="form-group">
        <label for="content">내용</label>
        <textarea name="context" id="" cols="30" rows="10" class="form-control"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">작성하기</button>
</form>

결과화면

image

  • action method

GET요청 -> 읽기 (서버의 데이터에 변화 없음)
POST요청 -> 서버의 데이터를 변화시키는 작업

  • Action에 method를 post요청으로 설정해놓고 post_add페이지에서 작성하기를 누르면 다음과 같은 화면이 뜬다.

image

{% csrf_token %}

를 action 밑에 작성해준다.

<form action="" method="POST">
	{% csrf_token %}
    <div class="form-group">
    <label for="title">제목</label>
    <input type="text" name="title" class="form-control">
    </div>

    <div class="form-group">
        <label for="content">내용</label>
        <textarea name="context" id="" cols="30" rows="10" class="form-control"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">작성하기</button>
</form>

소스를 보면 새로고침 할 때마다

image

<input type='hidden' name='csrfmiddlewaretoken' value='FzU5TvQnTooOTpmuTcLxjdIjiYizQUqwg5Vp4lsAw0e16gVJqc38yHN8Lfnuo6UA' />

이 부분이 계속 바뀌는 것을 알 수 있다.

장고가 포스트 요청을 정상적으로 간주하고 받아들임(?) 다시 설명 듣기

request.method를 view.py에서 구분하고 처리할 수 있음

    if request.method == 'POST':
        # 요청의 method가 POST일 때
        # HttpResponse로 POST요청에 담겨온
        # title과 content를 합친 문자열 데이터를 보여줌
        title = request.POST['title']
        content = request.POST['context']
        return HttpResponse(f'{title}: {content}')
    else:
        # 요청의 method가 GET일 때
        return render(request, 'blog/post_add.html')

ORM 개념 사용하기

    if request.method == 'POST':
        # 요청의 method가 POST일 때
        # HttpResponse로 POST요청에 담겨온
        # title과 content를 합친 문자열 데이터를 보여줌
        title = request.POST['title']
        content = request.POST['context']
        # ORM을 사용해서 title과 content에 해당하는 POST
        post = Post.objects.create(
            author=request.user,
            title= title,
            content= content,
        )
        return HttpResponse(f'{post.pk} {post.title} {post.content}')

redirection

  1. post_add 페이지를 보여줌 (GET)
  2. post_add 페이지에서 글 작성 (POST 요청)
  3. post_add view에서 POST요청에 대한 처리 완료 후, 브라우저에는 post-detail(pk=…)에 해당하는 주소로 redirect를 하도록 응답 (301 redirect, URL: /3)
  4. 브라우저는 301 redirect코드를 갖는 HTTP response를 받고, 해당 URL로 GET요청을 (새로만든 Post의 pk가 3일 때) 브라우저는 ‘/3’ 주소로 GET요청
  5. ‘/3’주소로 온 요청은 다시 runserver -> Django코드 -> urls.py -> blog/urls.py -> def post_detail(request, pk)로 도착, post_detail 뷰 처리가 완료된 post_detail.html의 내용을 응답 -> 브라우저는 해당 내용을 보여줌

Comments