Web App Development Practice: Create a Shift Creation Page with Django! (Write a base template)

Before making each page, I will make the basic part of the template.

Django has a handy template tag called ** extends **, which can save you a lot of time writing HTML, so let's take advantage of it.

I created a directory called bases (whatever the name is) under templates and wrote base.html which is the framework of all pages.

templates/bases/base.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>{% block title %}Shift-Maker{% endblock %}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css">
		<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-theme.min.css">
		<script src="{{ STATIC_URL }}js/jquery-1.11.0.js"></script>
		<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
	</head>

	<body><div class="container">
	{% block main %}
	{% endblock %}
	</div></body>
</html>

I want to use Bootstrap and jQuery on any page, so I have specified them here in advance. ** STATIC_URL ** is set in ** settings.py **, in my case

STATIC_URL = '/static'

STATICFILES_DIRS = (
        os.path.join(BASE_DIR,'static'),
)

is. You can specify the directory to put the file in ** STATICFILES_DIRS **, so create a directory and apply it.

All you have to do is enter the content for each page. The flow is like declaring the parent template with ** extends ** and putting the contents in the place specified with ** block **. For example, write as follows.

{% extends 'bases/base.html' %}

{% block title %}Hello,world!{% endblock %}

{% block main %}
<h1>This is test!!</h1>
<button class="btn btn-lg">Click me</button>
<script type="text/javascript">
var count = 0;
$('.btn').click(function(){
        alert(count + "click!");
});
</script>
{% endblock main %}

I've inherited Bootstrap and jQuery from my parents, so I don't have to write the same thing every time.

Well, actually I came here ** previously I noticed that there was a problem with the database model I made, and I fixed it significantly **, so next time I will post it again (I will leave the previous one as a memorial).

Let's say you create the view after that.

Recommended Posts

Web App Development Practice: Create a Shift Creation Page with Django! (Write a base template)
Web App Development Practice: Create a Shift Creation Page with Django! (Shift creation page)
Web App Development Practice: Create a Shift Creation Page with Django! (Introduction)
Web App Development Practice: Create a Shift Creation Page with Django! (Authentication system processing)
Web App Development Practice: Create a Shift Creation Page with Django! (Experiment on admin page)
Web App Development Practice: Create a Shift Creation Page with Django! (Design of database model)
Create a Todo app with Django ③ Create a task list page
Create a simple web app with flask
Create a Todo app with Django ④ Implement folder and task creation functions
Create a Todo app with Django REST Framework + Angular
Create a Todo app with the Django REST framework
Create a Todo app with Django ⑤ Create a task editing function
Create a homepage with django
Web application creation with Django
Create a web API that can deliver images with Django
Create a Todo app with Django ① Build an environment with Docker
Create a shogi game record management app using Django 6 ~ Template division ~
Build a web application with Django
Make a filter with a django template
Create a file uploader with Django
Create a web app that can be easily visualized with Plotly Dash
"Trash classification by image!" App creation diary day3 ~ Web application with Django ~
Play like a web app with ipywidgets
Create a GUI app with Python's Tkinter
Daemonize a Python web app with Supervisor
WEB application development using Django [Template addition]
Create your first app with Django startproject
Create a web service with Docker + Flask
Write a short if-else for Django Template
I made a WEB application with Django
Try creating a web application with Vue.js and Django (Mac)-(1) Environment construction, application creation
Django Tutorial (Blog App Creation) ① --Preparation, Top Page Creation
How to develop a cart app with Django
WEB application development using Django [Admin screen creation]
Create a PDF file with a random page size
Create a page that loads infinitely with python
[Python] Build a Django development environment with Docker
Create a dashboard for Network devices with Django!
Build a Django development environment with Doker Toolbox
Create a new page in confluence with Python
How to create a multi-platform app with kivy
Create a one-file hello world application with django
Until you create a new app in Django
Extract data from a web page with Python
I tried to create a table only with Django
Looking back on creating a web service with Django 1
What is a dog? Django App Creation Start Volume--startapp
Create a native GUI app with Py2app and Tkinter
[Practice] Make a Watson app with Python! # 2 [Translation function]
[Practice] Make a Watson app with Python! # 1 [Language discrimination]
Create a python development environment with vagrant + ansible + fabric
Looking back on creating a web service with Django 2
What is a dog? Django App Creation Start Volume--startproject
Write code to Unit Test a Python web app
Deploy a Django app made with PTVS on Azure
To myself as a Django beginner (1) --Create a project app--
To myself as a Django beginner (4) --Create a memo app--
Build a development environment with Poetry Django Docker Pycharm
Deploy a real-time web app with swampdragon x apache
Create a django environment with docker-compose (MariaDB + Nginx + uWSGI)
Deploy a web app created with Streamlit to Heroku