Forum d'aide création graphique / [Tutoriel] Créer et intégrer une zone membre

SaiTek · 13-09-2010 13:07:20

Bonjour à tous et à toutes,

Dans se tutoriel je vais vous expliquez comment intégrer une zone membre au design de son site. ( à ma manière )

Pour se tutoriel je vais prendre un exemple d'un espace membres sur le net.

Je vais prendre " Php Member " disponible sur : http://scripts.toocharger.com/fiches/sc … r/5357.htm

Donc nous allons d'abord aller sur Phpmyadmin pour créer la base Mysql

dans mon exemple je vais l'appeler "exemple"

Une fois que la base SQL et créer nous allons pouvoir nous mettre au travail tongue

Alors vous téléchargez le Kit graphique de votre choix !

Vous le dézipper avec Winrar ou celui que vous voulez

Ensuite

vous mettez le site en ligne à la racine de votre ftp ou dans un répertoire

Alors maintenant le vrai travail va commencer x)

Pour le kit graphique je vais prendre ce kit :

http://www.kitgraphiquegratuit.org/foru … -noir.html

Donc maintenant on va ouvrir la page index.html qui sera notre formulaire de connexion à l'espace membres !

Je vais vous mettre la page index.html pour vous aidez quand même ces mon but non ? big_smile

Elle est ci-dessous ensuite dans la page index.php de l'espace membre vous allez rajouter le code suivant a la page index.html de votre kit graphique

Attention vous devez mettre le code que je vais vous donner tout en haut des code html c'est a dire avant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Donc voici le code que vous devez mettre :

<?php
if (isset($_POST['connexion']) && $_POST['connexion'] == 'Connexion') {
if ((isset($_POST['login']) && !empty($_POST['login'])) && (isset($_POST['pass']) && !empty($_POST['pass']))) {

include ('config2.php');

$sql = 'SELECT id FROM membre WHERE login="'.mysql_escape_string($_POST['login']).'" AND pass_md5="'.md5(mysql_escape_string($_POST['pass'])).'"';
$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
$nb = mysql_num_rows($req);

if ($nb == 1) {
$data = mysql_fetch_array($req);

session_start();
$_SESSION['login'] = $_POST['login'];
// on enregistre en plus l'id du membre dans une variable de session
$_SESSION['id'] = $data['id'];

mysql_free_result($req);
mysql_close();

header('Location: connect_ok.php');
exit();
}
elseif ($nb == 0) {
$erreur = 'Compte non reconnu.';
}
else {
$erreur = 'Problème dans la base de données : plusieurs membres ont les mêmes identifiants de connexion.';
}
mysql_free_result($req);
mysql_close();
}
else {
$erreur = 'Au moins un des champs est vide.';
}
}
?>

Une fois le code mit nous allons maintenant mettre le formulaire de connexion à l'espace membres dans la même page !

Vous pouvez supprimer :

Pour toutes informations supplémentaires, d'aide, de modification ou de réalisation n'hésitez pas<br />
à nous contacter : <a href="webmaster@kitgraphiquegratuit.org">- E-mail</a><br />
ou à visiter le forum : <a href="http://www.kitgraphiquegratuit.org/forum/">- Forum</a>

Et rajouter le code ci-dessous a la place

<div align="center">
<div id="en_tete">

</div>
</div>

<div id="corps">
<h1>Connexion espace membre :</h1><br />
<h2>
<center>
<form action="index.php" method="post">
Login : <input type="text" name="login" value="<?php if (isset($_POST['login'])) echo stripslashes(htmlentities(trim($_POST['login']))); ?>"><br />
Mot de passe : <input type="password" name="pass" value="<?php if (isset($_POST['pass'])) echo stripslashes(htmlentities(trim($_POST['pass']))); ?>"><br />
<input type="submit" name="connexion" value="Connexion">
</form>
<a href="inscription.php">Pas inscrit ? Vous inscrire</a>
<?php
if (isset($erreur)) echo '<br /><br />',$erreur;
?>
</center>
</h2>

Voila et vous devez faire pareil pour toutes les page de l'espace membre

Attention vous devez supprimer style.css de l'espace membre et mettre celui de votre kit

Maintenant voici se que ça donne

<?php
if (isset($_POST['connexion']) && $_POST['connexion'] == 'Connexion') {
if ((isset($_POST['login']) && !empty($_POST['login'])) && (isset($_POST['pass']) && !empty($_POST['pass']))) {

include ('config2.php');

$sql = 'SELECT id FROM membre WHERE login="'.mysql_escape_string($_POST['login']).'" AND pass_md5="'.md5(mysql_escape_string($_POST['pass'])).'"';
$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
$nb = mysql_num_rows($req);

if ($nb == 1) {
$data = mysql_fetch_array($req);

session_start();
$_SESSION['login'] = $_POST['login'];
// on enregistre en plus l'id du membre dans une variable de session
$_SESSION['id'] = $data['id'];

mysql_free_result($req);
mysql_close();

header('Location: connect_ok.php');
exit();
}
elseif ($nb == 0) {
$erreur = 'Compte non reconnu.';
}
else {
$erreur = 'Problème dans la base de données : plusieurs membres ont les mêmes identifiants de connexion.';
}
mysql_free_result($req);
mysql_close();
}
else {
$erreur = 'Au moins un des champs est vide.';
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>

<div id="conteneur">
<div id="left">

<div class="menuhaut"></div><div class="fond">
<div class="fondtzm"><form action="" method="post">
<div>
Login :<br />
<div class="champ"><input type="text" value="Pseudo" name="pseudo" onclick="effacer(this, 'Pseudo');" onblur="restaurer(this, 'Pseudo');" /></div>
Mot de passe :<br />
<div class="champ"><input type="password" name="connect_pass" value="motdepasse" onclick="effacer(this, 'motdepasse');" onblur="restaurer(this, 'motdepasse');" /></div>
<input type="image" id="ok" src="images/ok.png" title="Connexion"/>
</div>
</form></div>
</div><div class="menubas"></div>

<div class="menuhaut">Menu</div><div class="fond">
<ul class="m">
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
</ul>
</div><div class="menubas"></div>

<div class="menuhaut">Menu</div><div class="fond">
<ul class="m">
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
</ul>
</div><div class="menubas"></div>

<div class="menuhaut"></div><div class="fond">
<div class="fondresearch">
<form method="post" action="rechercher.php" id="search">
<div>
<input name="submit" type="submit" class="search" value="" alt="Lancer la recherche!"/>
Rechercher :<br />
<div id="fsearch"><input name="search" type="text" value="search" onclick="effacer(this, 'search');" onblur="restaurer(this, 'search');" size="18"/></div><br />
</div>
</form>
</div>
</div><div class="menubas"></div>

</div>

<div id="right">
<div id="header">
<table summary=""><tr><td>
<ul id="bouton">
<li><a id="bouton1" href="#" title=""></a></li>
<li><a id="bouton2" href="#" title=""></a></li>
<li><a id="bouton3" href="#" title=""></a></li>
<li><a id="bouton4" href="#" title=""></a></li>
   <li><a id="bouton5" href="#" title=""></a></li>
<li><a id="bouton6" href="#" title=""></a></li>
<li><a id="bouton7" href="#" title=""></a></li>
</ul>
</td></tr></table>

</div>
<div id="contenu">
<div class="conh"></div><div class="conf">
</head>

<body>

<div align="center">
<div id="en_tete">

</div>
</div>

<div id="corps">
<h1>Connexion espace membre :</h1><br />
<h2>
<center>
<form action="index.php" method="post">
Login : <input type="text" name="login" value="<?php if (isset($_POST['login'])) echo stripslashes(htmlentities(trim($_POST['login']))); ?>"><br />
Mot de passe : <input type="password" name="pass" value="<?php if (isset($_POST['pass'])) echo stripslashes(htmlentities(trim($_POST['pass']))); ?>"><br />
<input type="submit" name="connexion" value="Connexion">
</form>
<a href="inscription.php">Pas inscrit ? Vous inscrire</a>
<?php
if (isset($erreur)) echo '<br /><br />',$erreur;
?>
</center>
</h2>

<br /><br />

<span>Contenu de l'archive :</span><br />
L'archive que vous venez de télécharger contient les fichiers suivants :<br />
    - un fichier index.html et un fichier style.css<br />
    - un dossier "images" contenant toutes les images du kit<br />
    - Le ou les .PSD<br />
    - la présente licence
</div><div class="conb"></div>

<div class="conh"></div><div class="conf">
<span>Termes et conditions de la licence :</span><br />
En téléchargeant et en utilisant ce kit graphique, vous reconnaissez avoir lu et accepté les conditions d'utilisation présente sur notre site :
<a href="http://www.kitgraphiquegratuit.org/conditions.php">CGU</a>

<br /><br />

<span>Nous contacter :</span><br />
Pour toutes informations supplémentaires, d'aide, de modification ou de réalisation n'hésitez pas<br />
à nous contacter : <a href="webmaster@kitgraphiquegratuit.org">- E-mail</a><br />
ou à visiter le forum : <a href="http://www.kitgraphiquegratuit.org/forum/">- Forum</a>

<br /><br />
<div style="text-align: center"><a href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;"><img src="http://www.kitgraphiquegratuit.org/images/banniere2.jpg" alt="kits graphiques gratuits" /></a></div>
</div><div class="conb"></div>
</div>

<div id="pied">

<div class="copyright">©<a href=""> Votresite.com</a> 2009 | Design <a href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="kits graphiques gratuits" >Kits Gratuits</a> | <a href="http://validator.w3.org/check?uri=referer" onclick="window.open(this.href); return false;">XHTML strict</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" onclick="window.open(this.href); return false;">CSS3</a></div>

</div>

</div>
</div>

</body>
</html>

Voila et n'oubliez pas de faire pareil pour toutes les pages

Informations importante !!! :

Vous devez laisser Config.php config2.php en faite les pages de configuration sql et autre vous devez les laisser comme elles sont.

Et n'oubliez pas de mettre les tables sql dans votre bases de donnés au cas ou vous ne sauriez pas c'est quoi ? les voici :

CREATE TABLE membre (
id int(11) NOT NULL auto_increment,
login text NOT NULL,
pass_md5 text NOT NULL,
PRIMARY KEY (id)
) TYPE=MyISAM;

CREATE TABLE messages (
id int(11) NOT NULL auto_increment,
id_expediteur int(11) NOT NULL default '0',
id_destinataire int(11) NOT NULL default '0',
date datetime NOT NULL default '0000-00-00 00:00:00',
titre text NOT NULL,
message text NOT NULL,
PRIMARY KEY (id)
) TYPE=MyISAM;

J'espére sincérement que se tutoriel vous à aidez

Dans le prochain tutoriel je vous expliquerais comment rajouter des champs au formulaire d'inscription. ^^

Bonne journée à vous

Dernière modification par SaiTek (13-09-2010 18:50:58)

SaiTek · 13-09-2010 13:45:24

Et oui la suite va très vite big_smile

Comme promis je vous donne le tutoriel pour savoir comment rajoutez des champs a l'inscription !

Donc d'abord je vous conne le fichier ou il y a l'inscription

Alors le voici :

</head>

<body>
<div align="center">
<div id="en_tete">

</div>
</div>

<div id="corps">
<h1>
Inscription à l'espace membre :</h1>
<h2>
<center>
<form action="inscription.php" method="post">
Login : <input type="text" name="login" value="<?php if (isset($_POST['login'])) echo stripslashes(htmlentities(trim($_POST['login']))); ?>"><br />
Mot de passe : <input type="password" name="pass" value="<?php if (isset($_POST['pass'])) echo stripslashes(htmlentities(trim($_POST['pass']))); ?>"><br />
Confirmation du mot de passe : <input type="password" name="pass_confirm" value="<?php if (isset($_POST['pass_confirm'])) echo stripslashes(htmlentities(trim($_POST['pass_confirm']))); ?>"><br />
<input type="submit" name="inscription" value="Inscription">
</form>
<?php
if (isset($erreur)) echo '<br />',$erreur;
?>
</center>
</h2>

Donc vous allez me dire ( Oué c'est nul il y a que ça comme champs pour l'inscription ) ET NON il vous suffit juste dans rajouter et oui cela et
vraiment possible donc maintenant c'est un peux compliquer mais ont va faire avec hein big_smile

Donc on na le formulaire ci-dessus maintenant on se connecte a phpmyadmin on clique sur la table membre ensuite nous rajouter

le champ exemple ( recherche ) pour cela vous allez à :

Ajouter un champ Ajouter champ(s)En fin de table En début de table Après ( on s'en fiche tongue ) vous cliquez sur exécuter

Donc maintenant

Ou il y a CHAMP vous mettez par exemple recherche
a type vous laissez VARCHAR

A taille / valeurs vous mettez le nombre que vous voulez pour recherche comme pour mon exemple on va mettre 5 ( homme - femme ) = 5 lettres ^^

a Interclassement vous aller a LATIN 1 et vous cliquez sur Latin_swidish...

Maintenant vous cliquez sur ENREGISTRER ensuite nous retournons a inscription

et la vous mettez : ( La j'ai mis le champ que j'ai mis a l'exemple )

</head>

<body>
<div align="center">
<div id="en_tete">

</div>
</div>

<div id="corps">
<h1>
Inscription à l'espace membre :</h1>
<h2>
<center>
<form action="inscription.php" method="post">
Login : <input type="text" name="login" value="<?php if (isset($_POST['login'])) echo stripslashes(htmlentities(trim($_POST['login']))); ?>"><br />
Mot de passe : <input type="password" name="pass" value="<?php if (isset($_POST['pass'])) echo stripslashes(htmlentities(trim($_POST['pass']))); ?>"><br />
Confirmation du mot de passe : <input type="password" name="pass_confirm" value="<?php if (isset($_POST['pass_confirm'])) echo stripslashes(htmlentities(trim($_POST['pass_confirm']))); ?>"><br />
Que recherchez-vous <input type="text" name="recherche" value="<?php if (isset($_POST['recherche'])) echo stripslashes(htmlentities(trim($_POST['recherche']))); ?>"><br />
<input type="submit" name="inscription" value="Inscription">
</form>
<?php
if (isset($erreur)) echo '<br />',$erreur;
?>
</center>
</h2>
</div>

</body>
</html>

N'oubliez pas de mettre ça dans votre page html
Voila c'est fini ^^

Dernière modification par SaiTek (13-09-2010 18:51:59)

SaiTek · 13-09-2010 16:50:28

Dans le prochain tutoriel je vais vous expliquer comment ajoutez des script php et oui on peux tout mettre sur une page html mdr x)

ArT3F4cT · 13-09-2010 17:46:03

Très bon boulot ce petit tuto SaiTek ! Sa servira à pas mal de monde, vu que les demandes de ce type sont fréquentes. Essaie juste d'éditer un peu ton texte en te servant du BBCode pour mettre en forme tes codes html et php wink

pour l'utilisation de ces balises : http://www.kitgraphiquegratuit.org/foru … php#bbcode

Good Job en tout cas smile

SaiTek · 13-09-2010 18:10:12

Merci a vous ^^

C'est grace a vous que le forum vie aujourd'hui ^^

SaiTek · 13-09-2010 18:19:48

Par contre je suit un petit peut a l'aise avec le php mais chui nul en design pour çaa que je pourrez pas faire de tutoriels avec le design désolé sad

Mais en tout cas je vais vous donner plein de tutoriel sur le php et le html pour ce qui connaissent pas beaucoup

Ps : merci de vos création smile

ArT3F4cT · 13-09-2010 18:23:34

Merci pour ton aide et tes propositions en tout cas c'est très sympa et très utile pour les membres.

On essaiera à l'occasion de compléter ton tuto pour l'intégration xHTML/CSS wink

SaiTek · 13-09-2010 18:27:18

Ok merci ^^

SaiTek · 13-09-2010 18:54:51

Voila tutoriel modifier ^^

skyice · 25-04-2011 18:30:04

Moi, il ya le code php qui s'affiche dans le header

Ps: votre code fonctionne t'il sur touts les scipts?

Car le votre n'est plus disponible au téléchargement

Dernière modification par skyice (25-04-2011 18:40:25)

SaiTek · 26-04-2011 02:06:03

Si le code s'affiche se n'est pas normal ==> le code est t-il entre les balises suivante :

<?php ?>

Et oui tu peux mettre se que tu veux dans ta page xhtml smile tu peux adapté n'importe quel script php.

skyice · 28-04-2011 21:29:03

Ok merci wink

Piox · 29-04-2011 00:29:38

Sur le site j'ai :
Ce script n'est plus disponible sur le site de l'éditeur, son téléchargement est donc interrompu pour le moment.

skyice · 29-04-2011 18:03:57

C'est le pourquoi je demandais à saitek s'il pouvait nous le mettre chez un hébergeur wink

Piox · 30-04-2011 16:36:34

Coucou SaiTek,

Pouvez vous mettre un nouveau lien de téléchargement pour le fichier ?

Cordialement,
Piox

SaiTek · 17-05-2011 11:36:58

Bonjour,

Désolé pour le lien HS mais j'attend que l'auteur se connecte sur msn pour qu'il m'envoie le fichier merci de votre patience.

Piox · 12-06-2011 23:52:32

Plop !

Est-ce que vous avez reçu le fichier ?

SaiTek · 13-06-2011 14:12:19

Bonjour,

Merci de votre patience, voici le lien ( Pour une validités de 365 jours )

PHPMemberv1.3.zip - 39.4 Kio

Piox · 13-06-2011 16:41:11

Salut,

Merci pour le lien !
Donc après 365 jours, je dois le refaire ?

SaiTek · 13-06-2011 18:07:40

Non le lien expire dans 365 jours

Piox · 13-06-2011 18:43:16

Ah ok ! smile

#1 13-09-2010 13:07:20

[Tutoriel] Créer et intégrer une zone membre

#2 13-09-2010 13:45:24

Re: [Tutoriel] Créer et intégrer une zone membre

#3 13-09-2010 16:50:28

Re: [Tutoriel] Créer et intégrer une zone membre

#4 13-09-2010 17:46:03

Re: [Tutoriel] Créer et intégrer une zone membre

#5 13-09-2010 18:10:12

Re: [Tutoriel] Créer et intégrer une zone membre

#6 13-09-2010 18:19:48

Re: [Tutoriel] Créer et intégrer une zone membre

#7 13-09-2010 18:23:34

Re: [Tutoriel] Créer et intégrer une zone membre

#8 13-09-2010 18:27:18

Re: [Tutoriel] Créer et intégrer une zone membre

#9 13-09-2010 18:54:51

Re: [Tutoriel] Créer et intégrer une zone membre

#10 25-04-2011 18:30:04

Re: [Tutoriel] Créer et intégrer une zone membre

#11 26-04-2011 02:06:03

Re: [Tutoriel] Créer et intégrer une zone membre

#12 28-04-2011 21:29:03

Re: [Tutoriel] Créer et intégrer une zone membre

#13 29-04-2011 00:29:38

Re: [Tutoriel] Créer et intégrer une zone membre

#14 29-04-2011 18:03:57

Re: [Tutoriel] Créer et intégrer une zone membre

#15 30-04-2011 16:36:34

Re: [Tutoriel] Créer et intégrer une zone membre

#16 17-05-2011 11:36:58

Re: [Tutoriel] Créer et intégrer une zone membre

#17 12-06-2011 23:52:32

Re: [Tutoriel] Créer et intégrer une zone membre

#18 13-06-2011 14:12:19

Re: [Tutoriel] Créer et intégrer une zone membre

#19 13-06-2011 16:41:11

Re: [Tutoriel] Créer et intégrer une zone membre

#20 13-06-2011 18:07:40

Re: [Tutoriel] Créer et intégrer une zone membre

#21 13-06-2011 18:43:16

Re: [Tutoriel] Créer et intégrer une zone membre

Pied de page des forums