Djangoドキュメント作成1

# BBSのプロジェクト作成

この記事ではBBSのプロジェクト作成からデータの詳細表示まで取り扱っています

BBSのプロジェクト作成の前提となるMANPのわかりやすいダウンロード方法はこちら(https://qiita.com/ninja0408/items/e7a6d60a01d6d693aae9#2-1-mampとxampp)

新しいフォルダ作成後ターミナルで以下の二つを記述
```
django-admin startproject myapp .
```
この場合プロジェクト名はmyappとなる
```
python manage.py startapp bbs
```
これの場合はbbsがアプリ名となる。bbsフォルダが作成したフォルダ直下にあればOK
もしpythonでエラーが起きた場合python3で試してみよう
**（python3を使った方は今後もpython3を使う）**

![スクリーンショット 2024-12-22 19.08.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/a9e0e5db-8f1a-4a3c-1bf3-c619119e0351.png)


## Hello Worldの表示

```bbs > views.py
form django.shortcuts improt render  #これは初めから書いてある
from django.http import HttpResponse  #ここから下を書き込む

def index(request):
    return HttpResponse("Hello World")
```
### ルーティングの設定
```myapp > urls.py
from django.contrib import admin
from django.urls import include, path  #includeを追加する

urlpatterns = [
    path("bbs/",include("bbs.urls")),  #この1行を追加する
    path('admin/',admin.site.urls),
]
```

### bbsフォルダにurls.pyファイルを作成
![スクリーンショット 2024-12-19 14.25.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/679dbe84-f232-5b41-7b20-c5c7383ebbd6.png)

作成したurls.pyに以下を記述
```bbs > urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('',views.index,name='index'),
]
```

### bbsアプリケーションを登録
```myapp > settings.py
INSTALLESD_APPS = [
    'bbs.apps.BbsConfig',  #これを追加する
    'django.contrib.admin',
    'django.contrib.auth', ......
```

### サーバー起動
ターミナルで以下を記述
```
python manage.py runserver
```
ブラウザで開きURLの末尾に「/bbs」を追加する

![スクリーンショット 2024-12-19 15.10.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/d16389d7-2e8c-a919-1b75-532119f941cd.png)


### 呼び出すファイルを指定

bbs/views.pyを編集する（上記で書いていたコードを書き換える）
```bbs > views.py
def index(request):
    return render(request,'bbs/index.html')
```

### テンプレート作成

bbsフォルダにtemplatesフォルダを作成

![スクリーンショット 2024-12-19 15.01.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/94a89eb0-f053-3ad8-d322-f936192b15cf.png)

templatesフォルダの中にbbsフォルダを作成

![スクリーンショット 2024-12-19 15.03.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/2b17ca5b-f09e-0acf-99f1-a53dafd47b6c.png)

bbs/templates/bbsフォルダにindex.htmlファイルを作成

![スクリーンショット 2024-12-19 15.12.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/9be66765-92ac-dd77-71d8-468c0fbf881f.png)

### index.htmlを編集

```bbs > templates > bbs > index.html
<!DOCTYPE html>
<html lang="ja">  <!--langをjaに変える -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bbs</title>  <!--　タイトルをbbsに変える -->
</head>
<body>
  <h1>Hello Django</h1>  <!--　この1行を追加する -->
</body>
</html>
```

## 確認
必要であればターミナルで
```
python manage.py runserver
```
もしエラー（Error: That port is already in use.）が出た場合ターミナルで
```
kill `lsof -ti tcp:8000`
```
を打ち込み、もう一度
```
python manage.py runserver
```

![スクリーンショット 2024-12-19 15.23.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/99b6f714-3761-fde5-0e0a-af2bb5fa9e47.png)


### 辞書型でデータを渡す
```bbs > views.py
def index(request):
    context = {'message':"Welcome my BBS"}  #この1行を追加する
    return render(request,'bbs/index.html',context)  #,contextを追加する
```

### テンプレートで変数の表示

#### Jinja2の説明
動的なコンテンツを生成するためのテンプレートを使用して、HTMLなどの出力を生成するために使用されます。Jinja2は、これらのテンプレートを作成、編集、レンダリングするための強力なツール
HTMLのテンプレートを作ってWebページに表示させることができる

jinja2では{{ 変数名 }}とすることで値を表示できる

```templates > bbs > index.html
<body>
    <h1>Hello Django</h1>
    <p>{{ message }}</p>
</body>
```

### データの追加

```bbs > views.py
def index(request):
    context = {'message':"Welcome my BBS",
            'members':["AAAさん","BBBさん","CCCさん"]  #この1行を追加する
            }
    return render(request,'bbs/index.html',context)
```

### テンプレートで呼び出し

{% %}とすることで、テンプレートエンジン内でコードや制御フローを記述できる
これは通常、制御文やループ、条件分岐などのテンプレートロジックを埋め込むために使用される

templates/bbs/index.htmlを編集

```bbs > templates > bbs > index.html
<body>
  <h1>Hello Django</h1>
  <p>{{ message }}</p>

  {% for member in members %}          #ここから
    <p>{{ member }}は一年生です。</p>
  {% endfor %}                         #ここまで追加する
</body>
```

## Model

Modelは、データベースのテーブルに対応するPythonのクラス
Modelを作成することで、Pythonでデータベースのテーブル定義、データの追加・更新・削除、データを取得などができる

### ORマッパー

オブジェクト指向プログラミングとリレーショナルデータベースの間のデータのマッピングを指します。ORマッパーは、プログラム内のオブジェクトとデータベースのテーブルとの間でデータのやり取りを簡素化し、効率化するためもの

bbs/models.pyの編集

```bbs > models.py
from django.db import models

class Article(models.Model):                      #ここから
    content = models.CharField(max_length=200)

    def __str__(self):
        return self.content                       #ここまで追加する
```

## マイグレーション（migration）

データベーススキーマ（テーブル、フィールド、制約など）を変更し、その変更をデータベースに適用するための仕組み。マイグレーションは、Djangoアプリケーションのモデルに変更を加えたり、新しいモデルを追加したりした場合に、データベーススキーマを同期させることができる

### マイグレーションファイルの作成

ターミナルで
```
python manage.py makemigrations bbs
```

![スクリーンショット 2024-12-19 15.55.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/a59b709f-30c0-4125-349b-a1875c1185d2.png)

### DBに反映
ターミナルで
```
python manage.py migrate
```
![スクリーンショット 2024-12-19 15.59.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/b3fafc7c-4e33-5a11-bcfb-7c9e0027491a.png)

### phpmyadminで確認
![スクリーンショット 2024-12-19 16.00.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/456d82a7-be27-b245-dec8-71c796791df5.png)

## 管理サイト

Djangoの管理サイト（Admin Site）は、Djangoが提供する強力な管理ツール
これを使用することで、データベース内のデータを操作したり管理したりするためのWebベースのインターフェースを使用できる
管理サイトを利用することで、データベースの管理作業やコンテンツの編集を非常に効率的に行うことができる

### superuserの作成

ターミナルで
```
python manage.py createsuperuser
```

### username
![スクリーンショット 2024-12-19 16.13.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/6ff9fc0e-c1a2-487f-91f1-b1cbb8c44d29.png)

### email
![スクリーンショット 2024-12-19 16.19.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/980fae88-4680-7bc1-2282-3a70ca91b449.png)

### password
パスワードは打ち込んだものが見えません。
確認用で2度打ち込む必要があります。
短すぎると「Bypass password validation and create user anyway?」という警告が出ます。良ければ「y」やり直すなら「N」を押しエンターを押すと完了です

### サーバー起動
ターミナルで
```
python manage.py runserver
```
### URL変更

`http://127.0.0.1:8000/admin`にすることで管理サイト画面に遷移します

決めたUsernameとpasswordを打ち込みログインします

### Articleモデルを操作できるようにする
bbs/admin.pyの編集
```bbs > admin.py
from django.contrib import admin
from .models import Article   #この行と下の行を追加する

admin.site.register(Article)
```


管理サイトをリロードすると以下のようにBBSのArticleが出てくる

![スクリーンショット 2024-12-19 16.39.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/3e23568e-13aa-cc96-97c2-055383fd0cac.png)

### Articleテーブルにデータを追加

**+Add**をクリック
![スクリーンショット 2024-12-19 16.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/864a5904-fff6-53d5-951a-45226c31095f.png)

Contentにテキストを入力
下のSAVEボタンを押す

3つ登録しましょう

![スクリーンショット 2024-12-19 16.46.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/fdef3174-2d3b-a121-f897-50115fe54c5f.png)

ArticleテーブルのContentカラムに3つデータが格納された

![スクリーンショット 2024-12-19 16.48.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/cf1dca76-7ae1-aa60-7e37-f703659e05bd.png)

### プロジェクトのurls.pyでルーティング記述

myapp/urls.pyの編集
```myapp > urls.py
from django.contrib import admin
from django.urls import path, include
from django.views.generic import RedirectView  #この1行を追加する

urlpatterns = [
    path("bbs/",include("bbs.urls")),
    path('admin/',admin.site.urls),
    path('', RedirectView.as_view(url='bbs/')),   #この1行を追加する
]
```

### views.pyでModelからデータを取り出す

```bbs > views.py
from django.shortcuts import render
from django.http import HttpResponse
from .models import Article   #この1行を追加する

def index(request):
    articles = Article.objects.all()   #この1行を追加する
    context = {'message': "Welcome my BBS",
                'articles': articles,   #この1行を追加する
                }           #memberは削除して良い
    return render(request, 'bbs/index.html', context)
```

### テンプレートで表示
```bbs > templates > bbs > index.html
<body>
  <h1>Hello Django</h1>
  <p>{{ message }}</p>

  {% for article in articles %}  <!-- forでまわしているところをmemberのところを変える -->
    <p>{{ article }}</p>
  {% endfor %}
</body>
```
 ここまでできたらブラウザで確認（要更新）
 
![スクリーンショット 2024-12-19 17.13.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/679cd139-d7c8-fac0-3d54-be411ca27e75.png)

### 個別ページ

bbs/urls.pyの編集
```bbs > urls.py
from django.urls import path
from . import views

app_name = 'bbs'   #この1行と追加する

urlpatterns = [
  path('', views.index, name='index'),
  path('<int:id>', views.detail, name='detail'),   #この1行を追加する
]
```

### 動作確認

bbs/views.pyの編集
```bbs > views.py
from django.shortcuts import render,get_object_or_404   #renderより後を追加する
from django.http import HttpResponse
from .models import Article

def index(request):
    articles = Article.objects.all()
    context = {'message': "Welcome my BBS",
                'articles': articles,
                }
    return render(request, 'bbs/index.html', context)

def detail(request, id):     #これより下を追加する
    article = get_object_or_404(Article, pk=id)
    return HttpResponse(article)
```

### 動作確認

http://127.0.0.1:8000/bbs/1
http://127.0.0.1:8000/bbs/2
http://127.0.0.1:8000/bbs/4

contentで作成したデータが出てくればOK
ここでは3つしか作っていないため3つ目のURLではエラーが起きる

## テンプレートから表示
```bbs > views.py
def detail(request, id):
    article = get_object_or_404(Article, pk=id)
    context = {        #contextを新しく作る
        'message': 'ページID:'+ str(id),
        'article': article,
    }
    return render(request, 'bbs/detail.html', context)   #この1行を書き換える
```

### テンプレート作成

detail.htmlの作成
```bbs > templates > bbs > detail.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bbs - {{ article.id }}</title>    <!-- titleを書き換える -->
</head>
<body>     <!-- bodyの中身を追加 -->
  <h1>Hello Django</h1>
  <p>{{ message }}</p>

  <p>{{ article.content }}</p>
  <p><a href='{% url "bbs:index" %}'>一覧に戻る</a></p>
</body>
</html>
```

### 確認

http://127.0.0.1:8000/bbs/1

![スクリーンショット 2024-12-22 18.53.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/a2ee2d6c-37ab-2053-995a-a13c0bec561c.png)

## 一覧表示画面からも各ページに遷移

```bbs > templates > bbs > index.html
<body>
  <h1>Hello Django</h1>
  <p>{{ message }}</p>

  {% for article in articles %}
    <p>{{ article }}
      <a href='{% url "bbs:detail" article.id %}'>詳細</a>   <!-- この1行を追加する -->bi
    </p>
  {% endfor %}
</body>
```

詳細ボタンが作られていればOK

![スクリーンショット 2024-12-22 18.57.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3963683/b4240ca4-a459-7fda-5a29-489c02a42ded.png)

それぞれの詳細ボタンから個別のページに遷移できるか確認する

今回はこれで終わりです。