Django-materialを使って今風のサイトを作る

記事のソースです。
[git: ajitama/material_site](https://github.com/ajitama/material_site)
荒削りですがgitでソースコードを出してみました。
なるべくシンプルに書いてますが、素人レベルなので無駄なものについてはご容赦ください。


Ubuntu1804LTS
Python3.6.5
Django2.0.7

```sh 
material_site
├── ajitama
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db20.sqlite3
├── manage.py
└── material_site
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py
```

####Djangoプロジェクトの作成

```sh

django-admin startproject material_site
```

まずはSettings.pyをいじります。
ざっくりと。

``` material_site/settings.py

import django #DBの名前を変更するために入れてます（場合によっては不要）

ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
・・・＜省略＞
    # material apps
    'material',
    'material.frontend',

    # userapp
    'ajitama.apps.AjitamaConfig', #<後で作ります>

・・・＜省略＞
]

TEMPLATES = [
    {
・・・＜省略＞
        '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',
                'material.frontend.context_processors.modules',  # ＜←追加＞
            ],
        },
    },
]


DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db{}{}.sqlite3'.format(*django.VERSION[:2])), # DBの名前の変更。（好みです）
    }
}

```

AUTH_PASSWORD_VALIDATORSは削除してます。（パスワードの制約などを厳しくしてくれるモジュール）


``` material_site/url.py

from django.contrib import admin
from django.conf.urls import url
from django.urls import path, include
from material.frontend import urls as frontend_urls


urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'', include(frontend_urls)), #追加
    ]
```

#### 管理ユーザの作成
先につくっときます
`python3 manage.py createsuperuser`

自分はadmin/adminで作りました。


####初回のMigrate
migrateしないとアプリが作れません。
`python3 manage.py migrate`

```sh
/root/material_site# python3 manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, frontend, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying frontend.0001_initial... OK
  Applying frontend.0002_i18n... OK
  Applying sessions.0001_initial... OK
```

####アプリケーションの作成

`python3 manage.py startapp ajitama`

####アプリケーションの設定

``` ajitama/apps.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.apps import AppConfig
from material.frontend.apps import ModuleMixin


class AjitamaConfig(ModuleMixin, AppConfig):
    name = 'ajitama'
    icon = '<i class="material-icons">extension</i>'

```


ModuleMixinはmaterial frontendの機能で、URLをいい感じに取り込んでくれるものみたいです。

``` ajitama/models.py
from django.db import models

SELECT_LABEL=(
    ('OBJ1', '選択肢1'),
    ('OBJ2', '選択肢2'),
    ('OBJ3', '選択肢3'),
        )

# Create your models here.
class Article(models.Model):
    subject = models.CharField(
            "タイトル",
            max_length=90,
    )
    data_str = models.CharField(
            "データ(文字型)",
            max_length=10000,
            null=True,
            )
#<以下、省略>

```

``` ajitama/views.py
from material.frontend.views import ModelViewSet
from .import models

# Create your views here.
class ArticleViewSet(ModelViewSet):
    model = models.Article
    ordering = ['-subject', 'data_date']
    list_display = ('subject','data_date', 'data_bool','data_choice')

```

``` ajitama/urls.py
from django.urls import path, include
from django.conf.urls import url
from django.views import generic

from . import views

app_name = 'ajitama'

urlpatterns = [
    url('^$', generic.RedirectView.as_view(url='./ajitop'), name="index"),
    path('ajitop', include(views.ArticleViewSet().urls), name="top"),
]

```


####Appのマイグレーション

```sh
# python3 manage.py makemigrations
Migrations for 'ajitama':
  ajitama/migrations/0001_initial.py
    - Create model Article
# python3 manage.py migrate
Operations to perform:
  Apply all migrations: admin, ajitama, auth, contenttypes, frontend, sessions
Running migrations:
  Applying ajitama.0001_initial... OK 
```



### 実行してみる

Djangoを起動します

`python3 manage.py runserver 0.0.0.0:8000`

ブラウザでアクセスします。
http://127.0.0.1:8000/ajitama


![image.png](https://qiita-image-store.s3.amazonaws.com/0/213689/458f0e72-97bd-ae01-620a-5371f4bb8b67.png)

作成したSuperuserでログインできるか試してみてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/213689/d505b741-ce49-c23f-4063-53aaebb5df5c.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/213689/061908b9-1292-23ee-1ead-5b656d912625.png)


Djangoを使う人がもっとふえて、困ったときの情報がもっと出てくれることを祈ってます。