Go to Qiita Advent Calendar 2024 Top
LoginSignup

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

@yes_dog

③Django　アプリケーション設定

Last updated at Posted at 2020-03-27

#はじめに
本記事は、Djnagoのアプリ設定を行った際の備忘録として書いたものである。

#前提条件

  • OS環境は、Virtualboxで稼働中のCentOS8.1です。以下、OS詳細情報となります。
# cat /etc/centos-release
CentOS Linux release 8.1.1911 (Core)

#(1)アプリケーションの環境設定

▼アプリケーション「app」を生成

# python manage.py startapp app

▼アプリ生成後の確認

#  tree  --charset=C
↓以下出力結果
.
|-- app
|   |-- __init__.py
|   |-- admin.py
|   |-- apps.py
|   |-- migrations
|   |   `-- __init__.py
|   |-- models.py
|   |-- tests.py
|   `-- views.py
|-- manage.py
`-- qiita
    |-- __init__.py
    |-- __pycache__
    |   |-- __init__.cpython-36.pyc
    |   |-- settings.cpython-36.pyc
    |   |-- urls.cpython-36.pyc
    |   `-- wsgi.cpython-36.pyc
    |-- settings.py
    |-- urls.py
    `-- wsgi.py

4 directories, 16 files

▼Djangoプロジェクト全体の設定値を修正

qiita/settings.py

#変更点①(Bootstrap4を追加)
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
↓
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4',#NEW
]

#変更点②(Templatesディレクトリの場所を指定)
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
↓
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], #※１
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

#変更点③(staticディレクトリの場所を指定) #新規追記
STATICFILES_DIRS = [                 #※１
    os.path.join(BASE_DIR, "static")
]

※１：以下のように定義することで、プロジェクトのトップディレクトリ以下に、それぞれのディレクトリ(templates,static)があることをDjangoに認識させている。

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

▼views.pyの設定

app/views.py

from django.shortcuts import render
from django.http import HttpResponse


def index(request):
    return render(request, 'app/test.html')

▼urls.pyの設定(プロジェクト全体の設定)

qiita/urls.py

from django.contrib import admin
from django.urls import path,include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app.urls')),
]

▼urls.pyの設定(アプリの設定)

app/urls.py

from django.urls import path
from . import views


urlpatterns = [
    path('', views.index, name='index'),
]

#(2)デザイン部分の環境設定

▼Templatesディレクトリを生成

# mkdir -p templates/app

▼AdminLTEをダウンロード

# wget -P /tmp https://github.com/ColorlibHQ/AdminLTE/archive/v3.0.2.tar.gz

▼AdminLTEを解凍

# tar -zxvf /tmp/v3.0.2.tar.gz

▼AdminLTEのディレクトリ名をリネーム

# mv AdminLTE-3.0.2 static

▼いらないHTMLファイルを削除

# rm -f static/*.html

▼ディレクトリ階層を確認

# tree  --charset=C -L 2
↓以下出力結果
.
|-- app
|   |-- __init__.py
|   |-- admin.py
|   |-- apps.py
|   |-- migrations
|   |-- models.py
|   |-- tests.py
|   |-- urls.py
|   `-- views.py
|-- manage.py
|-- qiita
|   |-- __init__.py
|   |-- __pycache__
|   |-- settings.py
|   |-- urls.py
|   `-- wsgi.py
|-- static
|   |-- LICENSE
|   |-- README.md
|   |-- build
|   |-- composer.json
|   |-- dist
|   |-- docs
|   |-- package-lock.json
|   |-- package.json
|   |-- pages
|   `-- plugins
`-- templates
    `-- app

12 directories, 17 files

※ディレクトリ階層が上記のようになっていればOK！！

▼テスト用のWEBページを作成

templates/app/test.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | Dashboard</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Tempusdominus Bbootstrap 4 -->
  <link rel="stylesheet" href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
  <!-- iCheck -->
  <link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
  <!-- JQVMap -->
  <link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="{% static 'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
  <!-- summernote -->
  <link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.css' %}">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
      </li>
    </ul>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <ul class="navbar-nav">
          <li>
            <a class="nav-link">ユーザ名：</a>
          </li>
          <li>
            <a class="nav-link" href="">
              <i class="fa fa-fw fa-sign-out"></i>ログアウト</a>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="" class="brand-link">
      <span class="brand-text font-weight-light">Qiita Demo Site</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Dashboard v1</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Dashboard v2</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Dashboard v3</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Top Page</h1>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner">
                <h3>150</h3>

                <p>New Orders</p>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
              <div class="inner">
                <h3>53<sup style="font-size: 20px">%</sup></h3>

                <p>Bounce Rate</p>
              </div>
              <div class="icon">
                <i class="ion ion-stats-bars"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-warning">
              <div class="inner">
                <h3>44</h3>

                <p>User Registrations</p>
              </div>
              <div class="icon">
                <i class="ion ion-person-add"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-danger">
              <div class="inner">
                <h3>65</h3>

                <p>Unique Visitors</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
        </div>
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <strong>Copyright &copy; 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong>
    All rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 3.0.2
    </div>
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- ChartJS -->
<script src="{% static 'plugins/chart.js/Chart.min.js' %}"></script>
<!-- Sparkline -->
<script src="{% static 'plugins/sparklines/sparkline.js' %}"></script>
<!-- JQVMap -->
<script src="{% static 'plugins/jqvmap/jquery.vmap.min.js' %}"></script>
<script src="{% static 'plugins/jqvmap/maps/jquery.vmap.usa.js' %}"></script>
<!-- jQuery Knob Chart -->
<script src="{% static 'plugins/jquery-knob/jquery.knob.min.js' %}"></script>
<!-- daterangepicker -->
<script src="{% static 'plugins/moment/moment.min.js' %}"></script>
<script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="{% static 'plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js' %}"></script>
<!-- Summernote -->
<script src="{% static 'plugins/summernote/summernote-bs4.min.js' %}"></script>
<!-- overlayScrollbars -->
<script src="{% static 'plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.js' %}"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="{% static 'dist/js/pages/dashboard.js' %}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{% static 'dist/js/demo.js' %}"></script>
</body>
</html>

※上記のHTMLファイルは、AdminLTEに元々用意されているテンプレート用のHTMLファイルを修正したものである。

#####補足

  • {% load static %}を定義することで、HTML側でststicディレクトリがある場所を認識できるようになる。

  • {% static 'ファイル' %}では、staticディレクトリ以下に対象のファイルがあることを指している。

▼動作確認

#  python manage.py runserver 192.168.56.201:8000

以下のURLにアクセスし、正常に画面の表示ができていればOK
http://192.168.56.201:8000/

エラーなど起きなければ、以下のように表示されると思います。

test.html2.PNG

正常に動作していればOK。
次項に続く（　＾ω＾）・・・
④Django　デザイン設定

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?