0
0

More than 3 years have passed since last update.

Djangoでbitflyerの収支管理アプリを作ってみる(02_01.ログイン画面を作る。)

Posted at

前回
Djangoでbitflyerの収支管理アプリを作ってみる(01.URLマッピングを作成する。編)
https://qiita.com/redmeteor777/items/0d499c7849ad0f3df441

AttributeError: module 'login.views' has no attribute 'login'

「loginディレクトリにあるviews.pyファイルには、loginという関数ないっすよ」

と怒られたところから、続きの作業を実行していきます。
やることは明快で、views.pyにloginという関数(と、ついでにregistrationという関数)を作ります。

views.py
from django.shortcuts import render

# Create your views here.

なんにも書かれてませんね。
ではでは、ガリガリ書いていきましょう!
やっとコード書ける!テンション上がってきた!

views.py
from django.shortcuts import render
from django.http import HttpResponse

def login(request):
    return HttpResponse("Hello, World!")

def registration(request):
    return HttpResponse("Hello, World!!!!!")

HttpResponseというクラスのimportを追加しています。
これは「ブラウザとかから飛んできたアクセスに対して、送り返す内容を作る」クラスです。
ここまで書いたら、いったんrunserverしてブラウザからアクセスしてみましょう。

>python manage.py runserver

さて、アクセス先のURLはどうすればいいでしょうか。

views.py
path('login/', login.login),

「loginというページにアクセスが来たら」
「login.loginを実行する」
という処理を記述しました。

というわけで、アクセス先は[http://localhost:8000/login/]です。

Hello, World!

表示できました!

ついでに[http://localhost:8000/registration/]はどうでしょうか?

Hello, World!!!!!

こちらも表示できました。
「URLに対応した関数を呼び出して、関数の実行結果を返す」という流れが理解できました。

動作も確認できたので、次にログイン用のパーツを作成していきます。
HTMLを使って作ってもいいのですが、それではDjangoを使う意味が薄れます。

せっかくなので、Djangoらしくテンプレートなるものを使って実装してみます。
テンプレートとは「変数とかを組み込んでおいて、Webページの中にそれらを読み込む」ことでWebページを完成させてからクライアント(ブラウザとか)に返す…というものです。

なんか覚えるのが大変そうですが、これを覚えないとDjangoの魅力皆無な気がしますので…頑張っていきます。

まずは「こんなアプリケーション作ったよ!」とプロジェクトに報告します。
2つあるbfmonitorディレクトリのうち、深いほうの中にsettings.pyというファイルがあります。
その中から、INSTALLED_APPSが書かれているところを探しましょう。

settings.py
# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

見つかりました。
これが「プロジェクトが把握・管理しているアプリケーション」です。
ここに「login」というアプリケーションを作ったことを知らせてあげます。

settings.py
# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'login',
]

次にテンプレートを作成します。
まずはloginディレクトリ内に[templates]ディレクトリを作成します。

作成したtemplatesディレクトリの中に、[bfmonitor]ディレクトリを作成します。(紛らわしい…)

この時点での階層を一度整理してみましょう。
C:\Users\Owner\Desktop\bitflyer_monitor\bfmonitor\login\templates\bfmonitor

なんで毎度同じ名前のディレクトリが乱立するんだよわけがわからないよ

この一番深いbfmonitorディレクトリの中に、login.htmlというファイルを作成します。

login.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="uth-8">
    <title>ログイン画面</title>
</head>
<body>
    <h1>ログイン画面!</h1>
    <p>こちらはログイン画面でーすwww</p>
</body>
</html>

ハローワールドの代わりに、ちょっと草を生やしてみます。

また、views.pyを書き換えないとハローワールドが表示されてしまいます。
なぜなら「関数を呼び出した時の処理」がハローワールドの表示だからです。

というわけで、views.pyを編集します。

views.py
from django.shortcuts import render
from django.http import HttpResponse

def login(request):
    return render(request, 'bfmonitor/login.html')

def registration(request):
    return HttpResponse("Hello, World!!!!!")

ここで初登場した[render]という関数を紹介します。
こちらはテンプレートをレンダリングするための関数です。

render(<<>>, テンプレート)

第一引数はクライアントへの返送を管理するインスタンスを指定します。
第二引数には使用するテンプレートファイルを指定するのですが、[templates]ディレクトリからのパス指定で記述する必要がありますので要注意です。

ではサーバーを起動して確認してみましょう。

>python manage.py runserver

ログイン画面にアクセスして表示を確認します。

http://localhost:8000/login/

画面に草が生えれば成功ですwww

「テンプレートを使ってログイン画面を表示する」ところまで到達しました。
長くなってしまったのでここでいったん区切ります。
この先もまだまだ長いし。

次は実際に入力フィールドを作成し、草も生えないログイン画面を構築します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0