Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@riz21(rin)

Djangoでの基本のBBSの実装方法

Last updated at Posted at 2024-12-17

DB以外の実装

アプリ名はスネークケースを義務付けられてはいないが、Pythonのモジュール名として有効である必要があり、
Djangoでは、アプリ名によくスネークケースが推奨されます。
最初に作業ディレクトリを任意の位置に作成します。

String direcPath//作業ディレクトリのパス
String appName//アプリ名
String appPathName//urlにおけるアプリへアクセスするためのパス

direcPathを作業ディレクトリとして以下を実行

django-admin startproject myapp .
["django-admin","startproject","myapp","."]//プロジェクトの雛形を作成
と
python manage.py startapp $appName
["python","manage.py","startapp",appName]//appNameという名前のアプリを作成し、追加

$myApp_path/settings.py(設定ファイル)

「設定ファイルの"INSTALLED_APPS"とある行」の次行に
"    '$appName.apps.${キャメルケースのappName}Config',"
と追記します。//これによりappNameというアプリを登録できます。

$direcPath/myapp/urls.py書き換え

//このサイトにアクセスがあった時、最初にurlを処理するプログラム。

from django.contrib import admin
from django.urls import path,include
from django.views.generic import RedirectView
urlpatterns = [
    path('admin/', admin.site.urls),#adminだと、管理者サイトに飛ぶ
    path('$appPathName/', include('$appName.urls')),#appPathNameとアクセスしてきたとき、urlのアクセスをappNameのurls任せる。
    path('', RedirectView.as_view(url='$appPathName/')),#空文字のアクセスは上のアドレスにリダイレクトさせる
]

とし、

$direcPath/$appName/urls.py書き換え

//appNameアプリにアクセスがあった時、urlを処理するプログラム

from django.urls import path
from . import views
from django.views.generic import RedirectView

app_name = '$appName'#アプリ名
urlpatterns = [
  path('home/', views.View.as_view(), name='home'),#homeだとViewに描画を任せる
  path('', RedirectView.as_view(url='home/')),#空文字だとhomeにリダイレクト
  path('create/', views.ArticleCreateView.as_view(), name='create'),  # 登録用(登録時にそのデータを渡されて、それを処理する)URL
  path('delete/', views.ArticleDeleteView.as_view(), name='delete'),  # 削除用(削除時にそのデータを渡されて、それを処理する)URL
  path('edit/<int:article_id>/', views.ArticleEditView.as_view(), name='edit'),  # 編集用(編集時にそのデータを渡されて、それを処理する)URL
]

$direcPath/$appName/views.py書き換え

//画面表示や処理など色々するプログラム

from .models import Article
from django.views import generic
from django.shortcuts import redirect,get_object_or_404
# Article一覧表示時の画面と処理
class View(generic.ListView):
    template_name = '$appName/index.html'#使用するhtml
    model = Article#使用するmodel
    context_object_name = 'article_list'  # テンプレートで使用するコンテキスト名
# Article登録（フォーム送信時）時の画面と処理
class ArticleCreateView(generic.View):
    def post(self, request, *args, **kwargs):
        content = request.POST.get('content')  # フォームの入力値を取得
        if content:
            Article.objects.create(content=content)  # 新規データを登録
        return redirect('$appName:home')  # Article一覧へリダイレクト
# Article削除時の画面と処理
class ArticleDeleteView(generic.View):
    def post(self, request, *args, **kwargs):
        article_id = request.POST.get('article_id')  # 削除対象IDを取得
        if article_id:
            Article.objects.filter(id=article_id).delete()#Articleの一覧の中の、削除対象IDの要素をdelete
        return redirect('$appName:home')  # Article一覧へリダイレクト
# Article編集時の画面と処理
class ArticleEditView(generic.View):
    def post(self, request, article_id, *args, **kwargs):
        article = get_object_or_404(Article, id=article_id)  # 編集対象の記事を取得
        content = request.POST.get('content')  # フォームから送信された新しい内容を取得
        if content:
            article.content = content  # 記事内容を更新
            article.save()  # 保存
        return redirect('$appPathName:home')  # Article一覧へリダイレクト

$direcPath/$appName/templates/

と

$direcPath/$appName/templates/$appName/

を作成し、

$direcPath/$appName/templates/$appName/index.html

というファイルを作成し内容を下の通りにする、//アプリのページを追加する

{% load static %}
<!-- uu staticフォルダを読み込み -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>django_p</title>
</head>
<body>
  <h1>article一覧</h1>
  <section>
    {% for article in article_list %}
    <h2>{{ article.content }}</h2>
    <!-- 編集用フォーム -->
    <form method="POST" action="{% url '$appPathName:edit' article.id %}">
      {% csrf_token %}
      <textarea name="content" required>{{ article.content }}</textarea>
      <button type="submit">編集</button>
    </form>
    <!-- 削除用フォーム -->
    <form method="POST" action="{% url '$appName:delete' %}">
      {% csrf_token %}
      <input type="hidden" name="article_id" value="{{ article.id }}">
      <button type="submit">削除</button>
    </form>
    {% endfor %}
  </section>
  <h2>Article登録</h2>
  <!-- 登録用フォーム -->
  <form method="POST" action="{% url '$appName:create' %}">
    {% csrf_token %}
    <input type="text" name="content" placeholder="記事内容を入力" required>
    <button type="submit">登録</button>
  </form>
</body>
</html>
このhtmlは、上のhtmlに記述を追加して改善したもので、要素にホバーするまでformが非表示になるなどの部分で見た目を良くしたもの 
{% load static %}
<!-- staticフォルダを読み込み -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>django_p</title>
  <link rel="stylesheet"href="https://unpkg.com/modern-css-reset/dist/reset.min.css"/>
  <style>
    .items{display: flex;}
    .items form{display:none;}
    .items:hover form{display:block;}
  </style>
</head>
<body>
  <h1>article一覧</h1>
  <section>
    {% for article in article_list %}
    <div class="items">
      <h2>{{ article.content }}</h2>
      <!-- 編集用フォーム -->
      <form method="POST" action="{% url '$appPathName:edit' article.id %}">
        {% csrf_token %}
        <textarea name="content" required>{{ article.content }}</textarea>
        <button type="submit">編集</button>
      </form>
      <!-- 削除用フォーム -->
      <form method="POST" action="{% url '$appPathName:delete' %}">
        {% csrf_token %}
        <input type="hidden" name="article_id" value="{{ article.id }}">
        <button type="submit">削除</button>
      </form>
    </div>
    {% endfor %}
  </section>
  <h2>Article登録</h2>
  <!-- 登録用フォーム -->
  <form method="POST" action="{% url '$appPathName:create' %}">
    {% csrf_token %}
    <input type="text" name="content" placeholder="記事内容を入力" required>
    <button type="submit">登録</button>
  </form>
</body>
</html>

これでデータベース以外の部分は記述し終わった

DB作成

まずMAMPを起動し、
$direcPath/myapp/settings.pyのDATABASESを書き換え//DATABASESを使用するのに必要

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'testb_db',
        'USER': 'root',
        'PASSWORD': 'root',
    'HOST': '/Applications/MAMP/tmp/mysql/mysql.sock',
        'PORT': '8889'
    }
}

$direcPath/$appName/init.pyを書き換え

//DATABASESを使用するのに必要

import pymysql
pymysql.install_as_MySQLdb()

$direcPath/$appName/models.pyに利用するmodelを記述し、

from django.db import models
class Article(models.Model):
    content=models.CharField(max_length=255)# 255文字格納

direcPathを作業ディレクトリとして

python manage.py makemigrations $appName
["python","manage.py","makemigrations",appName]
    //モデルの変更点を検出し、データベース用の「マイグレーションファイル」を生成する。
と
python manage.py migrate
["python","manage.py","migrate"]
    //マイグレーションファイルを元に、データベースに変更を適用する。

を実行することでモデルをデータベースに適応できる。

これにより、Articleの一覧表示と新規登録、変更、削除を実装したアプリを作成できました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?