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.
Une fois que la base SQL et créer nous allons pouvoir nous mettre au travail tongue
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 :
Une fois le code mit nous allons maintenant mettre le formulaire de connexion à l'espace membres dans la même page !
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>
Attention vous devez supprimer style.css de l'espace membre et mettre celui de votre kit
<?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"><!-- Global -->
<div id="left"><!-- Colonne de Gauche -->
<div class="menuhaut"></div><div class="fond"><!-- Début menu -->
<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><!-- Fin menu-->
<div class="menuhaut">Menu</div><div class="fond"><!-- Début menu -->
<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><!-- Fin menu-->
<div class="menuhaut">Menu</div><div class="fond"><!-- Début menu -->
<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><!-- Fin menu-->
<div class="menuhaut"></div><div class="fond"><!-- Début menu -->
<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><!-- Fin menu-->
</div><!-- Fin Colonne de Gauche -->
<div id="right"><!-- Colonne de Droite -->
<div id="header"><!-- Header -->
<table summary=""><tr><td>
<ul id="bouton"><!--Début Du Menu Horizontal -->
<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><!-- Fin Du Menu Horizontal -->
</td></tr></table>
</div><!-- Fin Header -->
<div id="contenu"><!-- Début du contenu -->
<div class="conh"></div><div class="conf"><!-- Début cadre -->
</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><!-- Fin cadre -->
<div class="conh"></div><div class="conf"><!-- Début cadre -->
<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><!-- Fin cadre -->
</div><!-- fin du contenu -->
<div id="pied"><!-- Pied -->
<!-- mention de copyright Ne pas retirer sans autorisation écrite Design <a href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="kits gratuits gratuits" >Kit Graphique</a> -->
<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>
<!-- mention de copyright Ne pas retirer sans autorisation écrite Design <a href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="kits gratuits gratuits" >Kit Graphique</a> -->
</div><!-- Fin Pied -->
</div><!-- Fin Colonne de Droite -->
</div><!-- Fin Global -->
</body>
</html>
Les pages de configurations vous devez obligatoirement les laisser comme elle 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 :
