반응형

<detail.html 생성&연결>

1. template 추가하기 (blog/templates/blog -> detail.html)

-> home.html 똑같이 복사해서 {%for blog in blogs.all %} 지우고 확인 메세지 적음

1
<h1>디테일 페이지입니다.</h1>
cs


2. views.py 수정 (detail.html 템플릿 연결)


1
2
3
4
5
6
7
8
9
10
11
12
from django.shortcuts import render, get_object_or_404
from .models import Blog
 
def home(request):
    blogs = Blog.objects
    return render(request, 'blog/home.html', {'blogs': blogs})
 
def detail(request, blog_id):
    blog_detail = get_object_or_404(Blog, pk=blog_id)
    return render(request, 'blog/detail.html', {'blog': blog_detail})
# Create your views here.
 
cs


##get_object_or_404 : object를 가져오고 없으면 404 에러 띄워라 /모델명(대문자로 시작) + blog 게시글 id 값

   detail 함수는 request,blog_id를 함께 받아 해당 데이터 넘겨줌

   model에서 id기준으로 데이터 가져와 있으면 보여주고 없으면 404 에러

   id값은 기본적으로 django가 기본으로 만들어줌 


3. url config 만들기 -> path 추가 (project폴더 안 -> urls.py)

1
2
3
4
urlpatterns = [
    path('blog/<int:blog_id>',blog.views.detail, name='detail'),
]
 
cs


4. template 수정하기

<detail.html>

1
2
3
4
5
<div class="container jumbotron">
    <h1>{{ blog.title }}</h1>
    <p>{{ blog.pub_date }}</p>
  <p>{{ blog.body }}</p>
</div>
cs


-> 127.0.0.1:8000/blog/blog_id(int)로 접속하면 게시글에 detail로 들어가고 int값이 없으면 404에러 나온다


5. 링크 달기 

<home.html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
{% comment %} bootstrap4 CSS CDN 부분 {% endcomment %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
{% comment %} bootstrap4 js관련 CDN {% endcomment %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
      <a class="navbar-brand" href="{% url 'home'%}">Like Lion</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
          <a class="nav-item nav-link active" href="{% url 'home'%}">Home</a>
        <a class="nav-item nav-link" href="#">Blog</a>
        <a class="nav-item nav-link" href="#">수료증</a>
            </div>
    </div>
    </div>
</nav>
 
{% for blog in blogs.all %}
    <div class="container">
        <a href="{% url 'detail' blog.id %}">
            <h1>{{ blog.title }}</h1>
        </a>    
        <p>{{ blog.pub_date }}</p>
        <p>{{ blog.body }}</p>
    </div>
{% endfor %}
</body>
</html>
cs


<detail.html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
      <a class="navbar-brand" href="{% url 'home' %}">Like Lion</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
          <a class="nav-item nav-link active" href="{% url 'home' %}">Home</a>
        <a class="nav-item nav-link" href="#">Blog</a>
        <a class="nav-item nav-link" href="#">수료증</a>
            </div>
    </div>
    </div>
</nav>
 
<h1> detail 페이지 입니다 </h1>
<div class="container jumbotron">
    <h1>{{ blog.title }}</h1>
    <p>{{ blog.pub_date }}</p>
    <p>{{ blog.body }}</p>
    <a href="{% url 'home' %}">돌아가기</a>
</div>
 
</body>
</html>
cs

<블로그 본문 내용 줄여서 보여주기>


1.models.py (클래스에 정의된 body에서 100 글자만 출력)

1
2
     def summary(self):
        return self.body[:100]
cs


2.template 고치기 -> home.html -> {{blog.body}} => {{blog.summary}} ->잘린것처럼 보이니 ...more추가

1
<p>{{ blog.summary }}<a href="{% url 'detail' blog.id %}">....more</a></p>
cs


<글 작성할 수 있는 페이지 만들기>

#제목과 본문 내용을 입력받아야함

1. new.html 생성 -> home.html navbar만 복사 -> 글쓰기 링크 생성

1
<a class="nav-item nav-link" href="#">글쓰기</a>
cs


2. form 태그 이용해 글 작성할 수 있게 만들어줌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<br>
<div class="container">
    <form action="">
      <h4>제목: </h4>
      <input type="text" name="title">
      <br>
      <br>
      <h4>본문: </h4>
      <textarea cols=40 rows=10 name="body"></textarea>
      <br>
      <br>
      <input class="btn btn-dark" type="submit" value="제출하기">
  </form>
</div>
cs


3. views.py & url 설정 & template 링크 넣기 

-><views.py>

1
2
def new(request):
    return render(request, 'blog/new.html')
cs


->urls.py

1
path('blog/new/', blog.views.new, name='new'),
cs


->.html에 링크 넣어야할 부분에 

1
{% url 'new' %}
cs


<제출하기 버튼 작동하게 하기>


1. <views.py> :추가된 것

1
2
3
4
5
6
7
8
9
10
11
12
13
from django.shortcuts import render, get_object_or_404, redirect
from django.utils import timezone
 
from .models import Blog
# Create your views here.
 
def create(request):
    blog = Blog()
    blog.title = request.GET['title']
    blog.body = request.GET['body']
    blog.pub_date = timezone.datetime.now()
    blog.save()
    return redirect('/blog/' + str(blog.id))
cs


#

-blog.pub_date :입력한 시간이 자동으로 넘어감/ timezone이라는 패키지를 사용해 import

-redirect  : 요청을 처리하고 보여주는 페이지/ 

-render: '요청이 들어오면 이 html 파일을 보여줘 라는 녀석' <-> redirect: '요청을 들어오면 저쪽 url로 보내버려' 

2.url 설정

1
path('blog/create/', blog.views.create, name='create'),
cs


3. template 수정(new.html -> form 태그)

1
<form action="{% url 'create' %}">
cs




####여기까지완료하면 글쓰기 버튼까지 만들기 완료 

반응형
저작자표시 변경금지

'Web > Django' 카테고리의 다른 글

[5주차]1.로그인,회원가입  (0) 2019.03.05
[4주차]2.blog-(3)  (0) 2019.03.05
[4주차]2.blog-(1)  (0) 2019.03.04
[4주차]1.pk, path converter, get_object_or_404  (0) 2019.03.03
[3.5주차]Bootstrap  (0) 2019.03.03

+ Recent posts

티스토리툴바