Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:projets:carnet_adresses [2024/11/19 18:52] – supprimée - modification externe (Date inconnue) 127.0.0.1
+++ informatique:projets:carnet_adresses [2024/12/31 04:09] (Version actuelle) – alexis
@@ Ligne 1: / Ligne 1: @@
+====== Mise en place d'un carnet d'adresse ======
+Il y a quelques années, j'avais mis mon carnet d'adresse en ligne avec [[https://sourceforge.net/projects/php-addressbook/|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 ({{:projets:informatique:exploits_of_a_mom.png?linkonly|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 [[https://symfony.com/|Symfony]] et le bundle [[https://symfony.com/doc/master/bundles/EasyAdminBundle/index.html|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 :
+  - Imprimable pour pouvoir la conserver dans mon portefeuille.
+  - Modifiable facilement avec un éditeur de texte.
+  - Consultable en ligne (pas besoin d'édition).
+  - 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 [[https://www.tug.org/|TeX]] pour la génération d'un fichier [[https://acrobat.adobe.com/us/en/why-adobe/about-adobe-pdf.html|PDF]]. Mes besoins étant assez limités, le fichier est extrêmement simple :
+<code latex>
+\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}
+</code>
+<WRAP important>
+Il faut noter qu'on ne peut pas utiliser ''_'' directement. Il faut l'échapper de la manière suivante ''\_''
+</WRAP>
+Ensuite pour rendre cette liste visible en ligne, je me suis mis en tête d'utiliser [[http://pandoc.org/|Pandoc]] comme pour mon projet de [[informatique:projets:sauvegarde_blog_pdf|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 :
+<code bash>
+htlatex <file.tex>
+</code>
+Ç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'' ((C'est le [[https://www.ctan.org/pkg/marvosym|package marvosym]] qui utilise une police différente pour afficher des symboles à la place des lettres.)), 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((Il y a beaucoup d'informations utiles sur les deux pages suivantes : [[https://github.com/michal-h21/helpers4ht/wiki/tex4ht-tutorial|tex4ht tutorial]] et
+[[http://cvr.cc/?p=504|TeX4ht: Options]]
+)), 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'' ((Le nom est important car il doit correspondre au fichier ''sty'' correspondant, ici ''marvosym.sty''.)) qui va remplacer la commande initiale par le contenu du paramètre de la commande :
+<code latex>
+\NewConfigure{Telefon}{1}
+\renewcommand\Telefon{\a:Telefon}
+\NewConfigure{Mobilefone}{1}
+\renewcommand\Mobilefone{\a:Mobilefone}
+\NewConfigure{Email}{1}
+\renewcommand\Email{\a:Email}
+</code>
+Ensuite, on cré un fichier CSS qui va contenir l'ensemble des règles à appliquer à notre page HTML ((Le nom est important, il ne doit pas correspondre au nom du fichier ''tex'' sinon il sera écrasé à chaque compilation.)) :
+<code css>
+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";
+}
+</code>
+Puis on cré le fichier de configuration qui va faire le lien entre tout ça :
+<code latex>
+\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
+</code>
+Pour utiliser les fichiers que l'on vient de créer, il faut lancer la commande suivante ((Il faut lancer 2 fois la commande pour inclure le fichier CSS dans le fichier HTML)):
+<code bash>
+htlatex <file.tex> "<file.cfg>,css-in"
+</code>
+<WRAP tip>
+Pour ne pas avoir à me souvenir de cette commande, je l'ai incluse dans un fichier //MAKE//.
+</WRAP>
+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 ((En tout cas, je l'espère)).
+On commence par créer un fichier ''.htaccess'' dans le répertoire contenant la liste des contacts. On lui ajoute le contenu suivant :
+<code apache>
+<Files <file>>
+    AuthType Basic
+    AuthUserFile /home/<username>/pass
+    AuthName "Restricted"
+    require valid-user <user>
+</Files>
+</code>
+  * ''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 :
+<code bash>
+htpasswd -c ~/pass <user>
+</code>
+Et voila !