Djangoのビューとテンプレートを使った画面表示!HTMLを生成し画面へレンダリングしてみよう!

BACK END

こんにちは!
LiSMOtechの久津間です。

 

前回の記事ではDjangoの初期設定について記載を行いました。

内容的には初心者の方を対象にしているので、中級者以上の方には物足りない記事ではあると思います。

ですが、継続的にDjangoの記事を発信していくつもりなので、ドンドンコアな内容にしていく予定です。

楽しみにしていただけると幸いです!

 

それでは、本題です。

今回のセクションではビューとテンプレートを用いて、実際にHTMLを生成し、画面へレンダリングしていきたいと思います。

 

URLディスパッチャの編集

それでは、ブラウザで表示を行うために、URLディスパッチャの設定を行います。

URLディスパッチャは指定されたURLに対応して、ビューで記載したどの関数を返すか決定します。

 

configディレクトリ配下のurls.pyにも記載することは可能ですが、ここでは作成したアプリ内のurls.pyで行います。

作成したappディレクトリにurls.pyファイルを作成します。

 

urls.pyの作成後、以下のとおり記載していきます。

from django.urls import path
from . import views

app = '@@@'
urlpatterns = [
    path('', views.home, name='home')
]

app(@@@)には作成したアプリ名を記載してください。

 

続いて、configディレクトリにあるurls.pyを開き、以下のとおり編集します。

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('@@@.urls')),
]

urlpatternsに記載しているpath関数では、第一引数に”を指定しています。

これはホームディレクトリ(https://hostname)で表示されることを意味します。

第二引数ではincludeの引数として、作成した「アプリ名(@@@).urls.py」を指定しています。

ここでは、incluedeをimportしていることに注意してください。

 

ビューファイルの編集

次にビューファイルの編集を行なっていきます。

作成したアプリディレクトリ配下のviews.pyを開き、以下のとおり編集します。

from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.

def home(request):
    txt = 'Hello, Welocom to LiSMOtech'
    return HttpResponse(txt)

ここまで記載ができたらターミナルから「python manage.py runserver」のコマンドを叩きます。

http://127.0.0.1:8000/ へアクセスし、以下のとおりビューが表示されれば成功です!

上記のようにビューで変数をHttpResponseに渡すことで、画面表示することが可能です。

 

テンプレートを作成

次にテンプレートを作成していきます。

テンプレートではHTMLやCSSを記載することで様々なコンテンツを表示することが可能です。

まだ、HTMLとCSSを学習されていない方は別途、学習を進めてみてください。

 

それでは作成したアプリディレクトリ配下にtemplatesディレクトリを作成します。

 

続いてtemplatesディレクトリ配下にhome.htmlを作成してください。

作成後、home.htmlを編集します。

 

次にhome.htmlで記載した{{ title }}と{{ content }}に値を渡すようにviews.pyを編集します。

from django.shortcuts import render
from django.http import HttpResponse
from django.template import context, loader
# Create your views here.

def home(request):
    template = loader.get_template('home.html')
    context = {
        'title': 'Welcom to LiSMOtech',
        'content': 'DjangoでWEBアプリケーションを開発',
    }
    return HttpResponse(template.render(context, request))

 

ファイルの編集が完了したら、ターミナルから「python manage.py runserver」を叩き、ブラウザを確認します。

以下のようにテンプレートとビューの連携ができていれば成功です!

 

まとめ

今回の記事ではビューとテンプレートを使用したレンダリングについて記載しました。

Djangoの基本ばかりでしたが、ベースを理解してこそのWEB開発だと思いますので、しっかり覚えておきましょう!

次回からはモデルも交えて紹介していきたいと思います!


ともに考え、寄り添う。プロのデザインチームが即参戦。

販促ツールや一貫したデザインによるブランド構築などビジネスの成長をデザインの力で促進します。

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。

企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

お得な情報がLINEに届く!!

LINE公式アカウントはこちらから。

友だち追加

最新記事

CONTACT

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

平日10:00〜19:00

お電話の場合こちらから

043-305-4162

平日10:00〜19:00