kiwo's blog

PythonのPythonista3で遊んでます。パソコン系の話題が好き！

pythonのDjnagoでhtmlファイルでhello worldしよう。

f:id:kassaaaah:20190409213803p:plain

pythonのDjangoでテンプレート使います！

どうもこんにちはkiwoです。

今回はタイトルにある様にpythonのDjangoでhello worldのページを作るまでをしていきたいと思います！

そこでテンンプレートを使用し、htmlを使っていきます！

はじめに

まず僕の環境ですが

MacBook Air

Python 3.6.6
Django 2.1.7
です！

特にDjangoはバージョンによってコードが変わってくる様なので注意が必要です。
PythonとDjangoはインスールしている前提でこの記事を書いていきます。

プロジェクト作成


初めにDjangoのプロジェクトを作る前にファイルを作りたいフォルダに移動します。
今回は取り敢えずデスクトップに作ります。

$ cd Desktop	 
$ django-admin startproject page

これでこの様なディレクトリが作られます。

f:id:kassaaaah:20190403091641p:plain

各々のファイルが何の役割か知りたい方はぐぐってみてくださいw
僕は感覚的にしか分かってないので説明はしませんというより出来ませんw

理解しようとすると難しい言葉が次々に出てきてややこしいのでw

実践してこういうファイルはこんな事が出来るのか！って進めて行くのがオススメかと思います。

では次にこのプロジェクトにアプリケーションを追加しましょう！

$ python manage.py startapp myapp

もう一度ディレクトリを見てみます。

f:id:kassaaaah:20190403092636p:plain

できました。
あ、あとちなみにこれはtreeコマンド使ってます。

page/settings.pyのコード変更

myappというアプリケーションを作りましたがDjangoのプロジェクト(pageフォルダ)にはまだ繋がりはありません。

なのでpageファイルのsettings.pyというファイルのコードを触って繋げていきましょう。
このファイルはDjangoの設定をする為のファイルになります。

このファイルのコードを画像の様に変更します。

f:id:kassaaaah:20190403094148p:plain

これでOKです。

あとは58行目にあるDIRSという所にコードを追加しましょう！
追加するコードはこちら！

os.path.join(BASE_DIR, 'templates'),

テンプレートはこれやで！ってDjangoに教えてる感じです。

画像にすると

これを

f:id:kassaaaah:20190407105303p:plain

こうしましょう

f:id:kassaaaah:20190407105414p:plain


完了したらtemplatesがフォルダを作成しましょう！

templatesフォルダの作成

プロジェクトのディレクトリで

$ mkdir templates

それからhtmlファイルを作ります

$ touch index.html

これでhtmlファイルはできました。

ついでにindex.htmlに以下のコードを

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
Hello World
</body>
</html>

page/urls.pyのコード変更


次にpage/urls.pyのコードをいじっていきます。

コードの上に

from django.conf.urls import include, url

を追加します。

それからurlpatternsの所に

url(r'^myapp/', include(('myapp.urls', 'myapp'),)),

を追加します。

こんな感じです。
f:id:kassaaaah:20190407112254p:plain

ここで注意が必要なんですが他のサイトでよくあるコードをそのまま記述すると古いページ内容ですとDjangoのバージョンが違う為エラーがでます。

例えば…
namespace='myapp'
のコードをよく見かけます。

Djangoの2.1ではurl関数にnamespaceがあればエラーがでます。

myapp/view.pyのコード変更

次はmyapp/view.pyの編集です。

def hello_template(request):
    return render(request, 'index.html')

を追加します。

f:id:kassaaaah:20190407113143p:plain

myapp/urls.pyの作成とコード変更

次にmyappにurls.pyファイルをつくります。
さっきみたいにtouchコマンドでちゃちゃっとやっちゃいます。
page/urls.pyとmyapp/urls.pyの二つがあって間違えやすいので注意を！

ではmyapp/urls.pyをいじっていきます！

コードはこんな感じで！

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^template/$', views.hello_template, name='hello_template'), 
]


これで準備OKです！お疲れ様です！

最終的にはこの様な感じの構造になります。

f:id:kassaaaah:20190409213734p:plain

ランサーバーしよう！

ではターミナルでプロジェクトのディレクトリに移動してから

$ python manage.py runserver

ここで文法エラーなどがあればエラーが表示されます。
成功すればこの様に表示されます。

f:id:kassaaaah:20190407120259p:plain

成功すればローカルホストに接続しましょう。
http://127.0.0.1:8000
上記に接続してもページは見つかりませんので
URLの最後に/myapp/templateを追加してください！

http://127.0.0.1:8000/myapp/template/

上記に接続すると

f:id:kassaaaah:20190409214533p:plain

これでindex.htmlが表示されましたね。


ここまでやりましたがエラーが出た時はだいたいしょうもないミスでしょう笑

僕の場合はコード変更して保存がちゃんと出来てなかったりコピペミスとかでエラーがでてました笑

さいごに

以上が簡単なDjangoの使い方です！

Djangoは少し難しいかと思いますが情報が豊富で解説なんかもたくさんあるのでwebフレームワークにはオススメかと思います！

個人的にも今勉強してて面白く楽しませてもらってます！

皆さんもこの機会に勉強してみては？笑