1. 메인페이지
2. 페이지네이션
3. room에 비밀번호가 있을 경우 비밀방, 없을 경우 공개방 띄우기
4. room 가입하기
☝🏻 메인페이지
방법1)
# core/vies.py
# 메안페이지
@csrf_exempt
def main(request):
room_list = Room.objects.all().order_by('-id')
res_data = {'room' : room_list,'page_obj': page_obj}
/1페이지도 2페이지도 같은 room만 렌더링됨
res_data['room1'] = res_data['room'][0:3]
res_data['room2'] = res_data['room'][3:6]
return render(request, 'index.html', res_data)
#core/index.html
...
<!-- 글 목록 출력 -->
<section class="main-section section container-fluid">
{% if not room %}
<h1>검색결과 없음</h1>
{% endif %}
<div class="container main_content">
{% if room1 %}
{% for r in room1 %}
<div class="main_con secret">
<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>
<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>
<!-- 룸 수정/삭제 -->
{% if request.user.is_authenticated %}
{% if r.room_owner == request.user %}
<div class="setting_icon-modal">
<div class="modal_box">
<p><a href="room/edit/{{ r.pk }}" class="room_modify">수정</a></p>
<p><a href="room/delete/{{ r.pk }}" class="room_remove">삭제</a></p>
</div>
</div>
{% endif %}
{% endif %}
</div>
</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 %}
{% endif %}
</div>
<div class="container main_content">
{% if room2 %}
{% for r in room2 %}
<div class="main_con secret">
<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>
<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>
<!-- 룸 수정/삭제 -->
{% if request.user.is_authenticated %}
{% if r.room_owner == request.user %}
<div class="setting_icon-modal">
<div class="modal_box">
<p><a href="room/edit/{{ r.pk }}" class="room_modify">수정</a></p>
<p><a href="room/delete/{{ r.pk }}" class="room_remove">삭제</a></p>
</div>
</div>
{% endif %}
{% endif %}
</div>
</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 %}
{% endif %}
</div>
...
☝🏻 페이지네이션
1페이지당 6개 룸 / 룸이 있는 만큼 페이지 보이기
ex) 6개 룸 -> 1페이지 / 30개 룸 -> 5페이지 / 35개 룸 -> 6페이지
1. views.py
# 메인페이지
@csrf_exempt
def main(request):
room_list = Room.objects.all().order_by('-id')
page = request.GET.get('page', '1') # 페이지
paginator = Paginator(room_list, 6) # 페이지당 6개씩 보여주기
page_obj = paginator.get_page(page)
res_data = {'room' : room_list,'page_obj': page_obj}
res_data['room1'] = res_data['room'][0:3]
res_data['room2'] = res_data['room'][3:6]
return render(request, 'index.html', res_data)
# index.html
...
<!-- 페이징처리 시작 -->
<div aria-label="Page navigation example" class="navigation">
<ul class="pagination">
<!-- 이전 페이지가 있을 때 -->
{% if page_obj.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 %}
<!-- 페이지 리스트 -->
#현재 페이지일 때는 active
{% for page_number in page_obj.paginator.page_range %}
{% if page_number == page_obj.number %}
<li class="page-item active"><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 page_obj.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">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% endif %}
</ul>
</div>
<!-- 페이징처리 끝 -->
...
http://127.0.0.1:8000/?page={{ page_number }}
현재 페이지일 때는 active -> <li class="page-item active">
☝🏻 room에 비밀번호가 있을 경우 비밀방, 없을 경우 공개방 띄우기
1. room.models.py
class Room(models.Model):
...
def __str__(self):
return f'[{self.id}] {self.title} {self.room_owner} {self.room_password}/
{self.create}'
...
2. index.html
# index.html
...
{% if posts %}
{% for p in posts %}
<div class="w-full h-64 flex flex-col justify-between bg-gray-50 bg-whsite rounded-lg border mb-6 py-5 px-4">
{% if p.room_password %}
<div>
<h5 class="text-gray-800 dark:text-gray-900 leading-7 w-11/12 font-bold mb-3">비밀방</h5>
</div>
{% else %}
<div>
<h5 class="text-gray-800 dark:text-gray-900 leading-7 w-11/12 font-bold mb-3">공개방</h5>
</div>
{% endif %}
☝🏻 room 가입하기(미완성)
1. room 가입 모델
#room/models.py
from django.db import models
from core.models import User
class Room_member(models.Model):
join_user = models.ForeignKey(User, on_delete=models.CASCADE, verbose_name="가입자")
group = models.ForeignKey(Room, on_delete=models.CASCADE, verbose_name="room")
date_joined = models.DateField(verbose_name="가입날짜")
def __str__(self):
return f'{self.group}/{self.join_user}'
2. views.py
#room/views.py
# 가입하기
def room_join(request):
room = Room_member.objects.all()
res_data = {'room':room}
return render(request, 'room_join.html', res_data )
3. urls.py
#room/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('search',views.search, name="search"), #검색
path('room/page/<int:pk>', views.room_page, name='room_page'), #글상세페이지
path('room/edit/<int:pk>',views.room_edit, name="room_edit"), #글수정
path('room/delete/<int:pk>',views.room_delete, name='room_delete'), #글삭제
path('room/', views.room_add, name='room_add'), # 글추가
path('room/join/<int:pk>',views.room_join, name="room_join"), #가입
]
3. html 수정
#room_page.html
<!-- 가인한 멤버리스트 -->
<div class="lg:border-l lg:pl-4">
<div class="text-md border-b pb-4 mb-4">
<a href="#" class="text-gray-900 hover:text-blue-600 font-semibold">멤버 리스트</a>
</div>
{% for r in room %}
{% if r.join_user %}
<div class="text-md border-b pb-4 mb-4">
<p class="text-gray-800 text-s">멤버 : {{ r.join_user }}</p>
</div>
{% else %}
<div class="text-md border-b pb-4 mb-4">
<p class="text-gray-800 text-s">멤버 : 아직 없음</p>
</div>
{% endif %}
{% endfor %}
</div>
문제점 : 모든 room에 동일한 유저 출력
해야할 일
1. 멤버 리스트에 각 룸에 해당되는 멤버만 출력하기
2. room 가입함수(view)수정
'FrameWork > Django' 카테고리의 다른 글
9월 14일 (수) 룸 가입하기 (0) | 2022.09.15 |
---|---|
9월 2일(금) 페이지네이션, room에 비밀번호가 있을 경우 비밀방, 없을 경우 공개방 띄우기, room 가입하기 (0) | 2022.09.02 |
8월 26일(금) room 추가/수정/삭제 , room 검색, room 상세페이지 (0) | 2022.08.27 |
8월 24일(수) 마이페이지(자기소개글 수정하기), Room 앱 생성, Room 모델 (0) | 2022.08.24 |
8월 23일(화) 프로젝트 시작, 초기 설정, 커스텀 모델, admin, 회원가입 /로그인/로그아웃 기능 (0) | 2022.08.24 |