Django Project를 생성하자
- 아나콘다 프롬프트창에 입력하여 프로젝트 생성
django-admin startproject lecture
- pycharm을 기동해서 project를 open하자
- 개발환경 설정
- 가상환경 설정
- file --> settings --> project interpreter --> anconda에 python3.8버전으로 가상환경 생성
- 새로운 가상환경에 django 설치
conda install django
- 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 파일도 따로 생성해주자
- 이제 세팅은 끝났다 프로젝트가 동작하는지 보기 위해 서버를 기동해보자!
- 기본 테이블을 생성해보자
- 기본 table에 대한 명세서는 이미 Django가 제공
- 제공받은 명세서를 이용해서 table에 DB를 생성해주자
- 터미널에서 해당 명령어를 입력해주자
python manage.py migrate
- 관리자 page를 사용하기 위해 관리자 계정을 생성한다.
python manage.py createsuperuser
- userName, email password를 입력하면 사용할 수 있다.
- 서버 기동
python manage.py runserver
- admin page 동작을 확인한다.
- bbs applicaiton 구현 시작
- table 설계 그림을 참조한다.
- Django는 "ORM" 기능을 이용
- 설계된 Database Table을 Model의 class로 표현
- 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
- "MVT" pattern에 입각해서 URL 처리부터 진행하자
- 현재 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>
- 다음과 같은 메인페이지가 실행되게 된다.
- 게시판 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'), ]
- 위와같이 여러 경로가 있는데 진행하면서 천천히 하나씩 알아보도록 하자.
- 게시판 application의 첫 화면은 게시글에 대한 목록이 출력되어야 할 것이다.
- 해당 화면의 url은 /bbs/list로 할 것이다.
path('list/', views.b_list, name='b_list')
- url을(/bbs/list/)설정했으면 해당 url에 대한 view함수를(b_list)를 생성!
- 해당 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/로 경로를 이동해보자
- 안에 데이터는 임의로 작성해 주었다. 페이지가 잘 작동하는지만 확인하자!
- "새글작성" 기능을 구현해야 한다!
- 새글작성 버튼을 클릭하면 새로운 request URL을 이용해서 서버에 요청을 보내야 한다
- "/bbs/create/" url은 이렇게 사용할 거임
- 위의 bbs/url.py파일을 참고하자.
path('create/' views.b_create, name='b_create')- 모델폼을 이용해 작업을 해보도록 할것이다.
- 모델폼을 이요하면 장고에서 좀 더 편하게 작업할 수 있다.
- 사용자 입력 양식(입력 form)을 HTML Element를 직접 작성해서 만들지 않고 Django가 제공하는 ModelForm을 이용해서 쉽게 처리해 보자
- modelform -> class이다.
- 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 %}
- 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로 이동
- 이제 글 등록 버튼을 만들어야 한다.
- 빈 입력방식 출력은 (GET request)
- 입력된 내용을 Database에 저장은(POST방식 request)
- create.html에 form에서 등록버튼시 post방식으로 해당 경로로 실행되게 한다.
<form action="/bbs/create/" method="post"> <!--views.py b_create에 작성된 것처럼 버튼 클릭시 redirect를 통해 다시 리스트로 돌아간다!-->
- 다음과 같이 화면이 출력되는것을 확인 할 수 있다.
- 각 게시글에 대한 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 %}
- 버튼이나 삭제등 추가적인 버튼내용도 작성되어있지만 다음 시간에 알아보도록하고 이렇게 까지 작성하고 해당 상세보기 페이지를 클릭하면 다음과 같은 화면이 출력된다.