[4주차]2.blog-(3)

<portfolio app 만들기>

1. app 만들기

$python manage.py startapp portfolio

<settings.py>-> portfolio app 추가

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

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

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

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

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

import portfoilo.views
urlpatterns = [
    path('portfoilo/', portfolio.views.portfolio, name='portfolio'),
]

---

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

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

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

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

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

<home.html>

{% 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 %}

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

<settings.py> -> TEMPLATES -> DIRS

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

4. portfolio.html 에 navbar 넣어보기 

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

---

##불편함 해결하기 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>

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'),
]
 

<portfolio/urls.py> 

from django.urls import path
from . import views
 
urlpatterns = [
     path('portfolio/', views.portfolio, name='portfolio'),
]

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

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')),
]

---

<portfolio static 이미지로 꾸미기>

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

{% 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 %}

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

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

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

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

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

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

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'portfolio', 'static')
]
 
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
 

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

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

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

$python manage.py collectstatic

<portfolio.html 에 static 띄우기>

-> main태그 위에 넣어줌

{% load staticfiles %}

-> img  삽입

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

---

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

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

2. 그 안에 pdf 파일 

3..settings.py 에 STATICFILES_DIRS 안에 

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

4. base.html 파일에 

 {% load staticfiles %}

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

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

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

---

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

1., <settings.py> media 설정

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

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

from django.conf import settings
from django.conf.urls.static import static
...
...
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3.portfolio폴더 -> models.py 

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

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

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

4.migration

$python manage.py makemigrations
 
$python manage.py migrate
 
$pip install Pillow

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

from django.contrib import admin
from .models import Portfolio
 
admin.site.register(Portfolio)
# Register your models here.
 

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

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})

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

<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>