#環境
MacOS
Python 3.7.6
Django 3.0.5
#プロジェクトの作成
まずはプロジェクトを保存するフォルダに移動します。
ChisakinoMacBook-Pro:~ Chisaki$ cd desktop
ChisakinoMacBook-Pro:desktop Chisaki$ cd app
ChisakinoMacBook-Pro:app Chisaki$
そのフォルダ内でプロジェクトを作成します。今回はprojectという名前のプロジェクトを作成します。
$ django-admin startproject project .
その次に、projectの中にdiaryという名前のアプリケーションを作成します。
$ cd project
$ python3 manage.py startapp diary
これでプロジェクトの作成は以上になります。
#初期設定
テキストエディタを開きprojectファイル内にあるsetting.pyを開いてください。
34行目あたりに今回追加したアプリケーション名を含めた下記のコードを記述します。diaryの箇所が追加したアプリケーション名になります。
その次に言語とタイムゾーンの修正を行います。日本語を意味する'ja'と日本時間を示す'Asia/Tokyo'を記述しましょう。
次にprojectの中にあるurls.pyに移動し、下記のように記述します。2行目にincludeを入れることを忘れないようにしましょう。第2引数をincludeにすることでdiary/が読まれたときにdiary.urlsを読みにいきます。
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('diary/', include('diary.urls')),
]
次はアプリケーション内にurls.pyを作成します。下記のコードを記述します。空の文字列を指定することで/diaryのあとに何もURLがない場合にviews.indexが呼ばれます。
from django.urls import path
from .import views
app_name = 'diary'
urlpatterns = [
path('', views.index, name='index'),
]
次にviews.pyに移動します。下記のように記述します。第２引数はどのページに見せるかの指定を行います。
from django.shortcuts import render
def index(request):
return render(request, 'diary/day_list.html')
次にdiaryフォルダの中にtemplatesを作成してその中にテンプレート用に別のdiaryフォルダを作成します。そしてのその中にbase.htmlを作成します。そして次にBootstrapを開きます。
https://getbootstrap.com
メニューバーの左から2番目のDocumentationを開きます。下にスクロールしますとStarter templateがありますのでそれをコピーします。
そしてそのコピーしたコードをbase.htmlに貼り付け、下記のように編集します。{% block content %}はテンプレートを継承するためのコードです。
<!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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>日記アプリケーション</title>
</head>
<body>
{% block content %}
{% endblock %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
次にday_list.htmlをbase.htmlと同じようにdiaryフォルダ内に作成をします。その中に下記のように記述します。extendsでbase.htmlを継承します。
{% extends 'diary/base.html' %}
{% block content %}
<h1>日記帳アプリケーションです。</h1>
{% endblock %}
ここまできたらローカルサーバーに接続してみましょう。下記のようにターミナルを実行します。
$ python3 manage.py runserver
下記にアクセスをすると...
http://127.0.0.1:8000/diary/
結果がブラウザ上に表示されましたので成功です^_^
#Djangoで作る日記帳アプリ一覧
Djangoで作る日記帳アプリ①
Djangoで作る日記帳アプリ②
Djangoで作る日記帳アプリ③
Djangoで作る日記帳アプリ④
Djangoで作る日記帳アプリ⑤