Tutoriel #1 Espace membre - Le Design

Nous vous conseillons de vérifier au préalable le contenu que vous téléchargez.
Si un lien de téléchargement ne fonctionne plus, merci de signaler le topic en question !

Technétium PM|T

Développeur
Pepsyz Modding
Développeur
Messages
310
J'aime
188
Points
2 508
#1
2339d8d580aa4364bf4199e114f3825b.png


Bonjour, PepsyzModding,

Aujourd'hui je lance ma série pour créer un espace membre assez complet.
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 n'avez pas la permission de voir le lien ! Connectez-vous ou inscrivez-vous pour voir le contenu.
ou
Vous n'avez pas la permission de voir le lien ! Connectez-vous ou inscrivez-vous pour voir le contenu.
.
À 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) :trollface:

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.
53b854f17076441da46f22cf4ac1205c.png
fab39af2fd4e4633a3099f19b6076307.png
e2e272a779954c70a8193e75958f8456.png
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.php

Une 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::p:

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".
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 ? :panic:
Aucun problème! Voilà mon code entier :dance:
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>
92bc4097d28c46da8076c1ddea5ae297.png
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>
6487449807f44161a7aee159ca36cd96.png
-----------------------------------------------------------
#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 ...
-----------------------------------------------------------
4fc4e31d4b3445ac98bd1006d069fd97v2.png
voila ;)
Source : RG​
Cordialement & Amicalement
CRUEL-MODZ PM|T
 

Haristone

Elite
Elite
Ancien Staff
Messages
257
J'aime
216
Points
2 088
#2
Thanks du partage :D
 

Legacy

VIP
V.I.P
Messages
348
J'aime
83
Points
1 755
#4
Voir la pièce jointe 1570


Bonjour, PepsyzModding,

Aujourd'hui je lance ma série pour créer un espace membre assez complet.
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 n'avez pas la permission de voir le lien ! Connectez-vous ou inscrivez-vous pour voir le contenu.
ou
Vous n'avez pas la permission de voir le lien ! Connectez-vous ou inscrivez-vous pour voir le contenu.
.
À 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) :trollface:

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.php

Une 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::p:

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​
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 ? :panic:
Aucun problème! Voilà mon code entier :dance:
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>
Voir la pièce jointe 1574
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>
Voir la pièce jointe 1575
-----------------------------------------------------------
#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 ...
-----------------------------------------------------------
Voir la pièce jointe 1576
voila ;)
Source : RG​
Cordialement & Amicalement
CRUEL-MODZ PM|T
Salut,

On peux faire un shop ?
 

Legacy

VIP
V.I.P
Messages
348
J'aime
83
Points
1 755
#6

Legacy

VIP
V.I.P
Messages
348
J'aime
83
Points
1 755
#8
Haut