Djangoとは？
Djangoは『ジャンゴ』と読み、Pythonで実装されたWebアプリケーションフレームワークでオープンソースとして公開されています。フレームワークとは、アプリケーションを開発する際によく使われる機能がまとまったソフトウェアのことです。フレームワークを導入することで、幅広くWebアプリケーションの開発に対応。
Djangoを使えば、コンテンツ管理システムやWikiからソーシャルネットワーク、ニュースサイトなど、高品質なWebアプリケーションを簡単に、少ないコードで作成できます。シンプルなWebアプリケーションであれば、数分間で作れてしまう場合もあります。らしい。
Django特徴
・管理画面
・ユーザー認証
・RSSフィード
・テンプレートエンジン
・データベース(O/Rマッパー)
・フォームの作成・検証・処理
・キャッシュ機能
らしい。
MYPCで動作するかな？ググってみる。
基本的にPYTHONが必要らしい macOSのターミナルから有無を確かめると・・・
(???)macos@MacBook-Pro-A-1398 ~ % python --version
python 3.8.5↑入ってるみたい。
VScodeの入手
Visual Studio Codeは Microsoftが開発しているWindows、Linux、macOS、Web用のソースコードエディタ
VScodeの日本語化
インストール出来たらVScodeを開く↑ サイドメニュー6番目の拡張機能をクリック"japanese language"とタイプしインストール。
desktopにフォルダ仮称"Dev_test1"を新規作成して、VScodeにドラック＆ドロップ ※下記はターミナルでのフォルダ作成例
# ------- コマンド例 ------- ターミナル上で
(base) macos@MacBook-Pro-A-1398 ~ % cd desktop
(base) macos@MacBook-Pro-A-1398 desktop % mkdir Dev_test1
(base) macos@MacBook-Pro-A-1398 desktop % VScodeのメニュから、ターミナル＞新しいターミナルをクリック。ターミナルが下半分に起動する 以降はCUIコマンドを打って作業します。
仮想環境構築
# 以降 --- VScode上のターミナルで ------ (base) macos@MacBook-Pro-A-1398 ~ % の表記は省く
python3 -m venv venv↑Dev_test1直下に”venv”フォルダが出来ました。
source venv/bin/activate↑上記コマンドで仮想環境に入ります。
(venv) (base) macos@MacBook-Pro-A-1398 test_1 %
※ コマンドが通ると赤線部分が表示する。
pip list上記コマンドでPackage のversionを確認。現在[19.2.3] pipのversion[23.2.1]があります、upgradeしませんかの警告有り。
pip install --upgrade pip・Djangoのインストール↓
pip install django
django-admin startproject config .configフォルダとmanage.pyが作られる。
・仮想サーバー起動
python manage.py runserver
↑URL表記をcmd+クリックで
パチパチパチ〜上記がブラウザに表示されれは成功です。 ここまで苦労しました。 キー入力 >> control+cでサーバー停止。
・setting.pyの設定
・テンプレートフォルダの設定 ・言語・タイムゾーンの設定
# 57行目付近
TEMPLATES = [
{
...
'DIRS': [BASE_DIR /'templates'],
...
},# 107行目付近
LANGUAGE_CODE = 'ja' # 変更
TIME_ZONE = 'Asia/Tokyo' # 変更test ├── venv ├── config │ ├── __init__.py │ ├── asgi.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── manage.py
「python manage.py startapp app名」で作成する
python manage.py startapp blogappを立上げたら必須設定
・settings.pyでappを認識させる
・urls.pyで作成したappとURLパスを紐づける
・Djangoへappを認知させる。
INSTALLED_APPS = [
...,
...,
'blog.apps.BlogConfig',
]
・URLとappを紐づける config > urls.pyを開き
from django.contrib import admin
from django.urls import path, include # include 追記
urlpatterns = [
path('admin/', admin.site.urls),
path('' , include('blog.urls')), # 追記
]・TopPage(index.html)を表示したい。
作成したappのblog > urls.pyを作成し、コードを入力。
from django.urls import path
from .views import blogListView # 追記
urlpatterns = [
path("", blogListView), # 追記
]blog #appフォルダ名 ├── __init__.py ├── admin.py ├── apps.py ├── migrations ├── models.py ├── templates #テンプレート用のフォルダ1 │ └── blog #テンプレート用のフォルダ2 | └── index.html #ファイルを作る ├── tests.py ├── urls.py └── views.py
サンプル HTML↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only bootstrap用-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Test Document</title>
</head>
<body>
<!-- ------ navbar ----------------------- -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="block.html">GAME</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- ------ Breadcrumb -------------------- -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<!-- ------ Carousel (カルーセル) ----------------- -->
<!-- --- Gutters ------------------------ -->
<!-- ---- card 並列 ---------------------- -->
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<div class="card card-body">
<h5 class="card-title">Card title</h5>
<img src="#" class="card-img-top" alt="...">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="" class="btn btn-secondary">Go somewhere</a>
</div>
</div>
<div class="col-sm-6">
<div class="card card-body">
<h5 class="card-title">Card title</h5>
<img src="#" class="card-img-top" alt="...">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="" class="btn btn-secondary">Go somewhere</a>
</div>
</div>
</div>
<!-- youtube PR ------------------------------- -->
<!-- --------------- accordion ------------------------------------- -->
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne">
<strong>PR youtube
</strong>
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<div class="ratio ratio-16x9">
<iframe src="#" title="YouTube video" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
<strong>PR youtube</strong>
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<strong></strong><div class="ratio ratio-16x9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/prQeQnOEkH0?si=uhxYqMktJ-j3D3vU&start=2713" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
<strong>PR youtube</strong>
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
<div class="accordion-body">
<strong></strong><div class="ratio ratio-16x9">
<iframe src="" title="YouTube video" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper bootstrap用 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
・blog > views.pyで
from django.shortcuts import render
# Create your views here.
def blogListView(request):
return render(request, "blog/index.html")python manage.py runserver
http://127.0.0.1:8000/
127.0.0.1
MEMO
「コマンド」
pip install -r req.txt
pip freeze > req.txt
python manage.py makemigrations appname
python manage.py migrate appname
python manage.py createsuperuser
データベースのリセット（SQLiteの場合）
rm db.sqlite3
キャッシュのクリア
find . -name "*.pyc" -delete
which python
python --version
pip install Pillow 画像添付用
python manage.py shell
guest or user
{% load accounts_user %}
{{ request.user }} 【ユーザーオブジェクトの取得】
{{ request.user.is_authenticated }} 【ユーザーがログインしているかどうか】
{{ request.user.is_anonymous }} 【ユーザーがログアウトしているかどうか】
{{ request.user.is_admin }} 【ユーザーが管理者かどうか】
{{ request.get_host }} 【ドメインのみ】
{{ request.get_host }} 【http(s)】
{{ request.path }}. 【パス（パラメータ無し）】
{{ request.get_full_path }} 【パス（パラメータ有り）】
{{ request.build_absolute_uri }}
コメント