장고 프로젝트 초반 설정세팅 하기
- https://sanghui48.tistory.com/92 - 장고 서버 세팅하기
URL 설정하기
표지판 역할을 하는 urls.py
| 페이지 | URL | |
| 대문페이지 | 도메인/ | |
| 블로그 페이지 | 포스트 목록 | 도메인/blog/ |
| 포스트 상세 | 도메인/blog/포스트_pk | |
| 자기소개 페이지 | 도메인/about_me/ | |
포스트 목록 페이지 만들기
- 프로젝트/url.py 만들기
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('blog/', include('blog.urls')),
path('admin/', admin.site.urls),
]- blog/urls.py 생성 후 다음 내용 작성
from django.urls import path
from . import views
urlpatterns = [
]
FBV로 페이지 만들어보기
- FBV(Function based view)는 말 그대로 함수에 기반을 둔 방법. CBV(Class based view)는 장고가 제공하는 클래스를 활용해 구현하는 방법.
FBV로 포스트 목록 페이지 만들기
- blog/urls.py 내용 추가하기
from django.urls import path
from . import views
urlpatterns = [
path('', views.index),
]- blog/views.py에 index() 함수 정의하기
from django.shortcuts import render
# Create your views here.
def index(request):
return render(
request,
'blog/index.html'
)- 템플릿 파일 만들기
- blog/templates/blog/index.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Blog</title>
</head>
<body>
<h1>Blog</h1>
</body>
</html>- 페이지를 새로고침 해보면 이제 블로그 페이지가 랜더링 된다!
- 블로그 페이지에 포스트 목록 나열하기
- views.py를 개선하면 됨.
- models.py에 정의되있는 Post 모델을 임포트한다.
- blog/views.py 수정하기
from django.shortcuts import render
from .models import Post # 추가
# Create your views here.
def index(request):
posts = Post.objects.all() # 추가
return render(
request,
'blog/index.html',
# 여기부터 추가
{
'posts': posts
}
)- 이제 blog/templates/blog/index.html을 다음과 같이 수정해준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Blog</title>
</head>
<body>
<h1>Blog</h1>
<!--- 추가되는 내용 --->
{% for p in posts %}
<h3>{{p}}</h3>
{%endfor%}
</body>
</html>
- 아까 생성해놧던 블로그 글 목록이 나타난다!
- Post 모델의 필드값 보여주기
- index.html을 다음과 같이 수정해준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Blog</title>
</head>
<body>
<h1>Blog</h1>
{% for p in posts %}
<hr/>
<h2>{{p.title}}</h2>
<h4>{{p.created_at}}</h4>
<p>{{p.content}}</p>
{%endfor%}
</body>
</html>- 그러면 아래 화면 처럼 테스트 목록 등을 불러올수 있다!!!
- 최신 포스트부터 보여주기
- blog/views.py 수정
from django.shortcuts import render
from .models import Post
# Create your views here.
def index(request):
posts = Post.objects.all().order_by('-pk') # pk 역순으로 출력 최신글 부터 보여주기
return render(
request,
'blog/index.html',
{
'posts': posts
}
)
FBV로 포스트 상세 페이지 만들기
- 포스트 상세 페이지 URL 정의하기
- blog/urls.py
- /blog/숫자 형태로 오면 해당 id 값을 가지는 블로그 페이지 상세 내용으로 가겠다는 말.
from django.urls import path
from . import views
urlpatterns = [
path('<int:pk>/', view.single_post_page),
path('', views.index),
]- single_post_page() 함수 정의하기
- blog/views.py
from django.shortcuts import render
from .models import Post
# Create your views here.
def index(request):
posts = Post.objects.all().order_by('-pk') # pk 역순으로 출력 최신글 부터 보여주기
return render(
request,
'blog/index.html',
{
'posts': posts
}
)
def single_post_page(request, pk):
post = Post.objects.get(pk=pk)
return render(
request,
'blog/single_post_page.html',
{
'post': post,
}
)- URL을 이용해 쿼리를 확인해보면 다음처럼 404 TemplateDoesNotExist가 나오면 잘 된것이다. html을 아직 만들지 않았기 때문
- 템플릿 파일을 만들어준다.
- blog/templates/blog/single_post_page.html을 만든후 다음과 같이 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>{{post.title}} - Blog</title>
</head>
<body>
<nav>
<a href="/blog/">Blog</a>
</nav>
<h1>{{post.title}}</h1>
<h4>{{post.created_at}}</h4>
<p>{{post.content}}</p>
<hr />
<h3>여기 댓글이 들어올 수 있음</h3>
</body>
</html>- 그러면 다음과 같이 블로그 상세 페이지가 출력된다!
포스트 제목에 링크 만들기
- index.html 수정하기
- {{p.title}}내용을 <a>태그로 감쌀껀데 이 때 팁이 있다.
- 해당 내용을 드래그 한후 Ctrl + Shift + P 한다음 emmet이라고 치면
- 다음 처름 Emme: wrap with abbreviation이라는 걸 볼수 있다. 이걸 누른후 a라고 치면 다음처럼 바로 <a>태그로 해당 내용을 wrapping 해준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Blog</title>
</head>
<body>
<h1>Blog</h1>
{% for p in posts %}
<hr />
<a href="{{p.get_absolute_url}}">
<h2>{{p.title}}</h2>
</a>
<h4>{{p.created_at}}</h2>
<p>{{p.content}}</p>
{%endfor%}
</body>
</html>
- 위에 처럼 링크가 생기긴 하는데 아무 반응이 없다.
- get absolute_url() 함수 정의하기
- blog/models.py
from django.db import models
# Create your models here.
class Post(models.Model):
title = models.CharField(max_length=30)
content = models.TextField()
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
def __str__(self):
return f'[{self.pk}]{self.title}'
def get_absolute_url(self):
return f'/blog/{self.pk}/'- 위 함수를 정의하고 나면 이제 링크들이 정상적으로 동작한다.
대문 페이지와 자기소개 페이지 만들기
- single_pages앱을 위한 URL 지정하기
- (프로젝트명)urls.py
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('blog/', include('blog.urls')),
path('admin/', admin.site.urls),
path('', include('single_pages.urls')),
]- singles/urls.py(없으면 파일 생성)
from django.urls import path
from . import views
urlpatterns = [
path('about_me/', views.about_me),
path('', views.landing),
]- views.py에 함수 정의하기
- single_pages/views.py
from django.shortcuts import render
# Create your views here.
def landing(request):
return render(
request,
'single_pages/landing.html'
)
def about_me(request):
return render(
request,
'single_pages/about_me.html'
)- singles/templates/single_pages/landing.html, singles/templates/single_pages/about_me.html 생성하기
- landing.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>한상희입니다.</title>
</head>
<body>
<nav>
<a href="/blog/">Blog</a>
<a href="/about_me/">About me</a>
</nav>
<h1>안녕하세요. 한상희 입니다.</h1>
<h2>대문페이지</h2>
<h3>아직 만들지 않음</h3>
</body>
</html>- about_me.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>개발자 한상희입니다.</title>
</head>
<body>
<nav>
<a href="/blog/">Blog</a>
<a href="/about_me/">About me</a>
</nav>
<h1>안녕하세요. 한상희입니다.</h1>
<h2>이력</h2>
<h2>Portfolio</h2>
<h3>아직 공사중.</h3>
</body>
</html>- 각각 실행해보기
성공!
CBV로 페이지 만들기
- 보통 페이지를 만들때는 CBV방식을 많이 사용한다고 한다. 한번 만들어보자!
CBV로 포스트 목록 페이지 만들기
- ListView로 포스트 목록 페이지 만들기
- blog/views.py를 다음과 같이 다시 수정
from django.shortcuts import render
from .models import Post
from django.views.generic import ListView
# Create your views here.
def single_post_page(request, pk):
post = Post.objects.get(pk=pk)
return render(
request,
'blog/single_post_page.html',
{
'post': post,
}
)
class PostList(ListView):
model = Post
template_name = 'blog/index.html'- blog/urls.py를 다음과 같이 다시 수정
from django.urls import path
from . import views
urlpatterns = [
path('', views.PostList.as_view()),
path('<int:pk>/', views.single_post_page),
]- ListView는 모델명 뒤에 _list가 붙은 html 파일을 기본 템플릿으로 사용하도록 설정되있다고 한다. 따라서 blog/views.py를 다음과 같이 다시 수정한다.
from django.shortcuts import render
from .models import Post
from django.views.generic import ListView
# Create your views here.
def single_post_page(request, pk):
post = Post.objects.get(pk=pk)
return render(
request,
'blog/single_post_page.html',
{
'post': post,
}
)
class PostList(ListView):
model = Post
template_name = 'blog/index.html'- blog/templates/blog/index.html 수정 -> 파일명 post_list.html로 변경
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Blog</title>
</head>
<body>
<h1>Blog</h1>
{% for p in post_list %}
<hr />
<a href="{{p.get_absolute_url}}">
<h2>{{p.title}}</h2>
</a>
<h4>{{p.created_at}}</h2>
<p>{{p.content}}</p>
{%endfor%}
</body>
</html>- views.py 다시 수정
from django.shortcuts import render
from .models import Post
from django.views.generic import ListView
# Create your views here.
def single_post_page(request, pk):
post = Post.objects.get(pk=pk)
return render(
request,
'blog/single_post_page.html',
{
'post': post,
}
)
class PostList(ListView):
model = Post
CBV로 포스트 상세 페이지 만들기
- DetailView로 포스트 상세 페이지 만들기
- blog/views.py 수정
from .models import Post
from django.views.generic import ListView, DetailView
# Create your views here.
class PostList(ListView):
model = Post
ordering = '-pk'
class PostDetail(DetailView):
model = Post- blog/urls.py 수정
from django.urls import path
from . import views
urlpatterns = [
path('', views.PostList.as_view()),
path('<int:pk>/', views.PostDetail.as_view()),
]- single_post_page.html -> post_detail.html로 수정
'Programming > Django' 카테고리의 다른 글
| 테스트 주도 개발 적용해보기 (0) | 2023.03.25 |
|---|---|
| 장고(Django) 페이지 구성 개선하기 (0) | 2023.03.19 |
| 장고(Django) 정적 파일과 미디어 파일 관리하기 (0) | 2023.03.18 |
| 장고(django) 프로젝트에서 앱 만들기 (0) | 2023.03.18 |
| 장고(django) 기초 (0) | 2023.03.18 |
