django　ページの作成方法(クラス)

#クラスのページの作成方法

読み替え

アプリケーション：apprication
ターゲットページ：hoge

関数とクラスではページ作成方法が異なりますので今回はクラスページ作成方法を記載します。備忘録として個人的に記載してる箇所が一般的利用が一部できない部分がありますので流用はできませんのでご了承下さい。

# hoge.htmlを表示させる

#アプリケーション側のurls.py

views.CreateHoge.as_view()のHogeは大文字なので注意します。

    path('hoge/', views.CreateHoge.as_view(), name='hoge'), #hoge

#views.py
views.pyは二か所追加しましょう。まずforms.pyとmodels.pyからそれぞれインポートします。
importする時も同じくHogeの大文字に注意しましょう。もしもreverse_lazyがない場合はfrom django.urls import reverse_lazyを入れてもいいかもしれません。

```
from .forms import HogeCreateForm
from .models import Hoge
```

上記でインポートが終了したらclassで処理を作ります。classの為LoginRequiredMixinを利用します。ログインページがある場合は関数はデコレータ@login_requiredを利用しましょう。


```
class CreateHoge(LoginRequiredMixin, generic.CreateView):

    model = Hoge # models.pyのHogeクラスを継承します
    form_class = HogeCreateForm # forms.pyのHogeCreateFormクラスを継承
    success_url = reverse_lazy('apprication:hoge') # apprication/hoge　というurlを格納し正常処理後はこのURLに戻る
```

#models.py
```
class Hoge(models.Model):# Hogedb定義

    upload = models.FileField('ファイル(必須)', upload_to='user_movie/',validators=[FileExtensionValidator(['mp4', 'avi', 'mov', 'wmv', 'flv', 'mpg'])],)  
    created_at = models.DateTimeField('作成日', auto_now_add=True) # default=timezone.nowと違い、入力欄は表示されない
    updated_at = models.DateTimeField('更新日', auto_now=True) # 更新するたびにその日時が格納される
    def __str__(self):
        return self.title
```

#forms.py
formsは二か所あります。まずは冒頭で上記で作成したモデルをインポートしましょう。

```
from .models import Hoge
```

```
class HogeCreateForm(forms.ModelForm): # hogeファイルのフォームを定義する

    class Meta:
        model = Hoge
        #fields = ('title', 'description', 'thumbnail', 'upload')

        fields = ('upload',)#今回はuploadのみ使用

        widgets = {
            # タイトル　テキストインプット
            #'title': forms.TextInput(attrs={  # <input type="text" class="form-control"
            #    'class': 'form-control',
            #}),
            # 説明　テキストエリア
            #'description': forms.Textarea(attrs={  # <textarea class="form-cotrol"
            #    'class': 'form-control',
            #}),
            # 画像サムネイル
            #'thumbnail': forms.ClearableFileInput(attrs={  # <input type="file" class="form-control-file"
            #    'class': "form-control-file",
            #}),

            # ファイルアップロード
            'upload': forms.ClearableFileInput(attrs={
                'class': "form-control-file",
            }),
        }
```

#base.html
```
<li class="nav-item">
    <a class="nav-link" href="{% url 'apprication:hoge' %}">hogeページはこちら</a>
</li>
```

#templatesの中のhoge_forms.html
formを使う時はxxxxx_form.html指定じゃないとできないかもしれません。

```
{% extends 'apprication/base.html' %}
{% block maincontents %}
{% load static %}

  <h1>ｘｘｘ　-　hoge</h1>
  <p>hoge_form.htmlを表示しています。fieldnameは {{ fieldname }}</p>

	<input id="lefile" type="file" style="display:none">
	<div class="input-group">
	  <input type="text" id="photoCover" class="form-control" placeholder="select file...">
	  <span class="input-group-btn"><button type="button" class="btn btn-info" onclick="$('input[id=lefile]').click();">Upload</button></span>
	</div>
	<p class="help-block">auto download</p>
	<script>
        /* if you wanna remove fakepath */
	 $('input[id=lefile]').change(function() {
	    $('#photoCover').val($(this).val().replace("C:\\fakepath\\", ""));
	  });
	</script>

{% endblock %}
```

#runserverしてURLをたたく

```
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
```

沢山の記事や助言を頂く事で作成する事ができました。深く御礼申し上げます。