プロジェクト proj01 に 静的なファイル (jQuery,css) を使う app03 というアプリを作成してみます。
- アプリの作成
django-admin startproject proj01
cd proj01/
python manage.py migrate
python manage.py startapp home
python manage.py startapp app03
home/views.py
from django.http import HttpResponse
def index(request):
str_out = ""
str_out += "<p>*** home *** start ***</p>"
str_out += "<p>ホームです。</p>"
str_out += "<a href='app03/'>app03</a><p />"
str_out += "<p>*** home *** end ***</p>"
str_out += "<p>Nov/08/2022</p>"
return HttpResponse(str_out)
home/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
- proj01/settings.py の編集
proj01/settings.py
（省略）
INSTALLED_APPS = [
'home',
'app03',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
（省略）
- proj01/urls.py の編集
proj01/urls.py
from django.contrib import admin
from django.urls import path
from django.urls import include
urlpatterns = [
path('accounts/', include('django.contrib.auth.urls')),
path('', include('home.urls')),
path('app03/', include('app03.urls')),
path('admin/', admin.site.urls),
]
- テンプレートの作成
mkdir app03/templates
mkdir app03/templates/app03
app03/templates/app03/app03.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
{% load static %}
<script src="{% static 'app03/app03.js' %}"></script>
<link rel="stylesheet" href="{% static 'app03/app03.css' %}">
<title>app03</title>
</head>
<body>
<h2>app03 template!</h2>
{{ hour }}時{{ minute }}分です。<br>
{{ message | safe }}<p />
<hr />
<span class='green'>green</span>
<span class='red'>red</span>
<span class='blue'>blue</span>
<hr />
<p><a href="../accounts/logout/">Logout</a></p>
<p><a href="../">Return</a></p>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
<p>app03.html</p>
<p>Nov/08/2022 PM 12:10</p>
</body>
</html>
- jQuery と css を作成
mkdir app03/static
mkdir app03/static/app03
app03/static/app03/app03.js
// -----------------------------------------------------------------------
// app03.js
//
// Nov/08/2022
//
// -----------------------------------------------------------------------
jQuery (function ()
{
jQuery("#outarea_aa").html("*** app03.js *** start *** Nov/08/2022 ***")
jQuery("#outarea_hh").html("*** app03.js *** end *** Nov/08/2022 ***")
})
// -----------------------------------------------------------------------
app03/static/app03/app03.css
/* -------------------------------------------------------------- */
/*
app03.css
Dec/20/2018
*/
/* -------------------------------------------------------------- */
span.green{color: green}
span.red{color: red}
span.blue{color: blue}
/* -------------------------------------------------------------- */
- app03/views.py の編集
app03/views.py
from datetime import datetime
from django.http import HttpResponse
from django.shortcuts import render
# from django.contrib.auth.decorators import login_required
# @login_required
def index(request):
message = ""
message += 'app03 からのメッセージです。<br />'
message += str(request.user.id) + ' '
message += request.user.username + '<p />'
dd = {
'hour': datetime.now().hour,
'minute': datetime.now().minute,
'message': message,
}
return render(request, 'app03/app03.html', dd)
- app03/urls.py の作成
app03/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
- 開発サーバーの起動
python manage.py runserver
- ブラウザーで http://127.0.0.1:8000/app03/ にアクセス
