간단히 글쓰는 폼을 만들어보겠다.
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))
외부에서 접근 가능한 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에 데이터를 입력하기 위한 폼을 만들어 보겠다.
'Coding' 카테고리의 다른 글
| 로우코드와 노코드, 코딩 해방 가능한가? (0) | 2024.07.06 |
|---|---|
| 6. Django + Mariadb 연동 & APP DB 어드민 등록 (0) | 2019.01.06 |
| 4. Django DB 만들기 (0) | 2018.12.30 |
| Django 개발 흐름 (0) | 2018.12.16 |
| 3. Django + Bootstrap (1) | 2018.12.16 |