Nous devons avant tout créer une page où les visiteurs peuvent s'inscrire sur votre site,
par exemple : inscription.htm.
Cette page devra contenir le code suivant qui permet au visiteur de rentrer ses informations et de vous les envoyer après avoir cliquer sur "Valider" :
<html>
<head>
<body>
<form method="post" action="VotreBoîte@Email.com">
Choisissez un pseudo :
<input type="text" name="pseudo">
Choisisez un mot de passe
<input type="password" name="motdepasse">
Entrez votre e-mail :
<input type="text" name="email">
<input type="submit" name="valider" value="Valider">
<input type="reset" name="effacer" value="Effacer">
</form>
</body>
</head>
</html>
Explication :
<input type="text" , désigne un champs simple
<input type="password" , désigne un champs simple où les caractères sont censurés
<input type="submit" , désigne un bouton qui envoie le formulaire (à l'email indiqué dans action=)
<input type="reset" , désigne un bouton qui efface tous les champs
Les champs en rouge sont modifiables, pour en savoir plus sur vos visiteurs vous pouvez ajouter des champs commes indiqué en dessous, sinon passez au prochain trait horizontal.
Ajouter des champs suplémentaires :
N'oubliez pas de mettre un nom différent pour chaque champs !
Vous ouvez mettre le champs mot de passe en double pour demander la confirmation du mot de passe (pour éviter les erreur de frapes)
Pour un champ simple : <input type="text" name="nomchamp">
Pour un champ censuré : <input type="password" name="nomchamp">
Pour une zone de texte : <textarea rows="10" cols="10" name="nomchamp></textarea> (Rows = nombre de lignes, Cols = nombre de collones)
Pour un menu déroulant : <select name="nomchamp">
<option value="Truc1" selected>Nom_affiché</option>
<option value="Truc2">Nom_affiché</option>
<option value="Truc3">Nom_affiché</option> ("selected" représente l'option sélectionnée par défault)
Pour une case à cocher <input type="checkbox" name="nomchamp" value="travail" checked > ("checked" désigne que la case est présélectionnée)
Maintenant que notre page d'inscription est faîte il faut attendre qu'il y ait des inscrits (ce n'est pas automatique, vérifier tous les jours votre boite email s'il y a pas des nouveaux inscrits ; si oui préparer un message prédéfini pour confirmer l'inscription.).
Et maintenant il faut créer la page de connexion et la page de l'utilisateur (sa propre page que lui seul peut afficher).
Il est conseiller de stocker les mot de passe et les pseudos dans un document (que vous ne mettez surtout pas sur le net) pour mieux vous y retrouver.
Etape 1 : Création de la page de l'utilisateur.
Ce n'est pas automatique, vous devez le faire vous même, vous créer un page rien que pour le visiteur mais Attention ! cet page ne doit pas porter n'importe quel nom, elle doit se présenter comme ceci :
PseudoMotdePasse.htm
(Sans tiret ni rien, c'est pour ça qu'au préalable vous aurez indiqué dans la page d'inscription les caractères non autorisés pour le pseudo et le mot de passe.)
Donc notre page doit avoir le PSEUDO CHOISI PAR LE VISITEUR et son MOT DE PASSE correspondant bien sûr. Ces deux-ci doivent être accolés, pas d'espace, de tiret de caractère spéciaux interdits etc.
ex : si le pseudo est "Truc" et le mot de passe "Bidule" on aura TrucBidule.htm (drôle non?).
Dans cette page vous mettez ce que bon vous semble, c'est vous qui choisissez ce que le membre trouvera dans sa page.
Etape 2 : Création de la page de connexion.
Bien sûr nous n'allons pas créer une page de connexion pour chaque utilisateur, cette page sera commune (la même pour tout le monde)
Donc vous créez une page par exemple connexion.htm qui se trouve dans le même répertoire que les pages persos des visiteurs.
Et vous y entrez ce code :
<html>
<head>
<body>
<form name="nom_du_formulaire">
Votre pseudo :
<input type="text" name="pseudo">
Votre mot de passe :
<input type="password" name="motdepasse">
<input type="button" name="valider" value="ENTRER" onClick=" var GoTo= document.nom_du_formulaire.pseudo.value + document.nom_du_formulaire.motdepasse.value +'.htm' ; document.location=GoTo"
</form>
</body>
</head>
</html>
Explication :
Alors dans ce code, il y a le champ qui demande le pseudo et celui qui demande le mot de passe et un bouton "valider".
vous remarquez la ligne OnClick="... ? Explicaton :
OnClick veut dire au clic sur le bouton il faut faire (ce qui suit le "=") en locurence il faut GoTo aller à la page où le pseudo et le mot de passe corespondent, voilà pourquoi il fallait mettre pseudo et mot de passe comme nom de page ; en fait l'ordinateur prend les valeurs qu'il y a dans les chams pseudo et mot de passe et il les associe pour former le nom de la page, enfin il met le nom de la page dans la barre d'adresse et l'affiche. Simple en fait.
Seulement : Si quelqu'un arrive à entrer dans la page de quelqu'un par erreur ou quoique ce soit, il pourra voir le pseudo et le mot de passe dans la barre d'adresse cc'est pour ça que je vous recommande d'afficher les pages persos dans des frames ou des iframes pour que leur url ne s'affiche âs dans la barre d'adresse. (Je ferai peut-être un tuto sur les frames mais pour l'instant chercher sur internet l'utilisation des frames.).
Note : Si vous modifiez les infos en rouges n'oubliez pas de les modifier aux deux endroits comme pour "nom_du_formulaire"
Petits + :
Pour afficher un message de bienvenue à l'ouverture de la page d'un visiteur entrez ce code entre les balises <body> et </body> :
<script language="JavaScript">
alert("Bienvenue dans votre espace perso Mr.LeNomDuVisiteur")
</script>
Pour afficher un message de bienvenue avec confimation d'entrée à l'ouverture de la page d'un visiteur entrez ce code entre les balises <body> et </body> :
<script language="JavaScript">
confirm("Bienvenue dans votre espace perso Mr.LeNomDuVisiteur"); return false;
</script>
Voilà, bon je sais que les experts trouveront ce tuto pas trés original mais utile pour les débutants. Et puis c'est mon premier tuto !
Pour toute amélioration, correction ou je ne sais quoi écrivez un commentaire.
Un p'tit truc à part je débute en JavaScript et je voudrais savoir comment vous faîtes pour afficher une variable au hasard si la réponse et juste. Par exemple j'aimerais que il n' y est pas tout le temps marqué "Bravo !" mais que ça change de texte de temps en temps.
Voilà bonne prog...