enjoeyland

파이썬 플라스크 글자수 세기 코딩 예제 본문

프로그래밍/파이썬(python)

파이썬 플라스크 글자수 세기 코딩 예제

민경현(Kyunghyun Min) 2015. 11. 5. 14:25

파이썬 플라스크 글자수 세기 코딩 예제

사람들이 넣은 문장의 단어수를 세는 프로그램을 만들어 보겠습니다.(word counting)

이 프로그램에서는 python3(파이썬) ,flask(프라스크),브라우저(크롭) 가 필요 합니다.

이 프로그램은 workplace라는 폴더 안에 하시는 것을 추천합니다. 


이 코드의 이름을 myweb_wordcount.py 라고 지어봅시다.

1
2
3
4
5
6
7
8
9
10
11
from flask import Flask, render_template
app=Flask(__name__)
 
 
@app.route('/')
def index():
    return render_template('index.html')
 
if __name__=='__main__':
    app.debug = True
    app.run(port=80)
cs
  1. 1번째줄: from flask import Flask를 import flask로하고 
1
2
3
4
5
6
7
8
9
10
11
import flask
app=flask.Flask(__name__)
 
 
@app.route('/')
def index():
    return flask.render_template('index.html')
 
if __name__=='__main__':
    app.debug = True
    app.run(port=80)
cs
  1. 이렇게 써도 된다.
  2. 5번째줄: @app.route('/')에서 @기호는 '데코레이터(decotator)'라고 하며 그 이름처럼 함수를 꾸미는 역할을 합니다. route는 Flask 메소드에 포함되있습니다. 여기에가면 좀 더 정확하게 알수있습니다. 그리고 '/'는 root이고 새로운 창을 만든다고 생각하면된다.
  3. 6번째줄: def(define)는 함수를 의미하며 7번째줄처럼 return 값을 갖을 수 있습니다. 
  4. 7번째줄:return 뒤에 올 것이 화면에 띄워지다. 예를 들어 return "Hello World!"로 바꾸면 화면에 " Hello World!"를 프린트할거다.   
  5. 9번쨰줄: 이 프로그램이 실행 할 때인지 물어보는 거다.(import로 이 프로그램을 다른 프로그램에서 사용 할 수도있기 떄문이다.) 여기에가면 좀 더 정확하게 알수있습니다.

templates라는 파일을 만들어 그 안에서 진행하세요 

  • templates/index.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Enjoeyland</title>
        <meta charset="UTF-8"/>
        <link rel="icon" type="image/png" href="https://t1.daumcdn.net/cfile/tistory/2154B34E563A024816"  />
        <link rel="stortcut icon" href="https://t1.daumcdn.net/cfile/tistory/2154B34E563A024816" />
 
    </head>
    <body>
        <div>
            <form action='/word_counter' method='post'>
                <input type='submit' value='word_counter' name='move_to_wordcounter'>
            </form>
        </div>    
    </body>
</html>
cs


  1. 2번째줄:  <!DOCTYPE html>은 document type 즉 문서 유형이 html 형식이라는 것이다.
이쯤에서 한번 실행해보자! 
  • linux
root@enjoeyland:~# cd /opt/workplace/wordCountProject
root@enjoeyland:/opt/workplace/wordCountProject# python3 myweb_wordcount.py
 * Running on http://127.0.0.1:80/ (Press CTRL+C to quit)
 * Restarting with stat

  • window
cmd 창을 띄울때 window+r 을 같이 누르고 cmd라고 입력하면 된다.

C:\Users\enjoeyland>cd workplace\wordCountProject
C:\Users\enjoeyland\workplace\wordCountProject>myweb_wordcount.py
 * Running on http://127.0.0.1:80/ (Press CTRL+C to quit)
 * Restarting with stat

그후 브라우저을 켜고 '127.0.0.1'라고 입력하면 'word_counter'라고 하는 버튼이 있을 것이다.
아직 버튼은 누르지말자.
위에서  <input type='submit' value='word_counter' name='move_to_wordcounter'>가 이해가 갈것이다.
type 버튼을 만들어주는것이고  value는 버튼에 이름을 쓰는 것이고 name은 버튼의 이름이다. 
더 자세한 것은 여기에 가서 확인하세요.

이 것은 실행한 채로 놔두고 다음을 진행 합시다.



이 것은 myweb_wordcount.py다음에 이어서 작성하면된다.

1
2
3
4
5
 ...
@app.route('/word_counter', methods=['POST'])
def text_adopter():
    return render_template('word_counter.html')
 ...
cs
  1. 2번쪠줄: 위헤서 말했듯이 @는 데코레이터이고 '/word_counter'는 root아래 word_counter라는 창을 만들었다고 하면된다.


  • templates/word_counter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>word counter</title>
<meta charset="UTF-8"/>
<link rel="icon" type="image/png" href="https://t1.daumcdn.net/cfile/tistory/2154B34E563A024816"  />
<link rel="stortcut icon" href="https://t1.daumcdn.net/cfile/tistory/2154B34E563A024816" />
</head>
<body>
<div>
<form action='/word_counter/calculate' method='post'>
<input type='text' placeholder='put user text here' size=100 name='text_adopter'>
<input type='submit' name='Submit'>
</form>
</div>
</body>
</html>
 
cs



이 것도 myweb_wordcount.py 다음에 이어서 작성하면된다.

1
2
3
4
5
6
7
8
9
from flask import request
 
...
@app.route('/word_counter/calculate', methods=['POST'])
def word_counter():
    text=request.form['text_adopter']
    byte=str.encode(text)
    return render_template('result_screen01.html',text=text,text_length=len(text), byte=byte,byte_length=len(byte))
...
cs


  • templates/result_screen.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>word counter</title>
<meta charset="UTF-8"/>
<link rel="icon" type="image/png" href="https://t1.daumcdn.net/cfile/tistory/2154B34E563A024816"  />
<link rel="stortcut icon" href="https://t1.daumcdn.net/cfile/tistory/2154B34E563A024816" />
</head>
<body>
<div>
<p>{{ text }}</p>
<p>--->{{ text_length }}</p>
<p>{{ byte }}</p>
<p>--->{{ byte_length}}</p>
</div>
<div>
<form action='/' method='post'>
<input type='submit' value='돌아가기' name='back_to_index'>
</form>
</div>
</body>
</html>
cs




  • 파일형식은 

/ workplace

/wordCountProject

/templates

 /index.html

 

 

 

 /word_counter.html

 

 

 

 /result_screen.html

 

 

/__init__.py

  

/myweb_wordcount.py

여기서 파란색은 파일 입니다. 그리고  __init__.py는 빈 페이지입니다. __init__.py는 값들을 초기화하기 위해있는 것입니다.


Reference

  • http://pinocc.tistory.com/175

  • http://trowind.tistory.com/72

  • http://www.w3schools.com/tags/tag_input.asp