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로 웹 서비스 개발하기


저작자 표시
신고

'WEB > Django' 카테고리의 다른 글

[Django] sns - 사용자 등록 구현  (0) 2017.06.30
[Django] sns - 로그인과 로그아웃 구현하기  (0) 2017.06.30
[Django] sns - 앱 초기화  (0) 2017.06.29
[Django] lotto - 앱 다듬기  (0) 2017.06.28
[Django] lotto - POST 처리  (0) 2017.06.28
[Django] lotto - form 만들기  (0) 2017.06.28

+ Recent posts

티스토리 툴바