FrameWork/Django

마이페이지

print(blue) 2022. 9. 23. 14:05

투두리스트

  • 마이페이지 html url 연결
  • 마이페이지 자기소개 수정 기능
  • 마이페이지 tap1 본인 방 관리 기능
  • 마이페이지 tap2 가입된 스터디 방 관리 기능

아직 구현x

  • 만든 방이 없을 경우 아직 방이 없다는 거 보여지기
  • -가입된 스터디 목록탭 구현하기

 

☝🏻 마이페이지

1. view

#core/views.py
from django.shortcuts import render, redirect
from django.views.decorators.csrf import csrf_exempt
from django.contrib.auth import login

#모델 가져오기
from .models import User
from room.models import Room, Room_member

#마이페이지
@login_required
def mypage(request):
    res_data = {}
    user = request.user #현재유저
    room_list = Room.objects.all().order_by('-id') 
    members = Room_member.objects.all() #아직구현x
    res_data = {'room' : room_list, 'member': members }
    
    print(members)

    res_data['user'] = {
        'user_id' : user.username, # 회원아이디
        'user_nickname' : user.nickname, # 닉네임
        'user_name' : user.name, # 닉네임
        'user_bio' : user.bio, # 자기소개
    }

    if request.method == 'POST':
        user_bio = request.POST['user_bio'] #자기소개 수정
        user.bio = user_bio
        user.save()
        
    return render(request, 'mypage.html', res_data)

2. html

#mypage.html(전체코드)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스터디룸 | 마이페이지</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap"
        rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/main.css">
</head>

<body>
    <!-- nav -->
    <nav class="navbar navbar-expand-lg ">
        <div class="container-fluid padding-none">

            <div class="nav_left">
                <a class="navbar-brand" href="/">스ㅌㅓ디룸</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse nav_right" id="navbarSupportedContent">
                <!-- 검색창 -->
                <form class="d-flex main_search_form" role="search" action="{% url 'search' %}" method="get">
                    <div class="form_btnbox">
                        <input class="form-control" type="search" placeholder="스터디 모집 찾기" aria-label="Search" name="q"
                            value="{{ q }}">
                        <button class="btn" type="submit">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                class="bi bi-search" viewBox="0 0 16 16">
                                <path
                                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                            </svg>
                        </button>
                    </div>
                </form>

                <!-- 로그인/로그아웃 했을 경우 유저의 현재 활동 가능 상태를 판단하는 제어문 -->
                <ul class="navbar-nav nav-ul">
                    {% if request.user.is_authenticated %}

                    <li class="nav-item">
                        <a class="mypage">{{ request.user }}</a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/mypage/">마이페이지</a></li>
                            <li><a class="dropdown-item" href="/logout/">로그아웃</a></li>
                        </ul>
                    </li>

                    {% else %}
                    <li class="nav-item">
                        <a class="login" href="/login/">로그인</a>
                    </li>

                    <li class="nav-item">
                        <a class="resigter" href="/resigter/">회원가입</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    <!-- nav end -->

    <!-- main section start -->
    <section class="section container-fluid">
        <div class="main_title container"></div>

        <form method="post">
            {% csrf_token %}
            <div class="mypage_con container">
                <div class="mypage_top">
                    <div class="mypage_top-profile">
                        <img src="../static/images/profile1.jpg" alt="">
                    </div>
                    <div class="mypage_box">
                        <div class="mypage_top-text">
                            <div class="top-text-title">
                                <p>유저아이디: <span>{{ user.user_id }}</span></p>
                            </div>
                            <div class="top-text-nickname">
                                <p>닉네임: <span>{{ user.user_nickname }}</span></p>
                            </div>
                            <div class="top-text-name">
                                <p>이름: <span>{{ user.user_name }}</span></p>
                            </div>
                        </div>
                        <div class="mypage_top-button">
                            <a class="mypage_btn">수정</a>
                            <button type="submit" class="mypage_btn-fix">저장</button>
                        </div>
                    </div>
                </div>
                <div class="mypage_Introduce">
                    <textarea name="user_bio" name="user_bio" id="user_bio" placeholder="{{ user.user_bio }}" readonly
                        class="textarea_introduce"></textarea>
                </div>
            </div>
        </form>


        <!-- 탭 메뉴 상단 시작 -->
        <div class="container tap_con">
            <ul class="tabs">
                <li class="tab-link current" data-tab="tab-1">방 관리</li>
                <li class="tab-link" data-tab="tab-2">가입된 스터디</li>
                <!-- <li class="tab-link" data-tab="tab-3">내가 쓴 글</li> -->
            </ul>
            <!-- 탭 메뉴 상단 끝 -->

            <!-- 탭 메뉴 내용 시작 tab-1 -->
            <div id="tab-1" class="tab-content current">
                <div class="container main_content" style="justify-content: flex-start !important;">

                    {% if room %}
                    {% for r in room %}
                    {% if r.room_owner == request.user %}
                    <div class="main_con ">
                        <div class="main_content-box">
                            <div class="oner_box">
                                <div class="oner_box-profile">
                                    <div class="oner_profile">
                                        <img src="../static/images/profile.jpg" alt="">
                                    </div>
                                    <div class="oner_name">
                                        <p>방장 : {{ r.room_owner }}</p>
                                    </div>
                                </div>

                                <!-- 공개방/비밀방 -->
                                {% if r.room_password %}
                                <div class="oner_box-secret">
                                    <div class="oner_profile">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                            class="bi bi-key-fill" viewBox="0 0 16 16">
                                            <path
                                                d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                                        </svg>
                                    </div>
                                </div>
                                {% endif %}

                                <!-- 수정/삭제 -->
                                <div class="setting_icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                                        class="bi bi-three-dots" viewBox="0 0 16 16">
                                        <path
                                            d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z">
                                        </path>
                                    </svg>
                                    <div class="setting_icon-modal">
                                        <div class="modal_box">
                                            <p><a href="room/edit/{{ r.pk }}" class="room_modify">수정</a></p>
                                            <button type="button" class="btn " data-bs-toggle="modal"
                                                data-bs-target="#exampleModal">삭제
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal -->
                                <div class="modal fade" id="exampleModal" tabindex="-1"
                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                스터디룸을 삭제하시겠습니까?
                                            </div>

                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                                                    onclick="location.href = '/room/delete/{{ r.pk }}' ">예</button>
                                                <button type="button" class="btn btn-primary"
                                                    onclick="location.href = '' ">아니오</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="top_content">
                                <img src="../static/images/studyroom01.jpg" alt="">
                            </div>
                            <div class="bottom_content">
                                <h3 class="room_title">방제 : {{ r.title }}</h3>
                                <p class="room_sub_title">{{ r.sub_title }}</p>
                                <p class="room_create">{{ r.create | date:"Y-m-d" }}</p>
                            </div>
                        </div>
                        <!-- 더보기 -->
                        <div class="room_btn">
                            <div class="room_btn-box">
                                <a href="/{{ r.get_absolute_url }}" class="">더보기 ➜</a>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}
                    {% endif %}
                </div>
            </div>
            <!-- tap1 끝 -->

            <!-- 가입된 스터디 -->
            <div id="tab-2" class="tab-content">
                <div class="container main_content" style="justify-content: flex-start !important;">

                    {% if member %}
                    {% for r in room %}
                    {% for m in member %}
                    <div class="main_con ">
                        <div class="main_content-box">
                            <div class="oner_box">
                                <div class="oner_box-profile">
                                    <div class="oner_profile">
                                        <img src="../static/images/profile.jpg" alt="">
                                    </div>
                                    <div class="oner_name">
                                        <p>방장 : {{ m.room_owner }}</p>
                                    </div>
                                </div>

                                <!-- 공개방/비밀방 -->
                                {% if r.room_password %}
                                <div class="oner_box-secret">
                                    <div class="oner_profile">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                            class="bi bi-key-fill" viewBox="0 0 16 16">
                                            <path
                                                d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                                        </svg>
                                    </div>
                                </div>
                                {% endif %}



                            </div>

                            <div class="top_content">
                                <img src="../static/images/studyroom01.jpg" alt="">
                            </div>
                            <div class="bottom_content">
                                <h3 class="room_title">방제 : {{ r.title }}</h3>
                                <p class="room_sub_title">{{ r.sub_title }}</p>
                                <p class="room_create">{{ r.create | date:"Y-m-d" }}</p>
                            </div>
                        </div>
                        <!-- 더보기 -->
                        <div class="room_btn">
                            <div class="room_btn-box">
                                <a href="/{{ r.get_absolute_url }}" class="">더보기 ➜</a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    {% endfor %}
                    {% endif %}
                </div>

            </div>
            <!-- 스터디 끝 -->
        </div>

    </section>
    <!-- main section end -->


    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="../static/js/mypage.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"></script>
</body>

</html>

 

 

☝🏻 마이페이지 자기소개 수정 기능

- form post 메소드 사용하기

...
<form method="post">
{% csrf_token %}
<div class="mypage_con container">
    <div class="mypage_top">
        <div class="mypage_top-profile">
            <img src="../static/images/profile1.jpg" alt="">
        </div>
        <div class="mypage_box">
            <div class="mypage_top-text">
                <div class="top-text-title">
                    <p>유저아이디: <span>{{ user.user_id }}</span></p>
                </div>
                <div class="top-text-nickname">
                    <p>닉네임: <span>{{ user.user_nickname }}</span></p>
                </div>
                <div class="top-text-name">
                    <p>이름: <span>{{ user.user_name }}</span></p>
                </div>
            </div>
            <div class="mypage_top-button">
                <a class="mypage_btn">수정</a>
                <button type="submit" class="mypage_btn-fix">저장</button>
            </div>
        </div>
    </div>
    <div class="mypage_Introduce">
        <textarea name="user_bio" name="user_bio" id="user_bio" placeholder="{{ user.user_bio }}" readonly
            class="textarea_introduce"></textarea>
    </div>
</div>
</form>
...

 

 

☝🏻 마이페이지 tap1 본인 방 관리 기능

- 본인이 만든 room들이 보여지며 수정/삭제 할 수 있으며 , 더보기 클릭시 상세페이지로 이동

- 본인이 만든 room이 없을 경우 아직 방이 없습니다 보여지기 (아직 구현 못함)

 

1. html

현재 admin 아이디로 Room 2개 존재

#mypage.html

...
<!-- 탭 메뉴 내용 시작 tab-1 -->
<div id="tab-1" class="tab-content current">
    <div class="container main_content" style="justify-content: flex-start !important;">

        {% if room %} #room이 있을 경우
        {% for r in room %} #반복문 돌리기
        {% if r.room_owner == request.user %} #현재 유저와 방생성자(방 반장)이 같을 때/
        <div class="main_con ">
            <div class="main_content-box">
                <div class="oner_box">
                    <div class="oner_box-profile">
                        <div class="oner_profile">
                            <img src="../static/images/profile.jpg" alt="">
                        </div>
                        <div class="oner_name">
                            <p>방장 : {{ r.room_owner }}</p>
                        </div>
                    </div>

                    <!-- 공개방/비밀방 -->
                    {% if r.room_password %}
                    <div class="oner_box-secret">
                        <div class="oner_profile">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                class="bi bi-key-fill" viewBox="0 0 16 16">
                                <path
                                    d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                            </svg>
                        </div>
                    </div>
                    {% endif %}

                    <!-- 수정/삭제 -->
                    <div class="setting_icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                            class="bi bi-three-dots" viewBox="0 0 16 16">
                            <path
                                d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z">
                            </path>
                        </svg>
                        <div class="setting_icon-modal">
                            <div class="modal_box">
                                <p><a href="room/edit/{{ r.pk }}" class="room_modify">수정</a></p>
                                <button type="button" class="btn " data-bs-toggle="modal"
                                    data-bs-target="#exampleModal">삭제
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1"
                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    스터디룸을 삭제하시겠습니까?
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                                        onclick="location.href = '/room/delete/{{ r.pk }}' ">예</button>
                                    <button type="button" class="btn btn-primary"
                                        onclick="location.href = '' ">아니오</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="top_content">
                    <img src="../static/images/studyroom01.jpg" alt="">
                </div>
                <div class="bottom_content">
                    <h3 class="room_title">방제 : {{ r.title }}</h3>
                    <p class="room_sub_title">{{ r.sub_title }}</p>
                    <p class="room_create">{{ r.create | date:"Y-m-d" }}</p>
                </div>
            </div>
            <!-- 더보기 -->
            <div class="room_btn">
                <div class="room_btn-box">
                    <a href="/{{ r.get_absolute_url }}" class="">더보기 ➜</a>
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}
        {% endif %}
    </div>
</div>
<!-- tap1 끝 --
...


☝🏻 마이페이지 tap2 가입된 스터디 방 관리 기능

- 가입한 room들이 보여지며 더보기 누를 시 상세페이지로 이동

- 아직 구현 x