【django】社内SNSアプリを作ってみる②（会員登録画面の作り込み）【pythonメモ】

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

この記事の目次

render

templatesフォルダにsignup.htmlファイルを作成する

boardapp＞urls.pyにつなぎこむ

from django.urls import path
from .views import signupfunc

urlpatterns = [
    path(&#39;signup/&#39;, signupfunc ),
]

from django.urls import path

from .views import signupfunc

urlpatterns = [

path('signup/', signupfunc ),

]

boardapp＞views.pyを作成

from django.shortcuts import render

# Create your views here.

def signupfunc(request):
  return render(request, &#39;signup.html&#39;, {&#39;some&#39;:100})

from django.shortcuts import render

# Create your views here.

def signupfunc(request):

return render(request, 'signup.html', {'some':100})

renderはどんなモジュールかを調べてみると

signup.htmlを編集する

{{ some }}

1	{{ some }}

ってやって、サーバーを立ち上げるとこうなる

何が起きているか

views.pyでディクショナリ形式で

return render(request, ‘signup.html’, {‘some’:100})

という出力を定義して、その中身は100なのでsignup.htmlはそのような表示となった。

見た目を整える

templatesフォルダ下にbase.htmlファイルを作る

bootstrapのスタートアップテンプレートをコピペして、個別の使う部分を編集していく

&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;

    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;

    {% block customcss %}
    {% endblock customcss %}

    &lt;title&gt;Hello, world!&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    {% block header %}
    {% endblock header %}

    {% block content %}
    {% endblock content %}

    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

{% block customcss %}

{% endblock customcss %}

<title>Hello, world!</title>

</head>

<body>

{% block header %}

{% endblock header %}

{% block content %}

{% endblock content %}

</body>

</html>

signup.htmlにBootstrapを効かせる

Bootstrapコンポーネントを活用するのが一般的だが、すでに組み合わせた作例がある。それはBootstrapのexsampleのページそこのPlease sign inを使用する。

{% extends &#39;base.html&#39; %}

{% block content %}
  &lt;body class=&quot;text-center&quot;&gt;
    &lt;form class=&quot;form-signin&quot;&gt;
  &lt;img class=&quot;mb-4&quot; src=&quot;/docs/4.5/assets/brand/bootstrap-solid.svg&quot; alt=&quot;&quot; width=&quot;72&quot; height=&quot;72&quot;&gt;
  &lt;h1 class=&quot;h3 mb-3 font-weight-normal&quot;&gt;Please sign up&lt;/h1&gt;
  &lt;label for=&quot;inputEmail&quot; class=&quot;sr-only&quot;&gt;Email address&lt;/label&gt;
  &lt;input type=&quot;text&quot; id=&quot;inputEmail&quot; class=&quot;form-control&quot; name=&#39;username&#39; placeholder=&quot;username&quot; required autofocus&gt;
  &lt;label for=&quot;inputPassword&quot; class=&quot;sr-only&quot;&gt;Password&lt;/label&gt;
  &lt;input type=&quot;password&quot; id=&quot;inputPassword&quot; class=&quot;form-control&quot; name=&#39;passwors&#39; placeholder=&quot;Password&quot; required&gt;
  &lt;div class=&quot;checkbox mb-3&quot;&gt;
  &lt;/div&gt;
  &lt;button class=&quot;btn btn-lg btn-primary btn-block&quot; type=&quot;submit&quot;&gt;Sign in&lt;/button&gt;
  &lt;p class=&quot;mt-5 mb-3 text-muted&quot;&gt;© 2017-2020&lt;/p&gt;
&lt;/form&gt;
{% endblock content %}

{% extends 'base.html' %}

{% block content %}

<h1 class="h3 mb-3 font-weight-normal">Please sign up</h1>

<label for="inputEmail" class="sr-only">Email address</label>

<label for="inputPassword" class="sr-only">Password</label>

</div>

</form>

{% endblock content %}

runserverして確認してみる

とりあえずうまくいった。

【django】社内SNSアプリを作ってみる②（会員登録画面の作り込み）【pythonメモ】

render

templatesフォルダにsignup.htmlファイルを作成する

boardapp＞urls.pyにつなぎこむ

boardapp＞views.pyを作成

signup.htmlを編集する

何が起きているか

見た目を整える

templatesフォルダ下にbase.htmlファイルを作る

signup.htmlにBootstrapを効かせる

あ、宜しければ・・・。

コメントを残すコメントをキャンセル

管理人

最近の投稿

最近のコメント

アーカイブ

カテゴリー

しめさばtweet

mug tweet

render

templatesフォルダにsignup.htmlファイルを作成する

boardapp＞urls.pyにつなぎこむ

boardapp＞views.pyを作成

signup.htmlを編集する

何が起きているか

見た目を整える

templatesフォルダ下にbase.htmlファイルを作る

signup.htmlにBootstrapを効かせる

あ、宜しければ・・・。

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

【帝王学】セミナーを受けてきたよ【素質論】

【django】project作成時に生成されるファイルの意味【python…

【明日何の日？】耳の日【3月3日】

何が嘘で何が事実なのか、よくわからんねって話し

働いてお金をもらうこと

梅の季節ですね。

【悲報】知覚過敏は治らない【冷たいモンが歯にしみる】

初めての花粉症

管理人

最近の投稿

最近のコメント

アーカイブ

カテゴリー

しめさばtweet

mug tweet

コメントを残すコメントをキャンセル