Djangoで作る米国株式表示アプリ
Pythonを使ってWeb開発をするときのアプリケーションフレームワークであるDjangoを使って米国株式情報の一覧表示アプリを作成します。
全体を通しての注意点
コードをコピペする際は、インデントがズレてしまう時がありますので、
その都度、インデントを修正してください。
0章
0-1 教材の概要
学習内容
Djangoを使った実践的な開発スキルを学びます。
Djangoのフォームクラスの実装方法を学びます。
米国株式のAPIを利用した、米国株式情報の取得方法を学びます。
データベースから情報を抽出し、一覧表示する方法を学びます。
オブジェクトの新規登録、削除できる機能を実装します。
教材内容
Pythonを使ってWeb開発をするときのアプリケーションフレームワークであるDjangoを使って米国株式情報の一覧表示アプリを作成します。
本教材の完成イメージは以下になります。
学ばないこと
HTMLやCSS、Javascriptについては詳しく解説していません。詳細は各自調べていただければと思います。
macをベースにして、進めています。windowsの方は適宜読み替えて、進めてください。（ちなみにwindowsのpowershellで進めても支障がありませんでした。違いと言ったら仮想間環境の作り方と入り方程度だったと思います。つまずいた点があれば、ご相談ください。）
0-2 環境構築
python 3系のインストール
下記のサイトから最新版のpythonをダウンロードしてください。
インストールが完了したら、ターミナルから「python3」とコマンドを打って、python3系がインストールが動いていることを確認しましょう。
~$ python3
Python 3.7.3 (v3.7.3:ef4ec6ed12, Mar 25 2019, 16:52:21)
[Clang 6.0 (clang-600.0.57)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> 一度、「exit()」とコマンドを打って、pythonの入力画面から抜けましょう。
新規フォルダの作成
コンピュータ内の任意の場所に新しいフォルダを作成しましょう。
今回は、「dev_test」とします。
$ mkdir dev_test続いて、作成したdev_testのフォルダ内に移動しましょう。
$ cd dev_test仮想環境の作成
下記のコマンドを打って、仮想環境を作成しましょう。
$ python3 -m venv myvenv
同フォルダにmyvenvというフォルダが作成されたのを確認してください。
このmyvenvフォルダが仮想環境であり、この中にこれからインストールするパッケージが保管されます。
0-3 作成するアプリケーションの設計
全画面の洗い出し
設計をする前に本講座で作成する画面を全て紹介します。 画面は全部で2画面あります。
トップページ
トップページにはユーザーがプルダウンから選択した任意の株式情報が表示されます。
一覧ページ
一覧ページにはユーザーがデータベースに保存した株式銘柄の情報を一覧が表示されます。
このページでは、新たに株式銘柄を追加したり、削除することができます。
必要な情報の洗い出し
今回のコースで開発する主な機能は、以下の4つになります。
- APIを取得して、表示する機能。
- 任意の銘柄をプルダウンから選択できるようにする機能。
- 選択した任意の銘柄をデータベースに追加・削除できる機能。
テーブル設計
テーブルの内容は株式銘柄のシンボルのみになります。
株式銘柄のシンボルをキーとして、APIを随時、利用し、最新の株式情報を取得、表示できるようにします。
1章 新規Djangoアプリケーションの作成
1-1 新規Djnagoプロジェクトの作成
ではまず先ほど作成した仮想環境に入りましょう。
先ほど作成したdev_testのフォルダ内にいることを確認し、下記のコマンドを入力してください。
$ source myvenv/bin/activate
環境に入ったらpipコマンドでdjangoをインストールします。
(myvenv)〜$ pip install django後にrequestsというモジュールも使用するので、ここでインストールしておきます。
(myvenv)〜$ pip install requests
新規Djnagoプロジェクトの作成
ここでは新しく「stock_project」というプロジェクトを作成します。
(myvenv)〜$ django-admin startproject stock_project
次に、プロジェクトフォルダに入り、以下のコマンドでdjangoの開発用サーバを立ち上げてみましょう。
(myvenv)〜$ cd stock_project
(myvenv)〜$ python manage.py runserver
・・・
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C. You have 17 unapplied migration(s)...というエラーメッセージが出ていると思いますが、現時点では無視して大丈夫ですので、ご安心ください。
では、この状態で下記にアクセスしてみましょう。
上記のような画面が表示されていれば、成功です。
一回、Ctrl + Cでサーバを停止しましょう。
このパートは以上です。
1-2 新規Djnagoアプリの作成
次にdjangoアプリを作成します。
今回は「stock」というアプリを「stock_project」プロジェクトに作成します。
前回のパートで作成した仮想環境から出てしまっている場合は、仮想環境フォルダ（venv)が入っているディレクトリまで戻って、再度、仮想環境に入ってください。
(myvenv)〜$ source venv/bin/activate次に、stock_projectディレクトリ内に移動してください。
確認方法はターミナル「pwd」と打つことで、現在のディレクトリを表示します。
〜stock_display/stock_projectとなっていることを確認してください。
(myvenv)〜$ pwd〜stock_display/stock_projectとなっていることを確認してください。
それではアプリを作成しましょう。
ターミナルから下記のコマンドを打ってください。
(myvenv)〜$ python manage.py startapp stocklsコマンドを打って、stockというフォルダができていることを確認してください。
(myvenv)〜$ ls 1-3 djangoプロジェクトの設定ファイルの修正
プロジェクトのディレクトリ配下にあるsettings.pyを修正します。
(manage.pyがあるフォルダと同じです。）
ファイル場所 → stock_project/settings.py
修正する設定項目
INSTALLED_APPS (33行目くらいにあると思います。）
下記のように作成したアプリ名である「stock」を追記してください。
（settings.py)
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'stock', # 追加
]LANGUAGE_CODE、TIME_ZONE (107行目、109行目くらいにあると思いまうす。）
言語、タイムゾーンを指定します。以下のコードのように修正してください。
# LANGUAGE_CODE = 'en-us' # 変更前
LANGUAGE_CODE = 'ja' # 追加
# TIME_ZONE = 'UTC' # 変更前
TIME_ZONE = 'Asia/Tokyo' # 追加
この章は以上です。お疲れ様でした。
第2章 トップページの作成
作成する機能の概要
このパートでは株式を選択し、価格等の情報を一覧に表示するページを作成します。APIキーを利用し、動的に情報を取得し、表示します。
この章で学べること
・ベーステンプレートの利用方法
・APIの利用方法
・Djangoのフォーム機能の利用方法
この章で作成するトップページのイメージ
2-1 仮のトップページの作成
本パートでは下記の画像のようにデザインは特にしていない仮のトップページを表示させるところまでやっていきます。
目標物を作成するまでの流れ
1. トップページのテンプレートの作成
2. ビューの作成
3. ルーティングの設定
4. 動作確認
2-1-1 トップページのテンプレートの作成
まずは、簡単なテンプレートを作成しましょう。
stock_project/stock/の下にtemplatesフォルダを作成し、その中にhome.htmlというファイルを作成します。
├stock_project/
├manage.py
├stock/
├ __init__.py
├ apps.py
├ models.py
├ views.py
├ admin.py
├ migrations/
├ templates/ # 新規作成
└ home.html # 新規作成
└ test.py
home.htmlに以下のコードを追加してください。
これはhome.htmlのページです。これで簡単なテンプレートページの作成完了です。詳細は後ほど、作り込みます。
2-1-2 ビューの作成
先ほど作成したhome.htmlをブラウザ上に表示する部分を作成します。
ビューはアプリフォルダに生成されているviews.pyに作成します。
ファイル場所 → stock_project/stock/views.py
├stock_project/
├manage.py
├stock/
├ __init__.py
├ apps.py
├ models.py
├ views.py ← このファイルを修正します。
├ admin.py
├ migrations/
├ templates/
└ test.py
views.pyを以下のように修正しましょう。
from django.shortcuts import render
# home関数の追加
def home(request):
return render(request, 'home.html', {})return render(request, 'home.html', {})について
render関数は、第二引数に指定したテンプレートを読み込み、テンプレートに記述されているデータを表示できるように変換する処理を行います。
第三引数に、辞書型を指定することで、テンプレートで{{}}という形で値を埋め込めるようにできます。（今回は空にしています。）
2-1-3 ルーティングの定義
作成したhome.htmlとviews.pyで定義したhome関数をつなげる作業になります。
ここでは、トップページがhttp://localhost:8000/というURLになるように設定します。
まずはプロジェクトフォルダに自動生成されているurls.pyを修正します。
ファイル場所 → stock_project/urls.py
├stock_project/
├ __pycache__/
├ __init__.py
├ settings.py
├ urls.py ← このファイルを修正します。
├ wsgi.py
from django.contrib import admin
from django.urls import path ,include # includeを追加
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('stock.urls')), #追加
]
urlpatternsの解説
Djangoでは、ユーザーがアクセスしたアドレスと第一引数に指定したアドレスが一致した場合に、2つ目の引数に指定した処理（admin.site.urlsやinclude()）を利用するという仕組みになっています。
path('',include('stock.urls')),
ここでは、第一引数に空のテキスト、第二引数にinclude関数を設定しています。
include関数は、引数に指定したモジュールを読み込みます。
ここではstock.urlsとなっており、これにより、「stock」フォルダ内のurls.pyが読み込まれます。
つまり、http://localhost:8000にアクセスすると、自動的に「stock」フォルダ内のurls.pyに記述した内容を参照されるようにしているのです。
それでは上記で参照されているurls.pyファイルをアプリのディレクトリ配下に新規作成しましょう。
stock_project/stock/の下にurls.pyを作成します。
stock_project/stock/というURLでトップページを返すようにtstock_project/stock/urls.pyに以下のように記述します。
├stock/
├ __init__.py
├ apps.py
├ models.py
├ urls.py ＃新規作成
├ views.py
├ admin.py
├ migrations/
├ templates/
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
]
これは、http://localhost:8000/の下に何もない時は、view.pyのhome関数を呼び出すという意味になります。
name='home'で、このURLパターンに名前をつけることが出来ます。
ここでつけた名前によって実際のurlを取得出来ます。
以上で今回のパートは終了です。
お疲れ様でした。
2-1-4 動作確認
まずは仮想環境に入っていることを確認しましょう。
入っていない場合は仮想環境に入りましょう。
仮想環境フォルダが存在するフォルダ（venvフォルダ）に行き、以下のコマンドを打ちます。
(myvenv)〜$ source venv/bin/activate次に開発サーバを立ち上げましょう。
プロジェクトルートに移動して以下のコマンドを打ちましょう。
(myvenv)〜$ python manage.py runserver
・・・
Starting development server at http://127.0.0.1:8000/
・・・
以下のurlにアクセスし、home.htmlが表示されていることを確認してください。
http://localhost:8000/
以下のように表示されていたら成功です。
2-2 ベーステンプレートの作成
本パートの目標物
本パートでは、複数画面に渡って共通で表示したいヘッダ部分であったり、デザインを一つのhtmlファイルで管理できるように、base.htmlを作成します。
下記の画像のようにベーステンプレートの内容が、トップページで読み込まれ、表示するところまでを実装します。
目標物を作成するまでの流れ
1. ベーステンプレートの作成
2. トップページのテンプレートを編集し、ベーステンプレートの内容を反省させる。
2-2-1 ベーステンプレートの作成
実際に作成してみましょう。stock_project/stock/templates/の下にbase.htmlファイルとして作成します。
├stock/
├ __init__.py
├ apps.py
├ models.py
├ views.py
├ admin.py
├ migrations/
├ templates/
└ home.html
└ base.html # 新規作成
試しにbase.htmlに以下のコードを追加してください。
<h1>ここはbase.htmlのh1タグです</h1>
{% block content %}
{% endblock %}下記の点について解説します。
{% block content %} 〜 {% endblock %}
別のテンプレートで上書きさせる箇所を{% block <ブロック名> %} 〜 {% endblock %}で、挟み込むことにより、base.htmlの任意の場所を個別に上書きすることが出来ます。
2-2-2 トップページのテンプレートの修正
次にhome.htmlからベーステンプレートを利用できるようにしましょう。
home.htmlを以下のコードのように修正してください。
├stock/
├ __init__.py
├ apps.py
├ models.py
├ views.py
├ admin.py
├ migrations/
├ templates/
└ home.html ← このファイルを修正します。
└ base.html
<!-- 新規追加 -->
{% extends 'base.html' %}
<!-- 新規追加 -->
{% block content %}
これはhome.htmlのページです。
<!-- 新規追加 -->
{% endblock %}下記の点について解説します。
{% extends 'base.html' %}
この1行で、'base.html'の内容を反映することが出来ます。
そして、home.htmlの独自の内容を{% block content %} 〜 {% endblock %} とブロックで囲むことにより、base.html内の{% block content %}{% endblock %}部分に埋め込むイメージです。
それでは、再度、http://localhost:8000/ にアクセスし、home.htmlを確認しましょう。
base.htmlのh1タグ部分とがhome.htmlの内容が両方反映されていることを確認しましょう。
2-3 Bootstrapの導入
それではbase.htmlをもう少し修正し、ナビゲーションバーを追加してみましょう。
そこで、今回のパートではBootstrapを導入していきます。
Bootstrapは有名なWebフレームワークで、CSSを細かく指定せずにサイトをある程度形にできます。レスポンシブにも対応してくれる便利なツールです。Bootstrapを導入するとWebアプリケーションを効率よく開発できます。
(今回のパートはBootstrap4の公式ドキュメントを参考にしてます)
本パートの目標物
目標物を作成するまでの流れ
1 公式ドキュメントに沿ってBootstrapを導入
2 Bootstrapが導入されたか確認
bootstrapからテンプレートをコピペします。
{% block content %}~{% endblock %}の上に貼り付けてください。
下記のサイトからコピーして貼り付けてください。
base.htmlに貼り付けてください。
<!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">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- 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>
{% block content %}
{% endblock %}
その後、下記のように修正してください。
<!-- 新規修正-->だけに着目してください。
<!doctype html>
<!-- 新規修正-->
<html lang="ja">
<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">
<title>Hello, world!</title>
</head>
<body>
<!-- 新規修正-->
<h1>これはbase.htmlのh1タグです。</h1>
<!-- 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>
{% block content %}
{% endblock %}
以上でベーステンプレートの作成が完了です。
次にhome.htmlからベーステンプレートを利用できるようにしましょう。
home.htmlを以下のコードのように修正してください。
下記の点について解説します。
{% extends 'base.html' %}
この1行で、'base.html'の内容を反映することが出来ます。
そして、home.htmlの独自の内容を{% block content %} 〜 {% endblock %} とブロックで囲むことにより、base.html内の{% block content %}{% endblock %}部分に埋め込むイメージです。
それでは、再度、http://localhost:8000/ にアクセスし、home.htmlを確認しましょう。
base.htmlのh1タグ部分とがhome.htmlの内容が両方反映されていることを確認しましょう。
それでは、もう少し、base.htmlを作り込みます。
Navbarの追加
下記のリンクから、Navbarのコードをコピーしてください。
├stock/
├ __init__.py
├ apps.py
├ models.py
├ views.py
├ admin.py
├ migrations/
├ templates/
└ home.html
└ base.html ← このファイルを修正します。
base.pyの</head>以下に貼り付けます。
</head>
<!-- 新規追加ここから -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- 新規追加ここまで -->
<body>
<h1>Hello, world!</h1>
それでは、再度、http://localhost:8000/ にアクセスし、home.htmlを確認しましょう。
ナビゲーションバーが表示されたのがわかります。
それでは、不要な部分を削除します。
base.htmlを下記のように修正してください。
<!-- 削除--> と <!-- 新規修正 -->だけに着目してください。
<!doctype html>
<html lang="ja">
<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">
<title>Hello, world!</title>
</head>
<!-- 新規修正 -->
<!-- <nav class="navbar navbar-expand-lg navbar-light bg-light"> -->
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
<!-- 新規修正 -->
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<a class="navbar-brand" href="#">Stock Display</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<!-- 新規修正 -->
<!-- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> -->
<a class="nav-link" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<!-- 新規修正 -->
<!-- <a class="nav-link" href="#">Link</a> -->
<a class="nav-link" href="">List&Edit</a>
</li>
<!-- 削除 ここから -->
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> -->
<!-- 削除 ここまで -->
</ul>
<!-- 削除 ここから -->
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
<!-- 削除 ここまで -->
</div>
</nav>
<body>
<!-- 削除 ここから-->
<!-- <h1>これはbase.htmlのh1タグです。</h1> -->
<!-- 削除 ここまで-->
<!-- 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>
{% block content %}
{% endblock %}
HTMLの基本的な修正については、解説を省略します。
下記の点について解説します。
href="{% url 'home' %}"
今回作成するトップページへのリンクを表現しています。
ここでの'home'は先程、urls.pyに記述した「name='home'」で設定していたパスを指しています。
最後にナビゲーションバーのブロックの位置を</head>の直下に移動します。
下記のようになっていれば成功です。
これで、このパートは終了です。
お疲れ様でした。
ここから先は
¥ 2,000
この記事が気に入ったらサポートをしてみませんか？