Cours 5 - Variables de sessions

Conception de Sites Web dynamiques 2024-2025

Calendrier TDs/Cours

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

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

  • TD cette semaine : préparation d’un plus grand projet, frameworks CSS (td9)

  • TD restants :

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

    • td11 : JavaScript

    • td12 : css framework bootstrap

    • td13 : Wordpress CMS (SGC),

    • td14 : Github

    • 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)

Exemples description fonctionnelle

Préparer un plus grand projet (Multi-page application)

<?php include "debut-page.inc.php"; ?>


Contenu


<?php include "fin-page.inc.php"; ?>

Préparer un plus grand projet (Multi-page application)

dans debut-page.inc.php:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">      
        <title>Hello World</title>
    </head> 
    <body>
    
        <nav>
        ....
        </nav>

Préparer un plus grand projet (Multi-page application)

dans fin-page.inc.php:

        <p>Ce site a été créé par...</p>
    </body>
</html>

Préparer un plus grand projet (Multi-page application)

Résultat : (en affichant le code source du navigateur p.ex.)

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">      
        <title>Hello World</title>
    </head> 
    <body>
    
        <nav>
        ....
        </nav>

        Contenu

        <p>Ce site a été créé par...</p>
    </body>
</html>

Préparer un plus grand projet (Multi-page application)

<?php
include "debut-page.inc.php"; 
?>

<main>
    <h2>Accueil</h2>
    <p>Lorem ipsum dolor sit amet, consectetur .... </p>
    <p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean .... </p>
    <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim .... </p>
</main>

<?php include "fin-page.inc.php"; ?>```

Préparer un plus grand projet (Multi-page application)

<?php
session_start();
require_once("connexion_base.php");

include "debut-page.inc.php"; 
?>

<main>
    <h2>Accueil</h2>
    <p>Lorem ipsum dolor sit amet, consectetur .... </p>
    <p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean .... </p>
    <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim .... </p>
</main>

<?php include "fin-page.inc.php"; ?>```

Préparer un plus grand projet (Multi-page application)

  • et si on veut adapter légèrement le début de la page ?

    • p.ex. pour ajuster le titre dans `
    • ou pour mettre en avant un menu sélectionné ?

Préparer un plus grand projet (Multi-page application)

<?php
session_start();
require_once("connexion_base.php");

$donnees['menu'] = "Accueil";
$donnees['titre_page'] = "Page d'accueil";

include "debut-page.inc.php"; 
?>

<main>
    <h2>Accueil</h2>
    <p>Lorem ipsum dolor sit amet, consectetur .... </p>
    <p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean .... </p>
    <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim .... </p>
</main>

<?php include "fin-page.inc.php"; ?>```

Préparer un plus grand projet (Multi-page application)

dans debut-page.inc.php:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">      
        <title><?php echo $donnees['titre_page']; ?></title>
    </head> 
    <body>
    
        <nav>
        ....
        </nav>

Préparer un plus grand projet (Multi-page application)

dans debut-page.inc.php:

<!-- ... -->
<nav>
    <li><a href="accueil.php">Accueil</a></li>
    <li><a href="profile.php">Profile</a></li>
    <li><a href="messages.php">Messages</a></li>
</nav>
<!-- ... -->

Préparer un plus grand projet (Multi-page application)

dans debut-page.inc.php:

<!-- ... -->
<nav>
    <li><a href="accueil.php">Accueil</a></li>
    <li><a href="profile.php">Profile</a></li>
    <li><a href="messages.php">Messages</a></li>
</nav>
<!-- ... -->

Préparer un plus grand projet (Multi-page application)

dans debut-page.inc.php:

<nav>
<?php 
if ($donnees['menu'] == "Accueil")
{
?>
    <li>Accueil</li>
<?php
}
else
{
?>
    <li><a href="accueil.php">Accueil</a></li>
<?php
}


// .. même comportement pour profile, messages, ...

?>
</nav>

Les variables de session

Les variables de session

3 types de transfert d’informations

  • Par URL (et récupération avec $_GET)
  • Par Formulaire (et récupération avec $_GET ou $_POST
  • Par variables de session SESSION : validité au cours d’une session utilisateur, pour une durée limité

Les variables de session

3 types de transfert d’informations

Les variables de session

En tout début de chaque page (ni espace ni lignes vides avant) :

<?php
session_start();
?>

Les variables de session

Si le membre vient d’être authentifié (donc dans verifier-connexion.php) :

<?php
// ...
$_SESSION['id_membre'] = $enregistrements[0]['id'];
?>

Les variables de session

Les autres pages pour lesquelles il faut être connecté :

p.ex., article-pour-les-membres.php :

if (isset($_SESSION['id_membre']))
{
    // ...
}
else
{
        echo "il faut se connecter ou s'inscrire ... ";
}

Les variables de session

Informations pour un membre spécifique, p.ex. :

p.ex., informations-pour-un-membre-specifique.php :

<?php

$id = ...;

if (isset($_SESSION['id_membre']) && $_SESSION['id_membre']==$id)
{
    ...
}
else
{
        echo "il faut se connecter ou s'inscrire …";
}
?>

Les variables de session

Pour se déconnecter, p.ex. deconnexion.php :

unset($_SESSION['id_membre']);

ou bien

session_destroy();

Les cookies

Les cookies

Les cookies

Un cookie/témoin/traceur est

  • un petit texte envoyé par un serveur

  • défini par le protocole de communication HTTP et envoyé par un serveur HTTP à un client HTTP

  • le client HTTP renverra le petit texte les prochaines fois qu’il se connectera aux serveurs partageant le même nom de domaine.

RGPD - Le règlement général sur la protection des données

Principes :

  • Cadre harmonisé dans l’Union européenne
  • Application extraterritoriale (acteurs non UE sont concernés pour les données relatives à l’UE)
  • Le consentement « explicite » et « positif » (p.ex. case non pré-coché) (Exemple 1)
  • Le droit à l’effacement
  • Le droit à la portabilité des données personnelles
  • Le profilage
  • Les principes de « protection des données dès la conception » et de « sécurité par défaut » (Exemple 2)
  • Les notifications en cas de fuite de données
  • La possibilité de désigner un délégué à la protection des données

RGPD : Exemple : Consentement pour collecte de données

Exemple 3 : les cookies (ou « traceurs ») : https://www.cnil.fr/fr/cookies-et-traceurs-que-dit-la-loi

Obligation du recueil de recensement s’adresse au :

  • aux éditeurs de sites web et d’applications mobiles ;
  • aux régies publicitaires ;
  • aux réseaux sociaux qui fournissent des modules de partage sur les réseaux sociaux.

Quels cookies nécessitent le consentement préalable des utilisateurs ?

  • les cookies liés aux opérations relatives à la publicité personnalisée ;
  • les cookies des réseaux sociaux, notamment générés par leurs boutons de partage.

Non soumis au consentement

  • p.ex. les cookies destinés à l’authentification auprès d’un service
  • p.ex. les cookies de personnalisation de l’interface utilisateur

Transférer votre site vers le CREMI

Expliqué sur TD A :

  1. Transférer les fichiers (index.php, …) avec Filezilla

  2. Transférer les tables de votre base de données

  3. Assurez-vous que vous avez bien édité le fichier de configuration connexion_base.php

Transférer votre site vers/du CREMI

  1. Transférer les fichiers (index.php, …) avec Filezilla

Transférer votre site vers/du CREMI

  1. Transférer les tables de votre base de données

Transférer votre site vers/du CREMI

  1. Assurez-vous que vous avez bien édité le fichier de configuration connexion_base.php
<?php
// définition des paramètres de connexion à la base de données
$config_base['hote']        = "localhost";
$config_base['utilisateur'] = "root";
$config_base['motdepasse']  = "root";   // si Wampserver, mettez "" ici
$config_base['nom_base']    = "conceptionweb";

if (substr($_SERVER['SERVER_NAME'],-17) == "emi.u-bordeaux.fr")
{
    $config_base['hote']        = "mariadb";
    $config_base['utilisateur'] = "preute100p";
    $config_base['motdepasse']  = "xx389"'!DHUo"edk";
    $config_base['nom_base']    = "preute100p";
}


// connexion à la base de données
try {
    $pdo = new PDO( "mysql:host={$config_base['hote']};
                    dbname={$config_base['nom_base']}", 
                    "{$config_base['utilisateur']}", 
                    "{$config_base['motdepasse']}");
    
    // afficher les messages d'erreurs pour trouver les erreurs
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
    
    // jeu de caractères : UTF-8
    $pdo->query("SET NAMES utf8");
    $pdo->query("SET CHARACTER SET utf8");
}
catch (PDOException $exception) {
    echo "Connexion échouée : " . $exception->getMessage();
}
?>