Word Counter 만들기
주제: View와 Template 간에 함수를 통해 데이터 가공해서 주고 받기
글귀를 입력하면 총 몇개의 단어로 구성되어 있는지 판단하여 알려주는 사이트 제작하기
사전 이론적 개념
템플릿 언어 - html 안에 쓰는 장고 제공 언어
{{ python_variable }} 파이썬 변수를 html 안에 쓰기
템플릿 필터 - 템플릿 변수에 추가적인 속성 부여
1 2 3 | HTML {{ value | length }} # value의 길이 출력 {{ value | lower }} # value를 소문자로 출력 | cs |
템플릿 태그 - html 상에서 파이썬 문법 사용, url 생성 등의 기능 제공
1 2 3 4 5 6 7 8 | HTML # 반복문 {% for students in class %} {{students}} {% endfor %} # URL 생성 {% url 'url_name' %} | cs |
cf) 템플릿 상속
구성
Template
1. home
사용자로부터 입력 받음
결과 제출 버튼
about과 연결됨
2. about
관련 내용 공지
home과 연결됨
3. count
home으로부터 입력받은 데이터를 함수로 처리하여 결과 출력
View
views.py에 정의되어야 하는 함수
home을 띄우는 함수, about을 띄우는 함수,
count에 전달할 함수!!(home에서 입력받은 데이터를 처리하는 함수)
Url
home을 띄우는 url - root 페이지
about을 띄우는 url - root/about
count를 띄우는 url - root/count
실습
가상환경 시작
python -m venv myvenv
source myvenv/Scripts/activate
project 시작하기
django-admin startproject firstprojectapp 만들기
python manage.py startapp wordcountTemplate 만들기
app/templates(폴더)/wordcount/home.html
app/templates(폴더)/wordcount/about.html
app/templates(폴더)/wordcount/count.html
app과 project 연결하기
app과 project를 연결하는 작업반드시 끝에 , 를 포함하여야 한다.
12345 # project/settings.pyINSTALLED_APPS = [ ... 'wordcount.apps.WordcountConfig',] cs
View 선언
template 파일을 띄워주는 함수를 views.py에 정의하기
1234567 # project/app/views.py def home(request): return render(request,'wordcount/home.html') def about(request): return render(request,'wordcount/about.html') cs
URL conf 연결하기
url과 template 파일을 연결
123456789 # project/urls.pyimport wordcount.views urlpatterns = [ path('admin/', admin.site.urls), path('',wordcount.views.home, name="home"), path('/about',wordcount.views.about, name="about"), path('/count',wordcount.views.count, name="count"),] cs
HTML 내용 채우기
home 과 about은 단순 html 내용을 보여주는 template 파일이므로 이에 맞게 해당 내용을 채워준다.여기서 <a href="{%url 'name' %}> 을 통해 url 생성 템플릿 태그를 활용할 수 있다
1234567891011121314151617181920 # project/app/templates/wordcount/home.html <h1>WORD COUNT</h1> <a href="{%url 'about' %}">ABOUT</a> <form action="{%url 'count' %}"> <textarea cols="40" rows="10" name="fulltext"> <br> </textarea> <input type="submit" value="Count!"/></form> # project/app/templates/wordcount/about.html <h1>ABOUT</h1><p>멋쟁이 사자처럼 7기 윤신웅이 만든 작품입니다</p><p>단어를 세어주는 사이트 입니다</p> <a href="{%url 'home' ">HOME</a> cs
view Count 함수 처리
template 파일을 띄워주는 함수를 views.py에 정의하기
단, count의 경우 단순 띄워주는 것이 작업물을 python 언어로 처리해서 넘겨주어야 한다.
1234567891011121314151617 # project/app/views.py def count(request): full_text = request.GET['fulltext'] # 총 문장 가져오기 word_list = full_text.split() # 단어 개수 세기 # 횟수 총 세서 dictionary 자료형 객체 반환 word_dictionary = {} for word in word_list: if word in word_dictionary: # Increase word_dictionary[word] += 1 else: # add to the dictionary word_dictionary[word] = 1 # 반환 return render(request, 'wordcount/count.html', {'fulltext': full_text, 'total': len(word_list), 'dictionary': word_dictionary.items()}) cs
HTML 내용 채우기
원하는 변수들에 대해서는{}를 통해 가져올 수 있는데 우리가 render로 넘겨받은 것이 dictionary 객체이므로 키값을 통해 값을 가져온다.따라서 {{키}}로 가져오므로 count.html 내용은 다음과 같이 처리된다.
12345678910111213141516 # project/app/templates/wordcount/count.html 당신이 입력한 텍스트는 {{total}}<!--총단어수--> 단어로 구성되어 있습니다.</h1> <a href="{% url 'home' %}"> 다시하기 </a> <h1>입력한 텍스트: </h1><!-- 입력받은 전체 텍스트 -->{{full}} <h1>단어 카운트:</h1><!-- '단어' - '단어나온 횟수' -->{% for word, countTotal in dictionary %}{{ word }} - {{ countTotal }}<br>{% endfor %} cs
Project 만들기
App 만들기
Project에 App 연결하기
Templates 폴더에 템플릿 파일 만들기
Views.py 에서 함수 작성
Urls.py 에서 url path 생성
'Web Programming > Django' 카테고리의 다른 글
| Home & Detail (Blog 모델 상세 페이지) (0) | 2019.01.31 |
|---|---|
| Model & Admin (0) | 2019.01.21 |
| MTV 패턴 (0) | 2019.01.08 |
| Hello World 이론 & 실습 (0) | 2019.01.08 |
| Python & Django 설치 및 세팅 (0) | 2019.01.08 |
