Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Ecrire un modèle de base)

Avant de créer chaque page, je vais faire la partie de base du modèle.

Django a une balise de modèle pratique appelée ** extend **, qui peut vous faire gagner beaucoup de temps à écrire du HTML, alors profitons-en.

J'ai créé un répertoire appelé bases (quel que soit son nom) sous templates et j'ai écrit base.html, qui est le cadre de toutes les 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>

Je veux utiliser Bootstrap et jQuery sur n'importe quelle page, je les ai donc spécifiés ici à l'avance. ** STATIC_URL ** est défini dans ** settings.py **, dans mon cas

STATIC_URL = '/static'

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

est. ** STATICFILES_DIRS ** vous permet de spécifier le répertoire où les fichiers seront placés, alors créez un répertoire approprié et appliquez-le.

Tout ce que vous avez à faire est de saisir le contenu de chaque page. Le déroulement revient à déclarer le modèle parent avec ** extend ** et à placer le contenu à l'endroit spécifié avec ** block **. Par exemple, écrivez comme suit.

{% 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 %}

J'ai hérité correctement de Bootstrap et de jQuery de mes parents, donc je n'ai pas à écrire la même chose à chaque fois.

Eh bien, en fait, je suis venu ici ** précédemment J'ai remarqué qu'il y avait un problème avec le modèle de base de données que j'ai créé, et je l'ai résolu de manière significative **, donc la prochaine fois Je le posterai à nouveau (je laisserai le précédent en mémoire).

Disons que vous créez la vue après cela.

Recommended Posts

Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Ecrire un modèle de base)
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Page de création de décalage)
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Introduction)
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Traitement d'authentification)
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Expérience sur la page d'administration)
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Conception du modèle de base de données)
Créer une application Todo avec Django ③ Créer une page de liste de tâches
Créez une application Web simple avec Flask
Créer une application Todo avec Django ④ Implémenter la fonction de création de dossier et de tâche
Créer une application Todo avec Django REST Framework + Angular
Essayez de créer une application Todo avec le framework Django REST
Créer une application Todo avec Django ⑤ Créer une fonction d'édition de tâches
Créer une page d'accueil avec django
Créer une application Web avec Django
Créez une API Web capable de fournir des images avec Django
Créer une application Todo avec Django ① Créer un environnement avec Docker
Créez une application de gestion de partition shogi à l'aide de Django 6 ~ Split Template ~
Créer une application Web avec Django
Créer un filtre avec un modèle django
Créer un téléchargeur de fichiers avec Django
Créez une application Web qui peut être facilement visualisée avec Plotly Dash
"Classification des déchets par image!" Journal de création d'application jour3 ~ Application Web avec Django ~
Jouez comme une application Web avec ipywidgets
Créer une application graphique avec Tkinter de Python
Démonisez une application Web Python avec Supervisor
Développement d'une application WEB avec Django [modèle supplémentaire]
Création de la première application avec Django startproject
Créer un service Web avec Docker + Flask
Ecrire brièvement if-else du template Django
J'ai fait une application WEB avec Django
Essayez de créer une application Web avec Vue.js et Django (édition Mac) - (1) Construction d'environnement, création d'application
Tutoriel Django (Créer une application de blog) ① --Préparation, Création de la première page
Comment développer une application de panier avec Django
Développement d'une application WEB avec Django [Création de l'écran d'administration]
Créer un fichier PDF avec une taille de page aléatoire
Créer une page qui se charge indéfiniment avec python
[Python] Créer un environnement de développement Django avec Docker
Créez un tableau de bord pour les appareils réseau avec Django!
Créer un environnement de développement Django à l'aide de Doker Toolbox
Créer une nouvelle page en confluence avec Python
Procédure de création d'application multi-plateforme avec kivy
Créez une application Hello World avec un seul fichier avec django
Jusqu'à ce que vous créiez une nouvelle application dans Django
Extraire des données d'une page Web avec Python
Retour sur la création d'un service Web avec Django 1
Qu'est-ce qu'un chien? Volume de démarrage de la création de l'application Django --startapp
Créez une application graphique native avec Py2app et Tkinter
[Pratique] Créez une application Watson avec Python! # 2 [Fonction de traduction]
[Pratique] Créez une application Watson avec Python! # 1 [Discrimination linguistique]
Créez un environnement de développement python avec vagrant + ansible + fabric
Retour sur la création d'un service Web avec Django 2
Qu'est-ce qu'un chien? Volume de démarrage de la création de l'application Django - startproject
Écrire du code dans UnitTest une application Web Python
Déployer l'application Django créée avec PTVS sur Azure
À moi-même en tant que débutant Django (1) -Création d'un projet / application-
À moi-même en tant que débutant Django (4) --Créer une application mémo-
Créez un environnement de développement avec Poetry Django Docker Pycharm
Déployez des applications Web en temps réel avec Swampdragon x Apache
Créer un environnement django avec docker-compose (MariaDB + Nginx + uWSGI)
Déployer une application Web créée avec Streamlit sur Heroku