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 :
Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Donc voici le code que vous devez mettre :
Code :
<?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
Code :
<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
Code :
<?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>
Voila et n'oubliez pas de faire pareil pour toutes les pages
Informations importante !!! :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 :
Code :
REATE 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;
Tutoriel terminer avec succès :p