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.