Dans ce didacticiel, nous allons créer un système de galerie sécurisé avec PHP, MySQL et JavaScript. Nous utiliserons PHP et HTML pour remplir toutes nos images, qui seront extraites de la base de données MySQL. De plus, nous allons créer une fenêtre pop-up innovante qui affichera l'image correspondante à une résolution plus élevée.
Qu'est-ce qu'un système de galerie ?
Nous pouvons utiliser le système de galerie pour présenter et organiser nos images. Comme le système est basé en ligne, toute personne disposant de l'URL peut afficher et télécharger des images.
Le package Advanced comprend des fonctionnalités supplémentaires et un lien de téléchargement vers le code source.
1. Mise en route
Nous devons suivre quelques étapes avant de créer notre système de galerie avec PHP. Nous devons configurer notre environnement de serveur Web (si vous ne l'avez pas déjà fait) et nous assurer que les extensions requises sont activées.
1.1. Exigences
- Serveur Web — Si vous n'avez pas installé de package de solution de serveur Web local, je vous recommande de télécharger et d'installer XAMPP . XAMPP est un package de solution de serveur Web open source.
- Extension PHP PDO - Comme nous allons utiliser l'extension PHP PDO, assurez-vous qu'elle est activée. C'est généralement le cas par défaut, mais dans certaines circonstances, ce n'est peut-être pas le cas.
1.2. Ce que vous apprendrez dans ce tutoriel
- Système de modèles — Créez un système de modèles de base avec PHP. Nous utiliserons les fonctions PHP pour créer les fonctions d'en-tête et de pied de page du modèle.
- Télécharger des images — Téléchargez des images sur le serveur à l'aide d'un formulaire HTML et de PHP.
- Interaction MySQL — Insérez des informations d'image dans une base de données MySQL et récupérez les résultats.
- Supprimer les images — Supprimez les fichiers image du serveur (PHP) et supprimez les enregistrements d'une base de données MySQL.
- Fenêtre contextuelle d'image avec JS — Créez une fenêtre contextuelle avec JavaScript qui affichera l'image correspondante avec le titre et la description.
- Conception du système de galerie — Concevez un système de galerie avec HTML5 et CSS3.
1.3. Structure et configuration des fichiers
Nous allons maintenant démarrer notre serveur Web et créer les fichiers et répertoires que nous allons utiliser pour notre système de galerie.
- Ouvrez le panneau de configuration XAMPP
- À côté du module Apache, cliquez sur Démarrer
- À côté du module MySQL, cliquez sur Démarrer
- Accédez au dossier d'installation de XAMPP ( C:\xampp )
- Ouvrez le répertoire htdocs
- Créez les répertoires et fichiers suivants :
Les fichiers et répertoires ci-dessus contiendront les éléments suivants :
- functions.php — Ce fichier contiendra toutes les fonctions dont nous avons besoin pour notre système de galerie (en-tête de modèle, pied de page de modèle et fonction de connexion à la base de données).
- index.php — Remplir toutes les images de la base de données MySQL, avec des boutons de navigation pour les relier aux autres pages.
- upload.php — Ce fichier sera utilisé pour télécharger des images et insérer les détails de l'image dans notre base de données MySQL.
- delete.php — Ce fichier sera utilisé pour supprimer une image de notre serveur et les détails associés de la base de données MySQL.
- style.php — La feuille de style (CSS3) pour notre système de galerie.
- images — Ce répertoire contiendra toutes nos images téléchargées. Vous pouvez télécharger toutes les images dans le conteneur de structure de fichiers ci-dessus.
2. Création de la base de données et configuration des tables
Pour cette partie, vous devrez accéder à votre base de données MySQL, soit en utilisant phpMyAdmin (inclus avec XAMPP) ou votre application de gestion de base de données MySQL préférée.
Si vous utilisez phpMyAdmin , suivez ces instructions :
- Accédez à http://localhost/phpmyadmin/
- Cliquez sur l' onglet Bases de données en haut
- Sous Créer une base de données , tapez phpgallery dans la zone de texte
- Sélectionnez utf8_general_ci comme classement (UTF-8 est l'encodage par défaut dans HTML5)
- Cliquez sur Créer
Cela créera la base de données MySQL que nous allons utiliser. Maintenant, nous devons créer la table et insérer les exemples d'images qui se trouvent dans le répertoire des images. Nous pouvons simplement exécuter la requête ci-dessous pour insérer tous les détails de nos images dans la base de données au lieu de créer toutes les tables et tous les enregistrements individuellement. Assurez-vous de sélectionner d'abord la base de données phpgallery et cliquez sur l'onglet SQL situé en haut.
CREATE TABLE IF NOT EXISTS `images` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` text NOT NULL,
`description` text NOT NULL,
`filepath` text NOT NULL,
`uploaded_date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
INSERT INTO `images` (`id`, `title`, `description`, `filepath`, `uploaded_date`) VALUES
(1, 'Abandoned Building', '', 'images/abandoned-building.jpg', '2019-07-16 20:09:26'),
(2, 'Beach', 'Hot summer day at the beach.', 'images/beach.jpg', '2019-07-16 20:10:05'),
(3, 'City', 'A view down at the city.', 'images/city.jpg', '2019-07-16 20:10:45'),
(4, 'Mountain', '', 'images/mountain.jpg', '2019-07-16 20:11:27'),
(5, 'Road', 'Going down the only road I''ve even known.', 'images/road.jpg', '2019-07-16 20:12:00'),
(6, 'Stars', 'A wonderful view of the night sky.', 'images/stars.jpg', '2019-07-16 20:12:39');L'instruction ci-dessus créera la table des images avec les colonnes suivantes :
- id — L'identifiant unique de l'enregistrement. Nous pouvons utiliser cette colonne pour identifier quelle colonne est laquelle.
- title — Le titre de l'image.
- description — La description de l'image.
- filepath — Le chemin d'accès au fichier de l'image.
- upload_date — La date à laquelle l'image a été téléchargée.
Notez que nous avons également inséré les exemples d'images dans le tableau des images . Pour vous assurer qu'elles s'affichent correctement sur votre système de galerie, vous devez télécharger les images à partir de la section Structure des fichiers et les placer dans le répertoire des images .
La structure de la table des images devrait apparaître comme suit sur phpMyAdmin :
C'est tout ce que nous devons faire pour notre base de données MySQL. N'hésitez pas à fermer phpMyAdmin car nous n'avons plus besoin de l'utiliser.
3. Conception du système de galerie avec CSS
Pour rendre notre système de galerie plus attrayant, nous devons ajouter du CSS. Ajoutez le CSS suivant au fichier style.css :
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #FFFFFF;
margin: 0;
}
.navtop {
background-color: #3f69a8;
height: 60px;
width: 100%;
border: 0;
}
.navtop div {
display: flex;
margin: 0 auto;
width: 1000px;
height: 100%;
}
.navtop div h1, .navtop div a {
display: inline-flex;
align-items: center;
}
.navtop div h1 {
flex: 1;
font-size: 24px;
padding: 0;
margin: 0;
color: #ecf0f6;
font-weight: normal;
}
.navtop div a {
padding: 0 20px;
text-decoration: none;
color: #c5d2e5;
font-weight: bold;
}
.navtop div a i {
padding: 2px 8px 0 0;
}
.navtop div a:hover {
color: #ecf0f6;
}
.content {
width: 1000px;
margin: 0 auto;
}
.content h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #ebebeb;
color: #666666;
}
.image-popup {
display: none;
flex-flow: column;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 99999;
}
.image-popup .con {
display: flex;
flex-flow: column;
background-color: #ffffff;
padding: 25px;
border-radius: 5px;
}
.image-popup .con h3 {
margin: 0;
font-size: 18px;
}
.image-popup .con .edit, .image-popup .con .trash {
display: inline-flex;
justify-content: center;
align-self: flex-end;
width: 40px;
text-decoration: none;
color: #FFFFFF;
padding: 10px 12px;
border-radius: 5px;
margin-top: 10px;
}
.image-popup .con .trash {
background-color: #b73737;
}
.image-popup .con .trash:hover {
background-color: #a33131;
}
.image-popup .con .edit {
background-color: #37afb7;
}
.image-popup .con .edit:hover {
background-color: #319ca3;
}
.home .upload-image {
display: inline-block;
text-decoration: none;
background-color: #38b673;
font-weight: bold;
font-size: 14px;
border-radius: 5px;
color: #FFFFFF;
padding: 10px 15px;
margin: 15px 0;
}
.home .upload-image:hover {
background-color: #32a367;
}
.home .images {
display: flex;
flex-flow: wrap;
}
.home .images a {
display: block;
text-decoration: none;
position: relative;
overflow: hidden;
width: 300px;
height: 200px;
margin: 0 20px 20px 0;
}
.home .images a:hover span {
opacity: 1;
transition: opacity 1s;
}
.home .images span {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: absolute;
opacity: 0;
top: 0;
left: 0;
color: #fff;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
padding: 15px;
transition: opacity 1s;
}
.upload form {
padding: 15px 0;
display: flex;
flex-flow: column;
width: 400px;
}
.upload form label {
display: inline-flex;
width: 100%;
padding: 10px 0;
margin-right: 25px;
}
.upload form input, .upload form textarea {
padding: 10px;
width: 100%;
margin-right: 25px;
margin-bottom: 15px;
border: 1px solid #cccccc;
}
.upload form textarea {
height: 200px;
}
.upload form input[type="submit"] {
display: block;
background-color: #38b673;
border: 0;
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
width: 200px;
margin-top: 15px;
border-radius: 5px;
}
.upload form input[type="submit"]:hover {
background-color: #32a367;
}
.delete .yesno {
display: flex;
}
.delete .yesno a {
display: inline-block;
text-decoration: none;
background-color: #38b673;
font-weight: bold;
color: #FFFFFF;
padding: 10px 15px;
margin: 15px 10px 15px 0;
border-radius: 5px;
}
.delete .yesno a:hover {
background-color: #32a367;
}Le code ci-dessus est la feuille de style que nous utiliserons pour le système de galerie. Conception simple et épurée. Pas aussi sophistiqué que cela pourrait l'être, mais c'est un excellent point de départ. Vous êtes libre de le personnaliser à votre guise, mais n'oubliez pas de vider le cache de votre navigateur lorsque vous y apportez des modifications.
4. Création du fichier de fonctions
Le fichier de fonctions contiendra l'en-tête du modèle, le pied de page du modèle et la fonction de connexion à la base de données.
Editez le fichier functions.php et ajoutez :
<?php
function pdo_connect_mysql() {
// The below variables should reflect your MySQL credentials
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phpgallery';
try {
// Connect to MySQL using the PDO extension
return new PDO('mysql:host=' . $DATABASE_HOST . ';dbname=' . $DATABASE_NAME . ';charset=utf8', $DATABASE_USER, $DATABASE_PASS);
} catch (PDOException $exception) {
// If there is an error with the connection, stop the script and output the error.
exit('Failed to connect to database!');
}
}La fonction ci-dessus sera utilisée pour se connecter à notre base de données MySQL en utilisant l'interface PDO. Si vous ne parvenez pas à vous connecter en utilisant les détails ci-dessus, vous devrez mettre à jour les variables de la base de données et vous assurer qu'elles reflètent vos informations d'identification MySQL.
Ajouter après :
// Template header; feel free to customize it, but do not indent the PHP code or it will throw an error
function template_header($title) {
echo <<<EOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>$title</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<nav class="navtop">
<div>
<h1>Gallery System</h1>
<a href="index.php"><i class="fas fa-image"></i>Gallery</a>
</div>
</nav>
EOT;
}Le code ci-dessus est la fonction d'en-tête que nous utiliserons pour toutes les pages que nous créons. Tout ce que nous avons à faire est d'exécuter le nom de la fonction au lieu d'écrire le même code dans chaque fichier que nous créons. N'hésitez pas à personnaliser l'en-tête. Nous utilisons l'impressionnante bibliothèque Font Awesome pour afficher les icônes sur nos pages.
Ajouter après :
// Template footer
function template_footer() {
echo <<<EOT
</body>
</html>
EOT;
}
?>Le modèle de pied de page ci-dessus fermera toutes les balises d'ouverture que nous avons définies dans la fonction d'en-tête. Nous ne voudrions pas un document invalide contenant des balises non fermées ; certainement pas idéal pour le référencement.
5. Création de la page d'accueil
La page d'accueil contiendra toutes les images que nous avons téléchargées et les liens de navigation vers les autres pages.
Modifiez le fichier index.php et ajoutez :
<?php
include 'functions.php';
// Connect to MySQL
$pdo = pdo_connect_mysql();
// MySQL query that selects all the images
$stmt = $pdo->query('SELECT * FROM images ORDER BY uploaded_date DESC');
$images = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>Tout d'abord, nous incluons le fichier functions.php , qui contient les fonctions que nous allons utiliser, après, nous nous connectons à notre base de données MySQL en exécutant lepdo_connect_mysql()fonction et ensuite récupérer tous les détails de nos images que nous avons téléchargées à partir de notre table de base de données images , classées par la colonne de date téléchargée (décroissante).
Ajouter après :
<?=template_header('Gallery')?>
<div class="content home">
<h2>Gallery</h2>
<p>Welcome to the gallery page! You can view the list of uploaded images below.</p>
<a href="upload.php" class="upload-image">Upload Image</a>
<div class="images">
<?php foreach ($images as $image): ?>
<?php if (file_exists($image['filepath'])): ?>
<a href="#">
<img src="<?=$image['filepath']?>" alt="<?=$image['description']?>" data-id="<?=$image['id']?>" data-title="<?=$image['title']?>" width="300" height="200">
<span><?=$image['description']?></span>
</a>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<div class="image-popup"></div>Comme vous pouvez le voir ci-dessus, tout ce que nous avons à faire pour inclure le modèle d'en-tête est d'exécuter le nom de la fonction (avec le titre), ce que nous avons fait ci-dessus.
De plus, nous remplissons toutes les images extraites de la base de données MySQL au format HTML. Avec la fonction foreach, nous pouvons parcourir le tableau associatif et gérer chaque enregistrement en conséquence. lefile_existsla fonction est explicite ; il vérifiera si l'image existe ou non.
ledata-*Les attributs seront utilisés pour stocker des informations relatives à l'image, que nous pourrons ensuite récupérer avec JavaScript. Ils détermineront ce qu'il faut afficher dans la fenêtre contextuelle.
Ajouter après :
<script>
// Container we'll use to output the image
let image_popup = document.querySelector('.image-popup');
// Iterate the images and apply the onclick event to each individual image
document.querySelectorAll('.images a').forEach(img_link => {
img_link.onclick = e => {
e.preventDefault();
let img_meta = img_link.querySelector('img');
let img = new Image();
img.onload = () => {
// Create the pop out image
image_popup.innerHTML = `
<div class="con">
<h3>${img_meta.dataset.title}</h3>
<p>${img_meta.alt}</p>
<img src="${img.src}" width="${img.width}" height="${img.height}">
<a href="delete.php?id=${img_meta.dataset.id}" class="trash" title="Delete Image"><i class="fas fa-trash fa-xs"></i></a>
</div>
`;
image_popup.style.display = 'flex';
};
img.src = img_meta.src;
};
});
// Hide the image popup container, but only if the user clicks outside the image
image_popup.onclick = e => {
if (e.target.className == 'image-popup') {
image_popup.style.display = "none";
}
};
</script>Le code JavaScript ci-dessus créera la fenêtre contextuelle pour l'image correspondante. Si vous préférez mettre votre code JavaScript dans un fichier JS séparé, vous pouvez également le faire.
Ajouter après :
<?=template_footer()?>Et maintenant, nous pouvons terminer le modèle de la page d'accueil en exécutant la fonction de pied de page du modèle.
C'est tout ce que nous devons faire pour la page d'accueil. Si nous naviguons vers http://localhost/phpgallery/index.php , nous verrons ce qui suit :
Et si nous cliquons sur l'une des images, nous verrons ce qui suit :
L'effet d'image pop-up est créé avec JavaScript et nous n'avons donc pas besoin de recharger la page chaque fois que nous cliquons sur une autre. Nous pouvons fermer la fenêtre contextuelle en cliquant à l'extérieur du conteneur d'images.
6. Création de la page de téléchargement
La page de téléchargement est la page que nous utiliserons pour télécharger de nouvelles images et stocker les informations relatives à ces images dans notre table d' images de base de données MySQL.
Modifiez le fichier upload.php et ajoutez :
<?php
include 'functions.php';
// The output message
$msg = '';
// Check if user has uploaded new image
if (isset($_FILES['image'], $_POST['title'], $_POST['description'])) {
// The folder where the images will be stored
$target_dir = 'images/';
// The path of the new uploaded image
$image_path = $target_dir . basename($_FILES['image']['name']);
// Check to make sure the image is valid
if (!empty($_FILES['image']['tmp_name']) && getimagesize($_FILES['image']['tmp_name'])) {
if (file_exists($image_path)) {
$msg = 'Image already exists, please choose another or rename that image.';
} else if ($_FILES['image']['size'] > 500000) {
$msg = 'Image file size too large, please choose an image less than 500kb.';
} else {
// Everything checks out now we can move the uploaded image
move_uploaded_file($_FILES['image']['tmp_name'], $image_path);
// Connect to MySQL
$pdo = pdo_connect_mysql();
// Insert image info into the database (title, description, image path, and date added)
$stmt = $pdo->prepare('INSERT INTO images (title, description, filepath, uploaded_date) VALUES (?, ?, ?, CURRENT_TIMESTAMP)');
$stmt->execute([ $_POST['title'], $_POST['description'], $image_path ]);
$msg = 'Image uploaded successfully!';
}
} else {
$msg = 'Please upload an image!';
}
}
?>Le code ci-dessus téléchargera une nouvelle image dans le répertoire des images et stockera les détails qui lui sont associés dans la base de données MySQL, mais avant que l'image ne soit téléchargée, nous vérifions d'abord si le fichier image existe déjà et nous nous assurons qu'il s'agit bien d'une image. Nous utilisons legetimagesize()fonction de validation de l'image.
De plus, si l'image téléchargée existe déjà, le code affichera un message d'erreur à l'utilisateur. La taille d'image maximale est définie sur 500 Ko, que vous pouvez modifier si vous souhaitez télécharger des images avec une taille de fichier plus grande.
Enfin, si aucun message d'erreur ne s'est produit, les détails de l'image seront insérés dans notre table d' images MySQL.
Ajouter après :
<?=template_header('Upload Image')?>
<div class="content upload">
<h2>Upload Image</h2>
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="image">Choose Image</label>
<input type="file" name="image" accept="image/*" id="image">
<label for="title">Title</label>
<input type="text" name="title" id="title">
<label for="description">Description</label>
<textarea name="description" id="description"></textarea>
<input type="submit" value="Upload Image" name="submit">
</form>
<p><?=$msg?></p>
</div>
<?=template_footer()?>Le code ci-dessus est le modèle de téléchargement, qui consiste en un formulaire HTML que nous utiliserons pour saisir les détails liés à l'image correspondante.
De plus, lorsque l'utilisateur clique sur le bouton d'envoi, le formulaire est traité à l'aide du code PHP que nous avons ajouté précédemment. La méthode de requête est définie sur POST, qui est utilisée pour envoyer des données à un serveur. Contrairement à une requête GET, la méthode POST n'ajoutera pas les paramètres à l'URL.
Si nous accédons à la page de téléchargement, nous verrons ce qui suit :
Pour vérifier qu'il fonctionne correctement, sélectionnez une image et remplissez le formulaire. N'oubliez pas que l'image doit faire moins de 500 Ko et cliquez sur le bouton Télécharger l'image une fois que vous avez terminé. Vous devriez voir la réponse située sous le formulaire.
7. Création de la page de suppression
La page de suppression sera utilisée pour supprimer les images que nous avons téléchargées. L'image spécifiée sera supprimée du répertoire des images et les informations associées à l'image seront supprimées de la table des images MySQL.
Modifiez le fichier delete.php et ajoutez :
<?php
include 'functions.php';
$pdo = pdo_connect_mysql();
$msg = '';
// Check that the image ID exists
if (isset($_GET['id'])) {
// Select the record that is going to be deleted
$stmt = $pdo->prepare('SELECT * FROM images WHERE id = ?');
$stmt->execute([ $_GET['id'] ]);
$image = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$image) {
exit('Image doesn\'t exist with that ID!');
}
// Make sure the user confirms before deletion
if (isset($_GET['confirm'])) {
if ($_GET['confirm'] == 'yes') {
// User clicked the "Yes" button, delete file & delete record
unlink($image['filepath']);
$stmt = $pdo->prepare('DELETE FROM images WHERE id = ?');
$stmt->execute([ $_GET['id'] ]);
// Output msg
$msg = 'You have deleted the image!';
} else {
// User clicked the "No" button, redirect them back to the home/index page
header('Location: index.php');
exit;
}
}
} else {
exit('No ID specified!');
}
?>Avant que l'image correspondante ne soit supprimée, le code nécessite l'ID de l'image, qui est récupéré à partir d'un paramètre GET car il déterminera quelle image nous allons supprimer. Le paramètre ID est associé à l'ID dans la base de données MySQL.
Nous vérifions également si l'image est dans la base de données et vérifions si l'utilisateur a cliqué sur le bouton de confirmation Oui. Si l'utilisateur a cliqué sur le bouton Oui , le code supprimera le fichier du serveur en utilisant leunlink()fonction et ensuite exécuter une instruction MySQL DELETE FROM qui supprimera l'enregistrement d'image de la base de données.
Ajouter après :
<?=template_header('Delete')?>
<div class="content delete">
<h2>Delete Image #<?=$image['id']?></h2>
<?php if ($msg): ?>
<p><?=$msg?></p>
<?php else: ?>
<p>Are you sure you want to delete <?=$image['title']?>?</p>
<div class="yesno">
<a href="delete.php?id=<?=$image['id']?>&confirm=yes">Yes</a>
<a href="delete.php?id=<?=$image['id']?>&confirm=no">No</a>
</div>
<?php endif; ?>
</div>
<?=template_footer()?>Le code ci-dessus est le modèle de notre page de suppression, qui confirmera à l'utilisateur avec un bouton Oui et Non s'il souhaite supprimer l'image.
Si nous naviguons vers la page d'accueil et cliquons sur l'une des images, nous verrons l'icône de suppression et si nous cliquons dessus, nous verrons quelque chose de similaire à ce qui suit :
Si nous cliquons sur le bouton Oui , l'image sera supprimée de notre répertoire d' images et de notre base de données MySQL.
Conclusion
Toutes nos félicitations! Vous avez maintenant créé un système de galerie sécurisé entièrement fonctionnel avec PHP, MySQL et JavaScript. Et ensuite ? Envisagez de mettre en œuvre des fonctionnalités innovantes et d'étendre le système avec des fonctionnalités uniques.
Vous devriez maintenant avoir une compréhension de base de la façon de remplir et de télécharger des images avec PHP.
Envisagez de partager l'article sur les sites Web sociaux si vous l'avez trouvé utile et déposez un commentaire ci-dessous. Nous apprécions grandement le soutien.
Bon codage et merci d'avoir lu !