Introduction
En développement web, on distingue les développeurs Frontend / Backend.
Ici le Backend correspond à Base de données + Serveur HTTP/JSON et le Frontend est l’application web.
Schématiquement, backend=serveur, frontend=client.
On peut fabriquer différents client (frontend) pour le même backend (par exemple application android en java, un script shell en ligne de commande, ou une intégration dans une page web plus générale).
Processus de développement :
- identifier les besoins
- créer la bdd avec une structure adaptée
- faire un serveur qui implémente les réquêtes identifiées dans les besoins
- fabriquer un frontend
- découvrir des besoins oubliés
- modifier le backend
- mettre à jour le frontend
Aujourd’hui, nous sommes à l’étape 4.
Nous allons créer 3 fichiers html : course.html
, skipper.html
et bateau.html
; 3 fichiers course.js
, skipper.js
et bateau.js
1 ; et un fichier de style : vg.css
.
Nous ne travaillerons pas avec netbeans mais avec un éditeur de texte plus simple (geany ou mousepad par exemple).
HTML - Bootstrap
Nous voulons développer une application web responsive (qui s’adapte à la taille de l’écran). Pour cela, nous utilisons un framework web : Bootstrap.
https://getbootstrap.com/docs/5.0/getting-started/introduction/ (starter template)
Dans un premier temps, développer un squelette html pour afficher le classement d’une édition sur le modèle suivant :
Nous recourrons aux composants suivants :
Navbar
La navbar est la barre de navigation en haut de l’écran. Votre navbar devra avoir une couleur de fond unique.
<nav class="navbar navbar-expand-md sticky-top">
</nav>
Référence : https://getbootstrap.com/docs/5.0/components/navbar/
Grid et container
Pour séparer la vue en colonnes, on utilisera la grid avec des row
et col
:
<div class="container">
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
</div>
Référence : https://getbootstrap.com/docs/5.0/layout/grid/
Tables
Le tableau est une table
html classique avec simplement des classes indiquant le style.
<table class="table table-striped table-light">
<tbody>
<tr><th>A</th><th>B</th></tr>
<tr><td>Alpha</td><td>Beta</td></tr>
</tbody>
</table>
Référence : https://getbootstrap.com/docs/5.0/content/tables/
Cards
Les cards sont des blocs à bord rond pour contenir une unité d’information. Elles peuvent contenir un header, un body et un footer.
<div class="card">
<h5 class="card-header">Titre de la carte</h5>
<div class="card-body">
<p>Texte de la carte</p>
</div>
</div>
Référence : https://getbootstrap.com/docs/5.0/components/card/
Boutons
Les boutons bootstrap peuvent s’appliquer aux input
et aux liens.
Des couleurs par défaut sont disponibles (primary, success, info…)
<a href="link.html" class="btn btn-primary" role="button">Lien</a>
<input type="button" class="btn btn-success" onclick="alert()">Input</input>
<button type="button" class="btn btn-info" onclick="alert()">Bouton</button>
Référence : https://getbootstrap.com/docs/5.0/components/buttons/
Javascript
Dans un second temps, nous allons remplir programmatiquement ce squelette à l’aide de requêtes asynchrones (fetch
) et de modifications programmatiques du html (DOM Scripting).
Nous allons devoir décider d’un format pour transmettre l’édition de la course que l’on souhaite afficher (Query String).
Enfin, nous implémenterons une recherche dans la base de données.
Fetch et DOM Scripting
Voir https://homepages.loria.fr/EHainry/cours/r209/tp3.html#dom-scripting
Requête asynchrone (
fetch
…then
)fetch(url).then(r => r.json()).then(mafonction) function mafonction(d) { //d est un taleau associatif (json) }
Malheureusement, votre serveur Tomcat n’autorise pas les requêtes à être utilisées dans une application web. Nous allons devoir configurer le serveur pour corriger ce problème :
- Récupérer le bout de xml de la documentation https://tomcat.apache.org/tomcat-9.0-doc/config/filter.html#CORS_Filter
- Intégrer ce bout de xml dans le fichier
web.xml
à l’intérieur de la baliseweb-app
(par exemple juste avant le</web-app>
. - Redémarrer le serveur Tomcat depuis netbeans.
DOM Scripting (
document.***
)document.getElementById document.createElement("span") element1.innerHTML = "..." element1.appendChild(element2)
Query string
La page skipper.html
doit pouvoir afficher les infos de n’importe quel skipper.
on va pour cela utiliser une query string et faire des URLs du genre skipper.html?id=33
- Récupérer la query string avec
document.location.search
- La découper en clefs/valeurs avec
URLSearchParams
Références :
- https://developer.mozilla.org/fr/docs/Web/API/Location
- https://developer.mozilla.org/fr/docs/Web/API/URLSearchParams
Par exemple :
qs = document.location.search
params = new URLSearchParams(qs)
if (params.has("id")) {
console.log(params.get("id"))
}
Search
Nous allons faire des recherches approchées (fuzzy search). En utilisant la bibliothèque Fusejs.
Dans le html :
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
Dans le javascript :
//Avec LISTE un dictionnaire avec les clefs firstname, nickname, name et contenant tous les skippers
fuse = new Fuse(LISTE, {keys: ['firstname', 'nickname', 'name']})
fuse.search("lamasou")
// et parcourir les résultats
Cela pourra évoluer : certaines fonctions pourront être factorisées dans un fichier
vg.js
par exemple.↩︎