[코드잇] Django 감정 일기 #2

hyeo71·2023년 6월 28일
0

코드잇-감정일기

목록 보기
2/5

1. 모델 작성하기

일기에 대한 데이터 모델을 models.py에 작성한다.
page 모델 클래스에 필요한 필드와 page 모델을 문자열로 표시할 때 사용하는 __str__()메소드를 정의한다.

from django.db import models


class Page(models.Model):
    # 제목, 내용, 감정 상태, 감정 점수, 작성일
    title = models.CharField(max_length=100)
    content = models.TextField()
    feeling = models.CharField(max_length=50)
    score = models.IntegerField()
    dt_created = models.DateField(auto_now_add=True)
    # auto_now_add: 데이터 변화(ex: 수정)에 관계 없이 값이 변하지 않아 생성일로 사용

    def __str__(self):
        return self.title

models.py는 DB와 관련이 있기 때문에 models.py를 작성, 수정한 뒤에는 python manage.py makemigraions, python manage.py migrate로 DB에 반영한다.

관리자 페이지를 사용하고 싶다면 admin.py에 작성한 모델을 등록한다.

from django.contrib import admin
from .models import Page


@admin.register(Page)
class PageAdmin(admin.ModelAdmin):
    list_display = [
    	# admin 페이지에서 화면에 출력할 항목
        "id",
        "title",
        "content",
    ]

2. 일기 목록

admin 페이지 or ORM을 통한 Model API를 사용하여 Page데이터를 작성한다.
diarys앱 아래에 알맞은 디렉터리 구조를 생성한다.(ex: 앱/templates/앱, diarys/templates/diarys)
diarysurls.py에 URL 패턴을 작성하고 이를 views.py에 정의한다. URL 패턴은 기획 시 계획한 URL을 미리 작성하고 주석 처리한 뒤 추후 주석을 해제하고 작업하는 것을 권장한다.

urls.py

from django.urls import path
from . import views


urlpatterns = [
	# name: 템플릿 url 사용시 하드코딩을 피하고 편의성을 높이기 위해 사용
    path("diary/", views.page_list, name="page-list"),
    # path("diary/info/", views.info, name="info"),
    # path("diary/write/", views.page_create, name="page-create"),
    # path("diary/page/<int:page_id>/", views.page_detail, name="page-detail"),
    # path("diary/page/<int:page_id>/edit/", views.page_update, name="page-update"),
    # path("diary/page/<int:page_id>/delete/", views.page_delete, name="page-delete"),
]

views.py

from django.shortcuts import render
from .models import Page


def page_list(request):
    pages = Page.objects.all() # 모든 데이터 가져오기
    context = {"pages": pages} # 데이터를 dict형식으로 정리
    return render(request, "diarys/page_list.html", context)

templates/diarys에 사이트 전체에 공통으로 들어가는 부분을 base.html로 묶어서 만들고 각각의 페이지를 만들 때 extends를 사용한다.

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Mind Note</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'diarys/css/styles.css' %}">
  </head>

  <body>
    <div class="menu">
      <h1>
        <a href="{% url 'page-list' %}"><img src="{% static 'diarys/image/logo02.svg' %}"></a>
      </h1>
      <ul>
        <li>
          <a href="{% url 'page-list' %}">모아보기</a>
        </li>
        <li>
          <a href="{% url 'info' %}">감정일기란</a>
        </li>
        <li>
          <a href="#">일기쓰기</a>
        </li>
      </ul>
    </div>

    {% block content %}{% endblock content %}

  </body>

</html>

page_list.html

{% extends './base.html' %}

{% block content %}
  ...
        <ul>
          {% for page in pages %} <!--템플릿을 사용하여 object 반복-->
            <li>
              <a href="{% url 'page-detail' page.id %}">
                <div class="date">
                  <span>{{page.dt_created}}</span>
                </div>
                <h2>{{page.title}}</h2>
                <div class="score">
                  <p>감정점수</p>
                  <span>{{page.score}}점</span>
                </div>
              </a>
            </li>
          {% endfor %}
        </ul>
   ...
{% endblock content %}

block을 사용하여 base.html의 해당 부분과 같은 이름의 block 값을 넣어 page_list.html을 작성한다.

3. 일기 상세 페이지

urls.py에서 page_detail 부분을 주석 해제하고 views.py를 작성한다.
전체 목록과는 다르게 한 개의 일기 정보만 필요하기 때문에 obejct.get()을 사용하여 원하는 조건에 맞는 정보를 DB에서 가져온다.

views.py

def page_detail(request, page_id):
    page = Page.objects.get(id=page_id)
    context = {"object": page}
    return render(request, "diarys/page_detail.html", context)

page_detail.html

{% extends './base.html' %}

{% block content %}
...
      <h2>{{object.title}}</h2>
      <div class="state">
        <p>감정 상태</p>
        <span>{{object.feeling}}</span>
      </div>
      <div class="score">
        <p>감정 점수</p>
        <span>{{object.score}}점</span>
      </div>
      <div class="date">
        <span>{{object.dt_created}}</span>
      </div>
      <div class="detail">{{object.content|linebreaksbr}}</div>
      <div class="notetext-btn">
        <ul>
          <li>
            <a href="#">삭제하기</a>
          </li>
          <li>
            <a href="#">수정하기</a>
          </li>
        </ul>
      </div>
...
{% endblock content %}

0개의 댓글