Blog du grouik

L'image ci dessus explique tout, le désir c'est de protéger des billets par un simple mot de passe. Mais il faut que:

• Le billet reste listé sur le blog
• le titre le content exerp toussa idem
• C'est juste le contenu du billet qu'on va remplacer par un formulaire mot de passe.

Ce n'est pas pour ce blog, mais pour le site du réseau d'établissement gériatriques. Ils ne souhaitent pas que les comptes rendus de réunion, qui sont mis en billets soient totalement publics. (rien de très confidentiel, au contraire, c'est simplement une crainte d'image négative)

Dotclear propose un système de mots de passes aux billets. Il a pour effet secondaire de faire que le billet n'est plus visible sur la page d'accueil. Il existe aussi un pluggin prvcat qui permet de de mettre un mot de passe à des catégories entières. Même effet secondaire.

Wordpress propose à peu près ce que je voudrai mais là c'est dotclear.

Voici un exemple sur le blog d'Emma:

Dans l'ordre, il faudra:

• Différencier les billets protégés: avec le plugin mymeta
• Adapter le template pour que par défaut il affiche le formulaire de mot de passe.
• Un chouilla d'ajax pour remplacer ce formulaire par le contenu du billet suite à l'authentification.
• Un plugin dotclear made by Gnieark qui sert à n'afficher que le contenu d'un billet (si mot de passe OK)

Différencier les billets à protéger par mot de passe.

Pour savoir quels billets protéger par mot de passe, j'ai choisi d'utiliser le pluggin Mymeta.

Apres avoir installé le pluggin, j'ajoute une meta de type case à cocher nommée "limited_access".

Dans l'interface de modification d'un billet ça se présente comme ça: Une case à cocher en dessous:

Adapter le template

Lorsqu'un billet a l'attribut mymeta de type limited_access égal à '1', on affiche le résumé, puis une zone de mot de passe. les fichiers qui vont nous intéresser ce sont:

• category.html
• home.html
• post.html
• tags.html

(tous les fichiers qui affichent des billets en fait).

Tout se fait bien évidemment dans la boucle qui affiche les billets, généralement délimtée par <tpl:Entries> et </tpl:Entries>

Ne collez pas le code qui suit, c'est juste pour montrer comment on utilise Mymeta dans le template:

<tpl:MyMetaIf type="limited_access" value="1">
/* Inclure ici le code qui affichera la boite de mot de passe*/
</tpl:MyMetaIf>
 
<tpl:MyMetaIf type="limited_access" defined="false">
/* Inclure ici le code qui affichera le content d'un billet non protégé*/
</tpl:MyMetaIf>

Exemple pour post.html

Ça se passe dans la partie <!\-\- # Entry with an excerpt \-\-> du fichier. Les identifiants de la div contenu et du champs de mot de passe ont été mis pour le javascript (chapitre qui suit).

<!-- # Entry with an excerpt -->
    <tpl:EntryIf extended="1">
      <div class="post-excerpt">{{tpl:EntryExcerpt}}</div>
    </tpl:EntryIf>
 
 
	 <div class="post-content" id="post-content{{tpl:EntryID}}">
	<tpl:MyMetaIf type="limited_access" value="1">
		<div class="formpassword">
			<h2>{{tpl:lang Password needed}}</h2>
			<p>{{tpl:lang You must give a password to access this area.}}</p>
			<p><label>{{tpl:lang Password:}} <input type="password" id="password_{{tpl:EntryID}}" value="" tabindex="1" /></label> <input type="submit" value="ok" onclick="deverouille('{{tpl:EntryID}}');";/></p>
		</div>
	</tpl:MyMetaIf>
 
	<tpl:MyMetaIf type="limited_access" defined="false">
   		{{tpl:EntryContent}}
	</tpl:MyMetaIf>
	</div>

Exemple pour les autres fichiers

Dans category.html, home.html, tags.html contrairement à post.html, s'il y a une description, on n'affiche pas le billet en entier juste sa description.

<div class="post-content" id="post-content{{tpl:EntryID}}">		
			<!-- # Entry with an excerpt -->
			<tpl:EntryIf extended="1">
				{{tpl:EntryExcerpt}}
					<!-- # acces limité; limited_access=1 (Mymeta) -->
					<tpl:MyMetaIf type="limited_access" value="1">
						<div class="formpassword">
				        	<h2>{{tpl:lang Password needed}}</h2>
	       					 <p>{{tpl:lang You must give a password to access this area.}}</p>
	        				<p><label>{{tpl:lang Password:}} <input type="password" id="password_{{tpl:EntryID}}" value="" tabindex="1" /></label> <input type="submit" value="ok" onclick="deverouille('{{tpl:EntryID}}');";/></p>
						</div>
					</tpl:MyMetaIf>
 
					<!-- # acces llibre; limited_access=0 ou est null (Mymeta) -->
					<tpl:MyMetaIf type="limited_access" defined="false">
						<p class="read-it"><a href="{{tpl:EntryURL}}" title="{{tpl:lang Continue reading}} {{tpl:EntryTitle encode_html="1"}}">{{tpl:lang Continue reading}}</a>...</p>
					</tpl:MyMetaIf>
			</tpl:EntryIf>
 
			<!-- # Entry without excerpt -->
			<tpl:EntryIf extended="0">
				<!-- # acces limité; limited_access=1 (Mymeta) -->
				<tpl:MyMetaIf type="limited_access" value="1">
					<div class="formpassword">
				        <h2>{{tpl:lang Password needed}}</h2>
	       				 <p>{{tpl:lang You must give a password to access this area.}}</p>
	        			<p><label>{{tpl:lang Password:}} <input type="password" id="password_{{tpl:EntryID}}" value="" tabindex="1" /></label> <input type="submit" value="ok" onclick="deverouille('{{tpl:EntryID}}');";/></p>
					</div>
				</tpl:MyMetaIf>
				<!-- # acces llibre; limited_access=0 ou est null (Mymeta) -->
				<tpl:MyMetaIf type="limited_access" defined="false">
					<div class="post-contenu">{{tpl:EntryContent}}</div>
				</tpl:MyMetaIf>
			</tpl:EntryIf>
		</div>

Fichiers de template des flux

rss2.xml

La modification se fait entre les balises <description>et </description>

<description>
		<tpl:MyMetaIf type="limited_access" value="1">
			&lt;p&gt;Le contenu de ce billet est protégé par mot de passe. Rendez-vous sur le site pour le lire.&lt;/p&gt;
		</tpl:MyMetaIf>
		<tpl:MyMetaIf type="limited_access" defined="false">
{{tpl:EntryExcerpt absolute_urls="1" encode_xml="1"}}
    {{tpl:EntryContent absolute_urls="1" encode_xml="1"}}
		</tpl:MyMetaIf>
	</description>

atom.xml

La modification se fait entre les balises <content type="html">et </content>

<content type="html">
		<tpl:MyMetaIf type="limited_access" value="1">
			&lt;p&gt;Le contenu de ce billet est protégé par mot de passe. Rendez-vous sur le site pour le lire.&lt;/p&gt;
		</tpl:MyMetaIf>
		<tpl:MyMetaIf type="limited_access" defined="false">
			{{tpl:EntryExcerpt absolute_urls="1" encode_xml="1"}}
    			{{tpl:EntryContent absolute_urls="1" encode_xml="1"}}
		</tpl:MyMetaIf>
	</content>

On est ok pour la partie html du template. En adaptant un peu le CSS, l'aperçu est en en-tête de ce billet.

Le code javascript qui affichera le "content" du billet protégé

Une fonction ajax qui appelle un script et rafraichit la div qui contient le contenu du billet.

A la source du dossier de template, je créée un fichier qui s'appelle password.js

Il contient:

function Ajx() {
	var request = false;
	try {request = new ActiveXObject('Msxml2.XMLHTTP');} catch (err2){ try {request = new ActiveXObject('Microsoft.XMLHTTP');} catch (err3) {try {request = new XMLHttpRequest();} catch (err1) {request = false;}}}
	return request;
}
 
function deverouille(postid){
	var xhr = Ajx();
 	xhr.onreadystatechange  = function(){
		if(xhr.readyState  == 4){
			if(xhr.status  == 200){
				if (xhr.responseText=="fail")
				{
					document.getElementById('post-content' + postid).innerHTML =document.getElementById('post-content' + postid).innerHTML + '<p>Erreur de mot de passe</p>';	
				}else{
					document.getElementById('post-content' + postid).innerHTML =xhr.responseText;
				}
			}else{
				document.getElementById('post-content' + postid).innerHTML = "<font color=\"#FF0000\">Error code " + xhr.status + "</font>";
			}
		}
	};
   	xhr.open("POST", './index.php?justunpost/' + postid,  true); 
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
	xhr.send("pass=" + document.getElementById('password_' + postid).value); 
}

Dans le fichier de template _head.html, on ajoute le lien vers le nouveau script, juste apres </style>:

<script type="text/javascript" src="{{tpl:BlogThemeURL}}/password.js"></script>

Le script fait la requete suivante pour réupérer le contenu (et uniquement le contenu, pas les header ni rien) :index.php?justunpost/' + postid où posid est l'identifiant du billet. On va donc créer un plugin dotclear qui retourne juste le contenu du billet, à condition que le mot de passe soit vérifié.

Le plugin justunpost

Mon premier plugin dotclear :D. Il est tout simple, mais comme je ne sais pas faire les plugins, ça m'a pris pas mal de temps. Il sert à ce que l'URL http://www.domaine.com/index.php?justunpost/21 retourne le contenu du billet 21, à condition que la variable passée en POST ($_POST['pass']) corresponde au mot de passe.

Installez le tout simplement depuis le menu des extensions de dotclear. Télécharger justunpost.zip

Il doit s'afficher dans la liste des extensions du panneau d'administration de dotclear. Allez y, pour définir un mot de passe.

C'est le mot de passe qu'il faudra rentrer au niveau du billet dans la partie publique du blog pour lire son contenu.

Conclusion

Normalement ça marche, je vais pouvoir lire la suite de l'histoire de la cigale et la fourmi.

Limite de la méthode

Comme le signale @PhilippeVay Les ressources liées (photos etc....) ne sont pas protégées, on peut toujours y accéder directement par leur URL. Il n'y en aura pas sur le site en question, c'est pour ça que je le fais de cette façon.

Ps le site en question est là