08 BlogProject (1)

Bootstrap 활용하기

vs코드 상에서 html:5 를 치면 자동완성 기능으로 html의 기본적인 골격이 나온다.

거기의 head 태그 안에 부트스트랩의 cdn을 긁어다 복사 붙여넣기를 해준다.

그리고 필요한 components 들을 입력을 한다.

우선 기본적인 블로그 게시판을 만들기 위해 navbar를 긁어 와준다.

이 코드들은 body 태그 안에 넣으면 된다.

 

모델 만들어주기

x
from django.db import models
​
class Form(models.Model):
    title = models.CharField(max_length=100)
    pub_date = models.TimeField('date published')
    content = models.TextField()
​
    def __str__(self):
        return self.title
    def summary(self):
        return self.content[:100]
    

자세한 설명은 지난번 포스팅에서 언급 했으니 생략하겠다.

새로 추가된건 summary 함수인데 자기 자신을 인자로 받아 내용을 반환하는 함수다

self.content[:100]은 파이썬 문법중 하나인데

내용을 최대 100글자만 표현을 한 다는 것이다.

 

왜 이것을 추가 했냐면 이번에 만들어 볼 블로그는 메인 페이지에서는 100글자 미만의 본문 내용을 보여주고 100글자 이상의 본문 내용을 보고 싶다면 새로운 페이지로 들어가 전체 본문을 볼 수 있는 페이지를 구현 해 볼 것이다.

그 후 데이터베이스에 알려주는 작업을 하고 admin 페이지에 등록한다

이는 모두 전부 이전 포스팅에 나와있다.

 

views.py 작성

 

xxxxxxxxxx
from django.shortcuts import render
from .models import Form
​
​
def home(request):
    form = Form.objects
    return render(request, 'home.html',{'form':form})

이전 포스팅에 다 나와있는 내용이다.

render의 3번째 인자로 사전형 객체를 받는 것이다.

 

home.html 작성

부트스트랩에서 따온 nav바 바로 밑 부분에 코드 작성을 한다.

</nav> 바로 밑에 작성을 하면 된다.

 

xxxxxxxxxx
​
      {%for i in form.all%}
      <h1>{{i.title}}</h1>
      <p>{{i.pub_date}}</p>
      <p>{{i.summary}}<a href=''>더보기</a></p>
      {%endfor%}

 

링크부분은 아직 구현을 안해주었고

아까 만들었던 i.summary 함수를 호출하여 사용한다.

이전 포스팅과 다른 점은

 

 

 

본래의 글은 더 길게 입력을 했는데 100글자만 나오는 것을 볼 수 있다.

 

pk , path-converter, get_object_or_404

pk 는 primary key의 줄임말으로 각각의 고유값을 말한다.

지정한 모델에서 여러개의 객체를 만들어 놨을 때 그 객체들을 구분 할 수 있다.

 

path-converter는 url을 계층적으로 구분 하는 것 이다.

즉 그 객체의 정보를 기준으로 새로운 페이지를 만들기 위할때 사용한다

 

get_object_or_4o4는 두개의 인자를 갖는다

get_obect_or_4o4(클래스명, pk값)

 

그 pk값의 주소가 유효한 것이면 페이지를 띄우고 주소가 유효하지 않다면 (그 페이지가 없다면)

404 페이지를 띄운다.

 

 

detail 페이지를 위한 urls.py

x
​
from django.contrib import admin
from django.urls import path
import myapp.views
​
urlpatterns = [
    path('admin/', admin.site.urls),
    path('',myapp.views.home, name='home'),
    path('blog/<int:num>/', myapp.views.detail, name = 'detail'),
]
​

url의 3번째 줄을 보자

우리는 여태까지 본문내용이 100글자 이하 인 것만 표시 할 수 있었다.

100글자 이상을 표시하기 위해 details 페이지를 만들 것 인데

만약 이 detail페이지가 10000개 라면 path를 하나하나 다 만들순 없으니

위에서 말했던 pk, path-converter를 사용해 페이지를 만들것 이다.

<int:num>을 보자

이는 pk값을 지정해 주는건데

pk값은 <변수타입 : 변수이름> 이렇게 지정을 해 준다

이렇게해서 만든 pk값을 (이름은 num으로 지정) views.py에 있는 detail 함수로 넘겨주는 것이다.

 

detail 페이지를 위한 views.py

from django.shortcuts import render, get_object_or_404
from .models import Form
def home(request):
    form =Form.objects
    return render(request,'home.html',{'form':form})
​
def detail(request, num):
    su = get_object_or_404(Form, pk = num)
    return render(request, 'detail.html',{'su':su})

get_object_or_4o4를 사용하기 위해 첫줄에 import를 해줬다

detail 함수를 보면 되는데 2개의 인자를 갖는다

request와 urls.py에서 보내준 pk 값

나는 su 라는 변수에 get_object_or_4o4 변수를 담았고

딕셔너리형으로 활용 할 수 있다.

 

home.html에 detail 링크 걸어주기

​
      {% for i in form.all %}
      <h1>{{i.title}}</h1>
      <p>{{i.pub_date}}</p>
      <p>{{i.summary}}<a href="{%url 'detail' i.id%}">자세히보기</a></p>
      <br>
      {% endfor %}

이전에 작성한 home.html에 url만 탬플릿 태그로 걸어주면 된다.

i.id 가 무엇이냐 하면 장고에서 모델을 만들 때 id값이 자동적으로 추가가 된다.

기본값으로 설정해두면 form객체가 만들어 질 때 마다(새로운 글이 써지면) 1,2,3,4,5 이런 식으로 증가 한다.

그래서 우리는 10000개의 detal.html 페이지를 만들지 않고 id값을 이용해서

detail/1번페이지

detail/2번페이지

이런식으로 띄울수 있다.

 

detail.html 작성하기

home.html 에서 코드를 다 복사 한 다음

 

​
      <h1>{{su.title}}</h1>
      <p>{{su.pub_date}}</p>
      <p>{{su.content}}</p>
      <br>
      <p><a href="{%url 'home'%}">돌아가기</a></p>

이렇게 추가해주면 된다

su 라는 것은 views.py의 detail 함수에서 받았던 변수이다.

Form 클래스의 몇번째 객체를 표현하는지 받은 변수니 이렇게 출력해주면 된다.

 

 

구현중 오류 난 것들

urls.py에 path설정을 할 때

, 를 안찍어서 오류가 났었다.

 

틀렸던 코드

x
​
from django.contrib import admin
from django.urls import path
import myapp.views
​
urlpatterns = [
    path('admin/', admin.site.urls)
    path('',myapp.views.home, name='home')
    path('blog/<int:num>/', myapp.views.detail, name = 'detail)
]
​

각각의 path선언이 끝나면 , 를 찍어 줘야 한다

 

 

또 path-converter를 설정 할 때 내 딴에선 가독성을 위해서

xxxxxxxxxx
'blog/<int: num>'

이런식으로 했었는데

num을보면 공백이 있다

주소를 설정할 땐 공백이 있으면 안된다는 오류를 겪었었다.