Il y a quelques années, j'avais mis mon carnet d'adresse en ligne avec PHP Address Book. Mais la solution choisie ne me convenait plus. Voici ce que j'ai fait pour mettre en place quelque chose de plus adapté à mes besoins.

Avec PHP Address Book, j'ai plusieurs fois perdu les adresses de certains de mes contacts. Parfois à cause de l'ergonomie peu adaptée, parfois à cause de vulnérabilités (injection SQL). En bref, ce n'était pas une situation acceptable pour conserver ce genre d'information.

Ma première idée fut de refaire quelque chose de similaire en utilisant Symfony et le bundle EasyAdminBundle. J'utilise ce genre de chose tous les jours, je me suis donc dit que je pourrai faire ça rapidement. J'ai commencé à mettre en place et j'ai obtenu quelque chose de fonctionnel assez facilement. Par contre, ce n'était pas du tout travaillé en terme d'ergonomie et d'interface. Je me suis promis de revenir dessus mais je ne l'ai jamais fait. C'était il y a quelques mois.

En laissant mûrir ça, j'ai commencé à me dire que je n'avais pas besoin d'une application complète pour gérer mes quelques contacts. J'ai listé les choses que devait faire cette liste de contact afin de recentrer mes efforts. Après réflexion, voici ce que j'attends de cette liste :

1. Imprimable pour pouvoir la conserver dans mon portefeuille.
2. Modifiable facilement avec un éditeur de texte.
3. Consultable en ligne (pas besoin d'édition).
4. Accessible uniquement avec un mot de passe.

De ce fait, je peux avoir une page statique sans avoir besoin ni de base de données ni de scripts.

Je me suis tourné vers TeX pour la génération d'un fichier PDF. Mes besoins étant assez limités, le fichier est extrêmement simple :

\documentclass{article}
 
\usepackage[a4paper, bottom=15mm, top=1mm, left=1mm, right=1mm]{geometry}
\usepackage{multirow}
\usepackage[utf8]{inputenc}
\usepackage{marvosym} % For phone, cell, and email icons
\usepackage{longtable} % For a table that spans on multiple pages
\usepackage{hyperref}
\usepackage{fancyhdr}
 
\def\mydate{\leavevmode\hbox{\twodigits\day-\twodigits\month-\the\year}}
\def\twodigits#1{\ifnum#1<10 0\fi\the#1}
 
\newcommand\row[4]{%
	\rowcell{#1} & \rowcell{#2} & \rowcell{#3} & \rowcell{#4} \\%
	\hline%
}
\newcommand\cell[1]{\Mobilefone \ \href{tel:#1}{#1}}
\newcommand\phone[1]{\Telefon \ \href{tel:#1}{#1}}
\newcommand\email[1]{\Email \ \href{mailto:#1}{#1}}
\newcommand\rowcell[1]{%
	\begin{tabular}{l}%
		#1%
	\end{tabular}%
}
 
\pagestyle{fancy}
\fancyhf{}
\cfoot{\tiny Généré le \mydate}
 
\begin{document}
	\begin{longtable}{llll}
		\hline
		\row{Prénom Nom}{\cell{06.07.08.09.00}\\\phone{01.02.03.04.05}}{\email{prenom.nom@example.org}\\\email{nom.prenom@example.org}}{1 rue de l'example \\ 77777 Example}%
…
		\row{Prénom Nom}{\cell{06.07.08.09.00}\\\phone{01.02.03.04.05}}{\email{prenom.nom@example.org}\\\email{nom.prenom@example.org}}{1 rue de l'example \\ 77777 Example}%
	\end{longtable}
\end{document}

Ensuite pour rendre cette liste visible en ligne, je me suis mis en tête d'utiliser Pandoc comme pour mon projet de sauvegarde d'un blog en PDF. Mais ça ne fonctionne pas vraiment comme espéré. Je n'ai plus de tableau, les caractères accentués sont mal interprétés. Mais en fait, je n'aurais pas du aller chercher aussi loin car l'installation de la bibliothèque TeXLive propose un outil de conversion de TeX vers HTML. Il suffit de le lancer de la manière suivante :

htlatex <file.tex>

Ça génère une page HTML avec une mise en page très simple. Je trouve que ce n'est pas très utilisable tel quel, car les commandes \Telefon, \Mobilefone et Email sont affichées respectivement en T, H et k ¹⁾, le tableau n'utilise pas toute la place disponible et il est difficile de savoir quelles coordonnées correspondent à quel contact.

Pour régler ces problèmes²⁾, on commence par redéfinir les commandes \Telefon, \Mobilefone et Email mais uniquement dans le cas de la conversion en HTML. Pour cela, on va créer le fichier marvosym.4ht ³⁾ qui va remplacer la commande initiale par le contenu du paramètre de la commande :

\NewConfigure{Telefon}{1}
\renewcommand\Telefon{\a:Telefon}
\NewConfigure{Mobilefone}{1}
\renewcommand\Mobilefone{\a:Mobilefone}
\NewConfigure{Email}{1}
\renewcommand\Email{\a:Email}

Ensuite, on cré un fichier CSS qui va contenir l'ensemble des règles à appliquer à notre page HTML ⁴⁾ :

table {
  width: 100%;
}
.hline hr {
  margin: 0;
}
tr:not(.hline) > td {
  padding: 0.2rem 0;
}
tr:not(.hline):hover {
  background-color: lightgrey;
}
.landline::after {
  content: "\1F3D8";
}
.cell::after {
  content: "\1F4F1";
}
.email::after {
  content: "\1F4E7";
}

Puis on cré le fichier de configuration qui va faire le lien entre tout ça :

\Preamble{xhtml}
\Configure{Telefon}{\HCode{<span class="landline"></span>}}
\Configure{Mobilefone}{\HCode{<span class="cell"></span>}}
\Configure{Email}{\HCode{<span class="email"></span>}}
\begin{document}
\CssFile[<file.css>]
\EndCssFile
\EndPreamble

Pour utiliser les fichiers que l'on vient de créer, il faut lancer la commande suivante :

htlatex <file.tex> "<file.cfg>,css-in"

Maintenant, il ne reste plus qu'à mettre le fichier en ligne et à la sécuriser. Pour cela, on va utiliser le système de sécurité de Apache. Les besoins étant limités, ça suffira largement ⁵⁾.

On commence par créer un fichier .htaccess dans le répertoire contenant la liste des contacts. On lui ajoute le contenu suivant :

<Files <file>>
    AuthType Basic
    AuthUserFile /home/<username>/pass
    AuthName "Restricted"
    require valid-user <user>
</Files>

• file correspond au nom du fichier dont on veut restreindre l'accès.
• username correspond au nom de l'utilisateur utilisé par Apache.
• user correspond au nom de l'utilisateur auquel on veut donner l'accès.

Ensuite, on va configurer le mot de passe de l'utilisateur avec la commande suivante :

htpasswd -c ~/pass <user>

Et voila !