Finder 6

Créé en 2020 et modifié le 26 Mar 2021

Créé en 2020 et modifié le 26 Mar 2021

Django

Partie 1

Livrable gitlab : finder/mission6/…

 

• Installer Python
• 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/vue/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.