Les variables php/javascript

Fatavis

Fatavis Le 11 avril 2016 à 23:21 (Édité le 25 janvier 2019 à 17:50)

Bonjour à tous et à toutes, :)

j'ai suivi les deux premières vidéos de PrimFx sur un espace membre, avant de suivre son tuto, je maîtrisais les bases de JavaScript et je réalisais une application avec des variables, elle est la suivante : https://jsfiddle.net/Fatavis/os36zq0c/70/
 
Le but est de rechercher des mots comme nao ou irobotechart et lorsqu'on passe la souris sur le robot une description s'affiche avec un lien...

Puis lorsque l'utilisateur cherche des mots différents il obtient des badges. Il y a donc une variable compteur, le problème de celle-ci est que lorsque l'utilisateur rafraîchit la page, la variable se réinitialise, et l’utilisateur perd tout ses badges.:'(

Alors j'aimerais savoir comment faire pour que le compteur de la variable soit attribué à l'utilisateur afin que quand il se connecte, il retrouve ses badges. :D

C'est pour cela que j'ai regardé tous les tutos de PrimFx jusqu'à l'espace membre car on m'a dit que le PHP était la solution, et voilà à quoi ressemble mon code : 

Page d'inscription (inscription.php) :
<html>
   <head>
      <title>TUTO PHP</title>
      <meta charset="utf-8">
  
    <?php 
       //Code permettant l'inscription//
$bdd = new PDO('mysql:host=127.0.0.1;dbname=espace_membre; charset=utf8', 'root', '');
if(isset($_POST['forminscription'])) {
   $pseudo = htmlspecialchars($_POST['pseudo']);
   $mdp = sha1($_POST['mdp']);
   $mdp2 = sha1($_POST['mdp2']);
   if(!empty($_POST['pseudo']) AND !empty($_POST['mdp']) AND !empty($_POST['mdp2'])) {
      $pseudolength = strlen($pseudo);
      if($pseudolength <= 255) {
               $req_pseudo = $bdd->prepare("SELECT * FROM membres WHERE pseudo = ?");
               $req_pseudo->execute(array($pseudo));
               $pseudo_exist = $req_pseudo->rowCount();
               if($pseudo_exist == 0) {
                  if($mdp == $mdp2) {
                     $insertmbr = $bdd->prepare("INSERT INTO membres(pseudo, motdepasse) VALUES(?,?)");
                     $insertmbr->execute(array($pseudo, $mdp));
                     $valider = "Votre compte a bien été créé ! <a href=\"index.php\">Cherchez des mots avec Artrobot</a>";
                  } else {
                     $erreur = "Vos mots de passes ne correspondent pas !";
                  }
               } else {
                  $erreur = "Désolé ce pseudo a délà été pris !";
               }
      } else {
         $erreur = "Votre pseudo ne doit pas dépasser 255 caractères !";
      }
   } else {
      $erreur = "Tous les champs doivent être complétés !";
   }
}
       //Fin du code permettant l'inscription//
?>
    </head>
   <body>
      <div align="center">
         <h2>Inscription</h2>
         <br /><br />
         <form method="POST" action="">
            <table>
               <tr>
                  <td align="right">
                     <label for="pseudo">Pseudo :</label>
                  </td>
                  <td>
                     <input type="text" placeholder="Votre pseudo" id="pseudo" name="pseudo" value="<?php if(isset($pseudo)) { echo $pseudo; } ?>" />
                  </td>
               </tr>
               <tr>
                  <td align="right">
                     <label for="mdp">Mot de passe :</label>
                  </td>
                  <td>
                     <input type="password" placeholder="Votre mot de passe" id="mdp" name="mdp" />
                  </td>
               </tr>
               <tr>
                  <td align="right">
                     <label for="mdp2">Confirmation du mot de passe :</label>
                  </td>
                  <td>
                     <input type="password" placeholder="Confirmez votre mdp" id="mdp2" name="mdp2" />
                  </td>
               </tr>
               <tr>
                  <td></td>
                  <td align="center">
                     <br />
                     <input type="submit" name="forminscription" value="Je m'inscris" />
                  </td>
               </tr>
            </table>
         </form>
         <?php
         if(isset($erreur)) {
            echo '<font color="red">'.$erreur."</font>";
         }
          if(isset($valider)) {
            echo '<font color="green">'.$valider."</font>";
         }
         ?>
      </div>
   </body>
</html>
Index.php
<?php
session_start();
$bdd = new PDO('mysql:host=127.0.0.1;dbname=espace_membre', 'root', '');
if(isset($_POST['formconnexion'])) {
   $pseudoconnect = htmlspecialchars($_POST['pseudoconnect']);
   $mdpconnect = sha1($_POST['mdpconnect']);
   if(!empty($pseudoconnect) AND !empty($mdpconnect)) {
      $requser = $bdd->prepare("SELECT * FROM membres WHERE pseudo = ? AND motdepasse = ?");
      $requser->execute(array($pseudoconnect, $mdpconnect));
      $userexist = $requser->rowCount();
      if($userexist == 1) {
         $userinfo = $requser->fetch();
         $_SESSION['id'] = $userinfo['id'];
         $_SESSION['pseudo'] = $userinfo['pseudo'];
         header("Location: index.php?pseudo=".$_SESSION['pseudo']);
      } else {
         $erreur = "Mauvais pseudo ou mot de passe !";
      }
   } else {
      $erreur = "Tous les champs doivent être complétés !";
   }
}
?>
<html>
   <head>
      <title>TUTO PHP</title>
      <meta charset="utf-8">
   <script type="text/javascript" src="index.script.js"></script>
         <link rel="stylesheet" href="index.style.css">
    </head>
   <body>
      <div align="center">
         <h2>Connexion</h2>
         <br /><br />
         <form id="connexion" method="POST" action="">
            <input type="text" name="pseudoconnect" placeholder="Pseudo" />
            <input type="password" name="mdpconnect" placeholder="Mot de passe" />
            <br /><br />
            <input type="submit" name="formconnexion" value="Se connecter !" />
         </form>
         <!-- Début code html application web -->
          <span class ="cacher"><br/><br/><form id="form">
  <input type="text" name="name"  placeholder="Mot inconnu en minuscule" >
  <button type="submit">Envoyer</button>
 <br/><br/><div class="wrapper">
  Je suis un robot ça se voit, NON  
    <div class="tooltip"><span id="text">Je suis à votre service, si mot inconnu </span></div>
  </div>
  </form>
 <br/><div id="dictionnaire">
  <h3 id="souligne">
  Les mots définis :
  </h3>
<center> <ul class="mot" style="list-style-type:none">
  <li>irobotechart</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
    <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
</ul>  
  </div></center>
   <div id="dictionnaire2">
  <h3 id="souligne">
  Les mots déjà inscrits :
  </h3>
<center> <ul style="list-style-type:none">
  <li>irobotechart</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
    <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
  <li>nao</li>
</ul>  
  </div></center>
  
  <img src="http://foursquareguru.com/media/badges/hats-off-foursquare-badge-lg.png" id="badge1" alt="Photo de montagne" title="C'est beau les Alpes quand même !" />
    <img src="https://www.edx.org/sites/default/files/upload/pbaruah-edx-verified-badge.png" id="badge2" alt="Photo de montagne" title="C'est beau les Alpes quand même !" />
   </span>
          
         <!-- Fin code html application web -->
          <?php
         if(isset($erreur)) {
            echo '<font color="red">'.$erreur."</font>";
         }
         ?>
      </div>
   </body>
</html>
Le javascript et le css est le même qu'ici : https://jsfiddle.net/Fatavis/os36zq0c/70/

Sauf que sur le code ci-dessus, lors de son exécution, le bouton envoyer du robot ne fonctionne plus, pourquoi et comment  régler ce problème ?


J'ai une autre question car le formulaire de connexion est sur la même page que l'application est-il possible après que l'utilisateur se connecte que le formulaire disparaît ou se cache ?

Pour récapituler, j'ai trois questions dont une majeure qui est la suivante :
-comment faire pour que le compteur de la variable soit attribuer à l'utilisateur afin que quand il se connecte il retrouve ses badges ?
-une seconde, le bouton envoyer du robot ne fonctionne plus, pourquoi et comment le régler ?
-une dernière, le formulaire de connexion est sur la même page que l'application est-il possible après que l'utilisateur se connecte que le formulaire disparaît ou se cache ?

Merci d'avance pour vos réponses, pour votre temps consacré ;)

Signature : On a tous à apprendre des autres alors pourquoi pas s'entraider !!!
Fatavis

Fatavis Le 12 avril 2016 à 22:11

Bonjour,
mon sujet  manque t'il de précision, si c'est le cas n'hésitez pas à m'en faire part  😀
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte