addons Look de l'utilisateur dans l'espace connexion

[UnderFR 31]

Hello everyone !

 

J'ai décidé aujourd'hui de vous partager un système, mais qui est plus pour l'esthétique que l'utilisation de celui-ci...

 

Il s'agit que lorsque l'utilisateur entre son pseudo, dans le champ, il affiche à droite de celui-ci son look !

 

Il est très simple d'installation, je vous guiderais comme par mon habitude tout au long de l'installation !

 

En premier, donnez un id au champ de texte du pseudo, exemple, id="username"

 

Ensuite, lorsque l'utilisateur aura appuyé sur une touche, on vérifie si le pseudo existe,

Pour cela, il vous faut ce code: 

Attention, ce code est à placer en bas de page après l'importation de jQuery,

 

                                                  $("#username").keyup(function(){
                                                          var recherche = $(this).val();
                                                          var data = 'avatar=' + recherche;
                                                          if(recherche.length>1){
                                                              $.ajax({
                                                                  type : "GET",
                                                                  url : "./look_user.php",
                                                                  data : data,
                                                                  success : function(server_response){
                                                                      $("#imager").html(server_response).show();

                                                                  }
                                                              });
                                                          } else {
                                                                          var elmnt = document.getElementById("imager");
                                                              elmnt.style.backgroundImage = "url(./landing/img/ghost.png)";
                                                          }
                                                      });

Pour ceux qui s'y connaissent un minimum, vous allez me demander à quoi correspond l'id imager, puisque je ne vous l'ai pas fait copier-coller,

 

Pas de panique, il arrive:

 

Copiez-collez ce code juste au dessous de l'input username,

                                                                      <div class="look" id="imager"></div>

Comme d'hab je vous laisse faire l'ajustement CSS, pour qu'il se retrouve à droite du champ de texte

 

Bon, la partie sur l'index est finie, 

 

Passons au code pour afficher le look !

 

Créez un fichier look_user.php

 

Et copiez-collez-y ce code:

 

<?php
require('./{config}.php');
$avatar = $_GET['avatar'];
if(isset($avatar)){
    $motclef = $_GET['avatar'];
    $q = array('avatar'=>$motclef. '%');
    $req = $bdd->prepare("SELECT look FROM users WHERE username = :username");
  	$req->execute(array(
      ":username" => $avatar
      ));
    $count = $req->rowCount();

    if($count == 1){
        while($result = $req->fetch(PDO::FETCH_OBJ)) { ?>
            <script type="text/javascript">
                var elmnt = document.getElementById("imager");
                elmnt.style.backgroundImage = "url(https://habbo.fr/habbo-imaging/avatarimage?figure=<?= $result->look; ?>&action=std&direction=4&head_direction=3&img_format=png&gesture=spk&headonly=0&size=b)";
            </script>
        <?php }
    } else { ?>
        <script type="text/javascript">
            var elmnt = document.getElementById("imager");
            elmnt.style.backgroundImage = "url(./landing/img/ghost.png)";
        </script>
    <?php }
} ?>

Voilà, le look de l'utilisateur apparaîtra lorsqu'il mettra son pseudo !

 

Image de l'avatar fantôme: 

Pour avoir accès à ce lien, merci de vous connecter.

 

UnderFR, Enjoy

 

PS: Merci à @AvolonDEV de m'avoir permis de poster ce topic, puisqu'il voulait lui aussi le poster, et merci à l'aide de @S-KDevFR de m'avoir permis de le re-modifier pour pouvoir le partager !

 

EDIT: A la ligne 3, remplacez "$avatar = $_GET['avatar'];" par => "$avatar = htmlentities($_GET['avatar'];"

Modifié le 18 août 2017 par UnderFR

[Invité]

Super ce partage, j'aimais beaucoup les serveurs avec ce petit côté sympathique.

[UnderFR 31]

à l’instant, Lucas Orsini a dit :

Super ce partage, j'aimais beaucoup les serveurs avec ce petit côté sympathique.

Merci à toi !

[HichemS 2]

Merci du partage

[UnderFR 31]

il y a 1 minute, HichemS a dit :

Merci du partage

Pas de soucis !

 

[AvolonDEV 2]

Merci du partage!!!

 

pas de problème bro

 

[Jrock 4]

@UnderFR pourquoi pas une requête préparé ? 

Sinon merci à toi et pou l'avatar invisible je crois que si tu prend le lien de habbo imaging sans mettre de code de look sa passe,  j'ai jamais essayé 

[UnderFR 31]

Il y a 4 heures, Jrock a dit :

@UnderFR pourquoi pas une requête préparé ? 

Sinon merci à toi et pou l'avatar invisible je crois que si tu prend le lien de habbo imaging sans mettre de code de look sa passe,  j'ai jamais essayé 

Merci à toi, si tu veux pour la requête, j'édite le sujet

[TuesdayATB 50]

Oh thaaaanks ! Je cherchais ça depuis un siécle

[UnderFR 31]

il y a 15 minutes, Tuesday a dit :

Oh thaaaanks ! Je cherchais ça depuis un siécle

 

J'espère t'avoir aidé ! Merci à toi !

[UnderFR 31]

il y a 59 minutes, Kurumi.Dev a dit :

Hcity ^^ mais merci !  sa va servir plus d'un  

continue tes tuto !

 

L'idée ne vient pas de là, mais ce n'est pas grave. ^^

Merci.

[ZaYor 6]

Tuto pas trop bien expliqué, je suis débutant et je comprend pas tout et surtout je ne sais pas faire pour faire l'ajustement CSS