Articles permettant le développement de systèmes avec Django (Python) _Introduction

introduction

La programmation est devenue plus familière qu'avant, y compris Python. Lorsque vous remettez en question le développement de services, il existe divers obstacles.

** "Je ne peux pas obtenir mon diplôme du livre d'introduction ou du copier-coller du didacticiel" ** ** "J'ai essayé de le faire avec copier-coller, mais je ne peux pas l'arranger après cela" ** ** "Je ne sais pas si le code que j'ai écrit est correct" **

En les analysant, il peut être décomposé en ** 5 facteurs ** comme le montre la figure ci-dessous.

Dans cet article, nous allons nous concentrer sur la ** «phase de pratique» ** et viser à ** «développer un système qui fonctionne réellement» **. *** "Phase de base" ** est également organisé dans un autre article, je vais donc vous présenter le lien.

(3) Bases de la programmation: Feuille de route d'apprentissage pour le développement et la publication de services à partir de zéro avec Python (4) Pensez à la conception du système: Définition des exigences - Articles qui peuvent devenir des ressources humaines capables de concevoir des systèmes

Contenu de cet article

Je l'ai écrit pour que vous puissiez apprendre ** "Une série d'étapes pour le développement de système en utilisant Django (Python)" ** partout. De la compréhension globale du processus de développement à la programmation proprement dite, vous pouvez apprendre de manière exhaustive.

Les chapitres sont les suivants.

• ** Qu'est-ce qu'un système en premier lieu? ** **
• ** Quel est le modèle MVT de Django? ** **
• ** Structure de fichier Django **
• ** Procédure de développement Django_ Réglage initial **
• ** Procédure de développement Django_Ajout de fonctions **

Après avoir appris une série d'étapes, essayez vous-même différents modèles Lorsque vous vous y habituerez, veuillez essayer ** le développement de service original **.

• Les informations de programmation sont également publiées sur SNS. Si vous vous sentez bien, veuillez suivre Twitter "Saku731".

Commençons.

Qu'est-ce qu'un «système» en premier lieu?

Tout d'abord, il est très important de comprendre la ** signification du mot «système» **. Il est introduit dans le dictionnaire comme suit.

• ** Système: Une cohésion globale qui organise beaucoup de choses et une série de tâches **

Conversion de ces termes en termes informatiques,

• ** Système: Une collection de "programmes" qui commandent beaucoup de "données" et "une série de processus" **

En d'autres termes, il s'agit d'une image comme "un modèle en plastique qui est complété par l'assemblage de pièces individuelles de manière ordonnée". Pour cela, trois types de compétences sont nécessaires.

** ① Capacité à penser aux pièces nécessaires au développement ** ** ② Compétences pour fabriquer des pièces individuelles ** ** ③ Compétences à construire dans l'ordre **

En dehors de cela, il existe des angles morts ** "(1) Compétences pour réfléchir aux éléments nécessaires au développement" ** J'ai écrit un article dans "Définition des exigences - Articles qui peuvent être des ressources humaines qui peuvent concevoir des systèmes".

Et ** "② Comment créer des pièces individuelles" ** a déjà été appris par ceux qui ont étudié Python. Il suffit d'écrire un programme qui utilise l'instruction For / IF et la fonction / classe.

Après cela, vous pouvez développer le système si vous acquérez ** "③ Compétences pour l'assemblage ordonné" **. Dans cet article, nous allons procéder pour que vous puissiez acquérir les deux compétences nécessaires à cet effet.

** (1) Comprendre la "vue d'ensemble du développement du système" ** ** (2) Comprendre les «rôles des différentes parties» qui composent le système **

Premièrement, pour effacer (1) Comprenons ** la méthode de développement (modèle MTV) utilisée par Django **.

Quel est le "modèle MTV" de Django?

Django utilise une technique appelée le ** modèle MTV **.

• L'essence est exactement la même que le ** modèle MVC ** utilisé dans d'autres langages tels que Ruby.

Signification de «MTV»

MTV a été créé en prenant l'acronyme de ** les trois éléments majeurs qui composent Django **.

• M：Model
• T：Template
• V：View

Vous n'avez pas à le comprendre exactement, alors comprenons le rôle général.

Tout d'abord, comme prémisse, le système est composé de trois éléments: ** «écran, traitement, données» **. Exprimé en phrases, cela ressemble à ceci.

• ** Après avoir ajouté du "traitement" à "données", affichez-le sur "écran" **

Prenons, par exemple, un système qui analyse les données de vente. Comme le montre la figure, ** «écrans / processus / données» sont divisés en rôles ** à partir des opérations de l'utilisateur.

En appliquant cela au modèle MTV, la division des rôles peut être organisée comme suit.

• ** Vue (traitement) **: ** Rôle du contrôle central **
• ** Modèle (données) **: ** Rôle de contrôle de la base de données **
• ** Templage (écran) **: ** Rôle de contrôle de l'écran (page web) **

En d'autres termes, ** «écran», «traitement» et «données» sont liés de manière ordonnée **. Le système fonctionne comme un ** agrégat **.

--Définition de "système" (republication) --- ** Système: une collection de "programmes" qui organisent un grand nombre de "données" et "une série de processus" **

Avec ce qui précède, vous devriez être en mesure de voir ** "(1) Aperçu du développement du système" **.

• Si vous avez besoin d'autres explications, je vous serais reconnaissant de bien vouloir faire une demande dans la section commentaires.

Après cela, tout en programmant, tout en fabriquant le produit fini Comprenons ** "(2) Rôles des différentes parties qui composent le système" **.

Structure des fichiers Django

Tout d'abord, afin de connaître le but, organisez la ** structure du fichier (= structure des parties) ** du système créé par Django. Comprenons ** le rôle que joue chaque fichier ** en le liant au modèle MTV.

Ce qui est particulièrement déroutant, c'est "Quelle est la différence entre les fichiers ci-dessous **? **".

• "ʻApp_config / views.py et ʻapp_folder / views.py"
• "ʻApp_config / urls.py et ʻapp_folder / urls.py"

La différence peut être organisée comme suit, mais au début, je ne comprends pas le mérite de la division.

--ʻApp_config: ** Gérer l'ensemble du système ** --ʻApp_folder: ** Gérer les fonctions individuelles ** dans le système

La première compétence dont vous avez besoin est ʻapp_folder, qui est ** la compétence pour développer des fonctions spécifiques **, donc Continuons en supposant que ʻapp_config se fait en copiant et en ** créant d'abord un système fonctionnel **.

Regardons maintenant la structure des fichiers.

Liste des fichiers utilisés par Django

Si vous procédez au développement avec Django, vous vous retrouverez avec ce type de structure de fichiers.

À ce stade, ce n'est pas grave si vous ne comprenez pas ce qu'il dit Veuillez vous y référer lorsque vous vous perdez au milieu de la programmation ** "Que faites-vous maintenant?" **.

• ** manage.py: Une collection de fonctions nécessaires à la gestion du développement appelées" commandes de gestion "**
• ** ʻapp_config / : Dossier pour stocker les fichiers liés aux paramètres globaux ** --views.py: ** [View] ** Ecrire un programme qui contrôle l'ensemble du système --ʻUrls.py: définir l'URL à utiliser --settings.py: gérer diverses valeurs de paramètres telles que les paramètres de base de données
• ** ʻapp_folder / : dossier de stockage des programmes à implémenter sur le système ** --ʻAdmin.py: fichier de configuration de l'écran de gestion --views.py: ** [View] ** Décrire les fonctions individuelles à implémenter dans le système --ʻUrls.py: fichier pour définir l'URL utilisée dans la page Web --models.py: ** [Model] ** Décrivez la définition de la base de données --forms.py: fichier qui définit le formulaire de saisie utilisé sur la page Web --migrations / `: dossier dans lequel reste l'historique des modifications de la définition de la base de données
• ** templates /: [Template] Dossier pour stocker les fichiers HTML ** --base.html: HTML du ** "cadre extérieur (barre latérale, etc.)" ** à afficher en commun sur toutes les pages Web
• app_folder/ --top_page.html: ** "Inside" ** HTML à afficher sur chaque page Web
• ** static /: dossier de stockage d'images, de fichiers css, de fichiers javascript ** --css /: dossier de stockage des fichiers CSS --js /: dossier de stockage des fichiers JS --ʻImages / `: dossier pour stocker les fichiers image

Encore une fois, ** ces fichiers (= parties) ont des rôles individuels **, En les assemblant correctement, l'ensemble fonctionne comme un ** "système" **.

--Définition de "système" (republication) --- ** Système: une collection de "programmes" qui organisent un grand nombre de "données" et "une série de processus" **

Maintenant, procédons réellement au développement. Parmi les compétences essentielles de développement mentionnées au début, nous avons affaire aux ② et ③.

• "(1) Penser aux pièces nécessaires" est omis car il a été traité dans l'article ici.

** ② Compétences pour fabriquer des pièces individuelles ** ** ③ Compétences à construire dans l'ordre **

Django development procedure_initial setting

De là, j'écrirai le programme en Python, donc Je vous recommande de préparer un éditeur.

Construire un environnement de développement

Tout d'abord, préparez l'environnement de développement. Il existe quatre options pour l'environnement de développement, mais cette fois, construisons le meilleur "** environnement virtuel **" pour commencer.

• En passant, après s'être habitué à la construction d'un environnement virtuel, il est bon d'étudier la ** virtualisation de type conteneur **.

• Environnement local du PC: ne rien faire pip install ●●
• Environnement virtuel: utilisez venv ** ⇒ Utilisez ceci cette fois **
• Machine virtuelle: utilisez VirtualBox
• Virtualisation de type conteneur: utilisez Docker

#Créer un environnement virtuel / déplacer des dossiers
$ python -m venv venv
$ cd venv

#[Pour Windows et invite de commandes] Démarrez l'environnement virtuel
$ Scripts/activate.bat

#[Pour Windows et GitBash] Démarrage d'un environnement virtuel
$ source Scripts/activate
* Si une erreur se produit, "source bin"/activate」

#[Pour Mac] Démarrer l'environnement virtuel
$ source Scripts/activate
* Si une erreur se produit, "source bin"/activate」

#Installez la bibliothèque à utiliser
$ pip install Django==2.1.5
$ pip install django-bootstrap4

#Lorsque vous utilisez "MySQL" pour DB, exécutez également ce qui suit
$ pip install mysqlclient

#Créer / déplacer un dossier de développement
$ cd ..
$ mkdir mysite
$ cd mysite

Démarrez le projet

Exécutez start project pour commencer à développer Django. Un ensemble de fichiers de paramètres requis pour le développement est automatiquement créé.

Vous pouvez utiliser n'importe quel nom pour ʻapp_config`, donc veuillez le changer lorsque vous vous y habituerez.

• ** Utilisé pour le nom du dossier qui stocke les fichiers liés aux paramètres globaux **.

$ django-admin startproject app_config .

Une fois le processus terminé, la structure des dossiers sera la suivante.

• Ignorez les fichiers non écrits ci-dessous.

• ** ʻapp_config / : Dossier pour stocker les fichiers autour des paramètres globaux ** --settings.py: un fichier qui gère diverses valeurs de paramètres telles que les paramètres de base de données --ʻUrls.py: fichier pour définir l'URL à utiliser -- manage.py: fichier qui décrit les fonctions requises pour la gestion du système

fichier de configuration

Maintenant, configurons l'ensemble de Django. Il devrait corriger LANGUAGE_CODE et TIME_ZONE au bas de ʻapp_config / setting.py`.

• Cet élément spécifie la langue et le fuseau horaire à utiliser.

app_config/settings.py

#Réglage de la langue / du fuseau horaire, etc.
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'

De plus, Django prend en charge ** SQLite ** par défaut, vous pouvez donc utiliser la base de données avec les paramètres par défaut. Si vous utilisez ** MySQL **, modifiez DATABASES dans ʻapp_config / settings.py` comme suit.

app_config/settings.py

#Modifiez la base de données comme suit
DATABASES = {
    'default': {
        'ENGINE':'django.db.backends.mysql',
        'NAME':'●●(Nom de la base de données)',
        'USER':'●● (nom d'utilisateur de la base de données)',
        'PASSWORD':'●● (passe de connexion à la base de données)',
        'HOST':'localhost',
        'PORT':'',
    }
}

Préparation de la base de données (migration)

Exécutez la commande suivante à ce moment. Lorsque le processus est terminé avec succès, la base de données minimale requise pour le développement Django est prête.

$ python manage.py migrate

Essayez de démarrer le système

Démarrons le système pour nous assurer que les paramètres jusqu'à ce point sont réussis.

$ python manage.py runserver

Essayez ensuite d'accéder à http: // localhost: 8000 à partir de votre navigateur. Si vous voyez l'écran ci-dessous, vous avez réussi.

Si vous pouvez le confirmer, arrêtez le système avec Ctrl + c (Commande + c sur Mac).

Création de fichiers liés à l'application

Ensuite, nous développerons des fonctions d'application Web spécifiques. Exécutez la commande suivante.

Vous pouvez utiliser n'importe quel nom pour la partie ʻapp_folder`.

• Il vaut mieux ne pas changer tant que vous ne vous êtes pas habitué au développement.

$ python manage.py startapp app_folder

Une fois exécuté, un dossier nommé ʻapp_folder` sera créé. Différents fichiers sont créés directement en dessous. * Ignorez les fichiers non écrits ci-dessous.

• ** ʻapp_folder / : dossier de stockage des programmes à implémenter sur le système ** --ʻAdmin.py: fichier qui définit l'écran de gestion du système --models.py: [Model] Décrivez la définition de la base de données --views.py: [View] Ecrire un programme à exécuter derrière le système

Enregistrez l'application dans le fichier de paramètres

Soyez prudent ici, créez simplement le dossier ʻapp_folder / Il n'est pas reconnu par ʻapp_config /, qui gère tout le système.

Par conséquent, vous devez vous enregistrer dans ʻINSTALLED_APPS de ʻapp_config / settings.py. ʻINSTALLED_APPS` est un élément pour enregistrer les applications à utiliser dans le système.

• Vous n'êtes pas obligé de le comprendre au début, alors copions-le simplement.

Le nom à enregistrer se fait en combinant trois éléments.

1. Le nom de l'application que vous avez spécifié précédemment ʻapp_folder`
2. apps
3. Nom de classe dans ʻapp_folder / apps.py ʻAppFolderConfig

Combinez ces trois et ajoutez "ʻapp_folder.apps.AppFolderConfig`". Cela reconnaîtra l'application que vous êtes sur le point de développer dans Django.

app_config/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_folder.apps.AppFolderConfig', #Ajoutez cette ligne
]

Préparez un dossier pour HTML / CSS

Ensuite, préparons un dossier lié à HTML / CSS Créez des dossiers et des fichiers dans la même hiérarchie que manage.py comme suit.

• ** templates /: [Template] Dossier pour stocker les fichiers HTML **
  • base.html
  • app_folder/
    • top_page.html
• ** static /: dossier de stockage d'images, de fichiers css, de fichiers javascript **
  • css/
  • js/
  • images/

Une fois la création terminée, c'est OK si la structure de fichiers suivante est établie.

Paramètres d'accès aux fichiers statiques

ʻAjoutez des variables liées aux fichiers statiques (comme les fichiers image) au bas de app_config / settings.py`. Une fois ce réglage effectué, ** l'insertion d'images dans des fichiers HTML ** et ** le travail lié aux CSS et JavaScript ** sera plus facile.

app_config/settings.py

#Ajout des paramètres d'appel de fichier statique en bas
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 
PROJECT_NAME = os.path.basename(BASE_DIR)
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] 
STATIC_ROOT = '/var/www/{}/static'.format(PROJECT_NAME)

De même, changez la deuxième ligne «DIRS» de «TEMPLATES» près du milieu de «app_config / setting.py». Cela rendra les fichiers HTML stockés dans le dossier ** templates / ** reconnus sur votre système.

app_config/settings.py

#Ajouter une ligne à TEMPLATES (paramètre d'appel de modèle)
TEMPLATES = [ 
    { 
        'BACKEND': 'django.template.backends.django.DjangoTemplates', 
        'DIRS': [os.path.join(BASE_DIR, 'templates')], #Ajouter cette ligne
        'APP_DIRS': True, 
        'OPTIONS': { 'context_processors': [ 
            'django.template.context_processors.debug', 
            'django.template.context_processors.request', 
            'django.contrib.auth.context_processors.auth', 
            'django.contrib.messages.context_processors.messages', 
            ], 
        }, 
    }, 
]

Paramètres d'accès aux fichiers multimédias

• Ce n'est pas couvert dans cet article, mais cela sera utile à l'avenir, alors faisons-le *

Ajoutez également ce code au bas de settings.py. Les cas où ce paramètre est requis sont les suivants.

• Possibilité de télécharger ** des fichiers tels que des images **
• ** Une fonction pour afficher le fichier téléchargé en tant que contenu sur l'écran Web **
• Possibilité de télécharger ** fichiers ** tels que CSV

• En pratique, nous utilisons souvent le stockage sur le cloud appelé «S3» d'AWS, mais maintenant, il est normal de ne pas en être conscient.

app_config/settings.py

#Paramètres liés aux fichiers multimédias
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Après avoir terminé les réglages, créez un dossier media / dans la même hiérarchie que manage.py. Le flux consiste à télécharger des fichiers multimédias ici.

• Lors de la création d'un téléchargeur de fichiers, il est recommandé de vérifier [Reference].

Créer un modèle de base

Ensuite, créons un fichier HTML à afficher sur l'écran système. En un mot, connaissez-vous tous ** Bootstrap **?

** "J'ai fait de mon mieux pour étudier le CSS, mais je ne peux pas créer un bel écran." **

** Bootstrap ** développé par Twitter est efficace pour résoudre de tels problèmes. ** Vous pouvez créer un site élégant sans aucune connaissance en conception ** C'est excellent.

• Pour plus d'informations, veuillez consulter [Article de référence sur Bootstrap].

La configuration pour utiliser BootStrap est très simple. Ajoutez simplement bootstrap4 à ʻINSTALLED_APPS dans ʻapp_config / settings.py et vous êtes prêt à partir.

app_config/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_folder.apps.AppNameConfig',
    'bootstrap4', #Ajoutez cette ligne
]

Ensuite, créons un fichier HTML (** modèle de base **). Vous pouvez réduire la quantité de code à écrire en ** codant le modèle en deux types **.

-① ** "Outside" ** partie commune à toutes les pages: templates / base.html -② Affichage sur chaque page ** Contenu "Inside" **: templates / app_folder / top_page.html etc.

La figure est la suivante.

Tout d'abord, préparez le modèle de base pour ** "①Outside" **. J'ai fait un design qui peut résister à une certaine utilisation, alors veuillez le copier et l'utiliser tel quel.

De plus, dans la partie de ** "↓↓ content body ↓↓" ** en bas, Le mécanisme est tel que le fichier HTML qui est le contenu de ** "② Inside" ** est reflété.

template/base.html

<!DOCTYPE html>

{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='slim' %}
{% load static %}

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type='text/css' href="{% static 'css/style.css'%}">
    <link rel="stylesheet" href="https://cccabinet.jpn.org/bootstrap4/css/style.css">
    <title>Exemple de développement Django</title>

    {% block extra_css %}{% endblock %}

</head>

  <body>
    <!--↓ ↓ Barre de navigation supérieure ↓ ↓-->
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <nav class="navbar navbar-expand-lg fixed-top navbar-dark bs-navbar" style='background-color:cadetblue;' id="bs-navbar">
            <a class="navbar-brand mr-md-2" href="/app_folder/top_page">
Exemple d'écran de développement
            </a>
              <!--↓ ↓ Dummy pour ajuster la mise en page ↓ ↓-->
              <ul class="navbar-nav mr-auto">
                <li class="nav-item"><a class="nav-link" href="#">   </a></li>
                <li class="nav-item"><a class="nav-link" href="#">   </a></li>
              </ul>
              <!--↑↑ Dummy jusqu'ici ↑↑-->                            

              <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="/#" >Échantillon 1</a></li>
                <li class="nav-item"><a class="nav-link" href="/#" >Échantillon 2</a></li>
                <li class="nav-item"><a class="nav-link" href="/#" >Échantillon 3</a></li>
                <li class="nav-item"><a class="nav-link" href="/accounts/login" >S'identifier</a></li>
                <li class="nav-item"><a class="nav-link" href="/accounts/logout" >Se déconnecter</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>


    <!--"Barre latérale" et "partie du corps du contenu"-->
    <div id="content" class="container-fluid">
      <div class="row flex-xl-nowrap">

        <!--↓ ↓ Barre latérale ↓ ↓-->
        <div id="sidemenu" class="col-2 d-none d-md-block bg-light sidebar align-self-start">
          <div class="sidebar-sticky">
            <ul class="nav flex-column">

              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class="navbar-brand" href="/#">
                    <span data-feather=""></span>Haut de page
                  </a>
                </nav>
              </li>
              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class='navbar-brand' href='/#'>
                    <span data-feather=""></span>Barre latérale 1
                  </a>
                </nav>
              </li>
              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class='navbar-brand' href='/#'>
                    <span data-feather=""></span>Barre latérale 2
                  </a>
                </nav>
              </li>         
              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class='navbar-brand' href='/#'>
                    <span data-feather=""></span>Barre latérale 3
                  </a>
                </nav>
              </li>         
              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class='navbar-brand' href='/#'>
                    <span data-feather=""></span>Barre latérale 4
                  </a>
                </nav>
              </li>         
              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class='navbar-brand' href='/#'>
                    <span data-feather=""></span>Barre latérale 5
                  </a>
                </nav>
              </li>         
            </ul>
          </div>
        </div id="sidemenu">
        <!--↑↑ Barre latérale jusqu'à ici ↑↑-->

        <!--↓ ↓ Corps du contenu ↓ ↓-->
        <div class="col-10">
          {% block contents %}
          {% endblock %}
        </div>
        <!--↑↑ Contenu du corps jusqu'à ici ↑↑-->
      </div>
    </div>
    </div>
  </body>
</html>

<!--Icône utilisée pour la barre latérale-->
<!--Liste des icônes disponibles: https://voyager-jp.com/blog/javascript/feather/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
<script>feather.replace()</script>

Création de chaque modèle

Après avoir créé le modèle de base, créez un fichier HTML qui sera ** contenu "à l'intérieur" **. Nous ajouterons du contenu plus tard, alors copiez d'abord ce qui suit et créez un fichier.

templates/app_folder/top_page.html

{% extends 'base.html' %}
{% block contents %}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center mt-5 border-bottom">
    <h1 class="h2">haut de page</h1>
</div>

<div>
    <h4>Décrivez le contenu ici</h4>
</div>

{% endblock %}

Il n'y a qu'un seul point, et il y a trois {% ~%} décrits au début et à la fin. C'est un mécanisme que vous pouvez insérer ** "" à l'intérieur de la "partie de contenu" ** dans le modèle de base.

• Par conséquent, veillez à ne pas l'effacer même si vous faites une erreur.

• {% extends 'base.html' %}
• {% block contents %}
• {% endblock %}

Ceci termine la préparation du modèle.

Puisque rien ne peut être affiché à l'écran simplement en créant un modèle (fichier HTML) Ensuite, créons une vue qui contrôle le système interne.

Créer une vue qui contrôle l'intérieur du système

Comme je l'ai mentionné au début, il existe deux types de vue.

--ʻApp_config / views.py: ** Contrôlez l'ensemble ** en gros ** --ʻApp_folder / views.py: ** Contrôle des fonctions individuelles **

Commencez par créer ʻapp_config / views.pyà partir du plus simple. Créezviews.py dans le dossier ʻapp_config et décrivez le contenu comme suit.

app_config/views.py

from django.shortcuts import render, redirect, reverse  
from django.views import View  
  
class index(View):
    def get(self, request, *args, **kwargs):
        return redirect(reverse('app_folder:top_page'))
index = index.as_view()

Il s'agit d'un paramètre tel que ** "S'il y a accès au système, passez à la page d'accueil" **. Ce n'est pas grave si vous écrivez la même chose à chaque fois.

Ensuite, ouvrez ʻapp_folder / views.py pour contrôler les fonctions spécifiques du système et copiez ce qui suit Il s'agit d'écrire une fonction qui "affiche top_page.html` lors de l'accès à la première page".

app_folder/views.py

from django.shortcuts import render  
from django.views import View  
  
class SampleView(View):  
	def get(self, request, *args, **kwargs):  
		return render(request, 'app_folder/top_page.html')
top_page = SampleView.as_view()

Maintenant que nous avons créé la vue minimale, passons à autre chose.

• Des fonctions spécifiques seront ajoutées plus tard.

Créer un répartiteur d'URL

Ici, définissez l'URL requise pour accéder au système à partir de l'écran Web. Par exemple, http: // localhost: 8000 / my_app / top_page, vous pouvez choisir librement ce qui suit https: //.

• Il existe une restriction selon laquelle les caractères spéciaux tels que "!" Et "?" Ne sont pas utilisés, mais il n'y a pas de problème s'ils sont ** minuscules ** ou ** underbar **.

Deux types de fichiers doivent être modifiés.

--ʻApp_config / urls.py: conception d'URL à l'échelle du système --ʻApp_folder / urls.py: conception d'URL dans des applications individuelles

La relation entre les deux affecte l'ordre dans lequel les URL sont composées. ** http: // localhost: 8000 / <paramètre d'URL de app_config / urls.py> / <paramètre d'URL de dossier_app / urls.py> ** Les URL sont configurées dans cet ordre.

Le premier est ʻapp_config / urls.py`.

app_config/urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from . import views

#Conception globale de l'URL
urlpatterns = [
    #L'application "app" sera créée cette fois_URL pour accéder au "dossier"
    path('app_folder/', include('app_folder.urls')),
    #Si vous ne spécifiez aucune URL (app_config/views.Avec py, "app" automatiquement_(Déjà configuré pour accéder au "dossier")
    path('', views.index, name='index'),
    #URL pour accéder au site de gestion
    path('admin/', admin.site.urls),
]

#Paramètre d'URL pour la publication de fichiers multimédias
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Ensuite, créez ʻurls.pydans le dossier ʻapp_folder /et écrivez comme suit.

Puisque nous n'avons encore préparé que la première page (top_page /), ʻurlpatterns` est une ligne, Le nombre d'URL à enregistrer augmentera à mesure que diverses fonctions seront ajoutées.

app_folder/urls.py

from django.urls import path
from . import views

app_name = 'app_folder'
urlpatterns = [
    path('top_page/', views.top_page, name='top_page')
]

Pour comprendre, ** http: // localhost: 8000 / <paramètre d'URL de app_config / urls.py> / <paramètre d'URL de dossier_app / urls.py> **

Selon les règles de configuration d'URL ici, l'URL pour accéder à la page d'accueil est http://localhost:8000/app_folder/top_page Etc. C'est ainsi que fonctionne le répartiteur d'URL.

Essayez de démarrer le système

Maintenant que vous avez un ensemble complet de paramètres, démarrons le système.

$ python manage.py runserver

S'il n'y a pas de problème, le terminal s'affiche comme suit.

Ensuite, démarrons le navigateur et accédons à http: // localhost: 8000 / app_folder / top_page.

Si l'écran suivant s'affiche, il est réussi, et dans la partie où les exemples de caractères sont temporairement saisis Vous pouvez créer divers services en ** ajoutant du contenu par vous-même **.

Maintenant que la configuration initiale est terminée, ajoutons juste une fonctionnalité simple.

Procédure de développement Django_Développer des fonctionnalités supplémentaires

Recevoir la condition de recherche ** du ** formulaire de saisie affiché sur l'écran Web, ** Rappelez les données stockées dans la base de données ** Développons des fonctionnalités supplémentaires.

Le flux de traitement est le suivant.

--Affichez le formulaire de saisie à l'écran --Recevoir les critères de recherche saisis par l'utilisateur

• Récupérer des informations de la base de données en fonction des conditions de recherche --Affichez les informations récupérées à l'écran

Construction de la base de données

Tout d'abord, définissons une base de données pour stocker les données.

Afin de comprendre models.py, ** la connaissance de la base de données est également requise **, donc Après avoir étudié cet article, je vous recommande d'étudier en détail avec quelques Django Primer.

app_folder/models.py

from django.db import models

class SampleDB(models.Model):
    class Meta:
        db_table = 'sample_table' #Nom de table utilisé dans DB
        verbose_name_plural = 'sample_table' #Nom de la table à afficher sur le site Admion
    sample1 = models.IntegerField('sample1', null=True, blank=True) #Numéros de magasin
    sample2 = models.CharField('sample2', max_length=255, null=True, blank=True) #Enregistrer la chaîne

Exécutez ensuite la commande suivante pour refléter les paramètres dans la base de données.

$ python manage.py makemigrations
$ python manage.py migrate

Si cela ressemble à ceci dans le terminal, c'est réussi.

Enregistrement de l'utilisateur administrateur

Après avoir configuré la base de données, enregistrons l'utilisateur qui gère le système. Tout d'abord, entrez la commande suivante.

$ python manage.py createsuperuser

Ensuite, les questions seront posées dans l'ordre suivant, alors entrez-les dans l'ordre. Pour des raisons de sécurité, le mot de passe ne sera pas affiché lorsque vous le saisissez, mais ça va. (Je suis surpris au début, mais ne t'inquiète pas)

• Nom d'utilisateur
• adresse mail --Password (1ère fois)
• Pour la confirmation du mot de passe)

Après la saisie, si «Superutilisateur créé avec succès.» S'affiche, l'enregistrement de l'utilisateur administrateur est réussi.

Construction du site de gestion

Après vous être enregistré en tant qu'administrateur, créons un ** site de gestion **.

Qu'est-ce qu'un site de gestion?

• À l'origine, vous devez vous souvenir de ** MySQL ** etc. pour faire fonctionner DB ――Je ne peux pas faire MySQL même si Python (Django) est plein. ..
• Vous, ** Faisons fonctionner la base de données sur l'écran depuis le site de gestion **!

C'est un site Web pratique, alors essayons d'abord comment faire fonctionner la base de données plutôt que de la comprendre avec des mots. Définissez les paramètres pour créer un site de gestion à la fois.

app_folder/admin.py

from django.contrib import admin
from .models import SampleDB # models.Nom de classe spécifié par py

admin.site.register(SampleDB) # models.Nom de classe spécifié par py

Ceci termine les paramètres du site de gestion. Accédons à localhost: 8000 / admin après avoir exécuté la commande suivante.

$ python manage.py runserver

Après vous être connecté avec le nom d'utilisateur et le mot de passe que vous avez créés précédemment Si vous voyez un écran comme celui-ci, vous avez réussi.

Essayons de vous inscrire dans la base de données. L'inscription se fait en 3 étapes.

-①: Cliquez sur Samplle_table

-②: Cliquez sur ʻAjouter SAMPLE_DB``

--③: Remplissez les éléments et cliquez sur "Enregistrer"

Ceci termine l'enregistrement dans la base de données.

Afficher / modifier les modèles

Maintenant que vous avez enregistré les informations dans la base de données, récupérons les données. Après cela, continuez avec le flux d'affichage des données sur l'écran Web.

--Recevoir les conditions de recherche du formulaire de saisie à l'écran

• Obtenir des données de la base de données en fonction des conditions de recherche --Passez les données acquises dans le modèle (écran)

** [Recevoir les conditions de recherche à partir du formulaire de saisie à l'écran] ** Tout d'abord, créez page01.html pour créer un formulaire de saisie.

templates/app_folder/page01.html

{% extends 'base.html' %}
{% block contents %}

<h4 class="mt-5 mb-4 border-bottom">Entrez les conditions de recherche</h4>
<form  action="{% url 'app_folder:top_page' %}" method="post">
<div class="container-fluid">
  <div class="row">
    <div class="col-2">
      <input class="form-control" type="text" name="input_data" maxlength="255">
    </div>
    <div class="col-2">
      <div class="text-left align-bottom">
          <button type="submit" name="button" class="btn btn-info">
Chercher
          </button>
      </div>
    </div>
  </div>
</div>
{% csrf_token %}
</form>

{% endblock %}

** [Obtenir les données de la base de données en fonction des conditions de recherche] ** Puis éditez views.py pour recevoir les données du formulaire d'entrée

• Il est préférable de supprimer tout le contenu original et de coller ce qui suit nouvellement.

app_folder/views.py

from django.shortcuts import render  
from django.views import View  
from .models import SampleDB

class SampleView(View):  
	def get(self, request, *args, **kwargs):  
		return render(request, 'app_folder/page01.html')

	def post(self, request, *args, **kwargs):  
		input_data = request.POST['input_data']
		result = SampleDB.objects.filter(sample1=input_data)
		result_sample1 = result[0].sample1
		result_sample2 = result[0].sample2
		context={'result_sample1':result_sample1, 'result_sample2':result_sample2}
		return render(request, 'app_folder/page02.html', context=context,)
		
top_page = SampleView.as_view()

** [Transmettez les données acquises au modèle (écran)] ** Et enfin, créez un nouveau page02.html pour afficher les données obtenues à partir de la base de données.

templates/app_folder/page02.html

{% extends 'base.html' %}
{% block contents %}

<h4 class="mt-5 mb-4 border-bottom">Afficher les résultats de la recherche DB</h4>
<div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <p>sample1：{{result_sample1}}</p>
      <p>sample2：{{result_sample2}}</p>
    </div>
  </div>
</div>

{% endblock %}

Contrôle de fonctionnement

Lorsque vous avez terminé, redémarrez le système Allez sur http: // localhost: 8000 / app_folder / top_page /.

$ python manage.py runserver

Si vous obtenez un écran comme celui-ci, cela fonctionne.

Après avoir saisi ** "1" ** dans le formulaire de saisie et cliqué sur le bouton de recherche Si le ** "1er échantillon" ** enregistré dans la base de données plus tôt est affiché, il réussit.

Ceci termine la configuration initiale de Django et une série d'étapes simples d'ajout de fonctions. ** Cet ensemble de fichiers sera la base du développement de Django **, donc enregistrez-le et enregistrez-le.

à la fin

Dans cet article, après avoir organisé les cinq enjeux du développement système, J'ai traité (1) et (2) de chiffres.

(1) L'image globale du développement du système n'est pas visible (2) Les rôles des différentes parties qui composent le système ne sont pas visibles (3) Je n'ai pas les bases pour contester le développement (4) Je n'ai pas les compétences nécessaires pour réfléchir à la conception d'un système à partir d'idées (5) Que faire? (Idée) ne sort pas

Ensuite, après avoir organisé la ** définition du système **, Je pense que j'ai pu réellement comprendre (2) et (3) des trois compétences requises grâce à la programmation.

** Système: une collection de "programmes" qui organisent un grand nombre de "données" et "une série de processus" **

Compétences requises: ① Capacité à réfléchir aux pièces nécessaires au développement ② Compétences pour fabriquer des pièces individuelles ③ Compétences à développer de manière ordonnée

De plus, comme je l'ai écrit avec une politique de ** "Faites quelque chose qui fonctionne en premier" **, il y a certaines parties où l'explication est omise. Si vous ne comprenez pas quelque chose, veuillez utiliser les livres d'introduction et les tutoriels dont vous disposez pour compenser.

Nous espérons que tous ceux qui liront l'article développeront un bon service. Jusqu'à la fin Merci d'avoir lu.

Comme son titre l'indique, cet article a été écrit comme ** "Introduction" **, alors attendez-vous à la suite.

【P.S.】 Diverses informations sont également publiées sur SNS, donc si vous pensez que vous pouvez lire l'article Je vous serais reconnaissant de bien vouloir suivre compte Twitter "Saku731".