Utiliser le Framework Python Django
Intro
- réaliser l’arborescence de votre application cliente en indiquant toutes les pages clientes (html) et leurs liaisons éventuelles.
Partie 1
Livrable gitlab : finder/mission6/…
- Réaliser un dossier django en plus de slim, flask et express
- Installer Django
https://www.djangoproject.com/start/
https://docs.djangoproject.com/en/3.0/intro/tutorial01/
pip install django
- Initialiser un projet
django-admin startproject otelofinder
- Créer une app
python manage.py startapp finder
- Ajouter son app dans otelofinder/otelofinder/urls.py
from django.contrib import admin from django.urls import include, path urlpatterns = [ path('finder/', include('finder.urls')), path('admin/', admin.site.urls), ]
- Créer une réponse à une URL
Dans finder/urls.py
from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), ]
Dans finder/views.py
from django.http import HttpResponse def index(request): return HttpResponse("Hello, world.")
- Lancer le serveur et tester l’url /finder
python manage.py runserver 8001
- Comprendre l’architecture du framework Django
Partie 2
Livrable gitlab : finder/mission6/…
- Ajouter la page chambres.html
Dans finder/urls.py
from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), path('chambres', views.chambres, name='chambres'), ]
Dans finder/views.py
from django.http import HttpResponse from django.shortcuts import render from .models import Question def index(request): return HttpResponse("Hello, waza") def chambres(request): return render(request, 'finder/chambres.html')
Dans finder/templates/finder/chambres.html, le code de chambres.html mais en changeant les delimiters VueJs qui sont les mêmes dans Django
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <div id="sessions"> <button v-on:click="ajax(idc)">valider</button> <input v-model="idc" placeholder="numéro de chambre"/> <p>Le message est : ${ idc }</p> <template> <div class="table-responsive"> <table class="table-hover" v-if="info"> <thead> <tr> <th>id</th> <th>nbCouchage</th> <th>porte</th> <th>etage</th> <th>idCategorie</th> <th>baignoire</th> <th>prixBase</th> </tr> </thead> <tbody> <tr v-for="item in info"> <td>${ item.id }</td> <td>${ item.nbCouchage }</td> <td>${ item.porte }</td> <td>${ item.etage }</td> <td>${ item.idCategorie }</td> <td>${ item.baignoire }</td> <td>${ item.prixBase }</td> </tr> </tbody> </table> </div> </template> </div> <script> var app =new Vue({ el: '#sessions', delimiters: ['${', '}'], data () { return { info: null, idc: 0, message:'' } }, methods: { ajax: function (idc, event) { axios({ method: 'get', url: 'http://localhost:8000/dispo', responseType: 'json', }) .then(async res => { if(res.status === 200) { alert('Ok!'); this.info=res.data; } else if(res.status === 400) { let errorResponse = await res.json(); this.errors.push(errorResponse.error); } }) } } }) </script>
- Tester l’uri /chambres de django
- Ajouter les autres pages clientes.