コンテンツへスキップ

HTMLにデータを出力

BootstrapのサイトではオシャレなHTMLデザインが沢山公開されています。
djangoのWebページを作る際にとても役に立ちます。

HTMLにデータを出力するにはviews.pyでHTMLにデータを引き渡します。

設定方法

  1. Bootstrapの公式サイトにアクセスし、サンプルページから活用したいデザインを選択します。
    Albumというデザインを選択したとして説明します。
  1. Albumのページを開き、右クリックして「ページのソースを開く」を選択します。
  1. 表示されたHTMLのソースコードを全てコピーし、djangoプロジェクトのHTMLファイルに貼り付けます。
  1. Bootstrapのドキュメントページを開くとCSSとJSのコードが記載されているので、先ほど貼り付けたHTMLの<!-- Bootstrap core CSS -->の下の行（CSS）と<script src=から始まる行（JS）を置き換えます。
  1. djangoのデータベースの情報をHTMLに出力したい場合は、まずviews.pyでHTMLにデータベースの情報を渡す設定をします。.modelsから出力したいデータをimportし、pythonオブジェクトに格納し、render()内のディクショナリとしてHTMLに引き渡します。
from django.shortcuts import render
from .models import Job

def home(request):
    jobs = Job.objects
    return render(request, 'jobs/home.html', {'jobs':jobs})

後はHTML内で引き渡されたデータを表示するだけです。
ループでデータの数だけ処理を繰り返すとスマートです。

{% for job in jobs.all %}
<div class="col">
  <div class="card shadow-sm">
    <img class="card-img-top" src="{{ job.image.url }}" />
    <div class="card-body">
      <p class="card-text">{{ job.summary }}</p>
    </div>
  </div>
</div>
{% endfor %}
  1. データごとに動的なURLを作成したい場合は、urls.pyでURLにデータIDを設定します。
from django.urls import path
from . import views

urlpatterns = [
    path('', views.allblogs, name='allblogs'),
    path('<int:blog_id>/', views.detail, name='detail')
]

そしてviews.pyではget_object_or_404()関数で動的にデータをインポートしてHTMLに引き渡します。

from django.shortcuts import render, get_object_or_404
from .models import Blog

def allblogs(request):
    blogs = Blog.objects
    return render(request, 'allblogs.html', {'blogs':blogs})

def detail(request, blog_id):
    detailblog = get_object_or_404(Blog, pk=blog_id)
    return render(request, 'detail.html', {'blog':detailblog})

※HTML全容のサンプルは以下の通りです。


<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.83.1">
    <title>Album example · Bootstrap v5.0</title>

    <link rel="canonical" href="https://getbootstrap.jp/docs/5.0/examples/album/">

    <!-- Bootstrap core CSS -->
<link href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>


  </head>
  <body>
    
<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Yoshimin</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <a class="nav-link" href="#">is</a>
              <a class="nav-link" href="#">doing</a>
              <a class="nav-link" href="#">Nanmyo</a>
            </div>
          </div>
        </div>
    </nav>
</header>

<main>

  <section class="py-5 text-center container">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
        <h1 class="fw-light">かずよしはお腹がすきました</h1>
        <p class="lead text-muted">コンタクトを取りに行くらしいです。</p>
        <p>
          <a href="http://www.google.com/" class="btn btn-primary my-2">寝る</a>
          <a href="#" class="btn btn-secondary my-2">寝ない</a>
        </p>
      </div>
    </div>
  </section>

  <div class="album py-5 bg-light">
    <div class="container">
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
        {% for job in jobs.all %}
        <div class="col">
          <div class="card shadow-sm">
            <img class="card-img-top" src="{{ job.image.url }}" />
            <div class="card-body">
              <p class="card-text">{{ job.summary }}</p>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

</main>

<footer class="text-muted py-5">
  <div class="container">
    <p class="float-end mb-1">
      <a href="#">Back to top</a>
    </p>
    <p class="mb-1">&copy; かずよし 2022</p>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>
タグ: