7월 14일(목) 검색바 추가(기능x)/글쓰기 추가(기능x)/메인페이지에 글목록 가져오기

해야할 일

- 홈피드 검색바 기능 추가하기 / 글 쓰기 추가 / 글 올리면 글 목록에 보이게 하기 

 

☝🏻 홈피드 검색바 추가하기

1. 네비게이션 html 생성

# core/templates/nav.html
...
<!-- 검색창 -->
<div class="relative text-gray-600 " style="background: #fff;
paddi	ng: 5px 10px;
width: 50%;
display: flex;
border-radius: 2rem;
justify-content: space-between;">
    <input type="search" name="serch" placeholder="스터디 모집 찾기"
        class="bg-white h-10  rounded-full text-left focus:outline-none"
        style="width:100%; text-align:center; ">

    <button type="submit" class="pr-3 ">
        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
            viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve"
            width="512px" height="512px">

            <path
                d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
        </svg>
    </button>	
</div>
...

 

☝🏻 홈피드에 글 목록 추가하기

1 . 글 목록 room_list.html 생성

- for문을 활용해 데이터 가져오기

{% block content %} # core/templates/base.html {% block content %}
<div class="mx-auto container py-20 px-6">
    <div class="rounded">
        {% for p in posts %} # views.py home 함수 / for문 돌려 데이터 가져오기
        <div class="w-full h-64 flex flex-col justify-between bg-gray-50 bg-white  rounded-lg border mb-6 py-5 px-4">
            <div>
                <h4 class="text-gray-800 dark:text-gray-900 leading-7 w-11/12 font-bold mb-3">{{ p.title }}</h4>
                <p class="text-gray-600 dark:text-gray-900 text-sm">{{ p.content }}</p>
            </div>
            ...
                <div class="flex items-center justify-between text-gray-800">
                    <p class="dark:text-gray-900 text-sm">{{ p.update }}</p>
...
{% endblock %}

# core/templates/main.html

{% extends 'base.html' %} # 베이스 html 상속

{% block title %}환영해용 | {% endblock %}

{% block content %}
{% include 'room_list.html' %} # room_list 추가하기
{% endblock %}

 

 

☝🏻 글 쓰기 기능 추가 

1 . crud 중 create 와 read 에 해당하는 글 쓰기 기능 추가 

2. views.py

from django.shortcuts import render, redirect

#모델 가져오기
from .models import Posting

# 메인(글목록)
def home(requset):
    post_list = Posting.objects.all().order_by('-id')
    context = {'posts' : post_list}
    return render(requset, 'main.html',context)

#모집글추가 -> 이 부분은 method로 post인지 get인지 구분하여 if문으로 제어 
def room_add(request):
    return render(request, 'home.html')

#모집글추가후 디비 저장
def room_create_post(request):
	(이 부분 추후에)
    return redirect('home')

room_creat_post 는 글 작성 요청이 post 으로 들어오면 객체 생성해서 데이터에 값 넣어줄 것

 

3. url 추가해주기

🖍 path name 과 name 은 가능한 통일 해주는게 좋음 나중에 다시 코드를 봤을 때 못 찾을 가능성이 높음

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'), # 메인홈
    path('room_add/', views.room_add, name='room_add'), # 모집글추가페이지
    ...
]

4. 버튼 기능 추가하기

[ + 버튼 ] 을 누르면 글쓰기 페이지로 넘어감

요 아래 버튼 기능 추가됨

4-1 . <a href="{% url 'room_add' %}">

헷갈리면 적어두기 

urls.py 에 path 부분 확인하기 

# core/templates/room_list.html
...
<div style= "text-align: center;">
    <button type="button">

        <a href="{% url 'room_add' %}" class="text-blue-800 bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center dark:bg-gray-100 dark:hover:bg-pink-400 dark:focus:ring-blue-800" >+</a>
    </button>
</div>
...

5. 글 쓰기 페이지 room_add.html 생성 후 폼 추가하기

# core/templates/room_add.html
{% extends 'base.html' %}

{% block title %}글 쓰기 | {% endblock %}

{% block content_add %} # base.html 블록 추가헀음
<div class="mx-auto container py-20 px-6">
    <form action="{% url 'room_add' %}" method="post"> # 이 부분 핵심
        {% csrf_token %} # csrf공격방어
        <div>
          <label for="title">제목</label><br>
          <input type="text" name="title" id="title">
        </div>
        <div>
            <label for="content">부제목</label><br>
            <input type="text" name="sub_title" id="sub_title">
        </div>
        <div>
            <label for="content">내용</label><br>
          <textarea name="body" id="body" cols="30" rows="10"></textarea>
        </div>
        <input type="submit" value="글쓰기">
      </form>
</div>
{% endblock %}

 

해야할 일 

- views.pt/room_create_post - form action을 통해 받은 데이트를 객체에 넣어 저장한 다음 메인 화면으로 redirect 하기

- core 에 있는 모델 다른 앱으로 이동시키기 (생각 없이 몰빵함...)