ブログ新機能追加チュートリアル

自己紹介

プログラミング講師の飼鳥晴康(@hathle)です。

エンジニア歴は10年以上で海外(カナダ)就労も経験しています。

カナダでは、映画を作っていました。

現在は、独立して、Python、Djangoをメインにオンラインでマンツーマンレッスンをしています。

お問い合わせなどは、Twitter(@hathle)からお願いいたします。

プログラミングは人生を変えることができます。

目標に向かって、一緒に頑張っていきましょう！！

はじめに

ブログ構築チュートリアルでは基本的なブログの機能を構築しました。

このチュートリアルでは、さらに機能を追加していきます。

Zenn

Zennでのチュートリアルは見やすくなっています。

Djangoブログ新機能追加

目標

下記を学習していきます。

・画像のアップロード
・カテゴリの追加
・検索機能の追加

機能追加

・画像アップロード機能 
・カテゴリ機能
・ブログ内検索機能

前提知識

Djangoを始める前に、下記の言語は学習しておいて下さい。

・Python
・HTML
・CSS
・JavaScript

では、始めて行きましょう！！

準備

このチュートリアルは、ブログ構築チュートリアルをベースに機能を追加していきます。

もし、実施していない方は、戻って実施して下さい。

ブログ構築チュートリアルでは、Djangoの機能を詳しく解説していますので、もし分からなくなったら参照下さい。

画像アップロード機能

ブログにヘッダー画像をアップロードする機能を追加します。

requirements

画像をアップロードするには、Pillowパッケージを使用しますので、requirements.txtに追加します。

requirements.txt

Django==3.1.4
django-widget-tweaks~=1.4.8
django-allauth~=0.41.0
Pillow~=8.1.0

インストール

仮想環境にパッケージをインストールします。

(myvenv) ~$ pip3 install -r requirements.txt

settings

画像をアップロードするURLを指定します。

settingsの一番下に追加してください。

mysite/settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

プロジェクトURL

urlpatternsに画像の場所を追加します。

mysite/urls.py

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

from django.conf.urls.static import static # 追加
from django.conf import settings # 追加

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

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # 追加