sns - 앱 초기화
다시 새로운 어플리케이션을 만들어보자.
이번에는 sns를 구현하면서 로그인/로그아웃 기능을 중점적으로 다루어볼 것이다.
또한 이미지 업로드 기능도 사용해 보도록하자.
먼저 새로운 프로젝트를 만들기 위해서
$django-admin startproject mysite를 콘솔창에 입력해주자
다음으로 어플리케이션을 만들어야하는데
$python manage.py startapp kilogram을 입력한다.
이렇게 만들어진 어플리케이션은 settings.py에 어플 이름으로 등록한다.
또한 LANGUAGE_CODE='ko-kr', TIMEZONE = 'Asia/Seoul'을 변경해주고
정적 파일 사용을 위해 STATIC_ROOT = os.path.join(BASE_DIR,'stiatic')을 추가한다.
작업이 끝났으면 관리자 페이지의 관리자 계정을 만들어준다.
$python manage.py createsuperuser 명령어를 콘솔창에 입력하면 된다.
1 2 3 4 5 6 7 8 9 | from django.conf.urls import url from django.contrib import admin from . import views app_name ='kilogram' urlpatterns = [ url(r'^$', views.IndexView.as_view(), name = 'index'), ] | cs |
이번에는 url을 include 방식으로 적용해볼것이다.
따라서 kilogram 디렉토리 안에 urls.py를 생성한다.
상단에 app_name을 지정하면 다른 어플리케이션과 충돌하지 않는 네임스페이스가 생성된다.
그리고 url에 기존방식과 다르게 views.IndexView.as_view()가 사용되었는데,
이는 views 내부로 접근할 때 함수가 아니라 클래스로 접근한다는 뜻이다.
따라서 function_based view가 아니라 generic view로 접근한다.
1 2 3 4 5 6 7 8 9 | from django.conf.urls import url, include from django.contrib import admin from kilogram import views as kilogram_views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^$', kilogram_views.IndexView.as_view(), name = 'root'), url(r'^kilogram/', include('kilogram.urls')), ] | cs |
마찬가지로 이 경로에 접근하기 위해서 mysite의 url도 지정 해줘야한다.
kilogram으로 접근했을 때 kilogram.urls 파일로 연결시켜주며 이를 위해서 include 함수가 사용된다.
include 함수를 사용하기 위해서는 반드시 from django.conf.urls import include의 명시가 필요하다.
그리고 일반적인 localhost:8000번으로 접근했을때도 kilogram 앱으로 연결시켜주기 위해서 url을 추가한다.
이를 위해서 kilogram의 views를 추가해야하는데 다른 어플리케이션과의 충돌을 피하기 위해
as 키워드로 kilogram_views라는 별칭을 만든다.
1 2 3 4 5 | from django.shortcuts import render, redirect from django.views.generic.base import TemplateView class IndexView(TemplateView): template_name = 'kilogram/index.html' | cs |
url이 다 수정되었으므로 views를 수정해야한다.
generic view로 설정했으므로 IndexView라는 클래스를 만든다.
이 클래스는 템플릿을 그냥 그대로 보여주는 기능만 하기 때문에
from django.views.generic.base import TemplateView를 추가하여 상속받아 사용한다.
그리고 template_name을 지정해주면 해당 템플릿이 출력된다.
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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Kilogram</title> <!-- Bootstrap --> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'kilogram/style.css' %}" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default navbar-static-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{% url 'kilogram:index' %}"> <span class="glyphicon glyphicon-camera"> </span> Kilogram </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"> <span class="glyphicon glyphicon-user"></span> Login</a></li> <li><a href="#">Logout</a></li> <li><a href="{% url 'admin:index' %}">Admin</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div> {% block content %} {% endblock %} </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> | cs |
템플릿은 항상 해당 앱 내부에 templates/앱 이름/ 아래 넣어줘야한다.
이 앱에서는 templates/kilogram/~~~.html을 넣어주면 된다.
우선 모든 페이지의 base가 되는 base.html을 생성해주자.
base.html을 위의 네비게이션 바를 만드는 것이고,
이것을 베이스로 모든 템플릿을 생성할 것이다.
1 2 3 4 5 6 | {% extends 'kilogram/base.html' %} {% block content %} <h1>Kilogram Main Page</h1> {% endblock %} | cs |
따라서 base.html을 extends하여 만든 index.html은
위와 같이 간단하게 만들어 질 수 있다.
출처 : 인프런, 파이썬 웹 프로그래밍, Django로 웹 서비스 개발하기
'개발' 카테고리의 다른 글
| [Django] sns - 사용자 등록 구현 (0) | 2017.06.30 |
|---|---|
| [Django] sns - 로그인과 로그아웃 구현하기 (0) | 2017.06.30 |
| [Django] lotto - 앱 다듬기 (0) | 2017.06.28 |
| [Django] lotto - POST 처리 (0) | 2017.06.28 |
| [Django] lotto - form 만들기 (0) | 2017.06.28 |
댓글