javascript: Exercices TP-6: Fichiers

Créez les fichiers suivants :

(Les parties modifiées par rapport au TP-5 sont en noir)

commentaires.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>commentaires</title>
		<link type="text/css" rel="stylesheet" href="commentaires.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="commentaires.js"></script>
	</head>
	<body>
<!--------------------->
<div id="principal">
	<h2>Cours de JavaScript : Ajax</h2>
	<img src="http://moodle.iutv.univ-paris13.fr/img/js/exo-commentaires-video.png"/>
</div>
<div id="block-commentaires">
	<h3>Commentaires</h3>
	<select id="pages">
		<option value="0" > 1 à  5</option>
		<option value="5" > 6 à 10</option>
		<option value="10">11 à 15</option>
		<option value="15">16 à 20</option>
	</select>
	<div id="commentaires">
	</div>
	<a id="reinitialiser" href="commentaires.php?reinitialiser">réinitialiser</a>
</div>
<div id="formulaire">
	<p><label>Nom :   <input id="nom" type="text"/></label></p> 
	<p><label>Commentaire :<br/><textarea id="contenu" ></textarea></p> 
	<p><input id="ajouter" type="button" value="ajouter"/></p> 
</div>
<!--------------------->
	</body>
</html>

commentaires.css

body
{
	font-family: sans;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	background-color: #eee;
}
#principal
{
	background-color: white;
	padding: 10px;
}

#principal img
{
	width: 580px;
	height: auto;
}

#block-commentaires
{
	background-color: white;
	min-height: 300px;
	padding: 10px;
	margin-top: 10px;
	font-size: 14px;
}

#pages-commentaires
{
}

#commentaires
{
	margin-top: 10px;
}

.commentaire
{
	margin: 19px 0;
}
.commentaire .nom
{
	color: #2793E6;
	font-weight: bold;
	margin-right: 13px;
}
.commentaire .date
{
	color: #888;
}

.commentaire .contenu-com
{
	margin: 3px 0;
}

.commentaire .pied-com
{
	font-size: 11px;
	color: #888;
	line-height: 20px;
}

.commentaire .repondre
{
	font-weight: bold;
}

.commentaire .jaime
{
	font-size: 13px;
	color: #2793E6;
}

.commentaire .jaime-plus
{
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url(http://moodle.iutv.univ-paris13.fr/img/js/ytp.png);
	vertical-align: middle;
}

.commentaire .jaime-moins
{
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url(http://moodle.iutv.univ-paris13.fr/img/js/ytm.png);
	vertical-align: middle;
}

#reinitialiser
{
	font-size: 10px;
	float: right;
}

#formulaire
{
	background-color: white;
	width: 300px;
	border: 1px solid #aaa;
	box-shadow: 1px 1px 2px rgba(0,0,0,.2);
	padding: 10px;
}
#formulaire p
{
	margin: 5px 0;
}
#nom
{
	width: 230px;
}

#contenu
{
	width: 100%;
}
#contenu
{
	width: 290px;
}

commentaires.js (pas de modification)

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est pret");
	$('#pages').change(function()
	{
		$.get('http://localhost/~1234567/tp-6/commentaires.php',
			  {debut: parseInt($('#pages').val()),
			   fin:   parseInt($('#pages').val())+4,
			  },
			  function(reponse)
			  {
				  console.log("Une réponse a été reçue du serveur");
				  $('#commentaires').html(reponse);
			  });
	});
	$('#pages').change();

	$('#commentaires').on('mousedown','.jaime-plus',function(e)
	{
		// éviter la sélection désagréable quand on clique
		e.preventDefault();
		var commentaire=$(this).parent().parent();
		var idCommentaire=parseInt(commentaire.attr('data-com-id'));
		$.post('http://localhost/~1234567/tp-6/commentaires-jaime.php',
			   {
				   id: idCommentaire,
				   sens: 1,
			   },
			   function(reponse)
			   {
				   console.log('Réponse recue:',reponse);
				   if(reponse==='ok')
				   {
					   var jaime=commentaire.find('.jaime');
					   var val=jaime.text()==='' ? 0 : parseInt(jaime.text());
					   jaime.text(val+1);
				   }
			   });
	});
});

commentaires.php (pas de modification)

<?php

session_start();
setlocale(LC_TIME, "fr_FR.utf8");
header('Content-Type: text/html; charset=utf-8');
require_once 'commentaires-fonctions.php';

// Cas particulier: réinitialiser les commentaires
if(isset($_GET['reinitialiser']))
{
	reinitialiser_commentaires();
	die('Commentaires réinitialisés ok.');
}

// Chercher tous les commentaires et trier
$commentaires=commentaires();
$commentaires=trier_par_date($commentaires);

// Lire les données GET envoyées par le client
$debut=(int)$_GET['debut'];
$fin  =(int)$_GET['fin'  ];

// Construire le HTML à envoyer au client
$html='';
for($i=$debut;$i<=$fin;$i++)
{
	$com=$commentaires[$i];
	$html.=commentaire_rendu_en_html($com);
	$html.="\n";
}
// Envoyer le HTML au client
echo $html;

commentaires-fonctions.php (pas de modification)

<?php

// Racourci pour éviter les problèmes d'affichage des caractères HTML (<>&'") et les failles de sécurité XSS
function e($texte)
{
	return htmlspecialchars($texte,ENT_QUOTES,'UTF-8');
}

// Trier par date déscendante
function trier_par_date($c)
{
	usort($c,'s');
	return $c;
}

function s($a, $b){return $a['date'] == $b['date'] ? 0 : (($a['date'] < $b['date']) ? 1 : -1);}

// La liste des commentaires. 
// Les commentaires sont stockés dans la variable de SESSION.
// C'est pratique pour le TP, ca nous évite d'avoir besoin d'une base de données.
// Bien évidemment, ca ne marche pas du tout pour une vraie application.
function commentaires()
{
	if(!isset($_SESSION['commentaires']))
	{
		$_SESSION['commentaires']=liste_initiale_commentaires();
	}
	return $_SESSION['commentaires'];
}

function reinitialiser_commentaires()
{
	$_SESSION['commentaires']=liste_initiale_commentaires();
}

// Enregister la liste des commentaires. 
// Les commentaires sont stockés dans la variable de SESSION.
// C'est pratique pour le TP, ca nous évite d'avoir besoin d'une base de données.
// Bien évidemment, ca ne marche pas du tout pour une vraie application.
function enregistrer_commentaires($commentaires)
{
	$_SESSION['commentaires']=$commentaires;
}

function liste_initiale_commentaires()
{
	return
		array(
		 array('id'=>101,'nom'=>'Karim','date'=>1425283400,'contenu'=>"J'aime beaucoup ces cours de JavaScript !",'jaime'=>5),
		 array('id'=>102,'nom'=>'Joe'  ,'date'=>1425283700,'contenu'=>"Ah bon ? Moi je préfère les tartes aux fraises.",'jaime'=>-1),
		 array('id'=>103,'nom'=>'Karim','date'=>1425284060,'contenu'=>"T'es pas sur Marmiton là...",'jaime'=>-4),
		 array('id'=>104,'nom'=>'Driss','date'=>1425284080,'contenu'=>"T'as compris quelque chose à Ajax ?",'jaime'=>0),
		 array('id'=>105,'nom'=>'Lian' ,'date'=>1425284120,'contenu'=>"Ouais... c'est facile avec jQuery.",'jaime'=>2),
		 array('id'=>106,'nom'=>'Naïma','date'=>1425284320,'contenu'=>"Ces trucs de client / serveur ca m'embrouille.",'jaime'=>0),
		 array('id'=>107,'nom'=>'Lian' ,'date'=>1425284520,'contenu'=>"C'est simple... le client c'est le JS ... et le serveur le PHP.",'jaime'=>1),
		 array('id'=>108,'nom'=>'Naïma','date'=>1425284620,'contenu'=>"Oui, mais le HTML, il est où ?",'jaime'=>0),
		 array('id'=>109,'nom'=>'Driss','date'=>1425284820,'contenu'=>"Dans la base de données, évidemment.",'jaime'=>-8),
		 array('id'=>110,'nom'=>'Karim','date'=>1425284920,'contenu'=>"Mais non! T'as rien compris.",'jaime'=>-1),
		 array('id'=>111,'nom'=>'Lian' ,'date'=>1425285120,'contenu'=>"Le HTML est envoyé par le serveur au navigateur.",'jaime'=>1),
		 array('id'=>112,'nom'=>'Driss','date'=>1425285180,'contenu'=>"Elle sert à quoi alors la BDD ?",'jaime'=>0),
		 array('id'=>113,'nom'=>'Karim','date'=>1425285120,'contenu'=>"Le PHP prend les infos de la BDD, fait du HTML avec et l'envoie au navigateur.",'jaime'=>5),
		 array('id'=>114,'nom'=>'Joe'  ,'date'=>1425285220,'contenu'=>"J'ai faim.",'jaime'=>-5),
		 array('id'=>115,'nom'=>'Naïma','date'=>1425285320,'contenu'=>"C'est bientot la pause ?",'jaime'=>2),
		 array('id'=>116,'nom'=>'Joe'  ,'date'=>1425285420,'contenu'=>"Encore 5 minutes...",'jaime'=>0),
		 array('id'=>117,'nom'=>'Lian' ,'date'=>1425285620,'contenu'=>"Vous pensez qu'à manger.",'jaime'=>0),
		 array('id'=>118,'nom'=>'Karim','date'=>1425285720,'contenu'=>"C'est la pause :-)",'jaime'=>10),
		 array('id'=>119,'nom'=>'Lian' ,'date'=>1425285750,'contenu'=>"Moi je reste travailler.",'jaime'=>-4),
		 array('id'=>120,'nom'=>'Naïma','date'=>1425285770,'contenu'=>"Chacun son truc...",'jaime'=>0),
		);
}

// Renvoyer l'indice dans le tableau du commentaire ayant l'id $id
function commentaires_chercher_cle_de_id($commentaires,$id)
{
	foreach($commentaires as $k=>$c){if($c['id']==$id){return $k;}}
	return false;
}

// Retourne le HTML nécessaire pour afficher un seul commentaire.
function commentaire_rendu_en_html($com)
{
	return
		'<div class="commentaire" data-com-id="'.$com['id'].'">'."\n".
		'    <div class="entete-com">'."\n".
		'        <span class="nom" >'.e($com['nom']).'</span>'."\n".
		'        <span class="date">'.strftime('%e %b, %H:%M',$com['date']).'</span></div>'."\n".
		'    <div class="contenu-com">'.e($com['contenu']).'</div>'."\n".
		'    <div class="pied-com">'."\n".
		'        <span class="repondre">Répondre</span> '."\n".
		'        <span class="jaime">'.($com['jaime']!==0 ? $com['jaime'] : '').'</span> '."\n".
		'        <span class="jaime-plus"></span> '."\n".
		'        <span class="jaime-moins"></span> '."\n".
		'    </div>'."\n".
		'</div>'."\n";
}

commentaires-jaime.php (pas de modification)

<?php

session_start();
require_once 'commentaires-fonctions.php';

// Chercher tous les commentaires 
$commentaires=commentaires();

$id=(int)$_POST['id'];
$cle=commentaires_chercher_cle_de_id($commentaires,$id);
if($cle===false){echo 'erreur';exit(1);}
$sens=(int)$_POST['sens'];
if($sens!==1 && $sens!==-1){echo 'erreur';exit(1);}
$commentaires[$cle]['jaime']+=$sens;

enregistrer_commentaires($commentaires);

echo 'ok';

commentaires-ajouter.php (nouveau fichier)

<?php

session_start();
require_once 'commentaires-fonctions.php';

// Chercher tous les commentaires 
$commentaires=commentaires();

// ...

enregistrer_commentaires($commentaires);

echo 'ok';