petit site web de maintenance

petit site web de maintenance - Javascript/Node.js - Programmation

Marsh Posté le 10-08-2018 à 09:35:37    

Bonjour,
 
Je ne sais pas où catégoriser ma question, car elle est d'ordre général et non pas précisément sur un point technique particulier.
 
Je suis programmeur C/C++ embarqué, je suis donc habitué à ce langage, par contre en développement web, je n'ai aucune compétence ou presque.
 
J'ai écrit un programme pour ma boite en C++ ( avec le framework Qt ) sous forme de service sous linux afin de relayer des ordres I/O d'un bus CAN vers une webapp sur iPad. Je suis donc passé par des websocket, tout fonctionne bien, pas de problème de ce côté.
 
Mon projet arrive à la fin, et il me reste un peu de temps, j'ai donc eu l'idée d'enrichir un peu celui-ci en proposant un éditeur de fichier de config ( fichier xml qu'on configure à la main actuellement ) , et un petit moniteur d'iPads connectés. L'idéal étant de faire ce moniteur sous forme de page web, en gros on se connecte à une adresse et on récupère une page qui propose de modifier le fichier XML , et en seconde partie, qui liste dynamiquement les périphériques connectés.
 
Seulement je ne sais pas du tout comment m'y prendre.
 
Voici l'idée que j'ai :
 
Pour le fichier XML, étant donné que celui-ci est côté serveur, il faut du code côté serveur pour l'éditer.
 - pour le serveur web, je pensais à instancier un serveur web en Qt, mais il n'y a pas de moyen simple d'en avoir un, je m'appuierai donc sur apache ( qui est déjà présent) et php pour l'édition du fichier xml. Je n'ai pas accès à node.js. Est ce la bonne solution d'utiliser php pour éditer un fichier de config côté serveur ?
 - pour l'affichage de la partie cliente du fichier XML ( champ d'édition , ajout / suppression de ligne , sauvegarder etc... ) vaut-il mieux utiliser un framework js ou tout faire à la main ? Je n'ai aucune expérience en framework js ( type ember.js ou angular.js ) , ca me parait énorme pour faire si peu, autant tout faire à la main je pense. Mais je voulais avant tout utiliser les frameworks pour avoir un truc joli.
 - pour la seconde partie dynamique, je voudrais afficher la liste des ipads connectés ou non. Dans mon application Qt, j'ai des signaux( Add / Remove ) lorsqu'un périphérique arrive ou part, je peux connecter ces signaux sur des slots qui pourront me générer un fichier json à la volée ( dans /tmp pour éviter les écritures disques )et côté client, des requêtes AJAX périodiques ( avec jquery ) pour parser ce fichier, et m'afficher la liste des périphériques.
 
Pensez-vous que c'est la bonne façon de faire, ou y a-t-il des énormités dans ce que j'ai listé ? Je rappelle que je n'ai aucune expérience en développement web :jap:
 
Merci d'avance :)

Reply

Marsh Posté le 10-08-2018 à 09:35:37   

Reply

Marsh Posté le 10-08-2018 à 09:58:47    

Côté serveur, du apache et php, c'est du classique en webapp. L'édition du fichier de conf se fera avec du php pour générer un formulaire adapté à ton xml. Pour le reste,  du html et un peu de js basique avec jquery si tu veux. La collecte des ipads connectés se fera par ton appli en c++. Tu peux générer un fichier json ou xml qui sera lu par une requête ajax. ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 10-08-2018 à 10:22:55    

donc j'étais sur la bonne voie, rien d'ahurissant dans ce que j'avais imaginé.
 
Bon, y a plus qu'à alors ... :o

Reply

Marsh Posté le 14-08-2018 à 09:46:12    

bon j'ai un peu avancé, ca commence à fonctionner.  
 
J'ai commencé par écrire le site web en statique pour avoir une idée du comportement. Je me suis aidé du site https://www.w3schools.com qui me semble pas mal fait avec quelques exemples.
 
J'ai ensuite écrit la partie php pour lire mon fichier local, et enfin pour l'écrire.
 
J'aurais une  petite question à propos de l'enregistrement :
 
 j'ai fait des input et des select pour saisir mes données. Elles sont créées dynamiquement en javascript pour ajouter / supprimer des lignes. Je veux maintenant tout relire pour envoyer ca via une requete http POST vers une page php pour effectuer l'écriture sur disque. J'ai l'impression que je n'ai pas besoin des "form". On peut s'en passer non ? Toutes mes input sont dans un form, mais je pourrais ne pas le mettre et les mettre dans un div ca ne change rien à la mise en page. Je ne vois pas en quoi la balise form peut m'aider, à part qu'on peut y rajouter un bouton submit et qu'en gros on va pouvoir collecter toutes les données du "form" pour ensuite les envoyer ( comment , pas encore regardé cette partie ).
Sauf que j'ai l'impression que je pourrais tout simplement collecter les données avec une fonction javascript et appeler ensuite ma page php en ajax pour faire l'enregistrement. J'ai tendance à préférer cette partie, car j'ai bien envie d'enregistrer sans bouton "valider" mais carrément à chaque fois que je quitte un champ ( ca fait plus de requête réseau mais pas grave dans mon cas ).
 
Est-ce déconnant ou pas ?
 

Reply

Marsh Posté le 14-08-2018 à 09:54:15    

Le form permet de dire au navigateur à quelle url envoyer les données pour les traiter. Le form est donc obligatoire.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 14-08-2018 à 10:34:46    

si je lis ça: https://www.w3schools.com/html/html_forms.asp ok je comprends. Mais ca sous entend que le "form" ( dans lequel on a précisé l'url ) fourni l'url au bouton submit. Ou plus exactement, quand on appuie sur submit, ca prend l'url dans form , et tous les champs de chaque input sont passés en paramètre de l'url ( sous quelle forme, je ne sais pas, mais peu importe ).
 
Ca j'ai compris.
 
Mais dans l'absolu, ce n'est pas obligatoire , non ? Qu'est ce qui m'empêche d'appeler une fonction javascript à chaque fois que je quitte un champ ( = perte de focus ), ou tout simplement sur le click d'un bouton, cette fonction irait relever toutes les valeurs en parsant le dom en javascript, créerait un objet json qu'on passerait ensuite via une requete ajax ( toujours dans cette fonction ) pour effectuer l'enregistrement ?
 
Ca donnerait le même résultat, mais par un chemin différent ? En quoi la 2eme solution serait mauvaise ?

Reply

Marsh Posté le 14-08-2018 à 14:16:27    

voila un exemple de code que je viens de faire pour collecter toutes les infos de ma page, pour ensuite les encoder en json, et les envoyer à mon serveur pour qu'il sauvegarde le fichier.
 
Il n'y a aucune vérification pour le moment sur l'intégrité des données, je voulais coder tout d'abord le principe.
 
A priori, ca fonctionne bien, et je n'ai pas besoin de "form". L'avantage, c'est que je peux appeler cette fonction get_local_config à chaque fois que je quitte un input , ce qui permettra de sauvegarder à la volée. Je ne sais pas si c'est la méthode habituellement utilisé dans le web.
 

Code :
  1. function get_local_config( )
  2. {
  3. var obj = { "port" : $("#port" ).val() , "remote_can_ip" : $("#remote_can_ip" ).val() , "remote_can_port" :  $("#remote_can_port" ).val() , "pa" : [] };
  4. $(".pgaws_paelem" ).each( function ( index ) {
  5.  var pa = {  };
  6.  $(this).find("input" ).each( function () {
  7.   if ($(this).attr("name" ).includes("address" ))
  8.   {
  9.    pa["address"] = $(this).val();
  10.   }
  11.   else if ($(this).attr("name" ).includes("command" ))
  12.   {
  13.    pa["command"] = $(this).val();
  14.   }
  15.   else if ($(this).attr("name" ).includes("message" ))
  16.   {
  17.    pa["message"] = $(this).val();
  18.   }
  19.  });
  20.  $(this).find("select" ).each( function () {
  21.   if ($(this).attr("name" ).includes("level" ))
  22.   {
  23.    pa["level"] = $(this).val();
  24.   }
  25.  });
  26.  obj["pa"].push(pa);
  27. });
  28. $.post( "store_config.php", JSON.stringify(obj), function( ) {
  29.  alert("success" );
  30. }  )
  31. .done(function() {
  32.  alert("done" );
  33. })
  34. .fail(function() {
  35.  alert("fail" );
  36. })
  37. .always(function() {
  38.  alert("always" );
  39. });
  40. }

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed