django003#Admin pageをいじってみよう

#前回まで
前回はDBの作成・追加をやりました！
今回はdjangoのAdmin Pageをいじりたいと思います。djangoにはAdmin Pageの機能がありましてわざわざ書かなくてもよいのメリットがあり、しかもDBのデータも見えるし、様々なPlug-inをインストールすればAdmin pageがさらに使えやすくなります。

#流れ
1. SuperUserを作る
2. 自分のアプリケーションにAdmin pageを登録する
3. Admin pageを簡単なカスタマイズする
4. Models.pyにデフォルト値を入れる
5. Plug-inをインストールしてみる

##Superuserを作る
Superuserを作るにはcreatesuperuserというコマンド使います。

```python3 manage.py createsuperuser```

コマンド入れたら、まずUsernameが聞かれますね。
デフォルト値はHostnameになりますが、ここでデフォルトにしましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/278cda13-9206-df1b-f47f-a0d0d1b7deb2.png)
次はメールアドレスが聞かれます、これも後で設定できますので、とりあえずスルー。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/d7782bea-b648-f614-72fa-9b34f11b114d.png)
次はパスワードに聞かれます。好きにいれてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/2ae4e479-182d-c794-ef27-974386bf6814.png)
次は再確認のためにもう一度いれてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/c5548d99-59be-fdef-20b6-30501710379a.png)
それでSuperuser作りました！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/dd65129c-bc24-88e8-f73a-6fa12b1cc895.png)

##Helloworldのmodels.pyにAdmin pageを登録する

HelloworldのDirectoryの中にあるadmin.pyを編集します。
ここでHellworldアプリケーションのmodels.pyをAdmin pageに登録することができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/bca0fdb1-1c20-dd70-12be-4a5b43e38e42.png)

まずいまのDirectoryのmodels(つまり.models.py)の中にあるmydbをImportしますーそうするとmydbの中身がAdmin pageで見えます

```
from django.contrib import admin
from .models import mydb #

admin.site.register(mydb) #
```
サーバーは起動してhttp://127.0.0.1:8000/admin　アクセスしたら…
おお！見えましたね！。じゃ先Superuserを作ってたでしょう？
UsernameとPasswordを入れてLoginしてみてくだい！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/a6c8b766-9848-9254-534e-0dfd3ad35389.png)
おおお、これはいいですね。
Mydbsも見えますね！中身がなにかあるのかな？
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/f1de5020-843a-6bca-11a8-287d79066bdc.png)
Mydbの中身もちゃんと見えますね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/6d1a0d1f-ac88-107e-708f-d39207296814.png)
Userのところ見ますと、あ、これは私ですね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/0d743ac2-5cad-12b8-5d77-345f252cdcd1.png)
先はメールアドレスの入力を聞かれたじゃないですか？
Personal infoのところでいま入れてもOKです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/a4b6abc2-6b9f-6642-f086-e9ce363d010c.png)

##Admin pageを簡単なカスタマイズする
ではまず簡単なカスタマイズから始まりましょう。
もう一度先Mydbのところをみていくと、
Title→Post→Date createdのように並んでいます…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/487657e7-c2e8-7207-cffd-2a68727c6aff.png)

いまからTile→Date created→Postのように変更しますねー
まず1つのClassを追加し、中に配列を1つ作って、admin.site.register()に渡します。

```
from django.contrib import admin
from .models import mydb #

class helloworldAdmin(admin.ModelAdmin):

	fields=[
			"title"
			,"published"
			,"post"
	]
admin.site.register(mydb,helloworldAdmin) #
```
もう一回サーバーを起動すると、お、順番はちゃんと変えましたね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/a04f2a11-8660-b943-88bb-8663d6515309.png)
次はfieldsetで分けてみよう。
今度は先のhelloworldAdminをちょっと改造してみます。
Title/dateグループはtitle とpublishedあり、
Your Postグループはpostだけです。

```
from django.contrib import admin
from .models import mydb #
from django.db import models

class helloworldAdmin(admin.ModelAdmin):

	fieldsets=[
			("Tile/date",{"fields":["title","published"]})
			,("Your Post",{"fields":["post"]})

	]


admin.site.register(mydb,helloworldAdmin) #
```
ちゃんと分けましたね！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/5814598a-4663-53ba-6350-22956ed3df98.png)

##Models.pyにデフォルト値を入れる
日付を入れるところ新規するとき毎回も入力しなといけないのはちょっと面倒くさいですね～ここでDefault値を現在時刻入れてみます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/61c41771-2671-8cb0-d496-f01a8a3a6d4e.png)
Helloworld.modelsを開いて、Default値を入れてみよう。

```
# Create your models here.
class mydb(models.Model):
	title=models.CharField(max_length=200)
	post=models.TextField()
	published=models.DateTimeField('date created',default=datetime.now())#

	#just make it more easy to read
	#ugly but work
	def __str__(self):
		return self.title
```

ではもう一度Admin Pageをみてみようー
時間入力のところは現在時刻みえますね！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/e488423f-ff8c-e387-2b1e-cb64b86ad79c.png)

ですが、TerminalからみるとちょっとWarningが出てきますね～
datetime.now()で現在時刻取りたいですか？django.utils.timezone.now()を使ってくださいね～
のこと。じゃ素直でやります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/a3aff349-47fc-c6e5-8567-6d699efde5c1.png)

あとちょっと気になるのがなんでdefault値をDBのTable中に追加したがなぜマイグレーションしなくてもいいでしょうか…

##Plug-inをインストールしてみる
いよいよ最後ですね。Plug-inをインストールみようと思います。Postのところは文字とかは入れてるなんだけどちょっともの足りないと思いませんか？斜めのFormatとか文字の大きさとかそのまま簡単に調整できるといいだなーって。というわけで、tinymce4をインストールしようと思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/de2a97be-a8d1-5574-6896-26f2f4a38c42.png)
まずは以下のコマンドでPling-inをインストールします。
pip install Django-tinymce4-lite

project01.settings.pyを修正します。先はPlug-inを入れました、次はこのPlug-inをインストールしますね～
INSTALLED_APPSを検索し、tinymceをいれます。

```
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'main.apps.MainConfig',
    'tinymce',
]
```
次はSettigをその上に入れます。

```
TINYMCE_DEFAULT_CONFIG = {
    'height': 360,
    'width': 1120,
    'cleanup_on_startup': True,
    'custom_undo_redo_levels': 20,
    'selector': 'textarea',
    'theme': 'modern',
    'plugins': '''
            textcolor save link image media preview codesample contextmenu
            table code lists fullscreen  insertdatetime  nonbreaking
            contextmenu directionality searchreplace wordcount visualblocks
            visualchars code fullscreen autolink lists  charmap print  hr
            anchor pagebreak
            ''',
    'toolbar1': '''
            fullscreen preview bold italic underline | fontselect,
            fontsizeselect  | forecolor backcolor | alignleft alignright |
            aligncenter alignjustify | indent outdent | bullist numlist table |
            | link image media | codesample |
            ''',
    'toolbar2': '''
            visualblocks visualchars |
            charmap hr pagebreak nonbreaking anchor |  code |
            ''',
    'contextmenu': 'formats | link image',
    'menubar': True,
    'statusbar': True,
    }
```
次はurls.pyを編集します。Plugs-in入れましたのでproject01->urls.pyの中にもこの子を入れないとCSSなどの参照ができなくて困ってしまうー

```
urlpatterns = [
    path('admin/', admin.site.urls)
    ,path('', include('helloworld.urls'))#link
    ,path('tinymce/',include('tinymce.urls'))
]
```
これはインストール終わりました！次はこのPlugs-inをhelloworldのアプリケーションに使えるようになりたいです。まずhellworld→admin.pyを編集しますね。
まずさきインストールしたTinyMCEをImportし、Overridesを書けばOk。

```
from django.contrib import admin
from .models import mydb #
from django.db import models
from tinymce.widgets import TinyMCE

class helloworldAdmin(admin.ModelAdmin):

	fieldsets=[
			("Tile/date",{"fields":["title","published"]})
			,("Your Post",{"fields":["post"]})

	]

	formfield_overrides={

		models.TextField:{'widget':TinyMCE()}
	}

admin.site.register(mydb,helloworldAdmin) #
```

できました！お疲れ様です！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/154661/2e796096-6ff5-4125-3c40-4be6f362472d.png)