9월 2일(금) 페이지네이션, room에 비밀번호가 있을 경우 비밀방, 없을 경우 공개방 띄우기, room 가입하기

FrameWork/Django

9월 2일(금) 페이지네이션, room에 비밀번호가 있을 경우 비밀방, 없을 경우 공개방 띄우기, room 가입하기

print(blue) 2022. 9. 2. 00:55

페이지네이션
room에 비밀번호가 있을 경우 비밀방, 없을 경우 공개방 띄우기
room 가입하기

☝🏻 페이지네이션

1. views.py 수정

#core/views.py
from django.shortcuts import render, redirect
from django.views.decorators.csrf import csrf_exempt
from django.core.paginator import Paginator 

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

# 메인페이지
@csrf_exempt
def main(request):
    room_list = Room.objects.all().order_by('-id')   

    page = request.GET.get('page', '1') # 페이지 // http://127.0.0.1:8000/?page=1
    paginator = Paginator(room_list, 6) # 페이지당 6개씩 보여주기
    page_obj = paginator.get_page(page) # 이렇게 하면 장고 내부적으로는 데이터 전체를 조회하지 않고 해당 페이지의 데이터만 조회하도록 쿼리가 변경된다.

    res_data = {'room' : page_obj}
    return render(request, 'index.html', res_data)

2. index.html 수정

# index.html
...
<!-- 페이징처리 시작 -->
<div aria-label="Page navigation example" class="navigation">
    <ul class="pagination">

        <!-- 이전 페이지가 있을 때 -->
        {% if room.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        {% else %}
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        {% endif %}

        <!-- 페이지 리스트 -->
        {% for page_number in room.paginator.page_range %}
        {% if page_number == room.number %}
        <li class="page-item active" aria-current="page">
            <a class="page-link" href="?page={{ page_number }}">{{ page_number }}</a>
        </li>
        {% else %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_number }}">{{ page_number }}</a>
        </li>
        {% endif %}
        {% endfor %}

        <!-- 다음 페이지 -->
        {% if room.has_next %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link" tabindex="-1" aria-disabled="true" href="#">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
        {% endif %}
    </ul>
</div>
<!-- 페이징처리 끝 -->
...

☝🏻 room이 없을 때

# index.html

...
<!-- 룸 수정/삭제 -->
{% if request.user.is_authenticated %}
{% if r.room_owner == request.user %}
<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" />
    </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>
{% endif %}
{% endif %}
</div>
...

☝🏻 room에 비밀번호가 있을 경우 비밀방, 없을 경우 공개방 띄우기

# index.html
...
<!-- 공개방/비밀방 -->
{% 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 %}
...

☝🏻 room 글 쓰기

1. room/create_room.html

# room/create_room.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="#">가입된 스터디 </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 -->
    {% if error %}
    <script>alert('{{error}}')</script>
    {% endif %}

    <section class="main-section section container-fluid">
        <form action="{% url 'room_add' %}" method="post">
            {% csrf_token %}
            <div class="main_title container">
                <h1 class="text-center">스터디룸 생성하기</h1>
            </div>
    
            <div class="create_room-con container">
                <div class="room-title">
                    <p>방제목</p>
                    <input type="text" name="title" id="title">
                </div>
                <div class="room-content">
                    <p>부제목 </p>
                    <input type="text" name="sub_title" id="sub_title">
                </div>
    
                <div class="room-content">
                    <p>내용<span style="color: #fff">ㄱ</span></p>
                    <textarea name="content" id="content" class="room-textarea" placeholder="내용을 입력해주세요."></textarea>
                </div>
    
                <div class="secret_create-check">
                    <div class="create-check-box">
                        <p>비밀방 생성하기</p>
                        <input type="checkbox" class="create-check-btn">
                    </div>
                    <input type="number" name="room_password" id="room_password" class="password_setting" placeholder="숫자5자리를 입력해주세요" maxlength="5"
                        oninput="numberMaxLength(this)">
                </div>
    
                <div class="create_btn">
                    <button input type="submit" class="create-btn-btn">
                        생성
                    </button>
                </div>
            </div>
        </form>
    </section>

    <!-- main section end -->
    <script src="../static/js/main.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>