24 août 2023

O2switch est un hébergeur français avec une formules très intéressante pour les étudiants en développement web. EN effet vous devez présenter (si vous faites un projet hors stage un site), et on attends de vous de savoir déployer en production, et non faire un github Pages ou un Heroku.

Je m’aperçois que beaucoup d’étudiant ne savent pas faire un simple FTP vers un serveur mutualisé ou VPS, par contre ils s’y connaissent en Docker! . Or je me rappelle que c’est un des premiers trucs que j’ai appris à faire. Je veux bien que vous travailliez avec des dockers, mais sachez au moins comment cela se passe sous le capot.

Je conseille aux étudiants de prendre un hébergement O2switch qui coûte 120 euros TTC environs, et qui permet d’avoir 5 VPS. Vous avez un hébergement par défaut, et 4 autres qu’ils appellent des lunes, qu’il faut créer. Je pars du principe que vous avez créé des lunes, et que vous avez accès via une liste déroulante, la fameuse liste déroulante que je vais customiser avec un script Javascript que je ferai exécuter avec Greasemonkey (ou Tampermonkey sous Chrome). Voilà à quoi ça ressemble de base :

Voila qui est bien plus pratique, car je ne retrouvais jamais mes sites, je devais me constituer des notes pour me repérer.

Je vous détaille donc comment j’y suis parvenu. Pour comprendre comment fonctionne Greasemonkey je vous envois vers ce tuto [xxx].

le but est ici de faire de la manipulation de DOM, on va remplacer les textes de la liste déroulante avec nos sites web. Le script Greasemonkey va s’exécuter une fois qu’on clique sur la liste déroulante, au passage l’interface web CPanel est codé en Angular. Mais cela n’influence pas notre script.

On a donc une liste déroulante en HTML qui est chargé de façon asynchrone, nous allons voir pourquoi tout à l’heure. Pour remplacer le texte des élément <li>, nous devons capturer l’élément HTML, parcourir ses éléments et remplacer avec innerHTML le contenu de ces <li>.

Greasemonkey permet d’injecter un script Javascript dans la page. Voici le code:

// ==UserScript==
// @name     Customize O2Switch
// @version  1
// @grant    none
// ==/UserScript==
let mapp = new Map()

mapp.set('exceret (huynh.odns.fr)',"site1.com")
mapp.set('sc1exceret (sc1exceret.universe.wf)',"site2.fr")
mapp.set('sc2exceret (sc2exceret.universe.wf)',"site3.com")
mapp.set('sc3exceret (sc3exceret.universe.wf)',"site4.com")
mapp.set('sc4exceret (sc4exceret.universe.wf)',"site5.com")


let handler = function(){
  
  let e =document.querySelector('#ddlAccounts_chosen')
  let f = e.querySelector('.chosen-results')

  
  f.children[0].innerHTML = mapp.get(f.children[0].innerHTML)
  f.children[1].innerHTML = mapp.get(f.children[1].innerHTML)
  f.children[2].innerHTML = mapp.get(f.children[2].innerHTML)
  f.children[3].innerHTML = mapp.get(f.children[3].innerHTML)
  
}

let body = document.querySelector('body')
body.addEventListener("click", handler, false);

On constitue notre objet Map qui est l’équivalent d’un tableau associatif PHP, chaque clé est associé une valeur le nom du domaine. Grâce à querySelector, je capture l’élément HTML, et à la fin du script j’ajoute un event listener qui s’exécute au clic, ce qui va bien car la liste déroulante se charge en asynchrone.

ce script n’est pas parfait car au chargement du Cpanel vous êtes dans la vue principale qui liste les 5 VPS, mais une fois que vous avez cliqué une des lunes, la liste se réduit aux 4 lunes décalant les index. Le script ci-dessus a été optimisé pour la page avec les 4 lunes. Il faudrait pouvoir détecter le contexte et proposer le bon affichage.