Help us understand the problem. What is going on with this article?

脳死で覚えるDjango入門

More than 1 year has passed since last update.

前書き

 全てのプログラマーは写経から始まる。 by俺

良質な写経元を提供するためにあります。

無駄のないコード無駄のない説明を用意したつもりです。

Djangoを忘れかけた時に立ち返られる原点となれば幸いです。

実行環境

  • python (3.6.8)
  • Django (2.1.7)

すること

Webアプリ制作練習の王道、Todoアプリを作ります。(データベースにはMySQLを使います。)

(1) install

pipとか意味わかんないって人は知りません。

・django

$ pip install django

・MySQL
mac以外の人は自分で調べてください。(ごめん)

$ brew install mysql
$ pip install pymysql

(2) プロジェクトの生成

自分で名前を決めるところは<>で表記します。

$ django-admin startproject <project_name>

今回では、

$ django-admin startproject todo_project

とした。

(注)<project_name>にハイフンは使えません。

(3) 確認

$ python manage.py runserver

ロケットが出てきましたか?

(4) アプリの作成

Djangoでは、プロジェクトの中にアプリを作るという考え方を採用している。

python manage.py startapp <app_name>

今回では、

python manage.py startapp todo

とした。

(5) アプリの登録

Djangoでは、アプリをプロジェクトに登録する必要がある。

<project_name>/<project_name>/settings.pyにINSTALLED_APPSというリストがある。

そこにtodo.apps.TodoConfigを追加する。

settings.py
INSTALLED_APPS = [
    'todo.apps.TodoConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

(6) index.htmlを表示する。

ローカルホスト名というURLを叩くとindex.htmlが表示されるようにする。

(ローカルホスト名ってのはhttp://127.0.0.1:8000/みたいなやつです。サーバーを立ち上げたときにターミナルに記述されているはずです。)

そのためには以下の手順を踏む。
1. index.htmlを作る
2. viewsを設定
2. アプリのルーティングを設定
3. プロジェクトのルーティングを設定

1. index.htmlを作る

<project_name>/<app_name>/templatesというフォルダを作り、その中に'todo'というフォルダを作り、その中にindex.htmlというファイルを作る。

今回では、

  • todo_project
    • todo_project
    • db.sqlite3
    • manage.py
    • todo
      • 色々
      • temlates / todo / index.html ←こいつ

こんな感じになる。

中には適当に

index.html
Hello

とか書いておいてください。

2. viewsを設定

railsでいうcontrollerの部分。

ルーティングで呼び出すための関数を定義しておく。

<project_name>/<app_name>/views.pyを下のように編集する。

views.py
from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, 'todo/index.html')

3. アプリのルーティングを設定

<project_name>/<app_name>の中にurls.pyを作成する。

今回では、

  • todo_project
    • todo_project
    • db.sqlite3
    • manage.py
    • todo
      • 色々
      • urls.py ←こいつ

それを下のように編集する。

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

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

一見、これでローカルホスト名のURLを叩けばviewsの中のindex関数を実行し、index.htmlを表示してくれそう...

でも、Djangoではプロジェクトのルーティングを設定する必要がある。

3.プロジェクトのルーティングを設定

<project_name>/<project_name>の中にurls.pyが既に存在している。

今回では、

  • todo_project
    • todo_project
      • 色々
      • urls.py ←こいつ
    • db.sqlite3
    • manage.py
    • todo

それを下のように編集する。

todo_project/urls.py
"""todo_project URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('todo.urls'))
]

これで、サーバーを立ち上げるとHelloと出力されるはずです。

(7) データベースの設定

mysqlを立ち上げる。

$ mysql -u root

データベースを作る。

create database <database_name>;

今回は、

create database mydb;

とした。

次にDjangoに設定をする必要がある。

<project_name>/<project_name>/settings.pyDATABASESの部分を下のように編集する。

settings.py
# Database
# https://docs.djangoproject.com/en/2.1/ref/settings/#databases

import pymysql
pymysql.install_as_MySQLdb()

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'mydb',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': '',
        'PORT': ''
    }
}

(8) モデルの作成

ここからはTodoアプリの制作に入りますので、ディレクトリの説明の時、<project_name>という抽象的な言い方はせず、todo_projectと書いていきます。

todo_project/todo/models.pyを下のように編集する。

models.py
from django.db import models

# Create your models here.
class Post(models.Model):
    body = models.CharField(max_length=200)

(9) マイグレーションファイルの作成

$ python manage.py makemigrations <app_name>

今回では、<app_name>todoなので、

$ python manage.py makemigrations todo

となる。

すると、todo_project/todo/migrations0001_initial.pyが作成される。そのファイルには先ほど定義したPostモデルをデータベースに作成するコードが書かれている。

(10) マーグレーションファイルの実行

$ python manage.py migrate

(11) 管理ページ

Djangoには超絶便利な管理ページが用意されている。

管理画面から先ほど作成したデータベースを確認します。

$ python manage.py createsuperuser

このコマンドを実行すると、いくつかの質問が与えられる。

usernamepasswordを自分で登録しましょう。

ローカルサーバーを立ち上げ、

$ python manage.py runserver

ローカルホスト名/adminというURLを打ち込みましょう。

すると、

スクリーンショット 2019-03-30 22.03.07.png

このように、管理ページが表示されます。

先ほど入力したusernamepasswordを入力しましょう。

すると、

スクリーンショット 2019-03-30 22.06.09.png

このような管理画面が表示されます。

この画面からデータベースのデータを見たり、追加したりすることができます。

まだ今の状態では、管理画面から先ほどのPostモデルを見ることができません。

見られるようにするために、todo_project/todo/admin.pyを下のように編集します。

admin.py
from django.contrib import admin
from .models import Post

# Register your models here.
admin.site.register(Post)

これでPostモデルも見られるようになったはずです。

スクリーンショット 2019-03-30 22.09.46.png

(12) ルーティングの実装

下表のようなルーティングを実装します。

メソッド パス名 説明
GET / Todoリスト一覧表示
POST /create Todo追加
POST /<int:id>/delete Todos削除

todo_project/todo/urls.pyを下のように編集する。

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

urlpatterns = [
    path('', views.index, name='index')
    path('create', views.create, name='create'),
    path('<int:id>/delete', views.delete, name='delete')
]

views.pycreate関数やdelete関数はまだ未定義ですので、お使いのエディタさんがおこおこするかもしれません。

(13) Formクラスを実装

todo_project/todoforms.pyを作成し、下のように編集しましょう。

forms.py
from django import forms
from .models import Post

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ('body', )

(14) viewsを実装

todo_project/todo/views.pyを下のように編集しましょう。

views.py
from django.shortcuts import render, get_object_or_404
from django.http import HttpResponse, HttpResponseRedirect
from django.urls import reverse
from .models import Post
from .forms import PostForm

# Create your views here.
def index(request):
    posts = Post.objects.all()
    form = PostForm()
    context = {'posts': posts, 'form': form}
    return render(request, 'todo/index.html', context)

def create(request):
    form = PostForm(request.POST)
    form.save(commit=True)
    return HttpResponseRedirect(reverse('index'))

def delete(request, id=None):
    post = get_object_or_404(Post, pk=id)
    post.delete()
    return HttpResponseRedirect(reverse('index'))

これで、ルーティングで呼び出される関数の実装が完了しました。また、index.htmlの中で、テンプレートシステムを使うことで、contextなどの変数を扱うことができます。

(15) base.htmlの作成と実装

index.htmlと同じディレクトリにbase.htmlを用意します。

(todo_project/todo/templates/todoの中です。)

base.htmlを下のように編集します。

base.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>
        <title>Todo list</title>
    </head>
    <body>
        <div class="container">
            {% block content %}
            {% endblock %}
        </div>
    </body>
</html>

(16) index.htmlの実装

index.htmlを下のように編集する。

index.html
{% extends 'todo/base.html' %}
{% block content %}
    <h1>Todo List</h1>
    <form action="{% url 'create' %}" method="POST">
        {{ form.body }}
        <input type="submit" value="追加">
        {% csrf_token %}
    </form>
    <h2>Current Todos</h2>
    <table>
        <thead>
            <th>Todos</th><th>&nbsp;</th>
        </thead>
        <tbody>
            {% for post in posts %}
               <tr>
                   <td>
                   <div>
                       {{ post.body }}
                   </div>
                   </td>
                   <td>
                       <form action="{% url 'delete' post.id %}" method="post">
                           {% csrf_token %}
                           <button>Delete</button>
                       </form>
                   </td>
               </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

すると、

スクリーンショット 2019-03-30 23.34.37.png

めでたくTodoリストアプリが完成します。

自己紹介

冒頭に書くと邪魔になるので最後にひっそりと自己紹介させてください。

名前 綿岡晃輝
職業 大学院生 (2019年4月から)
分野 機械学習, 深層学習, 音声処理
Twitter @Wataoka_Koki

Twitterフォローしてね!

wataoka
専門は機械学習の公平性です
https://twitter.com/wataoka_koki
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした