javascript: Exercices TP-5: Commentaires : fichiers

Créez les fichiers suivants.
Ils doivent tous être placés dans le même répertoire, accessibles par votre serveur web.
Créez aussi un fichier commentaires.js vide.

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>
<!--------------------->
	</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;
}

commentaires.php

<?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

<?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";
}