Iktus
Premium
- Inscription
- 21 Octobre 2013
- Messages
- 1 675
- Réactions
- 374
- Points
- 12 981
Bonjour, bonsoir.
Aujourd'hui je lance ma série pour créer un espace membre assez complet. J'ai eu pas mal d'aide grâce à RG pour apprendre diverse choses que je ne savais pas faire et je remercie tout ceux qui m'ont aidé à en arriver là.
Nous allons voir aujourd'hui la partie design et le formulaire de connexion et d'inscription partie HTML.
Tout d'abord, je vous conseil de vous rendre sur
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
ou
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
.À vous de choisir la Template dont vous avez eu un coup de cœur et de l'acheter ou l'avoir gratuitement de diverse façon. (httrack)
Je vous conseil de faire pour le moment la page d'accueil, de connexion et d'inscription.
Je ne serais comment vous expliquez comment faire un jolie design car c'est selon vos goûts, mais je vais vous faire part de mes pages
.
J'ai utilisé un .htaccess pour pouvoir supprimer les extensions des liens (.php), je trouve que sa fait plus propre
Code:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(([A-Za-z0-9\-_]+/)*[A-Za-z0-9\-_]+)?$ $1.phpUne fois votre design achever, nous allons passer au formulaire HTML de la page de connexion.
Donc, le formulaire HTML se fait entre les balises <form> et </form>, pas besoin d'être un expert pour savoir cela
Je suppose que vous allez utilisé des input, button et a. Pour ma part je vais utiliser les input pour la partie où l'on rentre le nom d'utilisateur et le mot de passe, le button pour le bouton de connexion et un a pour la redirection vers la page d'inscription.
Une fois votre schéma en tête, on commence!
Vous allez vous rendre dans votre balise <form> et ajouter action="" et method="post", ce qui doit vous donner
HTML:
<form action="" method="post">Dans votre input où nous écrirons le nom d'utilisateur, vous allez rajouter name="identifiant".
Maintenant, nous allons faire pareil dans notre input du mot de passe, mais à la place de mettre identifiant dans notre name="", nous allons mettre motdepasse, ce qui donne name="motdepasse".
Nous avons fini avec nos input, maintenant il ne reste plus cas faire le bouton.
Donc, nous allons donner le type submit à notre button et le name connexion. Ce qui donne
Question: Pourquoi mettre identifiant ?
Réponse: Tout simplement car nous allons déclarer identifiant dans notre code PHP pour qu'il soit reconnu
Maintenant, nous allons faire pareil dans notre input du mot de passe, mais à la place de mettre identifiant dans notre name="", nous allons mettre motdepasse, ce qui donne name="motdepasse".
Nous avons fini avec nos input, maintenant il ne reste plus cas faire le bouton.
Donc, nous allons donner le type submit à notre button et le name connexion. Ce qui donne
HTML:
<button type="submit" name="connexion">Se connecter</button>Maintenant, si vous souhaitez faire un bouton permettant de rediriger l'utilisateur sur la page d'inscription, il vous suffit de mettre une balise a avec un href. Ce qui donne
HTML:
<a href="register">Inscription</a>Tu t'es perdu ?
Aucun problème! Voilà mon code entier
HTML:
<form role="form" action="" method="post">
<fieldset>
<div class="form-group">
<input class="form-control" type="text" name="identifiant" placeholder="Nom d'utilisateur">
</div>
<div class="form-group">
<input class="form-control" type="password" name="motdepasse" placeholder="Mot de passe">
</div>
<button class="btn btn-success btn-block" type="submit" name="connexion">Se connecter</button>
<a href="register" class="btn btn-primary btn-block">Inscription</a>
</fieldset>
</form>
Pour le formulaire d'inscription, je ne vais pas tout vous détailler, c'est entièrement pareil sauf que vous rajoutez les input email et répète ton mot de passe avec comme name email et motdepasse_confirme et sur le bouton, toujours de type submit et en name inscription. Ne t'inquiète pas, je ne l'ai pas détaillé car j'ai tout détaillé au dessus, c'est presque pareil à quelque chose prêt
HTML:
<form role="form" action="" method="post">
<fieldset>
<div class="form-group col-lg-6">
<label>Nom d'utilisateur</label>
<input type="text" name="identifiant" class="form-control" placeholder="Nom d'utilisateur">
</div>
<div class="form-group col-lg-6">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Email">
</div>
<div class="form-group col-lg-6">
<label>Mot de passe</label>
<input type="password" name="motdepasse" class="form-control" placeholder="Mot de passe">
</div>
<div class="form-group col-lg-6">
<label>Répète-le</label>
<input type="password" name="motdepasse_confirme" class="form-control" placeholder="Répète-le">
</div>
<div class="col-sm-12">
<div class="checkbox">
<label>
<span>
<input type="checkbox">
J'accepte les <a href="javascript:void(0);">Conditions Générale d'Utilisation</a>
</span>
</label>
</div>
</div>
<button class="btn btn-info btn-block" type="submit" name="inscription">S'inscrire</button>
<a href="login" class="btn btn-success btn-block">Retour à la connexion</a>
</fieldset>
</form>
J'accepte toute critique positive, sa fait longtemps je n'ai pas fais de rédaction donc voilà
Bonne journée/soirée à vous
-----------------------------------------------------------
#2 Espace membre - Connexion & Inscription
#3 Espace membre - Ranks & Grades
#4 Espace membre - Les profils
#5 Espace membre - Les articles
#6 Espace membre - Shoutbox
#7 Espace membre - Paramètres
#8 Espace membre - Rechercher un membre
À suivre ...
-----------------------------------------------------------
Dernière édition:
