1. Create a project
django-admin startproject [project]
cd [project]
python3 manage.py startapp [project]
① Create urls.py in diary file
diary/urls.py
from django.urls import path
from .import views
app_name='diary'
urlpatterns=[
path('', views.index, name='index')
]
② Edit views.py in diary file
diary/views.py
from django.shortcuts import render
def index(request):
return render(request, "diary/day_list.html")
③ Create templates/diary file in diary file and create base.html,day_list.html,day_form.html
diary/templates/diary/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatiable" content="IE=edge" />
<meta name="viewport content=width=device-width, initial-scale=1.0" />
<title>日記アプリ</title>
<link rel="stylesheet" href="style.css" />
{% block extrajas %} {% endblock %}
</head>
<body>
{% block content %} {% endblock %} {% block extrajas %} {% endblock %}
</body>
</html>
diary/templates/diary/day_list.html
{% extends 'diary/base.html' %} {% block content %}
<h1>日記アプリです</h1>
{% endblock %}
day_form.html
{% extends 'diary/base.html' %} {% block content %}
<form action="" method="POST">
{{form.as_p}}
<button type="submit">送信</button>
{% csrf_token %}
</form>
{% endblock %}
py manage.py runserver
2. Implement comment functionality
① Edit models.py
models.py
from django.db import models
from django.utils import timezone
class Day(models.Model):
title=models.CharField('タイトル', max_length=200)
text=models.TextField('本文')
date=models.DateTimeField('日付', default=timezone.now)
cd [プロジェクト]
python3 manage.py makemigrations diary
python3 manage.py migrate
② Edit urls.py
diary/urls.py
from django.urls import path
from .import views
app_name='diary'
③ Create diary/forms.py
diary/forms.py
from django import forms
from .models import Day
class DayCreateForm(forms.ModelForm):
class Meta:
models=Day
field="__all__"
④ Edit views.py
views.py
from django.shortcuts import render, redirect
from .forms import DayCreateForm
def index(request):
return render(request, "diary/day_list.html")
def add(request):
form=DayCreateForm(request.POST or None)
if request.method=="POST" and form.is_valid():
form.save()
return redirect("diary:index")
context={
"form:form"
}
return render(request,"diary/day_form.html",context)
3. Display a list of data
① Edit base.html file
base.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatiable" content="IE=edge" />
<meta name="viewport content=width=device-width, initial-scale=1.0" />
<title>日記アプリ</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
{% block extrajas %} {% endblock %}
</head>
<body>
<div class="container"
<nav class="nav">
<a class="nav-link active" href="{% url 'diary:index'%}">一覧</a>
<a class="nav-link" href="{% url 'diary:add'%}">追加</a>
</nav>
{% block content %} {% endblock %} {% block extrajas %} {% endblock %}
</div>
</body>
</html>
② Edit day_list.html file
day_list.html
{% extends 'diary/base.html' %} {% block content %}
<h1>日記一覧</h1>
<table class="table">
<caption>
日記一覧
</caption>
<thead>
<tr>
<th>タイトル</th>
<th>日付</th>
</tr>
</thead>
<tbody>
{% for day in day_list %}
<tr>
<td>{{day.title}}</td>
<td>{{day.date}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
③ Edit day_form.html file
day_form.html
{% extends 'diary/base.html' %} {% block content %}
<form action="" method="POST">
<table class="table">
<caption>
日記新規作成
</caption>
<tr>
<th>タイトル</th>
<td>{{form.title}}</td>
</tr>
<tr>
<th>本文</th>
<td>{{form.text}}</td>
</tr>
<tr>
<th>日付</th>
{{form.date}}
</tr>
</table>
<button type="submit" class="btn btn-primary">送信</button>
{% csrf_token %}
</form>
{% endblock %}
4. Data update function
① Edit urls.py
urls.py
from django.urls import path
from .import views
app_name='diary'
urlpatterns=[
path('', views.index, name='index'),
path('add/', views.index, name='add'),
path('update/<int:pk>', views.index, name='update'),
]
② Edit views.py
views.py
from django.shortcuts import render, redirect, get_object_or_404
from.forms import DayCreateForm
from.models import Day
def index(request):
context={
"day_list":Day.objects.all(),
}
return render(request, "diary/day_list.html", context)
def add(request):
form=DayCreateForm(request.POST or None)
if request.method=="POST" and form.is_valid():
form.save()
return redirect("diary:index")
context={
"form:form"
}
return render(request,"diary/day_form.html",context)
def update(request, pk):
day = get_object_or_404(Day, pk=pk)
form=DayCreateForm(request.POST or None)
if request.method=="POST" and form.is_valid():
form.save()
return redirect("diary:index")
context={
"form:form"
}
return render(request,"diary/day_form.html",context)
③ Edit day_list.html
day_list.html
{% extends 'diary/base.html' %} {% block content %}
<h1>日記一覧</h1>
<table class="table">
<caption>
日記一覧
</caption>
<thead>
<tr>
<th>タイトル</th>
<th>日付</th>
</tr>
</thead>
<tbody>
{% for day in day_list %}
<tr>
<td>{{day.title}}</td>
<td>{{day.date}}</td>
<td><a href="{% url 'diary:update' day.pk %}">更新</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
5. Implementing delete and advanced features
① Edit urls.py
diary/urls.py
from django.urls import path
from .import views
app_name='diary'
urlpatterns=[
path('', views.index, name='index'),
path('add/', views.index, name='add'),
path('update/<int:pk>/', views.update, name='update'),
path('delete/<int:pk>/', views.delete, name='delete'),
path('detail/<int:pk>/', views.detail, name='detail'),
]
② Create day_confirm_delete.html in your template/diary file
day_confirm_delete.html
{% extends 'diary/base.html' %} {% block content %}
<form action="" method="POST">
<table class="table">
<caption>
日記新規作成
</caption>
<tr>
<th>タイトル</th>
<td>{{day.title}}</td>
</tr>
<tr>
<th>本文</th>
<td>{{day.text}}</td>
</tr>
<tr>
<th>日付</th>
<td>{{day.date}}</td>
</tr>
</table>
<p>こちらのデータを削除します</p>
<button type="submit" class="btn btn-primary">送信</button>
{% csrf_token %}
</form>
{% endblock %}
③ Create day_detail.html in your template/diary file
day_detail.html
{% extends 'diary/base.html' %} {% block content %}
<table class="table">
<caption>
日記新規作成
</caption>
<tr>
<th>タイトル</th>
<td>{{day.title}}</td>
</tr>
<tr>
<th>本文</th>
<td>{{day.text | linebreaksbr }}</td>
</tr>
<tr>
<th>日付</th>
<td>{{day.date}}</td>
</tr>
</table>
{% csrf_token %} {% endblock %}
④ Edit day_list.html
day_list.html
{% extends 'diary/base.html' %} {% block content %}
<h1>日記一覧</h1>
<table class="table">
<caption>
日記一覧
</caption>
<thead>
<tr>
<th>タイトル</th>
<th>日付</th>
<th>#</th>
<th>#</th>
</tr>
</thead>
<tbody>
{% for day in day_list %}
<tr>
<td><a href="{% url 'diary:update' day.pk %}">{{day.title}}</a></td>
<td>{{day.date}}</td>
<td><a href="{% url 'diary:update' day.pk %}">更新</a></td>
<td><a href="{% url 'diary:delete' day.pk %}">削除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}