307 – Réaliser des pages Web interactives

Rapport personnel

Version du 04.10.2021

Hicham Aouissaoui

Module du 24.05.2021 au 14.06.2021

Table des matières

1	Introduction	4

2	Exercices Théoriques	5

2.1	Exercice 1 – base HTML5	5

2.2	Exercice 2 – login (90’)	5

2.2.1	Maquettes	5

2.2.2	Code HTML pour le formulaire	5

2.2.3	À quoi sert l’attribut « placeholder » ?	6

2.2.4	À quoi sert l’attribut « autofocus » ?	6

2.2.5	Quelle est la différence entre le bouton de l'ex01 et l’ex02?	6

2.2.6	Code CSS	7

2.2.7	Code JS	7

2.2.8	Qu’est-ce que le DOM ?	7

2.2.9	Comment définit-on une « fonction » (méthode) comme « validerUtilisateur() » ?	8

2.2.10	Comment définit-on une « variable » (par exemple pour « username » et « password ») ?	8

2.2.11	Les variables sont-elles « typées » (String par exemple) ?	9

2.2.12	Où se trouve la console de débogage de Chrome ?	9

2.3	Exercice 5 – variable en JavaScript	9

2.4	Exercice 6 – la structure de contrôle Switch	11

2.5	Exercice 7 – les boucles en JavaScript	12

2.6	Exercice 8 – tableau associatif ou tableau d’objets JSON	14

2.7	Exercice 10 à 13 – programmation orienté objets en JavaScript	15

2.7.1	Personne.js	15

2.7.2	Worker.js	15

2.8	Exercice 14 à 16 – JQuery	16

2.8.1	Object JQuery	16

2.8.2	Différente commande JQuery	17

2.8.2.1	Action quand Page loader	17

2.8.2.2	Sélection des nœud et nœud frère	17

2.8.2.3	Action après target	17

2.8.2.4	Ajouter à la fin	17

2.8.2.5	Changer directement le CSS	17

2.8.2.6	Créer une liste avec un lien	17

2.8.2.7	Event au click	17

2.8.2.8	Event hover	17

2.8.2.9	Event live	18

2.8.2.10	Event animated	18

2.8.2.11	Hide et Show	18

2.9	Exercice 17 à 21 Web services	18

2.9.1	Extension pour chrome	18

2.9.2	Appel à un Web Service	18

2.9.3	Double JQuery	19

2.9.4	Crédenciale	19

2.9.4.1	Explication du code	19

3	Analyse	21

3.1	Use-case	21

3.2	Activity	21

4	Conclusion	22

Introduction

Dans module nous allons travailler avec des service web a intégrer dans une application web faites par nos soins. Nous travaillerons d’abord sur des exercices pour apprendre les notions de Jquery, JavaScript et Web Service.

Nous utiliserons ensuite ce savoir afin de réaliser un projet en manipulant l’API de notre choix.

Exercices Théoriques

Exercice 1 – base HTML5

Pour le premier exercice je devais simplement tester un site HTML JavaScript avec un boutons JavaScript.

Exercice 2 – login (90’)

On vous demande de compléter le conteneur pour afficher un composant formulaire (form) HTML5 pour simuler une opération de login. Pour le moment, le test du login se fera localement en JavaScript (valides : « admin » quelle que soit la casse pour l’utilisateur et « emf123 » pour le mot de passe).

Le but sous-jacent de cet exercice est de bien séparer les différents fichiers de la vue d’une application entre son contenu en HTML (des composants dans une page web), la présentation en CSS (le design) et la logique métier en JavaScript.

Maquettes

Si on introduit le nom d’utilisateur et le mot de passe correctement :	Si la validation n’est pas correcte (nom d’utilisateur ou mot de passe) :

alert() ouvre un popup d'information, confirm() ouvre un popup de confirmation ou non et prompt() ouvre un popup d'input.

Code HTML pour le formulaire

<form class="user-form">

<fieldset>

<legend>Identification:</legend>

<div class="field">

<label for="username">Nom d'utilisateur:</label>

<input type="text" size="30" id="username" placeholder="un nom svp" autofocus/>

</div>

<div class="field">

<label for="username">Mot de passe:</label>

<input type="password" size="30" id="password"
placeholder="un mot de passe svp" />

</div>

<input type="button" value="Valider" id="valider" onclick="validerUtilisateur();">

</fieldset>

</form>

Questions :

À quoi sert l’attribut « placeholder » ?

L’attribut Placeholder spécifie la valeur attendue dans un champ d’entrée. Ou une description du format attendu. La valeur attendue s’affiche dans le champ avant que l’utilisateur n’entre la moindre valeur.

<input type="tel" id="phone" name="phone"

placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>

<small>Format: 123-45-678</small>

<input type="submit">

À quoi sert l’attribut « autofocus » ?

L’attribut Autofocus est un attribut booléen qui, si présent dans une balise <input>, spécifie que ce dernier sera mis en focus automatiquement au moment du chargement de la page.

<form action="/action_page.php">

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname" autofocus><br><br>

<label for="lname">Last name:</label>

<input type="text" id="lname" name="lname"><br><br>

<input type="submit">

</form>

Quelle est la différence entre le bouton de l'ex01 et l’ex02?

Le boutons dans l’exercice deux sert surtout à vérifier deux variables et si elles sont en accords avec les attentes du programme. Le premier exercice affichait juste une phrase avec le nom inscrit dans le code en dessous du bouton.

Code CSS

Veuillez compléter « main.css » avec les classes ci-dessous pour obtenir un résultat égal à l’exemple de la vue de la page précédente :

.user-form .field	(padding et couleur de fond)

.user-form .field label	(inline-block et largeur)

.user-form .field input	(inline-block)

#valider ou .user-form input[type=button] (largeur, rayon du bord, couleur de fond et marge)

Code JS

Pour vous aider, les fonctions clés du JS sont ici :

document.getElementById("id") pour récupérer un élément du DOM si un id a été préalablement ajouté. Cette fonction avec la méthode querySelector("…") est la plus simple à utiliser car elles retournent un seul élément sur lequel il est ensuite facile de récupérer ou changer une propriété. L’accès aux propriétés se fait sans get et set mais en spécifiant « .value, .innertext, .innerhtml, … » par exemple.

console.log(…) pour afficher quelque chose dans la console du navigateur. Vous pouvez utiliser un littéral avec des « ` ` » (nouveauté ES6).

window.alert(…) pour afficher quelque chose dans un popup

À l’aide d’Internet, apprenez :

Qu’est-ce que le DOM ?

Quand une page web est ouverte le navigateur crée un DOM (Document Objet Model) de la page. Voici comment est construit et structurer un DOM :

Le DOM HTML définit tous les éléments HTML comme objets, les propriétés de toutes ses propriétés, les méthodes pour y accéder et les évènements de ses premiers.

A l’aide de ce modèle, Javascript a tous les pouvoirs pour créer un HTML dynamique.

Voilà ce que peut faire ensuite JavaScript dans la page :

modifier tous les éléments HTML

modifier tous les attributs HTML

changer tous les styles CSS

supprimer les éléments et attributs HTML existants

ajouter de nouveaux éléments et attributs HTML

réagir à tous les événements HTML existants

créer de nouveaux événements HTML

Comment définit-on une « fonction » (méthode) comme « validerUtilisateur() » ?

Les fonctions dans JavaScript agissent comme les méthodes dans le code Java. Elles peuvent êtres appeler dans le HTML à l’aide de boutons ou d’événement définie dans le « ScriptCtrl ».

Une fonction dans JavaScript est définie par le mot clé function suivi d’un nom coller à droite de parenthèse.

function validerUtilisateur() {

}

Comment définit-on une « variable » (par exemple pour « username » et « password ») ?

La commande Let permet de déclarer une variable dont la portée est celle de la méthode ou fonction courante. On peut directement initier la valeur qu’elle va contenir ou non.

Il est possible de déclarer plusieurs variables d’une seule traite en les séparant avec une virgule.

let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]];

Attention, Il est aussi possible de déclarer des valeurs avec la commande Var . cependant la variable aura une portée agissant sur tout le code.

function varTest() {

var x = 31;

if (true) {

var x = 71; // c'est la même variable !

console.log(x); // 71

}

console.log(x); // 71

}

function letTest() {

let x = 31;

if (true) {

let x = 71; // c'est une variable différente

console.log(x); // 71

}

console.log(x); // 31

}

Les variables sont-elles « typées » (String par exemple) ?

Il ne semblerait pas. La variable prenne le type de la valeur qui leur ai désigné.

Où se trouve la console de débogage de Chrome ?

F12

Vous complèterez les commentaires du fichier indexCtrl.js comme suit :

​function validerUtilisateur() {

// ...

}

Puis vous ferez la liaison avec ce dernier dans le code HTML. On peut faire cette liaison dans la partie « head » comme suit :

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="icon" href="#" />

<link rel="stylesheet" href="css/main.css">

<script src="js/indexCtrl.js"></script>

<title>Ex02 - login</title>

</head>

Exercice 5 – variable en JavaScript

À ce stade, nous pouvons dire que les variables JavaScript ne sont pas typées et peuvent contenir :

- des nombres (number);

- des chaines de caractères (string) ;

- des booléens (boolean) ;

- des objets (object)

Le mot réservé « typeof » permet de connaitre le type utilisé momentanément pour une variable. Exemple : console.log(typeof a);

Exercice 6 – la structure de contrôle Switch

function initCtrl() {

// Ecouteur du bouton "Testez-moi..."

document.getElementById("testez").addEventListener("click", testez);

}

function testez() {

let d = new Date();

let numjour = d.getDay();

let jour = "";

switch(numjour){

case 1:

jour = "lundi"

break;

case 2:

jour = "mardi"

break;

case 3:

jour = "mercredi"

break;

case 4:

jour = "jeudi"

break;

case 5:

jour = "vendredi"

break;

case 6:

jour = "samedi"

break;

default:

jour = "dimanche"

break;

}

document.getElementById("info").innerHTML = jour;

}

Exercice 7 – les boucles en JavaScript

<button onclick="testerFor();">For</button>

<button id="for">For</button>

let but = document.getElementById("for");

but.onclick = testerFor; // appel de la function testerFor

<button id="for">For</button>

let but = document.getElementById("for");

but.addEventListener("click", testerFor); // appel de la function testerFor

// ou sur une ligne

document.getElementById("for").addEventListener("click", testerFor);

function initCtrl() {

document.getElementById("tester").addEventListener("click", testez);

}

// Appel de cette méthode par la ligne ci-dessus

function testerFor() {

let resultat = "";

let consigne = "for (let i=0; i < 5; i++){...}<br />";

for (let i = 0; i < 5; i++) {

resultat = resultat + " <br />" + "i = " + i;

}

document.getElementById("info").innerHTML = consigne + resultat;

}

// Appel de cette méthode par le code écrit comme propriété du bouton (html)

function testerWhile() {

let i = 0;

let resultat = "";

let consigne = "while (i<10) {...} <br />";

while (i < 10) {

resultat = resultat + " <br />" + "i = " + i;

i++;

}

document.getElementById("info").innerHTML = consigne + resultat;

}

// Appel de cette méthode par le code écrit comme propriété du bouton (html)

function testerDoWhile() {

let i = 0;

let resultat = "";

let consigne = "do {...} while (i<15) <br />";

do{

resultat = resultat + " <br />" + "i = " + i;

i++;

}while(i < 15);

document.getElementById("info").innerHTML = consigne + resultat;

}

Exercice 8 – tableau associatif ou tableau d’objets JSON

function initCtrl() {

document.getElementById("tester").addEventListener("click", testez);

}

const json ={

personnes: [

{prenom: "John", nom: "Doe", age: 44},

{prenom: "Anna", nom: "Smith", age: 32},

{prenom: "Peter", nom: "Jones", age: 29}

]

};

function parcourirUnTableauJSON(){

let resultat = "";

for (let i = 0; i < json.personnes.length; i++){

let personne = json.personnes[i];

personne = i+". "+personne.prenom+" "+personne.nom+" "+personne.age

resultat = resultat + "<br />" + personne;

}

document.getElementById("info").innerHTML = resultat;

}

Exercice 10 à 13 – programmation orienté objets en JavaScript

Durant les exercices de 10 à 13 nous allons jouer avec le principe de classe objet dans JavaScript. Un fichier .JS va servir de moule pour un objet, dans cet exercice ce sera une personne.

Un objet contient des attributs et des méthodes. Les attributs se trouvent dans le constructeur, la première méthode de la classe.

Personne.js

function Personne(prenom, nom, age){

this.prenom = prenom;

this.nom = nom;

this.age = age;

}

Personne.prototype.toString = function(){

return this.nom + " " + this.prenom + " (" + this.age + ")"

}

Worker.js

Le Worker va se servir de l’objet personne, par le biais de la création des objets puis de méthode permettant leur contrôle, par exemple des méthodes d’ajout et de suppression.

const personnes = [

new Personne("John", "Doe", 44),

new Personne("Anna", "Smith", 32),

new Personne("Peter", "Jones", 29)

];

personnes.sort

function _trouverPersonne(p){

let index = -1;

for(let i = 0; i < personnes.length; i++){

wow = personnes[i];

if(p.toString() == personnes[i].toString()){

aaa = i

index = aaa

console.log(index);

}

}

return index;

}

function ajouterPersonne(p){

let idx = _trouverPersonne(p);

if(idx === -1){

personnes.push(p);

}

}

function supprimerPersonne(p){

let idx = _trouverPersonne(p);

if(idx != -1){

personnes.splice(idx, 1);

}

}

Exercice 14 à 16 – JQuery

Les exercices 14 à 16 vont apporter de nouvelles notions dans JavaScript, le JQuery.

JQuery est une librairie Open Source qui simplifie l’interaction entre le HTML et le code JS. Elle permet au développeur une infrastructure simplifier du DOM. JQuery est une librairie fonctionnant avec la plupart des navigateurs et utilisé par presque tout le monde.

JQuery utilise le CSS pour gérer ses fonctionnalités, sa syntaxe est facile et rapide. Il est aussi simple à séparer son code en module.

Object JQuery

$("div").addClass("special");

Le $ est l’objet JQuery, le « div » est une recherche via le sélecteur CSS. Cela retournera un set JQuery de 0 à N nœuds du DOM. Le AddClass() ajoute une classe HTML a tous les nœuds trouvés.

Différente commande JQuery

Action quand Page loader

$(document).ready(function(){
// Votre code jQuery doit se trouver ici
});

Sélection des nœud et nœud frère

$("button")
.parent().css("border", "3px solid red")
.siblings().css("border", "3px solid green");

Action après target

$("a[target=_blank]")
.after("<img src='images/open.png'/>");

Ajouter à la fin

$("a[target=_blank]")
.append("(mon texte)");

Changer directement le CSS

$("li a").css({
color: "red",
fontWeight: "bold"
});

Créer une liste avec un lien

$("<li><a></a></li>")
.find("a")
.attr("href", "http://www.emf.ch/")
.html("EMF")
.end()
.appendTo("ul");

Event au click

$("a.menu").click(function(){
$(this).next().toggle();
return false;
});

Event hover

$("li").hover(function(){
$(this).animate({marginLeft: 38, marginRight: 0});
}, function(){
$(this).animate({marginLeft: 18, marginRight: 18});
});

Event live

$("a.menu").live("hover", function(){
$(this).next().toggle(200);
return false;
});

Event animated

$("div.block").animate({
fontSize: "2em",
width: "+=20%",
backgroundColor: "green"
});

Hide et Show

$("div.block").hide("slow", function(){
$(this).show("slow");
});

Exercice 17 à 21 Web services

Pour dynamiser votre site web, les animations c'est bien joli, mais c'est mieux avec des informations qui se mettent à jour en fonction des choix de l'opérateur. Un moyen commode de discuter avec un serveur, ce sont les web services.

Nous allons rechercher des ressources sur un serveur externe afin de

Extension pour chrome

Certaine API nécessite une extension sur le navigateur afin qu’elle s’affiche au visiteur du site WEB. Cette extension s’appelle CORS.

Appel à un Web Service

Grace a la commande JQuery Ajax, il est possible de faire appel à des ressources venant d’un autre server WEB. Arrivant tout droit sur notre site, nous pouvons ensuite manipuler ces informations de manière locale mais pas les modifier à la source.

$.ajax(url, {

type: "POST",

contentType: "application/x-www-form-urlencoded; charset=UTF-8",

data: param,

success: successCallback

});

Double JQuery

Il est possible de communiquer avec le server de service web en recevant des informations et aussi d’en envoyer.

Pour cette manipulation nous avons besoin de la commande Ajax, POST et GET.

POST :

$.ajax(url, {

type: "POST",

contentType: "application/x-www-form-urlencoded; charset=UTF-8",

data: param,

success: successCallback

});

GET :

$.ajax(url, {

type: "GET",

data: param,

success: successCallback

});

Crédenciale

Le dernier exercice montre comment réaliser un système de vérification des login et utilisateur de manière bien plus complète que les exemples précédents.

Explication du code

Dans ce code ci, nous allons créer une class LoginCtrl, dans son constructeur nous installons un écouteur qui va activer la commande « validerUtilisateur() » dès le click du bouton ayant l’ID « #login-valider ».

class LoginCtrl {

constructor() {

// Ajouter l'écouteur sur le bouton

$("#login-valider").click(() => {

this.validerUtilisateur();

});

}¨

La méthode « validerUtilisateur() » va récupérer les informations se trouvant dans le HTML du champ texte « username » « password » et « domaine ». Elles seront ensuite envoyées dans la classe service pour être vérifier à l’aide de la méthode « login() ».

validerUtilisateur() {

// récupère les objets InputText du formulaire HTML

let userComp = document.getElementById("username");

let pswComp = document.getElementById("password");

let domComp = document.getElementById("domaine");

// récupère les valeurs de ces objets

let identifiant = {

username: userComp.value,

password: pswComp.value,

domaine: domComp.value,

mail: "x",

langue: "x",

};

service.login(identifiant, this.OKLogin);

}

La dernière méthode est une vérification que les informations lier au login soit bien correcte, si oui, elle rajoutera la langue et loadera l’accueil.

Si non, elle affichera simplement une alerte disant que les informations .

OKLogin(data) {

console.log(data);

if (data.includes("KO")) {

alert("Vos identifications sont incorrectes !!!\nVeuillez réessayer...");

} else {

indexCtrl.langue = data;

indexCtrl.loadAccueil();

}

}

}

Analyse

Use-case

L’use case est un diagramme qui illustre toutes les actions possibles par l’utilisateur sur l’application. Il est aussi possible d’illustrer plusieurs applications ou un acteur web a droite du diagramme.

Activity

Le diagramme d’activité permet de visualiser toutes les actions que l’application peut réaliser et dans quel ordre.

Conclusion

Ce fut un module bien complet et aussi très dense. Ce fut très intéressant, d’une part pour la partie du projet que j’ai grandement apprécié et de l’autre que nous revenons à HTML. J’aime beaucoup travailler avec les outils web.

Dans ce cas-là nous avons pu faire plus qu’un site internet mais aussi une application WEB.