Create a shogi game record management app using Django 6 ~ Template division ~

Introduction

This is ** 6th **, a memorandum of making a game record management app for shogi using Django.

Work environment

The working environment this time is as follows

Also, Django's directory structure looks like this:

- kifu_app_project/
    - kifu_app_project/
        - __init__.py
        - setting.py
        - urls.py
        - wsgi.py
    - kifu_app/
        - migrations/
        - templates/
            - index.html
            - informationList.html
            - informationDetail.html
        - __init__.py
        - admin.py
        - apps.py
        - models.py
        - tests.py
        - urls.py
        - views.py
    - manage.py
    - .gitignore

Contents of this article

--Inherit Template --Include Template

Inherit Template

I've created Templates up to the last time, but considering that I'm going to create a number of Templates, I want to make it as easy as possible ... For example, inside the <head> tag will be the same for any template.

Also, I think that maintainability will improve if the same parts are organized.

Template inheritance is like fitting one template into another.

Create the original Template

First, create the original Template.

base.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <title>
            {% block title %}
            {% endblock %}
        </title>
    </head>
    <body>
        {% block body_content %}
        {% endblock %}
    </body>
</html>

Enclose the part you want to fit later in {% block <block name>%} {% endblock%}.

I don't feel much benefit from this alone ... However, it's easy to change only this Template to load things like Bootstrap in the future.

Make individual Templates

Next, create a template for the person to fit. Modify informationList.html as an example.

informaitonList.html


{% extends "base.html" %}

{% block title %}
Kifu APP
{% endblock %}


{% block body_content %}
{% for each_data in object_list %}
<h3>{{ each_data }}</h3>
<table border="1">
    <tr>
        <td><a href="{% url 'kifu_app:informationDetail' each_data.id %}">{{ each_data.date }}</a></td>
        <td>{{ each_data.sente }}</td>
        <td>{{ each_data.gote }}</td>
        <td>{{ each_data.small_class }}</td>
    </tr>
</table>
{% endfor %}
{% endblock %}

First, load the Template to be fitted with {% extends" Template name "%}. After that, in the base mentioned earlier, enclose the contents with a block that corresponds to the place you want to fit.

Include Template

For example, on the detailed screen of the game record, I think that it is easier to use if there is a shogi board. However, such a shogi board may be used for other than the detail screen.

Then, the idea of include is to * manage the "shogi board" as a part and read the part where necessary *. This also makes maintenance easier.

Load "parts"

First, create the following HTML file as a "part"

html:part:html


<h3>here"parts"Will come</h3>

To load such a "part", do the following in the Template you want to load:

informationDetail.html


{% extends "base.html" %}

{% block title %}
Kifu APP
{% endblock %}


{% block body_content %}
<h3>{{ object }}</h3>
<table border="1">
    <tr>
        <td>{{ object.id }}</td>
        <td>{{ object.date }}</td>
        <td>{{ object.sente }}</td>
        <td>{{ object.gote }}</td>
        <td>{{ object.result }}</td>
        <td>{{ object.my_result }}</td>
        <td>{{ object.small_class }}</td>
        <td>{{ object.created_at }}</td>
        <td>{{ object.updated_at }}</td>
    </tr>
</table>
{% include 'part.html' %}       <!--Loading here-->
{% endblock %}

With just this, you can load and display the part called part.html!

Next time preview

Create .env

Recommended Posts

Create a shogi game record management app using Django 6 ~ Template division ~
Create a shogi game record management app using Django 2-Database settings-
Create a shogi game record management app using Django 3 ~ Django default management site settings ~
Creating a Shogi Game Record Management App Using Django 1-Environment Construction-
Create a shogi game record management application using Django 5 ~ Pass DB data to Template ~
Create and deploy a Django (PTVS) app using Azure Table storage
Create a Mac app using py2app and Python3! !!
Until you create a new app in Django
Try to create a Todo management site using WebSocket with Django (Swamp Dragon)
Web App Development Practice: Create a Shift Creation Page with Django! (Write a base template)
Create a Django schedule
Create a Todo app with Django REST Framework + Angular
[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 1 ~
Create a Todo app with the Django REST framework
Create a Todo app with Django ③ Create a task list page
[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 2 ~
To myself as a Django beginner (1) --Create a project app--
To myself as a Django beginner (4) --Create a memo app--
Create a Todo app with Django ⑤ Create a task editing function
[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 3 ~
[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 4 ~
[CRUD] [Django] Create a CRUD site using the Python framework Django ~ 5 ~
Create a game to control puzzle & dragons drops using pygame
[Learning record] Create a mysterious dungeon game with Pyhton's Tkinter
Create a Todo app with Django ① Build an environment with Docker
Create a simple CRUD app using Django's generic class view
Create a homepage with django
Create a Django login screen
Web App Development Practice: Create a Shift Creation Page with Django! (Shift creation page)
Create a python GUI using tkinter
Steps to create a Django project
Create a nested dictionary using defaultdict
Implement a Django app on Hy
Make a filter with a django template
Create a CRUD API using FastAPI
Create a C wrapper using Boost.Python
Create a file uploader with Django
Create a LINE Bot in Django
[Django 2.2] Add a New badge to new posts with a date using a template filter
Web App Development Practice: Create a Shift Creation Page with Django! (Introduction)
Create a record with attachments in KINTONE using the Python requests module
Create a Todo app with Django ④ Implement folder and task creation functions
[Python] [Word] [python-docx] Try to create a template of a word sentence in Python using python-docx