지금까지 1번부터 7번까지 진행하면서
url mapping, template, static file에 대해 다뤄봤습니다.
이제 지금까지 공부한 내용을 토대로 간단하게 Lotto 번호 추천 사이트를 만들어보려합니다.
그전에 block 개념에 대해 공부하겠습니다.
1. block
어떤 웹페이지에서 페이지를 옮길 때마다 각각 페이지마다 글꼴이라던가 설정들이 다른 경우는 많지 않습니다.
보통 html의 태그 내의 내용이 바뀌고 설정은 그대로인 경우가 많습니다.
이렇게 설정은 재사용하고 태그 내의 내용 바꾸기를 쉽게하기 위해 block 개념을 사용합니다.
이렇게 태그를 제외하고 나머지는 재사용할 base.html을 만들어 주겠습니다.
#firstapp/templates/firstapp/base.html
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>로또 번호</title>
<link rel="stylesheet" type="text/css" href="{% static 'firstpp/styles.css' %}">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>페이지 마다 다르게 보여질 태그 내에 block을 명시합니다.
현재 block의 이름을 content라고 설정한 상태입니다.
이제 index.html에서 재사용해보겠습니다.
#firstapp/index.html
{% extends 'firstapp/base.html' %}
{% load static %}
{% block content %}
<h2>로또 번호 추천</h2>
<img src="{% static 'firstapp/image.jpg' %}" alt="nugget"/>
<p>현재 시각: {{ current_date|date:"Y년 m월 d일 H시 i분 s초" }}</p>
<a href="{% url 'select' %}">시작하기!</a>
{% endblock %}이제 base.html에 있는 코드는 중복해서 작성하지 않아도 됩니다.
단, 항상 템플릿 파일의 첫줄은
{% extends %}을 넣어주어야 합니다.
즉, {% extends 'first/base.html' %}의 경우 이 템플릿은 'firstapp/base.html'을 렌더링하고 그 이후에 렌더링한다 라는 뜻입니다.
그리고 에 들어가야할 내용을 전에 content라는 이름의 block을 선언해주면 됩니다.
그리고 base.html에서 css 파일을 링크해주었으니 css 파일을 만들겠습니다.
firstapp/static/firstapp에서 style.css 파일을 만들고 다음과 같이 작성하겠습니다.
#firstapp/style.css
body {
text-align:center;
}2. 간단한 웹 페이지 만들기
이제 block 개념을 이용해 간편하게 웹페이지 만드는 방법을 학습했으니 나머지 두 template(select, result)도 마저 수정해서 Lotto 번호를 출력해주는 사이트를 만들어보겠습니다.
#select.html
{% extends 'firstapp/base.html' %}
{% block content %}
<p>수를 하나 입력해주세요.</p>
<form action="{% url 'result' %}" method="get">
<input type="number" name="number"/> <!-- 사용자가 입력할 숫자 데이터에 number라는 이름을 줍니다. -->
<button type="submit">결과보기</button>
</form>
{% endblock %} 여기서 짚고 넘어갈 것이 있습니다.
form의 action과 method입니다.
action은 form data를 받을 주소를 명시합니다.
method는 form data를 서버에 보내는 방식을 선택하는 것인데 get과 post가 있습니다.
get은 url 끝에 form data를 붙이고
post는 url에 form data를 표시하지 않습니다.
태그를 이용해 서버에 data를 보냈습니다. 이제, 받은 data를 result에서 어떻게 처리할지 views를 건드려야 합니다. ``` # views.py def select(request): context = {} return render(request, 'firstapp/select.html', context)
def result(request):
chosen = int(request.GET['number']) ## number라는 값으로 전달받은 데이터를 꺼내옵니다.
context = {'numbers':[chosen, 2, 3, 4, 5, 6]} ## 첫 데이터를 받은 데이터로 넣습니다.
return render(request, 'firstapp/result.html', context)
result 메서드를 보면
request.GET이라는게 있는데 이는 ***get메서드로 보내준 정보가 dictionary형태로 저장되어 있는 것***입니다.{'number' : '<유저가 입력한 수>'}
이런식으로 말이죠.
그리고 유저가 입력한 수는 string으로 저장되기 때문에 숫자로 바꿔줘야 합니다. 그래서 int() 메서드를 사용한 것입니다.
***result.html
{% extends 'firstpp/base.html' %}
{% load static %}
{% block content %}
<h3>추천 번호는 다음과 같습니다.</h3>
<div style="text-align:left;">
<ul>
{% for num in numbers %}
<li>{{ num }}</li>
{% endfor %}
</ul>
</div>{% endblock %}
이제 runserver로 확인해보면 유저가 입력한 수가 첫번재 리스트에 그리고 2,3,4,5,6이 순서대로 나오는 것을 확인할 수 있습니다.
***
유저로 부터 정보를 받아 넘겨주고 넘겨받은 정보를 화면에 표시하는 것까지 완성했습니다.
이제 진짜 로또 추천번호를 표시해주는 웹페이지를 만들어보겠습니다.
views.py는 에서 로직을 짜겠습니다.from django.shortcuts import render
from datetime import datetime
import random ## 랜덤하게 뒤섞기 위해 임포트
def index(request):
now = datetime.now()
context = {
'current_date': now
}
return render(request, 'firstapp/index.html', context)
def select(request):
context = {}
return render(request, 'firstapp/select.html', context)
def result(request):
chosen = int(request.GET['number'])
results = []
# 만약 수가 범위를 초과하지 않으면 결과 값에 미리 선택한 수를 넣는다.
if chosen >= 1 and chosen <= 45:
results.append(chosen)
# 값을 꺼낼 박스를 마련한다.
box = []
for i in range(0, 45):
if chosen != i+1:
box.append(i+1)
#for문이 다 돌고나면 box에는 1~45까지 숫자가 담겨있고 chosen은 담겨있지 않다.
# 랜덤하게 뒤섞는다.
random.shuffle(box)
# results 개수가 6개가 될 때 까지 값을 하나씩 꺼낸다.
while len(results) < 6:
results.append(box.pop())
context = {'numbers':results}
return render(request, 'firstapp/result.html', context)python의 random 모듈에 대한 설명은
https://wikidocs.net/79
을 참고하면 됩니다.
이제 runserver를 하면 원하는 동작을 하는 웹페이지를 확인할 수 있습니다.
