Cours 6 - Dernier

Conception de Sites Web dynamiques 2024-2025

Programme

  • Calendrier projets CSWD

  • Calendrier TD/Cours

  • Examen terminal

  • MySQL : Requêtes sur une table (avec ALIAS)

  • MySQL : Relations entre tables (1:n, n:m)

  • MySQL : Requêtes impliquant plusieurs tables

  • Programmation côté client vs. Programmation côté serveur

  • JavaScript

    • Exemples simples
    • Cartes interactives, etc.

Calendrier TDs/Cours

  • td7 Inscription (Gestion de membres) (sign up)

  • td8 Connexion (Variables de session) (sign in)

  • td9 Préparation d’un plus grand projet, frameworks CSS

  • td10 Téléversement de fichiers, p.ex. images

  • TD restants :

    • td11 : JavaScript (aujourd’hui)

    • td12 : css frameworks

    • td13 : Wordpress CMS (SGC)

    • sondages/votes/accompagnement projet

Projet

Calendrier :

  • Formation de groupes et réflexions sur sujets à choisir (en cours)

  • Inscription de votre projet (avant le mercredi 19 mars 2025, 23h59)

  • Dépôt de votre description fonctionnelle (avant le mercredi 2 avril 2025, 23h59)

  • Rendu final de projet (fin avril ou début mai, 23h59)

Utilisation GitLab, si possible

Projet

Critères d’évaluation de projet

  • Est-ce que votre projet fonctionne ?
  • Est-ce que votre projet a une certaine originalité ?
  • Est-ce que votre projet est totalement dynamique ?
  • Avez-vous bien modélisé votre base de données (relations entre les tables) ?
  • Avez-vous bien accédé à votre base de données (requêtes, requêtes préparées) ?
  • Avez-vous respecté le standard W3C en HTML ?
  • Avez-vous séparé la structure et la mise en forme ?
  • Avez-vous fait un site web adaptatif (responsif), et est-ce que vous avez joint deux copies d’écran de la même page sur un dispositif différent ?
  • Avez-vous fait ce PDF avec soin ?
  • Quel est le + de votre projet par rapport aux autres projets ?

Projet

Evaluation de projet

  • Soutenance : à déterminer au cas par cas
  • utilisation des IA génératives
    • chaque sortie doit être à 100% compris
    • vous devez être capable d’expliquer les sorties
    • en annexe de la description, joindre tous les prompts utilisés

Objectifs

Objectifs généraux :

  • « Comprendre le monde internet/(web) app mobile »
  • Devenir acteur de ce monde
  • Sensibiliser pour le potentiel, les possibilités, et aussi les dangers
  • Protection de la vie privée

Objectifs de conception & programmation :

  • Concevoir et développer des sites internet « statiques »
  • Concevoir et développer des sites internet « dynamiques »
  • Modéliser vos données dans uns base de données et y accéder

Objectifs « éthiques » :

  • Respect de droits d’auteurs (p.ex. droit d’usage dans google images), RGPD

Examen terminal

  • probablement Mardi, 13 mai 2025, 14h30-16h00
  • feuille A4 manuscrite recto-verso non photocopiée autorisée

Contenu :

  • Questions générales sur le fonctionnement client-serveur pour le web

  • Comprendre le DOM, Structure HTML, Mise en forme CSS

  • Programmation côté serveur (PHP)

  • Conception de tables d’une base de données

  • Création de requêtes MySQL

  • Connexion PHP / MySQL

  • Concevoir un projet de site web entier

Architecture Client-Serveur avec connexion BDD

Vocabulaire des métiers web

Vocabulaire des métiers web

Extrait en vrac, très changeant et dynamique

  • Développeur Front-End (HTML, ss, JavaScript, Frameworks React/Angular/Vue.js, …)

  • Développeur Back-End ( Node.js, PHP, Python, Java, Frameworks back-end comme Express.js, Symfonie, Django, Spring, connaissance BDD relationnelles)

  • Développeur Full-Stack (développer web de bout en bout : front-end + back-end)

  • Ingénieur Base de Données (Langage SQL, et système gestion base de données comme MySQL, MariaDB, PostgreSQL, MongoDB)

  • Ingénieur DevOps

  • Développeur Web, développeur Mobile

  • UX Designer : Concepteur d’Expérience Utilisateur (conception centrée utilisateur)

  • UI Designer : Concepteur d’Interface Utilisateur (design graphique, …)

  • Ingénieur Assurance Qualité (tests fonctionnels, de performance et de sécurité)

Architecture Client-Serveur avec connexion BDD

Architecture Client-Serveur avec connexion BDD

PHP - MySQL

Requêtes sur 1 table

Sélectionner tous les champs :

$requete  = "SELECT id, nom FROM continent;";
// $requete  = "SELECT * FROM continent;";
$reponse = $pdo->prepare($requete);
$reponse->execute();

// récupérer tous les enregistrements dans un tableau
$enregistrements = $reponse->fetchAll();

Tableau associatif, p.ex.

echo $enregistrements[0]['id'];
echo $enregistrements[0]['nom'];

echo $enregistrements[1]['id'];
echo $enregistrements[1]['nom'];

Requêtes sur 1 table (champs spéc.)

Sélectionner seulement le champs nom :

$requete  = "SELECT nom FROM continent;";
$reponse = $pdo->prepare($requete);
$reponse->execute();

// récupérer tous les enregistrements dans un tableau
$enregistrements = $reponse->fetchAll();

Tableau associatif, p.ex.

echo $enregistrements[0]['nom'];
echo $enregistrements[1]['nom'];

Requêtes sur 1 table (avec alias AS)

Sélectionner les champs avec un renommage temporaire (alias) :

$requete  = "SELECT id AS continent_id, nom AS continent_nom FROM continent;";
$reponse = $pdo->prepare($requete);
$reponse->execute();

// récupérer tous les enregistrements dans un tableau
$enregistrements = $reponse->fetchAll();

Tableau associatif, p.ex.

echo $enregistrements[0]['continent_id'];
echo $enregistrements[0]['continent_nom'];

echo $enregistrements[1]['continent_id'];
echo $enregistrements[1]['continent_nom'];

Relations entre tables

Relation 1:1

  • La clé primaire d’une entité est la clé étrangère d’une autre entité dans un champs supplémentaire. (On pourrait également fusionner les tables, si les tables ne sont pas impliquées dans d’autres relations.)

Relation 1:n

  • La table de l’entité du côté n aura un champs supplémentaire qui a comme clé étrangère la clé primaire du côté 1.

Relation n:m

  • Création d’une table de jointure qui contient deux clés étrangères qui sont les clés primaires des deux tableaux. Les relations n:m seront toujours converties en deux relations, une relation 1:n, et une relation 1:m.

Relations entre tables (1:n)

1er Exemple :

Relations entre tables (1:n)

2ème Exemple :

Relations entre tables (1:n)

3ème Exemple :

Relations (1:n) : requête sur 2 tables

Sélectionner tous les champs :

$requete  = "SELECT pays.*, continent.* 
             FROM pays, continent 
             WHERE pays.id_continent = continent.id;";
$reponse = $pdo->prepare($requete);
$reponse->execute();

$enregistrements = $reponse->fetchAll();

Tableau associatif, p.ex.

echo $enregistrements[0]['id']; // ?
echo $enregistrements[0]['nom']; // ?

Relations (1:n) : requête sur 2 tables

Sélectionner tous les champs avec renommage temporaire :

$requete  = "SELECT pays.id AS pays_id,
                    pays.nom AS pays_nom,
                    population, 
                   id_continent,
                   continent.id AS continent_id, continent.nom AS continent_nom
            FROM pays, continent
            WHERE pays.id_continent = continent.id;";
$reponse = $pdo->prepare($requete);
$reponse->execute();

$enregistrements = $reponse->fetchAll();

Tableau associatif, p.ex.

echo $enregistrements[0]['pays_nom'];
echo $enregistrements[0]['continent_nom'];

Relations entre tables (n:m)

Structure :

  • 3 tables : une table nouvelle avec 3 champs (ou attributes ou columns), une table tag avec 2 champs, et une table de jointure nouvelle_tag avec 3 champs, dont 1 clé primaire et 2 clés étrangères
  • Relation n :m (ou many-to-many) : une nouvelle peut avoir plusieurs tags, et un tag peut être associé à plusieurs nouvelles.

Données : 4 enregistrements dans la table nouvelle, 5 enregistrements dans la table tag, et 6 enregistrements dans nouvelle_tag

Relations (n:m) : requête sur 3 tables

Trouver une requête pour générer

Relations (n:m) : requête sur 3 tables

Trouver une requête pour générer

ou bien

Exercice relations entre tables

Sondage

Créez une structure de base de données permettant de réaliser un sondage dans un site communautaire.

Une question peut avoir un nombre de réponses variables. Il faut pouvoir savoir quel membre a voté pour quelle réponse, et à quel moment.

Chaque membre est caractérisé par un nom, prénom, un mot de passe, et une date d’inscription.

Exercice relations entre tables

Sondage

Architecture Client-Serveur avec connexion BDD

Programmation côté client

Quelques exemples JS : Affectation

<script>
let a = 10;
console.log("a : ", a);
</script>

Quelques exemples JS : Condition

<script>
if (a<10)
{
    console.log("petit");
}
else
{
    console.log("grand");
}
</script>

Quelques exemples JS : Boucle

<script>
for (i=0; i<10; i++)
{
    console.log("i : ", i);
}
</script>

Programmation côté client

Il est conseillé de stocker les scripts JavaScript dans un fichier séparé (comme outils.js), pour une question de lisibilité, et afin d’éventuellemnt les pouvoir l’inclure dans plusieurs fichiers HTML5.

A inclure entre le <head> et </head>.

<script type="text/javascript" src="js/intro.js"></script>

Programmation côté client

Interagir avec le DOM

  1. Exemple JS : Changer le contenu d’une balise avec innerHTML
<!DOCTYPE html>
<html lang="fr">
<head>
...
</head> 
<body>
    <img src="logo1.png" id="logo">
    Age : <strong id="age">0</strong>

    <script>
    document.getElementById("age").innerHTML = "18";
    </script>
</body>
</html>
  1. Exemple JS : Changer un attribut d’une balise (ici src d’une balise img)
document.getElementById("logo").src = "logo2.png";
  1. Exemple JS : Changer le style d’une balise avec (ici display)
document.getElementById("logo").style.display = "none";

Architecture Client-Serveur

Architecture Client-Serveur

Architecture Client-Serveur avec connexion BDD

Frameworks CSS

Rappel - CSS

Voici une petite synthèse du fonctionnement : En CSS (cascading style sheets), on définit un ensemble de règles, et les règles ont la syntaxe suivante :

sélecteur {
    propriété : valeur; 
    propriété : valeur; 
    ...
}

Exemple pour sélectionner toutes les balises h1 :

h1 {
    background-color: #CCCCCC
}

Rappel - CSS

<h1>Mon super site</h1>

Sélecteur pour balise h1 :

h1 {
    background-color: #CCCCCC
}

Rappel - CSS

<h1>Mon super site</h1>

Sélecteur pour balise h1 :

h1 {
    background-color: #CCCCCC
}

Rappel - CSS

<p class="loremipsum">...</p>

Sélecteur pour les classes :

.loremipsum
{
    font-style: italic;
    text-align: left;
}

Rappel - CSS

<p id="prefere">...</p>

Sélecteur pour les identifiant :

#prefere
{
    font-weight: bold;
}

Rappel - CSS

Il est conseillé de stocker les règles CSS dans un fichier séparé (ici styles.css) afin de pouvoir l’inclure dans plusieurs fichiers HTML5.

A inclure entre le <head> et </head>.

<link href="css/styles.css" rel="stylesheet" type="text/css">

Bibliothèques et Frameworks

  • Frameworks CSS (p.ex., Bootstrap, Materialize, Pure.css, Bulma)

  • Bibliothèques JavaScript (p.ex. JQuery, Leaflet.js, …)

Exemple bibliothèques JavaScript

https://leafletjs.com/

<script>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS popup.<br> Easily customizable.')
    .openPopup();
</script>

Exemple bibliothèques JavaScript

<script>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS popup.<br> Easily customizable.')
    .openPopup();
</script>

Exemple bibliothèques JavaScript : Leaflet.js

<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

</head>

<body>

 <div id="map"></div>

</body>
</html>

Frameworks CSS

  • p.ex. Bootstrap, Materialize, Pure.css, Bulma

  • feuille de style prédéfinies

    • soit inclusion “en local”

    • soit inclusion direct via un CDN (content delivery network)

  • souvent “mobile-first”

Frameworks CSS

Frameworks CSS

Frameworks CSS

Frameworks CSS

w3tech

Frameworks CSS

Exemple :