Django 환율 계산 페이지 - 1

✨아주대학교 멋쟁이사자처럼 8기 1학기 2주차 수업용으로 제작한 내용입니다.

배운내용 활용

1. html, css를 작성할 수 있다.
2. html,view,url의 관계를 이해한다.
3. return render를 사용한다.
4. html과 css를 연동한다.

새로운 내용

1. request.GET과 request.POST 에 대해서 이해한다.
2. 템플릿 변수를 사용한다.
3. Bootstrap을 사용해본다.

실습과 관련해서 더 멋지게 코딩하기 위해 나중에 배울 내용

1. Django form에 대해서 익힌다.
2. 모든 페이지에서 공통되는 html을 관리하는 html을 만든다.
3. 폰트를 바꿔본다.

우선 오늘의 목표 페이지에 대해서 설명하겠습니다.

짜잔~ 기능설명부터!

1. home 페이지에 한국 돈을 입력받는 칸을 만든다. ( 그 칸은 숫자만 입력 가능 )
2. home 페이지에 각 나라별 버튼을 만든다.
3. 나라별 버튼을 누르면 result 페이지에서 내가 입력한 숫자와 버튼 누른 나라, 환전 결과가 나오게 한다.
4. 다시 home으로 돌아갈 수 있는 버튼을 result 페이지에 만든다.

1. 기본 환경 설정

이 부분은 저번 주에 한부분이니 간단하게 설명만 하고 넘어가겠습니다.

1. 가상환경, 프로젝트, 앱 만들기

   $ python -m venv myvenv
   $ source myvenv/Scripts/activate
   $ pip install django
   $ django-admin startproject exchangeproject
   $ cd exchangeproject
   $ python manage.py startapp exchangeapp

2. settings.py에 앱 만들었다고 알리기

   'exchangeapp.apps.ExchangeappConfig',

3. 앱 안에 templates폴더/앱이름폴더/html 파일 만들기 - home.html, result.html, about.html

# 난이도 하 버전

[난이도 하 버전!] :

난이도 하버전은 wordcount와 난이도가 아주그냥 똑같습니다. 복습한다고 생각하면 돼요.

1. 나라별로 form 태그 만든다.
2. views.py에 함수도 따로 만든다.
3. 환율 정보도 실시간으로 가져오는거 아니다.

<!-- home.html -->
<h1>환율페이지입니다.</h1>

<h3>달러 환전.</h3>
<form action = "{% url 'usd' %}" method=POST>
    {% csrf_token %}
    <input type=number placeholder="한국 돈을 입력하세요." name="korea">
    <br>
    <button type=submit >미국</button>
</form>

<br>

<h3>옌 환전.</h3>
<form action = "{% url 'jpy' %}" method=POST>
    {% csrf_token %}
    <input type=number placeholder="한국 돈을 입력하세요." name="korea">
    <br>
    <button type=submit >일본</button>
</form>

<br>

<h3>캐나다 돈 환전.</h3>
<form action = "{% url 'can' %}" method=POST>
    {% csrf_token %}
    <input type=number placeholder="한국 돈을 입력하세요." name="korea">
    <br>
    <button type=submit >캐나다</button>
</form>

<!-- usd.html -->
<h1>미국 환전 결과페이지입니다.</h1>

<h3>입력한 한국 돈</h3>
{{korea}}

<h3>미국 환전 결과</h3>
{{usd}}

<br>
<a href="{% url 'home' %}">home</a>

<!-- jpy.html -->
<h1>일본 환전 결과페이지입니다.</h1>

<h3>입력한 한국 돈</h3>
{{korea}}

<h3>일본 환전 결과</h3>
{{jpy}}

<br>
<a href="{% url 'home' %}">home</a>

<!-- can.html -->
<h1>캐나다 환전 결과페이지입니다.</h1>

<h3>입력한 한국 돈</h3>
{{korea}}

<h3>캐나다 환전 결과</h3>
{{can}}

<br>
<a href="{% url 'home' %}">home</a>

#views.py
from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request,'exchangeapp/home.html')

def usd(request):
    korea = request.POST['korea']
    korea = int(korea)
    usd = korea/1217.50
    return render(request,'exchangeapp/usd.html',{'korea':korea,'usd':usd})

def jpy(request):
    korea = request.POST['korea']
    korea = int(korea)
    jpy = korea/1127.26*100
    return render(request,'exchangeapp/jpy.html',{'korea':korea,'jpy':jpy})

def can(request):
    korea = request.POST['korea']
    korea = int(korea)
    can = korea/871.70
    return render(request,'exchangeapp/can.html',{'korea':korea,'can':can})

#urls.py
from django.contrib import admin
from django.urls import path
import exchangeapp.views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',exchangeapp.views.home,name='home'),
    path('usd/',exchangeapp.views.usd,name='usd'),
    path('jpy/',exchangeapp.views.jpy,name='jpy'),
    path('can/',exchangeapp.views.can,name='can')
]