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
1. découvrir des besoins oubliés
2. modifier le backend
3. 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¹ ; 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 :

Version Desktop Version Smartphone

Nous recourrons aux composants suivants :

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 balise web-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 :

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.↩︎