前回までに構築でデータベースにリンク集を作成しました。
そして管理ページにスーパーユーザーを登録してデータの入力準備までできました。
今回の項目についてまとめました。
- 管理ページ(admin/)でデータを入力して一覧を表示させる。
- 投稿一覧ページを作成する。
- 画像も投稿します。その画像を表示させるために /media/ のAriasを作成する。
管理ページよりデータテストデータを入力して準備をする。
管理ページにログイン。 例： https://lerning.codingstock.jp/webapps/xxxxxxx/
管理ページデータ入力ページ
管理ページ一覧ページ
管理ページで投稿一覧を確認しましたが、アプリケーションで一覧を表示するアプリケーションを記述します。
今回作成した表示プログラム http://learning.codingstock.jp/webapps/list/
手順
ルーティングの設置
templates/list.htmlの作成
list.htmlは前回の投稿で作成した templates/base.html を利用します。
また、これらの環境作成はcontent/Webアプリケーションの環境構築を参照してください。
ルーティングの設定 （[アプリケーション]/urls.pyの設定）
|
1 2 3 4 5 6 7 8 9 |
from django.urls import path from . import views app_name = 'webapps' urlpatterns = [ path('', views.index, name='index'), # /webapps path('list/', views.list, name='list'), # /webapps/list ] |
/webapps/view.pyの編集
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# webapps/views.py from django.shortcuts import render, redirect from django.http import HttpResponse from .models import Link import random def index(request): context = { 'randam': random.random() } return render(request, 'webapps/index.html', content) def list(request): context = { 'links': Link.objects.order_by('-published'), 'randam': random.random(), } return render(request, 'webapps/list.html',context) |
templates/list.htmlの作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!-- # webapps/templates/list.html --> {% extends 'webapps/base.html' %} {%block content %} {% load static%} <h2>一覧ページ</h2> <div id="listWrapper"> {% for link in links.all %} <div class="mesLine"> <div class="eyeCatch"><a href="{{link.url}}"><img src="{{ link.image.url }}" width="180"></a></div> <div class="msgBody"> {{link.title }} <br> {{link.published }}<br> {{link.url}} </div> </div> {% endfor %} </div> {% endblock %} |
画像の投稿のsaticの設定（urls.py)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/urls.py に追加" ]# [project]/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 #from list import views urlpatterns = [ path('adminx/', admin.site.urls), path('webapps/', include('webapps.urls')), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # 静的なデータを表示するのURLの設定 ・・・・・・ settings.py -> MEDIA_URL # そのデータをどこに保持しているかの設定 ・・・・ settigns.py -> MEDIA_ROOT |
MEDIA_URL,MEDIA_ROOT設置(setting.py)
|
1 2 3 4 5 6 7 8 9 10 11 |
/settigs.py の編集" ]＃ [myproject]/settigs.py の編集 ・ ・ BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # デフォルトで設定されている # 実際の場所は[project]の設置絶対位置を示します。 ・ ・ MEDIA_URL = '/images/' # 追加 URLの設定を指定 MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # 追加 データを保持している場所 指定 # 場所はWebサーバーが表示可能な場所とする。 |
Nginxで公開するためにコンフィグファイルにLocationを追加
|
1 2 3 4 5 6 7 8 |
# Nginx コンフィグファイルの設定 ・ ・ location /images/ { alias /home/django/content/media/; #ロケーションのパスの割り当て } ・ ・ |
実際の list.html の表示を実現するために 「templates/webapps/list.html」 にCSSでデザインを割り当てる必要があります。