Web 개발 :: 파이썬 django 인스타그램 클론 코딩, aullauth _TIL#23

■ JITHub 개발일지 23일차

 

□  TIL(Today I Learned) ::

Django 인스타그램 클론 코딩 프로젝트, Allauth, 유저 정보 변경 기능

1. Django 인스타그램 클론코딩

 - django를 활용한 클론코딩을 현재 진행중이다.

 - 유저 로그인 및 관리기능은 Django-Allauth를 활용하여 코드를 많이 단축할 수 있었다.

 - 기본 네비게이션 바 부분은 base_with_header.html에서 상속받기 위해 extends하였다.

 - side nav bar는 hover 효과를 주었다.

 - 비밀번호 변경시 현재 비밀번호, 바꿀 비밀번호, 바꿀 비밀번호 확인 각각 form을 활용하였다.

   form태그는 django에서 제공하고 있으며, 내부는 label, input으로 구성되어 있다. form에서는 데이터를 받고, POST할 수 있다.

 

<!-- password_change.html -->

{% extends "user_base/base_with_header.html" %}

{% load widget_tweaks %}

{% block title %}비밀번호 변경 | Sparkling Coffee Club{% endblock title %}

{% block content %}

<style>
  #nav_div {
    list-style: none;
    height: 60px;
  }

  #nav_div:hover {
    background-color: #eeeeee;
    border-left: solid 3px;
  }

  #nav_a {
    font-size: 18px;
    padding-left: 20px;
    display: block;
    line-height: 60px;
  }

  #nav_a:hover {
    text-decoration: none;
  }

  #side-navbar {
    width: 220px;
    height: 100%;
    float: left;
  }
</style>


<div style="
  width: 950px;
  height: 100%;
  margin: 100px auto;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  margin-bottom: 30px;">


  <!-- side Nav bar -->
  <div id="side-navbar">
    <div class="menu" style="margin-top: 40px">
      <div id="nav_div"><a id="nav_a" href="{% url 'profile-update' %}">프로필 편집</a></div>
      <div id="nav_div"><a id="nav_a" href="{% url 'account_change_password' %}">비밀번호 변경</a></div>
      <div id="nav_div"><a id="nav_a" href="#">계정 비활성화</a></div>
    </div>
  </div>

  <main style="
    border-radius: 6px;
    margin: 0px 0px 0px 100px;
    padding: 30px 150px;
    width: 100%;">


    <!-- Profile img & name -->
    <div class="title" style="width: 100%;height: 70px; padding-left: 120px;float: left;">
      <div class="profile-pic cp-avatar large"
        style="background-image: url('{{ user.profile_image.url }}'); width:40px; height:40px;float: left;"></div>
      <div style="font-size: 25px;float: left;padding-left: 20px;">{{user.username}}</div>
    </div>

    <!-- contents -->
    <div>
      <form method="post">{% csrf_token %}
        <div style="width: 150px; height:50px;float: left;">
          <p style="font-size: 17px; text-align: right;">이전 비밀번호</p>
        </div>

        <div style="width: 75%; float: left;padding-left:30px">
          <div style="width:450px; height:50px;">
            {{ form.oldpassword|add_class:"form-control"|attr:"placeholder:이전 비밀번호"|add_error_class:"error"}}
            {% for error in form.oldpassword.errors %}
            <div class="error-message">{{ error }}</div>
            {% endfor %}
          </div>
        </div>

        <div style="width: 150px; height:50px; float: left;">
          <p style="font-size: 17px; text-align: right;">새 비밀번호</p>
        </div>

        <div style="width: 75%; float: left;padding-left:30px">
          <div style="width:450px; height:50px;">
            {{ form.password1 |add_class:"form-control"|attr:"placeholder:새 비밀번호"|add_error_class:"error" }}
            {% for error in form.password1.errors %}
            <div class="error-message">{{ error }}</div>
            {% endfor %}
          </div>
        </div>

        <div style="width: 150px; height:50px; float: left;">
          <p style="font-size: 17px; text-align: right;">새 비밀번호 확인</p>
        </div>

        <div style="width: 75%; float: left;padding-left:30px">
          <div style="width:450px; height:50px;">
            {{ form.password2 |add_class:"form-control" |attr:"placeholder:새 비밀번호 확인"|add_error_class:"error" }}
            {% for error in form.password2.errors %}
            <div class="error-message">{{ error }}</div>
            {% endfor %}
          </div>
        </div>


        <div style="width: 100%;min-width: 500px; height: 200px; float: left;padding: 20px 0px 0px 180px">
          <div>
            <button type="submit" class="btn btn-primary"
              style="margin-bottom:20px;background-color:rgb(0, 149, 247);">비밀번호 변경</button>
            <br>
          </div>
          <a href="{% url 'account_reset_password' %}" style="text-decoration : none;color:rgb(0, 149, 247)">비밀번호를
            잊으셨나요?</a>
        </div>
      </form>

    </div>
</div>
</main>

</div>

{% endblock content %}

 

<!-- profile_update_form.html -->

{% extends "user_base/base_with_header.html" %}

{% load widget_tweaks %}

{% block title %}회원정보 수정 | Sparkling Coffee Club{% endblock title %}

{% block content %}

<style>
  #nav_div {
    list-style: none;
    height: 60px;
  }

  #nav_div:hover {
    background-color: #eeeeee;
    border-left: solid 3px;
  }

  #nav_a {
    font-size: 18px;
    padding-left: 20px;
    display: block;
    line-height: 60px;
  }

  #nav_a:hover {
    text-decoration: none;
  }

  #side-navbar {
    width: 220px;
    height: 100%;
    float: left;
  }
</style>


<div style="
  width: 950px;
  height: 100%;
  margin: 100px auto;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  margin-bottom: 30px;">


  <!-- side Nav bar -->
  <div id="side-navbar">
    <div class="menu" style="margin-top: 40px;">
      <div id="nav_div"><a id="nav_a" href="{% url 'profile-update' %}">프로필 편집</a></div>
      <div id="nav_div"><a id="nav_a" href="{% url 'account_change_password' %}">비밀번호 변경</a></div>
      <div id="nav_div"><a id="nav_a" href="#">계정 비활성화</a></div>
    </div>
  </div>

  <main style="
    border-radius: 6px;
    margin: 0px 0px 0px 100px;
    padding: 30px 150px;
    width: 100%;">


    <!-- Profile img & name -->
    <div class="title" style="width: 100%;height: 70px; padding-left: 120px;float: left;">
      <div class="profile-pic cp-avatar large"
        style="background-image: url('{{ user.profile_image.url }}'); width:40px; height:40px;float: left;"></div>
      <div style="font-size: 25px;float: left;padding-left: 20px;">{{user.username}}</div>
    </div>

    <!-- contents -->
    <div>
      <form method="post" enctype="multipart/form-data" autocomplete="off">{% csrf_token %}

        <div style="width: 150px; height:50px;float: left;">
          <p style="font-size: 17px; text-align: right;">닉네임</p>
        </div>

        <div style="width: 75%; float: left;padding-left:30px">
          <div class="mb-3" style="width:450px; height:50px;">
            {{ form.username|add_class:"form-control"|attr:"placeholder:username"|attr:"style:width:300px"|add_error_class:"error"}}
          {% for error in form.username.errors %}
          <div class="error-message">{{ error }}</div>
          {% endfor %}
          </div>

        </div>

        <div style="width: 150px; height:50px; float: left;">
          <p style="font-size: 17px; text-align: right;">프로필 사진</p>
        </div>

        <div style="width: 75%; float: left;padding-left:30px">
          <div type="file">
            {{ form.profile_image}}
          </div>

        </div>
        
        
        <div style="width: 150px; height:50px; float: left;">
          <p style="font-size: 17px; text-align: right;margin-top: 30px">소개</p>
        </div>
        
        <div class="mb-3"style="width: 75%; float: left;margin-top: 30px; padding-left:30px">
          {{ form.intro|add_class:"form-control"|add_error_class:"error"|attr:"placeholder:자신을 소개해 주세요!"|attr:"rows:3" }}
          {% for error in form.intro.errors %}
          <div class="error-message">{{ error }}</div>
          {% endfor %}
        </div>


        <div style="width: 100%;min-width: 500px; height: 200px; float: left;padding:0px 0px 0px 180px">
          <div class="buttons">
            <button type="submit" class="btn btn-primary"
            style="margin-bottom:20px;background-color:rgb(0, 149, 247);width: 80px">제출</button>
            <button onclick="{% url 'profile' user.id %}" class="btn btn-secondary"
            style="margin-bottom:20px;;width: 80px">취소</button>
          </div>
        </div>
      </form>

    </div>
</div>
</main>

</div>

{% endblock content %}

 

 - 위의 html 폼에서 사용되는 변수들은 아래와 같이 forms.py에서 사전에 정의해주어야 한다.

 - field 부분에서 정의한 값은 바운드되어 POST할 수 있게 된다.

# forms.py

from django import forms
from .models import Post
from user.models import User

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = [
            "image",
            "content",
        ]
        
class ProfileForm(forms.ModelForm):
    class Meta:
        model = User
        fields = [
            "username",
            "profile_image",
            "intro",
        ]
        widgets = {
            "intro": forms.Textarea,
        }

 

---

□  TIF(Today I Felt) ::

 

  - 아직도 장고는 너무 어렵지만, 팀원들이 모두 열심히 해주어 진행이 잘 되고 있다.

  - 개념이 잡히지 않은 상태에서 너무 앞선 작업들을 하다보니, 기초가 무너지는 것 같다. 중간중간 이론도 챙겨보면서 진행하여야 겠다.