Cha4SEr Security Study

[Web] 게시판 만들기_03.Flask페이지 이동(글쓰기 페이지 2) 본문

카테고리 없음

[Web] 게시판 만들기_03.Flask페이지 이동(글쓰기 페이지 2)

Cha4SEr 2021. 11. 30. 22:21

지난 포스팅에서 빈 글쓰기 페이지를 만들어 그쪽으로 호출하는것 까지 했었는데, 

이번엔 페이지를 제대로 만들어서 글이 반영되도록 해보겠습니다.

 

우선 글쓰기 화면 틀부터 잡아야하기 때문에 write.html먼저 보도록 하겠습니다.

 

가장 기본적으로 글쓰기 화면에 필요한 입력란은

1. 제목

2. 작성자

3. 내용

 

이렇게 3개가 핵심이기에 이 3개부터 만들도록 하겠습니다.

 

* 저번처럼 코드공개 후 설명하는방식으로 하겠습니다. ( <head> 부분 생략)

 <div>
        <form action="/write_action" method="post">
            <p>제목</p>
            <input type="text" id="title" name="title" class="form-control"> <br>
            <p>작성자</p>
            <input type="text" id="writer" name="writer" class="form-control"> <br>
            <p>내용</p>
            <textarea id="content" name="content" class="form-control"></textarea>
            <br>
            
            <div class="form-row float-right">
            <button type="submit" class="btn btn-primary">작성</button>
            </div>
        </form>
    </div>

<form> 태그의 action 속성에는 /write_action 이라는 임시 페이지(?) 를 지정해주고, method를 post 방식으로 선언해줍니다. 

그 밑에는 제목, 작성자, 내용 입력란을 만들었습니다.

 

제목과 작성자는 한줄짜리 <input> 태그를 사용하였고, 내용 입력란은 <textarea> 태그를 사용하였습니다.

그리고 각 입력란을 구문해주기 위해 id 속성에 각각 "title", "writer", "content" 이라고 지정해주었고, 

class는 부트스트랩 내장 속성인 "form-control"로 지정해주었습니다.

 

이후 가장 밑에 submit 해주는 작성 버튼까지 만들어주었고, 이상태에서 페이지를 확인해보면

 

아직 많이 못생기긴 했지만 그래도 나름 입력란과 작성버튼이 생겼습니다 !_!

 

이제 해야될건 입력란에 내용 입력 후 작성버튼을 클릭하였을때

 

1. 입력한 내용 서버로 전달

2. 서버에서 해당 내용 DB에 삽입

3. 업데이트된 메인페이지 호출

 

이런식으로 이루어져야 합니다.

 

우선 1. 입력한 내용 서버로 전달 부분부터 해결하기 위해 서버쪽 코드를 작성해봅시다.

@app.route('/write_action', methods=['POST'])
def write_action():

    title = request.form.get('title')
    writer = request.form.get('writer')
    content = request.form.get('content')

    print(title)
    print(writer)
    print(content)

    return index()

글쓰기 페이지로 호출하는 방식과 같이 위 html 코드에서 선언해준 /write_action 로직을 선언해준 다음, 

페이지에서 입력한 제목, 작성자, 내용을 각각 변수에 저장합니다.

 

이때 사용되는 문법은 request.form.get(' [name 속성 값] ') 입니다.

 

 

즉, 위 html 코드의 입력란 ( <input> 태그)의 각각 name 속성값이 'title', 'writer', 'content' 이기에 위와 같이 선언해주었습니다.

( <input type="text" name=" [여기에 입력한 값] ">) 

 

이후 메인화면을 불러오기 위해 리턴은 index() 함수로 지정해주었습니다.

 

이제 글쓰기를 작성했을때 값이 제대로 서버에 전달되는지 확인해보도록 하겠습니다.

 

 

 

대충 테스트할 입력값 집어넣어준 다음 "작성" 버튼을 클릭하면!

 

이렇게 서버에 전달이 잘 되었습니다! 

 

이제 입력받은 값을 데이터베이스에 집어넣어주기만 하면 됩니다.

 

해당 코드는 아래와 같습니다.

def write_action():

    title = request.form.get('title')
    writer = request.form.get('writer')
    content = request.form.get('content')

    sql = "INSERT INTO board (num, title, writer, content, views) VALUES (11, %s, %s, %s, 0)"
    values = (title, writer, content)
    cur.execute(sql, values)
    db.commit()


    return index()

먼저 INSERT 할 구문을 sql 변수에 문자열 형태로 저장하는데, 이때 VALUES 부분에 있는 "%s"는 문자열을 의미하며,  아래 "values" 변수에 선언해준 차례대로 해당 값들이 "title", "writer", "content" 항목으로 들어가게 됩니다.

num, views 컬럼은 임시로 값을 넣어주었는데, 다음번 포스팅에서 해당 부분 다루도록 하겠습니다.)

 

이후 cur.execute(sql, values) 구문을 통해 쿼리문을 실행시켜 준다음 db를 commit 시켜주면 됩니다!

 

(앞에서 글 내용 관련 컬럼을 "context" 라고 선언해줬었는데, "content"가 맞는말 같으니 업데이트 시켜줍시다..ㅎ

 db 콘솔창에서 ALTER TABLE board CHANGE context content varchar(200); 를 쳐줍시다!)

 

 

이제 어느정도 돌아가기는 할테니 다시 글쓰기 창에서 입력을 하고

 

 

작성 버튼을 누르면 맨 밑에 행에 새로운 데이터가 추가되었음을 확인할 수 있습니다.!

 

 

이제 글쓰기 기능은 작동 하지만 여러가지로 애매해서 수정해야할 부분들이 많이 남아있습니다. 

그런부분들은 다음 포스팅에서 깔끔하게 잡고 나서 글 상세 조회 기능으로 넘어가도록 하겠습니다! 

 

Comments