Old Branch

Django - tweetme 소셜서비스 구현해보기 (16) - Bootstrap Media Object 활용

woolbro 2019. 11. 4. 02:09
반응형

이번 포스팅은 Bootstrap을 사용해서 간단하게 화면을 만들어 보도록 하겠습니다.

 

Django에서 지원하는 빠르고 확장성이 있는 코드들을 사용 해 볼거고, 실제로 화면에 적용 해 보도록 하겠습니다.

 

이번 포스팅의 소스코드 또한 Github 저장소에 있습니다.

 

1. html 파일 나누기

 

가장 처음 프로젝트를 작성 했을 때 Bootstrap static 파일을 적용 해 주려고 생성 했었던, template 폴더에 home.html과 base.html을 작성 해 주겠습니다.

 

루트 폴더의 template 폴더입니다.

 

base.html과 home.html 을 생성 해 주었다면 아래의 코드를 넣어주세요

{% load staticfiles %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    {% comment %} <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"> {% endcomment %}
    
    
    <title>Tweetme.co {% block title%} {% endblock title %}</title>
  </head>
  <body>
  <h1>Hello World!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap 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.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> -->
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
 </body>
</html>

 

<!-- home.html -->

{% extends 'base.html' %}

{% block title %} {{ block.super }} | Welcome!{% endblock title %}

 

{% block %} {% endblock %} 으로 한군데에서 작성한 블록을 여러곳에서 사용 해 줄 수 있습니다. Namespace라고 생각하면 편...하려나요...?

 

위의 home.html, base.html을 작성하고 나면 서버를 실행 시켜 주고, localhost:8000/ 으로 접속 해 주세요

 

잘 작성 하였다면, 아래와 같이 나오게 됩니다.

title이 잘 설정 되어있는 것을 볼 수 있죠~?

home.html을 실행 시켜 주지만, home.html 은 base.html을 확장하고 있기 때문에 home.html에서 base.html 의 요소들을 사용 할 수 있는 것 입니다.

위의 {% block %} 태그를 활용해서 tweet_list.html에 적용시켜 보도록 하겠습니다.

base.html에 {% block content%}를 추가 해 주고 tweet_list.html에서 불러오도록 하겠습니다.

{% load staticfiles %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    {% comment %} <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"> {% endcomment %}
    
    
    <title>{% block title%} Tweetme.co {% endblock title %}</title>
  </head>
  <body>
  <div class="container">
  {% block content%}
  {% endblock content%}
  </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap 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.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> -->
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
 </body>
</html>
<!-- tweet_list.html -->
{% extends 'base.html' %}

{% block content %}
    {% include "tweets/search_form.html" %}
        {% for obj in object_list %}
            <h2>{{ obj.content}}</h2><!-- object의 content -->
            {{ obj.user}}</br><!--object의 user-->
            {{ obj.timestamp}}</br><!--object의 timestamp-->
            {{ obj.timestamp|timesince}}</br><!--object의 timestamp로부터 지난 시간-->
            <hr>
        {% empty %}
        {% if request.GET.qs %}
            <p> No Tweets found</p>
        {% else %}
            <p> No Tweets Yet....</p>
        {% endif %}
    {% endfor%}
{% endblock content %}

 

이제 localhost:8000/tweet에 접속하면, 합쳐진 화면이 출력됩니다. 아래와 같이 나오면 성공 입니다

 

이제 {%  block  %} 태그를 사용해서 tweet_list.html 외의 다른 html에도 적용 시켜주도록 하겠습니다.

 

tweet_detail.html

<!-- tweet_detail.html -->
{% extends 'base.html' %}

{% block content %}

{{ object.content}}</br> <!-- object의 content -->
{{ object.user}}</br><!--object의 user-->
{{ object.timestamp}}</br><!--object의 timestamp-->
{{ object.timestamp|timesince}} ago</br><!--object의 timestamp로부터 지난 시간-->

{% endblock content %}

 

create_view.html

<!-- create_view.html -->
{% extends 'base.html' %}

{% block title %} Create Tweet | {{ block.super }} {% endblock title %}

{% block content %}
{% include "tweets/form.html" with form=form btn_title='Tweet' %}
{% endblock content %}

 

update_view.html

<!-- update_view.html -->
{% extends 'base.html' %}

{% block content %}
{% include "tweets/form.html" with form=form btn_title='Update' %}
{% endblock content %}

 

그리고, 이제 화면을 꾸미기 위해서 bootstrap의 media object를 적용 해 보겠습니다.

https://getbootstrap.com/docs/4.3/layout/media-object/

 

Media object

Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.

getbootstrap.com

tweet_list.html 을 아래와 같이 수정 해 주세요.

{% extends 'base.html' %}

{% block content %}
    {% include "tweets/search_form.html" %}
    <br><br>
        {% for obj in object_list %}
        
            <div class="media">
                <a href="#">
                    {% if object.image %}
                        <img src="..." class="mr-3" alt="...">
                    {% endif %}
                </a>
                <div class="media-body">
                    {{ obj.content}}<br><!-- object의 content -->
                    {{ obj.timestamp}}<br>
                    작성자  {{ obj.user}} | {{ obj.timestamp|timesince}} ago | <a href="{{ obj.get_absolute_url }}"> Thread </a><br>
                </div>
            </div>
            <hr>
        {% empty %}
        {% if request.GET.qs %}
            <p> No Tweets found</p>
        {% else %}
            <p> No Tweets Yet....</p>
        {% endif %}
    {% endfor%}
{% endblock content %}

이제 실행 해 보면...!

 

제법 tweet처럼 화면을 갖추었습니다

 

 

 

다음 포스팅 부터는 화면 정렬과 네비게이션들을 추가 해 주도록 하겠습니다.

저작자표시 비영리 변경금지

'Old Branch' 카테고리의 다른 글

TIP - 장고 데이터베이스 여러개 사용하기 (Django multidatabase)  (3) 2020.03.20
Django - tweetme 소셜서비스 구현해보기 (17) - Bootstrap Navbar 적용하기  (0) 2019.11.05
Django - tweetme 소셜서비스 구현해보기 (15) - Advanced Searching - 검색기능 적용하기  (0) 2019.11.01
Django - tweetme 소셜서비스 구현해보기 (14) - Update & Delete Tweet View (수정 삭제 구현)  (0) 2019.10.31
Django - tweetme 소셜서비스 구현해보기 (13) - Create Tweet View  (0) 2019.10.30

'Old Branch'의 다른글

  • 현재글Django - tweetme 소셜서비스 구현해보기 (16) - Bootstrap Media Object 활용

관련글

티스토리툴바