Finder 7 - M Frébourg

Rechercher les chambres disponibles sur plusieurs hôtels

Intro

créer la maquette de la page d’accueil de votre application permettant la recherche d’une chambre.
réaliser un logo et une charte graphique pour cette application.

Partie 1

Livrable gitlab : finder/mission7/…

réaliser une requête sql qui renvoie les chambres d’une certaine catégorie.
réaliser une requête sql qui renvoie les chambres qui ont une réservation entre une date de début et de fin.
réaliser une fonction sql qui renvoie les chambres qui n’ont pas de réservation entre une date de début et de fin et qui correspondent à une catégorie. (NOT IN)
réaliser l’URI GET disponibilites qui renvoie la liste des chambres disponibles selon la date de debut, la date de fin et la catégorie.

'select chambre.id, nbCouchage, porte, etage,libelle ,baignoire from chambre inner join categories on chambre.categorie_id = categories.id
        where chambre.categorie_id=? and       
       chambre.id not in (select reservation.idChambre from reservation where
               dateD<? or dateF>?)'

Partie 2

Livrable gitlab : finder/mission7/…

réaliser le formulaire de recherche d’une chambre selon la date de début, la date de fin et la catégorie de la chambre.
afficher la réponse d’un hôtel sur la même page grâce à vuejs ou jquery, ajouter dans le projet otelo dans public/index.php et dans index.php de slim pour éviter les erreurs cors

header('Access-Control-Allow-Origin: *');  
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

Chaque ligne devra faire apparaître le prix par jour ( dans GET disponibilites), et la description de la chambre ( dans GET chambre/{id}).

Partie 3

afficher la réponse des trois hôtels (express, flask, slim).

remplacer ce code

axios({
               method: 'get',
              // a changer
               url: 'http://localhost:8000/dispo',
               responseType: 'json',
               dataType : 'html'
           })
              .then(async res => { 
                if(res.status === 200) { 
                      //alert('Ok!');
                     // a changer pour obtenir le tableau de data
                     this.info=res.data;
                 } else if(res.status === 400) { 
                     let errorResponse = await res.json(); this.errors.push(errorResponse.error); }
              });

par celui ci en ajoutant un autre tableau html pour la variable info2. De même pour les autres serveurs. On pourra améliorer le rendu en concaténant les tableaux JSON des chambres disponibles des hôtels A, B,C.

axios.all([
                       axios.get('http://localhost:8000/dispo'),
                       axios.get('http://localhost/finder/slim/serveur/index.php/dispo')
                   ])
                   .then(axios.spread((laravel, slim) => {
                       this.info=laravel.data;
                       this.info2=slim.data;
                   }));

<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>

<template>
    <div class="table-responsive">
        <table class="table-hover" v-if="info2">
            <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="item2 in info2">
                    <td>${ item2.id }</td>
                    <td>${ item2.nbCouchage }</td>
                    <td>${ item2.porte }</td>
                    <td>${ item2.etage }</td>
                    <td>${ item2.idCategorie }</td>
                    <td>${ item2.baignoire }</td>
                    <td>${ item2.prixBase }</td>                  
                </tr>
                
            </tbody>
        </table>
    </div>
    
</template>

permettre de renvoyer sur une page représentant l’hôtel fictif lors de la sélection de l’utilisateur (logo, nom, quelques lignes).

Partie 4

Livrable gitlab : finder/mission7/…

ajouter une url de logo de l’hôtel lors de la réponse de l’API (dans GET disponibilites)
enregistrer ces logos sur chaque serveur d’API.
permettre d’afficher les logos sur la liste

ajouter une url d’image de la chambre lors de la réponse de l’API (dans GET chambre/{id})
permettre d’afficher les images des chambres sur la liste.

Partie 5

Uniquement si Otelo 6.1 est réalisé

ajouter dans le projet otelo dans public/index.php pour éviter les erreurs cors

header('Access-Control-Allow-Origin: *');  
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

ajouter les réponses de l’API d’Otelo à la recherche.
permettre la réservation sur le site Otelo après la recherche sur Finder.