Créer une base de données MySQL avec phpMyAdmin

La gestion de bases de données MySQL peut être complexe pour les débutants.

Cette complexité peut entraîner des erreurs et des inefficacités dans la gestion des données.

Cet article détaille comment utiliser phpMyAdmin pour créer des bases de données, configurer PDO et intégrer des formulaires HTML avec PHP.

Table de matière

Créer une base MySQL avec phpMyAdmin Configurer une instance PDO sécurisée Créer un formulaire HTML avec PHP Structurer le formulaire HTML PHP Validation des images dans le formulaire Télécharger des images via PHP Vérifier l'extension des fichiers Insertion des données dans MySQL Vérification de l'existence des données FAQ Conclusion

Formation PHP 8 : Atelier Complet Débutant

Réalisez votre projet web de A à Z sous PHP 8

Créer une base MySQL avec phpMyAdmin

Dans cette première étape, vous allez créer une base de données nommée bricks et une table nommée bien en utilisant phpMyAdmin.

Étape 1 : Accéder à phpMyAdmin

Tout d’abord, connectez-vous à votre serveur phpMyAdmin. Si vous utilisez un environnement local comme XAMPP ou WAMP, vous pouvez y accéder en tapant localhost/phpmyadmin dans votre navigateur.

Astuce Pratique : Si vous avez du mal à accéder à phpMyAdmin, assurez-vous que votre serveur local est bien démarré.

Étape 2 : Créer la base de données

Une fois dans phpMyAdmin, cliquez sur Nouvelle base de données .
Entrez bricks comme nom de la base de données.
Sélectionnez le collationnement approprié (généralement utf8mb4_general_ci pour supporter divers caractères).
Cliquez sur Créer .

Étape 3 : Créer la table ‘bien’

Après avoir créé la base de données, sélectionnez-la dans la liste à gauche.
Cliquez sur Nouvelle table .
Nommez la table bien et définissez le nombre de colonnes à 3.

Erreur Courante : Oublier de définir bienID comme clé primaire ou d’activer l’auto-incrément. Cela peut provoquer des erreurs lors de l’insertion de données dans la table.

Étape 4 : Configurez les colonnes de table ‘bien’

bienID :Type INT, Cochez A.I. (Auto-Increment), définissez-le comme clé primaire.
bien :Type VARCHAR, Longueur/valeurs : 100.
image :Type VARCHAR, Longueur/valeurs : 50.
Cliquez sur Enregistrer pour créer la table.

Configurer une instance PDO sécurisée

Avant de commencer à mettre en place l’instance PDO, voici la structure de l’arborescence de ce projet. Vous pouvez la créer ainsi dans VS Code pour une meilleure lisibilité et une bonne structuration.

Dans cette section, vous allez apprendre à instancier la classe PDO pour établir une connexion à la base de données MySQL que vous avez créée précédemment.

				
					
 <?php
$dsn = 'mysql:host=localhost;dbname=bricks;charset=utf8';
 $user = 'root';
 $pass = '';
 try {
     $cnx = new PDO($dsn, $user, $pass);
 } catch (PDOException $e) {
     echo 'Une erreur est survenue !';
 }

$dsn :Data Source Name. Il spécifie le type de base de données (MySQL dans ce cas), l’hôte (localhost), le nom de la base de données (bricks), et l’encodage des caractères (utf8).
$user :Nom d’utilisateur de la base de données. Par défaut, c’est root.
$pass :Mot de passe de l’utilisateur. Par défaut, c’est une chaîne vide pour root sous un environnement local.

Créer un formulaire HTML avec PHP

Dans cette étape, vous allez créer un formulaire HTML simple pour insérer un nouveau bien dans la base de données que vous avez mise en place précédemment. Le formulaire permettra à l’utilisateur d’entrer le nom d’un bien et de télécharger une image associée.

Code du fichier « bien-insert.php » :

				
					
 <!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insérer un nouveau Bien</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-37924271-d5dd-4cda-80bb-33f59f62411a: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-37924271-d5dd-4cda-80bb-33f59f62411a: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"37924271-d5dd-4cda-80bb-33f59f62411a","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<article>
<section>
<form action="" method="post" enctype="multipart/form-data">
<h1>Insérer un Bien</h1>
<input type="text" name="bien" placeholder="Nom du Bien">
<input type="file" name="monImage" id="">
<input type="submit" value="Insérer">
</form>
</section>
</article>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

Question : Pourquoi utilisons-nous multipart/form-data dans le formulaire ?

multipart/form-data est nécessaire pour envoyer des fichiers via un formulaire HTML, sans cela, le fichier ne sera pas correctement transmis au serveur.

Résultat affiché :

Vous devriez voir apparaître à l’écran un formulaire simple contenant un champ pour le nom du bien et un bouton pour sélectionner une image à télécharger. Après soumission, les données seront prêtes à être traitées.

Structurer le formulaire HTML PHP

Mettre en forme le formulaire HTML

Formation PHP 8 : Atelier Complet Débutant

Réalisez votre projet web de A à Z sous PHP 8

Dans cette étape, vous allez appliquer du style à votre formulaire HTML pour le rendre plus attrayant et convivial. Nous allons utiliser un fichier CSS externe nommé style.css pour mettre en forme les éléments du formulaire.

				
					
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body{
background-color: #95a5a6;
font-family: 'Roboto',sans-serif;
margin: 0;
}
/******** Article *********/
article{
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
article section {
background-color: #ecf0f1;
padding: 10px;
width: 50%;
border-radius: 8px;
border: 1px solid #7f8f8d;
}
article section:hover {
box-shadow: 3px 3px 3px #7f8f8d;
}
article h1 {
text-align: center;
color: #2c3e50;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px dashed #7f8f8d;
padding-bottom: 15px;
}
article input {
display:  block;
padding: 12px;
width :75%;
box-sizing: border-box;
outline: none;
margin: 15px auto;
}
/******** Article *********/

Erreur Courante : N’oubliez pas de vérifier que le fichier CSS est correctement lié à votre page HTML. Assurez-vous d’ajouter une balise dans la section de votre fichier bien-insert.php, comme ceci :

Résultat affiché :

Une fois le style appliqué, votre formulaire aura une apparence soignée avec un arrière-plan léger, des bordures arrondies et une disposition centrée. L’utilisateur bénéficiera d’une interface plus professionnelle et ergonomique.

Mettre en forme les éléments du formulaire

Formation PHP 8 : Atelier Complet Débutant

Réalisez votre projet web de A à Z sous PHP 8

Dans cette étape, vous allez personnaliser d’avantage les éléments du formulaire HTML en ajoutant des styles supplémentaires pour les champs de texte et le bouton de soumission. Ces ajustements amélioreront l’apparence et l’interactivité du formulaire.

Lignes supplémentaires dans le fichier style.css :

				
					
 article input[type="text"]{
border: 1px solid #ccc;
}
article input[type="text"] :hover{
border-color:#e67e22;
}
article input[type="submit"] {
cursor: pointer;
background-color: #f1c40f;
border: none;
font-size: 18px;
letter-spacing: 1px;
transition: 0.5s;
}
article input[type="submit"]:hover{
background-color: #e67e22;
}
article::placeholder{
color: #7f8f8d;
letter-spacing: 1px;
}

Erreur Courante : Vérifiez bien que vous n’ajoutez pas d’espaces inutiles dans vos sélecteurs CSS, comme input[type= »text »] :hover (avec un espace avant :hover). Cela pourrait entraîner des erreurs de style, car l’espace indiquerait un descendant et non un pseudo-élément.

Résultat affiché :

Votre formulaire sera encore plus professionnel grâce à ces ajustements. Les champs de texte auront une bordure personnalisée et changeront de couleur au survol. Le bouton de soumission sera également interactif avec une transition fluide de couleur au survol, créant ainsi une interface plus engageante.

Mettre en forme l’input de type file

Formation PHP 8 : Atelier Complet Débutant

Réalisez votre projet web de A à Z sous PHP 8

Dans cette étape, vous allez personnaliser l’apparence de l’élément de téléchargement de fichiers ( <input type= »file »>) pour qu’il s’intègre mieux avec le design de votre formulaire. Nous allons utiliser des styles CSS pour créer un bouton de téléchargement personnalisé.

Les modifications apportées au fichier bien-insert.php :

				
					
 <!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insérer un nouveau Bien</title>

<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-37924271-d5dd-4cda-80bb-33f59f62411a: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-37924271-d5dd-4cda-80bb-33f59f62411a: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"37924271-d5dd-4cda-80bb-33f59f62411a","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<article>
<section>
<form action="" method="post" enctype="multipart/form-data">
<h1>Insérer un Bien</h1>
<input type="text" name="bien" placeholder="Nom du Bien">
<p>Envoyer une image</p>
<div id="download">
<input type="file" name="monImage" id="fichier">
<label for="fichier">
<div>
<i class="fa-solid fa-download"></i>
</div>
</label>
</div>
<input type="submit" value="Insérer">
</form>
</section>
</article>
<script src="https://kit.fontawesome.com/50786edb2e.js" crossorigin="anonymous" data-rocket-defer defer></script>
</body>
</html>

Ensuite, vous allez ajouter les règles CSS suivantes dans votre fichier style.css pour styliser l’élément de téléchargement :

				
					
 article p{
text-align: center;
}
/******** Article *********/
/******** Download ********/
#download{
display:flex;
justify-content: center;
}
#download input {
display: none;
}
#download label div {
width:60px;
height: 60px;
border-radius: 50%;
background-color: #f1c40f;
cursor: pointer;
margin-bottom: 10px;
transition: 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
#download label div:hover{
background-color: #e67e22;
}
#download label div i {
font-size: 1.8em;
color: #fff;
}
/******** Download ********/

Infos : Les éléments ont un style par défaut que vous ne pouvez pas facilement personnaliser. En cachant l’élément et en utilisant un label stylisé, vous pouvez créer une interface plus attrayante tout en permettant à l’utilisateur de sélectionner un fichier.

Résultat affiché :

Après avoir appliqué ces modifications, votre bouton de téléchargement aura une apparence circulaire avec une icône de téléchargement au centre. Ce bouton changera de couleur au survol, offrant ainsi une interaction fluide et moderne à l’utilisateur.

Mettre en place le retour du formulaire

Formation PHP 8 : Atelier Complet Débutant

Réalisez votre projet web de A à Z sous PHP 8

Dans cette étape, vous allez apprendre à gérer les retours d’informations lorsque l’utilisateur soumet un formulaire. Il est essentiel de fournir des retours clairs pour améliorer l’expérience utilisateur. Cela inclut les messages d’erreur en cas de problème (par exemple, un champ obligatoire non rempli) et des messages de succès si tout se passe bien.

Code PHP ajouté dans bien-insert.php

				
					
 <?php
include('cnx/cnx.php');
 ?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insérer un nouveau Bien</title>

<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-37924271-d5dd-4cda-80bb-33f59f62411a: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-37924271-d5dd-4cda-80bb-33f59f62411a: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"37924271-d5dd-4cda-80bb-33f59f62411a","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<article>
<section>
<form action="" method="post" enctype="multipart/form-data">
<h1>Insérer un Bien</h1>
<?php
if (isset($_POST['envoyer'])) {
    if (empty($_POST['bien'])) {
        echo '<div class="error">Merci de nommer le bien</div>';
    }
}
 ?>
<input type="text" name="bien" placeholder="Nom du Bien">
<p>Envoyer une image</p>
<div id="download">
<input type="file" name="monImage" id="fichier">
<label for="fichier">
<div>
<i class="fa-solid fa-download"></i>
</div>
</label>
</div>
<input type="submit" name="envoyer" value="Insérer">
</form>
</section>
</article>
<script src="https://kit.fontawesome.com/50786edb2e.js" crossorigin="anonymous" data-rocket-defer defer></script>
</body>
</html>

Ensuite, vous allez styliser les messages d’erreur et de succès dans votre fichier style.css :

				
					
 /****** Classes generiques ******/
.error, .success {
padding: 15px;
color: #f1c40f;
background-color: #e74c3c;
margin-bottom: 20px;
font-size: 19px;
font-weight: bold;
border-radius: 50px;
letter-spacing: 1px;
text-align: center;
}
.success{
background-color: #27ae60;
}
/****** Classes generiques ******/

Explication du code

Vérification du formulaire :Le script commence par inclure le fichier de connexion cnx.php.Une vérification est effectuée pour voir si le formulaire a été soumis (isset($_POST[‘envoyer’])).Si le champ « Nom du Bien » est vide, un message d’erreur est affiché (Merci de nommer le bien).
Affichage des messages :Les messages d’erreur et de succès sont stylisés avec des classes CSS .error et .success.Ces classes utilisent des couleurs vives pour attirer l’attention de l’utilisateur : rouge pour les erreurs (background-color: #e74c3c;) et vert pour les succès (background-color: #27ae60;).Les messages sont affichés au-dessus du champ de formulaire correspondant, offrant un retour immédiat à l’utilisateur.

Astuce Pratique : Lorsque vous gérez des formulaires, assurez-vous que chaque champ important a une validation côté serveur pour éviter les soumissions incomplètes ou incorrectes. Cela permet de maintenir l’intégrité des données et de garantir une bonne expérience utilisateur.

Résultat affiché :

Lorsque l’utilisateur soumet le formulaire sans remplir le champ « Nom du Bien », un message d’erreur rouge s’affichera avec le texte « Merci de nommer le bien » .

Validation des images dans le formulaire

Dans cette section, vous allez apprendre à vérifier que l’utilisateur a bien joint une image lors de la soumission du formulaire. Ce contrôle est essentiel pour éviter que des informations incomplètes ou incorrectes soient envoyées.

Code PHP ajouté dans bien-insert.php

				
					
 <?php
if (isset($_POST['envoyer'])) {
    if (empty($_POST['bien'])) {
        echo '<div class="error">Merci de nommer le bien</div>';
    } else {
        if (empty($_FILES['monImage']['tmp_name'])) {
            echo '<div class="error">Merci d\'envoyer une image</div>';
        }
    }
}
 ?>

Explication du code

Validation de l’image :Après avoir vérifié que le champ « Nom du Bien » n’est pas vide, le code s’assure que l’utilisateur a bien sélectionné une image.La conditionempty($_FILES[‘monImage’][‘tmp_name’])vérifie si un fichier a été uploadé en contrôlant le chemin temporaire du fichier téléchargé.Si l’image n’est pas envoyée, un message d’erreur s’affiche (Merci d’envoyer une image).
Séparation des erreurs :Le code distingue clairement les erreurs liées à l’absence du nom du bien et celles liées à l’absence d’image. Cela permet à l’utilisateur de savoir précisément quelle information manque.

Erreur Courante : Ne pas vérifier si une image a été envoyée peut entraîner des enregistrements incomplets dans la base de données ou des erreurs lors de l’affichage des données. Il est donc crucial de toujours valider les fichiers téléchargés avant de procéder à leur traitement.

Résultat affiché :

Lorsque le champ du nom de bien est rempli avec une valeur et que vous avez oublié de télécharger une image, puis que vous avez cliqué sur le bouton insérer, voici le résultat affiché

Télécharger des images via PHP

Dans cette section, vous allez apprendre à envoyer une image téléchargée via un formulaire HTML vers le serveur. L’image sera stockée dans un répertoire spécifique pour pouvoir être utilisée ultérieurement dans votre application.

Code PHP ajouté dans bien-insert.php :

				
					
 <?php
if (isset($_POST['envoyer'])) {
    if (empty($_POST['bien'])) {
        echo '<div class="error">Merci de nommer le bien</div>';
    } else {
        if (empty($_FILES['monImage']['tmp_name'])) {
            echo '<div class="error">Merci d\'envoyer une image</div>';
        } else {
            $dossierTempo = $_FILES['monImage']['tmp_name'];
            $dossierSite = 'ergonomier/images/'.$_FILES['monImage']['name'];
            $extension = strchr($_FILES['monImage']['name'], '.');
            $autorise = ['jpg','JPG'];
            if (in_array($extension, $autorise)) {
                $deplacer = move_uploaded_file($dossierTempo, $dossierSite);
            }
        }
    }
}
 ?>

Explication du code

Récupération et stockage temporaire :La variable$dossierTemporécupère le chemin temporaire où l’image est stockée lors de l’upload.$dossierSitedéfinit l’emplacement final où l’image sera déplacée sur le serveur. Ici, l’image sera stockée dans le répertoire ergonomie/images/.
Validation de l’extension :Le code utilise la fonctionstrchr()pour extraire l’extension du fichier image. Les extensions autorisées sont définies dans le tableau $autorise.Si l’extension est autorisée, la fonctionmove_uploaded_file()déplace l’image de son emplacement temporaire vers le répertoire final.

Question : Pourquoi est-il important de vérifier l’extension d’un fichier avant de l’envoyer sur le serveur ?

Vérifier l'extension des fichiers

Pour assurer la sécurité et la compatibilité des images téléchargées, il est crucial de vérifier l’extension du fichier avant de l’accepter sur le serveur. Cette section vous guide à travers le processus de contrôle de l’extension d’une image envoyée par un utilisateur.

Code PHP ajouté dans bien-insert.php :

				
					
 <?php
if (isset($_POST['envoyer'])) {
    if (empty($_POST['bien'])) {
        echo '<div class="error">Merci de nommer le bien</div>';
    } else {
        if (empty($_FILES['monImage']['tmp_name'])) {
            echo '<div class="error">Merci d\'envoyer une image</div>';
        } else {
            $dossierTempo = $_FILES['monImage']['tmp_name'];
            $dossierSite = 'ergonomier/images/'.$_FILES['monImage']['name'];
            $extension = strchr($_FILES['monImage']['name'], '.');
            $autorise = ['.jpg','.JPG'];
            if (in_array($extension, $autorise)) {
                $deplacer = move_uploaded_file($dossierTempo, $dossierSite);
            } else {
                echo '<div class="error">Cette extension d\'image n\'est pas autorisée</div>';
            }
        }
    }
}
 ?>

Explication du code

Vérification de l’extension :Le code utilise la fonctionin_array()pour vérifier si l’extension du fichier envoyé se trouve parmi les extensions autorisées définies dans le tableau $autorise.Si l’extension est autorisée, l’image est déplacée vers le dossier de destination à l’aide demove_uploaded_file().Si l’extension n’est pas autorisée, un message d’erreur est affiché (Cette extension d’image n’est pas autorisée).
Résultat affiché :

Lorsque vous remplissez le nom du bien avec succès et téléchargez une image ou un fichier ayant une extension différente de ‘.jpg’, il affichera ce résultat :

Insertion des données dans MySQL

Une fois que vous avez validé les données du formulaire et déplacé l’image sur le serveur, la prochaine étape consiste à insérer les informations du bien dans la base de données. Cette section vous montrera comment procéder à cette insertion en utilisant PHP.

Code PHP ajouté dans bien-insert.php

				
					
 <?php
if (isset($_POST['envoyer'])) {
    if (empty($_POST['bien'])) {
        echo '<div class="error">Merci de nommer le bien</div>';
    } else {
        if (empty($_FILES['monImage']['tmp_name'])) {
            echo '<div class="error">Merci d\'envoyer une image</div>';
        } else {
            $dossierTempo = $_FILES['monImage']['tmp_name'];
            $dossierSite = 'ergonomie/images/'.$_FILES['monImage']['name'];
            $extension = strchr($_FILES['monImage']['name'], '.');
            $autorise = ['.jpg','.JPG'];
            if (in_array($extension, $autorise)) {
                $deplacer = move_uploaded_file($dossierTempo, $dossierSite);
                $sql = 'INSERT INTO bien (bien,image) VALUES (:bien,:image)';
                $req = $cnx->prepare($sql);
                $retour = $req->execute(array(
                ':bien' => $_POST['bien'],
                ':image' => $_FILES['monImage']['name']
                ));
                if ($retour) {
                    echo '<div class="success">Le bien a été inséré</div>';
                } else {
                    echo '<div class="error">Le bien n\'a pas pu etre inséré</div>';
                }
            } else {
                echo '<div class="error">Cette extension d\'image n\'est pas autorisée</div>';
            }
        }
    }
}
 ?>

Explication du code

Insertion dans la base de données :Une fois les validations terminées, une requête SQL est préparée pour insérer le nom du bien et le nom du fichier de l’image dans la table bien.La méthodeprepare()est utilisée pour préparer la requête avec des paramètres nommés (:bien et :image) pour sécuriser les données.La méthodeexecute()est ensuite utilisée pour exécuter la requête avec les valeurs correspondantes.
Retour utilisateur :Un message de succès est affiché (Le bien a été inséré) si l’insertion est réussie.En cas d’échec, un message d’erreur est affiché pour informer l’utilisateur (Le bien n’a pas pu être inséré).

Erreur Courante : Oublier de déplacer l’image avant d’insérer les données peut entraîner un chemin d’image incorrect ou une insertion incomplète. Assurez-vous que l’image est correctement déplacée avant de procéder à l’insertion dans la base de données.

Résultat affiché :

Lorsque l’utilisateur soumet correctement le formulaire avec un nom de bien et une image, l’insertion dans la base de données se fait avec succès, et le message suivant apparaît en vert : « Le bien a été inséré » .
En revanche, si des erreurs surviennent (nom manquant, image non téléchargée ou extension non autorisée), les messages d’erreur correspondants apparaîtront en rouge.

Et lorsque vous vérifiez la table ‘bien’ dans votre base de données, vous trouvez ce résultat :

Vérification de l'existence des données

Avant d’insérer un nouveau bien dans la base de données, il est crucial de s’assurer qu’un bien avec le même nom n’existe pas déjà. Cela permet d’éviter les doublons et de garantir l’intégrité des données.

Code PHP ajouté dans bien-insert.php

				
					
 <?php
if (isset($_POST['envoyer'])) {
    if (empty($_POST['bien'])) {
        echo '<div class="error">Merci de nommer le bien</div>';
    } else {
        if (empty($_FILES['monImage']['tmp_name'])) {
            echo '<div class="error">Merci d\'envoyer une image</div>';
        } else {
            $dossierTempo = $_FILES['monImage']['tmp_name'];
            $dossierSite = 'ergonomie/images/'.$_FILES['monImage']['name'];
            $extension = strchr($_FILES['monImage']['name'], '.');
            $autorise = ['.jpg','.JPG'];
            if (in_array($extension, $autorise)) {
                $deplacer = move_uploaded_file($dossierTempo, $dossierSite);
                // vérifier si le bien existe dans la table
                $sql = 'SELECT bien FROM bien WHERE bien =:bien';
                $req = $cnx->prepare($sql);
                $req->execute(array(
                ':bien' => $_POST['bien'],
                ));
                $count = $req->rowCount();
                if ($count) {
                    echo '<div class="error">Ce Bien est déjà présent</div>';
                } else {
                    $sql = 'INSERT INTO bien (bien,image) VALUES (:bien,:image)';
                    $req = $cnx->prepare($sql);
                    $retour = $req->execute(array(
                    ':bien' => $_POST['bien'],
                    ':image' => $_FILES['monImage']['name']
                    ));
                    if ($retour) {
                        echo '<div class="success">Le bien a été inséré</div>';
                    } else {
                        echo '<div class="error">Le bien n\'a pas pu etre inséré</div>';
                    }
                }
            } else {
                echo '<div class="error">Cette extension d\'image n\'est pas autorisée</div>';
            }
        }
    }
}
 ?>

Explication du code

Vérification de l’existence du bien :Avant d’insérer les données, une requête SQL SELECT est effectuée pour vérifier si un bien portant le même nom existe déjà dans la table bien.La méthode rowCount() est utilisée pour compter le nombre de lignes retournées par la requête. Si le résultat est supérieur à 0, cela signifie que le bien existe déjà.
Gestion des doublons :Si un bien avec le même nom est trouvé, un message d’erreur est affiché (Ce Bien est déjà présent), et l’insertion est annulée.Si le bien n’existe pas, la procédure d’insertion continue normalement.

Résultat affiché :

Ici, lorsque vous saisissez un nom de bien déjà existant dans la table bien de la base de données, il affichera ce résultat :

Astuce Pratique : Pour renforcer la sécurité et éviter les duplications accidentelles, vous pouvez créer une contrainte d’unicité (UNIQUE) sur la colonne bien dans la base de données.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment créer une base de données avec phpMyAdmin ?

Pour créer une base de données avec phpMyAdmin, connectez-vous à votre serveur phpMyAdmin via un environnement local comme XAMPP ou WAMP. Une fois connecté, cliquez sur ‘Nouvelle base de données’, entrez le nom de la base de données, comme ‘bricks’, et sélectionnez le collationnement approprié, comme utf8mb4_general_ci. Ensuite, cliquez sur ‘Créer’. Cette procédure vous permet de gérer facilement votre base de données MySQL.

Comment configurer une instance PDO en PHP ?

Pour configurer une instance PDO en PHP, commencez par définir le Data Source Name (DSN) qui comprend le type de base de données, l’hôte, le nom de la base de données, et l’encodage des caractères. Utilisez ensuite la classe PDO pour établir la connexion en passant le DSN, le nom d’utilisateur, et le mot de passe. En cas d’erreur, utilisez un bloc try-catch pour capturer les exceptions PDO et gérer les erreurs de connexion.

Pourquoi utiliser multipart/form-data dans un formulaire HTML ?

L’attribut ‘multipart/form-data’ est utilisé dans un formulaire HTML lorsqu’il est nécessaire de télécharger des fichiers. Sans cet attribut, les fichiers ne seraient pas correctement transmis au serveur, car le type par défaut ‘application/x-www-form-urlencoded’ ne permet pas l’envoi de fichiers. Il est crucial pour garantir que les données binaires des fichiers sont envoyées avec les autres données du formulaire.

Comment styliser un formulaire HTML avec CSS ?

Pour styliser un formulaire HTML avec CSS, commencez par définir une police et un arrière-plan pour le body. Utilisez des sélecteurs pour cibler les éléments du formulaire, comme les input et les boutons, et appliquez des styles tels que des bordures, des couleurs d’arrière-plan, et des transitions. Vous pouvez utiliser des pseudo-classes comme :hover pour ajouter des effets interactifs, et ainsi améliorer l’expérience utilisateur.

Comment vérifier l'extension d'une image avant de l'envoyer sur le serveur ?

Pour vérifier l’extension d’une image avant de l’envoyer sur le serveur, récupérez d’abord le nom du fichier téléchargé, puis utilisez la fonction strchr() pour obtenir l’extension. Comparez l’extension avec une liste d’extensions autorisées, par exemple [‘.jpg’, ‘.png’]. Si l’extension est autorisée, procédez au téléchargement; sinon, affichez un message d’erreur pour informer l’utilisateur que l’extension n’est pas acceptée.

Conclusion

En suivant ces étapes, vous pouvez créer et gérer efficacement votre base de données MySQL avec phpMyAdmin et PHP. Quelles autres fonctionnalités aimeriez-vous explorer pour optimiser vos projets web?

Gérer une Base de Données MySQL avec PHP et phpMyAdmin

Formation PHP 8 : Atelier Complet Débutant

Créer une base MySQL avec phpMyAdmin

Configurer une instance PDO sécurisée

Créer un formulaire HTML avec PHP

Structurer le formulaire HTML PHP

Mettre en forme le formulaire HTML

Formation PHP 8 : Atelier Complet Débutant

Mettre en forme les éléments du formulaire

Formation PHP 8 : Atelier Complet Débutant

Mettre en forme l’input de type file

Formation PHP 8 : Atelier Complet Débutant

Mettre en place le retour du formulaire

Formation PHP 8 : Atelier Complet Débutant

Validation des images dans le formulaire

Télécharger des images via PHP

Vérifier l'extension des fichiers

Insertion des données dans MySQL

Vérification de l'existence des données

Formez-vous gratuitement avec Alphorm !

FAQ

Conclusion

Derniers Articles

Laisser un commentaire Annuler la réponse