May.20

Lexoo, la nouvelle génération d’application de monitoring PHP….. ou notre projet SUPINFO :)

Tout d’abord, je sais, cela fait bien longtemps que je n’avais pas bloggé, mais ces derniers temps n’ont pas été propice à l’ecriture :p

Enfin soit, je reviens aujourd’hui sur mon blog, 30min après la deadline du rendu de notre projet SUPINFO de fin d’année 🙂 Le sujet de cette année était l’écriture et la mise en place d’une application PHP de monitoring avec Linux/Apache – Oracle.

J’ai donc partagé cette aventure avec mes proches camarades, ou plutot amis, j’ai nommé : AmO, Kevin et Gui.

Le projet a tout d’abord commencé en Janvier après la remise du cahier des charges par supinfo qui a donné lieu a un 1er brainstorming pour donner les 1er idées et puis plus rien !! Plus rien jusque mon retour du Maroc, fin Avril, à un mois du rendu, on s’est dit « on y va » 😀

Il nous aura fallu alors 3 soirées, soirée particuliaire, qui commence vers 15/16h et fini vers 15/16h le lendemain, avec pour certain, une petite pause dodo de 8h a 11h du mat (:p) pour réaliser ce que l’on a appellé Lexoo.

Lexoo est une application PHP basé sur une base de donnée Oracle permettant le monitoring de serveur Windows et Linux (… et dérivés). Elle utilise le protocole SNMP pour la récupération des données et génére des graphs grâce à RRD Tool. Le tout biensur dans une interface très Web 2.0 et très design.

Voici ces fonctionnalités résumés :

  • Monitoring SNMP
  • Stockage et génération des graphs avec RRD
  • Gestion des serveurs Windows et Linux de base
  • Gestion des utilisateurs, groupes et permission
  • Systeme de logs
  • Interface entierement ajaxifiée
  • Dashboard personnalisable
  • Etc….

En résumé, oubliez Cacti, et adaptez Lexoo 😀 Pour l’instant certe, Lexoo n’est pas distribué, il le sera certainement apres la soutenance du projet si la motivation est encore la pour porter l’application sur une base mySQL ou autre…

En attendant, je vous laisse tester de vous même Lexoo à l’adresse :

http://lexoo.ajsinfo.net

Pour le mot de la fin, je tiens a félliciter mes 3 comperes, je suis plus que fier de vous pour ce « good job » 🙂

Non classé

Jan.21

Visual WebGUI

Comme inscrit sur la homepage du site officiel :

Visual WebGui is an AJAX development framework that simplifies development of enterprise IT web applications to the simplest.

En fait pour être plus précis, le framework Visual WebGui propose un modèle de développement Winform, avec un designer Winform où l’on crée nos Forms, Dialogs ou UserControls avec des contrôles de type Winform (Label, Textbox, DateTimePiker, Listbox, combobox, etc…).

En gros on développe une application Winform MAIS au lieu de compiler un EXE, nous obtenons une application Web assez jolie avec AJAX inside pour gérer les contrôles.

Bien sur il ne faut pas trop regarder le HTML/Javascript produit surtout pour les amoureux des standards (et du beau code), et même si ce produit a encore pas mal de chose à revoir, je pense qu’il a un bon avenir dans le monde du développement d’application Web enfin Web 2.0 🙂

J’avais commencé la semaine dernière a créer un petit projet de test, une application de gestion de taches (gestion projets/milestones/taches). La rapidité de développement est assez impressionnante. Après avoir créé ma base SQL et DAL, il m’a fallu peu de temps pour placer mes contrôles (un tabControl, quelques listbox, textbox et button), un peu de code et créer une belle petite application Web.

A défaut d’avoir déployée l’application sur mon serveur de prod, une petite vidéo de présentation :

Bref, produit assez sympa, qui me rappelle Xamlon qui passé du Winform au Flash 🙂

Info,HighTech,.NET

Mar.16

AJAX, XMLHttp et le cache !!

En developpant le projet dotnet (lire mon post du 26/02/06) en XHTML/JS à la sauce AJAX, je me suis heurté à un problème de cache !
En effet que l’on utilise l’objet XMLHttpRequest pour Firefox & Co ou l’objet de IE (Microsoft.XMLHTTP), on appelle la méthode open et send pour récuperer un fichier XML par le code :

Le problème de cela, c’est qu’une fois le XML téléchargé, le navigateur le met dans son cache ! Si par la suite vous modifiez votre XML, votre application web ne tiendra pas compte des modifications même en rechargant la page (F5) ce qui est un peu embêtant !
Pour remedier à cela, une technique consiste a appeler la methode setRequestHeader pour définir le Cache-Control à no-cache par le code :

Le problème, c’est que ca marche PAS 😀 Enfin du moins sur pas mon Firefox…. ^^

La technique que j’ai implémenté est de passer des parametres uniques dans l’URL de notre fichier XML !
Je m’explique, les adresses URL http://monserveur/monfichier.xml?id=1 et http://monserveur/monfichier.xml?id=2 retourne tous les deux le même fichier à savoir monfichier.xml, ici les parametres n’ont aucune influence coté serveur mais pour le coté client, le navigateur (IE,FF,..) pense que ce sont 2 fichiers differentes car les URL ne sont pas identique et donc on contourne le problème de cache !!
Personnellement, j’utilise pour cela la fonction getTime() de l’objet Javascript Date qui retourne le nombre de millisecondes depuis le 1er Janvier 1970 ! On obtient bien un parametre unique a moins de déregler son horloge au millieme de seconde près ^^.
Le code final:

Elle est pas belle vie ?? ^^ 🙂

Perso,Dev

Feb.26

AJAX

Dans le cadre de mon projet Dotnet, je me suis mis a utiliser AJAX ^^ C’est pourquoi, je vais brievement vous exposer ce qu’est AJAX avec un petit exemple d’utilisation car je sais que tout le monde préfere la pratique que la théorie !!

AJAX késako ??
Non non je ne fais pas le ménage à l’eau de javel ^^ AJAX c’est tout simplement l’avenir du Web (concept Web 2.0) ! AJAX pour Asynchronous JavaScript And XML (en francais : « XML et Javascript asynchrones ») est une méthode de développement des applications Web !
En effet tous les échanges client<>serveur se font en arrière plan dans des fichiers XML pilotés avec des scripts JS !

Sans AJAX : actuellement, quand vous êtes sur une page A d’un site et que vous demandez la page B, votre navigateur web (IE, Firefox, ..) renvoie une requête HTTP demandant la page B, le serveur vous reponds en vous envoyant tout le code HTML (+ JS, images, CSS, …) de cette page !

Deux inconvenients :

  • on renvoie une requete HTTP, c’est long, le navigateur devient tout blanc, faut le temps qu’il charge la nouvelle page !!!
  • et surtout, c’est bête de tout recharger car en général sur un site, la difference entre 2 pages n’est que le contenu; les menus, l’habillage graphique (design) reste identique !!

Avec AJAX : maintenant grâce a AJAX on resoud ces deux problemes :

  • Avec navigateur charge tout le code HTML de la page A (+ images, css, et scripts JS nottament pour gérer l’AJAX)
  • Quand vous demandez la page B, votre navigateur ne bouge pas, c’est un script JS qui derrière va venir telecharger un fichier XML contenant juste le contenu de la novelle page !

Deux avantages :

  • Impression d’instantané, le contenu arrive sans voir le chargement !
  • Impression d’instantané renforcé par le fait que seul le fichier XML contenant le contenu de la nouvelle page transite par le reseau, ce qui reduit enormement les echanges client<>serveur (le design n’est chargé qu’une seule fois pour la 1er page !)

En une phrase, AJAX va donc révolutionner les applications Web 🙂

Pour plus d’info sur AJAX :http://fr.wikipedia.org/wiki/AJAX
Des exemples AJAX: http://fr.wikipedia.org/wiki/AJAX#Liens_externes

Bon passons à la pratique

Pour cet exemple, on nous allons créer une page qui liste les éléves de ma classe 🙂 Pour cela, nous créons un fichier XML contenant les données :

Vous remarquerez que les ID, Sexe et Age sont contenu dans les attributs de la balise studient alors que les noms sont dans la balise ! (ps: désolé pour les autres éléves, je n’ai pas tout mis, ca veux pas dire que je ne vous aimes pas :-)) L’on nommera ce fichier : eleves.xml

Créons maintenant la page HTML de base doctypé en XHTML 1.0 Strict :

Cette page contient une fonction Javascript : update() qui contiendra tout le code JS pour l’ AJAX, une balise DIV nommé contenu où sera affiché la liste des éléves ainsi qu’un bouton nommé update qui appelera notre fonction update().

Il nous reste plus qu’a ecrire le code de notre fonction update() ! Commencons par definir quelques variables que nous initialiserons :

La variable browser nous permet de savoir si l’on utilise IE ou Firefox (and co comme Opera, etc…) ! En fonction du navigateur, l’on utilise soit l’ActiveX Microsoft XMLHTTP et XMLDOM pour IE ou XMLHttpRequest et createDocument pour les amis de Firefox !

Nous allons maintenant télécharger le XML grace a notre objet objXMLHTTP et stocker dans notre objet objXML grace au code :

Il nous reste plus qu’a exploiter le contenu du XML pour l’afficher ! Pour cela nous allons définir une variable out qui contiendra le code HTML a afficher dans notre balise DIV contenu ainsi qu’une variable nbEleves pour contenir le nombre d’eleves afin d’en faire une boucle.

Nous allons maintenant faire une boucle pour le nombre d’eleves de notre fichier XML et remplir notre variable out par le code :

Vous remarquerez que pour récuperer le contenu d’une balise (et non ses attributs) soit ici le nom de l’eleve, cela differt selon le navigateur que l’on utilise. Sous IE nous utilisons la proprieté text alors que sous Firefox & Co c’est la proprieté textContent.

Il nous reste plus qu’a afficher notre variable out dans notre DIV :

J’ai rajouté l’heure, cela est biensur facultatif !!

Vous pouvez vous amusez à modifier le contenu dans notre fichier XML (eleves.xml) et cliquez sur le bouton « Mise a jour AJAX » de notre page pour voir que celle ci se met a jour sans pour autant faire un allé-retour sur le serveur 🙂

Cet exemple est certe très simple mais ouvre les pleins de voie, a vous de faire marcher votre imagination… Moi je dis, vive AJAX 😀

(Page complete : http://sebastien.warin.fr/…/ajax.txt)

Perso,Dev