Tutoriel Vidéo PHP : Créer un tchat en Ajax/PHP

Dans ce tutoriel vidéo vous découvrirez comment réaliser un tchat dynamique en Ajax/PHP. Nous verrons donc comment utiliser jQuery et l'objet Javascript timer afin d'appeler un script PHP de manière récurrente.

Ce tutoriel est découpé est deux partie :


Télécharger la vidéo
(Réservé aux premiums)

Télécharger les sources
(Réservé aux premiums)


Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi

Les namespaces

Les namespaces
12m

Dans ce tutoriel vidéo vous apprendrez à utiliser les namespace ou...

API LastFM

API LastFM
35m

Dans ce tutoriel vidéo vous apprendrez comment utiliser l'API de...

72 commentaires
Ajouter un commentaire

iTACHi Il y a 17 jours Répondre

Salut Alors deja , je tiens à mentionner mon mecontentement contre les gens qui trouvent le moyen de critiquer le taf fait ici ... je trouve ça abominable , j'ai réalisé des videos , et j'peux dire que c pas évident , qui plus est , le taf fait sur les videos du raton :P n'est pas si simple , alors vu le prix qu'il demande , je ne comprends même pas pourquoi certains trouvent le moyen de râler :/ Dans la vie , on ne vous donne pas toujours tout

Sinon , je te remercie pour tout tes tutos , ils m'aident un max dans la conception de mon site web :D Et j'me suis abonné direct ^^

J'aurais une question concernant la connection du chat , vu que j'aimerais en faire une shoutbox sur mon site qui lui est deja sous inscription , j'aimerais faire en sorte que le login du site soit le login du chat Et vu que je passe sous fonction , ça va te parler , ça sort de tes tutos ($Auth->user('NiCK')) , je n'arrive pas à faire en sorte de ne pas passer par ce systeme de $_SESSION['pseudo'] ... Qui puis est , ce tuto est en mysql , que je ne parle absolument pas , alors le traduire en PDO xD pas évident :P

Si tu pouvais me donner des infos pour faire en sorte de passer par le login de mon site et non par ce systeme de login pseudo , ce serait sympas

Sinon , encore merci pour tout ces tutos , tu geres Graphikart

Grafikart Il y a 17 jours

Passe par le forum ça sera plus simple et met en lien cette page

iTACHi Il y a 16 jours - Répondre

oki Grafikart

scanner68 Il y a 20 jours Répondre

bonsoir je voudrais savoir quel version de jquery a été utiliser
merci de votre repose merci et bonne soirée

Grafikart Il y a 19 jours - Répondre

Peu importe la version

polo03 Il y a 1 mois Répondre

La boucle du getMessage ne sert à rien puisque si il y a plusieur message de postés, la variable va se réinitialiser à chaque bouclage ... Et je trouve pas de solution (enfin si : array_push() , mais yarrive pô )

ccvf2s Il y a 3 mois Répondre

Le coup du 2eme tableau c'est facultatif t'aurait pu l'afficher par ordre décroissant d'id .
ORDER BY id DESC

vu que t'avait mis clef primary et A.I .

Sinon Bon tuto.

Grafikart Il y a 3 mois - Répondre

Non parceque dans ce cas tu ne récupère que les plus vieux message, là tu veux les XX plus récent mais organisé du plus ancien au plus vieux

DoobleOw7 Il y a 4 mois Répondre

ATTENTION : Depuis PHP 5 "mysql_excape_string" n'est plus valide. Il faut utiliser "mysql_real_escape_string" à la place.

Micka Il y a 5 mois Répondre

Bonjour, super le tuto J'ai une petite question hors-sujet : pouvez-vous me passer le code source de là où on écrit (exemple : dans la partie pour laisser un commentaire) ? Car j'ai beau essayer de comprendre comment sa marche, mais en vain je ne comprend jamais ... Merci d'avance !

panzer08 Il y a 8 mois Répondre

Salut, super tuto !!

Mais j'ai un petit problème, j'ai modifier le code pour mettre le textarea au dessus des message poster, quand je poste un message cela ce met a la suite, donc le dernier, et quand j'actualise sa me le met en premier... j'aimerai modifier le code pour que quand je poste cela reste en premier, proposition !!

Voici le code :

<?php
if(!isset($_SESSION["pseudo"]) || empty($_SESSION["pseudo"])){
header("location:index.php");
}
include "include/connect.php";
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="include/theme/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="include/js/jquery.js"></script>
<script type="text/javascript" src="include/js/tchat.js"></script>
<script type="text/javascript">


<?php
$sql = "SELECT id FROM messages ORDER BY id DESC LIMIT 1";
$req = mysql_query($sql) or die(mysql_error());
$data=mysql_fetch_assoc($req);
?>
var lastid = <?php echo $data["id"]; ?>
</script>
</head>

<body>
<div id="conteneur" style="width:430px;">
<h1>Connectez en tant que <?php echo $_SESSION["pseudo"]; ?></h1>
<div id="connected">

</div>

<div id="tchatForm" style="width:400px;">
<table>
<tr>
<td>
<form method="post" action="#">
<textarea name="message" style="width:300px;"></textarea>
</td>
<td>
<input type="submit" value="Envoyer"/>
</td>
</tr>
</table>
</form>
</div>
<div id="tchat">
<?php
$sql = "SELECT * FROM messages ORDER BY date DESC LIMIT 10";
$req = mysql_query($sql) or die(mysql_error());

while($data = mysql_fetch_assoc($req)){
?>
<p><strong><?php echo $data["pseudo"]; ?></strong> (<?php echo date("d/m/Y H:i:s",$data["date"]); ?>) : <?php echo htmlentities(utf8_decode($data["message"])); ?></p>
<?php
}
?>
</div>
</div>


</body>
</html>

Merci

Dexo Il y a 9 mois Répondre

Il aurait été plus simple d'ordonner les résultats en fonction de l'id du plus grand au plus petit m'enfin bref.

Dexyne Il y a 9 mois Répondre

Oui le lien de la démo est mort.
Sinon super tuto vu que je vais en avoir besoin et que je compte voir un peu plus l'Ajax.

Scorp Il y a 10 mois Répondre

la demo ne marche pas

eloyas Il y a 12 mois Répondre

Bonjour ,

Je viens signaler une petite erreur :D ,

la voici :

Undefined variable: t [APP/tmp/cache/views/tutoriels_tchat_jquery_...line 65

Voilà.

Cordialement Elo.

Black Snake Il y a 1 an Répondre

Vraiment super ton tuto c'est se que je chercher merci ! se qui seré bien comme tuto c'est un tuto pour l'envoie d'image avatar dans un tchat, envoie d'image tous cours, dont sa affiche l'image aprés l'envoie.

WinuX Il y a 1 an Répondre

Merci bien, grâce à toi (en partie) j'vais enfin pouvoir faire une shootbox ajax pour mon forum sous fluxBB.

Ce qui est bien avec tes tutos, c'est que tu fais des erreurs, et qu'on les voit alors on se dit alors pourquoi il corrige pas xD, fin ça nous aide au passage a les trouver

labidi Il y a 1 an Répondre

good work))

christophe71 Il y a 1 an Répondre

en essayant ce script sur OVH voila l'erreur!?

Warning: Cannot modify header information - headers already sent by (output started at /homez.395/maconimm/www/index.php:1) in /homez.395/bourgmmo/www/index.php on line 29

blaksens Il y a 1 an Répondre

j'ai téléchargé le fichier source j'ai mis en ligne sans aucune modification
quand je rentre le pseudo il me renvoit toujours sur l'index en regardant la base de donnée le pseudo est bien enregistré. Quand je met l'adresse tchat.php il reconnait mon pseudo et le chat fonctionne bien. vous pouvez essayer le formulaire sur: http://www.janine-kamer.com/tchat
si vous avez le meme probleme merci de m'aider

Tomo Il y a 1 an Répondre

Bonjour !
Très bien le tuto, bien expliqué, grâce à vous j'ai pu créer un chat léger sans trop de difficultés =)

J'ai juste une petite erreur bizarre :

Quand je teste le chat et que je poste un message sous 2 navigateurs (comme dans la video), j'ai de temps en temps le dernier message posté qui s'affiche 2 fois de suite!
Très bizarre, de plus que ça ne le fait pas systématiquement, et que ce n'est pas non plus la même session qui a ce "bug" !
Par exemple (ce sera mieux représenté)
sous firefox j'ai ça :
Tomo (23/11/2010 18:51:18) : test
Tomo (23/11/2010 18:51:18) : test
Timi (23/11/2010 18:51:31) : aaaaaaa
Timi (23/11/2010 18:51:31) : aaaaaaa
Tomo (23/11/2010 18:51:44) : grrrrrr
Timi (23/11/2010 18:52:01) : ça merdouille un peu !
Timi (23/11/2010 18:52:01) : ça merdouille un peu !
Tomo (23/11/2010 18:52:19) : je vois ça ^^
Tomo (23/11/2010 18:52:42) : bizarre
Timi (23/11/2010 18:52:52) : oui !
Timi (23/11/2010 18:53:08) : et ça le prend pas 2 fois à tous les coups !

et sous ie:
Tomo (23/11/2010 18:51:18) : test
Timi (23/11/2010 18:51:31) : aaaaaaa
Tomo (23/11/2010 18:51:44) : grrrrrr
Timi (23/11/2010 18:52:01) : ça merdouille un peu !
Tomo (23/11/2010 18:52:19) : je vois ça ^^
Tomo (23/11/2010 18:52:42) : bizarre
Timi (23/11/2010 18:52:52) : oui !
Timi (23/11/2010 18:53:08) : et ça le prend pas 2 fois à tous les coups !
Timi (23/11/2010 18:53:08) : et ça le prend pas 2 fois à tous les coups !

Peut être que quelqu'un a également eu ce petit bug ?
Si vous pouviez m'aider à résoudre ce problème, s'il vous plait =)

Je posterais une réponse si j'arrive à débugger mais j'avoue que je sèche là =/

Darkvins Il y a 1 an Répondre

Salut, alors déjà je tiens à dire que c'est un super tuto, je l'ai suivi et réalisé. Il marchait très bien, jusqu'à ce que je décide de structurer mon site en php pour ne pas à avoir mes menus header ou pied de page à réécrire dans chaque page.
Le problème est que le tchat ne marche plus, le timer de la fonction getMessages marche très bien avant que j'envoi un message, et lorsque j'essai d'en envoyer un il se stock bien dans la bdd, mais le message ne s'affiche plus, je cherche depuis 4h l'erreur sans succés... help me please...

Si quelqu'un peut regarder avec firebug ici: http://www.auto-shoot.com/darkvins/tchatmys16/index.php?tchat

Merci d'avance.

bourdais6 Il y a 1 an Répondre

Moi, j'ai un truc beaucoup plus rapide, plus simple, et donnant a peut-près le même résultats.

J'utilise le xAjax. rendez-vous ici: http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-faciles-avec-php-et-xajax.html

maroc.develop Il y a 2 ans Répondre

c bien

yanos Il y a 2 ans Répondre

Super tutoriel dommage que tout soit flou mais bon le tchat lui est de qualité

NRgizer Il y a 2 ans Répondre

tout d'abord, très bon tuto...super vraiment.

Juste une question...je n'arrive pas à insérn fait, j'ai vraiment repris les scripts du tutos à la lettre en vérifiant que j'avais pas fais d'erreur...mais je comprend pas.

Même au moment de vérifié avec firebug, bah firebug ne detecte rien quand je clique sur le bouton envoyer.

On peut m'aider en direct ou autre, ca serait sympa c'est assez urgent ^^

Lqncer Il y a 2 ans Répondre

Ok,

Problème résolu, si vous ne voulez pas rencontrer ce problème utiliser ce bout de code :

$(function(){

$("#tchatForm form").submit(function(){
clearInterval(timer)
showLoader("#tchatForm");
var message = $('#tchatForm form textarea#message').val();
$.post(url,{action:"addMessage",message:message},function(data){
if(data.erreur=="ok"){
getMessages();
}
else{
alert(data.erreur);
}
},"json");
$("#tchatForm form textarea").val("");
timer = setInterval(getMessages,500);
hideLoader();
return false;
})
});

Ce qui fonctionne sous tous les navigateurs

Lqncer Il y a 2 ans Répondre

Bonjour,

Avant tous très bon tuto, seulement je rencontre un problème sous google chrome la div loader ne veut pas s'effacer.
Y a t'il une norme ou es ce que la fonction remove ne fonctionne pas sous google chrome, en faisant des recherche sous google je n'ai rien trouvé à ce sujet :/

$P3C!F!K Il y a 2 ans Répondre

C'est un problème d'encodage qui provoque cette erreur changez le ut8 sans BOM

$P3C!F!K Il y a 2 ans Répondre

même déconnecter mon pseudo reste dans le champ connected.
Y'aurai t'il un problème de rafraichissement ?

$P3C!F!K Il y a 2 ans Répondre

Tout d'abord excellent site !!!
ensuite je test le tchat j'ai un problème je me connecte une première fois sans problème puis je me déconnecte lorsque je tente la reconnection j'obtiens cela lorsque je rentre mon pseudo

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/iphone4gpro/www/chat/index.php:1) in /home/iphone4gpro/www/chat/index.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /home/iphone4gpro/www/chat/index.php:1) in /home/iphone4gpro/www/chat/index.php on line 30
comment faire
merci

farfadet Il y a 2 ans Répondre

Désolé pour ce deuxième poste mais celui justa avant a été résolu^^

Je voulais savoir si il était possible d'afficher le lien lors de son envoie par le textarea?

farfadet Il y a 2 ans Répondre

Bonjour! Merci pour ce très bon tuto très complet,c'est le premier que j'achète et j'en suis content! ^^
Mais je voudrai demander à d'autres personnes si elles ont eu ce problème.
Le tchat fonctionne très bien avec Wamp mais certaines chose ne marchent plus lors de la mise en ligne:
Les personnes connectées ne s'affichent plus,
et les messages ne s'affichent plus en temps réel mais seulement si je rafraichi la page moi même.
Firebug m'affiche "Call to undefined function: json_encode()"
Je suis chez 1&1 est ce que ces erreurs peuvent provenir de sa?
Ca m'embête un peu d'avoir payer si c'est pour qu'il marche seulement en local ^^

Merci d'avance! =)

Thom77 Il y a 2 ans Répondre

Salut a tous

J'ai suivit ton tuto a la lettre, j'ai rencontré un problème :

<?xml version="1.0" encoding="UTF-8"?>
<hash>
<request>/statuses/user_timeline/32354209.xml?count=1</request>
<error>Rate limit exceeded. Clients may not make more than 150 requests per hour.</error>
</hash>

Mon site est héberger sur un serveur mutualisé , il y a plus de 200 sites dessus, donc il me mettait souvent que j'avais atteint le cotat de requete pour éviter que le dernier tweets ne soit pas afficher j'ai rajouter une petite condition très simple et la voici :

$msg_erreur = '<?xml version="1.0" encoding="UTF-8"?>
<hash>
<request>/statuses/user_timeline/32354209.xml?count=1</request>
<error>Rate limit exceeded. Clients may not make more than 150 requests per hour.</error>
</hash>
';

if(time() - fileatime("cache.xml") > 60){
$iUserId = xxxxxxxx;
$iLimit = 1;
$sUrl = "http://twitter.com/statuses/user_timeline/ $iUserId.xml?count=$iLimit";
$twitter = curl_init();
curl_setopt($twitter,CURLOPT_URL,$sUrl);
curl_setopt($twitter,CURLOPT_TIMEOUT,2);
curl_setopt($twitter,CURLOPT_RETURNTRANSFER,true);
$contenu = curl_exec($twitter);

if($contenu==false){
$contenu = file_get_contents("cache.xml");
}else{
// condition pour éviter le message d'erreur//
if($contenu != $msg_erreur){
file_put_contents("cache.xml",$contenu);
}else{
$contenu = file_get_contents("cache.xml");
}
}
}else{
$contenu = file_get_contents("cache.xml");
}


Bonne journée a tous

bibiphaue Il y a 2 ans Répondre

AHHH JE Craque , je ne pige pas , pour avoir les messages en ordre inversés, c'est a dire le plus recent en haut, il faut changer la troisieme requêtes celle qui est dans le tchat.php , et de metttre un order by date asc , non ?

en tout cas moi j 'ai gerer ca de maniere bien barbare du coup tout est generé dans le code tchatajax php, pour le coup les autres requetes ne servent a rien: voici mon get message :
$d["lastid"]= $lastid;
while($data=mysql_fetch_assoc($req)){
$dnom= '<span class="affichercommentnom">'.$data["nom"].'</span>';
$dste= '<span class="afficherimageste"></span><span class="affichercommentste">'.$data["ste"].'</span>';
$dclr= '<p class="clr"></p>';
$dcontenu= '<DIV class="affichercommentcontenu"><p class="afficherimagefleche"></p>'.nl2br($data["contenu"]).'</div>';
$d1 = '<span class="afficherimagetime"></span>';
$d2 = '<span class="affichercommenttime">'.date("H.i",strtotime($data["date"])).'</span>';
$dtime = $d1.$d2;
/*$dtime = echo ("Message posté à" . date("H:i",strtotime($data["date"])));*/
$dcommentindividuel= '<script language="javascript">$(".commentindividuel").hide().fadeIn(800);</script><div class="commentindividuel">' .$dnom. $dtime . $dste. $dclr. $dcontenu. '</div>';
$d["result"] = $dcommentindividuel;
$d["lastid"] = $data["id"];
je pense que c est pas tres conventionnel ce genre d ecriture mais bon >...

en tout cas si quelqu un a une petite idee pour inverser les messages ca me plairait bien
a+

webcap Il y a 2 ans Répondre

Bonjour,
moi je suis ravi de voir des tutos comme ceux proposé ici.
grand merci

par contre je test le tchat mais j'ai un soucis

var message = $('#chatform form textarea').val();
alert(message);
$.post(url,{ action:"addmessage",message:"message" },
function(data){
alert('fonction postée');
}, "json");

l'alert fonction posté ne fonctionne pas

je pense avoir bien tout suivi pourtant

merci d'avance si je pouvais comprendre pourquoi ca fonctionne pas

KentiinFR Il y a 2 ans Répondre

J'ai ce problème lors que je rentre on pseudo dans le champ:
Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/j690874/domains/kentinworld.com/public_html/tchat/index.php:1) in /home/j690874/domains/kentinworld.com/public_html/tchat/index.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /home/j690874/domains/kentinworld.com/public_html/tchat/index.php:1) in /home/j690874/domains/kentinworld.com/public_html/tchat/index.php on line 30

Ligne de index.php: header("location:tchat.php");

j'ai télécharger la source/

Arbiter0x Il y a 2 ans Répondre

Bonjour,
Personnelement je n'ai eu aucune problème avec le tutoriel si on garde la mise en forme de base.

J'ai voulu changer la position du textaera et du bouton envoyer, j'ai donc mis
bottom : 10px; left: 50px;

Avec cette mise en forme là, quand on refresh pas la page tout seule, dés qu'il y a plus de 15 messages, les messages s'affichent en dessous du formulaire pour tchatter ... assez génant je trouve, personne n'aurai une solution ?

J'ai essayer les refresh auto de la page mais ca ne fonctionne pas :s

FOKDS Il y a 2 ans Répondre

Bonjour,
j'aime votre travail mais je rencontres les problemes suivant.

<br />
<b>Fatal error</b>: Call to undefined function: json_encode() in <b>/web/fokds/www/Tchat/tchatAjax.php</b> on line <b>70</b><br />

et

showLoader ne se masque pas il est toujours visible et mon messages ne s'affiche uniquement si je raffraichis ma pas manuellement

merci de votre aide

quent1du58 Il y a 2 ans - Répondre

Deux questions:
1. Est-ce-que la fonction est appelée?
2. Est-ce-que la version de php est égale ou supérieure à la 5.2?

ipika Il y a 2 ans Répondre

Bonjour,

Le système n'est-elle pas trop lourde en requête SQL ?

Cordialement.

louisdsm Il y a 2 ans Répondre

Hehe super le tchat mais le tchat public a des faiblesse non. On se connecter sans pseudos. Avec des balise <?php ?>, ou autre et pareil dans ton tutos pour les formulaire on peut utiliser du javascript et du html. Les expression réguliere est-elle la solution a c'est problémes???

quent1du58 Il y a 2 ans - Répondre

Le mieux est encore de forcer l'utilisateur à s'inscrire ou tout simplement à mettre la zone de saisie entre les balises <xmp> et </xmp>.

nbuis47 Il y a 2 ans Répondre

Hello, une petite suggestion ou question... Comment faire pour qu'on puisse valider par la touche entrer ? Ce serait l'idéal, comme beaucoup on a le réflexe de taper son texte et valider par la touche entrer ! Une idée ??
Merci d'avance à tous, et encore félicitation à grafikart pour ses tutoriels plus que complets...

Grafikart Il y a 2 ans - Répondre

Ca se passe au niveau du javascript il faut "écouter" les actions du clavier et regardé quand la personne appuie sur entrer et lancer à ce moment là la soumission du formulaire. Je t'invite à faire des recherches sur la doc de jquery et sur google.

Zigee Il y a 2 ans Répondre

Je suis toujours dans la panade

Zigee Il y a 2 ans Répondre

Argh, j'ai toujours l'impression qu'en tapant vite mes messages, le rechargement s'emballe encore. L'inconvénient c'est que par moment deux getMessages() sont appelés a quelques milisecondes d'écart et il y a donc répétition du messages postés.
J'avoue que là ça me dépasse.

Grafikart Il y a 2 ans - Répondre

Remplace le setInterval par un setTimeout que tu relance lorsque tu as finit de récupérer les messages.

Zigee Il y a 2 ans Répondre

Bonjour Graf !

Voilà, j'avais eu un pépin avec le carrousel du coup j'avais dit que si je te sollicitais pour un bug, je t'achetais un autre tuto ! Bah voilà, j'ai acheté celui du chat et je vais pas tarder à t'en acheter un autre parce que j'ai à nouveau un problème sur ce tuto !!

Voilà, il me semble que la fonction clearInterval ne fonctionne pas dans mon cas.
Dans firebug, le script s'emballe dés que j'envoie un nouveau message. Comme si il ajoutait un nouveau SetInterval du coup à chaque post.

Si à l'occasion tu pouvais jeter un oeil de ce côté
http://www.scopland.com/sandbox/chat

En tout cas le carrousel marche à merveille et ce tuto est excellent.

Grafikart Il y a 2 ans - Répondre

Lorsque tu fais
setInterval("getMessages()",5000);
Tu relance un timer du coup ils s'additionnent donc il faut que tu le supprime puis que tu le relance
clearInterval(timer);
timer = setInterval("getMessages()",5000);

valentin45000 Il y a 2 ans Répondre

Oula mais pas d'affolement c'est pas bien grave ^^
Ok j'envoie tout sa ^^

valentin45000 Il y a 2 ans Répondre

Bon mon post à était supprimer donc je remet :
quand on envoi un message sa charger, sa charge sans jamais s'arrêter, alors que c'est correctement envoyer, c'est seulement quand on actualise qu'ont peut le voir.
Quel le problème à votre avis ?

Grafikart Il y a 2 ans - Répondre

Désolé j'ai fait un gros nettoyage des commentaire et j'ai supprimé un peu trop. Tu dois avoir une erreur du retour Ajax, regarde firebug et envois moi les erreurs par mail (on va éviter de faire une conversation en commentaire).

Gérald Il y a 2 ans Répondre

hello,

tout d'abord les tutoriaux sont vraiment top, un grand bravo ! même avec des années de php on découvre toujours une petite ruse bien utile !

ma question : y a t il moyen de faire descendre automatiquement l'ascenseur vertical afin que le message le + récent soit directement visible ?
j'avais vu ça avec du javascript de type scrollBy(0,999999)
=> partage tu cette méthode ? (qui ne marche pas toujours bien selon le navigateur je crois me souvenir)

A+

Necko Il y a 2 ans Répondre

Merci à toi.

Necko Il y a 2 ans Répondre

Salut tout le monde, dans la vidéo, on peut voir que la personne utilise un débugger sur son navigateur, ce qui est bien pratique.
quel est le nom de ce débugger ? ou puis je le trouver ?

Badbart Il y a 2 ans - Répondre

Firebug, tu le trouves sur google .

Thomas Il y a 2 ans Répondre

Merci pour ce tuto graphik
A tous les pleureuses qui trouve ca chère, pensez au boulot que représente le montage de ses tutos.
Perso je trouve que graphik devrait faire payer tous ses tutos, un abonnement de que 10 euros pour 6 mois franchement c'est donné ...
Moi ca fait deux ans que je me suis lance dans l'apprentissage des techniques web et je n'avais pas encore rencontré un site aussi intéressant et surtout en vidéo.

PS:
Pour les pleureuses qui ne font que du copier coller et ne cherche pas à comprendre les codes passez votre chemin ou passez à la CAISSE ...

PifyZ Il y a 2 ans Répondre

Mais comment faire alors, car tout recopier ça met 20 ans, et la qualité... :S

Mais sinon c'est bien

Et j'ai pu faire les commentaires, mais j'aurais aimer le t'chat, tant pis...

Cyrix Il y a 2 ans - Répondre

Il faut payer ;o)

PifyZ Il y a 2 ans Répondre

Je voudrais juste savoir où sont les sources des tutos ?

Grafikart Il y a 2 ans - Répondre

Les sources sont téléchargeables pour les membre premium à droite de la vidéo.

DoDo021 Il y a 2 ans Répondre

Re salut =)
J'ai une petite question =)
Jquery n'ai pas compatible avec IE j'aurais aimé savoir si tu avais des liens ou des astuces pour que cela fonctionne. =) Car j'ai cherché mais j'ai pas trouvé grand chose qui peux m'aider.

Merci d'avance =)

Have Fun DoDo021

Badbart Il y a 2 ans

Jquery est compatible avec IE !

DoDo021 Il y a 2 ans - Répondre

Si j'essaie de faire une requête ajax sa ne fonctionne pas et j'ai été sur plusieur site beaucoup de monde on le même problème que moi.
Je sais que jQery fonctionne mais pas aussi bien que sur les navigateurs qui respecte les normes W3C.
C'est pour sa que j'aimerais savoir si quelqu'un à des astuces.

Merci d'avance =)

Have Fun DoDo021

sc62 Il y a 2 ans Répondre

Salut ,

ça fonctionne en local avec Wamp ... mais sur mon serveur j'ai des erreurs de session ... ( j'ai utiliser le code source dans le Zip )

Grafikart Il y a 2 ans

Tu es sur Free ? Si oui il faut créer un dossier sessions à la racine.

sc62 Il y a 2 ans

non chez OVH

Grafikart Il y a 2 ans

Peux tu me donner plus d'infos sur ton erreur alors ?

sc62 Il y a 2 ans

Voila l'erreur :

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /homez.139/monsite/www/tchat/index.php:1) in /homez.139/monsite/www/tchat/index.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /homez.139/monsite/www/tchat/index.php:1) in /homez.139/monsite/www/tchat/index.php on line 30

Grafikart Il y a 2 ans

En général le problème vient du fait qu'un texte a déja été écris avant (parfois juste un espace fait planté) donc si tu arrive pas à identifier le problème met des @ devant les lignes qui te bloquent, ça masquera les erreurs.

Cyrix Il y a 2 ans - Répondre

Ou sinon, tu peux avoir deux fois la fonction de déclarée (sans que Wamp ne t'affiche l'erreur ...).

Sid Il y a 2 ans Répondre

Super tuto mais pourquoi utilises-tu windows et sur les autres mac os ^^ ? tu n'aimes pas mac ? p:

Nouipoz Il y a 2 ans Répondre

Salut , cool , merci beaucou en + très bien expliquer , merci beaucoup a toi .

29.02 Il y a 2 ans Répondre

Pour progresser, j'ai quelques questions qui me viennent à l'esprit :
- pourquoi ne pas mettre le champs id en clé primaire ?
Peut-être vu que le moteur est MyIsam et vu qu'il n'y a qu'une table ceci est inutile ?
- egalement, la fonction last_insert_id() pourrait t'elle suffir à obtenir le dernier id inséré au lieu de la requête ?

Grafikart Il y a 2 ans

Je n'ai pas mis le champ ID en clé primaire parceque j'ai oublié Il faut le mettre en clef primaire
Je ne m'y connais pas du tout au niveau des moteurs des tables, je laisse par défaut
la fonction peur suffir oui.

29.02 Il y a 2 ans - Répondre

D'accord. Merci de tes réponses.
Je trouve qu'une partie analyse serait intéressante. Pourquoi pas une partit oû l'on pourrait donner notre avis sur certains MCD ou encore MLR.

BORK Il y a 2 ans Répondre

je suis tout à fait daccord avec Badbart =)

merci encore pour ce magnifique tutoriel =)

Shin Il y a 2 ans Répondre

Ow depuis le temps que j'attends ce tuto il faut que la seconde partie soit payante T_T
Snif...

Toutes les meilleures choses ont une fin, on glisse vers le emob-type (des tuto gratuits ultra light histoire d'uniquement donner envie de se payer les autres ~)
En espérant que l'inévitable glissade déjà bien entamée prenne longtemps !

C'est vraiment dommage que le volontariat ne fonctionne pas... =/

Allez merci quand même de te donner tout ce mal, moi je fonce m'inscrire pour un mois~~

Badbart Il y a 2 ans

Faudrait pas abuser non plus, les parties gratuite sont en général assez complète. De plus je pense que les tutos sont la pour donner des idées, pour donner envie aux gens d'utiliser leurs clavier, et pas simplement être recopier.
Pis 10€ pour 6 mois, faut être une pince pour trouver ça chère :s, ça fait 2 paquets de clope, ou 5 bières en bar. Réparti sur 6 mois c'est ridicule.
Vu le nombre d'heure investi pour créé un tuto (prepa,real,montage,postage), on peut s'estimer heureux que ça soit pas facturé a l'heure lol !!

shin Il y a 2 ans

Le prix est effectivement très attractif comparé à beaucoup de sites mais le fait est que comme beaucoup de monde je n'aime pas être manipulé par des techniques commerciales visant uniquement à nous faire ouvrir notre bourse (comme faire des tutos gratuits incomplets (même s'il est vrai que pour l'instant ça n'arrive que rarement sur grafikart.fr) et nous faire payer pour voir "la suite").
A la rigueur je pense que si de temps en temps un tuto complet était payant (sans partie gratuite), peut-être aurait-on moins l'impression d'être forcé.

M'enfin je déplorais, si tu avais fait attention, que le volontariat ne marche pas puisque, ayant déjà tenté d'apporter une contribution volontaire avant que ce système ne soit mit en place, celle-ci me laissait une meilleure impression que l'abonnement obligatoire =/
Mais bon si je le déplore c'est bien que je me rend compte que peut-être le raton ne pouvait faire autrement, c'est pour cela que je l'ai quand même fait.

Grafikart Il y a 2 ans

Attention quand même, les tutoriels ne sont pas incomplet. Avec la partie visible gratuitement on peut tout à fait réaliser un tchat. Après c'est les fonctions avancé qui sont décrite.

Effectivement le volontariat ça marchait avec des tutos que j'enregistrais vite fait. Maintenant les tutos sont devenus plus conséquent, plus fréquents et me prennent donc du temps, il est normal de chercher à valoriser ce travail

Contrairement à ce qui est dit dans le premier message, je ne changerai rien au contenu gratuit. Les tutoriels ne deviendront pas "ultra-light" ne t'inquiète pas.

fantoche Il y a 2 ans

Il n'y a pas une page ou je peux lire le mécontentement de certains, devant le faite de devoir payer, je dirais plutôt contribuer.

Connaissant le travail que représente un cours, et de plus, aussi complet que tous ceux proposés ici, je pense que le prix demander est largement en dessous.

Je rejoins donc, les propos de certaines personnes ici, comme Badbart.

Peut être qu'il faudrait proposer un tuto "comment faire un tuto vidéo " pour que certains se rendent compte du travail a fournir :-))

Cyrix Il y a 2 ans - Répondre

Vous êtes quand même bien marrant vous.
Grafikart nous fait des tutoriels géniaux et il faut que vous vous plainiez ?! Mais on va où là ? Si vous n'êtes pas content, vous allez voir ailleurs mais les bons tutoriels (comme ceux de notre ami) ne se trouvent pas de partout.

Si vous en voulez plus, vous payez et puis c'est tout ! Mais c'est hallucinant quand même !
Il y a plus de volontariat qu'autre chose là dedans, mais c'est son droit de faire payer et vous n'avez pas à critiquer ce point-ci.

Bref, merci pour ce tutoriel Grafikart ;o)

Harry Il y a 2 ans Répondre

Tu te tapes un pire délire avec les messages à la fin U_o
LOL, sinon très bon tutoriel

Quent1du58 Il y a 2 ans Répondre

Merci pour le tuto

spookdealer Il y a 2 ans Répondre

trop cool ce tchat en ajax et php merci grafikart :p.

pobourger Il y a 2 ans Répondre

Si tu veut tenter je te conseil : http://www.allopass.com

pobourger Il y a 2 ans Répondre

Jolie tuturiel est ce que tu pense faire un compte payable pas ALLOPASS ? j'ai pas trop confiance même si je devrais avec ma carte bleu sur internet. ?
Cordialement,

WA007 Il y a 2 ans Répondre

P.S la qualité pas super :S

WA007 Il y a 2 ans Répondre

Je tien à dire que j'ai mis des fonds dans mon compte paypal pour te soutenir mais espérons que tu en profite pour en rajouter d'avantage ^^ )

Grafikart Il y a 2 ans - Répondre

Pour la qualité je te conseille vivement de télécharger la vidéo. Pour les vidéos assez longue je suis obligé de réduire la qualité pour dailymotion.

DoDo021 Il y a 2 ans Répondre

Très très bon tuto comme toujours ! =)
As-tu prévu de faire un tuto dans le même style mais avec les socket ?
Sa serais très interessant =)

Merci encore pour tout j'en apprend beaucoup grâce à toi. =D

Have Fun DoDo021

doo Il y a 2 ans Répondre

merci comme toujours!!

WA007 Il y a 2 ans Répondre

Comme toujours tes tutos en impressionne plus d'un !! mais sérieusement c'est dommage que tu garde tes tutos les plus intéressant qu'au payeur ! je sais qu'on doit se faire payer dans ce domaine mais justement en créant pour des compagnies leur site c'est ski doit rester payant mais pour montrer la merveille du web à tout tes admirateurs tu devrais garder le tout gratuit c'est seulement mon opignon !!! pour un visuel comme moi tes vidéos sont ma source d'inspiration ^^ )

tagcash Il y a 2 ans Répondre

c cool sa merci juste se que je voulais

OverSpeed Il y a 2 ans Répondre

Merci pour ce tutoriel Grafikart

fantoche Il y a 2 ans Répondre

L'aventure continue !! Extra.

WoaWorld Il y a 2 ans Répondre

Encore un superbe tuto!
Je le regarde demain, car la je suis crevé.
Bravo !

Badbart Il y a 2 ans Répondre

Le coup du 2eme tableau pour inverser l'ordre des commentaires c'est pas un peu compliquer ? Juste ORDER date ASC aurait suffit non ?

Grafikart Il y a 2 ans

Bonne réflexion, mais vu qu'on veut les 10 derniers messages on est obligé d'utiliser DESC puis d'inverser.

jb_gfx Il y a 1 an

limit is you friend

kinderw Il y a 5 mois - Répondre

L'utilité du 2eme tableau est aussi d'afficher les message de bas en haut et non de haut en bas.

Lepelley Il y a 2 ans Répondre

Jolie =)

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.