Todoリストはクラスベースドビューを使って作ったけども、今回はよりDjangoの仕組みを理解するため、ファンクションベースドビューで作成していく。
render
templatesフォルダにsignup.htmlファイルを作成する

boardapp>urls.pyにつなぎこむ
1 2 3 4 5 6 7 |
from django.urls import path from .views import signupfunc urlpatterns = [ path('signup/', signupfunc ), ] |
boardapp>views.pyを作成
1 2 3 4 5 6 |
from django.shortcuts import render # Create your views here. def signupfunc(request): return render(request, 'signup.html', {'some':100}) |
renderはどんなモジュールかを調べてみると
signup.htmlを編集する
1 |
{{ some }} |
ってやって、サーバーを立ち上げるとこうなる

何が起きているか
views.pyでディクショナリ形式で
return render(request, ‘signup.html’, {‘some’:100})
という出力を定義して、その中身は100なのでsignup.htmlはそのような表示となった。
見た目を整える
templatesフォルダ下にbase.htmlファイルを作る
bootstrapのスタートアップテンプレートをコピペして、個別の使う部分を編集していく
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> {% block customcss %} {% endblock customcss %} <title>Hello, world!</title> </head> <body> {% block header %} {% endblock header %} {% block content %} {% endblock content %} <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> |
signup.htmlにBootstrapを効かせる
Bootstrapコンポーネントを活用するのが一般的だが、すでに組み合わせた作例がある。それはBootstrapのexsampleのページそこのPlease sign inを使用する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{% extends 'base.html' %} {% block content %} <body class="text-center"> <form class="form-signin"> <img class="mb-4" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">Please sign up</h1> <label for="inputEmail" class="sr-only">Email address</label> <input type="text" id="inputEmail" class="form-control" name='username' placeholder="username" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="inputPassword" class="form-control" name='passwors' placeholder="Password" required> <div class="checkbox mb-3"> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> <p class="mt-5 mb-3 text-muted">© 2017-2020</p> </form> {% endblock content %} |
runserverして確認してみる

とりあえずうまくいった。
![]() |
![]() |
---|
コメントを残す