[Django/Blog] DB에서 데이터를 가져와 템플릿에 적용
WEB

[Django/Blog] DB에서 데이터를 가져와 템플릿에 적용

 

View & Model & Template

view는 모델과 템플릿을 연결하는 역할. 일반적으로 뷰가 템플릿에서 모델을 선택하도록 만들어야함.

 

 

blog/views.py

from django.shortcuts import render
from django.utils import timezone
from .models import Post

# Create your views here.

def post_list(request):
	posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
	return render(request, 'blog/post_list.html', {'posts': posts})

- from .models import Post 로 Post 모델을 불러온다.

- 블로그 글 목록을 불러와 변수 posts에 저장. 이때 timezone 모듈을 불러와야함.

- render 함수에 매개변수를 추가. 즉 템플릿에 posts 변수를 넘겨줌.

 

 

템플릿 태그 (template tags)

HTML에 파이썬 코드를 바로 넣을 수 없기 때문에 템플릿 태그를 사용. 템플릿 태그는 파이썬을 HTML로 바꿔주어, 빠르고 쉽게 동적인 웹 사이트를 만들 수 있게 도와줌.

 

 

blog/templates/blog/post_list.html

<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <div>
            <h1><a href="">Django Girls Blog</a></h1>
        </div>
        {{ posts }}
    </body>
</html>

 

<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <div>
            <h1><a href="">Django Girls Blog</a></h1>
        </div>
        {% for post in posts %}
        	{{ post }}
        {% endfor %}
    </body>
</html>

 

<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <div>
       		<h1><a href="/">Django Girls Blog</a></h1>
	    </div>
		{% for post in posts %}
    		<div>
    	    	<p>published: {{ post.published_date }}</p>
    	    	<h1><a href="">{{ post.title }}</a></h1>
    	    	<p>{{ post.text|linebreaksbr }}</p>
    		</div>
		{% endfor %}
    </body>
</html>

 

 

 

blog/static/css/blog.css

.page-header {
    background-color: #ff9400;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

.content {
    margin-left: 40px;
}

h1, h2, h3, h4 {
    font-family: 'Lobster', cursive;
}

.date {
    color: #828282;
}

.save {
    float: right;
}

.post-form textarea, .post-form input {
    width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h1 a, .post h1 a:visited {
    color: #000000;
}

 

 

blog/templates/blog/post_list.html

{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="{% static 'css/blog.css' %}">
		<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="page-header">
       		<h1><a href="/">Django Girls Blog</a></h1>
	    </div>
	    <div class="content container">
    		<div class="row">
    		    <div class="col-md-8">
    		        {% for post in posts %}
    		            <div class="post">
    		                <div class="date">
    		                    <p>published: {{ post.published_date }}</p>
    		                </div>
    		                <h1><a href="">{{ post.title }}</a></h1>
    		                <p>{{ post.text|linebreaksbr }}</p>
    		            </div>
    		        {% endfor %}
    		    </div>
    		</div>
		</div>
    </body>
</html>

- 첫줄: 정적 파일을 로딩

 

 

참고

https://tutorial.djangogirls.org/ko/css/

 

728x90
반응형

'WEB' 카테고리의 다른 글

[Javascript] var, let, const 차이  (0) 2020.02.05
[PHP] 데이터 정제  (0) 2019.12.10
[Django/Blog] Django ORM & QuerySets  (0) 2019.12.07
[Django/Blog] View / Template  (0) 2019.12.07
[Django/Blog] URL  (0) 2019.12.07

    티스토리툴바