Python/Django

BootStrap적용

yunajoe 2022. 10. 8. 15:23

requirements.txt를 만들자 

requirements.txt란?!

- pip라는 파이썬 package 매니저가 라이브러리 설치 시에 이 파일을 참조

- 라이브러리 의존성을 정리

 

 

# requirements.txt 

django~=4.0.0
django-bootstrap5
INSTALLED_APPS = [
    # django apps
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    # thrid apps
    "django_bootstrap5",
    # local apps
    "app",
    "catube",
]

bootstap 템플릿을 적용시켜보자

{% load django_bootstrap5 %}


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>오늘도화이팅</title>
    {% bootstrap_css %}
    {% bootstrap_javascript%}
</head>
<body>
    <h1>Django 입문</h1>
    {% block content %}
    {% endblock %}
    <hr />
    &copy; 2022. 오늘도 화이팅   

</body>
</html>

base.html의 소스코드 확인해보기 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>오늘도화이팅</title>
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <h1>Django 입문</h1>   
     
        <div>
            <a href="/app/1/">
                1 : 좋은아침
            </a>
        </div>
    
        <div>
            <a href="/app/2/">
                2 : 좋은저녁
            </a>
        </div>
    

    <hr />
    &copy; 2022. 오늘도 화이팅  

</body>
</html>

 

bootstrap template으로 인해 글자형태가 살짝 바뀐것을 확인할 수 있다

 

 

forms.py 를 만들어보자 

 

PostForm의 역할?!
- Form HTML 문자열을 렌더링

- HTML Form을 통해 저장을 시도하는 값에 대한 유효성 검사


class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = "__all__"


유효성 검사를 수행하는 스펙은 어디에?!
- Post 모델에 정의된 대로 검사 
- 여기에 검사할 스텍을 더 추가할 수 도 있음

 

views.py 

from django.http import HttpRequest, HttpResponse
from django.shortcuts import render, get_object_or_404

from app.forms import PostForm
from app.models import Post
from django.views.generic import CreateView

# Create your views here.


def index(request: HttpRequest) -> HttpResponse:
    qs = Post.objects.all()
    return render(
        request,
        "app/index.html",
        {
            "post_list": qs,
        },
    )


def post_detail(request: HttpRequest, pk: int) -> HttpResponse:
    # data = Post.objects.get(pk=pk)
    data = get_object_or_404(Post, pk=pk)
    return render(
        request,
        "app/post_detail.html",
        {
            "post": data,
        },
    )


post_new = CreateView.as_view(
    model=Post,
    form_class=PostForm,
    success_url="/app/"  # 저장하고 나서 이동할 주소
)

// post_form.html

{% extends "app/base.html" %}
{%  block content %}
    {{ form }}
{% endblock %} #}

app/new/ 로 끝날때 views.post_new를 호출하겠다

urls.py 

urlpatterns = [
    path("admin/", admin.site.urls),
    path("app/", views.index),
    path("app/<int:pk>/", views.post_detail),
    path("app/new/", views.post_new),  
]

 

http://127.0.0.1:8000/app/

http://127.0.0.1:8000/app/new

 

// postform.html

{% extends "app/base.html" %}
{%  block content %}
    <form action="" method="post">
        {% csrf_token %}
        <table>
        {{ form }}
        </table>
        <input type="submit" value="저장하기">
    </form>
{% endblock %} #}

 "이 입력란을 작성하세요" 는 django가 한 것이 아니라, Chrome이 한 것

마우스 우클릭 => 검사메뉴=> 개발자도구

required속성이란 서버로 전송하기 전에  웹브라우저가 먼저 필수값 여부를 검사

웹브라우저에서 필수값 checking 기능을 끄기 위해서 form 태그에 novalidate속성을 추가 

웹브라우저에서 필수값 수행 되지 않고, 서버로 전송되고 장고 Form을 통해 처리된 에러 하면을 확인

// postform.html

{% extends "app/base.html" %}
{%  block content %}
    <form action="" method="post" novalidate>
        {% csrf_token %}
        <table>
        {{ form }}
        </table>
        <input type="submit" value="저장하기">
    </form>
{% endblock %} #}