Finder 6 - frebourg.es

Créé en 2020 et modifié le 10 Mar 2022

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.