Conception de Sites Web dynamiques 2024-2025
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
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
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
Critères d’évaluation de projet
Evaluation de projet
Objectifs généraux :
Objectifs de conception & programmation :
Objectifs « éthiques » :
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
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é)
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.
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.
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.
Relation 1:1
Relation 1:n
Relation n:m
1er Exemple :
2ème Exemple :
3ème Exemple :
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.
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();
Structure :
Données : 4 enregistrements dans la table nouvelle, 5 enregistrements dans la table tag, et 6 enregistrements dans nouvelle_tag
Trouver une requête pour générer
Trouver une requête pour générer
ou bien
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.
Sondage
Quelques exemples JS : Affectation
Quelques exemples JS : Condition
Quelques exemples JS : Boucle
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>
.
Interagir avec le DOM
<!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>
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 :
Exemple pour sélectionner toutes les balises h1 :
<h1>Mon super site</h1>
Sélecteur pour balise h1 :
<h1>Mon super site</h1>
Sélecteur pour balise h1 :
<p class="loremipsum">...</p>
Sélecteur pour les classes :
Sélecteur pour les identifiant :
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>
.
Frameworks CSS (p.ex., Bootstrap, Materialize, Pure.css, Bulma)
Bibliothèques JavaScript (p.ex. JQuery, Leaflet.js, …)
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <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>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <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>
<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>
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”
w3tech
Exemple :
Patrick Reuter - http://www.labri.fr/perso/preuter/cswd2025