- 페이지네이션
- 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">«</span>
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</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">»</span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" tabindex="-1" aria-disabled="true" href="#">
<span aria-hidden="true">»</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>
'FrameWork > Django' 카테고리의 다른 글
9월 15일 (목) 질문 (0) | 2022.09.16 |
---|---|
9월 14일 (수) 룸 가입하기 (0) | 2022.09.15 |
8월 29일(월) (0) | 2022.08.31 |
8월 26일(금) room 추가/수정/삭제 , room 검색, room 상세페이지 (0) | 2022.08.27 |
8월 24일(수) 마이페이지(자기소개글 수정하기), Room 앱 생성, Room 모델 (0) | 2022.08.24 |