Comment rendre responsive ces exemples

Résolu
flexi2202 -  
bonjour a tous

je viens de suivre ce tuto pour faire un tableau en responsive d un code php
mais cela ne semble pas fonctionner
j ai bien ma colonne et mes lignes , mais pas moyen que tout cela soit responsive

merci de l aide 

<?php
    
       include('./base.php');
       
     
    if(isset($_POST['entrees']))
{
                 $pseudo= htmlspecialchars($_POST['pseudo']);
                 $passe = htmlspecialchars($_POST['passe']);
                 $confirm_passe = htmlspecialchars($_POST['confirm_passe']);  
		
		             $passe_hache = password_hash($_POST['passe'], PASSWORD_DEFAULT);
    
         if(!empty($_POST['pseudo']) AND !empty($_POST['passe']) AND !empty($_POST['confirm_passe']))
       {
        
             if($passe == $confirm_passe) 
          {
             if(strlen($_POST['pseudo'])>=4 AND strlen($_POST['pseudo'])<=10)
			{ 
                     
                $req = $bdd->prepare("SELECT * FROM client WHERE pseudo = ?");
                    $req->execute(array($pseudo));
                    $pseudo_est_la = $req->rowCount();
                 
                   if($pseudo_est_la == 0)
                {
                        
              $req = $bdd->prepare('INSERT INTO client(pseudo, passe, date_inscription) VALUES(:pseudo, :passe, CURDATE())');
      $req->execute(array(
            'pseudo' => $_POST['pseudo'],
            'passe' => password_hash($_POST['passe'], PASSWORD_DEFAULT)));
                           
             echo '<div class="container"style="margin:auto; width:600px;">
  <div class="row">
    <div class="col-sm">
       <p class="bg-light border mt-2">
	   <h3> Bienvenue ' . $_POST['pseudo'] . '!</p></div></div> <div class="row"><div class="col-sm">
       <p class="bg-light border mt-2">Vous avez été inscrit comme client.  </p></div>
    </div> <div class="row"><div class="col-sm">
       <p class="bg-light border mt-2">Cliquez sur le lien pour retourner au bon de commande.</h3>
    
    
    </p>
	</div>
    </div>
  
</div>';
			

            ?>   


  
			
    


  <div class="container"style="margin:auto; width:600px">
  <div class="row">
    
    <div class="col-sm"style="margin:auto; width:600px">
       <p class="bg-light border mt-2">   <a href="commande.php?pseudo=<?php echo $pseudo;?>"><span style="font-size:22px"><strong>  Retour au bon de commande   </strong></span></a></p>
    </div>
    
  </div>
</div>
            <?php
             
     
                     }
                          else
                                 {
                                     echo '  <div class="container"style="margin:auto; width:600px">
  <div class="row">
    <div class="col-sm">
       <p class="bg-light border mt-2">
	   <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Ce pseudo existe déjà. Vous êtes déjà inscrit. Vous devez vous connecter. </a> </span></p>
    </div>
    <div class="col-sm">
       <p class="bg-light border mt-2">
	   <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Choisissez un autre pseudo : <a href="connexion_perle.php">Se connecter</a> </span></p>
    </div>
   
  </div>
</div>

'; 
								
								exit();
                                 }
	
               
                             }
				            else
                                   {
                                    echo ' <div class="container"style="margin:auto; width:600px">
      <div class="row">
        <div class="col">
          <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Le pseudo doit contenir entre 4 et 10 caractères.</span>
        </div>
        <div class="col">
          <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;">  Essayez à nouveau : <a href="inscr_perle.php">S\'incrire</a> </span>
        </div>
      </div>
    </div>';
								
								exit();
                                   }
				             }
                               else
                                   {
                                    echo '<div class="container"style="margin:auto; width:600px">
      <div class="row">
        <div class="col">
         <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Vos mots de passe ne correspondent pas. </span>
        </div>
        <div class="col">
          <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;">  Essayez à nouveau : <a href="inscr_perle.php">S\'incrire</a> </span>
        </div>
      </div>
    </div>
 ';
								   
								   exit();
                                   }
                  
                               }
		                         else
                                    {
                                        echo '<div class="container"style="margin:auto; width:600px">
      <div class="row">
        <div class="col">
          <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Tous les champs ne sont pas complétés. </span>
        </div>
        <div class="col">
          <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Essayez à nouveau : <a href="inscr_perle.php">S\'incrire</a> </span>
        </div>
      </div>
    </div>';
									
									exit();
                                    }
   }
     
       ?>
       			            
      
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.1.1">
    <title>Jumbotron Template · Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/jumbotron/">

    <!-- Bootstrap core CSS -->
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">
  </head>
  <body>


<main role="main">

  <!-- Main jumbotron for a primary marketing message or call to action -->

<form method="post" action="">
  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
    
      <div class="col-md-4">
        
       <p><label for="pseudo">Votre pseudo S.V.P:</label></p>
	  
        <p><label for="passe">Votre mot de passe:</label></p>
		<p> <label for="confirm_passe">confirmation du mot de passe:</label> </p>
      </div>
         <div class="col-md-4">
        
        <p><input type="text" name="pseudo" id="pseudo"> </p>
        <p><input type="password" name="passe" id="passe"></p>
		<p><input type="password" name="confirm_passe" id="confirm_passe"> </p>
		 <p><input type="submit" name="entrees" value="entrez"> </p>
      </div>
	 
      
    </div>

    <hr>

  </div> <!-- /container -->
 </form>
</main>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="../assets/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body></html>

14 réponses

  1.  jordane45 Modérateur
    Bonjour,

    Déjà .. quelques points qu'il me semblait déjà t'avoir dit plusieurs fois.... :
    - htmlspecialchars ne doit s'utiliser que pour de l'affichage ... pas pour "nettoyer" les variables avant d'en servir dans des requêtes SQL
    - CHAQUE requête faite en PDO doivent se trouver dans UN bloc TRY/CATCH
    - On récupère PROPREMENT les variables AVANT de les utiliser (donc.. il ne devrait pas y avoir de $_POST['truc..'] en plein milieu du code ... )

    Et pour finir :
    - Tu génère du code HTML ( via tes echo.... ) avant le début de ta page html ( qui commence dans le <body> ... ).. c'est donc normal que ça ne marche pas comme voulu ..

    1. flexi2202 Auteur
      bonjour
      Merci pour la reponse
      c est la pemiere fois que je fais un fichier en php
      bon je vais regarder a tout cela

      Merci pour toutes ces infos
      je vais les analyser une a une

      encore merci
      1. jordane45 Modérateur
        En gros, ça pourrait donner un truc du genre 
         
<?php

//Démarrage des sessions
session_start();

//Affichage des erreurs PHP
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

// Un peu de lecture sur l'utilisation de PDO  :
// https://www.commentcamarche.net/faq/46512-pdo-gerer-les-erreurs
//connexion à la bdd
require_once './base.php';


// Découpage en "fonctions" du code pour le rendre plus facile à maintenir et pouvoir plus facilement réutiliser ces fonctionnalités
// perso, je placerai ces fonctions dans un fichier à part que j'inclurerai ensuie dans les pages où j'en ai besoin..

/**
 * Fonction permettant de faire des requêtes PDO "proprement"
 * @global type $bdd  issue de base.php
 * @param type $sql La requete à executer
 * @param type $datas les datas à transmettre dans la requete
 */
function execQuery($sql, $datas = NULL) {
  global $bdd; // variable de connexion à la BDD
  try {
    $requete = $bdd->prepare($sql);
    return $requete->execute($datas);
  } catch (Exception $e) {
    // en cas d'erreur :
    echo "<br><span style='color:red'>Erreur : </span>" . $e->getMessage();
    echo "<br> Requete SQL :<br>" . $sql;
    echo " <br>Les datas : <br>";
    print_r($datas);
  }
}

function getUserByPseudo($pseudo) {
  //Execution de la requete
  $sql = "SELECT * FROM client WHERE pseudo = ?";
  $datas = array($pseudo);
  $res = execQuery($sql, $datas);
  return $res->fetch(); // on retourne les infos dans un array
}

function addUser($pseudo, $pass) {
  $sql = "INSERT INTO client(pseudo, passe, date_inscription) VALUES(:pseudo, :passe, CURDATE())";
  $datas = array(':pseudo' => $pseudo, ':passe' => $pass);
  $res = execQuery($sql, $datas);
  return $res;
}

/**
 * Fonction qui vérifie que le pseudo/password existent en bdd
 * @param type $pseudo
 * @param type $pass
 * @return type
 */
function verif_login($pseudo, $pass) {
  $user = getUserByPseudo($pseudo);
  if (!empty($user)) {
    return password_verify($pass, $user['passe']);
  }
}

//-------- FIN DES FONCTIONS ----------//

//récupération PROPRE des variables AVANT de les utiliser
$pseudo = !empty($_POST['pseudo']) ? trim($_POST['pseudo']) : NULL;
$passe = !empty($_POST['passe']) ? trim($_POST['passe']) : NULL;
$confirm_passe = !empty($_POST['confirm_passe']) ? trim($_POST['confirm_passe']) : NULL;

//Traitement du SUBMIT
if (isset($_POST['entrees'])) {


  $passe_hache = password_hash($passe, PASSWORD_DEFAULT);

  if (!empty($_POST['pseudo']) AND!empty($_POST['passe']) AND!empty($_POST['confirm_passe'])) {

    if ($passe == $confirm_passe) {
      if (strlen($pseudo) >= 4 AND strlen($pseudo) <= 10) {

        $user = getUserByPseudo($pseudo);
        //Si l'utilisateur n'existe pas
        if (empty($user)) {
          //si l'insert en BDD c'est bien passé
          if (addUser($pseudo, $passe_hache)) {
            $message = '
                  <div class="col-sm-12">
                     <p class="bg-light border mt-2">
                     <h3> Bienvenue ' . $pseudo . '!</p></div></div> <div class="row"><div class="col-sm">
                     <p class="bg-light border mt-2">Vous avez été inscrit comme client.  </p>
                 </div>
                  <div class="col-sm-12">
                     <p class="bg-light border mt-2">
                        <h3>Cliquez sur le lien pour retourner au bon de commande.</h3>
                       <a href="commande.php?pseudo=' . $pseudo . '">
                         <span style="font-size:22px"><strong>  Retour au bon de commande   </strong></span>
                       </a>
                    </p>
                  </div>
                 

              </div>';
          }
        } else {
          $message = ' <div class="col-sm-12">  
                        <p class="bg-light border mt-2">
                        <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Ce pseudo existe déjà. Vous êtes déjà inscrit. Vous devez vous connecter. </a> </span></p>
                        <div class="col-sm">
                           <p class="bg-light border mt-2">
                           <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Choisissez un autre pseudo : <a href="connexion_perle.php">Se connecter</a> </span></p>
                       </div>
                     </div>';
        }
      } else {
        $message = '<div class="col-sm-12">  
                        <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Le pseudo doit contenir entre 4 et 10 caractères.</span>
                        <div class="col">
                          <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;">  Essayez à nouveau : <a href="inscr_perle.php">S\'incrire</a> </span>
                        </div>
                      </div>';
      }
    } else {
      $message = '<div class="col-sm-12"> 
                      <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;"> Vos mots de passe ne correspondent pas. </span>
                      <div class="col">
                        <span style="font-size:24px; font-weight:bold; color:red; margin-left:10%;">  Essayez à nouveau : <a href="inscr_perle.php">S\'incrire</a> </span>
                      </div>
                   </div> ';
    }
  }
}
?>

<!Doctype>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.1.1">
    <title>Jumbotron Template · Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/jumbotron/">

    <!-- Bootstrap core CSS -->
    <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <main role="main">
        <!-- Main jumbotron for a primary marketing message or call to action -->
        <form method="post" action="">
          <!-- Example row of columns -->
          <div class="row">
            <div class="col-md-4">
              <p><label for="pseudo">Votre pseudo S.V.P:</label></p>
              <p><label for="passe">Votre mot de passe:</label></p>
              <p> <label for="confirm_passe">confirmation du mot de passe:</label> </p>
            </div>
            <div class="col-md-4">

              <p><input type="text" name="pseudo" id="pseudo" value="<?php echo htmlspecialchars($pseudo); ?>"> </p>
              <p><input type="password" name="passe" id="passe"></p>
              <p><input type="password" name="confirm_passe" id="confirm_passe"> </p>
              <p><input type="submit" name="entrees" value="entrez"> </p>
            </div>
            <hr>
          </div>
        </form>
      </main>


          <?php
          if (!empty($message)) {
            echo $message;
          }
          ?>



    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script>
      window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')
    </script>
    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  </body>
</html>

        1. flexi2202 Auteur
          ah super un très grand merci pour ce code
          cela me fait grand plaisir et en plus avec des liens et des commentaire
          je vais étudier tout cela de près

          passe une bonne journée
          2. flexi2202 Auteur
            après un copier coller j ai une erreur a la ligne 45

            Fatal error: Uncaught Error: Call to a member function fetch() on boolean in /storage/ssd3/790/14980790/public_html/site-peche/BOOSTRAP/bootstrap-4.5.3-examples/jumbotron/inscr_perle.php:45 Stack trace: #0 /storage/ssd3/790/14980790/public_html/site-peche/BOOSTRAP/bootstrap-4.5.3-examples/jumbotron/inscr_perle.php(86): getUserByPseudo('azerty50') #1 {main} thrown in /storage/ssd3/790/14980790/public_html/site-peche/BOOSTRAP/bootstrap-4.5.3-examples/jumbotron/inscr_perle.php on line 45
            1. jordane45 Modérateur
              ah oui,
              grosse erreur de ma part ...

              Il faut modifier la fonction execQuery 
              function execQuery($sql, $datas = NULL) {
  global $bdd; // variable de connexion à la BDD
  try {
    $requete = $bdd->prepare($sql);
    $requete->execute($datas);
     return $requete;
  } catch (Exception $e) {
    // en cas d'erreur :
    echo "<br><span style='color:red'>Erreur : </span>" . $e->getMessage();
    echo "<br> Requete SQL :<br>" . $sql;
    echo " <br>Les datas : <br>";
    print_r($datas);
  }
}
          3. flexi2202 Auteur
            Merci Jordane mais cela refuse de fonctionner
            j ai ce message

            Cette page ne fonctionne pasImpossible de traiter cette demande via peche-a-la-perle.000webhostapp.com à l'heure actuelle.
            HTTP ERROR 500
            1. jordane45 Modérateur
              Une erreur 500 implique une erreur côté serveur. (donc surement dans le code php que je t'ai donné )
              Le souci, c'est que je l'ai écrit de tête sans le tester...
              et que je ne peux pas le tester sans avoir ta structure de bdd...

              je t'écris un message privé ( va voir tes MP )
          5. flexi2202 Auteur
            Merci jordane
            je pense que je dois modifier le fichier base.php avec mes codes d accès a la base de données
            car a présent lorsque je lance index.html
            j ai ce message dans une page blanche
            Erreur : SQLSTATE[HY000] [1045] ProxySQL Error: Access denied for user 'root'@'2a02:4780:bad:f00d::b' (using password: NO)

            et lorsque je lance test.html

            Erreur : SQLSTATE[HY000] [1045] ProxySQL Error: Access denied for user 'root'@'2a02:4780:bad:f00d::b' (using password: NO)

            apparemment il refuse l accès a la base de donnée
            1. jordane45 Modérateur
              Tu es sûr que le nom d'utilisateur que tu dois prendre c'est root ?
              Tu bosses en local sur ton ordi ou sur un serveur ?
              Sur un serveur, il est rare que le nom d'utilisateur soit root
          6. flexi2202 Auteur
            ah ben voila je viens de faire un essai avec wampserver
            cela fonctionne
            je continue les essais demain
            et je reviens dire quoi
            bonne soiree
            encore merci
            1. flexi2202 Auteur
              super il n y a plus que ce morceau qui lors de l inscription n est pas centre
              mais bon je suppose que cela n est pas grand chose a devoir changer
              1. jordane45 Modérateur
                Quel morceau ?
                Que veux tu obtenir ? Tu peux le "dessiner" et nous le montrer ?

                Sachant que là, j'ai surtout retravaillé le code php
                je ne me suis pas occupé du design ...

                A noter, que pour réaliser la "structure" de tes pages, tu pourrais t'inspirer du code généré par un generateur tel que
                https://www.layoutit.com/build
            2. flexi2202 Auteur
              ah oui génial cet outil un immense merci
              oui il est vrai que pour boostrap on a presque tout a disposition pour bien faire les choses
              et donc je vais m occuper moi même de ce petit réglage de mise en page

              néanmoins il reste juste une petite chose
              pourrais tu mettre un message d erreur lorsque l utilisateur ne rentre pas le même mot de passe lors de l inscription

              passe une bonne matinée
              1. jordane45 Modérateur

                néanmoins il reste juste une petite chose
                pourrais tu mettre un message d erreur lorsque l utilisateur ne rentre pas le même mot de passe lors de l inscription

                C'est déjà le cas...
            3. flexi2202 Auteur
              Merci pour la réponse
              mais je viens de faire un essai si l utilisateur entre un mot de passe et sans le confirmer appuyer sur valiser
              aucun message d erreur n apparaît
              1. jordane45 Modérateur
                Ah.. SANS le confirmer...
                Ben il faut modifier la première condition 
                  if ($pseudo && $passe && $confirm_passe) {

                par 
                  if ($pseudo && $passe) {
            4. flexi2202 Auteur
              nickel

              bravo

              cela fonctionne a merveille

              10/10
              1. jordane45 Modérateur
                Le plus important, c'est que tu essais de comprendre comment est organisé le code
                et que tu t'en inspires pour tes prochains programmaes.
            5. flexi2202 Auteur
              oui oui bien sur
              ce qui est évidement
              encore merci
              y a tellement de choses a connaitre
              que je comprends pas comment des gens osent s ennuyer

              Discussions similaires

              Mettre une image à l'arrière plan et la rendre transparente
              Sss97

              2 réponses
              Image floue : comment la rendre plus nette?
              le militaire

              18 réponses
              Enregistrement powerpoint 2013 impossible
              Max_New

              16 réponses
              Erreur WebAcappella Responsive
              ToxicHayabusa

              1 réponse
              Rendre le fond d'une image transparente
              Anselmedu25

              14 réponses