[Flask 웹 프레임워크] 글 목록에서 하나의 글 보기 (URL 변수)

 

앞의 포스트들에서 Flask 프레임웨크를 통해 글을 작성하면 ORM을 이용해 DB에 저장하고 글의 목록을 표시하는 기능까지 코딩했다. 이번에는 글의 목록에서 하나의 글을 선택했을 때 ORM을 이용해 가져오고 render_template()을 이용해 글의 내용을 화면에 표시하는 코드를 작성한다.

 

단, 글의 목록에 HTTP GET 메소드를 이용해 URL끝에 변수와 파라미터를 조합하여 웹서버로 전달하는 방식이 아닌 URL의 끝에 게시물의 번호를 URL에 붙여 URL을 호출하는 형태로 작성하려고 방법을 알아봤다. 마치 티스토리에서 포스트의 주소를 숫자 또는 글의 제목별로 따로 따로 표시되도록 하는 것과 같다.

 

앞의 포스트까지 따라하기를 마치면 웹사이트의 / 에 접속하면 다음과 같이 글의 목록이 표시된다. (main_page.py)

 

http://193.***.***.42:5000/

이제 포스트의 제목을 클릭하면 순번에 해당하는 글의 내용보기를 동작시키기 위해 view 디렉토리 아래에 있는 post_list.html 파일에 다음과 같이 <a>~</a> 태그를 추가해준다.

post_list.html

post_list.html은 main_page.py에서 웹서버의 '/' 경로를 route할 때 표시될 웹페이지를 렌더링하도록 render_templage() 함수에 지정된 HTML 파일이다. (파이썬을 사용해 웹 프로그래밍을 하기 위해선 이 문장이 이해되도록 개념을 공부해야 한다... -.-)

 

{{ ~ }} 로 둘러쌓인 것이 바로 main_page.py에서 작성된 라우팅 함수 내부에서 render_templage() 함수를 사용해 템플릿 엔진에게 템플릿 파일 이름인 post_list.html 과 데이터가 저장된 변수들의 키워드이다. 

 

즉 템플릿 엔진에게 post_list.html을 이용하여 post_list라는 객체에 저장된 값들을 표시하라는 의미다.

 

post_list 객체는 main_page.py의 render_template()를 통해 템플릿엔진에게 전달되고 템플릿엔진은 HTML에 포함된 {{ ~ }}와 같은 표기법으로 작성된 키워드를 찾아 전달받은 객체에 저장된 값을 대체하여 화면에 표시하는 것이다. (9행)

 

main_page.py를 참고하자. 12행의 @bp.route('/') 부터 15행까지가 글의 목록을 보여주는 소스코드다.

main_page.py

main_page.py의 가장 아래에 박스로 표시된 부분이 바로 글 목록에서 하나를 클릭했을 때 실행되는 라우팅 함수다. 

 

post_view/<int:id> 에서 int:id는 id라는 변수가 integer(정수형) 타입이라는 의미다. 즉 post_view/1 과 같은 형태의 URL은 post_view 함수로 라우팅한다는 의미다. id는 앞의 post_list.html 에서 <a> ~ </a>로 생성된 글의 각각의 고유한 URL 주소라 보면 된다.

 

그리고 post_view 경로 아래의 정수형 변수 id 는 post_view()에 id 라는 변수로 전달된다. (28행)

 

29행에서는 ORM을 통해 DB에서 id 값에 해당되는 순번의 글을 찾아 가장 먼저 조회되는 글을 post 라는 객체에 저장한다. id는 유니크한 값이기 때문에 항상 하나의 글만 조회된다.

 

마지막으로 30행에서 render_template()에서 post_view.html 파일을 지정하고 표시할 객체로 post를 템플릿엔진에게 전달해준다.

 

다음은 템플릿 HTML 파일을 다음과 같이 작성하면 된다.

post_view.html

post_list.html과 비슷하게 {{ ~ }} 로 묶인 post 객체를 볼 수 있다.

 

이제 글 목록에서 하나의 글의 제목을 클릭하면 다음과 같이 그 글의 내용이 표시된다.

순번 6의 제목을 클릭하여 표시된 화면 (post_view.html)

 

다음엔 진짜로 글의 화면에 CSS를 적용해보자...

 

#flask  #python  #게시판만들기 #ORM

댓글(0)

Designed by JB FACTORY