LoginSignup
1
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?

@Kohei-Tk

【Django Webアプリ開発】CRUDブログ作成[2]

Posted at

前回のおさらい

 前回の記事ではDjangoプロジェクトを作成し、サーバーを起動させスタートページを表示させることに成功しました。今回は新規でアプリケーションを追加して、トップページを作成を作成してみましょう。

新規アプリを追加

 新規アプリを追加するためにターミナルを開いてDjagoプロジェクトへ移動し、新規アプリケーションを追加しましょう。

$ cd C:\Development\django
$ python manage.py startapp helloworld

今回は"helloworld"という名前の新規アプリケーションを追加しました。追加後のディレクトリツリーは以下のようになります。

django
  └─manage.py
  └─config
        └─asgi.py
        └─settings.py
        └─urls.py
        └─wsgi.py
        └─__init__.py
  └─helloworld　#新規作成

必要なフォルダを作成

 Djangoプロジェクトではhtmlファイルやcssファイル、その他多くのファイルを使用します。これらのファイルを一括で管理するためにフォルダを作成しましょう。今回は一般的に使用されているフォルダ構成を使用します。フォルダ作成後のディレクトリツリーをこのようになります。　　
＊今回は新規アプリ追加にも対応するために各フォルダ下にアプリフォルダを追加します。

django
  └─manage.py
  └─config
  └─helloworld
  └─media　#新規作成
  　└─helloworld　#新規作成
  └─static　#新規作成
  　└─helloworld　#新規作成
  └─templates　#新規作成
  　└─helloworld　#新規作成

各フォルダの意味

mediaフォルダ：Djangoで使用する画像ファイルを格納
staticフォルダ：cssファイルやjavascriptファイルを格納
templatesフォルダ：ページ作成に使用するhtmlファイルを格納

各種ファイルの設定

 続いて、作成したconfigフォルダやhelloworldフォルダ内のファイルの設定をしましょう。

config/setting.py

Djangoプロジェクトの設定を変更するファイル

setting.py
import os  # os.path.join使うため追加

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'helloworld', # helloworldアプリを新規追加
]

: 省略

# Bootstrap4 jqueryを使用するため追加
BOOTSTRAP4 = {
   'include_jquery': True,
}

TEMPLATES = [
   {
       'BACKEND': 'django.template.backends.django.DjangoTemplates',
       'DIRS': [BASE_DIR / 'templates'], # templatesフォルダ使用するために追加
       'APP_DIRS': True,
       'OPTIONS': {
           'context_processors': [
               'django.template.context_processors.debug',
               'django.template.context_processors.request',
               'django.contrib.auth.context_processors.auth',
               'django.contrib.messages.context_processors.messages',
           ],
           # Bootstrap4を使用するために追加
           'builtins': ['bootstrap4.templatetags.bootstrap4',], # 追加
       },
   },
]

: 省略

LANGUAGE_CODE = 'ja'  # 変更

TIME_ZONE = 'Asia/Tokyo'  # 変更

# staticフォルダを使用するため追加
STATICFILES_DIRS = (
   os.path.join(BASE_DIR, "static"),
)

# mediaフォルダを使用するため追加
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

config/urls.py

Djangoプロジェクトのurlを管理する

urls.py
from django.urls import path, include #includeを使うため追加
from django.conf.urls.static import static  # mediaを使うために追加
from . import settings  # mediaを使うために追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('helloworld/', include('helloworld.urls')), #helloworldアプリの親ルートを設定
]

# mediaフォルダを使用するために追加
if settings.DEBUG:
   urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

helloworld/urls.py [自身で新規作成]

helloworldアプリのurl情報を設定する

urls.py
from django.urls import path
from . import views

app_name = "helloworld"
urlpatterns = [
    # ここにurl情報を追加していきます
]

ページに「Hello World」を表示させよう

それでは準備が整ったのでいよいよ新規ページを作成していきましょう。基本的にDjangoでは【html作成→view作成→urlの設定】の3ステップで新規ページを作成していきます。それでは実際に取り組んでみましょう。

html作成

まずはwebページのデザインとなるhtmlを記述していきましょう。もしhtmlの勉強をしたい場合、検索窓に「html 初心者」など検索すると記事が沢山出てくるので学習してみてください。本記事はDjangoでアプリを作る重点で開設するので省略します。

templates/top.html [自身で新規作成]

top.html
<!DOCTYPE html>
<html lang="ja"> <!--日本語設定-->
<head>
    <meta charset="UTF-8"> <!--utfエンコーディング使用-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--レスポンシブルデザイン-->
    <title>Hello World</title>　<!--タイトルを設定-->
</head>
<body>
    <h1>Hello World</h1> <!--h1タグでhelloworld表示-->
</body>
</html>

view作成

ユーザーからのリクエストを取得し、htmlを返すためにviewを作成しましょう。

helloworld/views.py

views.py
from django.shortcuts import render

# Create your views here.
def top_view(request):
    return render(request, 'helloworld/top.html')

こちらのコードではユーザーからリクエストを受けたときDjango側は"templatesフォルダ"内にある"helloworld/top.html"を返す。

urlの設定

ユーザーがアクセスしたurlに応じてviewを振り分けるための設定をします。

helloworld/urls.py

urls.py
from django.urls import path
from . import views

app_name = "helloworld"
urlpatterns = [
    # ここにurl情報を追加していきます
    path('top', views.top_view, name='top')
]

こちらではurl""にアクセスしたとき先ほど定義した"views.py"ファイル内に定義した"top_view"関数を呼び出す処理を記述しています。

アプリを起動させよう

ここまで終了したらいよいよアプリを起動させてみましょう。

$ python manage.py runserver

>>Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
November 24, 2024 - 22:18:55
Django version 5.0.7, using settings 'config.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

こちらに表示された "http://127.0.0.1:8000/" に加え本記事で定義した"helloworld/top"をURLに追加することで作成したhelloworldアプリのtopページを開くことができます。
"http://127.0.0.1:8000/helloworld/top"

次回、、

 いよいよデータベースを作成して、webアプリの基本となるCRUD機能を作成していきましょう。少しずつ進んでいくので安心してください。本記事をすべて読み切るとDjangoでの基本はマスターすることができます。お疲れさまでした！！

次回へ続く、、、

1
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
1
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?