반응형

<로그인 기능 구현 >


1.accounts app 생성 

1
$python manage.py startapp accounts
cs


-> settings.py ->  app 목록 -> accounts 추가

1
'accounts.apps.AccountsConfig',
cs


2.template 만들기 -> login.html / signup.html =>  accounts/templates/accounts


-> signup.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
{% extends 'base.html' %}
 
{% block content %}
 
<h1>Sign Up!</h1>
 
<form>
    Username:
    <br>
    <input name="username" type="text" value="">
    <br>
    Password:
    <br>
    <input name="password1" type="password" value="">
    <br>
    Confirm Password:
    <br>
    <input name="password2" type="password" value="">
    <br>
    <br>
    <input class="btn btn-primary" type="submit" value="Sign Up!">
</form>
 
{% endblock %}
cs


-> login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% extends 'base.html' %}
 
{% block content %}
 
<h1>Login</h1>
 
<form>
    Username:
    <br>
    <input name="username" type="text" value="">
    <br>
    Password:
    <br>
    <input name="password" type="password" value="">
    <br>
    <br>
    <input class="btn btn-primary" type="submit" value="Login">
</form>
 
{% endblock %}
cs


3. accounts/ views.py 에서 페이지 연결

1
2
3
4
5
6
7
8
9
10
11
from django.shortcuts import render
    
    # Create your views here.
    
    
    def signup(request):
        return render(request, 'accounts/signup.html')
    
    
    def login(request):
        return render(request, 'accounts/login.html')
cs



4.accounts/ulrs.py 생성해서 url 연결

1
2
3
4
5
6
7
8
from django.urls import path
from . import views
 
urlpatterns = [
    path('signup/', views.signup, name='signup'),
    path('login/', views.login, name='login'),
]
 
cs


5. 프로젝트 urls.py -> include로 연결

1
path('accounts/', include('accounts.urls')),
cs


6. navbar 에 login.html과 signup.html 연결될 링크 만들어줌 -> base.html

1
2
    <a class="nav-item nav-link" href="{% url 'signup'%}">Signup</a>
    <a class="nav-item nav-link" href="{% url 'login'%}">Login</a>
cs

<회원 가입 기능 구현하기>

1.template 수정하기 signup.html

1
2
3
<form method="POST" action="{% url 'signup'%}">
 
{% csrf_token %}
cs


##RESTful - HTTP method

-> GET - 데이터 조회(READ)

-> POST - 데이터 생성(CREATE)

-> PUT - 데이터 수정(UPDATE)

-> DELETE - 데이터 삭제(DELETE)


##{% csrf_toekn %} 

-> 보안 위해 사용하는 내용 


##form태그 안에 적어주어야 form을 submit 할 떄 같이 전송됨


2.view 수정하기 <accounts/views.py>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
from django.shortcuts import render, redirect
from django.contrib.auth.models import User
from django.contrib import auth
    
    # Create your views here.
    
    
def signup(request):
    if request.method == 'POST':
        if request.POST['password1'] == request.POST['password2']:
            user = User.objects.create_user(
                request.POST['username'], password=request.POST['password1'])
            auth.login(request, user)
            return redirect('home')
    return render(request, 'accounts/signup.html')
    
    
cs


<로그인 기능 구현하기>

1.template 수정하기 <login.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
{% extends 'base.html' %}
 
{% block content %}
 
{% if error %}
{{ error }}
<br>
<br>
{% endif %}
 
<h1>Login</h1>
 
<form action="{% url 'login' %}" method="POST">
        {% csrf_token %} <!-- csrf 공격 방어하는 수단 for 보안 -->
    Username:
    <br>
    <input name="username" type="text" value="">
    <br>
    Password:
    <br>
    <input name="password" type="password" value="">
    <br>
    <br>
    <input class="btn btn-primary" type="submit" value="Login">
</form>
 
{% endblock %}
cs


2. accounts/views,py -> login 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
def login(request):
    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
 
        user = auth.authenticate(request, username=username, password=password)
        if user is not None:
            auth.login(request, user)
            return redirect('home')
        else:
            return render(request, 'accounts/login.html', {'error': 'username or password is incorrect.'})
 
    else:
        return render(request, 'accounts/login.html')
cs


<logout 구현하기>

1.view 추가하기 (accounts/views.py)

1
2
3
4
5
def logout(request):
    if request.method == 'POST':
        auth.logout(request)
        return redirect('home')
    return render(request,'accounts/login.html')  
cs


2.url 추가하기(accounts/urls.py)

1
path('logout/', views.logout, name='logout'),
cs



<login/logou/signup 기능 navbar링크 걸기>

->(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
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{% url 'home' %}">Like Lion</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-item nav-link" href="{% url 'home' %}">HOME</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link" href="{% url 'portfolio' %}">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link" href="{% static '수료증 - 삼육대 - 오지수.pdf'%}">수료증</a>
                    </li>
                    {% if user.is_authenticated %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">환영합니다. {{ user.username }} 님!</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{% url 'new' %}">글쓰기</a>
                            <a class="dropdown-item" href="javascript:{document.getElementById('logout').submit()}">Logout</a>
                            <form id="logout" method="POST" action="{% url 'logout' %}">
                                {% csrf_token %} <input type="hidden" />
                            </form>
                        </div>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-item nav-link" href="{% url 'signup' %}">Signup</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
cs



요렇게 하면 ~

로그인시 화면 이렇게 출력~ hidden도 된다 

반응형
저작자표시 변경금지

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

[5.5주차]Faker  (0) 2019.03.05
[5주차]2.Pagination  (0) 2019.03.05
[4주차]2.blog-(3)  (0) 2019.03.05
[4주차]2.blog-(2)  (0) 2019.03.04
[4주차]2.blog-(1)  (0) 2019.03.04
반응형

<portfolio app 만들기>


1. app 만들기

1
$python manage.py startapp portfolio
cs


<settings.py>-> portfolio app 추가

1
INSTALLEDS_APP=['portfolio.apps.PortfolioConfig',]
cs


2. template 만들기-> portfolio 폴더 안-> templates폴더 생성 -> portfolio폴더 생성-> portfolio.html


3. view 만들기 -> portfolio 폴더 안 -> views.py

1
2
def portfolio(request):
    return render(request, 'portfolio/portfolio.html')
cs


4.url 수정 -> secondproject 폴더 안 -> urls.py

1
2
3
4
import portfoilo.views
urlpatterns = [
    path('portfoilo/', portfolio.views.portfolio, name='portfolio'),
]
cs



##불편함 해결1 : html파일 중복 해결


1. second_assignment project 안 -> templates 폴더 -> base.html (기본 골격이 되는 html)

-> 계속 들어가는 코드부분만 지워버리고 밑에 코드 채워줌

1
2
3
4
<div class="container">
{% block content%}
//변경될 내용 들어감
{% endblock %}
</div>
cs


2. home.html -> base.html과 중복되는 내용 부분 날려줌

<home.html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% extends 'base.html'%}
{% block content %}
<br>
{% for blog in blogs.all %}
<br>
    <div class="container">
        <a href="{% url 'detail' blog.id %}">
            <h1>{{ blog.title }}</h1>
        </a>    
        <p>{{ blog.pub_date }}</p>
        <p>{{ blog.summary }}<a href="{% url 'detail' blog.id %}">....more</a></p>
    </div>
{% endfor %}
{% endblock %}
cs


3. django에게 우리가 기본으로 쓸 html 파일의 위치를 알려주는 작업 해야함

<settings.py> -> TEMPLATES -> DIRS

1
'DIRS': ['secondproject/templates'],
cs


4. portfolio.html 에 navbar 넣어보기 

1
2
3
4
5
{% extends 'base.html' %}
 
{% block content%}
<h1>포토폴리오 페이지 입니다</h1>
{% endblock %}
cs

##불편함 해결하기 2 : url 정리

-> blog path들은 blog 폴더 안에서 해결, portfolio관련 path들은 portfolio 폴더 안에서 해결하게 정리


1. blog 폴더 안 -> urls.py 파일

2. secondproject 안 -> urls.py 내용 복사 -> blog /urls.py에 넣어줌

3. blog 관련 path들과 import 관련 내용 싹 다 정리

<blog/urls.py>

1
2
3
4
5
6
7
8
9
10
from django.urls import path
from . import views
 
 
urlpatterns = [
    path('<int:blog_id>/', views.detail, name='detail'),
    path('new/', views.new, name='new'),
    path('create/', views.create, name='create'),
]
 
cs



<portfolio/urls.py> 

1
2
3
4
5
6
from django.urls import path
from . import views
 
urlpatterns = [
     path('portfolio/', views.portfolio, name='portfolio'),
]
cs


<프로젝트 폴더 안 /urls.py> -> blog관련/portfolio url정리/

1
2
3
4
5
6
7
8
9
10
11
from django.contrib import admin
from django.urls import path, include
import blog.views
import portfolio.views
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', blog.views.home, name='home'),
    path('blog/', include('blog.urls')),
    path('portfolio/', include('portfolio.urls')),
]
cs


<portfolio static 이미지로 꾸미기>

1. https://getbootstrap.com/docs/4.3/examples/album/ 에서 소스코드 main부분만 가져오고 필요없는 것 지우기

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
{% extends 'base.html' %}
 
{% block content%}
<h1>포토폴리오 페이지 입니다</h1>
<main role="main">
 
  <section class="jumbotron text-center">
    <div class="container">
      <h1 class="jumbotron-heading">travel destination</h1>
      <p class="lead text-muted">likelion at sahmyook ohjisu</p>
      <p>
        <a href="{% url 'home'%}" class="btn btn-primary my-2">home</a>
        <a href="#" class="btn btn-secondary my-2">new destination</a>
      </p>
    </div>
  </section>
 
<div class="album py-5 bg-light">
    <div class="container">
 
      <div class="row">
        <div class="col-md-4">
          <div class="card mb-4 shadow-sm">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
            <div class="card-body">
              <p class="card-text">설명</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                </div>
                <small class="text-muted">9 mins</small>
              </div>
            </div>
          </div>
        </div>
        </div>
    </div>
</div>
 
</main>
{% endblock %}
cs


2. static file = 정적 파일 (css, js, image)

#Django는 static 파일을 2개로 구분

-> static : 웹 서비스를 위해 개발자가 준비해두는 파일

->  media : 웹 서비스 이용자들이 업로드 하는 파일 


<portfolio 폴더 안 -> static 폴더 -> 사진 한장 삽입>


<settings.py -> 코드 추가> : django 프로젝트에 static 폴더라는게 생겼다는 것 알려줌

1
2
3
4
5
6
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'portfolio', 'static')
]
 
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
 
cs

->STATICFILES_DIRS : static 파일들이 들어있는 경로 적어줌

->STATIC_ROOT : static 파일 한곳에 모아줄 위치 나타냄


<static  파일들 한곳에 모아주는 명령어 입력>

1
$python manage.py collectstatic
cs


<portfolio.html 에 static 띄우기>

-> main태그 위에 넣어줌

1
{% load staticfiles %}
cs


-> img  삽입

1
<img src="{% static 'siba.jpg' %}" alt="">
cs

## 추가 연습 : navbar 수료증 클릭 시 수료증 띄우기


1. 프로젝트 폴더 안에 static 폴더 생성


2. 그 안에 pdf 파일 


3..settings.py 에 STATICFILES_DIRS 안에 

1
os.path.join(BASE_DIR, 'secondproject', 'static')
cs


4. base.html 파일에 

1
 {% load staticfiles %}
cs


5.templates/base.html의 navbar의'수료증'에 링크연결 

1
<a class="nav-item nav-link" href="{% static '수료증 - 삼육대 - 오지수.pdf'%}">수료증</a>
cs


 ##강의에서는 python manage.py collectstatic 하라고 하는데 하면 overwriting 된다고 안된다 . 머지..싶지만 안하니까 잘됨 ><


<모델 이용해서 이미지 업로드 , portfolio페이지에 띄워보기>


1., <settings.py> media 설정

1
2
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
cs


2.프로젝트 폴더 내 urls.py 수정

1
2
3
4
5
from django.conf import settings
from django.conf.urls.static import static
...
...
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
cs


3.portfolio폴더 -> models.py 

1
2
3
4
5
6
7
class Portfolio(models.Model):
    title = models.CharField(max_length=255)
    image = models.ImageField(upload_to='images/')
    description = models.CharField(max_length=500)
 
    def __str__(self):
        return self.title
cs


##DB 안에 데이터 구성하는 설계도 : django documentation 보면 잘 나와있음

=>https://docs.djangoproject.com/ko/2.1/topics/db/models/


4.migration

1
2
3
4
5
$python manage.py makemigrations
 
$python manage.py migrate
 
$pip install Pillow
cs


5.django에게 새로운 모델 생겼다고 알려줘야함 -> portfolio 폴더 안 admin.py 


1
2
3
4
5
6
from django.contrib import admin
from .models import Portfolio
 
admin.site.register(Portfolio)
# Register your models here.
 
cs


6. view 수정하기(portfolio app-> views.py)

1
2
3
4
5
6
7
8
from django.shortcuts import render
from .models import Portfolio
 
# Create your views here.
 
def portfolio(request):
    portfolios = Portfolio.objects
    return render(request, 'portfolio/portfolio.html', {'portfolios': portfolios})
cs


7.template 수정하기<portfolio.html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="album py-5 bg-light">
  <div class="container">
      <div class="row">
      {% for portfolio in portfolios.all %}
        <div class="col-md-4">
          <div class="card mb-4 shadow-sm">
            <img class="card-img-top" src="{{ portfolio.image.url }}" alt=" Card image cap">
            <div class="card-body">
              <h4>{{ portfolio.title }}</h4>
              <p class="card-text">{{ portfolio.description }}</p>
            </div>
          </div>
        </div>
    {% endfor %}
    </div>
  </div>
</div>
cs


반응형
저작자표시 변경금지

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

[5주차]2.Pagination  (0) 2019.03.05
[5주차]1.로그인,회원가입  (0) 2019.03.05
[4주차]2.blog-(2)  (0) 2019.03.04
[4주차]2.blog-(1)  (0) 2019.03.04
[4주차]1.pk, path converter, get_object_or_404  (0) 2019.03.03
반응형

<detail.html 생성&연결>

1. template 추가하기 (blog/templates/blog -> detail.html)

-> home.html 똑같이 복사해서 {%for blog in blogs.all %} 지우고 확인 메세지 적음

1
<h1>디테일 페이지입니다.</h1>
cs


2. views.py 수정 (detail.html 템플릿 연결)


1
2
3
4
5
6
7
8
9
10
11
12
from django.shortcuts import render, get_object_or_404
from .models import Blog
 
def home(request):
    blogs = Blog.objects
    return render(request, 'blog/home.html', {'blogs': blogs})
 
def detail(request, blog_id):
    blog_detail = get_object_or_404(Blog, pk=blog_id)
    return render(request, 'blog/detail.html', {'blog': blog_detail})
# Create your views here.
 
cs


##get_object_or_404 : object를 가져오고 없으면 404 에러 띄워라 /모델명(대문자로 시작) + blog 게시글 id 값

   detail 함수는 request,blog_id를 함께 받아 해당 데이터 넘겨줌

   model에서 id기준으로 데이터 가져와 있으면 보여주고 없으면 404 에러

   id값은 기본적으로 django가 기본으로 만들어줌 


3. url config 만들기 -> path 추가 (project폴더 안 -> urls.py)

1
2
3
4
urlpatterns = [
    path('blog/<int:blog_id>',blog.views.detail, name='detail'),
]
 
cs


4. template 수정하기

<detail.html>

1
2
3
4
5
<div class="container jumbotron">
    <h1>{{ blog.title }}</h1>
    <p>{{ blog.pub_date }}</p>
  <p>{{ blog.body }}</p>
</div>
cs


-> 127.0.0.1:8000/blog/blog_id(int)로 접속하면 게시글에 detail로 들어가고 int값이 없으면 404에러 나온다


5. 링크 달기 

<home.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
<html>
<head>
{% comment %} bootstrap4 CSS CDN 부분 {% endcomment %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
{% comment %} bootstrap4 js관련 CDN {% endcomment %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
      <a class="navbar-brand" href="{% url 'home'%}">Like Lion</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
          <a class="nav-item nav-link active" href="{% url 'home'%}">Home</a>
        <a class="nav-item nav-link" href="#">Blog</a>
        <a class="nav-item nav-link" href="#">수료증</a>
            </div>
    </div>
    </div>
</nav>
 
{% for blog in blogs.all %}
    <div class="container">
        <a href="{% url 'detail' blog.id %}">
            <h1>{{ blog.title }}</h1>
        </a>    
        <p>{{ blog.pub_date }}</p>
        <p>{{ blog.body }}</p>
    </div>
{% endfor %}
</body>
</html>
cs


<detail.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
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
      <a class="navbar-brand" href="{% url 'home' %}">Like Lion</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
          <a class="nav-item nav-link active" href="{% url 'home' %}">Home</a>
        <a class="nav-item nav-link" href="#">Blog</a>
        <a class="nav-item nav-link" href="#">수료증</a>
            </div>
    </div>
    </div>
</nav>
 
<h1> detail 페이지 입니다 </h1>
<div class="container jumbotron">
    <h1>{{ blog.title }}</h1>
    <p>{{ blog.pub_date }}</p>
    <p>{{ blog.body }}</p>
    <a href="{% url 'home' %}">돌아가기</a>
</div>
 
</body>
</html>
cs

<블로그 본문 내용 줄여서 보여주기>


1.models.py (클래스에 정의된 body에서 100 글자만 출력)

1
2
     def summary(self):
        return self.body[:100]
cs


2.template 고치기 -> home.html -> {{blog.body}} => {{blog.summary}} ->잘린것처럼 보이니 ...more추가

1
<p>{{ blog.summary }}<a href="{% url 'detail' blog.id %}">....more</a></p>
cs


<글 작성할 수 있는 페이지 만들기>

#제목과 본문 내용을 입력받아야함

1. new.html 생성 -> home.html navbar만 복사 -> 글쓰기 링크 생성

1
<a class="nav-item nav-link" href="#">글쓰기</a>
cs


2. form 태그 이용해 글 작성할 수 있게 만들어줌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<br>
<div class="container">
    <form action="">
      <h4>제목: </h4>
      <input type="text" name="title">
      <br>
      <br>
      <h4>본문: </h4>
      <textarea cols=40 rows=10 name="body"></textarea>
      <br>
      <br>
      <input class="btn btn-dark" type="submit" value="제출하기">
  </form>
</div>
cs


3. views.py & url 설정 & template 링크 넣기 

-><views.py>

1
2
def new(request):
    return render(request, 'blog/new.html')
cs


->urls.py

1
path('blog/new/', blog.views.new, name='new'),
cs


->.html에 링크 넣어야할 부분에 

1
{% url 'new' %}
cs


<제출하기 버튼 작동하게 하기>


1. <views.py> :추가된 것

1
2
3
4
5
6
7
8
9
10
11
12
13
from django.shortcuts import render, get_object_or_404, redirect
from django.utils import timezone
 
from .models import Blog
# Create your views here.
 
def create(request):
    blog = Blog()
    blog.title = request.GET['title']
    blog.body = request.GET['body']
    blog.pub_date = timezone.datetime.now()
    blog.save()
    return redirect('/blog/' + str(blog.id))
cs


#

-blog.pub_date :입력한 시간이 자동으로 넘어감/ timezone이라는 패키지를 사용해 import

-redirect  : 요청을 처리하고 보여주는 페이지/ 

-render: '요청이 들어오면 이 html 파일을 보여줘 라는 녀석' <-> redirect: '요청을 들어오면 저쪽 url로 보내버려' 

2.url 설정

1
path('blog/create/', blog.views.create, name='create'),
cs


3. template 수정(new.html -> form 태그)

1
<form action="{% url 'create' %}">
cs




####여기까지완료하면 글쓰기 버튼까지 만들기 완료 

반응형
저작자표시 변경금지

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

[5주차]1.로그인,회원가입  (0) 2019.03.05
[4주차]2.blog-(3)  (0) 2019.03.05
[4주차]2.blog-(1)  (0) 2019.03.04
[4주차]1.pk, path converter, get_object_or_404  (0) 2019.03.03
[3.5주차]Bootstrap  (0) 2019.03.03
반응형

<blog 만들기>

1. 기본셋팅 ~url config 까지

-> 가상환경 구축

1
 $ python -m venv myvenv
cs

-> 가상환경 실행

1
 $ source myvenv/Scripts/activate
cs

-> django 설치

1
 $ pip install django
cs


-> 프로젝트 시작 

1
$ django-admin startproject secondproject 
cs

 -> app 만들기(프로젝트 안에) 

1
$python manage.py startapp blog 
cs


-> settings.py 에 app 알려주기

1
2
3
INSTALLED_APPS[
'blog.apps.BlogConfig',
]
cs

 -> blog app 안에 templates 폴더 ->blog 폴더 -> home.html 생성 (bootstrap cdn도 설정해주기)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</body>
</html>
cs


##navbar을 더 이쁘게 만들어 보고 싶다 하면 요렇게

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
      <a class="navbar-brand" href="#">Like Lion</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
          <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Blog</a>
        <a class="nav-item nav-link" href="#">수료증</a>
            </div>
    </div>
    </div>
</nav>
cs


-> blog app 안 views.py 에서 함수 설정

1
2
3
4
from django.shortcuts import render
 
def home(request):
    return render(request,'blog/home.html')
cs



-> 프로젝트 안 urls.py에서 urlconfig

1
2
3
4
5
6
7
8
9
from django.contrib import admin
from django.urls import path
import blog.views
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', blog.views.home, name='home'),
]
 
cs



2. model 만들기(blog 폴더 내 -> models.py)  

->순서 : models,py 에서 코드 작성 -> $python manage.py makemigrations (migration 만들기) -> $python manage.py migrate(데베적용)


->model : 제목 / 본문/ 작성일자  <models.py>

1
2
3
4
class Blog(models.Model):
    title = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')
    body = models.TextField()
cs


##migrate가 뭔데?

Django는 python으로 작동하는 웹 프레임워크이지만 DB(데이터베이스)의 경우는 그렇지 않음. 

그래서 우리가 내린 python 코드를 DB가 알아 듣게 설명을 해줘야하는 작업이 필요. 

위의 makemigrations는 내가 짠 파이썬 코드를 DB가 알아들을수 있게 번역하는 명령어이고, 

migrate는 DB에 그 내용을 적용하라는 명령어


->model 잘 만들어 졌는지 확인하려면 /admin 페이지에서 확인 


3. admin 만들기 

1
2
3
4
5
$ python manage.py createsuperuser
Username (leave blank to use 'user'): jisu
Email address: 282532@likelion.org
Password: wltn2548
Password (again): wltn2548
cs

만들어진 superuser로 로그인하면 admin에 들어가 수 있음 요렇게


어 근데 아직 admin에게 알려주지 않아서 blog라는 model이 존재 하지 않음 -> admin에 model 등록하기


-> blog 폴더 -> admin.py 

2줄 :같은 폴더 위치에 있는 models라는 파일에 , Blog라는 클래스 가져와

4줄 : admin 이라는 site에 Blog라는 클래스 등록

1
2
3
4
5
6
from django.contrib import admin
from .models import Blog
 
admin.site.register(Blog)
# Register your models here.
 
cs


새로고침 해보면 blog 객체 생긴게 보임!

아까 만들었던 blog 객체 저장하면 됨


##admin 페이지에서 글 제목 표시 하는 방법 : blog->models.py -> blog class 수정

## def 꼭 들여쓰기 해야함 안하면 에러나용

1
2
3
4
5
6
7
class Blog(models.Model):
    title = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')
    body = models.TextField()
 
    def __str__(self):
        return self.title
cs



-> model에서 데이터 가져오기 <views.py> 파일 수정해줘야함

1
2
3
4
5
6
7
8
from django.shortcuts import render
from .models import Blog
 
def home(request):
    blogs = Blog.objects
    return render(request, 'blog/home.html', {'blogs': blogs})
# Create your views here.
 
cs



##Blog를 import 해줌 / Blog.objects(admin 페이지에서 확인했던 blog안 데이터)-> blogs라는 변수에 넣어줌 

   render -> blogs라는 변수를 template에서 쓸때 blogs라고 해서 가져오겠다고 이름 지어줌


->template 수정하기 {{}}->home.html에 삽입

1
2
3
4
5
6
7
{% for blog in blogs.all %}
    <div class="container">
        <h1>{{ blog.title }}</h1>
        <p>{{ blog.pub_date }}</p>
        <p>{{ blog.body }}</p>
    </div>
{% endfor %}
cs


여기까지하면 게시글 작성까지 완료됨 ^^

반응형
저작자표시 변경금지

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

[4주차]2.blog-(3)  (0) 2019.03.05
[4주차]2.blog-(2)  (0) 2019.03.04
[4주차]1.pk, path converter, get_object_or_404  (0) 2019.03.03
[3.5주차]Bootstrap  (0) 2019.03.03
[3주차]model & admin  (0) 2019.03.03
반응형

<해야할 것 >

1. 글자 수 제한 (..More)

<models.py>

1
2
def summary(self):
        return self.body[:100] //추가
cs


2. ..More에 링크 걸기

<home.html>

1
2
3
4
5
6
{% for blog in blogs.all %}
    <h1> {{blog.title}} </h1>   
    <p> {{blog.pub_date}} </p>
    <p> {{blog.summary}} <a href="{%url 'detail' blog.id %}">...more</a> </p>
    <br><br>
{% endfor %}
cs



3. detail.html 페이지 연결하기

<detail.html>

1
2
3
4
5
<h1>자세한 본문 내용</h1>
<br>
<h2> 제목 : {{blog.title}} </h2>
<h2> 작성 날짜 : {{blog.pub_date}} </h2>
<h2> 본문 전체 : {{blog.body}} </h2>
cs


<pk, path converter, get_object_or_404>

##하나의 detail.html을 통해서

=> n번째 블로그 객체를 요청하면 n번 객체 내용 불러오기


->[pk] =데이터 구분자


=> url 설계 #/blog/n


->[path converter] =우리사이트/blog/객체번호(n)

=>여러 객체들을 다루는 계층 url 자동생성 : <type:변수이름> #type  :int, srt ...
<urls.py>

1
path('blog/<int:blog_id>', blog.views.detail, name="detail"),
cs


=> 존재하지 않는 객체를 요청할 때 404에러 띄우기


->[get_object_or_404] =404 에러  



<views.py>

1
2
3
4
5
6
from django.shortcuts import render, get_object_or_404
 
 
def detail(request, blog_id):
    blog_detail = get_object_or_404(Blog, pk = blog_id)
    return render(request, 'detail.html', {'blog': blog_detail})
cs

반응형
저작자표시 변경금지

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

[4주차]2.blog-(2)  (0) 2019.03.04
[4주차]2.blog-(1)  (0) 2019.03.04
[3.5주차]Bootstrap  (0) 2019.03.03
[3주차]model & admin  (0) 2019.03.03
[2.5주차]GIT  (0) 2019.03.03
반응형

1. Bootstrap : CSS/ Javascript 기반 웹 프레임 워크 -> 반응형 웹 지원 /브라우저 호환 /다소 낮은 성능 /양산형 디자인


<실습>


-https://getbootstrap.com/ -> example template/ components(개별 디자인)


-BootstrapCDN(content delivery network)  -> 온라인 상에 있는 콘텐츠 효율적으로 전달/head에 삽입 후 컨텐츠 복사, 삽입

1
2
3
4
5
6
7
8
<head>
    #css
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    #js,jquery,popper.js
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
cs


-설정 순서

-> CDN설정 : Bootstrap CDN 복사,붙여넣기

->디자인 요소 끌어오기 : Documentation -> components에서 디자인 요소 선택, 복사, 붙여넣기

Examples 에서 템플릿 선택 -> 복사 , 붙여넣기

->다양한 템플릿 : https://startbootstrap.com



#semantic 태그 참고  주소: https://www.w3schools.com/Html/html5_semantic_elements.asp


#웹 전체 차용 시 페이지 소스 보기 -> cltr +a -> body 삽입

반응형
저작자표시 변경금지

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

[4주차]2.blog-(1)  (0) 2019.03.04
[4주차]1.pk, path converter, get_object_or_404  (0) 2019.03.03
[3주차]model & admin  (0) 2019.03.03
[2.5주차]GIT  (0) 2019.03.03
[2주차]word counter 이론 & 실습  (0) 2019.03.03
반응형

#  선행사항 : python -class

-class : 파이썬에서 객체 지향 프로그래밍의 기본단위

-메서드 (method) / 속성(property)/클래스변수(class variable), 인 스턴스변수(instance variable), 초기자(initializer), 소멸자(destructor)로 구성


# 요약=데이터베이스에어떤데이터를넣을지정의하고,admin의권한으로데이터생성


1. models.py 안에 어떤 종류의 데이터 처리할지 class 정의

2. DB에게 알아듣게 하기(makemigrations, migrate)

3. Admin 계정 만들기(admin.py에 활용할 데이터 등록)


<Model>

-데이터 생성, 데이터베이스 다룰 수 O

-데이터 처리 형식 : models.py -> Class로 정의 -> class 계속 호출하여 같은 형식 데이터 계속 사용

-Django의 model.py 변경 -> DB에 선언 해주어야 함


1
2
3
$python manage.py makemigrations #마이그레이션 파일 생성
$python manage.py migrate # db에 만든 변경내용 적용
 
cs


<Admin>

-admin 계정 생성 

1
$python manage.py createsuperuser
cs

-계정생성 후 admin.py에 데이터 등록


<<실습>>

project 생성 -> app 생성 -> project에 app연결 후 모델 생성!


-models.py

1
2
3
4
5
6
7
class Blog(models.Model):
    title = models.CharField(max_length = 200)
    pub_date = models.DateTimeField('data published')
    body = models.TextField()
 
    def __str__(self):
        return self.title # 장고 db 확인 시 타이틀이 보이게 함 원래는 object(1)으로 보임
cs

-변경된 데이터 DB에 적용 #SETTINGS.PY의 DATABASES부분에서 db타입 바꿀 수 있음

1
2
$python manage.py makemigrations #마이그레이션 파일 생성
$python manage.py migrate # db에 만든 변경내용 적용
cs


-admin 계정 생성

1
2
$python manage.py createsuperuser #name->email->password 순 입력
 
cs


-Admin 사이트에 항목추가 / admin.py 에 models.py에 만든 class 추가

1
2
3
4
from .models import Blog #import model에서 Blog 객체 불러오기
 
admin.site.register(Blog) #admin 사이트에 Blog 등록
 
cs


-DB데이터 템플릿으로 출력/app->views.py

1
2
3
4
5
from .models import Blog
 
def home(request):
    blogs = Blog.objects # 쿼리셋 # 메소드
    return render(request, 'home.html', {'blogs': blogs})
cs


#쿼리셋 : 모델로부터 전달받은 객체

#메소드 : 쿼리셋의 기능을 처리하고 정렬(종류 : .all().count().last().first()

#blogs를 사전형 객체 blogs에 담기(template 출력 위해서!)

#쿼리셋과 메소드 형식

모델=쿼리셋(objects).메소드


-app -> templates -> home.html

1
2
3
4
5
6
{% for blog in blogs.all %}
    <h1> {{blog.title}} </h1>   
    <p> {{blog.pub_date}} </p>
    <p> {{blog.body}} </p>
    <br><br>
{% endfor %}
cs


-urls.py

1
2
3
4
5
6
import blog.views
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', blog.views.home, name="home"),
]
cs


반응형
저작자표시 변경금지

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

[4주차]1.pk, path converter, get_object_or_404  (0) 2019.03.03
[3.5주차]Bootstrap  (0) 2019.03.03
[2.5주차]GIT  (0) 2019.03.03
[2주차]word counter 이론 & 실습  (0) 2019.03.03
[1.5주차]MVT 패턴  (0) 2019.03.03
반응형

1. Git 이란?

-git : 분산 저장 관리 시스템

-여럿이 같이 개발할 수 있게 해줌

-작업공간, staging area, repository

-저장(git add, commit)/ 협업(git branch, merge)


2. git 명령어

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$git init # git 저장소 초기화(맨 처음에 한번)
$git status # 저장소 상태 체크, 프로젝트 현재 변경사항 확인
$git add . # 모든 파일을 staging area로 올림(git add <filename>)
$git commit -m "commit message" #저장소 -repository
 
#로컬 repository -> 온라인 repository
$git remote add origin <github 주소>
$git push (-u origin master)
 
# git ignore
1.https://www.gitignore.io/ 에서 Django검색
2.해당 내용 복사 
3.프로젝트 폴더에 .gitignore 파일 생성 (manage.py 있는 곳)
4.붙여넣기
 
cs


3. git push 실습


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<git push>
$git -version
$git init # git 초기화, git 현재 디렉터리에 git 저장소 생성(로컬)
$git status # 저장상태, commit, 변경 상태 확인
$git add . #모든 파일을 git staging area로 추가
$git commit -m "commit message" #staging area에 추가된 파일을 설명과 함께 넣음$
 
<github repositroy 생성 이후>
$git remote add origin "저장소 링크" # 저장소 링크와 로컬 연결
$git push -u origin master # git push , commit한 파일 최종 전송
#id, pw 입력 -> 로그인 후 연결
 
<프로젝트 코드 수정시>
$git add . #모든 파일을 staging area에 추가 
$git commit -m "commit message" #staging area에 추가된 파일 설명과 확정
$git push -u origin master #init 과정 X
 
<git clone>
$git clone "복사할 url"
 
<저장소 변경>
$git remote set -url origin 변경 url
 
cs


반응형
저작자표시 변경금지

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

[3.5주차]Bootstrap  (0) 2019.03.03
[3주차]model & admin  (0) 2019.03.03
[2주차]word counter 이론 & 실습  (0) 2019.03.03
[1.5주차]MVT 패턴  (0) 2019.03.03
[1주차]hello world 이론 & 실습  (0) 2019.03.03

+ Recent posts

티스토리툴바