djangogirls | 5.urls, view, 템플릿(html) :: 연별의 소소한 이야기

djangogirls | 5.urls, view, 템플릿(html)

2020. 10. 29. 01:26

urls 에 admin URL 추가

URL이 입력으로 들어오면, 장고는 URL conf에서 urlpatterns을 대비함.
admin/ 으로 시작하는 모든URL을 view와 대조하여 찾아냄
모든 URL을 표현하기 위해 '정규표현식'을 사용함

#mysite/urls.py

"""mysite URL Configuration
[...]
"""

from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('admin/', admin.site.urls),
]

프로젝트의 urls 관리

프로젝트의 urls.py를 깨끗하게 관리하기 위해 앱별로 URL을 관리할 수 있음
앱의 urls를 가져오는 방법은 앱이름.urls 와 include 함수를 사용함.
include 함수를 사용하기 위해 import include 추가

#mysite/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
]

앱별 urls 관리

path 함수를 import 함
blog 앱에서 사용한 views (파일)을 import 함
post_list라는 view가 루트 URL('')에 할당됨. 즉, http://127.0.0.1:8000/ 으로 접속시 view.post_list 를 보여줌
URL의 이름(name)이 post_list 라고 이름을 붙임
URL 설정: https://docs.djangoproject.com/en/2.0/topics/http/urls/

#blog/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.post_list, name='post_list'),
]

view 의미

view는 애플리케이션의 '로직'을 넣는 곳
view의 역할 : 모델에서 필요한 정보를 받아서 ------> 템플릿에게 전달
- 콘텐츠(데이터베이스 안에 저장되어 있는 모델)을 가져와 -----> 템플릿에 넣어서 보여줌
- 모델과 템플릿을 연결하는 역할

view 기본구조

post_list 함수는 요청(request)를 받아서, render 함수(method)를 return함.
render의 의미: 1. (어떤 상태가 되게) 만들다[하다] 2. (특히 어떤 것에 대한 대가로) 주다[제공하다]
redenr 함수의 매개변수: 사용자가 요청하는 모든 것(request) 및 'blog/post_list.html' 템플릿
장고 뷰: https://docs.djangoproject.com/en/2.0/topics/http/views/

#blog/views.py

from django.shortcuts import render

def post_list(request):
    return render(request, 'blog/post_list.html', {})

쿼리셋 사용해서 view 만들기

모델(models) 파일에서 Post 모델을 import 하기
데이터베이스(Post 모델)에서 쿼리셋을 이용해서 글(객체)를 읽어오기
redenr 함수의 매개변수: 사용자가 요청하는 모든 것(request) 및 'blog/post_list.html' 템플릿
'글 목록(객체들)을 게시일 published_date기준으로 정렬하여 필터링하기'하는 쿼리셋(posts)을 만듬
posts 쿼리셋을 템플릿에 보내기 -> {'템플릿의 매개변수': 쿼리셋의 이름}
템플릿의 매개변수는 템플릿 파일(html)에서 객체 목록으로 인식함

#blog/views.py

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

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})

템플릿 기본구조

blog 내에 templates 디렉토리 만듬
templates 안에 blog 디렉토리 만듬

blog
└───templates
 └───blog
 	└───post_list.html

서브의 blog 디렉토리 안에 post_list.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>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My first post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My second post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
        </div>
    </body>
</html>

템플릿 태그 및 view가 전달한 정보 표시

view에서 전달한 객체목록 {posts} ----> 객체(post)
{{ psot.published_date }}, {{ psot.title }}, {{ psot.text }}: Post 모델에서 정의한 각 필드의 데이터에 접근하는 표기법
|linebreakbr : 행이 바뀌면 문단으로 변환하라는 의미

#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>

    {% 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>

템플릿에 css 추가

#blog/templates/blog/post_list.html

<!-- CSS 관련 중요부분-->
{% 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">
		<!-- 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>

<!-- CSS selector 관련 중요부분-->
        <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>

템플릿 확장(extending)

blog/templates/blog/에 base.html 파일을 만들기

blog
└───templates
 └───blog
 	└───post_list.html
        └───base.html

{% block content %} {% endblock %} : 탬플릿 태그 {% block %}으로 block을 만듬

<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">
            {% block content %}
            {% endblock %}
            </div>
        </div>
    </div>
</body>

탬플릿 태그 {% extends %}으로 base.html로 확장하여, block을 대체함

#blog/templates/blog/post_list.html

{% extends 'blog/base.html' %}

{% block content %}
    {% for post in posts %}
        <div class="post">
            <div class="date">
                {{ post.published_date }}
            </div>
            <h1><a href="">{{ post.title }}</a></h1>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
{% endblock %}

CSS로 꾸미기

부트스트랩 :https://getbootstrap.com/

색상 헥사코드 : https://www.colorpicker.com/
CSS 의 selector : www.w3schools.com/cssref/css_selectors.asp
정적파일(CSS, 이미지)은 앱 안에 static 디렉토리에 넣기
앱(blog)의 CSS 파일(blog.css) 만들기

 mysite
    ├── blog
    │   ├── migrations
    │   ├── static
    |	|	 └─── css
    |   |          └─── blog.css
    │   └── templates
    └── mysite

#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;
}

HTML & CSS 무료 강의 : www.codecademy.com/tracks/web

'개발 > 파이썬' 카테고리의 다른 글

djangogirls \| 7. 애플리케이션 확장 (0)	2020.10.31
djangogirls\| 6. ORM, QuerySets : 데이터베이스 연결 (0)	2020.10.29
djangogirls \| 4. 모델, 모델을 위한 테이블, admin (0)	2020.10.29
djangogirls \| 3. 블로그 만들기_프로젝트, 데이터베이스, 앱 (0)	2020.10.28
djangogirls \| 1. 설치편: 파이썬 , 가상환경, django, 에디터 (0)	2020.10.28

연별의 소소한 이야기

djangogirls | 5.urls, view, 템플릿(html)

urls 에 admin URL 추가

프로젝트의 urls 관리

앱별 urls 관리

view 의미

view 기본구조

쿼리셋 사용해서 view 만들기

템플릿 기본구조

템플릿 태그 및 view가 전달한 정보 표시

템플릿에 css 추가

템플릿 확장(extending)

CSS로 꾸미기

'개발 > 파이썬' 카테고리의 다른 글

+ Recent posts

티스토리툴바