[Django] 장고 CRUD기능 중 CREATE - 인스타 클론코딩

📍 CRUD - CREATE

 

CREATE기능을 구현하기 전 CREATE버튼은 Navbar에 추가하기로 했다.

(정리하면서 Home 링크도 추가함!)

 

📌 # _nav.html

<div class="navbar-nav">
  <a class="nav-link active" aria-current="page" href="{% url 'posts:index' %}">Home</a>
  <a class="nav-link" href="{% url 'posts:create' %}">Create</a>
</div>

 

 

📌 기능 구현에 들어가기 전

아래와 같이 input, textarea를 직접 지정한 form형태보단 장고의 forms를 이용해서 CREATE 기능을 구현해보려 한다.

# new.html / create.html

<form action="/posts/create/">
    <label for="title">title</label>
    <input type="text" id="title" name="title">
    <label for="content">content</label>
    <textarea name="content" id="content" cols="30" rows="10"></textarea>
    
    <input type="submit">
</form>

 

📌  # forms.py

from django import forms
from .models import Post

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = '__all__'

Post의 모든 필드를 form.html에 표기할 것이기 때문에 fields = '__all__'

 

 

📌 # urls.py

urlpatterns = [
    path('create/', views.create, name='create'),
]

 

 

📌 # views.py

from django.shortcuts import redirect
from .forms import PostForm

def create(request):
    if request.method == 'POST':
        form = PostForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return redirect('posts:index')
    else:
        form = PostForm()
    context = {
        'form': form,
    }
    return render(request, 'form.html', context)

1. POST요청이 없을 때 PostForm이 비어있는 상태로 호출

2. form을 채운 후 POST로 요청하면 PostForm이 채워진 상태로 form이 유효한지 검토 후 저장

3. 저장 후 index페이지로 redirect 되도록 설정했다.

 

 

📌 # form.html(bootstrap적용 전)

{% extends 'base.html' %}

{% block body %}
<form action="" method = 'POST' enctype="multipart/form-data">
    {% csrf_token %}
    {{ form }}
    <input type="submit">
</form>    
{% endblock %}

bootstrap적용하여 깔끔하게 만들기

📌 터미널 창

python -m pip install django-bootstrap5

FE를 다룰건 아니지만 조금이라도 깔끔하게 보이고자 bootstrap을 적용했다.

 

📌 # settings.py

INSTALLED_APPS = [
    "django_bootstrap5",
]

django-bootstrap5를 설치 후 bootstrap form을 적용

 

📌 # form.html(bootstrap적용)

{% extends 'base.html' %}
{% load django_bootstrap5 %}

{% block body %}
<form action="" method = 'POST' enctype="multipart/form-data">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit">
</form>    
{% endblock %}

훨씬 깔끔해졌다!

 

---

글이 잘 작성되는지 확인해보자.

 

index페이지에 잘 나타나는 모습을 볼 수 있다.