2/17 목

728x90

목요일!

리스트로 돌아가기, 수정, 삭제, 좋아요 버튼을 만들고 각각의 기능을 여태 배운 것을 응용해 구현해야 하는데 어렵다아아아아! 리스트로 돌아가기 말고는 감이 안 잡혀..

1. HTML 엘리먼트를 이용해서 사용자 입력 양식(입력 Form)을 만드는 것이 아니라, Django가 제공하는 Model Form(class)를 이용함

bbs App 디렉터리 안에 forms.py 생성하고 Django에서 forms 모듈, bbs.models에서 class를 불러온 후 form에 대한 class 정의함

↓forms.py↓

from django import forms
from bbs.models import Board

class BoardForm(forms.ModelForm):
    class Meta:
        model = Board
        fields = "__all__"

views.py 안에 form을 import 하고, 새글 작성 페이지(b_create 함수)에 정의한 Model Form를 넣어줌

↓views.py↓

from django.shortcuts import render
from bbs.models import Board
from bbs.forms import BoardForm

def b_list(request):
    posts = Board.objects.all().order_by('-id')
    context = {
        "posts": posts
    }
    return render(request, 'bbs/list.html', context)

def b_create(request):
    board_form = BoardForm()
    context = {
        "my_form": board_form
    }
    return render(request, 'bbs/create.html', context)

b_create 함수 안에 form 객체를 가져옴

↓create.html↓

새글 작성 페이지에 글 작성 양식이 자동으로 들어감

2. 자동으로 생성된 사용자 입력 양식은 Bootstrap이 적용되지 않으므로, 터미널에서 pip으로 모듈 다운로드하고

pip install django-bootstrap4

INSTALLED_APPS에 모듈을 등록하고

↓settings.py↓

app 등록한 것 로드해서 넣어주기

↓create.html↓

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block html_header %}
<script src="/static/js/menu_btn.js"></script>
{% endblock %}

{% block html_body %}
<div class="container">
    <h1>새글 작성</h1>
    {# {{ my_form }} #}
    {% bootstrap_form my_form %}
</div>
{% endblock %}

3. 새글 작성 페이지에 댓글 수, 좋아요 수는 출력되지 않고 자동으로 카운트되어야 하므로, fields all을 수정해줌

↓forms.py↓

        fields = ['b_title', 'b_author', 'b_content']

입력창에 DB id가 나오는 것이 아닌 특정 문자를 표시하고 싶다면 labels를 사용

        labels = {
            'b_title': '글 제목',
            'b_author': '글 작성자',
            'b_content': '글 내용'
        }

입력할 수 있는 component를 widget이라 함. 이를 수정하려면

        widgets = {
            'b_title': forms.TextInput(
                attrs={
                   'class': 'form-control w-50',
                    'placeholder': '제목을 입력하세요!'
                }
            ), # 한 줄짜리 입력 상자. Bootstrap의 css. attrs는 스타일. placeholder는 상자 안에 내용 넣기
            'b_author': forms.TextInput(
                attrs={
                    'class': 'form-control w-25',
                    'placeholder': '작성자를 입력하세요!'
                }
            ),
            'b_content': forms.Textarea(
                attrs={
                    'class': 'form-control w-75',
                    'placeholder': '글 내용을 입력하세요!'
                }
            ) # 여러 줄짜리 입력 상자
        }

새글 작성 페이지 하단에 글 등록 버튼을 삽입

↓create.html↓

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block html_header %}
<script src="/static/js/menu_btn.js"></script>
{% endblock %}

{% block html_body %}
<div class="container">
    <h1>새글 작성</h1>

    {% bootstrap_form my_form %}
    <br>
    <button type="submit"
        class="btn btn-primary">등록</button>
    <button type="button"
        class="btn btn-secondary">리스트로 돌아가기</button>
</div>
{% endblock %}

4. 새글 작성 페이지에 내용이 입력되지 않은 상태에서 등록 버튼을 누르면 GET 방식으로 새글 작성 페이지로 가고,

↓views.py↓

from django.shortcuts import render, redirect
from bbs.models import Board
from bbs.forms import BoardForm

def b_list(request):
    posts = Board.objects.all().order_by('-id')
    context = {
        "posts": posts
    }
    return render(request, 'bbs/list.html', context)

def b_create(request):
    # request 방식이 GET or POST인지 구분해서 처리
    # GET 방식이면 빈 입력 상자를 출력하고,
    if request.method == 'GET':

        board_form = BoardForm()
        context = {
           "my_form": board_form
        }
        return render(request, 'bbs/create.html', context)
    # POST 방식이면 client가 입력된 데이터를 이용해서 DB 처리
    else:
        board_form = BoardForm(request.POST) # client가 입력된 데이터를 가지고 있는 ModelForm

        if board_form.is_valid():
            board_form.save()
            # 입력 받은 값 이외에 다른 컬럼의 값을 지정해서 사용할 때(좋아요 개수 10)
            # new_post = board_form.save(commit=False)
            # new_post.b_like_count = 10
            # new_post.save()
            return redirect('bbs:b_list')

내용 입력 후 등록 버튼을 누르면 POST 방식으로 내용을 받아 DB에 저장하고 게시판으로 돌아감

↓create.html↓

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block html_header %}
<script src="/static/js/menu_btn.js"></script>
{% endblock %}

{% block html_body %}
<div class="container">
    <h1>새글 작성</h1>

    <form action="/bbs/create/" method="post">
    {% csrf_token %}
    {% bootstrap_form my_form %}
    <br>
    <button type="submit"
        class="btn btn-primary">등록</button>
    <button type="button"
        class="btn btn-secondary" onclick="to_list()">리스트로 돌아가기</button>
    </form>

</div>
{% endblock %}

↓forms.py↓

from django import forms
from bbs.models import Board

class BoardForm(forms.ModelForm):
    class Meta:
        model = Board
        # fields = "__all__"
        fields = ['b_title', 'b_author', 'b_content']

        labels = {
            'b_title': '글 제목',
            'b_author': '글 작성자',
            'b_content': '글 내용'
        }

        widgets = {
            # 한 줄짜리 입력 상자. Bootstrap의 css, attrs는 스타일을 바꿈. placeholder는 상자 안의 내용 바꿈
            'b_title': forms.TextInput(
                attrs={
                   'class': 'form-control w-50',
                    'placeholder': '제목을 입력하세요!'
                }
            ),
            'b_author': forms.TextInput(
                attrs={
                    'class': 'form-control w-25',
                    'placeholder': '작성자를 입력하세요!'
                }
            ),
            'b_content': forms.Textarea( # 여러 줄짜리 입력 상자
                attrs={
                    'class': 'form-control w-75',
                    'placeholder': '글 내용을 입력하세요!'
                }
            )
        }

5. 글 목록에서 제목을 클릭하면 각 게시글의 세부 내용(상세보기 화면)으로 이동

↓list.html↓

ROOT_URLCONF에 각 게시글에 대한 URLConf 경로 설정하기

↓urls.py↓

6. 사용자 입력 양식과 같이 Django가 제공하는 Model Form(class)를 이용하여, b_detail 함수 form에 대한 class 정의함

↓forms.py↓

from django import forms
from bbs.models import Board

class BoardForm(forms.ModelForm):
    class Meta:
        model = Board
        # fields = "__all__"
        fields = ['b_title', 'b_author', 'b_content']

        labels = {
            'b_title': '글 제목',
            'b_author': '글 작성자',
            'b_content': '글 내용'
        }

        widgets = {
            # 한 줄짜리 입력 상자. Bootstrap의 css, attrs는 스타일을 바꿈. placeholder는 상자 안의 내용 바꿈
            'b_title': forms.TextInput(
                attrs={
                   'class': 'form-control w-50',
                    'placeholder': '제목을 입력하세요!'
                }
            ),
            'b_author': forms.TextInput(
                attrs={
                    'class': 'form-control w-25',
                    'placeholder': '작성자를 입력하세요!'
                }
            ),
            'b_content': forms.Textarea( # 여러 줄짜리 입력 상자
                attrs={
                    'class': 'form-control w-75',
                    'placeholder': '글 내용을 입력하세요!'
                }
            )
        }

class BoardDetailForm(forms.ModelForm):
    class Meta:
        model = Board
        fields = '__all__'

        labels = {
            'b_title': '글 제목',
            'b_author': '글 작성자',
            'b_content': '글 내용',
            'b_comment_count': '댓글 개수',
            'b_like_count': '좋아요 개수'
        }

        widgets = {
            'b_title': forms.TextInput(
                attrs={
                    'class': 'form-control w-50'
                }
            ),
            'b_author': forms.TextInput(
                attrs={
                    'class': 'form-control w-25'
                }
            ),
            'b_content': forms.Textarea(
                attrs={
                    'class': 'form-control w-75'
                }
            ),
            'b_comment_count': forms.TextInput(
                attrs={
                    'class': 'form-control w-25'
                }
            ),
            'b_like_count': forms.TextInput(
                attrs={
                    'class': 'form-control w-25'
                }
            )
        }

↓views.py↓

from django.shortcuts import render, redirect, get_object_or_404
from bbs.models import Board
from bbs.forms import BoardForm, BoardDetailForm

def b_list(request):
    posts = Board.objects.all().order_by('-id')
    context = {
        'posts': posts
    }
    return render(request, 'bbs/list.html', context)

def b_create(request):
    # request 방식이 GET or POST인지 구분해서 처리
    # GET 방식이면 빈 입력 상자를 출력하고,
    if request.method == 'GET':

        board_form = BoardForm()
        context = {
           'my_form': board_form
        }
        return render(request, 'bbs/create.html', context)
    # POST 방식이면 client가 입력된 데이터를 이용해서 DB 처리
    else:
        board_form = BoardForm(request.POST) # client가 입력된 데이터를 가지고 있는 ModelForm

        if board_form.is_valid():
            board_form.save()
            # 입력 받은 값 이외에 다른 컬럼의 값을 지정해서 사용할 때(좋아요 개수 10)
            # new_post = board_form.save(commit=False)
            # new_post.b_like_count = 10
            # new_post.save()
            return redirect('bbs:b_list')

def b_detail(request, board_id):
    post = get_object_or_404(Board, pk=board_id)
    # 만든 Boared Class 객체인 post를 가지고 Model Form 객체를 만듦
    board_detail_form = BoardDetailForm(instance=post)
    context = {
        'detail_form': board_detail_form
    }
    return render(request, 'bbs/detail.html', context)

bbs/templates/bbs 디렉터리 안에 detail.html 생성하고 create.html 내용을 복붙 해서 수정함

↓detail.html↓

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block html_header %}
<script src="/static/js/menu_btn.js"></script>
{% endblock %}

{% block html_body %}
<div class="container">
    <h1>상세보기</h1>
    {% bootstrap_form detail_form %}
</div>
{% endblock %}

7. 상세보기 페이지 하단에 버튼 넣어주기

↓detail.html↓

{% block html_body %}
<div class="container">
    <h1>상세보기</h1>
    글 번호 : {{ detail_form.initial.id }}
    {#글 제목 : {{ detail_form.initial.b_title }}#}
    <br>
    {% bootstrap_form detail_form %}
    <br>
    <button class="btn btn-success">리스트로 돌아가기</button>
    <button class="btn btn-primary">수정</button>
    <button class="btn btn-danger">삭제</button>
    <button class="btn btn-warning">좋아요</button>
</div>
{% endblock %}

1. 1/17 월	2. 1/18 화	3. 1/19 수	4. 1/20 목	5. 1/21 금
취업 특강	파이썬 환경 설정 (파이참, 아나콘다, 주피터 노트북)	파이썬 데이터 타입 (list, tuple)	파이썬 데이터 타입 (range, string, dictionary, set, bool)	파이썬 사용자 정의 함수, 객체지향, 사용자 정의 클래스
6. 1/24 월	7. 1/25 화	8. 1/26 수	9. 1/27 목	10. 1/28 금
파이썬 사용자 정의 클래스, 사용자 정의 모듈	DB(MySQL) DBMS, MySQL 환경 설정, DB/테이블 생성, DB 입력·활용, Index	DB(MySQL) View, 백업과 복원, DB 모델링, 관계(PK, FK), DML(CRUD), 데이터 타입	DB(MySQL) DML(CRUD), WHERE 조건, 패턴 매칭, SubQuery, 정렬, 그룹핑, 집계 함수, 트랜잭션(ACID 특성)	DB(MySQL) JOIN, UNION, NOT IN, WEB
11. 2/3 목	12. 2/4 금	13. 2/7 월	14. 2/8 화	15. 2/9 수
WEB WebStorm 환경 설정, HTML, CSS, JavaScript, jQuery CDN	WEB jQuery 문법, Selector, Method	WEB jQuery Method, Event, AJAX	GitHub 특강 소스코드 관리, Fork, Clone, Branch, Commit, Push, Pull-Request, Rebase	GitHub 특강 프로젝트 관리, Fetch, Rebase, Merge, Conflict
16. 2/10 목	17. 2/11 금	18. 2/14 월	19. 2/15 화	20. 2/16 수
WEB jQuery AJAX, Bootstrap, Open API	*Django* WSGI, MVC, MVT, ORM, 투표 시스템	*Django* MVT, ORM	*Django* MVT, ORM, Redirect	*Django* 게시판
21. 2/17 목	22. 2/18 금	23. 2/21 월	24. 2/22 화	25. 2/23 수
*Django* 게시판, Model Form

* 전체 메커니즘을 알고 있어야 디버깅이 가능하다!

728x90

저작자표시

'멀티캠퍼스 프로젝트형 AI 서비스 개발 5회차 > WEB' 카테고리의 다른 글

2/21 월 (0)	2022.02.21
2/18 금 (0)	2022.02.19
2/16 수 (0)	2022.02.16
2/15 화 (0)	2022.02.15
2/14 월 (0)	2022.02.14

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Jeon2's Develop Playground

2/17 목

'멀티캠퍼스 프로젝트형 AI 서비스 개발 5회차 > WEB' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

2/17 목

'멀티캠퍼스 프로젝트형 AI 서비스 개발 5회차 > WEB' 카테고리의 다른 글

'멀티캠퍼스 프로젝트형 AI 서비스 개발 5회차/WEB' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역