Django web 예제 - wordcount

오늘은 입력된 값에서 단어를 세주는 프로그램을 만들어보려고 합니다.

 

결과화면은 다음과 같습니다.

왼쪽과 같이 입력하면 오른쪽과 같습니다.

*생각해보기*

<필요한 화면>

main.html - 사용자로 부터 값을 받음, 결과 제출 버튼

result.html - 결과화면

 

<우리가 만들어야 하는 함수 views.py>

- main을 띄우는 함수

- result에 전달할 함수(main에서 입력받은 데이터를 처리하는 함수) => 글자를 세 주는 함수

  html은 그저 보여지는 아이일 뿐!

 

<우리가 만들어야 하는 url>

 - main  -> path(' '),

 - result -> path('/result'),

 

자 우선 본격적으로 시작하기에 앞서, 템플릿 언어에 대한 개념을 이야기해볼께요.

*템플릿 언어*

html 안에 쓰틑 장고 제공 언어.

html 안에 파이썬 변수, 문법을 쓰고 싶을 때 사용

 

- 템블릿 변수 {{템플릿 변수}}

  : 해당 파이썬 변수를 html파일에 담아 화면에 출력하라는 의미.

   ex) 예를 들어 파이썬 파일에 num=3가 되어 있고

  html파일에 {{num}}이 있으면 3을 출력한다.

 

- 템블릿 필터 {{ 템플릿 변수 | 필터 }}

  : 템플릿 변수에 추가적인 속성 및 기능 제공

 ex) {{변수 | length }} : value 길이 반환

 

- 템플릿 태그

  html상에서 파이썬 문법을 사용할 때 이용, url생성 등의 기능 제공

  html태그가 그러하듯이 끝나는 태그가 있어줘야 함.

 {%tag%] ~~~~{%endtag%}

{% for student in calss %}
    {{student}}
{% endfor %}    

*WordCount Project*

우선 project를 만들고, app을 만들어 setting.py에 등록해준 후,

templates에 html 화면을 만들어 views.py에 등록하고,

urls.py 에 이를 연결해줍니다.

(가상환경 켜기) python -m venv myvenv 

(가상환경 접속) . myvenv/Scripts/activate

 

(쟝고 설치) pip install django

 

(프로젝트 만들기) django-admin startproject project

 

(앱 만들기) python manage.py startapp myapp

 

(프로젝트에 앱 연결 : setting.py)

 

(앱에 Templates 파일 만들기 - html 만들기)

 

(views에 만든 html을 처리하는 함수 만들기)

 

(views 함수를 url 연결)

우선 첫 화면 main.html을 만들어줍니다.

<!--main-->
<p>숫자 세는 프로그램입니다.</p>

<form action=""> <!--우선 action 부분은 비워둡니다.-->
    <textarea cola="40" rows="10" name="totaltext"></textarea>
    <input type="submit" value="계산하기!">
</form>

-

#views.py

def main(request):
    return render(request, 'main.html')
    
#urls.py
import myapp.views

path('', myapp.views.main, name='main'),

이제 result.html 페이지를 만들어 봅니다.

<!--result-->
<h1>입력한 텍스트는 <!--총단어수--> 단어로 구성되어 있습니다.</h1>

<a href=""> 다시하기 </a>

<h1>입력한 텍스트: </h1>

<h1>단어 카운트:</h1>

-

#views.py
def result(request):
    return render(request, 'result.html') 

우선 result 페이지를 불러오는 함수를 짰습니다.

이 상황에서 버튼을 누르면 넘겨주는 작업부터 해볼까요?

 

버튼 누르면 페이지 넘기기

-템플릿 변수를 이용하여 a태그에 어디로 넘겨져야 하는지 알려줘야 하는데요.

{% url '이름' %}은 urls.py에서 설정했던 path를 실행시키겠다는 명령어입니다.

그 뒤에 '이름'은 path 설정할때 name="main"하고 적었던 부분에서 main을 의미합니다

<!--result-->
<h1>입력한 텍스트는 <!--총단어수--> 단어로 구성되어 있습니다.</h1>

<a href="{% url 'main' %}"> 다시하기 </a>

<h1>입력한 텍스트: </h1>

<h1>단어 카운트:</h1>

 

result 함수 기능 넣어주기 -1) main input 값 가져오기

자 이제 페이지 넘기는 것까지 해냈습니다!!

이제 우리는 main에서 입력한 값을 result 로 불러와서

단어의 수를 세는 이러쿵 저러쿵한 작업을 해줘야겠죠?!

우선main에 form action 속성에 result로 간다는 걸 알려줘야겠죠?

<form action="{% url 'result' %}">
    <textarea cola="40" rows="10" name="totaltext"></textarea>
    <input type="submit" value="계산하기!">
</form>

폼이란 사용자의 데이터를 서버에 전송하는 방법입니다.

 action 속성은 사용자가 입력한 데이터를 전송할 서버의 URL을 알려주는 것이고,

 method 속성은 사용자가 입력한 데이터를 전송하는 방법으로 get,post 방법이 있습니다.

form은 기본적으로 get 방식으로 데이터를 보내줍니다.

 

get? post?

get : action에 입력한 URL에 파라미터의 형태로 전송

post : header의 body에 포함해서 전송

 

get과 post 방식은 url 보내는 값들을 보여주냐 안보여주냐의 차이로 가볍게 알 수 있는데,

그래서 회원가입처럼 url에 정보를 노출시키면 안되는 것을 post 방식으로 처리하죠.

이에 대한 것은 다음 시간에 좀 더 깊게 다루어 보겠습니다.

 

즉 우리의 코드는 result라는 url에 textarea 내용을 get 방식으로 보내주겠다! 뭐 그런 의미인거죠.

 

이제 views.py에서 result를 작업해줘야 하는데요.

뭔가 지금처럼 페이지를 불러오는 것에서 더 해야겠다는 느끼이 든디면!

조금 더 함수를 바꾸어야 겠다는 느낌이 든다면!

잘하고 있는 거에요 ㅎㅎ

def result(request):
    full_text = request.GET['totaltext']
    # textarea에서 전송된 정보를 totaltext라는 변수에 담는 코드입니다.
    return render(request, 'result.html', {'total_text': full_text}) 
    #이런 데이터들도 result에 넘겨주겠다는 선언

 

우리가 앞서 get 방식으로 보내줬기에 request.Get으로 totaltext를 받아, full_text 변수에 넣어줍니다.

그리고 render함수로 값을 보낼때는 딕셔너리를 이용해주는데,

이는 "사전형 객체에 해당하는 데이터를 result.html에 담아서 띄워라"라는 의미를 가지고 있습니다. 

이때 full_text를 value값에 해당하고, 이에 대응하는 key명은 아무렇게나 지어주면 됩니다.

 

 

이때 result.html에서 full_text의 값을 받기 위해서는 ,

값을 딕셔너리로 보내주었으니 키값(total_text)을 통해 불러올 수 있습니다.

{{total_text로 만들어줍니다.}}

<!--result-->
<h1>입력한 텍스트는 <!--총단어수--> 단어로 구성되어 있습니다.</h1>

<a href="{% url 'main' %}"> 다시하기 </a>

<h1>입력한 텍스트:{{total_text}} </h1>

<h1>단어 카운트:</h1>

result 함수 기능 넣어주기 -2) 총 단어 수 세기

- 이때 칭하는 단어는 띄어쓰기로 나뉘어지는 아이들을 의미합니다.

split 함수를 이용하면 이를 구현 해볼 수 있겠죠?:>.

#split 함수

data ="안녕 하이로 헤헤"

data_list=data.split()

print(data_list)

 

>>결과 ['안녕', '하이로', '헤헤']

def result(request):
    full_text = request.GET['totaltext']
    # textarea에서 전송된 정보를 totaltext라는 변수에 담는 코드입니다.

    word_list = full_text.split()

    return render(request, 'result.html', {'total_text': full_text, 'total': len(word_list)}) 
    #이런 데이터들도 result에 넘겨주겠다는 선언

<!--result-->
<h1>입력한 텍스트는 {{total}} 단어로 구성되어 있습니다.</h1>

<a href="{% url 'main' %}"> 다시하기 </a>

<h1>입력한 텍스트:{{total_text}} </h1>

<h1>단어 카운트:</h1>

result 함수 기능 넣어주기 -3) 각 단어별 나온 횟수 세는 기능

def result(request):
    full_text = request.GET['totaltext']
    # textarea에서 전송된 정보를 totaltext라는 변수에 담는 코드입니다.

    word_list = full_text.split()
    
    word_dic = {}

    for word in word_list:
        if word in word_dic:
            word_dic[word] +=1
        else:
            word_dic[word]=1    
    return render(request, 'result.html', {'total_text': full_text, 'total': len(word_list), 'dictionary': word_dic.items()}) 
    #이런 데이터들도 result에 넘겨주겠다는 선언

<!--result.html-->
<h1>입력한 텍스트는 {{total}} 단어로 구성되어 있습니다.</h1>

<a href="{% url 'main' %}"> 다시하기 </a>

<h1>입력한 텍스트:{{total_text}} </h1>

<h1>단어 카운트:</h1>

{% for word, num in dictionary %}
{{word}} : {{num}}
{% endfor %}