JavaScript Page d'inscription Ajax ! Magnifique // MaNGOS
[Image: preambule.png]

Cette page vous est proposé gratuitement, sous licence créative common.
Vous pouvez la partager et la distribuer gratuitement, en laissant impérativement le copyright ainsi qu'un lien vers Owemu.fr (http://owemu.fr).
Vous pouvez aussi poster les fichiers sur un autre forum, en laissant obligatoirement la partie préambule ainsi qu'un lien vers Owemu.fr (http://owemu.fr).

Le design est celui de la page de connexion du site officiel Wow-Europe.
Le javascript est codé à partir de la librairie Mootools.
Le reste du code est de ma création (Valentin).
La page est codée et créée pour Owemu.fr.

[Image: 88x31.png]
Page d'inscription Owemu by Owemu - ValentinH est mise à disposition selon les termes de la licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales l'Identique 2.0 France.
Les autorisations au-delà du champ de cette licence peuvent être obtenues.
Respectez donc les droits d'auteur Smile


[Image: infos.png]

Je vous présente une page de création de compte pour un serveur privé World Of Warcraft utilisant l'émulateur Mangos et ses dérivés.
La page est particulièrement stylisée, et utilise des technologies issues du "Web 2.0", et l'inscription est bien entendu automatique.

Mais un aperçu vaut mieux que des mots :

Démonstration

Une vidéo

Un screen !ce n'est qu'une petite partie de la page!
[Image: scree-page.png]


[Image: telechargements.png]


[Image: sources.png]

Les sources sont incluses dans l'archives, je ne posterais donc que les deux pages principales.

La page d'accueil :
Code PHP :
Voir archive 

La page appelée en PHP qui effectue l'inscription :
Code PHP :
Voir archive 
Merci beaucoup pour ce partage ! C'est super bien fait Clin
Super merci Clin jolie page d'inscription.
Merci beaucoup ! je ne prend pas , mais si un jour je le prend j'essayerais de le faire fonctionnais pour trinity core Smile
La blague, jamais vus une vidéo pour une page d'inscription Xd
En effet, très bon codage coté client, moi aussi j'utilise l'ajax et jquery mais coté serveur... le php n'est pas si magnifique que sa.
En effet, le PHP est simpliste, mais il est suffisant pour une simple page d'inscription, puis le but principal de cette page était d'avoir un côté client "tape à l'oeuil", et un contenu simple.

Si vous souhaitez la modifier, ce n'est pas du jQuery, mais du Mootools Smile (plus pratique à mon goût)
(Je préfère le jQuery =D) J'vais être gentil et modifier le code php pour le rendre meilleur Smile
(Après avoir vus le php, je le trouve totalement NUL =D, prend exemple sur celui que je vais poster, sa t'aideras ;p)
Honnêtement, j'ai utilisé Mootools principalement pour le formulaire, et la facilité de sa mise en place.
L'apparence par la suite (les slides) est toute bête et utilisable avec la plus part des librairies.
Code PHP :
<?php
// Disclaimer : Vous pouvez partager cette source tout en gardant le copyright.
// Copyright respectif : Crée par ValentinH pour Owemu.fr
//                          Modifié par Blackdown pour Zone-Emu.fr

//        Require the configuration.
require('config.php');
// Connect to the database.
$db = new mysqli($config['hote_mysql'], $config['user_mysql'], $config['pass_mysql']);
$db->select_db($config['baserealmd']);

//        The class for register an user.
class verifyRegister
{
    protected 
$db;
    
    protected 
$username;
    protected 
$password;
    protected 
$password2;
    protected 
$tbc;
    protected 
$nbr;
    protected 
$email;
    private 
$cryptedPassword;

    public function 
__construct($username$password$password2$emailint $tbcint $nbr)  
    {
        
$this->db $GLOBALS['db'];
        
$this->username $this->db->real_escape_string(strip_tags(htmlentities($username))); // Sécurisation nom d'utilisateur.
        
$this->password $password// Pas besoin de sécuriser l'entrée mot de passe, il n'est pas inséré dans la base de donneés.
        
$this->password2 $password2// Pas besoin de sécuriser l'entrée mot de passe, il n'est pas inséré dans la base de donneés.
        
$this->email $email// Pas besoin de sécuriser l'email ! Preg match vérifie déjà !
        
$this->tbc $tbc// Pas besoin de sécuriser l'entrée de l'extention, ceci va être vérifier au chiffre.
        
$this->nbr $nbr// Pas besoin de sécuriser l'entrée du """"captcha"""", ceci va être vérifier au chiffre.(Oué je met "" car sa génère pas de chiffre...)
        
$this->cryptedPassword '';
        
$this->errorDetect '';
        
$this->error false;
    }

    public function 
verifyAll()
    {
        
// Launch ALL function
        
$this->verifyCatpcha();
        
$this->verifyExpansion();
        
$this->verifyPassword();
        
$this->verifyUsername();
        
$this->verifyEmail();
        
        if(
$this->error === false)
        {
            
$this->cryptedPassword sha1(strtoupper($this->username).':'.strtoupper($this->password));
            
$db->query("INSERT INTO account(username, sha_pass_hash, gmlevel, email, expansion) VALUES('".$this->username."', '".$this->cryptedPassword."', 0, '".$this->email."', '".$this->tbc."')");
            echo 
'Votre compte est crée, vous pouvez maintenant vous connecter et jouer.<br /><br />';
        }
        else
        {
            echo 
$this->errorDetect;
        }
    }
    
    public function 
verifyExpansion()
    {
        if(
is_numeric($this->tbc))
        {
            if(
$this->tbc !== OR $this->tbc !== OR $this->tbc !== OR $this->tbc !== 3)
            {
                
$this->error true;
                
$this->errorDetect .= '- TemperDATA is detected. <br />';
            }
        }
        else
        {
            
$this->error true;
            
$this->errorDetect .= '- TemperDATA is detected. <br />';
        }
    }

    public function 
verifyCatpcha()
    {
        if(
is_numeric($this->nbr))
        {
            if(
$this->nbr !== OR $this->nbr !== OR $this->nbr !== OR $this->nbr !== 3)
            {
                
$this->error true;
                
$this->errorDetect .= '- Mauvais code catpcha entrée. <br />';
            }
        }
        else
        {
            
$this->error true;
            
$this->errorDetect .= '- Mauvais code catpcha entrée. <br />';
        }
    }

    public function 
verifyPassword()
    {
        if(
strlen($this->password) <= AND strlen(!$this->password) <= 25)
        {
            
$this->error true;
            
$this->errorDetect .= '- Mot de passe dépasse les caratères autorisé.';
        }

        if(
$this->password !== $this->password2)
        {
            
$this->error true;
            
$this->errorDetect .= '- La confirmation du mot de passe est invalide.';
        }        
    }

    public function 
verifyUsername()
    {
        
// Le pseudo dois être entre 3 et 25 caratères, si ce n'est pas le cas, une erreur survient.
        
if(strlen($this->username) <= AND strlen(!$this->username) <= 25)
        {
            
$this->error true;
            
$this->errorDetect .= '- Le nom d\'utilisateur dépasse les caratères autorisé. <br />';
        }
        
        
// Sélectionne si le nom d'utilisateur est déjà utilisé dans la table account.
        
$sqlusername $this->db->query('SELECT SQL_CACHE * FROM account WHERE username=\''.$this->username.'\'');
        
        
// Le nom d'utilisateur n'est pas égal à 0, cela veut signifier que il est déjà utilisé.
        
if($sqlusername->num_rows !== 0)
        {
            
$this->error true;
            
$this->errorDetect .= '- Ce nom d\'utilisateur n\'est pas disponible. <br />';
        }
    }


    public function 
verifyEmail()
    {
        
// Le pseudo dois être entre 3 et 25 caratères, si ce n'est pas le cas, une erreur survient.
        
if(strlen($this->email) <= AND strlen(!$this->email) <= 25 AND VerifierAdresseMail($this->email))
        {
            
$this->error true;
            
$this->errorDetect .= 'L\'email dépasse les caratères autorisé.';
        }
        
        
// Sélectionne si le nom d'utilisateur est déjà utilisé dans la table account.
        
$sqlemail $this->db->query('SELECT SQL_CACHE * FROM account WHERE email=\''.$this->email.'\'');
        
        
// Le nom d'utilisateur n'est pas égal à 0, cela veut signifier que il est déjà utilisé.
        
if($sqlemail->num_rows != 0)
        {
            
$this->error true;
            
$this->errorDetect .= '- L\'email est déjà utilisé.';
        }
    }
}

//        This $_POST variable are assembled here.
$username $_POST['username'];
$password $_POST['pass'];
$password2 $_POST['pass2'];
$email $_POST['email'];
$tbc $_POST['tbc'];
$nbr $_POST['nb'];

//        This class is spawned here.
$reg = new verifyRegister($username$password$password2$email$tbc$nbr);
//        Launch class script...
$reg->verifyAll();
?>

et le script qui va avec :') (a tester, non testé)
Modif 20:49
Merci beaucoup pour le partage !!

Retourner en haut Accueil