http://conansjh20.pythonanywhere.com/lottopage/
로또 당첨번호 확인
로또 당첨 번호 확인
conansjh20.pythonanywhere.com
위의 홈페이지를 만들기 위한 모든 과정을 하나하나 포스팅 하도록 하겠습니다.
앞서 Hello, World!가 나오는 홈페이지를 만들기 위하여 중간과정은 아무런 설명없이 진행했습니다만 아래와 같이 아주 기본적인 세 개의 파이썬 파일의 동작 원리만 이해하면 됩니다.
1.프로젝트(lottocheck) 폴더의 urls.py
|
1
2
3
4
5
6
7
|
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('lotto.urls')),
]
|
cs |
중에서 6번째 줄은 내 lotto 앱 폴더의 urls.py로 연결해주는 path를 지정해준다는 것이고 앞의 ''는 별다른 추가 경로 입력 없이 바로 접근할 수 있다는 것입니다.
2. 앱(lotto) 폴더의 urls.py
|
1
2
3
4
5
6
|
from django.urls import path
from . import views
urlpatterns = [
path('', views.lottopage, name="lottopage"),
]
|
cs |
마찬가지로 5번째 줄과 같이 아무런 추가 경로 입력 없이, views.py의 lotto(함수)를 연결해주는 path로 지정해 주고 name 값을 줍니다.
3. 앱(lotto) 폴더의 views.py
|
1
2
3
4
5
|
from django.shortcuts import render
from django.http import HttpResponse
def lottopage(self):
return HttpResponse("Hello, World!")
|
cs |
그리고 views.py내의 lotto함수는 HttpResponse 기능을 통하여 Hello, World! 를 출력합니다.
각 urls.py에서 추가 경로 없이 ''만 넣었기 때문에 홈페이지 접근 주소의 경우 추가경로 없이,
http://127.0.0.1:8000/ 또는, 향후 웹에 배포했을때,
http://conansjh20.pythonanywhere.com/
만 입력하는 것으로 가능합니다.
가령 프로젝트 urls.py에 경로를 first/ 로 넣고 앱의 urls.py에 경로를 second/로 넣었다면,
http://127.0.0.1:8000/first/second/
를 입력해야 홈페이지에 접근할 수 있겠지요.
4. templates 작성
다시 앞서 봤던 django의 흐름도를 보면 urls와 views는 정복한 듯 보입니다만 아직 Templates가 남았습니다. 실제 내가 모든 홈페이지의 내용을 views.py에 넣을 것도 아니고 넣을 수도 없기 때문에 기본 프론트앤드의 경우는 역시 html로 만들어야 합니다. 이러한 html을 끌어다 쓰기 위해서 templates를 사용합니다.
저의 경우 기본적인 html에 대한 태그라든지 구조는 알고 있습니다만 최소한의 지식이 필요합니다. 사실 html이나 css까지는 파이썬을 배우시는 분이라면 쉽게 익히지 않을까 싶습니다. 사실 프론트앤드는 이해하는게 중요한 것이 아니라 잘 기획해서 유저들이 사용하기 쉽게 깔끔하게 표현하는 것이 중요하고 어떤 면에서는 훨씬 더 많은 시간 소모 및 어려움이 있는 것 같습니다. 제가 만든 홈페이지 디자인만 보더라도 일반적으로 인터넷 상의 홈페이지들의 디자인에 얼마나 많은 시간과 노력이 들었을 지 짐작도 가지 않습니다.
아무튼 가장 기본적인 html이나 css이용은 알고 계신다는 전제하에 계속 이어가겠습니다.
일단 templates 사용 전 프로젝트 폴더안의 settings.py의 INSTALLED APPS에 저의 lotto 앱을 추가해 줍니다.
(templates를 인식하기 위한 절차입니다.)
|
1
2
3
4
5
6
7
8
9
|
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'lotto',
]
|
cs |
그리고 html파일을 만들어주는데 통상 앱 폴더 안에 templates 폴더를 만들어주고 또 그 안에 앱이름의 폴더를 만들어 h파일을 넣는다고 합니다. 앱을 여러개 만들었을 경우 헷갈리는 것을 방지하기 위해서,
그리고 우리가 만들 html의 경우에 처음 입력 페이지와 결과 페이지 두 개의 html페이지가 필요합니다.
html을 만들기 앞 서 모든 html 파일의 기본 구조를 보면 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head> 브라우져 상에 보이진 않지만 홈페이지의 기능 및 속성을 컨트롤
<meta> 기본적인 홈페이지 설명
<style> css의 기본스타일 지정 </style>
<script> js의 기본 스타일 지정 </script>
<title> 홈페이지 제목 </title>
</head>
<body>
실제로 브라우져 상에 보이는 내용
</body>
</html>
|
cs |
크게 나누면 html은 브라우져 상 눈에 안보이는(title은 보이지만;;) head와 눈에 보이는 body로 나뉜다고 볼수 있고 이 head부분은 모든 홈페이지에 공통으로 넣을 경우 똑같은 내용이 중복되기 때문에 하나만 만들어 모든 html에서 함께 사용할 수 있습니다!
이를 위해서 base가 되는 html부터 만들어보겠습니다. 사실성을 위하여 제가 만든 홈페이지와 똑같은 코드를(매우 엉망인) 보여드리면 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<meta name="title" content="로또 당첨 번호 확인">
<meta name="description" content="로또 당첨 번호 확인할 수 있는 홈페이지 입니다.">
<meta name="keywords" content="로또, 당첨번호, 확인">
<style>
a:link {
color: navy;
}
a:visited {
color: navy;
}
a:hover {
color: #3399ff;
text-decoration: underline;
}
a:active {
color:#3399ff;
text-decoration: underline;
}
input {
width: 350px;
padding: 12px 20px;
margin: 15px 0;
box-sizing: border-box;
border: 2px solid navy;
border-radius: 4px;
}
.center {
text-align: center;
}
#box1 {
margin: 15px;
padding: 0;
}
#box2 {
padding: 10px;
}
.button {
background-color: navy; /* navy */
border: none;
color: white;
padding: 11px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 15px 0;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 4px;
}
.button1 {
background-color: white;
color: black;
border: 2px solid navy;
border-radius: 4px;
}
.button1:hover {
background-color: navy;
color: white;
border-radius: 4px;
}
</style>
<script>
</script>
<title>로또 당첨번호 확인</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
|
cs |
가장 중요한건 맨 위의
{% load static %}
그리고 <body> </body> 에 들어있는,
{% block content %}
{% endblock%}
입니다. 일단 모든 html 파일의 django관련 명령어 로딩은 모두 {% %}안에 한다고 알 수 있습니다.
간단하게 1) static을 부르고 2) 컨텐츠를 블록화 한다. 3) 블록의 끝, 이라고 보면 됩니다.
그리고 왠지 제 눈에는 지저분하게만 보이는 css 속성들을 빼곤 별거 없습니다.
그리고 실제 body부분의 홈페이지를 보면 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
{% extends 'lotto/base.html' %}
{% load static %}
{% block content %}
<br>
<br>
<br>
<br>
<br>
<p>
<center>
<div><h1>로또 당첨 번호 확인</h1></div>
</center>
</p>
<p>
<div>
<center>
<form action="{% url 'lottoresult' %}" method = "post">
{% csrf_token %}
<input placeholder="당첨번호를 입력하세요. (예: 1 11 21 31 41 45)" type="text" name="inputVal"/>
<button type="submit" class="button button1">
확인
</button>
</center>
</div>
</p>
<br>
<br>
<br>
<br>
<br>
<p>
<center>
<div id="box2">
conansjh20@naver.com <br>
<a href="https://conansjh20.tistory.com/" target="_blank">티스토리 블로그</a>
</center>
</p>
{% endblock %}
|
cs |
보시듯 body 부분밖에 없습니다. body 태그도 없구요. 그리고 대신,
{% extends 'lotto/base.html' %} - base가 되는 html의 주소를 넣습니다.
{% load static %}
{% block content %}
과 맨 마지막에
{% endblock %}
가 있어 위 html을 실행할 경우 base가 되는 html을 부르고 두 html을 합체해 줍니다.ㅎㅎ
나머지 주소를 보시면 중간중간 {% %}가 들어간 구문들이 보이는데 이들이 결국 나의 python 프로그램과 html을 연결해 줄것 같은 합리적 추론이 되는군요.ㅎㅎ
다시 한번 html 파일이 들어가는 경로를 보면 다음과 같습니다.
앱폴더(lotto)에 templates폴더를 만들고 그 안에 앱 이름과 동일한 lotto 폴더를 만들어 html 두개를 집어 넣었습니다.