TigerCow.Door


Tornado (python web server) 관련 3번째 포스팅입니다. 

이번 포스팅에서 다뤄볼 내용은 토네이도에서 템플릿 사용하기(Using template in Tornado) 입니다.

바로 시작해보도록 하겠습니다.


Tornado 에서는 python에서 사용할 수 있는 어떠한 템플릿 언어도 사용할 수 있습니다.

Tornado는 다른 템플릿 언어들에 비해 매우 빠르고 유연한 템플릿 언어를 기본적으로 포함하고 있다고 합니다.

자세한 내용은 Tornado의 template 모듈 문서를 참조하시면 됩니다.

http://www.tornadoweb.org/en/stable/_modules/tornado/template.html?highlight=template )


Tornado 템플릿은 마크업 언어 내에 python의 제어문과 표현식을 포함하고 있는 HTML 입니다.

아래 예제를 통해 확인해보도록 하겠습니다.

먼저 HTML 코드입니다.


1
2
3
4
5
6
7
8
9
10
11
12
<html>   
 <head>       
  <title>{{ title }}</title>    
 </head>   
 <body>     
  <ul>        
   {% for item in items %}          
    <li>{{ escape(item) }}</li>        
   {% end %}      
  </ul>    
 </body
</html>
cs


위의 코드를 저는 template_test.html 으로 저장하고 tornado로 구동시킬 python파일과 같은 디텍토리에 넣었습니다.

7번 라인과 9번 라인은 python의 제어문을 표현한 것인데 밑에서 설명하도록 하겠습니다.

그리고 아래 python 코드를 통해 위의 템플릿을 rendering 할 수 있습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import tornado.httpserver
import tornado.ioloop
import tornado.web
 
class MainHandler(tornado.web.RequestHandler):     
     def get(self):         
          items = ["Item 1""Item 2""Item 3"]                  
          self.render("template_test.html", title="My title", items=items) 
 
application = tornado.web.Application([     
     (r"/", MainHandler),   
]) 
 
if __name__ == "__main__":     
     http_server = tornado.httpserver.HTTPServer(application)     
     http_server.listen(8888)     
     tornado.ioloop.IOLoop.instance().start()
cs


그리고 해당 python 파일을 구동시켜서 확인합니다.

제대로 랜더링이 되었다면 아래 사진과 같은 결과를 확인할 수 있습니다.




Tornado template 는 python의 제어문과 표현식을 함께 지원한다고 하였습니다.

제어문은 {% 와 %} 로 묶어 주면됩니다.

다시 위와 동일한 HTML 코드를 확인하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
<html>   
 <head>       
  <title>{{ title }}</title>    
 </head>   
 <body>     
  <ul>        
   {% for item in items %}          
    <li>{{ escape(item) }}</li>        
   {% end %}      
  </ul>    
 </body
</html>
cs


위에서 언급하였듯이 7번 라인 ~ 9번 라인을 보시면 제어문이 사용됨을 알 수 있습니다.

그리고 제어문은 {% , %}으로 둘러쌓여 있습니다.


제어문은 python의 제어문과 동일합니다.

Tornado 에서는 if, for, while, try를 지원하지만 모두 {% end %} 로 끝내주어야 합니다.

또한 extends 와 block 문을 이용하여 템플릿 상속(template inheritance)를 지원합니다.


표현식은 함수 호출을 포함한 어떤 python 표현식이나 가능합니다.

'escape() <.xhtml_escape>', '.url_escape()', '.json_encode()', '.squeeze()' 함수는 default 로 제공하고 있습니다.

또한 다른 함수를 템플릿에 넘겨주는 것 또한

템플릿 렌더 함수에게 함수 이름을 keyword argument로 넘겨주기만 하면 가능합니다.


아래 예제를 확인해보겠습니다.

먼저 python 코드입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import tornado.httpserver
import tornado.ioloop
import tornado.web
 
class MainHandler(tornado.web.RequestHandler):     
     def get(self):         
          items = ["Item 1""Item 2""Item 3"]                  
          self.render("template_test.html", title="My title", items=items, sayHello=self.sayHello) 
 
     def sayHello(self, name):
          return 'Hello, '+name + '!!!'
 
application = tornado.web.Application([     
     (r"/", MainHandler),   
]) 
 
if __name__ == "__main__":     
     http_server = tornado.httpserver.HTTPServer(application)     
     http_server.listen(8888)     
     tornado.ioloop.IOLoop.instance().start()
cs


그리고 HTML 파일 코드 입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>   
 <head>       
  <title>{{ title }}</title>    
 </head>   
 <body>     
  <ul>        
   {% for item in items %}          
    <li>{{ escape(item) }}</li>        
   {% end %}
   <p>
       {{ sayHello('DoorBW') }}
   </p>      
  </ul>    
 </body
</html>
cs


먼저 python 파일을 보시면 10번 라인에 sayHello 라는 이름의 함수가 새로 선언되었습니다.

name 이라는 인자를 받아서, Hello, name !!! 을 출력하도록 하는 함수입니다.

그리고 랜더링 시에 sayHello = self.sayHello 를 통해 sayHello 라는 이름으로 함수를 전달합니다.


HTML 파일을 확인하시면 11번 라인이 추가되었음을 확인할 수 있습니다.

sayHello라는 이름으로 함수를 받았기에 {{ sayHello('DoorBW') }} 라는 식으로 함수를 사용합니다.


실행결과는 아래와 같습니다.


내부에서 Tornado 템플릿은 python으로 직접 번역됩니다.

템플릿에 포함된 표현식은 템플릿을 나타내는 python 함수로 글자 그대로가 복사됩니다.

다른 말로 템플릿 표현식에서 이상한 내용을 쓴다면?

당연히 그 템플릿을 실행할 떄 이상한 python에러를 접할 것 입니다.


실제로 어플리케이션을 제작할 떄, Tornado 템플릿의 모든 기능, 특히 템플릿 상속 기능을 원활하게 사용하기위해

Tornado 공식 문서에서 template module 섹션에 대한 내용을 모두 읽어보시는 것을 추천드립니다.

위 예제에서 다룬 것은 극히 일부이며 공식문서에서 보다 많은 내용들을 참고하실 수 있습니다.



이렇게 해서 파이썬 웹서버 토네이도에서 템플릿 사용하는 방법에 대해 간략히 알아보았습니다.

다음에는 Cookies(쿠키)에 관한 내용에 대해 알아보도록 하겠습니다.









블로그 이미지

Tigercow.Door

Back-end / Python / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요

지난 포스팅에 이어서 계속 진행합니다!

영화를 검색하기 위해 영화제목 입력창과 버튼을 추가합니다.

bootstrap에서 CSS->우측 Forms에 들어가서 처음보이는 code를 복사해 필요한 부분만 남겨두고 지워버리겠습니다.

위의 그림에 보이는 code를 복사하여 index.html.erb 파일의 상단에 붙여놓고 필요한 부분만 남기고 지우겠습니다.







지금까지 작성한 code로 run하면 아래와 같이 화면이 구성됩니다.





이제 model 개념을 사용합니다.

bash 창에 아래와 같은 명령어를 입력합니다.


rails g model list

그리고 


rake db:migrate


( ':' 양쪽에 공백이 있으면 안돼요!)
두 명령어를 입력하면 아래 사진과 같이 db/migrate 에 새로운 파일이 생깁니다. 해당 파일의 코드를 확인할게요




해당 파일에서 t.timestamps null: false 코드 위에 아래 코드를 입력합니다.


t.string :title


지금까지 한건, 사용자가 영화제목을 입력해서 검색한 것을

db에 저장해서 정보를 갖고 있도록 하기위해 db구축(?)을 한 과정입니다.

이제 이렇게 db에서 갖고있는 정보를 화면에 띄우도록 할게요.
먼저, 버튼을 눌렀을때 새로운 영화정보가 추가된 페이지가 되도록 routes.rb 파일의 코드를 수정하겠습니다.



이렇게 
get 'new_movie' => 'movie#new_movie' 를 추가하고 이제 movie_controller.rb 파일로 넘어갑니다.
movie_controller.rb 파일에서 new_movie라는 함수를 설정해서

사용자가 영화제목을 입력하고 버튼을 눌렀을때 입력한 text를 통해 json정보를 받습니다.

그리고 해당 영화의 정보가 존재하는지 Response 값을 확인한뒤 True인 경우 db에 저장하도록 합니다.

코드를 확인하면 아래와 같고 추가적으로 index함수내에서도 바뀐 부분을 확인해야 합니다.

26번줄과 31번줄의 코드가 변경되었습니다.



그리고 이제 버튼을 눌렀을때 controller에서 새롭게 설정한 함수가 실행되도록 해야하는데

이것은 index.html.erb 파일에서 코드를 수정합니다.




위의 사진에서 2번줄을 보시면 action 구문이 추가되었습니다.

어떠한 함수를 실행할지 설정해주었구요,

5번줄에 name="title"이란 코드도 추가되어 사용자가 input에 입력한 text의 이름을 설정해주었습니다.

이렇게 까지하시면 page를 run 하셨을때 어떤 영화의 정보도 존재하지 않지만,

적절한 영화의 제목을 입력하고 추가하면 영화의 정보가 새로 생깁니다.

하지만 입력한 text에 대한 영화정보가 없다면 영화정보가 추가되지 않습니다.
마지막으로 보기좋게끔 css등의 파일의 코드를 수정하고,

영화에 대한 보다 많은 정보를 받을 수 있게끔하며, 

youtube 주소를 이용해서 해당 영화에 대한 관련 영상을 볼 수 있는 링크를 걸게 하였습니다.
먼저 최종 결과화면은, 





이렇게 나왔습니다.

각 코드들은 아래와 같습니다.


routes.rb


application.html.erb


movie_controller.rb


index.html.erb


movie.css


db/migrate/~lists 파일


코드는 위에 나온 사진들 외에는 따로 수정한 파일 없습니다.
이렇게해서 오늘 LIKELION에서 학습한 내용 한번 쭉 복습했네요.
저도 많이부족해서 제대로 설명이 되지 않았거나 잘못 된 부분들도 많을텐데

전문가분들께서 보시고 피드백주시면 정말 감사하겠습니다^^

다음번에 더 공부해서 더 좋은 내용으로 포스팅할게요~



블로그 이미지

Tigercow.Door

Back-end / Python / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요

cloud9 을 이용해서 ruby언어를 통해 영화검색 사이트를 만들거에요.

처음이신분들도 쉽게 따라올 수 있도록 진행하겠습니다.


먼저 c9을 이용해서 workspace를 만들어줍니다. 언어는 Ruby를 사용합니다! 




개발환경을 구축하기 위해 bash창에 아래와 같은 명령어를 입력하여 movie라는 controller를 생성합니다.


rails generate controller movie index


그럼 좌측에서 app폴더안에 controllers폴더 안에 views 폴더에서 movie라는 폴더가 생긴것을 확인하실수 있습니다.
그리고 index.html.erb파일을 먼저 작성해보도록 할게요!




그리고 위의 index.html.erb 파일에서 먼저 구조를 잡도록 할게요.




위와 같이 초기 구조를 잡았습니다.
그리고 저장한뒤에 run을 해준뒤 페이지를 열어보면 기본창 밖에 뜨지 않는데

이때 주소창 맨 뒤에 /movie/index 를 입력해주면 빈 화면이 뜹니다.
여기서 route를 설정함으로써 /movie/index 를 입력해주지 않아도 우리가 개발하는 페이지가 뜰도록 할게요.
아래 그림과 같이 config 폴더 안의 routes.rb 파일을 열어서 
root 'movie#index' 코드를 추가해줍니다.





 이렇게 하고 저장하신뒤에 page를 확인해보시면

주소 맨 뒤에 /movie/index를 추가하지 않으셔도 우리가 coding중인 page로 접속됩니다.
그리고 이제 bootstrap을 사용하기 위해 bootstrap 페이지에서 getting started로 들어가

아래 그림에 보이는 코드를 복사할게요.



그리고 c9에서 app/views/layouts/application.html.erb 파일로 들어가 </head> 위에 복사한 코드를 붙여 넣습니다.





그리고 다시 app/assets/sylesheets/movie.scss 파일을 열어서 아래와 같이 코드를 작성합니다.






여기까지 하셨으면 page run 하셨을때 화면의 가운데에 3:9의 비율로
빨간색, 파란색 선이 보이실 거에요.

css파일에서 설정해준것과 같이 빨간색은 poster부분이고 파란색은 content부분인데

따로 height를 설정하지않아서 선처럼 나오는 겁니다.

색깔은 제대로 되었는지 확인하기 위해 넣은 것이므로 확인되신분들은 빼셔도 됩니다! (저도 빼고 진행할게요.)


이제 영화의 정보를 가져올건데요. http://www.omdbapi.com/?t= 의 사이트에서

?t= 뒤에 영화제목을 입력하셔서 확인해보시면 json형태로 영화정보가 나오는 것을 확인하실 수 있습니다!
위의 사이트에서 정보를 가져와 저희가 coding중인 사이트에 뜨도록 할거에요.

그것을 하기위해 app/controllers/movie_controller.rb 파일에서 code를 작성합니다.




위와 같이 작성하시면, 현재 @movie_info에 star wars와 harry potter의 정보가 들어 갔음을 뜻합니다.

이제 이것들을 확인하기위해 다시 index.html.erb 파일과 movie.scss 파일에 들어가서 코드를 수정할게요.





위와 같이 코드를 수정하시고 확인하면 page에 star wars 와 harry potter의 정보가 뜨는 것을 확인할 수 있습니다.
.scss는 개인적으로 보기 이쁘게끔 수정하시면 됩니다. 이후 .scss파일 수정한 내용에 대해서는 따로 언급하지 않고 맨 마지막에서 전체적인 코드만 올릴게요!

이후 포스팅에선 사용자가 원하는 영화 이름을 입력해서 그 영화의 정보를 가져오는 기능을 구현하겠습니다.


블로그 이미지

Tigercow.Door

Back-end / Python / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요