One place for hosting & domains

      Comment personnaliser les composants de React avec des props


      L’auteur a choisi Creative Commons​​​ pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      Dans ce tutoriel, vous allez créer des composants personnalisés en passant des props à votre composant. Les props sont des arguments que vous fournissez à un élément JSX. Ils ressemblent à des props HTML standard, mais ils ne sont pas prédéfinis et peuvent avoir de nombreux types de données JavaScript différents, notamment des nombres, des chaînes de caractères, des fonctions, des tableaux et même d’autres composants React. Vos composants personnalisés peuvent utiliser des props pour afficher des données ou utiliser les données pour rendre les composants interactifs. Les props sont un élément clé de la création de composants adaptables à différentes situations, et en apprendre davantage à leur sujet vous donnera les outils nécessaires pour développer des composants personnalisés pouvant gérer des situations uniques.

      Après avoir ajouté des props à votre composant, vous utiliserez les PropTypes pour définir le type de données qu’un composant doit recevoir. Les PropTypes sont un système de type simple permettant de vérifier que les données correspondent aux types attendus pendant l’exécution. Ils servent à la fois de documentation et de vérificateur d’erreurs qui vous aideront à maintenir la prévisibilité de votre demande au fur et à mesure de son évolution.

      À la fin du tutoriel, vous saurez utiliser une variété de props pour construire une petite application qui prendra un ensemble de données sur les animaux et en affichera les informations (nom, nom scientifique, taille, régime alimentaire et informations supplémentaires).

      Note : La première étape consiste à mettre en place un projet vierge sur lequel vous allez construire l’exercice du tutoriel. Si vous avez déjà un projet de travail et que vous souhaitez directement travailler avec des props, commencez par l’étape 2.

      Conditions préalables

      Étape 1 – Créer un projet vide

      Dans cette étape, vous allez créer un nouveau projet en utilisant Create React App. Ensuite, vous supprimerez le projet type et les fichiers connexes qui sont installés lorsque vous démarrez le projet. Enfin, vous créerez une structure de fichiers simple pour organiser vos éléments.

      Pour commencer, faites un nouveau projet. Dans votre ligne de commande, exécutez le script suivant pour installer un nouveau projet en utilisant create-react-app :

      • npx create-react-app prop-tutorial

      Une fois le projet terminé, passez dans le répertoire :

      Dans un nouvel onglet ou une nouvelle fenêtre du terminal, démarrez le projet en utilisant le script de démarrage de l’application Create React. Le navigateur se réactualise automatiquement en fonction des changements, alors laissez ce script fonctionner pendant toute la durée de votre travail :

      Vous obtiendrez un serveur local en fonctionnement. Si le projet ne s’est pas ouvert dans une fenêtre de navigateur, vous pouvez l’ouvrir en naviguant vers http://localhost:3000/. Si vous l’exécutez à partir d’un serveur distant, l’adresse serahttp://your_domain:3000.

      Votre navigateur se chargera avec une simple application React incluse dans le cadre de Create React App :

      Modèle de projet React

      Vous allez construire un tout nouvel ensemble de composants personnalisés. Vous commencerez par effacer un code passe-partout afin de pouvoir avoir un projet vide.

      Pour commencer, ouvrez src/App.js dans un éditeur de texte. C’est le composant root (racine) qui est injecté dans la page. Tous les composants partiront de là. Vous pouvez trouver plus d’informations sur les App.js à Comment mettre en place un projet React avec Create React App.

      Ouvrez src/App.js avec la commande suivante :

      Vous verrez un fichier comme ceci :

      prop-tutorial/src/App.js

      import React from 'react';
      import logo from './logo.svg';
      import './App.css';
      
      function App() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
      
      export default App;
      

      Supprimez le logo d'importation de ligne de '/logo.svg';   Remplacez ensuite tout ce qui figure dans la déclaration de retour pour renvoyer un ensemble de balises vides : <></>. Vous obtiendrez ainsi une page de validation qui ne renvoie rien. Le code final ressemblera à ceci :

      prop-tutorial/src/App.js

      
      import React from 'react';
      import './App.css';
      
      function App() {
        return <></>;
      }
      
      export default App;
      

      Sauvegardez et quittez l’éditeur de texte.

      Enfin, supprimez le logo. Vous ne l’utiliserez pas dans votre demande et vous devez supprimer les fichiers inutilisés au fur et à mesure de votre travail. Cela vous évitera toute confusion à l’avenir.

      Dans la fenêtre du terminal, tapez la commande suivante :

      Si vous regardez votre navigateur, vous verrez un écran vide.

      écran vierge dans chrome

      Maintenant que vous avez éliminé l’exemple de projet Create React App, créez une structure de fichiers simple. Cela vous aidera à maintenir l’isolement et l’indépendance de vos composants.

      Créez un répertoire appelé components dans le répertoire src. Celui-ci contiendra tous vos composants personnalisés.

      Chaque composant aura son propre répertoire pour stocker le fichier du composant ainsi que les styles, les images s’il y en a, et les tests.

      Créez un répertoire pour App : 

      Déplacez tous les fichiers App dans ce répertoire. Utilisez le joker, *, pour sélectionner tous les fichiers qui commencent par App. quelle que soit leur extension. Utilisez ensuite la commande mv pour les placer dans le nouveau répertoire.

      • mv src/App.* src/components/App

      Enfin, mettez à jour le chemin d’importation relatif dans index.js, qui est le composant root qui amorce l’ensemble du processus.

      La déclaration d’importation doit pointer vers le fichier App.js dans le répertoire App, donc faites la modification suivante en surbrillance :

      prop-tutorial/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './components/App/App';
      import * as serviceWorker from './serviceWorker';
      
      ReactDOM.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>,
        document.getElementById('root')
      );
      
      // If you want your app to work offline and load faster, you can change
      // unregister() to register() below. Note this comes with some pitfalls.
      // Learn more about service workers: https://bit.ly/CRA-PWA
      serviceWorker.unregister();
      

      Enregistrez et quittez le fichier.

      Maintenant que le projet est mis en place, vous pouvez créer votre premier composant.

      Étape 2 – Construire des composants dynamiques avec des props

      Au cours de cette étape, vous créerez un composant qui changera en fonction des informations saisies, appelées props. Les props sont les arguments que vous passez à une fonction ou à une classe, mais comme vos composants sont transformés en objets de type HTML avec JSX, vous passerez les props comme s’il s’agissait d’attributs HTML. Contrairement aux éléments HTML, vous pouvez transmettre de nombreux types de données différents, des chaînes de caractères, des tables, des objets et même des fonctions.

      Ici, vous allez créer un composant qui affichera des informations sur les animaux. Ce composant prendra le nom et le nom scientifique de l’animal en tant que chaînes, la taille en tant que nombre entier, le régime alimentaire en tant que tableau de chaînes et des informations supplémentaires en tant qu’objet. Vous transmettrez les informations au nouveau composant en tant que props et consommerez ces informations dans votre composant.

      À la fin de cette étape, vous aurez un composant personnalisé qui consommera différents props. Vous pourrez également réutiliser le composant pour afficher un ensemble de données à l’aide d’un composant commun.

      Ajout de données

      Tout d’abord, vous avez besoin de quelques échantillons de données. Créez un fichier dans le répertoire src/App appelé data.

      • touch src/components/App/data.js

      Ouvrez le nouveau fichier dans votre éditeur de texte :

      • nano src/components/App/data.js

      Ensuite, ajoutez un tableau d’objets que vous utiliserez comme échantillon de données :

      prop-tutorial/src/components/App/data.js

      export default [
        {
          name: 'Lion',
          scientificName: 'Panthero leo',
          size: 140,
          diet: ['meat'],
        },
        {
          name: 'Gorilla',
          scientificName: 'Gorilla beringei',
          size: 205,
          diet: ['plants', 'insects'],
          additional: {
            notes: 'This is the eastern gorilla. There is also a western gorilla that is a different species.'
          }
        },
        {
          name: 'Zebra',
          scientificName: 'Equus quagga',
          size: 322,
          diet: ['plants'],
          additional: {
            notes: 'There are three different species of zebra.',
            link: 'https://en.wikipedia.org/wiki/Zebra'
          }
        }
      ]
      

      L’ensemble des objets contient une variété de données et vous donnera l’occasion d’essayer divers props. Chaque objet est un animal séparé avec le nom de l’animal, le nom scientifique, la taille, le régime alimentaire et un champ optionnel appelé additional, qui contiendra des liens ou des notes. Dans ce code, vous avez également exporté le tableau par défaut.

      Enregistrez et quittez le fichier.

      Créer des composants

      Ensuite, créez un composant placeholder appelé AnimalCard. Ce composant prendra éventuellement des props et affichera les données.

      Tout d’abord, créez un répertoire dans src/components appelé AnimalCard puis touchez un fichier appelé src/components/AnimalCard/AnimalCard.js et un fichier CSS appelé src/components/AnimalCard/AnimalCard.css.

      • mkdir src/components/AnimalCard
      • touch src/components/AnimalCard/AnimalCard.js
      • touch src/components/AnimalCard/AnimalCard.css

      Ouvrez AnimalCard.js dans votre éditeur de texte :

      • nano src/components/AnimalCard/AnimalCard.js

      Ajoutez un composant de base qui importe le CSS et renvoie une balise <h2>.

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard() {
        return <h2>Animal</h2>
      }
      

      Enregistrez et quittez le fichier. Vous devez maintenant importer les données et le composant dans votre composant App de base.

      Ouvrez src/composants/App/App.js :

      • nano src/components/App/App.js

      Importez les données et le composant, puis bouclez les données en retournant le composant pour chaque élément du tableau :

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      import data from './data';
      import AnimalCard from '../AnimalCard/AnimalCard';
      import './App.css';
      
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {data.map(animal => (
              <AnimalCard key={animal.name}/>
            ))}
          </div>
        )
      }
      
      export default App;
      

      Enregistrez et quittez le fichier. Ici, vous utilisez la méthode du tableau .map() pour itérer sur les données. En plus d’ajouter cette boucle, vous disposez également d’un diviseur d’enveloppe avec une classe que vous utiliserez pour le style et une balise <h1> pour étiqueter votre projet.

      Lorsque vous enregistrez, le navigateur se rechargera et vous verrez une étiquette pour chaque carte.

      Réagissez au projet dans le navigateur sans style

      Ensuite, ajoutez un peu de style pour aligner les articles. Ouvrez App.css :

      • nano src/components/App/App.css

      Remplacez le contenu par ce qui suit pour organiser les éléments :

      prop-tutorial/src/components/App/App.css

      .wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 20px;
      }
      
      .wrapper h1 {
          text-align: center;
          width: 100%;
      }
      

      Ce système utilisera la flexbox pour réorganiser les données afin qu’elles s’alignent. Le padding donne de l’espace dans la fenêtre du navigateur. justify-content répartira l’espace supplémentaire entre les éléments, et .wrapper h1 donnera au label Animal toute la largeur.

      Enregistrez et quittez le fichier. Lorsque vous le ferez, le navigateur se rafraîchira et vous verrez certaines données espacées.

      Projet React dans le navigateur avec des données espacées

      Ajouter des props

      Maintenant que vous avez mis en place vos composants, vous pouvez ajouter votre premier prop. Lorsque vous avez bouclé vos données, vous avez eu accès à chaque objet du tableau de données et aux éléments qu’il contenait. Vous ajouterez chaque élément des données à un prop distinct que vous utiliserez ensuite dans votre composant AnimalCard.

      Ouvrez App.js: 

      • nano src/components/App/App.js

      Ajoutez un prop name à AnimalCard.

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      ...
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {data.map(animal => (
              <AnimalCard
                key={animal.name}
                name={animal.name}
              />
            ))}
          </div>
        )
      }
      
      export default App;
      

      Enregistrez et quittez le fichier. Le prop name ressemble à un attribut HTML standard, mais au lieu d’une chaîne, vous passerez la propriété name de l’objet animal en accolades.

      Maintenant que vous avez passé un prop à la nouvelle composante, vous devez l’utiliser. Ouvrez le site AnimalCard.js :

      • nano src/components/AnimalCard/AnimalCard.js

      Tous les props que vous passez dans le composant sont rassemblés dans un objet qui sera le premier argument de votre fonction. Déstructurez l’objet pour en retirer des props individuels :

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      
      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard(props) {
        const { name } = props;
        return (
          <h2>{name}</h2>
        );
      }
      

      Notez que vous n’avez pas besoin de déstructurer un prop pour l’utiliser, mais que c’est une méthode utile pour traiter les données types de ce tutoriel.

      Après avoir déstructuré l’objet, vous pouvez utiliser les données individuelles. Dans ce cas, vous utiliserez le titre dans une balise <h2>, entourant la valeur d’accolades pour que React sache l’évaluer en JavaScript.

      Vous pouvez également utiliser une propriété sur l’objet prop en utilisant la notation par points. Par exemple, vous pourriez créer un élément <h2> comme celui-ci : <h2>{props.title}</h2>.   L’avantage de la déstructuration est que vous pouvez collecter les props non utilisés et utiliser l’opérateur de repos d’objet.

      Enregistrez et quittez le fichier. Lorsque vous le ferez, le navigateur se rechargera et vous verrez le nom spécifique de chaque animal au lieu d’un espace réservé.

      Projets React avec des noms d'animaux rendus

      La propriété name est une chaîne de caractères, mais les props peuvent être n’importe quel type de données que vous pourriez passer à une fonction JavaScript. Pour voir cela à l’œuvre, ajoutez le reste des données.

      Ouvrez le fichier App.js :

      • nano src/components/App/App.js

      Ajoutez un prop pour chacun des éléments suivants : scientificName, size, diet et additional. Ceux-ci comprennent des chaînes de caractères, des entiers, des tableaux et des objets.

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      ...
      
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {albums.map(album => (
              <AnimalCard
                additional={animal.additional}
                diet={animal.diet}
                key={animal.name}
                name={animal.name}
                scientificName={animal.scientificName}
                size={animal.size}
              />
            ))}
          </div>
        )
      }
      
      export default App;
      

      Puisque vous créez un objet, vous pouvez les ajouter dans l’ordre que vous voulez. L’ordre alphabétique permet de parcourir plus facilement une liste de props, surtout dans une liste plus longue. Vous pouvez également les ajouter sur la même ligne, mais le fait de les séparer à une par ligne permet de garder les choses lisibles.

      Enregistrez et fermez le fichier. Ouvrez AnimalCard.js.

      • nano src/components/AnimalCard/AnimalCard.js

      Cette fois, déstructurez les props dans la liste des paramètres de fonction et utilisez les données dans le composant :

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard({
        additional,
        diet,
        name,
        scientificName,
        size
      }) {
        return (
          <div>
            <h2>{name}</h2>
            <h3>{scientificName}</h3>
            <h4>{size}kg</h4>
            <div>{diet.join(', ')}.</div>
          </div>
        );
      }
      

      Après avoir extrait les données, vous pouvez ajouter scientificName et size dans les balises d’en-tête, mais vous devrez convertir le tableau en une chaîne pour que React puisse l’afficher sur la page. Vous pouvez le faire avec join(', '), ce qui créera une liste séparée par des virgules.

      Enregistrez et fermez le fichier. Lorsque vous le ferez, le navigateur se rafraîchira et vous verrez les données structurées.

      Projet React avec les animaux en disposant de données complètes

      Vous pourriez créer une liste similaire avec l’objet additional, mais en ajoutant une fonction pour alerter l’utilisateur avec les données. Cela vous donnera la possibilité de passer des fonctions comme props et d’utiliser ensuite les données à l’intérieur d’un composant lorsque vous appelez une fonction.

      Ouvrez App.js: 

      • nano src/components/App/App.js

      Créez une fonction appelée showAdditionalData qui convertira l’objet en une chaîne de caractères et l’affichera comme une alerte.

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      ...
      
      function showAdditional(additional) {
        const alertInformation = Object.entries(additional)
          .map(information => `${information[0]}: ${information[1]}`)
          .join('n');
        alert(alertInformation)
      };
      
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {data.map(animal => (
              <AnimalCard
                additional={animal.additional}
                diet={animal.diet}
                key={animal.name}
                name={animal.name}
                scientificName={animal.scientificName}
                showAdditional={showAdditional}
                size={animal.size}
              />
            ))}
          </div>
        )
      }
      
      export default App;
      

      La fonction showAdditional convertit l’objet en un tableau de paires où le premier élément est la clé et le second la valeur. Elle établit ensuite une correspondance avec les données en convertissant la paire de clés en une chaîne. Puis elle les joint avec un saut de ligne – n avant de passer la chaîne complète à la fonction d’alerte.

      Comme JavaScript peut accepter des fonctions comme arguments, React peut également accepter des fonctions comme props. Vous pouvez donc passer showAdditional à AnimalCard comme un prop appelé showAdditional. 

      Enregistrez et fermez le fichier. Ouvrez AnimalCard :

      • nano src/components/AnimalCard/AnimalCard.js

      Tirez la fonction showAdditional de l’objet props, puis créez un <bouton> avec un événement onClick qui appelle la fonction avec l’objet additional :

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard({
        additional,
        diet,
        name,
        scientificName,
        showAdditional,
        size
      }) {
        return (
          <div>
            <h2>{name}</h2>
            <h3>{scientificName}</h3>
            <h4>{size}kg</h4>
            <div>{diet.join(', ')}.</div>
            <button onClick={() => showAdditional(additional)}>More Info</button>
          </div>
        );
      }
      

      Sauvegardez le fichier. Lorsque vous le ferez, le navigateur se rafraîchira et vous verrez un bouton après chaque carte. Lorsque vous cliquez sur le bouton, vous obtenez une alerte avec les données supplémentaires.

      Alerte avec des informations

      Si vous essayez de cliquer sur Plus d’infos pour le Lion, vous obtiendrez une erreur. C’est parce qu’il n’y a pas de données supplémentaires pour le lion. Vous verrez comment régler ce problème à l’étape 3.

      Enfin, ajoutez un peu de style à la carte musicale. Ajoutez une classeNom de l’animal-wrapper à la div dans AnimalCard :

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
        return (
          <div className="animal-wrapper">
      ...
          </div>
        )
      }
      

      Enregistrez et fermez le fichier. Ouvrez AnimalCard.css :

      • nano src/components/AnimalCard/AnimalCard.css

      Ajoutez du CSS pour donner aux cartes et au bouton une petite bordure et du padding :

      prop-tutorial/src/components/AnimalCard/AnimalCard.css

      .animal-wrapper {
          border: solid black 1px;
          margin: 10px;
          padding: 10px;
          width: 200px;
      }
      
      .animal-wrapper button {
          font-size: 1em;
          border: solid black 1px;
          padding: 10;
          background: none;
          cursor: pointer;
          margin: 10px 0;
      }
      

      Ce CSS ajoutera une légère bordure à la carte et remplacera le style du bouton par défaut par une bordure et du paddding. cursor: pointer changera le curseur lorsque vous passerez sur le bouton. 

      Enregistrez et fermez le fichier. Lorsque vous le faites, le navigateur se rafraîchit et vous voyez les données dans les cartes individuelles.

      Projet React avec des cartes d'animaux stylisés

      À ce stade, vous avez créé deux composants personnalisés. Vous avez transmis des données au deuxième composant à partir du premier composant en utilisant des props. Les props incluent une variété de données, telles que des chaînes de caractères, des entiers, des tableaux, des objets et des fonctions. Dans votre deuxième composant, vous avez utilisé les props pour créer un composant dynamique en utilisant JSX.

      Dans l’étape suivante, vous utiliserez un système de types appelé prop-types pour spécifier la structure que votre composant s’attend à voir, ce qui créera de la prévisibilité dans votre application et empêchera les bugs.

      Étape 3 – Créer des props prévisibles avec les PropTypes et les defaultProps

      Dans cette étape, vous ajouterez un système de type léger à vos composants avec PropTypes. Les PropTypes agissent comme les autres systèmes de type en définissant explicitement le type de données que vous vous attendez à recevoir pour un certain prop. Ils vous donnent également la possibilité de définir des données par défaut dans les cas où le prop n’est pas toujours nécessaire. Contrairement à la plupart des systèmes de types, PropTypes est une vérification d’exécution, donc si les accessoires ne correspondent pas au type, le code se compilera quand même, mais affichera aussi une erreur de console.

      À la fin de cette étape, vous ajouterez de la prévisibilité à votre composant personnalisé en définissant le type de chaque prop. Ainsi, la prochaine personne qui travaillera sur le composant aura une idée claire de la structure des données dont le composant aura besoin.

      Le paquet prop-types est inclus dans l’installation de Create React App ; donc pour l’utiliser, il vous suffit de l’importer dans votre composant.

      Ouvrez AnimalCard.js :

      • nano src/components/AnimalCard/AnimalCard.js

      Ensuite, importez les PropTypes à partir des prop-types : 

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import PropTypes from 'prop-types';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
      }
      

      Ajoutez PropTypes directement à la fonction du composant.   En JavaScript, les fonctions sont des objets, ce qui signifie que vous pouvez ajouter des propriétés en utilisant la syntaxe des points. Ajoutez les PropTypes suivants à AnimalCard.js :

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import PropTypes from 'prop-types';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
      }
      
      AnimalCard.propTypes = {
        additional: PropTypes.shape({
          link: PropTypes.string,
          notes: PropTypes.string
        }),
        diet: PropTypes.arrayOf(PropTypes.string).isRequired,
        name: PropTypes.string.isRequired,
        scientificName: PropTypes.string.isRequired,
        showAdditional: PropTypes.func.isRequired,
        size: PropTypes.number.isRequired,
      }
      

      Enregistrez et fermez le fichier.

      Comme vous pouvez le voir, il existe de nombreux types de PropTypes différents. Ce n’est qu’un petit échantillon ; consultez la documentation officielle de React pour voir les autres que vous pouvez utiliser.

      Commençons par le prop name. Ici, vous spécifiez que name doit être une chaîne de caractères. La propriété scientificName est la même. size est un nombre, qui peut inclure à la fois des flotteurs comme 1,5 et des entiers comme 6. showAdditional est une fonction (func).

      diet, en revanche, est un peu différent. Dans ce cas, vous spécifiez que diet sera un tableau, mais vous devez également préciser ce que ce tableau contiendra. Dans ce cas, le tableau ne contiendra que des chaînes de caractères. Si vous voulez mélanger les types, vous pouvez utiliser un autre prop appelé oneOfType qui prend un ensemble de PropTypes valides. Vous pouvez utiliser oneOfType n’importe où, donc si vous voulez que size soit soit un nombre ou une chaîne, vous pouvez la changer en ceci : 

      size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
      

      Le prop additional est également un peu plus complexe. Dans ce cas, vous spécifiez un objet, mais pour être un peu plus clair, vous indiquez ce que vous voulez que l’objet contienne. Pour ce faire, vous utilisezPropTypes.shape, qui prend un objet avec des champs supplémentaires qui auront besoin de leurs propres PropTypes. Dans ce cas, link et notes sont tous deux PropTypes.string.

      Actuellement, toutes les données sont bien formées et correspondent aux props. Pour voir ce qui se passe si les PropTypes ne correspondent pas, ouvrez vos données :

      • nano src/components/App/data.js

      Changez la size en une chaîne sur le premier article :

      prop-tutorial/src/components/App/data.js

      export default [
        {
          name: 'Lion',
          scientificName: 'Panthero leo',
          size: '140',
          diet: ['meat'],
        },
      ...
      ]
      

      Sauvegardez le fichier. Lorsque vous le faites, le navigateur se rafraîchit et vous voyez une erreur dans la console.

      Error

      index.js:1 Warning: Failed prop type: Invalid prop `size` of type `string` supplied to `AnimalCard`, expected `number`. in AnimalCard (at App.js:18) in App (at src/index.js:9) in StrictMode (at src/index.js:8)

      Navigateur avec erreur de frappe

      Contrairement à d’autres systèmes de types tels que TypeScript, PropTypes ne vous donnera pas d’avertissement au moment de la construction, et tant qu’il n’y a pas d’erreurs de code, il continuera à se compiler. Cela signifie que vous pourriez accidentellement publier du code avec des erreurs de props.

      Remplacez les données par le type correct :

      prop-tutorial/src/components/App/data.js

      export default [
        {
          name: 'Lion',
          scientificName: 'Panthero leo',
          size: 140,
          diet: ['meat'],
        },
      ...
      ]
      

      Enregistrez et fermez le fichier.

      Ouvrez AnimalCard.js :

      • nano src/components/AnimalCard/AnimalCard.js

      Tous les props, à l’exception d’additional a la propriété isRequired.  Cela signifie qu’ils sont nécessaires. Si vous n’incluez pas un prop requis, le code se compilera quand même, mais vous verrez une erreur d’exécution dans la console.

      Si un prop n’est pas nécessaire, vous pouvez ajouter une valeur par défaut. Il est de bonne pratique de toujours ajouter une valeur par défaut pour éviter les erreurs d’exécution si un prop n’est pas nécessaire. Par exemple, dans le composant AnimalCard, vous appelez une fonction avec la donnée additional. Si elle n’est pas là, la fonction va essayer de modifier un objet qui n’existe pas et l’application va planter.

      Pour éviter ce problème, ajoutez un defaultProp pour additional :

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import PropTypes from 'prop-types';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
      }
      
      AnimalCard.propTypes = {
        additional: PropTypes.shape({
          link: PropTypes.string,
          notes: PropTypes.string
        }),
      ...
      }
      
      AnimalCard.defaultProps = {
        additional: {
          notes: 'No Additional Information'
        }
      }
      

      Vous ajoutez le defaultProps à la fonction en utilisant la syntaxe des points comme vous l’avez fait avec propTypes, puis vous ajoutez une valeur par défaut que le composant doit utiliser si le prop est undefined. Dans ce cas, vous faites correspondre la forme d'additional, y compris un message indiquant qu’il n’y a pas d’informations supplémentaires.

      Enregistrez et fermez le fichier. Lorsque vous le faites, le navigateur se rafraîchit. Après l’avoir actualisé, cliquez sur le bouton More info pour Lion. Il n’y a pas de champ additional dans les données, donc le prop est undefined.   Mais AnimalCard se substituera au prop par défaut.

      Navigateur avec message par défaut dans l'alerte

      Vos props sont désormais bien documentés et sont soit obligatoires, soit dotés d’une valeur par défaut pour garantir un code prévisible. Cela aidera les futurs développeurs (y compris vous-même) à comprendre les props dont un composant a besoin. Cela facilitera l’échange et la réutilisation de vos composants en vous donnant des informations complètes sur la manière dont le composant utilisera les données qu’il reçoit.

      Conclusion

      Dans ce tutoriel, vous avez créé plusieurs composants qui utilisent des props pour afficher les informations d’un parent. Les props vous donnent la souplesse nécessaire pour commencer à briser les gros composants en morceaux plus petits et plus ciblés. Maintenant que vous n’avez plus vos données étroitement couplées à vos informations d’affichage, vous avez la possibilité de faire des choix sur la manière de segmenter votre application.

      Les props sont un outil crucial dans la construction d’applications complexes, donnant la possibilité de créer des composants qui peuvent s’adapter aux données qu’ils reçoivent. Avec les PropTypes, vous créez des composants prévisibles et lisibles qui donneront à une équipe la possibilité de réutiliser le travail de chacun pour créer une base de code souple et stable. Si vous souhaitez consulter d’autres tutoriels de la série React, consultez notre page thématique React ou retournez à la page de la série Comment coder en React.js. 



      Source link

      Comment mettre en place un pare-feu avec UFW sur Ubuntu 20.04


      Introduction

      UFW, ou Uncomplicated Firewall, est une interface de gestion de pare-feu simplifiée qui masque la complexité des technologies de filtrage de paquets de niveau inférieur telles que iptables et nftables. Si vous souhaitez commencer à sécuriser votre réseau, et vous n’êtes pas sûr de l’outil à utiliser, UFW peut être le bon choix pour vous.

      Ce tutoriel vous montrera comment mettre en place un pare-feu avec UFW sur Ubuntu 20.04.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin de :

      UFW est installé par défaut sur Ubuntu. S’il a été désinstallé pour une raison quelconque, vous pouvez l’installer avec sudo apt install ufw.

      Étape 1 — Utilisation d’IPv6 avec UFW (facultatif)

      Ce tutoriel a été écrit en tenant compte d’IPv4, mais il fonctionnera aussi bien pour IPv6 pour autant que vous l’ayez activé. Si votre serveur Ubuntu a activé IPv6, assurez-vous qu’UFW est configuré pour prendre en charge IPv6 afin de gérer les règles de pare-feu pour IPv6 en plus d’IPv4. Pour ce faire, ouvrez la configuration UFW avec nano ou votre éditeur préféré.

      • sudo nano /etc/default/ufw

      Ensuite, assurez-vous que la valeur d’IPV6 est yes. Cela devrait ressembler à ceci :

      /etc/default/ufw excerpt

      IPV6=yes
      

      Enregistrez et fermez le fichier. Maintenant, lorsque l’UFW est activé, il sera configuré pour écrire les règles de pare-feu IPv4 et IPv6. Cependant, avant d’activer UFW, nous voulons nous assurer que votre pare-feu est configuré pour vous permettre de vous connecter via SSH. Commençons par définir les politiques par défaut.

      Étape 2 — Mise en place des politiques par défaut

      Si vous commencez tout juste à utiliser votre pare-feu, les premières règles à définir sont vos politiques par défaut. Ces règles contrôlent la manière de traiter le trafic qui ne correspond pas explicitement à d’autres règles. Par défaut, UFW est configuré pour refuser toutes les connexions entrantes et autoriser toutes les connexions sortantes. Cela signifie que toute personne essayant d’atteindre votre serveur ne pourra pas se connecter, tandis que toute application à l’intérieur du serveur pourra atteindre le monde extérieur.

      Remettons vos règles UFW à leur valeur par défaut afin que nous puissions être sûrs que vous pourrez suivre ce tutoriel. Pour définir les valeurs par défaut utilisées par UFW, utilisez ces commandes :

      • sudo ufw default deny incoming
      • sudo ufw default allow outgoing

      Ces commandes définissent les valeurs par défaut pour refuser les connexions entrantes et autoriser les connexions sortantes. Ces paramètres par défaut du pare-feu peuvent suffire pour un ordinateur personnel, mais les serveurs doivent généralement répondre aux demandes entrantes d’utilisateurs extérieurs. Nous verrons cela plus loin.

      Étape 3 — Autoriser les connexions SSH

      Si nous activions notre pare-feu UFW maintenant, il refuserait toutes les connexions entrantes. Cela signifie que nous devrons créer des règles qui autorisent explicitement les connexions entrantes légitimes – connexions SSH ou HTTP, par exemple – si nous voulons que notre serveur réponde à ce type de demandes. Si vous utilisez un serveur cloud, vous voudrez probablement autoriser les connexions SSH entrantes afin de pouvoir vous connecter à votre serveur et le gérer.

      Pour configurer votre serveur afin d’autoriser les connexions SSH entrantes, vous pouvez utiliser cette commande :

      Cela créera des règles de pare-feu qui autoriseront toutes les connexions sur le port 22, qui est le port que le démon SSH écoute par défaut. UFW sait quel port allow ssh désigne parce qu’il est listé comme un service dans le fichier /etc/services.

      Cependant, nous pouvons réellement écrire la règle équivalente en spécifiant le port au lieu du nom du service. Par exemple, cette commande fonctionne de la même manière que celle ci-dessus :

      Si vous avez configuré votre démon SSH pour utiliser un port différent, vous devrez spécifier le port approprié. Par exemple, si votre serveur SSH écoute sur le port 2222, vous pouvez utiliser cette commande pour autoriser les connexions sur ce port :

      Maintenant que votre pare-feu est configuré pour autoriser les connexions SSH entrantes, nous pouvons l’activer.

      Étape 4 — Activation d’UFW

      Pour activer UFW, utilisez cette commande :

      Vous recevrez un avertissement qui indique que la commande peut perturber les connexions SSH existantes. Nous avons déjà mis en place une règle de pare-feu qui autorise les connexions SSH, donc nous pouvons continuer. Répondez à l’invite avec y et appuyez sur ENTER.

      Le pare-feu est maintenant actif. Exécutez la commande sudo ufw status verbose pour connaître les règles fixées. Le reste de ce tutoriel explique plus en détail comment utiliser UFW, par exemple en autorisant ou en refusant différents types de connexions.

      Étape 5 — Autoriser d’autres connexions

      À ce stade, vous devez autoriser toutes les autres connexions auxquelles votre serveur a besoin de répondre. Les connexions que vous devez autoriser dépendent de vos besoins spécifiques. Heureusement, vous savez déjà comment écrire des règles qui autorisent les connexions basées sur un nom de service ou un port ; nous l’avons déjà fait pour SSH sur le port 22. Vous pouvez également le faire pour :

      • HTTP sur le port 80, qui est ce qu’utilisent les serveurs web non cryptés, en utilisant sudo ufw allow http ou sudo ufw allow 80
      • HTTPS sur le port 443, qui est ce qu’utilisent les serveurs web cryptés, en utilisant sudo ufw allow https ou sudo ufw allow 443

      Il existe plusieurs autres moyens d’autoriser d’autres connexions, outre la spécification d’un port ou d’un service connu.

      Plages de ports spécifiques

      Vous pouvez spécifier des plages de ports avec UFW. Certaines applications utilisent plusieurs ports, au lieu d’un seul.

      Par exemple, pour autoriser les connexions X11 qui utilisent les ports 60006007, utilisez ces commandes :

      • sudo ufw allow 6000:6007/tcp
      • sudo ufw allow 6000:6007/udp

      Lorsque vous spécifiez des plages de ports avec UFW, vous devez spécifier le protocole (tcp ou udp) auquel les règles doivent s’appliquer. Nous n’avons pas mentionné cela auparavant car le fait de ne pas spécifier le protocole autorise automatiquement les deux protocoles, ce qui est correct dans la plupart des cas.

      Adresses IP spécifiques

      Lorsque vous travaillez avec UFW, vous pouvez également spécifier des adresses IP. Par exemple, si vous souhaitez autoriser les connexions à partir d’une adresse IP spécifique, comme une adresse IP professionnelle ou personnelle de 203.0.113.4, vous devez spécifier from, puis l’adresse IP :

      • sudo ufw allow from 203.0.113.4

      Vous pouvez également spécifier un port spécifique auquel l’adresse IP est autorisée à vous connecter en ajoutant to any port suivi du numéro de port. Par exemple, Si vous souhaitez autoriser 203.0.113.4 à se connecter au port 22 (SSH), utilisez cette commande :

      • sudo ufw allow from 203.0.113.4 to any port 22

      Sous réseaux

      Si vous souhaitez autoriser un sous-réseau d’adresses IP, vous pouvez le faire en utilisant la notation CIDR pour spécifier un masque de réseau. Par exemple, si vous souhaitez autoriser toutes les adresses IP allant de 203.0.113.1 à 203.0.113.254 vous pourriez utiliser cette commande :

      • sudo ufw allow from 203.0.113.0/24

      De même, vous pouvez également spécifier le port de destination auquel le sous-réseau 203.0.113.0/24 est autorisé à se connecter. Une fois encore, nous utiliserons le port 22 (SSH) comme exemple :

      • sudo ufw allow from 203.0.113.0/24 to any port 22

      Connexion à une interface réseau spécifique

      Si vous souhaitez créer une règle de pare-feu qui s’applique uniquement à une interface réseau spécifique, vous pouvez le faire en spécifiant « allow in on » suivi du nom de l’interface.

      Vous pouvez consulter vos interfaces réseau avant de continuer. Pour ce faire, utilisez cette commande :

      Output Excerpt

      2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state . . . 3: eth1: <BROADCAST,MULTICAST> mtu 1500 qdisc noop state DOWN group default . . .

      Le résultat mis en évidence indique les noms d’interface réseau. Elles sont généralement nommées par quelque chose comme : eth0 ou enp3s2.

      Donc, si votre serveur a une interface réseau publique appelée eth0, vous pouvez l’autoriser à recevoir du trafic HTTP (port 80) avec cette commande :

      • sudo ufw allow in on eth0 to any port 80

      Cela permettrait à votre serveur de recevoir des requêtes HTTP de l’Internet public.

      Ou, si vous voulez que votre serveur de base de données MySQL (port 3306) écoute les connexions sur l’interface de réseau privé eth1, par exemple, vous pourriez utiliser cette commande :

      • sudo ufw allow in on eth1 to any port 3306

      Cela permettrait à d’autres serveurs de votre réseau privé de se connecter à votre base de données MySQL.

      Étape 6 — Refuser les connexions

      Si vous n’avez pas modifié la politique par défaut des connexions entrantes, UFW est configuré pour refuser toutes les connexions entrantes. En général, cela simplifie le processus de création d’une politique de pare-feu sécurisée en vous obligeant à créer des règles qui autorisent explicitement le passage de ports et d’adresses IP spécifiques.

      Cependant, il peut arriver que vous souhaitiez refuser des connexions spécifiques en fonction de l’adresse IP source ou du sous-réseau, peut-être parce que vous savez que votre serveur est attaqué à partir de là. De plus, si vous souhaitez modifier votre politique d’entrée par défaut a allow (ce qui n’est pas recommandé), vous devrez créer des règles deny pour tous les services ou adresses IP pour lesquels vous ne souhaitez pas autoriser les connexions.

      Pour écrire des règles deny, vous pouvez utiliser les commandes décrites ci-dessus, en remplaçant allow par deny.

      Par exemple, pour refuser des connexions HTTP, vous pourriez utiliser cette commande :

      Ou si vous souhaitez refuser toutes les connexions à partir de 203.0.113.4 vous pouvez utiliser cette commande :

      • sudo ufw deny from 203.0.113.4

      Examinons maintenant comment supprimer des règles.

      Étape 7 — Suppression de règles

      Savoir comment supprimer des règles de pare-feu est tout aussi important que de savoir comment les créer. Il existe deux façons différentes de spécifier les règles à supprimer : par le numéro de la règle ou par la règle elle-même (de la même façon que les règles ont été spécifiées lors de leur création). Nous commencerons par la méthode delete by rule number, car elle est plus facile.

      Par numéro de règle

      Si vous utilisez le numéro de règle pour supprimer des règles de pare-feu, la première chose que vous voudrez faire est d’obtenir une liste de vos règles de pare-feu. La commande UFW status permet d’afficher des numéros à côté de chaque règle, comme illustré ici :

      Numbered Output:

      Status: active To Action From -- ------ ---- [ 1] 22 ALLOW IN 15.15.15.0/24 [ 2] 80 ALLOW IN Anywhere

      Si nous décidons que nous voulons supprimer la règle 2, celle qui autorise les connexions sur le port 80 (HTTP), nous pouvons la spécifier dans une commande de suppression UFW comme celle-ci :

      Cela affichera une demande de confirmation puis supprimera la règle 2, qui autorise les connexions HTTP. Notez que si vous avez activé IPv6, vous voudrez également supprimer la règle IPv6 correspondante.

      Par règle réelle

      L’alternative aux numéros de règle est de spécifier la règle réelle à supprimer. Par exemple, si vous voulez supprimer la règle allow http, vous pouvez l’écrire comme ceci :

      • sudo ufw delete allow http

      Vous pouvez également spécifier la règle par allow 80, au lieu de par nom de service :

      Cette méthode supprimera les règles IPv4 et IPv6, si elles existent.

      Étape 8 — Vérification de l’état et des règles d’UFW

      À tout moment, vous pouvez vérifier le statut d’UFW avec cette commande :

      Si UFW est désactivé, ce qui est le cas par défaut, vous verrez quelque chose comme ceci :

      Output

      Status: inactive

      Si UFW est actif, ce qui devrait être le cas si vous avez suivi l’étape 3, la sortie indiquera qu’il est actif et énumérera toutes les règles qui sont définies. Par exemple, si le pare-feu est configuré pour autoriser les connexions SSH (port 22) de n’importe où, la sortie pourrait ressembler à ceci :

      Output

      Status: active Logging: on (low) Default: deny (incoming), allow (outgoing), disabled (routed) New profiles: skip To Action From -- ------ ---- 22/tcp ALLOW IN Anywhere

      Utilisez la commande status si vous souhaitez vérifier comment UFW a configuré le pare-feu.

      Étape 9 – Désactivation ou réinitialisation d’UFW (facultatif)

      Si vous décidez que vous ne voulez pas utiliser UFW, vous pouvez le désactiver avec cette commande :

      Toutes les règles que vous avez créées avec UFW ne seront plus actives. Vous pourrez toujours exécuter la commande sudo ufw enable si vous devez l’activer plus tard.

      Si vous avez déjà configuré des règles UFW mais que vous décidez de tout recommencer, vous pouvez utiliser la commande reset :

      Cela désactivera l’UFW et supprimera toutes les règles qui ont été définies précédemment. Gardez à l’esprit que les règles par défaut ne retrouveront pas leurs paramètres d’origine, si vous les avez modifiées à un moment quelconque. Cela devrait vous permettre de repartir à zéro avec UFW.

      Conclusion

      Votre pare-feu est maintenant configuré pour autoriser (au moins) les connexions SSH. Veillez à autoriser toutes les autres connexions entrantes dont votre serveur a besoin, tout en limitant les connexions inutiles, afin que votre serveur soit fonctionnel et sécurisé.

      Pour en savoir plus sur les configurations UFW les plus courantes, consultez le tutoriel UFW Essentials : Règles et commandes communes de pare-feu.



      Source link

      Comment utiliser le type de données BLOB MySQL pour stocker des images avec PHP sur Ubuntu 18.04


      L’auteur a sélectionné Girls Who Code pour recevoir un don dans le cadre de l’initiative Écrire pour des donations. 

      Introduction

      Un Binary Large Object (BLOB) est un type de données MySQL qui peut stocker des données binaires telles que des images, du multimédia et des fichiers PDF.

      Lors de la création d’applications qui nécessitent une base de données étroitement couplée où les images doivent être synchronisées avec les données connexes (par exemple, un portail d’employés, une base de données d’étudiants ou une application financière), vous pouvez trouver pratique de stocker des images telles que les photos et signatures de passeport des étudiants dans une base de données MySQL avec d’autres informations connexes.

      C’est là qu’intervient le type de données MySQL BLOB. Cette approche de programmation élimine la nécessité de créer un système de fichiers séparé pour le stockage des images. Le système centralise également la base de données, la rendant plus portable et plus sécurisée car les données sont isolées du système de fichiers. La création de sauvegardes est également plus transparente puisque vous pouvez créer un seul fichier MySQL dump qui contient toutes vos données.

      La récupération des données est plus rapide, et lors de la création des enregistrements, vous pouvez être sûr que les règles de validation des données et l’intégrité référentielle sont maintenues, en particulier lors de l’utilisation des transactions MySQL.

      Dans ce tutoriel, vous allez utiliser le type de données MySQL BLOB pour stocker des images avec PHP sur Ubuntu 18.04.

      Conditions préalables

      Pour suivre ce guide, vous aurez besoin des éléments suivants :

      Étape 1 — Création d’une base de données

      Vous commencerez par créer un exemple de base de données de votre projet. Pour ce faire, connectez-vous en SSH à votre serveur, puis exécutez la commande suivante pour vous connecter à votre serveur MySQL en tant que root :

      Entrez le mot de passe root de votre base de données MySQL et appuyez sur ENTER pour continuer.

      Ensuite, exécutez la commande suivante pour créer une base de données. Dans ce tutoriel, nous l’appellerons test_company :

      • CREATE DATABASE test_company;

      Une fois la base de données créée, vous verrez le résultat suivant :

      Output

      Query OK, 1 row affected (0.01 sec)

      Ensuite, créez un compte test_user sur le serveur MySQL et n’oubliez pas de remplacer PASSWORD par un mot de passe fort :

      • CREATE USER 'test_user'@'localhost' IDENTIFIED BY 'PASSWORD';

      Vous verrez la sortie suivante :

      Output

      Query OK, 0 rows affected (0.01 sec)

      Pour accorder des privilèges complets à test_user sur la base de données test_company, exécutez :

      • GRANT ALL PRIVILEGES ON test_company.* TO 'test_user'@'localhost';

      Vérifiez que vous obtenez le résultat suivant :

      Output

      Query OK, 0 rows affected (0.01 sec)

      Enfin, videz la table des privilèges afin que MySQL recharge les autorisations :

      Assurez-vous de voir le résultat suivant :

      Output

      Query OK, 0 rows affected (0.01 sec)

      Maintenant que la base de données test_company et test_user sont prêts, vous allez passer à la création du tableau products pour le stockage d’échantillons de produits.  Vous utiliserez cette table plus tard pour insérer et récupérer des enregistrements afin de faire la démonstration du fonctionnement de MySQL BLOB.

      Déconnectez-vous du serveur MySQL :

      Ensuite, reconnectez-vous avec les informations d’identification du test_user que vous avez créé :

      Entrez le mot de passe du test_user et appuyez sur ENTER (ENTRÉE) pour continuer. Ensuite, passez à la base de données test_company en tapant ce qui suit :

      Une fois la base de données test_company sélectionnée, MySQL affichera :

      Output

      Database changed

      Ensuite, créez un tableau products en exécutant :

      • CREATE TABLE `products` (product_id BIGINT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(50), price DOUBLE, product_image BLOB) ENGINE = InnoDB;

      Cette commande crée un tableau nommé products. Le tableau contient quatre colonnes :

      • product_id : Cette colonne utilise un type de données BIGINT afin d’accueillir une grande liste de produits jusqu’à un maximum de 2⁶³-1 articles. Vous avez marqué la colonne comme PRIMARY KEY pour identifier les produits de manière unique. Pour que MySQL puisse gérer la génération de nouveaux identifiants pour des colonnes insérées, vous avez utilisé le mot-clé AUTO_INCREMENT.

      • product_name : Cette colonne contient les noms des produits. Vous avez utilisé le type de données VARCHAR car ce champ gère généralement des caractères alphanumériques jusqu’à un maximum de 50 caractères — la limite de 50 n’est qu’une valeur hypothétique utilisée pour les besoins de ce tutoriel.

      • price : à des fins de démonstration, votre tableau products contient la colonne price pour stocker le prix de détail des produits. Comme certains produits peuvent avoir des valeurs flottantes (par exemple, 23.69, 45,36, 102.99), vous avez utilisé le type de données DOUBLE.

      • product_image : Cette colonne utilise un type de données BLOB pour stocker les données binaires réelles des images des produits.

      Vous avez utilisé le moteur de stockage InnoDB pour la table afin de prendre en charge un large éventail de fonctionnalités, y compris les transactions MySQL. Après avoir exécuté ceci pour créer le tableau products, vous verrez le résultat suivant :

      Output

      Query OK, 0 rows affected (0.03 sec)

      Déconnectez-vous de votre serveur MySQL :

      Vous obtiendrez le résultat suivant

      Output

      Bye

      Le tableau products est maintenant prêt à stocker quelques enregistrements, y compris des images des produits et vous le remplirez avec quelques produits lors de la prochaine étape.

      Étape 2 — Création d’un script PHP pour connecter et alimenter la base de données

      Au cours de cette étape, vous allez créer un script PHP qui se connectera à la base de données MySQL que vous avez créée à l’Etape 1. Le script préparera trois exemples de produits et les insérera dans le tableau products.

      Pour créer le code PHP, ouvrez un nouveau fichier avec l’éditeur de texte :

      • sudo nano /var/www/html/config.php

      Entrez ensuite dans le fichier et remplacez PASSWORD avec le mot de passe de test_user que vous avez créé à l’Étape 1 :

      /var/www/html/config.php

      <?php
      
      define('DB_NAME', 'test_company');
      define('DB_USER', 'test_user');
      define('DB_PASSWORD', 'PASSWORD');
      define('DB_HOST', 'localhost');
      
      $pdo = new PDO("mysql:host=" . DB_HOST . "; dbname=" . DB_NAME, DB_USER, DB_PASSWORD);
      $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
      $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
      
      

      Enregistrez et fermez le fichier.

      Dans ce fichier, vous avez utilisé quatre constantes PHP pour vous connecter à la base de données MySQL que vous avez créée à l’Étape 1 :

      • DB_NAME : Cette constante contient le nom de la base de données test_company.

      • DB_USER : Cette variable contient le nom de l’utilisateur test_user.

      • DB_PASSWORD : Cette constante stocke le PASSWORD MySQL du compte test_user.

      • DB_HOST : Représente le serveur sur lequel réside la base de données. Dans ce cas, vous utilisez le serveur localhost.

      La ligne suivante de votre fichier initie un PHP Data Object (PDO) et se connecte à la base de données MySQL :

      ...
      $pdo = new PDO("mysql:host=" . DB_HOST . "; dbname=" . DB_NAME, DB_USER, DB_PASSWORD);
      ...
      

      Vers la fin du fichier, vous avez défini quelques attributs PDO :

      • ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION : cet attribut indique au PDO de lancer une exception qui peut être enregistrée à des fins de débogage.
      • ATTR_EMULATE_PREPARES, false : Cette option augmente la sécurité en demandant au moteur de base de données MySQL de faire le préparation au lieu de PDO.

      Vous allez inclure le fichier /var/www/html/config.php dans deux scripts PHP que vous créerez ensuite pour insérer et récupérer des enregistrements, respectivement.

      Tout d’abord, créez le script /var/www/html/insert_products.php PHP pour l’insertion des enregistrements dans le tableau products :

      • sudo nano /var/www/html/insert_products.php

      Ajoutez ensuite les informations suivantes dans le fichier /var/www/html/insert_products.php :

      /var/www/html/insert_products.php

      <?php
      
      require_once 'config.php';
      
      $products = [];
      
      $products[] = [
                    'product_name' => 'VIRTUAL SERVERS',
                    'price' => 5,
                    'product_image' => file_get_contents("https://i.imgur.com/VEIKbp0.png")
                    ];
      
      $products[] = [
                    'product_name' => 'MANAGED KUBERNETES',
                    'price' => 30,
                    'product_image' => file_get_contents("https://i.imgur.com/cCc9Gw9.png")
                    ];
      
      $products[] = [
                    'product_name' => 'MySQL DATABASES',
                    'price' => 15,
                    'product_image' => file_get_contents("https://i.imgur.com/UYcHkKD.png" )
                    ];
      
      $sql = "INSERT INTO products(product_name, price, product_image) VALUES (:product_name, :price, :product_image)";
      
      foreach ($products as $product) {
          $stmt = $pdo->prepare($sql);
          $stmt->execute($product);
      }
      
      echo "Records inserted successfully";
      

      Enregistrez et fermez le fichier.

      Dans le fichier, vous avez inclus le fichier config.php en haut. C’est le premier fichier que vous avez créé pour définir les variables de la base de données et vous connecter à la base de données. Le fichier initie également un objet PDO et le stocke dans une variable $pdo.

      Ensuite, vous avez créé un tableau des données des produits à insérer dans la base de données. Outre product_name et price, qui sont préparés respectivement sous forme de chaînes de caractères et de valeurs numériques, le script utilise la fonction intégrée file_get_contents de PHP pour lire les images d’une source externe et les transmettre sous forme de chaînes de caractères à la colonne product_image.

      Ensuite, vous avez préparé une instruction SQL et utilisé l’instruction foreach{...} de PHP pour insérer chaque produit dans la base de données.

      Pour exécuter le fichier /var/www/html/insert_products.php, exécutez-le dans la fenêtre de votre navigateur en utilisant l’URL suivante. N’oubliez pas de remplacer your-server-IP par l’adresse IP publique de votre serveur :

      http://your-server-IP/insert_products.php
      

      Après l’exécution du fichier, vous verrez un message de confirmation dans votre navigateur confirmant que les enregistrements ont été insérés dans la base de données.

      Un message de réussite montrant que les enregistrements ont été insérés dans la base de données

      Vous avez correctement inséré trois enregistrements contenant des images de produit dans la table products. Dans l’étape suivante, vous allez créer un script PHP pour récupérer ces enregistrements et les afficher dans votre navigateur.

      Étape 3 — Afficher les informations des produits à partir de la base de données MySQL

      Avec les informations et les images des produits dans la base de données, vous allez maintenant coder un autre script PHP qui interroge et affiche les informations des produits dans un tableau HTML sur votre navigateur.

      Pour créer le fichier, tapez ce qui suit :

      • sudo nano /var/www/html/display_products.php

      Entrez ensuite les informations suivantes dans le fichier :

      /var/www/html/display_products.php

      <html>
        <title>Using BLOB and MySQL</title>
        <body>
      
        <?php
      
        require_once 'config.php';
      
        $sql = "SELECT * FROM products";
        $stmt = $pdo->prepare($sql);
        $stmt->execute();
        ?>
      
        <table border="1" align = 'center'> <caption>Products Database</caption>
          <tr>
            <th>Product Id</th>
            <th>Product Name</th>
            <th>Price</th>
            <th>Product Image</th>
          </tr>
      
        <?php
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            echo '<tr>';
            echo '<td>' . $row['product_id'] . '</td>';
            echo '<td>' . $row['product_name'] . '</td>';
            echo '<td>' . $row['price'] . '</td>';
            echo '<td>' .
            '<img src = "data:image/png;base64,' . base64_encode($row['product_image']) . '" width = "50px" height = "50px"/>'
            . '</td>';
            echo '</tr>';
        }
        ?>
      
        </table>
        </body>
      </html>
      

      Sauvegardez les modifications du fichier et fermez-le.

      Ici, vous avez de nouveau inclus le fichier config.php afin de vous connecter à la base de données. Ensuite, vous avez préparé et exécuté une instruction SQL en utilisant PDO pour récupérer tous les éléments du tableau products à l’aide de la commande SELECT * FROM products.

      Ensuite, vous avez créé un tableau HTML et l’avez rempli avec les données des produits en utilisant l’instruction PHP while() {...}. La ligne $row = $stmt->fetch(PDO::FETCH_ASSOC) interroge la base de données et stocke le résultat dans la variable $row sous la forme d’un tableau multidimensionnel, que vous avez ensuite affiché dans une colonne du tableau HTML en utilisant la syntaxe $row['column_name'].

      Les images de la colonne product_image sont jointes dans les balises <img src = "">. Vous avez utilisé les attributs width et height pour redimensionner les images à une taille plus petite qui peut tenir dans la colonne du tableau HTML.

      Afin de convertir en images les données détenues par le type de données BLOB, vous avez utilisé la fonction PHP base64_encode intégrée et la syntaxe suivante pour le schéma Data URI :

      data:media_type;base64, base_64_encoded_data
      

      Dans ce cas, l’image/png est le media_type et la chaîne codée en Base64 de la colonne product_image est la base_64_encoded_data.

      Ensuite, exécutez le fichier display_products.php dans un navigateur web en tapant l’adresse suivante :

      http://your-server-IP/display_products.php
      

      Après avoir exécuté le fichier display_products.php dans votre navigateur, vous verrez un tableau HTML avec une liste de produits et d’images associées.

      Liste des produits de la base de données MySQL

      Cela confirme que le script PHP pour la récupération des images de MySQL fonctionne comme prévu.

      Conclusion

      Dans ce guide, vous avez utilisé le type de données MySQL BLOB pour stocker et afficher des images avec PHP sur Ubuntu 18.04. Vous avez également vu les avantages fondamentaux du stockage des images dans une base de données par rapport au stockage dans un système de fichiers. Il s’agit notamment de la portabilité, de la sécurité et de la facilité de sauvegarde. Si vous créez une application telle qu’un portail d’étudiants ou une base de données d’employés qui nécessite de stocker ensemble des informations et des images connexes, alors cette technologie peut vous être d’une grande utilité.

      Pour plus d’informations sur les types de données pris en charge dans MySQL, suivez le guide des Types de données MySQL. Si vous êtes intéressé par d’autres contenus relatifs à MySQL et PHP, consultez les tutoriels suivants :



      Source link