Journal Cupa : une page web éditable, simplement

Posté par mrlem (site web personnel) le 30 septembre 2016 à 09:54. Licence CC By‑SA.

Étiquettes : aucune

sept.

2016

Bonjour Nal,

C'est bien rare que je prenne ma plume de nos jours, mais ayant écrit un petit outil qui répond à un besoin que j'ai eu de manière récurrente, je me suis dit qu'il pourrait profiter à d'autres. Cet outil, c'est Cupa.

C'est quoi ?

Cupa (CUstomizable PAge) est un petit outil destiné aux créateurs de pages HTML/CSS qui créent une page pour des gens qui, tout en ne maîtrisant pas HTML/CSS, souhaitent pouvoir apporter eux-même des modifications mineures au contenu.

Pourquoi ?

Parcequ'on me demande régulièrement de faire une petite page web ici ou là, mais ensuite apparaît le besoin de faire de retouches mineures. Et comme le temps est trop rare :

je préfère ne pas avoir à servir d'intermédiaire dès qu'il y a une mise à jour
j'ai la flemme d'installer et customiser un Wordpress ou autre, et que c'est plus complexe à utiliser pour l'utilisateur

Parceque des gens qui savent écrire des pages HTML/CSS ne savent pas forcément coder en Javascript/PHP (ce peut-être le cas d'un graphiste, par exemple), mais que leur clients peuvent vouloir un minimum de liberté éditoriale sur la page qu'ils ont commandé

Fonctionnalités

édition de contenus texte / image prévu pour être éditables par le créateur de la page web
redimensionnement automatique des images par le serveur en fonction des attributs width et/ou height détectés
authentification HTTP (uniquement Basic dans l'immédiat) pour pouvoir effectuer des modifications

Le mot de la fin

Voilà, cher Nal : c'est un outil jeune, codé un peu à la Rache™, mais il est sous license GPL et ne demande qu'à évoluer. J'espère qu'il pourra néanmoins servir à d'autres. Merci de ton attention :o)

# VisualEditor

Posté par Strash le 30 septembre 2016 à 10:03. Évalué à 3.

Comment se positionne ton projet par rapport au projet de WikiMedia VisualEditor ?
- [^] # Re: VisualEditor
  
  Posté par mrlem (site web personnel) le 30 septembre 2016 à 10:32. Évalué à 3. Dernière modification le 30 septembre 2016 à 10:35.
  
  Bonne question, je ne connaissais pas.
  
  Si j'en juge par l'intégration sur Wikipedia et le volume de code source, c'est sans l'ombre d'un doute plus évolué que Cupa (ce dont je ne doutais pas un instant). Après, à quel point est-ce simple à intégrer/déployer pour quelqu'un n'ayant pas de notion de code autre que HTML/CSS ? ça je n'ai pas encore le temps de tester, mais je suppose que c'est plus compliqué que les quelques lignes requises pour Cupa. Mon but en le créant a été de réduire au strict minimum le travail du créateur de page web.
  
  Merci pour le lien en tous cas :)
  - [^] # Re: VisualEditor
    
    Posté par zurvan le 30 septembre 2016 à 11:56. Évalué à 1.
    
    Cupa : 2,38 Mo, VisualEditor : 41 Mo mais si on supprime le dossier .git on arrive à plus de 8 Mo quand même.
    
    De plus, VisualEditor ne semble pas pouvoir sauvegarder directement la page (ça sauve en localstorage, mais si je rafraichi la page, ça efface mes modifs), je pense que ça ne peut s'intégrer que dans une page wikipedia. Ou il faudra bien travailler pour l'intégrer dans autre chose. Peut-être que c'est envisageable de le faire dans cupa d'ailleurs.
    
    « Le pouvoir des Tripodes dépendait de la résignation des hommes à l'esclavage. » -- John Christopher
    - [^] # Re: VisualEditor
      
      Posté par mrlem (site web personnel) le 30 septembre 2016 à 14:49. Évalué à 3.
      
      2.38 Mo ??? Tu as compté le .git avec ? :p
      - [^] # Re: VisualEditor
        
        Posté par zurvan le 04 octobre 2016 à 08:54. Évalué à 3.
        
        oui pardon, sans le .git ça fait moins de 200 ko /°\
        
        « Le pouvoir des Tripodes dépendait de la résignation des hommes à l'esclavage. » -- John Christopher
# Marche pas

Posté par Uld (site web personnel) le 30 septembre 2016 à 10:44. Évalué à 2.

J'ai téléchargé le zip depuis github, posé le tout sur mon apache/htdocs local et lancé sample.html
La connexion avec admin/secret ne fonctionne pas, ni même en changeant le mot de passe par défaut, celà renvoit une erreur systématique… pas drôle :(
- [^] # Re: Marche pas
  
  Posté par mrlem (site web personnel) le 30 septembre 2016 à 10:50. Évalué à 2. Dernière modification le 30 septembre 2016 à 10:53.
  
  As tu bien vérifié les permissions des fichiers ? Il faut que ton serveur apache ait les droits en écriture sur le répertoire data et son contenu. Désolé du désagrément :(
  
  EDIT: j'avais mal lu ton message, si ton problème est l'authentification, ça ne vient pas des droits sur data. Quel navigateur utilises-tu ? bloques-tu l'exécution de javascript ?
  - [^] # Re: Marche pas
    
    Posté par Uld (site web personnel) le 30 septembre 2016 à 10:52. Évalué à 1. Dernière modification le 30 septembre 2016 à 10:53.
    
    Ah… je re-test
    - [^] # Re: Marche pas
      
      Posté par mrlem (site web personnel) le 30 septembre 2016 à 10:55. Évalué à 2. Dernière modification le 30 septembre 2016 à 10:56.
      
      D'ailleurs il faut que ton serveur puisse aussi lire tous les fichiers du répertoire Cupa et qu'il supporte PHP avec le module GD.
  - [^] # Re: Marche pas
    
    Posté par zurvan le 30 septembre 2016 à 11:48. Évalué à 3.
    
    ah oui bien vu pour la permission des fichiers… c'était évident mais je n'avais pas pensé à le faire (on n'a pas les bonnes permissions en faisant un clone depuis git ?), j'avais bien le texte qui se modifiait une fois authentifié, ça indiquait "sauvé", mais je ne pouvais pas changer les images. Et j'ai vu ensuite que le texte n'était pas réellement sauvegardé. Peut-être vérifier ça ?
    
    D'autre part, je n'ai pas vu de fonctionnalité pour modifier l'apparence du texte (gras, italique, souligné etc), si tu l'as prévu pour la suite, et si tu souhaites sauver cela avec la meilleure syntaxe possible (txt2tags), tu peux intégrer le markitup + preview en javascript en démo ici :
    
    http://wiki.txt2tags.org/demos/lionwiki-t2t/index.php?page=main&action=edit (mot de passe: demo, les pages sont réinitialisées tous les jours, bien cliquer sur "preview" pour l'activer)
    
    L'avantage c'est que ça gère les besoins d'édition les plus courants, les titres, ainsi que la création de tableaux etc, je pense que ça ne serait pas trop lourd à rajouter dans CUPA.
    
    « Le pouvoir des Tripodes dépendait de la résignation des hommes à l'esclavage. » -- John Christopher
    - [^] # Re: Marche pas
      
      Posté par mrlem (site web personnel) le 30 septembre 2016 à 11:57. Évalué à 2.
      Merci d'avoir testé et pour tes retours :
      
      à propos du texte non-sauvegardé avec le mauvais feedback en cas de problème de permission, j'avais effectivement remarqué ça ce matin, et c'est tracé là ici
      
      pour le fait de rajouter un stylage de base, effectivement c'était en projet pour la suite, merci pour les idées :) - c'est ajouté là
      
      et pour les permissions, c'est là
      - [^] # Re: Marche pas
        
        Posté par zurvan le 30 septembre 2016 à 12:05. Évalué à 3.
        
        à oui et j'avais oublié le petit compliment encourageant dans mon dernier message : c'est vraiment facile à utiliser, notamment pour modifier l'image. Bravo pour ce travail et cet outil.
        
        Pour les permissions, je n'ai pas testé depuis un zip, j'ai juste cloné l'archive. Je sais que git me casse les *** en rajoutant les permissions sur les fichiers lorsque c'est modifié, alors je pensais que c'était pris en compte lorsque l'on clonait.
        
        Dans la liste des petits fonctionnalités qui pourrait être utiles (même si les demandes peuvent tendre vers l'infini lorsqu'on commence ce genre de projet), pouvoir supprimer et rajouter un bloc de texte et d'image serait pas mal.
        
        Peut-être que la page html principale pourrait être générée par un wiki léger (genre dokuwiki, pmwiki, lionwiki) pour faciliter l'édition et le rajout des éléments ?
        
        « Le pouvoir des Tripodes dépendait de la résignation des hommes à l'esclavage. » -- John Christopher
        
        [^] # Re: Marche pas
        
        Posté par mrlem (site web personnel) le 30 septembre 2016 à 14:53. Évalué à 1.
        
        Merci :)
        
        Les changements affectant la structure de la page sont effectivement quelque-chose qui serait envisageable dans le futur, mais je veux vraiment bien réfléchir au "comment" d'abord : le but est de ne rien sacrifier en terme de simplicité d'utilisation.
# Juste génial

Posté par Zatalyz (site web personnel) le 30 septembre 2016 à 12:53. Évalué à 2.

Ça marche pour moi. Et ça répond bien à des demandes que j'ai aussi. Je vais pouvoir m'amuser à faire des petits sites web basiques et laisser les gens gérer lorsqu'ils veulent corriger une coquille ou changer une image… Simple, sobre et efficace. Merci pour le partage :)
- [^] # Re: Juste génial
  
  Posté par mrlem (site web personnel) le 30 septembre 2016 à 14:54. Évalué à 1.
  
  De rien, c'est un plaisir :)
# .rst

Posté par lelama le 30 septembre 2016 à 21:45. Évalué à -1.

Avanages/inconvenients par rapports a rst ??
Cf https://fr.wikipedia.org/wiki/ReStructuredText
- [^] # Re: .rst
  
  Posté par mrlem (site web personnel) le 01 octobre 2016 à 14:42. Évalué à 2.
  Hmmm, sauf erreur pas grand-chose à voir : Cupa s'adresse aux créateurs de pages web (sans requérir de connaissances Javascript/PHP), qui veulent créer des pages auxquelles les utilisateurs (non-informaticiens) pourront apporter des mises à jour de contenu (textes et images).
  
  Cupa simplifie aussi l'épineuse question du déploiement (problématique à laquelle RST n'apporte pas de réponse) :
  - pour le créateur de la page web, il y a juste à mettre les fichiers sur le serveur apache (pas de mise en place de base de données, etc)
  - pour l'utilisateur, il n'a besoin ni de savoir se connecter à un serveur FTP, ni de connaître un quelconque langage informatique (fût-il de markup)
  La cible est donc très différente.
# Pas mal

Posté par BohwaZ (site web personnel, Mastodon) le 02 octobre 2016 à 11:53. Évalué à 10.
Très bonne idée, ça marche bien, c'est simple, le code n'est pas ultra joli mais très simple et concis, ça charge pas what-mille librairies JS pourries, super :)

Par contre niveau sécurité…
```
$picture_id = $_POST['id'];
// process params
$filename = "../data/img-$picture_id.jpg"; 
<snip />
file_put_contents($filename, $picture_content)
```
Outch. Avec ça ton utilisateur peut renommer son fichier img-machin.php.jpg et injecter du code sur ton serveur qui sera exécuté (dépend de ta config apache), ou alors indiquer tenter d'écrire dans un autre répertoire, etc. Idem pour la sauvegarde de texte. Je te suggère de vérifier que ton ID est numérique, ou alors plus simple utiliser un hash MD5/SHA1 comme nom de fichier.

Je te suggère aussi de vérifier (avec mime_content_type($filename)) le type du fichier avant de l'enregistrer dans le répertoire de l'appli, juste pour être sûr que tu stocke un truc qui ressemble vaguement à une image.

« Je vois bien à quels excès peut conduire une démocratie d'opinion débridée, je le vis tous les jours. » (Nicolas Sarkozy)
- [^] # Re: Pas mal
  
  Posté par mrlem (site web personnel) le 03 octobre 2016 à 10:46. Évalué à 5.
  
  Merci pour tes retours ! Effectivement j'ai été un peu fainéant sur les vérifications de paramètres qui ne donnent lieu à des opérations fichiers que lorsque l'utilisateur est authentifié. Mais tu as totalement raison.
  
  J'ai créé des issues là-dessus, ça devrait être corrigé relativement rapidement:
  - https://github.com/mrlem/cupa/issues/10
  - https://github.com/mrlem/cupa/issues/11
  
  Merci encore !

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.