Djangoブログサイト作り方

django01

初心者でも簡単に作れるブログサイト

開発準備

  1. 図-01: 任意のフォルダに「仮想環境構築(1行目)」
  2. 図-01: 仮想環境実行(実行すると、一番左に「(myvenv)」が表示される
  3. 図-02: requirements.txt作成(開発に必要なパッケージ記載)
  4. 図-02: パッケージインストール(pip3 install -r requirements.txt)
図-01
図-02

プロジェクト作成

図-03
図-04
図-05
図-06
  1. 図-03: プロジェクト作成(「mysite . 」は任意の名称。プロジェクト名 space ピリオド、とすることで、ディレクトリ直下に作成できる)
  2. 図-04: mysite -> setting.py で設定を変更(言語・タイムゾーン)
  3. 図-05: マイグレート(データベースセットアップ)
  4. 図-06: Webサーバ起動
  5. 図-07: URLにアクセスし、Djangoのインストールを確認
図-07

アプリケーション作成

  1. 図-08: アプリケーション作成(「app」は任意の名称)
  2. 図-09: mysite -> settings.py -> ‘widget_tweaks’, ‘app’, 追加
図-08
Django-settings.py
図-09

モデル

  1. 図-10: app -> models.py 「class 名:Post」は任意。author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE) ※ForeignKeyをログインユーザーと連携させている。

def __str__(self)により、管理画面に表示されるモデル内のデータ(レコード)を判別するための、名前(文字列)を定義することができます。

Postモデル内にtitle、text、created_dateフィールドを定義しており、def __str__(self)内では、titleフィールドを返すようにしています

https://office54.net/python/django/model-str-self
図-10

管理画面

図-11
  1. 図-11: 先ほど作成したモデルを管理画面に反映させる:app -> admin.py
  2. 図-12: マイグレーション:python3 manage.py makemigrations (モデルを変更時必須)
  3. 図-12: マイグレート: python3 manage.py migrate
  4. 図-13: 管理ユーザ作成: python3 manage.py createsuperuser
  5. 図-14: Webサーバ起動:python3 manage.py runserver:URLに /adminと追加し、先ほど設定したユーザ名とパスワードでログインする
  6. 図-15, 16:「Post」にダミーを数件登録する(レイアウト確認のため)
図-12
図-13
図-14
図-15
図-16

ルーティング(URL)

ルーティングはプロジェクト用とアプリケーション用の2種類。

1. プロジェクト用(管理サイト用、アプリケーション用)

2, アプリケーション用(URLとviewのマッチング)

  1. 図-17: mysite -> urls.py(プロジェクト用ルーティング)
  2. 図-18: app -> urls.py(アプリケーション用のurls.pyを作成しルーティング)
図-17
図-18

ビュー

  1. 図-20: app -> views.py 編集:View と Post をインポートする
  2. 図-20: トップページのビュー(index) を編集
  3. 図-20: get関数で、ビューが呼ばれたときに最初に呼ばれる関数
  4. 図-20: Postモデルからデータを取得
  5. 図-20: return -> render関数で指定したテンプレートにデータを渡す
図-20

テンプレート: base.html

テンプレートはビューから渡されたデータをHTMLに変換する

図-21
  1. 図-21: app内に「templates」フォルダ作成
  2. 図-21: templates内に「app」フォルダ作成
  3. 図-21: app -> templates -> app -> に「base.html」 を作成
  4. bootstrapからコードをコピペ

base.html は動的に変わらないもの「ヘッダー、ナビゲーション、フッター」を書くことが多い

Django入門ブログ構築チュートリアル レッスン2

Bootstrapからコードをコピペ

bootstrap

テンプレート: index.html

図-22
  1. 図-22: 1行目でbase.htmlを読み込む
  2. 図-22: {% %} で投稿内容を読み込む
  3. 図-22: {{ }} で指定したオブジェクトを読み込む
図-23
  1. 図-23: サイドバーを作っています

CSS

図-24
  1. 図-24: app -> staticフォルダ作成 -> cssフォルダ作成 -> style.cssファイル作成
  2. 図-24: main { flex: 1; }とすることで、footerを常に最下位に配置できる
  3. 図-25: base.html に、stylesheet 追記
図-25
  1. 図-26: Webサーバ起動してリンクをクリック
  2. 図-27: トップページの内容を確認する
図-26
図-27

詳細画面

図-28
  1. 図-28: app -> urls.py に詳細画面(post_detail)のpathを追加
  2. 図-29: app -> views.py に詳細画面のクラスを追加
  3. 図-29: post_data = Post.objects.get(id=self.kwargs[‘pk’])とすることで、投稿毎のid (pk) に紐づいたデータを取得できる
  4. 図-29: returnでrender関数をコールしてテンプレートにデータを渡す
図-29
  1. 図-30: app -> index.html 詳細のリンクを追加
  2. 図-31: app -> templates -> app -> post_detail.html 作成
図-30
図-31

画像アップロード

  1. 図-32: requirements.txt に「Pillow~=2.2.1」追記
  2. 図-33: pip3 install -r requirements.txt でインストール
  3. 図-34: mysite -> settings.py に画像のアップロード先を追記
図-32
図-33
図-34
  1. 図-35: mysite -> urls.py に追記
  2. 図-35: if settings.DEBUG: … は開発環境用 ※デプロイするときは違う
図-35
  1. 図-36: app -> models.py のclass Post に追記
  2. models.py を編集したら、必ず「python3 manage.py makemigrations」と「python3 manage.py migrate」を実行する
図-36
  1. 図-37: index.htmlに画像を表示させる
  2. 図-38: post_detail.htmlに画像を表示させる
  3. どちらも{% if post.image %}を付けることで、画像なしでもエラーにはならない
  4. 図-39: style.cssを編集
図-37
図-38

おすすめ記事