Cha4SEr Security Study

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

Web/Web_etc

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

Cha4SEr 2021. 3. 21. 20:17

 

이번엔 글쓰기 페이지를 만들어서 Flask에서 페이지 이동하는 것을 다뤄보도록 하겠습니다.

 

우선 저번시간에 메인화면에서 코드를 보면

<div class="container">
    <br>
    <h1 class="text-center"><a href="#">Cha4ser's Free Board!</a></h1>
    <br>
    <br>
    
    <table class="table table-hover table-striped text-center" style="border: 1px solid;">
        <thead>
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>글쓴이</th>
                <th>조회수</th>
            </tr>
        </thead> 
        <tbody>
            {% for i in data_list %}
            <tr>
                <td>{{ i[0] }}</td>
                <td>{{ i[1] }}</td>
                <td>{{ i[2] }}</td>
                <td>{{ i[3] }}</td>
            </tr>
            {% endfor %}
        </tbody>


    </table>

    <hr>
    <div>
        <ul class="pagination justify-content-center">
            <li><a href="#" style="margin-right:5px; class=text-secondary"> ◀ </a></li>
            <li><a href="#" style="margin-right:5px; class=text-secondary"> 1 </a></li>
            <li><a href="#" style="margin-right:5px; class=text-secondary"> 2 </a></li>
            <li><a href="#" style="margin-right:5px; class=text-secondary"> 3 </a></li>
            <li><a href="#" style="margin-right:5px; class=text-secondary"> 4 </a></li>
            <li><a href="#" style="margin-right:5px; class=text-secondary"> 5 </a></li>
            <li><a href="#" style="margin-right:5px; class=text-secondary"> ▶ </a></li>

        </ul>
    </div>
    <a class="btn btn-outline-info float-right">글쓰기</a>

</div>

 

 여기서 밑에서 두번째 줄인 <a> 태그를 보시면 "글쓰기" 라는 것이 보일겁니다. 실제로는 돌려보면 이렇게 생겼습니다.

하지만 저희는 저 버튼을 눌렀을 때 어떤 html 파일로 가야하는지, 어떤 데이터를 넘겨주어야 하는지 등 아무것도 정한게 없기 때문에 글쓰기 버튼을 누르더라도 어떠한 변화도 일어나지 않습니다. 이제부터 하나씩 바꿔봅시다.

 

정상적으로 동작시키기 위해 해야할 일들은

 

1. 글쓰기 화면(html) 만들기

2. 파이썬에서 버튼 처리 로직 만들기

 

우선 이 두가지만 해결하면 됩니다.

 

그럼 먼저 글쓰기 화면을 만들어 봅시다.

 

이전 포스팅에서 html파일은 index.html 파일과 같이 파이썬 프로젝트에서 templates 폴더에 있어야 한다고 했습니다. 

 

이미 index.html 파일에서 부트스트랩, 메인 타이틀 등 정해놓은게 많으니 index.html 파일을 복사해서 붙여놓고, 

글쓰기 페이지에서는 불필요한 데이터 조회 테이블을 없애버리고 간단한 글만 적어서 확인해봅시다.

 

<body>

<div class="container">
    <br>
    <h1 class="text-center"><a href="#">Cha4ser's Free Board!</a></h1>
    <br>
    <br>
    
    <p>글쓰기 화면!</p>

    <hr>

</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>

head 부분은 생략하고 body 부분만 보면 <table>과 관련된 코드는 제거하고 <p> 태그로 간단한 문구만 적어넣고 넘어가겠습니다.

 

이쯤에서 파이썬 코드에서 index.html  ->   write.html 으로 넘어가는 로직을 구현해보도록 하겠습니다.

 

* 빠른 이해를 위해 코드 먼저 공개 후 설명하도록 하겠습니다.

@app.route('/')
def index():
    sql = "SELECT * from board"
    cur.execute(sql)

    data_list = cur.fetchall()
    return render_template('index.html', data_list=data_list)



@app.route('/write')
def write():
    return render_template('write.html')

@app.route('/') 부분은 index.html 을 호출하는 부분,

@app.route('/write') 부분은 write.html을 호출하는 부분입니다.

 

우선 app.route의 인자로 들어가는 ('/write')는 쉽게말해 URL을 지정해주는 부분이라고 생각하시면 됩니다.

즉, 여기서 /write 라고 설정해주었기 때문에 실제로 저 함수가 실행되었을때 URL은

이런식으로 포트번호 뒤에 /write가 적히게 됩니다. 

 

그 다음 render_template은 인자로 받은 파일을 오픈시켜줍니다. 

위 코드에서는 'write.html'을 인자로 주었기 때문에 해당 파일을 오픈시켜주게됩니다.

 

 

이제 마지막으로 해야할 일은 index.html 파일에서 글쓰기 버튼을 눌렀을 때 파이썬의 @app.route('/write') 부분이 실행되도록 설정해 주는 것 입니다. 

 

이 부분을 해결해 주기 위해서 기존에 <a> 태그로 설정되어 있던 글쓰기 버튼의 태그를 변경해주어야 합니다.

이때 사용될 태그는 <form> / <button> 입니다. 

 <form action="/write">
            <button type="submit" class="btn btn-primary">글쓰기</button>
 </form>

코드는 이런식으로 구성됩니다. 

 

우선 <form> 태그는 서버로 전달시킬 데이터들을 입력받는 부분이고, 그 속성 중 action은 서버에서 얘를 호출시켜줘! 라고 정의해주는 일을 합니다.

 

위 코드에서 보시는것과 같이 해당 속성에는 파이썬 코드 내에서 @app.route 구문 안에 있는 인자를 넣어주면 됩니다.

 

그 다음은 <button> 태그의 속성인 type="submit" 입니다. 이는 form 태그 내에 존재하는 데이터들을 서버로 전송시켜주는 트리거 역할을 해주는 녀석입니다. 

 

즉, 저기 글쓰기 버튼을 눌렀을 때 바로위에 선언해준 /write 페이지를 부르게 되고, 그 과정에서 파이썬 서버 코드인

def write() ... 부분이 실행되는 것입니다.

 

이제 이 write 버튼을 누르게 되면!

이렇게 write.html 파일이 호출되었습니다! 

 

이제 저 글쓰기 화면에서 실제로 글쓰는 동작을 하는것만 구현하면 될것 같습니다.

이 부분은 다음 포스팅에서 진행하도록 하겠습니다.

 

 

(회사일 시작하면서 블로그 신경을 너무 못썼는데 꾸준히 봐주시는분들이 계서서 다음글을 안쓸수가 없네요..ㅎ

글 잘봐주셔서 감사합니다. 이제부터 내용이 짧더라도 꾸준히 업로드하도록 하겠습니다!! 🤗)

 

'Web > Web_etc' 카테고리의 다른 글

[Web] 게시판 만들기_02.Python Flask, Mysql 연동  (9) 2020.07.18
[Web] 게시판 만들기_01. 부트스트랩 적용  (1) 2020.07.18
[Web] - JWT를 이용한 사용자 인증  (0) 2020.07.13
[Web] - HTTP / 쿠키와 세션  (0) 2020.07.13
'Web/Web_etc' Related Articles more
Comments