2022-02-16

yyj·2022년 2월 20일
0

.

목록 보기
18/21

게시판 만들기


Django Project를 생성하자

  • project 명 : lecture
  1. 아나콘다 프롬프트창에 입력하여 프로젝트 생성
django-admin startproject lecture
  1. pycharm을 기동해서 project를 open하자

  2. 개발환경 설정
  • 가상환경 설정
  • file --> settings --> project interpreter --> anconda에 python3.8버전으로 가상환경 생성
  1. 새로운 가상환경에 django 설치
conda install django
  1. projecct 설정
  • lecture/setting.py 파일 수정
  • 그동안 해왔던 방식과 똑같기 때문에 생략하겠다
  • TEMPLATES의 DIRS만 추가해 주겠다.
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR),'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
# 맨아래에 이렇게 static url과 media url을 설정해 줄것이다.
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/

# client의 request URL에서 나오는 형태
# http://127.0.0.1:8000/static/img/파일명 하면 이미지가 뜬다!
# static을 이용하면 서버쪽에서 css img js를 바로 땡겨 올 수있다.
#장고는 request가 오면 urlconf가 받아서 분석을 해서 view함수 호출하고 등등 난리를친다
#근데 static으로 들어오면 url뒤에있는 정적 resource를 클라이언트에 주라고 지정해 줄 수 있음.
#폴더 생성후
#http127.00~~~/static/img/파일명 을 이용하면 서버가 제공해주는 걸 바로 사용해줄 수 있구나!

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]
# http://127.0.0.1:8000/media/
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  • root 폴더에 media 파일과 static파일도 추가해 줄것이다.
  • static 폴더는 css, javascript, image등 서버쪽에서 클라이언트 쪽으로 주는 정적인 콘테츠들이 들어갈 곳이고
    media파일은 사용자가 동적으로 올려주는 동영상이나 이미지를 지칭하여 url을 통해 어디에 저장될 건지를 설정해준다.
  • 이제 database를 생성해준다 Workbench를통해 데이터베이스를 하나 생성해주고 터미널창에서 해당 명령어를 사용하여 mysql사용을 위한 설정을 해준다.
pip install mysqlclient
  • static 파일에 관리하기 쉽게 css, js, img 파일도 생성해주고 media 파일도 따로 생성해주자
  • 이제 세팅은 끝났다 프로젝트가 동작하는지 보기 위해 서버를 기동해보자!

  1. 기본 테이블을 생성해보자
  • 기본 table에 대한 명세서는 이미 Django가 제공
  • 제공받은 명세서를 이용해서 table에 DB를 생성해주자
  • 터미널에서 해당 명령어를 입력해주자
python manage.py migrate
  1. 관리자 page를 사용하기 위해 관리자 계정을 생성한다.
python manage.py createsuperuser
  • userName, email password를 입력하면 사용할 수 있다.

  1. 서버 기동
python manage.py runserver
  1. admin page 동작을 확인한다.

  2. bbs applicaiton 구현 시작

  3. table 설계 그림을 참조한다.
  4. Django는 "ORM" 기능을 이용
  • 설계된 Database Table을 Model의 class로 표현
  1. bbs application의 models.py를 수정해서 model class 정의
  • bbd/models.py파일 수정
from django.db import models

# class명이 Board이면 만들어지는 실제 table이름은 bbs_board이 되요!
# class는 반드시 장고가 제공하는 class를 상속받아서 만들어야 해요!
# Database Table이 가지고 있는 각각의 column을
# class의 class variable을 이용해서 define.

# 클래스를 이용해서 Table을 생성하면 자동으로 id column이 하나
# 생성되요. id column은 Integer, PK, AUTO_INCREMENT

class Board(models.Model):
    b_title = models.CharField(max_length=50)  # 글 제목
    b_author = models.CharField(max_length=20)  # 글 작성자
    b_content = models.CharField(max_length=200)  # 글 내용
    b_date = models.DateTimeField(auto_now=True)  # 글 작성시간
    # auto_now=True => 현재시간이 자동으로 삽입
    b_comment_count = models.IntegerField(default=0)  # 댓글 개수
    b_like_count = models.IntegerField(default=0)  # 좋아요 개수

    def str(self):
        return self.b_title

class Comment(models.Model):
    c_author = models.CharField(max_length=20)  # 댓글 작성자
    c_content = models.CharField(max_length=100)  # 댓글 내용
    # board라는 class variable은 실제 table이 생성되면
    # board_id라는 이름의 column으로 생성되고 ForeignKey로 설정되요!
    board = models.ForeignKey(Board,
                    on_delete=models.CASCADE)

    def str(self):
        return self.c_content
  1. "MVT" pattern에 입각해서 URL 처리부터 진행하자


  2. 현재 Project의 Main page를 먼저 만들자
  • Root_URLConf로 이동해서 url.py수정 즉(lecture/url.py)를 수정하자.
  • lecture/url.py
from django.contrib import admin
from django.urls import path, include
from django.views.generic.base import TemplateView
# 장고가 제공해주는 기능중에 views.generic.bse안에 TemplateView가 있다.
# 이것을 이요하면 view를 거치고 template도 거쳐서 response해주는게 아닌 
# TemplateView.as_view함수를 통해 화면에 그냥 보여준다.
# ROOT_URLConf
# 여기까지의 경로는 => http://127.0.0.1:8000/

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html'),
         name='home'),  # main page
    # 공용폴더로 만들어놓은 templates 폴더안에 index.html을 찾는다.

    path('admin/', admin.site.urls),   # Admin page

    # http://127.0.0.1:8000/bbs/ 로 시작하면 include()를 이용해서
    # application 안의 URLConf로 이동.
    path('bbs/', include('bbs.urls'))
]
  • bootstrap을 이용해 maing page를 설계하도록하자
  • 공용폴더 templates를 만들고 해당파일에 html파일을 추가하여 작성한다.
  • inde.html
    • (css파일도 가져와야한다/ static 파일안에 css파일 경로로 페이지 소스에서 가져온 css파일을 넣어준다.)
    • (static 파일 안에 img에도 img사진을 하나 넣어 활용해보자!)
<!doctype html>
<html lang="en" class="h-100">
<head>
    <meta charset="utf-8">
    <title>LecturSampleProject</title>

    <!-- Bootstrap core CDN 이 들어가야함 -->
    <!-- CSS only  밑에 이 링크가 bootstrap CDN이다.-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
    <!-- Custom styles for this template -->
    <link href="/static/css/cover.css" rel="stylesheet">
</head>
<body class="d-flex h-100 text-center text-white bg-dark">

<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
    <header class="mb-auto">
        <div>
            <h3 class="float-md-start mb-0">Sample Project</h3>
            <nav class="nav nav-masthead justify-content-center float-md-end">
            </nav>
        </div>
    </header>

    <main class="px-3">
        <p class="lead">Django Framework</p>
        <p class="lead">
            <a href="/bbs/list/"
               class="btn btn-lg btn-secondary fw-bold border-white bg-white">Enter BBS!!</a>
        </p>
    </main>
    <!-- static 파일 경로안에 있는 사진을 가져온다!-->
    <img src="/static/img/error.PNG">
    <footer class="mt-auto text-white-50">

    </footer>
</div>
</body>
</html>

  • 다음과 같은 메인페이지가 실행되게 된다.

  1. 게시판 application에 대한 URLconf를 따로 관리하는게 좋다.
  • include()를 이용해서 bbs application안에 urls.py를 작성
    • 위의 lecture.py 파일 내용을 참조하도록 하자
    path('bbs/', include('bbs.urls'))
  • bbs.url.py
from django.urls import path
from bbs import views

# namespace설정
app_name = 'bbs'

# bbs application의 URLConf
# 여기까지의 경로는 => http://127.0.0.1:8000/bbs/

urlpatterns = [
    path('list/', views.b_list, name='b_list'),
    path('create/', views.b_create, name='b_create'),
    path('<int:board_id>/detail/', views.b_detail, name='b_detail'),
    path('delete/', views.b_delete, name='b_delete'),
    path('like/', views.b_like, name='b_like'),
    # ajax url 설정
    path('createComment/', views.create_comment, name='create_comment'),
    # commnet delete 추가
    path('commentDelete/', views.delete_comment, name='delete_comment'),
]
  • 위와같이 여러 경로가 있는데 진행하면서 천천히 하나씩 알아보도록 하자.

  1. 게시판 application의 첫 화면은 게시글에 대한 목록이 출력되어야 할 것이다.
  • 해당 화면의 url은 /bbs/list로 할 것이다.
path('list/', views.b_list, name='b_list')

  1. url을(/bbs/list/)설정했으면 해당 url에 대한 view함수를(b_list)를 생성!
  2. 해당 view함수(b_list( ))에서 template html파일을 이용해서 HttpResponse객체를 생성한 후 return
  • views.py
from django.shortcuts import render, redirect, get_object_or_404
from bbs.models import Board, Comment
from bbs.forms import BoardForm, BoardDetailForm

def b_list(request):
    # Database처리와 로직처리를 하고
    # 결과를 만들면 그 결과를 context라고 표현되는 dictionary에
    # 담아서 Template HTML file을 이용해서 HttpResponse객체를 생성한 후
    # 리턴.
    # 게시글 테이블에서 모든 게시글을 다 가져와야 해요!
    # Board class의 객체를 게시글마다 만들어서 가져와야 해요!
    posts = Board.objects.all().order_by('-id')

    context = {
        "posts": posts
    }

    return render(request, 'bbs/list.html', context)
    # HttpResponse객체를 생성하는걸 render()가 하는 일!
    # 게시글 list를 출력할 수 있음!
  • base html을 만들어서 공통적으로 사용되는 hmtl을 만들것이다.
  • base html을 기반으로 html을 이제 사용할 것이다 코드에 jQuery CDN과 Bootstrap CDN을 가져와 선언해준다
    • { % block ~~~ % }
    • { % endblock % }을 지정해줘서 변하는 값들을 설정해준다.
    • 그 후 작성할 html에 가서 { % extends 'base.html' % }을 선언하여 base.html을 확장해서 사용한다고 선언해준다.
    • 내부 내용은 block범위를 설정해 작성해 준다.
  • base.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample Project</title>

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    {% block html_header %}

    {% endblock %}
</head>
<body>
    {% block html_body %}

    {% endblock %}
</body>
</html>
  • 이제 게시판 리스트에 관한 html을 base.html을 이용해서 작성할 것이다 다음과 같이 작성 할 수 있다.
  • list.html
{% extends 'base.html' %}

{% block html_header %}
<script src="/static/js/menu_btn.js"></script>
<!--버튼 기능을 이용하기 위해 js파일을 가져와 사용한다-->
<!--버튼 구현 과정은 추후에 설명하겠다.-->
{% endblock %}

{% block html_body %}
<div class="container">
    <h1>Bulletin Board System(BBS)</h1>
    <button type="button"
            class="btn btn-primary"
            onclick="new_post()">새글 작성</button>
    <div class="m-1"></div>

    <table class="table table-hover">
        <thead class="thread-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">글 제목</th>
                <th scope="col">글 작성자</th>
                <th scope="col">글 작성일</th>
                <th scope="col">댓글 개수</th>
                <th scope="col">좋아요 개수</th>
            </tr>
        </thead>
        <tbody>
            {% for post in posts %}
            <tr>
                <td>{{ post.id }}</td>
                <td><a href="/bbs/{{ post.id }}/detail/">{{ post.b_title }}</a></td>
                <td>{{ post.b_author }}</td>
                <td>{{ post.b_date }}</td>
                <td>{{ post.b_comment_count }}</td>
                <td>{{ post.b_like_count }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}
  • 다음과 같이 작성하고 /bbs/list/로 경로를 이동해보자
  • 안에 데이터는 임의로 작성해 주었다. 페이지가 잘 작동하는지만 확인하자!
  1. "새글작성" 기능을 구현해야 한다!
  • 새글작성 버튼을 클릭하면 새로운 request URL을 이용해서 서버에 요청을 보내야 한다
    • "/bbs/create/" url은 이렇게 사용할 거임
    • 위의 bbs/url.py파일을 참고하자.
    path('create/' views.b_create, name='b_create')
  • 모델폼을 이용해 작업을 해보도록 할것이다.
  • 모델폼을 이요하면 장고에서 좀 더 편하게 작업할 수 있다.
  1. 사용자 입력 양식(입력 form)을 HTML Element를 직접 작성해서 만들지 않고 Django가 제공하는 ModelForm을 이용해서 쉽게 처리해 보자
  • modelform -> class이다.


  1. modelform class를 만들어 보자
  • 우리가 입력하는 양식 자체는 테이블과 연관되어 있다
    • bbs application안에 forms.py파일을 만들고 여기에 modelform class를 작성해 보자
  • fomrs.py
# modelform class를 여기에 작성해요!

# modelForm class를 만들려면 Django가 제공해주는 기능(class)를 이용해야해요!
# class를 상속받아서 작성해야함

from django import forms
# 테이블과 연관되어있기 때문에 게시판 게시글을 사용하는 board 클래스도 필요.
from bbs.models import Board

# modelform을 이용을하는데 어떤 modelform을 이용하는지 class Meta를 통해
# 이 모델폼이 어떤 모델과 관련이 있는지 화면에 사용하는 필드는 어떤 필드를 사용할지 정함
# model, fields 다 정해져 있음

class BoardForm(forms.ModelForm):
    class Meta:
        model = Board
        # fields = 'all'
        # 테이블에있는 모든 데이터를 가져와서 좋아요개수와 댓글 개수도 가져옴 하지만 이건 작성자가 정하는게 아님
        # all을 사용해서 테이블에 사용된 모든 컬럼을 찍음 그렇기 때문에 all이 아닌 내가 정한것만 나오게 바꿔주면 됨
        fields = ['b_title','b_author','b_content']
        # 하지만 이렇게 출력하면 원하는것만 출력이 되지만 타이틀이 B title(label) 이런식으로 나와 맘에 안든다.

        labels = {
            'b_title': '글 제목',
            'b_author': '글 작성자',
            'b_content': '글 내용'
        }
        # 이제 타이틀도 바뀌었지만 그 내부의 입력상자도 "글 제목"이라써있어서 맘에 안들기 때문에 이 두가지를 편집해보자
        # 글 내용의 경우 한줄짜리 텍스트 상자가 아닌 여러줄 짜리 텍스트 상자로 바꿔야한다.(widgets)를 선언해서 바꾸자

        widgets = {
            'b_title': forms.TextInput(
                attrs= {
                    'class': 'form-control w-50',# bootstrap css임 w-50은 화면에 보이는 칸의 길이를 의미
                    'placeholder': '제목을 입력하세요' # 회색으로 된 입력상자 안에 글을 의미 이 내용을 바꿔줄 수 있음
                }
            ),    # TextInput() 한줄짜리 입력상자
            # 입력상자의 스타일을 변경하기 위해 ()안에 속성을 변경해 주면됨

            'b_author': forms.TextInput(
                attrs= {
                    'class': 'form-control w-25',
                    'placeholder': '작성자를 입력하세요'
                }
            ),
            'b_content': forms.Textarea(
                attrs= {
                    'class': 'form-control w-75',
                    'placeholder': '글 내용을 입력하세요'
                }
            )    # TextArea() : 여러줄짜리 입력상자

        }
  • 이제 modelform 작성을 완료했으면 views.py를 통해 생성버튼 클릭시 실행해야하는 함수를 선언해주자
  • views.py
def b_create(request):
    # request방식이 GET인지 POST인지 구분해서 처리
    # 만약 GET방식이면 빈 입력상자를 출력하고 POST방식이면 입력된 데이터를 이용해서 Database 처리
    if request.method == 'GET':

    # 새글을 작성할 수 있는 화면을 클라이언트에게 전달.
    # 입력 양식인 ModelForm 객체를 하나 생성할거임
        board_form = BoardForm()

        context = {
            "my_form" : board_form
        }

        return render(request,'bbs/create.html', context)

    else:
        # POST방식인 경우에는 이부분이 수행됨!
        # 클라이언트가 입력상자에 입력한 내용을 가지고 Database처리를 한다.
        board_form = BoardForm(request.POST) # 모델폼 객체긴한데 클라이언트가 입력한 데이터를 가지고 있는 모델폼

        if board_form.is_valid():  # board_form안에 제데로 처리됐으면을 의미
             board_form.save() # BoardForm 안에 있는 데이터를 이용해서 Board class의 객체를 생성
            # 만약 입력 받은 값 이외에 테이블의  다른  컬럼의 값을 지정해서 사용하면?
            # new_post = board_form.save(commit=False) # commit = False => 실제로 저장되지 않음! 대신 객체를 리턴 / 저장은 시키는데 바로 저장은 시키지 말라는 의미
            # new_post.b_like_count = 10 # 좋아요 버튼이 찍힘!
            # new_post.save()
             return redirect('bbs:b_list')
             # redirect로 다시 리스트로 돌아가게된다!
  • create.html을 작성해준다.
  • create.html
<!-- base.html을 확장해서 만든다는 의미-->
{% extends 'base.html' %}
{% load bootstrap4 %}
<!--프로젝트에 등록해놓은 bootstarp4를 load해서 불러들이고-->
{% block html_header %}
    <script src="/static/js/menu_btn.js"></script> <!-- js형태로 static에 자바스크립트 만들고 경로를 설정해준다.-->

{% endblock %}

{% block html_body %}
    <div class="container">
        <h1>새글 작성</h1>
        <form action="/bbs/create/" method="post">
            <!--보안상의 이유로 csfr_token을 넣어줘야한다.-->
            {% csrf_token %}
            <!--이렇게 찍으면 입력이 자동으로 찍힌다!-->
            <!--{{ my_form }}-->
            {% bootstrap_form my_form %} <!--입력상자들-->
            <br>
            <!--부트스트랩 사용을 위해 bootstrap form을 통해 my_form을 선언해서 사용-->
            <!--또한 부트스트랩을 사용하기 위해 클래스를 잡아줘야한다.-->
            <button type="submit" class="btn btn-primary">등록</button> <!--버튼 누르면 /bbs/create/로 보내겠다는 의미-->
            <button type="button" class="btn btn-secondary"onclick="back_list()">리스트로 돌아가기</button>
        </form>
    </div>
{% endblock %}
  1. modelForm(BoardForm)을 이용해서 자동으로 만들어진 입력양식을 새로쓰기 화면에 출력했다!
  • 하지만 부트스트랩이 적용되지 않음
  • 그럼 어떻게 해야 bootstrap이 자동으로 생성되는입력양식에 적용이되나?
    • 모듈을 설치해서 적용한다
       pip install django-bootstrap4
    • lecture/setting.py -> INSTALEED_APP부분에 application을 추가 -> bootstrap4 적용
      INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'bbs.apps.BbsConfig',
        'bootstrap4' #모델폼으로만든 자도으로 생성된 입력상자에 적용
      ]
      	```

  • 추가적으로 static폴더의 js폴더안에 js파일을 작성해서 함수를 실행시킬수 있도록 하자.
function new_post() {
    document.location.href = '/bbs/create/'
    // 다큐먼트가 내용이 나오는 흰색화면을 의미
    // 자바스크립트 자체에서 지원해주는 함수
    // 해당링크로 서버쪽에 request 해준다는 의미.
}
// list.html의 onclick버튼을 눌러 새글작성시 create url로 이동

function back_list() {
    document.location.href = '/bbs/list/'
    // 다큐먼트가 내용이 나오는 흰색화면을 의미
    // 자바스크립트 자체에서 지원해주는 함수
    // 해당링크로 서버쪽에 request 해준다는 의미.
}
// create.html의 onclick버튼을 눌러 리스트로 이동시 list url로 이동
  1. 이제 글 등록 버튼을 만들어야 한다.
  • 빈 입력방식 출력은 (GET request)
  • 입력된 내용을 Database에 저장은(POST방식 request)
  • create.html에 form에서 등록버튼시 post방식으로 해당 경로로 실행되게 한다.
 <form action="/bbs/create/" method="post">
 <!--views.py b_create에 작성된 것처럼 버튼 클릭시 redirect를 통해 다시 리스트로 돌아간다!-->

  • 다음과 같이 화면이 출력되는것을 확인 할 수 있다.

  1. 각 게시글에 대한 detail화면을 출력해야한다.
  • 게시글의 링크를 클릭해서 글의 내용을 볼 수 있는 상세보기 페이지로 이동
  • 링크부터 걸어야한다.
  • list.html처럼 타이틀에 링크를 걸어 상세보기 url로 이동하게 만들자!
  • 먼저 bbs/url.py에 링크를 추가해주자
  • bbs/url.py
# 경로는 다음과 같다. http://127.0.0.1:8000/bbs/<int:board_id>/detail/
path('<int:board_id>/detail/', views.b_detail, name='b_detail'),
  • 그다음 list.html 타이틀에 링크를 걸어주자!
<td><a href="/bbs/{{ post.id }}/detail/">{{ post.b_title }}</a></td>
  • 매번 하는것처럼 views.py파일에도 함수를 추가해줘야한다!
    URLConf파일에 해당 URL에 대한 view함수를 연결해야 해요!
    -> 연결이 설정된 함수(b_detail)를 구현
  • detail용 폼도 만들어야함
    form.py로 이동해서 새로 하나 작성해주자
  • form.py
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'# bootstrap css임 w-50은 화면에 보이는 칸의 길이를 의미
                }
            ),    # TextInput() 한줄짜리 입력상자
            # 입력상자의 스타일을 변경하기 위해 ()안에 속성을 변경해 주면됨

            'b_author': forms.TextInput(
                attrs= {
                    'class': 'form-control w-25'
                }
            ),
            'b_content': forms.Textarea(
                attrs= {
                    'class': 'form-control w-75',
                }
            ),    # TextArea() : 여러줄짜리 입력상자
            'b_comment_count': forms.TextInput(
                attrs= {
                    'class': 'form-control w-25'
                }
            ),
           'b_like_count': forms.TextInput(
                attrs= {
                    'class': 'form-control w-25'
                }
            )

        }

views.py

def b_detail(request, board_id):
     # 게시글의 세부내용을 가져와서 화면에 출력해야 해요!
     #이것도 ModelForm을 이용해서 Database에서 가져온 내용을 화면에 출력할 거에요

     # 1. board_id를 이용해서 게시글 1개를 가져와야해요(객체)
     post = get_object_or_404(Board, pk=board_id) # Board라는 클래스에 pk가 board_id와 일치하는 객체 하나를 가져오는것
     # 2. 만들어 놓은 BoardDetailForm이라는 ModelForm의 객체를
     #    위에서 만든 board class의 객체인 post를 이용해서  생성해요!
     board_detail_form = BoardDetailForm(instance=post) # post를 가지고 form을 만들어 라는 의미
     # 3. 댓글 (comment) 정보로 가져와야해요!
     # 해당게시글에대한 객체를 싹다가져옴
     comments = post.comment_set.all().order_by('-id')

     context = {
         "detail_form": board_detail_form,
         'comments': comments
     }

     return render(request, 'bbs/detail.html', context)
  • deatil.html
<!-- base.html을 확장해서 만든다는 의미-->
{% extends 'base.html' %}
{% load bootstrap4 %}
<!--프로젝트에 등록해놓은 bootstarp4를 load해서 불러들이고-->
{% block html_header %}
    <script src="/static/js/menu_btn.js"></script><!-- js형태로 static에 자바스크립트 만들고 경로를 설정해준다.-->
{% endblock %}

{% block html_body %}
    <div class="container">
        <h1>상세 보기</h1>
        글번호 : <span id="post_id">{{ detail_form.initial.id }}</span>
<!--          자동으로 생성되는 id값을 가져올 수 있다!-->
        <br>
        {% bootstrap_form detail_form %}
        <br>
        <button class="btn btn-success" onclick="back_list()">리스트로 돌아가기</button>
        <button class="btn btn-primary">수정</button>
        <button class="btn btn-danger" onclick="delete_post()">삭제</button>
        <button class="btn btn-warning" onclick="like_post()">좋아요</button>


    </div>
    <br><br>

    <div class="container">
        <h3>댓글</h3>
        <label for="c_name">이름</label>
        <input type="text"
               class="form-control w-25"
               id="c_name">

        <label for="c_content">내용</label>
        <input type="text"
               class="form-control w-50"
               id="c_content">
        <br>
        <button type="button"
                class="btn btn-info"
                onclick="create_comment()">댓글 등록</button>

        <table class="table table-hover">
            <thead class="thread-dark">
            <tr>
                <th scope="col">댓글 작성자</th>
                <th scope="col">댓글 내용</th>
                <th scope="col">삭제</th>
            </tr>
            </thead>
            <tbody>
            {% for comment in comments %}
                <tr>
                    <td>{{ comment.c_author }}</td>
                    <td>{{ comment.c_content }}</td>
                    <td><button class="btn btn-danger">삭제</button></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <br><br><br>
{% endblock %}
  • 버튼이나 삭제등 추가적인 버튼내용도 작성되어있지만 다음 시간에 알아보도록하고 이렇게 까지 작성하고 해당 상세보기 페이지를 클릭하면 다음과 같은 화면이 출력된다.
profile
초보개발자

0개의 댓글