Django Webアプリケーションの構築デザイン要素としてbootstrap4 を使用してみる

萩原賢二のコーディングストック > プログラミング > Django Webアプリケーションの構築デザイン要素としてbootstrap4 を使用してみる

2019.10.31

Django Webアプリケーションの構築デザイン要素としてbootstrap4 を使用してみる

templatesとは
ルーティングの設定（[アプリケーション]/urls.pyの設定）
webapps/view.pyの編集
テンプレート base.html
Bootstrap4 ナビゲーションのソース
テンプレート　listdisplay.html
参考：css リスト表示 display:flex フレックスボックス使用
参考：jquery動きの部分
参考：今回のサンプルページ
まとめ

templatesとは

HTML等の静的な部分はテンプレートとしてHTMLファイルに書記載します。
ホームページには、ホーム、一覧、詳細、入力用等々いくつかのページで成り立っています。
そこでヘッダー、フッター、サイドバー等々の部分は各ページは共有しています。
各ページには基本ページを作成しそれを各ページで共有します。includeファイルということですね。
設置場所はプロジェクト内に作成したアプリケーション内のフォルダーに作成します。
具体的な使用は[アプリケーションフォルダー」/views.py 内で rendar関数を用いて実現します。(後述）

`-- webapps
    |-- __init__.py
    |-- admin.py
    |-- apps.py
    |-- migrations
    |-- models.py
    |-- static
    |-- templates
    |   `-- webapps
    |       |-- base.html
    |       |-- detail.html
    |       |-- index.html
    |       |-- form.html
    |       `-- listdisplay.html
    |-- tests.py
    |-- urls.py
    `-- views.py

`-- webapps

|-- __init__.py

|-- admin.py

|-- apps.py

|-- migrations

|-- models.py

|-- static

|-- templates

| `-- webapps

| |-- base.html

| |-- detail.html

| |-- index.html

| |-- form.html

| `-- listdisplay.html

|-- tests.py

|-- urls.py

`-- views.py

ルーティングの設定　（[アプリケーション]/urls.pyの設定）

from django.urls import path
from . import views

app_name = 'webapps'

urlpatterns = [
    path('', views.index, name='index'),    # /webapps
    path('listdisplay/', views.list, name='listdisplay'),  
    # webapps/views.py内で定義している関数「 def listdisplay(request)　」を呼び出しています。
]

from django.urls import path

from . import views

app_name = 'webapps'

urlpatterns = [

path('', views.index, name='index'), # /webapps

path('listdisplay/', views.list, name='listdisplay'),

# webapps/views.py内で定義している関数「 def listdisplay(request)　」を呼び出しています。

]

メニューに戻る

/webapps/view.pyの編集

view.py内の表示用関数　def listdisplay(request): を定義しますが、 HttpResposeを返す方法として、render関数を用います。 rennda関数は　request, テンプレートパスを渡すとそのテンプレートを使用したレンダリング結果をHttpResponseとして返してくれます

# webapps/views.py
from django.shortcuts import render, redirect
from django.http import HttpResponse
from .models import Link
import random

def index(request):
    context = {
        'randam': random.random()
    } 
    return render(request, 'webapps/index.html', content)

def listdisplay(request):
    # webapps/models.py で定義している Linkより投稿されて一覧を取得して　
    # 変数 context(Dictionary)の要素キー要素 "links"として render関数に渡す。
    context = {
        'links': Link.objects.order_by('-published'),
        'randam': random.random(),
    }
    return render(request, 'webapps/list.html',context)

# webapps/views.py

from django.shortcuts import render, redirect

from django.http import HttpResponse

from .models import Link

import random

def index(request):

context = {

'randam': random.random()

}

return render(request, 'webapps/index.html', content)

def listdisplay(request):

# webapps/models.py で定義している Linkより投稿されて一覧を取得して　

# 変数 context(Dictionary)の要素キー要素 "links"として render関数に渡す。

context = {

'links': Link.objects.order_by('-published'),

'randam': random.random(),

}

return render(request, 'webapps/list.html',context)

メニューに戻る

テンプレート base.html

Bootstrap4を用いてデザインをしてみました。
また、データは前回の投稿で紹介した本ブログのタイトル等々を入力したデータベース(mysql)を利用しています。
一覧は画像、タイトル、投稿日、URLです。
参考：
以前の投稿（マイグレーション）
bootstrap4 GettingStart
bootstrap4 チートシート

<!doctype html>
<html lang="ja">
  <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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
   <!-- 独自CSS外部ファイルを読み込むための準備 -->
    {% load static%}

    <!-- /static/　に設置してあるCSSファイルを読み込む -->
    <link rel="stylesheet" href="{% static 'webapps/css/style.css' %}?{{randam}}" type="text/css" media="screen">

    <!-- 最新のjQueryをgoogleのCDNから読み込む -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- 参考：jQueryUIも同時にgoogleのCDNから読み込む -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <!-- 独自の外部のJAVASCRIPTファイルを読み込む -->
    <script src="{% static "webapps/css/scrypt.js" %}?{{randam}}"></script></head>

    <title>「公開するサイトのタイトル」</title>
  </head>
  <body>
    <!-- #container ここから -->	
    <div id="container">
      <!-- #header ここから -->	
      <header>
        <h1>ページのタイトル</h1>
        <!-- ナビゲーションをいれる 別途記述-->
      </header>
      <!-- #header ここまで-->	

      <!-- #wrapper ここから -->	
      <div id="wrapper">
        <!-- 領域を確保するタグ、子テンプレートで 
             block 〜 endbloack 内のHTMLを置き換えることができる。--> 
      {%block content %}
      {%endblock %}             
      </div>
      <!-- #wrapper ここまで -->	

    </div">
    <!-- #container ここまで -->   
    <!-- 「Bootstrapの公式ページ Getting started > Starter template」よりコピペ -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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>
  </body>
</html>

<!doctype html>

<head>

{% load static%}

<title>「公開するサイトのタイトル」</title>

</head>

<body>

<h1>ページのタイトル</h1>

</header>

<!-- 領域を確保するタグ、子テンプレートで

block 〜 endbloack 内のHTMLを置き換えることができる。-->

{%block content %}

{%endblock %}

</div>

</div">

</body>

</html>

メニューに戻る

<!-- bootstrapのナビゲーション -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="Home">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="products" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Products
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="programing">Programing</a>
          <a class="dropdown-item" href="design">Design</a>
          <a class="dropdown-item" href="server">Server</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="etc">Hoby</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="About">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Blog">Blog</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Inquiry">Inquiry</a>
      </li>
    </ul>
  </div>
</nav>

</button>

Products

</a>

<a class="dropdown-item" href="programing">Programing</a>

<a class="dropdown-item" href="design">Design</a>

<a class="dropdown-item" href="server">Server</a>

</div>

</li>

<a class="nav-link" href="About">About</a>

</li>

</li>

<a class="nav-link" href="Inquiry">Inquiry</a>

</li>

</ul>

</div>

</nav>

参考:
Bootstrap4 Navbar
列行を一次元に並べて表示する CSS 「FlexBox」 jQuery + Ajax で挙動を確認する。

メニューに戻る

テンプレート　listdisplay.html

Djangoのテンプレートエンジンが標準で付属しています。
Python製のテンプレートエンジン jinja2 のサブセット？とのことです。
templates/listdisplay.html では view.py で定義しているrender関数の引数で投稿されたデータベースデータオブジェクト linksが有効になっています。それを展開して一覧表示する仕組みとなっています。使い方詳細はDjangoドキュメントクイックインストールガイドを参照してください。　

<!-- 子テンプレートlistdisplay.html -->
<!-- 基本となるテンプレートファイル(親テンプレートファイル)を指定する。-->
<!-- このファイル内では　linksオブジェクトは有効です。(データベースより取得された投稿内容) -->
{% extends 'webapps/base.html' %}

<!-- {%block content%}　この部分の記述がbase.htmlに展開される {% block %}　-->
{%block content %}

<!-- 外部ファイルを読み込むための準備 -->
{% load static%}
    <h2>一覧ページ</h2>
    <div id="listWrapper">

    {% for link in links.all %}    
    <div class="mesLine">
        <div class="eyeCatch"><a href="{{link.url}}"><img src="{{ link.image.url }}" width="180"></a></div>
        
        <div class="msgBody">
            {{link.title }} <br>
            {{link.published }}<br>
            {{link.url}}
            
        </div>
    </div>
    {% endfor %}
    </div>

{% endblock %}

{% extends 'webapps/base.html' %}

{%block content %}

{% load static%}

<h2>一覧ページ</h2>

{% for link in links.all %}

{{link.title }} <br>

{{link.published }}<br>

</div>

{% endfor %}

</div>

{% endblock %}

メニューに戻る

css リスト表示 display:flex フレックスボックス使用

<!-- css リスト表示 display:flex フレックスボックス使用 -->
    .mesLine{
	    display: flex;
        	justify-content: flex-start;
        	align-items: center;        
        	border: 1px dashed #555;
        padding: 10px;
        line-height: 2.0em;
        margin-bottom: 10px;
        background: #ebeaff
    }
    .eyeCatch{
        width:200px;
    }
    .eyeCatch img{
        border:solid 1px #ccc;
        padding:4px;
    }
    .msgBody {
        font-weight: bold;
        color: #555;
        padding-left: 10px;
    }

.mesLine{

display: flex;

justify-content: flex-start;

align-items: center;

border: 1px dashed #555;

padding: 10px;

line-height: 2.0em;

margin-bottom: 10px;

background: #ebeaff

}

.eyeCatch{

width:200px;

}

.eyeCatch img{

border:solid 1px #ccc;

padding:4px;

}

.msgBody {

font-weight: bold;

color: #555;

padding-left: 10px;

}

メニューに戻る

参考：jquery動きの部分

/* グローバル定数定義 */
var transition = {
    "Home":        "ホームに遷移しますよ。",
    "programing":  "カテゴリー「プログラミング」に遷移します。",
    "design":      "カテゴリー「デザイン」に遷移します。",
    "server":      "カテゴリー「サーバー」に遷移します。",
    "Blog":        "ブログに遷移します",
    "About":      "このページについて",
    "etc":        "趣味、実用のページに遷移します。",
    "Inquiry":    "問い合わせ"};
/* jQjery の動作 jQueryUIを使用 */
$(function() {
  $("button").click(function() {
    $("#dl").dialog({
      modal:true,
      title:"ダイアログのタイトル",
      buttons: {"OK": function() {$(this).dialog("close");}}
    });
  });
  
  $("a").click(function() {
    var href=$(this).attr("href");
    var jump=$(this).attr("class");
    if( !href.indexOf('http')  ){
        return true;
    }
    else if( href == 'products' ){
        return true;   
    }
    else{
        $("#dl p").html(transition[href]);
        $("#dl").dialog({
            modal:true,
            title:"ページの遷移",
            buttons: {"OK": function() {$(this).dialog("close");}}
        });
    }
    return false;
  });
  
});

/* グローバル定数定義 */

var transition = {

"Home": "ホームに遷移しますよ。",

"programing": "カテゴリー「プログラミング」に遷移します。",

"design": "カテゴリー「デザイン」に遷移します。",

"server": "カテゴリー「サーバー」に遷移します。",

"Blog": "ブログに遷移します",

"About": "このページについて",

"etc": "趣味、実用のページに遷移します。",

"Inquiry": "問い合わせ"};

/* jQjery の動作 jQueryUIを使用 */

$(function() {

$("button").click(function() {

$("#dl").dialog({

modal:true,

title:"ダイアログのタイトル",

buttons: {"OK": function() {$(this).dialog("close");}}

});

$("a").click(function() {

var href=$(this).attr("href");

var jump=$(this).attr("class");

if( !href.indexOf('http') ){

return true;

}

else if( href == 'products' ){

return true;

}

else{

$("#dl p").html(transition[href]);

$("#dl").dialog({

modal:true,

title:"ページの遷移",

buttons: {"OK": function() {$(this).dialog("close");}}

});

}

return false;

});

メニューに戻る

まとめ

アプリケーションとしては、一覧表示だけでしたが、今後データ入力、詳細ページ、コメント等々を含め「SNSアプリケーション」として進めていきたいと思っています。
また、一連のソースコードも記述しましたが、実際のコーディングはローカルの仮想環境上で構築、まとめてFTPにより直接デプロイして公開用に手直しをしています。
公開は Nginxで行っていますがプロジェクト自体も system.d　で管理しています。
つまり手作業で nginxのリスタート、Djangoプロジェクト自体もリスタート等々手作業で作業しました。
Django Webアプリケーションシリーズ参照してください。
今後別な形で「git」を用いたデプロイもチャレンジしたいと思っています

メニューに戻る