Bonjours,
Afin de faire un compteur dynamique de connectés en live pour votre site, il va falloir y intégrer la technologie: PHP & JQUERY.
Mais qu'est-ce ? PHP est un dérivé du JAVA afin de rendre votre site web dynamique, par exemple: interagir avec une base de donnée.
Le JQUERY, est un dérivé du XML & du Javascript différent du JAVA.Il va servir à recharger notre compteur toute les X secondes.
Dans un premier temps, il nous faut notre base de donnée:
Pour cela il vous faut un hébergeur MYSQL comme par exemple free-h.org (payant & gratuit).
Faite cette requête SQL sur votre serveur MYSQL:
Ensuite, il faut déclarer la connexion au serveur mysql en php, pour cela créer un dossier nommée "CONFIG" puis créer dedans un fichier sql.php
Enfin, viens notre JQUERY & JAVASCRIPT(simple):
Dans les Balises <head> de votre document ajoutez:"<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script><script type="text/javascript" src="compteur.js"></script>"
Dans les Balises <div> souhaité où apparraisse vos connectés en live ajoutez: "<div id='mes_connectes'></div>";
Créer compteur.js
HORS DU DOSSIER "CONFIG" dans le même répertoire que votre page d'appelle à compteur.js
Afin de faire un compteur dynamique de connectés en live pour votre site, il va falloir y intégrer la technologie: PHP & JQUERY.
Mais qu'est-ce ? PHP est un dérivé du JAVA afin de rendre votre site web dynamique, par exemple: interagir avec une base de donnée.
Le JQUERY, est un dérivé du XML & du Javascript différent du JAVA.Il va servir à recharger notre compteur toute les X secondes.
Dans un premier temps, il nous faut notre base de donnée:
Pour cela il vous faut un hébergeur MYSQL comme par exemple free-h.org (payant & gratuit).
Faite cette requête SQL sur votre serveur MYSQL:
PHP:
CREATE TABLE IF NOT EXISTS `ma_database` (
`id` int(255) NOT NULL AUTO_INCREMENT,
`pseudo` varchar(255) NOT NULL,
`connecte` enum('0','1') NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=56 ;Ensuite, il faut déclarer la connexion au serveur mysql en php, pour cela créer un dossier nommée "CONFIG" puis créer dedans un fichier sql.php
Voici le contenu de SQL.php:
Puis créer compteur.php HORS DU DOSSIER "CONFIG":
PHP:
<?PHP
/* CONFIG MYSQL */
$SQL_HOST = "SQL.HEBERGEUR.FR";//Votre hebergeur SQL
$SQL_USER = "IDENTIFIANT";//Votre Identifiant
$SQL_PASS = "MOT DE PASSE";//Votre MOT de Passe
$SQL_DATA = "ma_database";//Votre database
/* CONNEXION MYSQL */
$mysql_connect = mysql_connect($SQL_HOST,$SQL_USER,$SQL_PASS) or die("La connexion avec notre base de données à échouée.");
$mysql_database = mysql_select_db($SQL_DATA) or die("Une erreur s'est produite avec la base de données.");
?>
PHP:
<?PHP
include('./CONFIG/sql.php');
//Notre Fonction qui récupère les connectés:
//$STR correspond à la variable mes_connectés vous pouvez changer celle-ci, ne doit pas contenir de caractères spéciaux.
//NE doit pas contenir de caractères spéciaux sauf des _
function Connecte($str){
$tmp = mysql_query("SELECT COUNT(*) AS $str FROM
".$SQL_DATA." WHERE (connecte = '1')") or die(mysql_error()."Erreur lors de la récupération des Connectés");
$tmp = mysql_fetch_assoc($tmp);
return $tmp[$str];
}
//puis faite un simple echo();
// sécurisez ce echo(); via is_numeric();
echo is_numeric(Connectes('mes_connectes'));
?>Enfin, viens notre JQUERY & JAVASCRIPT(simple):
Dans les Balises <head> de votre document ajoutez:"<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script><script type="text/javascript" src="compteur.js"></script>"
Dans les Balises <div> souhaité où apparraisse vos connectés en live ajoutez: "<div id='mes_connectes'></div>";
Créer compteur.js
HORS DU DOSSIER "CONFIG" dans le même répertoire que votre page d'appelle à compteur.js
PHP:
var membres=0;// Nombre de connectés par défaut.
var secondes = 2000;// Recharger le compteur toutes les 2000 milisecondes soit 2 Secondes.
var my_id = '#mes_connectes';
// Bon à savoir: Si le <div></div> souhaité porte un attribut "ID", var my_id = ''; contient toujours un "#" avant le nom de l' "ID" du div.
//Exemple:<div id="mes_connectes"></div> alors var my_id = ''; devient var my_id = '#mes_connectes';
// Bon à savoir: Si le <div></div> souhaité porte un attribut "CLASS", var my_id = ''; contient toujours un "." avant le nom de la "CLASS" du div.
//Exemple:<div class="mes_connectes"></div> alors var my_id = ''; devient var my_id = '.mes_connectes';
function membres_enligne()
{
$.ajax({
url: "/compteur.php",
type: "GET",
success : function(html) {
$(my_id).fadeOut(200, function () {
$(my_id).css("display","none");
$(my_id).html(html);
$(my_id).fadeIn(200);
});
}});
membres++;
setTimeout("membres_enligne()",secondes);
//consulter var secondes, celle-ci est réglé à 2000 millisecondes soit 2 secondes (Recommandé afin d'évité les bogues.)
}
(function($){ $(document).ready(function() {
membres_enligne();
})})(jQuery);
$.noConflict();
Last edited:
