MENU

DjangoでHTMLで作成したページを表示させるだけ。ただそれだけ

2020 6/20
DjangoでHTMLで作成したページを表示させるだけ。ただそれだけ

こんにちは。ちゆりです。
ええ。まだやってますよ。Django.
飽きもせずDjangoを触っています。Flaskから乗り換えるために一通りの実装を行い備忘録として記事でまとめておきますので,勝手に見ていってくださいな。

今日もまだまだ基本編。DjangoでHTMLで作成したページを表示させるだけ。ただそれだけ。

「Djangoの導入がまだだよ。」「Djangoの導入方法がわからない」「ただ暇なだけです。」という方は以下の記事からDjangoの導入・インストール方法を紹介してますのでまずはここから始めるとかっこいいです。

目次

views.pyでページを表示

これは基本中の基本。まずはレンダリングの基本を知ってもらいます。
views.pyで返した値を使ってwebページを表示していきましょう。こういうときは定番のHello Worldを表示させたりするのですが,それだとありきたりなのでトルネードサンダーマウンテンを表示させていきましょう。(なんで?)

DjangoでHello World的な

ページへ遷移したら、 ただ単純にトルネードサンダーマウンテンを返すというサイトを作ってみます。

Webアプリのページを作成するにはアプリディレクトリ内のviews.pyに記述していきます。

ただこのように記述するだけでOK!ページを作成するための関数を作成しています。

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

# Create your views here.
def index(request):
    return HttpResponse("トルネードサンダーマウンテン")

Djangoのurls.py

そして,次にURLとページの紐付けを行っていきます。urls.pyというファイルをviews.pyと同じ階層に新規作成します。以下のように記述していきます。先程,作成した関数(今回はindex関数)をアプリディレクトリ直下のurls.pyで紐付けを行います

from django.conf.urls import url
from . import views
from django.urls import include, path

urlpatterns = [
    path('', views.index, name='index'),
]

 

最後です。同様に<プロジェクト名>/urls.pyにも記述を追加していきます。
先程作成したファイルではないので注意。(同じ名前なので紛らわしい)
アプリとレンダリングの設定をプロジェクト直下のurls.pyで行います。https://xxx/ooo等の/(スラッシュ)の指定とそのときにどの関数(アプリ)を呼ぶのかを設定します。(今回は/indexに飛んだときに2で設定したappの処理を行うことを記述しています。)

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', include('myapp.urls')),  #ADD
]

'myapp.urls'の部分は適宜自分の作成したappの名前へ変更してください。
形式は<アプリ名>.urlsとする。 

 

ここまで記述したらサーバーの起動を行い127.0.0.1:8000/indexへアクセスすると

$ python3 manage.py runserver

お。出た出た。トルネードサンダーマウンテン

「だから何だよ」という方はバナナでも食べて落ち着いてください。たしかにviews.pyでwebページの表示をしても,こんなショボいものしかできません。
テストで変数を表示したいだとか,レンダリング機能を確認しておきたいというときには手軽に使えますが,Webアプリとしては何も素晴らしくない。

では,次はHTMLを作成しレンダリングを行い,Webページを表示させてみましょう。

HTMLでページを表示

ここでは、ページへ遷移したら.htmlファイルを返す処理を実装していきます。

プロジェクトフォルダ配下(manage.pyと同じ階層)にtemplatesディレクトリの作成

$ mkdir templates

次にsetting.pyTEMPLATESDIRのリストに作成した templatesディレクトリのパスを追加します。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],

templatesディレクトリ内にindex.htmlを追加。今回はテストとして以下のHTMLを書いています。

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<font color="red">トルネードサンダーマウンテン</font>
</body>
</html>

views.pyに以下を記述。HTMLを返すことを書いていきます。

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

# Create your views here.
def index(request):
    return render(request, 'index.html')

urls.pyに紐付けを行う。アプリ直下のurls.pyに記述していきます。無い方は新規作成してください。これさっきも言ったよ。

from django.conf.urls import url
from . import views
from django.urls import include, path

urlpatterns = [
    path('', views.index, name='index'),
]

これでOK!親指を突き上げていいですよ。グッド!

ここまで記述したらサーバーの起動を行い127.0.0.1:8000/indexへアクセスすると

$ python3 manage.py runserver

お。出た出た。トルネードサンダーマウンテン
今回は赤いぞ。ベルリンの赤い雨で血塗られたトルネードサンダーマウンテンとなった。かっこいい。さすがHTML!おしゃれ!

...という感じで,DjangoでHTMLで作成したページを表示させるだけ。ただそれだけ。

Djangoについて学びたい方へ

書籍で学びたいなら

DjangoのWebアプリの設計・作成はもちろん、Webサーバー・アプリ周りの知識も幅広く扱ってくれています。データベースの知識、クラウドの知識、セキュリティの知識も同時に習得でき、初心者にはぜひおすすめの書籍

Djangoについて深く知りたいという方におすすめしています。
ややプログラミングの知識がないと理解が難しいかもしれません。
pythonが書ける方には非常にタメになるDjangoアプリ開発におすすめ書籍でした。

オンライン授業で学びたいなら

僕はオンラインスクールはUdemy をおすすめします。定番の授業からマニアックな授業まで幅広く扱っているので、学びたいことは大体あります。

今回はPython+Djangoの授業をおすすめします。Djangoの基礎から応用までこの授業で学べます。
実際にWEBアプリを作成し、公開するところまで親切に教えてくれます。

読んでおくべきおすすめ記事


ここでいきなりですが、ちゆりの

今週の買って良かった!!おすすめアイテム

夏になるから軽装で出かけれるようにとトートバックを探していたところ、
可愛くてシンプルおしゃれなトートバックを見つけちゃいました。
女子ウケも男子ウケも素晴らしいぞこれ絶対。

この記事が気に入ったら
フォローしてね!

目次
閉じる