Utiliser une API

  • Afficher les villes de l’API api.got.show au format JSON grâce à RESTED, extension de navigateur ou Postman. (API secours  :https://anapioficeandfire.com/)
  • Afficher les cultures et observer les données dans la console du navigateur.
  • Réaliser une page villes.html qui affiche toutes les villes. On utilisera le plugin Bootstrap Table avec un appel Ajax pour générer le tableau depuis du JSON.
$('#btn-get-gateaux').click(function () {
$('#table-gateau').bootstrapTable({
url: 'http://localhost/api-gateau/gateaux',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'nom',
title: 'Item Name'
},]
});
});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <!--tables-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>


<script src="js/index.js?v=1"></script>


<div class="col-md-8 col-lg-6">


<table
  id="table" 
  data-data-field="data">
  
</table>
</div>

Attention , prendre la dernière version, regarder la doc https://examples.bootstrap-table.com/#options/total-data-field.html

  • Tester grâce à IntelliJ une requête http qui permette d’afficher toutes les maisons.
  • Réaliser une page maisons.hml selon le même principe.
  • Réaliser un formulaire ville.html qui permette de saisir un nom de ville et d’afficher ces informations grâce à une requête Ajax.
  • Réaliser un formulaire personnage.html selon le meme principe.
  • Obtenir les informations de la maison du personnage automatiquement grâce à une autre requete Ajax à a suite de celle du personnage.

Déploiement

  • Déployer le projet dans une instance PHP.
  • Enregistrer les fichiers dans un répertoire got3  sous Gitlab.