My Playlist | 210720

6월 말에 한 장고 CRUD 과제 스크린샷

 

장고 진도를 다 나가고 두 번째 과제가 주어졌다.

첫 번째 과제인 CRUD 과제 할 때는 티스토리를 안 하고 있었어서 그때 공부한 것들을.. 기록해 놓지 않았다....

이번 과제부터... 열심히 기록해야지....

 

 

 

---

 

 

 

이번 과제는

지난 번 과제로 만든 My Playlist 사이트에 Static, Media, Form , User Authentication 등을 이용해

• 로그인 한 사람만 글을 쓸 수 있는 기능 (접근 제한)
• 댓글 기능 추가 (로그인/로그아웃 무관)
• 블로그 전체적인 디자인하기 (CSS)

이 세 가지를 구현하면 된다.

 

 

 

 

 

1. Static, Media, NavBar 수정

지난 과제 때 home은 좀 꾸몄었다. 하이퍼링크 색도 바꾸고 이것저것..

근데 이번 과제 하는 중에 그런 것들을 좀 날렸다. 뼈대 다 완성하고 마지막에 다시 CSS로 꾸밀 예정이다.

 

제일 처음으로 static을 이용해 home.html에 이미지를 넣었다. (base.html)

<img src="{% static 'olafmusic.jpg' %}" alt="" width="300" height="200">

img 태그는 <div class = "container"> 위에 넣어주었다.

 

{% load static %}을 무조건 맨 첫 번째 줄에 넣는다는 걸 깜빡했다. 꼭 기억하자.

 

 

그리고 NavBar에 로고 대용 이미지도 넣어줬다.

로고를 누르면 home.html로 돌아가도록 수정하였다. (base.html)

<a href="{% url 'home' %}">
          <img src="{% static 'cryjw.jpg' %}" alt="" width="50" height="50">
</a>

 

로고 옆에는 New를 썼다. CSS 꾸미기 전에 New 누르면 new.html로 가도록 연결해주려 한다.

 

 

 

 

 

media 파일을 이용해서 새 포스트를 작성할 때 사진을 첨부할 수 있도록 만들었다.

static, media 모두 [프로젝트]/urls.py 를 수정해주어야 한다.

media 설정을 해주었으므로 플레이리스트에 새 노래를 저장할 때 앨범 커버를 등록할 수 있다.

 

 

 

 

 

2. Form 

forms.py

from django import forms
from .models import Blog

class BlogForm(forms.ModelForm):
    class Meta:
        model = Blog
        fields = ['title', 'writer', 'body', 'image']

form연습을 위해 새로운 html을 만들었다.

New Post를 눌러서 바로 new.html로 이동하는 방법 대신 form을 이용한 new_with_django_form.html로 이동하는 방법이다.

 

BlogForm 클래스의 Meta 클래스에서 필드를 'title', 'writer', 'body', 'image' 즉, models.py에서 설정한 것과 같게 입력하고, new_with_django_form.html에서 {{form.as_p}}로 받아왔다.

이때 {{form.as_p}} 를 사용하면 html 에도 변수명이 그대로 'title', 'writer', 'body', 'image'로 나온다.

플레이리스트 웹에서는 이 변수명이 그대로 나오는 게 아니라 '제목, 가수, 가사, 앨범 커버' 로 new.html에서와 동일하게 나와야 하므로 new_with_django_form.html을 수정하였다.

 

new_with_django_form.html

{% extends 'base.html' %}
{% block content %}
<h1>New Song</h1>
<form
        action="{%url 'blog:create'%}"
        method="post"
        enctype="multipart/form-data"
>
    {%csrf_token%}
    <div class="container">
        <p>제목: {{form.title}}</p>
        <p>가수: {{form.writer}}</p>
        <p>앨범커버: {{form.image}}</p>
        <p>가사: {{form.body}}</p>
    </div>

</form>
{% endblock %}

코드 예시에는 {%csrf_token%} 밑에 {{form_as.p}}가 있었는데 그걸 지우고 div태그를 넣어주었다.

이때 {{form.title}} 등에서 form으로 받은 이유는 views.py의 new_with_django_form 함수에서 form = BlogForm()으로 받아주었기 때문..으로 추정. form에서의 필드를 사용해야 하니까!

 

 

 

---

 

 

 

오늘은 templates 상속받고 app 분리한 후 static, media, form 파트까지 했다.

 

form 부분에서 변수명 변경하려고 이것저것 하느라 조금 오래 걸렸다.

원래는 변수명을 아예 바꾸려고 했었는데 그러면 기존의 것들을 바꿔야 해서 너무 복잡해지므로 포기했다.

그래서 사용한 방법이 new_with_django_form.html을 수정한 것이다. (div 태그 추가)

 

내일은 로그인/로그아웃 기능 구현하고 paginator 설정, model extension 까지 하려고 한다.

시간이 된다면 댓글 기능 구현까지 시도해봐야겠다.

 

 

210720 구현 스크린샷