$$config title: 점프 투 장고 2장 Tip keywords: - IT - 점프 투 장고 - 장고, 파이썬 $$ # 장고 파이참 단축키 ### Ctrl + Alt + L : 소스코드 정리 ### Ctrl + Shift + R : 파일명으로 찾기 ### Ctrl + F4 : 파일 하나씩 닫기 # 페이지의 흐름 0. 폼(form)이 필요한 경우 폼 추가 1. 추가한 폼에 맞는 url 별칭이 없으므로 urls.py에 가서 path 경로 설정하여 url 매핑하고 뷰 함수 호출 2. 이제 뷰 함수를 생성해야 하므로 views.py 가서 함수 만들기 3. 리턴 값에 따라 템플릿 만들거나, 링크에 따른 페이지 생성해주기 # 프로젝트 생성 ## 사전 체크 - 콘다 설치 확인 - 파이참 설치 확인 - XAMPP(MariaDB) 설치 확인 + MySQL 서버 on - SQLyog 열어서 연결 - ID, PW 기억해두기 - `CREATE DATABASE mysite;` 입력하여 DB 생성 - 좌측의 ~~@localhost 부분 클릭 후 새로고침 - mysite DB 추가되었는지 확인 ## 세팅 시작 1. 파이참 열기 > New Project 클릭 2. Location 세팅 > C:\work\python_projects\mysite 설정 3. Python Interpreter 섹션 클릭하여 펼치기 (바로 아래 삼각형 버튼 클릭) - New environment using에 체크하고 `Conda` 선택 (새 환경 만듦) - Python Version 선택 > 3.10 추천 - Create 클릭 4. main.py 파일 제거 (장고 할 것이기 때문에 필요 X) 5. 터미널 열기 - 앞에 (mysite) 되어있는지 확인 - `pip install Django==3.2.9` 입력 - `pip install mysqlclient` 입력 - `django-admin startproject config .` 입력 (현재 위치에 config라는 장고 프로젝트를 생성하겠다) 6. settings.py 파일 열기 - LANGUAGE_CODE = `'ko-kr'` 수정 - TIME_ZONE = `'Asia/Seoul'` 수정 - DATABASE 아래와 같이 수정 ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'mysite', # DB명 'USER': 'sbsst', # DBMS 접속 아이디 (SQLyog의 사용자이름이랑 일치, 기본값 : root) 'PASSWORD': 'sbs123414', # DBMS 접속 비번 (SQLyog의 비밀번호랑 일치, 기본값 : '') 'HOST': '127.0.0.1', 'PORT': '3306', 'OPTIONS': { 'init_command': "SET sql_mode='STRICT_TRANS_TABLES'", # 추가, 만약에 이 부분 때문에 오류가 난다면, 이 라인을 지우고 다시 시도해주세요. }, } } ``` 7. 터미널에서 `python manage.py runserver` 입력 (실행 중이어야 하므로 이 터미널 창은 놔두기) 8. 터미널 하나 더 켜서 `python manage.py migrate` 입력 9. SQLyog 에서 ~~@localhost 선택 후 F5 키 눌러 새로고침 - mysite 테이블 클릭 후 여러개의 테이블이 생성 되었는지 확인 10. 파이참으로 돌아와서 터미널에 `python manage.py createsuperuser` 입력 - 사용자이름 : admin - 이메일 : 건너뛰기 - Password : 1234 11. 인터넷 새 탭 > http://localhost:8000/admin 접속 - 설정한 ID, PW 입력후 로그인 되는지 확인 # 2-1 URL과 뷰 ## 앱(App) 생성 - 프로젝트에 기능을 추가하기 위해서는 앱을 생성해야함 - pybo 질답게시판을 만들 것 이므로 앱명은 `pybo` - 앱 생성 명령어 : `django-admin startapp pybo` 또는 `python manage.py startapp pybo` - 앱 등록하였으면 앱이 기능을 할 수 있도록 앱 등록 해주기 - config의 settings.py 들어가서 INSTALLED_APPS 부분에 `'pybo.apps.PyboConfig'`입력하여 추가 - `pybo.apps.PyboConfig` 클래스는 pybo/apps.py 파일에 있는 클래스임 ## 브라우저에 문자열 띄우기 - config/urls.py에서 'pybo/' url 매핑하고 views.index 함수 호출 ```python from django.contrib import admin from django.urls import path from pybo import views # 임포트 추가 urlpatterns = [ path('admin/', admin.site.urls), path('pybo/', views.index), # 추가 ] ``` - views.py에서 index 함수 작성 ```py from django.http import HttpResponse # HttpResponse 임포트 추가 def index(request): return HttpResponse("안녕 pybo에 온 것을 환영해") ``` - index 함수가 실행됨에 따라 화면에 문자열이 띄워짐 - 이 때, index 함수의 매개변수 request는 장고에 의해 자동으로 전달되는 HTTP 요청 객체임 ### 장고의 개발 흐름 정리하기 1. 브라우저에서 로컬 서버로 `http://localhost:8000/pybo` 페이지를 요청하면 2. config/urls.py 에서 /pybo url 매핑을 확인하여 views.index 함수 호출 3. views.py에서 index 함수 실행 -> 브라우저에 결과 띄워줌 ## URL 분리 - 현재는 config/urls.py에 pybo가 직접 매핑 되어있으므로 앞으로 pybo 관련 기능이 추가할 때마다 여기에 계속 수정사항이 추가됨 - 이는 매우 비효율적이며, pybo 앱과 관련된 것은 pybo밖에 안쓰기 때문에 pybo앱의 디렉터리 하위에 위치해야함 - 따라서, config/urls.py에서 애초에 pybo/urls.py로 'pybo'로 시작하는 url은 싹 다 매핑 시키고, pybo 디렉터리에서 알아서 하도록 구조를 바꾸기 - pybo 디렉터리 하위에 `urls.py` 추가 - config/urls.py에서 'pybo/'로 시작되는 url은 모두 다 pybo의 urls.py로 매핑하도록 아래와 같이 코드 수정 (이 뜻이 include('pybo.urls') 인 것 같음) ```py from django.contrib import admin from django.urls import path, include # include 임포트 추가 urlpatterns = [ path('admin/', admin.site.urls), path('pybo/', include('pybo.urls')), # 수정 ] ``` - 그 다음, pybo/urls.py로 가서 아래와 같이 코드 추가하여 views.index 함수 호출하도록 하기 ```python from django.urls import path from . import views urlpatterns = [ path('', views.index), ] ``` - views.py는 그대로 index 함수가 실행되어 아까와 같이 화면에 정상적으로 문자열이 띄워짐 # 2-2 모델 ## 모델 작성하기 - 글자 수 제한 필드 : `CharField(max_length=200)` (최대 200까지) - 글자 수 제한 없는 필드 : `TextField()` - 날짜 및 시간 필드 : `DateTimeField()` - 외래키(Foreign Key) : 두 테이블을 서로 연결하는데 사용되는 키 (즉, 외래키는 다른 모델과 연결하기 위해 사용됨) - 기존 모델을 속성으로 연결하려면 Foreign Key 사용 - 외래키 옵션 <참고> - On_Delete - Cascade : 부모 데이터 삭제 시 자식 데이터도 삭제 - Set null : 부모 데이터 삭제 시 자식 테이블의 참조 컬럼을 Null로 업데이트 - Set default : 부모 데이터 삭제 시 자식 테이블의 참조 컬럼을 Default 값으로 업데이트 - Restrict : 자식 테이블이 참조하고 있을 경우, 데이터 삭제 불가 - No Action : Restrict와 동일, 옵션을 지정하지 않았을 경우 자동으로 선택된다. - On_Update - Cascade : 부모 데이터 업데이트 시 자식 데이터도 업데이트 - Set null : 부모 데이터 업데이트 시 자식 테이블의 참조 컬럼을 Null로 업데이트 - Set default : 부모 데이터 업데이트 시 자식 테이블의 참조 컬럼을 Default 값으로 업데이트 - Restrict : 자식 테이블이 참조하고 있을 경우, 업데이트 불가 - No Action : Restrict와 동일, 옵션을 지정하지 않았을 경우 자동으로 선택된다. ```python from django.db import models # models.py에 Question과 Answer 모델 정의해보기 class Question(models.Model): subject = models.CharField(max_length=200) content = models.TextField() create_date = models.DateTimeField() class Answer(models.Model): question = models.ForeignKey(Question, on_delete=models.CASCADE) # 이 답변과 연결된 질문(Question)이 삭제될 경우 답변(Answer)도 함께 삭제됨 content = models.TextField() create_date = models.DateTimeField() ``` ## makemigrations 실행 -> migrate 실행 - 모델(테이블)이 신규로 생성되거나 변경되면 `python manage.py makemigrations` 먼저 실행 후 `python manage.py migrate` 실행 - makemigrations는 장고가 테이블 작업을 수행하기 위한 작업 파일을 생성하는 명령어로써, 모델을 생성하거나 모델에 변화가 있을 경우에 실행해야 함 - 실제 DB에 테이블이 반영되는 것은 아님(일종의 준비작업). DB에 반영되는건 migrate를 통해서만 이루어짐 - makemigrations를 실행하면 pybo의 migrations에 `0001_initial.py`라는 파이썬 파일이 자동으로 생김 #### ■ **모델 생성 및 변경 작업이 이루어지면 -> makemigrations -> migrate** ## 생성된 모델의 쿼리를 조회하고 싶을 때 => sqlmigrate - `python manage.py sqlmigrate pybo 0001` 입력하면 모델에 해당되는 쿼리문 확인 가능 - pybo는 앱 이름, 0001은 생성된 작업파일의 일련번호를 의미 ## 모델 사용하기 ### 데이터 넣기 - 파이썬 쉘 들어가서 데이터 입력 - 파이썬 쉘 명령어 : `python manage.py shell` ### Question 모델의 데이터 생성 - Question 모델의 질문 데이터 생성하기 전, 두 모델과 timezone 먼저 import 해주기 ```python >>> from pybo.models import Question, Answer # 임포트 해주기 >>> from django.utils import timezone # 임포트 해주기 ``` - 첫번째 질문 데이터 생성하기 ```python >>> q = Question(subject='pybo가 무엇인가요?', content='pybo에 대해서 알고 싶습니다.', create_date=timezone.now()) # Question 모델의 데이터 생성하여 변수 q에 넣어라 >>> q.save() # 저장 >>> q.id # q에 id 출력해라 1 ``` - 두번째 질문 데이터 생성하기 ```python >>> q = Question(subject='장고 모델 질문입니다.', content='id는 자동으로 생성되나요?', create_date=timezone.now()) >>> q.save() >>> q.id 2 ``` - id는 모델 데이터의 유일한 값으로 프라이머리 키(PK:Primary Key)라고도 함 - 이 id 값은 데이터를 생성할 때마다 1씩 증가 ### Question 모델의 데이터 조회 - 저장한 데이터 조회해보기 ```python >>> Question.objects.all() # Question 모델의 모든 데이터 조회 , ]> # 쿼리셋으로 출력됨 ``` - models.py에 아래와 같이 __str__ 메서드 추가하면 쿼리셋으로 해서 객체 자체가 나오는 것이 아니라 제목이 나오도록 할 수 있다 ```python (... 생략 ...) class Question(models.Model): subject = models.CharField(max_length=200) content = models.TextField() create_date = models.DateTimeField() def __str__(self): # 이렇게 추가해준 후 return self.subject (... 생략 ...) ``` - 이렇게 __str__ 메서드를 추가한다음, 모델이 변경되었으므로 장고 셸을 껐다가 다시 시작해야 결과가 반영된다. - 장고 셸 나가기 : `Ctrl + z` 또는 `quit()` 입력 - 장고 셸 들어가기 : `python manage.py shell` - 다시 장고 셸에 들어왔으므로 또 임포트 해주기 ```python >>> from pybo.models import Question, Answer # 모델이 변경되었으므로 나갔다 다시 시작해줘야함 >>> Question.objects.all() , ]> ``` - 이렇게 나옴 - 이렇게 모델에 메서드가 추가될 경우에는 makemigrations와 migrate를 실행해줄 필요가 없다 - migrate 명령이 필요한 경우는 모델의 속성이 변경되었을 때이다! --- - filter : 조건에 해당되는 데이터를 모두 리턴해줌(다건 조회 가능) - filter는 조건에 해당되는 데이터를 모두 리턴해 주기 때문에 다건을 의미하는 QuerySet이 리턴 - id가 1인 Question 데이터 조회 ```python >>> Question.objects.filter(id=1) ]> # id=1인 데이터가 조회됨 ``` - get : 조건에 해당되는 데이터를 딱 한 건만 리턴해줌(유일한 값 한 건만 조회 가능) -> 보통 get은 id와 같은 유일한 값으로 조회할 경우에만 사용 - get은 한 건만 리턴하기 때문에 QuerySet이 아닌 Question 모델 객체가 리턴됨 - get은 조건에 맞는 데이터가 없으면 오류 발생 - id가 1인 Question 데이터만 조회 ```python >>> Question.objects.get(id=1) ]> # id=1인 데이터가 조회됨 ``` #### ■ **filter와 get 차이점** - filter : 조건에 해당하는 모든 데이터가 다 조회됨 / 다건 조회 / 그래서 쿼리셋이 리턴됨 => 조건에 맞는게 없으면 그냥 빈 쿼리셋이 리턴됨 - get : 무조건 조건에 해당하는 유일한 데이터 한 건이 조회됨 / 한 건 조회 / 그래서 그 모델 객체가 리턴됨 => 조건에 맞는게 없으면 오류남 --- - 문자열이 포함된 데이터만 조회할 경우 - 모델명.objects.filter(속성명__contains='문자열') ```python >>> Question.objects.filter(subject__contains='장고') # 다건 조회가 가능하기 때문에 filter ]> ``` ### Question 모델의 데이터 수정 - 저장한 데이터 중 id=2인 데이터를 수정해보기 ```python >>> q = Question.objects.get(id=2) # 먼저 id=2인 데이터를 조회 (id는 유일한 값이므로 get으로 써도 무방) >>> q >>> q.subject = 'Django Model Question' # q의 subject를 이 말로 바꿈 >>> q.save() # 저장 >>> q # 출력 # subject가 수정됨 ``` ### Question 모델의 데이터 삭제 - id=1인 데이터 삭제해보기 ```python >>> q = Question.objects.get(id=1) >>> q.delete() (1, {'pybo.Question': 1}) # 삭제된 객체의 정보가 뜸, 앞의 숫자는 삭제된 데이터의 갯수, 뒤의 숫자는 모델별 삭제된 숫자 ``` - Question 모델이 1개 삭제되었음을 의미함 - 앞의 숫자는 삭제된 데이터의 갯수를 의미하고, 뒤의 숫자는 모델별 삭제된 숫자를 의미 ### Answer 모델의 데이터 생성 - id=2에 대한 답변 생성하기 - 답변 데이터를 만들기 위해서 id=2인 질문을 먼저 조회한 후, Answer의 question 속성에 q를 대입해줌 - 그러면 2번 질문에 대한 답변이 생성 ```python >>> q = Question.objects.get(id=2) >>> q >>> from django.utils import timezone >>> a = Answer(question=q, content='네 자동으로 생성됩니다.', create_date=timezone.now()) >>> a.save() ``` ### Answer 모델의 데이터 조회 - 답변 조회 방법은 Answer의 id 값을 이용하여 조회하면 됨 ```python >>> a = Answer.objects.get(id=1) # id=1인 답변 조회 >>> a ``` - Answer의 객체인 a를 사용하면 답변에 연결된 질문도 조회 가능 ```python >>> a.question ``` - `연결모델명_set(예:answer_set)` - 위와 반대로, 질문에 연결된 답변을 찾는 방법은? - q.answer_set을 사용하면 가능 - Question 모델에는 answer_set이 없으나, Answer 모델에 Question 모델이 ForignKey로 연결되어 있기 때문에 q.answer_set 과 같은 역방향 접근이 가능 - 상식적으로 생각해봐도 됨 - 질문 하나에는 여러개의 답변이 가능하므로 `q.answer_set` 가능 - 답변 하나에는 여러개의 질문이 불가능하므로 `a.question_set` 불가능 - 답변 하나에는 하나의 질문만 가능하므로 `a.question`만 가능 ```python >>> q.answer_set.all() # 연결모델명_set ]> ``` # 2-3 장고 관리자 ## 장고 관리자로 모델 관리 - Question과 Answer 모델을 관리자에 등록하는 방법 - pybo/admin.py에서 `from .models import Question, Answer` 입력하여 임포트 해주기 - `admin.site.register(Question)`와 `admin.site.register(Answer)` 입력 ![image](https://i.esdrop.com/d/g0o6i1xcyvb1/S1ygr8aqRI.JPG) - 위와 같이 Question과 Answer가 추가된 것을 볼 수 있음 - 이제 여기서 신규 질문을 생성하거나 조회, 수정, 삭제 가능 ## 장고 관리자에서 모델 검색 - 관리자 화면에서 제목(subject)으로 질문 검색 기능, 답변내용(content)으로 답변 검색 기능 추가해보기 - pybo/admin.py에서 아래와 같이 수정해주기 ```python class QuestionAdmin(admin.ModelAdmin): search_fields = ['subject'] class AnswerAdmin(admin.ModelAdmin): search_fields = ['content'] admin.site.register(Question, QuestionAdmin) admin.site.register(Answer, AnswerAdmin) ``` ![image](https://i.esdrop.com/d/g0o6i1xcyvb1/5p6LW7ZuxP.JPG) - 위와 같이 검색할 수 있는 창이 생긴 것을 알 수 있음 # 2-4 조회와 템플릿 ## pybo 첫 화면에 질문 목록 띄우기 - 현재는 페이지를 요청하면 "안녕"으로 나옴 - 이 화면을 질문 목록이 출력되도록 index 함수 변경하기 ```python from django.shortcuts import render from .models import Question def index(request): """ pybo 목록 출력 """ question_list = Question.objects.order_by('-create_date') context = {'question_list': question_list} return render(request, 'pybo/question_list.html', context) ``` - 질문 목록 데이터는 `Question.objects.order_by('-create_date')`로 얻을 수 있음 - order_by('-create_date')는 작성일시 역순으로 정렬하라는 의미(즉, 최신순으로) - order_by : 조회 결과를 정렬하는 함수 - `-` 기호가 앞에 붙어 있으면 역방향, 없으면 순방향 - ■ render 함수 - 파이썬 데이터를 템플릿에 적용하여 HTML로 반환하는 함수 - render(request, 적용할 템플릿 네임, 적용할 값(context)) - 위에서 사용한 render 함수는 question_list 데이터를 pybo/question_list.html 이라는 템플릿에 적용하여 HTML을 리턴 - 템플릿이란? HTML 파일과 비슷하지만 장고에서 사용하는 태그를 사용할 수 있는 파일 --- ### 여기서 잠깐 {'question_list' : question_list} 이런건 무엇인가? - 자바라고 생각해보면 Map 과 비슷함 - 형태는 {'키' : 값} 임 - '키'와 값을 정의해놓고 '키'를 부르면 값이 나오는 식 - 아직 잘은 모르겠지만 여기에서는 알아보기 쉽도록 '키'와 값의 이름을 똑같이 해놓은듯 - 결국은 'question_list'를 불러오면 값 question_list가 나오는 것임 ### 템플릿 디렉터리 만들기 및 settings에 등록 - render 함수에서 question_list.html 템플릿을 사용하겠다고 했으므로 이 템플릿을 작성해야함 - 하지만, 템플릿 파일 만들기 전에 그 파일을 저장할 디렉터리 부터 만들어야함 - 템플릿을 저장할 디렉터리는 config/settings.py의 TEMPLATES 항목의 'DIRS' 부분에 아래와 같이 추가 - 'DIRS': [BASE_DIR / 'templates'], - 이때, 'templates' 디렉터리는 여러 앱(pybo, member, product 등)들이 사용하는 경우가 많기 때문에 한 디렉터리에 모아 관리하는 것이 좋음 - 따라서, pybo 안에 만들지 않고 프로젝트 바로 하위에 만들어야함 - 'templates' 디렉터리 안에서 pybo에서 쓸 거면 그 안에 pybo 폴더를 만들면 되는것이고, member에서 쓸 거면 member 폴더를 그 안에서 만들면 되는것! - 우리는, 템플릿을 pybo 앱에서 사용할 것이기 때문에 mysite 바로 하위에 templates 디렉터리를 만들고 그 안에 pybo 디렉터리를 만들기 ### 템플릿 파일 만들기 - 그 다음 pybo 디렉터리 안에 `question_list.html` 파일 추가하여 아래와 같이 작성 ```html {% if question_list %}

{{ question.subject }}

{% else %}

질문이 없습니다.

{% endif %} ``` - `{%`와 `%}`로 둘러싸인 문장들은 템플릿 태그 ### 템플릿 태그에 대해 알기 - 장고의 3가지 태그 유형 알기 1. 분기 ```html {% if 조건문1 %}

조건문1에 해당되는 경우

{% elif 조건문2 %}

조건문2에 해당되는 경우

{% else %}

조건문1, 2에 모두 해당되지 않는 경우

{% endif %} ``` 2. 반복 ```html {% for item in list %}

순서: {{ forloop.counter }}

{% endfor %} ``` 3. 객체 출력 ```html {{ 객체 }} {{ 객체.속성 }} ``` - /pybo/ 첫 화면에 질문 목록 띄우기 완료 ## 질문 상세 페이지 만들기 - 이제 질문 목록 중 한 개를 선택하여 클릭하면 페이지를 찾을 수 없다는 404 오류가 뜸 - why? 'http://localhost:8000/pybo/2/'와 같은 url 매핑이 아직 없기 때문 - 그러면 url을 매핑해주면 됨 ### urls.py 매핑 - 먼저, 질문 목록에 있는 질문 중 하나를 클릭하여 들어가면 이에 해당하는 url은 'http://localhost:8000/pybo/2/'과 같이 맨 뒤가 숫자로 되어있는 형태임(숫자는 id 값이며 질문 생성 시 자동으로 매겨지는 값) - 숫자가 2라고 친다면, 이 url의 의도는 "id 값이 2인 Question을 상세 조회한다"는 뜻이 됨 - 이 url이 동작할 수 있도록 pybo/urls.py로 가서 urlpatterns 안의 두번째 줄에 아래 코드를 추가하자. ```python path('/', views.detail), ``` - 이 코드의 의미는 숫자 question의 id가 url로 매핑되면 views의 detail 함수를 호출하라는 의미임 (detail은 여기서 그냥 상세 페이지니깐 detail 같은거로 알아보기 쉽게 지은 것) - 그 다음 할일은? detail 함수를 호출한다고 하였으니, views의 detail 함수를 생성하면 됨 ### views.py에서 함수 만들기 - views.py로 가서 아래와 같이 코드 추가하여 detail 함수 생성해주기 ```python def detail(request, question_id): # 이 페이지가 실행되기 위해서는 detail 함수의 url 매핑에 question_id가 필요하므로 question_id를 매개변수에 넣어줘야함 """ pybo 내용 출력 """ question = Question.objects.get(id=question_id) # Question의 객체들(등록한 질문들) 중 id=question_id 인거를 무조건 한건만 조회해서 question에 넣음 context = {'question': question} # question이란 변수에 넣은게 결국 값이 되고 키는 'question' 으로 정의하여 context에 대입 return render(request, 'pybo/question_detail.html', context) ``` - 여기서는 질문 상세 즉, 질문 목록 중 딱 한 가지의 질문만 뽑아서 보여주는 질문 상세 페이지이므로 한 건만 조회가 가능한 get을 써야함 - 질문 한 개를 보여주려면 조건이 id 값이 question_id 이여야 하므로 get(id=question_id)라고 써야함 - 여기서도 'question_detail.html' 템플릿을 적용하겠다고 하였으므로 또 템플릿 만들어주면 됨 ### question_detail.html 템플릿 만들기 - templates 디렉터리의 pybo 디렉터리 안에 `question_detail.html` 파일 추가하여 아래와 같이 작성 ```html

``` - {{ question.subject }}과 {{ question.content }}의 question은 detail 함수에서 context로 넘겨받은 데이터 - 이제 다시 http://localhost:8000/pybo/2/ 페이지를 요청해보면 잘 나오는 것을 볼 수 있다. ## 오류 페이지를 "Not Found (404)" 페이지로 나오도록 해보기 - 'http://localhost:8000/pybo/30' 과 같이 question_id가 없는 숫자의 페이지를 요청하면 DoesNotExist 오류(오류코드 500)가 발생할 것임 - 이렇게 없는 데이터를 요청할 경우 500 오류 페이지 보다는 "Not Found (404)" 페이지로 리턴하는 것이 바람직함 - HTTP 주요 응답코드의 종류 - 200 성공(OK) - 500 서버오류 (Internal Server Error ) - 404 서버가 요청한 페이지(Resource)를 찾을 수 없음 (Not Found) - 위 요청 페이지처럼 없는 데이터를 요청할 경우 404 페이지를 출력하려면 views의 detail 함수를 수정해줘야함 - `get_object_or_404` 임포트 해주기 - 첫번째줄을 `question = get_object_or_404(Question, pk=question_id)`로 수정해주기 (설마 그건가..object를 한개만 보여주거나 or 404 보여주거나) - question_id를 받아 Question객체(model에서 정의된)들 중 pk값이 question_id인 것이 있으면 가져오고 그렇지 않으면 404 에러를 발생시켜라 - pk는 Question 모델의 기본키(Primary Key)인 id를 의미함 # 2-5 URL과 네임스페이스 ## url 의 하드코딩을 없애기 위해 url 별칭 만들기 - 현재의 url 링크는 실제 링크가 매핑되어 있어, 웹 프로그램이 발전할 때마다 자주 변경될 가능성이 큼 - 그때마다 템플릿에서 사용한 모든 url들을 일일이 찾아가며 수정할 수는 없음 - 따라서, 해당 url에 대한 실제 링크 대신 링크의 주소가 매핑되어 있는 별칭을 사용해야함 - 링크의 주소 대신 별칭을 사용하려면 url 매핑에 name 속성을 부여해야함 - 또한, 후에 pybo 말고 다른 앱이 프로젝트에 추가 될 수도 있을 것이므로, 서로 다른 앱에서 동일한 url 별칭을 사용하여 중복이 발생되지 않도록 app_name 변수를 지정해줘야함 - pybo/urls.py에서 아래와 같이 각각의 path에 name을 추가해주고 app_name 변수도 지정해주자 ```python from django.urls import path from . import views app_name = 'pybo' urlpatterns = [ path('', views.index, name='index'), path('/', views.detail, name='detail'), ] ``` - 이제 urls에서 별칭을 부여해줬으면 템플릿에서 별칭을 사용해주면 됨 - pybo/question_list.html에서 ``을 ``으로 바꿔주기 - app_name을 지었으면 사용할 때도 별칭 앞에 붙여줘야 함. app_name을 pybo라고 지었으므로 detail 앞에도 pybo를 붙여줘 `'pybo:detail'`로 써주기 - 여기서 question.id는 URL 매핑에 정의된 ``에 전달해야 하는 값을 의미함 # 2-6 데이터 저장 ## 질문 상세 페이지에서 답변등록 폼 만들기 - 질문 상세 페이지로 가면 그 페이지에서 한 개의 질문과 함께 답변을 등록할 수 있는 화면이 있어야 하므로 질문 상세 템플릿에 답변을 저장할 수 있는 폼을 추가하자 - pybo/question_detail.html에서 아래와 같이 폼을 추가하기 ```html ``` - 여기 form 태그의 action은 href와 같은 느낌의 태그로 클릭 시 이동하는 링크와 같은 의미 - 답변 저장을 위한 url로 form 태그의 action 속성에`{% url 'pybo:answer_create' question.id %}`로 지정함 - `{% csrf_token %}`는 보안에 관련된 항목으로 form으로 전송한 데이터가 실제 웹 페이지에서 작성한 데이터인지를 판단해 주는 가늠자 역할을 함 - 따라서 form 태그 바로 밑에 {% csrf_token %} 태그를 항상 위치시키도록 해야함 - `

`는 텍스트 창을 뜻함
- `<input type="submit">`은 폼 -헨들러 (form- handler)에게 폼을 제출하는 버튼을 정의함
  - 폼-헨들러(form-handler) : 일반적으로 입력 자료를 처리할 스크립트로 이루어진 서버페이지
  - 폼-헨들러(form-handler)는 폼의 action 속성에 명시되며 일반적으로 수신된 입력을 가지고 무언가를 수행함
- <span style="color:blue">즉, `<input type="submit">`이라는 것은 그냥 쉽게 생각해서 저 action의 링크에게 폼을 제출하는 버튼이라고 생각하면 됨!!</span>

## 지정한 answer_create 별칭이 없으므로 url 매핑하기
- question_detail.html 에서 위와 같이 폼 추가한 후 페이지 요청하면 answer_create 별칭을 찾을 수 없다는 오류가 뜸
- 그러므로, pybo/urls.py에 가서 answer_create 별칭에 대해 매핑 해줘야함
- urlpatterns의 안에 `path('answer/create/<int:question_id>/', views.answer_create, name='answer_create'),`라고 한 줄 더 추가해주기

## 이제는 views.py에서 호출한 answer_create 함수가 없으므로 함수 만들어주기
- urls.py에서 호출한 answer_create 함수를 만들어주기 위해 views.py로 가기
- 아래와 같이 함수 추가
```python
from django.shortcuts import render, get_object_or_404, redirect # redirect 추가 임포트
from django.utils import timezone # 추가 임포트
from .models import Question

(... 생략 ...)

def answer_create(request, question_id): # 여기서의 request에는 사용자가 적은 답변 내용이 넘어옴, urls도 보면 답변등록시 question_id도 넘겨지므로 'question_id'도 매개변수로 적어줘야함
    """
    pybo 답변등록
    """
    question = get_object_or_404(Question, pk=question_id) #question_id를 받아 Question객체(model에서 정의된)들 중 pk값이 question_id인 것이 있으면 가져오고 그렇지 않으면 404 에러를 발생시켜라
    question.answer_set.create(content=request.POST.get('content'), create_date=timezone.now())
    return redirect('pybo:detail', question_id=question.id)
```
- 여기서의 request는 답변등록 텍스트 창에서 입력된 내용임
- `content=request.POST.get('content')`는 텍스트창에 입력된 POST 형식의 'content'라는 `<textarea>` 이름
  - <span style="color:red">사용자가 텍스트창에 입력한(즉, 답변내용) (=request), POST 방식의(=POST), name이 'content'인 텍스트 창 \<textarea>를 꺼내(=get) content라고 하겠다.</span>
- 그리고 답변을 생성하기 위해 `question.answer_set.create` 사용
  - `question.answer_set.create`는 '질문에 연결된 답변을 생성한다'라는 의미
  - Question과 Answer 모델은 서로 ForeignKey 로 연결되어 있기때문에 이처럼 사용할 수 있음
- 답변을 생성한 후 질문 상세 화면을 다시 보여주기 위해 redirect 함수를 사용
  - 사용법 : redirect('앱 네임:url로 이동할 경로(=별칭)', 넘겨야하는 값 써주기)
- detail 별칭은 question_id가 필요하므로 `question.id`를 인수로 전달함

## 답변을 등록하면 등록된 답변이 질문 상세 화면에 보이도록 하기
- 현재 답변 등록하기 버튼을 누르면 저장은 되지만 화면에 저장된 답변이 표시되지는 않음
  - why? 우리는 아직 등록된 답변을 표시하는 기능을 템플릿에 추가하지 않았기 때문
- 저장된 답변이 화면에 표시되도록, 템플릿 question_detail.html에서 가운데 부분에 아래와 같은 코드 추가하기
```html
<h5>{{ question.answer_set.count }}개의 답변이 있습니다.</h5>
<div>
    <ul>
    {% for answer in question.answer_set.all %}
        <li>{{ answer.content }}</li> 
    {% endfor %}
    </ul>
</div>
```
- 위와 같이 중간 부분에 답변을 확인할 수 있는 영역을 추가해 줌
- 이렇게 수정하고 다시 질문 상세 화면을 새로고침 해보면 등록된 답변이 화면에 표시되는 것을 볼 수 있음

# 2-7 스태틱
## 파이보에 스타일시트 적용해보기
- 스타일시트를 적용하려면 스타일시트 파일을 만들어야하는데, 그 전에 그 스타일시트를 저장할 스태틱 디렉터리 부터 만들어야함
- 스태틱 디렉터리도 템플릿 디렉터리와 마찬가지로 config/settings.py에 등록해줘야함
- config의 setting.py에 가서 아래와 같이 수정해주기
```python
(... 생략 ...)

STATIC_URL = '/static/'
STATICFILES_DIRS = [   # 이 부분 추가
    BASE_DIR / 'static',
]

(... 생략 ...)
```
- 위와 같이 STATICFILES_DIRS 변수를 추가하고 STATICFILES_DIRS에는 `BASE_DIR / 'static'` 디렉터리를 추가함
- 이제, mysite 디렉터리 바로 하위에 static 디렉터리 생성하기
  - 이때도, pybo 디렉터리 하위에 static 디렉터리를 추가하는 것은 권장하지 않으므로 mysite 바로 하위에 static 디렉터리 추가하기
- static 디렉터리 생성했으면 그 안에 style.css 파일 생성하고 아래와 같이 코드 추가하기
```css
textarea {
    width:100%; 
}

input[type=submit] {
    margin-top:10px; 
}
```
- 이제 작성한 스타일시트 파일을 질문 상세 템플릿에 적용해보자
- question_detail.html에 가서 최상단에 아래와 같이 코드 추가해주기
```html
{% load static %} 
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> 
<h1>{{ question.subject }}</h1>
(... 생략 ...)
```
- 템플릿에 스타일시트와 같은 스태틱 파일을 적용하기 위해서는 위와 같이 템플릿 최상단에 `{% load static %}` 태그 삽입해야함
- 또한, 스타일시트 파일 경로는 `{% static 'style.css' %}`처럼 스타일시트가 위치해있는 경로를 지정해주면 됨
  - style.css 파일이 static 디렉터리 안에 있으므로 `{% static 'style.css' %}` 이렇게 써준것

# 2-8 부트스트랩
## 부트스트랩 설치하고 적용해보기
- 부트스트랩(Bootstrap)이란 웹 페이지를 만들 수 있도록 도와주는 프레임워크
  - 부트스트랩은 트위터를 개발하면서 만들어졌고, 현재 지속적으로 관리되고 있는 오픈소스 프로젝트임
### 부트스트랩 설치
- 먼저, 부트스트랩 홈페이지에 가서 다운로드 하기
- 부트스트랩 다운로드 링크 : [https://getbootstrap.com/docs/4.6/getting-started/download/](https://getbootstrap.com/docs/4.6/getting-started/download/)
- 점프 투 장고에서는 부트스트랩 버전5에서 정상 작동하지 않으므로 4버전으로 설치하기
- 부트스트랩 홈페이지 접속 후 "Download" 버튼을 클릭하면 `bootstrap-4.6.0-dist.zip` 파일이 다운로드 됨
- 다운로드 된 압축파일을 살펴보면 많은 파일들이 있는데 이 중 css>'bootstrap.min.css' 파일을 선택하여 복사 -> C\work\python_projects\mysite\static 까지 가서 그대로 'bootstrap.min.css' 파일 붙여넣기
  - 이것이 홈페이지에서 다운로드 한 부트스트랩 파일을 복사하여 static 디렉터리에 저장하는 방법임

### 부트스트랩 적용
- 이제 부트스트랩을 다운로드 하고 설치까지 했으니, 적용해보자
- 먼저, 질문 목록(question_list) 템플릿에 적용해보자
- question_list.html에 가서 아래와 같이 코드 추가해주기
  - 위에서 말했던 것처럼 템플릿에 스태틱 파일을 적용할 때에는 템플릿 최상단에 {% load static %} 태그 삽입해주고 부트스트랩이 위치해있는 경로(static 디렉터리 안의 'bootstrap.min.css' 파일)를 지정해주면 됨
```html
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<div class="container my-3">
    <table class="table">
        <thead> 
        <tr class="thead-dark"> 
            <th>번호</th>  
            <th>제목</th>
            <th>작성일시</th>
        </tr>
        </thead>
        <tbody> 
        {% if question_list %}
        {% for question in question_list %}
        <tr> 
            <td>{{ forloop.counter }}</td> 
            <td>
                <a href="{% url 'pybo:detail' question.id %}">{{ question.subject }}</a>
            </td>
            <td>{{ question.create_date }}</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td colspan="3">질문이 없습니다.</td> 
        </tr>
        {% endif %}
        </tbody>
    </table>
</div>
```
- 기존에는 `<ul>`태그로 심플하게 작성했던 질문 목록을 테이블 구조로 변경함
- 하나의 \<table> 안에 \<thead>와 \<tbody>로 이루어져 있으며, \<thead>는 테이블의 속성을 적어주는 부분이고, \<tbody>는 데이터가 들어가는 부분
- \<tr>태그는 행을 가리키고, \<th>, \<td>는 열(칸)을 가리킴
  - \<th>와 \<td>의 다른 점은 둘 다 똑같이 열(칸)을 나타내나 \<th>태그를 쓰면 글씨가 강조됨
- 번호는 for 문의 현재 순서를 의미하는 {{ forloop.counter }}를 이용
- 여기서 사용된 `class="container my-3"`, `class="table"`, `class="thead-dark` 등은 부트스트랩 스타일에 정의되어 있는 클래스
- \<td colspan="3">은 3개의 칸을 가로로 합병했다는 뜻
  - rowspan은 세로로 합병했다는 뜻 (추후 공부 예정)
- 질문 목록 페이지를 다시 새로고침 해보면 부트스트랩이 적용된 화면을 볼 수 있음
- 이어서 질문 상세 템플릿도 부트스트랩을 적용하자
- question_detail.html에 가서 기존의 코드를 싹 다 지우고 아래의 코드를 추가하자
```html
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">

<div class="container my-3">
    <h2 class="border-bottom py-2">{{ question.subject }}</h2>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;">{{ question.content }}</div>
            <div class="d-flex justify-content-end">
                <div class="badge badge-light p-2">
                    {{ question.create_date }}
                </div>
            </div>
        </div>
    </div>
    <h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
    {% for answer in question.answer_set.all %}
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;">{{ answer.content }}</div>
            <div class="d-flex justify-content-end">
                <div class="badge badge-light p-2">
                    {{ answer.create_date }}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    <form action="{% url 'pybo:answer_create' question.id %}" method="post" class="my-3">
        {% csrf_token %}
        <div class="form-group">
            <textarea name="content" id="content" class="form-control" rows="10">

``` - 위에 사용된 부트스트랩 클래스를 정리한 표 ![image](https://i.esdrop.com/d/g0o6i1xcyvb1/qytsiicLF8.PNG) - 또한 질문 내용과 답변 내용에는 `style="white-space: pre-line;"` 과 같은 스타일을 지정해 줌 - 글 내용의 줄 바꿈을 정상적으로 보여주기위해 적용한 스타일임 # 2-9 템플릿 상속 ## 표준 HTML 구조의 예 - 지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아님 - 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동 하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야함 - 표준 HTML 문서의 구조는 아래와 같아야함 - 표준 HTML 구조의 예시 ```html {% load static %} Hello, pybo! (... 생략 ...) ``` - 표준 HTML 문서의 구조는 위의 예처럼 html, head, body 엘리먼트가 있어야 하고, CSS 파일은 head 엘리먼트 안에 있어야함 - 또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야함 - 앞에서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정해보려면 body 엘리먼트 바깥 부분은 모두 같은 내용으로 중복됨 -> 그러면 CSS 파일 이름이 변경되거나 새로운 CSS 파일이 추가될 때마다 모든 템플릿 파일을 일일이 수정해야하는 불편함이 생김 - 장고는 이러한 중복과 불편함을 해소하기 위해 템플릿 상속 기능을 제공 - 템플릿 상속은 기본 틀이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법 ## 템플릿 상속 기능 사용하기 ### base.html 만들기 - 먼저, 템플릿의 상속 기능을 사용해보기 위해 기본 틀이 되는 `base.html` 템플릿을 만들고 아래와 같이 작성하자 - 이때, base.html은 templates 디렉터리 바로 하위에 만들어야 함 ```html {% load static %} Hello, pybo! {% block content %} {% endblock %} ``` - base,html 템플릿은 모든 템플릿이 상속해야 하는 템플릿으로 표준 html의 기본 틀이 됨 - body 엘리먼트 안의 {% block content %} 와 {% endblock %} 템플릿 태그는 base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역이 됨 ### question_list.html 수정하기 - 그 다음, question_list.html 템플릿에서 부트스트랩을 적용했던 맨 위의 코드 2줄을 삭제하고 아래와 같이 수정하기 - 상단의 두 줄을 삭제한 이유는 base.html에 이미 있는 내용이므로 삭제시킨 것 ```html {% extends 'base.html' %} {% block content %}

(... 생략 ...)

{% endblock %} ``` - base.html 템플릿을 상속하기 위해 `{% extends 'base.html' %}` 처럼 extends 템플릿 문법을 사용함 - 그리고 `{% block content %}` 와 `{% endblock %}` 사이에 `question_list.html`에서만 쓰이는 내용을 작성함 - 이렇게 함으로써, question_list.html은 base.html 템플릿을 상속받아 표준 html 문서로 바뀌게 될 것임 ### question_detail.html 수정하기 - `question_detail.html`도 마찬가지 방법으로 아래와 같이 코드를 수정하자 - 맨 위의 코드 2줄은 base.html에 있는 내용이므로 삭제하고 아래와 같이 수정하기 ```html {% extends 'base.html' %} {% block content %}

(... 생략 ...)

{% endblock %} ``` - `question_detail.html`도 `question_list.html`처럼 `{% extends 'base.html' %}` 템플릿 태그를 맨 위에 추가하고 기존 내용 위 아래로 `{% block content %}`와 `{% endblock %}`를 작성함 - 이렇게 base.html 템플릿을 이용하여 템플릿 상속을 적용한 후 질문 목록과 질문 상세 페이지를 조회해보자 - 화면에 보여지는 것은 똑같지만 html 구조로 변경되어 단단한 느낌이 든다. ### style.css 안의 내용 삭제하기 - 그리고 부트스트랩 적용으로 인해 `style.css`의 내용은 필요가 없어졌으므로 기존 내용을 모두 삭제하기 - 이 파일은 이후 부트스트랩으로 표현할 수 없는 스타일을 위해 사용할 예정이기 때문에, 파일 자체는 삭제하지 말고 빈 파일로 남겨두기 # 2-10 폼 ## 질문 등록 기능 만들기 - 질문을 등록하려면 먼저 "질문 등록하기" 버튼이 있어야함. 근데 상식적으로 질문 등록하기 버튼을 어디다 만들어야 되겠음? 질문 목록 페이지에서 만들어야 되겠지. - 질문 목록 페이지에서 질문 목록 하단에 버튼을 생성해보자 - 질문 목록 아래에 버튼을 생성해야 하므로 `question_list.html`에서 `` 태그가 끝난지점, `

` 다음 줄에 아래의 코드 추가하기 ```html (... 생략 ...) 질문 등록하기 {% endblock %} ``` - `` 과 같은 링크이지만 부트스트랩의 `btn btn-primary` 클래스를 적용하면 버튼으로 보임 - "질문 등록하기" 버튼을 누르면 가지는 url의 별칭을 question_create라고 지었음 - 이 뜻은, 버튼을 클릭하면 `pybo:question_create` 별칭에 해당하는 url이 호출된다는 뜻 ### url 매핑 - 이 다음에 해야할 일은? `pybo:question_create` 별칭에 해당하는 url 매핑을 추가해야함 - pybo의 urls.py에 가서 urlpatterns 안에 아래의 코드를 추가하자 ```python (... 생략 ...) urlpatterns = [ (... 생략 ...) path('question/create/', views.question_create, name='question_create'), # 추가 ] ``` - 위와 같이 `views.question_create` 함수를 호출하도록 매핑함 ### 폼(Form) - 그럼 다음에 해야할 일은? 흐름에 따라 `views.question_create` 함수를 작성해야함 - 하지만 그 전에 폼(form)에 대해 먼저 알아보자 - 폼(form)이란? - 쉽게 말해 페이지 요청시 전달되는 파라미터들을 쉽게 관리하기 위해 사용하는 클래스. - 폼은 필수 파라미터의 값이 누락되지 않았는지, 또는 파라미터의 형식은 적절한지 등을 검증할 목적으로 사용함 - 이 외에도 HTML을 자동으로 생성하거나 폼에 연결된 모델을 이용하여 데이터를 저장할 수도 있음 - 이제, 질문 등록시 사용할 QuestionForm을 만들어보자 - 먼저, mysite의 pybo 디렉터리 안에 `forms.py` 파일을 생성하자 - forms.py를 생성했으면 아래와 같이 QuestionForm 생성 코드를 추가해주자 ```python from django import forms from pybo.models import Question class QuestionForm(forms.ModelForm): class Meta: # 모델 폼을 사용할 경우 이너 클래스로 Meta 클래스를 반드시 사용해야함 model = Question # 사용할 모델 fields = ['subject', 'content'] # QuestionForm에서 사용할 Question 모델의 속성 ``` - QuestionForm은 모델 폼(forms.ModelForm)을 상속했음 - 장고의 폼은 일반 폼(forms.Form)과 모델 폼(forms.ModelForm)이 있는데 모델 폼은 모델(Model)과 연결된 폼으로, 폼을 저장하면 연결된 모델의 데이터를 저장할 수 있는 폼 - 모델 폼은 이너 클래스인 `Meta` 클래스가 반드시 필요함 - 폼도 그냥 다짜고짜 만들어지는 것이 아닌 어떠한 것을 모델로 삼아줘야 그걸 기준으로 만들 수 있으므로 model = Question 이라고 선언해준것임 - `Meta` 클래스에는 `사용할 모델`과 `모델의 속성`을 적어야함 - 즉, QuestionForm은 `Question 모델`과 연결된 폼이고 속성으로 Question 모델의 `subject`와 `content`를 사용한다고 정의한 것임 ### 뷰 함수 - 자, 이제 다시 흐름으로 돌아와 `views.question_create` 함수를 아래와 같이 작성하자 - views.py에 가서 아래와 같이 question_create 함수 추가하기 ```python from .forms import QuestionForm # 추가 (... 생략 ...) def question_create(request): # 함수 추가 """ pybo 질문등록 """ form = QuestionForm() return render(request, 'pybo/question_form.html', {'form': form}) ``` - 질문 등록시 사용하는 QuestionForm()을 form 변수에 대입 - render 함수를 사용하여 'pybo/question_form.html' 이라는 템플릿에 form 데이터를 적용하여 화면을 띄운다는 뜻 - render 함수에 전달한 {'form': form}은 템플릿에서 질문 등록시 사용할 폼 엘리먼트를 생성할 때 쓰임 ### 템플릿 - 이제 템플릿을 작성할 차례임 - return 값에 따라 `pybo/question_form.html` 템플릿을 생성해줘야 하므로, templates의 pybo 폴더 안에 `question_form.html` 파일 만들고 아래와 같이 코드 추가하기 ```html {% extends 'base.html' %} {% block content %}

질문등록

{% endblock %} ``` - 템플릿에서 사용한 `{{ form.as_p }}`의 form은 question_create 함수에서 전달한 QuestionForm의 객체임 - `{{ form.as_p }}`는 폼에 정의한 subject, content 속성에 해당하는 HTML 코드를 자동으로 생성함 - 위 코드에서 한 가지 눈여겨 보아야 할 부분이 있음 - `

` 처럼 form 태그에 action 속성을 지정하지 않았다는 점임 - 원래는 form 태그에는 항상 action 속성을 지정해서 submit 실행시 action에 정의된 url로 폼을 전송해야함 - 하지만 여기서는 특별하게 action 속성을 지정하지 않았음 -> form 태그에 action 속성을 지정하지 않으면 현재 페이지의 URL이 디폴트 action으로 설정됨 - action 속성을 지정하지 않은 이유는 만약, action 속성을 정확하게 지정해버리면 question_form.html 템플릿은 "질문 등록"에서만 사용할 수 밖에 없음 - 이 이후에 진행할 "질문 수정"이라든지 이러한 질문에 관련된 일을 수행해야 하는 경우 이 템플릿을 활용할 수가 없음 - 왜냐하면 질문 수정일 경우에는 action 값을 달리해야 하기 때문 - 이처럼 동일한 템플릿을 여러 기능에서 함께 사용해야할 경우 이러한 것처럼 form의 action 속성을 비워두는 기법을 종종 사용함 - 이후에 "질문 수정" 기능을 구현할 때도 question_form.html 템플릿을 사용할 것이므로 action 속성은 비워두도록 하자 ### GET과 POST - 이제 지금까지 진행한 것들이 잘 동작하는지 브라우저에서 확인해보자 - forms.py와 같은 신규 파일을 작성했으면 로컬 서버를 껐다가 다시 재시작 해줘야 브라우저에 반영이 될 것임 - 잘 동작하는지 확인하기 위해 질문 목록 페이지를 요청해보면 아래와 같이 "질문 등록하기" 버튼이 추가되어 있는 것을 볼 수 있음 ![image](https://i.esdrop.com/d/g0o6i1xcyvb1/tQXZ9jKUr1.JPG) - "질문 등록하기" 버튼을 클릭하면 아래와 같이 "질문 등록" 화면이 나타남 ![image](https://i.esdrop.com/d/g0o6i1xcyvb1/GFxNa9nseV.JPG) - 여기서 subject와 content 입력 창에 아무거나 치고 "저장하기" 버튼을 클릭해보자 - 아무런 반응이 없을 것이다. 왜냐하면 question_create 함수에 데이터를 저장하는 코드를 아직 작성하지 않았기 때문임 - 이제, question_create 함수에 데이터를 저장하는 코드를 작성해보자 - views.py에 가서 아래와 같이 question_create 함수를 수정하기 ```python def question_create(request): """ pybo 질문등록 """ if request.method == 'POST': # request 즉, 넘겨받은 데이터의 방식이 POST이면 form = QuestionForm(request.POST) # POST로 들어온 QuestionForm을(즉, QuestionForm 안에 내용이 채워져 있다는 뜻) 그걸 form이라는 변수에 지정해줘라 if form.is_valid(): # 변수 form이 유효하다면(QuestionForm이 형식이 제대로 잘 채워져 있다면) question = form.save(commit=False) # form을 임시 저장해서 question 변수에 대입 question.create_date = timezone.now() # question의 create_date를 현재 일시로 넣기 question.save() # question 저장해줘라 return redirect('pybo:index') # index 함수를 실행하여 질문 목록 페이지로 이동시켜라(왜 이동시키냐? QuestionForm에 내용이 있으므로 질문이 잘 저장되었기 때문) else: # request 방식이 get이면 form = QuestionForm() # (get 방식이라면 링크를 타고 화면에 처음 띄워지는 것이기 때문에 데이터 없는 빈 폼을 보여줘야겠지?) 그걸 form 변수에 대입 context = {'form': form} # html에서 빈 QuestionForm() 화면을 보여줘야 하므로(=비어있는 양식을 보여줘야 하므로) 변수로 지정한 form에 대한 키를 'form'이라고 정하고 context에 저장 => 그래야 html에서 키 form을 불렀을때 해당 값 form, 즉 QuestionForm()이 나오지! return render(request, 'pybo/question_form.html', context) # get 방식이므로 당연히 데이터가 없는 상태에서 들어올 것이기 때문에 질문 작성 양식인 form 템플릿을 보여줘야겠지? 그래서 render 함수를 써서 템플릿을 적용시켜 보여줌, 이때 적용시킬 데이터(불러올 데이터는 QuestionForm()이므로 form의 변수 context를 넣어줌) ``` - 여기서 중요한 부분은 동일한 url 요청을 post, get 요청 방식에 따라 다르게 처리한 부분임 - if가 post 방식이라면~ 이고, else가 get 방식이라면~ 임 - 질문 목록 화면에서 "질문 등록하기" 버튼을 클릭한 경우 `/pybo/question/create/` 페이지가 get 방식으로 요청되어 question_create 함수가 실행됨 - 왜냐하면 `질문 등록하기`과 같이 링크를 통해 페이지를 요청할 경우 무조건 get 방식이 사용되기 때문 - 근데 이렇게 이해하면 어려우므로 그냥 어떤 링크를 타고 그 화면을 처음으로 우리에게 보여줄땐 get 방식이라고 생각하면 됨 - 따라서 이 경우 `request.method` 값이 get이 되어 else 구문을 타게 되고 질문 등록 화면을 보여주게 됨 - 그 다음, 질문 등록 화면에 온 상태에서 subject, content 항목에 값을 기입하고 "저장하기" 버튼을 클릭하면 이번에는 동일한 `/pybo/question/create/` 페이지가 post 방식으로 요청됨 - 왜냐하면 question_form.html의 저장하기 버튼을 보면 form 태그에 action 속성이 지정되지 않으면 현재 페이지가 디폴트 action으로 설정되기 때문 - 결국 이 말 뜻은 우리한테 화면을 띄워준 후(이때는 get) 우리 쪽에서 무언가를 작성 후 제출? 저장? 하면 그게 post 방식으로 이루어진다고 보면 됨 - get은 가져오다, post는 부치다, 제출하다 의미를 생각하면 좀 더 쉽게 이해할 수 있음 - 따라서 질문 등록 화면에서 "저장하기" 버튼을 클릭하면 question_create 함수가 실행되고 `request.method` 값은 POST가 되어 if-else문에서 if문이 실행될 것임 - get 방식에서는 `form = QuestionForm()` 처럼 QuestionForm을 인수 없이 생성했지만 post 방식에서는 `form = QuestionForm(request.POST)` 처럼 `request.POST`를 인수로 생성함 - `request.POST`를 인수로 QuestionForm을 생성할 경우에는 `request.POST`에 담긴 subject, content 값이 QuestionForm의 subject, content 속성에 자동으로 저장되어 객체가 생성됨 - `request.POST`에는 화면에서 사용자가 입력한 내용들이 담겨있음 - `form.is_valid()`는 form이 유효한지를 검사함. 만약 form에 저장된 subject, content의 값이 올바르지 않다면 form에는 오류 메시지가 저장되고 `form.is_valid()`가 실패하여 다시 질문 등록 화면으로 돌아감 - 이 때 form에 저장된 오류 메시지는 질문 등록 화면에 표시됨 - form이 유효하다면 그 이후의 문장이 수행되어 질문 데이터가 생성됨 - `question = form.save(commit=False)`는 form으로 Question 데이터를 저장하기 위한 코드이며, 여기서 `commit=False`는 임시 저장을 의미함 - 만약, `form.save(commit=False)` 대신 `form.save()`를 수행하면 Question 모델의 create_date에 값이 없다는 오류가 발생함 - why? QuestionForm에는 현재 subject, content 속성만 정의되어 있고 create_date 속성은 없기 때문 - 이러한 이유로 임시 저장을 한 후 question 객체를 리턴받아 create_date에 값을 설정한 후 `question.save()`로 실제 저장하는 것임 - 참고) create_date 속성은 데이터 저장 시점에 자동 생성해야 하는 값이므로 QuestionForm에 등록하여 사용하지 않음 - 그리고 마지막으로 저장이 완료되면 `return redirect('pybo:index')`를 호출하여 질문 목록 화면으로 이동하게 됨 - 그럼 이제 질문 등록이 잘 될 것이다! - 결론은 그것! 질문 등록의 경우 맨 처음 question_list 화면(질문 목록 화면)에서 "질문 등록하기" 버튼을 클릭하면 views의 question_create 함수가 실행하게 되고, 이 때는 링크를 통해 페이지가 요청되는 것이므로 if-else 구문에서 else를 타 get 방식으로 이루어짐 -> question_form.html (질문 등록 화면)을 보여줌 - 그 다음, 질문 등록 화면에서 사용자가 subject와 content에 내용을 입력하여 "저장하기" 버튼을 클릭하면 이번에는 "저장하기" 버튼에 있는 form 태그에 action 속성이 지정되지 않았으므로 현재 페이지가 디폴트 action으로 설정이 됨. 이 의미는 post 방식으로 실행된다는 뜻이며 if-else문에서 if 를 타게 됨. 그래서 form이 유효한지를 검사하고 쭈우욱 실행하여 데이터를 저장시킴 -> 그 후 마지막에 index 함수를 실행하여 처음 화면인 질문 목록 화면을 보여줌 ### 폼 위젯 추가하기 (세련된 화면을 위한 부트스트랩 적용) - 이제 질문 등록까지는 잘 되지만 한 가지 아쉬운 점이 있음 - 우리는 화면을 깔끔하게 만들어줄 수 있는 부트스트랩이 있는데 `{{ form.as_p }}` 태그는 html 코드를 자동으로 생성하기 때문에 부트스트랩을 적용할 수 없음 - 이것에 대한 해결방법은 완벽하지는 않지만 QuestionForm을 조금 수정하면 어느정도 해결이 가능함 - forms.py에 가서 QuestionForm 부분에 아래와 같이 widgets 부분을 추가하자 ```python from django import forms from pybo.models import Question class QuestionForm(forms.ModelForm): class Meta: model = Question fields = ['subject', 'content'] widgets = { # 새로 추가해주기 'subject': forms.TextInput(attrs={'class': 'form-control'}), 'content': forms.Textarea(attrs={'class': 'form-control', 'rows': 10}), } ``` - 위와 같이 Meta 클래스의 widgets 속성을 지정하면 입력 필드에 `form-control`과 같은 부트스트랩 클래스를 추가할 수 있음 - 다시 질문 등록 화면을 요청해 보면 부트스트랩이 적용된 화면을 볼 수 있을 것임 ### 폼 레이블 (질문 등록 화면이 영문이 아닌 '제목', '내용'과 같은 한글로 표현하고 싶다면?) - 폼 위젯까지 추가해보니 질문 등록 화면을 요청해보면 깔끔하게 부트스트랩이 적용되어 잘 나오는 것을 알 수 있다. - 여기에서 추가로 질문 등록 화면에 표시되는 'Subject', 'Content'를 영문이 아닌 한글로 표시하고 싶다면 labels 속성을 지정하면 된다. - forms.py에 가서 아래와 같이 lables 부분을 추가하자 ```python from django import forms from pybo.models import Question class QuestionForm(forms.ModelForm): class Meta: model = Question fields = ['subject', 'content'] widgets = { 'subject': forms.TextInput(attrs={'class': 'form-control'}), 'content': forms.Textarea(attrs={'class': 'form-control', 'rows': 10}), } labels = { # 새로 추가하기 'subject': '제목', 'content': '내용', } ``` - 이렇게 코드를 추가하고 다시 페이지를 요청해보면 한글로 '제목', '내용'이 잘 나올 것이다. ### 수동 폼 작성 (폼을 이용한 자동 html 생성이 아닌, 직접 html 코드를 작성) - `{{ form.as_p }}`를 사용하면 빠르게 템플릿을 만들 수는 있지만 html 코드가 자동 생성되므로 디자인 측면에서 많은 제한이 생기게 됨 - 예를 들어, 정 태그를 추가하거나 필요한 클래스를 추가하는 작업에 제한이 생기고 또 디자인 영역과 서버 프로그램 영역이 혼재되어 웹 디자이너와 개발자의 역할을 분리하기도 모호해짐 - 그러므로, 이번에는 폼을 이용하여 자동으로 html 코드를 생성하지 말고 직접 html 코드를 작성해보자 - 우선, 수작업에 불 필요한 forms.py의 widget 항목을 제거하자 ```python from django import forms from pybo.models import Question class QuestionForm(forms.ModelForm): class Meta: model = Question # 사용할 모델 fields = ['subject', 'content'] # QuestionForm에서 사용할 Question 모델의 속성 widgets = { # widgets 부분 지우기 'subject': forms.TextInput(attrs={'class': 'form-control'}), 'content': forms.Textarea(attrs={'class': 'form-control', 'rows': 10}), } labels = { 'subject': '제목', 'content': '내용', } ``` - 그리고 질문 등록 템플릿을 아래와 같이 수정하자 - question_form.html에서 `{{ form.as_p }}`이거 하나만 지우고 이 부분에 아래와 같이 코드 추가하기 ```html {% extends 'base.html' %} {% block content %}

질문등록

{% csrf_token %} {% if form.errors %}

{% for field in form %} {% if field.errors %} {{ field.label }} {% endif %} {% endfor %}

{% endif %}

제목

내용

{% endblock %} ``` - `{{ form.as_p }}`로 자동으로 생성되는 html 대신 위와 같이 제목과 내용에 해당되는 html 코드를 직접 작성함 - 또한, question_create 함수에서 `form.is_valid()` 가 실패할 경우 발생하는 오류의 내용을 표시하기 위해 오류를 표시하는 영역을 추가함 - '제목' 항목의 value에는 `{{ form.subject.value|default_if_none:'' }}`처럼 값을 대입하였는데, 이는 오류가 발생했을 경우 기존에 입력했던 값을 유지하기 위해 쓴 것 - `|default_if_none:' '`의 의미는 폼 데이터(form.subject.value)에 값이 없을 경우 None 이라는 문자열이 표시되는데 None 대신 공백으로 표시하라는 의미의 템플릿 필터임 - 장고의 템플릿 필터는 `|default_if_none:' '` 처럼 `|` 기호와 함께 사용 - 이렇게 수정하고 테스트를 해보자 - "질문등록" 화면에서 제목에만 글자를 입력하고 내용은 비워둔 상태에서 "저장하기" 버튼을 클릭하면 내용이 필수항목이라는 메시지가 뜰 것이다. - 또한, 내용을 입력하라는 오류메시지가 뜬 채, 제목에 입력한 글자는 사라지지 않고 계속 유지되는 것을 확인할 수 있다 - 반대로, 내용에만 글자를 입력하고, 제목을 비워둔 상태에서 "저장하기"를 누르면 제목이 필수 항목이라고 뜰 것이다 - 둘 다 빈칸으로 둔 채 "저장하기" 버튼을 클릭하면 둘 다 필수 항목이라는 메시지가 뜰 것이다 ## 답변 등록에도 필수 항목이라는 메시지를 적용해보기 - 질문 등록에 장고 폼을 적용하여 필수 항목 메시지를 뜨게 한 것처럼 답변 등록에도 적용해보자 - 답변을 등록할 때 사용할 AnswerForm을 forms.py에 추가하자 - forms.py에서 아래와 같이 class AnswerForm 추가하기 ```python from django import forms from pybo.models import Question, Answer # Answer 추가 임포트 (... 생략 ...) class AnswerForm(forms.ModelForm): # 이부분 추가 class Meta: model = Answer fields = ['content'] labels = { 'content': '답변내용', } ``` - 그리고 answer_create 함수를 수정하자 - views.py에 가서 아래와 같이 코드 수정하기 - answer_create 함수에서 맨 첫줄만 남겨두고 그 아래 두 줄 다 지운 다음, 아래와 같이 if문 부터 코드 추가하면 됨 ```python (... 생략 ...) from .forms import QuestionForm, AnswerForm # AnswerForm 추가 임포트 해주기 (... 생략 ...) def answer_create(request, question_id): """ pybo 답변등록 """ question = get_object_or_404(Question, pk=question_id) if request.method == "POST": # 이 자리 기존꺼 지우고 이 부분 추가하기 form = AnswerForm(request.POST) if form.is_valid(): answer = form.save(commit=False) answer.create_date = timezone.now() answer.question = question answer.save() return redirect('pybo:detail', question_id=question.id) else: form = AnswerForm() context = {'question': question, 'form': form} return render(request, 'pybo/question_detail.html', context) ``` - 원래 답변 등록은 post 방식만 사용되기 때문에 if-else 구문에서 else는 호출되지 않지만 통일성을 위해 여기도 적어두었다 - 그리고 질문 상세 템플릿도 오류를 표시하기 위한 영역을 추가하자 - question_detail.html에 가서 아래와 같이 코드 추가하기 ```html {% extends 'base.html' %} {% block content %}

(... 생략 ...)

{% endblock %} ``` - 이렇게 수정하고 답변등록 테스트를 해보자 - 만약 답변 내용 없이 "답변 등록" 버튼을 클릭하면 답변 내용이 필수 항목이라는 오류 메시지가 뜰 것이다 - 이렇게 해서 2장의 맨 마지막 폼 까지 완성되었다!!!!!

게시글 상세