인스타그램 따라하기 8

먼저 유저가 올리는 글을 저장할 db model이 필요하다.

일단 img 파일을 올릴 필드와 content 필드만 작성하여 post라는 모델을 하나 만들었다.

class Post(models.Model):
    img = models.ImageField(upload_to='images/')
    content = models.TextField()
    

지금까지 사용한 css파일이나, image 파일들은 개발자가 개발단계에서 서버에 저장한 파일이다. 이를 static파일이라 한다.

하지만 인스타그램처럼 유저가 올리는 image 파일들은 따로 저장할 경로를 지정해줘야 한다. 이를 media 파일이라 한다.

자세한 설명은 여기서

그리고 image 파일의 관리를 위해서 pillow를 설치해야 한다.

가상환경이 켜져있는 상태에 설치

또한 settings.py에서 여러 설정을 해주어야 한다.

그리고 urls.py에도 추가해줘야 한다.

다음으로 model을 만들었으니 db와 연결시켜준다.

다음 명령어로 db에 넣을 형태를 만들어주고,

다음 명령어로 db와 model을 연결시켜준다.

from django.contrib import admin
from .models import Post

# Register your models here.
admin.site.register(Post)

글쓰기 페이지를 만들기 귀찮아서 admin으로 넣겠다.

따라서 위와 같은 코드를 admin.py에 넣어준다.

 

그리고 views.py를 아래와 같이 고친다.

home.html도 템플릿 변수를 사용하여 사용자가 쓴 글을 화면에 띄우도록 한다.

{% extends 'base.html '%}
{% block content %}
<div class="main">
    <div class="main_left">
        <section class="card_section">
            {% for post in posts %}
                <div class="card">
                    <header>
                        <img src="static/img/123.jpg" alt="profile">
                        <h4>username</h4>
                    </header>
                    <div class="card_image">
                        <img src="{{post.img.url}}" alt="content">
                    </div>
                    <div class="info">
                        <div class="info_left">
                            <i class="far fa-heart"></i>
                            <i class="far fa-comment"></i>
                            <i class="fas fa-upload"></i>
                        </div>
                        <div class="info_right">
                            <i class="far fa-bookmark"></i>
                        </div>
                    </div>
                    <p>{{post.content}}</p>
                    <div class="comment">
                        comment1<br>
                        comment2<br>
                    </div>
                    <div class="comment_form">
                        <form action="">
                            <input type="text" placeholder="댓글 입력..">
                            <button type='submit' id='submit'>게시</button>
                        </form>
                    </div>
                </div>
            {% endfor %}
        </section>
    </div>
    <div class="main_right">
        <div class="right_nav">
            <div id="fixed_nav">
                <!-- <button href="{#% url 'new' %}">글쓰기</button> -->
                <header>
                    <img src="static/img/123.jpg" alt="profile">
                    <h4>username</h4>
                </header>
                <div class="story">
 
                </div>
                <div class="suggest">
 
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

그리고 /admin에 들어가서 (그 전에 python manage.py createsuperuser로 admin 계정을 만든다.)

글을 쓰고 난 결과는 아래와 같다.

다음 글에서는 댓글 기능을 만들어 보겠다.