간단히 글쓰는 폼을 만들어보겠다.
1. 글쓰는 폼 만들기
간단히 글쓰기 위한 폼을 만들어본다.
편리한 작업을 위해 bootstrap에서 제공하는 css를 활용하겠다.
bootstrap css는 아래 URL 참조 바란다.
https://getbootstrap.com/docs/3.3/css/
상기 URL에서 제공하는 기본 폼 태그를 Copy하여 html 파일을 하나 만들어준다.
앱 디렉토리의 template디렉토리 안에 생성해준다.
이 폼은 공지사항 등록용으로 사용할것이기에 Notice 라는 디렉토리를 추가로 만들어서 그 안에 생성하였다.
[root@leopit.com notice]# pwd
/home/root/pat/templates/pat/notice
html 페이지 상단에 staticfiles 로드를 해주고 css, js 경로를 수정해준다. 우선 웹페이지만 잘 열리는지 확인할것이므로 이상태로 두고 이 템플릿을 연결할 view페이지를 설정한다.
[root@leopit.com notice]# vim form.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Notice - register</title>
<link href='{% static "pat/vendor/bootstrap/css/bootstrap.min.css" %}' rel="stylesheet">
<!-- Custom fonts for this template-->
<link href='{% static "pat/vendor/fontawesome-free/css/all.min.css" %}' rel="stylesheet" type="text/css">
</head>
<body>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>
앱디텍토리 하위에 있는 뷰파일을 수정하여 방금 생성한 form.html과 연결해준다.
뷰에 대한 상세한 내용은 아래 URL을 참고하기 바란다.
https://docs.djangoproject.com/ko/2.1/intro/tutorial03/
뷰페이지에서는 인자를 받을수도 있고 줄수도 있다.
우선 메뉴얼 예제에 있는 내용을 그대로 사용하겠다.
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
# Create your views here.
def DisplayMyPage(request):
return render(request, 'pat/main.html', { 'welcome_text': 'Hello World!' })
def main(request):
template = loader.get_template('pat/main.html')
context = {
'latest_question_list': "test",
}
return HttpResponse(template.render(context, request))
def ntform(request):
template = loader.get_template('pat/notice/form.html')
context = {
'latest_question_list': "test",
}
return HttpResponse(template.render(context, request))
이 코드는 pat/notice/form.html 템플릿을 불러온후 context를 전달한다. context는 템플릿에서 사용하는 변수명과 python 객체를 연결하는 역할을 한다. 우선 외부에서 페이지가 정상적으로 열리는지만 테스트 할것이므로 더이상 수정하지 않고 이제 URL을 설정하자
외부에서 접근 가능한 URL이 있어야 할것이다.
템플릿, URL, 뷰, 모델 작업 순서에 대해 이해가 잘 안간다면 이전글(http://leopit.tistory.com/164?category=684110)을 참조하기 바란다.
프로젝트 디렉토리 하단에 있는 URL 파일을 연다.
아래와 같이 아까 생성한 뷰페이지를 MyAppView 클래스로 생성한후 notice/form.html 에 연결해준다. 외부에서 notice/form.html URL로 들어올 경우 MyAppView의 ntform 클래스를 실행해주겠다는 이야기이다.
from django.conf.urls import url
from django.contrib import admin
from pat import views as MyAppView
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^main/', MyAppView.main),
url(r'^main.html/', MyAppView.main),
url(r'^$', MyAppView.main),
url(r'^notice/form.html$', MyAppView.ntform),
]
여기까지 한 후 웹 데몬을 실행해주고 외부에서 정상접근 되는지 확인해보자
[root@leopit.com leopit]# python manage.py runserver 0.0.0.0:8000
Performing system checks...
System check identified no issues (0 silenced).
December 30, 2018 - 17:22:52
Django version 1.11.17, using settings 'cert.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.
외부에서 정상적으로 URL을 불러들인 모습이다.
다음장에서는 실제 Django DB에 데이터를 입력하기 위한 폼을 만들어 보겠다.
