ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|---|
|
本稿ではdjangoで簡単な電卓を作成する方法を説明します。
※機能は非常にシンプルにします。(加算機能のみ)
本稿の目的はMVC(MVT)を用いた値の入出力です。
前提
・Pythonの導入済み(まだの方はこちら)
・djangoの導入済み(まだの方はこちら)
完成図

プロジェクトの作成
適当なプロジェクトを作成します。
|
python django-admin.py startproject django_projects |
アプリケーションの作成
|
python manage.py startapp calculator |
ルーティング処理
calculator/urls.pyを作成して以下の記述をする。
|
from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), path('calc', views.calc), ] |
更にdjango_projects/urls.pyを修正する。
calculatorアプリのurls.pyにパスを通す。
|
from django.contrib import admin from django.urls import include, path urlpatterns = [ path('calculator/', include('calculator.urls')), path('admin/', admin.site.urls), |
共通テンプレートの作成
アプリケーションディレクトリ直下にtemplatesディレクトリを作成しましょう。
今後テンプレートは当ディレクトリに格納します。
以下はヘッダーなどを共通化するテンプレートです。
|
{% block content %} {% endblock %}
|
テンプレートの作成
実際の電卓画面の部分を作成します。
機能は加算のみにします。
|
{% extends "base.html" %} {% block title %}電卓{% endblock title %} {% block content %}
{% csrf_token %}
{{ answer }}
{% endblock %} |
ビューの作成
|
from django.shortcuts import render
return render(request, 'index.html')
val1 = int(request.POST['val1']) val2 = int(request.POST['val2']) answer = val1 + val2 context = { 'answer': answer, } return render(request, 'index.html', context) |
http://127.0.0.1:8000/calculator/
で計算画面が開きます。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
- チュートリアル:電卓の作成
- MVCアプリケーション実装例
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- クイックスタート 2026-05-15 09:54:54
- クイックスタート & チュートリアル(初心者向け) 2026-05-15 09:54:54
- コントローラーにてモデルに値を格納してビューに渡す方法 2026-05-15 09:54:54
- バリデーション 2026-05-15 09:54:54
- HTML とは?タグ・構造・現代の使い方 2026-05-15 09:54:19
- 【Veu.js】for 繰り返し処理 2026-05-15 09:54:19
- ExpressとEJSを使用した簡単なアプリ【node.js】 2026-05-15 09:54:19
- EJSにおけるテンプレートの共通化(組み込み) 2026-05-15 09:54:19
- 【Vue.js】modelとdata フォーム入力値とDOMへの即時反映 2026-05-15 09:54:19
- 【Veu.js】ifの条件分岐とtemplateを用いたグループ化 2026-05-15 09:54:19
- jQueryにおける子要素の削除 2026-05-15 09:54:19
- EJSの値の表示と処理の記述 2026-05-15 09:54:19
- Symfony 2026-05-15 09:54:19
- CakePHPとは 2026-05-15 09:54:19
- Vue.js computed (算出プロパティ) と data / methods との違い|キャッシュとリアクティブ 2026-05-15 09:54:19
コメントを削除してもよろしいでしょうか?