Stage 1 - 게시글 쓰기 페이지 만들기

Form(폼)
사용자로부터 입력을 받는 텍스트필드, 비밀번호 입력창, 내용 입력창 등을 아울러 Form이라고 합니다. 1주차에서 form 관련 태그를 배운적이 있는데요. 이번 시간부터 본격적으로 사용되는 만큼 복습을 하고 넘어갑시다.
Form 목적
Form의 코드 사용 예
아이디 입력창
<input type=“text” placeholder=“아이디를 입력해주세요” >
비밀번호 입력창
<input type=“password” placeholder=“아이디를 입력해주세요” >
제목 입력창
<input type=“text” placeholder=“제목을 입력하세요” >
내용 입력창
<textarea>내용을 입력하세요.</textarea>
확인 버튼
<button>게시</button>
선택 입력
<input type=“radio” value=“adult”> 성인 <input type=“radio” value=“teen”> 청소년
체크박스 입력
<input type=“checkbox” value=“piano” > 피아노 <input type=“checkbox” value=“guitar”> 기타 <input type=“checkbox” value=“drum”>드럼
실습
폼 만들기 준비
127.0.0.1/new 로 연결되는 빈 내용의 게시글 글쓰기 페이지를 만들어보겠습니다.
1. views.py에 new_feed 함수를 추가합니다.
views.py
def new_feed(request):
    return render(request, 'new_feed.html')
2. urls.py를 수정합니다.
urls.py
from facebook.views import new_feed
​
urlpatterns = [
    # 생략
    path('feed/<pk>/', detail_feed),
    path('new/', new_feed),
​
    # 이하생략
]
3. templates 폴더에 new_feed.html을 만들고 내용은 detail_feed.html을 그대로 복붙합니다.
4. 115 line feed 부분을 삭제해주세요.
폼 만들기 연습
방금 코드를 삭제한 부분에 각종 폼을 넣어 다음과 같은 새글쓰기 페이지를 완성해보겠습니다.
우선 형태 잡기
최종 목표
new_feed.html에 form을 넣어 형태를 잡습니다.
new_feed.html
<div class="container">
    <h3>게시물 올리기</h3>
    <input type="text" placeholder="글쓴이의 이름은?" ><br>
    <input type="password" placeholder=“글 비밀번호" ><br>
    <input type="text" placeholder=“제목을 입력해주세요.” ><br>
    <textarea placeholder="내용을 입력해주세요."></textarea><br>
    <button>게시</button>
</div>
폼 스타일링
1. 폼을 div로 감싸 하얀배경의 박스를 만들 준비를 한 후 각 요소들에 class 이름을 붙여줍니다.
new_feed.html
<div class="form_box">
    <h3>게시물 올리기</h3>
    <input class="input_field" type="text" placeholder="글쓴이의 이름은?" ><br>
    <input class="input_field" type="password" placeholder="글 비밀번호" ><br>
    <input class="input_field" type="text" placeholder="제목을 입력해주세요." ><br>
    <textarea class="textarea_field" placeholder="내용을 입력해주세요."></textarea><br>
    <button class="write_button">게시</button>
</div>
2. 스타일을 입혀 완성도를 높입니다.
new_feed.html
.form_box {
    background-color: #ffffff;
    margin: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 10px;
}
.input_field {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    margin: 3px 0;
    font-size: 14px;
    width: 100%;
}
.textarea_field {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    margin: 3px 0;
    font-size: 14px;
    width: 100%;
    height: 160px;
}
.write_button {
    background-color: #475d9f;
    border: 1px solid #323f6b;
    color: #ffffff;
    border-radius: 4px;
    padding: 2px 8px;
    font-soze: 18px;
}
결과
게시글 쓰기 페이지 링크
1. ‘글쓰기 버튼’이 있는 모든 페이지를 수정해야 합니다.
newsfeed.html
detail_feed.html
new_feed.html
2. 위 파일들을 열고 글쓰기 버튼 코드의 위치를 찾아 a 태그로 링크를 걸어줍니다.
<div class="btn1">
    <a href="/new"><img src="/static/ic_pencil.jpg" width="22px" style="margin:9px 0 0 13px"></a>
</div>

Pre - 실습 코드 복사

Stage 2 - 게시글 생성 로직 연결

Last updated 2 years ago

Form 목적	Form의 코드 사용 예
아이디 입력창	<input type=“text” placeholder=“아이디를 입력해주세요” >
비밀번호 입력창	<input type=“password” placeholder=“아이디를 입력해주세요” >
제목 입력창	<input type=“text” placeholder=“제목을 입력하세요” >
내용 입력창	<textarea>내용을 입력하세요.</textarea>
확인 버튼	<button>게시</button>
선택 입력	<input type=“radio” value=“adult”> 성인 <input type=“radio” value=“teen”> 청소년
체크박스 입력	<input type=“checkbox” value=“piano” > 피아노 <input type=“checkbox” value=“guitar”> 기타 <input type=“checkbox” value=“drum”>드럼